/* ===== Sarib design system: components v2.9.0 ================================
   GENERATED by scripts/build.mjs from src/css/*.css. Do not edit here.
   Load order: tokens.css, components.css, icons.css. Every value is a var(--s-*).
   Class prefix s-; states come from :hover/:active/:disabled and ARIA attributes.
   Apps never restyle s- classes (scripts/check.mjs enforces it). See DESIGN.md "Components (v2)". */

/* ---- 00-base.css ---- */
@layer s.reset, s.base, s.components, s.utilities;

/* ===== Reset + base ============================================================
   Mirrors what syedsarib.com renders (Tailwind preflight + globals.css). Layered,
   so any unlayered app CSS wins without specificity fights. */
@layer s.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    scrollbar-gutter: stable;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { margin: 0; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: var(--s-font-weight-regular); }
  a { color: inherit; text-decoration: inherit; }
  button, input, select, textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
  }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  button:disabled { cursor: not-allowed; }
  img, svg, video { display: block; max-width: 100%; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

@layer s.base {
  body {
    background: var(--s-color-background);
    color: var(--s-color-content-primary);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
  }
  ::selection { background-color: var(--s-color-fill-text-selection); }

  /* Keyboard-only focus ring (globals.css). Text fields are exempt: they show
     focus with their border instead (03 B1, the origin a11y gap fixed). */
  :focus-visible {
    outline: var(--s-focus-ring-width) solid var(--s-color-border-focus);
    outline-offset: var(--s-focus-ring-offset);
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible,
  [contenteditable="true"]:focus-visible { outline: none; }

  /* Native controls that keep their own chrome get the right colours. */
  :root { accent-color: var(--s-color-fill-inverse); }
}

/* ===== Motion ==================================================================== */
@keyframes s-message-in {           /* chat message, dialog, toast arrival */
  from { opacity: 0; transform: translateY(var(--s-rise)); }
}
@keyframes s-pop-in {               /* quote-pill-in shape: menus and popovers (standard), the pill (expressive) */
  from { opacity: 0; transform: scale(var(--s-pop-scale)); }
}
@keyframes s-fade-in { from { opacity: 0; } }
@keyframes s-theme-icon-in {        /* theme toggle glyph swap */
  from { transform: rotate(-90deg) scale(0); opacity: 0; }
}
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-pulse { 50% { opacity: 0.5; } }
@keyframes s-sheet-in { from { transform: translateY(100%); } }
@keyframes s-fade-out { to { opacity: 0; } }
@keyframes s-slide-in-left { from { transform: translateX(-100%); } }    /* v2.8 drawer recipes (90-motion.css) */
@keyframes s-slide-out-left { to { transform: translateX(-100%); } }
@keyframes s-slide-in-right { from { transform: translateX(100%); } }
@keyframes s-slide-out-right { to { transform: translateX(100%); } }

/* ===== Icon (components/icon.tsx) ================================================
   An SVG used as a CSS mask filled with currentColor. Pick the glyph with
   data-icon="name" (icons.css), size with a modifier. Decorative: aria-hidden. */
@layer s.components {
  .s-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--s-glyph-24);
    height: var(--s-glyph-24);
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
  .s-icon--12 { width: var(--s-glyph-12); height: var(--s-glyph-12); }
  .s-icon--14 { width: var(--s-glyph-14); height: var(--s-glyph-14); }
  .s-icon--16 { width: var(--s-glyph-16); height: var(--s-glyph-16); }
  .s-icon--18 { width: var(--s-glyph-18); height: var(--s-glyph-18); }
  .s-icon--20 { width: var(--s-glyph-20); height: var(--s-glyph-20); }
  .s-icon--24 { width: var(--s-glyph-24); height: var(--s-glyph-24); }
  .s-icon--28 { width: var(--s-glyph-28); height: var(--s-glyph-28); }
  .s-icon--32 { width: var(--s-glyph-32); height: var(--s-glyph-32); }
  .s-icon--brand { color: var(--s-color-fill-brand); }        /* sparkle */
  .s-icon--mirror { transform: scaleX(-1); }
  .s-icon--swap { animation: s-theme-icon-in var(--s-motion-duration-slow) var(--s-motion-expressive-easing); } /* expressive */
}

/* ===== Surface layering (03 §1) ===================================================
   P0 band → P1 canvas → P2 objects drawn by a hairline → P3 raised (shadow only on
   things that float) → P4 overlay. Depth without card shadows. */
@layer s.components {
  .s-band { background: var(--s-color-background); }                       /* P0 */
  .s-canvas { background: var(--s-color-fill-primary-disabled); }          /* P1 */
  .s-object {                                                               /* P2 */
    background: transparent;
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-10);
  }
  .s-well {                                                                 /* P2w */
    background: var(--s-well-fill, var(--s-color-fill-primary-variant));
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
  }
  .s-muted-fill { background: var(--s-color-fill-secondary); }             /* P2m */
  .s-raised {                                                               /* P3 */
    background: var(--s-color-surface-elevated);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-8);
  }
  .s-raised--sm { box-shadow: var(--s-elevation-sm); }
  .s-raised--md { box-shadow: var(--s-elevation-md); }
  .s-raised--lg { box-shadow: var(--s-elevation-lg); border-radius: var(--s-radius-10); }
  /* v1 name for the tooltip/popover surface, kept for ledger web. */
  .s-surface {
    background: var(--s-color-surface-elevated);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-8);
  }
  /* v2.4.2: s-raised-scope marks an app's OWN raised surface (a framework dialog, menu or sheet that
     is not built from s-dialog / s-sheet / s-menu) without drawing anything: wells and neutral
     buttons inside it step up exactly as they do in the library's raised surfaces. */
  /* v2.1: a well (field, checkbox, radio, s-well) inside a raised or overlay surface takes the
     raised fill. fill-primary-variant is darker than surface-elevated in dark mode, so a field in a
     dialog or sheet read as a black hole. Light mode is unchanged (both are white). */
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) {
    --s-well-fill: var(--s-color-surface-elevated);
  }
  .s-divider {
    border: 0;
    border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    margin: 0;
  }
}

/* ===== Type ======================================================================== */
@layer s.components {
  .s-container { width: 100%; max-width: var(--site-content-max); margin-inline: auto; }
  .s-hero {
    max-width: var(--site-article-max);
    font-family: var(--s-font-family-code);
    font-weight: var(--s-font-weight-regular);
    font-size: var(--site-font-size-hero);
    line-height: var(--s-line-height-body-md);
    color: var(--s-color-content-primary);
  }
  .s-hero em, .s-hero .s-accent { font-style: normal; color: var(--s-color-content-brand); }
  .s-h2 { font: var(--s-type-heading-lg); color: var(--s-color-content-primary); }
  .s-h3 { font: var(--s-type-body-xl); color: var(--s-color-content-primary); }
  .s-lede { max-width: var(--site-copy-max); font: var(--s-type-body-lg); color: var(--s-color-content-secondary); }
  .s-small { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-meta { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-meta.is-brand, .s-meta--brand { color: var(--s-color-content-brand); }
  .s-label { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); }
  .s-code-face { font-family: var(--s-font-family-code); }
  .s-num { font-family: var(--s-font-family-code); font-variant-numeric: tabular-nums; }
}

@layer s.utilities {
  .s-ink { color: var(--s-color-content-primary); }
  .s-muted { color: var(--s-color-content-secondary); }
  .s-faint { color: var(--s-color-content-tertiary); }
  .s-brand { color: var(--s-color-content-brand); }
  .s-sr-only {
    position: absolute; width: var(--s-stroke-width-2); height: var(--s-stroke-width-2); padding: 0; margin: calc(var(--s-stroke-width-2) * -1);
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .s-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .s-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* ---- 10-actions.css ---- */
/* ===== A1 Button  s-btn  (Figma 212:374 × 229:7786, components/button.tsx) ========
   Anatomy: [leading .s-icon] [.s-btn__label (4px inline pad)] [trailing .s-icon] [.s-btn__spinner]
   Variant  s-btn--{brand|primary|secondary|tertiary|outline|ghost|brand-tone|brand-ghost|
                    success|warning|error|on-image|link-neutral|link-brand}  (default primary)
   Size     s-btn--sm | (md) | s-btn--lg | s-btn--xl        Shape  s-btn--pill
   Icon-only s-btn--icon (+ aria-label)                     Loading aria-busy="true" + disabled
   States are colour-only: :hover, :active, :disabled. Never opacity, lift or scale. */
@layer s.components {
  .s-btn {
    /* recipe slots, set per variant (rest / hover / active / disabled) */
    --_bg: var(--s-color-fill-inverse);
    --_fg: var(--s-color-content-primary-inverse);
    --_bd: transparent;
    --_bgh: var(--s-color-fill-inverse-hover);
    --_bga: var(--s-color-fill-inverse-active);
    --_bgd: var(--s-color-fill-inverse-disabled);
    --_fgh: var(--_fg);
    --_fga: var(--_fg);
    --_fgd: var(--s-color-content-primary-inverse-disabled);
    --_bdh: var(--_bd);
    --_bda: var(--_bd);
    --_bdd: var(--_bd);
    --_icon: var(--s-btn-icon-md);
    --_pad-y: var(--s-btn-pad-y-md);

    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--_pad-y) var(--s-btn-pad-x);                 /* 8 12: label sits 16 from the edge (app scale 6 8) */
    border: 0;
    border-radius: var(--s-btn-radius-md);
    background-color: var(--_bg);
    /* 1px stroke drawn inside (Figma) so outline buttons keep the 36/40/44 heights */
    box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--_bd);
    color: var(--_fg);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--s-motion-hover),
      color var(--s-motion-hover),
      box-shadow var(--s-motion-hover);
  }
  @media (hover: hover) { .s-btn:hover { background-color: var(--_bgh); color: var(--_fgh); box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--_bdh); } }
  .s-btn:active { background-color: var(--_bga); color: var(--_fga); box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--_bda); }
  .s-btn:disabled:not([aria-busy="true"]), .s-btn[aria-disabled="true"] {
    background-color: var(--_bgd);
    color: var(--_fgd);
    box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--_bdd);
    cursor: not-allowed;
  }
  .s-btn > .s-btn__label { padding-inline: var(--s-spacing-1); }
  .s-btn > .s-icon { width: var(--_icon); height: var(--_icon); }

  /* Loading (Figma spinner slot): label stays so the width holds; the slot spins
     1 turn / 720ms linear; still under reduced motion. Colours stay at rest so the
     button reads as "working", not "unavailable". */
  .s-btn > .s-btn__spinner { display: none; }
  .s-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
  .s-btn[aria-busy="true"] > .s-btn__spinner {
    display: inline-block;
    animation: s-spin var(--s-motion-duration-slower) var(--s-motion-easing-linear) infinite;
  }

  /* --- sizes --- */
  .s-btn--sm { --_icon: var(--s-btn-icon-sm); --_pad-y: var(--s-btn-pad-y-sm); font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); border-radius: var(--s-btn-radius-sm); }
  .s-btn--lg { --_icon: var(--s-btn-icon-lg); --_pad-y: var(--s-btn-pad-y-lg); font: var(--s-type-body-lg); letter-spacing: var(--s-letter-spacing-body-lg); border-radius: var(--s-btn-radius-lg); }
  .s-btn--xl { --_icon: var(--s-btn-icon-xl); --_pad-y: var(--s-btn-pad-y-xl); font: var(--s-type-body-xl); letter-spacing: var(--s-letter-spacing-body-xl); border-radius: var(--s-btn-radius-lg); }
  .s-btn--pill { border-radius: var(--s-radius-full); }
  .s-btn--block { display: flex; width: 100%; }

  /* Icon-only: square, height-matched; glyph files are full-frame with a designed inset. */
  .s-btn--icon { --_icon: var(--s-btn-glyph-md); padding: 0; width: var(--s-control-h-md); height: var(--s-control-h-md); }
  .s-btn--icon.s-btn--sm { --_icon: var(--s-btn-glyph-sm); width: var(--s-control-h-sm); height: var(--s-control-h-sm); }
  .s-btn--icon.s-btn--lg, .s-btn--icon.s-btn--xl { --_icon: var(--s-btn-glyph-lg); width: var(--s-control-h-lg); height: var(--s-control-h-lg); }

  /* v2.5 compact density (Figma UI3 scale) for dense tool chrome: comment threads, inspectors, panels.
     xs 28 (r8, body-xs, 16 icon) · 2xs 24 (r6, 16 icon; mostly icon-only: per-row •••, send inside a pill).
     Visual size only: coarse pointers keep a 44 hit area through an invisible ::after (90-motion.css). */
  .s-btn--xs, .s-btn--2xs { --_icon: var(--s-glyph-16); height: var(--s-control-h-xs); padding: var(--s-spacing-1) var(--s-spacing-3); font: var(--s-type-body-xs); letter-spacing: var(--s-letter-spacing-body-xs); border-radius: var(--s-radius-4); }
  .s-btn--2xs { height: var(--s-control-h-2xs); padding-inline: var(--s-spacing-2); border-radius: var(--s-radius-3); }
  .s-btn--xs > .s-btn__label, .s-btn--2xs > .s-btn__label { padding-inline: var(--s-spacing-1); }
  .s-btn--icon.s-btn--xs { --_icon: var(--s-glyph-16); padding: 0; width: var(--s-control-h-xs); height: var(--s-control-h-xs); }
  .s-btn--icon.s-btn--2xs { --_icon: var(--s-glyph-16); padding: 0; width: var(--s-control-h-2xs); height: var(--s-control-h-2xs); }
  .s-btn--pill.s-btn--xs, .s-btn--pill.s-btn--2xs { border-radius: var(--s-radius-full); }

  /* --- variants (button.tsx:31-60; Figma variables on 229:7786) --- */
  .s-btn--primary { /* = defaults: ink, content-primary-inverse flips in dark */ }
  .s-btn--brand {
    --_bg: var(--s-color-fill-brand); --_bgh: var(--s-color-fill-brand-hover); --_bga: var(--s-color-fill-brand-active);
    --_bgd: var(--s-color-fill-brand-disabled);
    --_fg: var(--s-color-content-fixed-inverse); --_fgd: var(--s-color-content-fixed-inverse-disabled);
  }
  .s-btn--secondary {
    --_bg: var(--s-color-fill-secondary); --_bgh: var(--s-color-fill-secondary-hover); --_bga: var(--s-color-fill-secondary-active);
    --_bgd: var(--s-color-fill-secondary-disabled);
    --_fg: var(--s-color-content-primary); --_fgd: var(--s-color-content-primary-disabled);
  }
  .s-btn--tertiary {
    --_bg: var(--s-color-fill-tertiary); --_bgh: var(--s-color-fill-tertiary-hover); --_bga: var(--s-color-fill-tertiary-active);
    --_bgd: var(--s-color-fill-tertiary-disabled);
    --_fg: var(--s-color-content-primary); --_fgd: var(--s-color-content-primary-disabled);
  }
  .s-btn--outline {
    --_bg: transparent; --_bgh: var(--s-color-fill-primary-variant-hover); --_bga: var(--s-color-fill-primary-variant-active);
    --_bgd: transparent;
    --_bd: var(--s-color-border-secondary); --_bdh: var(--s-color-border-secondary-hover);
    --_bda: var(--s-color-border-secondary); --_bdd: var(--s-color-border-secondary-disabled);
    --_fg: var(--s-color-content-primary); --_fgd: var(--s-color-content-primary-disabled);
  }
  .s-btn--ghost {
    --_bg: transparent; --_bgh: var(--s-color-fill-primary-variant-hover); --_bga: var(--s-color-fill-primary-variant-active);
    --_bgd: transparent;
    --_fg: var(--s-color-content-primary); --_fgd: var(--s-color-content-primary-disabled);
  }
  .s-btn--brand-tone {   /* known wart kept: disabled keeps the tint (button.tsx:45) */
    --_bg: var(--s-color-fill-brand-secondary); --_bgh: var(--s-color-fill-brand-secondary-hover);
    --_bga: var(--s-color-fill-brand-secondary-active); --_bgd: var(--s-color-fill-brand-secondary);
    --_fg: var(--s-color-content-brand); --_fgd: var(--s-color-border-brand-disabled);
  }
  .s-btn--brand-ghost {
    --_bg: transparent; --_bgh: var(--s-color-fill-brand-secondary-hover); --_bga: var(--s-color-fill-brand-secondary-active);
    --_bgd: transparent;
    --_fg: var(--s-color-content-brand); --_fgd: var(--s-color-border-brand-disabled);
  }
  .s-btn--success {
    --_bg: var(--s-color-fill-success); --_bgh: var(--s-color-fill-success-hover); --_bga: var(--s-color-fill-success-active);
    --_bgd: var(--s-color-fill-success-disabled);
    --_fg: var(--s-color-content-fixed-inverse); --_fgd: var(--s-color-content-fixed-inverse);
  }
  .s-btn--warning {      /* white label, including on warning (buttons-states.png) */
    --_bg: var(--s-color-fill-warning); --_bgh: var(--s-color-fill-warning-hover); --_bga: var(--s-color-fill-warning-active);
    --_bgd: var(--s-color-fill-warning-disabled);
    --_fg: var(--s-color-content-fixed-inverse); --_fgd: var(--s-color-content-fixed-inverse);
  }
  .s-btn--error {
    --_bg: var(--s-color-fill-critical); --_bgh: var(--s-color-fill-critical-hover); --_bga: var(--s-color-fill-critical-active);
    --_bgd: var(--s-color-fill-critical-disabled);
    --_fg: var(--s-color-content-fixed-inverse); --_fgd: var(--s-color-content-fixed-inverse);
  }
  .s-btn--on-image {     /* untokenized in Figma: black 40% / 60% */
    --_bg: var(--s-color-fill-on-image); --_bgh: var(--s-color-fill-on-image-hover);
    --_bga: var(--s-color-fill-on-image); --_bgd: var(--s-color-fill-on-image);
    --_fg: var(--s-color-content-fixed-inverse); --_fgd: var(--s-color-content-fixed-inverse);
  }
  .s-btn--link-neutral, .s-btn--link-brand {
    --_bg: transparent; --_bgh: transparent; --_bga: transparent; --_bgd: transparent;
    padding: 0;
  }
  .s-btn--link-neutral {
    --_fg: var(--s-color-content-tertiary); --_fgh: var(--s-color-content-secondary);
    --_fga: var(--s-color-content-primary); --_fgd: var(--s-color-content-tertiary-disabled);
  }
  .s-btn--link-brand,
  .s-btn--link-neutral[aria-current="page"] {   /* nav current = link-brand */
    --_fg: var(--s-color-content-brand); --_fgh: var(--s-color-content-brand-hover);
    --_fga: var(--s-color-border-brand-active); --_fgd: var(--s-color-border-brand-disabled);
  }

  /* Send (sanctioned exception, sariblm-panel.tsx:950): brand lg pill, gradient, 28 glyph. */
  .s-btn--send {
    --_icon: var(--s-glyph-28);
    background-image: var(--site-send-gradient);
  }
  .s-btn--send:disabled { background-image: none; }

  /* v2.4: neutral fills inside a raised parent step one surface ABOVE it (same scope list as the
     v2.1 raised wells, plus the toolbar). In dark mode fill-secondary and the primary-variant
     hover/pressed fills are darker than surface-elevated and read as holes in a dialog, sheet or
     toast. Light mode resolves to the same origin values as outside. */
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip, .s-toolbar) .s-btn--secondary {
    --_bg: var(--s-color-fill-raised-secondary); --_bgh: var(--s-color-fill-raised-secondary-hover);
    --_bga: var(--s-color-fill-raised-secondary-active); --_bgd: var(--s-color-fill-raised-secondary-disabled);
  }
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip, .s-toolbar) .s-btn--tertiary {
    --_bg: var(--s-color-fill-raised-tertiary); --_bgh: var(--s-color-fill-raised-tertiary-hover);
    --_bga: var(--s-color-fill-raised-tertiary-active); --_bgd: var(--s-color-fill-raised-tertiary-disabled);
  }
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip, .s-toolbar) :is(.s-btn--outline, .s-btn--ghost) {
    --_bgh: var(--s-color-fill-raised-ghost-hover); --_bga: var(--s-color-fill-raised-ghost-active);
  }
}

