@siyahi/ui 0.1.9-next.35 → 0.1.9-next.37

package/styles/siyahi.css

@@ -1,9 +1,9 @@
 /*
  * Siyahi theme: the only file in the package that holds colour values.
- * shadcn/ui `neutral` greys for both schemes, with ink indigo (hue 275)
- * placed, not spread: links, the selected sidebar item's text and the first
- * chart series. Buttons, badges, toggles and focus stay monochrome, where
- * black and white read strongest. Plus three meaning
+ * A terminal: the mono face, shadcn/ui `neutral` greys for both schemes, and
+ * terminal amber placed, not spread: links, the eyebrow and panel numbers and
+ * the selected sidebar item's text. Buttons, badges, toggles and focus stay
+ * monochrome, where black and white read strongest. Plus three meaning
  * colours and a five-hue chart palette. `packages/tools/contrast.mjs` checks every value
  * here in the build; when a check fails, change the value, never the bar.
  */
@@ -11,7 +11,7 @@
 @import "tw-animate-css";
 @import "./shadcn.css";
 @import "@fontsource-variable/geist";
-@import "@fontsource-variable/geist-mono";
+@import "./m-plus-1-code.css";
 @import "./fallback-fonts.css";
 
 /* Tailwind does not scan node_modules, so name the package's own classes. */
@@ -41,8 +41,13 @@
 
 @theme inline {
   --font-sans: "Geist Variable", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono Variable", "Geist Mono Fallback", ui-monospace, monospace;
-  --font-heading: var(--font-sans);
+  /*
+   * M PLUS 1 Code: a mono half a font size wide (6px a character at 12px, Geist Mono's 7), so a terminal page fits
+   * a table's every column and a row's words on one line. 20KB for every weight.
+   */
+  --font-mono: "M PLUS 1 Code Variable", "M PLUS 1 Code Fallback", ui-monospace, monospace;
+  /* Titles are data labels on a terminal: the mono face, as the page itself is. */
+  --font-heading: var(--font-mono);
   /*
    * Tailwind's 65ch, measured in Geist, whose "0" is 0.663em wide. A ch
    * follows whichever font is drawing, so a plain 65ch is narrower while the
@@ -109,7 +114,8 @@
   --radius: 0rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
+  /* The page colour: a card is a block on the page, not a box, so what lies under its marks is the page. */
+  --card: oklch(0.985 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
@@ -130,12 +136,13 @@
   --input: oklch(0.64 0 0);
   /* Focus is the text colour, as black reads strongest: a field's edge thickens in it, any other control takes a halo. */
   --ring: oklch(0.145 0 0);
-  /* Tailwind green-700, red-600, amber-700, with their chroma lowered to the sRGB edge. */
+  /* Tailwind green-700 and red-600, with their chroma lowered to the sRGB edge, and a mustard yellow. */
   --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
   --negative: oklch(0.577 0.235 27.325);
   --negative-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.555 0.149 48.998);
+  /* Yellow, not amber: amber is the accent, so caution takes its own hue. */
+  --warning: oklch(0.53 0.1 95);
   --warning-foreground: oklch(0.985 0 0);
   /*
    * Heat steps: how much of --positive or --negative each of five steps mixes
@@ -161,7 +168,16 @@
    * contrast check holds each bar colour's tint against the card and each slot's against the next slot's.
    */
   --bar-tint: 50%;
-  --link: oklch(0.51 0.2 275);
+  /* Terminal amber, deepened to burnt orange so it reads as text on the light page. */
+  --link: oklch(0.55 0.13 58);
+  /*
+   * A headline MetricStrip's blocks (variant "blocks"): the orange, then the text colour, then a grey, each with the
+   * ink its figures take on it.
+   */
+  --headline: oklch(0.68 0.19 40);
+  --headline-foreground: oklch(0.145 0 0);
+  --headline-muted: oklch(0.88 0 0);
+  --headline-muted-foreground: oklch(0.145 0 0);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
    * gain or a loss. Each slot reaches 3:1 against the canvas, the card and the
@@ -175,30 +191,30 @@
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
   --chart-3: oklch(0.38 0.13 335);
-  --chart-4: oklch(0.65 0.11 235);
+  --chart-4: oklch(0.64 0.11 235);
   --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.45 0.2 275);
