/* Wider than the shared 860px .inner: this page's board + chart need more
   room side by side than a normal text column does. Matches the shared
   rule's selector (section.alt > .inner) so specificity ties and this
   later-loaded stylesheet wins. 1320px (not 1200px) so the board -- the
   flexible 1fr column in .board-widget, next to the chart's fixed 600px --
   renders about 20% wider. */
section.alt > .inner {
  max-width: 1320px;
}

/* Scoped to this page (adjacent-sibling selector, not the bare .alt class
   shared site-wide): the header-to-widget gap should read as one connected
   view, not a full homepage-section's worth of breathing room. */
.article-header + section.alt {
  padding-top: 1.5rem;
}

.explanation {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

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

.widget-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.widget-instructions {
  font-weight: 600;
  margin-bottom: 0;
}

/* Deliberately not the marketing `.btn` -- an understated control, same as
   the reset-button it replaced. Only shown while the live run's own tab is
   the one being viewed (see index.ts's refreshControls). */
.stop-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.stop-button svg {
  fill: currentColor;
}

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

/* Browser-style tab strip: tabs scroll once there are too many to fit,
   "+" stays put at the end rather than scrolling away with them. */
.run-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.run-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
}

.run-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.run-tab:hover {
  color: var(--accent);
}

.run-tab[aria-selected="true"] {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.add-run-button {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.add-run-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.add-run-button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Right of "+", same height and look, just wide enough for its word. Never
   disabled: an example can be opened at any time. Same as
   cumulative-flow-diagram's own. */
.example-button {
  flex-shrink: 0;
  height: 1.75rem;
  margin-bottom: 0.4rem;
  padding: 0 0.6rem;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

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

.board-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: 1.5rem;
  align-items: start;
}

/* Chart and scrubber share a column of their own, separate from
   board-column, so the scrubber's position follows the chart's own height
   -- it would otherwise follow the grid row's height, which is dictated by
   whichever of board-column or this column is taller (almost always the
   board), stranding the scrubber far below the chart it belongs to. */
.chart-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Replay controls (see spec.md's "Replay controls", src/lib/replayTransport.ts):
   a scrubber hugging the chart's bottom edge with five VCR-style buttons
   under it, the same look as cumulative-flow-diagram's. The transport
   insets the rail and the button row inline from scatterPlot's own plot
   margins, so the track lines up with the x-axis exactly. Same cap the
   chart's own svg uses -- needed below the 1420px breakpoint, where the grid
   collapses to a single column wider than 600px. */
.replay-wrap {
  max-width: 600px;
}

.replay-scrubber {
  position: relative;
  height: 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  touch-action: none;
}

/* A live run's controls: visible, but nothing to press yet. */
.replay-scrubber.replay-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.replay-scrubber-dragging,
.replay-scrubber-dragging .replay-scrubber-handle {
  cursor: grabbing;
}

.replay-scrubber-rail {
  position: relative;
  height: 100%;
}

.replay-scrubber-track,
.replay-scrubber-fill,
.replay-scrubber-unreachable {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.replay-scrubber-track {
  left: 0;
  right: 0;
  background: var(--border);
}

/* Past a run stopped early: the playhead can't go there. */
.replay-scrubber-unreachable {
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-alt) 0 3px,
    var(--border) 3px 6px
  );
  opacity: 0.8;
}

.replay-scrubber-fill {
  left: 0;
  width: 0;
  background: var(--text);
  transition: width 0.15s;
}

.replay-scrubber-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--text);
  transform: translateY(-50%);
  cursor: grab;
  transition: left 0.15s;
}

/* No lag while dragging or playing: the handle and fill should track the
   playhead 1:1. The transition stays for a step or a jump, where a little
   motion reads as "something changed". */
.replay-scrubber-dragging .replay-scrubber-fill,
.replay-scrubber-dragging .replay-scrubber-handle,
.replay-scrubber-playing .replay-scrubber-fill,
.replay-scrubber-playing .replay-scrubber-handle {
  transition: none;
}

