/* ITZA Show - the stylesheet (spec 12, made concrete).
 *
 * THE CONCEPT: the catalogue, not the poster wall. A film archive's card
 * catalogue crossed with a query console - one bold element per screen,
 * everything else quiet, dense, well-set, out of the way. The identity
 * is typography and density, so every surface is complete and handsome
 * BEFORE any image loads (12.6) - posters are an enhancement, never the
 * substrate.
 *
 * THE LAWS WITH GATES BEHIND THEM (13.3, enforced by smoke_frontend):
 *   - colour lives in the token blocks below and NOWHERE else - no hex
 *     literal outside them
 *   - amber (--film) and teal (--series) mark MEDIUM-scoped things only:
 *     never generic accents, never gradients, never decoration
 *   - NO box-shadow anywhere. Depth is the three surface tones and 1px
 *     hairlines. Focus is outline + outline-offset, never a shadow.
 *     (The sign-in card in app.css is the one sanctioned exception: it
 *     is COPIED across every ITZA app per pillar 02 and is not ours to
 *     restyle.)
 *   - radius 4px inputs/chips, 8px cards/sheets, 0 on posters - do not
 *     round film
 *   - 4px base unit; content column max 1120px
 *   - every surface obeys --text-scale, popups and sheets included
 */

/* =====================================================================
   FONTS - self-hosted, latin subsets, swap. Non-latin scripts render in
   system fonts TODAY; per-language subset loading (spec 12.3) is not
   built yet and lands with the language work - this comment states what
   is, not what is planned (pillar 10).
   ===================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plex-sans-var-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   TOKENS (12.2). Dark is the default room. Amber/teal are DATA - they
   encode medium and are identical in every theme.
   ===================================================================== */

:root {
  --ground: #1B2027;
  --surface: #232A33;
  --surface-high: #2C3540;
  --hairline: #3A4551;
  --ink: #E7EAED;
  --ink-muted: #94A0AD;
  --ink-faint: #64707D;
  --film: #E8A33D;
  --series: #43A99C;
  --focus: #7FA8FF;
  --warn: #D96A5B;

  --display: 'Archivo', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --r-in: 4px;      /* inputs, chips */
  --r-card: 8px;    /* cards, sheets */
  --col: 1120px;
  --text-scale: 1;
  --kb: 0px;        /* keyboard inset, written by nav.js */
}

html[data-theme="light"] {
  --ground: #EDEEF0;
  --surface: #FFFFFF;
  --surface-high: #E4E7EB;
  --hairline: #D2D7DD;
  --ink: #1B2027;
  --ink-muted: #5A6672;
  --ink-faint: #8A94A0;
  --film: #B87614;
  --series: #237A6F;
  --focus: #2B5FD9;
  --warn: #B33A2B;
}

/* High contrast: darker ground, brighter ink, harder hairlines - the
   same layout with the volume up (pillar 10: three themes, all tested). */
html[data-theme="contrast"] {
  --ground: #000000;
  --surface: #10141A;
  --surface-high: #1C232C;
  --hairline: #5A6673;
  --ink: #FFFFFF;
  --ink-muted: #C2CBD4;
  --ink-faint: #8D98A3;
  --film: #FFB84D;
  --series: #54C9BA;
  --focus: #9DBCFF;
  --warn: #FF8272;
}

/* =====================================================================
   BASE
   ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(1rem * var(--text-scale));
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;   /* panes scroll, the body never does */
}

/* Focus is an OUTLINE, always - the box-shadow gate has no exception to
   carve out because nothing legitimate needs one (13.3). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

img { max-width: 100%; display: block; }
/* Posters are film: never rounded (12.4). Width/height attributes are
   the markup's job (12.6); the gate greps for both. */
.poster { border-radius: 0; background: var(--surface-high); }

a { color: var(--ink); }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input, textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  padding: 8px 12px;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* =====================================================================
   TYPE SCALE (12.3). Archivo carries the big moments; the width axis
   compresses long titles instead of shrinking them.
   ===================================================================== */

.t-display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: calc(2.75rem * var(--text-scale));
  line-height: 1.09;
  letter-spacing: -0.02em;
}
h1, .t-h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.875rem * var(--text-scale));
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2, .t-h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.375rem * var(--text-scale));
  line-height: 1.27;
}
h3, .t-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(1.125rem * var(--text-scale));
  line-height: 1.33;
}
small, .t-small {
  font-size: calc(0.875rem * var(--text-scale));
  line-height: 1.5;
}
.t-micro {
  font-size: calc(0.75rem * var(--text-scale));
  line-height: 1.33;
  font-weight: 500;
}
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--mono); }

