/* Bonsai — eval harness UI.
   Editorial light theme drawn from the logo: forest green (#215137) + enso gold
   on warm paper. Centerpiece: the pill flips red→yellow→green live as
   eval_stream runs; the bonsai sprouts a branch per minted check. */

:root {
  /* paper */
  --paper:   #f4eee1;   /* warm off-white page */
  --paper-2: #fffdf8;   /* raised panel */
  --paper-3: #faf5ea;   /* inset well */
  --masthead:#ffffff;   /* white so the white-bg logo melts in */

  /* ink */
  --ink:      #16271d;  /* deep forest, near-black body text */
  --ink-soft: #2f4537;
  --muted:    #6a7c70;  /* desaturated green-grey */

  /* brand */
  --forest:        #215137;  /* logo green */
  --forest-deep:   #173d28;
  --forest-bright: #2c7a4d;
  --gold:        #b8862f;     /* enso gold, text-safe */
  --gold-bright: #caa64f;
  --gold-soft:   #f0e3c4;

  /* verdict colors (legible on paper) */
  --red:        #c0392b;
  --red-soft:   #f7e3e0;
  --red-line:   #e3b6b0;
  --amber:      #a9761a;
  --amber-soft: #f6e8cd;
  --amber-line: #e2c585;
  --green:      #2c7a4d;
  --green-soft: #d9ecdf;
  --green-line: #a9d4ba;

  /* structure */
  --line:        #e4dac4;
  --line-strong: #d4c7aa;
  --shadow-sm: 0 1px 2px rgba(30, 50, 35, 0.06);
  --shadow:    0 10px 30px rgba(28, 48, 34, 0.10), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --shadow-lg: 0 18px 50px rgba(28, 48, 34, 0.16);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 560px at 82% -12%, #fbf6ea 0%, rgba(251, 246, 234, 0) 60%),
    radial-gradient(900px 500px at 0% 0%, #f6efe0 0%, rgba(246, 239, 224, 0) 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-soft); color: var(--forest-deep); }

/* ---- masthead ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.6rem;
  background: var(--masthead);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 var(--gold-soft), 0 6px 18px rgba(28, 48, 34, 0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img {
  width: 66px;       /* scaled up + clipped by the 46px box — crops the logo's
                        whitespace so the bonsai reads bigger, same bar height */
  height: 66px;
  object-fit: contain;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--forest-deep);
}
.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-left: 0.34em;
  border-radius: 999px;
  background: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(202, 166, 79, 0.25);
  vertical-align: 0.06em;
}
.tagline {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* runtime-mode chip — states the box's TRUE mode (web.streams.use_mock), never hardcoded */
.mode-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
  cursor: help;
}
.mode-chip--mock { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); }
.mode-chip--live { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }

/* legacy header h1 fallback (kept harmless if markup ever reverts) */
.topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 700; }
.subtitle { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-left: 0.5rem; }
.subtitle strong { color: var(--forest-bright); }

/* value-prop strip under the header — lead with the pitch */
.hero-line {
  margin: 0;
  padding: 0.5rem 1.6rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.hero-line strong { color: var(--forest-deep); font-weight: 700; }

/* demo-mode hint strip — shown ONLY when the box is the scripted mock: says what a
   wired live box does instead (real checks + real generality gate). */
.mode-hint {
  margin: 0;
  padding: 0.4rem 1.6rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber-line);
}
.mode-hint strong { color: var(--amber); }
.mode-hint-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-right: 0.4rem;
  vertical-align: 0.05em;
}

/* scenario strip — gives the enterprise demo a face (Verity @ Northbeam) */
.scenario-line {
  margin: 0;
  padding: 0.4rem 1.6rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.scenario-line strong { color: var(--forest-deep); font-weight: 600; }
/* Wide screens: the strips' BANDS stay full-bleed, but their text is confined to
   the same 1380px column as the content below — otherwise a 2560px monitor gets
   one enormous line of text and nothing on the page lines up. */
.hero-line, .scenario-line, .mode-hint {
  padding-left: max(1.6rem, calc((100vw - 1380px) / 2));
  padding-right: max(1.6rem, calc((100vw - 1380px) / 2));
}
.scenario-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-right: 0.4rem;
  vertical-align: 0.05em;
}

