efficient-shell 4.127.0 → 4.131.0

package/dist/ui.css

@@ -16,14 +16,31 @@
  *
  * 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
+ *   - 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.
+ *
+ * Which element says "dark": `<html data-theme="dark">` — what `useTheme()`
+ * stamps — OR `<html class="dark">`, the convention of next-themes, shadcn/ui
+ * and Tailwind's own class strategy. Every dark rule is scoped by
+ * `:is([data-theme="dark"], .dark)`, which has the specificity of either one
+ * alone (0,1,0), so no cascade outcome moved when the alias arrived. An app
+ * whose theme switcher sets the class gets the kit's dark mode without a
+ * second attribute to keep in step. Keep the two in that one `:is()`; a rule
+ * written against only one of them is dark in half the apps.
+ * `tests/darkClassAlias.test.ts` holds every dark selector to it.
+ *
+ * Rules that style BARE ELEMENTS — the dark form controls, the coarse-pointer
+ * 16px rule, the dark scrollbars — reach markup the kit did not render. In a
+ * portal built on the kit that is the point; in an app with its own design
+ * system it restyles the app's inputs. `<html class="rosh-host-elements">`
+ * turns those three off and leaves the kit to its own components; see
+ * "Bare elements" further down.
  */
 
 @import "./themes.css";
@@ -36,22 +53,29 @@
  * 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.
+ * A consumer's `@theme` wins, WHEREVER it sits relative to this import. That
+ * is what `default` buys: Tailwind's own theme is declared `@theme default`,
+ * and a default value is replaced by any plain `@theme` declaration of the same
+ * key, earlier or later in the cascade, while a later default only replaces an
+ * earlier default. So this block overrides Tailwind's defaults (it is later)
+ * and yields to the app's own theme (that is not a default at all).
  *
- * "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.
+ * Through 4.127.0 this was a plain `@theme`, and the later declaration won, so
+ * import ORDER was the contract: a portal that declared `--font-sans` and then
+ * imported the kit below it had its typeface silently reset to the system
+ * stack, and its radii to these, with nothing in the diff to explain it. The
+ * five EFFICIENT portals all import the kit near the top of `index.css` and
+ * declare after it, so for them the change renders nothing. An app that
+ * imports its own design system first — a square-cornered one setting every
+ * `--radius-*` to 0, say — no longer has to know about the order to keep it.
+ * `tests/themeDefaultYields.test.ts` compiles both orders with Tailwind.
  *
  * 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 {
+@theme default {
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
@@ -125,12 +149,16 @@ html.rosh-reduce-transparency *::after {
  * 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`.
+ * Adding light values was render-neutral when it landed — no rule outside a
+ * `[data-theme="dark"]` scope read any of these twelve. 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`.
+ *
+ * They are load-bearing in light now: the timeline card is drawn from them in
+ * both themes, and the frosted glass is tinted from `--surface` (through
+ * `--rosh-glass-surface`, below). Change a light value and those move with it,
+ * which is the point — it is how a host gives the kit its own neutrals.
  *
  * 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
@@ -154,7 +182,7 @@ html.rosh-reduce-transparency *::after {
 /* ═══════════════════════════════════════════════════
    Theme: Dark
    ═══════════════════════════════════════════════════ */
-[data-theme="dark"] {
+:is([data-theme="dark"], .dark) {
   color-scheme: dark;
 
   /*
@@ -237,7 +265,7 @@ html.rosh-reduce-transparency *::after {
   --viz-surface: #ffffff;
 }
 
-[data-theme="dark"] {
+:is([data-theme="dark"], .dark) {
   --viz-series-1: #3987e5;
   --viz-series-2: #d95926;
   --viz-series-3: #199e70;
@@ -337,7 +365,7 @@ html.rosh-reduce-transparency *::after {
 }
 
 /* Only the ink moves. The washes above hold, because they are transparent. */
-[data-theme="dark"] {
+:is([data-theme="dark"], .dark) {
   --status-success-soft-ink: #86efac;
   --status-active-soft-ink: #93c5fd;
   --status-queued-soft-ink: #a5b4fc;
@@ -428,6 +456,209 @@ html.rosh-reduce-transparency *::after {
   --tl-soft: color-mix(in srgb, var(--tl-accent) 16%, transparent);
 }
 
+/* ── Focus ──────────────────────────────────────────────────────────────────
+ * Every focus indicator the kit draws, as tokens, and the one switch that hands
+ * focus to the host app instead (`rosh-host-focus`, the next block down).
+ *
+ * ON `:focus-visible`, NOT `:focus`. The kit's controls used to ring on
+ * `:focus`, which a mouse click satisfies, so every Button, Checkbox and Switch
+ * drew its ring when it was clicked — and a host whose own focus rule keys on
+ * `:focus-visible`, the state the browser draws its own outline in, could not
+ * make the two agree. A text field matches `:focus-visible` on a click as well:
+ * it takes typing, so the browser always shows where the caret went. That is why
+ * Input, Textarea, SearchableSelect and the rest look exactly as they did. What
+ * changed is the controls a click does not type into: they no longer ring on a
+ * click, and ring as they always did on Tab.
+ *
+ * THE COLOURS ARE TOKENS, and each default is character for character what the
+ * Tailwind utility it replaced compiles to — `focus:ring-blue-400/30` is
+ * `color-mix(in oklab, var(--color-blue-400) 30%, transparent)`. Tailwind gives
+ * the token the same `@supports` fallback it gives the utility, because it
+ * polyfills `color-mix()` in any CSS it builds, this file included.
+ * `tests/focusVisible.test.ts` compiles both and compares them.
+ *
+ * Nine looks a lot for one ring. It is what the kit actually draws, and folding
+ * two of them together would have been a restyle shipped as a refactor:
+ *
+ *   --rosh-focus-ring                  blue-400 at 30%  a field; an outlined or
+ *                                                       quiet Button; Checkbox; Radio
+ *   --rosh-focus-ring-strong           blue-400 at 40%  a filled control: the primary
+ *                                                       Button, Switch, TileButton,
+ *                                                       a badge's close
+ *   --rosh-focus-ring-solid            blue-400         a control with no edge of its
+ *                                                       own: a dialog's close, a
+ *                                                       calendar day, a table row, a
+ *                                                       crumb, a step, a menu trigger
+ *   --rosh-focus-ring-deep             blue-500         the chart family (plot, legend,
+ *                                                       table), a chip's remove, the
+ *                                                       date-range field
+ *   --rosh-focus-ring-accent           blue-500         HelpCenter's search and the
+ *                                                       prompt dialog's field: the two
+ *                                                       rings the accent themes always
+ *                                                       recoloured (themes.css still does)
+ *   --rosh-focus-ring-zone             #3b82f6 at 45%   the upload zones and their
+ *                                                       thumbnails, which drew theirs
+ *                                                       inline, in Tailwind v3's blue
+ *   --rosh-focus-ring-invalid          red-400 at 30%   an invalid field; ghost-danger
+ *   --rosh-focus-ring-invalid-strong   red-400 at 40%   the danger Button
+ *   --rosh-focus-ring-invalid-solid    red-400          the form's error summary
+ *
+ * No dark step. No focus ring was ever remapped for dark, and the translucent
+ * ones composite with whatever surface is under them — the argument the `-soft`
+ * status washes make.
+ */
+:root {
+  --rosh-focus-ring: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
+  --rosh-focus-ring-strong: color-mix(in oklab, var(--color-blue-400) 40%, transparent);
+  --rosh-focus-ring-solid: var(--color-blue-400);
+  --rosh-focus-ring-deep: var(--color-blue-500);
+  --rosh-focus-ring-accent: var(--color-blue-500);
+  --rosh-focus-ring-zone: rgba(59, 130, 246, 0.45);
+  --rosh-focus-ring-invalid: color-mix(in oklab, var(--color-red-400) 30%, transparent);
+  --rosh-focus-ring-invalid-strong: color-mix(in oklab, var(--color-red-400) 40%, transparent);
+  --rosh-focus-ring-invalid-solid: var(--color-red-400);
+}
+
+/*
+ * THE MARKERS. A ring is a box-shadow, so the browser's own outline still has
+ * to come off the control that wears one — that was the `focus:outline-none`
+ * utility. A utility cannot be taken back: a host's `@layer base` rule loses to
+ * it whatever the host writes. So the suppression lives here, on the
+ * `rosh-focus-ring` class every such control carries, where a selector can stop
+ * matching. `rosh-focus-outline` is the same idea for the two chart controls
+ * that draw an outline rather than a ring.
+ *
+ * `@layer components`, for two reasons that pull opposite ways. It has to
+ * outrank a host's own `@layer base` focus rule while the kit is drawing — the
+ * utility did, and a host that has not opted in must see no change. And it has
+ * to lose to a utility the caller passes through `className`, as anything that
+ * is not a utility should.
+ */
+@layer components {
+  .rosh-focus-ring:focus-visible:not(.rosh-host-focus *) {
+    outline-style: none;
+  }
+  .rosh-focus-outline:focus-visible:not(.rosh-host-focus *) {
+    outline: 2px solid var(--rosh-focus-ring-deep);
+    outline-offset: 2px;
+  }
+}
+
+/* ── Host-owned focus ───────────────────────────────────────────────────────
+ * `<html class="rosh-host-focus">` — or the class on any ancestor of the kit —
+ * hands focus to the host app. The kit then draws no ring and no outline of its
+ * own, and takes nothing away: whatever `:focus-visible` rule the host has (an
+ * outline in its own `--ring`, say, in its `@layer base`) is what every kit
+ * control shows. The timeline family's outlines step aside the same way.
+ *
+ * WHY A CLASS AND NOT JUST TOKENS. A token can make the kit's ring invisible,
+ * but it cannot give the outline back. No value of a custom property means
+ * "whatever the host's rule says" — `revert-layer` written into a variable
+ * reverts the variable, it is never substituted — so the suppression above
+ * would still set `outline-style` and still win. A selector that stops matching
+ * is the only thing that can step aside, and one class is the smallest one.
+ *
+ * Under it every ring token is transparent rather than gone, so a ring utility
+ * still resolves and simply paints nothing; the box-shadow a control already
+ * wears (`shadow-sm`) is untouched. `!important` for the reason the
+ * reduce-transparency block gives: it beats the accent themes' remap of
+ * `--rosh-focus-ring-accent` and a host's own `:root` value, whichever loads
+ * last.
+ */
+.rosh-host-focus {
+  --rosh-focus-ring: transparent !important;
+  --rosh-focus-ring-strong: transparent !important;
+  --rosh-focus-ring-solid: transparent !important;
+  --rosh-focus-ring-deep: transparent !important;
+  --rosh-focus-ring-accent: transparent !important;
+  --rosh-focus-ring-zone: transparent !important;
+  --rosh-focus-ring-invalid: transparent !important;
+  --rosh-focus-ring-invalid-strong: transparent !important;
+  --rosh-focus-ring-invalid-solid: transparent !important;
+}
+
+/* ── Kit colours ────────────────────────────────────────────────────────────
+ * Every colour a kit component used to write as a literal in its TypeScript,
+ * as a token a host can reach. `tests/kitColourLiterals.test.ts` walks
+ * everything `react-os-shell/ui` reaches and fails on a hex, `rgb()`, `hsl()` or
+ * any other colour function written into a string; the allow-list beside it
+ * names the few literals that are data rather than chrome.
+ *
+ * Each default is the literal it replaced, so nothing renders differently.
+ * Where a role from the ramp already said the same thing, the component reads
+ * the role and no token was added: the frosted glass was always `--surface`
+ * (white in light, #1e1e2e in dark) with `--surface-sunken` across its middle
+ * in dark, written out as `rgba()` channels.
+ *
+ * The values that differ in dark are in the block after this one, kept apart
+ * so a selector rewrite of the dark theme touches one short block.
+ */
+:root {
+  /* glassStyle() — every menu, popup, listbox and tooltip in the kit. The
+     surface a popup is tinted from (frosted) or painted in (solid), and the
+     stop across the middle of its gradient. Both chain to the ramp, so a host
+     that restyles `--surface` moves its popups with it; one that wants its
+     popups in a colour of their own sets `--rosh-glass-surface` alone. */
+  --rosh-glass-surface: var(--surface);
+  --rosh-glass-surface-mid: var(--surface);
+  /* The frosted edge and its depth: a white hairline and an inner highlight
+     over two soft drop shadows. */
+  --rosh-glass-border: rgba(255, 255, 255, 0.35);
+  --rosh-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+    0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
+  /* The same popup under `rosh-reduce-transparency`, where it is one opaque
+     `--rosh-glass-surface` with no blur: a plain hairline and one shadow. */
+  --rosh-glass-solid-border: rgba(0, 0, 0, 0.12);
+  --rosh-glass-solid-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+
+  /* Over a picture — the upload thumbnails. A photograph has no theme, so
+     neither has the dark wash white text and glyphs sit on over it: the
+     caption strip, and the remove button a shade lighter. */
+  --rosh-media-scrim: rgba(0, 0, 0, 0.6);
+  --rosh-media-scrim-button: rgba(0, 0, 0, 0.55);
+  /* MediaUploadGrid's halo while a file is dragged over it. */
+  --rosh-drop-ring: rgba(59, 130, 246, 0.5);
+
+  /* BrandMark's plates: the light plate and the framed treatment share one
+     shadow, and the dark plate takes a deeper one to read as lifted. */
+  --rosh-mark-plate-shadow: rgba(0, 0, 0, 0.18);
+  --rosh-mark-plate-shadow-strong: rgba(0, 0, 0, 0.25);
+
+  /* SidebarLayout's resize handle under the pointer, when no custom accent is
+     set — the custom accent's `--accent-500` still wins, read where it is set. */
+  --rosh-resize-handle: #3b82f6;
+
+  /* DonutChart's default segment colours, in assignment order, and its track.
+     NOT the `--viz-series-*` palette above: the donut predates it and its
+     callers have been showing these hues, so this is the same eight in the
+     same order. A host that wants one palette across every chart points these
+     at the series tokens. The track is a translucent slate, read over either
+     theme, which is why nothing here has a dark step. */
+  --rosh-donut-1: #3b82f6;
+  --rosh-donut-2: #22c55e;
+  --rosh-donut-3: #f59e0b;
+  --rosh-donut-4: #ef4444;
+  --rosh-donut-5: #6366f1;
+  --rosh-donut-6: #14b8a6;
+  --rosh-donut-7: #a855f7;
+  --rosh-donut-8: #64748b;
+  --rosh-donut-track: rgba(148, 163, 184, 0.25);
+}
+
+/* ── Kit colours, dark ──────────────────────────────────────────────────────
+ * Only the glass moves. `--rosh-glass-surface` needs no line here: it reads
+ * `--surface`, which the dark ramp already swaps on the same element. Scoped
+ * like every dark rule once the kit follows a `dark` class as well as
+ * `data-theme` (feat/ui-dark-class): `:is()` has the specificity of either. */
+:is([data-theme="dark"], .dark) {
+  --rosh-glass-surface-mid: var(--surface-sunken);
+  --rosh-glass-border: rgba(255, 255, 255, 0.08);
+  --rosh-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4),
+    0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+  --rosh-glass-solid-border: rgba(255, 255, 255, 0.12);
+  --rosh-glass-solid-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
 /* ── 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
@@ -810,7 +1041,11 @@ html.rosh-reduce-transparency *::after {
   --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 {
+/* The track's own focus outline, in the accent. It steps aside under
+   `rosh-host-focus` (see "Host-owned focus") so the host's rule is what a
+   reader sees on these as on every other control. */
+.rosh-tl-node:focus-visible:not(.rosh-host-focus *), .rosh-tl-pill:focus-visible:not(.rosh-host-focus *),
+.rosh-tl-thumb:focus-visible:not(.rosh-host-focus *), .rosh-tl-more:focus-visible:not(.rosh-host-focus *) {
   outline: 2px solid var(--tl-focus); outline-offset: 3px;
 }
 .rosh-tl-pulse {
@@ -898,7 +1133,7 @@ html.rosh-reduce-transparency *::after {
   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-bubble-open:focus-visible:not(.rosh-host-focus *) { 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;
@@ -953,7 +1188,10 @@ html.rosh-reduce-transparency *::after {
   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; }
+/* The radius shapes whichever outline is drawn, the host's included, so it is
+   not behind the host-focus guard the outline itself is. */
+.rosh-tl-open:focus-visible { border-radius: 4px; }
+.rosh-tl-open:focus-visible:not(.rosh-host-focus *) { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
 .rosh-tl-thumb:active { cursor: grabbing; }
 .rosh-tl-thumb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
 .rosh-tl-chip {
@@ -1095,140 +1333,155 @@ html.rosh-reduce-transparency *::after {
 }
 
 /* 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; }
+:is([data-theme="dark"], .dark) .bg-white { background-color: var(--surface) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-50 { background-color: var(--surface-sunken) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-100 { background-color: var(--surface) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .text-gray-900 { color: var(--ink-strongest) !important; }
+:is([data-theme="dark"], .dark) .text-gray-800 { color: var(--ink-strong) !important; }
+:is([data-theme="dark"], .dark) .text-gray-700 { color: var(--ink) !important; }
+:is([data-theme="dark"], .dark) .text-gray-600 { color: var(--ink-muted) !important; }
+:is([data-theme="dark"], .dark) .text-gray-500 { color: var(--ink-faint) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .border-gray-200 { border-color: var(--line) !important; }
+:is([data-theme="dark"], .dark) .border-gray-300 { border-color: var(--line-strong) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .shadow { --tw-shadow-color: rgba(0,0,0,0.4) !important; }
+:is([data-theme="dark"], .dark) .shadow-lg { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
+:is([data-theme="dark"], .dark) .shadow-xl { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
+:is([data-theme="dark"], .dark) .shadow-2xl { --tw-shadow-color: rgba(0,0,0,0.6) !important; }
+:is([data-theme="dark"], .dark) .divide-gray-200 > :not(:last-child) { border-color: var(--line) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-50:hover { background-color: var(--line-subtle) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-100:hover { background-color: var(--surface-raised) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-blue-50,
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .text-blue-700,
+:is([data-theme="dark"], .dark) .hover\:text-blue-700:hover { color: #bfdbfe !important; }
+:is([data-theme="dark"], .dark) .text-blue-600 { color: #93c5fd !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .\!bg-blue-50 { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .\!bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .\!bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
+:is([data-theme="dark"], .dark) .\!text-gray-700 { color: var(--ink) !important; }
+:is([data-theme="dark"], .dark) .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .text-green-700\/70 { color: rgba(134, 239, 172, 0.7) !important; }
+:is([data-theme="dark"], .dark) .text-emerald-700 { color: #6ee7b7 !important; }
+:is([data-theme="dark"], .dark) .text-sky-700 { color: #7dd3fc !important; }
+:is([data-theme="dark"], .dark) .text-amber-700 { color: #fcd34d !important; }
+:is([data-theme="dark"], .dark) .text-yellow-700 { color: #fde047 !important; }
+:is([data-theme="dark"], .dark) .text-orange-700 { color: #fdba74 !important; }
+:is([data-theme="dark"], .dark) .text-red-700 { color: #fca5a5 !important; }
+:is([data-theme="dark"], .dark) .text-indigo-700 { color: #a5b4fc !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-gray-50\/50 { background-color: var(--surface-sunken) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-50\/60 { background-color: var(--surface-sunken) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-50\/50:hover { background-color: var(--surface-sunken) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-100\/40 { background-color: rgba(30, 30, 46, 0.4) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-100\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-200\/40 { background-color: rgba(49, 50, 68, 0.4) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-200\/50 { background-color: rgba(49, 50, 68, 0.5) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/30 { background-color: rgba(59, 130, 246, 0.10) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/40 { background-color: rgba(59, 130, 246, 0.12) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.15) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/60 { background-color: rgba(59, 130, 246, 0.18) !important; }
+:is([data-theme="dark"], .dark) .border-gray-200\/40 { border-color: rgba(69, 71, 90, 0.4) !important; }
+:is([data-theme="dark"], .dark) .border-gray-300\/40 { border-color: rgba(88, 91, 112, 0.4) !important; }
+:is([data-theme="dark"], .dark) .border-blue-400\/60 { border-color: rgba(96, 165, 250, 0.45) !important; }
+:is([data-theme="dark"], .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
+:is([data-theme="dark"], .dark) .bg-white\/50 { background-color: rgba(30, 30, 46, 0.5) !important; }
+:is([data-theme="dark"], .dark) .bg-white\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
+:is([data-theme="dark"], .dark) .bg-white\/70 { background-color: rgba(30, 30, 46, 0.7) !important; }
+:is([data-theme="dark"], .dark) .bg-white\/80 { background-color: rgba(30, 30, 46, 0.85) !important; }
+:is([data-theme="dark"], .dark) .bg-white\/90 { background-color: rgba(30, 30, 46, 0.92) !important; }
+:is([data-theme="dark"], .dark) .bg-white\/95 { background-color: rgba(30, 30, 46, 0.95) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.22) !important; }
+
+/* ── Bare elements ─────────────────────────────────────────────────────────
+   The next three rules style elements by TAG — every input, select and
+   textarea, every scrollbar — so they reach markup the kit never rendered. In
+   a portal built on the kit that is the point: a hand-written input goes dark
+   with the rest. In an app with its own design system it is a restyle of that
+   app's controls (and on a tablet, a 13px console field jumping to 16px).
+
+   `<html class="rosh-host-elements">` turns all three off. The gate is
+   `:where(:root:not(.rosh-host-elements) *)` on the ELEMENT, not on the dark
+   ancestor, so it holds wherever the theme is stamped, and `:where()` adds no
+   specificity — without the class, every one of these matches exactly what it
+   matched before. The kit's own controls stay dark under the class: their
+   utility classes (bg-white, border-gray-300, text-gray-800) are remapped like
+   any other.
+
+   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) {
+:is([data-theme="dark"], .dark) input:not(.bg-transparent):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):where(:root:not(.rosh-host-elements) *),
+:is([data-theme="dark"], .dark) select:not(.bg-transparent):where(:root:not(.rosh-host-elements) *),
+:is([data-theme="dark"], .dark) textarea:not(.bg-transparent):where(:root:not(.rosh-host-elements) *) {
   background-color: var(--surface-sunken) !important;
   border-color: var(--line-strong) !important;
   color: var(--ink-strongest) !important;
@@ -1242,23 +1495,23 @@ html.rosh-reduce-transparency *::after {
    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 {
+  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):where(:root:not(.rosh-host-elements) *),
+  select:where(:root:not(.rosh-host-elements) *),
+  textarea:where(:root:not(.rosh-host-elements) *) {
     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; }
+:is([data-theme="dark"], .dark) .bg-gray-100.text-gray-800 { background-color: var(--surface-raised) !important; color: var(--ink) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-300.text-gray-800 { background-color: var(--line-strong) !important; color: var(--ink-strongest) !important; }
+:is([data-theme="dark"], .dark) .bg-green-100.text-green-800 { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
+:is([data-theme="dark"], .dark) .bg-blue-100.text-blue-800 { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
+:is([data-theme="dark"], .dark) .bg-indigo-100.text-indigo-800 { background-color: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
+:is([data-theme="dark"], .dark) .bg-sky-100.text-sky-800 { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; }
+:is([data-theme="dark"], .dark) .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.18) !important; color: #fde68a !important; }
+:is([data-theme="dark"], .dark) .bg-orange-100.text-orange-800 { background-color: rgba(249, 115, 22, 0.18) !important; color: #fdba74 !important; }
+:is([data-theme="dark"], .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
@@ -1276,113 +1529,113 @@ html.rosh-reduce-transparency *::after {
    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; }
+:is([data-theme="dark"], .dark) .bg-red-50 { background-color: rgba(239, 68, 68, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.16) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-red-50:active { background-color: rgba(239, 68, 68, 0.16) !important; }
+:is([data-theme="dark"], .dark) .bg-red-50\/30 { background-color: rgba(239, 68, 68, 0.06) !important; }
+:is([data-theme="dark"], .dark) .bg-red-50\/50 { background-color: rgba(239, 68, 68, 0.08) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.22) !important; }
+:is([data-theme="dark"], .dark) .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }
+:is([data-theme="dark"], .dark) .border-red-300,
+:is([data-theme="dark"], .dark) .hover\:border-red-300:hover { border-color: rgba(239, 68, 68, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-red-600,
+:is([data-theme="dark"], .dark) .hover\:text-red-600:hover { color: #f87171 !important; }
+:is([data-theme="dark"], .dark) .hover\:text-red-700:hover { color: #fca5a5 !important; }
+:is([data-theme="dark"], .dark) .text-red-800,
+:is([data-theme="dark"], .dark) .hover\:text-red-800:hover { color: #fecaca !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.14) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-50\/30 { background-color: rgba(245, 158, 11, 0.06) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-50\/40 { background-color: rgba(245, 158, 11, 0.07) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-50\/50 { background-color: rgba(245, 158, 11, 0.08) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.24) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-200 { background-color: rgba(245, 158, 11, 0.28) !important; }
+:is([data-theme="dark"], .dark) .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; }
+:is([data-theme="dark"], .dark) .border-amber-300,
+:is([data-theme="dark"], .dark) .hover\:border-amber-300:hover { border-color: rgba(245, 158, 11, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-amber-600,
+:is([data-theme="dark"], .dark) .hover\:text-amber-600:hover { color: #fbbf24 !important; }
+:is([data-theme="dark"], .dark) .text-amber-800 { color: #fde68a !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.10) !important; }
+:is([data-theme="dark"], .dark) .bg-yellow-50\/50 { background-color: rgba(234, 179, 8, 0.08) !important; }
+:is([data-theme="dark"], .dark) .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35) !important; }
+:is([data-theme="dark"], .dark) .border-yellow-300 { border-color: rgba(234, 179, 8, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-yellow-600,
+:is([data-theme="dark"], .dark) .hover\:text-yellow-600:hover { color: #facc15 !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-green-50 { background-color: rgba(34, 197, 94, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.14) !important; }
+:is([data-theme="dark"], .dark) .bg-green-50\/40 { background-color: rgba(34, 197, 94, 0.06) !important; }
+:is([data-theme="dark"], .dark) .border-green-200 { border-color: rgba(34, 197, 94, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-green-300,
+:is([data-theme="dark"], .dark) .hover\:border-green-300:hover { border-color: rgba(34, 197, 94, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-green-600,
+:is([data-theme="dark"], .dark) .hover\:text-green-600:hover { color: #4ade80 !important; }
+:is([data-theme="dark"], .dark) .text-green-900,
+:is([data-theme="dark"], .dark) .hover\:text-green-800:hover { color: #bbf7d0 !important; }
+:is([data-theme="dark"], .dark) .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.24) !important; }
+:is([data-theme="dark"], .dark) .border-emerald-200 { border-color: rgba(16, 185, 129, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-emerald-300 { border-color: rgba(16, 185, 129, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-emerald-600 { color: #34d399 !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-orange-50 { background-color: rgba(249, 115, 22, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.14) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-orange-200:hover { background-color: rgba(249, 115, 22, 0.30) !important; }
+:is([data-theme="dark"], .dark) .border-orange-200 { border-color: rgba(249, 115, 22, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-orange-300,
+:is([data-theme="dark"], .dark) .hover\:border-orange-300:hover { border-color: rgba(249, 115, 22, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-orange-600 { color: #fb923c !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-sky-50 { background-color: rgba(14, 165, 233, 0.10) !important; }
+:is([data-theme="dark"], .dark) .border-sky-300 { border-color: rgba(14, 165, 233, 0.45) !important; }
+:is([data-theme="dark"], .dark) .bg-teal-50 { background-color: rgba(20, 184, 166, 0.10) !important; }
+:is([data-theme="dark"], .dark) .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18) !important; }
+:is([data-theme="dark"], .dark) .text-teal-600 { color: #2dd4bf !important; }
+:is([data-theme="dark"], .dark) .text-teal-700 { color: #5eead4 !important; }
+:is([data-theme="dark"], .dark) .text-teal-800 { color: #99f6e4 !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-purple-50 { background-color: rgba(168, 85, 247, 0.10) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.14) !important; }
+:is([data-theme="dark"], .dark) .border-purple-200 { border-color: rgba(168, 85, 247, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-purple-300,
+:is([data-theme="dark"], .dark) .hover\:border-purple-300:hover { border-color: rgba(168, 85, 247, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-purple-600 { color: #c084fc !important; }
+:is([data-theme="dark"], .dark) .text-purple-800,
+:is([data-theme="dark"], .dark) .text-purple-900 { color: #e9d5ff !important; }
+:is([data-theme="dark"], .dark) .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18) !important; }
+:is([data-theme="dark"], .dark) .border-violet-300 { border-color: rgba(139, 92, 246, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-violet-600 { color: #a78bfa !important; }
+:is([data-theme="dark"], .dark) .text-violet-700 { color: #c4b5fd !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-pink-100 { background-color: rgba(236, 72, 153, 0.18) !important; }
+:is([data-theme="dark"], .dark) .border-pink-200 { border-color: rgba(236, 72, 153, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-pink-300 { border-color: rgba(236, 72, 153, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-pink-600 { color: #f472b6 !important; }
+:is([data-theme="dark"], .dark) .text-pink-800,
+:is([data-theme="dark"], .dark) .text-pink-900 { color: #fbcfe8 !important; }
+:is([data-theme="dark"], .dark) .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
+:is([data-theme="dark"], .dark) .text-rose-700 { color: #fda4af !important; }
+:is([data-theme="dark"], .dark) .text-rose-800 { color: #fecdd3 !important; }
 
 /* Indigo / slate */
-[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
+:is([data-theme="dark"], .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
@@ -1390,68 +1643,68 @@ html.rosh-reduce-transparency *::after {
    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; }
+:is([data-theme="dark"], .dark) .bg-indigo-50\/40 { background-color: rgba(99, 102, 241, 0.12) !important; }
+:is([data-theme="dark"], .dark) .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, 0.15) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.25) !important; }
+:is([data-theme="dark"], .dark) .text-indigo-600 { color: #a5b4fc !important; }
+:is([data-theme="dark"], .dark) .border-indigo-100 { border-color: rgba(99, 102, 241, 0.30) !important; }
+:is([data-theme="dark"], .dark) .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35) !important; }
+:is([data-theme="dark"], .dark) .border-indigo-300 { border-color: rgba(99, 102, 241, 0.45) !important; }
+:is([data-theme="dark"], .dark) .text-slate-700 { color: #cbd5e1 !important; } /* slate-600/800 left for the Calculator LCD */
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-blue-200:active { background-color: rgba(59, 130, 246, 0.40) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-200\/60 { background-color: rgba(59, 130, 246, 0.20) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-blue-50:active { background-color: rgba(59, 130, 246, 0.30) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/30:hover { background-color: rgba(59, 130, 246, 0.12) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/40:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/50:hover { background-color: rgba(59, 130, 246, 0.18) !important; }
+:is([data-theme="dark"], .dark) .border-blue-100 { border-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .border-blue-200,
+:is([data-theme="dark"], .dark) .hover\:border-blue-200:hover { border-color: rgba(59, 130, 246, 0.32) !important; }
+:is([data-theme="dark"], .dark) .border-blue-300,
+:is([data-theme="dark"], .dark) .hover\:border-blue-300:hover { border-color: rgba(59, 130, 246, 0.45) !important; }
+:is([data-theme="dark"], .dark) .border-blue-300\/50 { border-color: rgba(59, 130, 246, 0.25) !important; }
+:is([data-theme="dark"], .dark) .text-blue-900 { color: #bfdbfe !important; }
+:is([data-theme="dark"], .dark) .hover\:text-blue-600:hover { color: #93c5fd !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .file\:bg-blue-50::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .file\:text-blue-700::file-selector-button { color: #bfdbfe !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .hover\:text-gray-600:hover,
+:is([data-theme="dark"], .dark) .hover\:text-gray-700:hover { color: var(--ink) !important; }
+:is([data-theme="dark"], .dark) .hover\:text-gray-800:hover { color: var(--ink-strong) !important; }
+:is([data-theme="dark"], .dark) .hover\:text-gray-900:hover,
+:is([data-theme="dark"], .dark) .active\:text-gray-900:active { color: var(--ink-strongest) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-gray-100:active { background-color: var(--surface-raised) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-gray-200:active { background-color: var(--line-strong) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-gray-300:active,
+:is([data-theme="dark"], .dark) .hover\:bg-gray-300:hover { background-color: #585b70 !important; }
+:is([data-theme="dark"], .dark) .disabled\:bg-gray-100:disabled { background-color: var(--surface) !important; }
+:is([data-theme="dark"], .dark) .disabled\:bg-gray-200:disabled { background-color: var(--surface-raised) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-200\/50:hover { background-color: rgba(69, 71, 90, 0.5) !important; }
+:is([data-theme="dark"], .dark) .even\:bg-gray-50\/50:nth-child(even) { background-color: rgba(24, 24, 37, 0.5) !important; }
+:is([data-theme="dark"], .dark) .border-gray-50,
+:is([data-theme="dark"], .dark) .divide-gray-50 > :not(:last-child) { border-color: var(--line-subtle) !important; }
+:is([data-theme="dark"], .dark) .border-gray-200\/50 { border-color: rgba(49, 50, 68, 0.6) !important; }
+:is([data-theme="dark"], .dark) .hover\:border-gray-200:hover { border-color: var(--surface-raised) !important; }
+:is([data-theme="dark"], .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; }
+:is([data-theme="dark"], .dark) .bg-white\/85 { background-color: rgba(30, 30, 46, 0.85) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-white:hover { background-color: var(--surface) !important; }
+:is([data-theme="dark"], .dark) .text-black { color: var(--ink-strongest) !important; }
+:is([data-theme="dark"], .dark) .hover\:text-black:hover { color: #ffffff !important; }
 
 /* Markdown — the clamped note (react-os-shell/markdown, `clamp`).
 
@@ -1473,6 +1726,142 @@ html.rosh-reduce-transparency *::after {
   mask-image: linear-gradient(to bottom, black calc(100% - 1.75rem), transparent);
 }
 
+/* ═══════════════════════════════════════════════════
+   Toasts and the notification card (shell/toast.ts)
+   ═══════════════════════════════════════════════════
+ * These were `style="…"` strings and an `onmouseenter` attribute inside an
+ * innerHTML template, which a strict Content-Security-Policy refuses: the
+ * attribute is inline script, and a `style-src` carrying a nonce drops style
+ * attributes that arrive through markup. toast.ts now builds plain nodes and
+ * names these classes; the only style it still writes is the enter/leave
+ * motion, through the CSSOM, which CSP does not govern.
+ *
+ * Every value is the one the inline styles had. The colours are tokens so a
+ * host can restyle a toast without forking it, and they are declared ONCE,
+ * under :root, on purpose: the toast has always been a light glass card in
+ * both themes (none of the dark remaps ever reached an inline style), and a
+ * dark block here would be a redesign, not a refactor.
+ *
+ * The glass reads `--menu-opacity` live, exactly as the old `getMenuOpacity()`
+ * read it at creation: Layout writes it on <html>, reduce-transparency pins it
+ * to 1 and strips the blur. The stops stay `rgba()` on purpose. A gradient
+ * whose stops are all legacy sRGB colours blends in sRGB; one written with
+ * `color-mix()` blends in Oklab, which moved the glass by a couple of levels
+ * per channel — measured, not guessed. The corners read the radius tokens with
+ * today's sizes as the fallback, so a square-cornered host gets square toasts.
+ */
+:root {
+  /* Channels, not a colour: the glass gradient needs them inside rgba(). */
+  --rosh-toast-glass: 255, 255, 255;
+  --rosh-toast-ink: rgb(55 65 81);
+  --rosh-toast-dismiss: rgb(156 163 175);
+  --rosh-toast-dismiss-hover: rgb(75 85 99);
+  --rosh-toast-success: #22c55e;
+  --rosh-toast-error: #ef4444;
+  --rosh-toast-warning: #f59e0b;
+  /* info and loading share the working blue; so does the notification card. */
+  --rosh-toast-info: #3b82f6;
+}
+
+.rosh-toast,
+.rosh-notif {
+  background: linear-gradient(135deg,
+    rgba(var(--rosh-toast-glass), calc(var(--menu-opacity, 0.95) * 0.85)) 0%,
+    rgba(var(--rosh-toast-glass), calc(var(--menu-opacity, 0.95) * 0.65)) 50%,
+    rgba(var(--rosh-toast-glass), calc(var(--menu-opacity, 0.95) * 0.75)) 100%);
+  backdrop-filter: blur(40px) saturate(1.8);
+  -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  border: 1px solid rgba(var(--rosh-toast-glass), 0.35);
+  box-shadow:
+    inset 0 1px 0 rgba(var(--rosh-toast-glass), 0.4),
+    0 8px 32px rgba(0, 0, 0, 0.15),
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  display: flex;
+}
+
+/* toast.success / error / warning / info / promise — top-centre or bottom, brief. */
+.rosh-toast {
+  padding: 8px 20px;
+  border-radius: var(--radius-xl, 0.75rem);
+  transition: opacity 300ms ease, transform 300ms ease;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rosh-toast-ink);
+  max-width: min(90vw, 460px);
+}
+.rosh-tone-success { color: var(--rosh-toast-success); }
+.rosh-tone-error { color: var(--rosh-toast-error); }
+.rosh-tone-warning { color: var(--rosh-toast-warning); }
+.rosh-tone-info,
+.rosh-tone-loading { color: var(--rosh-toast-info); }
+
+/* toast.notify — the top-right card that stays. */
+.rosh-notif {
+  min-width: 280px;
+  max-width: 380px;
+  padding: 12px 16px;
+  border-radius: var(--radius-2xl, 1rem);
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: flex-start;
+  gap: 12px;
+}
+.rosh-notif-badge {
+  width: 36px;
+  height: 36px;
+  /* 10px beside the card's 12px; clamps to 0 when the host's corners are square. */
+  border-radius: calc(var(--radius-xl, 0.75rem) - 2px);
+  background: color-mix(in srgb, var(--rosh-toast-info) 15%, transparent);
+  color: var(--rosh-toast-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.rosh-notif-body { flex: 1; min-width: 0; }
+.rosh-notif-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--rosh-toast-info);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 2px;
+}
+.rosh-notif-msg {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rosh-toast-ink);
+  line-height: 1.4;
+}
+.rosh-notif-close {
+  flex-shrink: 0;
+  padding: 4px;
+  color: var(--rosh-toast-dismiss);
+  font-size: 18px;
+  line-height: 1;
+  transition: color 0.2s;
+}
+.rosh-notif-close:hover { color: var(--rosh-toast-dismiss-hover); }
+
+/* PopupMenu's entrances. They were `<style>` elements rendered inside each
+   menu, which a `style-src` without 'unsafe-inline' (or with a nonce, which
+   makes the browser ignore 'unsafe-inline') refuses — the menu then opened
+   with no animation and a violation report. PopupMenu still NAMES them in its
+   inline `animation`, which is a CSSOM write and not governed by CSP. */
+@keyframes popup-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes popup-submenu-in {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes popup-submenu-in-left {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 /* Scrollbar */
 /* Force visible scrollbars on editable grids (macOS hides them by default) */
 .grid-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
@@ -1481,10 +1870,11 @@ html.rosh-reduce-transparency *::after {
 .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; }
+/* Page-wide, so gated like the other bare-element rules above. */
+:is([data-theme="dark"], .dark) :where(:root:not(.rosh-host-elements) *)::-webkit-scrollbar { width: 8px; height: 8px; }
+:is([data-theme="dark"], .dark) :where(:root:not(.rosh-host-elements) *)::-webkit-scrollbar-track { background: var(--surface-sunken); }
+:is([data-theme="dark"], .dark) :where(:root:not(.rosh-host-elements) *)::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
+:is([data-theme="dark"], .dark) :where(:root:not(.rosh-host-elements) *)::-webkit-scrollbar-thumb:hover { background: #585b70; }
 
 /* ── Opacity-modified utilities ───────────────────────────────────────────
    A Tailwind opacity modifier makes a DIFFERENT class name, so every remap in
@@ -1498,21 +1888,21 @@ html.rosh-reduce-transparency *::after {
    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; }
+:is([data-theme="dark"], .dark) .bg-gray-50\/70 { background-color: rgba(24, 24, 37, 0.7) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-50\/80 { background-color: rgba(24, 24, 37, 0.8) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-50\/95 { background-color: rgba(24, 24, 37, 0.95) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-100\/90 { background-color: rgba(30, 30, 46, 0.9) !important; }
+:is([data-theme="dark"], .dark) .bg-gray-200\/80 { background-color: rgba(49, 50, 68, 0.8) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-200\/70:hover { background-color: rgba(49, 50, 68, 0.7) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-gray-200\/90:hover { background-color: rgba(49, 50, 68, 0.9) !important; }
+:is([data-theme="dark"], .dark) .border-gray-200\/60 { border-color: rgba(69, 71, 90, 0.6) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/80 { background-color: rgba(59, 130, 246, 0.24) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/90 { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .text-blue-600\/70 { color: rgba(147, 197, 253, 0.7) !important; }
+:is([data-theme="dark"], .dark) .text-blue-700\/70 { color: rgba(191, 219, 254, 0.7) !important; }
+:is([data-theme="dark"], .dark) .text-blue-800\/80 { color: rgba(191, 219, 254, 0.8) !important; }
+:is([data-theme="dark"], .dark) .text-blue-900\/60 { color: rgba(191, 219, 254, 0.6) !important; }
+:is([data-theme="dark"], .dark) .bg-amber-200\/70 { background-color: rgba(245, 158, 11, 0.20) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-amber-50\/70:hover { background-color: rgba(245, 158, 11, 0.12) !important; }
+:is([data-theme="dark"], .dark) .text-amber-800\/80 { color: rgba(253, 230, 138, 0.8) !important; }
+:is([data-theme="dark"], .dark) .text-green-700\/80 { color: rgba(134, 239, 172, 0.8) !important; }