/* Crimson Moon Tool — Design System v0.9 (Owner-directed layout revision of v0.4/v0.8)
   Repair contract: design/owner-feedback-v0.8/repair-contract-v0.9.md
   v0.9 changes vs v0.4:
   A. One shared centered container contract (max-width 1280): equal outer gutters on
      every route; readable prose columns are CENTERED within the shared container
      instead of left-anchored with an empty right half; cards/boards/receipts keep
      using the full available container width.
   B. Skip link (.skip-link) is hidden off-canvas at idle (zero visible pixels) and
      appears only on keyboard focus, below the sticky nav so it never covers
      brand/nav/current-page controls.
   C. Hero copy left edge = global container content edge (104 CSS px at 1440);
      copy width 620px (target 560-640); CTA and trust line share one deliberate
      center-aligned row; right-side focal subject and fade gradients preserved.
   D. Reusable .status-row contract for result/uncertainty receipt headers:
      badges are inline-flex, centered icon+text, min-height 34px, line-height 1,
      icon 16x16 non-shrinking; spacing lives on the row (12px column / 8px row
      gap), never as per-badge inline margins; wrapped rows share one left edge.
   Canvas is always #0C0A10. WCAG 2.2 AA: body text >= 4.5:1, large text >= 3:1,
   focus indicator >= 3:1. No body-level horizontal clipping; overflow is allowed
   to surface in audits. */

:root {
  --bg: #0C0A10;
  --surface-1: #17131D;
  --surface-2: #1F1928;
  --surface-elevated: #2A2233;
  --text: #F4EEE3;
  --muted: #ABA09C;
  --border: #3B3244;
  --crimson: #C8283C;
  --crimson-strong: #F05268; /* AA small text on --surface-1/--surface-2/--bg */
  --verified: #7FA382;
  --warning: #D9A441;
  --error: #CC6B66;
  --focus-ring: #E04458;
  --radius: 4px;
  --container-max: 1280px;
  --container-pad: 24px;
  --nav-h: 56px;
  --font-headline: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html {
  background: var(--bg);
  /* Reserve symmetric scrollbar gutters so the centered container's VISUAL
     outer gutters stay equal even when a classic (non-overlay) vertical
     scrollbar consumes 15px on the right (contract A: diff <= 8px at 1440). */
  scrollbar-gutter: stable both-edges;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
a { color: var(--text); }
a:hover { color: var(--crimson-strong); }

code, .mono { font-family: var(--font-mono); overflow-wrap: anywhere; word-break: break-word; }

/* Persistent visible focus — never removed, same treatment for keyboard and programmatic focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Static demonstration of the focus state in exported design boards */
.demo-focus {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---------- A. Shared centered container contract ---------- */
/* Every route/state uses this one container. margin auto => outer gutters are
   equal by construction (0px difference). Full-bleed sections (hero, footer band)
   keep their inner content on these same edges via an inner .container. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Narrow readable prose is centered within the shared container — never
   left-anchored with a large empty right half. Headings that introduce a prose
   column share the same centered column so the column reads as one unit.
   Cards, state boards, receipts, FAQ and source lists keep the full container
   width (they are the "use the available width consistently" elements). */
.section > h2,
.section > .prose,
.readable-page > .eyebrow,
.readable-page > h1,
.readable-page > .meta-line {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}
/* Board/result intro prose sits directly above full-width cards, so it uses the
   full container width like the cards do — no centered-column mismatch, no
   left-anchored gap. */
.prose-wide { max-width: none; }

/* ---------- B. Skip link: off-canvas idle, focus-only, non-obstructing ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Idle: fully off-canvas above the viewport => zero visible pixels. */
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus-visible {
  /* Keyboard focus only: appear BELOW the sticky nav band so brand, nav links
     and the current-page control stay fully visible and clickable. */
  transform: none;
  top: calc(var(--nav-h) + 12px);
}

/* ---------- Navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--nav-h); flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-family: var(--font-headline); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--text); text-decoration: none;
  padding: 0 4px 0 0;
}
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navlinks a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  color: var(--muted); text-decoration: none; font-size: 0.95rem;
  border-bottom: 2px solid transparent;
}
.navlinks a:hover { color: var(--text); }
.navlinks a[aria-current="page"] {
  color: var(--crimson-strong); border-bottom-color: var(--crimson); font-weight: 600;
}
.nav-badge {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
}

/* ---------- C. Hero (full-bleed, Shell pattern; copy on container edge) ---------- */
.hero {
  position: relative; width: 100%; height: 600px; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  display: block;
}
/* Localized left-to-right readability gradient: copy zone dark, right-side
   focal subject stays visible. */
.hero-fade-x {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(12,10,16,0.94) 0%, rgba(12,10,16,0.82) 32%,
    rgba(12,10,16,0.35) 58%, rgba(12,10,16,0.05) 78%);
}
.hero-fade-y {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(12,10,16,0.95) 0%, rgba(12,10,16,0) 35%),
    linear-gradient(to bottom, rgba(12,10,16,0.45) 0%, rgba(12,10,16,0) 18%);
}
.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
/* .container inside the flex-column hero-content must be told to stretch:
   its auto margins would otherwise shrink it to fit-content and CENTER the
   copy block inside the image (the v0.8 defect: hero copy at ~348-402px).
   width:100% + max-width restores the shared container geometry, so the copy
   left edge IS the global container content edge. */
.hero-content .container { width: 100%; }
/* Copy block is NOT centered inside the image: its left edge is the global
   container content edge via the wrapping .container (104px at 1440). */
.hero-copy { max-width: 620px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--text);
  max-width: 480px; margin-bottom: 28px;
}
/* CTA and trust line share one deliberate center-aligned row; no overlap. */
.hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.trust-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted);
  max-width: 260px; line-height: 1.4; margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 24px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1.06rem;
  text-decoration: none; cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.btn-primary { background: var(--crimson); color: #FFFFFF; }
.btn-primary:hover { background: var(--crimson-strong); color: #FFFFFF; }
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--crimson); }
.btn[disabled], .btn.is-disabled {
  background: var(--surface-elevated); color: var(--muted); cursor: not-allowed;
  border-color: var(--border);
}
.btn-text {
  background: none; border: none; color: var(--muted); cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  font-family: var(--font-body); font-size: 1rem; text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-text:hover { color: var(--text); }

/* ---------- Tool / form ---------- */
.tool-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.stepper-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.step-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.step-bar { display: flex; gap: 4px; height: 2px; min-width: 120px; }
.step-bar span { flex: 1; background: var(--border); }
.step-bar span.done { background: var(--crimson); }
.context-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 10px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
}
.chip.warn { color: var(--warning); border-color: var(--warning); }