/* Review bodies: 68ch measure, 1.65 line-height (12.3). */
.prose { max-width: 68ch; line-height: 1.65; }

/* =====================================================================
   SCREENS AND PANES (the nav.js stack)
   ===================================================================== */

.screen { display: none; height: 100%; }
.screen.on { display: block; }

#view { position: relative; height: 100%; overflow: hidden; }

.pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ground);
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--kb));
  transform: translate3d(0, 0, 0);
  transition: transform 240ms cubic-bezier(0.25, 0.8, 0.35, 1);
}
.pane-enter { transform: translate3d(100%, 0, 0); }
.pane-exit { transform: translate3d(100%, 0, 0); }
.pane-under { transform: translate3d(-24%, 0, 0); }
.pane-fade { transition: opacity 120ms linear; }
html[dir="rtl"] .pane-enter,
html[dir="rtl"] .pane-exit { transform: translate3d(-100%, 0, 0); }
html[dir="rtl"] .pane-under { transform: translate3d(24%, 0, 0); }

html[data-motion="reduce"] .pane,
html[data-motion="off"] .pane { transition: none; }

/* The content column: dense and generous with information (12.4). */
.pad { max-width: var(--col); margin: 0 auto; padding: 20px 16px; }

/* =====================================================================
   THE DOCK
   ===================================================================== */

.dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 4px;
  z-index: 40;
}
.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 12px;
  border-radius: var(--r-in);
  color: var(--ink-muted);
  font-size: calc(0.75rem * var(--text-scale));
  font-weight: 500;
}
.dock-btn.on, .dock-btn:hover { color: var(--ink); background: var(--surface-high); }

/* =====================================================================
   CONTROLS
   ===================================================================== */

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: calc(0.9375rem * var(--text-scale));
  padding: 10px 18px;
  border-radius: var(--r-in);
  border: 1px solid var(--hairline);
  background: var(--surface-high);
  color: var(--ink);
  text-align: center;
}
.btn:hover { border-color: var(--ink-faint); }
.btn.gold { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.ghost { background: none; }
.btn.sm { padding: 6px 12px; font-size: calc(0.8125rem * var(--text-scale)); }
.btn.wide { display: block; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.danger { border-color: var(--warn); color: var(--warn); background: none; }

.linklike {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: calc(0.875rem * var(--text-scale));
  padding: 6px 2px;
}
.linklike:hover { color: var(--ink); }

/* Chips: the medium colours are DATA (12.2) - a chip is the one place
   amber and teal appear, and a glance says which half of the catalogue
   something belongs to. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(0.75rem * var(--text-scale));
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-in);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
}
.chip.on { color: var(--ink); border-color: var(--ink-faint); background: var(--surface-high); }
.chip-film { color: var(--film); border-color: var(--film); }
.chip-series { color: var(--series); border-color: var(--series); }

/* =====================================================================
   THE QUERY BAR (9.1) - the sentence that builds, with a live count.
   The hero of home; one bold element, then quiet.
   ===================================================================== */

.qbar {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 16px;
  margin: 16px 0;
}
.qbar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.375rem * var(--text-scale));
  line-height: 1.5;
}
.qbar select, .qbar input {
  width: auto;
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: inherit;
  background: var(--surface-high);
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  padding: 2px 10px;
  color: var(--ink);
}
.qbar input[type="number"] { max-width: 6ch; }
.qbar-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.qbar-count {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: calc(2.75rem * var(--text-scale));
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.qbar-count small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(1rem * var(--text-scale));
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* =====================================================================
   TITLE ROWS AND CARDS - the imageless base layer (12.6). Complete and
   handsome before any image: title in Archivo with the width axis
   working, year, medium chip, state badge. A poster fades in OVER this.
   ===================================================================== */

.vlist { height: 100%; overflow-y: auto; }
.vrow { display: block; }

.trow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
  max-width: var(--col);
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.trow:hover { background: var(--surface); }
.trow-main { flex: 1; min-width: 0; }
.trow-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.0625rem * var(--text-scale));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Long titles COMPRESS before they truncate - the width axis working. */
.trow-title.long { font-stretch: 74%; }
.trow-sub {
  color: var(--ink-muted);
  font-size: calc(0.8125rem * var(--text-scale));
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.trow-year { font-variant-numeric: tabular-nums; }
/* The medium mark: a 3px bar, amber or teal - data, not decoration. */
.trow-medium {
  width: 3px;
  align-self: stretch;
  margin: 10px 0;
  border-radius: 2px;
}
.trow-medium.film { background: var(--film); }
.trow-medium.series { background: var(--series); }

.col-pane { display: flex; flex-direction: column; overflow: hidden; }
.col-pane .pad { flex: none; width: 100%; }
.col-pane #sList { flex: 1; position: relative; min-height: 0; }

/* =====================================================================
   THE CONSOLE (9.2) - the ONLY place Plex Mono appears.
   ===================================================================== */

.console {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 16px;
  margin: 16px 0;
}
.console textarea {
  font-family: var(--mono);
  font-size: calc(0.8125rem * var(--text-scale));
  line-height: 1.6;
  min-height: 120px;
  background: var(--ground);
  resize: vertical;
}
.console-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: calc(0.8125rem * var(--text-scale));
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
}
.console-out {
  font-family: var(--mono);
  font-size: calc(0.75rem * var(--text-scale));
  line-height: 1.6;
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  white-space: pre;
}

