/* notslop.games: violet stamp ink on form paper. One bold element (the stamp); everything else is a calm, legible form. */
:root {
  --paper: #F5F3FA;
  --ink: #1C1631;
  --stamp: #5A33D6;
  --carbon: #625B78;
  --rule: #D8D1EA;
  --field: #FFFFFF;
  --on-stamp: #FFFFFF;
  --error: #B4232C;
  --line: #1C1631;
  --edge: #80779B; /* borders of form controls: 3:1 or better against paper and field */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(1.9rem, 3.6vw, 2.6rem);
  --step-4: clamp(2.9rem, 7.4vw, 5.6rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141021;
    --ink: #EDE9F7;
    --stamp: #A88BFF;
    --carbon: #A69EC0;
    --rule: #2E2645;
    --field: #1B1530;
    --on-stamp: #141021;
    --error: #FF8A8F;
    --line: #3B3254;
    --edge: #7A719B;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--stamp); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; }
.ink-defs { position: absolute; }
.skip:focus { left: var(--gutter); top: 0.75rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 10; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: var(--step-3); max-width: 22ch; }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: var(--step-0); letter-spacing: 0; line-height: 1.3; }
p { margin: 0 0 1rem; max-width: 66ch; }
.quiet { color: var(--carbon); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Demo-data strip, shown only when a page runs with ?mock=1 */
.mock-bar { background: var(--stamp); color: var(--on-stamp); font-size: var(--step--1); font-weight: 600; text-align: center; padding: 0.45rem var(--gutter); }
.mock-bar a { color: inherit; }

/* Header */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.25rem 0; }
.logo { display: block; width: 9.75rem; color: var(--stamp); transform: rotate(-3deg); flex: none; }
.logo svg { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: 0.5rem 1.6rem; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a:not(.button) { color: var(--ink); font-weight: 700; text-decoration: none; padding: 0.25rem 0; }
.site-nav a:not(.button):hover, .site-nav a[aria-current="page"]:not(.button) { color: var(--stamp); text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.3em; }
.nav-toggle { display: none; font: inherit; font-weight: 700; color: var(--ink); background: transparent; border: 2px solid var(--edge); border-radius: 0.5rem; padding: 0.5rem 0.85rem; cursor: pointer; line-height: 1.2; }
.nav-toggle[aria-expanded="true"] { border-color: var(--ink); }

/* Buttons */
.button {
  display: inline-block; font: inherit; font-weight: 700; line-height: 1.2; text-align: center;
  background: var(--stamp); color: var(--on-stamp); text-decoration: none;
  padding: 0.95rem 1.4rem; border: 2px solid var(--stamp); border-radius: 0.5rem; cursor: pointer;
}
.button:hover { filter: brightness(1.1); text-decoration: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.7; cursor: default; filter: none; }
.button-small { padding: 0.6rem 1.05rem; font-size: var(--step--1); }
.button-secondary { background: transparent; color: var(--stamp); border-color: var(--stamp); }
.button-secondary:hover { filter: none; background: color-mix(in srgb, var(--stamp) 10%, transparent); }
.button-quiet { background: transparent; color: var(--stamp); border-color: transparent; padding-left: 0.4rem; padding-right: 0.4rem; text-decoration: underline; text-underline-offset: 0.2em; }
.filter-bar .button-quiet { margin-left: -0.4rem; }
.button-quiet:hover { filter: none; background: transparent; text-decoration-thickness: 0.15em; }
.strong-link { font-weight: 700; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }

/* Hero: the one memorable thing is the stamp pressed onto the headline */
.hero > .wrap { position: relative; }
.hero { position: relative; overflow-x: clip; padding: clamp(2rem, 6vw, 5rem) 0 var(--section); }
.hero h1 { font-size: var(--step-4); line-height: 0.96; letter-spacing: -0.035em; max-width: 9.5ch; }
.hero-stamp {
  position: absolute; right: 0; top: clamp(3.5rem, 8vw, 7rem);
  width: clamp(17rem, 42vw, 37rem); color: var(--stamp);
  transform: rotate(-7deg); transform-origin: 50% 50%;
  animation: press 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.3s both;
  pointer-events: none; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { .hero-stamp { mix-blend-mode: screen; } }
.hero-stamp svg { width: 100%; height: auto; overflow: visible; }
@keyframes press {
  from { opacity: 0; transform: rotate(-7deg) scale(1.4); }
  60% { opacity: 1; transform: rotate(-7deg) scale(0.97); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero-stamp { animation: none; } }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 34ch; margin: 2rem 0 2.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }

/* Sections */
.section { padding: var(--section) 0; border-top: 2px solid var(--line); }
.section > .wrap > h2 + p, .section-intro { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }

/* Timely: one big number and what it asks */
.timely-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.timely-grid p { font-size: var(--step-1); line-height: 1.5; max-width: 38ch; }
.timely-grid h2 + p { margin-top: 1.25rem; }
.stat { text-align: left; }
.stat .big { display: block; font-size: clamp(4rem, 11vw, 7.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; color: var(--stamp); }
.stat .cap { display: block; margin-top: 0.75rem; color: var(--carbon); font-weight: 600; max-width: 20ch; }

/* Steps: a real sequence, so they are numbered */
.steps { list-style: none; counter-reset: step; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: block; font-size: 3.25rem; font-weight: 800; line-height: 1;
  color: var(--stamp); letter-spacing: -0.04em; margin-bottom: 0.9rem;
}
.steps h3 { margin-bottom: 0.6rem; }
.steps p { color: var(--ink); }
.steps .time { display: block; margin-top: 0.5rem; color: var(--carbon); font-size: var(--step--1); font-weight: 700; }
.after-steps { margin-top: 2.5rem; font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }

/* The four promises of the seal */
.pillars { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 3vw, 2.5rem); }
.pillars li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.pillars svg { width: 1.75rem; height: auto; color: var(--stamp); margin-bottom: 0.9rem; }
.pillars h3 { margin-bottom: 0.5rem; }
.pillars p { margin: 0; }
.pillar-note { margin-top: 2.25rem; font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }

/* The label, drawn as a filled-in form */
.label-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.label-sheet { position: relative; background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; padding: 0.5rem clamp(1rem, 3vw, 1.75rem) 1rem; }
.label-sheet dl { margin: 0; }
.label-sheet .row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.label-sheet .row:last-child { border-bottom: 0; }
.label-sheet dt { color: var(--carbon); font-weight: 600; }
.label-sheet dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.label-sheet .mini-stamp { position: absolute; right: -1.25rem; bottom: -1.5rem; width: 11rem; color: var(--stamp); transform: rotate(-9deg); mix-blend-mode: multiply; pointer-events: none; }
@media (prefers-color-scheme: dark) { .label-sheet .mini-stamp { mix-blend-mode: screen; } }
.label-note { color: var(--carbon); font-size: var(--step--1); margin-top: 2.25rem; }

/* Ruled rows: a heading on the left, one plain line on the right */
.ruled { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 56rem; }
.ruled li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.25rem 2rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.ruled li:last-child { border-bottom: 1px solid var(--rule); }
.ruled h3 { font-size: var(--step-0); }
.ruled p { margin: 0; }

/* Promises */
.promises { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem clamp(2rem, 5vw, 4rem); }
.promises li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.9rem; font-size: var(--step-1); line-height: 1.45; }
.promises svg { width: 1.6rem; height: auto; margin-top: 0.25rem; color: var(--stamp); }

/* Players */
.players { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.players p { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; margin: 1.25rem 0 0; }

/* FAQ */
.faq { margin-top: 2.25rem; max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-weight: 700; font-size: var(--step-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--stamp); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.25rem; }

/* Footer */
.site-foot { border-top: 2px solid var(--line); padding: 2.5rem 0 3rem; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; max-width: 46rem; }
.foot-links a { color: var(--ink); font-weight: 700; }
.foot-mark { width: 3rem; color: var(--stamp); transform: rotate(-6deg); }
.foot-legal { color: var(--carbon); font-size: var(--step--1); margin-top: 1.5rem; max-width: none; }

/* Forms */
.slip { background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; padding: clamp(1.25rem, 3.5vw, 2.25rem); }
.slip h3 { margin-bottom: 1.25rem; }
.field { margin: 0 0 1.15rem; }
.field label, .field legend, .field .label { display: block; font-weight: 700; margin: 0 0 0.4rem; padding: 0; }
.field input[type="email"], .field input[type="url"], .field input[type="text"], .field input[type="search"], .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--edge); border-radius: 0.5rem; padding: 0.75rem 0.85rem;
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--stamp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 28%, transparent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-weight: 700; font-size: var(--step--1); margin: 0.4rem 0 0; }
.field-error:empty { display: none; }
fieldset.field { border: 0; margin: 0 0 1.15rem; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.choice { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.choice input { accent-color: var(--stamp); width: 1.15rem; height: 1.15rem; margin: 0; }
.hint { color: var(--carbon); font-size: var(--step--1); margin: 0.4rem 0 0; }
.form-status { min-height: 1.6em; margin: 0.75rem 0 0; font-weight: 700; }
.form-status:empty { min-height: 0; margin: 0; }
.form-status[data-kind="error"] { color: var(--error); }
.form-status[data-kind="ok"] { color: var(--stamp); }
.fineprint { color: var(--carbon); font-size: var(--step--1); margin-top: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chips: radio or checkbox options drawn as pills; the check mark means selected is never colour alone */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.95rem; border: 2px solid var(--edge); border-radius: 999px; font-weight: 600; font-size: var(--step--1); background: var(--field); color: var(--ink); }
.chip input:checked + span { background: var(--stamp); border-color: var(--stamp); color: var(--on-stamp); }
.chip input:checked + span::before { content: "\2713"; margin-right: 0.4rem; font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--stamp); outline-offset: 3px; }

/* Standard page */
.doc-head { padding: clamp(2rem, 5vw, 4rem) 0 2.5rem; }
.doc-head h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 16ch; }
.doc-head .lead { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; margin: 1.25rem 0 0; }
.doc-meta { color: var(--carbon); margin-top: 1rem; }
.doc-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-bottom: var(--section); }
.toc { position: sticky; top: 1.5rem; font-size: var(--step--1); }
.toc h2 { font-size: var(--step-0); letter-spacing: 0; margin-bottom: 0.75rem; }
.toc ol { margin: 0; padding-left: 1.75rem; }
.toc li { margin: 0.35rem 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--stamp); text-decoration: underline; }
.doc section { padding: 0 0 2.75rem; scroll-margin-top: 1rem; }
.doc section + section { border-top: 1px solid var(--rule); padding-top: 2.5rem; }
.doc h2 { font-size: var(--step-2); max-width: none; margin-bottom: 1rem; }
.doc h3 { margin: 1.5rem 0 0.5rem; }
.doc ul, .doc ol { padding-left: 1.4rem; margin: 0 0 1rem; max-width: 66ch; }
.doc li { margin: 0.4rem 0; }
.doc table { border-collapse: collapse; width: 100%; max-width: 46rem; margin: 0.5rem 0 1.25rem; font-size: var(--step--1); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.doc th { color: var(--carbon); font-weight: 700; }
.comment-box { background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 0 0 3rem; max-width: 46rem; }
.comment-box p:last-child { margin-bottom: 0; }

/* Pages that hold a flow or a list: a heading, a short intro, then the content */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; }
.page-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; max-width: 24ch; }
.page-head .lead { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; margin: 1.1rem 0 1rem; }
.page-body { padding-bottom: var(--section); }
.assure { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; color: var(--carbon); font-weight: 600; font-size: var(--step--1); }
.assure li { display: flex; align-items: center; gap: 0.5rem; }
.assure svg { width: 1rem; height: auto; color: var(--stamp); flex: none; }

