/* Spark web UI — layout & typography (Almanac direction) */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must win over any explicit display on the same
 * element (.locked-plate, .legend, .live-stats are grids/flexes that the
 * UA-level [hidden] rule would otherwise lose to). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}

/* ---- masthead ---------------------------------------------------------- */
.mast {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mast .brand { color: var(--ink); font-weight: 600; }
.mast .meta { display: flex; align-items: center; gap: 18px; }

.theme-toggle {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule); }
.theme-toggle:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

/* ---- verdict hero ------------------------------------------------------ */
.verdict {
  margin: 52px 0 10px;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  font-weight: 400;
  max-width: 21em;
}
.verdict .num { color: var(--series-1); font-style: italic; }
.accent { color: var(--accent-ink); font-style: italic; }
.verdict-sub {
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: 44px;
  max-width: 52ch;
}

/* ---- stat row ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.stat { padding: 16px 20px 4px 0; }
.stat + .stat { border-left: 1px solid var(--hairline); padding-left: 20px; }
.stat .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stat .value { font-size: 28px; margin-top: 4px; }
.stat .value small { font-size: 16px; color: var(--ink-2); }

/* ---- sections ---------------------------------------------------------- */
section.chapter { margin-top: 64px; }
section.chapter > h2 {
  font-size: 23px;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 6px;
}
section.chapter > .lede,
#diag-section .lede {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 64ch;
  margin-bottom: 18px;
}

figure.chart { margin: 0; }

/* An intentional blank plate: when a distribution has no members (no future
 * arrived, or none fell short), the chart's place is held by a set line
 * between rules — an almanac page deliberately left blank, not an error. */
.chart-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 132px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--hairline);
  padding: 30px 18px;
}
.chart-empty::before {
  content: "⁂";
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
}
.chart-empty .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--ink);
  max-width: 44ch;
  margin: 0 auto;
}
.chart-empty .note {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  max-width: 48ch;
  margin: 0 auto;
}

figure.chart figcaption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 64ch;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.chart-grid h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

/* ---- chart internals (SVG) -------------------------------------------- */
.chart svg { display: block; width: 100%; height: auto; }
.chart text {
  font-family: var(--sans);
  fill: var(--ink-2);
}
.chart .axis text { font-size: 11px; fill: var(--ink-3); }
.chart .axis line, .chart .axis path { stroke: var(--rule); }
.chart .grid line { stroke: var(--hairline); }
.chart .annot { font-size: 11px; fill: var(--ink-2); }
.chart .annot.strong { fill: var(--ink); font-weight: 600; }

/* swimmer legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.legend .key { display: inline-flex; align-items: center; gap: 7px; }
.legend .key svg { width: 14px; height: 14px; flex: none; }

/* ---- tooltip ----------------------------------------------------------- */
.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 8px 11px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  max-width: 260px;
  opacity: 0;
  transition: opacity 0.1s;
}
.tooltip.visible { opacity: 1; }
.tooltip .tip-value { font-weight: 650; font-size: 13px; }
.tooltip .tip-label { color: var(--ink-2); }

/* ---- table fallback ---------------------------------------------------- */
details.data-table { margin-top: 8px; font-family: var(--sans); }
details.data-table summary {
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  width: max-content;
}
details.data-table table {
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 50%;
}
details.data-table th, details.data-table td {
  text-align: left;
  padding: 4px 16px 4px 0;
  border-bottom: 1px solid var(--hairline);
}
details.data-table td.num, details.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- footer ------------------------------------------------------------ */
footer.colophon {
  margin-top: 72px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* ---- landing ----------------------------------------------------------- */
.pitch {
  max-width: 58ch;
  color: var(--ink);
  border-left: 2px solid var(--series-1);
  padding-left: 20px;
  margin: 8px 0 40px;
}
.pitch p { line-height: 1.62; }
.pitch p + p { margin-top: 18px; }

/* ---- buttons ------------------------------------------------------------ */
.actions { display: flex; gap: 14px; align-items: center; margin-top: 40px; }
.actions.quiet { margin: 10px 0 0; }
.btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--ink-3); }
.btn.primary {
  color: var(--paper);
  background: var(--series-1);
  border-color: var(--series-1);
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.08); color: var(--paper); }

