.mc-prose p {
  max-width: 640px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
}

.mc-prose h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* A chapter's payoff. */
.mc-prose h3 {
  font-size: 1.05rem;
  margin: 2rem 0 0.75rem;
}

/* Each chapter is headed by its plain question. */
.mc-chapter-title {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.instructions-phone {
  display: none;
}

/* History on the left; the coming month and its step line on the right;
   the results histogram underneath, across both, and the button bar last. */
.mc-widget {
  --tile: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "history future"
    "results results"
    "bar bar";
  gap: 2rem 3rem;
  margin: 2rem 0;
}

/* Parts not shown yet keep their place, so nothing on screen moves when
   they fade in (see spec.md's "Showing only what's needed"). */
[data-reveal] {
  transition: opacity 0.4s, visibility 0.4s;
}

.mc-widget:not(.shows-future) [data-reveal="future"],
.mc-widget:not(.shows-results) [data-reveal="results"] {
  visibility: hidden;
  opacity: 0;
}

/* The when chapter's coming weeks grow a week at a time: on wide screens
   they get room for about 8 weeks (plus the weekday header) up front, so
   nothing below or beside them moves as they grow. */
@media (min-width: 601px) {
  .mc-weeks-space {
    min-height: calc(9 * var(--tile) + 8 * 3px);
  }
}

.mc-history { grid-area: history; }
.mc-future { grid-area: future; }
.mc-results { grid-area: results; }

.mc-panel-title {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.mc-panel-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.mc-panel-note strong {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* A week per row, Monday to Sunday, after a column of week labels. */
.mc-grid {
  display: grid;
  grid-template-columns: auto repeat(7, var(--tile));
  grid-auto-rows: var(--tile);
  gap: 3px;
  align-items: center;
  width: fit-content;
}

/* The coming month: no column of week labels. */
.mc-grid.is-undated {
  grid-template-columns: repeat(7, var(--tile));
}

.mc-weekday,
.mc-week-label {
  font-size: 0.7rem;
  color: var(--muted);
}

.mc-weekday {
  text-align: center;
  align-self: end;
}

.mc-week-label {
  padding-right: 0.4rem;
  text-align: right;
  white-space: nowrap;
}

.mc-tile {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: calc(var(--tile) * 0.45);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px dashed var(--border);
  color: var(--text);
}

/* The busier the day, the stronger the tile; a zero-day stays quiet, so the
   always-empty weekends read as two pale columns. */
.mc-tile[data-count] { border-style: solid; }
.mc-tile[data-count="0"] { background: var(--bg-alt); color: #b0b7c3; }
.mc-tile[data-count="1"] { background: #d4ecfb; }
.mc-tile[data-count="2"] { background: #a6d6f5; }
.mc-tile[data-count="3"] { background: #6cbbeb; color: #fff; }
.mc-tile[data-count="4"] { background: var(--accent); color: #fff; }

/* The coming month's weekends: known to be empty, so not part of the game.
   Shaded and blank, unlike a weekday whose pick happened to be 0. */
.mc-future .mc-tile.is-weekend {
  background: #eceff3;
  border: 1px solid #eceff3;
}

/* A count travelling across the screen (see index.ts's fly()). */
.mc-flying {
  position: fixed;
  z-index: 250;
  width: auto;
  min-width: var(--tile, 28px);
  height: var(--tile, 28px);
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  will-change: transform;
}

.mc-flying-day {
  font-size: calc(var(--tile, 28px) * 0.45);
}

.mc-flying-total {
  height: auto;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

/* The finished month's counts have gathered into its total. */
[data-running-total] {
  display: inline-block;
}

[data-running-total].is-pulsing {
  animation: mc-pulse 0.45s ease-out;
}

@keyframes mc-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.8); }
  100% { transform: scale(1); }
}

/* The day the 20th item landed: where the run finished. */
.mc-future .mc-tile.is-finish {
  outline: 3px solid var(--accent-dark);
  outline-offset: 1px;
}

.mc-history .mc-tile.is-picked {
  outline: 3px solid var(--accent-dark);
  outline-offset: 1px;
}

.mc-future .mc-tile.just-filled {
  animation: mc-pop 0.3s ease-out;
}

@keyframes mc-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* One spot under the future grid, sized for the longest step line; only
   the newest button's line shows (see spec.md's "Step lines"). */
.mc-step-lines {
  display: grid;
  max-width: 420px;
  margin-top: 1.5rem;
}

.mc-step-line {
  grid-area: 1 / 1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #374151;
  visibility: hidden;
}

.mc-step-line.is-current {
  visibility: visible;
}

/* The button bar, at the simulation's end (see spec.md's "The button
   bar"). position: sticky, scoped to its .mc-widget: it stays pinned to the
   bottom of the screen while the chapter's simulation is in view, then
   settles back where the widget ends, before the payoff prose. Same as the
   Team Northbound replay controls. On phones it sits above the
   Explanation/Simulation switch. */
.mc-bar {
  grid-area: bar;
  position: sticky;
  bottom: var(--phone-view-bar-height, 0px);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

/* Five slots, reserved from the start: a button not revealed yet keeps its
   place, and fades in there (see spec.md's "Buttons accumulate"). */
.mc-bar .mc-btn {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  transition: background 0.15s, opacity 0.4s, visibility 0.4s;
}

.mc-bar .mc-btn:not(.is-shown) {
  visibility: hidden;
  opacity: 0;
}

/* Dimmed while busy without touching opacity, so only the reveal fades. */
.mc-bar .mc-btn:disabled {
  opacity: 1;
  filter: opacity(0.5);
}

/* The four trial buttons: one segmented group, rounded at its ends. */
.mc-btn-group {
  display: flex;
}

.mc-btn-group .mc-btn {
  border-radius: 0;
}

.mc-btn-group .mc-btn + .mc-btn {
  margin-left: -1.5px;
}

.mc-btn-group .mc-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.mc-btn-group .mc-btn.is-shown:not(:has(+ .mc-btn.is-shown)) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Slot 2's two labels share one spot, sized for the longer, so nothing
   moves when it swaps. */
[data-play-out] .mc-btn-full {
  display: inline-grid;
  justify-items: center;
}

[data-play-out] [data-label-for] {
  grid-area: 1 / 1;
}

[data-play-out][data-label="finish"] [data-label-for="fresh"],
[data-play-out][data-label="fresh"] [data-label-for="finish"] {
  visibility: hidden;
}

.mc-btn-short {
  display: none;
}

.mc-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.mc-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}

.mc-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mc-btn-batch {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.mc-btn-batch:hover:not(:disabled) {
  background: var(--bg-alt);
}

.chart {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.chart .axis,
.chart .tick {
  stroke: var(--border);
  stroke-width: 1;
}

.chart .tick-label {
  fill: var(--muted);
  font-size: 8px;
  text-anchor: middle;
}

.chart .tick-label-y {
  text-anchor: end;
}

.chart .axis-label {
  fill: var(--muted);
  font-size: 9px;
  text-anchor: middle;
}

.chart .histogram-bar {
  fill: var(--accent);
  fill-opacity: 0.75;
}

/* Pointing at a bar reads the promise it stands for (see spec.md's "The
   forecast"): the bar itself stands out, its value is tagged on the
   x-axis, and bars outside the promise fade back. */
.chart .histogram-bar.is-focused {
  fill: var(--accent-dark);
  fill-opacity: 1;
}

.chart .histogram-bar.dimmed {
  fill-opacity: 0.25;
}

.chart .histogram-focus-label {
  fill: var(--accent-dark);
  font-size: 8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.chart .histogram-focus-tag {
  fill: var(--accent-dark);
}

.chart .histogram-focus-tag-text {
  fill: #fff;
  font-size: 8px;
  font-weight: 700;
}

/* The promise: a dotted boundary where it's pinned down, and a line across
   every value it covers, labeled with their share. */
.chart .reference-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.chart .forecast-line {
  stroke: var(--accent-dark);
  stroke-width: 1.5;
}

/* A white halo keeps the label legible over any gridline it sits on. */
.chart .forecast-line-label {
  fill: var(--accent-dark);
  font-size: 8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* ── The forecast fan (see spec.md's "Chapter 3") ──
   One chart across the whole width, its step line under it, then its bar. */
.mc-fan-widget {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chart"
    "bar";
}

.mc-fan-panel {
  grid-area: chart;
  min-width: 0;
}

.mc-fan-chart {
  max-width: none;
}

/* The four draw buttons, then the toggle standing apart. */
.mc-fan-widget .mc-bar {
  column-gap: 2rem;
}

.mc-btn-toggle[aria-pressed="true"] {
  background: var(--accent-dark);
}

.mc-fan-chart .fan-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.mc-fan-chart .fan-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-opacity: 0.6;
}

.mc-fan-chart .fan-tick-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mc-fan-chart .fan-axis-label,
.mc-fan-chart .fan-scale-label {
  fill: var(--muted);
  font-size: 12px;
}

.mc-fan-chart .fan-now {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.mc-fan-chart .fan-now-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* The past: the CFD's Done line, in its blue with its light fill. */
.mc-fan-chart .fan-done {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
}

.mc-fan-chart .fan-done-fill {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: none;
}

/* The past day a future's weekday copied, lit up. */
.mc-fan-chart .fan-picked {
  fill: var(--accent);
  fill-opacity: 0.25;
}

.mc-fan-chart .fan-picked-step {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Every future stays, faint, so together they thicken into a cloud; the
   latest drawn by hand stays a little stronger until the next one. */
.mc-fan-chart .fan-cloud {
  transition: opacity 0.5s;
}

.mc-fan-chart .fan-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.05;
}

.mc-fan-chart .fan-path.is-recent {
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}

.mc-fan-chart .fan-path-live {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2;
}

/* The toggle swaps the cloud for the three lines; 85% reads strongest. */
.mc-fan-chart .fan-lines {
  opacity: 0;
  transition: opacity 0.5s;
}

.mc-fan-chart.shows-lines .fan-lines {
  opacity: 1;
}

.mc-fan-chart.shows-lines .fan-cloud {
  opacity: 0;
}

.mc-fan-chart .fan-line {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
}

.mc-fan-chart .fan-line-50 { stroke: #7cc7f2; }
.mc-fan-chart .fan-line-85 { stroke: var(--accent-dark); stroke-width: 3; }
.mc-fan-chart .fan-line-95 { stroke: #64748b; }

.mc-fan-chart .fan-line-label {
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.mc-fan-chart .fan-line-label-50 { fill: #3b9fd8; }
.mc-fan-chart .fan-line-label-85 { fill: var(--accent-dark); }
.mc-fan-chart .fan-line-label-95 { fill: #64748b; }

/* Pointing at the fan: neutral dotted guides, dark tags as on the scatter
   plot, and the "from now" scale beside the "items done" axis. */
.mc-fan-chart .fan-pointing {
  pointer-events: none;
}

.mc-fan-chart .fan-guide {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-opacity: 0.7;
}

.mc-fan-chart .fan-from-now-zero {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-opacity: 0.35;
}

.mc-fan-chart .fan-tag-bg {
  fill: var(--accent-dark);
}

.mc-fan-chart .fan-tag-text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The likelihood strip, the same as on Team Northbound's forecast: a traffic
   light from least likely to safest, each band clearly lighter than the one
   before it, so the order still reads without telling the hues apart. The
   "from now" numbers it sits behind turn dark to stay readable on it. */
.mc-fan-chart .fan-strip-under-50 { fill: #d4554e; }
.mc-fan-chart .fan-strip-50-85 { fill: #e8925a; }
.mc-fan-chart .fan-strip-85-95 { fill: #efcc62; }
.mc-fan-chart .fan-strip-95 { fill: #c8f1e8; }

.mc-fan-chart .fan-strip-on-scale ~ .fan-from-now .fan-tick-label {
  fill: var(--text);
}

/* Scaled down on a phone: the compact shape has fewer labels, a little
   larger so they stay readable. */
.mc-fan-chart[data-layout="compact"] .fan-tag-text { font-size: 12px; }
.mc-fan-chart[data-layout="compact"] .fan-tick-label { font-size: 12px; }
.mc-fan-chart[data-layout="compact"] .fan-axis-label,
.mc-fan-chart[data-layout="compact"] .fan-scale-label,
.mc-fan-chart[data-layout="compact"] .fan-now-label,
.mc-fan-chart[data-layout="compact"] .fan-line-label { font-size: 13px; }

/* ── Phones: everything stacks; the grids keep their week shape. ── */
@media (max-width: 600px) {
  .instructions-phone {
    display: block;
  }

  /* Stacked: nothing sits beside a part not shown yet, so it takes no room. */
  .mc-widget:not(.shows-future) [data-reveal="future"],
  .mc-widget:not(.shows-results) [data-reveal="results"] {
    display: none;
  }

  /* In the Simulation view the question only labels its widget. Not keyed
     on "simulation" itself, so it already holds before index.ts has set the
     view (the page opens on Simulation, see ../styles.css's "Phone views"). */
  body:not([data-phone-view="explanation"]) .mc-chapter-title {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
    padding-top: 1rem;
  }

  body:not([data-phone-view="explanation"]) .mc-how-many .mc-chapter-title {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* A pick by hand stays in view (see spec.md's "Phones"): tiles size off
     the screen's height so everything from the past grid's title down to
     the coming four weeks' last row, plus the button bar, fits on one
     screen. The two grids have 19 rows of tiles (13 + 4 weeks and a
     weekday header each); 17.25rem covers the titles, notes, the gap
     between the grids, the grids' own gaps and the button bar. svh, not
     dvh, so the tiles don't resize as the browser's toolbar slides in and
     out while scrolling. Never bigger than on a wide screen; never so small
     the numbers stop being readable, where a short phone scrolls instead. */
  .mc-widget {
    --tile: clamp(18px, calc((100svh - var(--phone-view-bar-height, 0px) - 17rem) / 19), 28px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "history"
      "future"
      "results"
      "bar";
    margin: 0.5rem 0 1rem;
  }

  /* The smallest tiles keep a legible number. */
  .mc-tile,
  .mc-flying-day {
    font-size: max(9px, calc(var(--tile, 28px) * 0.45));
  }

  /* Short labels; the full wording stays each button's name for screen
     readers (see spec.md's "Labels"). */
  .mc-btn-short {
    display: inline;
  }

  .mc-btn-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mc-bar .mc-btn {
    min-width: 3rem;
    padding: 0.6rem 0.9rem;
  }

  /* The fan: the whole chart scaled to the screen's width, its bar under it. */
  .mc-fan-widget {
    grid-template-areas:
      "chart"
      "bar";
  }

  /* The toggle keeps its words, beside the four short draw buttons. */
  .mc-fan-widget .mc-bar {
    column-gap: 0.75rem;
    flex-wrap: nowrap;
  }

  .mc-fan-widget .mc-bar .mc-btn {
    min-width: 2.6rem;
    padding: 0.6rem 0.6rem;
  }

  .mc-fan-widget .mc-bar .mc-btn-toggle {
    min-width: 0;
    max-width: 8.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }
}

/* ── Presentation mode (see spec.md's "Presentation mode", ../styles.css) ──
   One chapter per slide (presentation.ts shows only the current one),
   under its question as a label. History, the future and the histogram
   side by side, with the button bar centred under all three at the bottom
   of the slide. Tiles size off the screen's height so the 13-week grid
   (plus its header, the panel's title, the chapter's question and the
   bar) fits without scrolling. */
@media (min-width: 601px) {
  body[data-presenting] .mc-chapter {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body[data-presenting] .mc-chapter-title {
    flex-shrink: 0;
    margin: 0 0 1rem;
    padding: 0;
    border-top: none;
    font-size: 1.5rem;
  }

  body[data-presenting] .mc-widget {
    --tile: clamp(18px, calc((var(--present-height) - var(--present-title-height) - 19.5rem) / 14), 44px);
    flex: 1;
    min-height: 0;
    margin: 0;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "history future results"
      "bar bar bar";
    align-items: start;
    gap: 1rem 3rem;
  }

  /* Nothing scrolls on a slide, so there is nothing to stick to. */
  body[data-presenting] .mc-bar {
    position: static;
    justify-self: center;
    padding: 0;
    background: none;
    border-top: none;
  }

  body[data-presenting] .chart {
    max-width: calc((var(--present-height) - var(--present-title-height) - 17.5rem) * 4 / 3);
  }

  /* The fan's slide: the chart across the whole width, as tall as the slide
     allows (it keeps its 880 by 400 shape), the bar centred under it.
     16rem leaves room for the chapter's question, the panel's title and
     counter, the gap and the bar, so the chart never runs under the bar. */
  body[data-presenting] .mc-fan-widget {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "chart"
      "bar";
  }

  body[data-presenting] .mc-fan-chart {
    max-width: calc((var(--present-height) - var(--present-title-height) - 16rem) * 880 / 400);
    margin: 0 auto;
  }
}