/* Stepper at the top of the apply flow */
.stepper { list-style: none; counter-reset: s; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 46rem; }
.stepper li { counter-increment: s; border-top: 4px solid var(--rule); padding-top: 0.55rem; font-weight: 700; font-size: var(--step--1); color: var(--carbon); line-height: 1.3; }
.stepper li::before { content: "Step " counter(s); display: block; font-weight: 600; font-size: 0.8125rem; }
.stepper li[data-state="current"] { border-top-color: var(--stamp); color: var(--ink); }
.stepper li[data-state="done"] { border-top-color: var(--stamp); color: var(--stamp); }
.stepper li[data-state="done"]::after { content: " (done)"; font-weight: 600; }

/* Panels: one card per step */
.flow { max-width: 46rem; }
.panel { background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; padding: clamp(1.1rem, 3.5vw, 1.75rem); margin: 0 0 1.25rem; scroll-margin-top: 1rem; }
.panel[data-state="upcoming"] { background: transparent; border: 2px dashed var(--edge); color: var(--carbon); }
.panel-head { display: flex; align-items: center; gap: 0.9rem; }
.panel-head h2 { font-size: var(--step-1); max-width: none; letter-spacing: -0.01em; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.panel-head h2:focus { outline: none; }
.panel-head h2:focus-visible { outline: 3px solid var(--stamp); outline-offset: 4px; }
.num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--stamp); color: var(--stamp); font-weight: 800; line-height: 1; }
.num svg { width: 1.1rem; height: auto; }
.panel[data-state="done"] .num { background: var(--stamp); color: var(--on-stamp); }
.panel[data-state="upcoming"] .num { border-color: var(--edge); color: var(--carbon); }
.panel-state { flex: none; font-size: var(--step--1); font-weight: 700; color: var(--carbon); }
.panel-body { margin-top: 1.25rem; }
.panel-summary { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.panel-summary p { margin: 0; flex: 1 1 16rem; }
.panel h3 { font-size: var(--step-0); letter-spacing: 0; margin: 1.5rem 0 0.5rem; }
.panel h3:first-child { margin-top: 0; }

/* Beside the apply flow on wide screens */
.flow-grid { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 17rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.flow-aside { align-self: start; border-top: 2px solid var(--ink); padding-top: 1rem; font-size: var(--step--1); }
@media (min-width: 64.01rem) { .flow-aside { position: sticky; top: 1.5rem; } } /* only where it sits beside the steps */
.flow-aside h2 { font-size: var(--step-0); letter-spacing: 0; max-width: none; margin: 0 0 0.6rem; }
.flow-aside h2:not(:first-child) { margin-top: 1.5rem; }
.flow-aside ul { margin: 0; padding-left: 1.1rem; }
.flow-aside li { margin: 0.4rem 0; }
.flow-aside p { margin: 0; }

/* Callouts */
.callout { border: 2px solid var(--stamp); border-left-width: 6px; border-radius: 0.5rem; background: color-mix(in srgb, var(--stamp) 8%, var(--field)); padding: 1rem 1.15rem; margin: 0 0 1.25rem; }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { font-size: var(--step-0); letter-spacing: 0; margin: 0 0 0.35rem; }
.callout[data-kind="error"] { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--field)); }
.callout[data-kind="quiet"] { border-color: var(--edge); background: transparent; }
.linkbox { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin: 0.6rem 0 0; }
.linkbox .button { display: inline-flex; align-items: center; justify-content: center; } /* a link and a button are the same height and both centre their text */
.linkbox code { flex: 1 1 14rem; min-width: 0; font-family: var(--mono); font-size: 0.9375rem; background: var(--field); border: 2px solid var(--edge); border-radius: 0.5rem; padding: 0.6rem 0.75rem; overflow-wrap: anywhere; user-select: all; }