/* ---- review: the ledger of assumptions ---------------------------------- */
.review-summary { font-size: clamp(23px, 3.6vw, 32px); }

.ledger { border-top: 1px solid var(--hairline); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 24px;
  padding: 13px 0 11px;
  border-bottom: 1px solid var(--hairline);
}
.row-label {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.row-control { text-align: right; }
.row-note {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  max-width: 60ch;
}
.field-error {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--series-1);
}

/* editable numerals: typeset figures with a hairline underline, not boxes */
.row input[type="number"] {
  font-family: var(--serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  width: 5.4ch;
  text-align: right;
  padding: 0 2px 1px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.row input[type="number"]::-webkit-outer-spin-button,
.row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.row input[type="number"]:hover { border-bottom-color: var(--ink-3); }
.row input[type="number"]:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--series-1);
  margin-bottom: -1px;
}
.control-group { display: inline-flex; align-items: baseline; gap: 7px; }
.control-group .unit {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
}
.control-group .unit.spaced { margin: 0 8px; }

/* day chips */
.days { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.day { position: relative; cursor: pointer; }
.day input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.day .day-name {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
}
.day input:checked + .day-name {
  color: var(--paper);
  background: var(--series-1);
  border-color: var(--series-1);
  font-weight: 600;
}
.day input:focus-visible + .day-name {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

/* preset cards */
.preset-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.preset-card {
  position: relative;
  display: flex;
  cursor: pointer;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 20px;
  min-width: 200px;
}
.preset-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.preset-card:has(input:checked) {
  border-color: var(--series-1);
  box-shadow: inset 0 0 0 1px var(--series-1);
}
.preset-card:has(input:focus-visible) {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}
.preset-body { display: flex; flex-direction: column; gap: 2px; }
.preset-name { font-size: 20px; font-style: italic; color: var(--ink); }
.preset-card:has(input:checked) .preset-name { color: var(--series-1); }
.preset-detail {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
}

.footnote {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--series-3);
}

/* cap annotations — fed by plan 03's clamped_fields, rendered from data */
.cap-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--series-3);
  border: 1px solid var(--series-3);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}
aside.cap-notes {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--series-3);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  max-width: 64ch;
}
aside.cap-notes h3 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
aside.cap-notes ul { margin-left: 18px; }

.review-error {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--series-1);
  margin-top: 28px;
  max-width: 64ch;
}