/* =====================================================================
   OVERLAYS: scrim, modal, sheet, toast, update bar. All obey
   --text-scale (the standing owner complaint: a popup that ignores the
   text size is a bug, not a detail).
   ===================================================================== */

#scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
#scrim.on { display: flex; }
#modal {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
#modal h3 { margin-bottom: 8px; }
#modal .btn { margin-top: 12px; }

.scrim2 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh;
  overflow-y: auto;
  z-index: 61;
  transform: translateY(0);
  transition: transform 200ms ease-out;
}
.sheet.enter { transform: translateY(100%); }
html[data-motion="reduce"] .sheet,
html[data-motion="off"] .sheet { transition: none; }

#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-high);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: var(--r-in);
  padding: 10px 16px;
  max-width: min(92vw, 480px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
  z-index: 70;
  font-size: calc(0.875rem * var(--text-scale));
}
#toast.on { opacity: 1; pointer-events: auto; }
#toast .toast-act {
  margin-left: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.up-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-high);
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  padding: 8px 12px;
  z-index: 80;
  font-size: calc(0.875rem * var(--text-scale));
}

/* =====================================================================
   MODAL FURNITURE the account flows paint (account.js): the dialog
   head, stacked buttons, the wrote-it-down checkbox, the big warning,
   the inline spinner, the vault code input. Authored-but-never-worn is
   the family's most-repeated defect - these exist BECAUSE a module
   paints them (critic pass; the smoke gate walks painted classes).
   ===================================================================== */

.mhead {
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(1.25rem * var(--text-scale));
  margin-bottom: 8px;
}
.mbtns { display: flex; gap: 10px; margin-top: 16px; }
.mbtns .btn { flex: 1; }
.mbtns-stack { flex-direction: column; }
.obWarnBig {
  border: 1px solid var(--warn);
  border-radius: var(--r-card);
  padding: 12px 14px;
  color: var(--warn);
  margin: 10px 0;
}
.aw-wrote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(0.875rem * var(--text-scale));
  line-height: 1.5;
  margin: 14px 2px;
  cursor: pointer;
}
.aw-wrote input { width: 1.1em; height: 1.1em; margin-top: 0.15em; accent-color: var(--focus); }
.codein {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

/* =====================================================================
   EMPTY STATES AND NOTES - invitations with one action (12.8).
   ===================================================================== */

.empty-note {
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 24px auto;
  text-align: center;
}
.empty-note .btn { margin-top: 12px; }

.fieldErr {
  color: var(--warn);
  font-size: calc(0.875rem * var(--text-scale));
  margin-top: 8px;
}

/* =====================================================================
   THE TEXT-SIZE CONTROL (UI.TextScale - tsc* ids from the lifted ui.js)
   ===================================================================== */

.tsc-wrap { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
.tsc-sample {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 16px;
  margin: 16px 0;
}
.tsc-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0; }
.tsc-row button {
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  width: 48px;
  height: 48px;
  font-family: var(--display);
  background: var(--surface-high);
}
#tscLive { font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* =====================================================================
   MOTION (12.5): response motion only; one orchestrated count-up on
   first load lives in home.js and never repeats. Reduced motion
   removes everything, counter included.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pane, .sheet, #toast { transition: none; }
}