/* ===== A2 Links ==================================================================== */
@layer s.components {
  /* Prose link: brand AND underline (guide-markdown.tsx:10). */
  .s-link, .s-prose a {
    color: var(--s-color-content-brand);
    text-decoration: underline;
    text-underline-offset: var(--s-underline-offset);
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-link:hover, .s-prose a:hover { color: var(--s-color-content-brand-hover); } }
  .s-link--chat, .s-msg__text a { color: var(--s-color-content-brand); text-decoration: none; }  /* chat-markdown.tsx:73 */

  /* v1 nav link (ledger web); prefer s-btn s-btn--link-neutral. */
  .s-navlink {
    color: var(--s-color-content-tertiary);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-navlink:hover { color: var(--s-color-content-secondary); } }
  .s-navlink:active { color: var(--s-color-content-primary); }
  .s-navlink[aria-current="page"] { color: var(--s-color-content-brand); }

  /* Breadcrumb (pixel-icons/breadcrumbs.tsx): Code body-sm faint, gap 6, " / " faint,
     current crumb content-secondary (03 assumption 1). */
  .s-crumbs { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-spacing-2); margin: 0; padding: 0; list-style: none; }
  .s-crumbs li { display: flex; align-items: center; gap: var(--s-spacing-2); }
  .s-crumbs li + li::before { content: "/"; }
  .s-crumbs a { transition: color var(--s-motion-hover); }
  @media (hover: hover) { .s-crumbs a:hover { color: var(--s-color-content-primary); } }
  .s-crumbs [aria-current="page"] { color: var(--s-color-content-secondary); }
}

/* ---- 20-site.css ---- */
/* ===== A17 Page  s-page / s-pagehead ================================================ */
@layer s.components {
  /* <main class="s-page">: P1 canvas, padding 12 → 32 from 1024, inner 1376 column gap 32. */
  .s-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: var(--s-color-fill-primary-disabled);
    padding: var(--s-spacing-4);
  }
  @media (min-width: 1024px) { .s-page { padding: var(--s-spacing-9); } }
  .s-page__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-9);
    width: 100%;
    max-width: var(--site-content-max);
    margin-inline: auto;
  }
  .s-pagehead { display: flex; flex-direction: column; gap: var(--s-spacing-5); }
  @media (min-width: 1280px) { .s-pagehead { padding: var(--s-spacing-7); } }
  .s-pagehead__meta { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-section { display: flex; flex-direction: column; gap: var(--s-spacing-6); }
  .s-section__head { display: flex; flex-direction: column; gap: var(--s-spacing-1); }
  @media (min-width: 1280px) { .s-section__head { padding-inline: var(--s-spacing-7); } }
  .s-section__blurb { max-width: var(--site-copy-max); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
  /* Catalogue/reference pages only: Code body-lg h2 with a rule above. */
  .s-section--ruled { border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary); padding-top: var(--s-spacing-9); }
  .s-section--ruled .s-h2 { font: var(--s-type-code-body-lg); }
}

/* ===== A4 Site header  s-header  (site-header.tsx:113-165) ===========================
   P0, full-bleed. No border, no shadow: the P0/P1 change is the edge. */
@layer s.components {
  .s-header { padding-inline: var(--s-spacing-6); background: var(--s-color-background); }
  .s-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--site-content-max);
    height: var(--s-header-h);
    margin-inline: auto;
  }
  .s-header__brand { display: flex; align-items: center; gap: var(--s-spacing-2); }
  .s-header__logo { width: var(--s-avatar-lg); height: var(--s-avatar-lg); flex-shrink: 0; }
  .s-header__name { display: none; white-space: nowrap; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-header__title { color: var(--s-color-content-tertiary); }
  .s-header__nav { display: none; align-items: center; gap: var(--s-spacing-6); }
  /* Stays above the menu drawer so the right cluster never appears to move. */
  .s-header__actions { position: relative; z-index: var(--s-layer-popover); display: flex; align-items: center; gap: var(--s-spacing-4); }
  @media (min-width: 768px) {
    .s-header { padding-inline: var(--s-spacing-9); }
    .s-header__nav { display: flex; }
    .s-header__actions { gap: var(--s-spacing-7); }
    .s-header__menu-btn { display: none; }
  }
  @media (min-width: 1025px) { .s-header__name { display: inline; } }

  /* Bare theme toggle (theme-toggle.tsx "bare"): 18px glyph, hover 70% (site-only). */
  .s-bare-toggle {
    display: flex;
    align-items: center;
    color: var(--s-color-content-primary);
    transition: opacity var(--s-motion-hover);
  }
  @media (hover: hover) { .s-bare-toggle:hover { opacity: 0.7; } }
}

/* ===== A21 Backdrop  s-backdrop ======================================================
   Ink 30% (light) / bone 30% (dark), no blur. Opacity 420ms. Toggle data-open. */
@layer s.components {
  .s-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--s-layer-overlay);
    background: var(--s-color-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--s-motion-backdrop-out);
  }
  .s-backdrop[data-open] { opacity: 1; pointer-events: auto; transition: opacity var(--s-motion-backdrop); }
}

/* ===== A5/A6 Drawer  s-drawer  (site-header.tsx:167-240, sariblm-panel.tsx:691) =======
   role="dialog" aria-modal="true" aria-label; closed = [inert]. 420ms translate. */
@layer s.components {
  .s-drawer {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: var(--s-layer-modal);
    display: flex;
    flex-direction: column;
    width: var(--s-drawer-w-menu);
    max-width: calc(100% - var(--s-drawer-gap));
    background: var(--s-color-fill-secondary-variant);
    transform: translateX(0);
    visibility: visible;
    will-change: transform;
    transition: transform var(--s-motion-drawer), visibility var(--s-motion-drawer);
  }
  .s-drawer[inert] { transform: translateX(100%); visibility: hidden; transition-timing-function: var(--s-motion-drawer-easing-out); }
  .s-drawer--left { right: auto; left: 0; }
  .s-drawer--left[inert] { transform: translateX(-100%); }
  /* Chat panel: full width, 600 from 768; P2w with a P1 layer on top. */
  .s-drawer--panel {
    width: 100%;
    max-width: none;
    background-color: var(--s-color-fill-primary-variant);
    background-image: linear-gradient(var(--s-color-fill-primary-disabled), var(--s-color-fill-primary-disabled));
  }
  @media (min-width: 768px) { .s-drawer--panel { width: var(--s-drawer-w-panel); } }

  .s-drawer__head { display: flex; flex-shrink: 0; align-items: center; height: var(--s-header-h); padding-inline: var(--s-spacing-6); }
  /* The close glyph mirrors mid-travel from "open" to "close". */
  .s-drawer__flip { transition: transform var(--s-motion-drawer); }
  .s-drawer:not([inert]) .s-drawer__flip { transform: scaleX(-1); }
  .s-drawer__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--s-spacing-4);
    padding: var(--s-spacing-9);
  }
  .s-drawer__link {
    display: flex;
    align-items: center;
    font: var(--s-type-heading-lg);
    color: var(--s-color-content-secondary);
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-drawer__link:hover { color: var(--s-color-content-primary); } }
  .s-drawer__link[aria-current="page"] { color: var(--s-color-content-primary); }
  .s-drawer__foot { padding: var(--s-spacing-6); }
  .s-drawer__socials { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: var(--s-spacing-6); list-style: none; }
  .s-drawer__social { display: flex; color: var(--s-color-content-primary); transition: opacity var(--s-motion-hover); }
  @media (hover: hover) { .s-drawer__social:hover { opacity: 0.7; } }   /* site-only exception, kept */
}

/* ===== A7 Footer  s-footer  (site-footer.tsx) ======================================== */
@layer s.components {
  .s-footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--s-spacing-4);
    padding: var(--s-spacing-6);
    background: var(--s-color-background);
  }
  .s-footer__credit { display: flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-lg); color: var(--s-color-content-secondary); }
  .s-footer__links { display: flex; align-items: center; gap: var(--s-spacing-6); }
  @media (min-width: 768px) { .s-footer { flex-direction: row; justify-content: space-between; } }
  @media (min-width: 1025px) { .s-footer { padding-inline: var(--s-footer-gutter); } }   /* px-32 = 128 */
}

