/* Steelman — calm & thoughtful.
   The anti-cynicism thesis made visual: soft, unhurried, generous whitespace,
   serif for the things you read slowly, nothing that feels like a gotcha. */

:root {
  --paper: #faf6ef;
  --ink: #2e2a24;
  --ink-soft: #6b6157;
  --line: #e6ddcf;          /* decorative separators */
  --line-strong: #94886f;   /* control borders — ≥3:1 vs card/paper (WCAG 1.4.11) */
  --card: #fffdf9;
  --accent: #5b6f5a;       /* muted sage — calm, not alarming */
  --accent-soft: #e7ede6;
  --valid: #4f7a52;        /* "it holds up" green, gentle */
  --suspect: #9a6a4f;      /* warm clay for a tentative suspicion — never red */
  --shadow: 0 1px 2px rgba(46, 42, 36, .04), 0 6px 24px rgba(46, 42, 36, .06);
  --radius: 16px;
  --maxw: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a17;
    --ink: #ece5da;
    --ink-soft: #a89e90;
    --line: #322e28;
    --line-strong: #736a5c;   /* control borders — ≥3:1 in dark */
    --card: #24211d;
    --accent: #8aa089;
    --accent-soft: #2b322a;
    --valid: #8fc093;
    --suspect: #c79a7c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* center via #app margin-block:auto instead, so a tall card can't
                                    overflow above the viewport top and become unscrollable */
  overflow-y: auto;
  gap: 1.5rem;
  padding: 2rem 1.25rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, .verdict-title {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#app { width: 100%; max-width: var(--maxw); margin-block: auto; }   /* centers when there's room, never clips a tall card */

/* one card at a time, gently fading in */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
  animation: rise .35s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .btn, .tri, .family-opt { transition: none; }
  .btn:active, .tri:hover, .family-opt:active { transform: none; }
}

.kicker {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
}

/* Every screen's primary line is an h1 (one heading per screen, proper hierarchy). The Start hero
   reads largest; interior question heads and verdict lines share one slightly smaller serif size. */
.card h1 { font-size: 1.55rem; margin: 0 0 1rem; }
.card h1.hero { font-size: 1.8rem; margin: 0 0 .5rem; }
.card h1:focus { outline: none; }   /* programmatic focus target; the visible cue is the heading itself */
.lede { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* Brand gloss under the "Steelman" kicker. Explains the name once, quietly. */
.brand-note { color: var(--ink-soft); font-size: .85rem; margin: -.25rem 0 1rem; }

/* The "for example, someone says" block. Deliberately NOT inside the textarea: a placeholder reads
   as "type your version here," which made every test user overwrite it with their own grievance.
   As static, quoted, labeled content it reads as an example to imitate, not a field to fill. */
.example {
  margin: 0 0 .9rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--line-strong);
  background: var(--accent-soft);
  border-radius: 0 10px 10px 0;
}
.example-label { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: .15rem; }
.example-quote { margin: 0; font-family: Georgia, "Iowan Old Style", serif; font-style: italic; }

textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  padding: .9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.55;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* buttons */
.btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: .65rem 1.2rem;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Quiet, borderless toggle for "show more checks" — present but never competing with the verdict CTA. */
.btn-quiet {
  border: none;
  background: none;
  color: var(--accent);
  padding: .5rem .25rem;
  font-size: .92rem;
}
.btn-quiet:hover { background: none; text-decoration: underline; }
.show-more {
  display: block;
  width: 100%;
  min-height: 44px;          /* real tap target, not body-text-sized */
  margin: .35rem 0 .25rem;
  text-align: center;
  text-decoration: underline;   /* reads as an action, not a sentence */
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  padding: .75rem 1.6rem;
}
.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #15140f; }
}

.answers {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.answers .btn { flex: 1 1 auto; min-width: 6rem; }

.row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

/* argument recall, dimmed for reference */
.recall {
  font-size: .9rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--line);
  padding: .25rem 0 .25rem .85rem;
  margin: 0 0 1.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;     /* a long URL / unbroken token wraps instead of overflowing sideways */
}
/* A long paste is clamped to ~3 lines with a soft fade so it never pushes the controls off-screen.
   Set as expandable by ui.js (recallBlock) only when it actually overflows. */
