/* Chairfly sign-in concepts — shared foundation.
   Tokens copied literally from DESIGN-AUTHORITY.md §2. Copy, never eyeball. */

@font-face{font-family:'Inter';src:url(/assets/inter-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(/assets/newsreader-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --bg:#F2F4F8; --bg-alt:#E9EBEF; --bg-deep:#DEE0E5;
  --text:#232B36; --text-mid:#4A5565; --text-muted:#707B8C; --text-faint:#8C97A6;
  --accent:#2F6FA3; --accent-strong:#2F6FA3; --accent-faint:rgba(35,43,54,.05);
  --accent-hover:#265C88; --on-accent:#FFFFFF;
  --green-bright:#2F9A5F; --amber:#A4631E; --red:#C24B42; --gold:#A9853E;
  --green-soft:#E6F2EA; --amber-soft:#F6EDDA; --gold-soft:#F1E9DA;
  --line:#C7CAD0; --bar:rgba(242,244,248,.88);
  --panel:#FFFFFF;
  --btn-tone:rgba(0,0,0,.05); --btn-tone-hover:rgba(0,0,0,.08);
  --serif:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono','Fira Code',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  /* LAW 7 — light is border-defined and flat. */
  --lift:none;
}
html[data-theme="dark"]{
  --bg:#0B0F16; --bg-alt:#141C27; --bg-deep:#1B2431;
  --text:#E6EBF2; --text-mid:#B9C2D0; --text-muted:#8A94A6; --text-faint:#717A8A;
  --accent:#9DBBDD; --accent-strong:#6E8FB4; --accent-faint:rgba(157,187,221,.10);
  --accent-hover:#AEC9E5; --on-accent:#0B0F16;
  --green-bright:#96C0A1; --amber:#DCA46A; --red:#DA8F8F; --gold:#C9A961;
  --green-soft:#17241E; --amber-soft:#272115; --gold-soft:#27200F;
  --line:#27313F; --bar:rgba(11,15,22,.88);
  --panel:#10161F;
  --btn-tone:rgba(255,255,255,.05); --btn-tone-hover:rgba(255,255,255,.09);
  /* dark may lift */
  --lift:0 1px 0 rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:grid; place-items:center;
  transition:background .25s var(--ease), color .25s var(--ease);
}

/* FOCUS LAW — browser default is dead; designed, keyboard-only, buttons and links.
   No text fields on this screen, so nothing rings. */
*:focus{outline:none}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:1.5px solid var(--accent); outline-offset:2px; border-radius:5px;
}

/* Wordmark — the app's own treatment. The period is the one decorative accent. */
.wm{font-family:var(--serif); letter-spacing:-.01em; color:var(--text); margin:0}
.wm span{color:var(--accent)}

/* BUTTON LAW — tone-on-tone. The sign-in button is not a coloured slab.
   Google's colour is contained to the 17px mark; the type is ours. */
.gbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:500 14px/1 var(--sans); color:var(--text);
  background:var(--btn-tone); border:1px solid var(--line); border-radius:8px;
  padding:12px 18px; cursor:pointer; white-space:nowrap;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.gbtn:hover{background:var(--btn-tone-hover); border-color:var(--text-faint)}
.gbtn:active{transform:translateY(.5px)}
.gbtn svg{width:17px; height:17px; flex:none}

.assure{font:400 12px/1.5 var(--sans); color:var(--text-faint); margin:0}

/* Theme switch — the app's exact treatment. Mockup affordance; placement on a
   chrome-less screen is an open question, not a design claim. */
#themesw{
  position:fixed; top:18px; right:18px;
  display:flex; border:1px solid var(--line); border-radius:7px; padding:2px; gap:2px;
}
#themesw button{
  border:none; background:none; padding:3px 11px; border-radius:5px;
  font:600 12px var(--sans); color:var(--text-muted); cursor:pointer; letter-spacing:.02em;
}
#themesw button[aria-pressed="true"]{background:var(--btn-tone); color:var(--text)}

/* LAW 5 — ONE motion. The whole composition resolves and mounts as a single change. */
.mount{animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .mount{animation:none} }
body.rm .mount{animation:none}

