/* ─────────────────────────────────────────────
   Compliance Ledger app shell (header / footer / hero / prose)
   ───────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, #0e0f13 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #262932;
}
.app-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ecebe6;
  border-bottom: 0;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.app-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, #6f9c6a 35%, transparent);
  color: #a8d3a0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  border: 1px solid color-mix(in srgb, #a8d3a0 40%, #262932);
}
.app-nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}
.app-nav a {
  color: #9fa097;
  border-bottom: 0;
  padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease;
}
.app-nav a:hover { color: #ecebe6; }
.app-nav a.is-current {
  color: #a8d3a0;
  border-bottom: 1px solid #a8d3a0;
}

.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.app-main .hero {
  margin: 0 0 1.75rem;
  max-width: 70ch;
}
.app-main .hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 0.6rem;
}
.app-main .hero .lede {
  font-size: 1.05rem;
  margin: 0 0 0;
  max-width: 64ch;
}
.app-main .prose {
  margin-top: 2.5rem;
  max-width: none;
}
.app-main .prose h2,
.app-main .prose h3,
.app-main .prose p,
.app-main .prose ul,
.app-main .prose ol,
.app-main .prose pre {
  max-width: 64ch;
}
.app-main .prose h2 { max-width: 70ch; margin-top: 2.5rem; }
.app-main .prose h2:first-child { margin-top: 0; }

.app-footer {
  border-top: 1px solid #262932;
  margin-top: 4rem;
}
.app-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: #9fa097;
  align-items: baseline;
}
.app-footer a { color: #9fa097; border-bottom: 0; }
.app-footer a:hover { color: #a8d3a0; }
.app-footer-disclaimer { margin-left: auto; font-style: italic; }

@media (max-width: 640px) {
  .app-header-inner { padding: 0.7rem 1.1rem; gap: 1rem; }
  .app-brand-name { display: none; }
  .app-nav { font-size: 0.78rem; gap: 1rem; }
  .app-main { padding: 1.25rem 1.1rem 3rem; }
  .app-footer-inner { padding: 1rem 1.1rem; }
  .app-footer-disclaimer { margin-left: 0; }
}

/* ─────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────── */
:root {
  /* Surfaces — cooler black, more depth than pure neutral */
  --bg:           #0e0f13;
  --surface-1:   #15171d;
  --surface-2:   #1c1f27;
  --rule:        #262932;

  /* Text — warm cream, not bleach white */
  --fg:          #ecebe6;
  --fg-soft:     #c9c8c0;
  --muted:       #9fa097;
  --muted-deep:  #6f7068;

  /* Accents — sage, not synthetic mint */
  --accent:        #a8d3a0;
  --accent-strong: #c6e8c0;
  --accent-deep:   #6f9c6a;
  --link:          #a8d3a0;

  /* Signal */
  --danger: #f4a89c;
  --warn:   #e8c98a;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Layout */
  --max:        780px;
  --max-wide:  1040px;

  /* Motion */
  --t-fast: 120ms;
  --t-med:  220ms;
  --easing: cubic-bezier(.2, .8, .2, 1);
}

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

/* ─────────────────────────────────────────────
   Reset + base
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-deep); color: var(--bg); }

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

main.wide {
  max-width: var(--max-wide);
}
/* In wide mode, prose still reads in a narrow column for comfort,
   but the demo and other interactive children break out. */
main.wide > h1,
main.wide > h2,
main.wide > h3,
main.wide > h4,
main.wide > p:not(.crumb),
main.wide > ul,
main.wide > ol,
main.wide > pre {
  max-width: 64ch;
}
main.wide > h2 { max-width: 70ch; }
main.wide > .ledger-demo,
main.wide > details,
main.wide > .video-frame {
  max-width: 100%;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 0.5rem 0.75rem; background: var(--accent); color: var(--bg);
  font-weight: 600; border-radius: 0 0 4px 4px; z-index: 100;
}
.skip-link:focus { left: 1rem; }

/* ─────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--fg); }
h1 { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.4rem); line-height: 1.15; margin: 0 0 0.5rem; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; margin: 2.75rem 0 0.85rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; font-weight: 600; letter-spacing: 0; }
h4 { font-size: 0.85rem; margin: 1.25rem 0 0.5rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
p  { margin: 0 0 1.05rem; max-width: 64ch; color: var(--fg-soft); }
.lede { color: var(--fg); margin-bottom: 2rem; font-size: 1.08rem; max-width: 60ch; }
strong { color: var(--fg); font-weight: 600; }
em { font-style: italic; color: var(--fg); }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
  transition: color var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing);
}
a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Inline rules + dividers */
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Lists */
ul, ol { padding-left: 1.25rem; max-width: 64ch; }
ul li, ol li { margin-bottom: 0.4rem; color: var(--fg-soft); }
ul li::marker { color: var(--muted); }