fieldset { border: none; margin: 0 0 24px; padding: 0; }
legend, .question {
  font-family: var(--font-body); font-weight: 600; font-size: 1.2rem;
  color: var(--text); margin-bottom: 16px; padding: 0;
}
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-grid.single { grid-template-columns: 1fr; }
.option {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 56px; padding: 14px 16px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; width: 100%;
  transition: border-color 200ms;
}
.option:hover { border-color: var(--crimson); }
.option .opt-title { display: block; font-weight: 600; color: var(--text); }
.option .opt-helper { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.option[aria-pressed="true"], .option.is-selected {
  border: 2px solid var(--crimson); padding: 13px 15px;
}
.option .check { color: var(--crimson-strong); font-weight: 700; }
.helper-note {
  font-size: 0.9rem; color: var(--muted);
  border-left: 2px solid var(--border); padding: 4px 0 4px 12px; margin: 0 0 24px;
}
.field-error {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--error); font-size: 0.95rem; margin: 12px 0 0;
}
.option.is-invalid { border: 2px solid var(--error); }
.text-input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--font-mono); font-size: 0.95rem;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.field .helper-note { margin: 8px 0 0; }
.field .field-error { margin-top: 8px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "▾"; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.select-input {
  appearance: none; width: 100%; min-height: 44px;
  padding: 10px 40px 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--font-body); font-size: 1rem;
}
.select-input.is-invalid, .text-input.is-invalid { border: 2px solid var(--error); }
.tool-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap;
}

/* ---------- D. Status rows + badge invariants ---------- */
/* Reusable status-row contract: ALL spacing lives on the row container.
   No per-badge inline margins anywhere. Wrapped rows are clean flex rows that
   all start at the SAME left edge with an 8px vertical gap. */
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px; /* row gap 8px (contract), column gap 12px (within 8-12) */
}
/* Badge invariant: inline-flex, centered icon/text, min 34px height,
   line-height 1, consistent padding, 16x16 non-shrinking icon, no wrap. */
.status-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; line-height: 1; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; margin: 0;
}
.status-chip svg { flex: none; width: 16px; height: 16px; }
.status-resolved { color: var(--verified); border-color: var(--verified); }
.status-validation { color: var(--warning); border-color: var(--warning); }
.status-stale { color: var(--warning); border-color: var(--warning); }
.status-unknown { color: var(--muted); border-color: var(--muted); }
.status-error { color: var(--error); border-color: var(--error); }

