/* ============================================================================
   The sign-in gate.

   Kept out of shell.css on purpose: that file is a byte-for-byte copy of the
   shell's original stylesheet and is verified as such. Everything the gate adds
   lives here.

   It borrows the shell's tokens rather than defining colours, so it follows the
   light/dark switch for free. Nothing here is themed independently.

   While the gate is up, body carries .gated: the appbar and #below are hidden
   and the gate takes the screen. Same idiom as .dark and .shut.
   ========================================================================== */

#loginGate{display:none}
body.gated .appbar,
body.gated #below{display:none}
body.gated #loginGate{
  display:flex;align-items:center;justify-content:center;
  flex:1;min-height:0;padding:24px;background:var(--bg)}

/* the card ---------------------------------------------------------------- */
.gcard{
  width:min(370px,92vw);background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:30px 28px 26px;
  box-shadow:0 1px 2px rgba(26,22,16,.05),0 8px 24px rgba(26,22,16,.06)}
body.dark .gcard{box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}

/* the wordmark sits above the card's own heading, at the rail's width so it
   reads as the same mark the appbar shows once you are through. */
.gbrand{display:flex;justify-content:center;margin-bottom:22px}
.gbrand img{width:200px;height:auto;display:block}
.gbrand .gsym{display:none}
body.dark .gbrand .glight{display:none}
body.dark .gbrand .gdark{display:block}
.gbrand .gdark{display:none}

.gcard h1{
  margin:0 0 4px;font-size:17px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.gcard .gsub{margin:0 0 20px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* fields ------------------------------------------------------------------ */
.gfld{display:block;margin-bottom:14px}
.gfld span{
  display:block;font-size:11.5px;font-weight:600;color:var(--muted);
  margin-bottom:5px;letter-spacing:.02em}
.gfld input{
  width:100%;box-sizing:border-box;font:inherit;font-size:13px;
  padding:8px 10px;color:var(--txt);background:var(--bg);
  border:1px solid var(--line2);border-radius:7px;outline:none}
.gfld input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-light)}
body.dark .gfld input:focus{box-shadow:0 0 0 3px rgba(209,157,19,.18)}
.gfld input:disabled{opacity:.55}

/* the button -------------------------------------------------------------- */
.gbtn{
  width:100%;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:9px 12px;margin-top:4px;border:1px solid var(--gold-dark);
  border-radius:7px;color:#fff;background:var(--gold)}
.gbtn:hover{background:var(--gold-dark)}
.gbtn:disabled{cursor:default;opacity:.6}

/* messages --------------------------------------------------------------- */
/* Red is used here for a failure, not for "late" — the shell's rule about red
   never filling a shape still holds: this is a tinted strip, not a solid. */
.gmsg{
  font-size:12px;line-height:1.5;padding:8px 10px;border-radius:7px;
  margin:0 0 14px;border:1px solid transparent}
.gmsg.bad{color:var(--today);background:color-mix(in srgb,var(--today) 9%,var(--bg));
  border-color:color-mix(in srgb,var(--today) 26%,var(--bg))}
.gmsg.good{color:var(--ok-tx);background:color-mix(in srgb,var(--ok-tx) 9%,var(--bg));
  border-color:color-mix(in srgb,var(--ok-tx) 26%,var(--bg))}

/* the quiet link under the button ---------------------------------------- */
.gfoot{margin:16px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.glink{
  font:inherit;font-size:12px;padding:0;border:none;background:none;cursor:pointer;
  color:var(--goldtxt);text-decoration:underline;text-underline-offset:2px}
.glink:hover{color:var(--gold-dark)}

/* first paint ------------------------------------------------------------- */
/* Until boot decides, show neither the app nor the gate: a flash of the shell
   before a redirect to sign-in is worse than a blank moment. */
body.booting .appbar,
body.booting #below,
body.booting #loginGate{visibility:hidden}