/* ===== A20 Skip link  s-skip  (layout.tsx:72) ========================================= */
@layer s.components {
  .s-skip:not(:focus) {
    position: absolute; width: var(--s-stroke-width-2); height: var(--s-stroke-width-2); padding: 0; margin: calc(var(--s-stroke-width-2) * -1);
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .s-skip:focus {
    position: fixed;
    top: var(--s-spacing-5);
    left: var(--s-spacing-5);
    z-index: var(--s-layer-tooltip);
    padding: var(--s-spacing-3) var(--s-spacing-5);
    border-radius: var(--s-radius-6);
    background: var(--s-color-surface-elevated);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
  }
}

/* ---- 30-chat.css ---- */
/* ===== A6 Chat drawer, composer and messages  (sariblm-panel.tsx) ====================
   Panel = .s-drawer.s-drawer--panel (P2w + P1 layer). Pieces below. */
@layer s.components {
  /* Top bar (Figma 333:10450): p20, P2w. Left cluster carries pr44 to balance the right. */
  .s-chat__bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-spacing-6);
    background: var(--s-color-fill-primary-variant);
  }
  .s-chat__bar-start { display: flex; padding-right: var(--s-control-h-lg); }
  .s-chat__bar-end { display: flex; align-items: center; gap: var(--s-spacing-3); }
  .s-chat__title { display: flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-chat__info {
    display: flex;
    align-items: center;
    color: var(--s-color-content-tertiary);
    cursor: help;
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-chat__info:hover { color: var(--s-color-content-primary); } }

  /* Empty state: column centred, gap 12, px48 py20, 24 artwork + one body-xl muted line. */
  .s-chat__empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-spacing-4);
    padding: var(--s-spacing-6) var(--s-spacing-12);
    text-align: center;
  }
  .s-chat__empty-line { font: var(--s-type-body-xl); color: var(--s-color-content-secondary); }
  /* Starters (Figma 333:10830): ghost lg, tertiary text → secondary, stacked flush, px12. */
  .s-chat__starters { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-inline: var(--s-spacing-4); }
  .s-btn.s-chat__starter { --_fg: var(--s-color-content-tertiary); --_fgh: var(--s-color-content-secondary); --_fga: var(--s-color-content-secondary); }

  /* Log */
  .s-chat__log { display: flex; flex: 1; flex-direction: column; overflow-y: auto; padding: var(--s-chat-log-pad); }
  .s-chat__messages { display: flex; flex-direction: column; gap: var(--s-spacing-4); }

  /* Message */
  .s-msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-spacing-2); }
  .s-msg--user { align-items: flex-end; animation: s-message-in var(--s-motion-arrival); }
  .s-msg__bubble {
    max-width: var(--s-bubble-max-w);
    padding: var(--s-spacing-4) var(--s-spacing-5);
    border-radius: var(--s-radius-10);
    background: var(--s-color-surface-brand);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
    text-align: right;
  }
  /* Quoted passage rides above the bubble; padding on the wrapper so the clamp never bleeds. */
  .s-msg__quote {
    max-width: var(--s-bubble-max-w);
    padding: var(--s-spacing-4) var(--s-spacing-5);
    border-radius: var(--s-radius-10);
    background: var(--s-color-fill-secondary);
  }
  .s-msg__quote > p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-tertiary);
    text-align: left;
  }
  .s-quote-mark { margin-right: var(--s-spacing-2); font-weight: var(--s-font-weight-semibold); }  /* the only 600 */
  /* Assistant: no bubble. Paragraphs 10 apart; lists pl20 with faint markers; bold 500. */
  .s-msg__text { max-width: 100%; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-msg__text > * + * { margin-top: var(--s-space-10); }
  .s-msg__text :is(ul, ol) { margin-block: 0; padding-left: var(--s-spacing-6); }
  .s-msg__text li::marker { color: var(--s-color-content-tertiary); }
  .s-msg__text strong { font-weight: var(--s-font-weight-medium); }
  .s-msg__error { max-width: 100%; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-tertiary); }
  .s-msg__thinking { display: flex; align-items: center; width: var(--s-glyph-24); height: var(--s-glyph-24); }

  /* Meta row: gap 3, timestamp label-xs faint, actions 20 boxes with 14 glyphs. */
  .s-msg__meta { display: flex; align-items: center; gap: var(--s-msg-meta-gap); }
  .s-msg__time { font: var(--s-type-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-msg__actions {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--s-motion-reveal);
  }
  .s-msg:focus-within .s-msg__actions { opacity: 1; }
  @media (hover: hover) { .s-msg:hover .s-msg__actions { opacity: 1; } }
  @media (max-width: 767px) { .s-msg__actions { opacity: 1; } }
  @media (hover: none) { .s-msg__actions { opacity: 1; } }
  .s-msg__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-msg-action-size);
    height: var(--s-msg-action-size);
    border-radius: var(--s-radius-7);
    color: var(--s-color-content-tertiary);
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-msg__action:hover { color: var(--s-color-content-primary); } }
  .s-msg__action > .s-icon { width: var(--s-glyph-14); height: var(--s-glyph-14); }

  /* Follow-ups: mt8 pt16, rule above, link-neutral sm buttons, each rises in staggered. */
  .s-chat__followups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-spacing-1);
    margin-top: var(--s-spacing-3);
    padding-top: var(--s-spacing-5);
    border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    animation: s-message-in var(--s-motion-arrival);
  }
  .s-chat__followups > * { animation: s-message-in var(--s-motion-arrival) backwards; }
  .s-chat__followups > :nth-child(2) { animation-delay: var(--s-motion-arrival-duration); }
  .s-chat__followups > :nth-child(3) { animation-delay: calc(var(--s-motion-arrival-duration) * 2); }
  .s-chat__followups > :nth-child(4) { animation-delay: calc(var(--s-motion-arrival-duration) * 3); }

  /* Composer area: p12; scroll-to-latest floats 32 above the composer. */
  .s-chat__foot { position: relative; flex-shrink: 0; padding: var(--s-spacing-4); }
  .s-scroll-latest {
    position: absolute;
    top: calc(var(--s-spacing-13) * -1);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-control-h-sm);
    height: var(--s-control-h-sm);
    transform: translateX(-50%);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-md);
    color: var(--s-color-content-primary);
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-scroll-latest:hover { background: var(--s-color-fill-secondary); } }
  .s-scroll-latest > .s-icon { width: var(--s-glyph-18); height: var(--s-glyph-18); }

  /* Composer (Figma 333:10835): r28, hairline, P2w; 4/4/4/20; send pill sits 4 in. */
  .s-composer {
    display: flex;
    flex-direction: column;
    padding: var(--s-spacing-1) var(--s-spacing-1) var(--s-spacing-1) var(--s-spacing-6);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-composer-radius);
    background: var(--s-color-fill-primary-variant);
  }
  .s-composer__quote {
    display: flex;
    align-items: flex-start;
    gap: var(--s-spacing-3);
    margin-block: var(--s-spacing-3);
    padding: var(--s-spacing-3) var(--s-spacing-1) var(--s-spacing-3) var(--s-spacing-4);
    border-radius: var(--s-radius-9);
    background: var(--s-color-fill-secondary);
  }
  .s-composer__quote > p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    flex: 1;
    align-self: center;
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-tertiary);
  }
  .s-composer__row { display: flex; align-items: flex-end; gap: var(--s-spacing-4); }
  .s-composer__input {
    flex: 1;
    align-self: center;
    min-width: 0;
    max-height: var(--s-field-max-h);
    padding: var(--s-spacing-3) 0;
    border: 0;
    background: transparent;
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
    resize: none;
    outline: none;
  }
  .s-composer__input::placeholder { color: var(--s-color-content-primary-disabled); opacity: 1; }
  /* v2.5 compact composer (Figma UI3 comment pill): 36 tall while one line (grows), 12 inset, body-xs text,
     an s-btn--2xs send (24, pill) 6 from the end. Pair with s-btn--brand s-btn--2xs s-btn--pill s-btn--icon. */
  .s-composer--sm { justify-content: center; min-height: var(--s-control-h-sm); padding: var(--s-spacing-1) var(--s-spacing-1) var(--s-spacing-1) var(--s-spacing-4); border-radius: var(--s-radius-9); }
  .s-composer--sm .s-composer__row { gap: var(--s-spacing-3); }
  .s-composer--sm .s-composer__input { padding: var(--s-spacing-1) 0; font: var(--s-type-body-xs); letter-spacing: var(--s-letter-spacing-body-xs); }

  /* Quote-to-ask pill (quote-to-ask.tsx:124): h36 pill, elevated + hairline, grows in. */
  .s-quote-pill {
    display: flex;
    align-items: center;
    gap: var(--s-spacing-2);
    height: var(--s-control-h-sm);
    padding-inline: var(--s-space-10) var(--s-spacing-4);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    transform-origin: bottom;
    animation: s-pop-in var(--s-motion-duration-fast) var(--s-motion-expressive-easing); /* expressive: the quote pill */
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-quote-pill:hover { background: var(--s-color-fill-secondary); } }
  .s-quote-pill > .s-icon { width: var(--s-glyph-18); height: var(--s-glyph-18); color: var(--s-color-fill-brand); }
}

/* ---- 40-containers.css ---- */
/* ===== A8 Cards  s-card  (guides/page.tsx:109, not-found.tsx:45, libraries/page.tsx:53) ===
   P2: transparent, 1px hairline, r20, p24, gap 12. Links fill on hover. Never lift or shadow. */
@layer s.components {
  .s-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-4);
    padding: var(--s-card-pad);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-surface-radius);
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { a.s-card:hover, .s-card--link:hover { background: var(--s-color-fill-secondary); } }
  .s-card--feature { gap: var(--s-spacing-3); }
  .s-card--compact { gap: var(--s-spacing-2); padding: var(--s-card-pad-compact); }
  .s-card--end { align-items: flex-end; text-align: right; }
  .s-card--cta { align-items: flex-start; }
  .s-card--media { gap: var(--s-spacing-4); padding: var(--s-card-pad-tight); }
  .s-card--list { gap: 0; padding: var(--s-card-pad-tight); }          /* rows inside: r = 20 - 12 */
  .s-card__kicker { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-brand); }
  .s-card__label { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-card__title { font: var(--s-type-body-xl); color: var(--s-color-content-primary); }
  .s-card--compact .s-card__title { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); }
  .s-card__body { flex: 1; max-width: var(--site-copy-max); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
  .s-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-spacing-5); }
  .s-card__foot { display: flex; align-items: center; justify-content: space-between; }
  .s-card__meta { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-card__arrow { width: var(--s-glyph-20); height: var(--s-glyph-20); color: var(--s-color-content-tertiary); transition: color var(--s-motion-hover); }
  @media (hover: hover) { .s-card--media:hover .s-card__arrow { color: var(--s-color-content-primary); } }
  /* Image well: 16:9, r16 (20 − 12 concentric), surface-secondary. */
  .s-card__well { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--s-pop-radius); background: var(--s-color-surface-secondary); }
  .s-card__well > img { width: 100%; height: 100%; object-fit: cover; }
  .s-card__text { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-spacing-5); padding: var(--s-spacing-3); }
  .s-card__stack { display: flex; flex-direction: column; gap: var(--s-spacing-1); }

  /* Project card (project-card.tsx): no border/radius, 16:9 cover on surface-brand. */
  .s-project { display: flex; flex-direction: column; gap: var(--s-spacing-4); color: inherit; }
  .s-project__cover { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s-color-surface-brand); }
  .s-project__cover > img { width: 100%; height: 100%; object-fit: cover; }
  .s-project__caption { display: flex; align-items: flex-start; gap: var(--s-spacing-5); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); }
  .s-project__title { flex: 1; color: var(--s-color-content-secondary); transition: color var(--s-motion-hover); }
  @media (hover: hover) { a.s-project:hover .s-project__title { color: var(--s-color-content-primary); } }
  .s-project__meta { flex: 1; font-family: var(--s-font-family-code); color: var(--s-color-content-tertiary); text-align: right; }

  /* Tile (icon-link-grid.tsx:15): r16, hairline, P3 fill, p12 gap 8; hover border. */
  .s-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-spacing-3);
    padding: var(--s-card-pad-tight);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-pop-radius);
    background: var(--s-color-surface-elevated);
    transition: border-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-tile:hover { border-color: var(--s-color-border-primary-hover); } }
  .s-tile__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-secondary); }
}

/* ===== A10 Tooltip  s-tooltip  (sariblm-panel.tsx:716-737) ============================
   <span class="s-tip"><button aria-describedby="t1" aria-expanded="false">…</button>
   <span class="s-tooltip" role="tooltip" id="t1">…</span></span>
   Hover / focus-within shows it; tap toggles aria-expanded. 256w p12 r16, no shadow. */
@layer s.components {
  .s-tip { position: relative; display: inline-flex; align-items: center; }
  .s-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: var(--s-layer-tooltip);
    width: var(--s-tooltip-w);
    margin-top: var(--s-spacing-3);
    padding: var(--s-tooltip-pad);
    transform: translateX(-50%);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-pop-radius);
    background: var(--s-color-surface-elevated);
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-secondary);
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--s-motion-tooltip);
  }
  .s-tip:focus-within > .s-tooltip, .s-tip > [aria-expanded="true"] + .s-tooltip, .s-tooltip[data-open] { opacity: 1; }
  @media (hover: hover) { .s-tip:hover > .s-tooltip { opacity: 1; } }
  .s-tooltip--auto { width: max-content; max-width: var(--s-tooltip-w); }
  .s-tooltip--end { left: auto; right: 0; transform: none; }
  .s-tooltip--start { left: 0; transform: none; }
  /* v2.1 label tip (components.js data-s-tip): fixed, in <body>, never clipped by a rail. One line,
     p 8/12, same surface, radius and no-shadow rule as the tooltip; JS sets left/top. */
  .s-tooltip--float {
    position: fixed;
    top: 0;
    left: 0;
    width: max-content;
    max-width: var(--s-tooltip-w);
    margin: 0;
    padding: var(--s-tip-pad-y) var(--s-tip-pad-x);
    transform: none;
  }
}

/* ===== A11 Floating panel  s-panel  (pixel-icons/icon-panel.tsx:60-122) =================
   P3 + elevation-lg, r20, p16, gap 16. Mobile inset 12; from 768 right/bottom 24, 420w. */
@layer s.components {
  .s-panel {
    position: fixed;
    inset-inline: var(--s-spacing-4);
    bottom: var(--s-spacing-4);
    z-index: var(--s-layer-popover);
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-5);
    max-height: 80vh;
    overflow: auto;
    padding: var(--s-panel-pad);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-surface-radius);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-lg);
  }
  @media (min-width: 768px) {
    .s-panel { inset-inline: auto var(--s-spacing-7); bottom: var(--s-spacing-7); width: var(--s-panel-w); }
  }
  .s-panel--static { position: relative; inset: auto; width: auto; max-height: none; }
  .s-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-spacing-4); }
  .s-panel__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--s-type-code-body-lg); color: var(--s-color-content-primary); }
  .s-panel__meta, .s-panel__note { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-panel__well { display: flex; align-items: center; justify-content: center; padding: var(--s-spacing-7); border-radius: var(--s-radius-8); background: var(--s-color-fill-secondary); }
  .s-panel__section { display: flex; flex-direction: column; gap: var(--s-spacing-3); padding-top: var(--s-spacing-5); border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary); }
  .s-panel__label { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-secondary); }
  .s-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-spacing-3); }
}

/* ===== B8 Menu / popover / listbox  s-menu ==============================================
   P3 r16 + hairline + elevation-md, p4. Items = ghost rows 36, r12 (16 − 4).
   role="menu" > role="menuitem" | role="listbox" > role="option"[aria-selected]. */
