/* Griot portal — dark-only for beta (settled 2026-08-13). Tokens are the working palette from
   spec/griot-brand.md, synced from the griot-marketing identity guide + site. Keep structured
   so a light theme can be added later without rework. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #050C0A;
  --panel: #0D1D17;
  --surface: #102420;
  --text: #ECF4EE;
  --muted: #90A89B;
  --muted-dim: #5F7268;
  --line: rgba(125, 165, 145, 0.14);
  --green: #23D97C;
  --green-soft: #7EF0B3;
  --green-deep: #13A861;
  --on-green: #04140D;
  --gold: #E7B24C;
  --gold-soft: #F4D18A;
  --cyan: #22CFE6;
  --cyan-soft: #8FE9F5;
  --red: #E5484D;
  --red-soft: #F2A0A3;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-card: 16px;
  --radius-button: 11px;
  --radius-chip: 6px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.6rem 0 0.6rem; }
a { color: var(--green-soft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---- Shell ---- */
.topbar {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.8rem 1.6rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar .logo img { height: 26px; display: block; }
/* A preview portal's strip (ADR 0052) — cyan, so it never reads as the gold view-as strip beneath it. */
.preview-strip {
  padding: 0.4rem 1rem; text-align: center; font-size: 0.85rem;
  color: var(--cyan-soft); background: rgba(34, 207, 230, 0.12); border-bottom: 1px solid rgba(34, 207, 230, 0.35);
}
.topbar nav { display: flex; gap: 1.2rem; flex: 1; }
.topbar nav a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-chip);
}
.topbar nav a:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.topbar nav a.active { color: var(--green); }
.topbar .who { display: flex; align-items: center; gap: 0.8rem; font-size: 0.82rem; color: var(--muted); }

main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.6rem 4rem; }

