/* ============================================================
   loop.css — the 30 loops front-end system
   ------------------------------------------------------------
   Pure HTML + CSS. No framework, no build step, no downloads.
   Layer 1: tokens (semantic custom properties — reskin here).
   Layer 2: base (reset-lite, type rhythm).
   Layer 3: components (one class = one documented component;
            usage snippets live in system.html).
   Motion hooks: [data-reveal], [data-highlight], [data-diagram]
            — bound by main.js, inert without it.
   Authored by Bob <bob@30loops.com>
   ============================================================ */

/* ---- 1. tokens ------------------------------------------- */

:root {
  /* palette — Danish print: warm paper, warm ink, marker, annotation */
  --background: #F7F3EA;        /* warm paper */
  --foreground: #171410;        /* warm ink */
  --muted-foreground: #6F6759;  /* captions, spec labels */
  --primary: #F5C518;           /* yellow — highlighter, markers */
  --accent: #C8102E;            /* red — underlines, asterisks, fig tags */
  --border: #E2DACA;            /* hairline rules */
  --card: #FBF8F1;              /* raised paper */
  --card-ink: #171410;          /* card foreground */
  --paper-deep: #F1EBDD;        /* code blocks, wells */

  /* type */
  --font-sans: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.72rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.9rem, 3.4vw, 2.6rem);
  --text-3xl: clamp(2.6rem, 6vw, 4.4rem);
  --leading: 1.6;

  /* spacing — 4px base */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* shape + motion */
  --radius: 2px;
  --t-fast: 160ms;
  --t-slow: 450ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* layout */
  --container: 1120px;
  --nav-h: 56px;
}

/* ---- 2. base ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-6));
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary); color: var(--foreground); }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--background), 0 0 0 5px var(--foreground);
  border-radius: var(--radius);
}

hr, .rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
pre {
  background: var(--paper-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  line-height: 1.55;
}

/* ---- 3. layout -------------------------------------------- */

/* .container — page gutter and measure */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}

/* .section — one numbered chapter of the page */
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.section + .section { border-top: 1px solid var(--border); }

/* .section-no — mono chapter marker: <p class="section-no">01 — thesis</p> */
.section-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-8);
}
.section-no::before {
  content: "";
  display: inline-block;
  width: var(--space-8);
  height: 1px;
  background: var(--accent);
  vertical-align: 0.32em;
  margin-right: var(--space-3);
}

/* .prose — reading measure */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--space-5); }

/* .grid — hairline-ruled card grid (Danish catalog) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 720px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* .grid--two — caps the grid at two columns (e.g. a 2×2 principles block) */
@media (min-width: 1080px) { .grid--two { grid-template-columns: repeat(2, 1fr); } }

/* .card--full — a card that closes its grid by spanning the full row */
.card--full { grid-column: 1 / -1; }

/* ---- 4. components ---------------------------------------- */

/* .nav — sticky top bar: wordmark, anchors, email */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-h);
}
.nav-links {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--muted-foreground);
  padding: var(--space-4) var(--space-2);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--foreground);
  box-shadow: inset 0 -3px 0 var(--primary);
}

/* .nav-burger — CSS-only mobile menu toggle (a checkbox hack, so it works
   with JavaScript off and does not depend on main.js). Hidden on desktop. */
.nav-toggle {                                  /* the checkbox: off-screen but focusable */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.nav-burger { display: none; }

@media (max-width: 719px) {
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px; height: 44px;
    padding: 11px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 2px; width: 100%;
    background: var(--foreground);
    transition: transform .22s ease, opacity .22s ease;
  }
  .nav-toggle:focus-visible ~ .nav-burger {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 3px;
  }
  /* burger morphs into an X when open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the links become a full-width drop panel under the bar */
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
    overflow: hidden;
    max-height: 0;
    background: color-mix(in srgb, var(--background) 97%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid transparent;
    transition: max-height .26s ease, border-color .26s ease;
  }
  .nav-toggle:checked ~ .nav-links {
    max-height: 70vh;
    border-bottom-color: var(--border);
  }
  .nav-links a {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border);
  }
  .nav-links a:first-child { border-top: 0; }
}