/* Code */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0;
}
:not(pre) > code {
  background: var(--surface-1);
  color: var(--fg);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--rule);
  font-size: 0.88em;
}
pre {
  background: var(--surface-1);
  color: var(--fg);
  padding: 1rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.55;
}
pre code { background: transparent; padding: 0; border: 0; }

/* ─────────────────────────────────────────────
   Header / nav crumbs
   ───────────────────────────────────────────── */
.crumb { font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 1.5rem; }
.crumb a { color: var(--muted); border-bottom: 0; }
.crumb a:hover { color: var(--accent); }

/* Status tag */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--surface-1);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.tag.live   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.tag.build  { color: var(--warn);  border-color: color-mix(in srgb, var(--warn)  40%, var(--rule)); }

/* ─────────────────────────────────────────────
   Home — project list
   ───────────────────────────────────────────── */
.project-list { list-style: none; padding: 0; margin: 1.5rem 0 3rem; }
.project-list li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.project-list li:last-child { border-bottom: none; }
.project-list h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.project-list h3 a { color: var(--fg); border-bottom: 0; }
.project-list h3 a:hover { color: var(--accent); }
.project-list .lede {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--fg-soft);
}

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--muted);
}
footer a { color: var(--muted); border-bottom: 0; }
footer a:hover { color: var(--accent); }

/* ─────────────────────────────────────────────
   Compliance Ledger demo
   ───────────────────────────────────────────── */
.ledger-demo {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.4rem;
  margin: 1.75rem 0 2.25rem;
  background: var(--surface-1);
}
.ledger-demo.loading,
.ledger-demo.error {
  color: var(--muted);
  font-size: 0.9rem;
  font-family: var(--font-mono);
}
.ledger-demo.error { color: var(--danger); }

.ledger-demo-prelude {
  font-size: 0.92rem;
  color: var(--fg-soft);
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--rule);
  max-width: none;
}

.ledger-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}
.ledger-demo label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ledger-demo input[type="number"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  width: 9rem;
}
.ledger-demo input[type="number"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.ledger-demo-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Output */
.ledger-demo-output {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.ledger-demo-result {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  color: var(--accent-strong);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ledger-demo-result-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 0.6rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ledger-demo-formula {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-soft);
  margin-top: 0.5rem;
}

/* Lineage chain — shown expanded */
.ledger-demo-chain h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.ledger-demo-link {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-soft);
  font-size: 0.92rem;
}
.ledger-demo-fact {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-demo-fact:last-child { border-bottom: none; }
.ledger-demo-fact-head {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.ledger-demo-fact-summary {
  color: var(--fg);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 12rem;
}
.ledger-demo-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-deep) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule));
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.ledger-demo-quote {
  font-family: var(--font-sans);
  font-style: italic;
  color: var(--fg);
  background: var(--surface-2);
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.94rem;
  line-height: 1.55;
}
.ledger-demo-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.4rem 0 0.6rem;
  align-items: baseline;
}
.ledger-demo-source a {
  color: var(--accent);
  font-weight: 500;
  word-break: break-word;
}
.ledger-demo-source-label {
  color: var(--muted-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.ledger-demo-meta-toggle {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ledger-demo-meta-toggle:hover { color: var(--accent); }
.ledger-demo-meta-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.ledger-demo-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.95rem;
  background: var(--surface-2);
  border-radius: 4px;
}
.ledger-demo-meta dt { color: var(--muted-deep); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; }
.ledger-demo-meta dd { margin: 0; word-break: break-word; }
.ledger-demo-hash { color: var(--accent); }

.ledger-demo-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 1.25rem 0 0;
  line-height: 1.6;
}
.ledger-demo-note strong { color: var(--fg-soft); font-weight: 500; }

/* ─────────────────────────────────────────────
   Glossary term tooltip
   ───────────────────────────────────────────── */
.term { position: relative; display: inline-block; }
.term-trigger {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  text-decoration: none;
}
.term-trigger:hover { border-bottom-color: var(--accent); color: var(--fg); }
.term-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.term-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: max(240px, 100%);
  max-width: 320px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: auto;
}
.term-popover-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.term-popover-body { display: block; color: var(--fg-soft); }

/* ─────────────────────────────────────────────
   Zone selectors (state × worker class)
   ───────────────────────────────────────────── */