/* =====================================================================
   COMPAT TOKENS for the copied sign-in block below. The block was
   written against Tab's variable names; these map them onto Show's
   tokens (plus the ITZA control-identity brand constants - acting BLUE,
   held NAVY, kept GOLD - which are pillar-10 standards, not Show
   decoration). A TOKEN BLOCK: the hex-literal gate allows hex here and
   in the theme blocks only.
   ===================================================================== */
:root {
  --muted: var(--ink-muted);
  --rule: var(--hairline);
  --paper: var(--surface);
  --danger: var(--warn);
  --serif-display: var(--display);
  --serif-body: var(--sans);
  --body-size: 1rem;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock: 84px;
  --m-quick: 120ms; --m-tap: 80ms;
  --ease-enter: cubic-bezier(0.25, 0.8, 0.35, 1);
  --shadow-float: none;   /* Show has no floating shadows (13.3) */
  --frost: rgba(0, 0, 0, 0.5);
  --hero-art: none;
  /* ITZA control identity (pillar 10): identical across ITZA apps. */
  --accent: #0c7ffb;
  --accent-ink: #ffffff;
  --blue-bright: #0c7ffb;
  --navy: #0b2a4a;
  --gold-ink: #2a2101;
}

/* =====================================================================
   SIGN IN - COPIED 1:1 from ITZA Tab (which carries it from Chess/Chat).
   The same account, the same screen, in every ITZA app on purpose
   (pillar 02). SELF-CONTAINED: the --ob-* palette is scoped to
   #screen-onboard. The ONLY change, as licensed by the block itself,
   is the theme mapping: Show maps dark+contrast to the dark card and
   light to the light card. This block is the ONE sanctioned exception
   to the no-box-shadow gate - it is not ours to restyle.
   ===================================================================== */
/* =====================================================================
   SIGN IN - PORTED 1:1 FROM AN EARLIER ITZA APP, WHICH PORTED IT FROM CHESS/CHAT.
   The same account, the same screen, in every ITZA app on purpose.
   SELF-CONTAINED: the whole palette is scoped to #screen-onboard so the
   card cannot be disturbed by the app's theme and cannot disturb it.
   Light is the base; the DARK variant follows the app's theme attribute,
   and because Tab's DEFAULT theme is deep, the dark card also applies
   when no data-theme is set and when it is 'deep' - that mapping is the
   only change made to any of it.
   ===================================================================== */

#screen-onboard{
  --ob-blue:#0c7ffb; --ob-blue-soft:#1d6fd0; --ob-gold:#f5c711;
  --ob-acc:#0c7ffb; --ob-acc-ink:#ffffff;
  --ob-bg:#f3f4f6; --ob-bg2:#ffffff; --ob-bg3:#f7f7f8;
  --ob-ink:#0b2a4a; --ob-ink2:#1e416b; --ob-ink3:#41618c;
  --ob-line:#d7dbe2; --ob-line2:#c5ccd6; --ob-hover:rgba(12,127,251,.06);
  --ob-card-shadow:0 18px 50px rgba(24,59,103,.12);
  --ob-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ob-r-sm:8px;
  --ob-danger:#c62828;
}
html[data-theme="dark"] #screen-onboard,
html[data-theme="contrast"] #screen-onboard{
  --ob-bg:#0b1f3a; --ob-bg2:#10294a; --ob-bg3:#173058;
  --ob-ink:#e8edf4; --ob-ink2:#9db0c7; --ob-ink3:#5b7089;
  --ob-line:#1e3a63; --ob-line2:#28466f; --ob-hover:rgba(255,255,255,.05);
  --ob-card-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* The light card comes back for the light-room themes. */
