/* ──────────────────────────────────────────────────────────────────────────────────────────────────────
   VRAELIS — AUTHENTICATED token layer (design 08, the black console, 2026-10-01; design 07 was light)
   Scoped to [data-surface="app"]. Loaded only inside the authenticated + auth layouts.

   WHAT THIS FILE DOES, AND THE RULE IT KEEPS.

   It remaps the LIVE vocabulary the product components actually read (--bg-*, --fg-*, --acc*, --line-*,
   --ok/--warn/--err, the state triads, --shadow-*) and introduces no private names. An earlier version
   declared a careful theme nothing referenced, so the product had never been themed at all.
   scripts/contrast-verify.ts now fails if a token declared below is unused, and measures every pair the
   product renders, so this file cannot rot back into a theme nothing wears.

   WHY LIGHT, AS OF 2026-09-30.

   Design 06 made the console graphite: one near-black plane, white type, and no hue anywhere except a
   verdict. The founder's verdict on it was that it was "too bland" with "the colours weirdly put", and that
   it should feel like Vanta or Tailscale. Both of those are light consoles, and the audit behind this change
   found why the graphite one read as bland: page and card differed by 1.06:1, shadows were invisible, the
   three grey steps were one grey, and when nothing was failing the page had no colour at all.

   So the grammar is now the one serious B2B consoles share. A light grey page, white cards with a hairline
   and a faint shadow, white chrome. ONE brand accent, cobalt, for the things a person acts on: the primary
   button, links, focus, the current page in the sidebar. And the three state colours, still reserved for
   state and nothing else: green means it held, amber means a person is needed, red means it failed.

   The public site keeps its own graphite and paper; the product is its own place.
   ────────────────────────────────────────────────────────────────────────────────────────────────────── */

[data-surface="app"] {
  /* ── Ground and surfaces ─────────────────────────────────────────────────────────────────────────────
     BLACK SINCE 2026-10-01 (design 08). The founder made the whole product black with the homepage film, as
     anduril.com and palantir.com are, and the console moves with the site (feedback-universal-theme). The
     graphite console of design 06 read as bland for measured reasons: page and card 1.06:1 apart, invisible
     shadows, three greys that were one grey, no colour when nothing failed. Each is answered here: cards sit
     a real step above the page AND carry a visible hairline (the edge does the work a shadow cannot on
     black), the four text steps are distinct, and state colours are tuned bright for black. */
  --bg-0: #0A0A0B;   /* page ground */
  --bg-1: #141416;   /* cards, panels, the top bar and the sidebar */
  --bg-2: #1A1A1D;   /* recessed wells */
  --bg-3: #1F1F23;   /* hovered rows */

  /* ── Type: four real steps ───────────────────────────────────────────────────────────────────────────── */
  --fg-1: #FAFAFA;   /* headlines          19:1 on the page */
  --fg-2: #D4D4D8;   /* body               13:1 */
  --fg-3: #A1A1AA;   /* secondary          7.6:1 */
  --fg-4: #8E8E96;   /* meta and labels    5.6:1 on the page, 5.1:1 on a card */
  --fg-5: #8E8E96;   /* fine print, the same measured grey rather than a softer failing one */
  --fg-on-accent: #0A0A0B;

  /* ── The accent ──────────────────────────────────────────────────────────────────────────────────────
     White, the inverse of the ink it was: the primary action is white on black, as on the site. Having no
     hue keeps an action well away from the three state colours. */
  --acc: #FAFAFA;
  --acc-deep: #FAFAFA;
  --acc-deepest: #E4E4E7;
  --acc-glow: rgba(255, 255, 255, 0.16);
  --acc-soft: rgba(255, 255, 255, 0.07);
  --acc-line: rgba(255, 255, 255, 0.22);
  --acc-line-2: rgba(255, 255, 255, 0.36);

  /* ── State, and only state ───────────────────────────────────────────────────────────────────────────
     Blocked stays amber rather than red: it is the honest third answer, not a failure. */
  --ok:   #3DD68C;   /* it held            */
  --warn: #F5B94D;   /* a person is needed */
  --err:  #FF6B5B;   /* it failed          */

  /* Each state is an ink, the wash it sits on and the hairline around them. Translucent washes on black,
     so a badge reads the same on a card and on the page. */
  --go-ink:   #4ADE9C;  --go-wash:   rgba(61, 214, 140, 0.12);  --go-line:   rgba(61, 214, 140, 0.32);
  --wait-ink: #F5B94D;  --wait-wash: rgba(245, 185, 77, 0.12);  --wait-line: rgba(245, 185, 77, 0.32);
  --stop-ink: #FF7B6B;  --stop-wash: rgba(255, 107, 91, 0.12);  --stop-line: rgba(255, 107, 91, 0.34);

  /* ── Structure ─────────────────────────────────────────────────────────────────────────────────────── */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);
  --focus-ring: #FAFAFA;
  --chrome-veil: rgba(10, 10, 11, 0.86);

  /* ── Elevation ───────────────────────────────────────────────────────────────────────────────────────
     On black a shadow only deepens; the hairline is what lifts a card. A faint top highlight gives a
     raised surface its edge. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-win: 0 2px 6px rgba(0, 0, 0, 0.5), 0 32px 64px -28px rgba(0, 0, 0, 0.9);

  /* The boundary paints its own ground. It deliberately does NOT set a min-height: the document is already
     painted (see --canvas below), and a 100dvh wrapper nested inside another one forces a scrollbar on
     pages that fit. The boundary is allowed to appear more than once in a tree. */
  background: var(--bg-0);
  color: var(--fg-2);
}