.zone-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--rule);
}
.zone-selector-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.zone-selector-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
}
.zone-pill {
  background: var(--bg);
  color: var(--fg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--easing), color var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing);
}
.zone-pill:hover { color: var(--fg); border-color: var(--muted); }
.zone-pill.active {
  background: color-mix(in srgb, var(--accent-deep) 30%, var(--bg));
  color: var(--accent-strong);
  border-color: var(--accent);
}
.zone-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─────────────────────────────────────────────
   Situation rows (I'm being paid / paying / both)
   ───────────────────────────────────────────── */
.situation {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--rule);
}
.situation-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.situation-row-amount { gap: 0.85rem; }
.situation-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  min-width: 8.5rem;
}
.situation-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--fg-soft);
}
.situation-row input[type="number"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  width: 9rem;
}
.situation-row input[type="number"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ─────────────────────────────────────────────
   Bottom-line answer cards (Layer 1)
   ───────────────────────────────────────────── */
.bottom-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.bottom-line:has(> :nth-child(2)) {
  grid-template-columns: 1fr 1fr;
}
.bottom-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  background: var(--surface-2);
}
.bottom-card.payee { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }
.bottom-card.payer { border-color: color-mix(in srgb, var(--warn) 35%, var(--rule)); }
.bottom-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
.bottom-card-amount {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bottom-card.payee .bottom-card-amount { color: var(--accent-strong); }
.bottom-card.payer .bottom-card-amount { color: var(--fg); }
.bottom-card-amount-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}
.bottom-card-set-aside {
  font-size: 0.92rem;
  color: var(--fg-soft);
  line-height: 1.55;
  max-width: none;
}
.bottom-card-set-aside strong { color: var(--fg); }

/* ─────────────────────────────────────────────
   About-you panel (personal modifiers)
   ───────────────────────────────────────────── */
details.about-you {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  margin: 0 0 1.25rem;
  background: var(--surface-1);
}
details.about-you[open] { padding-bottom: 1rem; }
details.about-you > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
  padding: 0.45rem 0;
  list-style: none;
  user-select: none;
}
details.about-you > summary:hover { color: var(--accent); }

.about-you-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem 1.1rem;
  margin: 0.75rem 0 0.5rem;
}
.about-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.about-field input[type="number"],
.about-field select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.45rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
}
.about-field input[type="number"]:focus-visible,
.about-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.about-field-check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--fg-soft);
  margin-top: 1.15rem;
}
.about-you-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
  line-height: 1.55;
  font-style: italic;
  max-width: none;
}

/* ─────────────────────────────────────────────
   Line breakdown subtotal — math made visible
   ───────────────────────────────────────────── */
.lines-subtotal {
  margin: 1.25rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lines-subtotal-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-soft);
  padding: 0.2rem 0;
}
.lines-subtotal-row span:first-child { color: var(--muted); flex: 1 1 auto; }
.lines-subtotal-row span:last-child  { color: var(--fg);   font-weight: 500; flex-shrink: 0; }
.lines-subtotal-row.line-deduct span:last-child { color: var(--warn); }
.lines-subtotal-row.line-net {
  border-top: 1px solid var(--rule);
  padding-top: 0.55rem;
  margin-top: 0.25rem;
}
.lines-subtotal-row.line-net span:last-child {
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 600;
}
.lines-subtotal-row.line-employer span:last-child { color: var(--warn); }
.lines-subtotal-row.line-total {
  border-top: 1px solid var(--rule);
  padding-top: 0.55rem;
  margin-top: 0.25rem;
}
.lines-subtotal-row.line-total span:last-child {
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   Form-link affordance cards
   ───────────────────────────────────────────── */
.form-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.6rem;
}
.form-link-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule); /* override generic <a> */
  transition: border-color var(--t-fast) var(--easing), background var(--t-fast) var(--easing);
}
.form-link-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-deep) 15%, var(--surface-2));
}
.form-link-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-link-form {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.form-link-desc {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--fg-soft);
  line-height: 1.45;
}
.form-link-arrow {
  font-family: var(--font-mono);
  color: var(--muted);
  align-self: start;
}
.form-link-card:hover .form-link-arrow { color: var(--accent); }

/* ─────────────────────────────────────────────
   Tax-time considerations (per personal modifier)
   ───────────────────────────────────────────── */
.considerations-h {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.25rem 0 0.6rem;
  font-weight: 500;
}
.considerations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}
.consideration-card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.consideration-head {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.consideration-side { color: var(--accent); }
.consideration-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
  color: var(--fg);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
}
.consideration-body {
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.55;
  margin: 0 0 0.6rem;
  max-width: none;
}