/* the moat, made visible on the honesty receipt */
.receipt-moat {
  margin: 0.85rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}
.receipt-moat strong { color: var(--forest-deep); font-weight: 700; }
.receipt-moat em { color: var(--gold); font-style: normal; font-weight: 600; }

/* the gold panel — the TRUE honesty receipt (vs the working-pool panel) */
.gold-panel { border-left: 3px solid var(--forest-bright); margin-top: 0.9rem; }
.gold-eyebrow { color: var(--forest-bright); }
.gold-eyebrow::after { border-top-color: rgba(44, 122, 77, 0.3); }
/* the cluster→mint lineage fades in when it auto-reveals after a flip */
.lineage { animation: fadein 0.45s ease both; }

/* ---- live-claim form (type a claim on stage) ----------------------------- */
.live-claim {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  background: var(--paper-3);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}
.live-claim-hint { margin: 0 0 0.1rem; font-size: 0.8rem; color: var(--muted); }
.live-claim-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-right: 0.4rem;
}
.live-claim textarea {
  font: inherit;
  font-size: 0.9rem;
  width: 100%;
  resize: vertical;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.live-claim textarea:focus-visible { outline: 2px solid var(--forest-bright); outline-offset: 1px; }
.live-claim-row { display: flex; gap: 0.6rem; align-items: center; }
.live-claim select {
  font: inherit;
  font-size: 0.84rem;
  flex: 1;
  padding: 0.45rem 0.6rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
/* one-click example chips — fill the form so the live beat never improvises */
.live-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.1rem; }
.live-examples-label { font-size: 0.74rem; color: var(--muted); }
.ex-chip {
  font: inherit; font-size: 0.74rem; cursor: pointer;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  color: var(--forest-deep); background: var(--paper-2);
  border: 1px solid var(--line-strong);
  transition: border-color 0.15s, background 0.15s;
}
.ex-chip:hover { border-color: var(--forest-bright); background: var(--gold-soft); }

/* clean-claim lineage — the "cleared a false positive, nothing to mint" card */
.lineage--clean { border-left: 3px solid var(--green-line); }
.lineage-clean { margin: 0.5rem 0 0.4rem; font-size: 0.84rem; color: var(--ink-soft); }
.lineage--clean .lineage-title { color: var(--green); }

/* plain-language takeaway lines on the cluster lineage (the "what it means" view) */
.lineage-summary {
  margin: 0.55rem 0 0.2rem; padding: 0.5rem 0.7rem;
  font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft);
  background: var(--paper-3); border-radius: 9px;
}
.lineage-summary strong { color: var(--forest-deep); }
.lineage-summary em { font-style: normal; color: var(--gold); font-weight: 600; }
.lin-plain { margin-top: 4px; font-size: 0.74rem; color: var(--muted); }
.lin-plain em { font-style: normal; color: var(--forest-bright); font-weight: 600; }

/* the forward-looking value line — what the harness now PREVENTS on the next answer */
.lineage-forward {
  margin: 0.4rem 0 0.2rem; padding: 0.5rem 0.7rem;
  font-size: 0.82rem; line-height: 1.4; color: var(--forest-deep);
  background: var(--green-soft); border-radius: 9px;
}
.forward-tag {
  display: inline-block; margin-right: 0.4rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--forest-bright);
}