@layer s.components {
  .s-menu {
    z-index: var(--s-layer-dropdown);
    display: flex;
    flex-direction: column;
    min-width: var(--s-menu-min-w);
    max-width: var(--s-menu-max-w);
    max-height: var(--s-menu-max-h);
    overflow-y: auto;
    margin: 0;
    padding: var(--s-spacing-1);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-pop-radius);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-md);
    list-style: none;
    transform-origin: top;
    animation: s-pop-in var(--s-motion-popover); /* v2.8: standard, no overshoot (was entrance) */
  }
  .s-menu[data-side="top"] { transform-origin: bottom; }
  .s-menu[data-closing] { animation: none; opacity: 0; transition: opacity var(--s-motion-popover-out); }
  .s-menu--anchored { position: absolute; top: calc(100% + var(--s-spacing-3)); left: 0; }
  .s-menu__item {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: var(--s-menu-item-h);
    padding: var(--s-menu-item-pad-y) var(--s-label-pad-x);
    border-radius: var(--s-menu-item-radius);
    background: transparent;
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    text-align: left;
    cursor: pointer;
    outline-offset: calc(var(--s-focus-ring-offset) * -1);
    transition: background-color var(--s-motion-hover), color var(--s-motion-hover);
  }
  .s-menu__item > .s-menu__text { flex: 1; min-width: 0; padding-inline: var(--s-spacing-1); }
  .s-menu__item > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); color: var(--s-color-content-secondary); }
  /* v2.4: the menu is raised, so its item fills step above it (same values as fill-secondary in light). */
  .s-menu__item[data-active], .s-menu__item:focus-visible { background: var(--s-color-fill-raised-secondary); }
  @media (hover: hover) { .s-menu__item:hover { background: var(--s-color-fill-raised-secondary); } }
  .s-menu__item:active { background: var(--s-color-fill-raised-secondary-hover); }
  .s-menu__item:disabled, .s-menu__item[aria-disabled="true"] { background: transparent; color: var(--s-color-content-primary-disabled); cursor: not-allowed; }
  .s-menu__item:disabled > .s-icon, .s-menu__item[aria-disabled="true"] > .s-icon { color: var(--s-color-content-primary-disabled); }
  .s-menu__item--danger, .s-menu__item--danger > .s-icon { color: var(--s-color-content-critical); }
  .s-menu__item--danger[data-active] { background: var(--s-color-fill-critical-secondary); }
  @media (hover: hover) { .s-menu__item--danger:hover { background: var(--s-color-fill-critical-secondary); } }
  .s-menu__shortcut { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-menu__check { visibility: hidden; color: var(--s-color-content-primary) !important; }
  .s-menu__item[aria-selected="true"] > .s-menu__check,
  .s-menu__item[aria-checked="true"] > .s-menu__check { visibility: visible; }
  .s-menu__desc { display: block; font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-menu__sep { height: var(--s-stroke-width-2); margin: var(--s-spacing-1) 0; border: 0; background: var(--s-color-border-primary); }
  .s-menu__label { padding: var(--s-label-pad-y) var(--s-label-pad-x); font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  /* v2.5 sm: compact menu (Figma UI3 scale): items 28 r8, body-xs, 16 icons; labels 4/8. Coarse pointers keep the 44 item floor. */
  .s-menu--sm { min-width: var(--s-menu-min-w); border-radius: var(--s-radius-6); }
  .s-menu--sm .s-menu__item { min-height: var(--s-control-h-xs); padding: var(--s-spacing-1) var(--s-spacing-3); border-radius: var(--s-radius-4); font: var(--s-type-body-xs); letter-spacing: var(--s-letter-spacing-body-xs); }
  .s-menu--sm .s-menu__item > .s-menu__text { padding-inline: var(--s-spacing-1); }
  .s-menu--sm .s-menu__label { padding: var(--s-spacing-1) var(--s-spacing-3); }
  .s-menu--sm .s-menu__desc { font: var(--s-type-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); }
  /* v2.7 inverse: the dark menu of canvas tools (app, file, account and right-click menus), dark in both modes.
     It re-points the roles its parts read, so items, icons, checks, labels, shortcuts, separators, danger
     items and anything placed inside follow without their own rules. Combine with --sm. */
  .s-menu--inverse {
    --s-color-surface-elevated: var(--s-color-menu-inverse-surface);
    --s-color-border-primary: var(--s-color-menu-inverse-border);
    --s-color-content-primary: var(--s-color-menu-inverse-content);
    --s-color-content-secondary: var(--s-color-menu-inverse-content-secondary);
    --s-color-content-tertiary: var(--s-color-menu-inverse-content-tertiary);
    --s-color-content-primary-disabled: var(--s-color-menu-inverse-content-disabled);
    --s-color-content-brand: var(--s-color-menu-inverse-brand);
    --s-color-content-critical: var(--s-color-menu-inverse-critical);
    --s-color-fill-critical-secondary: var(--s-color-menu-inverse-critical-fill);
    --s-color-fill-raised-secondary: var(--s-color-menu-inverse-hover);
    --s-color-fill-raised-secondary-hover: var(--s-color-menu-inverse-active);
    --s-color-fill-raised-ghost-hover: var(--s-color-menu-inverse-hover);
    --s-color-fill-raised-ghost-active: var(--s-color-menu-inverse-active);
    --s-color-border-focus: var(--s-color-menu-inverse-focus);
    color-scheme: dark;
    color: var(--s-color-content-primary);
  }
  .s-popover-anchor { position: relative; display: inline-flex; }
}

/* ===== B14 Dialog  s-dialog  + B14 sheet  s-sheet =========================================
   Native <dialog> + showModal(). Surface = floating panel, backdrop = A21, arrival = message-in. */
@layer s.components {
  .s-dialog {
    width: var(--s-dialog-w);
    max-width: calc(100% - var(--s-spacing-7));
    max-height: calc(100% - var(--s-spacing-7));
    margin: auto;
    padding: var(--s-dialog-pad);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-surface-radius);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-lg);
    color: var(--s-color-content-primary);
    overflow: auto;
  }
  .s-dialog[open] { display: flex; flex-direction: column; gap: var(--s-spacing-5); animation: s-message-in var(--s-motion-dialog); }
  .s-dialog::backdrop { background: var(--s-color-scrim); animation: s-fade-in var(--s-motion-backdrop); }
  .s-dialog[data-closing] { opacity: 0; transition: opacity var(--s-motion-dialog-out); }
  .s-dialog[data-closing]::backdrop { opacity: 0; transition: opacity var(--s-motion-dialog-out); }
  /* Static preview (demo, docs): same look, in flow. */
  .s-dialog--static { position: static; display: flex; flex-direction: column; gap: var(--s-spacing-5); max-width: 100%; animation: none; }
  .s-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-spacing-4); }
  .s-dialog__head > .s-btn { margin: calc(var(--s-spacing-3) * -1) calc(var(--s-spacing-3) * -1) 0 0; }
  .s-dialog__title { font: var(--s-type-body-xl); color: var(--s-color-content-primary); }
  .s-dialog__body { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
  .s-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-spacing-3); }
  @media (max-width: 479px) {
    .s-dialog__actions { flex-direction: column-reverse; }
    .s-dialog__actions > .s-btn { width: 100%; }
  }

  /* Bottom sheet: coarse pointers < 768. r20 top only, p 8/24/24, 40×4 handle. */
  .s-sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100% - var(--s-spacing-12));
    margin: auto 0 0;
    padding: var(--s-spacing-3) var(--s-spacing-7) calc(var(--s-spacing-7) + env(safe-area-inset-bottom, 0px));
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-bottom: 0;
    border-radius: var(--s-surface-radius) var(--s-surface-radius) 0 0;
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-lg);
    color: var(--s-color-content-primary);
  }
  .s-sheet[open] { display: flex; flex-direction: column; gap: var(--s-spacing-5); animation: s-sheet-in var(--s-motion-drawer); }
  .s-sheet::backdrop { background: var(--s-color-scrim); animation: s-fade-in var(--s-motion-backdrop); }
  .s-sheet[data-closing] { transform: translateY(100%); transition: transform var(--s-motion-drawer-out); }
  .s-sheet--static { position: static; display: flex; flex-direction: column; gap: var(--s-spacing-5); animation: none; }
  .s-sheet__handle {
    align-self: center;
    flex-shrink: 0;
    width: var(--s-sheet-handle-w);
    height: var(--s-sheet-handle-h);
    margin-bottom: var(--s-spacing-1);
    border-radius: var(--s-radius-full);
    background: var(--s-color-border-secondary);
  }
}

/* ===== B15 Toast  s-toast ================================================================
   P3 r16 + elevation-md, p12/16, gap 12, body-sm ink. Fixed bottom 24, centred, max 420,
   stack of 3 (newest at the bottom), gap 8. Not inverse: nothing floating in the origin is. */
@layer s.components {
  .s-toasts {
    position: fixed;
    inset-inline: var(--s-spacing-4);
    bottom: calc(var(--s-spacing-7) + var(--s-toast-offset, 0px));
    z-index: var(--s-layer-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-spacing-3);
    pointer-events: none;
  }
  .s-toast {
    display: flex;
    align-items: center;
    gap: var(--s-spacing-4);
    width: max-content;
    max-width: min(100%, var(--s-toast-w));
    padding: var(--s-toast-pad-y) var(--s-toast-pad-x);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-pop-radius);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-md);
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    pointer-events: auto;
    animation: s-message-in var(--s-motion-toast);
  }
  .s-toast[data-closing] { opacity: 0; transition: opacity var(--s-motion-toast-out); }
  .s-toast__text { flex: 1; min-width: 0; }
  .s-toast > .s-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); color: var(--s-color-content-secondary); }
  .s-toast--success > .s-icon { color: var(--s-color-content-success); }
  .s-toast--warning > .s-icon { color: var(--s-color-content-warning); }
  .s-toast--critical > .s-icon { color: var(--s-color-content-critical); }
  .s-toast--info > .s-icon { color: var(--s-color-content-info); }
  .s-toast > .s-btn--icon { margin-block: calc(var(--s-spacing-3) * -1); margin-right: calc(var(--s-spacing-3) * -1); }
}

/* ===== B16 Alert / banner  s-alert =======================================================
   r20, p12/16, gap 12, 20 icon; title body-md ink, description body-sm muted. No border;
   only the icon takes the tone. role="alert" for critical, role="status" otherwise. */
@layer s.components {
  .s-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-spacing-4);
    padding: var(--s-toast-pad-y) var(--s-toast-pad-x);
    border-radius: var(--s-surface-radius);
    background: var(--s-color-fill-secondary);
    color: var(--s-color-content-primary);
  }
  .s-alert > .s-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); margin-top: var(--s-nudge-2); color: var(--s-color-content-secondary); }
  .s-alert__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--s-spacing-1); min-width: 0; }
  .s-alert__title { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-alert__desc { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-alert > .s-btn--icon { margin: calc(var(--s-spacing-3) * -1) calc(var(--s-spacing-3) * -1) calc(var(--s-spacing-3) * -1) 0; }
  .s-alert--info { background: var(--s-color-surface-info); }
  .s-alert--info > .s-icon { color: var(--s-color-content-info); }
  .s-alert--success { background: var(--s-color-surface-success); }
  .s-alert--success > .s-icon { color: var(--s-color-content-success); }
  .s-alert--warning { background: var(--s-color-surface-warning); }
  .s-alert--warning > .s-icon { color: var(--s-color-content-warning); }
  .s-alert--critical { background: var(--s-color-surface-critical); }
  .s-alert--critical > .s-icon { color: var(--s-color-content-critical); }
  .s-alert--banner { width: 100%; }
}

/* ---- 50-inputs.css ---- */
/* ===== A9 Topic pill  s-pill  (guides/page.tsx:79-83) =================================== */
@layer s.components {
  .s-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-spacing-3);
    padding: var(--s-spacing-3) var(--s-spacing-5);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-fill-primary-variant);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-secondary);
    white-space: nowrap;
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-pill:hover { color: var(--s-color-content-primary); } }
  .s-pill__count { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-pill-row { display: flex; gap: var(--s-spacing-3); width: max-content; }
}

/* ===== A9 Filter chip  s-chip  (pixel-icons/chip.tsx:14-31) ==============================
   button[aria-pressed]; 32 tall, pill, px12, gap 6, Code label-xs, hairline, P3 fill. */
@layer s.components {
  .s-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--s-spacing-2);
    height: var(--s-chip-h);
    padding-inline: var(--s-spacing-4);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    font: var(--s-type-code-label-xs);
    letter-spacing: var(--s-letter-spacing-label-xs);
    color: var(--s-color-content-secondary);
    white-space: nowrap;
    transition:
      background-color var(--s-motion-hover),
      border-color var(--s-motion-hover),
      color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-chip:hover { border-color: var(--s-color-border-primary-hover); color: var(--s-color-content-primary); } }
  .s-chip[aria-pressed="true"] { border-color: transparent; background: var(--s-color-fill-inverse); color: var(--s-color-content-primary-inverse); }
  .s-chip:disabled { border-color: var(--s-color-border-primary-disabled); color: var(--s-color-content-primary-disabled); }
  .s-chip__count { color: var(--s-color-content-tertiary); }
  .s-chip[aria-pressed="true"] .s-chip__count { color: inherit; opacity: 0.6; }
  .s-chip > .s-icon { width: var(--s-glyph-14); height: var(--s-glyph-14); }
  .s-chip-row { display: flex; gap: var(--s-spacing-2); overflow-x: auto; padding-bottom: var(--s-spacing-1); scrollbar-width: thin; }
  .s-chip-sep { flex-shrink: 0; align-self: stretch; width: var(--s-stroke-width-2); margin-inline: var(--s-spacing-1); background: var(--s-color-border-primary); }
}

/* ===== A9 Segmented  s-seg  + B6 Tabs (same control, tab semantics) =====================
   Track role="group" (or role="tablist"), fill-secondary, p2, pill.
   Segment button[aria-pressed] (or role="tab"[aria-selected]); 28 Code label-xs (sm) or
   36 Flex body-sm (md). Selected: elevated + ink + elevation-sm. */
@layer s.components {
  .s-seg {
    display: inline-flex;
    flex-shrink: 0;
    padding: var(--s-track-pad);
    border-radius: var(--s-radius-full);
    background: var(--s-color-fill-secondary);
  }
  .s-seg__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-spacing-2);
    height: var(--s-seg-h-sm);
    padding-inline: var(--s-spacing-4);
    border-radius: var(--s-radius-full);
    background: transparent;
    font: var(--s-type-code-label-xs);
    letter-spacing: var(--s-letter-spacing-label-xs);
    color: var(--s-color-content-secondary);
    white-space: nowrap;
    transition:
      background-color var(--s-motion-hover),
      color var(--s-motion-hover),
      box-shadow var(--s-motion-hover);
  }
  @media (hover: hover) { .s-seg__item:hover { color: var(--s-color-content-primary); } }
  .s-seg__item[aria-pressed="true"], .s-seg__item[aria-selected="true"] {
    background: var(--s-color-surface-elevated);
    color: var(--s-color-content-primary);
    box-shadow: var(--s-elevation-sm);
  }
  .s-seg__item:disabled { color: var(--s-color-content-primary-disabled); cursor: not-allowed; }
  .s-seg__count { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-seg--md .s-seg__item { height: var(--s-seg-h-md); padding-inline: var(--s-spacing-5); font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-seg--block { display: flex; }
  .s-seg--block .s-seg__item { flex: 1; }
  .s-tabpanel:focus-visible { outline-offset: var(--s-spacing-1); border-radius: var(--s-radius-2); }
}

/* ===== A12 Search (compact)  s-search  (pixel-icons/studio.tsx:151) ======================
   36 pill, hairline, P3 fill, px16, Code body-sm ink, placeholder ink 50%. */
@layer s.components {
  .s-search {
    flex: 1;
    min-width: var(--s-search-min-w);
    height: var(--s-field-h-sm);
    padding-inline: var(--s-field-pad-x-sm);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    font: var(--s-type-code-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    outline: none;
    transition: border-color var(--s-motion-hover);
  }
  .s-search::placeholder { color: var(--s-color-content-placeholder); opacity: 1; }
  @media (hover: hover) { .s-search:hover { border-color: var(--s-color-border-primary-hover); } }
  .s-search:focus { border-color: var(--s-color-content-tertiary); }       /* B1 focus fix */
  .s-search::-webkit-search-cancel-button { -webkit-appearance: none; }
  @media (min-width: 768px) { .s-search { max-width: var(--s-search-max-w); } }
  .s-search-count { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }

  /* A13 compact select (board.tsx:136): 36 pill, hairline, P3 fill, px12, Code label-xs, native arrow. */
  .s-select {
    height: var(--s-field-h-sm);
    padding-inline: var(--s-spacing-4);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background-color: var(--s-color-surface-elevated);
    font: var(--s-type-code-label-xs);
    letter-spacing: var(--s-letter-spacing-label-xs);
    color: var(--s-color-content-primary);
    cursor: pointer;
    transition: border-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-select:hover { border-color: var(--s-color-border-primary-hover); } }
  .s-select:focus-visible { border-color: var(--s-color-content-tertiary); }
  .s-select:disabled { color: var(--s-color-content-primary-disabled); cursor: not-allowed; }

  /* A14 swatch radio (icon-panel.tsx:83-96): 20 circle, hairline; pressed = focus-ring shape. */
  .s-swatches { display: flex; align-items: center; gap: var(--s-spacing-2); }
  .s-swatch {
    width: var(--s-swatch-size);
    height: var(--s-swatch-size);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-swatch, var(--s-color-surface-elevated));
  }
  .s-swatch[aria-pressed="true"], .s-swatch[aria-checked="true"] {
    outline: var(--s-focus-ring-width) solid var(--s-color-border-focus);
    outline-offset: var(--s-focus-ring-offset);
  }
}

/* ===== B1 Text field  s-field  (composer shell; compact = A12) ===========================
   <div class="s-form-item">
     <label class="s-field-label" for="x">Email</label>
     <div class="s-field">[.s-icon] [.s-field__prefix] <input class="s-field__input" id="x"> [.s-btn--icon | .s-field__suffix]</div>
   Credentials, codes and amounts: autocorrect="off" autocapitalize="off" spellcheck="false" on the input.
     <p class="s-help">…</p> | <p class="s-field-error">…</p>
   </div>
   States: :hover, :focus-within (border ink 50%), [aria-invalid], :disabled, [readonly]. */
@layer s.components {
  .s-form { display: flex; flex-direction: column; gap: var(--s-spacing-6); }
  .s-form-item { display: flex; flex-direction: column; gap: var(--s-spacing-2); min-width: 0; }
  .s-field-label { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-help { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-field-error { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-critical); }

  .s-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-spacing-3);
    min-width: 0;
    height: var(--s-field-h-md);
    padding-inline: var(--s-field-pad-x);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-composer-radius);
    background: var(--s-well-fill, var(--s-color-fill-primary-variant));
    color: var(--s-color-content-primary);
    cursor: text;
    transition: border-color var(--s-motion-hover), border-radius var(--s-motion-hover);
  }
  @media (hover: hover) { .s-field:hover { border-color: var(--s-color-border-primary-hover); } }
  .s-field:focus-within { border-color: var(--s-color-content-tertiary); }
  .s-field:has(.s-field__input[aria-invalid="true"]),
  .s-field[aria-invalid="true"] { border-color: var(--s-color-border-critical); }
  .s-field:has(.s-field__input:disabled) {
    border-color: var(--s-color-border-primary-disabled);
    background: var(--s-color-fill-primary-variant-disabled);
    color: var(--s-color-content-primary-disabled);
    cursor: not-allowed;
  }
  .s-field:has(.s-field__input[readonly]) { background: transparent; border-color: var(--s-color-border-primary); color: var(--s-color-content-secondary); }
  /* trailing icon button sits 4 from the edge (composer geometry) */
  .s-field:has(> .s-btn:last-child) { padding-right: var(--s-spacing-1); }
  .s-field > .s-icon { width: var(--s-field-icon); height: var(--s-field-icon); color: var(--s-color-content-tertiary); }
  .s-field__input {
    flex: 1;
    align-self: stretch;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: inherit;
    outline: none;
  }
  .s-field__input::placeholder { color: var(--s-color-content-primary-disabled); opacity: 1; }
  .s-field__input:disabled { cursor: not-allowed; }
  .s-field__suffix, .s-field__prefix { flex-shrink: 0; font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }

  /* sm: the compact search geometry (36, pill, Code body-sm, placeholder 50%). */
  .s-field--sm { height: var(--s-field-h-sm); padding-inline: var(--s-field-pad-x-sm); border-radius: var(--s-radius-full); background: var(--s-color-surface-elevated); }
  .s-field--sm .s-field__input { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-field--sm .s-field__input::placeholder { color: var(--s-color-content-placeholder); }
  .s-field--sm > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); }
  /* v2.5 xs: compact search / filter field (Figma UI3 scale): 32 pill, 12 inset, body-xs, 16 icon.
     Coarse pointers keep a 44 hit area via ::after (wrap in a <label> so the whole area focuses). */
  .s-field--xs { gap: var(--s-spacing-2); height: var(--s-field-h-xs); padding-inline: var(--s-spacing-4); border-radius: var(--s-radius-full); background: var(--s-color-surface-elevated); }
  .s-field--xs .s-field__input { font: var(--s-type-body-xs); letter-spacing: var(--s-letter-spacing-body-xs); }
  .s-field--xs .s-field__input::placeholder { color: var(--s-color-content-placeholder); }
  .s-field--xs > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); }
  .s-field--xs:has(> .s-btn:last-child) { padding-right: var(--s-spacing-1); }

  /* multi-line: min 48, grows to 160 then scrolls; r28 while one line, r20 once grown. */
  .s-field--multi { align-items: flex-end; height: auto; min-height: var(--s-field-h-md); padding-block: var(--s-spacing-1); }
  .s-field--multi .s-field__input { align-self: center; max-height: var(--s-field-max-h); padding-block: var(--s-spacing-3); resize: none; }
  .s-field--multi[data-grown] { border-radius: var(--s-surface-radius); }

  /* B2 md select: the md shell + native select, appearance none, 16 chevron at right 16. */
  .s-field--select { padding: 0; cursor: pointer; }
  .s-field--select > select {
    flex: 1;
    align-self: stretch;
    min-width: 0;
    padding: 0 calc(var(--s-field-pad-x-sm) + var(--s-glyph-16) + var(--s-spacing-4)) 0 var(--s-field-pad-x);
    border: 0;
    border-radius: inherit;
    background: transparent;
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: inherit;
    outline: none;
  }
  .s-field--select > .s-icon { position: absolute; right: var(--s-field-pad-x-sm); width: var(--s-glyph-16); height: var(--s-glyph-16); pointer-events: none; }
  .s-field--select:has(select:disabled) { cursor: not-allowed; }
  .s-field--select:has(select[aria-invalid="true"]) { border-color: var(--s-color-border-critical); }
  /* custom listbox trigger: a button inside the md shell */
  .s-field__trigger { display: flex; flex: 1; align-items: center; align-self: stretch; min-width: 0; padding: 0; background: transparent; text-align: left; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: inherit; outline: none; }
  .s-field:has(.s-field__trigger[aria-expanded="true"]) { border-color: var(--s-color-content-tertiary); }
}