html[data-theme="light"] #screen-onboard{
  --ob-bg:#f3f4f6; --ob-bg2:#ffffff; --ob-bg3:#f7f7f8;
  --ob-ink:#0b2a4a; --ob-ink2:#1e416b; --ob-ink3:#41618c;
  --ob-line:#d7dbe2; --ob-line2:#c5ccd6; --ob-hover:rgba(12,127,251,.06);
  --ob-card-shadow:0 18px 50px rgba(24,59,103,.12);
}
#screen-onboard{padding:0}
#screen-onboard.on{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto; overscroll-behavior:contain;
  padding-top:max(16px, var(--safe-t)); padding-bottom:max(16px, var(--safe-b));
  background:linear-gradient(to bottom,#ffffff 0,#ffffff 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
html[data-theme="dark"] #screen-onboard.on,
html[data-theme="deep"] #screen-onboard.on{
  background:linear-gradient(to bottom,#10294a 0,#10294a 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
html[data-theme="paper"] #screen-onboard.on,
html[data-theme="hc"] #screen-onboard.on{
  background:linear-gradient(to bottom,#ffffff 0,#ffffff 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
#screen-onboard .obcard{
  width:100%; max-width:430px; margin:0; text-align:left;
  background:var(--ob-bg2); border:1px solid var(--ob-line); border-radius:22px;
  padding:24px 22px; box-shadow:var(--ob-card-shadow); color:var(--ob-ink);
  /* The FAMILY face, not the platform default: same tokens as every pane.
     13px system-stack shipped once and read as a novice app (owner,
     2026-08-26); the card is the first thing anyone sees. */
  font:15px/1.5 var(--sans);
}
#screen-onboard .hd{display:flex; align-items:center; gap:10px; margin-bottom:10px}
/* The wordmark at card scale: Fraunces, blue-into-gold, the pyramid at its
   side - the same mark every ITZA app wears (spec 8.1). */
#screen-onboard .brand{font-size:clamp(1.55rem, 6vw, 1.9rem); gap:0.55rem; margin:0}
#screen-onboard .brand-mark{width:32px; height:32px}
#screen-onboard .tag{font-size:0.95rem; line-height:1.5; color:var(--ob-ink2); margin-bottom:16px}
#screen-onboard .tag b{color:#8d6f00}
html[data-theme="dark"] #screen-onboard .tag b,
html[data-theme="deep"] #screen-onboard .tag b{color:var(--ob-gold)}
html[data-theme="paper"] #screen-onboard .tag b,
html[data-theme="hc"] #screen-onboard .tag b{color:#8d6f00}
#screen-onboard .pill{font-size:0.6rem; padding:1px 7px; border-radius:99px; border:1px solid var(--ob-line2); color:var(--ob-ink3); text-transform:uppercase; letter-spacing:.05em; font-weight:400}
#screen-onboard label{display:block; margin:14px 0 5px; font-size:0.8rem; color:var(--ob-ink2); font-weight:600; text-align:left}
#screen-onboard label .lbl2{color:var(--ob-ink3); font-weight:400}
#screen-onboard input,#screen-onboard textarea{
  width:100%; font:inherit; font-size:max(1rem, 16px); color:var(--ob-ink); background:var(--ob-bg3);
  border:1px solid var(--ob-line2); border-radius:var(--ob-r-sm); padding:10px 12px; outline:none;
}
#screen-onboard input:focus,#screen-onboard textarea:focus{border-color:var(--ob-acc)}
#screen-onboard ::placeholder{color:var(--ob-ink3)}
#screen-onboard .obtoggle{display:flex; gap:4px; margin-bottom:12px}
#screen-onboard .obtoggle button{flex:1; font-size:0.72rem; padding:6px; border-radius:var(--ob-r-sm); border:1px solid var(--ob-line2); color:var(--ob-ink2); background:none; cursor:pointer}
#screen-onboard .obtoggle button.on{border-color:var(--ob-acc); color:var(--ob-ink); background:var(--ob-hover); font-weight:700}
#screen-onboard .row2{display:flex; gap:8px}
#screen-onboard .row2 .btn,#screen-onboard .row2 input{flex:1; min-width:0}
#screen-onboard .btn{
  background:linear-gradient(135deg,var(--ob-acc),var(--ob-blue-soft)); color:var(--ob-acc-ink);
  font-weight:700; font-size:0.78rem; padding:8px 16px; border-radius:10px; border:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(12,127,251,.22);
}
#screen-onboard .btn:disabled{opacity:.45; cursor:default; box-shadow:none}
#screen-onboard .btn.ghost{background:var(--ob-bg3); color:var(--ob-ink); border:1px solid var(--ob-line2); font-weight:600; box-shadow:none}
#screen-onboard .btn.gold{background:var(--ob-gold); color:#231c00; box-shadow:none}
#screen-onboard .btn.wide{width:100%}
#screen-onboard .feenote{font-size:0.63rem; color:var(--ob-ink3); text-align:left; margin-top:0}
#screen-onboard .feenote b{color:var(--ob-ink2)}
#screen-onboard .linklike{display:block; margin:14px auto 0; background:none; border:none; color:var(--ob-blue); font-size:0.75rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
#screen-onboard .qrframe{display:flex; justify-content:center; margin:6px 0 2px}
#screen-onboard #obQrBox{width:190px; height:190px; border-radius:12px; background:#fff; border:1px solid var(--ob-line); display:flex; align-items:center; justify-content:center; position:relative}
#screen-onboard #obQrBox .qrph{font-family:var(--ob-mono); font-size:2.1rem; color:var(--ob-line2); letter-spacing:2px}
#screen-onboard #obQrBox svg{width:100%; height:100%; display:block; border-radius:10px}
#screen-onboard .keybox{font-family:var(--ob-mono); font-size:0.66rem; background:var(--ob-bg3); border:1px dashed var(--ob-line2); border-radius:var(--ob-r-sm); padding:8px; word-break:break-all; user-select:all; color:var(--ob-ink)}
#screen-onboard .savekey{display:flex; gap:8px; align-items:flex-start; margin-top:9px; font-size:0.72rem; color:var(--ob-ink2)}
#screen-onboard .savekey input{width:auto; margin-top:2px}
#screen-onboard .settingsec{border-top:1px solid var(--ob-line); margin-top:12px; padding-top:10px}
#screen-onboard .settingsec h4{font-size:0.69rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ob-ink3); margin-bottom:6px}
#screen-onboard .spinner{display:inline-block; width:13px; height:13px; border:2px solid var(--ob-line2); border-top-color:var(--ob-blue); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:4px}