/* ---- rubric panel: maturity meter + living checklist (Move #4) ------------ */
.maturity { margin: 0 0 14px; }
.maturity-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.maturity-count { font-size: 0.95rem; color: var(--ink); }
.maturity-count strong { color: var(--forest); }
.maturity-bar { display: flex; gap: 4px; margin-top: 8px; }
.mseg {
  flex: 1; height: 8px; border-radius: 5px;
  background: var(--paper-3); border: 1px solid var(--line);
  transition: background 0.45s ease, transform 0.25s ease;
}
.mseg--filled { border-color: transparent; }
/* pulse ONLY the segment a new family just filled — not every filled bar on each refresh */
.mseg--filled.mseg--new { animation: seg-fill 0.45s ease both; }
/* per-family tint when filled — desaturated brand greens/golds, not a rainbow */
.mseg--filled.mseg--unsupported-numeric    { background: var(--forest); }
.mseg--filled.mseg--fabricated-quote       { background: var(--forest-bright); }
.mseg--filled.mseg--stale-wrong-citation   { background: var(--gold); }
.mseg--filled.mseg--vague-not-checkable    { background: var(--amber); }
.mseg--filled.mseg--single-source-overcite { background: var(--gold-bright); }
@keyframes seg-fill { from { transform: scaleY(0.4); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.check--seed { background: var(--paper-3); }
.check-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.dot--seed { background: #9bb196; }
.dot--unsupported-numeric { background: var(--forest); }
.dot--fabricated-quote { background: var(--forest-bright); }
.dot--stale-wrong-citation { background: var(--gold); }
.dot--vague-not-checkable { background: var(--amber); }
.dot--single-source-overcite { background: var(--gold-bright); }
.check-body { flex: 1; min-width: 0; }
.check-line { display: flex; align-items: center; gap: 8px; }
.check-name { font-weight: 600; color: var(--ink); }
.check-tag { font-size: 0.78rem; color: var(--muted); }
.check-mint { font-size: 0.78rem; color: var(--muted); margin: 2px 0 4px; }
.check-prop { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.35; }
/* version chip — the maturation badge, the only loud element */
.ver-chip {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--forest-deep); background: var(--green-soft);
  border: 1px solid var(--green-line); border-radius: 999px; padding: 1px 7px;
}
.check-status { margin-left: auto; font-size: 0.76rem; }
.status--general { color: var(--green); font-weight: 600; }
.status--watching { color: var(--amber); }
.status--active { color: var(--green); font-weight: 600; }
/* vague → precise diff */
.check-diff {
  margin-top: 6px; font-size: 0.78rem; line-height: 1.3;
  padding: 6px 8px; border-radius: 8px; background: var(--paper-3);
}
.diff-from { color: var(--muted); text-decoration: line-through; }
.diff-arrow { color: var(--gold); margin: 0 4px; }
.diff-to { color: var(--forest); font-weight: 500; }
/* newest row — reuse the bonsai's gold-accent "new leaf" beat */
.check--new { border-color: var(--gold-line, var(--amber-line)); box-shadow: 0 0 0 2px var(--gold-soft); animation: row-in 0.5s ease both; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mseg--new, .check--new { animation: none; } }

/* ---- the method ribbon: orientation, not a wizard -------------------------- */
.method-ribbon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1.6rem 0;
  font-size: 0.68rem;
  color: var(--muted);
}
.mstep {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  background: var(--paper-2);
  white-space: nowrap;
}
.mstep b { color: var(--gold); font-weight: 700; margin-right: 0.25rem; }
.msep { color: var(--line-strong); }

/* ---- the value strip: three health tiles that move ------------------------ */
/* compact chips, one row — the fold budget belongs to the claims + rubric */
.value-strip { max-width: 1380px; margin: 0 auto; padding: 0.55rem 1.6rem 0; }
.value-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.vtile {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vtile:hover { border-color: var(--forest-bright); box-shadow: var(--shadow); }
.vtile-n {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: var(--forest-deep);
}
.vtile-l { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .value-tiles { grid-template-columns: 1fr; } }

/* ---- the two scores: the hero band --------------------------------------- */
/* the gameable working number and the frozen-gold receipt, side by side — the
   GAP between them is the product's honesty story, so it leads the page. */
.two-score {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0.65rem 1.6rem 0;
}
.two-score-intro {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 62rem;
  margin-inline: auto;
}
.two-score-intro strong { color: var(--forest-deep); }
.two-score-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-right: 0.4rem;
  vertical-align: 0.05em;
}
.two-score-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: stretch;
}
/* equal heights WITHOUT dead space: each panel is a flex column and its
   explainer footer anchors to the bottom, so the shorter panel breathes in the
   middle instead of leaving a ragged hole under itself */