.replay-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.replay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.replay-button svg {
  fill: currentColor;
}

.replay-button:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.replay-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.board-column {
  display: grid;
  gap: 1.5rem;
}

.board-stack {
  position: relative;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* The board as it stood at the replay playhead, covering the real one
   completely while rewound, so the board appears to "time travel" rather
   than showing a separate preview alongside it. Its inner .board reuses the
   ordinary board's column/zone styling, the same as cumulative-flow-
   diagram's. */
.board-history {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-alt);
}

.card-ghost {
  opacity: 0.75;
  cursor: default;
}

.column h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.zone {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 8px;
  height: 380px;
  padding: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: default;
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
}

.card + .card {
  margin-top: 0.5rem;
}

/* One line, cut short with "…", so every card is the same height whatever
   its title (see spec.md). The full title is the card's own tooltip. */
.card-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Same treatment, for tapping a mobile checklist row (or its dot) to
   highlight it -- see spec.md's "Mobile layout". A mobile row and a desktop
   card are two different elements sharing the one highlight state, so each
   needs its own rule. */
.mobile-item.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Holds the tag row and the Start/Finish button on one line at the card's
   own bottom edge (margin-top: auto, since .card is the flex column that
   makes that meaningful) -- not just under the title, so both read in the
   same place on every card regardless of how many lines the title wraps to.
   Same role cumulative-flow-diagram's own .card-footer plays. */
.card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Same tag-row convention cumulative-flow-diagram's cards use, so the two
   notebook widgets read as views of the same team rather than unrelated
   ones: age right-aligned via .card-tag-right's margin-left: auto.
   Collapses to nothing (the shared [hidden] rule in ../styles.css) while a
   card has no tag yet to show. */
.card-tags {
  display: flex;
  gap: 0.35rem;
}

/* A Done card has no button, so its tag row spans the footer and cycle
   time sits at the right edge even when the short labels leave room. */
.card.done .card-tags {
  flex: 1;
}

.card-tag-right {
  margin-left: auto;
}

/* "cycle time: 3d" needs about a 9rem-wide column; a narrower one shows
   "CT 3d" instead, so the tag stays whole in a fixed-width column (see
   spec.md and lib/cardTag.ts). */
.zone {
  container-type: inline-size;
}

.card-tag-label-short {
  display: none;
}

@container (max-width: 9rem) {
  .card-tag-label {
    display: none;
  }

  .card-tag-label-short {
    display: inline;
  }
}

/* A Doing card's age tag and Finish button need a little more room than
   a narrow column's cards leave inside their usual padding. */