/* ---------- Decision receipt ---------- */
.receipt {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Unified receipt header for result AND uncertainty receipts: badge status-row
   on one side, supporting meta text vertically CENTERED against the badge
   group (shared top/bottom geometry, baseline and height). */
.receipt-head {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px 16px; flex-wrap: wrap;
}
.receipt-head .meta-line { margin: 0; }
/* Embedded variant for state panels that already carry their own padding —
   same DOM contract, flush sides. */
.receipt-head--flush { padding-left: 0; padding-right: 0; }
.receipt-block { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.receipt-block:last-child { border-bottom: none; }
.receipt-block--flush { padding-left: 0; padding-right: 0; }
.receipt-block .ordinal {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.receipt-block h3 { margin-bottom: 8px; }
.receipt-block p { color: var(--muted); margin-bottom: 0.5em; }
.receipt-block p:last-child { margin-bottom: 0; }
.receipt-block .lead { color: var(--text); font-weight: 600; }

/* ---------- Evidence ---------- */
.evidence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 12px 0 16px;
}
.evidence-cell {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.evidence-cell .k {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 4px;
}
.evidence-cell .v { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); }
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; background: var(--surface-2);
}
.source-list .src-id {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--crimson-strong);
  letter-spacing: 0.06em;
}
.source-list .src-title { font-weight: 600; margin: 4px 0; }
.source-list .src-title a {
  display: flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--text); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.source-list .src-meta {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); line-height: 1.7;
}
.source-list .src-url { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Explainer / FAQ ---------- */
.section { padding: 48px 0; border-top: 1px solid var(--border); }
.anchor-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.anchor-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
  text-decoration: none;
}
.anchor-links a:hover { border-color: var(--crimson); color: var(--text); }
details.faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); margin-bottom: 10px;
}
details.faq summary {
  cursor: pointer; padding: 16px 20px; min-height: 44px;
  font-weight: 600; color: var(--text); list-style-position: outside;
}
details.faq .faq-body { padding: 0 20px 16px; color: var(--muted); }
details.faq .faq-body p { margin-bottom: 0.6em; }

/* ---------- State board ---------- */
.board-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.board-cell { margin-bottom: 28px; }
.state-panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
}
.state-panel.warn-panel { border-left: 3px solid var(--warning); }
.state-panel.error-panel { border-left: 3px solid var(--error); }
.state-panel.neutral-panel { border-left: 3px solid var(--muted); }

/* ---------- Layout helpers ---------- */
.two-col {
  display: grid; grid-template-columns: 7fr 4fr; gap: 40px;
  padding: 48px 0;
}
.prose { max-width: 72ch; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.meta-line {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.04em;
}
.icon-row { display: inline-flex; align-items: center; gap: 8px; }
.placeholder-figure {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}
.placeholder-figure img { width: 44px; height: 44px; flex: none; }
.placeholder-figure .cap { font-size: 0.8rem; color: var(--muted); }
.placeholder-figure .cap .mono { font-size: 0.72rem; display: block; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border); padding: 40px 0 56px;
  color: var(--muted); font-size: 0.9rem;
}
.site-footer .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.site-footer h2, .site-footer h3 {
  font-family: var(--font-headline); font-size: 1.1rem; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 4px; }
.site-footer li a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  padding-right: 12px;
  color: var(--muted); text-decoration: none;
}
.site-footer li a:hover { color: var(--text); text-decoration: underline; }
.prose a:not(.btn), .meta-line a:not(.btn), .disclosure a:not(.btn),
.receipt-block a:not(.btn), .state-panel a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  padding: 0 4px; margin-top: -10px; margin-bottom: -10px;
  vertical-align: middle;
}
.disclosure { font-size: 0.8rem; color: var(--muted); max-width: 46ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero { height: auto; }
  .hero-media {
    position: relative; height: 290px; inset: auto;
  }
  .hero-media img { object-position: 60% 50%; }
  .hero-fade-x {
    background: linear-gradient(to right, rgba(12,10,16,0.25), rgba(12,10,16,0.25));
  }
  .hero-fade-y {
    background: linear-gradient(to top, var(--bg) 4%, rgba(12,10,16,0.55) 45%, rgba(12,10,16,0.15) 100%);
  }
  .hero-content { height: auto; padding-top: 24px; padding-bottom: 32px; }
  .option-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .site-footer .foot-grid { grid-template-columns: 1fr; }
  .nav-badge { display: none; }
  .tool-card, .receipt-head, .receipt-block, .state-panel { padding: 16px; }
  .receipt-head--flush, .receipt-block--flush { padding-left: 0; padding-right: 0; }
  /* Wrapped nav grows taller than --nav-h on narrow screens, so the focused
     skip link cannot anchor below a fixed offset there. Anchor it to the
     bottom-left corner instead: always fully clear of brand, nav links and
     the current-page control at any wrap height. */
  .skip-link:focus-visible { top: auto; bottom: 12px; }
}

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