.two-score-band .panel { margin-top: 0; padding: 0.85rem 1.1rem 0.95rem; display: flex; flex-direction: column; }
.two-score-band .receipt-moat { margin-top: auto; padding-top: 0.6rem; }
.two-score-band .panel h2 { margin-bottom: 0.6rem; padding-bottom: 0.45rem; font-size: 1.05rem; }
.two-score-band .score-counts { font-size: 2rem; }
.two-score-band .receipt-moat { font-size: 0.7rem; margin-top: 0.6rem; }
.two-score-band .score-ci { margin-top: 0.5rem; padding-top: 0.45rem; }
.two-score-vs {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  background: var(--paper-2);
}
@media (max-width: 920px) {
  .two-score-band { grid-template-columns: minmax(0, 1fr); }
  .two-score-vs { display: none; }
}

/* the honest-degradation note when a live gold rescore fails */
.verify-error { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--red); }
/* the explicit live-rescore trigger on the gold receipt */
.gold-verify { margin: 0.75rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.btn--verify { font-size: 0.8rem; padding: 0.42rem 0.8rem; }
.btn--verify:disabled { opacity: 0.55; cursor: progress; }
.verify-hint { font-size: 0.72rem; color: var(--muted); }

/* the receipt card — the plain-English payoff of a check run (main.js renderReceipt) */
.receipt { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.receipt-verdict { font-weight: 700; font-size: 0.9rem; }
.receipt-verdict--caught { color: var(--red); }
.receipt-verdict--clear { color: var(--green); }
.receipt-line {
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.45rem 0.65rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--ink-soft);
}
.receipt-honesty { border-style: dashed; color: var(--muted); }
.receipt-score { background: transparent; border: 0; padding: 0.1rem 0.1rem 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* the mint story line inside the receipt (score.mint via main.js) */
.mint-note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.45rem 0.65rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--ink-soft);
}
.mint-note--gated { border-color: var(--green-line); background: var(--green-soft); color: var(--forest-deep); }
.mint-note--rejected { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }
.mint-note--error { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }

/* ---- layout -------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.4rem;
  padding: 1rem 1.6rem 3rem;
  max-width: 1380px;
  margin: 0 auto;
  align-items: start;
}
.side { display: grid; gap: 1.4rem; position: sticky; top: 5.2rem; }

.panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow);
}
.panel h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.95rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.hint {
  font-family: var(--font-body);
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1px;
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  font: inherit;
  font-weight: 600;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--forest-deep);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--forest-bright); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn--run {
  background: linear-gradient(180deg, var(--forest-bright) 0%, var(--forest) 100%);
  color: #f3f8f1;
  border-color: var(--forest-deep);
  font-size: 0.95rem;
  padding: 0.58rem 1.15rem;
  box-shadow: 0 6px 16px rgba(33, 81, 55, 0.28), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn--run:hover { filter: brightness(1.05); border-color: var(--forest-deep); }
.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  font-size: 0.86rem;
  padding: 0.5rem 0.85rem;
}
.btn--ghost:hover { color: var(--forest-deep); border-color: var(--forest-bright); }
.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }
.topbar-actions form { margin: 0; }
.btn--improve {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--forest);
  border-color: var(--green-line);
  background: linear-gradient(180deg, #ffffff 0%, var(--green-soft) 140%);
}
.btn--improve:hover { border-color: var(--forest-bright); color: var(--forest-deep); }
.htmx-indicator {
  color: var(--muted); font-size: 0.85rem; opacity: 0;
  transition: opacity 0.2s; margin-left: 0.6rem;
}
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }

/* ---- claims -------------------------------------------------------------- */
.claims-panel > h2 { margin-bottom: 1.1rem; }
.claim {
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.05rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #fffefb 0%, var(--paper-3) 100%);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, box-shadow 0.2s, transform 0.2s;
}
.claim:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.claim:has(.pill--green) { border-left-color: var(--green); }
.claim:has(.pill--yellow) { border-left-color: var(--amber); }
.claim:has(.pill--red) { border-left-color: var(--red-line); }
.claim-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.85rem; }
/* resting: the category chip + status pill share the header row; on a narrow card
   the pill wraps to its own line instead of clipping at the viewport edge. once an
   Improve stream swaps the full console into the slot, the slot breaks to a
   full-width row below the header so the dark rule-box is never crammed into a
   content-sized header cell. */