+  --sidebar-accent-foreground: oklch(0.55 0.13 58);
   --sidebar-border: oklch(0.145 0 0 / 18%);
   --sidebar-ring: oklch(0.145 0 0);
 
   @variant dark {
     /*
      * The canvas lifts just off black and text sits a step below white:
-     * near-white on near-black (19:1) blurs for many readers, and with the
-     * cards' grey gone on a ruled page the canvas is what text sits on.
+     * near-white on near-black (19:1) blurs for many readers, and on an open
+     * page, where cards have no fill, the canvas is what text sits on.
      * Claude Code (#181818, about #e8e8e8 text) and T3 Code (#0a0a0a, about
      * #bebebe) both narrow that gap; this sits between them, at 14.9:1.
-     * Cards sit one step above the canvas, so data reads as raised, as the
-     * white card does on the light canvas; the sidebar is a shade darker.
+     * A popover sits one step above the canvas, so it reads as lifted over
+     * the page; the sidebar is a shade darker.
      */
     --background: oklch(0.14 0 0);
     --foreground: oklch(0.922 0 0);
-    --card: oklch(0.215 0 0);
+    --card: oklch(0.14 0 0);
     --card-foreground: oklch(0.922 0 0);
     --popover: oklch(0.215 0 0);
     --popover-foreground: oklch(0.922 0 0);
@@ -218,14 +234,14 @@
     --ring: oklch(0.922 0 0);
     /*
      * Green toned down from Tailwind green-400, below red-400's lightness so a
-     * treemap's deepest green tile keeps its light label at 4.5:1; amber-400.
-     * Red, amber and the link sit at the sRGB edge.
+     * treemap's deepest green tile keeps its light label at 4.5:1; a yellow
+     * for caution, apart from the amber link. Red sits at the sRGB edge.
      */
     --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
     --negative: oklch(0.704 0.187 22.216);
     --negative-foreground: oklch(0.145 0 0);
-    --warning: oklch(0.828 0.169 84.429);
+    --warning: oklch(0.8 0.15 98);
     --warning-foreground: oklch(0.145 0 0);
     /* A 12% tint of a dark card reads as the card itself, so dark starts at 25%. */
     --heat-1: 25%;
@@ -242,7 +258,11 @@
     --wash-edge: 55%;
     --field-wash: 12%;
     --bar-tint: 50%;
-    --link: oklch(0.75 0.128 275);
+    --link: oklch(0.8 0.13 65);
+    --headline: oklch(0.7 0.19 40);
+    --headline-foreground: oklch(0.145 0 0);
+    --headline-muted: oklch(0.27 0 0);
+    --headline-muted-foreground: oklch(0.922 0 0);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
     --chart-3: oklch(0.58 0.16 335);
@@ -253,7 +273,7 @@
     --sidebar-primary: oklch(0.922 0 0);
     --sidebar-primary-foreground: oklch(0.205 0 0);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.8 0.1 275);
+    --sidebar-accent-foreground: oklch(0.8 0.13 65);
     --sidebar-border: oklch(1 0 0 / 20%);
     --sidebar-ring: oklch(0.922 0 0);
   }
@@ -267,7 +287,16 @@
     @apply bg-background text-foreground;
     font-variant-numeric: tabular-nums;
   }
+  /*
+   * A terminal: the page is set in the mono face, so figures, labels, controls and titles share one grid. Text that
+   * reads as sentences (a paragraph, a quote, a card's or a dialog's description) takes the sans, where
+   * mono tires the eye over a line. Not a list item: a sidebar row, a menu option or a tile is one, and its contents
+ * are labels. Zero specificity, so a component's own font class wins.
+   */
   html {
+    @apply font-mono;
+  }
+  :where(p, blockquote, dd, figcaption, [data-slot$="description"]) {
     @apply font-sans;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -283,12 +312,9 @@
 }
 
 /*
- * Every selected toggle, a view switch or a filter chip alike, fills with the
- * foreground, black on white and white on black, so the reader sees at once
- * what is on; stock shadcn marks it with a faint grey. A default (pill) tab
- * selects the same way: stock fills it with the canvas colour, 1.05:1 against
- * its grey list, lifted on a drop shadow, which the fill makes needless. Unlayered, to outrank the stock
- * aria-pressed:bg-muted.
+ * A selected toggle, a view switch or a filter chip alike, and a selected pill tab fill with the foreground, black on
+ * white and white on black. Stock shadcn marks them with a faint grey, 1.05:1 against the canvas, so the reader cannot
+ * see which one is on. Unlayered, to outrank the stock aria-pressed:bg-muted.
  */
 :is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]),
 [data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active] {
@@ -298,34 +324,9 @@
   --tw-shadow: 0 0 #0000;
 }
 