/* ===== B3 Checkbox  s-check  /  B4 Radio  s-radio  /  B5 Switch  s-switch ==================
   <label class="s-check"><input type="checkbox"> Label</label>   (native input, restyled)
   Boundaries use content-tertiary: no neutral border token reaches 3:1 (03 assumption 10). */
@layer s.components {
  .s-check, .s-radio, .s-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--s-spacing-4);
    min-height: var(--s-size-target-min);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
    cursor: pointer;
  }
  .s-check:has(input:disabled), .s-radio:has(input:disabled), .s-switch:has(input:disabled) { color: var(--s-color-content-primary-disabled); cursor: not-allowed; }
  .s-check > input, .s-radio > input {
    position: relative;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    width: var(--s-check-size);
    height: var(--s-check-size);
    margin: 0;
    border: var(--s-stroke-width-2) solid var(--s-color-content-tertiary);
    background: var(--s-well-fill, var(--s-color-fill-primary-variant));
    -webkit-appearance: none;
    appearance: none;
    cursor: inherit;
    transition: background-color var(--s-motion-hover), border-color var(--s-motion-hover);
  }
  .s-check > input { border-radius: var(--s-radius-3); }
  .s-radio > input { border-radius: var(--s-radius-full); }
  .s-check > input:focus-visible, .s-radio > input:focus-visible {
    outline: var(--s-focus-ring-width) solid var(--s-color-border-focus);
    outline-offset: var(--s-focus-ring-offset);
  }
  @media (hover: hover) { .s-check:hover > input:not(:disabled), .s-radio:hover > input:not(:disabled) { border-color: var(--s-color-content-secondary); } }
  .s-check > input::before {
    content: "";
    width: var(--s-glyph-14);
    height: var(--s-glyph-14);
    background-color: var(--s-color-content-primary-inverse);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;   /* glyph: icons.css */
    visibility: hidden;
  }
  .s-check > input:checked, .s-check > input:indeterminate { border-color: transparent; background: var(--s-color-fill-inverse); }
  @media (hover: hover) { .s-check:hover > input:is(:checked, :indeterminate):not(:disabled) { border-color: transparent; background: var(--s-color-fill-inverse-hover); } }
  .s-check > input:is(:checked, :indeterminate)::before { visibility: visible; }
  .s-check > input:disabled { border-color: var(--s-color-content-tertiary-disabled); }
  .s-check > input:disabled:is(:checked, :indeterminate) { border-color: transparent; background: var(--s-color-fill-inverse-disabled); }
  .s-check > input[aria-invalid="true"], .s-radio > input[aria-invalid="true"] { border-color: var(--s-color-border-critical); }

  .s-radio > input::before {
    content: "";
    width: var(--s-dot-size);
    height: var(--s-dot-size);
    border-radius: var(--s-radius-full);
    background: var(--s-color-fill-inverse);
    transform: scale(0);
    transition: transform var(--s-motion-hover);
  }
  .s-radio > input:checked { border-color: var(--s-color-fill-inverse); }
  @media (hover: hover) { .s-radio:hover > input:checked:not(:disabled) { border-color: var(--s-color-fill-inverse-hover); } }
  .s-radio > input:checked::before { transform: scale(1); }
  .s-radio > input:disabled { border-color: var(--s-color-content-tertiary-disabled); }
  .s-radio > input:disabled:checked { border-color: var(--s-color-fill-inverse-disabled); }
  .s-radio > input:disabled::before { background: var(--s-color-fill-inverse-disabled); }
  .s-choice-group { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; }
  .s-choice-group > legend, .s-choice-group__label { margin-bottom: var(--s-spacing-1); padding: 0; font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }

  /* Switch: 40×24 track (segment track geometry, p2), 20 knob = selected segment. */
  .s-switch > input {
    position: relative;
    flex-shrink: 0;
    width: var(--s-switch-w);
    height: var(--s-switch-h);
    margin: 0;
    border-radius: var(--s-radius-full);
    background: var(--s-color-content-tertiary);
    -webkit-appearance: none;
    appearance: none;
    cursor: inherit;
    transition: background-color var(--s-motion-hover);
  }
  .s-switch > input::before {
    content: "";
    position: absolute;
    top: var(--s-track-pad);
    left: var(--s-track-pad);
    width: var(--s-switch-knob);
    height: var(--s-switch-knob);
    border-radius: var(--s-radius-full);
    background: var(--s-color-background);
    box-shadow: var(--s-elevation-sm);
    transition: transform var(--s-motion-hover);
  }
  @media (hover: hover) { .s-switch:hover > input:not(:disabled) { background: var(--s-color-content-secondary); } }
  .s-switch > input:checked { background: var(--s-color-fill-inverse); }
  @media (hover: hover) { .s-switch:hover > input:checked:not(:disabled) { background: var(--s-color-fill-inverse-hover); } }
  .s-switch > input:checked::before { transform: translateX(calc(var(--s-switch-w) - var(--s-switch-knob) - var(--s-track-pad) * 2)); }
  .s-switch > input:disabled { background: var(--s-color-content-tertiary-disabled); }
  .s-switch > input:disabled:checked { background: var(--s-color-fill-inverse-disabled); }
  .s-switch > input:focus-visible { outline: var(--s-focus-ring-width) solid var(--s-color-border-focus); outline-offset: var(--s-focus-ring-offset); }
  .s-switch--end { justify-content: space-between; width: 100%; }
}

/* ===== B12 Dropzone  s-drop ===============================================================
   P2 card (solid hairline, never dashed), r20 p24, centred. Drag-over = brand-tone colours.
   The button is the keyboard path; set data-dragover while a file hovers. */
@layer s.components {
  .s-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-spacing-4);
    padding: var(--s-spacing-7);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-10);
    background: transparent;
    text-align: center;
    transition: background-color var(--s-motion-hover), border-color var(--s-motion-hover);
  }
  .s-drop > .s-icon { color: var(--s-color-content-tertiary); transition: color var(--s-motion-hover); }
  .s-drop__line { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); transition: color var(--s-motion-hover); }
  .s-drop__help { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-drop__text { display: flex; flex-direction: column; gap: var(--s-spacing-1); }
  .s-drop[data-dragover] { border-color: var(--s-color-border-brand); background: var(--s-color-fill-brand-secondary); }
  .s-drop[data-dragover] > .s-icon, .s-drop[data-dragover] .s-drop__line { color: var(--s-color-content-brand); }
  .s-drop[aria-invalid="true"] { border-color: var(--s-color-border-critical); }
  /* Whole-window drag: backdrop + a centred raised pill. */
  .s-drop-pill {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: var(--s-layer-modal);
    display: flex;
    align-items: center;
    gap: var(--s-spacing-3);
    padding: var(--s-spacing-4) var(--s-spacing-7);
    transform: translate(-50%, -50%);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-lg);
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
  }
  .s-drop-pill--static { position: static; transform: none; display: inline-flex; }
  .s-drop-pill > .s-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); }
}

/* ---- 55-amount.css ---- */
/* ===== B26 Display amount field  s-amount  (v2.4, new; Flutter SAmountField) ===================
   Money is the loudest thing on the screen it is entered on, so it gets its own field: very large
   Code figures on a calm under-line instead of the 48 composer shell.

   <div class="s-amount [s-amount--md] [s-amount--center]" data-s-amount
        [data-tone="expense|income"] [data-decimals="0"] [data-locale="en-US"] [data-max-digits="12"]
        [data-allow-negative] [data-keypad]>
     <label class="s-field-label" for="a1">Spend amount</label>
     <div class="s-amount__row">
       <span class="s-amount__currency">Rs</span>          (or a button: currency picker)
       <div class="s-amount__window"><div class="s-amount__stage">
         <input class="s-amount__input" id="a1" inputmode="decimal" placeholder="0" autocomplete="off"
                autocorrect="off" autocapitalize="off" spellcheck="false">
       </div></div>
     </div>
     <p class="s-help">…</p> | <p class="s-field-error">…</p>
     <div class="s-amount__quick"><button class="s-chip" data-s-amount-add="500">+500</button>…</div>
     <div class="s-amount__keypad">…</div>                (components.js builds it with data-keypad)
   </div>

   components.js adds the figures layer (aria-hidden; the input stays the real, readable value),
   groups thousands as you type, scales the figures down as digits grow, and lets each new digit
   settle in. Without JS it is a plain large input. Motion is transform + opacity only, on the base
   duration, which reduced motion sets to 0: nothing moves then.

   States: hover line, focus (the line draws in from the caret side, ink 50%), aria-invalid
   (critical line + s-field-error; the one red moment), disabled, readonly (no line).
   Tone: expense = a muted minus, income = a success plus. The figures stay ink: red is never
   the colour of spending. */
