/* THE RELEASE'S DRESS, at the two front doors (ARCHITECTURE §137).

   Since release 0.2.14 the desktop app wears the website ("the app wears the
   website", harness PR #195): white paper, near-black ink, one indigo
   accent; Instrument Sans for the interface, Spectral for the wordmark and a
   page title and nothing else, JetBrains Mono for codes and keys. Square
   website buttons were NOT ported, and are not here either: the shapes stay
   the app's own (8px controls, 12px cards). The sign-in pages are where a
   person leaves that app and comes back to it, and the API console is the
   product's other front door, so both wear exactly what the app wears.

   ONE SHEET, TWO READERS. The Jinja auth pages link it and put `app-dress` on
   <body>; the React API console imports it from Api.css and puts
   `app-dress` on its root. One file, so the two doors cannot drift. The
   faces are RELATIVE urls on purpose: served from /static they resolve to
   /static/fonts, and when Vite bundles this file it rebases the same lines
   and hashes the faces into the console's own assets (the desktop build
   loads from the app's protocol, where an absolute /static path would not
   exist).

   TOKENS, NOT RULES. `.app-dress` re-points the console's OWN token names
   (base.html :root) at the release palette, so every rule already written
   against them -- chat.css's auth card, the API console's sheet -- changes
   colour without being restated. The few names the console never had
   (--primary, --field, --protect, --panel, --wash, --selected, --well,
   --track, --seg-*, --bad-line) are introduced here, and a rule that may run
   outside this scope reads them with a fallback.

   THE READER STILL PICKS, never the OS: Warm (the default) and Contrast get
   the light release, Navy gets its dark column. Contrast keeps its one
   promise, a dark sidebar, wherever there is a sidebar (the API rail). */