/* Paint the document itself as well. A wrapper cannot reach the browser canvas, so without this the area
   below a short page and the overscroll gutter keep whatever the previous route painted. These set the
   variables the root layout's inline paint reads, so the first frame resolves to the console ground. */
html:has([data-surface="app"]) {
  --canvas: #0A0A0B;
  --canvas-scheme: dark;
}

/* ── The primary action ────────────────────────────────────────────────────────────────────────────────
   styles.css builds .btn from --acc-deep and finishes it with a hardcoded emerald inner shadow. The token
   remap handles the ground; these rules handle what tokens cannot reach. */
[data-surface="app"] .btn {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--fg-on-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  border-radius: 8px;
}
[data-surface="app"] .btn:hover,
[data-surface="app"] .btn:active {
  background: var(--acc-deepest);
  border-color: var(--acc-deepest);
  color: var(--fg-on-accent);
}
[data-surface="app"] .btn:disabled:hover,
[data-surface="app"] .btn[disabled]:hover,
[data-surface="app"] .btn[aria-disabled="true"]:hover {
  background: var(--acc);
  border-color: var(--acc);
}
/* The secondary action: a raised black button with a hairline. */
[data-surface="app"] .btn--ghost {
  background: var(--bg-1);
  border: 1px solid var(--line-3);
  color: var(--fg-1);
  box-shadow: var(--shadow-sm);
}
[data-surface="app"] .btn--ghost:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
  color: var(--fg-1);
}

/* ── Form fields ───────────────────────────────────────────────────────────────────────────────────────
   White fields with a hairline; focus is the accent ring, never a state colour, because a field under the
   cursor has not passed or failed anything. */
[data-surface="app"] input,
[data-surface="app"] textarea,
[data-surface="app"] select,
/* tokens.css paints input[type=text], input[type=email] and textarea grey at the same specificity and later
   in the cascade, so without these the credits amount box and every other typed field sat grey on a white
   card while selects and number fields beside them were white. */
[data-surface="app"] input[type="text"],
[data-surface="app"] input[type="email"],
[data-surface="app"] textarea[class] {
  background: var(--bg-1);
  color: var(--fg-1);
  border-color: var(--line-3);
  caret-color: var(--fg-1);
}
[data-surface="app"] input::placeholder,
[data-surface="app"] textarea::placeholder { color: var(--fg-4); opacity: 1; }
[data-surface="app"] input:focus,
[data-surface="app"] textarea:focus,
[data-surface="app"] select:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
  background: var(--bg-1);
}