@layer s.components {
  .s-amount {
    --_size: var(--s-type-code-amount);
    --_line: var(--s-amount-line);
    --_fit: 1;
    --_chip: var(--s-color-fill-secondary);
    --_chip-h: var(--s-color-fill-secondary-hover);
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-3);
    min-width: 0;
  }
  .s-amount--md { --_size: var(--s-type-code-amount-md); --_line: var(--s-amount-line-md); }
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) .s-amount {
    --_chip: var(--s-color-fill-raised-secondary);
    --_chip-h: var(--s-color-fill-raised-secondary-hover);
  }

  /* --- the row: [currency chip] [window] over a hairline that becomes the focus line --- */
  .s-amount__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-spacing-3);
    padding-bottom: var(--s-spacing-3);
  }
  .s-amount__row::before,
  .s-amount__row::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--s-stroke-width-2);
    pointer-events: none;
  }
  .s-amount__row::before {
    background: var(--s-color-border-primary);
    transition: background-color var(--s-motion-hover);
  }
  .s-amount__row::after {                          /* focus: draws in from the start (or centre) */
    background: var(--s-color-content-tertiary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--s-motion-expand);
  }
  @media (hover: hover) { .s-amount__row:hover::before { background: var(--s-color-border-primary-hover); } }
  .s-amount__row:focus-within::after { transform: scaleX(1); }
  .s-amount--center .s-amount__row { flex-direction: column; align-items: center; }
  .s-amount--center .s-amount__row::after { transform-origin: 50% 50%; }

  /* --- currency: a quiet Code pill, top-aligned to the figures like a superscript --- */
  .s-amount__currency {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--s-spacing-1);
    height: var(--s-amount-chip-h);
    margin-top: var(--s-spacing-3);
    padding-inline: var(--s-spacing-3);
    border: 0;
    border-radius: var(--s-radius-full);
    background: var(--_chip);
    font: var(--s-type-code-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-secondary);
    white-space: nowrap;
    transition: background-color var(--s-motion-hover), color var(--s-motion-hover);
  }
  .s-amount--md .s-amount__currency { margin-top: var(--s-spacing-2); }
  .s-amount--center .s-amount__currency { margin-top: 0; }
  button.s-amount__currency { cursor: pointer; }
  @media (hover: hover) { button.s-amount__currency:hover { background: var(--_chip-h); color: var(--s-color-content-primary); } }
  button.s-amount__currency:disabled { cursor: not-allowed; color: var(--s-color-content-primary-disabled); }
  .s-amount__currency > .s-icon { width: var(--s-glyph-14); height: var(--s-glyph-14); }

  /* --- the window clips, the stage scales (transform only, so nothing reflows) --- */
  .s-amount__window {
    position: relative;
    flex: 1;
    align-self: stretch;
    min-width: 0;
    height: var(--_line);
    overflow: hidden;
    overflow: clip;          /* not a scroll container: focusing the wide input never scrolls it */
  }
  .s-amount--center .s-amount__window { width: 100%; flex: none; }
  .s-amount__stage {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--s-amount-fit-min));
    height: 100%;
    transform: scale(var(--_fit));
    transform-origin: 0 50%;
    transition: transform var(--s-motion-expand);
  }
  .s-amount--center .s-amount__stage { left: 50%; transform: translateX(-50%) scale(var(--_fit)); transform-origin: 50% 50%; }

  .s-amount__input,
  .s-amount__figures {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-inline-start: var(--_sign, 0);
    border: 0;
    background: transparent;
    font: var(--_size);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--s-letter-spacing-display-md);
    line-height: var(--_line);
    color: var(--s-color-content-primary);
    text-align: start;
    white-space: pre;
  }
  .s-amount--center :is(.s-amount__input, .s-amount__figures) { text-align: center; }
  .s-amount[data-tone] { --_sign: var(--s-amount-sign-w); }
  .s-amount--center[data-tone] { --_sign: 0; }
  .s-amount__input { display: block; outline: none; caret-color: var(--s-color-content-primary); }
  .s-amount__input::placeholder { color: var(--s-color-content-primary-disabled); -webkit-text-fill-color: var(--s-color-content-primary-disabled); opacity: 1; }
  /* With JS the figures layer draws the value; the input keeps the caret, selection and semantics. */
  .s-amount[data-ready]:not([data-overflow]) .s-amount__input { color: transparent; -webkit-text-fill-color: transparent; }
  .s-amount__figures { position: absolute; inset: 0; display: none; pointer-events: none; user-select: none; }
  .s-amount[data-ready]:not([data-overflow]) .s-amount__figures { display: block; }
  .s-amount__text { position: relative; display: inline-block; }
  .s-amount__ch { display: inline-block; }
  .s-amount__ch--sep, .s-amount__ch--frac { color: var(--s-color-content-tertiary); }
  .s-amount__ch[data-new] { animation: s-amount-settle var(--s-motion-duration-base) var(--s-motion-expressive-easing) both; /* expressive: a new digit */ }
  .s-amount__sign {
    position: absolute;
    right: 100%;
    top: 0;
    padding-inline-end: var(--s-amount-sign-gap);
    color: var(--s-color-content-secondary);
  }
  .s-amount[data-tone="income"] .s-amount__sign { color: var(--s-color-content-success); }
  .s-amount .s-amount__sign--empty { color: var(--s-color-content-primary-disabled); }

  /* --- states --- */
  .s-amount:has(.s-amount__input[aria-invalid="true"]) .s-amount__row::before,
  .s-amount:has(.s-amount__input[aria-invalid="true"]) .s-amount__row::after { background: var(--s-color-border-critical); }
  .s-amount:has(.s-amount__input:disabled) .s-amount__row::before { background: var(--s-color-border-primary-disabled); }
  .s-amount:has(.s-amount__input:disabled) :is(.s-amount__input, .s-amount__figures, .s-amount__ch--sep, .s-amount__ch--frac, .s-amount__sign) {
    color: var(--s-color-content-primary-disabled);
  }
  .s-amount:has(.s-amount__input:disabled) .s-amount__row { cursor: not-allowed; }
  .s-amount:has(.s-amount__input:disabled) .s-amount__input { cursor: not-allowed; }
  .s-amount:has(.s-amount__input[readonly]) .s-amount__row::before,
  .s-amount:has(.s-amount__input[readonly]) .s-amount__row::after { display: none; }

  /* --- quick amounts: filter chips that add (or set) a figure --- */
  .s-amount__quick { display: flex; flex-wrap: wrap; gap: var(--s-spacing-2); }
  .s-amount--center .s-amount__quick { justify-content: center; }

  /* --- compact keypad (phones): 3 × 4, 56 keys, Code figures, ghost states --- */
  .s-amount__keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-spacing-1);
  }
  .s-amount__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--s-amount-key-h);
    border: 0;
    border-radius: var(--s-radius-8);
    background: transparent;
    font: var(--s-type-code-key);
    color: var(--s-color-content-primary);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-amount__key:hover { background: var(--s-color-fill-primary-variant-hover); } }
  .s-amount__key:active { background: var(--s-color-fill-primary-variant-active); }
  @media (hover: hover) { :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) .s-amount__key:hover { background: var(--s-color-fill-raised-ghost-hover); } }
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) .s-amount__key:active { background: var(--s-color-fill-raised-ghost-active); }
  .s-amount__key:disabled { color: var(--s-color-content-primary-disabled); background: transparent; cursor: not-allowed; }
  .s-amount__key > .s-icon { width: var(--s-glyph-24); height: var(--s-glyph-24); color: var(--s-color-content-secondary); }

  @keyframes s-amount-settle {
    from { opacity: 0; transform: translateY(var(--s-amount-rise)); }
    to { opacity: 1; transform: none; }
  }
}

@media (pointer: coarse) {
  @layer s.components {
    .s-amount__currency::after { content: ""; position: absolute; inset: calc((var(--s-size-target-min) - var(--s-amount-chip-h)) / -2) 0; }
  }
}

/* Reduced motion: nothing moves (the line and the scale snap, digits appear in place). */
@media (prefers-reduced-motion: reduce) {
  @layer s.components {
    .s-amount__row::after, .s-amount__stage { transition: none; }
    .s-amount__ch[data-new] { animation: none; }
  }
}

/* ---- 60-data.css ---- */
/* ===== A15 Table  s-table  (guide-markdown.tsx:71-95) + B7 extensions =====================
   <div class="s-table"><table>…</table></div>. No zebra, no outer border, no header fill. */
@layer s.components {
  .s-table { overflow-x: auto; }
  .s-table > table { width: 100%; border-collapse: collapse; text-align: left; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); }
  .s-table :is(th, td) {
    padding: var(--s-table-pad-y) var(--s-table-pad-x) var(--s-table-pad-y) 0;
    border-bottom: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    vertical-align: top;
  }
  .s-table th { font-weight: var(--s-font-weight-medium); color: var(--s-color-content-primary); }
  .s-table td { color: var(--s-color-content-secondary); }
  .s-table--dense > table { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-table--dense :is(th, td) { padding: var(--s-table-pad-y-dense) var(--s-table-pad-x) var(--s-table-pad-y-dense) 0; }
  .s-table--rows :is(th, td):first-child { padding-left: var(--s-row-pad-x); }
  /* numeric + meta columns */
  .s-table .s-col-num { font-family: var(--s-font-family-code); font-variant-numeric: tabular-nums; text-align: right; color: var(--s-color-content-primary); }
  .s-table .s-col-meta { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  /* sortable header: a button, ink, trailing 16 arrow faint → ink */
  .s-table__sort { display: inline-flex; align-items: center; gap: var(--s-spacing-1); font: inherit; font-weight: inherit; color: inherit; }
  .s-table__sort > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); color: var(--s-color-content-tertiary); transition: color var(--s-motion-hover); }
  @media (hover: hover) { .s-table__sort:hover > .s-icon { color: var(--s-color-content-primary); } }
  th:not([aria-sort]) .s-table__sort > .s-icon { visibility: hidden; }
  @media (hover: hover) { th:not([aria-sort]) .s-table__sort:hover > .s-icon { visibility: visible; } }
  /* sticky header on the P1 canvas */
  .s-table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--s-color-background); background-image: linear-gradient(var(--s-color-fill-primary-disabled), var(--s-color-fill-primary-disabled)); }
  /* clickable rows: a real link in the first cell, stretched over the row */
  .s-table tr:has(.s-table__link) { position: relative; transition: background-color var(--s-motion-hover); }
  @media (hover: hover) { .s-table tr:has(.s-table__link):hover { background: var(--s-color-fill-primary-variant-hover); } }
  .s-table__link { color: inherit; outline-offset: calc(var(--s-focus-ring-offset) * -1); }
  .s-table__link::after { content: ""; position: absolute; inset: 0; }
  .s-table__link:focus-visible { outline: none; }
  .s-table__link:focus-visible::after { outline: var(--s-focus-ring-width) solid var(--s-color-border-focus); outline-offset: calc(var(--s-focus-ring-offset) * -1); }
  .s-table tr[aria-selected="true"] { background: var(--s-color-fill-primary-variant-active); }
  .s-table__empty { padding-block: var(--s-spacing-7); }
}

/* ===== A16 Data rows ====================================================================== */
@layer s.components {
  /* Experience row (experience-list.tsx) */
  .s-exp { display: flex; flex-direction: column; gap: var(--s-spacing-4); margin: 0; padding: 0; list-style: none; }
  .s-exp__row { display: flex; align-items: center; gap: var(--s-space-10); }
  .s-exp__year { flex-shrink: 0; width: var(--s-spacing-12); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-exp__name { flex-shrink: 0; width: var(--s-exp-name-w); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); transition: color var(--s-motion-hover); }
  @media (hover: hover) { a.s-exp__name:hover { color: var(--s-color-content-brand); } }
  .s-exp__role { flex: 1; font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); text-align: right; }
  /* Stat strip (pixel-icons/page.tsx:62-66) */
  .s-stats { display: flex; flex-wrap: wrap; gap: var(--s-spacing-3) var(--s-spacing-9); margin: 0; font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-stats > div { display: flex; gap: var(--s-spacing-2); }
  .s-stats dt { color: var(--s-color-content-tertiary); }
  .s-stats dd { margin: 0; color: var(--s-color-content-primary); }
  /* FAQ (pixel-icons/page.tsx:104-108) */
  .s-faq { display: grid; gap: var(--s-spacing-6) var(--s-spacing-11); margin: 0; }
  @media (min-width: 768px) { .s-faq { grid-template-columns: 1fr 1fr; } }
  .s-faq dt { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-faq dd { margin: var(--s-spacing-1) 0 0; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
}

/* ===== A18 Inline code, code block ========================================================= */
@layer s.components {
  .s-code, .s-prose code {
    padding-inline: var(--s-spacing-1);
    border-radius: var(--s-radius-7);
    background: var(--s-color-fill-secondary);
    font-family: var(--s-font-family-code);
    font-size: 0.9em;
    color: var(--s-color-content-primary);
  }
  .s-codeblock {
    margin: 0;
    overflow-x: auto;
    padding: var(--s-spacing-5);
    border-radius: var(--s-radius-10);
    background: var(--s-color-fill-secondary);
    font: var(--s-type-code-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
  }
  .s-prose { display: flex; flex-direction: column; gap: var(--s-spacing-5); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
  .s-prose strong { font-weight: var(--s-font-weight-medium); color: var(--s-color-content-primary); }
  .s-prose :is(ul, ol) { display: flex; flex-direction: column; gap: var(--s-spacing-3); margin: 0; padding-left: var(--s-spacing-6); }
  .s-prose li::marker { color: var(--s-color-content-tertiary); }
}

/* ===== A19 / B18 Skeleton, empty, error, spinner, progress ================================== */
@layer s.components {
  .s-skeleton {
    display: block;
    border-radius: var(--s-radius-10);
    background: var(--s-color-surface-skeleton);
    animation: s-pulse var(--s-motion-duration-ambient) var(--s-motion-easing-standard) infinite;
  }
  .s-skeleton--line { height: var(--s-spacing-4); border-radius: var(--s-radius-2); }
  .s-skeleton--row { height: var(--s-spacing-5); border-radius: var(--s-radius-2); }
  .s-skeleton--media { width: 100%; aspect-ratio: 16 / 9; }
  .s-skeleton--circle { border-radius: var(--s-radius-full); }
  .s-skeleton-stack { display: flex; flex-direction: column; gap: var(--s-spacing-3); }
  .s-skeleton-stack > :nth-child(3n + 2) { width: 80%; }
  .s-skeleton-stack > :nth-child(3n) { width: 60%; }

  /* list-level empty + inline error: Code body-sm, one sentence plus the fix */
  .s-empty-line { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-error-line { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-critical); }
  .s-end-line { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); text-align: center; }
  /* screen-level empty: centred, gap 12, px48; 24 glyph; one body-xl muted line; one action */
  .s-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-spacing-4);
    padding: var(--s-spacing-6) var(--s-spacing-12);
    text-align: center;
  }
  .s-empty > .s-icon { color: var(--s-color-content-tertiary); }
  .s-empty__line { font: var(--s-type-body-xl); color: var(--s-color-content-secondary); }
  /* v2.2: optional one-sentence help under the line (how to fill it), body-md faint, copy width.
     Flex, never Code: it is prose, not data. */
  .s-empty__help { max-width: var(--site-copy-max); font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-tertiary); }
  .s-empty > .s-btn { margin-top: var(--s-spacing-1); }

  /* spinner: loader-circle 20, faint, 720ms linear; stops under reduced motion (the label carries it) */
  .s-spinner { display: inline-flex; align-items: center; gap: var(--s-spacing-3); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-spinner > .s-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); animation: s-spin var(--s-motion-duration-slower) var(--s-motion-easing-linear) infinite; }

  /* progress: 4 track pill fill-secondary, ink bar (brand only as the one red moment), 250ms */
  .s-progress { display: flex; flex-direction: column; gap: var(--s-spacing-2); }
  .s-progress__track { position: relative; height: var(--s-progress-h); overflow: hidden; border-radius: var(--s-radius-full); background: var(--s-color-fill-secondary); }
  .s-progress__bar {
    display: block;
    width: var(--s-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--s-color-fill-inverse);
    transition: width var(--s-motion-expand);
  }
  .s-progress--brand .s-progress__bar { background: var(--s-color-fill-brand); }
  .s-progress__label { display: flex; justify-content: space-between; font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); font-variant-numeric: tabular-nums; color: var(--s-color-content-secondary); }
}

/* ===== A22 Avatar  s-avatar  (Figma 116:593 geometry; colours mapped, assumption 3) ======== */
@layer s.components {
  .s-avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s-avatar-lg);
    height: var(--s-avatar-lg);
    overflow: hidden;
    border-radius: var(--s-radius-full);
    background: var(--s-color-fill-secondary);
    font: var(--s-type-body-md);
    font-weight: var(--s-font-weight-medium);
    color: var(--s-color-content-secondary);
  }
  .s-avatar > .s-icon { width: var(--s-glyph-24); height: var(--s-glyph-24); }
  .s-avatar--me { background: var(--s-color-surface-brand); color: var(--s-color-content-brand); }
  .s-avatar--md { width: var(--s-avatar-md); height: var(--s-avatar-md); font: var(--s-type-body-sm); font-weight: var(--s-font-weight-medium); }
  .s-avatar--md > .s-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); }
  .s-avatar--sm { width: var(--s-avatar-sm); height: var(--s-avatar-sm); font: var(--s-type-label-xs); font-weight: var(--s-font-weight-medium); }
  .s-avatar--sm > .s-icon { width: var(--s-glyph-14); height: var(--s-glyph-14); }
  .s-avatar--xs { width: var(--s-avatar-xs); height: var(--s-avatar-xs); font: var(--s-type-label-xs); font-weight: var(--s-font-weight-medium); }   /* v2.5 */
  .s-avatar--xs > .s-icon { width: var(--s-glyph-12); height: var(--s-glyph-12); }
  .s-avatar > img { width: 100%; height: 100%; object-fit: cover; }
  /* inset ring so a white photo never bleeds into a white P0 */
  .s-avatar:has(> img)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--s-color-border-primary); }
}

/* ===== B17 Badge, count, dots  s-badge ======================================================
   Never below 11px, never caps, never 500. */