/* ---- live progress (converging estimate) -------------------------------- */
figure.chart.converge { max-width: 720px; }
.live-stats {
  display: flex;
  gap: 28px;
  margin-top: 18px;
  font-family: var(--sans);
}
.live-stat { display: flex; align-items: baseline; gap: 8px; }
.live-stat .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.live-stat .value {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.progress-note {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 14px;
}

/* ---- conversational intake: one question on stage ------------------------ */
/* Not a messenger, and no scrollback log: a single serif question holds the
 * stage. On send the exchange takes a brief bow — collapses up and out —
 * and the next question replaces it. The running record lives in the
 * parameter constellation below the composer and in the review ledger. */

.privacy-line {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
  margin: -28px 0 8px;
  max-width: 52ch;
}

/* The retiring exchange (built only when motion is allowed; reduced motion
 * removes it outright in JS). Height is set inline from the measured box so
 * the collapse is smooth and the page never jumps. */
.exchange { max-width: 66ch; }
.exchange-turn {
  overflow: hidden;
  transition: height 0.45s ease, opacity 0.3s ease, transform 0.45s ease;
}
.exchange-turn.exchange-out {
  height: 0 !important;
  opacity: 0;
  transform: translateY(-8px);
}
.exchange-q {
  font-style: italic;
  color: var(--ink-2);
  margin-top: 6px;
  max-width: 56ch;
}
.exchange-a {
  margin: 10px 0 6px;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
  white-space: pre-wrap;
  max-width: 56ch;
}
.exchange-skip {
  margin: 10px 0 6px;
  color: var(--ink-3);
  font-style: italic;
}

/* Transient confirmation notes — "Noted — …", clamp and penciled lines.
 * Round-3 placement: they render on the just-answered panel (inside the
 * composer), hold a beat, and clear when the panel retires — the next
 * question appears clean. */
.intake-notes { max-width: 58ch; min-height: 20px; }
.composer .intake-notes.confirm { min-height: 0; margin-top: 10px; }
.note {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
}
.note.noted { color: var(--series-2); }
.note.reined { color: var(--series-3); }
.note.quiet { color: var(--ink-3); }
.note.slip { color: var(--series-1); font-style: italic; }

.intake-question {
  font-size: clamp(21px, 3.2vw, 28px);
  line-height: 1.3;
  margin: 30px 0 4px;
  max-width: 24em;
  min-height: 2.6em;
}
/* The observation lead-in: the service's one-sentence read of the previous
 * answer, opening the next question ("It seems like you're selective when
 * moving from first to second dates."). Same serif voice, italic, a step
 * down — part of the question block, so the pair reads as one thought. */
.intake-question .q-observation {
  display: block;
  font-style: italic;
  font-size: 0.72em;
  line-height: 1.45;
  color: var(--ink-2);
  margin-bottom: 12px;
  max-width: 46ch;
}
.intake-question .q-text { display: block; }
/* A beat with no header (no lead-in, all sub-questions in the instrument)
 * collapses the stage rather than holding an empty two-line reserve. */
.intake-question.bare { min-height: 0; margin-bottom: 0; }
/* The hint register — the "different font": sans, muted, a step down from
 * the serif question it accompanies (beat 4's cost prompt; instrument
 * hints share the voice via .inst-hint below). */
.intake-question .q-hint {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 10px;
  max-width: 52ch;
}
.intake-status {
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-3);
  min-height: 1.4em;
  margin-top: 4px;
}
/* Entrance: a quiet rise only — deliberately no opacity keyframe, so a
 * stalled frame (background tab, throttled renderer) can never leave the
 * live question half-invisible. */
@media (prefers-reduced-motion: no-preference) {
  .q-enter, .note { animation: turn-rise 0.3s ease-out; }
  @keyframes turn-rise {
    from { transform: translateY(7px); }
  }
}

.composer { margin-top: 10px; max-width: 66ch; }
.composer textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 2px 8px;
  resize: none;
  overflow: hidden;
}
.composer textarea::placeholder { color: var(--ink-3); font-style: italic; }
.composer textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--series-1);
  margin-bottom: -1px;
}
.composer textarea:disabled { opacity: 0.55; }
.composer-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.composer-actions { display: flex; gap: 10px; }
.composer-actions .btn:disabled,
.actions .btn:disabled { opacity: 0.5; cursor: default; }

.intake-error {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--series-1);
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  max-width: 64ch;
}
.intake-error .actions { margin-top: 12px; }

/* ---- answer instruments (hybrid intake composers) ------------------------ */
/* The instrumented beats answer with Almanac instruments, not a form: the
 * review ledger's vocabulary — hairline-separated rows, sans micro-labels,
 * serif tabular numerals on hairline underlines, the day-chip pills — plus
 * two instrument-only pieces: steppers (numeral flanked by hairline
 * roundels) and % sliders whose thumb is the brand's four-point spark.
 * Round-3 interleaved layout: each serif sub-question line sits directly
 * above its own widget row, so the beat reads question → widget,
 * question → widget down the page. */
