/* A1 Lane design system: the shared foundation for both shells (UX seat spec,
   docs/research/panel-2026-10-29/PANEL-UXDESIGNER-2026-10-29.md §1–§5).
   Loaded first by the public site (site.css) and the app (app.css). Tokens, the type duet, the
   Status Chip, the Receipt, the button tiers and the motion primitives live here and nowhere else.
   Rule (§1.2): a value not in this token set does not ship. Motion is transform + opacity only;
   prefers-reduced-motion resolves every animation to its final state. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* the app component layer's scale additions (ex-ui.css, F-1 move): a display
     step, the tap target, and the named duration ladder the components use */
  --fs-display-s: 1.5rem; --tap: 44px;
  --t-state: 120ms; --t-control: 200ms; --t-accordion: 240ms; --t-panel: 320ms; --t-stamp: 380ms; --t-line: 640ms;
  /* colour: Direction A, unchanged */
  --ledger: #0C3B2E; --ledger-2: #12493A; --ledger-3: #1B5A48;
  --verify: #2FBF71; --verify-ink: #0B6B3A;
  --paper: #F7F4EC; --paper-2: #EFEADD; --sheet: #FFFDF8;
  --ink: #122019; --ink-2: #3D4A43; --ink-3: #5F6B62;
  --rule: #D9D2C2; --rule-dark: rgba(247, 244, 236, 0.16);
  /* a field's edge (Hallmark H-02): one muted step darker than the --rule hairline —
     >=3:1 on paper, paper-2 and sheet, where --rule itself measures 1.48:1 */
  --field-edge: #8C8163;
  --amber: #9C5A00; --amber-bg: #FBEBCC; --amber-line: #E3B25C;
  --neutral-bg: #E9E5DA; --bad: #A3261E; --info: #1F5FA8;
  --verify-tint: #DFF5E9; --bad-tint: #F7E3E1; /* §1.4 chip tints */

  /* typefaces (§1.2) */
  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (§1.3) — the only font sizes */
  --fs-display-xl: clamp(2.75rem, 6vw, 4.75rem);
  --fs-display-l: clamp(2rem, 4.4vw, 3.25rem);
  --fs-display-m: clamp(1.625rem, 3vw, 2.25rem);
  --fs-title: 1.25rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: .875rem;
  --fs-caption: .75rem;
  --fs-eyebrow: .6875rem;
  /* component sizes the spec names (§1.4 buttons + input labels, §1.6 receipt voice) */
  --fs-control: .9375rem;
  --fs-label: .8125rem;
  --fs-receipt-title: 1.5rem;
  --fs-verdict: 1.0625rem;

  /* radii (§1.2) */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;

  /* elevation (§1.2) */
  --e-1: 0 1px 2px rgba(18, 32, 25, .06);
  --e-2: 0 1px 0 rgba(18, 32, 25, .04), 0 12px 32px -18px rgba(18, 32, 25, .35);
  --e-3: 0 24px 48px -16px rgba(12, 59, 46, .35);

  /* spacing: the 4px scale (§1.2) — every padding, margin and gap */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* layout (§1.2) */
  --wrap: 1200px; --app-max: 1120px; --app-gutter: var(--s-6); --measure: 68ch;
  --target: 44px; /* §4.5 the hit-area floor */

  /* focus (§1.2): one ring, both shells. On dark surfaces the gap ring is ledger and the outer
     ring is verify (verify-ink on ledger would fall under 3:1, see BUILD-LOG interface notes). */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--verify-ink);
  --focus-dark: 0 0 0 2px var(--ledger), 0 0 0 4px var(--verify);

  /* motion (§3): two easings, one duration ladder; the stamp and the pulse name their own */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 640ms;
  --d-stamp: 380ms; --d-pulse: 2.4s;

  --receipt-ground: var(--paper); /* the colour the perforation punches through to */
}
.on-dark { --focus: var(--focus-dark); --receipt-ground: var(--ledger); }

/* -- focus: the single ring, every interactive element ---------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="slider"]):focus-visible {
  outline: 2px solid transparent; /* forced-colors keeps a visible outline */
  outline-offset: 2px;
  box-shadow: var(--focus);
}