/* ---- Cards / panels ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}
.card h2:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }

.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat .n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.stat .l { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.card.stat.active { border-color: var(--green); }
.stat .l a.chip:hover { border-color: var(--green); text-decoration: none; }

/* ---- Buttons (mono — site convention) ---- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  background: var(--green);
  color: var(--on-green);
  cursor: pointer;
  box-shadow: 0 0 14px rgba(35, 217, 124, 0.18);
}
.btn:hover { background: var(--green-soft); text-decoration: none; }
.btn:active { background: var(--green-deep); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--muted); background: var(--surface); }
.btn.danger { background: transparent; color: var(--red-soft); border-color: rgba(229, 72, 77, 0.4); box-shadow: none; }
.btn.danger:hover { background: rgba(229, 72, 77, 0.12); }
.btn.small { font-size: 0.72rem; padding: 0.25rem 0.6rem; }

/* ---- Forms ---- */
label { display: block; font-size: 0.78rem; color: var(--muted); margin: 0.8rem 0 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
}
textarea.mono, input.mono { font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(35, 217, 124, 0.4); border-color: var(--green-deep); }
.filters { display: flex; gap: 0.8rem; align-items: end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filters > div { min-width: 160px; }
.filters label { margin-top: 0; }
/* One control height for the whole row: selects, inputs and buttons share a box, so the
   bottom-aligned row reads as one baseline (the health page's Label · Filter · All labels). */
.filters select, .filters input[type="text"], .filters .btn { height: 2.4rem; box-sizing: border-box; }
.filters .btn { display: inline-flex; align-items: center; }
.filters .actions { display: flex; gap: 0.5rem; align-items: end; min-width: 0; }
.inline-form { display: inline; }
.bulkbar { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; margin-bottom: 0.8rem; }

/* ---- Tables ---- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent;
}
tr:hover td { background: rgba(16, 36, 32, 0.5); }
td.upc, td.id { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; font-size: 0.92rem; }

/* ---- Status chips (mapping from spec/griot-brand.md) ---- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-chip);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip.imported { color: var(--muted); border-color: var(--line); }
.chip.preprocessing, .chip.queued, .chip.processing { color: var(--gold); border-color: rgba(231, 178, 76, 0.35); }
.chip.sent { color: var(--cyan); border-color: rgba(34, 207, 230, 0.35); }
.chip.delivered { color: var(--on-green); background: var(--green); }
.chip.error { color: var(--red-soft); border-color: rgba(229, 72, 77, 0.45); }
.chip.takendown { color: var(--muted-dim); border-color: var(--line); text-decoration: line-through; }
.chip.staged { color: var(--cyan); border-color: rgba(34, 207, 230, 0.35); border-style: dashed; }
.chip.rejected { color: var(--muted); border-color: rgba(229, 72, 77, 0.35); border-style: dashed; }
.chip.none { color: var(--muted-dim); border-color: transparent; }

/* ---- Timeline (release detail) ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 9.5rem 11rem 1fr;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.timeline .t { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.timeline .k { font-family: var(--font-mono); font-size: 0.75rem; color: var(--green-soft); }
.timeline .d { color: var(--text); overflow-wrap: anywhere; }
.timeline .d .detail { color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }

/* Activity tier (ADR 0033): timestamp · tone marker · sentence. Chips only on status moves. */
.timeline.activity li { grid-template-columns: 9.5rem 0.8rem 1fr; gap: 0.7rem; align-items: start; }
.timeline .dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-top: 0.4rem; background: currentColor; }
.timeline .dot.neutral { color: var(--muted-dim); }
.timeline .dot.progress { color: var(--cyan); }
.timeline .dot.success { color: var(--green); }
.timeline .dot.warning { color: var(--gold); }
.timeline .dot.failure { color: var(--red-soft); }
.timeline .d .chips { margin-left: 0.4rem; white-space: nowrap; }
.technical > summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.technical dl.mono { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.8rem; margin: 0.4rem 0; font-size: 0.75rem; color: var(--muted); }
.technical dl.mono dt { color: var(--muted-dim); }
.technical dl.mono dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Flash messages ---- */
.flash { border-radius: var(--radius-chip); padding: 0.7rem 1rem; margin-bottom: 1.2rem; font-size: 0.9rem; }
.flash.ok { background: rgba(35, 217, 124, 0.12); border: 1px solid rgba(35, 217, 124, 0.4); color: var(--green-soft); }
.flash.err { background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.4); color: var(--red-soft); }

