/* Design tokens and system — rationale in docs/design.md.
   An institution of record: quiet, precise, evidence-forward. No framework,
   no build step, no webfonts (the demo and CI make zero network calls). */
:root {
  --ink: #14212b;
  --paper: #f4f5f2;
  --panel: #ffffff;
  --verdigris: #14524b;
  --verdigris-dark: #0e3c37;
  --slate: #56646f;
  --amber: #7a5a12;
  --oxblood: #7b2c34;

  --line: rgba(20, 33, 43, 0.14);
  --line-strong: rgba(20, 33, 43, 0.28);
  --wash: rgba(20, 82, 75, 0.06);
  --wash-amber: rgba(122, 90, 18, 0.08);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem;
  --t-lg: 1.375rem; --t-xl: 1.75rem; --t-display: 2.5rem;

  --radius: 4px;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-base)/1.6 var(--body);
}
main { max-width: 44rem; margin: 0 auto; padding: var(--s5) var(--s3) var(--s6); }
main.wide { max-width: 52rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
h1 { font-size: var(--t-display); line-height: 1.12; letter-spacing: -0.022em; }
h2 { font-size: var(--t-lg); letter-spacing: -0.01em; margin: var(--s5) 0 var(--s3); }
h3 { font-size: var(--t-md); margin: var(--s4) 0 var(--s2); }
p { margin: 0 0 var(--s3); }
a { color: var(--verdigris); text-underline-offset: 3px; }
a:hover { color: var(--verdigris-dark); }

/* A lede always follows a heading, and headings carry no margin. */
.lede { font-size: var(--t-md); color: var(--slate); max-width: 34rem; margin-top: var(--s3); }
/* Room to breathe between the headline and the first line of body copy. */
.lede-spaced { margin-top: var(--s4); margin-bottom: var(--s5); }
/* A short run that must not be skimmed past — the privacy promise. Weight and
   ink carry it; it wraps with the sentence rather than jumping to its own line. */
.emphatic { color: var(--ink); font-weight: 600; }
/* Separates an action from the text that qualifies it. */
.after-note { margin-top: var(--s4); }
.muted { color: var(--slate); font-size: var(--t-sm); }
.tight { margin-bottom: var(--s2); }

/* --- site shell ---------------------------------------------------------- */
header.site { border-bottom: 1px solid var(--line); background: var(--panel); }
header.site .inner {
  max-width: 44rem; margin: 0 auto; padding: var(--s3);
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: var(--s2);
}
.wordmark .mark {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--verdigris); display: inline-block;
}
header.site nav {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline;
}
header.site nav a, header.site nav button.linklike {
  font-size: var(--t-sm); color: var(--slate); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--body);
}
header.site nav a:hover, header.site nav button.linklike:hover {
  color: var(--ink); text-decoration: underline;
}

footer.site {
  border-top: 1px solid var(--line); margin-top: var(--s6);
  padding: var(--s4) var(--s3); color: var(--slate); font-size: var(--t-sm);
}
footer.site .inner { max-width: 44rem; margin: 0 auto; }

/* --- the signature element: verdict band --------------------------------- */
.verdict {
  border-radius: var(--radius); padding: var(--s4);
  margin: 0 0 var(--s4); border-left: 5px solid var(--verdigris);
  background: var(--wash);
}
.verdict p, .verdict h1 {
  font-family: var(--display); font-size: var(--t-xl); line-height: 1.25;
  letter-spacing: -0.015em; margin: 0; color: var(--ink); font-weight: 400;
}
.verdict.none { border-left-color: var(--slate); background: rgba(86, 100, 111, 0.07); }
.verdict.maybe { border-left-color: var(--amber); background: var(--wash-amber); }
.verdict.blocked { border-left-color: var(--oxblood); background: rgba(123, 44, 52, 0.07); }
.verdict .kicker {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--slate); margin: 0 0 var(--s2);
  display: block; font-weight: 400;
}

/* --- record surfaces ----------------------------------------------------- */
.sheet {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4); margin: 0 0 var(--s4);
}
.sheet.quiet { background: transparent; border-style: dashed; }

/* micro-caps field labels — the catalogue-card tell */
.label {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--slate); display: block; margin-bottom: var(--s1);
}
.field { margin-bottom: var(--s3); }
.field:last-child { margin-bottom: 0; }
.field .value { font-size: var(--t-base); }

.terms-sheet { width: 100%; border-collapse: collapse; }
.terms-sheet th, .terms-sheet td {
  text-align: left; padding: var(--s2) 0; border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.terms-sheet tr:last-child th, .terms-sheet tr:last-child td { border-bottom: 0; }
.terms-sheet th {
  font-family: var(--mono); font-weight: 400; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--slate);
  width: 12rem; padding-right: var(--s3);
}
.terms-sheet td { font-size: var(--t-base); }

.code {
  font-family: var(--mono); font-size: var(--t-md); letter-spacing: 0.04em;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s2) var(--s3);
  display: inline-block; word-break: break-all;
}
.mono { font-family: var(--mono); font-size: var(--t-sm); word-break: break-all; }

/* --- controls ------------------------------------------------------------ */
.button, button {
  font: 500 var(--t-base)/1 var(--body);
  background: var(--verdigris); color: #fff; border: 1px solid var(--verdigris);
  border-radius: var(--radius); padding: 12px var(--s4); cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
}
.button:hover, button:hover { background: var(--verdigris-dark); color: #fff; }
.button.secondary, button.secondary {
  background: transparent; color: var(--verdigris); border-color: var(--line-strong);
}
.button.secondary:hover, button.secondary:hover { background: var(--wash); color: var(--verdigris-dark); }
:focus-visible {
  outline: 3px solid var(--verdigris); outline-offset: 2px; border-radius: 2px;
}

input[type="text"], input[type="email"], input[type="url"], textarea, select {
  font: var(--t-base)/1.4 var(--body); padding: 10px var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  width: 100%; max-width: 24rem; background: var(--panel); color: var(--ink);
}
fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); }
legend { padding: 0; margin-bottom: var(--s2); font-weight: 600; }

/* radio cards for the term sheet */
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3); margin-bottom: var(--s2); background: var(--panel);
  cursor: pointer;
}
.choice:hover { border-color: var(--line-strong); }
.choice input { margin: 3px 0 0; flex-shrink: 0; }
.choice .title { font-weight: 600; display: block; }
.choice .note { color: var(--slate); font-size: var(--t-sm); }
.choice:has(input:checked) { border-color: var(--verdigris); background: var(--wash); }

/* --- drop zone ----------------------------------------------------------- */
.drop {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--panel); padding: var(--s6) var(--s4); text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.drop.drag { border-color: var(--verdigris); background: var(--wash); }
.drop .headline { font-family: var(--display); font-size: var(--t-md); font-weight: 600; }
.drop input[type="file"] { margin-top: var(--s3); font-size: var(--t-sm); }

/* --- steps --------------------------------------------------------------- */
.steps { display: flex; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s4); flex-wrap: wrap; }
.steps li {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--slate);
  padding: var(--s1) var(--s2); border-bottom: 2px solid var(--line);
}
.steps li[aria-current="step"] { color: var(--verdigris); border-bottom-color: var(--verdigris); }
.steps li.done { color: var(--ink); border-bottom-color: var(--line-strong); }

/* --- notices ------------------------------------------------------------- */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--slate);
  border-radius: var(--radius); padding: var(--s3); margin: 0 0 var(--s3);
  font-size: var(--t-sm); background: var(--panel);
}
.notice.warn { border-left-color: var(--amber); background: var(--wash-amber); }
.notice.stop { border-left-color: var(--oxblood); background: rgba(123, 44, 52, 0.06); }
.error { color: var(--oxblood); font-weight: 600; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px var(--s2); border-radius: 2px; border: 1px solid currentColor;
}
.badge.ok { color: var(--verdigris); }
.badge.wait { color: var(--amber); }
.badge.stop { color: var(--oxblood); }
.badge.quiet { color: var(--slate); }

/* --- disclosure ---------------------------------------------------------- */
details.method {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin: var(--s4) 0;
}
details.method > summary {
  cursor: pointer; padding: var(--s3); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); list-style: none;
}
details.method > summary::-webkit-details-marker { display: none; }
details.method > summary::before { content: "▸ "; color: var(--slate); }
details.method[open] > summary::before { content: "▾ "; }
details.method .body {
  padding: 0 var(--s3) var(--s3); font-size: var(--t-sm); color: var(--ink);
  border-top: 1px solid var(--line); padding-top: var(--s3);
}
details.method .body p { margin: 0 0 var(--s2); }
details.method .body dt {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--slate); margin-top: var(--s2);
}
details.method .body dd { margin: 0 0 var(--s2); }