/* Lookup result */
.skel, .game-card .cap.skel { background: linear-gradient(90deg, var(--rule) 0%, color-mix(in srgb, var(--rule) 35%, var(--field)) 50%, var(--rule) 100%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; border-radius: 0.4rem; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.lookup { margin-top: 1.5rem; }
.lookup:empty { display: none; }
.skel-card { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem; }
.skel-card .skel { min-height: 5.6rem; }
.skel-lines { display: grid; gap: 0.7rem; align-content: start; }
.skel-lines .skel { min-height: 1rem; }
.skel-rows { display: grid; gap: 0.8rem; margin-top: 1.25rem; }
.skel-rows .skel { height: 1.1rem; }
.game-id { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.game-id .cap { aspect-ratio: 460 / 215; border-radius: 0.5rem; overflow: hidden; background: var(--rule); border: 1px solid var(--rule); }
.game-id .cap img { width: 100%; height: 100%; object-fit: cover; }
.game-id h3 { margin: 0 0 0.3rem; font-size: var(--step-1); line-height: 1.2; overflow-wrap: anywhere; }
.game-id h3:focus { outline: none; }
.game-id h3:focus-visible { outline: 3px solid var(--stamp); outline-offset: 4px; }
.game-id p { margin: 0; color: var(--carbon); font-weight: 600; font-size: var(--step--1); }
.found { margin: 0.5rem 0 0; padding: 0; }
.found .row { display: grid; grid-template-columns: 1.1rem minmax(0, 11rem) minmax(0, 1fr); gap: 0.2rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.found .row:last-child { border-bottom: 0; }
.found svg { width: 1.1rem; height: auto; margin-top: 0.3rem; color: var(--stamp); }
.found dt { color: var(--carbon); font-weight: 600; font-size: var(--step--1); padding-top: 0.12rem; }
.found dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.notes { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--carbon); font-size: var(--step--1); }
.todo { margin: 0.5rem 0 0; padding-left: 1.4rem; }
.todo li { margin: 0.4rem 0; }
.todo .why { display: block; color: var(--carbon); font-size: var(--step--1); }
.lookup h3 { margin: 1.5rem 0 0.4rem; font-size: var(--step-0); letter-spacing: 0; }
.lookup .game-id + h3 { margin-top: 1.5rem; }

/* Ownership choices and codes */
.pick { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.pick-card { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: start; padding: 0.95rem 1rem; border: 2px solid var(--edge); border-radius: 0.6rem; cursor: pointer; background: var(--paper); }
.pick-card.is-selected { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 8%, var(--field)); }
.pick-card input { accent-color: var(--stamp); width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; }
.pick-card strong { display: block; line-height: 1.35; }
.pick-card .sub { display: block; color: var(--carbon); font-size: var(--step--1); font-weight: 500; }
.pick-card .tag { margin-left: 0.4rem; vertical-align: 0.1em; }
.method { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.method ol { padding-left: 1.4rem; margin: 0 0 1rem; max-width: 62ch; }
.method li { margin: 0.55rem 0; }
.codebox { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin: 0.6rem 0 0.4rem; }
.codebox code { flex: 1 1 11rem; min-width: 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; background: var(--paper); border: 2px dashed var(--edge); border-radius: 0.5rem; padding: 0.6rem 0.85rem; user-select: all; overflow-wrap: anywhere; }
.codebox code.block { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; white-space: pre-wrap; }
.copy-status { font-size: var(--step--1); font-weight: 700; color: var(--stamp); min-height: 1.4em; margin: 0 0 0.5rem; }
.callout > .copy-status { min-height: 0; margin: 0; }
.callout > .copy-status:not(:empty) { margin-top: 0.5rem; }
.check-result { margin: 0.75rem 0 0; font-weight: 600; }
.check-result[data-kind="ok"] { color: var(--stamp); }
.check-result[data-kind="wait"] { color: var(--ink); }
.check-result[data-kind="error"] { color: var(--error); }
.check-result:empty { display: none; }

/* AI use rows */
.ai-legend { display: grid; gap: 0.35rem; margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: var(--step--1); color: var(--carbon); }
.ai-legend strong { color: var(--ink); }
.ai-rows { margin: 1rem 0 0; }
.seg-row { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 0.5rem 1.5rem; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.seg-row:first-child { border-top: 1px solid var(--rule); }
.seg-label { font-weight: 700; line-height: 1.3; }
.seg-help { display: block; color: var(--carbon); font-weight: 400; font-size: var(--step--1); margin-top: 0.15rem; }
.seg-from { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: 999px; padding: 0 0.45rem; vertical-align: 0.1em; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--edge); border-radius: 0.5rem; overflow: hidden; background: var(--paper); }
.seg label { position: relative; display: block; margin: 0; font-weight: 700; }
.seg label + label { border-left: 2px solid var(--edge); }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.25rem 0.3rem; font-size: var(--step--1); text-align: center; color: var(--ink); }
.seg input:checked + span { background: var(--stamp); color: var(--on-stamp); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -6px; }
.ai-preview { margin: 1.25rem 0 0; padding: 0.9rem 1rem; background: var(--paper); border: 2px dashed var(--edge); border-radius: 0.5rem; font-size: var(--step--1); }
.ai-preview strong { display: block; margin-bottom: 0.2rem; }
.ai-preview p { margin: 0; }
.attest { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.7rem; align-items: start; margin: 1.5rem 0 0.25rem; font-weight: 600; }
.attest input { accent-color: var(--stamp); width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; }
.ws-section { margin-top: 1.9rem; }
.subform { margin: 0.25rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 0.5rem; background: var(--paper); }
.subform > :last-child { margin-bottom: 0; }

/* Status tracker */
.status-head { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 0 0 1.5rem; max-width: 46rem; }
.status-head .cap { aspect-ratio: 460 / 215; border-radius: 0.5rem; overflow: hidden; background: var(--rule); border: 1px solid var(--rule); }
.status-head .cap img { width: 100%; height: 100%; object-fit: cover; }
.status-head h2 { font-size: var(--step-2); max-width: none; overflow-wrap: anywhere; }
.status-head p { margin: 0.4rem 0 0; }
.tracker { list-style: none; margin: 0; padding: 0; }
.tracker li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.tracker li:first-child { border-top: 1px solid var(--rule); }
.tracker .dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--edge); display: inline-flex; align-items: center; justify-content: center; color: var(--on-stamp); }
.tracker .dot svg { width: 0.95rem; height: auto; }
.tracker li[data-state="done"] .dot { background: var(--stamp); border-color: var(--stamp); }
.tracker li[data-state="todo"] .dot { border-color: var(--stamp); border-width: 3px; }
.tracker li[data-state="in_progress"] .dot { border-color: var(--stamp); background: linear-gradient(90deg, var(--stamp) 50%, transparent 50%); }
.tracker li[data-state="waiting"] .dot { border-style: dashed; }
.tracker li[data-state="not_needed"] .dot { border-style: dotted; opacity: 0.7; }
.tracker .label { font-weight: 700; }
.tracker li[data-state="not_needed"] .label, .tracker li[data-state="waiting"] .label { color: var(--carbon); }
.tracker .st { font-size: var(--step--1); font-weight: 700; color: var(--carbon); text-align: right; }
.tracker li[data-state="todo"] .st { color: var(--stamp); }
.tracker li[data-state="done"] .st { color: var(--ink); }
.next-card { margin: 1.5rem 0; }
.next-card h2 { font-size: var(--step-1); max-width: none; margin-bottom: 0.4rem; }
.cert-no { font-family: var(--mono); font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: 0.02em; color: var(--stamp); margin: 0.25rem 0 0.75rem; display: block; }
.decision-note { white-space: pre-wrap; margin: 0.5rem 0 0; max-width: 62ch; }

/* Tags */
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--edge); color: var(--ink); background: transparent; white-space: nowrap; }
.tag-stamp { background: var(--stamp); border-color: var(--stamp); color: var(--on-stamp); }
.tag-error { border-color: var(--error); color: var(--error); }
.tag-quiet { color: var(--carbon); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Games */
.filter-box { background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; margin: 0 0 1.25rem; }
.filter-box summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; font-weight: 800; font-size: var(--step-0); }
.filter-box summary::-webkit-details-marker { display: none; }
.filter-box summary::after { content: "+"; color: var(--stamp); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.filter-box[open] summary::after { content: "\2212"; }
.filter-active { color: var(--stamp); font-weight: 700; }
.filters { padding: 0.25rem 1.25rem 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin: 0; }
.filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters legend { font-weight: 700; margin: 0 0 0.5rem; padding: 0; }
.filters .wide { grid-column: 1 / -1; }
.filters .hint { margin-top: 0.6rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1.25rem; }
.filter-bar p { margin: 0; font-weight: 700; }
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1.5rem; }
.game-grid > li { display: flex; }
.game-card { flex: 1 1 auto; position: relative; background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; }
.game-card:focus-within { outline: 3px solid var(--stamp); outline-offset: 3px; }
.game-card .cap { aspect-ratio: 460 / 215; background: var(--rule); border-bottom: 2px solid var(--ink); overflow: hidden; }
.game-card .cap img { width: 100%; height: 100%; object-fit: cover; }
.game-card .cap.empty { display: grid; place-items: center; color: var(--edge); }
.game-card .cap.empty svg { width: 3rem; height: auto; }
.game-card .cap-none { color: var(--carbon); font-size: var(--step--1); font-weight: 600; }
.game-card .body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1 1 auto; }
.game-card h3 { font-size: var(--step-1); line-height: 1.2; overflow-wrap: anywhere; }
.game-card h3 a { color: var(--ink); text-decoration: none; }
.game-card h3 a:focus-visible { outline: none; }
.game-card h3 a::after { content: ""; position: absolute; inset: 0; }
.game-card h3 a:hover { color: var(--stamp); text-decoration: underline; }
.game-card .by { margin: 0; color: var(--carbon); font-weight: 600; font-size: var(--step--1); }
.game-card .ai { margin: 0; font-size: var(--step--1); }
.game-card .ai .k { display: block; color: var(--carbon); font-weight: 700; margin-bottom: 0.3rem; }
.game-card .foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; align-items: center; padding-top: 0.5rem; font-size: var(--step--1); font-weight: 700; }
.game-card .foot a { position: relative; z-index: 1; }
.game-card .num-tag { font-family: var(--mono); color: var(--carbon); }
.ai-chip { display: inline-block; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; padding: 0.22rem 0.55rem; border-radius: 0.3rem; border: 1.5px solid var(--edge); color: var(--ink); }
.ai-chip[data-level="generated"] { background: color-mix(in srgb, var(--stamp) 14%, var(--field)); border-color: var(--stamp); }
.ai-none { color: var(--carbon); font-weight: 600; }
.empty-state { border: 2px dashed var(--edge); border-radius: 0.75rem; padding: clamp(1.5rem, 5vw, 2.5rem); max-width: 40rem; }
.empty-state h2, .empty-state h3 { font-size: var(--step-1); max-width: none; margin-bottom: 0.5rem; }
.empty-state p:last-child { margin-bottom: 0; }
.notify { margin-top: var(--section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.notify .slip { max-width: 30rem; }
.notify h2 { font-size: var(--step-2); }
.notify p { margin-top: 1rem; }
.pick-card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem; }
.pick-box h3 a { color: var(--ink); text-decoration: none; }
.pick-box h3 a:hover { color: var(--stamp); text-decoration: underline; }
.pick-box .why { margin: 0; }
.pick-box .k { display: block; color: var(--carbon); font-weight: 700; font-size: var(--step--1); }

/* Verify result */
.verify-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; max-width: 36rem; }
.verify-form .field { flex: 1 1 14rem; margin: 0; }
.verify-form .field input { font-family: var(--mono); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.verify-result { margin-top: 1.75rem; max-width: 40rem; }
.verify-result .label-sheet { margin-top: 1rem; }
.verify-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.15rem; border: 2px solid var(--stamp); border-radius: 0.5rem; background: color-mix(in srgb, var(--stamp) 9%, var(--field)); font-weight: 500; }
.verify-banner[data-status="revoked"] { border-color: var(--error); background: color-mix(in srgb, var(--error) 9%, var(--field)); }
.verify-banner[data-status="superseded"] { border-color: var(--edge); background: var(--field); }
.verify-banner .big { font-size: var(--step-1); font-weight: 800; }

/* Small screens */
@media (max-width: 64rem) { .hero-stamp { right: 1.25rem; } }
@media (max-width: 64rem) {
  .flow-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-aside { display: none; }
}
@media (max-width: 56rem) {
  .label-wrap, .timely-grid, .notify { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}
@media (max-width: 47.99rem) {
  .site-head { gap: 0.75rem; }
  .nav-toggle { padding: 0.45rem 0.75rem; }
  .site-head[data-nav-ready] .nav-toggle { display: inline-block; order: 3; }
  .site-head[data-nav-ready] .site-nav { order: 2; margin-left: auto; }
  .site-head[data-nav-ready] .site-nav a:not(.button) { display: none; }
  .site-head[data-nav-ready][data-open="true"] .site-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; border-top: 2px solid var(--line); padding-top: 0.25rem; }
  .site-head[data-nav-ready][data-open="true"] .site-nav a:not(.button) { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
  .site-head[data-nav-ready][data-open="true"] .site-nav .button { margin-top: 1rem; padding: 0.9rem 1rem; }
  .seg-row { grid-template-columns: minmax(0, 1fr); }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .ruled li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .logo { width: 8rem; }
  .hero-stamp { position: relative; right: auto; top: auto; width: min(100%, 22rem); margin: 1.75rem 0 0 0.5rem; }
  .promises, .pillars { grid-template-columns: minmax(0, 1fr); }
  .label-sheet .row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .label-sheet .mini-stamp { width: 8.5rem; right: -0.5rem; bottom: -1.75rem; }
  .game-id, .status-head { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.9rem; }
  .skel-card { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .found .row { grid-template-columns: 1.1rem minmax(0, 1fr); }
  .found dd { grid-column: 2; }
  .stepper { gap: 0.5rem; }
  .panel-head { align-items: flex-start; }
  .panel-state { display: none; }
  .tracker li { grid-template-columns: 2rem minmax(0, 1fr); }
  .tracker .st { grid-column: 2; text-align: left; margin-top: -0.55rem; }
  .game-id .cap { border-radius: 0.4rem; }
}

/* The worked example (/example). Neutral on purpose: no stamp, no seal colour, no check marks, so nothing on it can be mistaken for a seal. */
.draft-bar { margin: 1rem 0 0; padding: 0.75rem 1rem; border: 2px dashed var(--ink); border-radius: 0.5rem; font-weight: 700; text-align: center; background: repeating-linear-gradient(135deg, transparent 0 0.6rem, color-mix(in srgb, var(--ink) 7%, transparent) 0.6rem 1.2rem); }
.tag-outline { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.pending { display: inline-block; font-family: var(--mono); font-size: 0.875em; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; padding: 0.05rem 0.4rem; border: 1px dashed var(--edge); border-radius: 0.25rem; color: var(--carbon); white-space: nowrap; }
.ex-game { background: var(--field); border: 2px solid var(--ink); border-radius: 0.75rem; padding: clamp(1.1rem, 3.5vw, 2rem); margin: 0 0 2rem; max-width: 56rem; }
.ex-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--rule); }
.ex-head h2 { font-size: var(--step-2); max-width: none; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.ex-head .by { margin: 0 0 0.6rem; color: var(--carbon); font-weight: 600; }
.ex-steps { list-style: none; margin: 0; padding: 0; }
.ex-step { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.ex-step:last-child { border-bottom: 0; padding-bottom: 0; }
.ex-step h3 { display: flex; align-items: center; gap: 0.7rem; font-size: var(--step-1); line-height: 1.2; margin: 0 0 0.4rem; }
.ex-num { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--ink); border-radius: 50%; font-size: var(--step--1); font-weight: 800; line-height: 1; }
.ex-step > .hint { margin: 0 0 0.25rem; }
.ex-rows { margin: 0.5rem 0 0; }
.ex-rows .row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.ex-rows dt { color: var(--carbon); font-weight: 600; font-size: var(--step--1); padding-top: 0.12rem; }
.ex-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ex-ai { margin-top: 0.5rem; }
.ex-ai-row { display: grid; grid-template-columns: minmax(0, 13rem) 7rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.ex-ai .area { font-weight: 700; }
.ex-ai .level { font-weight: 700; }
.ex-ai .note { color: var(--carbon); overflow-wrap: anywhere; }
.ex-ai .note:empty::before { content: "No note."; }
.ex-quote { margin: 1.25rem 0 0; }
.ex-quote .k { margin: 0 0 0.4rem; color: var(--carbon); font-weight: 700; font-size: var(--step--1); }
.ex-quote blockquote { margin: 0; padding: 0.75rem 1rem; border-left: 4px solid var(--edge); background: color-mix(in srgb, var(--ink) 5%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
.ex-quote figcaption { margin-top: 0.4rem; color: var(--carbon); font-size: var(--step--1); }
.ex-checked { margin: 0.6rem 0 0; padding-left: 1.25rem; }
.ex-checked li { margin: 0 0 0.35rem; }
.ex-outcome { margin: 0.4rem 0 0.4rem; font-size: var(--step-1); font-weight: 800; }
.ex-next { max-width: 40rem; padding-top: 1rem; }
@media (max-width: 40rem) {
  .ex-rows .row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .ex-ai-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ex-ai .note { grid-column: 1 / -1; }
}