efficient-shell 0.0.0 → 4.126.3

package/dist/ui.css

@@ -0,0 +1,1518 @@
+/**
+ * react-os-shell/ui.css — styles for the UI kit, without the window chrome.
+ *
+ * Import this when you take `react-os-shell/ui`:
+ *
+ *   import "react-os-shell/ui.css";
+ *
+ * Import EXACTLY ONE of this and `react-os-shell/styles.css` — the latter is
+ * the umbrella over this file plus shell.css, so taking both doubles every rule.
+ *
+ * You supply Tailwind v4 yourself (`@import "tailwindcss"` in your own entry,
+ * which every consumer already does). This file deliberately does NOT import
+ * it: a consumer mid-migration off another component library may need the
+ * utility and theme layers WITHOUT preflight, whose bare element selectors
+ * would otherwise out-specify that library's `:where()`-wrapped reset.
+ *
+ * Scope — what dark mode actually is here:
+ *   - the accent theme variants, via themes.css below
+ *   - [data-theme="dark"] overrides of Tailwind UTILITY CLASS NAMES. There are
+ *     no `dark:` variants in this package; you write the light class and the
+ *     remap happens to you. Escaped-important classes (.\!bg-blue-50) and alpha
+ *     variants (.bg-white\/70) compile to different class names, so each needs
+ *     its own rule — that is why the list is long rather than clever.
+ *   - the reduce-transparency escape hatch, form-control dark styling, the
+ *     coarse-pointer 16px rule that defeats iOS focus-zoom, StatusBadge tones,
+ *     and scrollbars.
+ */
+
+@import "./themes.css";
+
+/*
+ * Shape and type, as tokens the consuming app inherits.
+ *
+ * Every value here equals Tailwind's own default, so adding this changes
+ * nothing that renders. What it changes is WHERE the value comes from: a
+ * portal that deletes its own `@theme` block now takes its radius and its
+ * typeface from this package, and one edit here moves all of them.
+ *
+ * A consumer's `@theme` still wins — Tailwind merges the blocks and the later
+ * declaration replaces this one — so a portal that wants its own shape keeps
+ * it by saying so, rather than by this file not having an opinion.
+ *
+ * "Later" is a REQUIREMENT, not an observation: import this file ABOVE your own
+ * `@theme`. A portal that declares `--font-sans` and then imports the kit below
+ * it has its typeface silently reset to the system stack, with nothing in the
+ * diff to explain it. All five consuming portals import the kit near the top of
+ * `index.css` and declare after it, which is why this reads as a no-op today.
+ *
+ * On type: the token is here, the TYPEFACE is not. Shipping a face means
+ * hosting and licensing it, which is a product decision rather than a
+ * packaging one. Until that is made, a portal that sets nothing gets the
+ * system stack — the same thing it got before this block existed.
+ */
+@theme {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* Tailwind v4 doesn't scan node_modules by default — tell it to scan this
+   package's compiled JS so utility classes used in kit components get
+   generated when consumers import react-os-shell/ui.css. */
+@source "./**/*.js";
+
+/* Tailwind scans every text file it can reach, prose included, so a class
+   NAMED in the README, the CHANGELOG or a contributor guide is compiled into
+   the bundle as if a component used it. That is not academic: `h-[440px]` and
+   `bg-[#abc]`, which .design-sync/conventions.md cites as examples of values
+   that render as NOTHING, were both real classes in the shipped stylesheet.
+   Worse downstream — harness 52-brand-surface.md treats the compiled bundle as
+   the published vocabulary, so a passing mention in prose silently widened the
+   organisation's brand contract. Excluding the documentation dropped 21 such
+   classes and none the code uses. Excluding a path that does not exist is not
+   an error, so these hold for a consumer's node_modules copy too. */
+@source not "../*.md";
+@source not "../docs/**";
+@source not "../.design-sync/**";
+
+/* The default `utils/glass.ts` already assumes at `getMenuOpacity()`'s
+   fallback. Declared here so a ui-only consumer gets identical glass to a shell
+   consumer at rest, and has one knob to dial it. <Layout> overrides it inline
+   for shell consumers; reduce-transparency still beats both. */
+:root {
+  --menu-opacity: 0.95;
+}
+
+/* ── Reduce transparency (Preferences → Customization) ──────────────────────
+ * When the user turns on "Reduce transparency", Layout adds this class to
+ * <html>. Two effects, applied globally so every present-and-future glass
+ * surface is covered without per-component edits:
+ *   1. Force every window/taskbar/menu opacity variable fully opaque, so the
+ *      surfaces that tint via `rgb(... / var(--*-opacity))` become solid. The
+ *      `!important` beats Layout's inline (non-important) custom-property writes.
+ *   2. Strip backdrop-filter everywhere — the blur is the GPU-expensive part on
+ *      older machines. `!important` overrides both Tailwind `backdrop-blur-*`
+ *      utilities and inline `backdropFilter` from glassStyle(). glassStyle()
+ *      also returns a solid background under this class so menus/popups don't
+ *      read as washed-out translucent panels once the blur is gone. */
+html.rosh-reduce-transparency {
+  --active-header-opacity: 1 !important;
+  --active-content-opacity: 1 !important;
+  --inactive-header-opacity: 1 !important;
+  --inactive-content-opacity: 1 !important;
+  --menu-opacity: 1 !important;
+  --taskbar-opacity: 1 !important;
+}
+html.rosh-reduce-transparency *,
+html.rosh-reduce-transparency *::before,
+html.rosh-reduce-transparency *::after {
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+/* ═══════════════════════════════════════════════════
+   The neutral ramp, light
+   ═══════════════════════════════════════════════════ */
+/*
+ * The dark block below has named these twelve roles since 4.16; light named
+ * none of them, so `var(--ink)` resolved to nothing outside a dark theme.
+ * That is the same shape the --viz-* palette further down already gets right:
+ * declared for both themes, read by role.
+ *
+ * Adding light values is render-neutral for existing consumers — no rule
+ * outside a `[data-theme="dark"]` scope reads any of these twelve, in CSS or
+ * in TSX. It exists so a surface built WITHOUT the kit's utility classes —
+ * a report, an emailed document, a standalone page — can read the same roles
+ * the portals do. That surface is governed by harness 52-brand-surface.md and
+ * loads `react-os-shell/brand.css`.
+ *
+ * The values are the Tailwind steps the dark block opposite already remaps:
+ * white/gray-50/gray-100 surfaces, gray-100/200/300 lines, gray-900 down to
+ * gray-400 ink. Keep the two blocks in step.
+ */
+:root {
+  --surface: #ffffff;
+  --surface-sunken: #f9fafb;
+  --surface-raised: #f3f4f6;
+  --line-subtle: #f3f4f6;
+  --line: #e5e7eb;
+  --line-strong: #d1d5db;
+  --ink-faintest: #9ca3af;
+  --ink-faint: #6b7280;
+  --ink-muted: #4b5563;
+  --ink: #374151;
+  --ink-strong: #1f2937;
+  --ink-strongest: #111827;
+}
+
+/* ═══════════════════════════════════════════════════
+   Theme: Dark
+   ═══════════════════════════════════════════════════ */
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /*
+   * The neutral ramp, as variables.
+   *
+   * Every rule below reads these rather than a literal, so a consumer that
+   * wants a different dark — warmer, higher contrast, its own brand — sets
+   * twelve values instead of forking 100 rules. The status hues (red for
+   * danger, amber for warning) stay literal on purpose: they mean the same
+   * thing in every product, and a consumer redefining "danger" is a different
+   * conversation from one restyling its greys.
+   *
+   * The names say what a step DOES rather than which Tailwind number it
+   * replaces, because in a light theme the numbers run the other way round
+   * while the roles do not.
+   */
+  --surface: #1e1e2e;
+  --surface-sunken: #181825;
+  --surface-raised: #313244;
+  --line-subtle: #2a2a3c;
+  --line: #313244;
+  --line-strong: #45475a;
+  --ink-faintest: #6c7086;
+  /* 4.79:1 on --surface. Was #7f849c at 4.44:1 — under AA, and this step
+     is what `.text-gray-500` renders as in dark, so it carries real text. */
+  --ink-faint: #848aa2;
+  /*
+   * Currently unreachable, and worth knowing before you set it.
+   *
+   * Its only consumer is `.text-gray-600` below, which a later rule overrides
+   * to `--ink` so short taskbar-button labels stay readable on dark glass.
+   * That override is global by design — shell.css's docblock spells out why a
+   * bare utility selector cannot live there — so `text-gray-600` renders
+   * `--ink` everywhere and this step renders nowhere.
+   *
+   * Left declared rather than deleted: it names a real rung, and a consumer
+   * scoping its own `.text-gray-600` rule can reach it. Deleting it would be a
+   * rendering change, which this release deliberately is not.
+   */
+  --ink-muted: #9399b2;
+  --ink: #a6adc8;
+  --ink-strong: #bac2de;
+  --ink-strongest: #cdd6f4;
+}
+
+/* ── Chart tokens ───────────────────────────────────────────────────────────
+ * Eight categorical slots, a reserved status set, and the chart inks. Declared
+ * BELOW the neutral ramp on purpose: the dark chart inks read the ramp, so a
+ * consumer restyling its greys moves the grid and axis with them.
+ *
+ * Deliberately NOT remapped by themes.css. Every other accent token in this
+ * package follows the user's chosen theme; these must not. A series colour is
+ * an identity encoding — "4xx is amber" — and an identity that changes when
+ * someone picks the pink theme has stopped being one. See charts/palette.ts
+ * for the slot-order rule and the colour-vision validation these steps passed.
+ *
+ * The light steps are validated against white, the dark ones against
+ * `--surface`. They are the same eight hues re-stepped for the darker band,
+ * not a second palette. */
+:root {
+  --viz-series-1: #2a78d6;
+  --viz-series-2: #eb6834;
+  --viz-series-3: #1baf7a;
+  --viz-series-4: #eda100;
+  --viz-series-5: #e87ba4;
+  --viz-series-6: #008300;
+  --viz-series-7: #4a3aa7;
+  --viz-series-8: #e34948;
+
+  --viz-good: #1baf7a;
+  --viz-neutral: #6b7280;
+  --viz-warning: #eda100;
+  --viz-serious: #eb6834;
+  --viz-critical: #e34948;
+
+  --viz-grid: #e5e7eb;
+  --viz-axis: #d1d5db;
+  --viz-label: #6b7280;
+  --viz-muted: #9ca3af;
+  --viz-surface: #ffffff;
+}
+
+[data-theme="dark"] {
+  --viz-series-1: #3987e5;
+  --viz-series-2: #d95926;
+  --viz-series-3: #199e70;
+  --viz-series-4: #c98500;
+  --viz-series-5: #d55181;
+  --viz-series-6: #008300;
+  --viz-series-7: #9085e9;
+  --viz-series-8: #e66767;
+
+  --viz-good: #199e70;
+  --viz-neutral: #7f849c;
+  --viz-warning: #c98500;
+  --viz-serious: #d95926;
+  --viz-critical: #e66767;
+
+  --viz-grid: var(--line-subtle);
+  --viz-axis: var(--line-strong);
+  --viz-label: var(--ink-faint);
+  --viz-muted: var(--ink-faintest);
+  --viz-surface: var(--surface);
+}
+
+/* ── Status tokens ──────────────────────────────────────────────────────────
+ * The nine semantic groups (`SemanticGroup` in shell/StatusBadge.tsx), as two
+ * registers a caller picks between with one prop rather than by hand-writing
+ * colours: SOFT for a badge inside a dense row, SOLID for the same fact in a
+ * detail header.
+ *
+ * WHY THE SOFT FILL IS TRANSPARENT. A status used to be an opaque tint —
+ * `bg-green-100` — calibrated against one backdrop: the flat white surface. On
+ * a raised panel or a hovered row that tint is still the same flat patch, and
+ * it reads as a hole rather than as a badge, because it does not know what is
+ * behind it. A wash of the group's own hue at a fixed alpha composites with
+ * whatever it sits on, so ONE value is right on `--surface`, `--surface-raised`
+ * and a hovered row alike. That is also why each `-soft` is declared once and
+ * never re-declared for dark: a transparent wash has no theme, the surface
+ * under it does.
+ *
+ * WHY THE INK IS NOT THE `-text` ROLE. The obvious ink for a status is
+ * `--success-text` / `--warning-text` / `--danger-text` from brand.css, which
+ * are calibrated to clear 4.5:1 on the FLAT surface. Over the wash they do not,
+ * and the worst backdrop (`--surface-raised`) is the one nobody checks:
+ *
+ *     light  --success-text #15803d  4.02:1     --warning-text #b45309  3.91:1
+ *            --danger-text  #dc2626  3.59:1     --accent-text  #1d4ed8  5.12:1
+ *     dark   --success-text #16a34a  2.82:1     --warning-text #f59e0b  4.58:1
+ *            --danger-text  #f87171  3.86:1     --accent-text  #60a5fa  4.00:1
+ *
+ * Six of those eight are under AA. So the soft tier carries its own ink, moved
+ * one step along the same hue until the WORST of the three backdrops clears
+ * 4.5:1. The floor it actually achieves is 5.67:1 light and 5.39:1 dark;
+ * `tests/statusSoftTier.test.ts` measures every pair on every backdrop and
+ * fails the build under 4.5, so the tier cannot drift back under.
+ *
+ * `draft` and `neutral` share the grey hue and differ by alpha, which is the
+ * distinction they have always had (`bg-gray-300` against `bg-gray-100`): a
+ * draft is a real state and reads slightly louder than a cancelled one.
+ */
+:root {
+  --status-success-soft: rgba(34, 197, 94, 0.16);
+  --status-active-soft: rgba(59, 130, 246, 0.16);
+  --status-queued-soft: rgba(99, 102, 241, 0.16);
+  --status-info-soft: rgba(14, 165, 233, 0.16);
+  --status-pending-soft: rgba(234, 179, 8, 0.16);
+  --status-warning-soft: rgba(249, 115, 22, 0.16);
+  --status-danger-soft: rgba(239, 68, 68, 0.16);
+  --status-draft-soft: rgba(107, 114, 128, 0.22);
+  --status-neutral-soft: rgba(107, 114, 128, 0.10);
+
+  /* Light ink: the -800 step of each family. The -700 steps are what the
+     `-text` roles use, and they are the ones measured above at 3.59–4.02. */
+  --status-success-soft-ink: #166534;
+  --status-active-soft-ink: #1e40af;
+  --status-queued-soft-ink: #3730a3;
+  --status-info-soft-ink: #075985;
+  --status-pending-soft-ink: #854d0e;
+  --status-warning-soft-ink: #9a3412;
+  --status-danger-soft-ink: #991b1b;
+  --status-draft-soft-ink: var(--ink-strong);
+  --status-neutral-soft-ink: var(--ink);
+
+  /* The loud register. A saturated -700 fill with white on it, literal in both
+     themes for the same reason `--danger` is: a status means the same thing in
+     every product, and a solid badge is read at a glance rather than against a
+     surface. Banner's `emphasis="solid"` is the same decision one size up. */
+  --status-success-solid: #15803d;
+  --status-active-solid: #1d4ed8;
+  --status-queued-solid: #4338ca;
+  --status-info-solid: #0369a1;
+  --status-pending-solid: #a16207;
+  --status-warning-solid: #c2410c;
+  --status-danger-solid: #b91c1c;
+  --status-draft-solid: #374151;
+  --status-neutral-solid: #4b5563;
+  /* 4.92:1 (pending) to 10.31:1 (draft) — the whole solid tier clears AA. */
+  --status-on-solid: #ffffff;
+}
+
+/* Only the ink moves. The washes above hold, because they are transparent. */
+[data-theme="dark"] {
+  --status-success-soft-ink: #86efac;
+  --status-active-soft-ink: #93c5fd;
+  --status-queued-soft-ink: #a5b4fc;
+  --status-info-soft-ink: #7dd3fc;
+  --status-pending-soft-ink: #fde68a;
+  --status-warning-soft-ink: #fdba74;
+  --status-danger-soft-ink: #fca5a5;
+  --status-draft-soft-ink: var(--ink-strongest);
+  --status-neutral-soft-ink: var(--ink-strong);
+}
+
+/* ── Timeline accent tokens ─────────────────────────────────────────────────
+ * Every colour a `TimelineTrack` paints with, and the ink that reads on top of
+ * one. There is ONE of them.
+ *
+ * "The timeline's blue is not our theme blue; it must be the theme colour, and
+ * pure flat blue — no skeuomorphic shading — consistent with everything else"
+ * (Henry, 2026-09-14, translated from his Chinese ruling). The bar used to mix
+ * three blues that were all nearly right and none of them the theme's: the
+ * `blue-500` utilities on the fill and the accent marks, `--status-active-solid`
+ * (#1d4ed8, which no accent remap reaches) behind the kind tokens, and
+ * `--status-success-solid` behind a completion. The theme's blue is the 600
+ * step — what the primary `Button` wears, what a link wears, what an active tab
+ * underlines with — so that is what all of them are now.
+ *
+ * A completion no longer keeps a hue of its own either: the CHECK GLYPH is what
+ * says it finished, and shape survives a greyscale print and a colour-blind
+ * reader in a way a second hue never did. The same argument already retired the
+ * five bespoke kind hues (a violet shipment, an amber DFM, an orange
+ * inspection) — a diamond is goods moving, a flask is a test, a document is a
+ * drawing revision.
+ *
+ * THE VALUE, and why it is a chain rather than a token:
+ *
+ *   var(--accent-600, var(--color-blue-600, #2563eb))
+ *
+ *   --accent-600      what `useTheme` stamps inline on <html> when the user
+ *                     picks a custom accent, and what `themes.css` remaps the
+ *                     `blue-600` utilities to under `[data-custom-accent]`. A
+ *                     mark and a primary Button therefore move together.
+ *   --color-blue-600  Tailwind v4's own theme variable, which is LITERALLY what
+ *                     `.bg-blue-600` resolves to — so with no custom accent the
+ *                     two are the same computed value, not two values that look
+ *                     alike. It is not #2563eb: v4 states the palette in OKLCH
+ *                     and `blue-600` renders rgb(21 93 252).
+ *   #2563eb           the last resort — Tailwind v3's blue-600, and the value
+ *                     `brand.css` gives `--accent-600` — for a consumer that
+ *                     ships neither of the above.
+ *
+ * `ui.css` cannot declare `--accent-600` itself: a portal takes this file (or
+ * `styles.css`) WITHOUT `brand.css`, and declaring a default here would shadow
+ * nothing but would also stop `brand.css` from ever being the answer. The
+ * fallback chain is the portable form.
+ *
+ * NO DARK STEP. `.bg-blue-600` and `.border-blue-600` are not remapped for dark
+ * — a primary Button is the same fill on a dark page — so neither is the bar.
+ * The 600 step measures 3.40:1 on the dark `--surface-sunken` and 4.95:1 on the
+ * light one, clearing WCAG 1.4.11 (these are graphics, not text) in both, and
+ * `--tl-on-kind` is white ink on it at 5.17:1 either way.
+ *
+ * The one thing that DOES move in dark is ink the kit paints through
+ * `.text-blue-600` — the thumb, a cluster pill, the links — because blue-600 as
+ * TEXT on a dark surface is 3.17:1 and fails AA. `ui.css` already remaps that
+ * class to #93c5fd for dark, and the timeline inherits it rather than inventing
+ * a step of its own. */
+:root {
+  /* The one colour. Everything below is an alias, kept as separate names
+     because a consumer retuning ONE kind is a conversation worth having in a
+     stylesheet rather than a fork of the component. */
+  --tl-accent: var(--accent-600, var(--color-blue-600, #2563eb));
+  --tl-dfm: var(--tl-accent);
+  --tl-shipment: var(--tl-accent);
+  --tl-testing: var(--tl-accent);
+  --tl-completion: var(--tl-accent);
+  --tl-inspection: var(--tl-accent);
+  --tl-invoice: var(--tl-accent);
+  /* The ink on a filled mark. `--on-accent` is white in both themes by
+     `brand.css`'s own contract — the accent fill does not move, so neither does
+     what reads on it. */
+  --tl-on-kind: var(--on-accent, #ffffff);
+  /* The focus ring, and the colour a hot label's name and date take. */
+  --tl-focus: var(--tl-accent);
+  /* The soft wash behind the current mark, a hovered dot and the mark a thumb
+     has just crossed. A box-shadow cannot be a utility class, so the accent is
+     mixed down here instead — 16% is the alpha the kit's own `-soft` status
+     washes carry, and `color-mix` is the only form of it that can follow a
+     custom accent, since `rgba()` cannot take a variable for its channels. */
+  --tl-soft: color-mix(in srgb, var(--tl-accent) 16%, transparent);
+}
+
+/* ── Budget overrun hatch ───────────────────────────────────────────────────
+ * `BudgetBar`'s third drawing. A run past its wall clock must not be pictured
+ * as a full bar: a full solid bar is the calm "finished" shape, and this is the
+ * opposite of that. The overrun segment is therefore HATCHED rather than
+ * filled — a texture no in-budget state ever wears, so the difference survives
+ * a glance, a greyscale screenshot and a colour-blind reader alike.
+ *
+ * A gradient rather than an image: no asset, no request, and it reads the
+ * danger tokens so it follows the theme. `background-color` under it keeps the
+ * band visible when a print stylesheet drops background images.
+ */
+.rosh-budget-overrun {
+  background-color: var(--status-danger-soft);
+  background-image: repeating-linear-gradient(
+    135deg,
+    var(--status-danger-solid) 0,
+    var(--status-danger-solid) 2px,
+    transparent 2px,
+    transparent 5px
+  );
+}
+
+/* ── Chart motion ───────────────────────────────────────────────────────────
+ * Every animation the chart family uses, as classes, so no chart implements
+ * motion itself and none of them can forget the reduced-motion rule below.
+ *
+ * The intro reveal is a WIPE: a white rect inside an SVG <mask>, scaled from
+ * nothing to full. Everything under the mask — fill, stroke and point markers
+ * alike — appears as it passes, which is what stops a chart assembling in
+ * pieces the way a stroke-dashoffset reveal does (that one can only animate
+ * strokes, so the fill and the dots arrive on their own schedule).
+ *
+ * The mask uses objectBoundingBox units, so the rect is 0–1 and one keyframe
+ * set works at every chart size.
+ *
+ * `fill-mode: both` matters on every rule: with a stagger delay the mark would
+ * otherwise render at its FINAL state, jump back to the start when its delay
+ * elapsed, and animate from there. */
+@keyframes rosh-viz-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes rosh-viz-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes rosh-viz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes rosh-viz-sweep { from { opacity: 0; transform: rotate(-14deg) scale(0.94); } to { opacity: 1; transform: none; } }
+@keyframes rosh-viz-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes rosh-viz-march { to { stroke-dashoffset: -24; } }
+/* The loading sweep. Translated by twice its own width so the band clears the
+   plot at both ends rather than popping at the edges. */
+@keyframes rosh-viz-shimmer { from { transform: translateX(0); } to { transform: translateX(200%); } }
+/* The live-reading ping. Fades as it grows, so the halo is gone before it is
+   large enough to reach the neighbouring point. */
+@keyframes rosh-viz-ping { from { transform: scale(1); opacity: 0.45; } to { transform: scale(3.2); opacity: 0; } }
+
+.rosh-viz-wipe,
+.rosh-viz-wipe-rtl,
+.rosh-viz-wipe-center {
+  transform-box: fill-box;
+  animation: rosh-viz-wipe 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.rosh-viz-wipe { transform-origin: left; }
+.rosh-viz-wipe-rtl { transform-origin: right; }
+.rosh-viz-wipe-center { transform-origin: center; }
+
+/* Grow from the baseline, not the centre — a bar that expands both ways reads
+   as a range rather than as a quantity. `fill-box` puts the origin on the rect
+   itself rather than on the viewport. */
+.rosh-viz-rise { transform-box: fill-box; transform-origin: bottom; animation: rosh-viz-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+/* A horizontal bar grows from its label edge, which is where the eye starts. */
+.rosh-viz-grow { transform-origin: left; animation: rosh-viz-grow 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+.rosh-viz-sweep { transform-box: fill-box; transform-origin: center; animation: rosh-viz-sweep 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+.rosh-viz-fade { animation: rosh-viz-fade 700ms ease-out both; }
+.rosh-viz-march { animation: rosh-viz-march 1s linear infinite; }
+.rosh-viz-shimmer { animation: rosh-viz-shimmer 1.8s ease-in-out infinite; }
+.rosh-viz-ping { transform-box: fill-box; transform-origin: center; animation: rosh-viz-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
+
+/* Hover emphasis is a TRANSITION, not a jump. A mark that snaps to grey the
+   instant the pointer crosses a band reads as a glitch; 160ms is long enough to
+   register as a response and short enough not to lag the pointer. Transitioning
+   `filter` too is what makes the glow arrive with the colour rather than after
+   it. */
+.rosh-viz-mark { transition: fill 160ms ease-out, fill-opacity 160ms ease-out, opacity 160ms ease-out, filter 200ms ease-out; }
+
+/* One rule covers the whole family, present and future. A chart cannot opt out
+   of this, because no chart wrote the animation in the first place. */
+@media (prefers-reduced-motion: reduce) {
+  .rosh-viz-mark { transition: none !important; }
+  .rosh-viz-wipe, .rosh-viz-wipe-rtl, .rosh-viz-wipe-center,
+  .rosh-viz-rise, .rosh-viz-grow, .rosh-viz-sweep, .rosh-viz-fade,
+  .rosh-viz-march {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  /* These two REST invisible — the shimmer exits at translateX(200%) and the
+     ping fades to nothing — so the entrance treatment above would park the
+     shimmer band fully lit over the skeleton and pin the ping halo at an
+     opacity it never reaches while animating. They stop by disappearing. */
+  .rosh-viz-shimmer, .rosh-viz-ping {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+}
+
+/* ── Timeline track ─────────────────────────────────────────────────────────
+ * `TimelineTrack`, and through it `MilestoneTimeline` and `ProductionTimeline`.
+ *
+ * Written as classes here rather than as Tailwind utilities in the component
+ * for the same reason the chart family is: the whole card is drawn from ONE
+ * geometry object, and a dozen absolutely-positioned bands that have to agree
+ * with each other are clearer as named parts than as class strings. It is also
+ * what makes the motion impossible to get wrong — no component writes an
+ * animation, so none of them can forget the reduced-motion rule at the bottom.
+ *
+ * Colour comes from the neutral ramp and the `--tl-*` accent tokens, so both
+ * themes are covered without a single `[data-theme="dark"]` rule. The two
+ * exceptions are deliberate and live in the component: `bg-gray-200` for the
+ * rail and `bg-blue-600` for the fill, because those two must follow the dark
+ * remap and the user's accent respectively.
+ *
+ * FLAT, and kept that way by `tests/timelineTokens.test.ts`: no gradient and no
+ * drop shadow anywhere in this block. The fill carried a white gloss along its
+ * top edge and three elements carried a soft drop shadow (the reveal chip, the
+ * bubble and the popover, the scrubber thumb); all of them are gone, and the
+ * border or the flat ring that was underneath each one does the separating on
+ * its own. The `0 0 0 Npx` box-shadows that remain are RINGS — a halo in the
+ * card's own ground, a focus ring, the soft accent wash — which is a flat
+ * colour at a radius, not a shadow. Nothing else in the kit wears a gradient
+ * fill, and `StatusBadge` wears no shadow at all. */
+
+/* The card chrome both timelines wear. Border WIDTH and STYLE only — the colour
+   comes from the utility class on the element, which carries the dark remap. */
+.rosh-tl-card {
+  border-width: 1px; border-style: solid; border-radius: 12px; padding: 14px 16px 16px;
+}
+.rosh-tl-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
+/* The sentence: icon, title, facts. It wraps inside itself and may shrink, so
+   the controls beside it never get pushed onto a row of their own. */
+.rosh-tl-head-main {
+  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
+  flex: 1 1 auto; min-width: 0;
+}
+.rosh-tl-ico { flex: none; width: 15px; height: 15px; align-self: center; margin-right: -3px; }
+.rosh-tl-ico svg { width: 15px; height: 15px; }
+.rosh-tl-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
+/* `min-width: 0` is what lets a long meta line WRAP rather than push the
+   actions onto a row of their own: a flex item's default minimum is its
+   content, and five facts about a production order are wider than a card. */
+.rosh-tl-meta { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 0; }
+.rosh-tl-meta b { font-weight: 500; }
+.rosh-tl-head-actions {
+  display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex: none;
+}
+
+/* The play control: a pill, not an icon button — a 20px circle beside an
+   uppercase heading is what the two cards used to disagree about. */
+.rosh-tl-play {
+  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px;
+  border-radius: 14px; cursor: pointer; white-space: nowrap;
+  font: inherit; font-size: 11.5px; font-weight: 500;
+  background: var(--surface-raised); border-width: 1px; border-style: solid;
+  transition: color 160ms ease-out, border-color 160ms ease-out;
+}
+.rosh-tl-play svg { width: 9px; height: 9px; fill: currentColor; }
+
+.rosh-tl-foot {
+  display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
+  margin-top: 14px; padding-top: 12px;
+  border-top-width: 1px; border-top-style: solid;
+}
+.rosh-tl-status { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
+.rosh-tl-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
+.rosh-tl-legend > span {
+  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px;
+  border-width: 1px; border-style: solid; border-radius: 11px;
+  font-size: 10.5px; background: var(--surface-raised);
+}
+/* The legend's glyphs are the track's glyphs at legend size, so a chip can
+   never describe a shape the rail no longer draws. */
+.rosh-tl-glyph {
+  width: 10px; height: 10px; flex: none; box-sizing: border-box;
+  display: flex; align-items: center; justify-content: center;
+}
+.rosh-tl-glyph.is-ring { border-radius: 50%; border-width: 2px; border-style: solid; }
+.rosh-tl-glyph.is-diamond { border-radius: 2px; transform: rotate(45deg) scale(0.82); }
+.rosh-tl-glyph.is-disc { border-radius: 50%; }
+.rosh-tl-glyph svg { width: 7px; height: 7px; }
+/* Upright and smaller inside a chip's diamond, for the reason the rail's
+   diamond gives — at legend size there is even less room in the corners. */
+.rosh-tl-glyph.is-diamond svg { width: 6px; height: 6px; transform: rotate(-45deg); }
+
+.rosh-tl-body { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 20px; }
+.rosh-tl-body.is-solo { grid-template-columns: minmax(0, 1fr); }
+/* The caption on an end of the axis — "Start · 20/01/2026". Inside the stage
+   rather than flanking it, so it sits over the coordinate it names instead of
+   beside a bar whose left edge it could only point at. Mono, like every other
+   date the card draws. */
+.rosh-tl-edge {
+  position: absolute; white-space: nowrap;
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 10px; line-height: 1.3; color: var(--ink-muted);
+}
+.rosh-tl-edge.is-end { transform: translateX(-100%); }
+
+/* A 10px side inset, so a dot on the first or last day is never clipped. */
+.rosh-tl-stage { position: relative; padding: 0 10px; flex: 1 1 auto; min-width: 0; }
+.rosh-tl-layer { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; }
+
+/* The off-layout copy of every label, measured so the packer has real widths. */
+.rosh-tl-measure {
+  position: absolute; left: 0; top: 0; display: flex; gap: 8px;
+  visibility: hidden; pointer-events: none;
+}
+.rosh-tl-measure-box { flex: none; display: flex; flex-direction: column; white-space: nowrap; }
+
+.rosh-tl-rail { position: absolute; left: 0; right: 0; border-radius: 999px; }
+.rosh-tl-fill {
+  position: absolute; left: 0; border-radius: 999px;
+  transform-origin: left center;
+}
+/* The notch in the rail where the axis stops keeping time. Painted in the
+   card's own ground, so it reads as a cut rather than as a mark. */
+.rosh-tl-cut {
+  position: absolute; width: 7px; transform: translateX(-50%);
+  background: var(--surface-sunken);
+}
+.rosh-tl-cut i, .rosh-tl-cutglyph i {
+  position: absolute; top: 0; width: 1px; height: 100%;
+  background: var(--line-strong); transform: skewX(-28deg);
+}
+.rosh-tl-cut i:first-child { left: 2px; }
+.rosh-tl-cut i:last-child { left: 5px; }
+
+.rosh-tl-tick { position: absolute; width: 1px; background: var(--line-strong); opacity: 0.85; }
+.rosh-tl-tick.is-week { opacity: 0.5; }
+.rosh-tl-month, .rosh-tl-rulercut span {
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 10px; line-height: 1.1; color: var(--ink-faint);
+}
+.rosh-tl-month { position: absolute; white-space: nowrap; }
+.rosh-tl-rulercut {
+  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px;
+  transform: translateX(-50%); white-space: nowrap;
+}
+.rosh-tl-cutglyph { position: relative; width: 7px; height: 7px; }
+.rosh-tl-cutglyph i:first-child { left: 1px; }
+.rosh-tl-cutglyph i:last-child { left: 4px; }
+
+.rosh-tl-todayline {
+  position: absolute; width: 0; border-left: 1px dashed var(--line-strong);
+  transform: translateX(-0.5px);
+}
+.rosh-tl-todaytag {
+  position: absolute; white-space: nowrap; border-radius: 5px; padding: 1px 6px;
+  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
+  color: var(--ink-muted); background: var(--surface-raised);
+}
+
+/* The list is the accessible reading of the card; the dots are absolutely
+   positioned against the layer, so the <li> must not establish a containing
+   block of its own. */
+.rosh-tl-nodes { list-style: none; margin: 0; padding: 0; }
+.rosh-tl-nodes > li { position: static; }
+.rosh-tl-node {
+  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center; border-radius: 50%;
+  transform: var(--rosh-tl-shift, translate(-50%, -50%))
+             rotate(var(--rosh-tl-rot, 0deg)) scale(var(--rosh-tl-sc, 1));
+}
+.rosh-tl-node svg { width: 10px; height: 10px; }
+/* The halo is the CARD's ground, not white: a pure-white ring is a defect on a
+   dark card, and this one is right in both themes without a remap. */
+.rosh-tl-node.is-dot {
+  width: 10px; height: 10px; background: var(--surface); border-width: 2px; border-style: solid;
+  box-shadow: 0 0 0 2px var(--surface-sunken);
+}
+.rosh-tl-node.is-key { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--surface-sunken); }
+/* "You are here" wears a soft halo as well as the ground ring — it is the one
+   mark a reader looks for before reading anything. */
+.rosh-tl-node.is-current {
+  width: 14px; height: 14px;
+  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 6px var(--tl-soft);
+}
+.rosh-tl-node.is-current svg { width: 9px; height: 9px; }
+.rosh-tl-node.is-diamond { border-radius: 3px; width: 14px; height: 14px; --rosh-tl-rot: 45deg; }
+/* A glyph inside a diamond is turned back upright, and drawn a pixel smaller
+   than one in a disc: the square a 14px diamond inscribes is under 10px across,
+   so the 10px a disc gives its glyph would touch the rotated corners. */
+.rosh-tl-node.is-diamond svg { width: 9px; height: 9px; transform: rotate(-45deg); }
+.rosh-tl-node.is-ghost {
+  width: 10px; height: 10px; background: var(--surface);
+  border: 1.5px dashed var(--line-strong); box-shadow: none; cursor: default;
+}
+/* A provisional mark: the kind's shape and glyph drawn hollow, on the best date
+   the record holds for something that has not happened — a sample ORDERED,
+   where a shipment will be. The outline says what it will be; the empty middle
+   says it is not that yet. The inline style sets the border colour. */
+.rosh-tl-node.is-provisional {
+  background: var(--surface); border-width: 2px; border-style: solid;
+}
+/* Lit by the consumer — a stepper step hovered above the bar names the marks
+   it covers. The same soft wash the current mark wears, at the same radius, so
+   "these" and "here" are one vocabulary. */
+.rosh-tl-node.is-lit { box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 5px var(--tl-soft); }
+/* The band under the marks a consumer lit: one soft stretch of the accent, the
+   rail's own height with room around it, rounded at both ends. */
+.rosh-tl-band { position: absolute; border-radius: 999px; background: var(--tl-soft); pointer-events: none; }
+
+/* ── The bare rail (`labels="none"`) ──────────────────────────────────────
+   No label lanes. The edge captions flank the rail on its own row, the only
+   text over the rail is a mark's caption, and the undated things are a dashed
+   cap at the end of a dashed tail. */
+.rosh-tl-flank {
+  flex: none; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1;
+  color: var(--ink-muted);
+}
+/* The caption over a mark — `v3` over a revision. Mono, like every other
+   small text the rail draws, and never a pointer target: the mark under it is. */
+.rosh-tl-caption {
+  position: absolute; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 10px; line-height: 1.1; color: var(--ink-muted);
+}
+/* The tail: from the end of the axis to the cap. Dashed, because it is not
+   time — it is the distance to a date nobody has. */
+.rosh-tl-tail { position: absolute; height: 0; border-top: 2px dashed var(--line-strong); }
+/* The row under a bare production rail: Play, the return button when the thumb
+   has been moved, and the status line — one row, because the rail has no
+   header corner to put a control in. */
+.rosh-tl-railrow { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
+.rosh-tl-railrow .rosh-tl-status { margin: 0; }
+/* The cap: the start anchor's own drawing, at the other end and for the same
+   reason, but a real button — its popover is where the undated things are
+   named. `.is-lit` still reaches it, so a consumer can light "the end". */
+.rosh-tl-node.is-cap {
+  width: 14px; height: 14px; box-sizing: border-box; cursor: default;
+  background: var(--surface); border: 2px dashed var(--line-strong);
+  box-shadow: 0 0 0 2px var(--surface-sunken);
+}
+
+/* The start anchor. Hollow and dashed, because it is not an event — nothing was
+   filed on the day the axis opens, and a solid disc there would claim there
+   was. Decoration only: it takes no pointer, so the scrubber's hit strip runs
+   straight over it. */
+.rosh-tl-start {
+  position: absolute; box-sizing: border-box; pointer-events: none;
+  width: 12px; height: 12px; border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--surface); border: 1.5px dashed var(--line-strong);
+  box-shadow: 0 0 0 2px var(--surface-sunken);
+}
+/* A dated mark landed on the start day. The ring opens out to encircle it
+   rather than sitting under it — wider than the 16px key node, and transparent,
+   so both are legible and neither has moved off its date. */
+.rosh-tl-start.is-around {
+  width: 26px; height: 26px; background: none; box-shadow: none;
+}
+/* A fold: one node standing for a run of marks too close to be drawn apart.
+   Same kind throughout, and it is that kind's own shape and glyph with the count
+   beside it — the reader should not have to learn a second vocabulary to be told
+   there are two shipments rather than one. */
+.rosh-tl-count {
+  position: absolute; transform: translate(9px, -14px);
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
+  color: var(--tl-accent); pointer-events: none;
+  padding: 1px 2px; border-radius: 4px; background: var(--surface-sunken);
+}
+/* Mixed kinds have no glyph that is true of all of them, so the fold is a plain
+   `×N` pill instead — wider than a dot, and the only mark on the rail that is
+   not a shape the legend explains. */
+.rosh-tl-node.is-fold.is-mixed {
+  width: auto; min-width: 22px; height: 16px; padding: 0 5px; border-radius: 8px;
+}
+.rosh-tl-foldnum {
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
+}
+.rosh-tl-node.is-active { box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 5px var(--line); }
+/* The flash as the scrubber's thumb crosses a mark. It rides the same 160ms
+   transition as the hover, so a fast drag pulses rather than strobes. */
+.rosh-tl-node.is-hit {
+  --rosh-tl-sc: 1.5;
+  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 5px var(--tl-soft);
+}
+.rosh-tl-node:focus-visible, .rosh-tl-pill:focus-visible, .rosh-tl-thumb:focus-visible, .rosh-tl-more:focus-visible {
+  outline: 2px solid var(--tl-focus); outline-offset: 3px;
+}
+.rosh-tl-pulse {
+  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
+}
+
+.rosh-tl-label { position: absolute; display: flex; flex-direction: column; white-space: nowrap; }
+.rosh-tl-label.is-up { justify-content: flex-end; }
+/* The reveal for a label that fits no lane: a chip of its own, so it reads over
+   whichever lane label it lands on. */
+.rosh-tl-label.is-reveal {
+  z-index: 4; padding: 2px 5px; border-radius: 7px;
+  background: var(--surface-raised); border: 1px solid var(--line);
+}
+.rosh-tl-name {
+  font-size: 11px; font-weight: 500; line-height: 1.25; color: var(--ink-strong);
+  transition: color 160ms cubic-bezier(0, 0, 0.2, 1);
+}
+.rosh-tl-date, .rosh-tl-detail {
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 10px; line-height: 1.3; color: var(--ink-faint);
+}
+.rosh-tl-detail { font-family: inherit; color: var(--ink-muted); margin-top: 2px; }
+.rosh-tl-label.is-current .rosh-tl-name { font-weight: 600; }
+/* The label of whatever the pointer or the keyboard is on. Colour AND weight,
+   because on a card of eleven 11px labels colour alone is not a pointer. */
+.rosh-tl-label.is-hot .rosh-tl-name { color: var(--tl-focus); font-weight: 600; }
+.rosh-tl-label.is-hot .rosh-tl-date { color: var(--tl-focus); }
+/* A phase bracket: the three-sided box under the rail that says "these ran in
+   parallel". Border WIDTH and STYLE only — the colour comes from the utility
+   class on the element, which carries the dark remap, and a `border:` shorthand
+   here would reset it to currentColor and win on being later in the cascade. */
+.rosh-tl-phase {
+  position: absolute; height: 8px; pointer-events: none;
+  border-style: solid; border-width: 0 1px 1px 1px;
+  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
+}
+.rosh-tl-phase-label {
+  position: absolute; transform: translateX(-50%); white-space: nowrap;
+  font-size: 9px; line-height: 1.2; pointer-events: none;
+}
+
+.rosh-tl-lead, .rosh-tl-cspan {
+  position: absolute; height: 1px; background: var(--line-strong); opacity: 0.8;
+}
+.rosh-tl-cspan { opacity: 0.7; }
+
+.rosh-tl-pill {
+  position: absolute; display: inline-flex; align-items: center; gap: 4px;
+  height: 19px; padding: 0 7px; border-radius: 10px; cursor: pointer; white-space: nowrap;
+  font: inherit; font-size: 10px; font-weight: 500;
+  color: var(--ink); background: var(--surface); border: 1px solid currentColor;
+  transition: box-shadow 160ms cubic-bezier(0, 0, 0.2, 1);
+}
+.rosh-tl-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
+.rosh-tl-pill:hover, .rosh-tl-pill[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--line); }
+
+.rosh-tl-bubble, .rosh-tl-popover {
+  position: absolute; z-index: 6; min-width: 132px; max-width: 220px;
+  display: flex; flex-direction: column;
+  background: var(--surface-raised); border: 1px solid var(--line);
+  border-radius: 9px; padding: 7px 9px; transform: translateX(-50%);
+}
+/* The arrow is aimed at the dot the bubble describes, which is not the bubble's
+   own centre once it has been clamped inside the track. */
+.rosh-tl-bubble::before, .rosh-tl-popover::before {
+  content: ""; position: absolute; top: -4px; left: var(--rosh-tl-arrow, 50%);
+  width: 7px; height: 7px; margin-left: -3.5px; background: var(--surface-raised);
+  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
+  transform: rotate(45deg);
+}
+/* A preview is the document in miniature rather than a second line of text, so
+   it gets room — 280px, the width at which a chip row and a snippet still read
+   on a phone. */
+.rosh-tl-bubble.is-preview { max-width: 280px; min-width: 180px; }
+.rosh-tl-preview {
+  display: flex; flex-direction: column; gap: 3px;
+  margin-top: 5px; font-size: 11px; color: var(--ink-muted);
+}
+/* The way out of the popover and into the thing it is previewing. */
+.rosh-tl-bubble-open {
+  margin-top: 6px; padding: 5px 0 0; width: 100%; text-align: left; cursor: pointer;
+  background: none; border: 0; border-top-width: 1px; border-top-style: solid;
+  border-top-color: var(--line);
+  font: inherit; font-size: 11px; font-weight: 500;
+}
+.rosh-tl-bubble-open:hover { text-decoration: underline; }
+.rosh-tl-bubble-open:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
+
+.rosh-tl-popover-head {
+  margin: 0 0 5px; font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--ink-faint);
+}
+.rosh-tl-popover ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.rosh-tl-popover li { display: flex; gap: 8px; justify-content: space-between; font-size: 11px; }
+/* What a FOLD says, which is the same list plus each member's own card: a run
+   that is all one date can never be opened, so this is the only place those
+   members exist. A column, because a preview under a row is a paragraph and not
+   a third column. */
+.rosh-tl-fold-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.rosh-tl-fold-list li { display: flex; flex-direction: column; font-size: 11px; }
+.rosh-tl-foldrow { display: flex; gap: 8px; justify-content: space-between; margin: 0; }
+.rosh-tl-fold-list .rosh-tl-preview { margin-top: 2px; }
+
+.rosh-tl-hit { position: absolute; left: -10px; right: -10px; cursor: pointer; touch-action: none; }
+/* The marks stand ABOVE that strip, and this one declaration is the whole of it.
+   `ThumbLayer` draws the strip after the list of dots and neither had a z-index,
+   so the strip won the paint order and took every pointer event aimed at a mark:
+   no hover, no focus, no click, on every track with a thumb — which is every
+   production scrubber. 4 is above the strip (auto) and below the thumb (5) and
+   the bubble (6), so the disc the reader has hold of still stays on top. The
+   strip keeps every pixel no dot is standing on, which is what leaves the drag
+   where it was: see the note over the strip in `TimelineTrack.tsx`. */
+.rosh-tl-nodes .rosh-tl-node { z-index: 4; }
+/* The magnet. A drag reports a stop change the moment the pointer crosses the
+   halfway line, and these 120ms carry the disc, its chip and the fill there
+   together — which is what makes six reports read as six settlings rather than
+   as one slide. The whole rule is off under reduced motion, at the bottom. */
+.rosh-tl-thumb {
+  position: absolute; width: 18px; height: 18px; border-radius: 50%; z-index: 5;
+  background: var(--surface); border: 2px solid currentColor;
+  box-shadow: 0 0 0 4px var(--surface-sunken);
+  transform: translate(-50%, -50%); touch-action: none; cursor: grab;
+  transition: left 120ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.rosh-tl-fill.is-tweened { transition: width 120ms cubic-bezier(0.22, 1, 0.36, 1); }
+/* While playback carries the thumb, an animation frame sets its position every
+   16ms and the magnet's 120ms transitions have to come off: a transition chasing
+   a tween trails it by its own duration, which reads as the thumb lagging the
+   date on its chip — and a pause would keep sliding for 120ms after the frame
+   that froze it, landing somewhere nobody asked for. */
+.rosh-tl-layer.is-gliding .rosh-tl-thumb,
+.rosh-tl-layer.is-gliding .rosh-tl-chip,
+.rosh-tl-layer.is-gliding .rosh-tl-fill.is-tweened { transition: none; }
+/* The label of the mark the thumb is on, as a control: it opens the document
+   behind the dot. Styled as the label it replaces, underlined on hover so it
+   reads as the link it is. */
+.rosh-tl-open {
+  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
+  font: inherit; font-size: 11px; font-weight: 500; line-height: 1.25;
+}
+.rosh-tl-open:hover { text-decoration: underline; }
+.rosh-tl-open:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; border-radius: 4px; }
+.rosh-tl-thumb:active { cursor: grabbing; }
+.rosh-tl-thumb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
+.rosh-tl-chip {
+  position: absolute; transform: translateX(-50%); z-index: 5; white-space: nowrap;
+  transition: left 120ms cubic-bezier(0.22, 1, 0.36, 1);
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 7px;
+  background: var(--ink-strongest); color: var(--surface);
+}
+.rosh-tl-chip::after {
+  content: ""; position: absolute; bottom: -3px; left: 50%; width: 7px; height: 7px;
+  margin-left: -3.5px; border-radius: 1px; background: var(--ink-strongest); transform: rotate(45deg);
+}
+
+.rosh-tl-pending { padding-top: 16px; }
+.rosh-tl-pending-head { margin: 0 0 8px; font-size: 10px; font-weight: 500; color: var(--ink-faint); }
+.rosh-tl-ghosts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
+.rosh-tl-ghosts li { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--ink-muted); }
+.rosh-tl-ghosts .rosh-tl-node { position: relative; --rosh-tl-shift: translate(0, 0); flex: none; }
+.rosh-tl-ghosts b { font-weight: 500; color: var(--ink-faint); }
+.rosh-tl-more { margin-top: 9px; font-size: 11px; text-decoration: underline; cursor: pointer; }
+
+/* The vertical variant: under a 320px track the axis is abandoned rather than
+   squeezed, and the connector carries the fill. */
+.rosh-tl-v { list-style: none; margin: 0; padding: 0; }
+.rosh-tl-v > li {
+  position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr);
+  gap: 10px; padding-bottom: 14px;
+}
+.rosh-tl-v > li:last-child { padding-bottom: 0; }
+.rosh-tl-v .rosh-tl-node {
+  position: relative; --rosh-tl-shift: translate(0, 0);
+  justify-self: center; align-self: start; margin-top: 3px;
+}
+.rosh-tl-vline {
+  position: absolute; left: 8px; top: 17px; bottom: -1px; width: 1px;
+  background: var(--line-strong); transform-origin: top center;
+}
+.rosh-tl-vline.is-on { width: 2px; left: 7.5px; background: currentColor; }
+.rosh-tl-vline.is-dash { background: none; border-left: 1px dashed var(--line-strong); }
+.rosh-tl-vrow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.rosh-tl-v > li[aria-current] .rosh-tl-name { font-weight: 600; }
+.rosh-tl-vgap {
+  position: relative; margin: 0; padding: 0 0 14px 26px; min-height: 20px;
+  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
+}
+
+/* ── Timeline motion ────────────────────────────────────────────────────────
+ * Mount budget <= 600ms: the fill draws in 420ms, the dots pop on a stagger
+ * that lands the last one by 520ms, and the labels settle by 580ms. `both` on
+ * every rule — with a delay the mark would otherwise paint its FINAL state and
+ * jump back when its delay elapsed. The draw is `scaleX`, not `width`: the
+ * track is under a ResizeObserver, and animating width relays out every dot on
+ * every frame. */
+@keyframes rosh-tl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes rosh-tl-drawy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes rosh-tl-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes rosh-tl-pop {
+  from {
+    opacity: 0;
+    transform: var(--rosh-tl-shift, translate(-50%, -50%)) rotate(var(--rosh-tl-rot, 0deg)) scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: var(--rosh-tl-shift, translate(-50%, -50%)) rotate(var(--rosh-tl-rot, 0deg)) scale(1);
+  }
+}
+@keyframes rosh-tl-pulse { from { transform: scale(1); opacity: 0.35; } to { transform: scale(2.6); opacity: 0; } }
+
+.rosh-tl-draw { animation: rosh-tl-draw 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+.rosh-tl-drawy { animation: rosh-tl-drawy 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+.rosh-tl-fade { animation: rosh-tl-fade 160ms cubic-bezier(0, 0, 0.2, 1) both; }
+.rosh-tl-pop { animation: rosh-tl-pop 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+/* Three cycles, then stop. An endless "you are here" ring is the card's most
+   frequent motion, and frequency is what makes motion annoying. */
+.rosh-tl-pulse.is-on {
+  transform-origin: center;
+  animation: rosh-tl-pulse 2000ms cubic-bezier(0, 0, 0.2, 1) 600ms 3 both;
+}
+/* Hover is a TRANSITION, never a keyframe — a keyframe restarts on re-render,
+   and this element re-renders on every pointer move. */
+.rosh-tl-mark { transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; }
+/* Half again as big, with a wash behind it: at 10px a 1.35 dot is a dot that
+   moved, and the point of the hover is that the reader can tell it answered. */
+.rosh-tl-mark:hover, .rosh-tl-mark:focus-visible {
+  --rosh-tl-sc: 1.5;
+  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 3px var(--tl-soft);
+}
+
+/* Zoom: the axis opening around a magnified stretch, and closing again. The
+   transition is armed by the component for the length of ONE change and then
+   taken away, because a positional transition left on permanently eases every
+   dot sideways while a window edge is being dragged — which reads as lag, not
+   as motion. */
+.rosh-tl-layer.is-zooming .rosh-tl-mark {
+  transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 160ms ease-out, box-shadow 160ms ease-out,
+              background-color 160ms ease-out, border-color 160ms ease-out;
+}
+.rosh-tl-layer.is-zooming .rosh-tl-label,
+.rosh-tl-layer.is-zooming .rosh-tl-lead,
+.rosh-tl-layer.is-zooming .rosh-tl-cspan,
+.rosh-tl-layer.is-zooming .rosh-tl-tick,
+.rosh-tl-layer.is-zooming .rosh-tl-month,
+.rosh-tl-layer.is-zooming .rosh-tl-rulercut,
+.rosh-tl-layer.is-zooming .rosh-tl-cut,
+.rosh-tl-layer.is-zooming .rosh-tl-todayline,
+.rosh-tl-layer.is-zooming .rosh-tl-fill {
+  transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1),
+              width 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rosh-tl-layer.is-zooming .rosh-tl-mark,
+  .rosh-tl-layer.is-zooming .rosh-tl-label,
+  .rosh-tl-layer.is-zooming .rosh-tl-lead,
+  .rosh-tl-layer.is-zooming .rosh-tl-cspan,
+  .rosh-tl-layer.is-zooming .rosh-tl-tick,
+  .rosh-tl-layer.is-zooming .rosh-tl-month,
+  .rosh-tl-layer.is-zooming .rosh-tl-rulercut,
+  .rosh-tl-layer.is-zooming .rosh-tl-cut,
+  .rosh-tl-layer.is-zooming .rosh-tl-todayline,
+  .rosh-tl-layer.is-zooming .rosh-tl-fill { transition: none !important; }
+  .rosh-tl-draw, .rosh-tl-drawy, .rosh-tl-fade, .rosh-tl-pop {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+  /* The two draws rest at full scale; the pop rests at the node's own transform,
+     which carries its translate and rotate, so it cannot be reset to `none`. */
+  .rosh-tl-draw, .rosh-tl-drawy { transform: none !important; }
+  /* The ring RESTS invisible — it ends at opacity 0 — so the entrance treatment
+     above would pin a halo at an opacity it never reaches while animating. */
+  .rosh-tl-pulse.is-on { animation: none !important; opacity: 0 !important; }
+  /* Colour still moves; scale does not. */
+  .rosh-tl-mark { transition: background-color 160ms ease-out, border-color 160ms ease-out !important; }
+  .rosh-tl-mark:hover, .rosh-tl-mark:focus-visible { --rosh-tl-sc: 1; }
+  /* The thumb still MOVES under reduced motion — it just arrives. */
+  .rosh-tl-thumb, .rosh-tl-chip, .rosh-tl-fill.is-tweened { transition: none !important; }
+}
+
+/* Backgrounds */
+[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
+[data-theme="dark"] .bg-gray-50 { background-color: var(--surface-sunken) !important; }
+[data-theme="dark"] .bg-gray-100 { background-color: var(--surface) !important; }
+[data-theme="dark"] .bg-gray-200 { background-color: var(--surface-raised) !important; }
+
+/* Text */
+[data-theme="dark"] .text-gray-900 { color: var(--ink-strongest) !important; }
+[data-theme="dark"] .text-gray-800 { color: var(--ink-strong) !important; }
+[data-theme="dark"] .text-gray-700 { color: var(--ink) !important; }
+[data-theme="dark"] .text-gray-600 { color: var(--ink-muted) !important; }
+[data-theme="dark"] .text-gray-500 { color: var(--ink-faint) !important; }
+[data-theme="dark"] .text-gray-400 { color: var(--ink-faintest) !important; }
+
+/* Borders */
+[data-theme="dark"] .border-gray-200 { border-color: var(--line) !important; }
+[data-theme="dark"] .border-gray-300 { border-color: var(--line-strong) !important; }
+[data-theme="dark"] .border-gray-100 { border-color: var(--line-subtle) !important; }
+
+/* Rings. `ring-gray-100` is a cut-out rather than a line: it rings a mark in
+   the colour of the `bg-gray-100` surface under it (PageTabBar's unsaved dot,
+   on the tab strip), so it takes that surface's token. Without this it kept
+   its light gray and drew a pale halo on the dark strip. */
+[data-theme="dark"] .ring-gray-100 { --tw-ring-color: var(--surface) !important; }
+
+/* Cards, shadows, tables */
+[data-theme="dark"] .shadow { --tw-shadow-color: rgba(0,0,0,0.4) !important; }
+[data-theme="dark"] .shadow-lg { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
+[data-theme="dark"] .shadow-xl { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
+[data-theme="dark"] .shadow-2xl { --tw-shadow-color: rgba(0,0,0,0.6) !important; }
+[data-theme="dark"] .divide-gray-200 > :not(:last-child) { border-color: var(--line) !important; }
+[data-theme="dark"] .divide-gray-100 > :not(:last-child) { border-color: var(--line-subtle) !important; }
+
+/* Hover states */
+[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--line-subtle) !important; }
+[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-raised) !important; }
+[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--line-strong) !important; }
+
+/* Blue hover states — used by menu items, profile row, etc.
+   In dark mode swap the near-white bg for a dark blue tint and the dark
+   blue text for a light shade so highlighted items stay readable. */
+[data-theme="dark"] .bg-blue-50,
+[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
+[data-theme="dark"] .text-blue-700,
+[data-theme="dark"] .hover\:text-blue-700:hover { color: #bfdbfe !important; }
+[data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
+[data-theme="dark"] .text-blue-800 { color: #bfdbfe !important; }
+
+/* Bare *-100 highlight backgrounds + *-700 text (status pills, badges, avatars,
+   dialog icons) have no dark override otherwise, so they keep their bright
+   light-mode value and wash out the text on top. Mute the background to a low
+   tint and lighten the text so highlighted content stays readable in dark mode. */
+[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
+
+/* Tailwind's `!` important modifier compiles to distinct class names
+   (`.\!bg-blue-100` etc.), so the EditableGrid selection utilities escape the
+   remaps above: the selection keeps its light-mode background while the cell
+   text goes light, making selected cells unreadable in dark mode. The
+   attribute selector outranks the utility's own !important. */
+[data-theme="dark"] .\!bg-blue-50 { background-color: rgba(59, 130, 246, 0.26) !important; }
+[data-theme="dark"] .\!bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
+[data-theme="dark"] .\!bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
+[data-theme="dark"] .\!text-gray-700 { color: var(--ink) !important; }
+[data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
+[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
+[data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; }
+[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
+[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
+[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; }
+[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
+[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; }
+[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
+[data-theme="dark"] .text-green-700 { color: #86efac !important; }
+/* The /70 form is a separate class, so the remap above misses it. The amber
+   block already covers its own /30../50 tints; green did not, and dark green
+   on the green tint was the result. */
+[data-theme="dark"] .text-green-700\/70 { color: rgba(134, 239, 172, 0.7) !important; }
+[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; }
+[data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; }
+[data-theme="dark"] .text-amber-700 { color: #fcd34d !important; }
+[data-theme="dark"] .text-yellow-700 { color: #fde047 !important; }
+[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }
+[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
+[data-theme="dark"] .text-indigo-700 { color: #a5b4fc !important; }
+[data-theme="dark"] .text-purple-700 { color: #d8b4fe !important; }
+
+/* Brighten taskbar button text so it stays readable on dark glass.
+   The default override (var(--ink-muted)) is too dim for short button labels. */
+[data-theme="dark"] .text-gray-600 { color: var(--ink) !important; }
+
+/* Translucent button backgrounds — Tailwind generates separate classes for the
+   /40 /60 alpha variants (bg-gray-50\/40 etc.) so the bare .bg-gray-50 override
+   doesn't match. Override them explicitly with dark equivalents so taskbar
+   tabs and the start-menu button don't look too bright in Dark mode. */
+[data-theme="dark"] .bg-gray-50\/40 { background-color: rgba(24, 24, 37, 0.4) !important; }
+/* /50 and /60 are used as in-window PANEL surfaces (sidebars, form sections,
+   popup cards) — keep them solid in dark so a bright wallpaper can't bleed
+   through the window glass and wash them out. */
+[data-theme="dark"] .bg-gray-50\/50 { background-color: var(--surface-sunken) !important; }
+[data-theme="dark"] .bg-gray-50\/60 { background-color: var(--surface-sunken) !important; }
+[data-theme="dark"] .hover\:bg-gray-50\/50:hover { background-color: var(--surface-sunken) !important; }
+[data-theme="dark"] .bg-gray-100\/40 { background-color: rgba(30, 30, 46, 0.4) !important; }
+[data-theme="dark"] .bg-gray-100\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
+[data-theme="dark"] .bg-gray-200\/40 { background-color: rgba(49, 50, 68, 0.4) !important; }
+[data-theme="dark"] .bg-gray-200\/50 { background-color: rgba(49, 50, 68, 0.5) !important; }
+[data-theme="dark"] .bg-blue-100\/60 { background-color: rgba(59, 130, 246, 0.22) !important; }
+/* Pale-blue tinted panels (selected rows, inline-reply box) — scale the
+   .bg-blue-50 dark tint (0.26) down through the alpha steps. */
+[data-theme="dark"] .bg-blue-50\/30 { background-color: rgba(59, 130, 246, 0.10) !important; }
+[data-theme="dark"] .bg-blue-50\/40 { background-color: rgba(59, 130, 246, 0.12) !important; }
+[data-theme="dark"] .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.15) !important; }
+[data-theme="dark"] .bg-blue-50\/60 { background-color: rgba(59, 130, 246, 0.18) !important; }
+[data-theme="dark"] .border-gray-200\/40 { border-color: rgba(69, 71, 90, 0.4) !important; }
+[data-theme="dark"] .border-gray-300\/40 { border-color: rgba(88, 91, 112, 0.4) !important; }
+[data-theme="dark"] .border-blue-400\/60 { border-color: rgba(96, 165, 250, 0.45) !important; }
+[data-theme="dark"] .hover\:bg-gray-200\/40:hover { background-color: rgba(49, 50, 68, 0.4) !important; }
+
+/* White alpha variants — the bare .bg-white override doesn't match the /50../95
+   alpha classes, so cards (the Widget gallery), the Exposé snapshot title pill
+   and desktop overlays stayed bright white in dark mode while their (remapped,
+   light) text washed out. Map them to the dark window tint. */
+[data-theme="dark"] .bg-white\/50 { background-color: rgba(30, 30, 46, 0.5) !important; }
+[data-theme="dark"] .bg-white\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
+[data-theme="dark"] .bg-white\/70 { background-color: rgba(30, 30, 46, 0.7) !important; }
+[data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 30, 46, 0.85) !important; }
+[data-theme="dark"] .bg-white\/90 { background-color: rgba(30, 30, 46, 0.92) !important; }
+[data-theme="dark"] .bg-white\/95 { background-color: rgba(30, 30, 46, 0.95) !important; }
+[data-theme="dark"] .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.22) !important; }
+
+/* Inputs — apply the form-input dark styling, but skip elements that
+   explicitly opt into a transparent background (e.g. the start-menu
+   search) so they keep their parent's frosted-glass tile. */
+[data-theme="dark"] input:not(.bg-transparent):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
+[data-theme="dark"] select:not(.bg-transparent),
+[data-theme="dark"] textarea:not(.bg-transparent) {
+  background-color: var(--surface-sunken) !important;
+  border-color: var(--line-strong) !important;
+  color: var(--ink-strongest) !important;
+}
+
+/* iOS auto-zooms the viewport when a focused form control's computed
+   font-size is below 16px. On phones/tablets (same breakpoint as
+   useIsMobile) pin text-bearing controls to 16px so focusing them never
+   triggers the zoom. This keeps pinch-zoom working, unlike a
+   `maximum-scale=1` viewport lock. !important beats Tailwind text-*
+   utilities; the :not() list mirrors the dark-input rule above and skips
+   controls that don't take a text caret. */
+@media (max-width: 767px), (pointer: coarse) {
+  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
+  select,
+  textarea {
+    font-size: 16px !important;
+  }
+}
+
+/* Status badges — tone down brightness in dark mode (matches StatusBadge.tsx semantic groups) */
+[data-theme="dark"] .bg-gray-100.text-gray-800 { background-color: var(--surface-raised) !important; color: var(--ink) !important; }
+[data-theme="dark"] .bg-gray-300.text-gray-800 { background-color: var(--line-strong) !important; color: var(--ink-strongest) !important; }
+[data-theme="dark"] .bg-green-100.text-green-800 { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
+[data-theme="dark"] .bg-blue-100.text-blue-800 { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
+[data-theme="dark"] .bg-indigo-100.text-indigo-800 { background-color: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
+[data-theme="dark"] .bg-sky-100.text-sky-800 { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; }
+[data-theme="dark"] .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.18) !important; color: #fde68a !important; }
+[data-theme="dark"] .bg-orange-100.text-orange-800 { background-color: rgba(249, 115, 22, 0.18) !important; color: #fdba74 !important; }
+[data-theme="dark"] .bg-red-100.text-red-800 { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
+
+/* ── Extended dark-mode tint families ────────────────────────────────
+   Upstreamed 2026-06-13 from the admin portal's 2026-06-10 audit so all
+   consumers share one source of truth. Every hue used by chips/badges
+   (tag colors, group colors, status accents, deal stages), notice
+   banners, verdict panels, row tints and danger buttons gets the same
+   scale as the families above: -50 → 10% tint, -100 → 18%, -200 → ~30%,
+   borders -200 → 32% / -300 → 45%, and dark inks flip to the
+   -400/-300/-200 light end of their scale.
+   Deliberately NOT remapped: game surfaces that read as intentionally
+   light (Calculator LCD bg-slate-200/text-slate-600/800, 2048/Chess
+   tiles, weather gradients), the Customization theme-preview swatches
+   (bg-pink-50/90, bg-green-50/90, bg-blue-50/90, bg-gray-200/90,
+   bg-pink-200, bg-green-200 — they must show each theme's real colors),
+   and low white/black alphas used as glass highlights on wallpaper. */
+
+/* Red */
+[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.16) !important; }
+[data-theme="dark"] .active\:bg-red-50:active { background-color: rgba(239, 68, 68, 0.16) !important; }
+[data-theme="dark"] .bg-red-50\/30 { background-color: rgba(239, 68, 68, 0.06) !important; }
+[data-theme="dark"] .bg-red-50\/50 { background-color: rgba(239, 68, 68, 0.08) !important; }
+[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.22) !important; }
+[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }
+[data-theme="dark"] .border-red-300,
+[data-theme="dark"] .hover\:border-red-300:hover { border-color: rgba(239, 68, 68, 0.45) !important; }
+[data-theme="dark"] .text-red-600,
+[data-theme="dark"] .hover\:text-red-600:hover { color: #f87171 !important; }
+[data-theme="dark"] .hover\:text-red-700:hover { color: #fca5a5 !important; }
+[data-theme="dark"] .text-red-800,
+[data-theme="dark"] .hover\:text-red-800:hover { color: #fecaca !important; }
+[data-theme="dark"] .text-red-900 { color: #fecaca !important; }
+
+/* Amber */
+[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.14) !important; }
+[data-theme="dark"] .bg-amber-50\/30 { background-color: rgba(245, 158, 11, 0.06) !important; }
+[data-theme="dark"] .bg-amber-50\/40 { background-color: rgba(245, 158, 11, 0.07) !important; }
+[data-theme="dark"] .bg-amber-50\/50 { background-color: rgba(245, 158, 11, 0.08) !important; }
+[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.24) !important; }
+[data-theme="dark"] .bg-amber-200 { background-color: rgba(245, 158, 11, 0.28) !important; }
+[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; }
+[data-theme="dark"] .border-amber-300,
+[data-theme="dark"] .hover\:border-amber-300:hover { border-color: rgba(245, 158, 11, 0.45) !important; }
+[data-theme="dark"] .text-amber-600,
+[data-theme="dark"] .hover\:text-amber-600:hover { color: #fbbf24 !important; }
+[data-theme="dark"] .text-amber-800 { color: #fde68a !important; }
+[data-theme="dark"] .text-amber-900 { color: #fde68a !important; }
+
+/* Yellow */
+[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.10) !important; }
+[data-theme="dark"] .bg-yellow-50\/50 { background-color: rgba(234, 179, 8, 0.08) !important; }
+[data-theme="dark"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35) !important; }
+[data-theme="dark"] .border-yellow-300 { border-color: rgba(234, 179, 8, 0.45) !important; }
+[data-theme="dark"] .text-yellow-600,
+[data-theme="dark"] .hover\:text-yellow-600:hover { color: #facc15 !important; }
+[data-theme="dark"] .text-yellow-900 { color: #fef08a !important; }
+
+/* Green / emerald */
+[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.14) !important; }
+[data-theme="dark"] .bg-green-50\/40 { background-color: rgba(34, 197, 94, 0.06) !important; }
+[data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.32) !important; }
+[data-theme="dark"] .border-green-300,
+[data-theme="dark"] .hover\:border-green-300:hover { border-color: rgba(34, 197, 94, 0.45) !important; }
+[data-theme="dark"] .text-green-600,
+[data-theme="dark"] .hover\:text-green-600:hover { color: #4ade80 !important; }
+[data-theme="dark"] .text-green-900,
+[data-theme="dark"] .hover\:text-green-800:hover { color: #bbf7d0 !important; }
+[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.24) !important; }
+[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.32) !important; }
+[data-theme="dark"] .border-emerald-300 { border-color: rgba(16, 185, 129, 0.45) !important; }
+[data-theme="dark"] .text-emerald-600 { color: #34d399 !important; }
+[data-theme="dark"] .text-emerald-800 { color: #a7f3d0 !important; }
+
+/* Orange */
+[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.14) !important; }
+[data-theme="dark"] .hover\:bg-orange-200:hover { background-color: rgba(249, 115, 22, 0.30) !important; }
+[data-theme="dark"] .border-orange-200 { border-color: rgba(249, 115, 22, 0.32) !important; }
+[data-theme="dark"] .border-orange-300,
+[data-theme="dark"] .hover\:border-orange-300:hover { border-color: rgba(249, 115, 22, 0.45) !important; }
+[data-theme="dark"] .text-orange-600 { color: #fb923c !important; }
+[data-theme="dark"] .text-orange-900 { color: #fed7aa !important; }
+
+/* Sky / teal / cyan */
+[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.10) !important; }
+[data-theme="dark"] .border-sky-300 { border-color: rgba(14, 165, 233, 0.45) !important; }
+[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.10) !important; }
+[data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18) !important; }
+[data-theme="dark"] .text-teal-600 { color: #2dd4bf !important; }
+[data-theme="dark"] .text-teal-700 { color: #5eead4 !important; }
+[data-theme="dark"] .text-teal-800 { color: #99f6e4 !important; }
+[data-theme="dark"] .text-cyan-600 { color: #22d3ee !important; }
+
+/* Purple / violet */
+[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.10) !important; }
+[data-theme="dark"] .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.14) !important; }
+[data-theme="dark"] .border-purple-200 { border-color: rgba(168, 85, 247, 0.32) !important; }
+[data-theme="dark"] .border-purple-300,
+[data-theme="dark"] .hover\:border-purple-300:hover { border-color: rgba(168, 85, 247, 0.45) !important; }
+[data-theme="dark"] .text-purple-600 { color: #c084fc !important; }
+[data-theme="dark"] .text-purple-800,
+[data-theme="dark"] .text-purple-900 { color: #e9d5ff !important; }
+[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18) !important; }
+[data-theme="dark"] .border-violet-300 { border-color: rgba(139, 92, 246, 0.45) !important; }
+[data-theme="dark"] .text-violet-600 { color: #a78bfa !important; }
+[data-theme="dark"] .text-violet-700 { color: #c4b5fd !important; }
+[data-theme="dark"] .text-violet-800 { color: #ddd6fe !important; }
+
+/* Pink / rose */
+[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.18) !important; }
+[data-theme="dark"] .border-pink-200 { border-color: rgba(236, 72, 153, 0.32) !important; }
+[data-theme="dark"] .border-pink-300 { border-color: rgba(236, 72, 153, 0.45) !important; }
+[data-theme="dark"] .text-pink-600 { color: #f472b6 !important; }
+[data-theme="dark"] .text-pink-800,
+[data-theme="dark"] .text-pink-900 { color: #fbcfe8 !important; }
+[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
+[data-theme="dark"] .text-rose-700 { color: #fda4af !important; }
+[data-theme="dark"] .text-rose-800 { color: #fecdd3 !important; }
+
+/* Indigo / slate */
+[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
+/* An OPACITY MODIFIER makes a different class name, so the remap above does
+   not reach `bg-indigo-50/40`. Same escape the `!` important-modifier makes,
+   handled for `.\!bg-blue-*` earlier in this sheet, and already handled for
+   amber's own `/30../50` tints below. `/40` and `/50`
+   of a -50 tint both land inside the base tint's own alpha, so they take it
+   rather than a proportional slice: a near-white lavender panel under the dark
+   sheet's light body text is unreadable, which is what shipped. */
+[data-theme="dark"] .bg-indigo-50\/40 { background-color: rgba(99, 102, 241, 0.12) !important; }
+[data-theme="dark"] .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, 0.15) !important; }
+[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.25) !important; }
+[data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; }
+[data-theme="dark"] .border-indigo-100 { border-color: rgba(99, 102, 241, 0.30) !important; }
+[data-theme="dark"] .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35) !important; }
+[data-theme="dark"] .border-indigo-300 { border-color: rgba(99, 102, 241, 0.45) !important; }
+[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } /* slate-600/800 left for the Calculator LCD */
+[data-theme="dark"] .border-slate-300 { border-color: rgba(148, 163, 184, 0.35) !important; }
+
+/* Blue — gaps beyond the accent remaps above. Hover/active steps sit one
+   ladder step above their resting tint (base .26 → active .30; the /30../50
+   alpha ladder steps 0.10/0.12/0.15 → hovers 0.12/0.15/0.18). */
+[data-theme="dark"] .bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
+[data-theme="dark"] .active\:bg-blue-200:active { background-color: rgba(59, 130, 246, 0.40) !important; }
+[data-theme="dark"] .bg-blue-200\/60 { background-color: rgba(59, 130, 246, 0.20) !important; }
+[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
+[data-theme="dark"] .active\:bg-blue-50:active { background-color: rgba(59, 130, 246, 0.30) !important; }
+[data-theme="dark"] .hover\:bg-blue-50\/30:hover { background-color: rgba(59, 130, 246, 0.12) !important; }
+[data-theme="dark"] .hover\:bg-blue-50\/40:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
+[data-theme="dark"] .hover\:bg-blue-50\/50:hover { background-color: rgba(59, 130, 246, 0.18) !important; }
+[data-theme="dark"] .border-blue-100 { border-color: rgba(59, 130, 246, 0.22) !important; }
+[data-theme="dark"] .border-blue-200,
+[data-theme="dark"] .hover\:border-blue-200:hover { border-color: rgba(59, 130, 246, 0.32) !important; }
+[data-theme="dark"] .border-blue-300,
+[data-theme="dark"] .hover\:border-blue-300:hover { border-color: rgba(59, 130, 246, 0.45) !important; }
+[data-theme="dark"] .border-blue-300\/50 { border-color: rgba(59, 130, 246, 0.25) !important; }
+[data-theme="dark"] .text-blue-900 { color: #bfdbfe !important; }
+[data-theme="dark"] .hover\:text-blue-600:hover { color: #93c5fd !important; }
+[data-theme="dark"] .hover\:text-blue-800:hover { color: #bfdbfe !important; }
+/* File-input buttons (file: compiles to ::file-selector-button) */
+[data-theme="dark"] .file\:bg-blue-50::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
+[data-theme="dark"] .file\:text-blue-700::file-selector-button { color: #bfdbfe !important; }
+[data-theme="dark"] .hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
+
+/* Gray interaction-state variants (separate class names from the bare remaps) */
+[data-theme="dark"] .hover\:text-gray-600:hover,
+[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--ink) !important; }
+[data-theme="dark"] .hover\:text-gray-800:hover { color: var(--ink-strong) !important; }
+[data-theme="dark"] .hover\:text-gray-900:hover,
+[data-theme="dark"] .active\:text-gray-900:active { color: var(--ink-strongest) !important; }
+[data-theme="dark"] .active\:bg-gray-100:active { background-color: var(--surface-raised) !important; }
+[data-theme="dark"] .active\:bg-gray-200:active { background-color: var(--line-strong) !important; }
+[data-theme="dark"] .active\:bg-gray-300:active,
+[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: #585b70 !important; }
+[data-theme="dark"] .disabled\:bg-gray-100:disabled { background-color: var(--surface) !important; }
+[data-theme="dark"] .disabled\:bg-gray-200:disabled { background-color: var(--surface-raised) !important; }
+[data-theme="dark"] .hover\:bg-gray-200\/50:hover { background-color: rgba(69, 71, 90, 0.5) !important; }
+[data-theme="dark"] .even\:bg-gray-50\/50:nth-child(even) { background-color: rgba(24, 24, 37, 0.5) !important; }
+[data-theme="dark"] .border-gray-50,
+[data-theme="dark"] .divide-gray-50 > :not(:last-child) { border-color: var(--line-subtle) !important; }
+[data-theme="dark"] .border-gray-200\/50 { border-color: rgba(49, 50, 68, 0.6) !important; }
+[data-theme="dark"] .hover\:border-gray-200:hover { border-color: var(--surface-raised) !important; }
+[data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--line-strong) !important; }
+
+/* White panel surfaces / solid black ink. hover-to-white means "emphasize",
+   which on dark glass means a solid panel tint; hover-to-black ink flips to
+   brighter, not darker (e.g. the taskbar bell). */
+[data-theme="dark"] .bg-white\/85 { background-color: rgba(30, 30, 46, 0.85) !important; }
+[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--surface) !important; }
+[data-theme="dark"] .text-black { color: var(--ink-strongest) !important; }
+[data-theme="dark"] .hover\:text-black:hover { color: #ffffff !important; }
+
+/* Markdown — the clamped note (react-os-shell/markdown, `clamp`).
+
+   The fade MASKS the text rather than laying a coloured gradient over it. A
+   gradient has to know what colour to fade to, and there is no answer that
+   survives a tinted accent theme or dark mode — it shows as a pale band across
+   the bottom of the note. A mask fades the ink itself and needs to know
+   nothing about the surface.
+
+   `.rosmd-fade` is applied only when the clamped content actually OVERFLOWS,
+   measured after layout in the component: a note that is long in characters
+   but short on screen would otherwise get a fade under nothing. */
+.rosmd-clamp {
+  max-height: 8rem;
+  overflow: hidden;
+}
+.rosmd-fade {
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.75rem), transparent);
+  mask-image: linear-gradient(to bottom, black calc(100% - 1.75rem), transparent);
+}
+
+/* Scrollbar */
+/* Force visible scrollbars on editable grids (macOS hides them by default) */
+.grid-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+.grid-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
+.grid-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #f1f5f9; }
+.grid-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+.grid-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }
+
+[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
+[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-sunken); }
+[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #585b70; }
+
+/* ── Opacity-modified utilities ───────────────────────────────────────────
+   A Tailwind opacity modifier makes a DIFFERENT class name, so every remap in
+   this sheet — all written against bare class names — stops at the base. The
+   same escape the `!` important-modifier makes for `.\!bg-blue-*` above.
+
+   Everything below is a class whose BASE this sheet already remaps: the colour
+   was already judged to need a dark treatment, and only the modifier escaped.
+   The values are the ones a consumer portal had to hand-write locally and has
+   been shipping, so they are tuned rather than derived: a `/70` of a tint does
+   NOT take 70% of the tint's alpha, because a proportional slice of an already
+   subtle tint disappears. Gray is the exception and does take a real alpha,
+   because there the utility paints a surface rather than a tint over one. */
+[data-theme="dark"] .bg-gray-50\/70 { background-color: rgba(24, 24, 37, 0.7) !important; }
+[data-theme="dark"] .bg-gray-50\/80 { background-color: rgba(24, 24, 37, 0.8) !important; }
+[data-theme="dark"] .bg-gray-50\/95 { background-color: rgba(24, 24, 37, 0.95) !important; }
+[data-theme="dark"] .bg-gray-100\/90 { background-color: rgba(30, 30, 46, 0.9) !important; }
+[data-theme="dark"] .bg-gray-200\/80 { background-color: rgba(49, 50, 68, 0.8) !important; }
+[data-theme="dark"] .hover\:bg-gray-200\/70:hover { background-color: rgba(49, 50, 68, 0.7) !important; }
+[data-theme="dark"] .hover\:bg-gray-200\/90:hover { background-color: rgba(49, 50, 68, 0.9) !important; }
+[data-theme="dark"] .border-gray-200\/60 { border-color: rgba(69, 71, 90, 0.6) !important; }
+[data-theme="dark"] .bg-blue-50\/80 { background-color: rgba(59, 130, 246, 0.24) !important; }
+[data-theme="dark"] .bg-blue-50\/90 { background-color: rgba(59, 130, 246, 0.26) !important; }
+[data-theme="dark"] .text-blue-600\/70 { color: rgba(147, 197, 253, 0.7) !important; }
+[data-theme="dark"] .text-blue-700\/70 { color: rgba(191, 219, 254, 0.7) !important; }
+[data-theme="dark"] .text-blue-800\/80 { color: rgba(191, 219, 254, 0.8) !important; }
+[data-theme="dark"] .text-blue-900\/60 { color: rgba(191, 219, 254, 0.6) !important; }
+[data-theme="dark"] .bg-amber-200\/70 { background-color: rgba(245, 158, 11, 0.20) !important; }
+[data-theme="dark"] .hover\:bg-amber-50\/70:hover { background-color: rgba(245, 158, 11, 0.12) !important; }
+[data-theme="dark"] .text-amber-800\/80 { color: rgba(253, 230, 138, 0.8) !important; }
+[data-theme="dark"] .text-green-700\/80 { color: rgba(134, 239, 172, 0.8) !important; }