@siyahi/ui 0.1.9-next.3 → 0.1.9-next.30

package/styles/siyahi.css

@@ -1,7 +1,10 @@
 /*
  * Siyahi theme: the only file in the package that holds colour values.
- * Stock shadcn/ui `neutral` for both schemes, plus four meaning colours and a
- * five-hue chart palette. `packages/tools/contrast.mjs` checks every value
+ * 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
+ * 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.
  */
 @import "tailwindcss";
@@ -31,6 +34,12 @@
    * fallback draws and every prose block rewraps when Geist arrives.
    */
   --max-width-prose: 43.1em;
+  /*
+   * 11px, for labels over figures: a stat tile's label and footer lines and a
+   * table's column heads, set as `font-mono text-2xs tracking-wider uppercase`.
+   */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -69,6 +78,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --radius-xs: calc(var(--radius) * 0.3);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -80,8 +90,9 @@
 
 :root {
   color-scheme: light dark;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  /* Square: panels, buttons, fields, badges and toggles alike. Only a dot, an avatar or a slider thumb stays round. */
+  --radius: 0rem;
+  --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -92,83 +103,137 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* Below shadcn's 0.556, so muted text keeps 4.5:1 on the muted fill and on every Callout's tint. */
+  --muted-foreground: oklch(0.51 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  /* Tailwind green-700, red-600, amber-700, blue-600. */
-  --positive: oklch(0.527 0.154 150.069);
+  /* Deeper than the loss red, so a destructive button's label reads on its own red tint, hovered too. */
+  --destructive: oklch(0.49 0.19 27.325);
+  /* A step firmer than shadcn's 0.922 grey: with square, filled panels the hairlines carry the page's structure. */
+  --border: oklch(0.145 0 0 / 18%);
+  /* The edge of a field (input, textarea, select, input group) at 3:1: --border stays faint for dividers. */
+  --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. */
+  --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
-  --negative: oklch(0.577 0.245 27.325);
+  --negative: oklch(0.577 0.235 27.325);
   --negative-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.555 0.163 48.998);
+  --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
-  --link: oklch(0.546 0.245 262.881);
   /*
-   * Blue, emerald, amber, violet, rose. Each slot reaches 3:1 against the card
-   * and against the slots next to it, which only lightness can give, so
-   * emerald and violet are the deep members in both schemes. Slots two apart
+   * Heat steps: how much of --positive or --negative each of five steps mixes
+   * into the card, for Treemap, ChangeGrid and a signed CalendarHeatmap
+   * (lib/heat.ts). The contrast check reads them from here.
+   */
+  --heat-1: 12%;
+  --heat-2: 24%;
+  --heat-3: 36%;
+  --heat-4: 48%;
+  --heat-5: 60%;
+  /*
+   * An exception (a stat tile or a table row the page marks with a tone) takes this share of --negative or
+   * --warning over the card, and a tile an outline of the tone at --wash-edge.
+   */
+  --wash: 7%;
+  --wash-edge: 45%;
+  /* An invalid field's wash: this share of --destructive over the card. */
+  --field-wash: 8%;
+  --link: oklch(0.51 0.2 275);
+  /*
+   * 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
+   * slots next to it, which only lightness can give, so indigo, plum and teal
+   * are the deep members and amber and sky the pale ones, in both schemes: a
+   * pale indigo in dark read as lavender and lost the accent. Slots two apart
    * share a lightness and are told apart by hue; series take slots in order.
    * Every chart value is inside sRGB, so the browser paints what the contrast
    * check scored.
    */
-  --chart-1: oklch(0.65 0.17 259.8);
-  --chart-2: oklch(0.35 0.07 163.2);
-  --chart-3: oklch(0.66 0.15 60);
-  --chart-4: oklch(0.36 0.17 293);
-  --chart-5: oklch(0.65 0.21 16.4);
+  --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-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.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent-foreground: oklch(0.45 0.2 275);
+  --sidebar-border: oklch(0.145 0 0 / 18%);
+  --sidebar-ring: oklch(0.145 0 0);
 
   @variant dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    /*
+     * 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.
+     * 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.
+     */
+    --background: oklch(0.14 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.215 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.215 0 0);
+    --popover-foreground: oklch(0.922 0 0);
     --primary: oklch(0.922 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
+    /* A step above shadcn's 0.708: subtitles, footnotes and table labels at data density read too dim. */
+    --muted-foreground: oklch(0.74 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    /* Tailwind green-400, red-400, amber-400, blue-400. */
-    --positive: oklch(0.792 0.209 151.711);
+    --accent-foreground: oklch(0.922 0 0);
+    /* Paler and calmer than the loss red, so a destructive label reads on its red tint over the card, hovered too. */
+    --destructive: oklch(0.8 0.1 22.216);
+    --border: oklch(1 0 0 / 20%);
+    --input: oklch(0.62 0 0);
+    --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.
+     */
+    --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
-    --negative: oklch(0.704 0.191 22.216);
+    --negative: oklch(0.704 0.187 22.216);
     --negative-foreground: oklch(0.145 0 0);
-    --warning: oklch(0.828 0.189 84.429);
+    --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
-    --link: oklch(0.707 0.165 254.624);
-    --chart-1: oklch(0.84 0.08 255);
-    --chart-2: oklch(0.52 0.11 163.2);
-    --chart-3: oklch(0.86 0.13 80);
-    --chart-4: oklch(0.55 0.25 293);
-    --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
+    /* A 12% tint of a dark card reads as the card itself, so dark starts at 25%. */
+    --heat-1: 25%;
+    --heat-2: 33.75%;
+    --heat-3: 42.5%;
+    --heat-4: 51.25%;
+    --heat-5: 60%;
+    /*
+     * As with heat, a faint share of a dark card reads as the card itself; above
+     * 12% the amber wash takes --chart-1, a tile's Sparkline or a row's DataBar,
+     * under 3:1.
+     */
+    --wash: 12%;
+    --wash-edge: 55%;
+    --field-wash: 12%;
+    --link: oklch(0.75 0.128 275);
+    --chart-1: oklch(0.58 0.2 275);
+    --chart-2: oklch(0.88 0.08 75);
+    --chart-3: oklch(0.58 0.16 335);
+    --chart-4: oklch(0.88 0.05 235);
+    --chart-5: oklch(0.56 0.08 205);
+    --sidebar: oklch(0.145 0 0);
+    --sidebar-foreground: oklch(0.922 0 0);
+    --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.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar-accent-foreground: oklch(0.8 0.1 275);
+    --sidebar-border: oklch(1 0 0 / 20%);
+    --sidebar-ring: oklch(0.922 0 0);
   }
 }
 
@@ -195,6 +260,494 @@
   }
 }
 