@font-face { font-family:"Spectral"; font-weight:400; font-style:normal; font-display:swap;
             src:url("fonts/spectral-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-weight:500; font-style:normal; font-display:swap;
             src:url("fonts/spectral-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-weight:600; font-style:normal; font-display:swap;
             src:url("fonts/spectral-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:400 700; font-display:swap;
             src:url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap;
             src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap;
             src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------- light --- */
/* The harness's light column (brand/tokens.ts), value for value. */
.app-dress {
  color-scheme:light;
  --canvas:#fff; --canvas-2:#F7F8FA; --paper:#F7F8FA; --surface:#fff;
  --side:#F7F8FA; --hair:rgba(16,17,20,.10);
  --border:rgba(16,17,20,.14); --border-2:rgba(16,17,20,.20);
  --ink:#101114; --ink-2:#33363D; --graphite:#5C6069; --faint:#666A73;
  --accent:#4A63C8; --accent-strong:#3B52B0; --accent-tint:rgba(74,99,200,.10);
  --ok:#2F6B45; --ok-ink:#2F6B45; --ok-tint:#EAF0EC; --ok-line:#A1BCAB;
  --warn:#8a6516; --warn-tint:#F1EDE3;
  --bad:#a63d40; --bad-tint:#F6ECEC; --bad-line:#DBB1B3;
  --hover:rgba(16,17,20,.05); --hover-2:rgba(16,17,20,.08);
  --on-accent:#fff; --scrim:rgba(16,17,20,.42);
  --code-bg:#F7F8FA; --code-ink:#101114;
  --e1:0 1px 2px rgba(16,17,20,.05);
  --e2:0 10px 24px -14px rgba(16,17,20,.4), 0 1px 0 rgba(16,17,20,.04);
  --e3:0 0 1px 0 rgba(16,17,20,.2), 0 12px 30px 0 rgba(16,17,20,.1);
  --r-btn:8px;
  /* The release's own roles, which the console had no name for. */
  --primary:#050505; --primary-hover:#33363D; --on-primary:#fff;
  --field:rgba(16,17,20,.45);           /* an input's edge: 3:1 on paper */
  --protect:#2F8F5B;                    /* a mark, never text */
  --panel:#EEF0F4; --wash:#F7F8FA; --selected:#EEF0F4; --well:#F7F8FA;
  --track:rgba(16,17,20,.20); --seg-track:#EEF0F4; --seg-on:#fff;
  /* The sidebar set, as base.html names it. */
  --s-bg:#F7F8FA; --s-ink:#101114; --s-muted:#33363D; --s-strong:#101114;
  --s-hover:rgba(16,17,20,.05); --s-active:#EEF0F4; --s-hair:rgba(16,17,20,.10);
  --s-avatar:#101114; --s-avatar-ink:#fff; --s-brand:#101114; --brand:#101114;
  --font-display:"Spectral",Georgia,"Times New Roman",serif;
  --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* Contrast: the light page with the release's black rail beside it. */
:root[data-theme="contrast"] .app-dress {
  --s-bg:#050505; --s-ink:#F4F5F7; --s-muted:#A9AEB8; --s-strong:#fff;
  --s-hover:rgba(255,255,255,.08); --s-active:#23262E; --s-hair:rgba(255,255,255,.10);
  --s-avatar:#23262E; --s-avatar-ink:#F4F5F7; --s-brand:#F4F5F7;
}

/* -------------------------------------------------------------- dark --- */
/* Navy becomes the harness's dark column. Every text ink keeps 4.5:1 on the
   surface it sits on (#15171D), as the light set does on paper. */
:root[data-theme="navy"] .app-dress {
  color-scheme:dark;
  --canvas:#0B0C0F; --canvas-2:#15171D; --paper:#15171D; --surface:#15171D;
  --side:#050505; --hair:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.14); --border-2:rgba(255,255,255,.16);
  --ink:#F4F5F7; --ink-2:#A9AEB8; --graphite:#969BA5; --faint:#868B95;
  --accent:#7086E3; --accent-strong:#8B9CE8; --accent-tint:rgba(139,156,232,.18);
  --ok:#6fbb92; --ok-ink:#6fbb92; --ok-tint:#15241C; --ok-line:#3D6B52;
  --warn:#d2a765; --warn-tint:#2A2318;
  --bad:#e08f91; --bad-tint:#2B1A1B; --bad-line:#6E4244;
  --hover:rgba(255,255,255,.08); --hover-2:rgba(255,255,255,.14);
  --on-accent:#0B0C0F; --scrim:rgba(0,0,0,.6);
  --code-bg:#15171D; --code-ink:#F4F5F7;
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 10px 24px -14px rgba(0,0,0,.8);
  --e3:0 0 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.5);
  --primary:#F4F5F7; --primary-hover:#C9CDD4; --on-primary:#15171D;
  --field:rgba(255,255,255,.38); --protect:#36D37E;
  --panel:#1C1F26; --wash:#1C1F26; --selected:#23262E; --well:#0B0C0F;
  --track:rgba(255,255,255,.22); --seg-track:#0B0C0F; --seg-on:#23262E;
  --s-bg:#050505; --s-ink:#F4F5F7; --s-muted:#A9AEB8; --s-strong:#fff;
  --s-hover:rgba(255,255,255,.08); --s-active:#23262E; --s-hair:rgba(255,255,255,.08);
  --s-avatar:#23262E; --s-avatar-ink:#F4F5F7; --s-brand:#F4F5F7; --brand:#F4F5F7;
}

/* The release draws focus in ink, not in the accent. */
.app-dress :focus-visible { outline-color:var(--ink); }

/* ============================================================ sign-in === */
/* Everything below is for the Jinja pages (auth.html, the device handoff,
   the ready page, the legal gate, the join and source-connected pages).
   The card's rules are prefixed `.app-dress .auth-app` so they outrank
   chat.css's own `auth-app` skin whichever sheet loads last. The button
   rules are not: `.app-dress .btn.primary` TIES with chat.css's
   `.auth-app .btn.primary` and wins by coming after it, which is why every
   page links this sheet second (test_app_dress pins the order). */

/* The site header, on the one auth page that keeps it (a sign-in reached
   from the landing page): the website's own lockup -- the ring and the
   wordmark in Spectral 500 -- and no tagline beside it, as on the site. */
.app-dress header.site { height:70px; padding:0 24px; gap:26px;
  background:var(--canvas); border-bottom:0;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
.app-dress header.site > a { display:flex; align-items:center; }
.app-dress header.site .brand { display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:500; font-size:23px;
  line-height:1; letter-spacing:-.01em; color:var(--ink); }
.app-dress header.site .brand::before { content:""; width:18px; height:18px;
  flex:none; border:2.5px solid currentColor; border-radius:50%; }
.app-dress header.site .tag { display:none; }

/* The card: the app's 12px layer on a hairline, lifted by the release's
   level-2 shadow. It grows with its form and the PAGE scrolls: a fixed
   max-height scrolled the sign-up form inside the card, hiding the Google
   button under its own bottom edge. */
.app-dress .auth-page.auth-app { padding:28px 16px 40px; }
.app-dress .auth-app .auth-card { width:440px; max-width:100%; max-height:none;
  overflow:visible; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--e2); padding:32px 36px 26px; }

/* The lockup, as the website's header draws it: ring and wordmark on one
   line, the card's sentence under both. */
.app-dress .auth-app .auth-brand { flex-direction:row; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:0 10px; margin-bottom:18px; }
.app-dress .auth-app .auth-mark { width:20px; height:20px; flex:none;
  border:3px solid currentColor; border-radius:50%; background:transparent;
  color:var(--ink); }
.app-dress .auth-app .auth-name { font-family:var(--font-display); font-weight:500;
  font-size:26px; line-height:32px; letter-spacing:-.01em; color:var(--ink); }
.app-dress .auth-app .auth-tag { flex-basis:100%; margin-top:6px; text-align:center;
  font-family:inherit; font-size:13.5px; line-height:1.5; letter-spacing:0;
  text-transform:none; color:var(--ink-2); }

.app-dress .auth-app .auth-note { padding:0; background:transparent; font-weight:400;
  font-size:13px; line-height:1.55; color:var(--ink-2); }
.app-dress .auth-app .auth-note b { color:var(--ink); font-weight:600; }
/* A note INSIDE a form explains the field above it, so it sits under that
   field's left edge instead of centring itself across the card. */
.app-dress .auth-app .auth-form .auth-note { margin:6px 0 0; text-align:left;
  font-size:12px; color:var(--graphite); }
.app-dress .auth-app .auth-error { margin:0 0 14px; padding:9px 12px;
  border:1px solid var(--bad-line); border-radius:8px; background:var(--bad-tint);
  color:var(--bad); font-size:12.5px; font-weight:500; }

/* Sign in / Create account: the release's segmented control. */
.app-dress .auth-app .auth-tabs { gap:3px; padding:3px; margin-bottom:18px;
  background:var(--seg-track); border:0; border-radius:10px; }
.app-dress .auth-app .auth-tabs label { margin:0; padding:7px 6px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:color .15s ease, background-color .15s ease; }
.app-dress .auth-app .auth-tabs label:hover { color:var(--ink); }
.app-dress .auth-app #auth-in:checked ~ .auth-tabs label[for="auth-in"],
.app-dress .auth-app #auth-up:checked ~ .auth-tabs label[for="auth-up"] {
  background:var(--seg-on); color:var(--ink); font-weight:600;
  box-shadow:0 0 0 1px var(--border), 0 1px 2px rgba(16,17,20,.06); }

/* Fields: the release's input, edged in --field so it reads as a box. */
.app-dress .auth-app .auth-form label:not(.auth-consent) { margin:12px 0 5px;
  font-size:12.5px; font-weight:500; color:var(--ink-2); }
.app-dress .auth-app .auth-form label .muted { font-weight:400; color:var(--graphite); }
.app-dress .auth-app .auth-form input:not([type="checkbox"]) { padding:9px 11px;
  font-size:13.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--field); border-radius:8px; box-shadow:none; }
.app-dress .auth-app .auth-form input:not([type="checkbox"]):focus,
.app-dress .auth-app .auth-form input:not([type="checkbox"]):focus-visible {
  outline:2px solid var(--ink); outline-offset:1px; border-color:var(--field);
  box-shadow:none; }
.app-dress .auth-app .auth-form input[readonly] { background:var(--wash); color:var(--ink-2); }
.app-dress .auth-app .auth-form label.auth-consent { margin-top:14px;
  font-size:12.5px; font-weight:400; color:var(--ink-2); }
.app-dress .auth-app input[type="checkbox"] { accent-color:var(--primary); }

/* Buttons: ink primary, outlined secondary, no glow and no brightness
   filter on hover -- the colour moves instead, as in the app. The line
   height is STATED because a <button> and an <a class="btn"> do not agree on
   one: the button takes the browser's `normal`, the link inherits the page's,
   so "Continue with Google" sat taller than "Sign in" above it and "Start
   over" taller than "Accept and continue" beside it. */
.app-dress .btn { border-radius:8px; font-weight:500; box-shadow:none; line-height:1.3;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.app-dress .btn:hover { filter:none; box-shadow:none; }
.app-dress .btn.primary { background:var(--primary); color:var(--on-primary);
  border:1px solid transparent; }
.app-dress .btn.primary:hover { background:var(--primary-hover); }
.app-dress .btn.ghost { background:var(--surface); color:var(--ink);
  border:1px solid var(--border-2); }
.app-dress .btn.ghost:hover { background:var(--wash); border-color:var(--border-2); }
.app-dress .auth-app .auth-form .btn,
.app-dress .auth-app .auth-resend .btn { padding:10px 14px; font-size:13.5px; }

.app-dress .auth-app .auth-or { margin-top:16px; font-family:inherit; font-size:12px;
  letter-spacing:0; text-transform:none; color:var(--faint); }
.app-dress .auth-app .auth-or::before,
.app-dress .auth-app .auth-or::after { background:var(--hair); }
.app-dress .auth-app .auth-google { margin-top:12px; padding:10px 14px; font-size:13.5px; }
.app-dress .auth-app .auth-foot { margin-top:18px; font-family:inherit; font-size:12.5px;
  letter-spacing:0; color:var(--faint); }

@media (max-width:560px) {
  .app-dress header.site { height:60px; padding:0 16px; }
  .app-dress header.site .brand { font-size:21px; }
  .app-dress .auth-page.auth-app { padding:12px 0 28px; }
  .app-dress .auth-app .auth-card { padding:26px 20px 22px; }
}