.instrument {
  margin-top: 4px;
}
.inst-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 24px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--hairline);
}
/* a widget with no title (mixed beats — the question line IS the label) */
.inst-row.bare { grid-template-columns: auto; justify-content: start; }
.inst-row.bare .inst-control { justify-content: flex-start; }
.inst-label {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
/* the interleaved sub-question line: serif, one register below the stage
 * header, directly above the widget that answers it */
.inst-q {
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--ink);
  margin: 22px 0 2px;
  max-width: 56ch;
}
.instrument .inst-q:first-child { margin-top: 10px; }
/* the hint register inside an instrument (see .q-hint for the stage twin) */
.inst-hint {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 10px 0 2px;
  max-width: 52ch;
}
/* a mixed beat's optional description box, inline in the flow */
.instrument textarea.inst-text {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 4px 2px 8px;
  margin-top: 2px;
  resize: none;
  overflow: hidden;
}
.instrument textarea.inst-text::placeholder { color: var(--ink-3); font-style: italic; }
.instrument textarea.inst-text:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--series-1);
  margin-bottom: -1px;
}
.instrument textarea.inst-text:disabled { opacity: 0.55; }
.inst-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.inst-control .unit {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
}
.inst-control.days { flex-wrap: wrap; }

/* editable numerals, same treatment as the ledger's */
.instrument input[type="number"] {
  font-family: var(--serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  width: 3.6ch;
  text-align: center;
  padding: 0 2px 1px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.instrument input[type="number"]::-webkit-outer-spin-button,
.instrument input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.instrument input[type="number"]:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--series-1);
  margin-bottom: -1px;
}

.stepper { gap: 4px; }
.step-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.step-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.step-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.step-btn:disabled { opacity: 0.3; cursor: default; }

/* % slider: hairline track, the brand spark as the thumb */
input[type="range"].inst-slider {
  -webkit-appearance: none;
  appearance: none;
  width: min(170px, 38vw);
  height: 22px;
  margin: 0;
  background: none;
  cursor: pointer;
}
.inst-slider::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}
.inst-slider::-moz-range-track {
  height: 1px;
  background: var(--rule);
}
.inst-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -8px;
  border: none;
  border-radius: 0;
  background-color: var(--series-1);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1l1.6 5.4L15 8l-5.4 1.6L8 15 6.4 9.6 1 8l5.4-1.6z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1l1.6 5.4L15 8l-5.4 1.6L8 15 6.4 9.6 1 8l5.4-1.6z"/></svg>') center / contain no-repeat;
}
.inst-slider::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: none;
  border-radius: 0;
  background-color: var(--series-1);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1l1.6 5.4L15 8l-5.4 1.6L8 15 6.4 9.6 1 8l5.4-1.6z"/></svg>') center / contain no-repeat;
}
.inst-slider:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}
.inst-value {
  font-family: var(--serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0 2px 1px;
  min-width: 3ch;
  text-align: right;
}

/* "we penciled in…" — an estimated figure, gold like the annotations */
.note.penciled { color: var(--series-3); font-style: italic; }

/* ---- the parameter braid (intake progress) ------------------------------- */
/* An engraved river delta of the interview: three hairline strands leave a
 * common origin, diverge through the beats (one named cluster per beat, one
 * star per parameter, placed ON the strands), pinch together at the
 * one-star beats, and reconverge on the gold marriage star — a quiet visual
 * analog of the parallel futures the simulator runs. Segment widths carry
 * strand multiplicity (the merged trunk runs heavier). Ghost circles fill
 * into the brand's four-point spark as fields land; while the service
 * thinks, comets flow along all three strands — splitting and merging with
 * the braid — as the loading indicator. All colors are tokens, so theme
 * flips redraw for free. Geometry (strand paths, per-path --ig-len, comet
 * dash 26) is set in js/charts/intake-graph.js — keep in sync. */

.constellation {
  margin: 30px 0 4px;
  max-width: 780px;
}
.constellation svg { display: block; width: 100%; height: auto; }

.ig-strand { stroke: var(--hairline); }
.ig-origin { fill: var(--ink-3); }

.ig-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-3);
  text-anchor: middle;
  transition: fill 0.3s ease;
}

