/*
 * Sylphx Identity — Account Portal stylesheet.
 *
 * One origin, one file, no third party: the portal serves these bytes itself
 * and mirrors the brand subset of the product-site tokens on purpose
 * (cross-origin asset isolation is law, so it cannot link site/tokens.css).
 *
 * Dark is canonical; light is designed, not inverted. The theme follows the
 * operating system, because a page that runs no script cannot remember a
 * toggle. Every surface answers a form post the browser makes on its own:
 * there is no motion that carries meaning, so nothing is lost when a reader
 * asks for reduced motion.
 */

@layer tokens, base, components, pages;

@layer tokens {
  :root {
    color-scheme: dark;

    --canvas: oklch(0.145 0.018 265);
    --canvas-2: oklch(0.175 0.02 265);
    --surface: oklch(0.205 0.022 265 / 0.72);
    --surface-2: oklch(0.245 0.024 265);
    --line: oklch(0.98 0.01 265 / 0.09);
    --line-strong: oklch(0.98 0.01 265 / 0.18);
    /* Form-control boundary. A control is identified by its edge, so WCAG 2.2
       AA 1.4.11 (non-text contrast) requires 3:1 against the surface it sits
       on - which the decorative --line/--line-strong hairlines never reach
       (measured 1.61:1 dark / 1.63:1 light against the canvas). Decorative
       borders keep using the hairlines; controls use this. */
    --control-line: oklch(0.55 0.02 265);
    --text: oklch(0.975 0.006 265);
    --text-2: oklch(0.8 0.012 265);
    --text-3: oklch(0.655 0.014 265);

    --accent: oklch(0.74 0.15 248);
    --accent-strong: oklch(0.82 0.15 244);
    --accent-soft: oklch(0.74 0.15 248 / 0.14);
    --accent-ink: oklch(0.17 0.05 250);
    --violet: oklch(0.7 0.17 288);
    --good: oklch(0.82 0.13 165);
    --warn: oklch(0.85 0.12 82);
    --bad: oklch(0.74 0.15 25);

    --code-bg: oklch(0.16 0.02 265);
    --code-line: oklch(0.98 0.01 265 / 0.08);
    --tok-plain: oklch(0.92 0.01 265);
    --tok-dim: oklch(0.62 0.02 265);

    --glow-a: oklch(0.62 0.19 265 / 0.34);
    --grid-line: oklch(0.98 0.01 265 / 0.045);

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
      monospace;

    --fs-display: clamp(1.85rem, 1.45rem + 1.7vw, 2.6rem);
    --fs-h1: clamp(1.7rem, 1.42rem + 1.05vw, 2.2rem);
    --fs-h2: clamp(1.15rem, 1.09rem + 0.24vw, 1.3rem);
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-micro: 0.75rem;

    --lh-heading: 1.16;
    --lh-body: 1.62;

    --tracking-heading: -0.021em;
    --tracking-micro: 0.14em;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 13px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.35);
    --shadow-2: 0 18px 40px -24px oklch(0 0 0 / 0.7),
      0 2px 10px -6px oklch(0 0 0 / 0.5);
    --shadow-3: 0 40px 90px -44px oklch(0 0 0 / 0.88),
      0 2px 20px -10px oklch(0 0 0 / 0.6);
    --inset-hairline: inset 0 1px 0 oklch(1 0 0 / 0.06);
    --ring: 0 0 0 3px oklch(0.74 0.15 248 / 0.45);

    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 420ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);

    --measure: 68rem;
    --card-measure: 62rem;
    --card-measure-narrow: 32rem;
    --gutter: clamp(1.125rem, 4vw, 2.5rem);
    --control-h: 3rem;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;

      --canvas: oklch(0.985 0.003 95);
      --canvas-2: oklch(0.965 0.005 250);
      --surface: oklch(1 0 0 / 0.82);
      --surface-2: oklch(0.97 0.006 250);
      --line: oklch(0.26 0.02 265 / 0.13);
      --line-strong: oklch(0.26 0.02 265 / 0.24);
      /* Same floor in the light theme: 4.11:1 against the canvas. */
      --control-line: oklch(0.58 0.02 265);
      --text: oklch(0.25 0.022 265);
      --text-2: oklch(0.43 0.018 265);
      /* Muted text carries the 85% placeholder and the well/door notes, so it
         needs headroom: keep every composite it forms at 4.5:1 or above. */
      --text-3: oklch(0.45 0.016 265);

      --accent: oklch(0.52 0.17 255);
      --accent-strong: oklch(0.46 0.18 258);
      --accent-soft: oklch(0.52 0.17 255 / 0.1);
      --accent-ink: oklch(0.99 0.008 250);
      --violet: oklch(0.5 0.18 290);
      /* Semantic text colours also carry their badge fills at 12-14%; these
         values keep the text over each fill at 4.5:1 or above. */
      --good: oklch(0.46 0.12 165);
      --warn: oklch(0.48 0.13 75);
      --bad: oklch(0.46 0.18 25);

      --glow-a: oklch(0.7 0.14 265 / 0.22);
      --grid-line: oklch(0.3 0.02 265 / 0.06);

      /* The code plate keeps its dark surface in both themes, so the code
         palette has to stay light there: hint text on the plate must not
         follow --text-3 into the dark half of the light theme. */
      --tok-dim: oklch(0.76 0.02 265);

      --shadow-1: 0 1px 2px oklch(0.3 0.03 265 / 0.08);
      --shadow-2: 0 18px 40px -28px oklch(0.3 0.04 265 / 0.35),
        0 2px 8px -4px oklch(0.3 0.04 265 / 0.14);
      --shadow-3: 0 44px 90px -48px oklch(0.3 0.05 265 / 0.45),
        0 2px 20px -12px oklch(0.3 0.05 265 / 0.2);
      --inset-hairline: inset 0 1px 0 oklch(1 0 0 / 0.7);
      --ring: 0 0 0 3px oklch(0.52 0.17 255 / 0.32);
    }
  }
}