[data-surface="app"] :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Atmosphere carried over from the public hero ──────────────────────────────────────────────────────
   The auth layout paints .glow and .grid-faint. The bloom is removed; the grid stays a faint hairline. */
[data-surface="app"] .glow,
[data-surface="app"] .glow--bleed { display: none; }
[data-surface="app"] .grid-faint {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

[data-surface="app"] ::selection { background: #FAFAFA; color: #0A0A0B; }

/* An eyebrow is a label, not a link. */
[data-surface="app"] .eyebrow { color: var(--fg-4); }

/* The italic serif was the previous brand's only flourish; inside the product .em is ordinary emphasis. */
[data-surface="app"] .em {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  letter-spacing: inherit;
  font-size: inherit;
}

/* ── Type in the console ───────────────────────────────────────────────────────────────────────────────
   One page title size, sentence-case labels, and no tracked micro-capitals except table column heads.
   Uppercase 10px labels on every section were the loudest "generated dashboard" tell in the audit. */
[data-surface="app"] .phead h1,
[data-surface="app"] .display { font-weight: 600; letter-spacing: -0.012em; }
[data-surface="app"] .phead h1 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); }
[data-surface="app"] .pill {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg-3);
}
[data-surface="app"] .stat__l {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* ── The shell ─────────────────────────────────────────────────────────────────────────────────────────
   White chrome around a grey page. The sidebar was 15.5px items under 11px tracked capitals, so the menu
   was louder than the data; it is now 14px items under quiet sentence-case group names, and the current
   page is marked in the accent rather than a second grey. */
[data-surface="app"] .app-side { background: var(--bg-1); border-right-color: var(--line-2); padding: 16px 12px; gap: 2px; }
[data-surface="app"] .app-side__group {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-4);
  padding: 16px 10px 6px;
}
[data-surface="app"] .app-side__foot { background: var(--bg-1); }
[data-surface="app"] .slink { font-size: 14px; font-weight: 500; padding: 7px 10px; border-radius: 7px; gap: 10px; color: var(--fg-2); }
[data-surface="app"] .slink:hover { background: var(--bg-2); color: var(--fg-1); }
[data-surface="app"] .slink.on { background: var(--acc-soft); color: var(--fg-1); box-shadow: none; }
[data-surface="app"] .slink__i { width: 18px; height: 18px; color: var(--fg-4); }
[data-surface="app"] .slink.on .slink__i { color: var(--acc); }
[data-surface="app"] .app-drawer { background: var(--bg-1); }
[data-surface="app"] .app-drawer-scrim { background: rgba(0, 0, 0, 0.6); }

/* A link inside a sentence is underlined: its colour alone is too close to the text around it for anyone
   who cannot tell the two apart (axe link-in-text-block). Links styled as buttons are left alone. */
[data-surface="app"] p a:not(.btn),
[data-surface="app"] li a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Scrollbars: a quiet thumb on black. */
[data-surface="app"] * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }

/* ── Shared components that carry values no token can reach ────────────────────────────────────────── */

/* Hover lift: depth comes from the border and one soft shadow. */
[data-surface="app"] .card--hover:hover {
  border-color: var(--line-3);
  box-shadow: var(--shadow-md);
}

/* Segmented control: the selected option is a white chip on the grey well. */
[data-surface="app"] .seg { background: var(--bg-2); }
[data-surface="app"] .seg button.on {
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-sm);
}
/* A yearly discount is a price, not a verdict. */
[data-surface="app"] .seg__save { color: var(--fg-3); }

/* ── The pricing table ─────────────────────────────────────────────────────────────────────────────────
   The "Most popular" badge is painted with a gradient from --acc to --acc-deep and white text; on this
   surface that is the cobalt pair, which is correct. The card around it only needs a stronger edge. */