-/*
- * A toggle group's items sit flush and share their borders, one control with
- * its parts side by side; stock spaces them 8px apart. A group set to
- * spacing={0} already joins its items by dropping their inner borders. The
- * pressed item rises over its neighbours, so its own edge shows on both sides.
- */
-[data-slot="toggle-group"]:not([data-spacing="0"]) {
-  gap: 0;
-  > [data-slot="toggle-group-item"] {
-    &[aria-pressed="true"],
-    &[data-pressed] {
-      z-index: 1;
-    }
-    &[data-variant="outline"] + [data-slot="toggle-group-item"] {
-      margin-inline-start: -1px;
-    }
-  }
-  &[data-orientation="vertical"]
-    > [data-slot="toggle-group-item"][data-variant="outline"]
-    + [data-slot="toggle-group-item"] {
-    margin-inline-start: 0;
-    margin-block-start: -1px;
-  }
-}
-
 /*
  * A component that lifts a part of itself with a z-index is a stacking context
- * of its own: SectionCards' picker button, an avatar's badge, a calendar's
+ * of its own: MetricStrip's picker buttons, an avatar's badge, a calendar's
  * days, a focused toggle, a code block's buttons, a price chart's layers. The
  * lifted part then ranks only against the rest of its component, and can never
  * sit over, or take a tap from, a page's sticky header or section strip (also
@@ -352,43 +353,10 @@
 }
 
 /*
- * A copy button sits in a row above the code, never over it. Core floats a
- * CodeBlockActions written straight in the block over the code's top right
- * (z-10, shown on hover), where it covers the end of a line and painted over
- * the page's sticky section strip; here it takes a row of its own, as in a
- * CodeBlockHeader, always shown, with the header's plain button.
- */
-[data-slot="code-block"] > [data-slot="code-block-actions"] {
-  position: static;
-  align-self: flex-end;
-  margin: 0.5rem 0.5rem 0;
-  opacity: 1;
-}
-/*
- * Core's floating fill and faint resting ring go. Its fill outranks the ghost
- * button's own hover fill, so that is set again here, as a header's button
- * shows it; the focus ring is left alone.
- */
-[data-slot="code-block"] > [data-slot="code-block-actions"] > button {
-  background-color: transparent;
-  &:hover {
-    background-color: var(--muted);
-    @variant dark {
-      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-    }
-  }
-  &:not(:focus-visible) {
-    --tw-ring-shadow: 0 0 #0000;
-  }
-}
-
-/*
- * --input is the edge of a field, where the reader types or picks. A button,
- * a toggle and a code block are framed by their label or their content, so
- * their outline stays the faint divider colour; scoping the variable keeps
- * the fill each derives from it faint too. A button is matched by its own
- * group/button class: rendered as a popover or menu trigger, it takes that
- * trigger's data-slot instead of "button".
+ * --input is the edge of a field, raised to 3:1 so the reader sees where to type. Stock buttons, toggles and code
+ * blocks also edge and fill themselves from it (dark:bg-input/30), which the raised value would make heavy, so for
+ * them it stays the faint divider colour, as stock draws them. A button is matched by its own group/button class:
+ * rendered as a popover or menu trigger, it takes that trigger's data-slot instead of "button".
  */
 :is([class~="group/button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
   --input: var(--border);
@@ -590,85 +558,6 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
   background-color: color-mix(in oklab, var(--destructive) var(--field-wash), var(--card));
 }
 
-/*
- * A field's label sits above it in small monospaced capitals, muted, as the
- * labels over figures do: FieldLabel in a Field (directly or in its
- * FieldContent), the home a page gets it from. A label for a checkbox, a
- * switch or a radio reads as a sentence and keeps the sans face, whatever the
- * Field's orientation.
- */
-[data-slot="field"]:not(:has([role="checkbox"], [role="switch"], [role="radio"])) [data-slot="field-label"] {
-  @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
-}
-
-/*
- * A group's label in a menu (dropdown, context, menubar), a select's or a combobox's list or the
- * command palette is a label over its items, set as one.
- */
-:is(
-  [data-slot$="menu-label"],
-  [data-slot="menubar-label"],
-  [data-slot="select-label"],
-  [data-slot="combobox-label"],
-  [data-slot="command-group"] [cmdk-group-heading]
-) {
-  @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
-}
-
-/*
- * A floating surface reads as a sheet of the page, not a bubble over it: no shadow (the theme has none) and the
- * card's hairline for an edge. Stock shadcn edges a menu, a list, a popover, a dialog or a card with a fainter ring
- * (ring-foreground/10, also behind a variant such as data-open:); it takes the hairline wherever it appears, on
- * a component added later too. The
- * chart's tooltip, which Recharts draws, is named.
- */
-[class*="ring-foreground/10"] {
-  --tw-ring-color: var(--border);
-}
-[data-slot="chart"] .recharts-tooltip-wrapper > div {
-  border-color: var(--border);
-}
-
-/*
- * Square corners everywhere (DESIGN.md): every element and its ::before and ::after are square, whatever rounding
- * a component asks for (rounded-full, rounded-[4px], hover:rounded-full, after:rounded-full), on a component added
- * later too. Only what is round by nature stays round, by what it is rather than its classes: an avatar, a radio
- * and a radio's dot (a questionnaire's radio choice too), a status dot and a spinner. A chart draws its round marks
- * in SVG, which this does not touch.
- */
-:not(
-  [data-slot^="avatar"],
-  [data-slot="message-avatar"],
-  [role="radio"],
-  [role="radio"] *,
-  [data-type="radio"] [data-slot$="indicator"],
-  [data-type="radio"] [data-slot$="indicator-dot"],
-  [data-slot="status-dot"],
-  .animate-spin
-),
-:not(
-  [data-slot^="avatar"],
-  [data-slot="message-avatar"],
-  [role="radio"],
-  [role="radio"] *,
-  [data-type="radio"] [data-slot$="indicator"],
-  [data-type="radio"] [data-slot$="indicator-dot"],
-  [data-slot="status-dot"],
-  .animate-spin
-)::before,
-:not(
-  [data-slot^="avatar"],
-  [data-slot="message-avatar"],
-  [role="radio"],
-  [role="radio"] *,
-  [data-type="radio"] [data-slot$="indicator"],
-  [data-type="radio"] [data-slot$="indicator-dot"],
-  [data-slot="status-dot"],
-  .animate-spin
-)::after {
-  border-radius: 0;
-}
-
 /*
  * Muted text is already the faintest that reads at 4.5:1 (contrast.mjs). Stock shadcn fades it further on some
  * parts (text-muted-foreground/70 on a trace's description), under that bar, so a faded muted class reads as the
@@ -705,65 +594,50 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * Column heads are labels, in small monospaced capitals; a sort header's
- * button and a data table's column title take the head's type rather than
- * their own. A total row reads as a
- * ledger's: one rule above it and a double rule under it in the text colour,
- * with no band.
+ * A label over data reads as a terminal's column head: small capitals, muted. A table's column heads (a sort
+ * header's button and a data table's column title take the head's type rather than their own), a sidebar group's
+ * label, and a group's label in a menu, a select's or a combobox's list or the command palette.
  */
-[data-slot="table-head"] {
-  @apply font-mono text-2xs tracking-wider uppercase;
-  :is([class~="group/button"], [data-slot="column-title"]) {
-    font: inherit;
-    letter-spacing: inherit;
-    text-transform: inherit;
-  }
+:is(
+  [data-slot="table-head"],
+  [data-slot="sidebar-group-label"],
+  [data-slot$="menu-label"],
+  [data-slot="menubar-label"],
+  [data-slot="select-label"],
+  [data-slot="combobox-label"],
+  [data-slot="command-group"] [cmdk-group-heading]
+) {
+  @apply text-2xs tracking-wider text-muted-foreground uppercase;
+}
+[data-slot="table-head"] :is([class~="group/button"], [data-slot="column-title"]) {
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
 }
+
 /*
- * Tables are dense, as a ledger is: compact rows, a rule in the text colour
- * under the column heads, the first column (what each row is) in medium
- * weight, and figures in the mono face, a size down so a column of them takes
- * no more room than the sans did. A figure is a cell marked data-numeric (the
- * data table's number columns, or a plain TableCell the page marks), which
- * also right-aligns it, and any Delta in a cell. Alignment alone says nothing:
- * a right-aligned word stays in the sans. Row hairlines stay; no stripes, no
- * column rules.
+ * Tables are dense, so a screen shows more rows and columns: 13px text, 24px column heads, cells 2px by 6px. Row
+ * hairlines stay; no stripes, no column rules.
  */
+[data-slot="table"] {
+  font-size: 0.8125rem;
+}
 [data-slot="table-head"] {
-  height: 1.75rem;
+  height: 1.5rem;
+  padding-inline: 0.375rem;
 }
 [data-slot="table-cell"] {
-  padding-block: 0.2rem;
-}
-[data-slot="table-header"] [data-slot="table-row"] {
-  border-bottom-color: var(--foreground);
-}
-/* A data table's sticky header draws its rule as a line of its own, which stays when the rows scroll under it. */
-[data-slot="table-header"]::after {
-  background-color: var(--foreground);
-}
-[data-slot="table-body"] [data-slot="table-cell"]:first-child {
-  font-weight: 500;
-}
-:is([data-slot="table-cell"][data-numeric], [data-slot="table-cell"] [data-slot="delta"]) {
-  @apply font-mono;
-  font-size: 0.8125rem;
-}
-[data-slot="table-footer"] {
-  background: none;
-  border-top: 1px solid var(--foreground);
-  border-bottom: 3px double var(--foreground);
-  font-weight: 600;
+  padding: 0.125rem 0.375rem;
 }
 
 /*
- * An exception the page marks, a stat tile (SectionCard's tone), a MetricStrip
- * figure (its item's tone) or a table row (<TableRow data-tone="negative">, a
- * DataTableBody's getRowTone), takes a faint wash of its colour over the card,
- * and a tile or figure an outline of it, so the one figure needing attention
- * stands out of a run of neutral ones. Unlayered, to outrank a row's hover band.
+ * An exception the page marks, a MetricStrip figure (its item's tone) or a
+ * table row (<TableRow data-tone="negative">, a DataTableBody's getRowTone),
+ * takes a faint wash of its colour over the card, and a figure an outline of
+ * it, so the one figure needing attention stands out of a run of neutral
+ * ones. Unlayered, to outrank a row's hover band.
  */
-:is([data-slot="card"], [data-slot="metric-strip-item"], [data-slot="table-row"]) {
+:is([data-slot="metric-strip-item"], [data-slot="table-row"]) {
   &[data-tone="negative"] {
     --exception: var(--negative);
   }
@@ -771,24 +645,49 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
     --exception: var(--warning);
   }
 }
-:is([data-slot="card"], [data-slot="metric-strip-item"]):is([data-tone="negative"], [data-tone="warning"]) {
-  background-color: color-mix(in oklab, var(--exception) var(--wash), var(--card));
-}
-[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
-  --tw-ring-color: color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+/*
+ * A MetricStrip figure has no padding of its own, so its text lines up with its neighbours'; its wash and outline
+ * reach 8px past it, into the gap, as a picked figure's outline does. --figure-wash is the wash the whole box takes.
+ */
+[data-slot="metric-strip-item"] {
+  --figure-reach: calc(var(--spacing) * 2);
+  &:is([data-tone="negative"], [data-tone="warning"]) {
+    --figure-wash: color-mix(in oklab, var(--exception) var(--wash), var(--card));
+    background-color: var(--figure-wash);
+    box-shadow: 0 0 0 var(--figure-reach) var(--figure-wash);
+    outline: 1px solid color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+    outline-offset: var(--figure-reach);
+  }
+  &[data-picked] {
+    outline: 2px solid var(--primary);
+    outline-offset: var(--figure-reach);
+  }
 }
 /*
- * A figure's outline lies on the four hairlines around it, as a tile's ring does: its neighbours' rules before and
- * above it, and its own end and bottom rules, which sit outside the padding box the inset counts from.
+ * A headline MetricStrip sets each figure on a solid block, in turn the headline orange, the text colour and a grey,
+ * touching. Everything in a block takes the block's ink: its label, note and a change's trend icon would not read on
+ * the fill in their own colours, and the sign still says gain or loss. A picked block's outline sits inside it.
  */
-[data-slot="metric-strip-item"]:is([data-tone="negative"], [data-tone="warning"]) {
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    border: 1px solid color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
-    pointer-events: none;
+[data-slot="metric-strip"][data-variant="blocks"] [data-slot="metric-strip-item"] {
+  background-color: var(--headline);
+  color: var(--headline-foreground);
+  &:nth-child(3n + 2) {
+    background-color: var(--foreground);
+    color: var(--background);
+  }
+  &:nth-child(3n) {
+    background-color: var(--headline-muted);
+    color: var(--headline-muted-foreground);
+  }
+  & > * {
+    --foreground: currentColor;
+    --muted-foreground: currentColor;
+    --positive: currentColor;
+    --negative: currentColor;
+  }
+  &[data-picked] {
+    outline-offset: -4px;
+    outline-color: currentColor;
   }
 }
 /* A pinned cell paints the card under itself (niko-table's lib/styles), so it lays the row's wash over that. */
@@ -803,24 +702,17 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 /*
  * Panels in a PanelGrid are numbered 01, 02 before their title, in the mono
  * face and the link colour, so the text can point to one. A panel without a
- * card title, such as a MetricStrip with none, takes no number; a block
- * wrapped in its own SiyahiProvider (which draws no box) still counts. The panel
+ * card title, such as a MetricStrip with none, takes no number. The panel
  * counts, not the title: a card header is a size container, whose style
  * containment would keep each title's count to itself.
  */
 [data-slot="panel-grid"] {
   counter-reset: panel;
 }
-[data-slot="panel"]:has(
-  > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"],
-  > [data-slot="siyahi-provider"] > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"]
-) {
+[data-slot="panel"]:has(> [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"]) {
   counter-increment: panel;
 }
-:is([data-slot="panel"], [data-slot="panel"] > [data-slot="siyahi-provider"])
-  > [data-slot="card"]
-  > [data-slot="card-header"]
-  > [data-slot="card-title"]::before {
+[data-slot="panel"] > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"]::before {
   content: counter(panel, decimal-leading-zero);
   @apply font-mono text-2xs font-medium text-link;
   letter-spacing: 0.04em;
@@ -830,22 +722,11 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * A data table inside a card drops its own border: the card's ring or the
- * ruled page's hairlines already frame it. On an open page, with no frame,
- * it keeps its border.
- */
-@scope (:root, [data-surface="ruled"], [data-surface="card"]) to ([data-surface="open"]) {
-  [data-slot="card"] [data-slot="table-container"] {
-    border-color: transparent;
-  }
-}
-/*
- * The opaque fill a data table's sticky header and pinned cells paint, so rows
- * scrolling under them stay hidden: the colour under the table, the card it
- * sits in or, on an open surface, whose cards have no fill, the page.
+ * The opaque fill a data table's sticky header and pinned cells paint, so rows scrolling under them stay hidden: the
+ * page, which a card does not cover.
  */
 [data-slot="table-container"] {
-  --table-fill: var(--card);
+  --table-fill: var(--background);
 }
 
 /*
@@ -888,45 +769,40 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * A block the page marks stale (stale on a chart card or a SectionCards tile)
- * loses its colour: its chart, sparkline and badge turn grey, and a tile's
- * figure and badge turn muted. The chart and sparkline also draw at 65%, so a
+ * A block the page marks stale (stale on a chart card or a MetricStrip figure)
+ * loses its colour: its chart, sparkline and badge turn grey, and a figure
+ * turns muted. The chart and sparkline also draw at 65%, so a
  * dark slot's line does not read heavier than a fresh one: a stale block is
  * meant to be harder to read, so its marks are exempt from the 3:1 mark bar.
  * The small "Stale · 3 Nov" note under the title and the figure keep their
  * text contrast.
  */
-[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"], [data-slot="badge"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"])[data-stale]
+  :is([data-slot="chart"], [data-slot="sparkline"], [data-slot="badge"], [data-slot="delta"]) {
   filter: grayscale(1);
 }
-[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"])[data-stale] :is([data-slot="chart"], [data-slot="sparkline"]) {
   opacity: 0.65;
 }
-[data-slot="section-card"] [data-slot="card"][data-stale] :is([data-slot="card-title"], [data-slot="badge"]) {
+[data-slot="metric-strip-item"][data-stale] [data-slot="metric-strip-value"] {
   color: var(--muted-foreground);
 }
 
 /*
- * Chart gridlines take the full border colour, solid: stock shadcn draws them
- * dashed at half of it, which all but vanishes on a dark card (5% white).
+ * Chart gridlines take the full border colour: stock shadcn draws them at half of it, which all but vanishes on the
+ * dark page (10% white).
  */
 [data-slot="chart"] .recharts-cartesian-grid line {
   stroke: var(--border);
 }
 
 /*
- * The sidebar is parted from the page by a hairline on its page-side edge,
- * its group labels are small monospaced capitals, as every label over content
- * is, and its rows are compact. Fill, icons and the current-page mark stay as
- * shadcn draws them.
+ * The sidebar's rows are compact, as a table's are. shadcn edges a collapsible sidebar on its page side already; a
+ * non-collapsible one, set in the page's flow, has none, so it takes the hairline here.
  */
-/* shadcn edges a collapsible sidebar on its page side already; a non-collapsible one, set in the page's flow, has none. */
 div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
   border-inline-end: 1px solid var(--sidebar-border);
 }
-[data-slot="sidebar-group-label"] {
-  @apply font-mono text-2xs tracking-wider uppercase;
-}
 [data-slot="sidebar-menu"] {
   gap: 0;
 }
@@ -942,19 +818,6 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
   height: 1.5rem;
 }
 
-/*
- * The selected sub-page marks its stretch of the sidebar's rail in the accent,
- * so the current place reads at a glance in a long list, as a docs index does.
- */
-[data-slot="sidebar-menu-sub-item"]:has(> [data-active])::before {
-  content: "";
-  position: absolute;
-  inset-block: 2px;
-  left: -11px;
-  width: 2px;
-  background: var(--sidebar-accent-foreground);
-}
-
 /* Touch targets follow input capability, including touch laptops. */
 @media (pointer: coarse) {
   :is(
@@ -1002,51 +865,24 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
 }
 
 /*
- * Surfaces, from SiyahiProvider's surface prop. Ruled, the default, keeps
- * every card's fill and drops its ring: PanelGrid and SectionCards fill their
- * grid with the card colour and draw hairlines between the blocks, with a rule
- * above and below the group and none on its left and right edges, and a card
- * that stands alone, such as a MetricStrip or a table's card, takes those
- * rules above and below itself. Card is a filled square card with a hairline
- * ring and no shadow, 8px from the next, for a page of separate blocks. Open
- * takes the box off every core Card: no fill, no ring, no tinted footer band,
- * and no padding, so a block's content sits level with the page's text. Each
- * scope stops at a provider that says otherwise. Unlayered, like the rules
- * above, to outrank the core components' utility classes; a picked
- * SectionCards tile keeps its ring, which is important, and an exception
- * keeps its outline, which is more specific.
+ * A Card is a block on the page, not a box: no fill, no ring, no tinted footer band and no padding, so its content
+ * sits level with the page's text, and space, not a box or a rule, parts it from the next. --card is the page colour
+ * (above), so what a block mixes into, a forecast's halo, a bar's tint or an exception's wash, is what lies under it.
+ * Unlayered, like the rules above, to outrank the core component's utility classes.
  */
-@scope (:root, [data-surface="ruled"]) to ([data-surface="card"], [data-surface="open"]) {
-  [data-slot="card"] {
-    --tw-ring-color: transparent;
-  }
-  /*
-   * A card inside a panel or a tile's cell, or nested in another card, is ruled by what holds it; only a holder
-   * inside this scope counts, so a ruled provider inside a card starts its own lone cards afresh.
-   */
-  [data-slot="card"]:not(
-    :scope :is([data-slot="panel"], [data-slot="section-card"], [data-slot="card"]) [data-slot="card"]
-  ) {
-    border-block: 1px solid var(--border);
-  }
+[data-slot="card"] {
+  /* No box, so no edge to clip at: a figure's wash or picker reaching past its text into the gap stays whole. */
+  overflow: visible;
+  background: none;
+  --tw-ring-color: transparent;
+  --card-spacing: 0px;
+  gap: calc(var(--spacing) * 3);
 }
-
-@scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
-  [data-slot="table-container"] {
-    --table-fill: var(--background);
-  }
-  [data-slot="card"] {
-    background: none;
-    --tw-ring-color: transparent;
-    --card-spacing: 0px;
-    gap: calc(var(--spacing) * 4);
-  }
-  [data-slot="card-footer"] {
-    background: none;
-    border-top-width: 0;
-    /* The band's own top padding stacked on the card's gap, and with no band it read as a hole under the figure. */
-    padding-top: 0;
-  }
+[data-slot="card-footer"] {
+  background: none;
+  border-top-width: 0;
+  /* The band's own top padding stacked on the card's gap, and with no band it read as a hole under the figure. */
+  padding-top: 0;
 }
 
 /*