.ig-node .ig-ghost {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  transition: opacity 0.3s ease, stroke 0.3s ease;
}
.ig-node .ig-star { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ig-node.is-filled .ig-ghost { opacity: 0; }
.ig-node.is-filled .ig-star { opacity: 1; }
.ig-node.is-open .ig-ghost { stroke-dasharray: 2 2.6; }

/* Waiting: the cluster being written up leans forward (a static shift —
 * this is the whole cue under reduced motion). */
.ig-cluster.ig-waiting .ig-ghost { stroke: var(--ink-3); }
.ig-cluster.ig-waiting .ig-label { fill: var(--ink-2); }

/* The comets: one short dash per strand (dash arrays set per path in JS,
 * since each strand has its own length), colored by a fixed user-space
 * gradient — sienna warming to gold with position. All three run the same
 * fraction-aligned keyframes, so the pulse leaves the origin as one, splits
 * where the braid splits, and merges again at the marriage star. Visible
 * only while waiting. */
.ig-pulse {
  stroke: url(#ig-pulse-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dashoffset: 26px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.constellation.is-waiting .ig-pulse { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .constellation.is-waiting .ig-pulse {
    animation: ig-travel 2.4s linear infinite;
  }
  @keyframes ig-travel {
    from { stroke-dashoffset: 26px; }
    to { stroke-dashoffset: calc(-1 * var(--ig-len, 890px)); }
  }
  .ig-node.is-filled .ig-star { animation: ig-settle 0.5s ease-out; }
  @keyframes ig-settle {
    from { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); }
    to { transform: scale(1); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ig-pulse { opacity: 0 !important; }
}

/* ---- access gate (interim beta code, pre-plan-06) ------------------------ */
/* One serif line of a form — an invitation card, not a login box. */

.gate-form { margin-top: 34px; max-width: 44ch; }
.gate-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 2px 8px;
}
.gate-input::placeholder { color: var(--ink-3); font-style: italic; }
.gate-input:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--series-1);
  margin-bottom: -1px;
}
.gate-form .actions { margin-top: 22px; }
.gate-wrong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--series-1);
  max-width: 52ch;
}
#gate .privacy-line { margin: 26px 0 0; }
#intake .privacy-line { margin: 26px 0 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- premium gating + the interrogation (plan 09a) ----------------------- */
/* The free edition keeps the verdict, the hero curve, and the horizon lede;
 * everything marked premium-only steps back. The split is driven entirely
 * by the `premium` flag from GET /me — plan 06 changes no UI code. */
#results.free-edition .premium-only { display: none; }

/* the honest paid-half plate — same register as the almanac's blank plate */
.locked-plate {
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--hairline);
  padding: 34px 18px;
  margin-top: 6px;
}
.locked-plate::before {
  content: "§";
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: var(--series-3);
}
.locked-plate .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin: 0 auto;
}
.locked-plate .note {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 auto;
}

/* the narrated wait */
.diag-wait {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-2);
  margin-top: 6px;
  max-width: 52ch;
  min-height: 1.5em;
}

.diag-failed .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: 6px;
}

/* the report */
.diag-h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 26px 0 10px;
}
#diag-report > .lede { margin-top: 8px; }

.diag-bottlenecks {
  border-left: 2px solid var(--series-1);
  padding-left: 18px;
  max-width: 62ch;
  display: grid;
  gap: 12px;
}
.diag-bottleneck .finding { margin: 0; }
.diag-bottleneck .basis {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.lever-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.lever-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lever-card .move { font-size: 19px; font-style: italic; }
.lever-card .delta-3y {
  font-size: 30px;
  line-height: 1.1;
  color: var(--series-1);
  font-variant-numeric: tabular-nums;
}
.lever-card .delta-3y small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-top: 3px;
}
.lever-card .delta-secondary {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.lever-card .why {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
}
.lever-card .norm-note {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--series-3);
  border-left: 2px solid var(--series-3);
  padding-left: 10px;
}

/* guardrail marginalia: the levers the almanac declined to recommend */
.diag-marginalia {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--series-3);
  max-width: 62ch;
}
.diag-marginalia h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-3);
  margin-bottom: 6px;
}
.diag-marginalia ul { list-style: none; display: grid; gap: 8px; }
.diag-marginalia .what {
  font-style: italic;
  color: var(--ink);
}
.diag-marginalia .because {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
}

.diag-overlay-note {
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-2);
  margin-top: 20px;
  max-width: 62ch;
}