[data-surface="app"] .price--hot {
  border-color: var(--acc-line-2);
  box-shadow: var(--shadow-md);
}
[data-surface="app"] .price--hot::before {
  background: var(--acc);
  color: var(--fg-on-accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
}
/* The small plan and cycle badges ("Current plan", "Monthly") were tracked capitals in the accent; they
   are sentence-case labels like every other badge in the console now. */
[data-surface="app"] .badge-now {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  padding: 2px 8px;
}

/* The feature tick is an SVG data URI with its stroke colour written into the URL, so no token can reach
   it. Same icon, neutral stroke: a list marker is decoration and does not get a state colour. */
[data-surface="app"] .price__feat li::before {
  background-color: var(--bg-2);
  border-color: var(--line-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F46' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Empty states are a solid card. The dashed outline read as an unfinished slot in the layout. */
[data-surface="app"] .empty { border-style: solid; border-color: var(--line-2); background: var(--bg-1); }
[data-surface="app"] .empty__icon { background: var(--bg-2); color: var(--fg-3); border-color: var(--line-2); }

/* Loading shimmer. */
[data-surface="app"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

/* Code: a light well with dark ink, and the brand mono. */
[data-surface="app"] .codeblock {
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--line-2);
  box-shadow: none;
  font-family: var(--font-brand-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-surface="app"] code,
[data-surface="app"] kbd { font-family: var(--font-brand-mono), ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Code frames: no window-control dots. Three coloured circles on a terminal block are decoration borrowed
   from a macOS window, and nothing else in the console draws one. The label moves to the left edge. */
[data-surface="app"] .codebar i { display: none; }
[data-surface="app"] .codebar span { margin-left: 0; color: var(--fg-4); }
/* The bar over a code well is the well's own ground, split from it by a hairline; keywords take weight, not
   a hue, as on the site. */
[data-surface="app"] .codebar { background: var(--bg-2); border: 1px solid var(--line-2); border-bottom-color: var(--line-1); }
[data-surface="app"] .codebar + .codeblock { border-top: 0; }
[data-surface="app"] .codeblock .tk-key { color: var(--fg-1); font-weight: 600; }
[data-surface="app"] .codeblock .tk-str { color: var(--acc-deepest); }
[data-surface="app"] .codeblock .tk-com { color: var(--fg-4); }

/* Records: the "Show more" row is a plain link-coloured row, not a disclosure triangle. */
[data-surface="app"] .rec-more > summary::-webkit-details-marker { display: none; }
[data-surface="app"] .rec-more[open] > summary { display: none; }

/* ── Sign-in and account screens (2026-09-30) ───────────────────────────────────────────────────────────
   Two plain halves: the form on the black page, and on a wide screen a raised panel holding a real recorded
   run. White for the primary action, outlined rows for providers, labels above fields. */
[data-surface="app"] .auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100dvh; background: var(--bg-0); }
[data-surface="app"] .auth-split__form { display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(20px, 5vw, 64px); }
[data-surface="app"] .auth-split__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
[data-surface="app"] .auth-split__brand { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg-1); text-decoration: none; }
[data-surface="app"] .auth-split__back { font-size: 13.5px; font-weight: 500; color: var(--fg-3); text-decoration: none; }
[data-surface="app"] .auth-split__back:hover { color: var(--fg-1); }
[data-surface="app"] .auth-split__tools { display: inline-flex; align-items: center; gap: 16px; }
[data-surface="app"] .auth-split__main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 4vh, 48px) 0; }
[data-surface="app"] .auth-split__foot { display: flex; gap: 18px; margin: 0; padding: 20px 0 24px; font-size: 12.5px; }
[data-surface="app"] .auth-split__foot a { color: var(--fg-4); text-decoration: none; }
[data-surface="app"] .auth-split__foot a:hover { color: var(--fg-1); }
/* The brand panel: a raised panel with one soft light from the top. No dot grid (plan 0.4, 2026-10-02). */
[data-surface="app"] .auth-split__side { position: relative; isolation: isolate; overflow: hidden; background: #111113; border: 1px solid var(--line-2); display: flex; align-items: center;
  justify-content: center; padding: clamp(28px, 4vw, 56px); min-width: 0; margin: 10px; border-radius: 22px; }
[data-surface="app"] .auth-split__side::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 50% at 50% -8%, rgba(255,255,255,0.14), transparent 70%); }
[data-surface="app"] .auth-split__sidein { width: min(540px, 100%); }
[data-surface="app"] .auth-split__title { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.08; font-weight: 500;
  letter-spacing: -0.03em; color: #FAFAFA; max-width: 21ch; text-wrap: balance; }
[data-surface="app"] .auth-split__kicker { margin: 12px 0 22px; font-size: 13.5px; font-weight: 400; color: #A1A1AA; }
[data-surface="app"] .auth-split__side .rp { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8); }
[data-surface="app"] .auth-split__side .rp__prompt { max-height: 92px; }
[data-surface="app"] .auth-split__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 20px 0 0; font-size: 13px; }
[data-surface="app"] .auth-split__partners span { color: #8A8A93; }
[data-surface="app"] .auth-split__partners a { color: #FAFAFA; text-decoration: none; font-weight: 500; }
[data-surface="app"] .auth-split__partners a:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-surface="app"] .auth-split__partners a:focus-visible { outline: 2px solid #FAFAFA; outline-offset: 3px; border-radius: 3px; }
@media (max-width: 980px) {
  [data-surface="app"] .auth-split { grid-template-columns: minmax(0, 1fr); }
  [data-surface="app"] .auth-split__side { display: none; }
}

[data-surface="app"] .auth-form { width: min(380px, 100%); margin: 0 auto; }
[data-surface="app"] .auth-form__head { margin-bottom: 24px; }
[data-surface="app"] .auth-form__head h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-1); }
[data-surface="app"] .auth-form__head p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-3); }
[data-surface="app"] .auth-form__providers { display: grid; gap: 10px; }
[data-surface="app"] .auth-form__provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-3); border-radius: 9px; background: var(--bg-1);
  font: 600 14px/1 var(--font-brand-sans), sans-serif; color: var(--fg-1); cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