@layer s.components {
  .s-count { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-badge {
    display: inline-flex;
    align-items: center;
    height: var(--s-badge-h);
    padding-inline: var(--s-spacing-3);
    border-radius: var(--s-radius-full);
    background: var(--s-color-fill-secondary);
    font: var(--s-type-code-label-xs);
    letter-spacing: var(--s-letter-spacing-label-xs);
    color: var(--s-color-content-secondary);
    white-space: nowrap;
  }
  .s-badge--brand { background: var(--s-color-fill-brand-secondary); color: var(--s-color-content-brand); }
  .s-badge--info { background: var(--s-color-surface-info); color: var(--s-color-content-info); }
  .s-badge--success { background: var(--s-color-surface-success); color: var(--s-color-content-success); }
  .s-badge--warning { background: var(--s-color-surface-warning); color: var(--s-color-content-warning); }
  .s-badge--critical { background: var(--s-color-surface-critical); color: var(--s-color-content-critical); }
  .s-dot { display: inline-block; flex-shrink: 0; width: var(--s-dot-size); height: var(--s-dot-size); border-radius: var(--s-radius-full); background: var(--s-color-content-tertiary); }
  .s-dot--notify { background: var(--s-color-fill-brand); box-shadow: 0 0 0 var(--s-track-pad) var(--s-color-background); }
  .s-dot--success { background: var(--s-color-fill-success); }
  .s-dot--warning { background: var(--s-color-fill-warning); }
  .s-dot--critical { background: var(--s-color-fill-critical); }
  .s-dot-anchor { position: relative; display: inline-flex; }
  .s-dot-anchor > .s-dot--notify { position: absolute; top: 0; right: 0; }
  .s-status { display: inline-flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
}

/* ===== B21 KPI + charts  s-kpi / s-chart =====================================================
   Ink first; comparison = faint; the one highlight = brand. No gridlines, no load motion. */
@layer s.components {
  .s-kpi { display: flex; flex-direction: column; gap: var(--s-spacing-1); }
  .s-kpi__label { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-kpi__value { font: var(--s-type-code-heading-xl); font-variant-numeric: tabular-nums; color: var(--s-color-content-primary); }
  .s-kpi__delta { display: inline-flex; align-items: center; gap: var(--s-spacing-1); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); font-variant-numeric: tabular-nums; color: var(--s-color-content-tertiary); }
  .s-kpi__delta > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); }
  .s-kpi__delta--up { color: var(--s-color-content-success); }
  .s-kpi__delta--down { color: var(--s-color-content-critical); }
  .s-kpis { display: grid; gap: var(--s-spacing-5); grid-template-columns: repeat(auto-fit, minmax(var(--s-menu-min-w), 1fr)); }

  .s-chart { position: relative; display: block; width: 100%; color: var(--s-color-data-1); }
  .s-chart svg { overflow: visible; }
  .s-chart text, .s-chart__axis { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); fill: var(--s-color-content-tertiary); color: var(--s-color-content-tertiary); }
  .s-chart__baseline { stroke: var(--s-color-data-baseline); stroke-width: var(--s-stroke-width-2); shape-rendering: crispEdges; }
  .s-chart__bar { fill: currentColor; transition: fill var(--s-motion-hover); }
  .s-chart__line { fill: none; stroke: currentColor; stroke-width: var(--s-stroke-width-4); stroke-linejoin: round; stroke-linecap: round; }
  .s-chart__area { fill: currentColor; fill-opacity: var(--s-data-area-opacity); stroke: none; }
  .s-chart__dot { fill: var(--s-color-background); stroke: currentColor; stroke-width: var(--s-stroke-width-4); }
  .s-series-1 { color: var(--s-color-data-1); }
  .s-series-2 { color: var(--s-color-data-2); }
  .s-series-3 { color: var(--s-color-data-3); }
  .s-series-4 { color: var(--s-color-data-4); }
  .s-series-5 { color: var(--s-color-data-5); }
  .s-series-6 { color: var(--s-color-data-6); }
  .s-series-muted { color: var(--s-color-data-muted); }
  .s-series-highlight { color: var(--s-color-data-highlight); }
  .s-chart__bar[aria-selected="true"] { fill: var(--s-color-data-highlight); }
  @media (hover: hover) { .s-chart__bar:hover { fill: var(--s-color-data-highlight); } }
  .s-legend { display: flex; flex-wrap: wrap; gap: var(--s-spacing-2) var(--s-spacing-5); margin: 0; padding: 0; list-style: none; font: var(--s-type-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-secondary); }
  .s-legend > li { display: inline-flex; align-items: center; gap: var(--s-spacing-2); }
  .s-legend > li::before { content: ""; width: var(--s-dot-size); height: var(--s-dot-size); border-radius: var(--s-radius-full); background: currentColor; }
  .s-legend > li > span { color: var(--s-color-content-secondary); }
  /* chart tooltip = A10 surface, auto width, p 8/12 */
  .s-chart-tip {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    padding: var(--s-spacing-3) var(--s-spacing-4);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-8);
    background: var(--s-color-surface-elevated);
    pointer-events: none;
  }
  .s-chart-tip__label { font: var(--s-type-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-chart-tip__value { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); font-variant-numeric: tabular-nums; color: var(--s-color-content-primary); }
  /* v2.1: placed by components.js (data-s-chart-value on a mark), fixed above the mark, fades in. */
  .s-chart-tip--float {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--s-layer-tooltip);
    opacity: 0;
    transition: opacity var(--s-motion-tooltip);
  }
  .s-chart-tip--float[data-open] { opacity: 1; }
  .s-chart [data-s-chart-value]:focus-visible { outline: var(--s-focus-ring-width) solid var(--s-color-border-focus); outline-offset: var(--s-focus-ring-offset); }
}

/* ===== B22 Pagination  s-pager ================================================================ */
@layer s.components {
  .s-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-spacing-4); }
  .s-pager__count { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-pager__pages { display: flex; align-items: center; gap: var(--s-spacing-1); }
  .s-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-control-h-sm);
    height: var(--s-control-h-sm);
    border-radius: var(--s-radius-7);
    font: var(--s-type-code-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-pager__page:hover { background: var(--s-color-fill-primary-variant-hover); } }
  .s-pager__page:active, .s-pager__page[aria-current="page"] { background: var(--s-color-fill-primary-variant-active); }
}

/* ---- 70-app.css ---- */
/* ===== B9 List row  s-row ====================================================================
   [lead: 16–20 icon | 32 avatar | 40 thumb r12] [title + subtitle] [meta | actions]
   Sizes: md 40 r14 (default) · lg 56 r16 · sm 36 r12. Hover = ghost; current/selected = ghost pressed. */
@layer s.components {
  .s-rows { display: flex; flex-direction: column; gap: var(--s-track-pad); margin: 0; padding: 0; list-style: none; }
  /* v2.4.3: rows never shrink below their content. In a scrolling or height-limited list, flex-shrink squeezed
     multi-line rows down to their min-height and the text overflowed onto the next row. */
  .s-rows > * { flex-shrink: 0; }
  .s-rows + .s-rows { margin-top: var(--s-spacing-5); }
  .s-group-label { padding: var(--s-label-pad-y) var(--s-label-pad-x); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-row-gap);
    width: 100%;
    min-height: var(--s-row-h-md);
    padding: var(--s-row-pad-y) var(--s-row-pad-x);
    border-radius: var(--s-row-radius-md);
    background: transparent;
    font: var(--s-type-body-md);
    letter-spacing: var(--s-letter-spacing-body-md);
    color: var(--s-color-content-primary);
    text-align: left;
    text-decoration: none;
    outline-offset: calc(var(--s-focus-ring-offset) * -1);
    transition: background-color var(--s-motion-hover), color var(--s-motion-hover);
  }
  :is(a, button).s-row, .s-row--interactive { cursor: pointer; }
  @media (hover: hover) { :is(a, button).s-row:hover, .s-row--interactive:hover { background: var(--s-color-fill-primary-variant-hover); color: var(--s-color-content-primary); } }
  .s-row[aria-current="page"], .s-row[aria-selected="true"], :is(a, button).s-row:active { background: var(--s-color-fill-primary-variant-active); color: var(--s-color-content-primary); }
  /* v2.4: rows inside a raised parent (a sheet or dialog list) step above it, as buttons do. */
  @media (hover: hover) { :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) :is(a, button).s-row:hover, :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) .s-row--interactive:hover { background: var(--s-color-fill-raised-ghost-hover); } }
  :where(.s-raised, .s-raised-scope, .s-surface, .s-dialog, .s-sheet, .s-panel, .s-menu, .s-toast, .s-tile, .s-tooltip) :is(.s-row[aria-current="page"], .s-row[aria-selected="true"], :is(a, button).s-row:active) { background: var(--s-color-fill-raised-ghost-active); }
  .s-row:disabled, .s-row[aria-disabled="true"] { background: transparent; color: var(--s-color-content-primary-disabled); cursor: not-allowed; }
  .s-row--nav { color: var(--s-color-content-secondary); }        /* navigational rows rest muted */
  .s-row--sm { min-height: var(--s-row-h-sm); border-radius: var(--s-row-radius-sm); font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); }
  .s-row--lg { min-height: var(--s-row-h-lg); border-radius: var(--s-row-radius-lg); }
  .s-card--list .s-row { border-radius: var(--s-radius-4); }      /* concentric: 20 − 12 */
  .s-row > .s-icon { width: var(--s-row-icon); height: var(--s-row-icon); color: currentColor; }
  .s-row--sm > .s-icon { width: var(--s-glyph-16); height: var(--s-glyph-16); }
  .s-row__thumb { flex-shrink: 0; width: var(--s-thumb-size); height: var(--s-thumb-size); overflow: hidden; border-radius: var(--s-radius-6); background: var(--s-color-surface-secondary); object-fit: cover; }
  .s-row__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .s-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s-row__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-row__time { flex-shrink: 0; font: var(--s-type-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-row__meta { flex-shrink: 0; font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-row > .s-row__chevron { width: var(--s-glyph-16); height: var(--s-glyph-16); color: var(--s-color-content-tertiary); }
  .s-row__actions { display: flex; flex-shrink: 0; align-items: center; margin-block: calc(var(--s-row-pad-y) * -1); margin-right: calc(var(--s-row-pad-y) * -1); opacity: 0; transition: opacity var(--s-motion-reveal); }
  .s-row:focus-within .s-row__actions, .s-row__actions:focus-within { opacity: 1; }
  @media (hover: hover) { .s-row:hover .s-row__actions { opacity: 1; } }
  @media (max-width: 767px), (hover: none) { .s-row__actions { opacity: 1; } }
  /* Rows divided inside a P2 card */
  .s-rows--divided { gap: 0; }
  .s-rows--divided > * + * { border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary); }
  .s-rows--divided .s-row { border-radius: 0; }
  /* row wrapper that holds a link row + sibling actions without nesting interactive elements */
  .s-row-item { position: relative; display: flex; align-items: center; }
  .s-row-item > .s-row { flex: 1; min-width: 0; }
  .s-row-item > .s-row__actions { position: absolute; right: var(--s-spacing-3); margin: 0; }
  .s-row-item:focus-within > .s-row__actions { opacity: 1; }
  @media (hover: hover) { .s-row-item:hover > .s-row__actions { opacity: 1; } }
}

/* ===== B10 Sidebar  s-sidebar =================================================================
   ≥1025: fixed 280 column on P0, no border (the P1 main makes the edge). <1025: becomes the
   left drawer (data-open) with the A5 motion and backdrop. Red = where you are (destination),
   fill = what is open (content row). */
@layer s.components {
  .s-app { display: flex; min-height: 100dvh; background: var(--s-color-background); }
  .s-app__main { display: flex; flex: 1; flex-direction: column; min-width: 0; background: var(--s-color-fill-primary-disabled); }
  .s-sidebar {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: var(--s-sidebar-gap);
    width: var(--s-sidebar-w);
    height: 100dvh;
    overflow-y: auto;
    padding: var(--s-sidebar-pad);
    background: var(--s-color-background);
  }
  .s-sidebar--sticky { position: sticky; top: 0; }
  .s-sidebar__head { display: flex; align-items: center; justify-content: space-between; height: var(--s-appbar-h); margin-top: calc(var(--s-sidebar-pad) * -1); padding-inline: var(--s-row-pad-x); }
  .s-sidebar__brand { display: flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-md); font-weight: var(--s-font-weight-medium); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-sidebar__logo { width: var(--s-logo-size); height: var(--s-logo-size); flex-shrink: 0; }
  .s-sidebar__section { display: flex; flex-direction: column; gap: var(--s-track-pad); }
  .s-sidebar__label { padding: var(--s-label-pad-y) var(--s-label-pad-x); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-sidebar__foot { display: flex; align-items: center; gap: var(--s-spacing-1); margin-top: auto; }
  .s-sidebar__foot > .s-row { flex: 1; min-width: 0; }
  /* destination rows: current in brand, no fill */
  .s-row--dest[aria-current="page"] { background: transparent; color: var(--s-color-content-brand); }
  @media (hover: hover) { .s-row--dest[aria-current="page"]:hover { background: var(--s-color-fill-primary-variant-hover); } }
  /* collapsed rail: 64 wide, ghost md icon buttons, gap 4 */
  .s-sidebar--rail { align-items: center; gap: var(--s-spacing-1); width: var(--s-rail-w); padding-inline: var(--s-sidebar-pad); }
  .s-sidebar--rail .s-sidebar__head { justify-content: center; padding: 0; }
  @media (max-width: 1024.98px) {
    .s-sidebar:not(.s-sidebar--static) {
      position: fixed;
      inset-block: 0;
      left: 0;
      z-index: var(--s-layer-modal);
      width: var(--s-drawer-w-menu);
      max-width: calc(100% - var(--s-drawer-gap));
      height: auto;
      background: var(--s-color-fill-secondary-variant);
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform var(--s-motion-drawer-out), visibility var(--s-motion-drawer-out);
    }
    .s-sidebar:not(.s-sidebar--static)[data-open] { transform: none; visibility: visible; transition-timing-function: var(--s-motion-drawer-easing); }
  }
}

/* ===== B11 Tree / file list  s-tree ===========================================================
   role="tree" > li role="treeitem" aria-level aria-expanded > .s-tree__row. Rows 36, r12, indent 16
   per level, icons faint (never brand), focus ring inset. */
@layer s.components {
  .s-tree, .s-tree [role="group"] { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
  .s-tree [role="treeitem"] { outline: none; }
  .s-tree__row {
    display: flex;
    align-items: center;
    gap: var(--s-spacing-3);
    min-height: var(--s-row-h-sm);
    padding: 0 var(--s-spacing-3) 0 calc(var(--s-spacing-3) + (var(--s-level, 1) - 1) * var(--s-spacing-5));
    border-radius: var(--s-radius-6);
    font: var(--s-type-body-sm);
    letter-spacing: var(--s-letter-spacing-body-sm);
    color: var(--s-color-content-primary);
    cursor: pointer;
    transition: background-color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-tree__row:hover { background: var(--s-color-fill-primary-variant-hover); } }
  .s-tree [role="treeitem"][aria-selected="true"] > .s-tree__row { background: var(--s-color-fill-primary-variant-active); }
  .s-tree [role="treeitem"]:focus-visible > .s-tree__row { outline: var(--s-focus-ring-width) solid var(--s-color-border-focus); outline-offset: calc(var(--s-focus-ring-offset) * -1); }
  .s-tree [aria-level="2"] { --s-level: 2; }
  .s-tree [aria-level="3"] { --s-level: 3; }
  .s-tree [aria-level="4"] { --s-level: 4; }
  .s-tree [aria-level="5"] { --s-level: 5; }
  .s-tree [aria-level="6"] { --s-level: 6; }
  .s-tree [aria-level="7"] { --s-level: 7; }
  .s-tree [aria-level="8"] { --s-level: 8; }
  .s-tree__chevron { width: var(--s-glyph-16); height: var(--s-glyph-16); color: var(--s-color-content-tertiary); transition: transform var(--s-motion-hover); }
  .s-tree [aria-expanded="true"] > .s-tree__row > .s-tree__chevron { transform: rotate(90deg); }
  .s-tree [aria-expanded="false"] > [role="group"] { display: none; }
  .s-tree__spacer { flex-shrink: 0; width: var(--s-glyph-16); }
  .s-tree__icon { width: var(--s-glyph-16); height: var(--s-glyph-16); color: var(--s-color-content-tertiary); }
  .s-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s-tree__meta { flex-shrink: 0; font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-tertiary); }
  .s-tree__actions { display: flex; margin-right: calc(var(--s-spacing-3) * -1); opacity: 0; transition: opacity var(--s-motion-reveal); }
  .s-tree__row:focus-within .s-tree__actions { opacity: 1; }
  @media (hover: hover) { .s-tree__row:hover .s-tree__actions { opacity: 1; } }
  @media (max-width: 767px), (hover: none) { .s-tree__actions { opacity: 1; } }
  .s-tree__row[data-drop] { background: var(--s-color-fill-brand-secondary); box-shadow: inset 0 0 0 var(--s-stroke-width-2) var(--s-color-border-brand); }
  .s-diff-add { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-success); }
  .s-diff-del { font: var(--s-type-code-label-xs); letter-spacing: var(--s-letter-spacing-label-xs); color: var(--s-color-content-critical); }
  .s-delta-good { color: var(--s-color-content-success); }
  .s-delta-bad { color: var(--s-color-content-critical); }
  /* path bar: Code body-sm faint crumbs, p 8/12, rule below inside the panel */
  .s-pathbar { padding: var(--s-spacing-3) var(--s-spacing-4); border-bottom: var(--s-stroke-width-2) solid var(--s-color-border-primary); }
}

/* ===== B13 App bar  s-appbar  (tool apps; marketing keeps s-header) ============================
   64, P0, no border, no blur. Left: 32 logo + name 500, or a page title + Code meta.
   Right: ghost sm icon actions gap 8 + at most one labelled md button (the red one). */
@layer s.components {
  .s-appbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-spacing-4);
    height: var(--s-appbar-h);
    padding-inline: var(--s-appbar-pad-x);
    background: var(--s-color-background);
  }
  @media (min-width: 768px) { .s-appbar { padding-inline: var(--s-appbar-pad-x-wide); } }
  .s-appbar--sticky { position: sticky; top: 0; z-index: var(--s-layer-sticky); }
  .s-appbar__start { display: flex; align-items: center; gap: var(--s-spacing-3); min-width: 0; }
  .s-appbar__brand { display: flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-md); font-weight: var(--s-font-weight-medium); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-appbar__logo { width: var(--s-logo-size); height: var(--s-logo-size); flex-shrink: 0; }
  .s-appbar__title { display: flex; align-items: baseline; gap: var(--s-spacing-2); min-width: 0; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-appbar__meta { font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-appbar__end { display: flex; align-items: center; gap: var(--s-spacing-3); }
  @media (min-width: 1025px) { .s-appbar__menu { display: none; } }
}

/* ===== B23 Tab bar  s-tabbar  (mobile apps) ====================================================
   64 + safe area, P0, top hairline (its edge against scrolling content). Current = ink, never red. */
@layer s.components {
  .s-tabbar {
    position: sticky;
    bottom: 0;
    z-index: var(--s-layer-sticky);
    display: flex;
    height: calc(var(--s-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    background: var(--s-color-background);
  }
  .s-tabbar__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    font: var(--s-type-label-xs);
    letter-spacing: var(--s-letter-spacing-label-xs);
    color: var(--s-color-content-tertiary);
    outline-offset: calc(var(--s-focus-ring-offset) * -1);
    transition: color var(--s-motion-hover);
  }
  @media (hover: hover) { .s-tabbar__item:hover { color: var(--s-color-content-secondary); } }
  .s-tabbar__item[aria-current="page"] { color: var(--s-color-content-primary); }
  .s-tabbar__icon { display: flex; align-items: center; justify-content: center; width: var(--s-control-h-md); height: var(--s-spacing-9); border-radius: var(--s-radius-full); transition: background-color var(--s-motion-hover); }
  .s-tabbar__item:active .s-tabbar__icon { background: var(--s-color-fill-primary-variant-active); }
}

/* ===== B24 Toolbar  s-toolbar ==================================================================
   Composer geometry: pill, p4, gap 2; P3 + hairline + elevation-md. No glass. */
@layer s.components {
  .s-toolbar {
    display: inline-flex;
    align-items: center;
    gap: var(--s-track-pad);
    padding: var(--s-spacing-1);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-radius-full);
    background: var(--s-color-surface-elevated);
    box-shadow: var(--s-elevation-md);
  }
  .s-toolbar > .s-btn { border-radius: var(--s-radius-full); }
  .s-toolbar__sep { flex-shrink: 0; width: var(--s-stroke-width-2); height: var(--s-glyph-20); margin-inline: var(--s-spacing-1); background: var(--s-color-border-primary); }
  .s-toolbar__readout { min-width: var(--s-control-h-lg); padding-inline: var(--s-spacing-3); font: var(--s-type-code-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); font-variant-numeric: tabular-nums; color: var(--s-color-content-secondary); text-align: center; }
}

/* ===== B25 FAB  s-fab  (Ledger only: one-handed "log" on Android) =============================== */
@layer s.components {
  .s-btn.s-fab {
    --_icon: var(--s-glyph-24);
    position: fixed;
    right: var(--s-spacing-5);
    bottom: calc(var(--s-spacing-5) + var(--s-fab-offset, 0px));
    z-index: var(--s-layer-sticky);
    gap: 0;
    height: var(--s-fab-h);
    padding: 0 var(--s-spacing-6);
    border-radius: var(--s-radius-full);
    box-shadow: var(--s-elevation-lg);
  }
  .s-btn.s-fab:active { box-shadow: var(--s-elevation-lg); }
  @media (hover: hover) { .s-btn.s-fab:hover { box-shadow: var(--s-elevation-lg); } }
  .s-btn.s-fab--static { position: static; }
}

/* ===== B19 Settings  s-settings ==================================================================
   P1 main; column max 720 gap 32; each group a P2 card p24 gap16; rows divided by hairlines. */
@layer s.components {
  .s-settings { display: flex; flex-direction: column; gap: var(--s-spacing-9); width: 100%; max-width: var(--site-article-max); margin-inline: auto; }
  .s-settings__group {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-5);
    padding: var(--s-card-pad);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-surface-radius);
  }
  .s-settings__head { display: flex; flex-direction: column; gap: var(--s-spacing-1); }
  .s-settings__title { font: var(--s-type-body-xl); color: var(--s-color-content-primary); }
  .s-settings__desc { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-secondary); }
  .s-setting { display: grid; gap: var(--s-spacing-3); align-items: center; }
  .s-settings__group > .s-setting + .s-setting { padding-top: var(--s-spacing-5); border-top: var(--s-stroke-width-2) solid var(--s-color-border-primary); }
  @media (min-width: 768px) { .s-setting { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-spacing-5); } }
  .s-setting--field { align-items: start; }
  @media (min-width: 768px) { .s-setting--field { grid-template-columns: var(--s-settings-label-w) minmax(0, 1fr); } }
  .s-setting--field .s-setting__control { justify-content: stretch; }
  .s-setting--field .s-setting__control > * { flex: 1; }
  .s-setting__label { display: flex; flex-direction: column; gap: 0; font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-setting__help { font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-spacing-3); min-width: 0; }
  @media (max-width: 767px) { .s-setting__control { justify-content: flex-start; } }
}