/* ─────────────────────────────────────────────
   Layer 2 — line breakdown (collapsible)
   Layer 3 — tax-time guidance (collapsible)
   ───────────────────────────────────────────── */
details.layer-2,
details.layer-3 {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  margin: 0 0 1.25rem;
  background: var(--surface-1);
}
details.layer-2[open],
details.layer-3[open] { padding-bottom: 1rem; }
details.layer-2 > summary,
details.layer-3 > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-soft);
  padding: 0.45rem 0;
  list-style: none;
  position: relative;
  user-select: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '+';
  display: inline-block;
  width: 1.1rem;
  color: var(--muted);
  font-weight: 500;
}
details[open] > summary::before { content: '−'; }
details > summary:hover { color: var(--accent); }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.lines-detail { display: flex; flex-direction: column; }

.line-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.line-row:hover .ledger-demo-fact-summary { color: var(--accent); }
.line-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.line-caret { color: var(--muted); margin-left: 0.4rem; font-family: var(--font-mono); }
.line-detail {
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}

.line-explanations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0.5rem 0 0.75rem;
}
.line-explanations:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.line-explain-card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.55;
}
.line-explain-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

/* Tax-time guidance grid */
.tax-time-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.75rem 0 0.5rem;
}
.tax-time-grid:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.tax-time-card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.tax-time-card h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.tax-time-card ol { padding-left: 1.1rem; margin: 0; }
.tax-time-card li {
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.55;
  margin-bottom: 0.45rem;
}
.tax-time-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
  font-style: italic;
}

/* ─────────────────────────────────────────────
   Side-cascade line colors (the load-bearing fix —
   "why are these lines summing more than my withholding")
   ───────────────────────────────────────────── */