.improve-slot:has(.improve) { flex-basis: 100%; margin-top: 0.5rem; }
.claim-cat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
}
.claim-cat--clean { color: var(--forest); border-color: var(--green-line); background: var(--green-soft); }
.claim-q {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0.7rem 0 0.3rem;
  font-style: italic;
}
.claim-text {
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--ink);
  line-height: 1.42;
}

/* ---- AUT credit: the Gemini badge + the citations it grounded on --------- */
.claim-by { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.badge--gemini {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.16rem 0.6rem 0.16rem 0.5rem;
}
.badge--gemini::before {
  content: "";
  width: 0.42em; height: 0.42em;
  border-radius: 999px;
  background: var(--gold-bright);
  flex: none;
}
.cite {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--forest);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0.04rem 0.34rem;
}

/* ---- the pill (the star) ------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 6.4rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  /* the flip: color + glow ease between states */
  transition: background-color 0.5s ease, color 0.5s ease,
              border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.pill::before {
  content: "";
  width: 0.46em; height: 0.46em;
  border-radius: 999px;
  background: currentColor;
  flex: none;
  opacity: 0.85;
}
.pill--red {
  background: var(--red-soft); color: var(--red);
  border-color: var(--red-line);
}
.pill--idle {
  background: #eceae3; color: #8c8678;
  border-color: #ddd8cc;
}
.receipt-rail { margin-top: 0.55rem; font-size: 0.78rem; color: #8c8678; }
.receipt-rail code { font-size: 0.92em; }

/* ---- "try to cheat it" station (the CI honesty lint, run live) ------------ */
.cheat-station { margin-top: 0.6rem; padding-top: 0.45rem; border-top: 1px dashed var(--line-strong); }
.cheat-station > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  padding: 0.3rem 0.1rem;
}
.cheat-live { margin: 0.45rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); }
.cheat-verdict { font-weight: 700; }
.cheat-verdict--clean { color: var(--forest-deep); }
.cheat-verdict--caught { color: var(--red); }
.cheat-scope { margin: 0.4rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted); }
.cheat-scope strong { color: var(--forest-deep); }
.cheat-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.55rem; }
.cheat-form textarea {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  width: 100%;
  resize: vertical;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.cheat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cheat-hint { font-size: 0.7rem; color: var(--muted); }
.cheat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cheat-card {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  font-size: 0.8rem;
}
.cheat-card--caught { border-color: var(--red-line); background: var(--red-soft); }
.cheat-card--clean { border-color: var(--green-line); background: var(--green-soft); }
.cheat-card-verdict { font-weight: 700; }
.cheat-card--caught .cheat-card-verdict { color: var(--red); }
.cheat-card--clean .cheat-card-verdict { color: var(--forest-deep); }
.cheat-snippet {
  margin: 0.45rem 0 0;
  padding: 0.45rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.7rem;
  line-height: 1.5;
  overflow-x: auto;
}
.cheat-card-meta { margin-top: 0.35rem; font-size: 0.72rem; color: var(--muted); }
.cheat-card-note { margin-top: 0.3rem; font-size: 0.7rem; color: var(--muted); }
.about-credit { max-width: 46rem; margin: 1.6rem auto 0; text-align: center; font-size: 0.82rem; color: #8c8678; }
.pill--yellow {
  background: var(--amber-soft); color: var(--amber);
  border-color: var(--amber-line);
  box-shadow: 0 0 0 4px rgba(169, 118, 26, 0.10);
  animation: pulse 1.1s ease-in-out infinite;
}
.pill--green {
  /* the payoff: solid forest fill with a gold ring */
  background: linear-gradient(180deg, var(--forest-bright) 0%, var(--forest) 100%);
  color: #f3f8f1;
  border-color: var(--forest-deep);
  box-shadow: 0 0 0 3px rgba(202, 166, 79, 0.30), 0 6px 16px rgba(33, 81, 55, 0.30);
  transform: translateY(-1px);
}
.pill--green::before { background: var(--gold-bright); opacity: 1; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(169, 118, 26, 0.12); }
  50%      { box-shadow: 0 0 0 8px rgba(169, 118, 26, 0.04); }
}
.stream-error { animation: none; }

/* ---- improve fragment / rule console ------------------------------------- */
.improve { margin-top: 0.2rem; }
.rule-box {
  margin-top: 0.85rem;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--forest-deep);
  box-shadow: var(--shadow-sm);
}
.rule-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--gold-bright);
  background: var(--forest-deep);
  padding: 0.4rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.rule-label::before {
  content: "";
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--gold-bright);
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.35; } }
/* finished state — stop the pulsing dot, mark the rewrite as done */
.rule-label--done { color: #d4ecdc; }
.rule-label--done::before { animation: none; background: var(--forest-bright); }
/* error surfacing — a failure shows here (with the red pill) instead of freezing */
.stream-error-slot:empty { display: none; }
.stream-error { display: inline-block; margin-top: 0.4rem; font-size: 0.72rem; }
.rule-stream {
  display: block;
  min-height: 2.6rem;
  max-height: 9rem;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #e8f3ea;
  background: linear-gradient(180deg, #16291e 0%, #122017 100%);
  padding: 0.65rem 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.rule-stream span { animation: fadein 0.28s ease; }
/* a steady caret trailing the stream */
.rule-stream::after {
  content: "▋";
  color: var(--gold-bright);
  animation: blink 1s steps(2, start) infinite;
  margin-left: 0.05em;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- score: the honesty receipt ------------------------------------------ */
.score-panel { position: relative; }
.receipt-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.1rem 0 0.7rem;
}
.receipt-eyebrow::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1.5px dashed var(--gold-soft);
}
.score-display { font-variant-numeric: tabular-nums; }
.score-counts {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.score-before { color: var(--muted); }
.score-arrow { color: var(--gold); font-size: 1.4rem; font-weight: 400; }
.score-after { color: var(--ink); transition: color 0.3s; }
.score-after.up { color: var(--forest-bright); }
.score-after.down { color: var(--red); }
.score-of {
  font-family: var(--font-body);
  font-size: 0.86rem; font-weight: 500; color: var(--muted);
  align-self: flex-end; margin-bottom: 0.15rem;
}
.score-ci {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1.5px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.1px;
}
.score-bump { animation: bump 0.45s ease; }
@keyframes bump { 30% { transform: scale(1.05); } }

/* ---- owner intake ("+ Add a requirement") ---------------------------------- */
.teach { margin: 0 0 14px; }
.teach > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  padding: 0.4rem 0.2rem;
}
.teach form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.teach textarea {
  font: inherit;
  font-size: 0.88rem;
  width: 100%;
  resize: vertical;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.teach-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.teach-hint { font-size: 0.7rem; color: var(--muted); }
.teach-card {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  font-size: 0.8rem;
}
.teach-card--admitted { border-color: var(--green-line); background: var(--green-soft); }
.teach-card--rejected { border-color: var(--amber-line); background: var(--amber-soft); }
.teach-verdict { font-weight: 700; }
.teach-card--admitted .teach-verdict { color: var(--forest-deep); }
.teach-card--rejected .teach-verdict { color: var(--amber); }
.teach-card--unverified .teach-verdict { color: var(--gold); }
.teach-prop { margin-top: 0.25rem; color: var(--ink-soft); }
.teach-meta { margin-top: 0.25rem; font-size: 0.72rem; color: var(--muted); }

/* provenance badges — where a check came from (the owner vs a caught failure) */
.prov {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 999px;
  padding: 0.06rem 0.5rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.prov--owner { color: var(--gold); border-color: var(--gold-soft); }
.prov--grown { color: var(--forest-bright); border-color: var(--green-line); }
.prov--frozen { color: var(--ink-soft); border-color: var(--line-strong); }

/* ---- answer-key manager (owner-added gold, copy-verified) ------------------ */
.goldkey-intro { margin: 0.3rem 0 0.4rem; font-size: 0.72rem; line-height: 1.45; color: var(--muted); }
.goldkey-intro strong { color: var(--gold); }
.goldkey-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.goldkey-row select {
  font: inherit;
  font-size: 0.76rem;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
  max-width: 100%;
}
.goldkey-card {
  margin: 0.5rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  font-size: 0.8rem;
}
.goldkey-card--added { border-color: var(--green-line); background: var(--green-soft); }
.goldkey-card--failed { border-color: var(--red-line); background: var(--red-soft); }
.goldkey-verdict { font-weight: 700; }
.goldkey-card--added .goldkey-verdict { color: var(--forest-deep); }
.goldkey-card--failed .goldkey-verdict { color: var(--red); }
.goldkey-prop { margin-top: 0.25rem; color: var(--ink-soft); }
.goldkey-meta { margin-top: 0.25rem; font-size: 0.72rem; color: var(--muted); }
.goldkey-list { list-style: none; margin: 0.55rem 0 0; padding: 0.45rem 0 0; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 0.45rem; }
.goldkey-item { font-size: 0.76rem; color: var(--ink-soft); }
.goldkey-item code { font-size: 0.7rem; }
.goldkey-item-q { margin-top: 0.15rem; font-size: 0.7rem; color: var(--muted); }
.goldkey-item--frozen { color: var(--muted); }

/* provenance note on the receipt panel — owner-added items not in the shown numbers */
.receipt-prov { margin: 0.4rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted); }
.receipt-prov strong { color: var(--ink-soft); }

/* ---- bonsai tree (demoted: a growth timeline, not the hero) --------------- */
.tree-panel .bonsai {
  display: block;
  width: 100%;
  height: 170px;
  transform-origin: 120px 200px;
  animation: sway 7s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-0.5deg); }
  50%      { transform: rotate(0.6deg); }
}
.soil { fill: #cdb892; opacity: 0.55; }
.trunk {
  fill: none;
  stroke: url(#barkGrad);
  stroke-width: 8.5;
  stroke-linecap: round;
}
.branch { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.branch--seed  { stroke: #6f4d2c; }
.branch--green { stroke: var(--forest); }
.branch--amber { stroke: #9a7b34; }
.leaf { stroke: rgba(20, 40, 25, 0.18); stroke-width: 0.5; }
.leaf--seed  { fill: #9bb196; }
.leaf--green { fill: url(#leafGrad); }
.leaf--amber { fill: var(--gold-bright); }

/* apex crown + soft foliage pads — a fuller, whole-tree canopy (fills the top) */
.crown-pad  { fill: #1b4a31; opacity: 0.9; }
.crown-leaf { fill: url(#leafGrad); }
.crown-hi   { fill: #6fc08f; opacity: 0.5; }
.leaf-pad   { opacity: 0.5; }
.leaf-pad--new { animation: fadein 0.5s 0.32s both; }
.tree-caption {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* the sprout: branch draws on, leaves pop in a soft stagger */
.branch--new {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.leaf--new {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 0.55s ease both;
}
.leaf--new.leaf-a { animation-delay: 0.40s; }
.leaf--new.leaf-b { animation-delay: 0.52s; }
.leaf--new.leaf-c { animation-delay: 0.64s; }
@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bonsai, .pill--yellow, .rule-label::before, .rule-stream::after,
  .branch--new, .leaf--new, .leaf-pad--new, .lineage, .score-bump { animation: none !important; }
  /* the branch's resting state is invisible (stroke-dashoffset: 70 draws nothing);
     killing its draw animation alone would erase the centerpiece — show it fully drawn. */
  .branch--new { stroke-dashoffset: 0 !important; }
}

/* ---- Atlas cluster lineage (clickable grown nodes open this) ------------- */
.leaf--clickable { cursor: pointer; }
.leaf--clickable:hover { stroke: var(--forest-deep); stroke-width: 1.4; }

.lineage-slot { margin-top: 0.85rem; }
.lineage-empty { margin: 0.3rem 0 0; text-align: center; }

.lineage {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-3);
  padding: 0.7rem 0.8rem;
  font-size: 0.82rem;
}
.lineage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.lineage-title { font-family: var(--font-display); font-weight: 600; color: var(--forest-deep); }
.lineage-src { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

.lin-node { border-radius: 9px; padding: 0.5rem 0.6rem; background: var(--paper-2); border: 1px solid var(--line); }
.lin-kind { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.lin-id { font-family: var(--font-mono); font-size: 0.78rem; color: var(--forest); font-weight: 600; }
.lin-claim { color: var(--ink); margin-top: 0.15rem; }
.lin-prop { color: var(--ink); margin-top: 0.2rem; }
.lin-why { color: var(--muted); font-style: italic; margin-top: 0.1rem; font-size: 0.76rem; }

.lin-arrow { text-align: center; color: var(--muted); font-size: 0.74rem; margin: 0.3rem 0; }
.lin-arrow code { font-family: var(--font-mono); color: var(--forest-bright); }

.lin-seed { border-left: 3px solid var(--red-line); }
.lin-cluster { border-left: 3px solid var(--gold-bright); }
.lin-meta {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--forest-bright);
  margin-top: 0.18rem; letter-spacing: 0.2px;
}
.lin-meta code { color: var(--gold); font-weight: 600; }
.lin-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.lin-hit { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.78rem; }
.lin-rank { font-family: var(--font-mono); color: var(--muted); }
.lin-hit-id { font-family: var(--font-mono); color: var(--forest); }
.lin-sim {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--gold);
  background: var(--gold-soft); border-radius: 5px; padding: 0 0.3rem;
  min-width: 2.1rem; text-align: center;
}
.lin-sim--na { color: var(--muted); background: transparent; font-weight: 400; }
.lin-hit-why { color: var(--muted); font-style: italic; }

.lin-minted { border-left: 3px solid var(--green); }
.lin-minted--overfit { border-left-color: var(--amber-line); }
.lin-verdict { margin-top: 0.35rem; font-size: 0.78rem; color: var(--ink-soft); }
.lin-pass { color: var(--green); font-weight: 700; }
.lin-fail { color: var(--amber); font-weight: 700; }

/* ---- about page ---------------------------------------------------------- */
.topbar-link { color: var(--muted); font-size: 0.86rem; font-weight: 600; text-decoration: none; padding: 0.4rem 0.3rem; }
.topbar-link:hover { color: var(--forest-deep); }

.about { max-width: 720px; margin: 0 auto; padding: 2.2rem 1.6rem 4rem; }

.about-hero { text-align: center; padding: 0.4rem 0 1.2rem; }
.hero-mark {
  width: 188px; height: auto; display: block; margin: 0 auto 1.1rem;
  border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm);
}
.about-motto { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--forest-deep); margin: 0 0 0.5rem; line-height: 1.12; }
.about-sub { font-size: 1.02rem; color: var(--ink); line-height: 1.55; margin: 0 auto; max-width: 560px; }

.about-flow { display: flex; align-items: stretch; justify-content: center; gap: 0.45rem; flex-wrap: wrap; margin: 1.6rem 0 0.5rem; }
.flow-step {
  flex: 1 1 130px; max-width: 158px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.7rem 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.28rem; text-align: center;
}
.flow-n { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--forest); color: #f3f8f1; font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; }
.flow-step strong { color: var(--forest-deep); font-size: 0.95rem; }
.flow-step span { color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
.flow-arrow { align-self: center; color: var(--gold); font-size: 1.15rem; }
.about-aside { text-align: center; color: var(--muted); font-size: 0.86rem; font-style: italic; margin: 0.5rem 0 1.6rem; }

.about-block { padding: 1.05rem 0; }
.about-block h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--forest-deep); margin: 0 0 0.4rem; }
.about-block p { font-size: 0.96rem; line-height: 1.6; color: var(--ink); margin: 0; }
.about-moat { background: var(--paper-3); border-radius: 14px; padding: 1.2rem 1.35rem; border-left: 3px solid var(--forest-bright); }
.about-cta { display: inline-block; margin-top: 1.5rem; text-decoration: none; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 920px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}
@media (max-width: 600px) {
  .about-flow { flex-direction: column; align-items: stretch; }
  .flow-step { max-width: none; flex-direction: row; gap: 0.55rem; text-align: left; }
  .flow-arrow { transform: rotate(90deg); }
}