[data-surface="app"] .auth-form__provider:hover:not(:disabled) { background: var(--bg-3); border-color: var(--line-strong); }
[data-surface="app"] .auth-form__provider:disabled { opacity: 0.5; cursor: not-allowed; }
[data-surface="app"] .auth-form__or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12.5px; color: var(--fg-4); }
[data-surface="app"] .auth-form__or::before, [data-surface="app"] .auth-form__or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
[data-surface="app"] .auth-form__fields { display: grid; gap: 14px; }
[data-surface="app"] .auth-form__field { display: grid; gap: 6px; }
[data-surface="app"] .auth-form__field > span:first-child, [data-surface="app"] .auth-form__labelrow { font-size: 13px; font-weight: 500; color: var(--fg-2); }
[data-surface="app"] .auth-form__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
[data-surface="app"] .auth-form__forgot { font-size: 12.5px; font-weight: 500; color: var(--fg-3); text-decoration: none; }
[data-surface="app"] .auth-form__forgot:hover { color: var(--fg-1); text-decoration: underline; }
[data-surface="app"] .auth-form__field input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-3);
  border-radius: 9px; background: var(--bg-1); font: 400 14.5px/1.4 var(--font-brand-sans), sans-serif; color: var(--fg-1); }
[data-surface="app"] .auth-form__field input:focus { outline: none; border-color: var(--fg-1); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
[data-surface="app"] .auth-form__hint { font-size: 12px; color: var(--fg-4); }
[data-surface="app"] .auth-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); cursor: pointer; }
[data-surface="app"] .auth-form__consent input { margin-top: 2px; width: 15px; height: 15px; flex: none; accent-color: var(--fg-1); }
[data-surface="app"] .auth-form__consent a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }
[data-surface="app"] .auth-form__submit { width: 100%; min-height: 44px; padding: 11px 16px; border: 0; border-radius: 9px; background: var(--fg-1);
  color: #0A0A0B; font: 600 14.5px/1 var(--font-brand-sans), sans-serif; cursor: pointer; transition: background 140ms ease; }
[data-surface="app"] .auth-form__submit:hover:not(:disabled) { background: #E4E4E7; }
[data-surface="app"] .auth-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }
[data-surface="app"] .auth-form__submit:focus-visible, [data-surface="app"] .auth-form__provider:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 2px; }
[data-surface="app"] .auth-form__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-4); }
[data-surface="app"] .auth-form__status { margin-top: 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg-2); }
[data-surface="app"] .auth-form__status[data-tone="error"] { background: var(--stop-wash); border-color: var(--stop-line); color: var(--stop-ink); }
[data-surface="app"] .auth-form__status[data-tone="success"] { background: var(--go-wash); border-color: var(--go-line); color: var(--go-ink); }
[data-surface="app"] .auth-form__switch { margin: 24px 0 0; font-size: 13.5px; color: var(--fg-3); }
[data-surface="app"] .auth-form__switch button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--fg-1);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
[data-surface="app"] .auth-form--wide { width: min(460px, 100%); }
/* The round-trip screens (verify email, reset password, errors) were built as a bordered card inside their
   own padded column. Inside the account frame that read as a box in a box beside the flat sign-in form, so
   the frame flattens them: same page, same form width, no second container. */
