/* ============================================================================
   WPPBX(TM) signed-out shell, v1. Load AFTER tokens.css, type.css and base.css.

   ONE stylesheet for every sign-in surface in the estate. There are eight of
   them across four applications and each used to carry its own inline copy of
   the same card, the same field and the same button, drifting apart quietly.
   This estate already has four byte-identical stylesheets that stopped being
   identical; that is what this file exists to prevent happening again.

   No navigation lives here on purpose. Somebody at the sign-in door has nowhere
   to go, and a rail would advertise the shape of the product to anyone who
   loads the page.

   The two INTERACTIVE heights are the deliberate exception to the type and size
   rules: a stranger opens this on a phone, so the input and the button both
   clear --tap-min.
   ============================================================================ */

.gate{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--s6) var(--s4);gap:var(--s5)}
.gate-head{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.gate-brand{display:flex;align-items:center;gap:var(--s2)}
.gate-mark{width:34px;height:34px;color:var(--pri);flex:0 0 auto}
.gate-name{font-family:var(--font-sans);font-size:16px;font-weight:700;color:var(--ink)}
.gate-sub{font-size:13px;color:var(--ink3);text-align:center}

.gate-card{width:100%;max-width:392px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.gate-card h1{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--ink)}
.gate-card p.lede{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;color:var(--ink2)}
.field input,.field select{height:44px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--bg);padding:0 var(--s3);
  font-size:14px;color:var(--ink);width:100%}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--pri);
  outline-offset:1px;border-color:var(--pri)}
.field .hint{font-size:11.5px;color:var(--ink3);line-height:1.45}
.field input::placeholder{color:var(--ink3)}

/* A one-time code is read back digit by digit, so it is spaced and centred. */
.code-in{font-family:var(--font-mono);font-size:22px !important;letter-spacing:.34em;
  text-align:center;height:52px !important}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;
  padding:0 18px;border-radius:var(--r-pill);background:var(--pri);color:var(--priInk);
  font-size:14.5px;font-weight:700;border:0;cursor:pointer;width:100%;
  text-decoration:none}
.btn:hover{background:var(--priHover);color:var(--priInk)}
.btn.ghost{background:var(--surf2);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surf3);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.flash{border-radius:var(--r-chip);padding:11px var(--s3);font-size:13.5px;line-height:1.45}
.flash.ok,.flash.success{background:var(--okSoft);color:var(--ok)}
.flash.bad,.flash.error,.flash.danger{background:var(--alertSoft);color:var(--alert)}
.flash.warn,.flash.warning{background:var(--warnSoft);color:var(--warn)}
.flash.info{background:var(--infoSoft);color:var(--info)}

.envchip{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:3px 9px;
  border-radius:var(--r-pill);background:var(--warnSoft);color:var(--warn);
  border:1px solid var(--warn);letter-spacing:.08em}

/* The QR sits on a permanently white panel whatever the theme. A code drawn in
   theme colours over a dark card has no contrast between its modules and the
   quiet zone, and cameras cannot read it. */
.qr-panel{background:#fff;border-radius:var(--r-card);padding:14px;align-self:center;
  line-height:0;box-shadow:var(--shadow)}
.qr-panel img,.qr{display:block;width:200px;height:200px;image-rendering:pixelated}

.secretbox{font-family:var(--font-mono);font-size:15px;letter-spacing:.14em;
  background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:var(--s3);word-break:break-all;text-align:center;color:var(--ink)}
.codegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.codegrid code{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;
  background:var(--surf2);border:1px solid var(--line);border-radius:7px;
  padding:9px 6px;text-align:center;color:var(--ink)}

.warnbox{background:var(--alertSoft);border:1px solid var(--alert);
  border-radius:var(--r-chip);padding:var(--s3);display:flex;flex-direction:column;gap:5px}
.warnbox strong{font-size:12.5px;color:var(--alert)}
.warnbox span{font-size:12px;line-height:1.5;color:var(--alert)}

.fallback{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:2px}
.fallback summary{font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:6px}
.fallback summary::-webkit-details-marker{display:none}
.fallback summary::before{content:"+";font-family:var(--font-mono);color:var(--ink3)}
.fallback[open] summary::before{content:"\2212"}
.fallback-in{display:flex;flex-direction:column;gap:9px;padding-top:var(--s3)}
.fallback-in p{font-size:12px;line-height:1.5;color:var(--ink3);margin:0}

.foot{font-size:11.5px;color:var(--ink3);text-align:center;line-height:1.5;margin:0}
.foot a{color:var(--pri)}