@container (max-width: 9.5rem) {
  .card {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .card-footer {
    gap: 0.35rem;
  }

  .zone .card-action-btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: #e6f6ff;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* Moves a card forward without dragging it -- same control, same reasoning,
   as cumulative-flow-diagram's own Start/Finish button: a second, explicit
   way to trigger the same forward move dragging already allows, and (below
   the mobile breakpoint, see "Mobile layout" in spec.md) the only way. Shown
   at every screen width above that breakpoint; dragging keeps working
   unchanged alongside it. Hidden outright on a Done card -- see index.ts's
   syncActionButton -- since there's nowhere further to go. */
.card-action-btn {
  flex-shrink: 0;
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

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

.card-action-btn:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: default;
}

.card-action-btn[hidden] {
  display: none;
}

.card.draggable {
  cursor: grab;
  border-color: var(--accent);
}

.card.dragging {
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.chart {
  width: 100%;
  max-width: 600px;
  height: auto;
}

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

.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 .crosshair {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.5;
}

/* The replay playhead: dotted, not dashed, so it's never mistaken for the
   "now" crosshair, and the same quiet line cumulative-flow-diagram draws at
   its own playhead. mix-blend-mode inverts it against whatever it crosses,
   a dot included. No label: the board underneath already shows the moment. */
.chart .hover-line {
  stroke: #fff;
  stroke-width: 0.9;
  stroke-dasharray: 1 3;
  mix-blend-mode: difference;
  opacity: 0.55;
}

/* Coming to rest makes the line a touch heavier, still dotted. */
.chart .hover-line-settled {
  stroke-width: 1.1;
  opacity: 0.75;
}

.chart .guide {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.chart .guide-tag-bg {
  fill: #e6f6ff;
}

.chart .guide-tag-text {
  fill: var(--accent);
  font-size: 8px;
  font-weight: 700;
}

.chart .guide-tag.frozen .guide-tag-bg {
  fill: var(--accent-dark);
}

.chart .guide-tag.frozen .guide-tag-text {
  fill: #fff;
}

.chart .now-label {
  fill: var(--accent);
  font-size: 8px;
  font-weight: 600;
  text-anchor: middle;
}

.chart .dot {
  fill: #16a34a;
  fill-opacity: 0.35;
  stroke: none;
}

.chart .dot.frozen {
  fill: #16a34a;
  fill-opacity: 1;
  stroke: none;
}

.chart .dot.highlighted {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.6);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

/* p50/p85/p95 reference lines (see spec.md's "Percentiles"), styled the
   same as team-northbound's: a muted dashed backdrop, distinct from the
   accent-colored hover .guide. */
.chart .reference-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

/* A white halo (paint-order + stroke) keeps a label legible where a dot
   happens to sit right behind it. */
.chart .reference-line-label {
  fill: var(--muted);
  font-size: 7.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

@media (max-width: 1420px) {
  .board-widget {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below 600px the 3-column board is replaced outright by a flat checklist --
   see spec.md's "Mobile layout" (same pattern cumulative-flow-diagram
   settled on after review of an earlier, status-grouped version). Both
   elements exist in the DOM at every width (built once in index.ts) and are
   simply hidden outside their own breakpoint. */
.mobile-checklist,
.mobile-history-list {
  display: none;
}

@media (max-width: 600px) {
  .board,
  .board-history {
    display: none;
  }

  .mobile-checklist {
    display: block;
  }

  /* Only the "shown" half needs a rule: [hidden] (../styles.css) already
     hides it while not rewound. */
  .mobile-history-list:not([hidden]) {
    display: block;
  }
}

/* The checklist's reconstruction while rewound, covering the live
   checklist in place, the same way .board-history covers .board. */
.mobile-history-list {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-alt);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
}

.mobile-history-list .mobile-item {
  background: #fff;
}

/* Read-only reconstruction row: no control of its own, the same quiet
   dimming .card-ghost uses. */
.mobile-item-ghost {
  opacity: 0.75;
  cursor: default;
}

/* Same fixed-height/internal-scroll pattern .zone uses at wider widths, so
   the checklist's own footprint stays just as bounded as the board's. */
.mobile-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

.mobile-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  transition: opacity 0.3s ease;
}

.mobile-item + .mobile-item {
  margin-top: 0.5rem;
}

.mobile-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-item-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.mobile-item-control {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
}

/* Same hand-drawn-SVG-icon, square-button language team-northbound's own
   .replay-button transport controls use, so a play icon reads the same way
   on both pages rather than inventing a second "start" visual language. */
.mobile-start-btn {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mobile-start-btn svg {
  fill: currentColor;
}

.mobile-start-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mobile-start-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* A custom checkbox (native input, visually hidden but still the real,
   keyboard/focus-accessible control) replacing the play icon in place once
   an item is in progress -- same footprint as .mobile-start-btn so swapping
   the two doesn't shift the row's own layout. */
.mobile-finish-checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-finish-checkbox input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mobile-finish-checkbox-box {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  /* The real input sits beneath this, inset: 0 across the whole label --
     without this, the box (painted after it) would catch the click instead
     of letting it reach the input underneath. */
  pointer-events: none;
}

.mobile-finish-checkbox input:hover:not(:disabled) + .mobile-finish-checkbox-box {
  border-color: var(--accent);
}

.mobile-finish-checkbox input:checked + .mobile-finish-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}

.mobile-finish-checkbox input:checked + .mobile-finish-checkbox-box::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.18rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mobile-finish-checkbox input:disabled {
  cursor: default;
}

.mobile-finish-checkbox input:disabled + .mobile-finish-checkbox-box {
  opacity: 0.35;
}

/* A finished row stays in the list (see spec.md), checked with its title
   struck through. pointer-events: none keeps the box from being unchecked
   without touching the checkbox's own :disabled (dimmed) styling, which
   would mute the checked state while the run is still live. */
.mobile-item-finished .mobile-item-title {
  text-decoration: line-through;
  color: var(--muted);
}

.mobile-item-finished .mobile-finish-checkbox {
  pointer-events: none;
}

/* ── Phone views (see spec.md's "Phone views", ../styles.css) ── */

/* The instruction row's two wordings and the two Stop buttons: one of each
   per width. The phone Stop sits at the right end of the run tabs row,
   since the instruction row isn't part of the phone Simulation view. */
.instructions-phone,
.stop-button.stop-button-phone {
  display: none;
}

@media (max-width: 600px) {
  .instructions-wide,
  .stop-button.stop-button-wide {
    display: none;
  }

  .instructions-phone {
    display: inline;
  }

  .stop-button.stop-button-phone {
    display: inline-flex;
    margin-left: auto;
    margin-bottom: 0.4rem;
    padding: 0.3rem 0.8rem;
  }

  /* Explanation view: the instruction moves below the explanation, as the
     closing call to action leading into the Simulation tab. With the widget
     gone from between them, the explanation's divider and gap go too. */
  body.phone-views:not([data-phone-view="simulation"]) section.alt > .inner {
    display: flex;
    flex-direction: column;
  }

  .widget-controls {
    order: 1;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .explanation {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Lets the tabs scroll sideways instead of pushing Stop off screen. */
  .run-tabs {
    min-width: 0;
  }

  /* Simulation view: fills the screen above the bottom bar exactly, using
     the shared [data-phone-view-screen]/[data-phone-view-fill] chain in
     ../styles.css (marked from section.alt down to the checklist, see the
     HTML and index.ts's buildBoardWidget). Only the spacing is this page's. */
  body.phone-views[data-phone-view="simulation"] .run-tabs-bar {
    margin-bottom: 0.75rem;
  }

  /* stretch: the wide layout's align-items: start would otherwise shrink
     the chart column to the svg's default width here. */
  body.phone-views[data-phone-view="simulation"] .board-widget {
    gap: 0.75rem;
    align-items: stretch;
  }
}

/* ── Presentation mode (see spec.md's "Presentation mode", ../styles.css) ──
   The run panels take the height the tabs row leaves, and are a size
   container, so the chart can be as wide as that height allows (it's
   320:218, with the replay controls taking about 4.25rem under it) without
   crowding the board out: at most a bit over half the width. Board
   and chart stay side by side at every wide width, and the board's columns
   stretch to the full height. */
@media (min-width: 601px) {
  /* With the instruction hidden, the row would hold only Stop: the tabs
     row's own Stop takes over instead, after "+" and "Example", where
     cumulative-flow-diagram keeps its Stop. */
  body[data-presenting] .widget-controls {
    display: none;
  }

  body[data-presenting] .stop-button.stop-button-phone {
    display: inline-flex;
    margin-bottom: 0.35rem;
  }

  body[data-presenting] .run-tabs-bar {
    flex-shrink: 0;
  }

  body[data-presenting] .run-panels {
    flex: 1;
    min-height: 0;
    container-type: size;
  }

  body[data-presenting] .run-panel {
    height: 100%;
  }

  body[data-presenting] .board-widget {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) min(55cqw, (100cqh - 4.25rem) * 320 / 218);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  body[data-presenting] .chart,
  body[data-presenting] .replay-wrap {
    max-width: none;
  }

  body[data-presenting] .board-column {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  body[data-presenting] .board-stack,
  body[data-presenting] .board,
  body[data-presenting] .board-history .board {
    height: 100%;
  }

  body[data-presenting] .column {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body[data-presenting] .zone {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}