/* -- type (§1.3) ---------------------------------------------------------------------------- */
.t-display-xl, .t-display-l, .t-display-m { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.t-display-xl { font-size: var(--fs-display-xl); line-height: 1.04; }
.t-display-l { font-size: var(--fs-display-l); line-height: 1.08; }
.t-display-m { font-size: var(--fs-display-m); line-height: 1.12; }
.t-title { font: 650 var(--fs-title)/1.25 var(--font-ui); letter-spacing: -0.01em; }
.t-body-l { font: 400 var(--fs-body-l)/1.55 var(--font-ui); }
.t-body { font: 400 var(--fs-body)/1.55 var(--font-ui); }
.t-body-s { font: 400 var(--fs-body-s)/1.45 var(--font-ui); }
.t-caption { font: 500 var(--fs-caption)/1.4 var(--font-ui); }
.eyebrow { display: block; font: 600 var(--fs-eyebrow)/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* -- buttons (§1.4): three tiers; destructive only inside a danger zone ----------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--target); padding: 0 20px; /* §1.4 literal */
  border-radius: var(--r-sm); border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font: 600 var(--fs-control)/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out), transform var(--d-1) var(--ease-out);
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary { background: var(--ledger); border-color: var(--ledger); color: var(--paper); }
.btn--primary:hover { background: var(--ledger-2); border-color: var(--ledger-2); color: var(--paper); transform: translateY(-1px); }
.btn--primary:active, .btn--verify:active { transform: translateY(0); }
.btn--verify { background: var(--verify); border-color: var(--verify); color: var(--ink); }
.btn--verify:hover { color: var(--ink); transform: translateY(-1px); }
.btn--ghost { border-color: transparent; }
.btn--ghost:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn--danger { background: var(--bad); border-color: var(--bad); color: var(--sheet); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.on-dark .btn:not(.btn--primary):not(.btn--verify) { border-color: var(--rule-dark); color: var(--paper); }

/* -- the Status Chip (§1.4): five variants, dot + word, never colour alone ------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0 10px; /* §1.4 literal */
  border-radius: var(--r-full); border: 1px solid transparent;
  font: 600 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  vertical-align: middle;
}
.chip::before { content: ""; position: relative; flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; }
.chip--verified { background: var(--verify-tint); color: var(--verify-ink); }
.chip--limited { background: var(--paper); color: var(--ink-2); border-color: var(--rule); }
.chip--limited::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip--pending { background: var(--neutral-bg); color: var(--ink-2); }
.chip--attention { background: var(--amber-bg); color: var(--amber); }
.chip--failed { background: var(--bad-tint); color: var(--bad); }
/* in flight: the dot carries the M9 pulse */
.chip--live { position: relative; }
.chip--live::after { content: ""; position: absolute; left: 10px; top: 7px; width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; animation: pulse var(--d-pulse) var(--ease-out) infinite; }
.on-dark .chip--pending { background: var(--ledger-3); color: var(--paper); }
.on-dark .chip--limited { background: transparent; color: var(--paper); border-color: rgba(247, 244, 236, .5); }
.sample-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2); font: 600 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--ink-3); border-radius: var(--r-sm); }