.ledger-demo-fact.relevance-mine-payee {
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
  background: color-mix(in srgb, var(--accent-deep) 7%, transparent);
}
.ledger-demo-fact.relevance-mine-payer {
  border-left: 3px solid var(--warn);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.ledger-demo-fact.relevance-theirs,
.ledger-demo-fact.relevance-theirs-withheld {
  opacity: 0.55;
  border-left: 3px solid transparent;
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}
.ledger-demo-fact.relevance-theirs::after,
.ledger-demo-fact.relevance-theirs-withheld::after {
  content: 'not yours';
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ledger-demo-fact.relevance-theirs-withheld::after { content: 'withheld from them'; }
.ledger-demo-fact.relevance-both { border-left: 3px solid transparent; padding-left: 0.6rem; margin-left: -0.6rem; }

/* ─────────────────────────────────────────────
   Situation summary chip
   ───────────────────────────────────────────── */
.situation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  align-items: baseline;
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 0.95rem;
  margin: 0 0 0.6rem;
}
.situation-summary-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.situation-summary-body {
  font-size: 0.92rem;
  color: var(--fg-soft);
  line-height: 1.5;
}
.situation-summary-body strong { color: var(--fg); }

/* ─────────────────────────────────────────────
   Input-accuracy disclaimer
   ───────────────────────────────────────────── */
.input-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-left: 3px solid var(--warn);
  border-radius: 4px;
  font-style: italic;
  max-width: none;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────
   When to use + What you can trust today
   ───────────────────────────────────────────── */
.when-to-use {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.when-to-use h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.55rem;
  font-weight: 500;
}
.when-to-use h4 + ul { margin: 0 0 1.1rem; }
.when-to-use h4:nth-of-type(2) { margin-top: 0.5rem; }
.when-to-use ul { padding-left: 1.15rem; max-width: none; }
.when-to-use li { font-size: 0.9rem; color: var(--fg-soft); margin-bottom: 0.4rem; line-height: 1.5; }

/* ─────────────────────────────────────────────
   Print paystub button
   ───────────────────────────────────────────── */
.paystub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.2rem;
  align-items: center;
  margin: 1.25rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
}
.paystub-print {
  background: color-mix(in srgb, var(--accent-deep) 35%, var(--bg));
  color: var(--accent-strong);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--easing);
}
.paystub-print:hover { background: color-mix(in srgb, var(--accent-deep) 50%, var(--bg)); }
.clear-saved {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.clear-saved-trigger,
.clear-saved-yes,
.clear-saved-no {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.clear-saved-trigger:hover { color: var(--fg); }
.clear-saved-yes { color: var(--danger); }
.clear-saved-yes:hover { color: var(--danger); text-decoration: none; }
.clear-saved-confirm { color: var(--warn); }
.clear-saved-msg { color: var(--accent); font-style: italic; }

.paystub-save {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--easing), background var(--t-fast) var(--easing);
}
.paystub-save:hover { border-color: var(--accent); color: var(--accent); }
.paystub-save:disabled { opacity: 0.6; cursor: progress; }
.paystub-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paystub-print:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paystub-actions-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  flex: 1 1 18rem;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   1099-NEC generator form
   ───────────────────────────────────────────── */
.gen1099-form {
  flex: 1 1 100%;
  margin-top: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.gen1099-form h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  font-weight: 500;
}
.gen1099-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 0.85rem;
  max-width: none;
}
.gen1099-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 0.85rem;
}
.gen1099-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gen1099-grid input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.4rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
}
.gen1099-grid input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.gen1099-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.95rem;
  flex-wrap: wrap;
}
.gen1099-cancel {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.gen1099-cancel:hover { color: var(--fg); }
.gen1099-error {
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ─────────────────────────────────────────────
   Print rules — clean paystub when user prints
   ───────────────────────────────────────────── */
@media print {
  .app-header,
  .app-footer,
  .app-main > .hero,
  .app-main > .prose,
  .situation,
  .zone-selectors,
  .about-you,
  .layer-3,
  .paystub-actions,
  .when-to-use,
  .ledger-demo-prelude,
  .ledger-demo-note,
  .input-disclaimer,
  details > summary,
  .form-link-arrow {
    display: none !important;
  }
  body, html { background: white !important; color: #111 !important; }
  .ledger-demo, .layer-2, .ledger-demo-fact, .lines-subtotal, .form-link-card,
  .bottom-card, .situation-summary {
    background: white !important;
    color: #111 !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
  details.layer-2 { padding: 0; border: 0; }
  details.layer-2[open] .lines-detail { display: block !important; }
  .ledger-demo-fact .line-detail { display: block !important; padding-top: 0.4rem; }
  .ledger-demo-fact { opacity: 1 !important; border-left: 0 !important; }
  .ledger-demo-quote { border-left-color: #777 !important; }
  a { color: #111 !important; text-decoration: underline; }
  .cite-badge { border-color: #777 !important; color: #111 !important; background: white !important; }
}

/* ─────────────────────────────────────────────
   Citation badges + line states
   ───────────────────────────────────────────── */
.cite-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.cite-verified {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-deep) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
}
.cite-blueprint {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--rule));
}
.cite-verified-inline,
.cite-blueprint-inline {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.05em;
}
.cite-verified-inline {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-deep) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
}
.cite-blueprint-inline {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--rule));
}

.line-amount {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--fg);
  font-weight: 500;
}
.line-na-tag { font-style: italic; color: var(--muted); font-weight: 400; }
.line-formula {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
  margin: 0.2rem 0 0.55rem;
}
.line-na-reason {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.2rem 0 0.55rem;
  font-style: italic;
}
.ledger-demo-fact.line-na .ledger-demo-fact-summary { color: var(--muted); }

/* ─────────────────────────────────────────────
   Specimen video frame
   ───────────────────────────────────────────── */
.video-frame {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--surface-1);
  aspect-ratio: 9 / 16;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* ─────────────────────────────────────────────
   Contact cards (Web3Forms + Cal.com)
   ───────────────────────────────────────────── */
.contact-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.4rem;
  margin: 1.25rem 0;
  background: var(--surface-1);
}
.contact-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.contact-card p {
  font-size: 0.92rem;
  color: var(--fg-soft);
  margin: 0 0 1rem;
}
.contact-form { display: flex; flex-direction: column; gap: 0.6rem; }
.contact-form input,
.contact-form textarea {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.contact-form textarea { min-height: 5rem; resize: vertical; }
.contact-form button {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 4px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
.contact-form button:hover { background: var(--accent-strong); }
.contact-form button:active { transform: scale(0.98); }
.contact-form button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.cal-embed {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.cal-embed a { font-weight: 500; }

/* ─────────────────────────────────────────────
   Canvas island (foundation for p5/canvas sketches)
   ───────────────────────────────────────────── */
.canvas-island {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-1);
  margin: 1.5rem 0;
}
.canvas-island canvas { display: block; width: 100%; height: 100%; }

/* ─────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────── */
@media (max-width: 540px) {
  main { padding: 2.5rem 1.1rem 4rem; }
  .ledger-demo { padding: 1.1rem; }
  .ledger-demo-row { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .ledger-demo input[type="number"] { width: 100%; }
  .ledger-demo-result { font-size: 1.55rem; }
  .ledger-demo-meta { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .ledger-demo-meta dt { margin-top: 0.5rem; }
}