/* ---- plan 09b: seal, teaser, share card, the Wrapped --------------------- */

/* the free edition's counterpart of premium-only: the free finale (share
 * card section) steps back for paying readers, whose card lives in the
 * Wrapped's last beat. Driven by the same premium flag, nothing else. */
#results:not(.free-edition) .free-only { display: none; }

/* the archetype seal — an engraved printer's device under the verdict */
.seal {
  margin: 30px auto 10px;
  text-align: center;
}
.seal-device {
  display: block;
  width: min(360px, 88%);
  height: auto;
  margin: 0 auto;
}
.seal-ring { fill: none; stroke: var(--rule); stroke-width: 1.6; }
.seal-ring.thin { stroke: var(--hairline); stroke-width: 1; }
.seal-star { fill: var(--series-3); }
.seal-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  fill: var(--ink-2);
}
.seal-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  fill: var(--ink);
}
.seal-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 8px auto 0;
}

/* the free-tier teaser (the locked plate, upgraded to plan 08's design) */
.locked-plate.teaser {
  place-content: stretch;
  gap: 0;
  padding: 30px 10px 28px;
}
.locked-plate.teaser .line { margin-bottom: 20px; }
.teaser-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 18px 22px 16px;
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.teaser-card .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-1);
  margin: 0;
}
.teaser-card .veiled {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
  margin: 8px 0 10px;
}
.teaser-card .basis {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0;
}
.teaser-minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 24px auto 0;
}
.teaser-mini { margin: 0; }
.teaser-mini .veil {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 10px 12px 7px;
  filter: blur(5px);
  opacity: 0.75;
  pointer-events: none;
}
.teaser-mini .mini-chart { display: block; width: 100%; height: auto; }
.mini-series-1 { fill: var(--series-1); }
.mini-series-2 { fill: var(--series-2); }
.mini-series-3 { fill: var(--series-3); }
.teaser-mini figcaption {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-top: 7px;
}
.locked-plate.teaser .note { margin-top: 22px; }

/* the share card: preview + controls */
.share-block {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.card-preview {
  margin: 0;
  width: min(250px, 72vw);
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.card-preview svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.card-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.card-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--series-1);
}
.card-status {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  min-height: 1.3em;
  margin: 0;
}

/* the Wrapped — four numbered beats, the almanac's closing chapter */
.wrapped-beat { margin-top: 36px; }
.beat-eyebrow {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-3);
  margin-bottom: 10px;
}
.beat-body {
  font-family: var(--serif);
  font-size: 17px;
  max-width: 62ch;
}
.beat-deep {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 62ch;
  margin-top: 10px;
  border-left: 2px solid var(--series-1);
  padding-left: 12px;
}
.wrapped-stats {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
}
.wrapped-stats .stat .value { font-size: 24px; }
.wrapped-stats .stat:nth-child(3n + 1) {
  border-left: none;
  padding-left: 0;
}
.wrapped-stats .stat:nth-child(n + 4) {
  border-top: 1px solid var(--hairline);
}
.stat-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---- sample-data badge --------------------------------------------------- */
.badge {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-3);
  border: 1px solid var(--series-3);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---- states ------------------------------------------------------------ */
.loading, .load-error {
  margin-top: 60px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
}
.load-error { color: var(--series-1); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 760px) {
  .page { padding: 24px 18px 60px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .stat { border-top: 1px solid var(--hairline); }
  .stat:first-child, .stat:nth-child(2) { border-top: none; }
  .chart-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row-control { text-align: left; }
  .days { justify-content: flex-start; }
  .inst-row { grid-template-columns: 1fr; }
  .inst-control { justify-content: flex-start; }
  .composer-row { flex-wrap: wrap; }
  .privacy-line { margin-top: -16px; }
  .wrapped-stats { grid-template-columns: repeat(2, 1fr); }
  .wrapped-stats .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .wrapped-stats .stat:nth-child(even) {
    border-left: 1px solid var(--hairline);
    padding-left: 20px;
  }
  .wrapped-stats .stat:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }
}