/* -- the Receipt (§1.6): one anatomy, five states, three sizes -------------------------------- */
.receipt {
  position: relative; display: grid; gap: var(--s-2); width: 100%; max-width: 480px;
  padding: var(--s-5); background: var(--sheet); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--e-2);
}
.receipt p, .receipt dl { margin: 0; }
.receipt__eyebrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.receipt__eyebrow .eyebrow { margin: 0; }
.receipt__title { font: 600 var(--fs-receipt-title)/1.2 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.receipt__platform { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font: 600 var(--fs-body-s)/1.45 var(--font-ui); }
.receipt__platform .logo { width: 20px; height: 20px; }
.receipt__handle { font-weight: 400; color: var(--ink-3); }
/* the perforation: punched holes on a ruled line, notches at both edges (full size only) */
.receipt__perf {
  position: relative; height: 8px; margin: var(--s-2) calc(var(--s-5) * -1);
  background:
    radial-gradient(circle at 8px 50%, var(--receipt-ground) 3.5px, transparent 4px) 0 0 / 16px 8px repeat-x,
    linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
}
.receipt__perf::before, .receipt__perf::after {
  content: ""; position: absolute; top: -4px; width: 16px; height: 16px; border-radius: var(--r-full);
  background: var(--receipt-ground); box-shadow: inset 0 0 0 1px var(--rule);
}
.receipt__perf::before { left: -8px; }
.receipt__perf::after { right: -8px; }
.receipt__fields { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding-top: var(--s-2); }
.receipt__field { display: contents; }
.receipt__fields dt { font: 500 var(--fs-caption)/1.45 var(--font-ui); color: var(--ink-3); align-self: center; }
.receipt__fields dd { margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: var(--s-2); font: 500 var(--fs-body-s)/1.45 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.mark { font: 700 var(--fs-body-s)/1 var(--font-ui); }
.mark--match { color: var(--verify-ink); }
.mark--mismatch { color: var(--bad); }
/* the two-column grid: asked for beside what came back, a match mark per field */
.receipt__ledger { width: 100%; border-collapse: collapse; margin-top: var(--s-2); font: 500 var(--fs-body-s)/1.45 var(--font-ui); }
.receipt__ledger th, .receipt__ledger td { text-align: left; padding: 6px var(--s-2) 6px 0; vertical-align: top; }
.receipt__ledger thead th, .receipt__ledger tbody th { font: 500 var(--fs-caption)/1.4 var(--font-ui); color: var(--ink-3); }
.receipt__ledger thead th { border-bottom: 1px solid var(--rule); }
.receipt__ledger td { font-family: var(--font-mono); overflow-wrap: anywhere; }
.receipt__ledger .receipt__m { width: 24px; text-align: right; }
.receipt .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the one redaction mark: a visible bar, never blank space */
.redact { display: inline-block; width: 7em; height: .9em; vertical-align: -1px; background: var(--ink); border-radius: 2px; }
.receipt__verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2) !important; padding-top: var(--s-3);
  border-top: 1px dashed var(--rule); font: italic 500 var(--fs-verdict)/1.4 var(--font-display); color: var(--ink-2);
}
.receipt__verdict--verified { color: var(--verify-ink); }
.receipt__verdict--attention { color: var(--amber); }
.receipt__verdict--failed { color: var(--bad); }
.receipt__time { font: 500 var(--fs-caption)/1.4 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.receipt__note { font: 400 var(--fs-body-s)/1.45 var(--font-ui); color: var(--ink-3); }
/* room for the mark in the bottom-right corner */
.receipt--verified, .receipt--limited, .receipt--attested { padding-bottom: var(--s-6); }
.receipt--verified > .receipt__verdict, .receipt--verified > .receipt__time,
.receipt--limited > .receipt__verdict, .receipt--limited > .receipt__time,
.receipt--attested > .receipt__verdict, .receipt--attested > .receipt__time,
.receipt--verified > .receipt__foot, .receipt--limited > .receipt__foot, .receipt--attested > .receipt__foot { padding-right: var(--s-9); }

/* the stamp: 88px seal breaking the card edge at −8°; verified only */
.stamp { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 88px; height: 88px; color: var(--verify-ink); transform: rotate(-8deg); pointer-events: none; }
.stamp svg { display: block; width: 100%; height: 100%; }
.stamp__check { stroke: var(--verify); }
.on-dark .stamp { color: var(--verify); }
.receipt > .stamp { right: calc(var(--s-2) * -1); bottom: calc(var(--s-2) * -1); }
@media (min-width: 720px) { .receipt > .stamp { right: calc(var(--s-5) * -1); bottom: calc(var(--s-5) * -1); } }
.stamp::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-full); box-shadow: 0 0 0 2px var(--verify); opacity: 0; }
.js .stamp[data-pending] { opacity: 0; }
/* M2: the landing. Scale 1.6 → 1.0 on the stamp spring, one ring pulse, the paper dips. */
.stamp.is-landing { animation: stamp-land var(--d-stamp) var(--ease-stamp) both; }
.stamp.is-landing::after { animation: stamp-ring var(--d-3) var(--ease-out) var(--d-stamp) both; }
.receipt.is-stamped { animation: paper-dip var(--d-1) var(--ease-out) var(--d-stamp) both; }
@keyframes stamp-land { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes stamp-ring { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
@keyframes paper-dip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }

/* limited: the seal's ghost, hollow, 40% — the absence is designed */
.receipt__ghost {
  position: absolute; right: var(--s-4); bottom: var(--s-4); width: 88px; height: 88px; display: grid; place-items: center;
  border: 2px dashed var(--ink-3); border-radius: var(--r-full); color: var(--ink-3); opacity: .4; transform: rotate(-8deg);
  font: 600 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
}
/* a specimen: SAMPLE in the stamp position, in every state (Compare B10, G7) */
.receipt__ghost--sample { opacity: .8; border-style: solid; }
.receipt--specimen { padding-bottom: var(--s-6); }
.receipt--specimen > .receipt__verdict, .receipt--specimen > .receipt__time, .receipt--specimen > .receipt__foot { padding-right: var(--s-9); }
/* uncertain: the return line still travelling — a static partial hairline, no timer motion */
.receipt__hairline { position: relative; display: block; height: 2px; margin-top: var(--s-1); background: var(--rule); border-radius: var(--r-full); overflow: hidden; }
.receipt__hairline::before { content: ""; position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(.6); }
.receipt__hairline::after { content: ""; position: absolute; top: -3px; left: 60%; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--amber); }
/* human-attested: a signature, not a seal — a different kind of truth */
.receipt__sign {
  position: absolute; right: var(--s-5); bottom: var(--s-4); padding-bottom: var(--s-1);
  font: italic 500 var(--fs-verdict)/1.2 var(--font-display); color: var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2); border-radius: 0 0 50% 50% / 0 0 6px 6px; transform: rotate(-3deg);
}