/* The two ways in: both full width so neither reads as the small option;
   the vault one is ghost so the lead is unambiguous. */
#screen-onboard #obChoose{ display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
#screen-onboard #obChoose .btn{ height:46px; font-size:0.94rem; font-weight:700; }
#screen-onboard #obBack{ margin-top:0; margin-bottom:10px; display:inline-block; }

/* ---- password fields: show/hide, and problems stated in place ----
   The eye sits INSIDE the field's box (the input reserves room for it
   via padding-right) so it never reflows the form when it appears. */
.pwwrap{ position:relative; display:block; }
.pwwrap input{ width:100%; padding-right:44px; }
.pweye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--ob-ink3, var(--muted)); cursor:pointer; padding:0;
  background:none; border:none;
}
#screen-onboard .pweye:hover{ color:var(--ob-ink); background:var(--ob-hover); }
.pweye svg{ width:20px; height:20px; display:block; }
.pweye.on{ color:var(--ob-acc, var(--accent)); }
/* In Arabic and Hebrew the text starts on the RIGHT, so an eye pinned to
   the right sits on top of it. Mirror the whole arrangement, padding
   included. The onboarding card restyles its inputs behind an ID, which
   outranks a plain class rule - so the room for the eye is reserved at
   the same specificity, in both directions. */
html[dir="rtl"] .pwwrap input{ padding-right:12px; padding-left:44px; }
html[dir="rtl"] .pweye{ right:auto; left:6px; }
#screen-onboard .pwwrap input{ padding-right:44px; }
html[dir="rtl"] #screen-onboard .pwwrap input{ padding-right:9px; padding-left:44px; }

#screen-onboard .fieldErr{ color:#c62828; border-color:#c62828; background:rgba(198,40,40,.07); }
html[data-theme="dark"] #screen-onboard .fieldErr,
html[data-theme="deep"] #screen-onboard .fieldErr,

html[data-theme="hc"] #screen-onboard .fieldErr{ color:#8c0000; border-color:#8c0000; background:rgba(140,0,0,.10); }
#screen-onboard input.err{ border-color:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.16); }

/* =====================================================================
   END SIGN IN (COPIED 1:1). Everything BELOW is Show's own styling
   again and the visual gates (13.3) apply to it: no box-shadow, no hex
   outside token blocks, amber/teal only medium-scoped. The lifted
   family components that follow (settings rows, switches, swatches,
   firstrun, language card) are USED by Show and therefore RESTYLED to
   Show's laws where they disagreed.
   ===================================================================== */