[data-surface="app"] .auth-form--wide > div { max-width: none !important; padding: 0 !important; margin: 0 !important; }
[data-surface="app"] .auth-form--wide .card { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* ── Two-step verification (2026-09-30) ────────────────────────────────────────────────────────────────
   The sign-in code screen (components/two-step-challenge.tsx) is the .auth-form system above plus three
   things: the code field set in mono and spaced so six digits read as a code, the other ways to verify as
   plain underlined links, and the way out ("Sign in as someone else") as an outlined .auth-form__provider
   with room above it. The Account page section (app/rank/app/account/two-step-section.tsx) adds the QR
   frame and the recovery code grid; everything else there is .card, .btn and .btn--ghost. */
[data-surface="app"] .auth-form__field input.two-step__code { font-family: var(--font-brand-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; letter-spacing: 0.24em; }
[data-surface="app"] .two-step__inline,
[data-surface="app"] .two-step__alts button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--fg-1);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
[data-surface="app"] .two-step__inline:disabled,
[data-surface="app"] .two-step__alts button:disabled { opacity: 0.55; cursor: default; }
[data-surface="app"] .two-step__alts { display: grid; justify-items: start; gap: 10px; margin-top: 22px; font-size: 13.5px; }
[data-surface="app"] .two-step__leave { margin-top: 24px; }
[data-surface="app"] .two-step-qr { display: block; flex: none; width: 184px; height: 184px; padding: 6px; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 8px; background: #FFFFFF; } /* a QR code keeps its white quiet zone */
[data-surface="app"] .two-step-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; margin: 0; padding: 14px 18px;
  list-style: none; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2);
  font: 500 14.5px/1.4 var(--font-brand-mono), ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg-1); }
@media (max-width: 420px) {
  [data-surface="app"] .two-step-codes { grid-template-columns: minmax(0, 1fr); }
}