/* compact: same stock and radius, three fields, the 56px stamp */
.receipt--compact { gap: var(--s-1); padding: var(--s-4) var(--s-5); }
.receipt--compact .receipt__title { font-size: var(--fs-title); }
.receipt--compact > .stamp, .receipt--compact > .receipt__ghost { width: 56px; height: 56px; }
.receipt--compact > .stamp { right: calc(var(--s-2) * -1); bottom: calc(var(--s-2) * -1); }
.receipt--compact.receipt--verified, .receipt--compact.receipt--limited, .receipt--compact.receipt--attested { padding-bottom: var(--s-5); }
.receipt--compact > .receipt__verdict, .receipt--compact > .receipt__time, .receipt--compact > .receipt__foot { padding-right: var(--s-8); }
.receipt--compact .receipt__ghost { font-size: 0; }
.receipt--compact .receipt__ghost span { font-size: var(--fs-eyebrow); letter-spacing: .06em; }

/* row: one ledger line — chip, title, platform, time, the 24px seal at the right edge */
.receipt--row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); max-width: none; min-height: 52px;
  padding: var(--s-2) 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none;
}
.receipt--row .receipt__title { flex: 1 1 12rem; min-width: 0; font: 600 var(--fs-body)/1.4 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt--row .receipt__platform { font-weight: 500; color: var(--ink-2); }
.receipt--row .receipt__time { margin-left: auto; }
.seal { display: inline-block; flex: none; width: 24px; height: 24px; color: var(--verify-ink); transform: rotate(-8deg); }
.seal svg { display: block; width: 100%; height: 100%; }
.on-dark .seal { color: var(--verify); }
/* caller slots: the card's closing link; a row's reason + next step on its own line */
.receipt__foot { font: 500 var(--fs-body-s)/1.45 var(--font-ui); }
.receipt__detail { flex: 1 0 100%; min-width: 0; font: 400 var(--fs-body-s)/1.45 var(--font-ui); color: var(--ink-2); }
.receipt__detail p + p { margin-top: var(--s-1); }

/* -- M9 status pulse: 12px dot, ring 1 → 2.2, .45 → 0, a 2.4s heartbeat ----------------------- */
.pulse { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--verify); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-full); background: var(--verify); animation: pulse var(--d-pulse) var(--ease-out) infinite; }
.pulse--idle { background: var(--ink-3); }
.pulse--idle::after { animation: none; opacity: 0; }
@keyframes pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.2); opacity: 0; } }

/* -- M3 reveals: content is never opacity-0 at rest; site.js arms .pre-reveal only when JS and
      motion are both available, from opacity .001, and clears it once seen --------------------- */
[data-reveal] { transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.js [data-reveal].pre-reveal { opacity: .001; transform: translateY(12px); }

/* -- reduced motion: every animation above resolves to its final state ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .stamp[data-pending] { opacity: 1; }
  .js [data-reveal].pre-reveal { opacity: 1; transform: none; }
  .pulse::after, .chip--live::after { animation: none !important; opacity: 0; }
}