@layer base {
  /* Self-hosted brand fonts. Fallback is the same system stack the portal
     shipped with, so a deployment without the files still reads cleanly. */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var-latin.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-var-latin.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--sp-6);
  }

  body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background-color: var(--canvas);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* One aurora glow, painted by CSS. No image request, no script. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(
      54rem 34rem at 50% -10%,
      var(--glow-a),
      transparent 70%
    );
  }

  /* Hairline blueprint grid, faded out toward the card. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(120% 82% at 50% 0%, black 12%, transparent 74%);
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--text);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  svg {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  h1,
  h2 {
    margin: 0;
    font-weight: 640;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  dl,
  dd,
  dt {
    margin: 0;
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-feature-settings: "calt" 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline: 2px solid CanvasText;
    }

    .card,
    .well,
    .plate,
    .notice,
    .door,
    .identity {
      border-color: CanvasText;
    }
  }
}

@layer components {
  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: 0 0 var(--r-sm) 0;
    background: var(--surface-2);
    font-size: var(--fs-sm);
  }

  .skip:focus {
    left: 0;
  }

  /* Chrome ------------------------------------------------------------- */

  .topbar,
  .foot {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: clamp(1rem, 2.5vw, 1.75rem);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.75rem;
    padding-right: var(--sp-2);
    font-weight: 600;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: linear-gradient(150deg, var(--accent), var(--violet));
    box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / 0.35);
    color: var(--accent-ink);
  }

  .brand__mark svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .brand__name {
    font-size: var(--fs-sm);
  }

  .brand__surface {
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .topbar__note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  .pin {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .foot {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
  }

  .foot p {
    max-width: 48rem;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-3);
  }

  /* Card --------------------------------------------------------------- */

  .card {
    position: relative;
    width: 100%;
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: linear-gradient(
      168deg,
      color-mix(in oklab, var(--surface-2) 68%, transparent),
      var(--surface)
    );
    box-shadow: var(--shadow-3), var(--inset-hairline);
  }

  @supports (backdrop-filter: blur(1px)) {
    .card {
      backdrop-filter: blur(20px) saturate(140%);
    }
  }

  /* A single lit seam along the top edge, like a panel indicator. */
  .card::after {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline: 16%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--accent) 65%, transparent),
      transparent
    );
  }

  .card--split {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    max-width: var(--card-measure);
    grid-template-columns: minmax(0, 1fr);
  }

  .card--result {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    max-width: var(--card-measure-narrow);
  }

  .card__context {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .card__action {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* Recessed well: the form sits in the instrument, not on it. */
  .well {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--canvas-2) 62%, transparent);
    box-shadow: inset 0 1px 0 oklch(0 0 0 / 0.16);
  }

  .well__title {
    font-size: var(--fs-h2);
  }

  .well__note,
  .well__foot,
  .door__note {
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-3);
  }

  .well__foot {
    padding-top: var(--sp-1);
    border-top: 1px solid var(--line);
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
  }

  .link {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .link:hover {
    text-decoration-thickness: 2px;
  }

  /* Typography --------------------------------------------------------- */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-3);
  }

  .eyebrow::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .title {
    font-size: var(--fs-h1);
  }

  .card--result .title {
    font-size: var(--fs-display);
  }

  .lede {
    max-width: 42rem;
    font-size: var(--fs-sm);
    line-height: 1.64;
    color: var(--text-2);
  }

  .mono-id {
    padding: 0.05em 0.32em;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: color-mix(in oklab, var(--surface-2) 70%, transparent);
    font-size: 0.9em;
    overflow-wrap: anywhere;
  }

  /* Device code readout ------------------------------------------------ */

  .plate {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
    padding: 0.95rem 1.1rem 0.95rem 1.35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--code-bg);
    box-shadow: var(--shadow-2), var(--inset-hairline);
  }

  .plate::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--accent) 90%, transparent),
      color-mix(in oklab, var(--violet) 65%, transparent)
    );
  }

  .plate__label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--tok-dim);
  }

  .plate__value {
    font-family: var(--font-mono);
    font-size: clamp(1.35rem, 1rem + 1.5vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    color: var(--tok-plain);
  }

  .plate__value code {
    overflow-wrap: anywhere;
  }

  .plate__hint {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--tok-dim);
  }

  /* Facts -------------------------------------------------------------- */

  .facts {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
  }

  .fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
  }

  .fact dt {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-3);
  }

  .fact dd {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  /* Identity ----------------------------------------------------------- */

  .identity {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  }

  .identity__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: linear-gradient(150deg, var(--accent), var(--violet));
    box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / 0.3);
    font-size: var(--fs-sm);
    font-weight: 650;
    color: var(--accent-ink);
  }

  .identity__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }

  .identity__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-micro);
    letter-spacing: 0.02em;
    color: var(--text-3);
  }

  .identity__email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text);
  }

  .identity__email code,
  .identity__org code {
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .identity__org {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

  /* Nested in the recessed well, the identity block lifts instead of
     recessing a second time. */
  .well .identity {
    background: color-mix(in oklab, var(--surface-2) 72%, transparent);
  }

  /* Badges ------------------------------------------------------------- */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--surface-2) 70%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-2);
  }

  .badge--good {
    border-color: color-mix(in oklab, var(--good) 40%, transparent);
    background: color-mix(in oklab, var(--good) 12%, transparent);
    color: var(--good);
  }

  .badge--warn {
    border-color: color-mix(in oklab, var(--warn) 40%, transparent);
    background: color-mix(in oklab, var(--warn) 12%, transparent);
    color: var(--warn);
  }

  .badge--bad {
    border-color: color-mix(in oklab, var(--bad) 42%, transparent);
    background: color-mix(in oklab, var(--bad) 14%, transparent);
    color: var(--bad);
  }

  /* Notices ------------------------------------------------------------ */

  .notice {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  }

  .notice__label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-3);
  }

  .notice__body {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-2);
  }

  .notice--info {
    border-left-color: var(--accent);
  }

  .notice--warn {
    border-left-color: var(--warn);
    background: color-mix(in oklab, var(--warn) 10%, transparent);
  }

  .notice--bad {
    border-left-color: var(--bad);
    background: color-mix(in oklab, var(--bad) 10%, transparent);
  }

  /* Buttons ------------------------------------------------------------ */

  .btn {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
    --btn-border: var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--control-h);
    padding: 0.65rem 1.15rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: 560;
    letter-spacing: -0.005em;
    text-align: center;
    cursor: pointer;
    transition:
      transform var(--dur-1) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      background-color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      color var(--dur-1) var(--ease-out);
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn--primary {
    --btn-bg: linear-gradient(160deg, var(--accent-strong), var(--accent));
    --btn-fg: var(--accent-ink);
    --btn-border: color-mix(in oklab, var(--accent) 60%, transparent);
    box-shadow:
      var(--shadow-1),
      0 10px 30px -14px color-mix(in oklab, var(--accent) 70%, transparent);
  }

  .btn--primary:hover {
    box-shadow:
      var(--shadow-2),
      0 16px 36px -14px color-mix(in oklab, var(--accent) 80%, transparent);
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: var(--line-strong);
  }

  .btn--ghost:hover {
    --btn-bg: var(--surface-2);
  }

  .btn--danger {
    --btn-bg: color-mix(in oklab, var(--bad) 14%, transparent);
    --btn-fg: var(--bad);
    --btn-border: color-mix(in oklab, var(--bad) 42%, transparent);
  }

  .btn--danger:hover {
    --btn-bg: color-mix(in oklab, var(--bad) 22%, transparent);
  }

  .btn--lg {
    min-height: 3.25rem;
    padding: 0.85rem 1.6rem;
    font-size: var(--fs-body);
  }

  .btn--block {
    width: 100%;
  }

  /* Forms -------------------------------------------------------------- */

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .label {
    font-size: var(--fs-sm);
    font-weight: 550;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--control-line);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--canvas) 72%, transparent);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    transition:
      border-color var(--dur-1) var(--ease-out),
      box-shadow var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out);
  }

  input::placeholder {
    color: color-mix(in oklab, var(--text-3) 85%, transparent);
  }

  input:hover {
    /* Hover strengthens the boundary; it never drops below the resting 3:1. */
    border-color: color-mix(in oklab, var(--control-line) 60%, var(--text-3));
  }

  input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
  }

  /* Only after the reader has typed: an empty required field is not an error
     until the browser says so. */
  input:user-invalid {
    border-color: color-mix(in oklab, var(--bad) 70%, transparent);
  }

  #user_code {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
  }

  .help {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-3);
  }

  .or {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-3);
  }

  .or::before,
  .or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  /* Result states ------------------------------------------------------ */

  .result {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .result .title {
    margin-top: var(--sp-1);
  }

  .result__state {
    margin-top: var(--sp-1);
  }

  .sigil {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--sp-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--text-2);
  }

  .sigil svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .sigil--good {
    border-color: color-mix(in oklab, var(--good) 45%, transparent);
    background: color-mix(in oklab, var(--good) 12%, transparent);
    box-shadow: 0 0 0 0.5rem color-mix(in oklab, var(--good) 8%, transparent);
    color: var(--good);
  }

  .sigil--bad {
    border-color: color-mix(in oklab, var(--bad) 45%, transparent);
    background: color-mix(in oklab, var(--bad) 12%, transparent);
    box-shadow: 0 0 0 0.5rem color-mix(in oklab, var(--bad) 8%, transparent);
    color: var(--bad);
  }

  .sigil--warn {
    border-color: color-mix(in oklab, var(--warn) 45%, transparent);
    background: color-mix(in oklab, var(--warn) 12%, transparent);
    box-shadow: 0 0 0 0.5rem color-mix(in oklab, var(--warn) 8%, transparent);
    color: var(--warn);
  }

  /* Doors -------------------------------------------------------------- */

  .doors {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .door {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 3.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--surface-2) 40%, transparent);
    transition:
      border-color var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out),
      transform var(--dur-1) var(--ease-out);
  }

  .door:hover {
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    background: color-mix(in oklab, var(--surface-2) 72%, transparent);
    transform: translateY(-1px);
  }

  .door::after {
    content: "→";
    margin-left: auto;
    color: var(--text-3);
  }

  .door__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .door__title {
    font-size: var(--fs-sm);
    font-weight: 560;
  }

  .door__note {
    font-size: var(--fs-xs);
    color: var(--text-3);
  }
}

@layer pages {
  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--gutter);
    padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
  }

  .stage__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    width: 100%;
    max-width: var(--measure);
  }

  /* The card is the page: it lands, it does not fade in behind a spinner. */
  @media (prefers-reduced-motion: no-preference) {
    .card {
      animation: card-in var(--dur-3) var(--ease-out) both;
    }

    @keyframes card-in {
      from {
        opacity: 0;
        transform: translateY(0.75rem);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .pin {
      animation: pin-pulse 3.4s var(--ease-in-out) infinite;
    }

    @keyframes pin-pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.45;
      }
    }
  }

  @media (min-width: 60rem) {
    .card--split {
      grid-template-columns: minmax(19rem, 0.94fr) minmax(0, 1.06fr);
      align-items: start;
      gap: clamp(2rem, 3.5vw, 3rem);
    }

    .card--split .card__context {
      padding-top: var(--sp-1);
    }
  }

  @media (max-width: 30rem) {
    .topbar {
      gap: var(--sp-2);
    }

    .plate__value {
      letter-spacing: 0.12em;
    }
  }
}