indira-workspace-ui 0.1.0

package/dist-lib/style.css

@@ -0,0 +1,725 @@
+/* =====================================================================
+   Indira Workspace UI — tokens, scales and component CSS
+   Source of truth: docs/design-system.md
+   ===================================================================== */
+@import "tailwindcss";
+
+/* ---------------------------------------------------------------------
+   §1.1 / §1.2  Colour tokens — "R G B" triplets so every colour can take
+   an opacity modifier: rgb(var(--c-primary) / 0.12)
+   --------------------------------------------------------------------- */
+:root {
+  color-scheme: light;
+
+  --c-primary: 182 30 66;
+  --c-on-primary: 255 255 255;
+  --c-primary-container: 243 204 219;
+  --c-on-primary-container: 122 18 48;
+
+  --c-canvas: 247 249 251;
+  --c-surface: 255 255 255;
+  --c-surface-1: 248 250 252;
+  --c-surface-2: 241 245 249;
+  --c-surface-3: 232 238 245;
+  --c-sidebar: 255 255 255;
+  --c-sidebar-line: 233 237 243;
+
+  --c-on-surface: 15 23 42;
+  --c-on-surface-var: 71 85 105;
+  --c-on-surface-faint: 100 116 139;
+  --c-outline-var: 233 237 243;
+  --c-outline: 203 213 225;
+
+  /* Status — the entire data palette */
+  --c-st-draft: 148 163 184;
+  --c-st-submitted: 37 99 235;
+  --c-st-review: 2 132 199;
+  --c-st-approved: 22 163 74;
+  --c-st-rejected: 220 38 38;
+  --c-st-sentback: 217 119 6;
+
+  /* Status chips: pastel fill / saturated label / tinted border */
+  --chip-draft: 241 245 249;      --chip-draft-fg: 71 85 105;      --chip-draft-bd: 226 232 240;
+  --chip-submitted: 239 246 255;  --chip-submitted-fg: 29 78 216;  --chip-submitted-bd: 219 234 254;
+  --chip-review: 224 242 254;     --chip-review-fg: 3 105 161;     --chip-review-bd: 186 230 253;
+  --chip-approved: 220 252 231;   --chip-approved-fg: 21 128 61;   --chip-approved-bd: 187 247 208;
+  --chip-rejected: 254 226 226;   --chip-rejected-fg: 185 28 28;   --chip-rejected-bd: 254 202 202;
+  --chip-sentback: 254 243 199;   --chip-sentback-fg: 180 83 9;    --chip-sentback-bd: 253 230 138;
+
+  /* §1.3 Elevation — three steps */
+  --elev-1: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
+  --elev-2: 0 2px 4px rgb(15 23 42 / 0.05), 0 8px 16px rgb(15 23 42 / 0.08);
+  --elev-3: 0 4px 8px rgb(15 23 42 / 0.06), 0 16px 32px rgb(15 23 42 / 0.14);
+
+  /* Cards: no border in light, hairline in dark */
+  --card-border: 0 0 0 0 transparent;
+
+  /* §1.7 Motion */
+  --ease-std: cubic-bezier(0.2, 0, 0, 1);
+  --dur-fast: 100ms;
+  --dur: 150ms;
+  --dur-layout: 200ms;
+
+  /* §3 Shell */
+  --shell-header-h: 72px;
+  --shell-sidebar-w: 224px;
+  --shell-rail-w: 84px;
+}
+
+/* Dark set: re-toned, not inverted. Never bottoms out at pure black. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --c-primary: 242 135 158;
+    --c-on-primary: 92 12 36;
+    --c-primary-container: 116 18 46;
+    --c-on-primary-container: 251 208 218;
+    --c-canvas: 15 18 24;
+    --c-surface: 22 26 33;
+    --c-surface-1: 28 33 41;
+    --c-surface-2: 36 42 52;
+    --c-surface-3: 45 53 64;
+    --c-sidebar: 22 26 33;
+    --c-sidebar-line: 42 49 60;
+    --c-on-surface: 226 232 240;
+    --c-on-surface-var: 160 172 187;
+    --c-on-surface-faint: 125 138 154;
+    --c-outline-var: 42 49 60;
+    --c-outline: 65 74 87;
+    --c-st-submitted: 96 165 250;
+    --c-st-review: 56 189 248;
+    --c-st-approved: 74 222 128;
+    --c-st-rejected: 248 113 113;
+    --c-st-sentback: 251 191 36;
+    --chip-draft: 36 42 52;     --chip-draft-fg: 160 172 187;     --chip-draft-bd: 51 59 71;
+    --chip-submitted: 23 41 77; --chip-submitted-fg: 147 197 253; --chip-submitted-bd: 30 58 107;
+    --chip-review: 12 53 80;    --chip-review-fg: 125 211 252;    --chip-review-bd: 18 73 110;
+    --chip-approved: 16 55 31;  --chip-approved-fg: 134 239 172;  --chip-approved-bd: 23 81 45;
+    --chip-rejected: 69 22 26;  --chip-rejected-fg: 252 165 165;  --chip-rejected-bd: 97 33 38;
+    --chip-sentback: 64 48 12;  --chip-sentback-fg: 252 211 77;   --chip-sentback-bd: 90 68 19;
+    --elev-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.35);
+    --elev-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 8px 16px rgb(0 0 0 / 0.4);
+    --elev-3: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 32px rgb(0 0 0 / 0.5);
+    --card-border: 0 0 0 1px rgb(var(--c-outline-var));
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --c-primary: 242 135 158;
+  --c-on-primary: 92 12 36;
+  --c-primary-container: 116 18 46;
+  --c-on-primary-container: 251 208 218;
+  --c-canvas: 15 18 24;
+  --c-surface: 22 26 33;
+  --c-surface-1: 28 33 41;
+  --c-surface-2: 36 42 52;
+  --c-surface-3: 45 53 64;
+  --c-sidebar: 22 26 33;
+  --c-sidebar-line: 42 49 60;
+  --c-on-surface: 226 232 240;
+  --c-on-surface-var: 160 172 187;
+  --c-on-surface-faint: 125 138 154;
+  --c-outline-var: 42 49 60;
+  --c-outline: 65 74 87;
+  --c-st-submitted: 96 165 250;
+  --c-st-review: 56 189 248;
+  --c-st-approved: 74 222 128;
+  --c-st-rejected: 248 113 113;
+  --c-st-sentback: 251 191 36;
+  --chip-draft: 36 42 52;     --chip-draft-fg: 160 172 187;     --chip-draft-bd: 51 59 71;
+  --chip-submitted: 23 41 77; --chip-submitted-fg: 147 197 253; --chip-submitted-bd: 30 58 107;
+  --chip-review: 12 53 80;    --chip-review-fg: 125 211 252;    --chip-review-bd: 18 73 110;
+  --chip-approved: 16 55 31;  --chip-approved-fg: 134 239 172;  --chip-approved-bd: 23 81 45;
+  --chip-rejected: 69 22 26;  --chip-rejected-fg: 252 165 165;  --chip-rejected-bd: 97 33 38;
+  --chip-sentback: 64 48 12;  --chip-sentback-fg: 252 211 77;   --chip-sentback-bd: 90 68 19;
+  --elev-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.35);
+  --elev-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 8px 16px rgb(0 0 0 / 0.4);
+  --elev-3: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 32px rgb(0 0 0 / 0.5);
+  --card-border: 0 0 0 1px rgb(var(--c-outline-var));
+}
+
+/* ---------------------------------------------------------------------
+   §2 / §7  Closed scales. Defaults are DELETED (`initial`), then only the
+   system's values are declared, so an off-scale utility does not exist.
+   --------------------------------------------------------------------- */
+@theme inline {
+  /* Colour roles — components reference roles, never raw tokens */
+  --color-*: initial;
+  --color-primary: rgb(var(--c-primary));
+  --color-primary-on: rgb(var(--c-on-primary));
+  --color-primary-container: rgb(var(--c-primary-container));
+  --color-primary-container-on: rgb(var(--c-on-primary-container));
+  --color-canvas: rgb(var(--c-canvas));
+  --color-surface: rgb(var(--c-surface));
+  --color-surface-1: rgb(var(--c-surface-1));
+  --color-surface-2: rgb(var(--c-surface-2));
+  --color-surface-3: rgb(var(--c-surface-3));
+  --color-sidebar: rgb(var(--c-sidebar));
+  --color-sidebar-line: rgb(var(--c-sidebar-line));
+  --color-ink: rgb(var(--c-on-surface));
+  --color-ink-muted: rgb(var(--c-on-surface-var));
+  --color-ink-faint: rgb(var(--c-on-surface-faint));
+  --color-line: rgb(var(--c-outline-var));
+  --color-line-strong: rgb(var(--c-outline));
+  --color-st-draft: rgb(var(--c-st-draft));
+  --color-st-submitted: rgb(var(--c-st-submitted));
+  --color-st-review: rgb(var(--c-st-review));
+  --color-st-approved: rgb(var(--c-st-approved));
+  --color-st-rejected: rgb(var(--c-st-rejected));
+  --color-st-sentback: rgb(var(--c-st-sentback));
+  --color-white: #fff;
+  --color-black: #000;
+  --color-transparent: transparent;
+
+  /* §1.5 Type — one family, six sizes, four weights */
+  --font-*: initial;
+  --font-sans: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
+  --font-serif: Georgia, Tinos, "Times New Roman", serif;
+
+  --text-*: initial;
+  --text-xs: 12px;   --text-xs--line-height: 16px;
+  --text-sm: 14px;   --text-sm--line-height: 20px;
+  --text-base: 16px; --text-base--line-height: 24px;
+  --text-lg: 20px;   --text-lg--line-height: 28px;
+  --text-xl: 24px;   --text-xl--line-height: 32px;
+  --text-2xl: 36px;  --text-2xl--line-height: 40px;
+
+  --font-weight-*: initial;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* §1.4 Radius — four values (+ the one 24 for the shell corner) */
+  --radius-*: initial;
+  --radius-xs: 8px;
+  --radius-sm: 12px;
+  --radius-lg: 16px;
+  --radius-shell: 24px;
+  --radius-full: 9999px;
+
+  /* §1.3 Elevation */
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --shadow-e1: var(--elev-1);
+  --shadow-e2: var(--elev-2);
+  --shadow-e3: var(--elev-3);
+
+  /* §1.7 Motion */
+  --ease-*: initial;
+  --ease-std: var(--ease-std);
+  --animate-*: initial;
+  --animate-fade-up: fade-up var(--dur) var(--ease-std) both;
+
+  --default-transition-duration: var(--dur);
+  --default-transition-timing-function: var(--ease-std);
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* ---------------------------------------------------------------------
+   Base
+   --------------------------------------------------------------------- */
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    background: rgb(var(--c-canvas));
+    color: rgb(var(--c-on-surface));
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    font-variant-numeric: tabular-nums;
+  }
+  button, input, optgroup, select, textarea { font: inherit; color: inherit; }
+  button { cursor: pointer; }
+  a { color: rgb(var(--c-primary)); text-underline-offset: 2px; }
+  :focus-visible {
+    outline: 2px solid rgb(var(--c-primary));
+    outline-offset: 2px;
+  }
+  /* §1.8 Icons: one family, stroke 1.75, round joins */
+  svg.lucide { stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }
+  ::selection { background: rgb(var(--c-primary) / 0.18); }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+}
+
+/* ---------------------------------------------------------------------
+   §4 Components. Roles only; hover/press are state layers.
+   --------------------------------------------------------------------- */
+@layer components {
+  /* ---- state layer helper: inset wash of the on-colour ---- */
+  .state-layer { --sl-color: var(--c-on-surface); }
+  .state-layer:hover  { box-shadow: inset 0 0 0 100px rgb(var(--sl-color) / 0.06); }
+  .state-layer:active { box-shadow: inset 0 0 0 100px rgb(var(--sl-color) / 0.1); }
+
+  /* ---- §4.1 Button ---- */
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 40px; padding: 0 20px; border-radius: 9999px;
+    font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
+    border: 1px solid transparent; background: transparent; color: rgb(var(--c-on-surface));
+    transition: background-color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std),
+      color var(--dur) var(--ease-std), transform var(--dur) var(--ease-std);
+    user-select: none; text-decoration: none;
+  }
+  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
+  .btn--sm { height: 34px; padding: 0 16px; font-size: 12px; line-height: 16px; }
+  .btn--icon { width: 40px; padding: 0; }
+  .btn--icon.btn--sm { width: 34px; }
+
+  .btn--filled { background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); box-shadow: var(--elev-1); }
+  .btn--filled:hover  { box-shadow: var(--elev-1), inset 0 0 0 100px rgb(var(--c-on-primary) / 0.12); }
+  .btn--filled:active { box-shadow: var(--elev-1), inset 0 0 0 100px rgb(var(--c-on-primary) / 0.2); }
+
+  .btn--tonal { background: rgb(var(--c-primary-container)); color: rgb(var(--c-on-primary-container)); }
+  .btn--tonal:hover  { box-shadow: inset 0 0 0 100px rgb(var(--c-on-primary-container) / 0.08); }
+  .btn--tonal:active { box-shadow: inset 0 0 0 100px rgb(var(--c-on-primary-container) / 0.14); }
+
+  .btn--outlined { background: rgb(var(--c-surface)); border-color: rgb(var(--c-outline)); color: rgb(var(--c-on-surface)); }
+  .btn--outlined:hover  { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .btn--outlined:active { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.09); }
+
+  .btn--text { color: rgb(var(--c-on-surface-var)); }
+  .btn--text:hover  { color: rgb(var(--c-on-surface)); box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .btn--text:active { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.09); }
+
+  /* the three decisions — status tinted */
+  .btn--approve  { background: rgb(var(--chip-approved)); color: rgb(var(--chip-approved-fg)); border-color: rgb(var(--chip-approved-bd)); }
+  .btn--sendback { background: rgb(var(--chip-sentback)); color: rgb(var(--chip-sentback-fg)); border-color: rgb(var(--chip-sentback-bd)); }
+  .btn--reject   { background: rgb(var(--chip-rejected)); color: rgb(var(--chip-rejected-fg)); border-color: rgb(var(--chip-rejected-bd)); }
+  .btn--approve:hover, .btn--sendback:hover, .btn--reject:hover { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .btn--approve:active, .btn--sendback:active, .btn--reject:active { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.09); }
+
+  /* attention: still the thing to press, visibly "not ready yet" */
+  .btn--attention { box-shadow: var(--elev-1), 0 0 0 3px rgb(var(--c-st-sentback) / 0.35); }
+  .btn--attention:hover { box-shadow: var(--elev-1), 0 0 0 3px rgb(var(--c-st-sentback) / 0.35), inset 0 0 0 100px rgb(var(--c-on-primary) / 0.12); }
+
+  .btn-spinner {
+    width: 16px; height: 16px; border-radius: 9999px;
+    border: 2px solid currentColor; border-right-color: transparent;
+    animation: btn-spin 700ms linear infinite;
+  }
+
+  /* ---- §4.2 Card ---- */
+  .card {
+    background: rgb(var(--c-surface)); border-radius: 16px;
+    box-shadow: var(--elev-2), var(--card-border);
+  }
+  .card-h {
+    display: flex; align-items: center; justify-content: space-between; gap: 16px;
+    padding: 20px 24px; border-bottom: 1px solid rgb(var(--c-outline-var));
+  }
+  .card-h > .card-title, .card-title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; min-width: 0; }
+  .card-b { padding: 24px; }
+  .card-b--compact { padding: 16px; }
+
+  /* ---- §4.3 Stat tile ---- */
+  .stat-tile {
+    display: flex; align-items: center; gap: 16px; padding: 20px; text-align: left;
+    background: rgb(var(--c-surface)); border-radius: 16px; width: 100%;
+    box-shadow: var(--elev-2), var(--card-border); border: 0; color: inherit;
+    transition: box-shadow var(--dur) var(--ease-std);
+  }
+  .stat-tile[data-active="true"] { box-shadow: var(--elev-2), var(--card-border), 0 0 0 2px rgb(var(--c-primary)); }
+  .stat-tile__icon {
+    width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
+    background: rgb(var(--tile-tone) / 0.14); color: rgb(var(--tile-tone));
+  }
+  .stat-tile__figure { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
+  .stat-tile__label { font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(var(--c-on-surface-var)); }
+
+  /* ---- §4.4 Large-icon record card ---- */
+  .brd-grid {
+    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 24px; row-gap: 48px; padding-top: 28px; align-items: start;
+  }
+  @media (min-width: 760px)  { .brd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+  @media (min-width: 1100px) { .brd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+
+  .brd-card {
+    position: relative; display: flex; flex-direction: column;
+    background: rgb(var(--c-surface)); border-radius: 16px;
+    box-shadow: var(--elev-2), var(--card-border);
+    padding: 48px 36px 24px; min-height: 230px; text-align: left; color: inherit; border: 0; width: 100%;
+    transition: box-shadow var(--dur) var(--ease-std), transform var(--dur) var(--ease-std);
+  }
+  .brd-card:hover { box-shadow: var(--elev-3), var(--card-border); }
+  .brd-card__orb {
+    position: absolute; top: -26px; left: 36px; width: 52px; height: 52px; border-radius: 9999px;
+    display: grid; place-items: center; color: #fff; background: rgb(var(--orb-tone));
+    box-shadow: 0 6px 14px rgb(15 23 42 / 0.14);
+  }
+  .brd-card__title {
+    font-size: 18px; line-height: 24px; font-weight: 500; margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    min-height: 48px; overflow-wrap: break-word;
+  }
+  .brd-card__meta { display: flex; flex-direction: column; margin-top: 12px; margin-bottom: 16px; }
+  .brd-card__meta-row {
+    display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0;
+    font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-faint));
+  }
+  .brd-card__meta-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .brd-card__foot {
+    margin-top: auto; padding-top: 16px; border-top: 1px solid rgb(var(--c-outline-var));
+    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+  }
+  .brd-card__foot-label {
+    font-size: 11px; line-height: 16px; font-weight: 700;
+    color: rgb(var(--c-on-surface-faint)); display: block; margin-bottom: 6px; white-space: nowrap;
+  }
+  .brd-card__pct { font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
+
+  /* ---- §4.5 Table ---- */
+  .table { width: 100%; border-collapse: separate; border-spacing: 0; }
+  .table-plan { table-layout: fixed; }
+  .th {
+    font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
+    color: rgb(var(--c-on-surface-faint)); background: rgb(var(--c-surface-1));
+    padding: 12px 16px; text-align: left; border-bottom: 1px solid rgb(var(--c-outline-var));
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .th--sortable { cursor: pointer; user-select: none; }
+  .th--sortable:hover { color: rgb(var(--c-on-surface)); }
+  .td {
+    font-size: 14px; line-height: 20px; padding: 14px 16px; vertical-align: middle;
+    border-bottom: 1px solid rgb(var(--c-outline-var)); overflow-wrap: anywhere;
+  }
+  .td--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .td--num { text-align: right; font-variant-numeric: tabular-nums; }
+  .td-sub { display: block; font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-faint)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .row-link { cursor: pointer; transition: background-color var(--dur) var(--ease-std); }
+  .row-link:hover > .td { background: rgb(var(--c-surface-1)); }
+  .table tbody tr:last-child > .td { border-bottom: 0; }
+
+  /* ---- §4.6 Filter chips ---- */
+  .fchip {
+    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px;
+    border-radius: 8px; font-size: 13px; line-height: 16px; font-weight: 500;
+    color: rgb(var(--c-on-surface-var)); background: transparent; border: 0;
+    transition: color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std);
+  }
+  .fchip:hover { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .fchip[aria-pressed="true"] { color: rgb(var(--c-on-surface)); }
+  .fcount {
+    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
+    border-radius: 8px; background: rgb(var(--c-surface-2)); font-size: 11px; font-weight: 600;
+    font-variant-numeric: tabular-nums; border: 1px solid transparent;
+    transition: background-color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);
+  }
+  .fchip[aria-pressed="true"] .fcount { background: rgb(var(--c-surface)); border-color: rgb(var(--c-primary)); color: rgb(var(--c-primary)); }
+
+  /* ---- §4.7 Tabs — segmented control ---- */
+  .tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: rgb(var(--c-surface-2)); gap: 2px; }
+  .tab {
+    position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
+    border-radius: 8px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap;
+    color: rgb(var(--c-on-surface-var)); background: transparent; border: 0;
+    transition: background-color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std), color var(--dur) var(--ease-std);
+  }
+  .tab:hover { color: rgb(var(--c-on-surface)); }
+  .tab[aria-selected="true"] { background: rgb(var(--c-surface)); box-shadow: var(--elev-1); color: rgb(var(--c-on-surface)); font-weight: 600; }
+  .tab-badge {
+    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
+    border-radius: 6px; background: rgb(var(--c-surface-3)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
+  }
+  .tab[aria-selected="true"] .tab-badge { background: rgb(var(--c-primary-container)); color: rgb(var(--c-on-primary-container)); }
+  .tab-alert { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 9999px; background: rgb(var(--c-st-sentback)); }
+
+  /* ---- §4.8 Toolbar button ---- */
+  .tbtn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px;
+    border-radius: 8px; background: rgb(var(--c-surface)); box-shadow: var(--elev-1);
+    font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(var(--c-on-surface-var)); border: 0;
+    transition: background-color var(--dur) var(--ease-std), color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std);
+  }
+  .tbtn:hover { color: rgb(var(--c-on-surface)); box-shadow: var(--elev-1), inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .tbtn--icon { width: 32px; padding: 0; }
+  .tbtn[aria-pressed="true"] { background: rgb(var(--c-primary-container)); color: rgb(var(--c-on-primary-container)); }
+
+  /* ---- §4.9 Inputs ---- */
+  .lbl { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: rgb(var(--c-on-surface-var)); margin-bottom: 8px; }
+  .lbl__req { color: rgb(var(--c-primary)); margin-left: 2px; }
+  .hint { display: block; font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-faint)); margin-top: 8px; }
+  .hint--error { color: rgb(var(--chip-rejected-fg)); }
+  .inp {
+    display: block; width: 100%; height: 40px; padding: 0 16px; border-radius: 8px;
+    border: 1px solid rgb(var(--c-outline)); background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface));
+    font-size: 14px; line-height: 20px; outline: none;
+    transition: border-color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std);
+  }
+  .inp::placeholder { color: rgb(var(--c-on-surface-faint)); }
+  .inp:hover { border-color: rgb(var(--c-on-surface-faint)); }
+  .inp:focus { border-color: rgb(var(--c-primary)); box-shadow: 0 0 0 3px rgb(var(--c-primary) / 0.12); }
+  .inp[aria-invalid="true"] { border-color: rgb(var(--c-st-rejected)); }
+  .inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--c-st-rejected) / 0.12); }
+  .inp:disabled { opacity: 0.4; pointer-events: none; }
+  .inp--dense { height: 36px; }
+  textarea.inp { height: auto; min-height: 96px; padding: 10px 16px; resize: vertical; }
+  select.inp { padding-right: 40px; appearance: none; background-image: none; }
+  .inp-wrap { position: relative; }
+  .inp-wrap > .inp-glyph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--c-on-surface-faint)); pointer-events: none; }
+  .inp-wrap > .inp-glyph--right { left: auto; right: 12px; }
+  .inp-wrap > .inp--glyph { padding-left: 36px; }
+  .inp-wrap > .inp--glyph-right { padding-right: 40px; }
+  .inp-search { background: rgb(var(--c-surface-1)); border-color: transparent; }
+  .inp-search:hover { border-color: transparent; background: rgb(var(--c-surface-2)); }
+  .inp-search:focus { background: rgb(var(--c-surface)); border-color: rgb(var(--c-primary)); }
+  .checkbox {
+    width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgb(var(--c-outline));
+    accent-color: rgb(var(--c-primary)); cursor: pointer; margin: 0;
+  }
+
+  /* ---- §4.10 Chip / pill / tag ---- */
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px;
+    font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
+    background: rgb(var(--chip-bg)); color: rgb(var(--chip-fg)); border: 1px solid rgb(var(--chip-bd));
+  }
+  .chip::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--chip-fg)); flex-shrink: 0; }
+  .chip--draft     { --chip-bg: var(--chip-draft);     --chip-fg: var(--chip-draft-fg);     --chip-bd: var(--chip-draft-bd); }
+  .chip--submitted { --chip-bg: var(--chip-submitted); --chip-fg: var(--chip-submitted-fg); --chip-bd: var(--chip-submitted-bd); }
+  .chip--review    { --chip-bg: var(--chip-review);    --chip-fg: var(--chip-review-fg);    --chip-bd: var(--chip-review-bd); }
+  .chip--approved  { --chip-bg: var(--chip-approved);  --chip-fg: var(--chip-approved-fg);  --chip-bd: var(--chip-approved-bd); }
+  .chip--rejected  { --chip-bg: var(--chip-rejected);  --chip-fg: var(--chip-rejected-fg);  --chip-bd: var(--chip-rejected-bd); }
+  .chip--sentback  { --chip-bg: var(--chip-sentback);  --chip-fg: var(--chip-sentback-fg);  --chip-bd: var(--chip-sentback-bd); }
+  .tag {
+    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 8px;
+    background: rgb(var(--c-surface-1)); border: 1px solid rgb(var(--c-outline-var));
+    font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(var(--c-on-surface-var)); white-space: nowrap;
+  }
+  .vchip { font-family: var(--font-mono); font-weight: 600; }
+  .vchip[data-current="true"] { background: rgb(var(--c-primary-container)); color: rgb(var(--c-on-primary-container)); border-color: transparent; }
+
+  /* ---- §4.11 Notice ---- */
+  .notice {
+    display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 8px;
+    background: rgb(var(--c-surface-2)); font-size: 14px; line-height: 1.5; color: rgb(var(--c-on-surface));
+  }
+  .notice > .notice__icon { margin-top: 2px; color: rgb(var(--c-on-surface-var)); }
+  .notice > .notice__text { min-width: 0; flex: 1; }
+  .notice > .notice__action { flex-shrink: 0; }
+  .notice--accent { background: rgb(var(--c-primary-container)); color: rgb(var(--c-on-primary-container)); }
+  .notice--accent > .notice__icon { color: rgb(var(--c-on-primary-container)); }
+  .notice--alert { background: rgb(var(--chip-rejected)); color: rgb(var(--chip-rejected-fg)); }
+  .notice--alert > .notice__icon { color: rgb(var(--c-st-rejected)); }
+
+  /* ---- §4.12 Avatar ---- */
+  .avatar {
+    display: inline-grid; place-items: center; border-radius: 9999px; overflow: hidden; flex-shrink: 0;
+    font-weight: 600; color: #fff; background: var(--avatar-tint, rgb(var(--c-on-surface-faint)));
+    user-select: none; line-height: 1;
+  }
+  .avatar > img { width: 100%; height: 100%; object-fit: cover; }
+  .avatar-stack { display: inline-flex; align-items: center; }
+  .avatar-stack > .avatar, .avatar-stack > .avatar-more { box-shadow: 0 0 0 2px rgb(var(--c-surface)); }
+  .avatar-stack > * + * { margin-left: -4px; }
+  .avatar-more {
+    display: inline-grid; place-items: center; border-radius: 9999px; flex-shrink: 0;
+    border: 1px dashed rgb(var(--c-outline)); background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface-faint));
+    font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
+  }
+
+  /* ---- §4.13 Person + contact card ---- */
+  .person {
+    display: inline-flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%;
+    background: none; border: 0; padding: 0; color: inherit; text-align: left; border-radius: 4px;
+  }
+  .person__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .person__sub { display: block; font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-faint)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .person-card {
+    position: fixed; z-index: 60; width: 300px; border-radius: 12px; background: rgb(var(--c-surface));
+    box-shadow: var(--elev-3), 0 0 0 1px rgb(var(--c-outline-var)); animation: fade-up var(--dur) var(--ease-std) both;
+  }
+  .person-card__head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid rgb(var(--c-outline-var)); }
+  .person-card__name { font-size: 16px; line-height: 24px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .person-card__desig { font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-var)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .person-card__body { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
+  .person-card__row { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 16px; min-width: 0; color: rgb(var(--c-on-surface)); }
+  .person-card__row > .lucide { color: rgb(var(--c-on-surface-faint)); }
+  .person-card__row > span, .person-card__row > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* ---- §4.14 Stepper (approval route) ---- */
+  .stepper { display: flex; gap: 0; position: relative; }
+  .stepper--h { flex-direction: row; overflow-x: auto; }
+  .stepper--h .step { flex: 1 0 168px; min-width: 168px; position: relative; padding: 0 8px; text-align: center; }
+  .stepper--h .step + .step::before {
+    content: ""; position: absolute; top: 20px; right: 50%; left: -50%; height: 2px; transform: translateY(-1px);
+    background: rgb(var(--c-outline-var)); z-index: 0;
+  }
+  .stepper--h .step[data-state="done"] + .step::before { background: rgb(var(--c-primary)); }
+  .stepper--v { flex-direction: column; gap: 24px; }
+  .stepper--v .step { display: flex; gap: 12px; position: relative; text-align: left; }
+  .stepper--v .step + .step::before {
+    content: ""; position: absolute; left: 20px; top: -24px; height: 24px; width: 2px; transform: translateX(-1px);
+    background: rgb(var(--c-outline-var));
+  }
+  .stepper--v .step[data-state="done"] + .step::before { background: rgb(var(--c-primary)); }
+  .stamp {
+    position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 9999px; display: inline-grid; place-items: center;
+    border: 2px solid rgb(var(--c-outline)); background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface-var));
+    font-size: 12px; line-height: 16px; font-weight: 500; flex-shrink: 0;
+  }
+  .step[data-state="done"] .stamp { background: rgb(var(--c-primary)); border-color: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); }
+  .step[data-state="current"] .stamp {
+    background: rgb(var(--c-primary-container)); border-color: rgb(var(--c-primary)); color: rgb(var(--c-on-primary-container));
+    box-shadow: 0 0 0 4px rgb(var(--c-primary) / 0.14);
+  }
+  .step[data-state="rejected"] .stamp { background: rgb(var(--chip-rejected)); border-color: rgb(var(--chip-rejected-bd)); color: rgb(var(--chip-rejected-fg)); }
+  .step__body { min-width: 0; }
+  .stepper--h .step__body { margin-top: 8px; }
+  .stepper--v .step__body { padding-top: 10px; }
+  .step__title { font-size: 12px; line-height: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .step__sub { font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-faint)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* ---- §4.15 Dialog ---- */
+  .modal-scrim { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.3); display: grid; place-items: center; padding: 24px; }
+  .modal {
+    display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 48px);
+    background: rgb(var(--c-surface)); border-radius: 12px; box-shadow: var(--elev-3), var(--card-border);
+    animation: fade-up var(--dur) var(--ease-std) both;
+  }
+  .modal--480 { max-width: 480px; } .modal--640 { max-width: 640px; } .modal--960 { max-width: 960px; }
+  .modal__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgb(var(--c-outline-var)); flex-shrink: 0; }
+  .modal__title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
+  .modal__b { padding: 24px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
+  .modal__f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid rgb(var(--c-outline-var)); flex-shrink: 0; }
+
+  /* ---- §4.16 Full-screen document ---- */
+  .doc-full { position: fixed; inset: 0; z-index: 55; background: rgb(var(--c-canvas)); overflow-y: auto; }
+  .doc-full__page { width: min(920px, calc(100% - 48px)); margin: 48px auto; background: rgb(var(--c-surface)); border-radius: 16px; box-shadow: var(--elev-2), var(--card-border); padding: 64px 72px; }
+  .doc-full__exit { position: fixed; top: 24px; right: 24px; box-shadow: var(--elev-2); }
+  .doc { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: rgb(var(--c-on-surface)); }
+  .doc h1 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 16px; }
+  .doc h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 24px 0 8px; }
+  .doc p { margin: 0 0 12px; }
+
+  /* ---- §4.17 Skeleton ---- */
+  .skel { background: rgb(var(--c-surface-2)); border-radius: 8px; display: block; }
+  .skel--circle { border-radius: 9999px; }
+
+  /* ---- §4.18 Empty state ---- */
+  .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 8px; }
+  .empty__well { width: 48px; height: 48px; border-radius: 9999px; background: rgb(var(--c-surface-1)); display: grid; place-items: center; color: rgb(var(--c-on-surface-faint)); margin-bottom: 8px; }
+  .empty__title { font-size: 14px; line-height: 20px; font-weight: 500; margin: 0; }
+  .empty__line { font-size: 14px; line-height: 20px; color: rgb(var(--c-on-surface-var)); max-width: 46ch; margin: 0; }
+
+  /* ---- §4.19 Toast ---- */
+  .toast {
+    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
+    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; max-width: min(480px, calc(100vw - 48px));
+    background: rgb(var(--c-on-surface)); color: rgb(var(--c-surface)); font-size: 14px; line-height: 20px;
+    box-shadow: var(--elev-2); animation: fade-up var(--dur) var(--ease-std) both;
+  }
+  .toast--error { background: rgb(var(--chip-rejected)); color: rgb(var(--chip-rejected-fg)); box-shadow: var(--elev-2), 0 0 0 1px rgb(var(--chip-rejected-bd)); }
+  .toast__text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .toast__close { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: none; border: 0; color: inherit; opacity: 0.8; }
+  .toast__close:hover { opacity: 1; box-shadow: inset 0 0 0 100px rgb(255 255 255 / 0.12); }
+
+  /* ---- §3 Shell ---- */
+  .shell { display: flex; min-height: 100vh; background: rgb(var(--c-sidebar)); color: rgb(var(--c-on-surface)); }
+  .shell__sidebar {
+    position: sticky; top: 0; height: 100vh; flex-shrink: 0; display: flex; flex-direction: column;
+    width: var(--shell-sidebar-w); background: rgb(var(--c-sidebar)); padding: 20px 16px 16px;
+    transition: width var(--dur-layout) var(--ease-std);
+  }
+  .shell[data-rail="true"] .shell__sidebar { width: var(--shell-rail-w); }
+  .shell__brand { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; margin-bottom: 20px; min-width: 0; }
+  .shell__brand-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); font-weight: 700; font-size: 14px; }
+  .shell__brand-name { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .shell__nav { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+  .shell__nav-gap { height: 12px; flex-shrink: 0; }
+  .nav-item {
+    display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 12px;
+    font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--c-on-surface-var));
+    background: transparent; border: 0; width: 100%; text-align: left; white-space: nowrap; min-width: 0;
+    transition: background-color var(--dur) var(--ease-std), color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std);
+  }
+  .nav-item:hover { color: rgb(var(--c-on-surface)); box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .nav-item[aria-current="page"] {
+    background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); font-weight: 600;
+    box-shadow: 0 8px 16px rgb(var(--c-primary) / 0.22);
+  }
+  .nav-item[aria-current="page"]:hover { box-shadow: 0 8px 16px rgb(var(--c-primary) / 0.22), inset 0 0 0 100px rgb(var(--c-on-primary) / 0.12); }
+  .nav-item__label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
+  .nav-item__count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; }
+  .shell[data-rail="true"] .nav-item { justify-content: center; padding: 0; }
+  .shell[data-rail="true"] .nav-item__label, .shell[data-rail="true"] .nav-item__count, .shell[data-rail="true"] .shell__brand-name { display: none; }
+  .shell__foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
+  .shell__collapse {
+    position: absolute; top: 26px; right: -14px; z-index: 5; width: 28px; height: 28px; border-radius: 9999px;
+    display: grid; place-items: center; background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface-var));
+    box-shadow: var(--elev-2), 0 0 0 1px rgb(var(--c-outline-var)); border: 0;
+  }
+  .shell__collapse:hover { color: rgb(var(--c-on-surface)); }
+  .shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+  .shell__header {
+    height: var(--shell-header-h); flex-shrink: 0; display: flex; align-items: center; gap: 24px; padding: 0 32px;
+    background: rgb(var(--c-sidebar));
+  }
+  .shell[data-rail="true"] .shell__header { display: none; }
+  .shell__greeting { min-width: 0; margin-right: auto; }
+  .shell__greeting-hi { font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-var)); }
+  .shell__greeting-name { font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .shell__search { width: 320px; flex-shrink: 1; min-width: 160px; }
+  .bell { position: relative; }
+  .bell__badge {
+    position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px;
+    background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
+    box-shadow: 0 0 0 2px rgb(var(--c-sidebar));
+  }
+  .user-pill {
+    display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px 0 4px; border-radius: 9999px;
+    background: transparent; border: 0; color: inherit; text-align: left;
+    transition: box-shadow var(--dur) var(--ease-std);
+  }
+  .user-pill:hover { box-shadow: inset 0 0 0 100px rgb(var(--c-on-surface) / 0.05); }
+  .user-pill__name { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
+  .user-pill__role { font-size: 12px; line-height: 16px; color: rgb(var(--c-on-surface-var)); white-space: nowrap; }
+  .shell__content {
+    flex: 1; min-width: 0; background: rgb(var(--c-canvas)); border-top-left-radius: 24px;
+    padding: 24px;
+  }
+  @media (min-width: 1280px) { .shell__content { padding: 24px 32px 32px; } }
+  .shell[data-rail="true"] .shell__content { border-top-left-radius: 24px; }
+  .menu {
+    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; padding: 6px;
+    background: rgb(var(--c-surface)); border-radius: 12px; box-shadow: var(--elev-2), var(--card-border);
+    animation: fade-up var(--dur) var(--ease-std) both;
+  }
+  .menu__item {
+    display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
+    font-size: 14px; background: none; border: 0; color: rgb(var(--c-on-surface)); text-align: left;
+  }
+  .menu__item:hover { background: rgb(var(--c-surface-1)); }
+
+  /* ---- Toolbar row at the top of the content panel (law 2) ---- */
+  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
+  .toolbar__left, .toolbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
+  .toolbar__right { margin-left: auto; gap: 8px; }
+}
+
+@keyframes btn-spin { to { transform: rotate(360deg); } }
+
+/* ---------------------------------------------------------------------
+   Utilities the spec names that Tailwind does not ship
+   --------------------------------------------------------------------- */
+@utility clamp-2 {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+@utility tabular { font-variant-numeric: tabular-nums; }
+@utility hairline { border-color: rgb(var(--c-outline-var)); }