+/*
+ * 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. 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] {
+  background-color: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+
+/*
+ * 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
+ * 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
+ * z-10, where the later element in the page won the tie). In a group, the
+ * group is the context, so a badge still sits over the next, overlapping
+ * avatar. The data table's scroll container isolates itself.
+ */
+:is(
+  [data-slot="card"],
+  [data-slot="avatar-group"],
+  [data-slot="avatar"]:not([data-slot="avatar-group"] > *),
+  [data-slot="calendar"],
+  [data-slot="toggle-group"],
+  [data-slot="code-block"],
+  [data-slot="price-chart"]
+) {
+  isolation: isolate;
+}
+
+/*
+ * 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".
+ */
+:is([class~="group/button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
+  --input: var(--border);
+}
+
+/*
+ * The command palette's search field is a field: the --input edge on a muted
+ * fill, and the muted placeholder every other field uses (stock leaves it at
+ * Tailwind's half-strength text, 3.7:1).
+ */
+[data-slot="command-input-wrapper"] > [data-slot="input-group"] {
+  border-color: var(--input);
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+[data-slot="command-input"]::placeholder {
+  color: var(--muted-foreground);
+}
+
+/*
+ * Focus is drawn inside the control, never outside it, so no neighbour and no
+ * box that clips can cover it: a 2px ring in the text colour (--ring) on the
+ * control's edge, and a 2px ring of the page colour just inside that, so the
+ * pair reads on any fill, black, white or hovered, and the outer ring meets
+ * the page around the control at the text's contrast. A field shows focus as
+ * its own edge, 2px in the text colour; an input group and the command search
+ * show it round the whole group. A chart mark is drawn in SVG, where these
+ * rings do not paint: it takes a dashed stroke in the text colour, apart from a
+ * picked mark's solid one. Menu items and options show focus as their
+ * highlight, and popups as themselves, so they take none.
+ */
+:focus-visible:not(
+  svg,
+  svg *,
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="option"],
+  [role="dialog"],
+  [role="alertdialog"],
+  [role="menu"],
+  [role="listbox"],
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="input-group-control"],
+  [data-slot="command-input"]
+),
+[data-slot="slider-thumb"]:has(input:focus-visible) {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px var(--ring),
+    inset 0 0 0 4px var(--background);
+}
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]):focus-visible,
+[data-slot="input-group"]:has(:is([data-slot="input-group-control"], [data-slot="command-input"]):focus-visible) {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"]:focus-visible,
+[data-slot="input-group"]:has([data-slot="input-group-control"][aria-invalid="true"]:focus-visible) {
+  border-color: var(--destructive);
+  box-shadow: inset 0 0 0 1px var(--destructive);
+}
+[class~="group/button"][class~="text-destructive"]:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--destructive),
+    inset 0 0 0 4px var(--background);
+}
+/* A code block shows its scrolling content's focus itself; its own frame keeps no halo. */
+[data-slot="code-block"]:has(> [data-slot="code-block-content"]:focus-visible) {
+  --tw-ring-shadow: 0 0 #0000;
+}
+svg :is(rect, circle, path)[tabindex]:focus-visible,
+[data-slot="treemap-tile"]:focus-visible > rect:first-child {
+  outline: none;
+  stroke: var(--ring);
+  stroke-width: 2px;
+  stroke-dasharray: 3 2;
+}
+/* A treemap tile clips at its own edge, so half its stroke shows: twice the width keeps 2px. */
+[data-slot="treemap-tile"]:focus-visible > rect:first-child {
+  stroke-width: 4px;
+}
+
+/*
+ * A destructive control focuses, and an invalid field is edged, in the full
+ * destructive colour; stock fades both to 40-50%, under 3:1.
+ */
+[class~="group/button"][class~="text-destructive"]:focus-visible,
+[data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
+:is(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [class~="group/button"]
+)[aria-invalid="true"],
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+  border-color: var(--destructive);
+}
+/* An invalid field also takes a faint wash of the red, so it reads as the one to fix before its message is read. */
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"],
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+  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;
+}
+
+/* Progress is a bar, square as every bar is; stock draws it as a pill. */
+[data-slot="progress-track"] {
+  border-radius: 0;
+}
+
+/*
+ * A slider's unfilled track is outlined in the field edge, so its extent reads
+ * at 3:1; the muted track alone is 1.05:1 on the canvas.
+ */
+[data-slot="slider-track"] {
+  box-shadow: inset 0 0 0 1px var(--input);
+}
+
+/*
+ * A number column (meta.variant "number") right-aligns its head and cells, so
+ * figures line up by their units down the column, as a ledger reads.
+ */
+:is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
+  text-align: right;
+}
+[data-slot="table-head"][data-numeric] > *,
+[data-slot="table-cell"][data-numeric] > :is(div, span)[class*="flex"] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+/*
+ * 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.
+ */
+[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;
+  }
+}
+/*
+ * 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.
+ */
+[data-slot="table-head"] {
+  height: 1.75rem;
+}
+[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;
+}
+
+/*
+ * An exception the page marks, a stat tile (SectionCard's tone) or a table
+ * row (<TableRow data-tone="negative">), takes a faint wash of its colour over
+ * the card, and a tile 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="table-row"]) {
+  &[data-tone="negative"] {
+    --exception: var(--negative);
+  }
+  &[data-tone="warning"] {
+    --exception: var(--warning);
+  }
+}
+[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
+  background-color: color-mix(in oklab, var(--exception) var(--wash), var(--card));
+  --tw-ring-color: color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+}
+[data-slot="table-row"]:is([data-tone="negative"], [data-tone="warning"]) {
+  background-color: color-mix(in oklab, var(--exception) var(--wash), transparent);
+}
+
+/*
+ * 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
+ * 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"]
+) {
+  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 {
+  content: counter(panel, decimal-leading-zero);
+  @apply font-mono text-2xs font-medium text-link;
+  letter-spacing: 0.04em;
+  margin-inline-end: 0.7em;
+  position: relative;
+  top: -0.12em;
+}
+
+/*
+ * 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;
+  }
+}
+
+/*
+ * A series in a forecast is drawn twice (LineChartCard, AreaChartCard): solid
+ * up to forecastFrom and dashed after it, each copy clipped to its side by the
+ * clip paths lib/chart-marks draws. The chart sets the two clip paths' urls.
+ */
+[data-slot="chart"] .chart-actual {
+  clip-path: var(--chart-actual);
+}
+[data-slot="chart"] .chart-forecast {
+  clip-path: var(--chart-forecast);
+}
+
+/*
+ * Pen-stroke motion: a chart's lines draw in left to right over 1.3s, and a
+ * stack's fills are revealed with them (Recharts' own animation, which reduced
+ * motion turns off). Then the names at the line ends fade in; a line's end
+ * dots appear once it has drawn and fade in then; bars, with no line to wait
+ * for, fade in at once rather than grow. The names are Siyahi's own element,
+ * kept across data updates, so they fade in once. Reduced motion shows them
+ * all at once.
+ */
+@keyframes chart-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="chart"] :is(.recharts-bar-rectangles, .recharts-line-dots, .recharts-area-dots) {
+  animation: chart-fade-in 0.6s ease-out backwards;
+}
+[data-slot="chart"] [data-slot="end-labels"] {
+  animation: chart-fade-in 0.6s ease-out 1.3s backwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="chart"]
+    :is(.recharts-bar-rectangles, .recharts-line-dots, .recharts-area-dots, [data-slot="end-labels"]) {
+    animation: none;
+  }
+}
+
+/*
+ * 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
+ * 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"]) {
+  filter: grayscale(1);
+}
+[data-slot="card"][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"]) {
+  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).
+ */
+[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.
+ */
+/* 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;
+}
+/* A row that opens a group renders as its collapsible trigger, which takes that slot, so rows are found by data-sidebar. */
+[data-sidebar="menu-button"]:not([data-size="lg"]) {
+  height: 1.75rem;
+}
+[data-slot="sidebar-menu-sub"] {
+  gap: 0;
+  padding-block: 0.125rem;
+}
+[data-sidebar="menu-sub-button"] {
+  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;
+  border-radius: 1px;
+  background: var(--sidebar-accent-foreground);
+}
+
+/* Touch targets follow input capability, including touch laptops. */
+@media (pointer: coarse) {
+  :is(
+    [class~="group/button"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="select-trigger"],
+    [data-slot="tabs-trigger"],
+    [data-slot="input-group-button"]
+  ) {
+    min-height: --spacing(11);
+    min-width: --spacing(11);
+  }
+  :is([data-slot="input"], [data-slot="textarea"], [data-slot="input-group"], [data-slot="input-group-control"]) {
+    min-height: --spacing(11);
+  }
+  :is([data-slot="input"], [data-slot="textarea"], [data-slot="input-group-control"], [data-slot="command-input"]) {
+    font-size: 1rem;
+  }
+  [role="search"] > [data-slot="input"] {
+    padding-right: --spacing(14);
+  }
+}
+
 /*
  * On a narrow card a header action (a toggle, a button) drops under the title
  * and description, left-aligned. Stock CardHeader keeps the action in its own
@@ -215,3 +768,103 @@
     }
   }
 }
+
+/*
+ * 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.
+ */
+[data-slot="card"] {
+  --tw-ring-color: var(--border);
+}
+
+@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);
+  }
+}
+
+@scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
+  [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;
+  }
+}
+
+/*
+ * A table, or a page's section strip, that scrolls sideways fades at the edge
+ * with more behind it,
+ * so a phone reader sees there is more without a visible scrollbar. The fade
+ * follows the scroll position; a table that fits has no timeline and no fade.
+ */
+@property --table-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --table-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@keyframes table-edge-fade {
+  0% {
+    --table-fade-start: 0px;
+    --table-fade-end: 2rem;
+  }
+  8%,
+  92% {
+    --table-fade-start: 2rem;
+    --table-fade-end: 2rem;
+  }
+  100% {
+    --table-fade-start: 2rem;
+    --table-fade-end: 0px;
+  }
+}
+@layer base {
+  :is([data-slot="table-container"], [data-slot="page-toc"] > div) {
+    mask-image: linear-gradient(
+      to right,
+      rgb(0 0 0 / 0.2),
+      #000 var(--table-fade-start),
+      #000 calc(100% - var(--table-fade-end)),
+      rgb(0 0 0 / 0.2)
+    );
+    animation: table-edge-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+  /* Scroll position, not motion: the reduced-motion reset above must not collapse it. */
+  @media (prefers-reduced-motion: reduce) {
+    :is([data-slot="table-container"], [data-slot="page-toc"] > div) {
+      animation-duration: auto !important;
+    }
+  }
+}