:root {
  --ink: #1b1b1b;
  --paper: #f5f5f0;
  --paper-alt: #fbfaf7;
  --accent: #d97706;
  --accent-soft: #fde9cf;
  --border: #e2e0d8;
  --done: #2f7d4f;
  --done-soft: #e3efe6;
  --muted: #6b6a63;
  --shadow: 0 8px 30px rgba(27, 27, 27, 0.08);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html {
  /* Defensive backstop, not the fix itself (see #diagram/section.panel's
     min-width: 0 and .sequence-svg's min-width below for the actual
     cause/fix) - keeps any future stray overflow from ever growing the
     page instead of scrolling inside whichever element caused it. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: linear-gradient(180deg, var(--paper) 0%, #efeee6 100%);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

code {
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

header.hero {
  padding: 3rem 2rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

header.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

header.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

header.hero p.lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  display: grid;
  /* Explicit minmax(0, 1fr) instead of relying on the implicit default
     column: an implicit grid column sizes to its content's own preferred
     width, so any one long, non-wrapping descendant anywhere in the page
     (the case-tabs row below is exactly that) could otherwise force this
     single column - and everything in it - wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

section.panel {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.75rem;
  /* Grid items get an automatic minimum size derived from their content
     unless their own overflow is non-visible - a rule that only reaches
     *this* item, not further-nested scrollable descendants like
     #case-tabs/#capability-matrix. Forcing it to 0 here is what actually
     lets `main`'s column above shrink to the real viewport width instead
     of ballooning to fit whatever's inside. */
  min-width: 0;
}

section.panel h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

/* --- case tabs + meta --- */

#case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

#case-tabs button {
  font-family: inherit;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  /* min-width: 0 so a button can actually shrink inside the flex row
     instead of being held to its own automatic minimum size. This alone
     does NOT make one case title (the Telegram/design-check case, ~430px
     of unbroken text) wrap onto a second line at a phone width - verified
     empirically: `<button>` text does not reflow the way a plain <p> or
     <div>'s would, even with white-space: normal + max-width set, because
     of how form controls compute their own intrinsic content size. Below
     760px this row switches to a horizontally-scrollable single line
     instead (see the media query at the bottom of this file) rather than
     fighting that quirk. */
  min-width: 0;
}

#case-tabs button:hover { border-color: var(--accent); }

#case-tabs button.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

#case-title { font-size: 1.4rem; margin: 0; }
#case-refs {
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--accent-soft);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
}
#case-date { font-size: 0.8rem; color: var(--muted); }
#case-tagline { color: var(--muted); margin: 0.15rem 0 1.25rem; font-style: italic; }

/* --- playback controls --- */

.controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.controls button {
  font-family: inherit;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.controls button:hover { border-color: var(--accent); }

#play-btn { background: var(--ink); color: #fff; border-color: var(--ink); }

.progress-track {
  flex: 1;
  min-width: 120px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* --- diagram + step list layout --- */

.diagram-wrap {
  display: grid;
  /* Single column by default - #step-list stacks below #diagram. `main`
     already caps content at max-width: 1100px regardless of monitor size
     (see main{} above), so splitting this into a side-by-side 2-column
     layout was halving the diagram's already-tight ~1036px budget down to
     ~685px on completely ordinary laptop/desktop windows too, not just on
     mobile - a big part of why the diagram needed horizontal scroll even
     "on desktop". The 2-column variant now only kicks in on genuinely wide
     viewports, below, where there's enough real room for both diagram and
     step list side by side without starving the diagram first. */
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1500px) {
  .diagram-wrap {
    grid-template-columns: minmax(0, 2.1fr) minmax(220px, 1fr);
  }
}

#diagram {
  /* min-width: 0 overrides the grid item's default `min-width: auto`,
     which otherwise takes its automatic minimum size from its content's
     intrinsic width (the SVG's real rendered width) and can force the
     whole `.diagram-wrap` grid track - and with it the page itself - wider
     than the viewport instead of the overflow staying contained here.
     That was the actual cause of the page-level horizontal scroll on
     mobile/narrow desktop, not just a "make the SVG smaller" issue. */
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.sequence-svg {
  /* width: 100% + height: auto against a fixed viewBox (app.js's
     DIAGRAM_DESIGN_WIDTH) is what makes this genuinely responsive: the
     browser uniformly scales the whole drawing to fit whatever real width
     #diagram's box has, all proportions intact. min-width matches that
     same design width - it's the floor below which we stop shrinking
     further (avoiding illegibly tiny lane labels) and let #diagram's own
     overflow-x: auto above take over as a real horizontal scroll instead,
     contained to the diagram itself, not the page. */
  width: 100%;
  height: auto;
  display: block;
  min-width: 1080px;
}

.lifeline {
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 3 5;
}

.lane-box { fill: #fff; stroke: var(--border); }
.lane-header:hover .lane-box { stroke: var(--accent); fill: var(--accent-soft); }
.lane-label { font-size: 12px; font-weight: 700; fill: var(--ink); }
.lane-sub { font-size: 9px; fill: var(--muted); }

.step-arrow { stroke: var(--border); stroke-width: 2; fill: none; color: var(--border); }
.label-backdrop { fill: var(--paper-alt); opacity: 0.92; }
.step-label { font-size: 11px; fill: var(--muted); }
.step-badge { fill: #fff; stroke: var(--border); stroke-width: 2; }
.step-badge-num { font-size: 10px; font-weight: 700; fill: var(--muted); }
.step-dot { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 4px var(--accent)); }

.step.done .step-arrow { stroke: var(--done); color: var(--done); }
.step.done .step-label { fill: var(--ink); }
.step.done .step-badge { fill: var(--done-soft); stroke: var(--done); }
.step.done .step-badge-num { fill: var(--done); }

.step.active .step-arrow { stroke: var(--accent); stroke-width: 3; color: var(--accent); }
.step.active .step-label { fill: var(--ink); font-weight: 700; }
.step.active .step-badge { fill: var(--accent); stroke: var(--accent); }
.step.active .step-badge-num { fill: #fff; }

.step:hover .step-arrow { stroke: var(--accent); color: var(--accent); }

#step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.step-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
}

.step-item:last-child { border-bottom: none; }
.step-item:hover { background: var(--accent-soft); }

.step-item-num {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.step-item.done .step-item-num { background: var(--done-soft); color: var(--done); }
.step-item.active { background: var(--accent-soft); }
.step-item.active .step-item-num { background: var(--accent); color: #fff; }
.step-item.active .step-item-label { font-weight: 700; }

/* --- wiki side panel --- */

#wiki-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.12);
  transition: right 0.28s cubic-bezier(.4,0,.2,1);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

#wiki-panel.open { right: 0; }

.wiki-panel-head {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

#wiki-breadcrumb {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}

#wiki-title { margin: 0.2rem 0 0.9rem; font-size: 1.25rem; }

#wiki-close {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  border: none;
  background: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--muted);
}

#wiki-body {
  padding: 1rem 1.5rem 2rem;
  overflow-y: auto;
  font-size: 0.95rem;
}

#wiki-body p { margin: 0 0 1rem; }
#wiki-body .step-note { color: var(--ink); background: var(--accent-soft); padding: 0.75rem 1rem; border-radius: 10px; }
#wiki-body .wiki-subhead {
  margin: 1.25rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- glossary chips --- */

#entity-index { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  font-family: inherit;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip-alt { font-family: "Space Mono", monospace; font-size: 0.76rem; }

/* --- capability matrix --- */

#capability-matrix {
  /* Four columns of real prose (stage/script, access, cost, note) can't
     meaningfully reflow at a phone width - same "scroll the one thing that
     needs it, not the page" fallback #diagram uses. */
  overflow-x: auto;
}

#capability-matrix table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
#capability-matrix th, #capability-matrix td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
#capability-matrix th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
#capability-matrix td:first-child { font-family: "Space Mono", monospace; font-size: 0.8rem; white-space: nowrap; }
.matrix-note { color: var(--muted); }

/* --- stop-and-ask --- */

#stop-and-ask {
  margin: 0;
  padding-left: 1.2rem;
}
#stop-and-ask li { margin-bottom: 0.5rem; }

.panel-note {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
  margin-top: 0.5rem;
}

/* --- select-to-mail button --- */

#ask-btn {
  position: absolute;
  z-index: 100;
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#ask-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#ask-btn:hover { background: var(--accent); }

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  #wiki-panel { width: 100%; right: -100%; }

  header.hero { padding: 2rem 1.25rem 1.5rem; }
  header.hero h1 { font-size: 1.9rem; }
  header.hero p.lead { max-width: none; }

  main { padding: 0 1.25rem 3rem; gap: 1.5rem; }
  section.panel { padding: 1.25rem; }

  footer { padding: 1rem 1.25rem 2rem; }

  /* The one long case title (Telegram/design-check) doesn't wrap inside a
     <button> (see the comment on #case-tabs button above) - below this
     width, switch the whole row from "wrap onto more rows" to "scroll
     sideways as one row" instead, same fallback pattern #diagram and
     #capability-matrix already use for their own too-wide-to-reflow
     content. This is normal, expected mobile tab-bar behavior (swipe to
     see more tabs), not a workaround being hidden from view. */
  #case-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
  }
  #case-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  header.hero { padding: 1.5rem 1rem 1.25rem; }
  header.hero h1 { font-size: 1.55rem; }
  header.hero p.lead { font-size: 0.95rem; }

  main { padding: 0 1rem 2.5rem; }
  section.panel { padding: 1rem; }
  section.panel h2 { font-size: 1.15rem; }

  /* The controls row (play/prev/next/reset + progress bar) already wraps
     via flex-wrap, but at this width the default button padding pushes it
     to 2-3 rows; tighten it so it reads as one compact toolbar instead. */
  .controls button { padding: 0.42rem 0.7rem; font-size: 0.82rem; }
  .progress-track { min-width: 100%; order: 1; }

  #case-tabs button { padding: 0.45rem 0.8rem; font-size: 0.82rem; }

  #step-list { max-height: 420px; }
}