/* --- example / record lists ---------------------------------------------- */
.examples { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 0; }
.example {
  flex: 1 1 14rem; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3); background: var(--panel); text-decoration: none; color: var(--ink);
}
.example:hover { border-color: var(--verdigris); background: var(--wash); }
.example .what { font-weight: 600; display: block; margin-bottom: var(--s1); }
.example .why { color: var(--slate); font-size: var(--t-sm); }

.table-scroll { overflow-x: auto; }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.stack > * + * { margin-top: var(--s3); }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

.machine-links { display: flex; gap: var(--s2); flex-wrap: wrap; }
.machine-links a {
  font-family: var(--mono); font-size: var(--t-xs); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s1) var(--s2); color: var(--slate);
}
.machine-links a:hover { color: var(--verdigris); border-color: var(--verdigris); }

@media (max-width: 34rem) {
  h1 { font-size: var(--t-xl); }
  .verdict p, .verdict h1 { font-size: var(--t-lg); }
  main { padding: var(--s4) var(--s3) var(--s5); }
  .terms-sheet th { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .terms-sheet td { display: block; padding-top: 0; }
  .terms-sheet tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  .terms-sheet tr:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* The identity step. Dense by nature — a value and its own publish toggle per
   row — so the rows carry the structure rather than a grid. */
.identity .id-row { margin-top: var(--s4); }
.identity .id-row > label:first-child,
.identity .id-row > .label { display: block; margin-bottom: var(--s2); }
.identity input[type="text"], .identity input[type="url"], .identity textarea { width: 100%; }
.identity .toggle { display: flex; gap: var(--s2); align-items: baseline; margin-top: var(--s2); }
.identity .toggle input { margin: 0; flex: none; }
.identity .toggle .note { display: block; color: var(--slate); font-size: var(--t-sm); }
.identity .id-link { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.identity .id-link input { flex: 1 1 12rem; }
.identity .id-link .toggle { flex: none; margin-top: 0; }
.statement [data-statement-preview] { margin-top: var(--s4); }

/* --- statement fields: one row, one value, one visibility ---------------- */
/* The page has to be scannable: someone should be able to run their eye down
   it and know what the world can see, without opening anything. */
.field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label label" "input vis" "help help";
  gap: var(--s2) var(--s3);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.field-row:last-of-type { border-bottom: 0; }
.field-row-label { grid-area: label; font-weight: 600; }
.field-row-input { grid-area: input; }
.field-row-input input, .field-row-input textarea { max-width: none; }
.field-row .vis { grid-area: vis; }
.field-row-help { grid-area: help; margin: 0; }

.vis { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.vis-option { display: inline-flex; }
.vis-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.vis-option span {
  display: block; padding: 6px var(--s3); cursor: pointer;
  font-size: var(--t-xs); font-family: var(--mono); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
  border-left: 1px solid var(--line);
}
.vis-option:first-child span { border-left: 0; }
.vis-option input:checked + span { background: var(--verdigris); color: #fff; }
/* Public is the state worth noticing, so it is the one that changes colour. */
.vis-public input:checked + span { background: var(--amber); color: #fff; }
.vis-option input:focus-visible + span { outline: 3px solid var(--verdigris); outline-offset: -3px; }

.link-row {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; padding: var(--s2) 0;
}
.link-row select { flex: 0 1 12rem; }
.link-row input { flex: 1 1 10rem; }
.links-block { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.remove-link { color: var(--oxblood); font-size: var(--t-sm); }

.preview { margin-top: var(--s4); }
.avatar { width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; }
.avatar-large { width: 120px; height: 120px; }
button.danger, button.secondary.danger { color: var(--oxblood); border-color: var(--oxblood); }
button.danger:hover, button.secondary.danger:hover { background: rgba(123, 44, 52, 0.08); color: var(--oxblood); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; grid-template-areas: "label" "input" "vis" "help"; }
  .vis { width: 100%; }
  .vis-option { flex: 1; }
  .vis-option span { text-align: center; width: 100%; }
}

/* The avatar row carries a real warning rather than a one-line hint, so its
   help cell needs room the other rows do not. */
.field-row-help .warning { margin-top: 0; }
.avatar-cell { display: flex; align-items: center; min-height: 40px; }

/* --- terms: an expandable list of uses ----------------------------------- */
/* A row reads left to right as a sentence: this use, this permission. */
.use-row {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.use-row:last-child { border-bottom: 0; }
.use-row select { flex: 1 1 14rem; max-width: none; }
.use-grip { color: var(--slate); font-size: var(--t-sm); cursor: default; }
.use-actions { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }
.use-actions button { padding: 4px var(--s2); }
.uses-block { margin: var(--s2) 0 var(--s3); }

/* A heading needs air before whatever follows it, when no lede intervenes. */
h1 + .sheet, h1 + section, h1 + .notice, h1 + .verdict { margin-top: var(--s4); }

/* --- beta banner ---------------------------------------------------------- */
/* Amber, the caution semantic: this is a real caveat about the record, not a
   marketing strip. It sits above the content rather than floating over it,
   because a notice you can scroll past is one you have read. */
.beta-banner {
  background: var(--wash-amber);
  border-bottom: 1px solid rgba(122, 90, 18, 0.3);
  color: var(--amber);
  font-size: var(--t-sm);
}
.beta-banner .inner { max-width: 44rem; margin: 0 auto; padding: var(--s2) var(--s3); }
.beta-banner strong { color: var(--amber); }

/* --- timeline ------------------------------------------------------------- */
/* A plain rule down the left with a dot per event: dates as catalogue labels,
   the event as the value, detail muted beneath. Records, not a feed. */
.timeline { list-style: none; margin: 0 0 var(--s4); padding: 0 0 0 var(--s2); border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 var(--s3) var(--s4); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 0.3em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--verdigris);
}
.timeline .label { margin-bottom: 0; }
.timeline .value { display: block; font-weight: 600; }
.timeline .muted { display: block; }

/* --- footer links -------------------------------------------------------- */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.footer-links a { color: var(--slate); }
.footer-links a:hover { color: var(--ink); }

/* --- data tables (benchmark, standards, formats) ------------------------- */
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 0 0 var(--s4); }
table.data th, table.data td {
  text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
table.data thead th {
  font-family: var(--mono); font-weight: 400; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate);
}
table.data tbody th { font-weight: 600; }
table.data tr.total th, table.data tr.total td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.table-scroll { margin: 0 0 var(--s4); }
.table-scroll table.data { margin: 0; }
/* /iscc renders a research note: its command blocks scroll on their own. */
.research-note pre { overflow-x: auto; font-size: var(--t-xs); }
.method-list dt {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--slate); margin-top: var(--s3);
}
.method-list dd { margin: 0; }
code.mono { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 0 var(--s1); }

/* --- diagrams and charts: inline SVG coloured from the tokens ------------- */
.diagram { margin: var(--s4) 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { margin-top: var(--s2); }
.dg-box { fill: var(--panel); stroke: var(--line-strong); }
.dg-accent { stroke: var(--verdigris); }
.dg-line { stroke: var(--slate); stroke-width: 1.5; fill: none; }
.dg-dash { stroke-dasharray: 4 3; }
.dg-fill { fill: var(--verdigris); }
.dg-fill-muted { fill: var(--slate); }
.dg-text { fill: var(--ink); font: 600 14px var(--body); }
.dg-small { fill: var(--slate); font: 13px var(--body); }
.dg-label { fill: var(--slate); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.07em; }

/* --- print: the brief, and any page saved as PDF ------------------------- */
@media print {
  header.site nav, .beta-banner, footer.site, .no-print, #try, .drop { display: none !important; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.45; }
  main, main.wide { max-width: none; padding: 0; }
  header.site { border: 0; }
  header.site .inner { padding: 0 0 8pt; }
  h1 { font-size: 20pt; }
  h2 { font-size: 12.5pt; margin: 12pt 0 4pt; }
  .brief p, .brief ul { margin-bottom: 6pt; }
  .brief li { margin-bottom: 2pt; }
  a { color: var(--ink); text-decoration: none; }
  .table-scroll { overflow: visible; }
  @page { margin: 14mm; }
}