/* ---- Login ---- */
/* min-height nets out main's 2rem/4rem padding so the card centres without a scrollbar. */
.login-wrap {
  min-height: calc(100vh - 6rem);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.login-card { width: 380px; padding: 2.4rem 2.2rem; text-align: center; margin-bottom: 0; }
.login-card img { height: 72px; margin-bottom: 1.4rem; }
.login-card form { text-align: left; margin-top: 1rem; }
.login-card .btn { width: 100%; margin-top: 1.4rem; }
.login-tag { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Waitlist hand-off to griot.fm — the portal is invite-only, so the way in is the marketing
   site's early-access form. Ghost pill so it never competes with Sign in. */
.login-alt {
  margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem;
}
.login-alt span { color: var(--muted); font-size: 0.85rem; }
.login-card .login-alt .btn { width: auto; margin-top: 0; }
.login-foot { margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.login-foot a { color: var(--muted-dim); }
.login-foot a:hover { color: var(--muted); }
.login-help { display: block; text-align: right; margin-top: 0.45rem; font-size: 0.78rem; color: var(--muted); }
.login-help:hover { color: var(--text); }
.login-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 1rem 0 0; }
.login-devlink { word-break: break-all; font-family: var(--font-mono); font-size: 0.72rem; }
.login-card .login-alt .btn + .btn { margin-left: 0; }

/* Sign-in method tabs (ADR 0029): two links, the active one underlined in brand green; server-rendered,
   so switching is a GET and nothing depends on script. */
.login-tabs {
  display: flex; justify-content: center; gap: 1.6rem;
  margin: 1.2rem 0 0; border-bottom: 1px solid var(--line);
}
.login-tabs a {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 0.45rem 0.2rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.login-tabs a:hover { color: var(--text); }
.login-tabs a[aria-current] { color: var(--text); border-bottom-color: var(--green); }

/* ---- Pager ---- */
.pager { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }

/* ---- Detail header ---- */
.detail-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.detail-head .upc { font-family: var(--font-mono); color: var(--muted); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.2rem; margin: 0; font-size: 0.88rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
dl.kv dd.mono { font-family: var(--font-mono); font-size: 0.82rem; }

/* Profile menu (topbar) — a <details> dropdown; layout JS closes it on outside click/Escape. */
.profile-menu { position: relative; }
.profile-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.45rem;
  color: var(--muted); font-size: 0.82rem; padding: 0.3rem 0.55rem; border-radius: 8px;
  border: 1px solid transparent; user-select: none;
}
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu > summary:hover, .profile-menu[open] > summary {
  color: var(--text); background: var(--surface); border-color: var(--line);
}
.pm-caret { font-size: 0.6rem; color: var(--muted-dim); }
.pm-chip {
  font-size: 0.7rem; color: var(--gold); background: rgba(231, 178, 76, 0.12);
  border: 1px solid rgba(231, 178, 76, 0.35); padding: 0.1rem 0.45rem; border-radius: 999px;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; z-index: 50;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.35rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pm-heading {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-dim); padding: 0.4rem 0.6rem 0.2rem;
}
.pm-form { margin: 0; }
.pm-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--text); font-size: 0.85rem; font-family: inherit;
  padding: 0.45rem 0.6rem; border-radius: 7px;
}
.pm-item:hover { background: var(--surface); text-decoration: none; color: var(--text); }
.pm-item.active, .pm-item.active .pm-role { color: var(--green); }
.pm-role { font-size: 0.72rem; color: var(--muted-dim); white-space: nowrap; }
.pm-divider { height: 1px; background: var(--line); margin: 0.35rem 0.2rem; }
.pm-sub > summary { list-style: none; }
.pm-sub > summary::-webkit-details-marker { display: none; }
.pm-sub[open] > summary .pm-caret { display: inline-block; transform: rotate(90deg); }
.pm-subpanel { padding: 0.15rem 0 0.15rem 0.55rem; }
.pm-viewas-row {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.6rem; font-size: 0.85rem;
}
.pm-viewas-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-empty { color: var(--muted-dim); font-size: 0.82rem; padding: 0.3rem 0.6rem; }

/* ---- Support tickets (ADR 0026) ---- */
.nav-badge {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; line-height: 1.4;
  color: var(--gold); background: rgba(231, 178, 76, 0.12); border: 1px solid rgba(231, 178, 76, 0.35);
  border-radius: var(--radius-chip); vertical-align: middle;
}
tr.unread td.tk-title a { font-weight: 600; }
tr.unread td.tk-title::before { content: "●"; color: var(--green); font-size: 0.6rem; margin-right: 0.4rem; vertical-align: middle; }
.chip.tk-new { color: var(--cyan); border-color: rgba(34, 207, 230, 0.35); }
.chip.tk-inprocess { color: var(--gold); border-color: rgba(231, 178, 76, 0.35); }
.chip.tk-waiting { color: var(--gold-soft); border-color: rgba(231, 178, 76, 0.35); border-style: dashed; }
.chip.tk-blocked { color: var(--red-soft); border-color: rgba(229, 72, 77, 0.45); }
.chip.tk-wontfix { color: var(--muted-dim); border-color: var(--line); text-decoration: line-through; }
.chip.tk-resolved { color: var(--on-green); background: var(--green); }
.chip.tk-closed { color: var(--muted); border-color: var(--line); }
.chip.pri-low { color: var(--muted); border-color: var(--line); }
.chip.pri-medium { color: var(--cyan); border-color: rgba(34, 207, 230, 0.35); }
.chip.pri-high { color: var(--gold); border-color: rgba(231, 178, 76, 0.35); }
.chip.pri-critical { color: var(--red-soft); background: rgba(229, 72, 77, 0.14); border-color: rgba(229, 72, 77, 0.55); }
.chip.cat-site, .chip.cat-import, .chip.cat-delivery { color: var(--muted); border-color: var(--line); }
.chip.internal { color: var(--gold); border-color: rgba(231, 178, 76, 0.35); font-weight: 500; }
a.chip:hover { border-color: var(--green); text-decoration: none; }
.help { color: var(--muted); font-size: 0.8rem; }
.choices { display: flex; flex-direction: column; gap: 0.45rem; }
.choices.inline { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.choice { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.choice input { margin-top: 0.25rem; }
.refchips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.refchip button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0 0 0.25rem; font-size: 0.85rem; line-height: 1; }
.refchip button:hover { color: var(--red-soft); }
.typeahead { position: relative; }
.typeahead-list {
  position: absolute; z-index: 20; left: 0; right: 0; margin: 0.2rem 0 0; padding: 0.3rem; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-chip);
  max-height: 16rem; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.typeahead-item { padding: 0.4rem 0.6rem; border-radius: var(--radius-chip); cursor: pointer; font-size: 0.85rem; }
.typeahead-item:hover, .typeahead-item[aria-selected="true"] { background: var(--surface); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: 1fr; } }
.msg { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.7rem; }
.msg.internal { border-color: rgba(231, 178, 76, 0.4); border-left: 3px solid var(--gold); background: rgba(231, 178, 76, 0.05); }
.msg-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.35rem; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.msg-files { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.5rem; font-size: 0.8rem; }
.tk-event { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; padding: 0.25rem 0.2rem; font-size: 0.84rem; color: var(--muted); }
.tk-event.internal { color: var(--gold); }
.tk-row label { margin-top: 0.6rem; }
.tk-inline { display: flex; gap: 0.5rem; align-items: center; }
.tk-inline select { flex: 1; }
.tk-people { list-style: none; margin: 0; padding: 0; }
.tk-people li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.tk-people li:last-child { border-bottom: 0; }

/* ---- Legal pages (ADR 0031) ---- */
/* A single reading column. Headings reuse the site's bare h1/h2 rules; the placeholders legal still has to
   fill are gold so a reviewer can see every one at a glance. */
.legal { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.legal h1 { margin-bottom: 0.3rem; }
.legal h2 { margin-top: 2rem; }
.legal h3 { font-size: 0.95rem; font-weight: 600; margin: 1.2rem 0 0.3rem; }
.legal p, .legal li { font-size: 0.92rem; }
.legal p { margin: 0.6rem 0; }
.legal ul, .legal ol { padding-left: 1.4rem; margin: 0.5rem 0; }
.legal li { margin: 0.3rem 0; }
.legal table { font-size: 0.86rem; }
.legal-meta { margin: 0 0 1.4rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.legal-draft {
  border-radius: var(--radius-chip); padding: 0.6rem 0.9rem; margin: 0 0 1.4rem; font-size: 0.85rem;
  color: var(--gold); background: rgba(231, 178, 76, 0.12); border: 1px solid rgba(231, 178, 76, 0.35);
}
.legal-placeholder {
  font-family: var(--font-mono); font-size: 0.8em; padding: 0.05rem 0.35rem; border-radius: var(--radius-chip);
  color: var(--gold-soft); background: rgba(231, 178, 76, 0.16); border: 1px solid rgba(231, 178, 76, 0.4);
}
.legal-foot { margin: 2rem 0 0; text-align: center; }

/* Artifact viewer (release page → View): pretty-printed JSON/XML/text, scrolls inside the card. */
pre.artifact-view {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;      /* long JSON strings and ERN lines wrap instead of escaping the card */
  overflow-wrap: anywhere;
  overflow: auto;
  max-height: 75vh;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Cloudflare Turnstile (ADR 0036): the fixed "normal" widget (300×65) centred in the 308px form. "flexible" was
   tried first and drew its content wider than its iframe in Christopher's browser — the Cloudflare mark was clipped.
   Reserving the height keeps the Sign in button from jumping when the iframe arrives. */
.login-turnstile { margin-top: 1.1rem; min-height: 65px; display: flex; justify-content: center; }

/* ---- Delivery specification (ADR 0041) ---- */
/* Builds on the legal reading column: wider, because the metadata and vocabulary tables need the room, with a
   table of contents, code blocks for layouts and XML fragments, and requirement chips. */
.spec { max-width: 980px; }
.spec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.4rem; }
.spec-head img { height: 28px; }
.spec-head a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.spec-summary { border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius-chip); padding: 0.8rem 1rem; margin: 1rem 0 1.4rem; background: var(--surface); }
.spec-summary ul { margin: 0.2rem 0; }
.spec-toc { columns: 2; column-gap: 2rem; padding: 0.8rem 1rem; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-chip); list-style: none; }
.spec-toc li { break-inside: avoid; margin: 0.15rem 0; font-size: 0.88rem; }
.spec h2 { scroll-margin-top: 1rem; }
.spec h2 a.anchor { color: var(--muted-dim); text-decoration: none; margin-left: 0.4rem; font-weight: 400; }
.spec h2 a.anchor:hover { color: var(--green-soft); }
.spec pre.spec-code {
  margin: 0.6rem 0 1rem; padding: 0.8rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; white-space: pre; overflow-x: auto; color: var(--text);
  max-width: 100%; min-width: 0; box-sizing: border-box;
}
.spec code { background: rgba(125, 165, 145, 0.1); padding: 0.05rem 0.3rem; border-radius: 4px; }
.spec pre code { background: transparent; padding: 0; }
.spec table { font-size: 0.84rem; }
.spec td.mono, .spec th.mono { font-family: var(--font-mono); font-size: 0.78rem; overflow-wrap: anywhere; }
.spec td { overflow-wrap: anywhere; }
/* The label column never breaks a word: anywhere-wrapping lets auto layout crush it to one letter per line
   ("Charact ers", "Your Azure Storag e"), so the first column wraps at spaces only (its minimum is its longest word). */
.spec th:first-child, .spec td:first-child { overflow-wrap: normal; word-break: normal; }
/* The metadata table: three columns that fit the card, paths stacked per family and allowed to wrap. */
.spec-metadata th:nth-child(1), .spec-metadata td:nth-child(1) { width: 24%; }
.spec-metadata th:nth-child(2), .spec-metadata td:nth-child(2) { width: 38%; }
.spec-fieldmeta { margin-top: 0.3rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.spec-paths div { display: flex; gap: 0.5rem; align-items: baseline; margin: 0 0 0.3rem; }
.spec-paths div:last-child { margin-bottom: 0; }
.spec-fam { flex: 0 0 2.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.spec-paths code { font-size: 0.76rem; overflow-wrap: anywhere; word-break: break-word; }
.spec td.yes { color: var(--green-soft); } .spec td.no { color: var(--muted-dim); }
.chip.req-required { color: var(--on-green); background: var(--green); border-color: var(--green); }
.chip.req-recommended { color: var(--cyan-soft); border-color: rgba(34, 207, 230, 0.5); }
.chip.req-optional { color: var(--muted); border-color: var(--line); }
.spec details { margin: 0.6rem 0 1rem; }
.spec details > summary { cursor: pointer; color: var(--green-soft); font-size: 0.9rem; }
.spec-note { color: var(--muted); font-size: 0.85rem; }
.spec-foot { margin: 2.4rem 0 0; text-align: center; }
@media (max-width: 640px) { .spec-toc { columns: 1; } .spec-head { flex-direction: column; align-items: flex-start; } }