/* .wordmark — the construct mark + "30 loops" */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-3);
}
.wordmark .mark { width: 1.4em; height: 1.4em; flex-shrink: 0; }
.wordmark .ring {
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  border: 0.115em solid currentColor;
  border-radius: 50%;
  margin-inline: 0.03em;
  vertical-align: -0.02em;
}
.wordmark .fn-mark { color: var(--accent); font-weight: 700; }

/* .kicker — mono overline label */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* .highlight — yellow marker swipe behind a key phrase */
.highlight {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size: 100% 0.72em;
  background-position: 0 68%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.12em;
}
.js .highlight[data-highlight] { background-size: 0.01% 0.72em; }
.js .highlight[data-highlight].is-drawn {
  background-size: 100% 0.72em;
  transition: background-size 500ms var(--ease);
}

/* .annotation — red editor's underline */
.annotation {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

/* .annotation-label — mono red margin note: <p class="annotation-label">the obvious objection</p> */
.annotation-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.annotation-label::before { content: "\2733\00a0 "; /* ✳ */ }

/* .serial — catalog index: <p class="serial">S-01</p> */
.serial {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-3);
}

/* .badge — capability tag */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px var(--space-2);
  white-space: nowrap;
}
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* .card — catalog spec sheet (lives inside .grid) */
.card {
  background: var(--card);
  color: var(--card-ink);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card:hover {
  box-shadow: 0 10px 30px -18px rgba(23, 20, 16, 0.35);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: 0; }
.card .function { margin: 0; }
.card > .details { margin-top: auto; }

/* .card--feature — flagship card, spans two columns, holds a figure */
@media (min-width: 720px) { .card--feature { grid-column: span 2; } }

/* .card--studio — inverted card: token override only */
.card--studio {
  --card: var(--foreground);
  --card-ink: var(--background);
  --border: #3A342B;
  --muted-foreground: #B4AB9B;
  color: var(--card-ink);
}

/* .spec-table — dot-leader spec rows: key … value */
.spec-table { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.spec-row { display: flex; align-items: baseline; gap: var(--space-2); }
.spec-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.spec-leader { flex: 1; border-bottom: 1px dotted var(--muted-foreground); opacity: 0.45; transform: translateY(-0.28em); min-width: var(--space-4); }
.spec-val { font-size: var(--text-sm); text-align: right; }

/* .details — value panel on native <details> */
.details { border-top: 1px solid var(--border); }
.details summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted-foreground);
}
.details summary::-webkit-details-marker { display: none; }
.details summary::before {
  content: "\2733"; /* ✳ */
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease);
}
.details[open] summary::before { transform: rotate(45deg); }
.details summary:hover { color: var(--foreground); }
.details .panel { padding: var(--space-2) 0 var(--space-4); display: grid; gap: var(--space-4); }
.details .panel h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin: 0 0 var(--space-1);
}
.details .panel p { margin: 0; font-size: var(--text-sm); }

/* .card-link — spec-sheet link line at the foot of a card */
.card-link {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--foreground);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}
.card-link::after { content: " \2192"; color: var(--accent); }
.card-link:hover { box-shadow: inset 0 -3px 0 var(--primary); }

/* .triad — the value triad displayed open (detail pages) */
.triad { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 720px) { .triad { grid-template-columns: repeat(3, 1fr); } }
.triad h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin: 0 0 var(--space-2);
}
.triad p { margin: 0; font-size: var(--text-sm); }

/* .pager — prev/next catalog navigation that loops (it is 30 loops) */
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  margin-top: var(--space-10);
}
.pager a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-3) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pager a:hover { box-shadow: inset 0 -3px 0 var(--primary); }