/* Compact product chrome; account finances remain available in the account disclosure. */
[data-surface="app"] .vra-account-summary { display:grid; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); }
[data-surface="app"] .vra-account-summary a { display:flex; justify-content:space-between; gap:12px; text-decoration:none; color:var(--fg-3); font-size:12px; }
[data-surface="app"] .vra-account-summary strong { color:var(--fg-1); font-weight:500; font-variant-numeric:tabular-nums; }
[data-surface="app"] .app-settings-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 10px 8px; background:none; border:0; color:var(--fg-3); font:inherit; font-size:12px; cursor:pointer; }
[data-surface="app"] .app-settings-toggle:focus-visible { outline:2px solid var(--fg-1); outline-offset:-2px; }
[data-surface="app"] .app-settings [hidden] { display:none; }
[data-surface="app"] .app-side .slink { border-radius:5px; min-height:38px; }
[data-surface="app"] .app-side .slink.on { background:#202020; box-shadow:inset 2px 0 #fafafa; }
[data-surface="app"] .vra-app-connect { min-height:36px; font-size:13px; padding:7px 12px; border-radius:6px; }

/* Account entry shares the site's field imagery, rather than a miniature product screenshot. */
[data-surface="app"] .auth-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
[data-surface="app"] .auth-split__side { margin:0; border-radius:0; border:0; border-left:1px solid var(--line-2); align-items:flex-end; padding:clamp(32px,5vw,80px); }
[data-surface="app"] .auth-split__scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); z-index:-2; opacity:.52; }
[data-surface="app"] .auth-split__side::after { background:linear-gradient(180deg,#08080822 0%,#08080877 50%,#080808 100%); }
[data-surface="app"] .auth-split__sidein { padding-bottom:5vh; }
[data-surface="app"] .auth-split__title { font-size:clamp(42px,4.4vw,78px); line-height:1.04; letter-spacing:-.04em; max-width:14ch; }
[data-surface="app"] .auth-split__kicker { font-size:15px; line-height:1.6; color:#d0d0d0; max-width:32ch; margin-top:24px; }
[data-surface="app"] .auth-split__demo-link { display:inline-flex; gap:28px; color:#fafafa; font-size:14px; text-decoration:none; padding:10px 0; border-bottom:1px solid #777; }
@media(max-width:980px){[data-surface="app"] .auth-split{grid-template-columns:1fr}}
[data-surface="app"] .connection-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 32px; }
[data-surface="app"] .connection-paths a { display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--line-2); border-radius:6px; text-decoration:none; }
[data-surface="app"] .connection-paths strong { font-size:14px; font-weight:500; color:var(--fg-1); }
[data-surface="app"] .connection-paths span { font-size:12px; line-height:1.6; color:var(--fg-3); }
[data-surface="app"] .connection-paths a:hover { background:var(--bg-2); border-color:var(--line-3); }
@media(max-width:760px){[data-surface="app"] .connection-paths{grid-template-columns:1fr}}

/* Account entry: consistent sizing, visible keyboard focus and narrow-screen fit. */
[data-surface="app"] .auth-form{width:min(420px,100%)}
[data-surface="app"] .auth-form__head h1{font-size:30px;letter-spacing:-.035em}
[data-surface="app"] .auth-form__field input{min-height:50px;font-size:16px}
[data-surface="app"] .auth-form__submit,[data-surface="app"] .auth-form__provider{min-height:48px}
[data-surface="app"] .auth-recovery{width:min(420px,100%);margin:0 auto;padding:24px 0}
[data-surface="app"] .auth-recovery .card{border:0!important;background:transparent!important;padding:0!important;box-shadow:none}
[data-surface="app"] .auth-recovery input{min-height:50px;font-size:16px!important}
[data-surface="app"] .auth-recovery input:focus-visible{outline:2px solid #fafafa;outline-offset:3px;border-color:#888}
[data-surface="app"] .auth-recovery .btn{min-height:48px}
[data-surface="app"] .auth-split :is(a,button):focus-visible{outline:2px solid #fafafa;outline-offset:4px}
@media(max-width:540px){[data-surface="app"] .auth-split__head{flex-wrap:wrap;gap:12px}[data-surface="app"] .auth-split__tools{gap:12px}[data-surface="app"] .auth-split__back{font-size:12px}[data-surface="app"] .auth-split__form{padding-inline:24px}[data-surface="app"] .auth-split__foot{gap:12px;font-size:11px}[data-surface="app"] .auth-split__main{padding-block:32px}}