/* Door page — copied literally from locked door.html */
body{align-content:center}
.col{width:472px; margin-top:-4vh}
.wm{font-size:21px; line-height:1; color:var(--text-mid)}

/* The words. On the rotating door its height is locked in JS so the button
   below can never move under a reaching cursor. */
.block{margin:24px 0 0; opacity:1; transition:opacity .45s var(--ease)}
.block[data-out="1"]{opacity:0}

/* The hello has no sub. In a block locked to the tallest pair it would sit
   above a subtitle-shaped hole and read as a line that failed to load;
   centred, the held space sits above and below it and reads as a beat. */
.block[data-hello="1"]{display:flex; flex-direction:column; justify-content:center}

/* The hero is the one element allowed off the 472px measure. Three beats can
   never share a line inside the column — the run needs 857px at this size — so
   holding the hero to the column split a beat across two lines on every screen,
   not just narrow ones. It reaches to 560px, which is what the litany's longest
   authored line needs, and never past the viewport. Every other hero is hand
   broken and its longest line is under 472px, so nothing else moves. */
.claim{
  font:400 34px/1.16 var(--serif); letter-spacing:-.02em; color:var(--text); margin:0;
  width:max-content; max-width:min(560px, calc(100vw - 44px));
}
.sub{font:400 15px/1.55 var(--sans); color:var(--text-mid); margin:14px 0 0}

/* The maxim — the regular's line. Serif, because it's a saying, not UI copy.
   Quieter than the greeting above it: it accompanies, it doesn't announce. */
.maxim{font:400 17px/1.5 var(--serif); color:var(--text-muted); margin:16px 0 0}

/* The error code. Mono because it is a literal string you might read out to
   support — not decoration. */
.detail{font:400 12px/1.5 var(--mono); color:var(--text-faint); margin:12px 0 0}

/* The record, on the lapsed door. Its whole job is "your work survived this",
   so it is evidence: labelled rows, hairline-bounded, no card, no colour. */
.ledger{margin:20px 0 0; border-top:1px solid var(--line)}
.ledger .row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.ledger .k{font:400 13px/1.4 var(--sans); color:var(--text-muted)}
.ledger .v{font:500 13px/1.4 var(--sans); color:var(--text)}
.ledger .v em{font-style:normal; font-weight:400; color:var(--text-faint)}

/* The one thing on the lapsed door that is NOT part of the kept record: what
   has gone past review while they were away. It sits below the ledger and
   above the button because that gap is where the screen otherwise says
   nothing at all. The count carries amber on the annunciator rule — caution,
   something needs attention — and nothing else on this screen may take that
   channel. */
.note{font:400 13px/1.5 var(--sans); color:var(--text-mid); margin:16px 0 0}
.note b{font-weight:500; color:var(--amber)}

.act{margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
/* display:flex beats [hidden] — without this the states with no action render
   an empty button-shaped ghost. */
.act[hidden], .gbtn[hidden]{display:none}
.gbtn[disabled]{opacity:.55; cursor:default}
.gbtn[disabled]:hover{background:var(--btn-tone); border-color:var(--line)}

/* The escape hatch. A text link, never a second button — there is one action
   on this screen and a second slab would argue with it. */
.tlink{
  font:400 13px/1 var(--sans); color:var(--text-muted);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px;
  cursor:pointer;
}
.tlink:hover{color:var(--text); border-bottom-color:var(--line)}

/* The holdline — appears only if Google is slow. Never on time. */
.hold{font:400 13px/1.5 var(--sans); color:var(--text-muted); margin:14px 0 0}

/* Review chrome. Not part of the design. */
#nav{
  position:fixed; left:18px; bottom:16px; display:flex; gap:2px; flex-wrap:wrap;
  max-width:60vw;
}
#nav a{
  font:500 11px/1 var(--sans); letter-spacing:.02em; color:var(--text-faint);
  text-decoration:none; padding:5px 8px; border-radius:5px;
}
#nav a:hover{color:var(--text-mid); background:var(--btn-tone)}
#nav a[aria-current="page"]{color:var(--text); background:var(--btn-tone)}

@media (max-width:520px){
  .col{width:auto; padding:0 22px; margin-top:0}
  .claim{font-size:28px}
  #nav{display:none}
}