/* .stat-strip — editorial figures row */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  border-block: 1px solid var(--border);
}
.stat {
  flex: 1 1 160px;
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  margin-right: var(--space-5);
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: 0; margin-right: 0; }
.stat .n {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat .l {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
/* on phones the row stacks into a single column, divided by hairlines */
@media (max-width: 719px) {
  .stat-strip { flex-direction: column; }
  .stat {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--space-4) 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .stat:last-child { border-bottom: 0; }
}

/* .figure + .figcap — framed diagram with a red fig tag */
.figure {
  border: 1px solid var(--border);
  background: var(--card);
  padding: var(--space-6);
}
.figcap {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: var(--space-3);
}
.figcap .fig-no { color: var(--accent); }

/* .footnote — asterisk-marked small print */
.footnote {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  max-width: 52ch;
}
.footnote::before { content: "*\00a0"; color: var(--accent); font-weight: 700; }

/* .btn — bordered mono action, fills yellow on hover */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--foreground);
  border: 1px solid var(--foreground);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--primary); box-shadow: 3px 3px 0 var(--foreground); }

/* .table — ruled data table (system page tokens) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 400;
  text-align: left;
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--foreground);
}
.table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table code { background: var(--paper-deep); padding: 1px 5px; border-radius: var(--radius); }
.swatch {
  display: inline-block;
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  vertical-align: middle;
}

/* .diagram — inline SVG loop diagram; .flow paths pulse when visible.
   Scrolls horizontally on small screens instead of shrinking to illegibility.
   The scrollbar is drawn in the house yellow and kept visible, so the scroll
   affordance reads at a glance on touch screens. */
.diagram {
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;                                /* Firefox */
  scrollbar-color: var(--primary) var(--border);
}
.diagram::-webkit-scrollbar { height: 9px; }            /* forces a persistent bar */
.diagram::-webkit-scrollbar-track { background: var(--border); border-radius: 5px; }
.diagram::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; }
.diagram::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 82%, #171410); }
.diagram svg { width: 100%; height: auto; min-width: 640px; }
.diagram text { font-family: var(--font-mono); }
.diagram .flow {
  stroke: var(--primary);
  stroke-width: 3;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
  fill: none;
}
.js .diagram.is-visible .flow { animation: loopflow 2.2s linear infinite; }
@keyframes loopflow { to { stroke-dashoffset: -60; } }

/* .footer — signal block + colophon */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.footer p { margin: 0 0 var(--space-2); }

/* .discovery — the instrument, framed like a printed intake form */
.discovery {
  border: 1.5px solid var(--foreground);
  background: var(--card);
  margin-top: var(--space-8);
}
.discovery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-6);
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.discovery-head .serial-tag { color: var(--primary); }
.discovery-head [data-progress] { margin-left: auto; letter-spacing: 0.06em; }
.discovery h3 {
  border-top: 1.5px solid var(--foreground);
  margin: 0;
  padding: var(--space-6) var(--space-6) 0;
}
.discovery .figcap { margin: var(--space-1) 0 0; padding: 0 var(--space-6) var(--space-2); }

/* .field — one question: number, legend, choice pills, a writing line */
.field {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
  padding: var(--space-5) var(--space-6);
}
.discovery-head + .field, .discovery .figcap + .field { border-top: 0; }
.field legend {
  float: left; /* keeps the fieldset's top rule unbroken */
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 0;
  margin-bottom: var(--space-3);
}
.field :where(.choices, .notes, .notes-long, .org-field, .scale, .pain-line, .ask-line) { clear: both; }
.scale { flex-wrap: wrap; }
.scale input[type="range"] { min-width: 200px; }
.q-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 0.1em;
  padding: 1px 5px 1px 0;
  margin-right: var(--space-2);
}
/* answered → the number gets the marker swipe */
.field:has(input[type="radio"]:checked) .q-no,
.field:has(.notes-long:not(:placeholder-shown)) .q-no {
  background: var(--primary);
  color: var(--foreground);
  padding-left: 5px;
}

/* .choice — a selectable pill; the radio stays real, just invisible */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--foreground); }
.choice input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.choice:has(input:checked) {
  background: var(--primary);
  border-color: var(--foreground);
  box-shadow: 2px 2px 0 var(--foreground);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--background), 0 0 0 5px var(--foreground);
}

