@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/components/_house.css

@@ -0,0 +1,324 @@
+/* Fello Brand Kit: the house styles every preview and consumer shares. Loaded after tokens.css, which declares
+   every --color-*, --ws-*, --space-*, --radius-*, --shadow-* and --font-body custom property from tokens.json.
+   The class names are the product layer's (ws-*), so code and system speak one language.
+
+   Two parts: the house (base, stage, layout, surfaces, words, fields, rows, motion, touch), then every catalog component
+   (scripts/build-bundle.mjs: the primitives, then A to Z) under its own block, `.ws-<component>` (the component's name in kebab case), its parts
+   `.ws-<component>__part` and its variants `.ws-<component>--variant`. A preview is markup only: everything it shows
+   is styled here. Every value is a token or a calc on tokens.
+
+   The kit touches only its own elements (0.5.0, D11). An element reset applies to an element that wears a ws-* class
+   or sits inside one, through :where(), so it costs no specificity and a host's own markup and utilities are left
+   alone; only the page itself (html, body) is styled bare. In dist/fello.css everything above the base mark below sits
+   in the base.fello cascade layer and the rest in components.fello (scripts/fello-css.mjs says why). */
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap");
+
+/* ---- Base: the page, then resets on kit elements ([class^="ws-"], [class*=" ws-"] and what sits inside them) ---- */
+html { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
+body { margin: 0; background: var(--color-bg-page); color: var(--color-text-body); font-family: var(--font-body); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); }
+/* An element that sets a palette or a theme sets its words too (D15): `color` inherits as the colour it resolved to, so
+   without this a dark container in a light page would keep the page's grey for every word it does not colour itself.
+   No specificity, so any colour a component or the host gives wins. */
+:where([data-palette], [data-theme], .fello) { color: var(--color-text-body); }
+/* The page type on the kit's roots too. A host or an artifact skeleton that styles body unlayered beats this layer on
+   body, and the kit would inherit its face; a rule on the root itself wins over what the root inherits. */
+:where(.ws-app-shell, .ws-page, .ws-entry-shell, .ws-status-screen, dialog.ws-dialog, .ws-menu, .ws-popover) { font-family: var(--font-body); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-body); }
+:where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *), :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::before, :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::after { box-sizing: border-box; }
+:where(h1, h2, h3, h4, p, ul, ol, figure):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { margin: 0; }
+:where(ul, ol):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { padding: 0; list-style: none; }
+/* K14: text-align inherits too, so a button.ws-act starts on its column's edge instead of centring its words. */
+:where(button, input, select, textarea):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { font: inherit; color: inherit; text-align: inherit; }
+:where(svg):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { display: block; }
+.ws-tnum { font-variant-numeric: tabular-nums; }
+/* K2: clipped to nothing and taken out of the flow without stretching a scroller (every kit scroller is positioned). */
+.ws-sr { position: absolute; width: var(--ws-line); height: var(--ws-line); margin: calc(var(--ws-line) * -1); padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+
+/* K15: an icon never takes the browser's 300 px default. .ws-icon is an inline icon in running text (16, sm 12, lg 20);
+   an svg with no width of its own inside a kit control gets the control icon size, inside words the small one. Both
+   cost nothing, so a component's own size wins. */
+.ws-icon { display: inline-block; flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); vertical-align: -0.125em; }
+.ws-icon--sm { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-icon--lg { width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+:where(.ws-btn, .ws-icon-btn, .ws-chip, .ws-change, .ws-menu-item, .ws-segmented__item, .ws-tabs__tab, .ws-row, .ws-well-row, .ws-link, .ws-act, .ws-field-msg) > svg:where(:not([width])) { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); }
+:where(.ws-meta, .ws-muted, .ws-body, .ws-eyebrow, .ws-cluster, .ws-kanban-board__meta) > svg:where(:not([width])) { display: inline-block; flex-shrink: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); vertical-align: -0.125em; }
+
+/* Focus (D8): Seth's 2 px navy outline, 2 px out, on every kit element that takes keyboard focus. Inside a dense row
+   (a menu, a well, a list) the same ring is drawn inside the row. Never outline: none without a visible replacement. */
+:where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *):focus-visible { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+:where(.ws-menu-item, .ws-well-row, .ws-row, .ws-segmented__item):focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+
+/* Reduced motion (D7): everything is still. State changes are instant, nothing travels, loops stop on a still frame
+   (a shimmer becomes its ghost). Components still write their motion inside (prefers-reduced-motion: no-preference);
+   this is the net under all of them. ws-theme-switching (set by the theme switch for two frames) is the same for a
+   theme change, so every surface turns at once. */
+@media (prefers-reduced-motion: reduce) {
+  :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *), :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::before, :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
+}
+:root.ws-theme-switching :where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { transition: none !important; }
+/* ==== The base layer ends here ==== */
+
+/* The preview's own stage: the grey around the surface, so a card shows its edge. Previews only. Its children are capped
+   to it, the way a page column holds them, so a preview shows how a component behaves in a 358 px column. */
+.ws-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ws-gap-component); padding: var(--ws-gap-component); background: var(--color-bg-page); }
+.ws-stage > * { max-width: 100%; min-width: 0; }
+.ws-stage--grey { background: var(--ws-page); }
+.ws-stage--sunk { background: var(--ws-surface-sunk); }
+.ws-stage--column { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--ws-gap-group); }
+.ws-stage--bleed { padding: 0; }
+
+/* ---- Layout: the page, an area, the board, a stack and a cluster ---- */
+/* A page: its content as wide as two board columns (2 x 556 and the gap: no page width token exists, so it is derived
+   from the board's), centred, with the canvas's 24 gutter, 16 on a phone; its children one gap apart. It is a size
+   container, so tiles and small cards inside it size from the page, not the window. --column: the one 656 column. */
+.ws-page { container-type: inline-size; display: flex; flex-direction: column; gap: var(--ws-gap-component); width: 100%; max-width: calc(var(--ws-chart-card-w) * 2 + var(--ws-gap-component) + var(--ws-gutter) * 2); margin-inline: auto; padding: var(--ws-gutter); }
+.ws-page--column { max-width: calc(var(--ws-column-width) + var(--ws-gutter) * 2); }
+@media (max-width: 40rem) { .ws-page { padding: var(--space-md); } }
+/* An area: any other region tiles or small cards should size from (a card, a pane). The page is one already. */
+.ws-area { container-type: inline-size; }
+/* The board (CardBoard): two columns side by side once both fit at 480 (976 and up), each up to 556 (the board is at most
+   two columns and the gap wide, on the content's start edge, K12); below that one column filling the width, in DOM order. Its children are cards
+   or columns of cards (__column), each its own height. No breakpoint: it wraps by width, so it works in any region.
+   --4 (small cards, one, two or four across, measured on the board itself) is the Page block's. */
+.ws-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ws-chart-card-min)), 1fr)); align-items: start; gap: var(--ws-gap-component); width: 100%; max-width: calc(var(--ws-chart-card-w) * 2 + var(--ws-gap-component)); }
+.ws-board > * { min-width: 0; }
+.ws-board__column { display: flex; flex-direction: column; gap: var(--ws-gap-component); }
+/* A stack (top to bottom) and a cluster (side by side, wrapping), 8 apart; the modifiers take the other named gaps:
+   block 32 (Seth's report blocks; a 28 in his Fixes frame snaps to it, D4), section 56 (between page sections). The base
+   gap is the step itself, not --ws-gap, so a parent that sets --ws-gap for its own layout never leaks into a stack. */
+.ws-stack { display: flex; flex-direction: column; gap: var(--space-xs); }
+.ws-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
+.ws-cluster--start { align-items: flex-start; }
+.ws-stack--tight, .ws-cluster--tight { gap: var(--ws-gap-tight); }
+.ws-stack--loose, .ws-cluster--loose { gap: var(--ws-gap-loose); }
+.ws-stack--component, .ws-cluster--component { gap: var(--ws-gap-component); }
+.ws-stack--group, .ws-cluster--group { gap: var(--ws-gap-group); }
+.ws-stack--block { gap: var(--ws-gap-block); }
+.ws-stack--section { gap: var(--ws-gap-section); }
+/* K1: a column that can be height-bound (a scroll region, a dialog, a stack made to scroll) never squashes its children
+   to fit: they keep their height and the column scrolls. A child that should scroll inside says so
+   (flex: 1; min-height: 0; overflow: auto). No specificity, so that wins. */
+:where(.ws-app-shell__body, .ws-app-shell__nav, .ws-dialog, .ws-dialog__content, .ws-panel__body, .ws-stack, .ws-card--compound, .ws-page, .ws-board__column) > * { flex-shrink: 0; }
+/* K2: every kit scroller is positioned, so what sits absolutely inside it (screen-reader words, a sticky cell's shade)
+   is held by it and never stretches the window. */
+:where(.ws-app-shell__body, .ws-dialog__content, .ws-panel__body, .ws-table__scroll, .ws-kanban-board, .ws-tabs) { position: relative; }
+
+/* ---- Surfaces ---- */
+/* A card: the cream, 8 px corners. Its edge (Seth's tray rim, D5), the selected look and the padding steps are the Card
+   block's. Inside a card the band shares the head's 20 px rail (Seth's foot words sit on the surface's edge); a drawer
+   keeps the band's 28. */
+.ws-card { --ws-band-inset: var(--ws-card-inset); border-radius: var(--ws-radius-card); background: var(--color-bg-page); }
+/* A card with nothing but its content: the 20 px inset all round (a chart drawn bare, without its head or band). */
+.ws-card--inset { padding: var(--ws-card-inset); }
+/* A plate inside a card: the cream a shade darker, 8 px corners (its 14 / 16 inside is the Plate block's). */
+.ws-plate { border-radius: var(--ws-radius-card); background: var(--ws-surface-sunk); }
+/* The well, from the first product built on the system: a grey plate of 48 px cream rows with 6 px corners, white under
+   the pointer (its insets are the Well block's). */
+.ws-well { border-radius: var(--ws-radius-card); background: var(--ws-well); display: flex; flex-direction: column; }
+.ws-well-row { display: flex; align-items: center; min-height: var(--ws-row-h); border-radius: var(--ws-radius-row); background: var(--color-bg-page); color: var(--color-text-heading); font-weight: 500; text-align: left; width: 100%; border: 0; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { .ws-well-row:hover { background: var(--color-surface); } }
+.ws-well-row:active { background: var(--ws-surface-press); }
+/* Something sunk inside a raised surface (an active option, a range band, a disabled field in a menu, a picker, a dialog,
+   a panel) takes the raised surface's own sunk step: the house sunk exactly in light, still seen in dark, where the
+   page's sunk is 1/255 off raised. */
+:where(.ws-menu, .ws-popover, .ws-dialog, .ws-panel) { --ws-surface-sunk: var(--ws-raised-sunk); }
+/* The dotted field a drawing sits on. */
+.ws-dots { background-image: radial-gradient(circle, var(--ws-chart-dot) calc(var(--ws-hairline) * 1.5), transparent calc(var(--ws-hairline) * 2.2)); background-size: var(--ws-chart-dot-gap) var(--ws-chart-dot-gap); }
+/* The foot band (D5): the card's foot on its tray rim, flat (no shade), the head's rail at the sides, at least 80 tall. */
+.ws-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); min-height: var(--ws-band-h); padding: var(--space-md) var(--ws-band-inset); background: var(--ws-tray); }
+.ws-band__words { display: flex; flex: 1; min-width: min(100%, var(--space-9xl)); flex-direction: column; gap: var(--space-xxs); }
+.ws-band__title { font-size: var(--ws-text-value); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); text-wrap: balance; }
+.ws-band__how { font-size: var(--ws-text-meta); line-height: var(--space-md); color: var(--color-text-muted); }
+/* A card's head: 20 px inside, the 22 px title and one 14 px line. Its first div is the words column; a div after it
+   (an aside, a cluster) lays itself out. */
+.ws-head { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--ws-card-inset); }
+.ws-head > div:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+/* A menu: a card lifted off the page. */
+.ws-menu { display: flex; flex-direction: column; border-radius: var(--ws-radius-card); background: var(--ws-raised); padding: var(--space-xxs); box-shadow: var(--ws-shadow-lift); z-index: var(--z-dropdown); min-width: var(--space-9xl); }
+.ws-menu-item { display: flex; width: 100%; min-height: var(--ws-control-h); padding: var(--space-xxs) var(--space-sm); align-items: center; gap: var(--space-xs); border-radius: var(--ws-radius-control); text-align: left; font-size: var(--ws-text-body); font-weight: 500; color: var(--color-text-heading); background: none; border: 0; cursor: pointer; }
+@media (hover: hover) { .ws-menu-item:hover { background: var(--ws-hover); } }
+.ws-menu-item:active { background: var(--ws-surface-press); }
+.ws-menu-line { height: var(--ws-line); margin: var(--space-xxs) 0; background: var(--ws-menu-line); }
+.ws-disc { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--ws-surface-sunk); color: var(--color-text-heading); }
+
+/* ---- Words ---- */
+/* Titles: Seth draws no tracking on the 22 / 28 titles or the 15 / 22 sections (D1); a long one balances its lines, so
+   no word is left alone on the last. */
+.ws-title { font-size: var(--ws-text-title); line-height: var(--ws-leading-title); font-weight: 600; color: var(--color-text-heading); text-wrap: balance; }
+.ws-section { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 600; color: var(--color-text-heading); text-wrap: balance; }
+.ws-body { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-body); }
+.ws-muted { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-meta { font-size: var(--ws-text-meta); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-eyebrow { font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-overline); color: var(--color-text-muted); }
+.ws-link { color: var(--color-text-interactive); text-decoration: none; font-weight: 500; }
+.ws-act { font-weight: 500; color: var(--color-text-heading); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
+/* Hover only where a pointer hovers: on touch a tap would leave it stuck on. */
+@media (hover: hover) { .ws-link:hover, .ws-act:hover { text-decoration: underline; } }
+.ws-display { font-size: var(--ws-text-display); line-height: var(--space-5xl); font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-figure { font-size: var(--font-size-3xl); line-height: var(--font-size-3xl); font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* Seth's figure steps (D6): a row's figure 28 / 32, a tile's 32 / 38, a pane's 44 / 48 (untracked, as Seth draws it),
+   the report's hero 96 / 96. */
+.ws-figure--row { font-size: var(--ws-text-figure-row); line-height: var(--ws-leading-figure-row); }
+.ws-figure--tile { font-size: var(--ws-text-figure); line-height: var(--ws-leading-figure); }
+.ws-figure--pane { font-size: var(--ws-text-figure-lg); line-height: var(--ws-leading-figure-lg); letter-spacing: normal; }
+.ws-figure--score { font-size: var(--ws-text-score); line-height: var(--ws-leading-score); font-variant-numeric: proportional-nums; } /* a lone hero figure, never a column: proportional digits as Seth draws them */
+/* A row's name (15 / 20 medium) and control words (13 / 18 medium), Seth's (D6). */
+.ws-row-name { font-size: var(--ws-text-section); line-height: var(--ws-leading-row); font-weight: 500; color: var(--color-text-heading); }
+.ws-control-words { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; }
+.ws-positive { color: var(--ws-word-positive); }
+.ws-needs { color: var(--ws-word-needs); }
+
+/* ---- Buttons, icon buttons, fields, chips, keys and the segmented switch are their components' blocks (Button,
+   IconButton, Input, Select, TextArea, Chip, Kbd, Segmented), each restating the whole control, so their hovers sit
+   inside (hover: hover) and nothing sticks after a tap. What they share stays here. ---- */
+/* The working dot before a pressed button's words: the one beat. */
+.ws-dot { width: calc(var(--space-xxs) * 1.5); height: calc(var(--space-xxs) * 1.5); border-radius: var(--radius-full); background: currentColor; }
+
+/* ---- Fields: the label, the field's column and its message. ---- */
+.ws-field { display: flex; flex-direction: column; gap: var(--space-xxs); }
+.ws-label { font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; color: var(--color-text-body); }
+/* ponytail: Input/style.css has no placeholder rule of its own yet; this one line stays until it does. */
+.ws-input::placeholder { color: var(--color-text-placeholder); }
+.ws-field-msg { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-field-msg--error { display: flex; align-items: flex-start; gap: var(--space-xxs); color: var(--ws-word-needs); }
+.ws-field-msg--error svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); flex-shrink: 0; margin-top: calc(var(--space-xxs) / 2); }
+
+/* A change beside its number (from the first product built on the system): arrow and words, never colour alone; up
+   teal, down mid blue, the same grey. Seth's tag beside Chip (D1): 24 tall, 4 px corners, 13 / 18 medium. */
+.ws-change { display: inline-flex; align-items: center; gap: var(--space-xxs); height: var(--space-lg); padding: 0 var(--space-xs); border-radius: var(--ws-radius-control); background: var(--color-bg-page); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; white-space: nowrap; color: var(--color-text-muted); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-chip); }
+.ws-change--up { color: var(--ws-word-positive); }
+.ws-change--down { color: var(--color-text-interactive); }
+.ws-change svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+
+/* ---- Rows and lists ---- */
+.ws-row { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--ws-row-h-dense); padding: 0 var(--space-sm); border-radius: var(--ws-radius-row); color: var(--color-text-heading); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { .ws-row:hover { background: var(--ws-surface-sunk); } }
+.ws-row:active { background: var(--ws-surface-press); }
+.ws-row__title { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+.ws-rule { height: var(--ws-line); background: var(--ws-chart-cell-edge, var(--ws-edge-slot)); }
+/* An avatar: a disc of navy initials on the sunk cream, the hairline ring by default (it mostly sits on a cream card);
+   --plain drops the ring. Sizes as the first product writes them: sm 28 (12 px initials), the default 32 (14), deck 48
+   (14), panel 56 (16), xl 64 (24). */
+.ws-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--ws-avatar); height: var(--ws-avatar); overflow: hidden; border-radius: var(--radius-full); background: var(--ws-surface-sunk); color: var(--color-text-heading); font-size: var(--ws-text-body); font-weight: 600; box-shadow: var(--ws-shadow-hairline); }
+.ws-avatar--plain { box-shadow: none; }
+.ws-avatar--dim { opacity: 0.6; }
+.ws-avatar--sm { width: var(--ws-control-h-sm); height: var(--ws-control-h-sm); font-size: var(--ws-text-dense); }
+.ws-avatar--deck { width: var(--space-3xl); height: var(--space-3xl); font-size: var(--ws-text-body); }
+.ws-avatar--panel { width: calc(var(--space-3xl) + var(--space-xs)); height: calc(var(--space-3xl) + var(--space-xs)); font-size: var(--ws-text-value); }
+.ws-avatar--xl { width: var(--space-4xl); height: var(--space-4xl); font-size: var(--font-size-xl); }
+/* A stack of faces overlapping by 4 on cream rings, the rest as "+N" in the same disc. */
+.ws-avatar-stack { display: flex; align-items: center; }
+.ws-avatar-stack > * + * { margin-left: calc(var(--space-xxs) * -1); }
+.ws-avatar-stack > .ws-avatar { box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); }
+.ws-avatar-stack__more { color: var(--color-text-body); }
+
+/* ---- Motion: soft by default, named by role (D7, Seth's North); everything is still with reduced motion. ---- */
+@keyframes ws-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+@keyframes ws-rise { from { opacity: 0; transform: translateY(var(--ws-rise)); } to { opacity: 1; transform: none; } }
+@keyframes ws-grow { from { transform: scaleX(0); } to { transform: none; } }
+@keyframes ws-grow-up { from { transform: scaleY(0); } to { transform: none; } }
+@keyframes ws-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
+@keyframes ws-bloom { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
+@keyframes ws-pop { from { transform: scale(0.85); } to { transform: none; } }
+@keyframes ws-draw { from { stroke-dasharray: 0 1; } }
+/* North's two: a detail settling in (it rises 6 px out of a 3 px blur), and the loading sweep over the ghost. */
+@keyframes ws-settle { from { opacity: 0; transform: translateY(var(--ws-rise)); filter: blur(var(--ws-blur-arrive)); } to { opacity: 1; transform: none; filter: none; } }
+@keyframes ws-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-working { animation: ws-pulse var(--ws-loop) var(--ws-ease-loop) infinite; }
+  .ws-working-slow { animation: ws-pulse var(--ws-loop-slow) var(--ws-ease-loop) infinite; }
+  .ws-arrive { animation: ws-rise var(--ws-duration-gentle) var(--ws-ease-soft) backwards; }
+  .ws-rise { animation: ws-rise var(--ws-duration-settle) var(--ws-ease-soft) backwards; }
+  .ws-grow { animation: ws-grow var(--ws-duration-calm) var(--ws-ease-soft) backwards; transform-origin: left; }
+  .ws-grow-up { animation: ws-grow-up var(--ws-duration-calm) var(--ws-ease-soft) backwards; transform-origin: bottom; }
+  .ws-wipe { animation: ws-wipe var(--ws-duration-calm) var(--ws-ease-soft) backwards; }
+  .ws-bloom { animation: ws-bloom var(--ws-duration-settle) var(--ws-ease-soft) backwards; }
+  .ws-pop { animation: ws-pop var(--ws-duration-settle) var(--ws-ease-soft) backwards; }
+  /* Settle-in: details arrive after their frame, top to bottom; set --ws-i (0, 1, 2 ...) on each for the stagger. */
+  .ws-settle { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-i, 0) * var(--ws-stagger-detail)); }
+  .ws-shimmer { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }
+}
+/* Loading (North): a ghost block in the chart colours' sweep. Give it the size of what it stands for; its words, if
+   any, are transparent. Under reduced motion it is a still ghost. */
+.ws-shimmer { border-radius: var(--ws-radius-bar); background: var(--ws-shimmer); background-size: 300% 100%; color: transparent; }
+/* Hover tint (North): Seth's navy wash over whatever ground, a colour change, never a lift. --faint for a list row,
+   the default for a nav or menu row, --strong for an icon button or an act. */
+.ws-hover-tint { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) {
+  .ws-hover-tint:hover { background-color: var(--ws-hover); }
+  .ws-hover-tint--faint:hover { background-color: var(--ws-hover-faint); }
+  .ws-hover-tint--strong:hover { background-color: var(--ws-hover-strong); }
+}
+/* Springs (D7): Seth's North springs are tokens, --ws-spring-<name> (a linear() curve sampled from the motion library's
+   own solver, overshoot kept) over --ws-spring-<name>-duration; a transition names both. A browser without linear()
+   drops that transition and the change is instant. Reduced motion: the net above makes every one instant. */
+/* Press (North "Button press (mic, add)": the press spring, .2 / .3): a button, an icon button, a suggestion chip, a chip
+   that acts and anything that wears .ws-press gives to .97 under a press and springs back on the same spring. The round
+   voice act (an --round icon button, the composer's round act, .ws-press--round) gives to .94, the send act
+   (.ws-press--send) to .92. It rides on `scale`, so a control's own transform is left alone; words that act (--link,
+   --text), a disabled control and a busy one do not move. Hover stays a tint, never a lift. The rule restates each
+   control's colour beats (the hover beat, at once under the press) beside the spring, and outranks the controls' own
+   transition lists by a class. */
+:where(.ws-icon-btn--round, .ws-composer__trail > .ws-icon-btn--primary, .ws-press--round) { --ws-press: var(--ws-press-scale-round); }
+.ws-press--send { --ws-press: var(--ws-press-scale-send); }
+@media (prefers-reduced-motion: no-preference) {
+  :is(.ws-btn, .ws-icon-btn, .ws-suggestion-chip, :is(button, a).ws-chip, .ws-press):not(.ws-btn--link, .ws-btn--text, :disabled, [aria-disabled="true"], [aria-busy="true"]) { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft), border-color var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft), opacity var(--ws-duration-hover) var(--ws-ease-soft), scale var(--ws-spring-press-duration) var(--ws-spring-press); }
+  :is(.ws-btn, .ws-icon-btn, .ws-suggestion-chip, :is(button, a).ws-chip, .ws-press):not(.ws-btn--link, .ws-btn--text, :disabled, [aria-disabled="true"], [aria-busy="true"]):active { scale: var(--ws-press, var(--ws-press-scale)); transition-duration: var(--ws-duration-instant), var(--ws-duration-instant), var(--ws-duration-instant), var(--ws-duration-instant), var(--ws-duration-instant), var(--ws-spring-press-duration); }
+  /* the press is the house's now: a control's own press transform stands down (its still is-pressed picture keeps it) */
+  :is(.ws-btn, .ws-icon-btn):not(.ws-btn--link, .ws-btn--text):active { transform: none; }
+}
+/* Folds (North "Sidebar sections open / close": the fold spring, .32 / 0): what opens in place grows from nothing to
+   its height and fades in, and closes back the same way on the same spring; a chevron turns on it too. Every kit
+   <details> does it on its own (its ::details-content); a body shown and hidden by the hidden attribute wears .ws-unfold
+   (its block padding and margins grow with it, so it never jumps). Without ::details-content, @starting-style or
+   interpolate-size the body opens and closes at once. Reduced motion: at once. */
+@media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) {
+  :where(details):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *) { interpolate-size: allow-keywords; }
+  :where(details):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::details-content { block-size: 0; opacity: 0; overflow: clip; overflow-clip-margin: calc(var(--ws-focus-width) + var(--ws-focus-offset)); transition: block-size var(--ws-spring-fold-duration) var(--ws-spring-fold), opacity var(--ws-spring-fold-duration) var(--ws-spring-fold), content-visibility var(--ws-spring-fold-duration) allow-discrete; }
+  :where(details[open]):where([class^="ws-"], [class*=" ws-"], [class^="ws-"] *, [class*=" ws-"] *)::details-content { block-size: auto; opacity: 1; }
+  .ws-unfold { interpolate-size: allow-keywords; overflow: clip; overflow-clip-margin: calc(var(--ws-focus-width) + var(--ws-focus-offset)); transition: height var(--ws-spring-fold-duration) var(--ws-spring-fold), padding-block var(--ws-spring-fold-duration) var(--ws-spring-fold), margin-block var(--ws-spring-fold-duration) var(--ws-spring-fold), opacity var(--ws-spring-fold-duration) var(--ws-spring-fold), display var(--ws-spring-fold-duration) allow-discrete; }
+  .ws-unfold[hidden] { display: none; height: 0; padding-block: 0; margin-block: 0; opacity: 0; }
+  @starting-style { .ws-unfold:not([hidden]) { height: 0; padding-block: 0; margin-block: 0; opacity: 0; } }
+} }
+/* The build-in (Amit, 5 Nov 2026: a kit default for a dashboard, from North's Home intro). .ws-build on a page or a
+   section; each card in it wears .ws-build__card with --ws-i (0, 1, 2 ... in reading order). A card rises in 70 ms
+   after the one before it (--ws-stagger-part) and the charts in it that carry their --draw draw after it lands, once,
+   when the card scrolls into view: --ws-build-at, the card's start, is what each chart adds to its own delays. Where
+   scroll-triggered animation is supported (timeline-trigger on a view() timeline, animation-trigger play-once) a card
+   below the fold waits and plays as it comes into view; elsewhere everything plays on first paint, so a card below
+   the fold has finished, its final state, by the time it is reached. Reduced motion: no build, the final state. */
+.ws-build__card { --ws-build-at: calc(var(--ws-i, 0) * var(--ws-stagger-part)); }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-build .ws-build__card { animation: ws-rise var(--ws-duration-settle) var(--ws-ease-settle) backwards; animation-delay: var(--ws-build-at); }
+  @supports (timeline-trigger: --a view() cover 10% cover 100%) and (animation-trigger: --a play-once) and (trigger-scope: --a) {
+    .ws-build .ws-build__card { trigger-scope: --ws-build; timeline-trigger: --ws-build view() cover 10% cover 100%; }
+    .ws-build .ws-build__card, .ws-build .ws-build__card * { animation-trigger: --ws-build play-once; }
+  }
+}
+/* The scroll edge cue (Tabs, Segmented, a wide table, a board): a track wider than its box fades at the edge that hides
+   something, and only there, driven by its own scroll (nothing when it fits, nothing moves under reduced motion: the
+   timeline is the scroll, not time). .ws-scroll-edges on any horizontal scroller; a component can run ws-scroll-edges
+   on its own selector the same way. */
+@property --ws-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --ws-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@keyframes ws-scroll-edges {
+  0% { --ws-fade-start: 0px; --ws-fade-end: var(--space-xl); }
+  8% { --ws-fade-start: var(--space-xl); }
+  92% { --ws-fade-end: var(--space-xl); }
+  100% { --ws-fade-start: var(--space-xl); --ws-fade-end: 0px; }
+}
+@supports (animation-timeline: scroll()) {
+  .ws-scroll-edges { mask-image: linear-gradient(90deg, transparent, currentColor var(--ws-fade-start), currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+}
+
+/* ---- Touch (K10): one coarse-pointer block. A control that is a box is at least 40 px (an icon button that must look
+   small keeps its look and gets a 40 px hit area); words that act are at least 24 px tall. ---- */
+@media (pointer: coarse) {
+  .ws-btn:not(.ws-btn--link, .ws-btn--text), .ws-input, .ws-select, .ws-segmented__item, .ws-tabs__tab, .ws-date-input__cell, .ws-fold__summary:not(.ws-fold__summary--quiet), .ws-app-shell__row, .ws-menu-item, .ws-toast__action, .ws-pagination__rows select, .ws-combobox__panel .ws-combobox__option { min-height: var(--ws-touch); }
+  .ws-input, .ws-select { height: var(--ws-touch); }
+  .ws-icon-btn { min-width: var(--ws-touch); min-height: var(--ws-touch); }
+  .ws-icon-btn--xs, .ws-icon-btn--sm { position: relative; min-width: 0; min-height: 0; }
+  .ws-icon-btn--xs::after, .ws-icon-btn--sm::after { content: ""; position: absolute; inset: calc((100% - var(--ws-touch)) / 2); }
+  .ws-btn--link, .ws-btn--text, .ws-act, .ws-table__sort, .ws-chat-card__door, .ws-fold__summary--quiet { min-height: var(--space-lg); }
+  /* inline words that act: 4 px above and below grows the hit area to 24 without moving a line */
+  .ws-breadcrumb a, .ws-breadcrumb__ellipsis, .ws-link { padding-block: var(--space-xxs); }
+}