/* ===== B20 Sign-in  s-auth ========================================================================
   P1 full height, centred; a P2 card 400 wide, p 32/24/24, r20, gap 16, no shadow. */
@layer s.components {
  .s-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--s-spacing-4);
    background: var(--s-color-background);
    background-image: linear-gradient(var(--s-color-fill-primary-disabled), var(--s-color-fill-primary-disabled));
  }
  .s-auth--inline { min-height: 0; }
  .s-auth__card {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing-5);
    width: var(--s-auth-w);
    max-width: 100%;
    padding: var(--s-spacing-9) var(--s-card-pad) var(--s-card-pad);
    border: var(--s-stroke-width-2) solid var(--s-color-border-primary);
    border-radius: var(--s-surface-radius);
  }
  .s-auth__brand { display: flex; align-items: center; gap: var(--s-spacing-2); font: var(--s-type-body-md); font-weight: var(--s-font-weight-medium); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-primary); }
  .s-auth__logo { width: var(--s-avatar-lg); height: var(--s-avatar-lg); flex-shrink: 0; }
  .s-auth__title { font: var(--s-type-hero-sm); color: var(--s-color-content-primary); }
  .s-auth__title em { font-style: normal; color: var(--s-color-content-brand); }
  .s-auth__lede { font: var(--s-type-body-md); letter-spacing: var(--s-letter-spacing-body-md); color: var(--s-color-content-secondary); }
  .s-auth__foot { display: flex; justify-content: center; }
  .s-auth__or { display: flex; align-items: center; gap: var(--s-spacing-4); font: var(--s-type-body-sm); letter-spacing: var(--s-letter-spacing-body-sm); color: var(--s-color-content-tertiary); }
  .s-auth__or::before, .s-auth__or::after { content: ""; flex: 1; height: var(--s-stroke-width-2); background: var(--s-color-border-primary); }
}

/* ---- 90-motion.css ---- */
/* ===== Motion recipes (v2.8) ======================================================================
   One class per pattern for an app's own overlays, so nobody picks durations or curves (DESIGN.md §5).
   Add the in- class when the element appears; add the out- class to play the exit, then hide it on
   animationend (an out- class ends hidden: `forwards`, no pointer events).
     s-in--drawer-left / s-out--drawer-left     docked side panels and left drawers: translate, 420, standard in, exit out
     s-in--drawer-right / s-out--drawer-right   right drawers (the origin's menu and SaribLM panel)
     s-in--pop / s-out--pop                     menus, popovers, dropdowns: fade + scale 0.95 in, fade out, 150
     s-in--rise                                 a message, a toast or a new row arriving: fade + 8px rise, 150
     s-in--fade / s-out--fade                   anything that only fades (tooltip-like), 150
   Reduced motion: every in- becomes a plain fade in, every out- a plain fade out (block below). */
@layer s.utilities {
  .s-in--drawer-left { animation: s-slide-in-left var(--s-motion-drawer); }
  .s-out--drawer-left { animation: s-slide-out-left var(--s-motion-drawer-out) forwards; pointer-events: none; }
  .s-in--drawer-right { animation: s-slide-in-right var(--s-motion-drawer); }
  .s-out--drawer-right { animation: s-slide-out-right var(--s-motion-drawer-out) forwards; pointer-events: none; }
  .s-in--pop { animation: s-pop-in var(--s-motion-popover); }
  .s-out--pop { animation: s-fade-out var(--s-motion-popover-out) forwards; pointer-events: none; }
  .s-in--rise { animation: s-message-in var(--s-motion-arrival); }
  .s-in--fade { animation: s-fade-in var(--s-motion-tooltip); }
  .s-out--fade { animation: s-fade-out var(--s-motion-tooltip) forwards; pointer-events: none; }
}

/* ===== Reduced motion (v2.1) ====================================================================
   Under prefers-reduced-motion, movement and scale stop but opacity fades stay: a fade is not motion
   (WCAG 2.3.3), and it keeps arrivals and state changes readable. Matches syrup's MOTION.md.
   - Transitions keep only colour, opacity and visibility, at --s-motion-duration-fade (the duration
     tokens themselves are 0 under reduce, from the origin).
   - Arrivals (message, menu, dialog, sheet, toast, quote pill, theme icon) become a plain fade.
   - Drawers and the sidebar drawer fade instead of sliding.
   - Loops that move (spinner) or pulse (skeleton) stop. */
@media (prefers-reduced-motion: reduce) {
  @layer s.components {
    :where([class*="s-"]), :where([class*="s-"])::before, :where([class*="s-"])::after {
      transition-property: opacity, color, background-color, border-color, outline-color, fill, stroke, visibility !important;
      transition-duration: var(--s-motion-duration-fade) !important;
      transition-timing-function: var(--s-motion-easing-standard) !important;
      transition-delay: 0s !important;
    }
    :where(.s-msg--user, .s-chat__followups, .s-chat__followups > *, .s-menu, .s-dialog[open], .s-sheet[open], .s-toast, .s-quote-pill, .s-icon--swap),
    .s-dialog::backdrop, .s-sheet::backdrop {
      animation-name: s-fade-in !important;
      animation-duration: var(--s-motion-duration-fade) !important;
      animation-timing-function: var(--s-motion-easing-standard) !important;
      animation-delay: 0s !important;
    }
    .s-dialog--static, .s-sheet--static { animation: none !important; }
    .s-drawer, .s-sidebar:not(.s-sidebar--static) { transform: none !important; }
    .s-drawer[inert], .s-sidebar:not(.s-sidebar--static, [data-open]) { opacity: 0; }
    .s-sheet[data-closing] { transform: none; opacity: 0; }
    .s-btn__spinner, .s-spinner > .s-icon, .s-skeleton { animation: none !important; }
    /* v2.8 recipes: arrivals fade in, exits fade out, nothing travels */
    :where(.s-in--drawer-left, .s-in--drawer-right, .s-in--pop, .s-in--rise, .s-in--fade) {
      animation: s-fade-in var(--s-motion-duration-fade) var(--s-motion-easing-standard) !important;
    }
    :where(.s-out--drawer-left, .s-out--drawer-right, .s-out--pop, .s-out--fade) {
      animation: s-fade-out var(--s-motion-duration-fade) var(--s-motion-easing-standard) forwards !important;
    }
  }
}

/* ===== Touch targets (v2.1) =====================================================================
   On a coarse pointer every control clears --s-size-target-min (44). Controls that stand alone grow
   to a 44 floor (height only, so each keeps its look and radius); controls whose size is part of a
   denser pattern (segments, link buttons, message actions, tree and table affordances, v2.5 xs / 2xs
   buttons) keep their
   drawn size and get an invisible 44 hit area instead. Apps no longer add their own 44 rules. */
@media (pointer: coarse) {
  @layer s.components {
    .s-btn:not(.s-btn--link-neutral, .s-btn--link-brand, .s-btn--xs, .s-btn--2xs), .s-chip, .s-search, .s-select, .s-field--sm,
    .s-menu__item, :is(a, button).s-row, .s-row--interactive, .s-tree__row, .s-pager__page, .s-tabbar__item {
      min-height: var(--s-size-target-min);
    }
    .s-btn--icon:not(.s-btn--link-neutral, .s-btn--link-brand, .s-btn--xs, .s-btn--2xs) { min-width: var(--s-size-target-min); }
    /* v2.3: iOS zooms the page when a text field under 16px takes focus. On touch, every library
       text input reads at body-md (16); zoom stays allowed. */
    .s-field__input, .s-search, .s-select, .s-field--select > select, .s-composer--sm .s-composer__input, .s-composer__input { font-size: var(--s-input-touch-size); }
    .s-btn--link-neutral, .s-btn--link-brand, .s-seg__item, .s-msg__action, .s-swatch, .s-table__sort,
    .s-crumbs a, .s-chat__info, .s-btn--xs, .s-btn--2xs, .s-field--xs {
      position: relative;
    }
    :is(.s-btn--link-neutral, .s-btn--link-brand, .s-seg__item, .s-msg__action, .s-swatch, .s-table__sort, .s-crumbs a, .s-chat__info, .s-btn--xs, .s-btn--2xs, .s-field--xs)::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: max(100%, var(--s-size-target-min));
      height: max(100%, var(--s-size-target-min));
      transform: translate(-50%, -50%);
    }
  }
}