@humanforest/slidev-theme 0.1.0

package/components/StatusTrack.vue

@@ -0,0 +1,334 @@
+<script setup>
+/*
+  ONE asset, read left to right as a row of buckets — a bike's week, a bay's ninety days.
+
+  ── THIS IS packages/charts/src/FStatusTrack.vue, RE-IMPLEMENTED ───────────────────────────────
+  The design system already ships this chart, and a deck cannot import it: FStatusTrack is built on
+  Nuxt UI (UTooltip) and Tailwind utility classes, and a Slidev deck compiles through UnoCSS with
+  the deck's own token layer. So the rule this repo already follows applies — share the VALUES and
+  the pure functions, re-implement the PRESENTATION — and the presentation has to be the same one,
+  or the deck is drawing a chart the product does not have.
+
+  What is copied, deliberately and structurally:
+    · ONE TRACK PER COMPONENT. `data` is a flat list of BUCKETS, not a list of lanes. Two assets is
+      two tracks, which is what puts their labels in a shared gutter and their segments on a shared
+      grid — a lane list would let each row divide its own width differently and quietly stop being
+      comparable.
+    · EQUAL-WIDTH SEGMENTS with a gap between them. Every bucket is the same span (a day, a week),
+      so the segment is a CELL rather than a bar positioned by value; the gap is what makes it read
+      as buckets rather than as one continuous band.
+    · THE ROW IS `label · track · summary`, with a start/end caption pair beneath and the legend
+      under that.
+    · TWO MODES. `state` colours by category from the status roles; `intensity` buckets a number
+      onto the sequential ramp. They are different questions — "what condition was it in" and "how
+      much of it was there" — and the palette follows: a state is never a shade and a quantity is
+      never a status colour.
+
+  ── WHAT THIS VERSION DOES DIFFERENTLY, AND WHY ────────────────────────────────────────────────
+  ★ ACCESSORS ARE KEY NAMES, NOT FUNCTIONS. FStatusTrack takes `state: (d) => …` and `value: (d) =>
+    …`. A slide cannot: a comark props block is YAML, so it carries data and never a closure. The
+    deck takes `state-key` and `value-key` instead, which reaches the same rows through the same
+    two modes.
+
+  ★ ROOM SCALE, BUT NOT UNIFORMLY SCALED. The size ladder's presentation step (cellSize.ts `lg`) is
+    44px tall with a 3px gap and a 3px radius. Height and gap grow for the canvas; the RADIUS does
+    not. Scaling it too turned thirty buckets into a row of pills — the corner has to stay small
+    relative to the bucket or the row stops reading as one bar divided into days, which is the whole
+    picture a status track is. Stated as plain numbers because no deck token is a track height.
+
+  ★ THE TOOLTIP IS THE DECK'S PANEL, NOT UTooltip. FStatusTrack turns its segments into real
+    buttons and hands each one a Nuxt UI tooltip; a deck cannot, so the bucket carries a pointer
+    handler and `useDeckTip` drives the same panel every chart on this deck shows. The caption pair
+    stays — it names the track's ENDS, which is the reading a projected slide gives an audience
+    who cannot point at anything.
+*/
+import { computed } from 'vue';
+import ChartFrame from './ChartFrame.vue';
+import { useDeckTip, tipFrame } from './chartTip';
+import { formatValue, isPlottable, stateMessage } from './chartData';
+
+// The deck's five status names, in the order Alert.vue lists them. The legend follows this order
+// rather than first-appearance order, so the same five states read the same way on every slide of a
+// deck instead of being re-sorted by whichever bucket happened to fail first.
+const STATES = ['info', 'success', 'warning', 'danger', 'neutral'];
+// The sequential ramp the engine emits, and the same five steps CalendarGrid buckets onto.
+const SHADE_STEPS = 5;
+
+const props = defineProps({
+  /** The buckets, left to right — one entry per span, every span the same width. In `state` mode
+   *  each carries a status name under `stateKey`; in `intensity` mode a number under `valueKey`.
+   *  A bucket with neither draws as the empty track colour, which is what "no reading" looks like. */
+  data: { type: Array, required: true },
+  /** `state` colours each bucket by category; `intensity` buckets a number onto the sequential ramp. */
+  mode: { type: String, default: 'state', validator: (m) => ['state', 'intensity'].includes(m) },
+  /** Which field carries the status name in `state` mode. */
+  stateKey: { type: String, default: 'state' },
+  /** Which field carries the number in `intensity` mode. */
+  valueKey: { type: String, default: 'value' },
+  /** Which field names a bucket in the tooltip — a date, a week ending. Buckets are equal spans in
+   *  order and the component cannot know what a span IS, so a row that carries no name leaves the
+   *  panel titled by the track instead of inventing a unit for it. */
+  bucketKey: { type: String, default: 'label' },
+  /** The leading gutter label — the asset this track is about. */
+  label: { type: String, default: '' },
+  /** A figure or phrase closing the row, after the track. */
+  summary: { type: String, default: '' },
+  /**
+   * Width of the label and summary gutters in px, the same on both sides.
+   *
+   * ★ FIXED, AND THAT IS THE DIFFERENCE FROM THE PRODUCT COMPONENT. FStatusTrack sizes its label to
+   * its own content (`shrink-0`), which is right for one track on a page. Stacking is the DECK's
+   * normal case — several assets read against each other — and a content-sized gutter starts each
+   * track at a different x, so the same bucket sits at a different place on every row and the
+   * columns stop being comparable. A fixed gutter is what puts day three above day three.
+   */
+  labelWidth: { type: Number, default: 220 },
+  /** Start and end captions under the track, e.g. `['Monday', 'Sunday']`. Both or neither. */
+  caption: { type: Array, default: null, validator: (c) => Array.isArray(c) && c.length === 2 },
+  /** Track height in px. A bucket should read TALLER than it is wide — that proportion is what
+   *  makes a row of them a status bar rather than a row of tiles. At thirty buckets across a deck
+   *  column each is about 44px, so this sits above it. */
+  height: { type: Number, default: 68 },
+  /** Space between buckets in px. It is what makes the row read as buckets rather than one band. */
+  segmentGap: { type: Number, default: 5 },
+  /** Corner radius of a bucket in px. Small: at 8 a thirty-bucket track reads as a row of pills
+   *  rather than as a bar divided into days. */
+  radius: { type: Number, default: 3 },
+  /** Intensity mode: the domain the ramp is spread over. Set it when two tracks are read against
+   *  each other, or each finds its own maximum and they stop being comparable. */
+  domain: { type: Array, default: null, validator: (d) => Array.isArray(d) && d.length === 2 },
+  /** Draw the legend. */
+  legend: { type: Boolean, default: true },
+  /** Where the legend sits: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`
+   *  or `bottom-right`. The EDGE is reading order — above is read before the marks, below is a
+   *  caption read after them; the ALIGNMENT is for the column the chart sits in, centred under a
+   *  full-width plot and pulled to an edge where a centred key would float in a gutter. */
+  legendPosition: {
+    type: String,
+    default: 'bottom-center',
+    validator: (p) => ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(p),
+  },
+  /** The sentence drawn when there is nothing to plot. */
+  empty: { type: String, default: 'No data' },
+});
+
+const rows = computed(() => (Array.isArray(props.data) ? props.data : []));
+
+const stateOf = (d) => {
+  const raw = d?.[props.stateKey];
+  return STATES.includes(raw) ? raw : null;
+};
+const valueOf = (d) => {
+  const raw = d?.[props.valueKey];
+  return isPlottable(raw) ? raw : null;
+};
+
+/*
+  The intensity domain. Derived from the data unless one is given — and the prop exists because a
+  derived domain is per-track: two tracks side by side would each stretch their own ramp over their
+  own range, so an identical shade would mean two different numbers.
+*/
+const bounds = computed(() => {
+  if (props.domain) return [Number(props.domain[0]), Number(props.domain[1])];
+  const values = rows.value.map(valueOf).filter((v) => v !== null);
+  if (!values.length) return [0, 0];
+  return [Math.min(...values, 0), Math.max(...values)];
+});
+
+/*
+  ★ ZERO IS NOT THE PALEST SHADE — the same rule CalendarGrid states. A bucket with no reading takes
+  the empty track colour and no ramp step at all; shading it --deck-shade-1 would say "a little" of
+  something that was never measured.
+*/
+const shadeOf = (d) => {
+  const v = valueOf(d);
+  if (v === null) return null;
+  const [min, max] = bounds.value;
+  const span = max - min;
+  if (!(span > 0)) return 0;
+  // Clamped: `var(--deck-shade-6)` is undeclared, and an undefined custom property in a colour slot
+  // is not "ignored" — it invalidates the declaration at computed-value time.
+  return Math.min(SHADE_STEPS - 1, Math.max(0, Math.floor(((v - min) / span) * SHADE_STEPS)));
+};
+
+const colourOf = (d) => {
+  if (props.mode === 'intensity') {
+    const shade = shadeOf(d);
+    return shade === null ? 'var(--deck-surface)' : `var(--deck-shade-${shade + 1})`;
+  }
+  const state = stateOf(d);
+  // ★ THE MARK ROLE, NOT THE SOLID ONE. A bucket carries no text, so the 4.5:1 white-ink floor
+  // that holds `solid` at family-600 does not apply to it — and paying that floor anyway is what
+  // made warning read as a brown and danger as a brick. `mark` is family-500, which is the step the
+  // product itself reaches for (packages/ui/src/styles/forest.css, and apps/docs' own status track).
+  return state === null ? 'var(--deck-surface)' : `var(--deck-status-${state}-mark)`;
+};
+
+/*
+  A bucket names itself if the row gave it a name, and otherwise the panel is titled by the track —
+  which is the asset the reader is pointing at, and the only identity this component actually holds.
+  The row beneath it is the reading, under the word for the question the mode asks.
+
+  A bucket with no reading says so. That is the one thing the track's own drawing cannot: an empty
+  bucket and a bucket that was measured at the bottom of the ramp are both pale, and the caption
+  pair at the ends says nothing about either.
+*/
+const READING = { state: 'State', intensity: 'Value' };
+const tipFor = (d) => {
+  const named = d?.[props.bucketKey];
+  const value = props.mode === 'intensity'
+    ? (valueOf(d) === null ? 'No reading' : formatValue(valueOf(d)))
+    : (stateOf(d) === null ? 'No reading' : `${stateOf(d).charAt(0).toUpperCase()}${stateOf(d).slice(1)}`);
+  return tipFrame(named ?? props.label ?? '', [
+    { swatch: colourOf(d), label: named ? (props.label || READING[props.mode]) : READING[props.mode], value },
+  ]);
+};
+
+const tip = useDeckTip();
+
+const segments = computed(() => rows.value.map((d, i) => ({ key: i, color: colourOf(d), row: d })));
+
+/*
+  The legend names only what the track actually draws, in the fixed order above — a key listing five
+  states over a week that was green throughout is a key describing a different week.
+*/
+const seriesList = computed(() => {
+  if (!rows.value.length) return [];
+  if (props.mode === 'intensity') {
+    const [min, max] = bounds.value;
+    const span = max - min;
+    return Array.from({ length: SHADE_STEPS }, (_, i) => ({
+      key: `shade-${i}`,
+      // The top edge of the step, so a reader decoding a shade gets a number rather than a rank.
+      name: span > 0 ? String(Math.round(min + ((i + 1) * span) / SHADE_STEPS)) : String(max),
+      color: `var(--deck-shade-${i + 1})`,
+    }));
+  }
+  const present = new Set(rows.value.map(stateOf).filter((s) => s !== null));
+  return STATES.filter((s) => present.has(s)).map((s) => ({
+    key: s,
+    name: `${s.charAt(0).toUpperCase()}${s.slice(1)}`,
+    color: `var(--deck-status-${s}-mark)`,
+  }));
+});
+
+const message = computed(() => {
+  if (!rows.value.length) return stateMessage({ kind: 'empty', reason: 'no-rows' }, props.empty);
+  const drawn = rows.value.some((d) => (props.mode === 'intensity' ? valueOf(d) !== null : stateOf(d) !== null));
+  return drawn ? null : stateMessage({ kind: 'empty', reason: 'no-values' }, props.empty);
+});
+</script>
+
+<template>
+  <ChartFrame
+    :series="seriesList"
+    :height="height"
+    :legend="legend"
+    :legend-position="legendPosition"
+    :message="message"
+  >
+    <div class="deck-track" :style="{ '--track-gutter': `${labelWidth}px` }">
+      <div class="deck-track-row">
+        <span v-if="label" class="deck-track-label">{{ label }}</span>
+        <!-- `role="img"` with one label rather than a name per segment: the tooltip is a pointer
+             affordance, and ninety focusable buckets would be a worse reading of the same row than
+             the track's own label plus its caption pair. -->
+        <div
+          class="deck-track-segments"
+          role="img"
+          :aria-label="`${label ? `${label}: ` : ''}${segments.length} segments`"
+          :style="{ gap: `${segmentGap}px`, height: `${height}px` }"
+          @mouseleave="tip.hide()"
+        >
+          <span
+            v-for="s in segments"
+            :key="s.key"
+            class="deck-track-segment"
+            :style="{ background: s.color, borderRadius: `${radius}px` }"
+            @mousemove="tip.show(tipFor(s.row), $event)"
+          />
+        </div>
+        <span v-if="summary" class="deck-track-summary">{{ summary }}</span>
+      </div>
+      <div v-if="caption" class="deck-track-caption" :class="[label ? 'has-label' : '', summary ? 'has-summary' : '']">
+        <span>{{ caption[0] }}</span>
+        <span>{{ caption[1] }}</span>
+      </div>
+    </div>
+  </ChartFrame>
+</template>
+
+<style scoped>
+.deck-track {
+  display: flex;
+  flex-direction: column;
+  gap: var(--deck-space-3);
+  width: 100%;
+}
+
+.deck-track-row {
+  display: flex;
+  align-items: center;
+  gap: var(--deck-space-4);
+}
+
+/* ★ A FIXED WIDTH ON BOTH GUTTERS, not `flex: none`. Content-sized gutters make every stacked
+   track start and end at a different x — measured on three assets whose names differ by six
+   characters, the same day sat about 90px apart across the rows, and a column of buckets that does
+   not line up is not a column. Fixed on BOTH sides because the summary shifts the right edge the
+   same way the label shifts the left. */
+.deck-track-label,
+.deck-track-summary {
+  flex: 0 0 var(--track-gutter);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--type-deck-label-size);
+  font-weight: var(--type-deck-label-weight);
+  line-height: var(--type-deck-label-line-height);
+  white-space: nowrap;
+}
+.deck-track-label {
+  color: var(--deck-fg);
+}
+.deck-track-summary {
+  color: var(--deck-fg-muted);
+  text-align: right;
+}
+
+.deck-track-segments {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+/* Equal width by construction — `flex: 1` with `min-width: 0`, so ninety buckets divide the row
+   evenly rather than each claiming its content width. This is the difference between a bucket
+   track and a bar chart: a segment's width is its SPAN, and every span here is the same. */
+.deck-track-segment {
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+  ★ THE CAPTION NAMES THE TRACK'S ENDS, SO IT IS INSET TO THE TRACK — not to the row. The row is
+  `label · segments · summary`, and a caption spanning the whole row put "90 days ago" under the
+  LABEL gutter, a whole column to the left of the first bucket it describes. It reads as a caption
+  for the names rather than for the days.
+
+  Both insets are the gutter PLUS the row's own gap, because that is where the segments actually
+  begin; and each is applied only when its gutter is rendered, since both the label and the summary
+  are conditional and a caption inset past an absent gutter is the same error mirrored.
+*/
+.deck-track-caption {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--type-deck-body-sm-size);
+  line-height: var(--type-deck-body-sm-line-height);
+  color: var(--deck-fg-subtle);
+}
+.deck-track-caption.has-label {
+  padding-left: calc(var(--track-gutter) + var(--deck-space-4));
+}
+.deck-track-caption.has-summary {
+  padding-right: calc(var(--track-gutter) + var(--deck-space-4));
+}
+</style>

package/components/Timeline.vue

@@ -0,0 +1,249 @@
+<script setup>
+/*
+  A sequence of moments on one rule — the deck's answer to "how did we get here" and "what happens
+  next", which every Forest deck ends up drawing by hand out of a Grid and some bullets.
+
+  ★ TWO ORIENTATIONS, BECAUSE A ROOM IMPOSES A LIMIT A DESK DOES NOT. Horizontal reads best and is
+  what a timeline is FOR — time runs left to right — but each stop then gets 1/n of the canvas, and
+  at the deck's type scale a title stops fitting somewhere around five. Vertical trades the metaphor
+  for the room: time runs down and each stop gets the full measure.
+
+  ★★ AND THE VERTICAL CEILING IS LOWER THAN IT LOOKS — MEASURED, after this comment first claimed
+  "eight fit" and was wrong. Below an h1 and a caption the timeline starts at canvas y 307, a stop
+  with no body is 87.8px and the gutter is 32, so the SIXTH stop lands at 993.8 — past the 90px
+  safe area, which scripts/deckAudit.ts reports as a real failure. FIVE without a body, FOUR with
+  one (a body line takes a stop to about 137px). The body is the lever, not the orientation.
+
+  The choice is the author's because it depends on how many stops they have and how much each one
+  says, which is not something the component can see. The rule the deck already lives by applies to
+  both — if it does not fit, use more slides, never smaller type.
+
+  ★★ `current` IS A POSITION IN A JOURNEY, NOT A POINTER AT ONE STOP — everything before it is
+  DONE, and is drawn that way. This is the same model @nuxt/ui's own Timeline uses (its items carry
+  `state=completed` before the active index and `state=active` at it, and both the indicator and the
+  separator take the primary colour), so a designer who knows the Forest web Timeline finds the same
+  semantics on a slide.
+
+  It started as `highlight`, a single "we are here" marker, and that was wrong on its own data: a
+  timeline reading 2021 · 2023 · 2025 · 2026 with 2025 as the present drew 2021 and 2026 IDENTICALLY,
+  which throws away the one thing the sequence already knows. A stop that has happened and a stop
+  that has not are not the same stop.
+
+  Both ends of the range are real pictures, and they fall out of the same arithmetic (`i < current`):
+
+      current: -1              nothing done, nothing current — a plan nobody has started
+      current: n (the length)  everything done, nothing current — a finished history
+
+  The MARKER and the RULE are the only places colour is spent. A completed stop fills with the
+  accent and the rule leading out of it fills too, so the accent traces the distance travelled; the
+  present is the same fill, ENLARGED. Labels stay as they are apart from the present's, because
+  colouring the text of every completed stop would say the same thing a second time and leave nothing
+  quieter for the stop that is actually the subject.
+*/
+defineProps({
+  /** The stops, in order. Each is `{ label, title, body? }` — label is the WHEN (a year, a quarter,
+   *  a month), title the WHAT, body an optional line of detail. */
+  items: {
+    type: Array,
+    required: true,
+    validator: (v) => Array.isArray(v) && v.length > 0 && v.every((i) => i && typeof i.title === 'string'),
+  },
+  /** 'horizontal' — time runs left to right, up to about five stops · 'vertical' — time runs down,
+   *  each stop gets the full measure. */
+  orientation: {
+    type: String,
+    default: 'horizontal',
+    validator: (v) => ['horizontal', 'vertical'].includes(v),
+  },
+  /** How far along the sequence is: the index of the stop that is the present. Every stop BEFORE it
+   *  is drawn as done. -1 (the default) is a plan nobody has started; the item count is a finished
+   *  history, where everything happened and nothing is the present. */
+  current: { type: Number, default: -1 },
+});
+</script>
+
+<template>
+  <div class="deck-timeline" :class="`is-${orientation}`">
+    <!-- `is-done` / `is-now` are this deck's names for @nuxt/ui Timeline's own `state=completed` /
+         `state=active`. Same model, same picture, deck vocabulary. -->
+    <div
+      v-for="(item, i) in items"
+      :key="i"
+      class="deck-timeline-stop"
+      :class="{ 'is-done': i < current, 'is-now': i === current }"
+    >
+      <!-- The rule and the dot are one element: the rule is the stop's own leading edge, so a
+           sequence of stops tiles into a continuous line with no separate track to keep in sync. -->
+      <div class="deck-timeline-rule" aria-hidden="true"><span class="deck-timeline-dot" /></div>
+      <div class="deck-timeline-body">
+        <p v-if="item.label" class="deck-timeline-label">{{ item.label }}</p>
+        <p class="deck-timeline-title">{{ item.title }}</p>
+        <p v-if="item.body" class="deck-timeline-detail">{{ item.body }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.deck-timeline {
+  display: grid;
+  /* The dot's own diameter, and the rule's thickness. Declared once here rather than repeated down
+     the file, because the two orientations position the SAME marker on different axes and a marker
+     that differed between them would read as two components. */
+  --timeline-dot: 32px;
+  --timeline-rule: 6px;
+}
+
+/* ── Horizontal ─────────────────────────────────────────────────────────────────────────────── */
+.deck-timeline.is-horizontal {
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--deck-space-4);
+}
+.is-horizontal .deck-timeline-rule {
+  height: var(--timeline-dot);
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--deck-space-3);
+}
+/* ★★ THE RULE HAS TO BRIDGE THE GUTTER, or the line is not a line. Each stop is a grid COLUMN and
+   its rule runs the column's own width — which stops one `gap` short of the next stop's dot, at
+   every joint. Measured: dots 222px apart, rule 206px long, so a 16px break four times over, read
+   as a dashed line rather than a timeline.
+
+   The negative margin carries it across the gutter to the next dot. A negative margin on a `flex: 1`
+   item adds to the space it may fill, so the rule really does extend past its own column rather than
+   being clipped to it. Same fix, same reason, as the vertical rule's own margin-bottom below. */
+.is-horizontal .deck-timeline-rule::after {
+  content: '';
+  flex: 1;
+  height: var(--timeline-rule);
+  background: var(--deck-border);
+  margin-right: calc(-1 * var(--deck-space-4));
+}
+.is-horizontal .deck-timeline-stop:last-child .deck-timeline-rule::after {
+  display: none;
+}
+
+/* ── Vertical ───────────────────────────────────────────────────────────────────────────────── */
+.deck-timeline.is-vertical {
+  grid-auto-flow: row;
+  gap: var(--deck-space-4);
+}
+.is-vertical .deck-timeline-stop {
+  display: grid;
+  grid-template-columns: var(--timeline-dot) 1fr;
+  gap: var(--deck-space-3);
+}
+.is-vertical .deck-timeline-rule {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Pull the dot up onto the first line's cap height rather than its line box, so it aligns with
+     the label beside it instead of floating above it. */
+  padding-top: calc((var(--type-deck-overline-size) * var(--type-deck-overline-line-height) - var(--timeline-dot)) / 2);
+}
+/* ★ THE RULE BRIDGES THE GAP BETWEEN STOPS. Each stop is a grid ROW, so a rule that stopped at the
+   row's own end would break at every gutter and the sequence would read as a stack of separate
+   items rather than as one line. The negative bottom margin carries it across the gap to the next
+   stop's dot. */
+.is-vertical .deck-timeline-rule::after {
+  content: '';
+  flex: 1;
+  width: var(--timeline-rule);
+  background: var(--deck-border);
+  margin-bottom: calc(-1 * var(--deck-space-4));
+}
+.is-vertical .deck-timeline-stop:last-child .deck-timeline-rule::after {
+  display: none;
+}
+
+/* ── The marker ─────────────────────────────────────────────────────────────────────────────── */
+/* ★ THE LINE RUNS UNDER THE MARKERS, IN BOTH ORIENTATIONS, and the z-index is what makes that safe.
+   A pseudo-element paints as its host's LAST child, so the rule would otherwise be drawn over the
+   dot — visible as a hairline across the present marker, which is scaled and so overhangs the layout
+   box the rule starts from. Lifting the dot one step lets the rule butt right up to it instead of
+   being held off by a margin, which is what makes the two orientations draw the same picture:
+   horizontal never had that margin and vertical did. */
+.deck-timeline-dot {
+  width: var(--timeline-dot);
+  height: var(--timeline-dot);
+  border-radius: var(--deck-radius-full);
+  background: var(--deck-bg);
+  border: var(--timeline-rule) solid var(--deck-border-strong);
+  flex: none;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+/* ★ THE PRESENT IS BIGGER, not merely a different colour, and that is a room decision rather than a
+   taste one. A filled dot and an outlined dot of the same diameter are one shape at two weights, and
+   at the back of a room the weight is the first thing to go — the same reason Carousel's current
+   indicator is a LONGER bar rather than a darker one. Scaled 1.4x and filled, with a ring in the
+   page colour so it reads as lifted off the rule rather than as a blob sitting on it.
+
+   `--deck-accent-soft` was tried as a second ring and taken out: on warm paper it is a pale mint
+   about one step off the ground, so it contributed nothing at distance while adding a shape at
+   close range. */
+/* ★★ SCALED, NOT RESIZED, and the difference is measurable. Growing the dot with width/height grows
+   it from its top-left corner: its own centre moves off the pitch and the flex item beside it
+   shortens to compensate. Measured on four evenly-spaced stops, dot centres came out 222 / 225.1 /
+   218.8 apart — a marker 3px off the rhythm every other stop is drawn on, and it reads as a wobble
+   rather than as an emphasis.
+
+   `scale` grows about the centre and takes no part in layout at all, so the pitch stays constant and
+   the rule beside it does not move. The ring grows with it, which is the right behaviour: it is one
+   marker being made larger, not a dot with a separately-sized halo. */
+/* ── DONE: the distance travelled ──────────────────────────────────────────────────────────────
+   A completed stop fills, and so does the rule LEADING OUT of it. Each stop's `::after` is the
+   segment between it and the next one, so `.is-done` on stop i colours exactly the leg i → i+1 —
+   and since i < current implies i+1 <= current, that leg really has been travelled. The present's
+   own `::after` stays in the border colour: the road ahead is not road behind. */
+.is-done .deck-timeline-dot {
+  background: var(--deck-accent);
+  border-color: var(--deck-accent);
+}
+.is-done .deck-timeline-rule::after {
+  background: var(--deck-accent);
+}
+
+.is-now .deck-timeline-dot {
+  scale: 1.4;
+  background: var(--deck-accent);
+  border-color: var(--deck-accent);
+  box-shadow: 0 0 0 var(--deck-space-1) var(--deck-bg);
+}
+
+/* ── The type ───────────────────────────────────────────────────────────────────────────────── */
+.deck-timeline-label {
+  font-family: var(--type-deck-overline-family);
+  font-size: var(--type-deck-overline-size);
+  font-weight: var(--type-deck-overline-weight);
+  line-height: var(--type-deck-overline-line-height);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  color: var(--deck-fg-muted);
+  margin: 0 0 var(--deck-space-1) 0;
+}
+.is-now .deck-timeline-label {
+  color: var(--deck-accent);
+}
+.deck-timeline-title {
+  font-family: var(--type-deck-heading-xs-family);
+  font-size: var(--type-deck-heading-xs-size);
+  font-weight: var(--type-deck-heading-xs-weight);
+  line-height: var(--type-deck-heading-xs-line-height);
+  color: var(--deck-fg);
+  margin: 0;
+  /* The stop is already a column; a measure on top of that would leave a ragged gap inside a box
+     the grid has already sized. */
+  max-width: none;
+}
+.deck-timeline-detail {
+  font-size: var(--type-deck-body-sm-size);
+  line-height: var(--type-deck-body-sm-line-height);
+  color: var(--deck-fg-muted);
+  margin: var(--deck-space-1) 0 0 0;
+  max-width: none;
+}
+</style>