.recall.clamped {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recall.clamped::after {                 /* soft fade so the clamp edge isn't a hard cut */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3rem;
  height: 1.4em;
  background: linear-gradient(90deg, transparent, var(--card));
}
.recall.clamped.open {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}
.recall.clamped.open::after { content: none; }
.recall-toggle { margin: -1rem 0 1.25rem; }   /* sits just under the clamped quote */

/* verdicts */
.verdict-title { font-size: 1.55rem; margin: .25rem 0 .75rem; }
h1.verdict-title { font-size: 1.55rem; }   /* the payoff line is the screen's h1 */
.verdict-valid .verdict-title,
.verdict-cynic .verdict-title { color: var(--valid); }
.verdict-accuse .verdict-title { color: var(--suspect); }

.teaching {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
}
/* the verdict's premises: the user's own ticks echoed back as the case it was built from */
.premises { margin: 1rem 0 .25rem; }
.premises-lead { color: var(--ink-soft); font-size: .92rem; margin: 0 0 .35rem; }
.premise { margin: .25rem 0; padding-left: .85rem; border-left: 3px solid var(--accent-soft); }
.premise-q { font-style: italic; }
.premise-a { color: var(--ink-soft); font-size: .92rem; }
.teaching .name { font-weight: 600; }
.teaching .aside { color: var(--ink-soft); font-size: .92rem; }
.check { font-style: italic; color: var(--ink); margin: 1rem 0 .25rem; }

.muted { color: var(--ink-soft); font-size: .92rem; }
.error { color: var(--suspect); }

.site-foot[hidden] { display: none; }   /* hidden attribute beats the flex below */
.site-foot {
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.site-foot a { color: var(--accent); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .dot { opacity: .5; }

/* ---------- family picker ---------- */
.family-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1.25rem 0;
}
.family-opt {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.family-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.family-opt:active { transform: translateY(1px); }
.family-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.family-opt-title { font-weight: 600; }
.family-opt-sub { font-size: .9rem; color: var(--ink-soft); }
.family-opt.suggested { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.family-opt.suggested .family-opt-title::after {
  content: " · suggested";
  font-weight: 400;
  font-size: .8rem;
  color: var(--accent);
}
.family-opt-fine { border-style: dashed; }
.family-opt-fine .family-opt-title { color: var(--valid); }

/* ---------- virtue checklist ---------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0;                 /* border sits at the true row midpoint, even rhythm */
  margin: 1.25rem 0;
}
.check-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.check-row:last-child { border-bottom: none; }
.check-text { flex: 1; line-height: 1.45; }
.tri-group { display: flex; gap: .4rem; flex: none; }
.tri {
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;   /* icon over an always-visible label (no hover-only legend) */
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-width: 4.4rem;       /* roomier: holds two-word side-anchored labels ("No, it doesn’t") */
  min-height: 44px;        /* HIG/WCAG 2.5.8 touch target */
  padding: .5rem .45rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.tri-icon { font-size: 1.1rem; line-height: 1; }
/* Two-word labels are allowed to wrap to two short balanced lines rather than overflow, so the copy
   can change length without re-tuning a fixed width. */
.tri-label { font-size: .7rem; line-height: 1.15; text-align: center; text-wrap: balance; }
.tri:hover { transform: translateY(-1px); }
.tri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tri-has.on { background: var(--valid); border-color: var(--valid); color: #fff; }
.tri-lacks.on { background: var(--suspect); border-color: var(--suspect); color: #fff; }
.tri-na.on { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--card); }
@media (prefers-color-scheme: dark) {
  .tri-has.on, .tri-lacks.on, .tri-na.on { color: #15140f; }
}
/* On narrow phones the three labeled pills can crowd the question; let the row wrap gracefully. */
@media (max-width: 30rem) {
  .card { padding: 1.5rem 1.15rem; }   /* reclaim horizontal room on ~360px screens */
  .check-row { flex-wrap: wrap; }
  .tri-group { width: 100%; justify-content: flex-end; }
}

/* ---------- mascot (Steely) — persistent host above the card ---------- */
/* A single <img> whose src is swapped per stage by src/mascot.js. Hand-made raster art lives in
   /mascot (see mascot/README.md). The host reserves space and centers; the image is hidden until a
   real file loads, so a missing mascot collapses to nothing rather than a broken icon. */
#mascot-canvas {
  width: 96px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  min-height: 0;             /* parked: no art, so collapse the slot (no phantom gap above the card) */
}
/* When real art ships, mascot.js drops [hidden] on the <img>; that re-expands the reserved slot and
   restores the nestle-onto-the-card overlap automatically. No code change needed when art lands. */
#mascot-canvas:has(#mascot-img:not([hidden])) {
  min-height: 84px;
  margin-bottom: -0.5rem;
}
#mascot-img {
  display: block;
  width: 84px;
  height: 84px;              /* square art (see spec); fixed box keeps swaps from shifting layout */
  object-fit: contain;
  animation: mascot-in .5s ease both;
}
#mascot-img[hidden] { display: none; }
@keyframes mascot-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* gentle idle float — calm, and suppressed under reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  #mascot-img { animation: mascot-in .5s ease both, mascot-float 2.8s ease-in-out .5s infinite; }
}
@keyframes mascot-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }