/* STRATEGIC member portal, prototype 5: "Intaglio".
   The sign-in is a bearer certificate printed from an engraved plate: guilloche
   linework, microtext, a windowed security thread, a watermark that shows under
   the light of the pointer, ascending serial numbers and a blind-embossed seal.
   Monochrome only. Errors are shown with an icon, wording and weight or inversion.

   Layout: the sign-in always fits one screen, with no page scroll.
   - Desktop (861px and up): the two-column certificate, sized from the viewport height.
   - Tablet (600 to 860px): the certificate stacks into a card.
   - Phone (up to 599px): an app screen. The paper runs edge to edge, the controls sit
     inside the frame, the emblem takes whatever height is spare and steps aside on
     short screens, and the form stays low, in reach of the thumb.
   The page only scrolls where the content cannot fit at all (phones held sideways). */

/* ---------- Tokens ---------- */
:root {
  --display: "Michroma", "Eurostile Extended", sans-serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --cert-max: 1120px;
  --top-h: clamp(60px, 9vh, 76px);
  --field-h: 52px;
  --field-gap: 20px;
  --noise-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --noise-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Light: ivory security paper, black and graphite ink */
html[data-theme="light"] {
  --page: #e3e2dd;
  --page-hi: #ecebe7;
  --paper: #fbfaf6;
  --paper-hi: #ffffff;
  --ink: #131313;
  --ink-hover: #2c2c2b;
  --ink-2: #474744;
  --ink-3: #62625e;
  --line: rgba(19, 19, 19, .13);
  --line-2: rgba(19, 19, 19, .34);
  --field: rgba(255, 255, 255, .62);
  --field-focus: #ffffff;
  --engrave-hot: #0a0a0a;
  --engrave-mid: #2e2e2c;
  --engrave-base: #7a7a75;
  --thread-a: #6b6b67; --thread-b: #bdbdb8; --thread-c: #5c5c59;
  --grain: var(--noise-dark);
  --grain-o: .1;
  --grain-blend: multiply;
  --sheen: rgba(255, 255, 255, .75);
  --sheen-blend: soft-light;
  --wm-ink: #131313;
  --wm-base: .026;
  --wm-lit: .095;
  --shadow-1: rgba(58, 54, 44, .10);
  --shadow-2: rgba(58, 54, 44, .16);
  --scrim: rgba(40, 38, 32, .28);
  --plate-lo: rgba(19, 19, 19, .07);
  --plate-hi: rgba(255, 255, 255, 1);
  --emb-hi: rgba(255, 255, 255, 1);
  --emb-lo: rgba(40, 38, 32, .42);
  --seal-face: #fbfaf6;
  --seal-ink: #fbfaf6;
  color-scheme: light;
}

/* Dark: black card stock, silver and graphite foil */
html[data-theme="dark"] {
  --page: #0a0a0a;
  --page-hi: #121212;
  --paper: #161616;
  --paper-hi: #1c1c1c;
  --ink: #ecebe6;
  --ink-hover: #d4d3ce;
  --ink-2: #b3b2ad;
  --ink-3: #93928d;
  --line: rgba(236, 235, 230, .12);
  --line-2: rgba(236, 235, 230, .34);
  --field: rgba(0, 0, 0, .32);
  --field-focus: #0f0f0f;
  --engrave-hot: #f6f5f0;
  --engrave-mid: #a4a39e;
  --engrave-base: #555451;
  --thread-a: #5d5c58; --thread-b: #d6d5d0; --thread-c: #555450;
  --grain: var(--noise-light);
  --grain-o: .05;
  --grain-blend: screen;
  --sheen: rgba(255, 255, 255, .045);
  --sheen-blend: normal;
  --wm-ink: #ffffff;
  --wm-base: .014;
  --wm-lit: .06;
  --shadow-1: rgba(0, 0, 0, .5);
  --shadow-2: rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .55);
  --plate-lo: rgba(0, 0, 0, .55);
  --plate-hi: rgba(255, 255, 255, .06);
  --emb-hi: rgba(255, 255, 255, .16);
  --emb-lo: rgba(0, 0, 0, .9);
  --seal-face: #1a1a1a;
  --seal-ink: #1a1a1a;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  scrollbar-color: var(--ink-3) var(--page);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% 38%, var(--page-hi), var(--page) 70%) var(--page);
  overscroll-behavior: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
::selection { background: var(--ink); color: var(--paper); }
input, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, input, label { touch-action: manipulation; }
a { color: inherit; }
svg { display: block; }
.alert-icon, .hint svg, .field-error svg, .btn-arrow, .link svg, .fine-sec svg, .endorse-tick svg,
.theme-toggle svg, .chip svg, .net svg, .proto-close svg {
  stroke-linecap: round; stroke-linejoin: round;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Page ---------- */
.page {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: calc(var(--cert-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
.brand { display: block; height: 30px; color: var(--ink); flex: none; }
.tools { display: flex; align-items: center; gap: 10px; }

.theme-toggle, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 0;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle { width: 44px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-toggle .fill { fill: currentColor; stroke: none; }
.chip {
  gap: 8px;
  padding: 0 14px 0 12px;
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.chip.is-open { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.theme-toggle:active, .chip:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }

.net {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  font-size: .8125rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
}
.net svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.stage { display: grid; align-items: center; justify-items: center; min-height: 0; padding: 0 0 clamp(8px, 2vh, 20px); }

/* ---------- The certificate ---------- */
.cert {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--cert-max);
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .02),
    0 1px 2px var(--shadow-1),
    0 16px 34px -14px var(--shadow-2),
    0 44px 90px -48px var(--shadow-2);
  --lx: 30%;
  --ly: 28%;
}
html[data-theme="dark"] .cert { box-shadow: 0 0 0 1px rgba(255, 255, 255, .055), 0 30px 70px -30px var(--shadow-2); }

.cert-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: var(--grain-o);
  mix-blend-mode: var(--grain-blend);
}
/* The light: a soft sheen that follows the pointer */
.cert::after {
  content: "";
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle 420px at var(--lx) var(--ly), var(--sheen), transparent 72%);
  mix-blend-mode: var(--sheen-blend);
}

/* Watermark: the mark in the paper, faint by default and clearer under the light */
.watermark { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.wm {
  position: absolute;
  right: 5%;
  bottom: 9%;
  height: 58%;
  display: block;
  color: var(--wm-ink);
}
.wm-base { opacity: var(--wm-base); filter: blur(.4px); }
.wm-lit {
  opacity: var(--wm-lit);
  filter: blur(.3px);
  -webkit-mask-image: radial-gradient(circle 230px at var(--wx, -999px) var(--wy, -999px), #000 0%, rgba(0, 0, 0, .55) 40%, transparent 72%);
          mask-image: radial-gradient(circle 230px at var(--wx, -999px) var(--wy, -999px), #000 0%, rgba(0, 0, 0, .55) 40%, transparent 72%);
}

.frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.frame .fr-lines, .rosette .rs-lines { fill: none; }
.frame .fr-knock { fill: var(--paper); stroke: none; }
.frame .fr-micro, .rosette .rs-micro {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  fill: var(--engrave-mid);
}
.st-hot { stop-color: var(--engrave-hot); }
.st-mid { stop-color: var(--engrave-mid); }
.st-base { stop-color: var(--engrave-base); }

/* The plate: the area pressed by the engraved plate, with a sunken plate mark */
.plate {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, .82fr) 9px minmax(0, 1.18fr);
  margin: 12px;
}
.plate::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset 1px 1px 0 var(--plate-lo),
    inset -1px -1px 0 var(--plate-hi),
    -1px -1px 0 var(--plate-lo),
    1px 1px 0 var(--plate-hi);
}

/* ---------- Vignette ---------- */
.vignette {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vh, 18px);
  padding: clamp(28px, 5vh, 46px) 30px clamp(26px, 4.6vh, 44px) 46px;
  min-width: 0;
}
.serial {
  margin: 0;
  font-family: var(--display);
  color: var(--ink-2);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
.serial-rise { align-self: flex-start; font-size: 11px; letter-spacing: .06em; }
.serial-rise span { display: inline-block; vertical-align: baseline; }
.serial-flat { flex: none; font-size: 10px; letter-spacing: .22em; }

.rosette-wrap {
  position: relative;
  width: min(100%, 332px, 40vh);
  aspect-ratio: 1;
  flex: none;
}
.rosette { width: 100%; height: 100%; overflow: visible; }
.rosette .rs-lines { transition: opacity .6s var(--ease); }
.medallion {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.medallion-mark { display: block; height: 19%; color: var(--ink); }

.hold-band {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 74%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px color-mix(in srgb, var(--paper) 45%, transparent);
  visibility: hidden;
  transform-origin: 0 50%;
}
.cert.is-held .hold-band { visibility: visible; }
.cert.is-held .rosette .rs-lines { opacity: .38; }

.vignette-cap { margin: 0; text-align: center; display: grid; gap: 7px; }
.cap-title { font-family: var(--display); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.cap-url { font-size: .875rem; color: var(--ink-2); letter-spacing: .01em; }

/* Windowed security thread between the vignette and the form */
.thread { position: relative; margin: clamp(28px, 5vh, 46px) 0; }
.thread::before {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px;
  background: var(--line-2);
}
.thread::after {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to right, var(--thread-a), var(--thread-b) 45%, var(--thread-c));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 30px);
          mask-image: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 30px);
}

/* ---------- Desk (form side) ---------- */
/* Every screen shares one grid cell, so the certificate keeps its size from step to step. */
.desk {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(30px, 5.4vh, 50px) 58px clamp(24px, 4vh, 38px) 50px;
  min-width: 0;
}
.screen { grid-area: 1 / 1; min-width: 0; position: relative; align-self: start; }
.screen.is-off { visibility: hidden; pointer-events: none; }

h1 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + .85vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: .005em;
  text-wrap: balance;
}
.lede { margin: 0 0 26px; max-width: 44ch; color: var(--ink-2); text-wrap: pretty; }
.lede-strong { color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.lede-strong + .lede { margin-bottom: 26px; }
/* A message takes the place of the introduction, so the certificate never grows. */
.screen.has-alert .lede-intro { display: none; }
.who { margin: -16px 0 24px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.who:empty { display: none; }
.who strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.screen.has-alert .who { margin-top: -6px; }

/* Fields: fill-in lines on the certificate */
.field { margin: 0 0 var(--field-gap); }
.consent-note { margin-top: 10px; }
.link-inline { min-height: 0; font-size: inherit; margin: 0 0 0 2px; vertical-align: baseline; }
.select-line {
  display: block; width: 100%; height: var(--field-h); margin: 0; padding: 0 40px 0 14px;
  font: 500 1rem var(--sans); color: var(--ink);
  background: var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.5'/></svg>") no-repeat right 14px center;
  border: 1px solid var(--line-2); border-bottom-color: var(--ink); border-radius: 0; box-shadow: inset 0 -1px 0 var(--ink);
  -webkit-appearance: none; appearance: none;
}
.select-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; background-color: var(--field-focus); }
.consent-note a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
/* An error replaces the hint beside the field instead of adding a line */
.pw:has(input[aria-invalid="true"]) ~ .help { display: none; }
.proto-foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; margin-bottom: 8px; }
label, legend {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
input[type="email"], input[type="password"], input[type="text"] {
  display: block;
  width: 100%;
  height: var(--field-h);
  margin: 0;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-2);
  border-bottom-color: var(--ink);
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--ink);
  caret-color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
input:focus { outline: none; }
input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; background: var(--field-focus); }
input[aria-invalid="true"] { border: 2px solid var(--ink); box-shadow: none; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 60px var(--field-focus), inset 0 -1px 0 var(--ink); }

.pw { position: relative; }
.pw input { padding-right: 84px; }
.reveal {
  position: absolute;
  top: 4px; right: 4px; bottom: 4px;
  min-width: 70px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reveal:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.reveal:focus-visible { outline-offset: -2px; }

.hint, .field-error, .help { margin: 0; font-size: .875rem; line-height: 1.4; }
.hint:not(:empty), .field-error:not(:empty) { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.hint { color: var(--ink); font-weight: 500; }
.field-error { color: var(--ink); font-weight: 600; }
.help { color: var(--ink-2); margin-top: 8px; }
.hint svg, .field-error svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; margin-top: 1px; }

/* Buttons */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 10px 0 0;
  padding: 0 24px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px color-mix(in srgb, var(--paper) 30%, var(--ink));
  transition: background-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: translateY(1px); background: var(--ink-hover); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-label { white-space: nowrap; }
.btn-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease), opacity .2s; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn-arrow { opacity: 0; }
.btn-rule {
  position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px;
  background: currentColor; opacity: .6;
  transform: scaleX(0); transform-origin: 0 50%;
}
.btn-ghost {
  width: auto;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  padding: 0 30px;
}
.btn-ghost:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.btn-small { min-height: 44px; margin: 0; padding: 0 20px; font-size: 10.5px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: text-decoration-color .2s var(--ease);
}
.link-small { font-size: .875rem; margin: -11px 0; }
.link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.link-back { text-decoration: none; }

.aux { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 14px; }
.aux-stack { justify-content: flex-start; gap: 12px 28px; margin-top: 4px; }

/* Alerts: a stamp with a double rule; the lockout is printed in reverse */
.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px 13px;
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-2);
  background: var(--paper);
}
.alert-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; margin-top: 1px; }
.alert-text { margin: 0; font-size: .9375rem; line-height: 1.45; }
.alert-title { font-weight: 600; }
.alert-body { color: var(--ink-2); }
.alert-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px color-mix(in srgb, var(--paper) 40%, var(--ink));
}
.alert-solid .alert-body { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }

/* Two-step code: a serial block of six cells */
.code { border: 0; margin: 0 0 var(--field-gap); padding: 0; min-width: 0; }
.code legend { padding: 0; margin-bottom: 10px; }
.cells { display: flex; align-items: center; gap: 8px; }
.cells-gap { flex: 0 1 14px; min-width: 0; margin: 0 -2px; display: flex; justify-content: center; }
.cells-gap::before { content: ""; width: 50%; height: 1px; background: var(--ink-3); }
input.cell {
  flex: 1 1 0;
  min-width: 44px;
  max-width: 60px;
  height: 66px;
  padding: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0;
}
.cells.is-invalid input.cell { border: 2px solid var(--ink); box-shadow: none; }

/* Signed in: endorsements and the seal */
.list-cap {
  margin: 24px 0 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.endorse { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.endorse-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0 14px;
}
.endorse-tick { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); }
.endorse-tick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.endorse-name { font-family: var(--display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.endorse-state { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.endorse-rule { position: absolute; left: 0; right: 0; bottom: 0; transform-origin: 0 50%; }

.finale { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; max-width: 420px; }
.finale p { flex: 1 1 200px; margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.btn-open { width: auto; text-decoration: none; }
#screen-success .lede-strong { max-width: calc(100% - 150px); }

.seal {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 136px;
  height: 136px;
  pointer-events: none;
}
.seal svg {
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(-1px -1px 0 var(--emb-hi)) drop-shadow(1px 1.4px 1px var(--emb-lo));
}
.seal .sl-face { fill: var(--seal-face); }
.seal .sl-line { fill: none; stroke: var(--seal-ink); stroke-width: 1.4; }
.seal .sl-text { font-family: var(--display); font-size: 8.4px; letter-spacing: .12em; fill: var(--seal-ink); }
.seal .sl-mark { fill: var(--seal-ink); }

/* Fine print along the foot of the plate: the security note and the serial */
.fine {
  grid-area: 2 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(14px, 2.6vh, 24px);
}
.fine-sec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  max-width: 36ch;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.fine-sec svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Microtext rule: tiny repeated text that reads as a hairline */
.micro {
  display: block;
  height: 6px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 4.4px;
  line-height: 6px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 32px;
  width: 100%;
  max-width: var(--cert-max);
  margin: 0 auto;
  padding: 0 0 max(clamp(8px, 2vh, 20px), env(safe-area-inset-bottom));
}
.foot-apply { margin: 0; font-size: .9375rem; color: var(--ink); }
.foot-apply a, .foot-links a, .foot-install {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.foot-apply a { font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--ink-2); }
.foot-install { padding: 0; background: none; border: 0; color: var(--ink); font-size: .875rem; font-weight: 600; }

/* ---------- Prototype sheet ---------- */
.proto {
  position: fixed;
  inset: auto;
  top: calc(env(safe-area-inset-top) + var(--top-h) - 6px);
  right: max(var(--gutter), calc((100vw - var(--cert-max)) / 2));
  width: min(392px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--top-h) - 24px);
  overflow: auto;
  margin: 0;
  padding: 16px 20px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-2), 0 26px 50px -26px var(--shadow-2), 0 2px 6px var(--shadow-1);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete;
}
.proto:popover-open { opacity: 1; transform: none; }
@starting-style { .proto:popover-open { opacity: 0; transform: translateY(-6px); } }
.proto::backdrop { background: transparent; }
.proto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.proto h2 {
  margin: 0;
  padding: 5px 9px 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
}
.proto-close {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0;
  background: none; border: 0; color: var(--ink);
}
.proto-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.proto-lead { margin: 0 0 6px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.proto-list { margin: 0; font-size: .875rem; line-height: 1.4; }
.proto-list div {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.proto-list dt { font-weight: 600; color: var(--ink); }
.proto-list dd { margin: 0; color: var(--ink-2); }
kbd {
  display: inline-block;
  margin-left: 2px;
  padding: 0 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  border: 1px solid var(--line-2);
  background: var(--paper-hi);
  color: var(--ink);
}
html[data-theme="dark"] kbd { background: var(--page); }
.proto-foot { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- Pointer devices only: hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover, .chip:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .chip.is-open:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
  input:hover { border-color: var(--ink-3); border-bottom-color: var(--ink); }
  .reveal:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .btn:hover { background: var(--ink-hover); box-shadow: inset 0 0 0 3px var(--ink-hover), inset 0 0 0 4px color-mix(in srgb, var(--paper) 45%, var(--ink)); }
  .btn:hover .btn-arrow { transform: translateX(3px); }
  .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .link:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
  .link-back:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .foot-apply a:hover, .foot-links a:hover, .foot-install:hover { text-decoration-color: currentColor; }
}

/* ---------- Two-step setup and recovery codes ----------
   The QR prints on a white plate in both themes so any camera reads it; the key and the
   recovery codes are set like a coupon, in tabular figures, and select as one unit. */
.mfa { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 18px; }
.mfa:has(.mfa-qr[hidden]) { grid-template-columns: minmax(0, 1fr); }
.mfa-qr { width: 128px; height: 128px; padding: 5px; background: #fff; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 0, 0, .18); }
.mfa-qr .qr { display: block; width: 100%; height: 100%; }
.mfa-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.mfa-steps li::marker { font-family: var(--display); font-size: .7rem; color: var(--ink); }
.mfa-steps strong { color: var(--ink); font-weight: 600; }
.mfa-store { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.mfa-key {
  display: block; margin-top: 6px; padding: 6px 10px;
  border: 1px dashed var(--line-2); background: var(--field);
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .12em; word-spacing: .2em;
  overflow-wrap: anywhere; user-select: all;
}
.mfa-open { width: 100%; margin: 0 0 4px; text-decoration: none; }
/* Phone: no QR (a phone cannot scan itself); the setup key shows only when asked for. */
.mfa.is-phone { grid-template-columns: minmax(0, 1fr); }
.mfa.is-phone .mfa-qr { display: none; }
.mfa.is-phone:not(.show-key) #mfa-step-key { display: none; }
.mfa.show-key #mfa-step-scan, .mfa.show-key ~ .mfa-open { display: none; }
.k-in, .mfa.show-key .k-or { display: none; }
.mfa.show-key .k-in { display: inline; }
.mfa-open[hidden] { display: none; }

.rcodes {
  list-style: none; margin: 0 0 6px; padding: 12px 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
  border: 1px solid var(--line-2); background: var(--field);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-2);
  counter-reset: rc;
}
.rcodes li { counter-increment: rc; display: flex; align-items: baseline; gap: 10px; font-size: 1.02rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; user-select: all; }
.rcodes li::before { content: counter(rc); font-family: var(--display); font-size: .62rem; color: var(--ink-3); min-width: 1ch; }
.aux-codes { justify-content: flex-start; gap: 4px 24px; margin: 0 0 8px; }
.tick { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; font-family: var(--sans); font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.tick input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
/* The confirmation line itself carries the error, so the screen never grows; the message
   is also kept for screen readers in #rcodes-error. */
#rcodes-error { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tick.is-invalid { font-weight: 600; }
.tick.is-invalid input { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Short desktop windows ---------- */
@media (min-width: 861px) and (max-height: 700px) {
  :root { --field-h: 48px; --field-gap: 14px; }
  h1 { font-size: clamp(1.25rem, .95rem + .7vw, 1.5rem); margin-bottom: 10px; }
  #screen-signin .lede-intro, #screen-forgot .lede-intro, #screen-support .lede-intro, #screen-activate .lede-intro, #screen-mfa .lede-intro, #screen-codes .lede-intro { display: none; }
  .mfa { margin-bottom: 12px; }
  .lede { margin-bottom: 16px; }
  .alert { margin-bottom: 14px; }
  .who { margin: -8px 0 14px; }
  .btn { min-height: 52px; margin-top: 6px; }
  input.cell { height: 58px; }
  .code legend { margin-bottom: 8px; }
  .aux { margin-top: 6px; }
  .desk { padding-top: 32px; padding-bottom: 32px; }
  .seal { top: 2px; right: -2px; width: 118px; height: 118px; }
  #screen-success .lede-strong { max-width: calc(100% - 128px); }
  .fine { margin-top: 12px; align-items: center; }
  .fine-sec { max-width: none; font-size: .75rem; white-space: nowrap; }
  .list-cap { margin-top: 16px; }
  .endorse-row { padding: 10px 0 11px; }
  .finale { margin-top: 14px; }
}

/* ---------- Tablet: the certificate stacks ---------- */
@media (max-width: 860px) {
  .top { --top-h: 68px; }
  .brand { height: 24px; }
  .stage { align-items: center; }
  .cert { max-width: 560px; }
  .plate { grid-template-columns: minmax(0, 1fr); margin: 8px; }
  .vignette {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    gap: 6px 18px;
    padding: 32px 30px 22px 30px;
  }
  .rosette-wrap { grid-row: 1 / 3; width: 124px; }
  .serial-rise { align-self: end; font-size: 8.5px; }
  .vignette-cap { text-align: left; align-self: start; gap: 5px; }
  .medallion-mark { height: 22%; }
  .hold-band { height: 22px; font-size: 8px; letter-spacing: .24em; top: 66%; left: 2%; right: 2%; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px color-mix(in srgb, var(--paper) 45%, transparent); }
  .thread { margin: 0 30px; height: 9px; }
  .thread::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .thread::after {
    left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(to bottom, var(--thread-a), var(--thread-b) 45%, var(--thread-c));
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 30px);
            mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 30px);
  }
  .desk { padding: 26px 30px 26px; }
  .seal { top: -4px; right: 0; width: 116px; height: 116px; }
  #screen-success .lede-strong { max-width: calc(100% - 124px); }
  .foot { max-width: 560px; gap: 0 24px; justify-content: center; }
  .wm { height: 44%; right: -6%; bottom: 6%; }
}

/* ---------- Phone: an app screen ---------- */
@media (max-width: 599px) {
  /* The slim phone frame reaches about 20px in from each edge; content keeps a clear band of paper inside it. */
  :root {
    --field-h: 50px; --field-gap: 16px;
    --edge: 32px;
    --pad-x: calc(var(--edge) + env(safe-area-inset-left));
    --pad-x-r: calc(var(--edge) + env(safe-area-inset-right));
    --frame-top: 28px;
  }
  body { background: var(--page); }
  .page { padding: 0; max-width: none; grid-template-rows: minmax(0, 1fr) auto; }

  /* The controls sit inside the frame, over the top of the paper. */
  .top {
    position: absolute;
    z-index: 10;
    top: 0; left: 0; right: 0;
    height: auto;
    padding: calc(env(safe-area-inset-top) + var(--frame-top)) var(--pad-x-r) 0 var(--pad-x);
  }
  .brand { height: 21px; }
  .tools { gap: 8px; }
  .chip { padding: 0 12px 0 10px; font-size: 9px; letter-spacing: .18em; }
  .net { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .net svg { width: 18px; height: 18px; }

  .stage { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .cert {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: none;
    box-shadow: 0 1px 0 var(--line), 0 12px 22px -16px var(--shadow-2);
  }
  html[data-theme="dark"] .cert { box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
  .plate { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; padding-top: env(safe-area-inset-top); }
  .plate::before { display: none; }

  /* The emblem takes the spare height: large on tall phones, gone on the shortest. */
  .vignette {
    flex: 1 1 0;
    min-height: 0;
    container: vignette / size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: calc(var(--frame-top) + 52px) var(--pad-x-r) 12px var(--pad-x);
  }
  .serial-rise { display: none; }
  .rosette-wrap { grid-row: auto; width: min(236px, 72cqw, calc(100cqh - 56px)); }
  .vignette-cap { text-align: center; align-self: center; }
  .medallion-mark { height: 20%; }
  @container vignette (max-height: 128px) { .rosette-wrap { display: none; } }
  @container vignette (max-height: 44px) { .vignette-cap { display: none; } }

  .thread { flex: none; margin: 0 var(--pad-x-r) 0 var(--pad-x); }
  .desk { flex: none; padding: 18px var(--pad-x-r) 30px var(--pad-x); }
  h1 { font-size: 1.36rem; margin-bottom: 10px; }
  .lede { margin-bottom: 20px; font-size: .9375rem; }
  .lede-strong + .lede { margin-bottom: 20px; }
  .who { margin: -12px 0 18px; font-size: .875rem; }
  .field-head { min-height: 20px; margin-bottom: 6px; }
  .btn { margin-top: 6px; }
  .code legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cells { gap: 5px; }
  .cells-gap { flex-basis: 10px; }
  input.cell { min-width: 0; height: 56px; font-size: 1.3rem; }
  input.cell:focus-visible { outline-offset: 1px; }
  .aux { margin-top: 8px; }
  .list-cap { margin-top: 18px; }
  .endorse-row { padding: 9px 0 10px; }
  .finale { margin-top: 14px; }
  /* The seal floats and the text wraps around its circle, instead of losing a column to it. */
  .seal { position: relative; float: right; top: auto; right: auto; width: 84px; height: 84px; margin: -2px -4px 4px 10px; shape-outside: circle(50%); }
  #screen-success .lede-strong { max-width: none; }
  .list-cap { clear: both; font-size: 10px; letter-spacing: .16em; }
  .finale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; }
  .finale p { display: inline; font-size: .875rem; }
  #restart {
    /* A 44px tap area from padding, cancelled by negative margins so the line keeps its height. */
    display: inline-block; vertical-align: baseline; min-height: 0; margin: -12px 0 -12px 4px; padding: 12px 0;
    background: none; box-shadow: none; color: var(--ink);
    font-family: var(--sans); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .fine { margin-top: 14px; }
  .fine-sec { font-size: .75rem; max-width: 30ch; }
  .mfa { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
  .mfa-qr { display: none; }
  .mfa:not(.show-key) #mfa-step-key { display: none; }
  .mfa-steps { gap: 8px; font-size: .875rem; }
  .rcodes { padding: 10px 12px; gap: 4px 16px; }
  .rcodes li { font-size: .95rem; }
  .serial-flat { font-size: 9px; letter-spacing: .18em; }
  .wm { height: 40%; right: -10%; bottom: 4%; }

  .foot {
    display: grid;
    justify-content: stretch;
    gap: 0;
    max-width: none;
    padding: 4px var(--pad-x-r) max(8px, env(safe-area-inset-bottom)) var(--pad-x);
  }
  .foot-apply a, .foot-links a, .foot-install { min-height: 40px; }
  .foot-links { gap: 0 18px; font-size: .8125rem; }

  /* The prototype notes rise as a bottom sheet. */
  .proto {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    padding: 14px var(--pad-x-r) calc(18px + env(safe-area-inset-bottom)) var(--pad-x);
    border-width: 1.5px 0 0;
    box-shadow: inset 0 3px 0 var(--paper), inset 0 4px 0 var(--line-2), 0 -20px 40px -24px var(--shadow-2);
    transform: translateY(100%);
    opacity: 1;
    transition: transform .34s var(--ease), overlay .34s allow-discrete, display .34s allow-discrete;
  }
  .proto:popover-open { transform: none; }
  @starting-style { .proto:popover-open { transform: translateY(100%); } }
  .proto::backdrop { background: var(--scrim); transition: background-color .3s, overlay .34s allow-discrete, display .34s allow-discrete; }
  @starting-style { .proto:popover-open::backdrop { background: transparent; } }
  .proto-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* Narrow phones: the decorative serial gives the security note the full width. */
@media (max-width: 399px) {
  .serial-flat { display: none; }
  .fine-sec { max-width: none; }
}

/* Shorter phones: the introductions give way before the form does. */
@media (max-width: 599px) and (max-height: 760px) {
  #screen-signin .lede-intro, #screen-forgot .lede-intro, #screen-activate .lede-intro, #screen-support .lede-intro, #screen-mfa .lede-intro, #screen-codes .lede-intro { display: none; }
  .who { margin-top: -10px; }
}
@media (max-width: 599px) and (max-height: 700px) {
  :root { --field-h: 46px; --field-gap: 12px; }
  :root { --frame-top: 26px; }
  h1 { font-size: 1.22rem; margin-bottom: 8px; }
  #screen-2fa .lede-intro { display: none; }
  #screen-2fa:has(#form-recovery:not([hidden])) .who { display: none; }
  .who { margin: 0 0 14px; }
  .btn { min-height: 50px; }
  input.cell { height: 50px; }
  .fine { margin-top: 10px; }
  .foot-apply a, .foot-links a, .foot-install { min-height: 36px; }
}

/* ---------- Installed app ---------- */
@media (display-mode: standalone) {
  #install-item { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}