/* .notes / .org-field — a writing line, like ink on a printed form */
.notes, .org-field {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--foreground);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-2) 0;
}
.notes:focus-visible, .org-field:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom: 3px solid var(--primary);
}

/* .notes-long — lined paper; the ruling scrolls with the text */
.notes-long {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
  min-height: 6.5em;
  resize: vertical;
  background-color: var(--background);
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.9em - 1px),
    var(--border) calc(1.9em - 1px),
    var(--border) 1.9em
  );
  background-origin: content-box;
  background-attachment: local;
}
/* the transcript well: a drop zone, not a writing pad */
.field[data-q="transcript"] .notes-long {
  background-image: none;
  background-color: var(--paper-deep);
  border-style: dashed;
  padding: var(--space-2) var(--space-3);
}
.notes::placeholder, .notes-long::placeholder, .org-field::placeholder { color: var(--muted-foreground); opacity: 0.7; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-top: 1.5px solid var(--foreground);
  background: var(--paper-deep);
}
button.btn { background: var(--card); cursor: pointer; }
.form-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); }

/* .ticker — a continuous strip of use-case fragments; pauses on hover,
   static when motion is reduced */
.ticker {
  border-block: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  padding-block: var(--space-3);
}
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .seq {
  display: inline-flex;
  gap: var(--space-8);
  padding-right: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.ticker em {
  font-style: normal;
  color: var(--foreground);
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size: 100% 0.72em;
  background-position: 0 68%;
  padding: 0 0.12em;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* .scenes / .scene — a week, run by loops; one moment highlighted at a time */
.scenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 720px)  { .scenes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .scenes { grid-template-columns: repeat(3, 1fr); } }
.scene {
  background: var(--card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: inset 0 3px 0 transparent;
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.scene .stamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.scene p { margin: 0; font-size: var(--text-sm); }
.scene .chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scene.is-active { box-shadow: inset 0 3px 0 var(--primary); background: var(--background); }
a.badge { text-decoration: none; }
a.badge:hover { border-color: var(--foreground); color: var(--foreground); }

/* .group-head — a catalog group: heading + one line of what it buys */
.group-head { margin-top: var(--space-12); }
.group-head h3 { margin-bottom: var(--space-1); }
.group-lede { color: var(--muted-foreground); font-size: var(--text-sm); margin: 0 0 var(--space-5); max-width: 68ch; }

/* .orch — orchestration is a property of the catalog, not a product in it */
.orch {
  margin-top: var(--space-12);
  background: var(--foreground);
  color: var(--background);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) { .orch { grid-template-columns: 1fr 300px; align-items: center; } }
.orch h3 { color: var(--background); margin-bottom: var(--space-2); }
.orch p { margin: 0; font-size: var(--text-sm); color: #CFC8BA; }
.orch .tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: var(--space-3);
}
.orch svg { width: 100%; height: auto; }

/* .stack-note — the ecosystem line: buyers scan for their own tools */
.stack-note {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #B4AB9B;
}
.orch .stack-note { border-top: 1px solid #3A342B; padding-top: var(--space-4); }
.stack-note strong {
  color: var(--primary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 var(--space-1) 0 var(--space-3);
}

/* .hero-grid — statement left, the construct right */
.hero-grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; } }

/* .construct — the loops: asset lines spinning around one living core.
   Pure CSS motion; frozen (and still legible) under reduced motion. */
.construct { margin: 0; }
.construct svg { width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.construct text { font-family: var(--font-mono); }
.spin, .spin--slow, .dim, .dim--rev {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit 12s linear infinite;
}
.spin--slow { animation-duration: 140s; }
.dim { animation-duration: 80s; }
.dim--rev { animation-name: orbit-rev; animation-duration: 104s; }
.cflow {
  stroke: var(--primary);
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  fill: none;
  animation: loopflow 2.8s linear infinite;
}
.cflow--rev {
  stroke: var(--muted-foreground);
  opacity: 0.55;
  stroke-width: 1;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  fill: none;
  animation: dashrev 3.6s linear infinite;
}
.oring {
  stroke: var(--muted-foreground);
  opacity: 0.5;
  stroke-width: 1.2;
  stroke-dasharray: 4 10;
  fill: none;
  animation: loopflow 26s linear infinite;
}
@keyframes orbit { to { transform: rotate(1turn); } }
@keyframes orbit-rev { to { transform: rotate(-1turn); } }
@keyframes dashrev { to { stroke-dashoffset: 60; } }

/* .adrift — a loop with no core: spins fine, drifts anyway */
.adrift {
  animation: adrift 6s ease-in-out infinite alternate;
}
@keyframes adrift { to { transform: translate(var(--dx, 8px), var(--dy, -6px)); } }

/* .wobble — an unstable stack; .pulse — the problem that won't stay quiet */
.wobble {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: wobble 2.6s ease-in-out infinite alternate;
}
@keyframes wobble { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* pitch mode — one point per screen; click or arrow-key to advance.
   Without JavaScript the slides simply stack and scroll. */
.slide {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-16);
  border-top: 1px solid var(--border);
}
.slide:first-of-type { border-top: 0; }
.pitch-mode .slide { border-top: 0; }
.pitch-mode .slide[hidden] { display: none; }
.slide h2 { font-size: var(--text-3xl); max-width: 18ch; text-wrap: balance; }
.slide .big {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.3;
  max-width: 28ch;
  text-wrap: balance;
}
.slide .kicker { margin-bottom: var(--space-6); display: block; }
/* .slide-grid — a slide with a figure beside the point */
.slide-grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .slide-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
.slide-grid svg { width: 100%; height: auto; }

/* .pitch-controls — the visible way through: ← 3 / 10 → */
.pitch-controls {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: none;
  align-items: center;
  gap: var(--space-3);
  background: var(--card);
  border: 1.5px solid var(--foreground);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  box-shadow: 3px 3px 0 var(--foreground);
}
.pitch-mode .pitch-controls { display: inline-flex; }
.pitch-controls button {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background: transparent;
  border: 0;
  min-width: 48px;
  min-height: 44px;
  cursor: pointer;
  color: var(--foreground);
  border-radius: var(--radius);
}
.pitch-controls button:hover { background: var(--primary); }
.pitch-controls .count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  min-width: 7ch;
  text-align: center;
}
.pitch-hint {
  position: fixed;
  bottom: 24px;
  left: 20px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  z-index: 150;
  display: none;
}
.pitch-mode .pitch-hint { display: block; }
@media (max-width: 720px) { .pitch-hint { display: none !important; } }

/* .scale — a litmus statement's sliding scale with live word label */
.scale { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-3) 0; }
.scale input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  min-height: 44px;
  cursor: pointer;
}
.scale output {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 11ch;
  text-align: right;
  color: var(--foreground);
}
.pain-line {
  font-size: var(--text-sm);
  color: var(--accent);
  margin: 0 0 var(--space-1);
}
.pain-line::before { content: "the pain — "; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.ask-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin: var(--space-2) 0 0;
}
.ask-line::before { content: "in the room: "; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }

/* .readpanel — the live litmus read: stage, drag, the three-year bill */
.readpanel {
  border: 1.5px solid var(--foreground);
  background: var(--card);
  padding: 0;
  margin-top: var(--space-8);
}
.readpanel .rp-head {
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.readpanel .rp-head .stage { color: var(--primary); }
.readpanel .rp-body { padding: var(--space-5) var(--space-6); }
.readpanel .rp-row { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-2) 0; font-size: var(--text-sm); flex-wrap: wrap; }
.readpanel .rp-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.readpanel .rp-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); margin: var(--space-3) 0 0; }

/* ---- 5. motion hooks (inert without main.js) --------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media print {
  /* the page prints complete: reveal states forced visible, panels open */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .highlight[data-highlight] { background-size: 100% 0.72em !important; }
  .nav { position: static; }
  /* a filled discovery form prints legibly even without backgrounds */
  .choice:has(input:checked) { border: 2px solid var(--foreground); font-weight: 700; }
  .form-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .highlight[data-highlight] { background-size: 100% 0.72em; }
}