/* tokens/base.css */
/* ============================================================================
   JSTOV design system — tokens/base.css
   The neutral baseline. Implements the whole contract (tokens/CONTRACT.md) so
   that ANY module renders correctly with no theme file loaded.

   Load order (mandatory):  tokens/base.css → tokens/themes/<name>.css (optional)
                           → components/_base.css → components/<id>/<id>.css

   Layers in this file
     1. Skin tokens, light defaults          :root, [data-mode="light"]      (0,1,0)
     2. Structure knobs + constants           :root                            (0,1,0)
     3. Derived tokens (calc / var chains)    the RE-DERIVE HOSTS rule         (0,1,0)
     4. Dark remap                            :root[data-mode="dark"],
                                              :not(:root)[data-mode="dark"]   (0,2,0)
                                              + guarded prefers-color-scheme
     5. Policy attributes                     :root[data-x="v"],
                                              :not(:root)[data-x="v"]         (0,2,0)
        + band islands (data-band)            [data-band="v"][data-band]      (0,2,0)
     6. Reduced motion, grid-snapping (@supports round())

   Specificity ladder — why the selectors look the way they do
     • Theme LIGHT blocks are [data-theme="x"] (0,1,0) and load after this file,
       so they beat the defaults in 1–3 by source order.
     • Dark blocks (4) and policy attributes (5) are written at (0,2,0) so that
       (a) a theme's light block can never leak a colour into dark mode, and
       (b) an EXPLICIT attribute on the page beats a theme's CSS-only fallback
       for that policy (a theme's fallback is (0,1,0)).
     • Theme DARK blocks are [data-theme="x"][data-mode="dark"] (0,2,0) and load
       later, so they beat the neutral dark remap.
     • The guarded media form for a theme is :root[data-theme="x"]:not([data-mode="light"])
       (0,3,0) so it beats the neutral guarded form (0,2,0).

   Re-derive hosts
     Custom properties that contain var()/calc() are substituted on the element
     that DECLARES them, and descendants inherit the finished value. If a theme
     scoped to <section data-theme="paper"> sets --ds-space-unit:8px, a
     --ds-space-4 declared only on :root would still be 16px inside the section.
     So every derived token is declared on the HOST LIST — :root plus every
     element that can carry a theme/policy attribute, and every data-band
     island — and recomputes wherever a knob can change. Keep that list in sync
     with CONTRACT.md §3.

   Islands (batch 12, 2026-09-20)
     data-mode="dark|light" and data-band="tint|dark|accent" are section-level
     islands. Base defines all three bands theme-agnostically (§5 below); a
     theme's dark block also lists [data-theme="x"] [data-mode="dark"] and
     [data-theme="x"] [data-band="dark"] so an island inside a themed page gets
     THE THEME's dark, not this file's neutral one. The accent band reads the
     page's accent through the --ds-band-* snapshots (declared on every host
     except the accent band itself, because a custom property cannot reference
     its own redefinition on the same element). Put data-band on a <section>,
     never on the root and never on the same element as data-theme/data-mode —
     the root is where the snapshot is taken from.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. LIGHT SKIN DEFAULTS — everything that changes between light and dark
   (colours, shadows, glass, texture). [data-mode="light"] is in the list so a
   light island inside a dark page works without resetting structure.
   ------------------------------------------------------------------------- */
:root,
[data-mode="light"] {
  color-scheme: light;

  /* ---- Surfaces (§7.1) — pure-neutral ramp, surfaces lighter than ground --- */
  --ds-ground:            #fafafa;   /* page / chrome background                */
  --ds-ground-2:          #f4f4f4;   /* second chrome plane: sidebar, rail, canvas */
  --ds-surface:           #ffffff;   /* cards, inputs, popovers                 */
  --ds-surface-2:         #f3f3f3;   /* inset: nested fields, chips, wells      */
  --ds-surface-3:         #ececec;   /* deeper inset / disabled fill            */
  --ds-skeleton:          #e2e2e2;   /* loading placeholder fill — visible on ground AND surface (batch-1 finding) */
  --ds-surface-raised:    #ffffff;   /* overlay fill (popover, modal) — NEUTRAL even in themed planes */
  --ds-surface-hover:     #f0f0f0;   /* one tint step for hover                 */
  --ds-surface-pressed:   #ebebeb;   /* pressed fill — hover < pressed < selected in distance from surface (batch-12) */
  --ds-surface-selected:  #e6e6e6;   /* selected nav / row / tab (neutral)      */
  --ds-surface-inverse:   #111111;   /* dark chrome, inverse cards              */
  --ds-surface-inverse-hover: #262626; /* hover step for inverse fills (batch-2 finding) */
  --ds-surface-polarity:  1;         /* 1 = surface lighter than ground, -1 = darker (informational) */
  --ds-scrim:             rgba(0, 0, 0, .40);
  --ds-scrim-filter:      none;      /* none | blur(6px) | grayscale(.5)        */

  /* ---- Ink (§7.2) ---------------------------------------------------------- */
  --ds-ink:               #111111;   /* primary text                            */
  --ds-ink-2:             #3d3d3d;   /* secondary text, body inside cards, nav  */
  --ds-ink-muted:         #6b6b6b;   /* labels, placeholders, meta — READABLE, ≥ 4.5:1 on ground/surface/surface-2 */
  --ds-ink-faint:         #a3a3a3;   /* DECORATIVE only: disabled, indices, hints */
  --ds-ink-inverse:       #fafafa;   /* text on --ds-surface-inverse            */
  --ds-ink-on-primary:    #ffffff;   /* text on --ds-primary-fill               */
  --ds-ink-on-accent:     #ffffff;   /* text on --ds-accent fill                */
  /* --ds-ink-link and --ds-ink-code are derived (see hosts rule)               */

  /* ---- Lines (§7.3) — three hairline grades + control borders --------------- */
  --ds-rule-soft:         #ededed;   /* in-content / row dividers (1.17:1)      */
  --ds-rule-faint:        #f4f4f4;   /* table COLUMN rules, fainter than rows (batch-2 finding) */
  --ds-rule:              #e5e5e5;   /* structural hairline: dividers, card edges (≥ 1.15:1 — 1.26 here) */
  --ds-rule-strong:       #d4d4d4;   /* column / section rules, the control lip */
  --ds-border:            #d9d9d9;   /* control borders: inputs, buttons, chips */
  --ds-border-strong:     #bdbdbd;   /* darker fields when a brand wants them; hover border */
  /* --ds-ring, --ds-border-selected are derived                                */

  /* ---- Action & accent (§7.4) ---------------------------------------------- */
  --ds-primary-fill:        #111111; /* THE one filled button; ink-black here   */
  --ds-primary-fill-hover:  #2a2a2a;
  --ds-primary-border:      transparent;   /* optional 1px darker edge          */
  --ds-primary-highlight:   transparent;   /* optional 1px inner top highlight  */
  --ds-accent:              #2563eb; /* links, active state, badges, dots, CTA if hue */
  --ds-accent-hover:        #1d4fd8;
  --ds-accent-ink:          #1e40af; /* accent darkened for text on tint        */
  --ds-accent-tint:         #e9effd; /* accent at ~10% for chips / selected rows */
  --ds-accent-soft:         #93b4f5; /* ~45% — open triggers, soft borders      */
  --ds-accent-2:            #7c5ee4; /* second accent: selection | data | sub-brand | AI */
  --ds-accent-2-ink:        #5b3fc4;
  --ds-accent-2-tint:       #eee9fb;
  /* --ds-accent-line derived                                                   */

  /* ---- Semantic (§7.5) — fill / tint / ink triplets ------------------------- */
  --ds-success:       #15803d;  --ds-success-tint:  #e3f0e8;  --ds-success-ink:  #14703a;
  --ds-danger:        #dc2626;  --ds-danger-tint:   #fbe5e5;  --ds-danger-ink:   #b91c1c;
  --ds-warning:       #d97706;  --ds-warning-tint:  #faefe1;  --ds-warning-ink:  #9a4f00;
  --ds-info:          #0369a1;  --ds-info-tint:     #e1edf4;  --ds-info-ink:     #075985;
  /* same-hue hairlines for tinted callouts / validation outlines (batch-5 finding); themes may tune */
  --ds-success-line:  color-mix(in srgb, var(--ds-success) 35%, transparent);
  --ds-danger-line:   color-mix(in srgb, var(--ds-danger)  35%, transparent);
  --ds-warning-line:  color-mix(in srgb, var(--ds-warning) 35%, transparent);
  --ds-info-line:     color-mix(in srgb, var(--ds-info)    35%, transparent);
  --ds-ink-on-semantic: #ffffff;    /* text on a semantic FILL (warning fill needs ink — see CONTRACT) */
  --ds-ink-on-warning:  #1a1200;    /* text on a warning FILL — dark in BOTH modes (batch-2 finding) */
  /* --ds-live, --ds-presence, --ds-selection-graph derived                     */

  /* ---- Data (§7.6) — 8-hue categorical set, distinguishable in both modes ---
     Hue order: blue · violet · green · orange · pink · amber · teal · umber.
     Adjacent hues are ≥ 40° apart; every light mark is ≥ 3:1 on #ffffff AND on
     --ds-ground, so a 1 px chart line passes on either plane (amber was 2.98 /
     2.85 — darkened to #ad861b = 3.39 / 3.24, batch-12; its ink #7d6218 stays
     darker than the fill and 5.2:1 on the tint). Dark amber #e2c04e is 10:1
     on the dark surface — untouched. Amber is still a fill/badge hue: text
     uses its ink.                                                             */
  --ds-data-1: #2f6fed;  --ds-data-1-tint: #e2ebfc;  --ds-data-1-ink: #2455bd;
  --ds-data-2: #7c5ee4;  --ds-data-2-tint: #ede8fb;  --ds-data-2-ink: #6248b8;
  --ds-data-3: #0f9d6b;  --ds-data-3-tint: #ddf1ea;  --ds-data-3-ink: #0b7751;
  --ds-data-4: #da6c36;  --ds-data-4-tint: #fbebe4;  --ds-data-4-ink: #a6542c;   /* orange 2.87 → 3.06 on surface-2 (the tint band's ground), batch-12 */
  --ds-data-5: #d23f7a;  --ds-data-5-tint: #f9e4ec;  --ds-data-5-ink: #b53669;
  --ds-data-6: #ad861b;  --ds-data-6-tint: #f7f2e1;  --ds-data-6-ink: #7d6218;
  --ds-data-7: #0e9aa7;  --ds-data-7-tint: #ddf1f3;  --ds-data-7-ink: #0b757f;
  --ds-data-8: #8a6a4b;  --ds-data-8-tint: #efeae6;  --ds-data-8-ink: #7f6245;
  --ds-chart-ramp-1: #1e40af; --ds-chart-ramp-2: #2f6fed; --ds-chart-ramp-3: #93b4f5;  /* one hue, dark→light */
  /* --ds-chart-grid, --ds-chart-comparison derived                             */

  /* ---- Elevation (§7.7) — shadow recipes; card-* derived from data-depth ---- */
  --ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .05);                    /* pressable controls */
  --ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .08);                    /* inert unless data-depth="shadow" */
  --ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);   /* popover / toast */
  --ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
  --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .12);                   /* physical objects: covers, task cards */
  /* --ds-shadow-lip derived                                                    */

  /* ---- Imagery & ornament (§7.12) ------------------------------------------ */
  --ds-overlay-fill:   rgba(0, 0, 0, .60);   /* chrome on images                 */
  --ds-ink-on-overlay: #ffffff;              /* ink on --ds-overlay-fill / over media — light in BOTH modes (batch-2 finding) */
  --ds-glass-fill:     rgba(255, 255, 255, .35);
  --ds-glass-border:   rgba(255, 255, 255, .55);
  --ds-texture-color:  rgba(0, 0, 0, .06);
  --ds-illustration-ground: #eef2f7;         /* shared tint behind illustrations */
  /* --ds-line-art, --ds-media-radius derived                                   */
}

/* ---------------------------------------------------------------------------
   2. STRUCTURE DEFAULTS — system-owned knobs and constants. Declared on :root
   ONLY (a light/dark island must not reset them). Themes SCALE these
   (--ds-radius-scale, --ds-density-scale, --ds-space-unit, --ds-text-base) or
   point lane families at their own stacks; they do not redefine the steps.
   ------------------------------------------------------------------------- */
:root {
  /* ---- Lines: widths ------------------------------------------------------- */
  --ds-border-width:      1px;
  --ds-ring-width:        2px;
  --ds-ring-offset:       2px;
  --ds-ring-outset:       0px;       /* 0 | 3px — highlight ring drawn outside the box (Jasper) */

  /* ---- Elevation: the control lip ------------------------------------------- */
  --ds-control-lip:   0px;                                             /* 0 | 1px — darker bottom edge on pressables */

  /* ---- Shape (§7.8) — steps derive from --ds-radius-scale ------------------ */
  --ds-radius-scale:  1;             /* 0 drafting · 1 tool · 2 soft (any number works) */
  --ds-radius-pill:   9999px;
  /* xs/sm/md/lg/xl + --ds-radius-button derived                                */

  /* ---- Typography (§7.9) --------------------------------------------------- */
  --ds-font-sans:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-serif:    ui-serif, Georgia, "Times New Roman", serif;
  --ds-font-mono:     ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* lane families — a theme points a lane at one of the families above:      */
  --ds-font-display:  var(--ds-font-sans);   /* display / hero lane              */
  --ds-font-label:    var(--ds-font-sans);   /* label / metadata lane            */
  --ds-font-body-alt: var(--ds-font-sans);   /* explanatory / "writing" lane     */
  --ds-text-base:     14px;          /* 14 app · 16 forms/marketing/consumer      */
  /* scale ratios (flat by default; a theme may re-shape them)                  */
  --ds-scale-xs: .786;  --ds-scale-sm: .857;  --ds-scale-lg: 1.143;  --ds-scale-xl: 1.429;
  --ds-scale-2xl: 1.714; --ds-scale-3xl: 2.286; --ds-scale-display: 3.429;
  --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
  --ds-display-weight: 600;          /* 400–500 editorial · 600–800 punch          */
  --ds-heading-weight: 600;
  --ds-display-tracking: -0.02em;
  --ds-heading-tracking: -0.01em;
  --ds-label-tracking: 0;            /* sentence-case tracking (set by data-labels) */
  --ds-label-tracking-upper: .08em;  /* the tracking uppercase labels take; a theme sets ITS value here and
                                        data-labels="upper" reads it (batch-12: the attribute no longer pins .08em) */
  --ds-label-case:     none;         /* none | uppercase  (set by data-labels)   */
  --ds-control-case:   none;         /* none | capitalize (set by data-controls) */
  --ds-lh-tight: 1.05; --ds-lh-heading: 1.2; --ds-lh-body: 1.45; --ds-lh-prose: 1.6; --ds-lh-list: 1.25;
  --ds-numeric:        tabular-nums; /* font-variant-numeric for numbers          */
  --ds-measure:        65ch;         /* reading measure for prose                  */

  /* ---- Space & density (§7.10) -------------------------------------------- */
  --ds-space-unit:     4px;          /* 4 apps · 8 marketing                     */
  --ds-density-scale:  1;            /* .85 compact · 1 default · 1.2 comfortable */
  --ds-control-h-base: 36px;         /* system-owned; themes scale via density   */
  --ds-field-gap:      8px;          /* label → control                          */
  --ds-gutter-page:    clamp(16px, 4vw, 72px);
  --ds-container-max:  1152px;
  --ds-container-narrow: 640px;
  --ds-container-prose:  720px;
  --ds-container-content: 1088px;    /* app content column (.ds-content, C-03) — theme-tunable (batch-12) */
  --ds-section-gap-units: 12;        /* marketing region gap in space units (C-01 house = 12–16) */
  --ds-rail-inset:     24px;         /* C-03 drawn rails: inset from the page edge, NOT a space step (48 px at unit 8 was wrong) — theme-tunable (batch-12) */
  --ds-rail-w:         64px;         /* labelled icon rail                        */
  --ds-sidebar-w:      256px;
  --ds-inspector-w:    320px;
  --ds-topbar-h:       56px;
  --ds-sheet-inset:    12px;         /* inset sheet gap from the chrome edge (house shell) */
  --ds-icon-size:      16px;         /* inline                                   */
  --ds-icon-size-row:  20px;         /* list / nav rows                          */
  --ds-icon-size-rail: 24px;         /* rails                                    */
  --ds-icon-stroke:    1.5px;
  --ds-tap-target-min: 40px;

  /* ---- Motion (§7.11) ------------------------------------------------------ */
  --ds-motion-scale:   1;            /* 0 under prefers-reduced-motion           */
  --ds-ease-standard:  cubic-bezier(.2, 0, 0, 1);
  --ds-ease-out:       cubic-bezier(0, 0, .2, 1);
  --ds-ease-in:        cubic-bezier(.4, 0, 1, 1);
  --ds-ambient-play:   running;      /* animation-play-state for marketing blobs / marquee / parallax:
                                        running | paused — paused under data-ambient="off" and reduced motion.
                                        Consume as `animation-play-state: var(--ds-ambient-play)` (batch-12) */
  --ds-ambient-motion: 1;            /* DEPRECATED alias of --ds-ambient-play (1 | 0) — nothing should read it; kept so
                                        old references resolve until they are re-pointed */
  /* --ds-dur-* derived                                                         */

  /* ---- Imagery: geometry --------------------------------------------------- */
  --ds-glass-blur:     12px;
  --ds-media-aspect:   16 / 9;
  --ds-mock-fade:      96px;                 /* fade-mask length on product frames */

  /* ---- Z-index ladder ------------------------------------------------------
     Transient layers sit ABOVE the scrim + modal pair (DESK-326, CONTRACT §15): a popover or dropdown
     opened over a scrimmed page, or portalled out of a modal, must be on top. Page-level popovers are
     light-dismissed when a modal opens, so a page popover never ends up over a modal.            */
  --ds-z-sticky:   100;
  --ds-z-scrim:    200;
  --ds-z-modal:    210;
  --ds-z-dropdown: 300;
  --ds-z-popover:  310;
  --ds-z-toast:    500;
  --ds-z-tooltip:  600;
}

/* ---------------------------------------------------------------------------
   3. DERIVED TOKENS — declared on every RE-DERIVE HOST (see header).
   A theme sets the knobs (unit, scales, seed, families); these follow.
   [data-band] is a host too (batch-12), so a band block sets planes and
   accent roles only — card-*, selected-*, hover-*, link / ring / lines
   re-derive from them on the band element itself.
   ------------------------------------------------------------------------- */
:root,
[data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band] {
  /* ink chains */
  --ds-ink-link:          var(--ds-accent);
  --ds-ink-code:          var(--ds-ink-2);
  --ds-ring:              var(--ds-accent);
  --ds-border-selected:   var(--ds-accent);
  --ds-accent-line:       var(--ds-accent);
  --ds-live:              var(--ds-danger);
  --ds-presence:          var(--ds-success);
  --ds-selection-graph:   var(--ds-accent);
  --ds-data-primary:      var(--ds-data-1);   /* a chart's default / single series; themes whose data-1 IS the accent re-point it (CONTRACT §15.2) */
  --ds-chart-grid:        var(--ds-rule-soft);
  --ds-chart-comparison:  var(--ds-ink-faint);
  --ds-line-art:          var(--ds-rule-strong);

  /* elevation: card-* follow data-depth (defaults = tint-hairline) */
  --ds-card-bg:           var(--ds-surface);
  --ds-card-border:       var(--ds-rule);
  --ds-card-shadow:       0 0 0 0 transparent;   /* composable 'none' — `none` would invalidate a comma-joined box-shadow */
  --ds-shadow-lip:        inset 0 calc(-1 * var(--ds-control-lip)) 0 0 var(--ds-border-strong);
  --ds-hover-bg:          var(--ds-surface-hover);   /* data-hover="tint" */
  --ds-hover-shadow:      0 0 0 0 transparent;

  /* selection primitives (defaults = data-selection="tint") */
  --ds-selected-bg:       var(--ds-surface-selected);
  --ds-selected-ink:      var(--ds-ink);
  --ds-selected-line:     transparent;
  --ds-selected-weight:   var(--ds-weight-medium);

  /* shape */
  --ds-radius-xs:   calc(4px  * var(--ds-radius-scale));
  --ds-radius-sm:   calc(6px  * var(--ds-radius-scale));
  --ds-radius-md:   calc(8px  * var(--ds-radius-scale));
  --ds-radius-lg:   calc(12px * var(--ds-radius-scale));
  --ds-radius-xl:   calc(20px * var(--ds-radius-scale));
  --ds-radius-button: var(--ds-radius-sm);          /* data-buttons="pill" → pill */
  --ds-media-radius:  var(--ds-radius-lg);

  /* type scale */
  --ds-text-xs:      calc(var(--ds-text-base) * var(--ds-scale-xs));
  --ds-text-sm:      calc(var(--ds-text-base) * var(--ds-scale-sm));
  --ds-text-md:      var(--ds-text-base);
  --ds-text-lg:      calc(var(--ds-text-base) * var(--ds-scale-lg));
  --ds-text-xl:      calc(var(--ds-text-base) * var(--ds-scale-xl));
  --ds-text-2xl:     calc(var(--ds-text-base) * var(--ds-scale-2xl));
  --ds-text-3xl:     calc(var(--ds-text-base) * var(--ds-scale-3xl));
  --ds-text-display: calc(var(--ds-text-base) * var(--ds-scale-display));
  /* the house hero formula — one fluid display size instead of a clamp() per recipe (batch-12):
     never below 3xl, grows with the viewport, never past 1.4 × display */
  --ds-text-display-fluid: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4));
  /* title sizes by ROLE — components read these, never pick a step themselves (batch-12).
     Values = the built house: page-header 2xl · section-header (in-page shelf title) lg ·
     card md · chapter-header (marketing) 3xl. A theme may move a role one step. */
  --ds-text-title-page:    var(--ds-text-2xl);
  --ds-text-title-section: var(--ds-text-lg);
  --ds-text-title-card:    var(--ds-text-md);
  --ds-text-title-chapter: var(--ds-text-3xl);

  /* space steps (unit × n) — unit-based, NOT density-scaled */
  --ds-space-0-5: calc(var(--ds-space-unit) * .5);
  --ds-space-1:  calc(var(--ds-space-unit) * 1);
  --ds-space-1-5: calc(var(--ds-space-unit) * 1.5);   /* 6px half-step: kbd chips, 42px rows (batch-1 finding) */
  --ds-space-2:  calc(var(--ds-space-unit) * 2);
  --ds-space-2-5: calc(var(--ds-space-unit) * 2.5);   /* 10px: favicon rows, board wells (batch-2 finding) */
  --ds-space-3:  calc(var(--ds-space-unit) * 3);
  --ds-space-4:  calc(var(--ds-space-unit) * 4);
  --ds-space-5:  calc(var(--ds-space-unit) * 5);
  --ds-space-6:  calc(var(--ds-space-unit) * 6);
  --ds-space-7:  calc(var(--ds-space-unit) * 7);      /* 28px: 72px card rows, board gutters (batch-2 finding) */
  --ds-space-8:  calc(var(--ds-space-unit) * 8);
  --ds-space-10: calc(var(--ds-space-unit) * 10);
  --ds-space-12: calc(var(--ds-space-unit) * 12);
  --ds-space-16: calc(var(--ds-space-unit) * 16);
  --ds-space-20: calc(var(--ds-space-unit) * 20);
  --ds-space-24: calc(var(--ds-space-unit) * 24);
  --ds-section-gap: calc(var(--ds-space-unit) * var(--ds-section-gap-units));

  /* density-scaled sizes — snapped to the 4px grid by the @supports block below */
  --ds-control-h:    calc(var(--ds-control-h-base) * var(--ds-density-scale));
  --ds-control-h-sm: calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale));
  --ds-control-h-lg: calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale));
  --ds-row-h:        calc(var(--ds-control-h) + 4px);
  --ds-card-pad:     calc(16px * var(--ds-density-scale));
  --ds-card-gap:     calc(16px * var(--ds-density-scale));
  --ds-field-pitch:  calc(16px * var(--ds-density-scale));   /* control → next label */
  --ds-control-pad-x: calc(12px * var(--ds-density-scale));

  /* current-element size hooks (components/_base.css remaps them under data-size) */
  --ds-size-h:      var(--ds-control-h);
  --ds-size-text:   var(--ds-text-md);
  --ds-size-pad-x:  var(--ds-control-pad-x);

  /* motion */
  --ds-dur-fast: calc(120ms * var(--ds-motion-scale));
  --ds-dur-base: calc(180ms * var(--ds-motion-scale));
  --ds-dur-slow: calc(280ms * var(--ds-motion-scale));
}

/* Band snapshots — the page's accent pair as seen from OUTSIDE an accent band (batch-12).
   [data-band="accent"] redefines --ds-accent to the ink; a custom property cannot reference
   the value it is replacing on the same element (inherit() is not shipped), so the band reads
   these instead. Declared on every host EXCEPT the accent band, so the band inherits them from
   its nearest host ancestor — the page root, a themed wrapper, a dark island.
   --ds-band-ink-away is the ink's sRGB inverse: the direction a plane steps to GAIN contrast.
   Plumbing — components never read --ds-band-*. */
:is(:root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
    [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
    [data-band]):not([data-band="accent"]) {
  --ds-band-accent:   var(--ds-accent);
  --ds-band-ink:      var(--ds-ink-on-accent);
  --ds-band-ink-away: rgb(from var(--ds-ink-on-accent) calc(255 - r) calc(255 - g) calc(255 - b));
}

/* Snap density-scaled sizes to the 4px grid where round() exists
   (Chromium 125+, Firefox 118+, Safari 15.4+). Fallback above is unsnapped. */
@supports (width: round(1px, 1px)) {
  :root,
  [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
  [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
  [data-band] {
    --ds-control-h:    round(calc(var(--ds-control-h-base) * var(--ds-density-scale)), 4px);
    --ds-control-h-sm: round(calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)), 4px);
    --ds-control-h-lg: round(calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)), 4px);
    --ds-card-pad:     round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-card-gap:     round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-field-pitch:  round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-control-pad-x: round(calc(12px * var(--ds-density-scale)), 2px);
  }
}

/* ---------------------------------------------------------------------------
   4. DARK REMAP — §7.1–7.3 + primary + accent + semantic + data + shadows.
   Neutral ramp inversion with P5's in-hue surface step (surfaces step UP from
   ground). Explicit data-mode wins; the guarded media form applies only when no
   data-mode is set on :root.
   ------------------------------------------------------------------------- */
:root[data-mode="dark"],
:not(:root)[data-mode="dark"],
:not(:root)[data-band="dark"] {      /* data-band="dark" IS the dark island (batch-12) — one source of truth, no alias copies */
  color-scheme: dark;
  --ds-ground:            #0f0f10;
  --ds-ground-2:          #141416;
  --ds-surface:           #18181a;
  --ds-surface-2:         #1f1f22;
  --ds-surface-3:         #26262a;
  --ds-skeleton:          #2e2e33;
  --ds-surface-raised:    #1f1f22;   /* popovers step up, not down, in dark      */
  --ds-surface-hover:     #222226;
  --ds-surface-pressed:   #26262a;
  --ds-surface-selected:  #2a2a2e;
  --ds-surface-inverse:   #fafafa;
  --ds-surface-inverse-hover: #e6e6e8;
  --ds-scrim:             rgba(0, 0, 0, .60);

  --ds-ink:               #f4f4f5;
  --ds-ink-2:             #c9c9cc;
  --ds-ink-muted:         #9d9da3;   /* 6.6:1 on surface                         */
  --ds-ink-faint:         #5e5e64;
  --ds-ink-inverse:       #111111;
  --ds-ink-on-primary:    #111111;
  --ds-ink-on-accent:     #0b0b0c;

  --ds-rule-soft:         #222226;
  --ds-rule-faint:        #1c1c1f;
  --ds-rule:              #2a2a2e;   /* 1.24:1 on surface                        */
  --ds-rule-strong:       #38383d;
  --ds-border:            #303035;
  --ds-border-strong:     #45454b;

  --ds-primary-fill:        #f4f4f5;
  --ds-primary-fill-hover:  #e2e2e4;
  --ds-accent:              #6b9cff;
  --ds-accent-hover:        #86adff;
  --ds-accent-ink:          #b9ccff;
  --ds-accent-tint:         #273043;
  --ds-accent-soft:         #3b5fb8;
  --ds-accent-2:            #a48cf5;
  --ds-accent-2-ink:        #c7b8fa;
  --ds-accent-2-tint:       #342f46;

  --ds-success: #34c57f;  --ds-success-tint: #1e3b2e;  --ds-success-ink: #5fd79b;
  --ds-danger:  #f26a6a;  --ds-danger-tint:  #44282a;  --ds-danger-ink:  #f58d8d;
  --ds-warning: #f2b04a;  --ds-warning-tint: #443624;  --ds-warning-ink: #f6c473;
  --ds-info:    #4fb3f0;  --ds-info-tint:    #233745;  --ds-info-ink:    #7ec8f5;
  --ds-ink-on-semantic: #0b0b0c;

  --ds-data-1: #6b9cff;  --ds-data-1-tint: #293248;  --ds-data-1-ink: #9dbcff;
  --ds-data-2: #a48cf5;  --ds-data-2-tint: #342f46;  --ds-data-2-ink: #c1b1f8;
  --ds-data-3: #3ecf95;  --ds-data-3-tint: #203d33;  --ds-data-3-ink: #6fdcb2;
  --ds-data-4: #f5915b;  --ds-data-4-tint: #443027;  --ds-data-4-ink: #f8ac84;
  --ds-data-5: #f06fa4;  --ds-data-5-tint: #432936;  --ds-data-5-ink: #f596bd;
  --ds-data-6: #e2c04e;  --ds-data-6-tint: #403a24;  --ds-data-6-ink: #ebd07e;
  --ds-data-7: #3fc7d4;  --ds-data-7-tint: #203b3f;  --ds-data-7-ink: #7cdae3;
  --ds-data-8: #c3a184;  --ds-data-8-tint: #3a332f;  --ds-data-8-ink: #d6bda8;
  --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;

  --ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .40);
  --ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .50);
  --ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);

  --ds-overlay-fill:   rgba(0, 0, 0, .65);
  --ds-glass-fill:     rgba(24, 24, 26, .55);
  --ds-glass-border:   rgba(255, 255, 255, .14);
  --ds-texture-color:  rgba(255, 255, 255, .06);
  --ds-illustration-ground: #1c2129;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22;
    --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226;
    --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60);
    --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64;
    --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c;
    --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b;
    --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4;
    --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8;
    --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46;
    --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b;
    --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d;
    --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473;
    --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c;
    --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff;
    --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8;
    --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2;
    --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84;
    --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd;
    --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e;
    --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3;
    --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8;
    --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;
    --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50);
    --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
    --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);
    --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14);
    --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129;
  }
}

/* ---------------------------------------------------------------------------
   5. POLICY ATTRIBUTES — root (or any ancestor) data-* switches.
   Each sets the derived tokens components consume; components ALSO select on
   the attribute where geometry changes (tabs underline vs pill, etc.).
   Written at (0,2,0) so an explicit attribute beats a theme's CSS-only fallback.
   ------------------------------------------------------------------------- */

/* data-density — compact | default | comfortable  (D1 / D2 / D3) */
:root[data-density="compact"],     :not(:root)[data-density="compact"]     { --ds-density-scale: .85; }
:root[data-density="default"],     :not(:root)[data-density="default"]     { --ds-density-scale: 1; }
:root[data-density="comfortable"], :not(:root)[data-density="comfortable"] { --ds-density-scale: 1.2; }

/* data-depth — tint | hairline | shadow | tint-hairline | shadow-hairline  (§3.2.1; shadow-hairline = quicktunnels, batch-12) */
:root[data-depth="tint"],            :not(:root)[data-depth="tint"]            { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="hairline"],        :not(:root)[data-depth="hairline"]        { --ds-card-bg: var(--ds-ground);  --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow"],          :not(:root)[data-depth="shadow"]          { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: var(--ds-shadow-card); }
:root[data-depth="tint-hairline"],   :not(:root)[data-depth="tint-hairline"]   { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow-hairline"], :not(:root)[data-depth="shadow-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: var(--ds-shadow-card); }

/* data-selection — tint | accent | accent-fill | underline | bar | invert  (§2.2.6; accent-fill = a brand theme's solid chip, batch-12) */
:root[data-selection="tint"],        :not(:root)[data-selection="tint"]        { --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink);           --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent"],      :not(:root)[data-selection="accent"]      { --ds-selected-bg: var(--ds-accent-tint);      --ds-selected-ink: var(--ds-accent-ink);    --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent-fill"], :not(:root)[data-selection="accent-fill"] { --ds-selected-bg: var(--ds-accent);           --ds-selected-ink: var(--ds-ink-on-accent); --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="underline"],   :not(:root)[data-selection="underline"]   { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="bar"],         :not(:root)[data-selection="bar"]         { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="invert"],      :not(:root)[data-selection="invert"]      { --ds-selected-bg: var(--ds-surface-inverse);  --ds-selected-ink: var(--ds-ink-inverse);   --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }

/* data-buttons — sm | pill  (§7.8 radius-button) */
:root[data-buttons="sm"],   :not(:root)[data-buttons="sm"]   { --ds-radius-button: var(--ds-radius-sm); }
:root[data-buttons="pill"], :not(:root)[data-buttons="pill"] { --ds-radius-button: var(--ds-radius-pill); }

/* data-labels — sentence | upper  (§7.9 label-case; upper implies tracking — the THEME's own value
   via --ds-label-tracking-upper, .08em in base; batch-12: the attribute no longer pins .08em over paper's .1em) */
:root[data-labels="sentence"], :not(:root)[data-labels="sentence"] { --ds-label-case: none;      --ds-label-tracking: 0; }
:root[data-labels="upper"],    :not(:root)[data-labels="upper"]    { --ds-label-case: uppercase; --ds-label-tracking: var(--ds-label-tracking-upper); }

/* data-controls — sentence | title  (§7.9 control-case) */
:root[data-controls="sentence"], :not(:root)[data-controls="sentence"] { --ds-control-case: none; }
:root[data-controls="title"],    :not(:root)[data-controls="title"]    { --ds-control-case: capitalize; }

/* data-accent-scope — state | action | all | none  (§7.4 policy).
   Only "none" changes CSS: links, rings and selection lines fall back to ink.
   state/action/all are enforced by review + the "one filled button" rule. With
   no attribute this file BEHAVES as "state": the primary above is ink-black and
   the accent is information only (links, rings, dots). A theme whose filled
   button is the hue declares "action" (workbench) or "all" (seeded,
   quicktunnels) in its header and sets --ds-primary-fill to the accent. */
:root[data-accent-scope="none"], :not(:root)[data-accent-scope="none"] {
  --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink);
  --ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink);
}

/* data-hover — tint | lift  (§7.11 hover-mode) */
:root[data-hover="tint"], :not(:root)[data-hover="tint"] { --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; }
:root[data-hover="lift"], :not(:root)[data-hover="lift"] { --ds-hover-bg: var(--ds-surface);       --ds-hover-shadow: var(--ds-shadow-lift); }

/* data-ambient — off  (§7.11 ambient motion: marquee, blobs, parallax). One value: the page (or a
   region) parks its ambient animations. Reduced motion (§6) parks them too. The deprecated
   --ds-ambient-motion follows for anything that still reads it. (batch-12) */
:root[data-ambient="off"], :not(:root)[data-ambient="off"] { --ds-ambient-play: paused; --ds-ambient-motion: 0; }

/* ---- data-band — tint | dark | accent  (§7.1 islands; batch-12) --------------------------
   Section-level islands, defined here for EVERY theme; a theme may hand-tune its own at the
   same (0,2,0) — it loads later and wins (quicktunnels' accent band). Written as
   [data-band="v"][data-band] rather than :root[…], :not(:root)[…] on purpose: same (0,2,0),
   but a band never sits on the root (the root is where the accent band's snapshot is read
   from), so the :root form would be a lie. A band is a re-derive host (§3), so only planes and
   accent roles are set here; card-*, selected-*, hover-*, link / ring / lines follow. A theme's
   CSS-only fallbacks reach inside a band through the theme's own host rule (see any theme file,
   "restated for every host ISLAND").
   Put data-band on a <section> of its own — never on the root, never beside data-theme /
   data-mode on one element (a theme's island selector at the same specificity would win).
   data-band="dark" is NOT here: it is a selector on the dark remap (§4) and on every theme's
   dark block — one source of truth. */

/* tint — one plane step: the section sits on surface-2, its second plane on surface-3; cards
   (surface) and everything else keep the page's values. Available under any theme. */
[data-band="tint"][data-band] {
  --ds-ground:   var(--ds-surface-2);
  --ds-ground-2: var(--ds-surface-3);
  --ds-rule:     var(--ds-rule-strong);   /* one grade up: the structural hairline is 1.14:1 on surface-2 (R2 wants 1.15); card edges re-derive from it */
}

/* accent — the accent IS the ground. Generic recipe over the --ds-band-* snapshots (§3): holds
   for any hue and either ink polarity (white ink on a blue, dark ink on an orange / terracotta /
   white). Every plane steps AWAY from the ink (contrast can only rise — the theme's own
   ink-on-accent : accent pair, ≈ 5:1 on most brands, is the whole budget), so cards read as a
   deeper plane on a dark accent and a lighter one on a light accent; insets step further.
   Ink tiers collapse toward the ink (96 / 94 / 60 %) for the same reason — on a band, hierarchy
   is weight and size. Rules are the ink at 12 / 18 / 26 % over the accent. The ONE filled
   control inverts (ink fill, accent text); every accent role becomes the ink; semantic tints
   become a deeper accent step and semantic inks the ink, so a callout still reads; shadows
   soften to the ink at low alpha. Overlays (surface-raised, scrim) stay the page's — R6. */
[data-band="accent"][data-band] {
  /* planes */
  --ds-ground:                var(--ds-band-accent);
  --ds-ground-2:              color-mix(in srgb, var(--ds-band-accent) 96%, var(--ds-band-ink-away));
  --ds-surface:               color-mix(in srgb, var(--ds-band-accent) 90%, var(--ds-band-ink-away));
  --ds-surface-2:             color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));
  --ds-surface-3:             color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
  --ds-surface-hover:         color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
  --ds-surface-pressed:       color-mix(in srgb, var(--ds-band-accent) 82%, var(--ds-band-ink-away));
  --ds-surface-selected:      color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
  --ds-skeleton:              color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
  --ds-surface-inverse:       var(--ds-band-ink);
  --ds-surface-inverse-hover: color-mix(in srgb, var(--ds-band-ink) 90%, var(--ds-band-accent));
  /* ink */
  --ds-ink:                   var(--ds-band-ink);
  --ds-ink-2:                 color-mix(in srgb, var(--ds-band-ink) 96%, var(--ds-band-accent));
  --ds-ink-muted:             color-mix(in srgb, var(--ds-band-ink) 94%, var(--ds-band-accent));
  --ds-ink-faint:             color-mix(in srgb, var(--ds-band-ink) 60%, var(--ds-band-accent));
  --ds-ink-inverse:           var(--ds-band-accent);
  --ds-ink-on-primary:        var(--ds-band-accent);
  --ds-ink-on-accent:         var(--ds-band-accent);
  /* lines: the ink over the accent at 8 / 12 / 18 / 26 %; borders 22 / 34 % */
  --ds-rule-faint:            color-mix(in srgb, var(--ds-band-ink)  8%, var(--ds-band-accent));
  --ds-rule-soft:             color-mix(in srgb, var(--ds-band-ink) 12%, var(--ds-band-accent));
  --ds-rule:                  color-mix(in srgb, var(--ds-band-ink) 18%, var(--ds-band-accent));
  --ds-rule-strong:           color-mix(in srgb, var(--ds-band-ink) 26%, var(--ds-band-accent));
  --ds-border:                color-mix(in srgb, var(--ds-band-ink) 22%, var(--ds-band-accent));
  --ds-border-strong:         color-mix(in srgb, var(--ds-band-ink) 34%, var(--ds-band-accent));
  /* action: the one filled control inverts; every accent role is the ink */
  --ds-primary-fill:          var(--ds-band-ink);
  --ds-primary-fill-hover:    color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
  --ds-primary-border:        transparent;
  --ds-primary-highlight:     transparent;
  --ds-accent:                var(--ds-band-ink);
  --ds-accent-hover:          color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
  --ds-accent-ink:            var(--ds-band-ink);
  --ds-accent-tint:           color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));   /* chips: a deeper accent step, ink text */
  --ds-accent-soft:           color-mix(in srgb, var(--ds-band-ink) 45%, var(--ds-band-accent));
  --ds-ink-link:              var(--ds-band-ink);
  --ds-ring:                  var(--ds-band-ink);
  --ds-border-selected:       var(--ds-band-ink);
  --ds-accent-line:           var(--ds-band-ink);
  --ds-selection-graph:       var(--ds-band-ink);
  /* semantic on the band: tint = a deeper accent step, ink = the ink, line = the ink at 35 % (fills keep their hue for dots / badges) */
  --ds-success-tint:          var(--ds-accent-tint);  --ds-success-ink: var(--ds-band-ink);  --ds-success-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-danger-tint:           var(--ds-accent-tint);  --ds-danger-ink:  var(--ds-band-ink);  --ds-danger-line:  color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-warning-tint:          var(--ds-accent-tint);  --ds-warning-ink: var(--ds-band-ink);  --ds-warning-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-info-tint:             var(--ds-accent-tint);  --ds-info-ink:    var(--ds-band-ink);  --ds-info-line:    color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  /* depth + imagery: the ink at low alpha */
  --ds-shadow-lift:           0 1px 2px  color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-shadow-card:           0 1px 3px  color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-float:          0 8px 24px color-mix(in srgb, var(--ds-band-ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-modal:          0 24px 80px color-mix(in srgb, var(--ds-band-ink) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-object:         0 4px 12px color-mix(in srgb, var(--ds-band-ink) 25%, transparent);
  --ds-illustration-ground:   var(--ds-accent-tint);
  --ds-texture-color:         color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-glass-fill:            color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-glass-border:          color-mix(in srgb, var(--ds-band-ink) 20%, transparent);
}

/* data-texture / data-ornament / data-illustration / data-emoji / data-avatar
   are DESCRIPTIVE — no tokens change; patterns select on them
   (e.g. [data-texture="dot"] .ds-hero::before). See CONTRACT.md §3. */

/* ---------------------------------------------------------------------------
   6. REDUCED MOTION — durations collapse to 0 through --ds-motion-scale.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
  [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
  [data-band] {
    --ds-motion-scale: 0;
    --ds-ambient-play: paused;
    --ds-ambient-motion: 0;   /* deprecated alias — see §2 */
  }
}


/* tokens/themes/pps-portfolio.css */
/* ============================================================================
   Theme: pps-portfolio — candidate theme for productphotoshots.com, option A
   "portfolio" (design-loop 2026-10-01).               data-theme="pps-portfolio"
   An over-the-top portfolio piece: the shots are the gallery show. Gallery-white
   walls in light mode, gallery-black in dark; near-chromeless, square-cornered
   (radius-scale 0: works hang flat, nothing is a rounded app card), hairline
   wires instead of boxes. The filled primary is INK (accent-scope state); the
   one accent is the gallery's red "sold" dot: links, the focus ring, the dot on
   exhibition labels — never a fill. accent-2 is picture-light brass, a rule only.

   Type: Instrument Serif (display: monumental, editorial, with its italic) ·
   Schibsted Grotesk (UI + reading) · Sometype Mono (exhibition-label metadata).
   No other fleet theme uses any of the three. Self-hosted woff2 in the lane's
   option dir (@font-face in partials/_style.html).

   PAGE ATTRIBUTES this theme expects:
     data-theme="pps-portfolio" data-depth="hairline" data-selection="underline"
     data-buttons="sm" data-labels="upper" data-controls="sentence"
     data-accent-scope="state" data-hover="tint" data-density="comfortable"
     data-texture="none" data-ornament="none" data-illustration="photo"
   CSS-only fallbacks below: square buttons, hairline cards on the ground,
   uppercase mono labels, links on accent-ink.
   ISLANDS: light block also written for a descendant [data-mode="light"]; dark
   block for a descendant [data-mode="dark"] and [data-band="dark"].
   ========================================================================== */

[data-theme="pps-portfolio"],
[data-theme="pps-portfolio"] [data-mode="light"] {
  /* -- planes: gallery-white walls, paper-white plinths */
  --ds-ground: #f7f6f3; --ds-ground-2: #efeee9; --ds-surface: #ffffff; --ds-surface-2: #f0efea; --ds-surface-3: #e4e2dc;
  --ds-surface-raised: #ffffff; --ds-surface-hover: #f3f2ee; --ds-surface-pressed: #e9e8e2; --ds-surface-selected: #ebe9e3; --ds-surface-inverse: #0e0e0d;
  --ds-surface-inverse-hover: #232321; --ds-rule-faint: #f0efea; --ds-skeleton: #e3e1db;
  --ds-scrim: rgba(14, 14, 13, .48);
  /* -- ink: gallery black */
  --ds-ink: #0e0e0d; --ds-ink-2: #2f2f2c; --ds-ink-muted: #5b5a55; --ds-ink-faint: #a09e97; --ds-ink-inverse: #f7f6f3;
  --ds-ink-on-primary: #ffffff; --ds-ink-on-accent: #ffffff; --ds-ink-code: #2f2f2c;
  /* -- lines: the hanging wire */
  --ds-rule-soft: #ebe9e4; --ds-rule: #dcdad3; --ds-rule-strong: #bebbb2; --ds-border: #cfccc4; --ds-border-strong: #85837c;
  /* -- action: the filled primary is ink (accent-scope state); the accent is the gallery's red dot */
  --ds-primary-fill: #0e0e0d; --ds-primary-fill-hover: #2b2b28;
  --ds-accent: #c8182b; --ds-accent-hover: #a91222; --ds-accent-ink: #a8121f; --ds-accent-tint: #fbe5e5; --ds-accent-soft: #eea3a8;
  /* -- second accent: picture-light brass (frame rule, never body text) */
  --ds-accent-2: #9a7428; --ds-accent-2-ink: #6b4f14; --ds-accent-2-tint: #f5eddb;
  /* -- semantic */
  --ds-success: #1d7a4c; --ds-success-tint: #e1f1e8; --ds-success-ink: #145c39;
  --ds-danger: #c42b2b; --ds-danger-tint: #fbe5e3; --ds-danger-ink: #9a1f1f;
  --ds-warning: #a96a06; --ds-warning-tint: #fbefd8; --ds-warning-ink: #714502;
  --ds-info: #2b5f9e; --ds-info-tint: #e3ecf7; --ds-info-ink: #1f497c;
  /* -- data */
  --ds-data-1: #0e0e0d; --ds-data-1-tint: #ebe9e3; --ds-data-1-ink: #0e0e0d;
  --ds-data-2: #c8182b; --ds-data-2-tint: #fbe5e5; --ds-data-2-ink: #a8121f;
  --ds-data-3: #1d7a4c; --ds-data-3-tint: #e1f1e8; --ds-data-3-ink: #145c39;
  --ds-data-4: #b5560f; --ds-data-4-tint: #fbebdf; --ds-data-4-ink: #8c400a;
  --ds-data-5: #2b5f9e; --ds-data-5-tint: #e3ecf7; --ds-data-5-ink: #1f497c;
  --ds-data-6: #9a7428; --ds-data-6-tint: #f5eddb; --ds-data-6-ink: #6b4f14;
  --ds-data-7: #0e7f8c; --ds-data-7-tint: #dff1f3; --ds-data-7-ink: #0a616b;
  --ds-data-8: #6f6a60; --ds-data-8-tint: #eeece7; --ds-data-8-ink: #57534a;
  --ds-chart-ramp-1: #0e0e0d; --ds-chart-ramp-2: #5b5a55; --ds-chart-ramp-3: #bebbb2;
  /* -- elevation: almost none; works hang flat on the wall */
  --ds-shadow-lift: 0 1px 2px rgba(14, 14, 13, .06), 0 8px 20px rgba(14, 14, 13, .06);
  --ds-shadow-card: 0 1px 2px rgba(14, 14, 13, .05);
  --ds-shadow-float: 0 16px 40px rgba(14, 14, 13, .14), 0 0 0 1px rgba(14, 14, 13, .05);
  --ds-shadow-modal: 0 30px 80px rgba(14, 14, 13, .22), 0 0 0 1px rgba(14, 14, 13, .05);
  --ds-shadow-object: 0 40px 70px -30px rgba(14, 14, 13, .35), 0 6px 14px rgba(14, 14, 13, .08);
  --ds-texture-color: rgba(14, 14, 13, .05);
  --ds-illustration-ground: #ecebe6;
  --ds-overlay-fill: rgba(14, 14, 13, .62);

  /* -- shape: square, hung flat */
  --ds-radius-scale: 0;
  --ds-media-radius: 0px;
  /* -- type: Instrument Serif (display) · Schibsted Grotesk (UI + reading) · Sometype Mono (labels) */
  --ds-font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --ds-font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --ds-font-mono: "Sometype Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ds-font-label: var(--ds-font-mono);
  --ds-text-base: 16px;
  --ds-display-weight: 400;
  --ds-display-tracking: -0.025em;
  --ds-heading-weight: 400;
  --ds-heading-tracking: -0.015em;
  --ds-lh-tight: .9;
  --ds-label-tracking-upper: .12em;
  --ds-label-case: uppercase;
  --ds-label-tracking: var(--ds-label-tracking-upper);
  /* -- space: lots of air */
  --ds-space-unit: 8px;
  --ds-section-gap-units: 18;
  --ds-container-max: 1360px;
  --ds-rail-inset: 24px;
  --ds-density-scale: 1.2;
  /* -- CSS-only fallbacks (data-depth="hairline", data-buttons="sm") */
  --ds-card-bg: var(--ds-ground);
  --ds-card-border: var(--ds-rule);
  --ds-card-shadow: none;
  --ds-radius-button: var(--ds-radius-sm);
  --ds-ink-link: var(--ds-accent-ink);
  --ds-ring: var(--ds-accent);
}

/* fallbacks restated for host islands (CONTRACT §2.1) */
:where([data-theme="pps-portfolio"]) :is([data-mode], [data-density], [data-depth], [data-selection], [data-buttons],
      [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band="tint"], [data-band="dark"], [data-band="accent"]) {
  --ds-card-border: var(--ds-rule);
  --ds-card-shadow: none;
  --ds-radius-button: var(--ds-radius-sm);
  --ds-media-radius: 0px;
}
:where([data-theme="pps-portfolio"]) :is([data-mode], [data-density], [data-depth], [data-selection], [data-buttons],
      [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band="tint"], [data-band="dark"]) {
  --ds-ink-link: var(--ds-accent-ink);
  --ds-ring: var(--ds-accent);
}

/* ---- dark: gallery black; restates every colour (D-3); the media form below is byte-identical */
[data-theme="pps-portfolio"][data-mode="dark"],
[data-theme="pps-portfolio"] [data-mode="dark"],
[data-theme="pps-portfolio"] [data-band="dark"] {
  --ds-ground: #0a0a09; --ds-ground-2: #111110; --ds-surface: #151514; --ds-surface-2: #1b1b19; --ds-surface-3: #252522;
  --ds-surface-raised: #1b1b19; --ds-surface-hover: #1a1a18; --ds-surface-pressed: #22221f; --ds-surface-selected: #272724; --ds-surface-inverse: #f3f1ec;
  --ds-surface-inverse-hover: #dedbd3; --ds-rule-faint: #141413; --ds-skeleton: #262623;
  --ds-scrim: rgba(0, 0, 0, .66);
  --ds-ink: #f3f1ec; --ds-ink-2: #d2cfc7; --ds-ink-muted: #a3a097; --ds-ink-faint: #5f5d57; --ds-ink-inverse: #0e0e0d;
  --ds-ink-on-primary: #0a0a09; --ds-ink-on-accent: #0a0a09; --ds-ink-code: #d2cfc7;
  --ds-rule-soft: #1c1c1a; --ds-rule: #2a2a27; --ds-rule-strong: #3d3d39; --ds-border: #353532; --ds-border-strong: #66645e;
  --ds-primary-fill: #f3f1ec; --ds-primary-fill-hover: #ffffff;
  --ds-accent: #ff5e5b; --ds-accent-hover: #ff7f7c; --ds-accent-ink: #ff8f8a; --ds-accent-tint: #3a1a1a; --ds-accent-soft: #8a2c2c;
  --ds-accent-2: #d9b064; --ds-accent-2-ink: #ecd09a; --ds-accent-2-tint: #332a18;
  --ds-success: #49c38a; --ds-success-tint: #15301f; --ds-success-ink: #86dbb1;
  --ds-danger: #f2716a; --ds-danger-tint: #3f201e; --ds-danger-ink: #f69c95;
  --ds-warning: #e8ac4b; --ds-warning-tint: #3a2f1c; --ds-warning-ink: #f2c97e;
  --ds-info: #74abe2; --ds-info-tint: #1c2b3c; --ds-info-ink: #a2c8ee;
  --ds-data-1: #f3f1ec; --ds-data-1-tint: #272724; --ds-data-1-ink: #f3f1ec;
  --ds-data-2: #ff5e5b; --ds-data-2-tint: #3a1a1a; --ds-data-2-ink: #ff8f8a;
  --ds-data-3: #49c38a; --ds-data-3-tint: #15301f; --ds-data-3-ink: #86dbb1;
  --ds-data-4: #f2925a; --ds-data-4-tint: #3d2a1d; --ds-data-4-ink: #f7b48d;
  --ds-data-5: #74abe2; --ds-data-5-tint: #1c2b3c; --ds-data-5-ink: #a2c8ee;
  --ds-data-6: #d9b064; --ds-data-6-tint: #332a18; --ds-data-6-ink: #ecd09a;
  --ds-data-7: #45c6d4; --ds-data-7-tint: #183539; --ds-data-7-ink: #82dbe4;
  --ds-data-8: #b8b1a3; --ds-data-8-tint: #2e2c28; --ds-data-8-ink: #d2cbbd;
  --ds-chart-ramp-1: #f3f1ec; --ds-chart-ramp-2: #a3a097; --ds-chart-ramp-3: #3d3d39;
  --ds-shadow-lift: 0 2px 6px rgba(0, 0, 0, .40), 0 10px 24px rgba(0, 0, 0, .30);
  --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, .45);
  --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-modal: 0 30px 80px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-object: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 6px 14px rgba(0, 0, 0, .4);
  --ds-texture-color: rgba(255, 255, 255, .05);
  --ds-illustration-ground: #1a1a18;
  --ds-overlay-fill: rgba(0, 0, 0, .66);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="pps-portfolio"]:not([data-mode="light"]),
  :root:not([data-mode="light"]) [data-theme="pps-portfolio"]:not([data-mode="light"]) {
  --ds-ground: #0a0a09; --ds-ground-2: #111110; --ds-surface: #151514; --ds-surface-2: #1b1b19; --ds-surface-3: #252522;
  --ds-surface-raised: #1b1b19; --ds-surface-hover: #1a1a18; --ds-surface-pressed: #22221f; --ds-surface-selected: #272724; --ds-surface-inverse: #f3f1ec;
  --ds-surface-inverse-hover: #dedbd3; --ds-rule-faint: #141413; --ds-skeleton: #262623;
  --ds-scrim: rgba(0, 0, 0, .66);
  --ds-ink: #f3f1ec; --ds-ink-2: #d2cfc7; --ds-ink-muted: #a3a097; --ds-ink-faint: #5f5d57; --ds-ink-inverse: #0e0e0d;
  --ds-ink-on-primary: #0a0a09; --ds-ink-on-accent: #0a0a09; --ds-ink-code: #d2cfc7;
  --ds-rule-soft: #1c1c1a; --ds-rule: #2a2a27; --ds-rule-strong: #3d3d39; --ds-border: #353532; --ds-border-strong: #66645e;
  --ds-primary-fill: #f3f1ec; --ds-primary-fill-hover: #ffffff;
  --ds-accent: #ff5e5b; --ds-accent-hover: #ff7f7c; --ds-accent-ink: #ff8f8a; --ds-accent-tint: #3a1a1a; --ds-accent-soft: #8a2c2c;
  --ds-accent-2: #d9b064; --ds-accent-2-ink: #ecd09a; --ds-accent-2-tint: #332a18;
  --ds-success: #49c38a; --ds-success-tint: #15301f; --ds-success-ink: #86dbb1;
  --ds-danger: #f2716a; --ds-danger-tint: #3f201e; --ds-danger-ink: #f69c95;
  --ds-warning: #e8ac4b; --ds-warning-tint: #3a2f1c; --ds-warning-ink: #f2c97e;
  --ds-info: #74abe2; --ds-info-tint: #1c2b3c; --ds-info-ink: #a2c8ee;
  --ds-data-1: #f3f1ec; --ds-data-1-tint: #272724; --ds-data-1-ink: #f3f1ec;
  --ds-data-2: #ff5e5b; --ds-data-2-tint: #3a1a1a; --ds-data-2-ink: #ff8f8a;
  --ds-data-3: #49c38a; --ds-data-3-tint: #15301f; --ds-data-3-ink: #86dbb1;
  --ds-data-4: #f2925a; --ds-data-4-tint: #3d2a1d; --ds-data-4-ink: #f7b48d;
  --ds-data-5: #74abe2; --ds-data-5-tint: #1c2b3c; --ds-data-5-ink: #a2c8ee;
  --ds-data-6: #d9b064; --ds-data-6-tint: #332a18; --ds-data-6-ink: #ecd09a;
  --ds-data-7: #45c6d4; --ds-data-7-tint: #183539; --ds-data-7-ink: #82dbe4;
  --ds-data-8: #b8b1a3; --ds-data-8-tint: #2e2c28; --ds-data-8-ink: #d2cbbd;
  --ds-chart-ramp-1: #f3f1ec; --ds-chart-ramp-2: #a3a097; --ds-chart-ramp-3: #3d3d39;
  --ds-shadow-lift: 0 2px 6px rgba(0, 0, 0, .40), 0 10px 24px rgba(0, 0, 0, .30);
  --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, .45);
  --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-modal: 0 30px 80px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-object: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 6px 14px rgba(0, 0, 0, .4);
  --ds-texture-color: rgba(255, 255, 255, .05);
  --ds-illustration-ground: #1a1a18;
  --ds-overlay-fill: rgba(0, 0, 0, .66);
  color-scheme: dark;
  }
}


/* components/_base.css */
/* ============================================================================
   JSTOV design system — components/_base.css
   The shared layer every component file assumes. Loads AFTER tokens/base.css
   (+ an optional theme) and BEFORE any components/<id>/<id>.css.

   Contents
     1. Reset (minimal)                    5. Universal focus ring
     2. Body ground / ink / font           6. Hairline grades
     3. Type lanes (.ds-display … .ds-mono) 7. Layout helpers (.ds-stack/.ds-row/.ds-grid/.ds-container)
     4. Control-height + data-size hooks   8. .ds-demo wrapper, .ds-sr-only, reduced motion

   Only --ds-* tokens for colour, radius, shadow, family, control height and
   spacing (tools/lint-tokens.mjs enforces it). This file is the ONE component
   file allowed to (re)declare --ds-size-* hooks.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. RESET — the minimum that makes components predictable
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, fieldset, legend { margin: 0; }
ul, ol { padding: 0; }
ul[class], ol[class] { list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button, input, select, textarea, optgroup {
  font: inherit;            /* controls inherit family, size, weight, lh    */
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button, [role="button"], summary { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
textarea { resize: vertical; }
a { color: var(--ds-ink-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; height: 0; }
table { border-collapse: collapse; border-spacing: 0; }
:where(th) { text-align: inherit; font-weight: inherit; }
code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: .93em; }
::placeholder { color: var(--ds-ink-muted); opacity: 1; }
::selection { background: var(--ds-accent-tint); color: var(--ds-ink); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   2. BODY — ground, ink, family, line-height, numerals
   ------------------------------------------------------------------------- */
body {
  background: var(--ds-ground);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-body);
  font-weight: var(--ds-weight-regular);
  font-variant-numeric: var(--ds-numeric);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: clip;   /* the mobile rule: a page never scrolls sideways */
}
/* a themed island paints its own ground so the theme boundary is visible */
[data-theme]:not(:root), [data-mode]:not(:root) { background: var(--ds-ground); color: var(--ds-ink); }

/* ---------------------------------------------------------------------------
   3. TYPE LANES — hierarchy by weight + ink at one or two sizes (T1);
      display and metadata are the only lanes that change family.
   ------------------------------------------------------------------------- */
.ds-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-display-weight);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-lh-tight);
  text-wrap: balance;
}
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-weight: var(--ds-heading-weight);
  letter-spacing: var(--ds-heading-tracking);
  line-height: var(--ds-lh-heading);
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-h1 { font-size: var(--ds-text-2xl); }   /* 24 @14 · 27 @16 — the "title" jump   */
.ds-h2 { font-size: var(--ds-text-xl); }    /* 20 · 23                               */
.ds-h3 { font-size: var(--ds-text-lg); }    /* 16 · 18                               */
.ds-h4 { font-size: var(--ds-text-md); }    /* body size, semibold — a group title  */
.ds-h1 { letter-spacing: var(--ds-display-tracking); }

.ds-body    { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); }
.ds-body-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); }
.ds-body-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }

/* label lane: family + case + tracking are theme knobs */
.ds-label {
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: var(--ds-label-tracking);
  text-transform: var(--ds-label-case);
  color: var(--ds-ink-muted);
}
/* marketing eyebrow: ALWAYS uppercase mono-ish, regardless of data-labels (house rule) */
.ds-eyebrow {
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
}
/* mono lane: metadata, IDs, timestamps, code, tabular numbers */
.ds-mono {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-code);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ds-numeric { font-variant-numeric: tabular-nums; }

/* prose: the reading measure; body-alt family (serif in paper) */
.ds-prose {
  font-family: var(--ds-font-body-alt);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-lh-prose);
  max-width: var(--ds-measure);
  color: var(--ds-ink-2);
}
.ds-prose > * + * { margin-block-start: 1em; }
.ds-prose :is(h1, h2, h3, h4) { font-family: var(--ds-font-sans); color: var(--ds-ink); line-height: var(--ds-lh-heading); }
.ds-prose a { color: var(--ds-ink-link); }
.ds-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-quote { font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }

/* two-tone heading / lead: first clause ink, tail muted — inside ONE element.
   <h2 class="ds-h1 ds-two-tone">Ship the plan. <span class="ds-muted">Then measure it.</span></h2> */
.ds-two-tone { color: var(--ds-ink); }
.ds-two-tone .ds-muted { color: var(--ds-ink-muted); font-weight: inherit; }

/* ink utilities */
.ds-ink       { color: var(--ds-ink); }
.ds-ink-2     { color: var(--ds-ink-2); }
.ds-muted     { color: var(--ds-ink-muted); }     /* readable secondary */
.ds-faint     { color: var(--ds-ink-faint); }     /* decorative only — never content */
.ds-strong    { font-weight: var(--ds-weight-semibold); }
.ds-medium    { font-weight: var(--ds-weight-medium); }
.ds-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tnum      { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   4. CONTROL HEIGHT + data-size HOOKS
      Components read --ds-size-h / --ds-size-text / --ds-size-pad-x instead
      of --ds-control-h so data-size on the element (or an ancestor toolbar)
      steps the whole family together: sm = h−4 · md = h · lg = h+8.
   ------------------------------------------------------------------------- */
[data-size="sm"] { --ds-size-h: var(--ds-control-h-sm); --ds-size-text: var(--ds-text-sm); --ds-size-pad-x: calc(var(--ds-control-pad-x) - 2px); }
[data-size="md"] { --ds-size-h: var(--ds-control-h);    --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); }
[data-size="lg"] { --ds-size-h: var(--ds-control-h-lg); --ds-size-text: var(--ds-text-lg); --ds-size-pad-x: calc(var(--ds-control-pad-x) + 4px); }

/* the generic control box every input / button / select / chip starts from */
.ds-control {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-size-h);
  padding-inline: var(--ds-size-pad-x);
  font-size: var(--ds-size-text);
  line-height: var(--ds-lh-list);
  border-radius: var(--ds-radius-sm);
  border: var(--ds-border-width) solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
  text-transform: var(--ds-control-case);
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
              border-color var(--ds-dur-fast) var(--ds-ease-standard),
              box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-control:hover { border-color: var(--ds-border-strong); }
.ds-control:disabled, .ds-control[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); }

/* ---------------------------------------------------------------------------
   5. UNIVERSAL FOCUS RING — --ds-ring at --ds-ring-width, offset, everywhere.
      No reference showed one (0 of 51); the contract defines it.
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }
/* inputs draw the ring INSIDE their box (offset 0) so toolbars stay aligned */
:is(input, textarea, select, .ds-control):focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); }
/* ring-outset: draw the highlight OUTSIDE the box when the theme asks (Jasper) */
[data-ring="outset"]:focus-visible { outline-offset: var(--ds-ring-outset); }

/* ---------------------------------------------------------------------------
   6. HAIRLINES — three grades. <hr class="ds-hairline"> or as a block edge.
   ------------------------------------------------------------------------- */
.ds-hairline          { border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-hairline--soft    { border-block-start-color: var(--ds-rule-soft); }
.ds-hairline--strong  { border-block-start-color: var(--ds-rule-strong); }
.ds-hairline--dashed  { border-block-start-style: dashed; }   /* empty slot / optional */
.ds-hairline--dotted  { border-block-start-style: dotted; }   /* editable inline setting */
hr.ds-hairline        { width: 100%; }
.ds-hairline-v        { border-inline-start: var(--ds-border-width) solid var(--ds-rule); align-self: stretch; }

/* ---------------------------------------------------------------------------
   7. LAYOUT HELPERS — gaps from the space scale; override per instance with
      style="--_gap: var(--ds-space-8)" (private --_ props are allowed inline).
   ------------------------------------------------------------------------- */
.ds-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--ds-space-4)); }
.ds-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--ds-space-2)); }
.ds-row--between { justify-content: space-between; }
.ds-row--end     { justify-content: flex-end; }
.ds-row--nowrap  { flex-wrap: nowrap; }
.ds-grid  {
  display: grid;
  gap: var(--_gap, var(--ds-card-gap));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 240px), 100%), 1fr));
}
.ds-grid[data-cols="2"] { --_min: 320px; }
.ds-grid[data-cols="3"] { --_min: 240px; }
.ds-grid[data-cols="4"] { --_min: 200px; }
.ds-spacer { flex: 1 1 auto; }

.ds-container {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter-page);
}
.ds-container--narrow { max-width: var(--ds-container-narrow); }
.ds-container--prose  { max-width: var(--ds-container-prose); }

/* app content column (C-03): centred, max-width ALWAYS set (--ds-container-content, theme-tunable), page gutters */
.ds-content { width: 100%; max-width: var(--ds-container-content); margin-inline: auto; padding-inline: var(--ds-gutter-page); }

/* card surface derived from data-depth (tint / hairline / shadow / tint-hairline) */
.ds-surface {
  background: var(--ds-card-bg);
  border: var(--ds-border-width) solid var(--ds-card-border);
  box-shadow: var(--ds-card-shadow);
  border-radius: var(--ds-radius-md);
}
.ds-well { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); }   /* inset tint */

/* ---------------------------------------------------------------------------
   8. DEMO WRAPPER, SR-ONLY, REDUCED MOTION
   ------------------------------------------------------------------------- */
/* <section class="ds-demo" data-component="button" data-variant="vercel-ink" data-title="…">
   The showcase generator concatenates these; the title is drawn from data-title. */
.ds-demo {
  padding: var(--ds-space-6) var(--ds-gutter-page);
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}
.ds-demo::before {
  content: attr(data-component) " · " attr(data-variant) " — " attr(data-title);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}
.ds-demo[data-title=""]::before, .ds-demo:not([data-title])::before { content: attr(data-component) " · " attr(data-variant); }
.ds-demo > * { min-width: 0; }
.ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.ds-demo__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: var(--ds-measure); }

.ds-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- section rhythm (2026-09-20, from the Cloudflare recreation) ----------------------------------
   Every recipe pads --ds-section-gap on both sides, so two adjacent PLAIN sections would stack two gaps
   (the recreation ran 13 % taller than the page). Plain-after-plain drops its top padding: the gap between
   two sections is one --ds-section-gap. Bands (a data-mode or data-band island paints its own ground) keep
   both paddings, and a plain section after a band keeps its top padding, so content never touches a band edge. */
.ds-sec:not([data-mode]):not([data-band]) + .ds-sec:not([data-mode]):not([data-band]) { padding-block-start: 0; }

/* ---- .ds-accent-word — the last word (or a term) in the accent, inside a heading or a paragraph.
   Five recipes defined this scoped; promoted to a base utility (2026-09-20). Rationed like any accent. */
.ds-accent-word { color: var(--ds-accent); }


/* components/top-bar/top-bar.css */
/* ============================================================================
   top-bar — app bar                                  (taxonomy §A · core · S1)
   Root: <header class="ds-top-bar">
   Zones: __start (brand / switcher / title / breadcrumb) · __center (global search or nothing) ·
          __end (promo → primary → icon buttons → avatar)
   Parts: __brand · __logo · __switcher · __title · __notice (push-down notice ABOVE the bar) ·
          __subrow (hsaj: secondary actions on a lighter row BELOW) · __action (data-tone) ·
          __icon-btn (data-style="bordered|ghost") · __avatar (+ data-ring="quota|ink") · __dot ·
          __count · __clock · __nav (luma text links; data-nav="wrap|scroll" under 720) · __nav-link ·
          __status (autosave text) · __account (airbnb: menu glyph + avatar in ONE bordered pill; 2026-09-25)
   Variants: descript-centred-search · retool-command-bar · clickup-three-zone · manychat-title-only ·
     manychat-title-centred-search · confluence-split-at-rail-edge · navattic-breadcrumb-bar ·
     elevenlabs-slim-utility · contra-utility-only · plane-switcher-search-utilities ·
     origin-title-utility-cluster · luma-transparent-with-clock · hsaj-title-cta
   House (unmarked root / data-variant="jstov"): 56px, NO fill (the ground shows through), hairline;
   breadcrumb-as-title left; ⌘K search centred only when data-search="center" (search-first products);
   right cluster ordered promo → primary → icon buttons → avatar; data-state="scrolled" compacts to 48
   and gains the lift (document pages only).
   Composes .ds-global-search and .ds-breadcrumb by class name. Buttons / avatars are local parts so the
   demo renders before button-* / icon-button / avatar ship.
   Private knobs: --_h --_pad --_gap --_bg --_rule --_cols --_center-max --_rail-w
   ========================================================================== */

/* stroke icons: components/_base.css paints svg { fill: currentColor }, which beats the fill="none"
   presentation attribute — restate it by attribute so line icons stay hollow */
.ds-top-bar svg[fill="none"] { fill: none; }

.ds-top-bar {
  --_h:          var(--ds-topbar-h);
  --_pad:        var(--ds-space-4);
  --_gap:        var(--ds-space-2);
  --_bg:         transparent;
  --_rule:       var(--ds-rule);
  --_cols:       minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  --_center-max: 560px;
  --_rail-w:     var(--ds-sidebar-w);

  position: relative;
  z-index: var(--ds-z-sticky);
  display: grid;
  grid-template-columns: var(--_cols);
  grid-template-areas: "notice notice notice" "start center end" "sub sub sub";
  align-items: center;
  column-gap: var(--ds-space-4);
  min-width: 0;
  padding-inline: var(--_pad);
  background: var(--_bg);
  color: var(--ds-ink);
  border-block-end: var(--ds-border-width) solid var(--_rule);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-list);
  transition: box-shadow var(--ds-dur-base) var(--ds-ease-standard);
}
/* a centred search needs symmetric side columns so the field is centred on the BAR, not the gap */
.ds-top-bar[data-search="center"] { --_cols: minmax(0, 1fr) minmax(0, var(--_center-max)) minmax(0, 1fr); }

.ds-top-bar__start,
.ds-top-bar__center,
.ds-top-bar__end {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  min-width: 0;
  min-height: var(--_h);
}
.ds-top-bar__start  { grid-area: start; }
.ds-top-bar__center { grid-area: center; justify-content: center; }
.ds-top-bar__end    { grid-area: end; justify-content: flex-end; }
.ds-top-bar__center > .ds-global-search { inline-size: 100%; }

/* -- brand / switcher / title --------------------------------------------- */
.ds-top-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
  color: var(--ds-ink);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  border-radius: var(--ds-radius-sm);
}
.ds-top-bar__logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-icon-size-rail);
  block-size: var(--ds-icon-size-rail);
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-inverse);
  color: var(--ds-ink-inverse);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
}
.ds-top-bar__logo svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-top-bar__logo[data-tone="accent"] { background: var(--ds-accent); color: var(--ds-ink-on-accent); }
.ds-top-bar__logo[data-tone="tint"]   { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
/* workspace switcher pill (clickup / descript): tile + name + chevron in a bordered or tinted pill */
.ds-top-bar__switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-size-h);
  padding-inline: var(--ds-space-2) var(--ds-space-2);
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  min-width: 0;
  max-inline-size: 240px;
}
.ds-top-bar__switcher > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-top-bar__switcher svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); }
.ds-top-bar__switcher:hover { background: var(--ds-hover-bg); }
.ds-top-bar__switcher[aria-expanded="true"] { background: var(--ds-surface-selected); }
.ds-top-bar__switcher[data-style="bordered"] { background: var(--ds-surface); border-color: var(--ds-border); }
.ds-top-bar__switcher[data-style="tint"] { background: var(--ds-surface-2); }
.ds-top-bar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-heading-tracking);
  color: var(--ds-ink);
}
.ds-top-bar__status { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); display: inline-flex; align-items: center; gap: var(--ds-space-1); white-space: nowrap; }
.ds-top-bar__status svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-success); }
.ds-top-bar__clock { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* text nav links in the bar (luma) */
.ds-top-bar__nav { display: flex; align-items: center; gap: var(--ds-space-1); min-width: 0; }
.ds-top-bar__nav-link {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); text-decoration: none; white-space: nowrap;
}
.ds-top-bar__nav-link svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-top-bar__nav-link:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-top-bar__nav-link[aria-current="page"] { color: var(--ds-ink); }
/* account pill (airbnb-web-528): a menu glyph + the avatar in ONE bordered pill that opens the account menu — the
   avatar is not its own button inside it. Additive 2026-09-25 (DESK-327). */
.ds-top-bar__account {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font: inherit;
  cursor: pointer;
  transition: box-shadow var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-top-bar__account > svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; }
.ds-top-bar__account > :is(.ds-top-bar__avatar, .ds-avatar) { --_avatar: calc(var(--ds-control-h-sm) - var(--ds-space-1)); pointer-events: none; }
.ds-top-bar__account:hover,
.ds-top-bar__account[data-state="hover"] { border-color: var(--ds-border-strong); box-shadow: var(--ds-hover-shadow); }
.ds-top-bar__account[aria-expanded="true"] { border-color: var(--ds-border-strong); background: var(--ds-surface-selected); }
/* a breadcrumb in the start zone sits on the bar's baseline */
.ds-top-bar__start > .ds-breadcrumb { min-width: 0; }

/* -- actions ---------------------------------------------------------------- */
.ds-top-bar__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-size-h);
  padding-inline: var(--ds-size-pad-x);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: var(--ds-size-text);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  text-transform: var(--ds-control-case);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-lip);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-top-bar__action svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; }
.ds-top-bar__action:hover, .ds-top-bar__action[data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); }
.ds-top-bar__action[data-tone="primary"] { background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); border-color: var(--ds-primary-border); box-shadow: none; }
.ds-top-bar__action[data-tone="primary"]:hover, .ds-top-bar__action[data-tone="primary"][data-state="hover"] { background: var(--ds-primary-fill-hover); border-color: var(--ds-primary-border); }
.ds-top-bar__action[data-tone="ghost"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-ink-2); }
.ds-top-bar__action[data-tone="ghost"]:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-top-bar__action[data-tone="text"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-ink); padding-inline: var(--ds-space-1); }
.ds-top-bar__action[data-tone="text"]:hover { text-decoration: underline; text-underline-offset: .2em; background: transparent; }
/* promo / referral: outlined with a gift glyph; never filled (the primary is filled) */
.ds-top-bar__action[data-tone="promo"] { color: var(--ds-ink-2); }
.ds-top-bar__action[data-tone="promo"][data-style="pill"] { border-radius: var(--ds-radius-pill); }
.ds-top-bar__action[data-tone="promo"][data-style="dark-pill"] { border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; box-shadow: none; }
.ds-top-bar__action[data-tone="upgrade"] { color: var(--ds-accent-ink); border-color: var(--ds-accent-soft); }
.ds-top-bar__action[data-tone="upgrade"]:hover { background: var(--ds-accent-tint); }
/* AI entry point: tertiary until invoked — outlined, sparkle in the second accent */
.ds-top-bar__action[data-tone="ai"] svg { color: var(--ds-accent-2-ink); }
.ds-top-bar__action:disabled, .ds-top-bar__action[aria-disabled="true"] { background: var(--ds-surface-3); color: var(--ds-ink-faint); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; }
.ds-top-bar__action[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.ds-top-bar__action[aria-busy="true"]::after {
  content: ""; position: absolute;
  inset-inline-start: calc(50% - var(--ds-icon-size) / 2); inset-block-start: calc(50% - var(--ds-icon-size) / 2);
  inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size);
  border-radius: var(--ds-radius-pill); border: 2px solid transparent;
  border-block-start-color: var(--ds-ink-on-primary); border-inline-end-color: var(--ds-ink-on-primary);
  animation: ds-top-bar-spin var(--ds-dur-slow) linear infinite;
}
@keyframes ds-top-bar-spin { to { transform: rotate(360deg); } }

.ds-top-bar__icon-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-size-h);
  block-size: var(--ds-size-h);
  padding: 0;
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-button);
  background: transparent;
  color: var(--ds-ink-2);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-top-bar__icon-btn svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); }
.ds-top-bar__icon-btn:hover, .ds-top-bar__icon-btn[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-top-bar__icon-btn[aria-expanded="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); }
.ds-top-bar__icon-btn[data-style="bordered"] { border-color: var(--ds-border); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); }
.ds-top-bar__icon-btn[data-style="bordered"]:hover { border-color: var(--ds-border-strong); }
.ds-top-bar__icon-btn[data-style="bordered"] svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-top-bar__icon-btn:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; }
/* notification dot / count badge on an icon button — composes .ds-notification-dot when it ships */
.ds-top-bar__dot {                 /* PLACEMENT only — compose <span class="ds-notification-dot ds-top-bar__dot" data-tone="live"> (2026-09-20) */
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
}
.ds-top-bar__count {               /* PLACEMENT only — markup is <span class="ds-notification-dot ds-top-bar__count" data-count data-pos="top-end"> (2026-09-20) */
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}
/* avatar — composes .ds-avatar when it ships */
.ds-top-bar__avatar {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--_avatar, var(--ds-control-h-sm));
  block-size: var(--_avatar, var(--ds-control-h-sm));
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-illustration-ground);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
  cursor: pointer;
  overflow: visible;
}
.ds-top-bar__avatar[data-ring="ink"] { outline: var(--ds-border-width) solid var(--ds-ink); outline-offset: 1px; }
/* quota ring (elevenlabs): a conic track drawn OUTSIDE the avatar; --_quota is 0–1 */
.ds-top-bar__avatar[data-ring="quota"]::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(var(--ds-accent) calc(var(--_quota, .6) * 360deg), var(--ds-rule) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), currentColor calc(100% - 2px + .5px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), currentColor calc(100% - 2px + .5px));
}
.ds-top-bar__avatar .ds-top-bar__presence {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  inline-size: 8px; block-size: 8px;
  border-radius: var(--ds-radius-pill); background: var(--ds-presence);
  border: var(--ds-border-width) solid var(--ds-surface);
}
.ds-top-bar__avatar:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
/* small vertical divider between clusters */
.ds-top-bar__divider { inline-size: var(--ds-border-width); block-size: var(--ds-space-5); background: var(--ds-rule-strong); margin-inline: var(--ds-space-1); }

/* -- push-down notice ABOVE the bar (manychat) — reflows the app, not an overlay --- */
.ds-top-bar__notice {
  grid-area: notice;
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-control-h-sm);
  margin-inline: calc(-1 * var(--_pad));
  padding-inline: var(--_pad);
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-top-bar__notice svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; color: var(--ds-ink-muted); }
.ds-top-bar__notice a { color: var(--ds-ink-link); }
.ds-top-bar__notice .ds-top-bar__icon-btn { margin-inline-start: auto; inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); }
.ds-top-bar__notice[data-tone="warning"] { background: var(--ds-warning-tint); color: var(--ds-warning-ink); border-block-end-color: transparent; }
.ds-top-bar__notice[data-tone="warning"] svg { color: var(--ds-warning-ink); }

/* -- secondary row BELOW the bar (hsaj) ------------------------------------- */
.ds-top-bar__subrow {
  grid-area: sub;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-control-h-lg);
  padding-block: var(--ds-space-3);
  margin-inline: calc(-1 * var(--_pad));
  padding-inline: var(--_pad);
  border-block-start: var(--ds-border-width) solid var(--ds-rule);
  background: var(--ds-ground);
}

/* -- states ----------------------------------------------------------------- */
/* scrolled / compact: −8px and the lightest lift, because the bar now floats over content */
.ds-top-bar[data-state="scrolled"] { --_h: calc(var(--ds-topbar-h) - 8px); box-shadow: var(--ds-shadow-lift); background: var(--ds-ground); }
.ds-top-bar[data-sticky] { position: sticky; inset-block-start: 0; }
/* loading identity (page title not yet known): skeleton in the title slot */
.ds-top-bar__skeleton { display: inline-block; inline-size: var(--_skeleton-w, 140px); block-size: var(--ds-icon-size); border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); animation: ds-top-bar-pulse calc(var(--ds-dur-slow) * 4) var(--ds-ease-standard) infinite alternate; }
@keyframes ds-top-bar-pulse { to { opacity: .45; } }

/* ============================================================================
   VARIANTS
   ========================================================================== */
/* descript: 60px warm chrome (ground-2), 870×36 tint search centred, promo outlined + avatar + help w/ dot; no rule */
.ds-top-bar[data-variant="descript-centred-search"] { --_h: calc(var(--ds-topbar-h) + 4px); --_bg: var(--ds-ground-2); --_rule: transparent; --_center-max: 870px; --_gap: var(--ds-space-3); }
.ds-top-bar[data-variant="descript-centred-search"] .ds-top-bar__logo { background: transparent; color: var(--ds-ink); }

/* retool: 40px surface, hairline; logo · toggle · 13/600 title; 530×28 ⌘K search; avatar w/ presence · 3 bordered 28px icon buttons · one filled primary */
.ds-top-bar[data-variant="retool-command-bar"] { --_h: calc(var(--ds-topbar-h) - 16px); --_bg: var(--ds-surface); --_center-max: 530px; --_pad: var(--ds-space-3); }
.ds-top-bar[data-variant="retool-command-bar"] .ds-top-bar__title { font-size: var(--ds-text-sm); }
.ds-top-bar[data-variant="retool-command-bar"] .ds-top-bar__logo { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); }

/* clickup: 40px on the window ground, hairline; switcher pill + calendar; 200px "Search ⌘K" pill + sparkle; 3 quick icons + avatar w/ presence + chevron */
.ds-top-bar[data-variant="clickup-three-zone"] { --_h: calc(var(--ds-topbar-h) - 16px); --_bg: var(--ds-ground); --_center-max: 200px; --_pad: var(--ds-space-3); }

/* manychat title-only: 60px on the ground, hairline, 24/700 title, nothing else */
.ds-top-bar[data-variant="manychat-title-only"],
.ds-top-bar[data-variant="manychat-title-centred-search"] { --_h: calc(var(--ds-topbar-h) + 4px); --_bg: var(--ds-ground); --_pad: var(--ds-space-6); }
.ds-top-bar[data-variant="manychat-title-only"] .ds-top-bar__title,
.ds-top-bar[data-variant="manychat-title-centred-search"] .ds-top-bar__title { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-display-tracking); }
.ds-top-bar[data-variant="manychat-title-centred-search"] { --_center-max: 380px; }

/* confluence: 48px surface, hairline; the search's LEFT EDGE sits on the rail edge; Create (filled) + Upgrade (outlined) + 3 icons + avatar */
.ds-top-bar[data-variant="confluence-split-at-rail-edge"] { --_h: calc(var(--ds-topbar-h) - 8px); --_bg: var(--ds-surface); --_cols: var(--_rail-w) minmax(0, 1fr) auto; --_pad: var(--ds-space-3); }
.ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__start { margin-inline-start: calc(-1 * var(--_pad)); padding-inline-start: var(--_pad); }
.ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__center { justify-content: flex-start; }
.ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__logo { background: var(--ds-accent); color: var(--ds-ink-on-accent); border-radius: var(--ds-radius-xs); }

/* navattic: 56px INSIDE the sheet, soft rule; breadcrumb with interactive leaf; one "Support" link right */
.ds-top-bar[data-variant="navattic-breadcrumb-bar"] { --_bg: var(--ds-surface); --_rule: var(--ds-rule-soft); --_pad: var(--ds-space-6); }

/* elevenlabs: 48px surface, soft rule; collapse icon + page title; text actions (r12) → icon actions → avatar w/ quota ring */
.ds-top-bar[data-variant="elevenlabs-slim-utility"] { --_h: calc(var(--ds-topbar-h) - 8px); --_bg: var(--ds-surface); --_rule: var(--ds-rule-soft); --_pad: var(--ds-space-3); }
.ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__action,
.ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__icon-btn[data-style="bordered"] { border-radius: var(--ds-radius-lg); }
.ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__title { font-size: var(--ds-text-md); }

/* contra: 64px surface, soft shadow instead of a rule, NO title; upgrade pill → badged icons → 36px avatar; 24px gaps */
.ds-top-bar[data-variant="contra-utility-only"] { --_h: calc(var(--ds-topbar-h) + 8px); --_bg: var(--ds-surface); --_rule: transparent; --_gap: var(--ds-space-6); --_pad: var(--ds-space-6); box-shadow: var(--ds-shadow-lift); }
.ds-top-bar[data-variant="contra-utility-only"] .ds-top-bar__avatar { --_avatar: var(--ds-control-h); }

/* plane: 52px frame ground (ground-2) shared with the rail, no rule; black logo tile + name ⌄; 420×32 scope-naming search; AI pill + avatar */
.ds-top-bar[data-variant="plane-switcher-search-utilities"] { --_h: calc(var(--ds-topbar-h) - 4px); --_bg: var(--ds-ground-2); --_rule: transparent; --_center-max: 420px; }

/* origin: page title 32/500 left; promo pill → outlined pill (mono caps) → help → bell (dot) → avatar w/ ink ring; 44px controls (data-size="lg" in markup); no rule, on the ground */
.ds-top-bar[data-variant="origin-title-utility-cluster"] { --_h: calc(var(--ds-topbar-h) + 16px); --_bg: var(--ds-ground); --_rule: transparent; --_gap: var(--ds-space-3); --_pad: var(--ds-space-8); }
.ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__title { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-display-tracking); }
.ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__action { border-radius: var(--ds-radius-pill); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); letter-spacing: .1em; text-transform: uppercase; border-color: var(--ds-border-strong); background: transparent; box-shadow: none; }
.ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__action[data-tone="promo"] { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; }
.ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__icon-btn { border-radius: var(--ds-radius-pill); }

/* luma: 66px transparent — NO fill, NO rule; brand outside the container, nav aligned to the container edge; clock + tz, text CTA, search + bell icons, 28px avatar */
.ds-top-bar[data-variant="luma-transparent-with-clock"] { --_h: calc(var(--ds-topbar-h) + 10px); --_bg: transparent; --_rule: transparent; --_pad: var(--ds-space-8); --_cols: auto minmax(0, 1fr) auto; }
.ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__center { justify-content: flex-start; padding-inline-start: var(--ds-gutter-page); }
.ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__avatar { --_avatar: calc(var(--ds-control-h-sm) - 4px); }
.ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__logo { border-radius: var(--ds-radius-pill); }

/* hsaj: 80px surface, hairline; title 26/600 left, exactly ONE 44px primary right; secondary actions on a lighter row beneath */
.ds-top-bar[data-variant="hsaj-title-cta"] { --_h: calc(var(--ds-topbar-h) + 24px); --_bg: var(--ds-surface); --_pad: var(--ds-space-6); }
.ds-top-bar[data-variant="hsaj-title-cta"] .ds-top-bar__title { font-size: var(--ds-text-2xl); }
.ds-top-bar[data-variant="hsaj-title-cta"] .ds-top-bar__subrow { background: var(--ds-surface); border-block-start: 0; }

/* -- policy axes: an uppercase label lane never reaches titles or buttons (R8) ---- */
.ds-top-bar__title { text-transform: none; }

/* -- mobile: the centre slot drops to its own row under the bar; a text nav wraps (or scrolls: data-nav) --- */
@media (max-width: 720px) {
  /* the utility cluster keeps its full width (auto track) and the identity zone takes what is left and
     truncates — a cluster that cannot shrink must never be laid over the title. Keep the mobile cluster
     to primary + ≤2 icons + avatar: upsell/promo pills and anything marked data-mobile="hide" leave it
     (elevenlabs: "icon-collapsible" cluster) */
  .ds-top-bar { --_cols: minmax(0, 1fr) auto; --_gap: var(--ds-space-1); column-gap: var(--ds-space-3); grid-template-areas: "notice notice" "start end" "center center" "sub sub"; --_pad: var(--ds-space-4); }
  .ds-top-bar[data-search="center"], .ds-top-bar[data-variant] { --_cols: minmax(0, 1fr) auto; }
  .ds-top-bar__action[data-tone="promo"], .ds-top-bar__action[data-tone="upgrade"], .ds-top-bar [data-mobile="hide"] { display: none; }
  .ds-top-bar__end { flex-wrap: nowrap; }
  .ds-top-bar__center { min-height: 0; padding-block: 0 var(--ds-space-3); justify-content: stretch; }
  .ds-top-bar__center:empty { display: none; }
  .ds-top-bar__center > .ds-global-search { max-inline-size: 100%; }
  .ds-top-bar__switcher { max-inline-size: 160px; }
  .ds-top-bar__clock, .ds-top-bar__status { display: none; }
  .ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__start { margin-inline-start: 0; padding-inline-start: 0; }
  .ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__center { padding-inline-start: 0; }
  /* text nav under 720 (DESK-327 — at 390 the 4th route was cut off): the nav owns the centre ROW, links condense
     (tighter inset) and, by default, WRAP to a second line so every route stays visible and tappable.
     data-nav="scroll" on the root keeps one line that scrolls sideways with an end fade instead (5+ routes). */
  .ds-top-bar__nav { flex-wrap: wrap; row-gap: 0; justify-content: flex-start; margin-inline: calc(-1 * var(--ds-space-2)); }
  .ds-top-bar__nav-link { padding-inline: var(--ds-space-2); }
  .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--ds-space-8)), transparent);
            mask-image: linear-gradient(to right, currentColor calc(100% - var(--ds-space-8)), transparent);
  }
  .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav::-webkit-scrollbar { display: none; }
  .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav-link { flex: none; }
  .ds-top-bar__account { gap: var(--ds-space-2); padding-inline-start: var(--ds-space-2); }
}


/* components/button-primary/button-primary.css */
/* ============================================================================
   components/button-primary/button-primary.css — Primary button (core · S1)
   Root `.ds-button-primary` is the <button> (or <a role="button">) itself.
   THE one filled control in a view (R3 / button-hierarchy-rule). The fill
   source is the variant axis: unmarked/jstov paints --ds-primary-fill (ink in
   ledger/paper/noir, accent in workbench/seeded — the theme decides);
   `filled-ink` forces the inverse surface; `filled-accent` forces the accent.
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_h --_pad-x --_radius
   --_w --_lift --_gap --_icon.
   ========================================================================== */

.ds-button-primary {
  --_h:      var(--ds-size-h);                                  /* 36 · 32 sm · 44 lg · ×density   */
  --_pad-x:  calc(var(--ds-size-pad-x) + var(--ds-space-1));    /* 16 · 14 sm · 20 lg — 4 more than an input so the label breathes */
  --_radius: var(--ds-radius-button);                           /* sm (6×scale) or pill via data-buttons */
  --_w:      auto;                                              /* instance width: style="--_w: 100%"    */
  --_gap:    var(--ds-space-2);                                 /* icon ↔ label                            */
  --_icon:   var(--ds-icon-size);                               /* 16                                      */
  --_lift:   0 0 0 0 transparent;                               /* rest: no lift; navattic-tactile → --ds-shadow-lift */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  width: var(--_w);
  max-width: 100%;
  min-width: 0;
  min-height: var(--_h);
  padding-inline: var(--_pad-x);
  padding-block: 0;
  font-family: inherit;
  font-size: var(--ds-size-text);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: 0;
  text-transform: var(--ds-control-case);        /* never uppercase by a label policy (R8) */
  text-decoration: none;
  white-space: nowrap;
  color: var(--ds-ink-on-primary);
  background: var(--ds-primary-fill);
  border: var(--ds-border-width) solid var(--ds-primary-border);
  border-radius: var(--_radius);
  /* 1px inner top highlight (transparent in base; workbench sets it) + optional lift */
  box-shadow: inset 0 var(--ds-border-width) 0 0 var(--ds-primary-highlight), var(--_lift, var(--ds-shadow-lift));
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
              border-color var(--ds-dur-fast) var(--ds-ease-standard),
              box-shadow var(--ds-dur-fast) var(--ds-ease-standard),
              color var(--ds-dur-fast) var(--ds-ease-standard);
}

/* ---- parts ---------------------------------------------------------------- */
.ds-button-primary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-button-primary__icon {
  flex: none;
  display: inline-flex;
  width: var(--_icon);
  height: var(--_icon);
}
.ds-button-primary__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;               /* _base.css sets svg{fill:currentColor} — restate */
  stroke-width: var(--ds-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
/* trailing arrow/chevron nudges outward so the optical margin matches the leading side */
.ds-button-primary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); }
.ds-button-primary__icon[data-slot="leading"]  { margin-inline-start: calc(-1 * var(--ds-space-0-5)); }

/* ---- states ------------------------------------------------------------------ */
.ds-button-primary:hover,
.ds-button-primary[data-state="hover"] { background: var(--ds-primary-fill-hover); }
.ds-button-primary:active,
.ds-button-primary[data-state="pressed"] {
  background: var(--ds-primary-fill-hover);
  --_lift: 0 0 0 0 transparent;                  /* pressed = sits down: lift gone, highlight gone */
  box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--_lift, var(--ds-shadow-lift));
}
/* focus: the universal ring from _base.css, redrawn here at +2px so it clears the fill */
.ds-button-primary:focus-visible,
.ds-button-primary[data-state="focus"] {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
}
/* disabled: faint ink on surface-3, rule border, no lift/highlight, still visible */
.ds-button-primary:disabled,
.ds-button-primary[aria-disabled="true"] {
  color: var(--ds-ink-faint);
  background: var(--ds-surface-3);
  border-color: var(--ds-rule);
  box-shadow: inset 0 0 0 0 transparent, var(--_lift, var(--ds-shadow-lift));
  --_lift: 0 0 0 0 transparent;
  cursor: not-allowed;
}
/* loading: keep the footprint, hide the content, centre a spinner in currentColor */
.ds-button-primary[aria-busy="true"] { pointer-events: none; }
.ds-button-primary[aria-busy="true"] > * { visibility: hidden; }
.ds-button-primary[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--_icon);
  height: var(--_icon);
  border: 2px solid transparent;
  border-block-start-color: currentColor;
  border-inline-end-color: currentColor;
  border-radius: var(--ds-radius-pill);
  animation: ds-button-primary-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-button-primary-spin { to { transform: rotate(360deg); } }

/* ---- sizes: data-size on the root or an ancestor toolbar ------------------- */
.ds-button-primary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); }
.ds-button-primary[data-size="sm"] { --_icon: var(--ds-icon-size); }
.ds-button-primary[data-size="lg"] { --_icon: var(--ds-icon-size-row); }

/* ============================================================================
   VARIANTS — each designer's approach by name. Unmarked root = jstov (house):
   --ds-primary-fill (ink by default, theme-switchable to accent), 36 tall,
   radius-button, one per view, no lift.
   ========================================================================== */

/* filled-ink — near-black neutral fill so the accent stays free for state and data
   [braintrust-web-13] [v0-web-8] [hsajlzjwgaajrfp] [descript-editing-profile-00-03]
   [origin-connecting-an-account-00-04] [clickup-web-147] [contra-web-39] [vercel-page]
   [attio-2-1-830x8225] [intercom-3-830x8816] [fibery-3-830x6495] [navattic-web-88].
   Forces the inverse surface even in an accent-primary theme (workbench). */
.ds-button-primary[data-variant="filled-ink"] {
  color: var(--ds-ink-inverse);
  background: var(--ds-surface-inverse);
  border-color: transparent;
}
.ds-button-primary[data-variant="filled-ink"]:hover,
.ds-button-primary[data-variant="filled-ink"][data-state="hover"],
.ds-button-primary[data-variant="filled-ink"]:active {
  background: color-mix(in srgb, var(--ds-surface-inverse) 86%, var(--ds-ink-inverse));
}

/* filled-accent — brand-hue fill, white label [luma-creating-an-event-24-27]
   [manychat-web-126] [manychat-web-42] [retool-web-25] [grammarly-web-158-acordian]
   [confluence-web-23] [jasper-web-19] [perplexity-asking-a-question-05-09] [sequence-section].
   Legal only under data-accent-scope="action" | "all" (R12). */
.ds-button-primary[data-variant="filled-accent"] {
  color: var(--ds-ink-on-accent);
  background: var(--ds-accent);
  border-color: transparent;
}
.ds-button-primary[data-variant="filled-accent"]:hover,
.ds-button-primary[data-variant="filled-accent"][data-state="hover"],
.ds-button-primary[data-variant="filled-accent"]:active { background: var(--ds-accent-hover); }

/* full-width-terminal — spans the form column, 52 tall, 2.5× the form gap above it,
   no cancel beside it [luma-creating-an-event-24-27] [clickup-web-147]
   [origin-connecting-an-account-00-04]; jasper centres it content-width instead. */
.ds-button-primary[data-variant="full-width-terminal"] {
  --_w: 100%;
  --_h: calc(var(--ds-control-h-lg) + var(--ds-space-2));     /* 44 + 8 = 52 */
  --_pad-x: var(--ds-space-6);
  --_icon: var(--ds-icon-size-row);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  margin-block-start: calc(var(--ds-field-pitch) * 2.5);      /* 40 at 16 pitch: the CTA's clearance */
}
.ds-button-primary[data-variant="full-width-terminal"][data-align="center"] {
  --_w: auto;
  min-width: calc(var(--_h) * 4);                             /* jasper: content-width, centred by the parent */
}

/* over-wide — the label needs ~70px; the box is 4× its height (147 at 36) so width
   itself signals primacy [manychat-web-82] [manychat-web-109] */
.ds-button-primary[data-variant="over-wide"] { min-width: calc(var(--_h) * 4); }

/* navattic-tactile — fill + 1px darker border + 1px inner top highlight + 1px lift
   [navattic-web-174] [sequence-section adds a 2px tinted halo on the pill].
   --ds-primary-border / --ds-primary-highlight are theme-owned; base leaves them
   transparent, so on a neutral page this variant differs only by the lift. */
.ds-button-primary[data-variant="navattic-tactile"] {
  --_lift: var(--ds-shadow-lift);
  border-color: color-mix(in srgb, var(--ds-primary-fill) 70%, var(--ds-ink));
  box-shadow: inset 0 var(--ds-border-width) 0 0 color-mix(in srgb, var(--ds-ink-on-primary) 18%, transparent),
              var(--_lift, var(--ds-shadow-lift));
}
.ds-button-primary[data-variant="navattic-tactile"]:active {
  box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--ds-shadow-lift);
  --_lift: 0 0 0 0 transparent;
}

/* synara-solid-pill — 40px black pill, 15–16px medium label, trailing icon [hsvu79cweaarswf] */
.ds-button-primary[data-variant="synara-solid-pill"] {
  --_h: calc(var(--ds-control-h) + var(--ds-space-1));        /* 36 + 4 = 40 */
  --_pad-x: var(--ds-space-5);
  --_radius: var(--ds-radius-pill);
  font-size: var(--ds-text-lg);
}

/* perplexity-circular-submit — a disc the height of the control; the enabled state is
   the page's ONLY saturated fill, disabled = tint disc + faint glyph
   [perplexity-asking-a-question-00-04] */
.ds-button-primary[data-variant="perplexity-circular-submit"] {
  --_pad-x: 0;
  --_radius: var(--ds-radius-pill);
  --_w: var(--_h);
  aspect-ratio: 1;
  color: var(--ds-ink-on-accent);
  background: var(--ds-accent);
  border-color: transparent;
}
.ds-button-primary[data-variant="perplexity-circular-submit"]:hover { background: var(--ds-accent-hover); }
.ds-button-primary[data-variant="perplexity-circular-submit"]:disabled {
  color: var(--ds-ink-faint);
  background: var(--ds-surface-2);
  border-color: transparent;
}

/* grid-snapped-fixed-width — 144×32, r4, 13px semibold; Retool buttons snap to the
   app grid instead of hugging the label [retool-web-25] */
.ds-button-primary[data-variant="grid-snapped-fixed-width"] {
  --_h: var(--ds-control-h-sm);
  --_w: calc(var(--ds-control-h-sm) * 4.5);                   /* 144 at 32 */
  --_radius: var(--ds-radius-xs);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
}


/* components/button-secondary/button-secondary.css */
/* ============================================================================
   components/button-secondary/button-secondary.css — Secondary / tertiary
   buttons (core · S1). Root `.ds-button-secondary` is the <button> itself; it
   shares button-primary's geometry (height ladder, 16px padding, radius-button,
   icon slots) and NEVER paints --ds-primary-fill — hierarchy is by fill only:
   outline (default) → tint → ghost. `data-tone="danger"` recolours any variant
   to --ds-danger-ink text (outline shape kept — never a filled red).
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_h --_pad-x --_radius
   --_w --_gap --_icon.
   ========================================================================== */

.ds-button-secondary {
  --_h:      var(--ds-size-h);
  --_pad-x:  calc(var(--ds-size-pad-x) + var(--ds-space-1));    /* 16 at md — matches button-primary */
  --_radius: var(--ds-radius-button);
  --_w:      auto;
  --_gap:    var(--ds-space-2);
  --_icon:   var(--ds-icon-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  width: var(--_w);
  max-width: 100%;
  min-width: 0;
  min-height: var(--_h);
  padding-inline: var(--_pad-x);
  padding-block: 0;
  font-family: inherit;
  font-size: var(--ds-size-text);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: 0;
  text-transform: var(--ds-control-case);
  text-decoration: none;
  white-space: nowrap;
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--_radius);
  box-shadow: var(--ds-shadow-lip);               /* 0 in base; 1px darker bottom edge when the theme sets --ds-control-lip */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
              border-color var(--ds-dur-fast) var(--ds-ease-standard),
              box-shadow var(--ds-dur-fast) var(--ds-ease-standard),
              color var(--ds-dur-fast) var(--ds-ease-standard);
}

/* ---- parts ---------------------------------------------------------------- */
.ds-button-secondary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-button-secondary__icon {
  flex: none;
  display: inline-flex;
  width: var(--_icon);
  height: var(--_icon);
}
.ds-button-secondary__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: var(--ds-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-button-secondary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); }
.ds-button-secondary__icon[data-slot="leading"]  { margin-inline-start: calc(-1 * var(--ds-space-0-5)); }
/* a live dot inside the icon slot ("Record"): semantic colour, 8px */
.ds-button-secondary__dot {
  flex: none;
  width: var(--ds-space-2);
  height: var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-live);
}

/* ---- states (outline default) ---------------------------------------------- */
.ds-button-secondary:hover,
.ds-button-secondary[data-state="hover"] {
  border-color: var(--ds-border-strong);
  background: var(--ds-hover-bg);                /* surface-hover under tint, surface under lift */
}
/* data-hover="lift": the row lifts instead of tinting. Selected on the attribute because
   --ds-hover-shadow is `none` under tint and `none` cannot sit inside a shadow list. */
[data-hover="lift"] .ds-button-secondary:hover,
[data-hover="lift"] .ds-button-secondary[data-state="hover"] { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); }
.ds-button-secondary:active,
.ds-button-secondary[data-state="pressed"] {
  background: var(--ds-surface-pressed, var(--ds-surface-3));   /* pressed = --ds-surface-pressed (§13.4); was surface-2, lighter than hover on base */
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-lip);
}
.ds-button-secondary:focus-visible,
.ds-button-secondary[data-state="focus"] {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
}
/* pressed-toggle (aria-pressed): neutral selected tint, never the accent (rule 3) */
.ds-button-secondary[aria-pressed="true"],
.ds-button-secondary[aria-expanded="true"] {
  background: var(--ds-selected-bg);
  color: var(--ds-selected-ink);
  border-color: var(--ds-border-strong);
}
/* disabled: fill / border / text all step lighter [manychat-web-42] */
.ds-button-secondary:disabled,
.ds-button-secondary[aria-disabled="true"] {
  color: var(--ds-ink-faint);
  background: var(--ds-surface-3);
  border-color: var(--ds-rule);
  box-shadow: none;
  cursor: not-allowed;
}
/* loading: footprint kept, content hidden, spinner in currentColor */
.ds-button-secondary[aria-busy="true"] { pointer-events: none; }
.ds-button-secondary[aria-busy="true"] > * { visibility: hidden; }
.ds-button-secondary[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--_icon);
  height: var(--_icon);
  border: 2px solid transparent;
  border-block-start-color: currentColor;
  border-inline-end-color: currentColor;
  border-radius: var(--ds-radius-pill);
  animation: ds-button-secondary-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-button-secondary-spin { to { transform: rotate(360deg); } }

/* ---- danger tone: same shape, --ds-danger-ink text; hover = danger tint ------ */
.ds-button-secondary[data-tone="danger"],
.ds-button-secondary[data-variant="danger-text"] { color: var(--ds-danger-ink); }
.ds-button-secondary[data-tone="danger"]:hover,
.ds-button-secondary[data-variant="danger-text"]:hover,
.ds-button-secondary[data-tone="danger"][data-state="hover"],
.ds-button-secondary[data-variant="danger-text"][data-state="hover"] {
  background: var(--ds-danger-tint);
  border-color: var(--ds-danger);
  color: var(--ds-danger-ink);
}
.ds-button-secondary[data-tone="danger"]:focus-visible,
.ds-button-secondary[data-variant="danger-text"]:focus-visible { outline-color: var(--ds-danger); }

/* ---- sizes ------------------------------------------------------------------- */
.ds-button-secondary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); }
.ds-button-secondary[data-size="lg"] { --_icon: var(--ds-icon-size-row); }

/* ============================================================================
   VARIANTS. Unmarked root = jstov (house): outlined-white — --ds-surface fill,
   1px --ds-border (the contract's control border; the taxonomy's "rule-strong"
   is the same grade in ledger), 36 tall, radius-button, the control lip when the
   theme has one. tint-fill for in-card quiet actions; danger = tone.
   ========================================================================== */

/* outlined-white — 1px rule, white fill [descript-editing-profile-00-03] [jasper-web-19]
   [manychat-web-42] [retool-web-25] [clickup-web-147] [contra-web-39]: identical to the
   unmarked root (the house default); the attribute exists so the reference name selects it. */

/* outlined-lip — border + the 1px lift shadow shared with inputs so a toolbar row aligns
   [navattic-web-174] [navattic-web-153] [manychat-web-126] */
.ds-button-secondary[data-variant="outlined-lip"] {
  --_h: var(--ds-control-h-sm);
  --_pad-x: var(--ds-space-3);
  box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift);
}
.ds-button-secondary[data-variant="outlined-lip"]:hover { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); }

/* outlined-mono-caps-pill — 44–46 px pill, darker 1px border, label lane in mono caps
   with +0.12em tracking, 16px leading icon [origin-connecting-an-account-00-04]
   [origin-connecting-an-account-05-06]. Case is applied HERE (a designer variant),
   not by --ds-label-case (R8). */
.ds-button-secondary[data-variant="outlined-mono-caps-pill"] {
  --_h: var(--ds-control-h-lg);                                /* 44 (46 at origin's 16px base) */
  --_pad-x: var(--ds-space-6);
  --_radius: var(--ds-radius-pill);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-color: var(--ds-border-strong);
  background: transparent;
}
.ds-button-secondary[data-variant="outlined-mono-caps-pill"]:hover { background: var(--ds-hover-bg); border-color: var(--ds-ink-muted); }

/* tint-fill — one tint step, no border, no shadow [perplexity-asking-a-question-00-04]
   32px "Learn More" · [luma-creating-an-event-24-27] 229×36 #f4f4f4 r8 ·
   [luma-creating-an-event-00-03] 50px "+ Create Event" · [origin-05-06] quiet pill */
.ds-button-secondary[data-variant="tint-fill"] {
  background: var(--ds-surface-2);
  border-color: transparent;
  box-shadow: none;
}
.ds-button-secondary[data-variant="tint-fill"]:hover,
.ds-button-secondary[data-variant="tint-fill"][data-state="hover"] { background: var(--ds-surface-3); border-color: transparent; box-shadow: none; }
.ds-button-secondary[data-variant="tint-fill"]:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); }
.ds-button-secondary[data-variant="tint-fill"]:disabled { background: var(--ds-surface-3); border-color: transparent; }

/* ghost-text — bare label, no container; hover paints the hover tint
   [descript-editing-profile-00-03] [clickup-web-147] [confluence-web-23] quiet card CTAs */
.ds-button-secondary[data-variant="ghost-text"] {
  --_pad-x: var(--ds-space-2);
  color: var(--ds-ink-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.ds-button-secondary[data-variant="ghost-text"]:hover,
.ds-button-secondary[data-variant="ghost-text"][data-state="hover"] { background: var(--ds-hover-bg); border-color: transparent; color: var(--ds-ink); box-shadow: none; }
.ds-button-secondary[data-variant="ghost-text"]:disabled { background: transparent; border-color: transparent; }

/* glass — frosted control over media: --ds-glass-fill + --ds-glass-border + blur,
   40px pill, leading glyph [hsvu79cweaarswf]. Text is --ds-ink: the glass fill follows
   the mode (light glass in light, dark glass in dark) so the pair always reads. */
.ds-button-secondary[data-variant="glass"] {
  --_h: calc(var(--ds-control-h) + var(--ds-space-1));        /* 40 */
  --_pad-x: var(--ds-space-5);
  --_radius: var(--ds-radius-pill);
  font-size: var(--ds-text-lg);
  color: var(--ds-ink);
  background: var(--ds-glass-fill);
  border-color: var(--ds-glass-border);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  backdrop-filter: blur(var(--ds-glass-blur));
}
.ds-button-secondary[data-variant="glass"]:hover { background: var(--ds-glass-fill); border-color: var(--ds-ink); box-shadow: none; }

/* hsaj-full-width-ghost — input-shaped 48px white bar, radius-md, leading icon, full width
   [hsajlzkwuaagtdc]. Reference weakness: indistinguishable from disabled; here the
   rest state keeps --ds-border + ink while disabled drops to --ds-rule + faint. */
.ds-button-secondary[data-variant="hsaj-full-width-ghost"] {
  --_w: 100%;
  --_h: calc(var(--ds-control-h) + var(--ds-space-3));        /* 48 */
  --_pad-x: var(--ds-space-4);
  --_radius: var(--ds-radius-md);
  --_icon: var(--ds-icon-size-row);
  justify-content: flex-start;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-regular);
  box-shadow: none;
}

/* ink-outline — 1px INK border (not the rule grade), 34px, radius-md, 600 label; reads as a
   control against #ddd chips [airbnb-web-528] */
.ds-button-secondary[data-variant="ink-outline"] {
  --_h: calc(var(--ds-control-h-sm) + var(--ds-space-0-5));   /* 34 */
  --_radius: var(--ds-radius-md);
  font-weight: var(--ds-weight-semibold);
  border-color: var(--ds-ink);
  box-shadow: none;
}
.ds-button-secondary[data-variant="ink-outline"]:hover { border-color: var(--ds-ink); background: var(--ds-hover-bg); box-shadow: none; }

/* dark-ghost — on a dark chapter: one tint step up + its own border
   [attio-2-1-830x8225] #1c1c1e fill / #2e2f31 border. Token-wise it is surface-2 +
   border inside a data-mode="dark" island, which is how the demo shows it. */
.ds-button-secondary[data-variant="dark-ghost"] {
  background: var(--ds-surface-2);
  border-color: var(--ds-border);
  box-shadow: none;
}
.ds-button-secondary[data-variant="dark-ghost"]:hover { background: var(--ds-surface-3); border-color: var(--ds-border-strong); box-shadow: none; }

/* danger-text — red text only, same outline shape as its sibling [manychat-web-64] "Stop"
   beside "Edit"; [descript-editing-profile-00-03] danger link. Rules live in the tone
   block above; the attribute is kept so the reference name selects it. */


/* components/accordion/accordion.css */
/* ============================================================================
   accordion — accordion / disclosure                  (taxonomy §D · common · S1)
   Root: <div class="ds-accordion"> holding native <details class="ds-accordion__item"> items
   Parts: __item (details; `name` groups them single-open; `open` = first-open-by-default) ·
          __header (summary: the whole row is the control) · __marker (the disclosure glyph slot: chevron,
          ± or ▸; reserved even when absent so labels align — quicken) · __title · __meta (count / status /
          one-line preview) · __body (the panel) · __footer (grammarly record strip: meta left, icon actions right)
          · __icon-btn (footer icon action)
   Variants (data-variant): grammarly-tint-row-lifts-to-card · heron-audience-plus-minus ·
     navattic-88-inspector-tint-when-open · v0-disclosure-section-header · clickup-sidebar-collapsible-header ·
     attio-no-chevron · synara-recap-collapsible · jstov-faq-rows (the L-FAQ-01 house rows) · quicken-fill-nested-tree
     (depth by alternating fills). (perplexity-self-collapsing-progress lives in §I progress-accordion.)
   Default (unmarked root, data-variant="default"): hairline-separated rows, one disclosure glyph (a stroked chevron:
     › collapsed / ˅ expanded — v0's grammar), header --ds-control-h-lg (44), body on the same surface.
   Glyph rule: ONE disclosure glyph per product (grammarly's weakness: triangle + chevron + "<" on one screen).
   Private knobs: --_h --_pad-x --_gap --_rule --_header-bg --_header-bg-open --_ink --_marker-w --_body-pad
   ========================================================================== */

.ds-accordion svg[fill="none"] { fill: none; }

.ds-accordion {
  --_h:              var(--ds-control-h-lg);     /* 44 default · 40 compact · 52 comfortable (corpus 36–60) */
  --_pad-x:          var(--ds-space-3);
  --_gap:            var(--ds-space-3);
  --_rule:           var(--ds-rule);
  --_header-bg:      transparent;
  --_header-bg-open: transparent;
  --_ink:            var(--ds-ink);
  --_marker-w:       var(--ds-icon-size);
  --_body-pad:       var(--ds-space-4);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--_ink);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-body);
}
.ds-accordion__item { min-width: 0; border-block-end: var(--ds-border-width) solid var(--_rule); }
.ds-accordion__item:last-child { border-block-end: 0; }
.ds-accordion[data-rules="around"] .ds-accordion__item:first-child { border-block-start: var(--ds-border-width) solid var(--_rule); }
.ds-accordion[data-rules="around"] .ds-accordion__item:last-child { border-block-end: var(--ds-border-width) solid var(--_rule); }

/* ---- header: the summary IS the control ---- */
.ds-accordion__header {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  min-height: var(--_h);
  padding-inline: var(--_pad-x);
  padding-block: var(--ds-space-2);
  list-style: none;                                 /* no native marker — __marker is the one glyph */
  cursor: pointer;
  background: var(--_header-bg);
  border-radius: var(--ds-radius-sm);
  color: var(--_ink);
  font-weight: var(--ds-weight-medium);
  -webkit-user-select: none; user-select: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-accordion__header::-webkit-details-marker { display: none; }
.ds-accordion__header::marker { content: ""; }
.ds-accordion__header:hover,
.ds-accordion__header[data-state="hover"] { background: var(--ds-hover-bg); }
.ds-accordion__item[open] > .ds-accordion__header { background: var(--_header-bg-open); }
.ds-accordion__item[open] > .ds-accordion__header:hover { background: var(--ds-hover-bg); }
.ds-accordion__header:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); }   /* ring inside the row so hairlines stay aligned */

.ds-accordion__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-accordion__meta  { flex: 0 0 auto; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-accordion__meta[data-tone="success"] { color: var(--ds-success-ink); }
.ds-accordion__meta[data-tone="warning"] { color: var(--ds-warning-ink); }
.ds-accordion__meta[data-tone="danger"]  { color: var(--ds-danger-ink); }

/* the ONE disclosure glyph: a stroked chevron, › collapsed → ˅ expanded (rotates 90°) */
.ds-accordion__marker {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_marker-w); height: var(--_marker-w);
  color: var(--ds-ink-muted);
  order: 2;                                          /* trailing by default (grammarly, navattic, v0, heron) */
  transition: transform var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-accordion__marker svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(90deg); }
.ds-accordion__header:hover .ds-accordion__marker { color: var(--ds-ink); }
/* reserved LEADING slot (quicken): labels start at the same x whether or not a row can expand */
.ds-accordion[data-marker="start"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); }
.ds-accordion[data-marker="start"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; }

/* ---- body ---- */
.ds-accordion__body {
  padding: var(--ds-space-1) var(--_pad-x) var(--_body-pad);
  color: var(--ds-ink-2);
  min-width: 0;
}
.ds-accordion[data-marker="start"] .ds-accordion__body { padding-inline-start: calc(var(--_pad-x) + var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); }
.ds-accordion__body > * + * { margin-block-start: var(--ds-space-3); }
.ds-accordion__body p { max-width: var(--ds-measure); }
/* open/close motion (engines with ::details-content); reduced motion collapses --ds-dur-* to 0 */
@supports (interpolate-size: allow-keywords) {
  .ds-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--ds-dur-base) var(--ds-ease-standard), content-visibility var(--ds-dur-base) allow-discrete; }
  .ds-accordion__item[open]::details-content { block-size: auto; }
  .ds-accordion { interpolate-size: allow-keywords; }
}

/* ---- states ---- */
.ds-accordion__item[aria-disabled="true"] > .ds-accordion__header { color: var(--ds-ink-faint); cursor: not-allowed; pointer-events: none; background: var(--ds-surface-3); }
.ds-accordion__item[aria-disabled="true"] > .ds-accordion__header .ds-accordion__marker { color: var(--ds-ink-faint); }
.ds-accordion__item[aria-busy="true"] .ds-accordion__body > *,
.ds-accordion__body[aria-busy="true"] > * { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); }
.ds-accordion__item[aria-busy="true"] .ds-accordion__body > * > *,
.ds-accordion__body[aria-busy="true"] > * > * { visibility: hidden; }
.ds-accordion__body[data-state="empty"] {
  border: var(--ds-border-width) dashed var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  margin: 0 var(--_pad-x) var(--_body-pad);
  padding: var(--ds-space-3);
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-sm);
}
.ds-accordion__body[data-state="error"] { color: var(--ds-danger-ink); }

/* ---- footer strip (grammarly record card): meta left, icon actions right ---- */
.ds-accordion__footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
  margin-inline: calc(-1 * var(--_pad-x)); margin-block-start: var(--_body-pad);
  padding: var(--ds-space-2) var(--_pad-x);
  border-block-start: var(--ds-border-width) solid var(--_rule);
  font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted);
  letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case);
}
.ds-accordion__footer > span { display: inline-flex; gap: var(--ds-space-1); }
.ds-accordion__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ds-control-h-sm); height: var(--ds-control-h-sm);
  border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-button); cursor: pointer; padding: 0;
}
.ds-accordion__icon-btn svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-accordion__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-accordion__icon-btn[data-tone="danger"]:hover { color: var(--ds-danger-ink); background: var(--ds-danger-tint); }

/* =========================================================================
   grammarly-tint-row-lifts-to-card — closed: flat tint bar 36 px r4, no border; open: the same bar becomes
   the header of a framed, shadowed surface body with a footer strip. data-tone="info|danger" picks the tint.
   ========================================================================= */
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] {
  --_h: var(--ds-control-h); --_rule: transparent; --_pad-x: var(--ds-space-4);
  --_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2);
  gap: var(--ds-space-2);
}
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="info"]   { --_header-bg: var(--ds-info-tint);   --_header-bg-open: var(--ds-info-tint);   --_ink: var(--ds-info-ink); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="danger"] { --_header-bg: var(--ds-danger-tint); --_header-bg-open: var(--ds-danger-tint); --_ink: var(--ds-danger-ink); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header:hover { filter: brightness(.97); background: var(--_header-bg); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] {
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-rule);
  box-shadow: var(--ds-shadow-object);              /* the open record lifts like an object off the list */
}
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] > .ds-accordion__header { border-end-start-radius: 0; border-end-end-radius: 0; }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__body { padding: var(--ds-space-5) var(--_pad-x) 0; color: var(--ds-ink-2); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__footer { --_rule: var(--ds-rule); margin-block-start: var(--ds-space-5); padding-block: var(--ds-space-2); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__marker { color: var(--_ink); }

/* =========================================================================
   heron-audience-plus-minus — 60 px rows, dashed dividers, label-lane title (caps when the theme says so),
   + closed / − open glyph, one open, body = one muted sentence
   ========================================================================= */
.ds-accordion[data-variant="heron-audience-plus-minus"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule-strong); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item { border-block-end-style: dashed; }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header { border-radius: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker { color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="vertical"] { display: none; }   /* + becomes − */
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-muted); font-size: var(--ds-text-lg); }

/* =========================================================================
   navattic-88-inspector-tint-when-open — 40–44 px headers 16/600, expanded header takes the surface tint,
   collapsed stays on the surface; 1 px rules between sections; chevron up/down
   ========================================================================= */
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-4); --_header-bg-open: var(--ds-surface-2); --_rule: var(--ds-rule-soft); }
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); }
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); }   /* ˅ → ˄ */
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__marker { transform: rotate(90deg); }                                                   /* rests as ˅ */
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__body { padding-block: var(--ds-space-4); }

/* =========================================================================
   v0-disclosure-section-header / clickup-sidebar-collapsible-header — 13 px muted label + › / ˅ chevron
   in a sidebar; body = a list or a dashed empty footprint
   ========================================================================= */
.ds-accordion[data-variant="v0-disclosure-section-header"],
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-2); --_rule: transparent; --_marker-w: var(--ds-icon-size); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header { color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); padding-block: 0; }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header:hover,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header:hover { color: var(--ds-ink); }
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__marker { order: 2; }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__body,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__body { padding: var(--ds-space-1) 0 var(--ds-space-2); }
.ds-accordion__list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.ds-accordion__list a { display: flex; align-items: center; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); text-decoration: none; font-size: var(--ds-text-sm); }
.ds-accordion__list a:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-accordion__list a[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); }

/* =========================================================================
   attio-no-chevron — hairline between items, title only; kept as the reference drew it (no affordance —
   weakness); the hover tint is the minimum the system adds
   ========================================================================= */
.ds-accordion[data-variant="attio-no-chevron"] { --_h: var(--ds-control-h-lg); --_pad-x: 0px; --_rule: var(--ds-rule); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__marker { display: none; }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__item[open] > .ds-accordion__header { color: var(--ds-ink); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__body { padding: 0 0 var(--ds-space-4); }

/* =========================================================================
   jstov-faq-rows — the L-FAQ-01 house rows (2026-09-20, sections-E): Heron's 60 px pitch with SOLID hairline dividers,
   sentence-case sans titles (never the label lane — R8), the +/− as MONO TEXT glyphs in the trailing slot (`+` closed,
   `−` open: <span data-glyph="plus">+</span><span data-glyph="minus">−</span> inside __marker), one-sentence body in
   ink-2. Named, not the unmarked root: the corpus default stays the in-app disclosure (inspector, sidebar).
   ========================================================================= */
.ds-accordion[data-variant="jstov-faq-rows"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-heading-tracking); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker { font-family: var(--ds-font-mono); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: 1; color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker [data-glyph="minus"] { display: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="plus"]  { display: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="minus"] { display: inline; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-2); font-size: var(--ds-text-md); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body p { max-width: 60ch; }

/* =========================================================================
   quicken-fill-nested-tree — depth by ALTERNATING CONTAINER FILLS, not indent (2026-09-20, sections-E): level 1 = a tint
   band (--ds-surface-2, r-xs, 56 px rows); level 2 = white child cards inset one step inside the band with one-step gaps;
   level 3 = flat rows inside the card. The caret is a small FILLED triangle (▸ → ▾) in the reserved leading slot
   (data-marker="start" is implied by the variant), so labels start at one x whether or not a row expands; a leaf header
   keeps the slot with data-leaf. Nest a .ds-accordion inside __body for the next level. [quicken-web-234-accordoin]
   ========================================================================= */
.ds-accordion[data-variant="quicken-fill-nested-tree"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-3)); --_pad-x: var(--ds-space-2); --_rule: transparent; --_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2); gap: var(--ds-space-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header:hover { background: var(--ds-hover-bg); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); color: var(--ds-ink-muted); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker svg { width: var(--ds-space-3); height: var(--ds-space-3); fill: currentColor; stroke: none; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body { padding: 0 var(--ds-space-2) var(--ds-space-2); color: var(--ds-ink-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > p { padding-inline-start: calc(var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); }
/* level 2: the nested accordion's items are white cards inside the band; level 3: its nested items are flat rows */
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h-lg); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: var(--ds-surface); --_header-bg-open: var(--ds-surface); font-size: var(--ds-text-md); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h); gap: 0; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: transparent; border: 0; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: transparent; --_header-bg-open: transparent; font-size: var(--ds-text-md); color: var(--ds-ink-muted); }

/* =========================================================================
   synara-recap-collapsible — a popover section whose collapsed body is a one-line muted preview; the header
   label is the section label lane with a ⌄
   ========================================================================= */
.ds-accordion[data-variant="synara-recap-collapsible"] { --_h: var(--ds-control-h-sm); --_pad-x: 0px; --_rule: var(--ds-rule); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); padding-block: 0; }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__marker { transform: rotate(90deg); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ds-ink-muted); margin: 0 0 var(--ds-space-2); }   /* margin, not padding: overflow clips at the padding box */
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] + .ds-accordion__preview { display: none; }   /* preview is the details' next sibling */
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__body { padding: 0 0 var(--ds-space-2); color: var(--ds-ink-2); }


/* components/carousel/carousel.css */
/* ============================================================================
   carousel — carousel / shelf                        (taxonomy §D · common · S0)
   Root: <section class="ds-carousel" aria-roledescription="carousel" aria-label="…">
   Parts: (slot: a .ds-section-header with a .ds-pagination in its actions — composed by class) ·
          __viewport (the clipping box; owns the overflow treatment) · __track (ul: the scroll-snap row,
          N-up via --_cols, fixed ratio via --_ratio) · __item (li: one slide/tile) · __tile (a plain media/tint
          tile drawn here so the demo renders before media-tile / tile ship) · __caption (label under a tile) ·
          __marquee (fibery / heron: an animated strip, duplicated content) · __chip (marquee chip)
   Overflow treatments (data-overflow): paged (default — snap pages, no visible scrollbar; the header pager
     moves it) · peek (the next tile is cut at the viewport edge — braintrust; ALSO the only affordance there)
     · fade (end fade — attio) · clip (hard clip — homerun, a weakness kept for reference) · marquee (fibery, heron)
   Variants (data-variant): givingli-shelf-6up · braintrust-peek-3up · manychat-recommendation-2up ·
     homerun-blank-first-template-row · attio-integration-tile-row-endfade · fibery-chip-marquee · heron-benefit-ticker
   Knobs: --_cols (N-up) · --_gap · --_ratio (tile aspect) · --_min-item (floor so phones show ~2.5 tiles) ·
     --_peek (how much of the next tile shows) · --_fade (end-fade length) · --_speed (marquee seconds) ·
     --_ring-room (track inset so a tile's selected outline is never clipped; 4 px) ·
     --_bleed (data-bleed="end": how far the viewport runs into the gutter; 48 px)
   Bleed (data-bleed="end"): the viewport runs --_bleed into the end gutter and the peek spends it (Oku gallery)
   ========================================================================== */

.ds-carousel svg[fill="none"] { fill: none; }

.ds-carousel {
  --_cols:     4;
  --_gap:      var(--ds-space-3);
  --_ratio:    16 / 9;
  --_min-item: 140px;
  --_peek:     0px;
  --_fade:     var(--ds-mock-fade);
  --_speed:    40s;
  --_ring-room: var(--ds-space-1);             /* 4 px: 2 px selected outline + 2 px offset */
  --_bleed:    var(--ds-space-12);             /* data-bleed: how far the viewport runs into the gutter */
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
  max-width: 100%;
}
.ds-carousel__viewport { position: relative; min-width: 0; max-width: 100%; }
.ds-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(var(--_min-item), calc((100% - (var(--_cols) - 1) * var(--_gap) - var(--_peek)) / var(--_cols)));
  gap: var(--_gap);
  list-style: none;
  /* ring room (DESK-327): a composed tile's 2 px selected outline sits 2 px OUTSIDE it (4 px total), and an
     overflow-x scroller clips everything past its padding box — so the track pads --_ring-room on every side and
     pulls the same amount back with a negative margin. Tiles stay flush with the header; outlines are not cut. */
  padding: var(--_ring-room);
  margin: calc(-1 * var(--_ring-room));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--_ring-room);    /* snap lands the first tile with its ring room, not on the clip line */
  scrollbar-width: none;                       /* paged: the pager is the affordance; keyboard + swipe still scroll */
  -webkit-overflow-scrolling: touch;
}
.ds-carousel__track::-webkit-scrollbar { display: none; }
.ds-carousel__item { min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-carousel__item:last-child { scroll-snap-align: end; }

/* a plain tile: fixed ratio, tint fill, media radius — the shelf's unit until media-tile / tile ship */
.ds-carousel__tile {
  display: flex; align-items: flex-end;
  aspect-ratio: var(--_ratio);
  width: 100%; max-width: 100%;
  border-radius: var(--ds-media-radius);
  background: var(--ds-illustration-ground);
  border: var(--ds-border-width) solid transparent;
  color: var(--ds-ink-2);
  padding: var(--ds-space-3);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-carousel__tile[data-hue="1"] { background: var(--ds-data-1-tint); color: var(--ds-data-1-ink); }
.ds-carousel__tile[data-hue="2"] { background: var(--ds-data-2-tint); color: var(--ds-data-2-ink); }
.ds-carousel__tile[data-hue="3"] { background: var(--ds-data-3-tint); color: var(--ds-data-3-ink); }
.ds-carousel__tile[data-hue="4"] { background: var(--ds-data-4-tint); color: var(--ds-data-4-ink); }
.ds-carousel__tile[data-hue="5"] { background: var(--ds-data-5-tint); color: var(--ds-data-5-ink); }
.ds-carousel__tile[data-hue="6"] { background: var(--ds-data-6-tint); color: var(--ds-data-6-ink); }
.ds-carousel__tile[data-hue="7"] { background: var(--ds-data-7-tint); color: var(--ds-data-7-ink); }
.ds-carousel__tile[data-hue="8"] { background: var(--ds-data-8-tint); color: var(--ds-data-8-ink); }
.ds-carousel__tile:is(a, button):hover,
.ds-carousel__tile[data-state="hover"] { border-color: var(--ds-border-strong); box-shadow: var(--ds-hover-shadow); }
.ds-carousel__tile[aria-current="true"], .ds-carousel__tile[aria-selected="true"] { border-color: var(--ds-border-selected); border-width: 2px; }
.ds-carousel__tile[data-state="empty"] { background: transparent; border: var(--ds-border-width) dashed var(--ds-rule); color: var(--ds-ink-muted); align-items: center; justify-content: center; text-align: center; }
.ds-carousel__tile[aria-busy="true"] { background: var(--ds-skeleton); color: transparent; }
.ds-carousel__tile[aria-disabled="true"] { background: var(--ds-surface-3); color: var(--ds-ink-faint); cursor: not-allowed; }
.ds-carousel__caption { font-size: var(--ds-text-sm); color: var(--ds-ink-2); line-height: var(--ds-lh-list); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-carousel__badge {                                    /* givingli "Premium": translucent glass badge, top-left */
  position: absolute; inset-block-start: var(--ds-space-2); inset-inline-start: var(--ds-space-2);
  padding: var(--ds-space-0-5) var(--ds-space-2); border-radius: var(--ds-radius-pill);
  background: var(--ds-glass-fill); border: var(--ds-border-width) solid var(--ds-glass-border);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink);
}
.ds-carousel__item { position: relative; }

/* ---- overflow treatments ---- */
.ds-carousel[data-overflow="peek"]  { --_peek: var(--ds-space-12); }               /* 48 px of the next tile shows */
.ds-carousel[data-overflow="fade"] .ds-carousel__viewport {
  -webkit-mask-image: linear-gradient(to right, var(--ds-ink) calc(100% - var(--_fade)), transparent);
          mask-image: linear-gradient(to right, var(--ds-ink) calc(100% - var(--_fade)), transparent);
}
.ds-carousel[data-overflow="clip"] .ds-carousel__track { overflow: hidden; scroll-snap-type: none; }   /* homerun: hard clip, no affordance (weakness) */
.ds-carousel[data-overflow="marquee"] .ds-carousel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ds-ink) var(--_fade), var(--ds-ink) calc(100% - var(--_fade)), transparent);
          mask-image: linear-gradient(to right, transparent, var(--ds-ink) var(--_fade), var(--ds-ink) calc(100% - var(--_fade)), transparent);
}

/* ---- gutter bleed (data-bleed="end", additive 2026-09-25, DESK-327) ----
   The root keeps max-width: 100% (the header + pager stay in the column); only the VIEWPORT runs --_bleed past the
   column's end edge into the page gutter. --_peek defaults to --_bleed, so the first --_cols tiles land exactly on
   the parent grid's lines and the next tile is cut at the SHEET edge — the peek is the overflow cue. Set --_bleed to
   the real gutter (the space between the column and the sheet edge) and let the sheet clip (overflow: clip). */
.ds-carousel[data-bleed="end"] { --_peek: var(--_bleed); }
.ds-carousel[data-bleed="end"] .ds-carousel__viewport { max-width: none; margin-inline-end: calc(-1 * var(--_bleed)); }
.ds-carousel[data-bleed="end"] .ds-carousel__track { scroll-padding-inline-end: calc(var(--_ring-room) + var(--_bleed)); }

/* ---- states on the root ---- */
.ds-carousel[data-state="empty"] .ds-carousel__track { scroll-snap-type: none; }
.ds-carousel[aria-busy="true"] .ds-carousel__tile { background: var(--ds-skeleton); color: transparent; border-color: transparent; }
.ds-carousel[aria-busy="true"] .ds-carousel__caption { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); width: 60%; }

/* ---- marquee strip (fibery two rows / heron ticker) ---- */
.ds-carousel__marquee {
  display: flex; gap: var(--_gap); width: max-content;
  animation: ds-carousel-marquee var(--_speed) linear infinite;
  animation-play-state: var(--ds-ambient-play, running);   /* AMBIENT loop: data-ambient="off" / --ds-ambient-play: paused parks it (§13.5) */
}
.ds-carousel__marquee[data-direction="reverse"] { animation-direction: reverse; }
.ds-carousel__viewport:hover .ds-carousel__marquee,
.ds-carousel__viewport:focus-within .ds-carousel__marquee { animation-play-state: paused; }     /* readable on demand */
@keyframes ds-carousel-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ds-carousel__marquee { animation: none; } .ds-carousel[data-overflow="marquee"] .ds-carousel__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } }
.ds-carousel__rows { display: flex; flex-direction: column; gap: var(--_gap); }
.ds-carousel__chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  border: var(--ds-border-width) solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink-2); font-size: var(--ds-text-sm); white-space: nowrap;
}
.ds-carousel__chip svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }

/* =========================================================================
   Designer variants
   ========================================================================= */
/* givingli: 6 fixed-ratio 5:7 tiles, 12 px gap, r12, paged by the header's two-way pill; Premium badge */
.ds-carousel[data-variant="givingli-shelf-6up"] { --_cols: 6; --_gap: var(--ds-space-3); --_ratio: 5 / 7; --_min-item: 150px; }
.ds-carousel[data-variant="givingli-shelf-6up"] .ds-carousel__tile { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-object); border: 0; }   /* the reference's soft card shadow — a physical card */

/* braintrust: 3 cards + the 4th cut at the viewport edge; 220×272 r16 pastel tiles */
.ds-carousel[data-variant="braintrust-peek-3up"] { --_cols: 3; --_gap: var(--ds-space-5); --_ratio: 220 / 272; --_min-item: 200px; --_peek: var(--ds-space-12); }
.ds-carousel[data-variant="braintrust-peek-3up"] .ds-carousel__tile { border-radius: var(--ds-radius-xl); align-items: flex-start; }

/* manychat: 2-up recommendation cards (illustration left, copy right), 12 px gutter, ring arrows in the heading */
.ds-carousel[data-variant="manychat-recommendation-2up"] { --_cols: 2; --_gap: var(--ds-space-3); --_min-item: 260px; }
.ds-carousel[data-variant="manychat-recommendation-2up"] .ds-carousel__card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--ds-space-4); align-items: center;
  min-height: 128px; padding: var(--ds-space-3);
  background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow);
  border-radius: var(--ds-radius-md); color: var(--ds-ink); text-decoration: none;
}
.ds-carousel[data-variant="manychat-recommendation-2up"] .ds-carousel__card:hover { background: var(--ds-hover-bg); }
.ds-carousel[data-variant="manychat-recommendation-2up"] .ds-carousel__card .ds-carousel__tile { --_ratio: 1; border-radius: var(--ds-radius-sm); padding: var(--ds-space-2); }
.ds-carousel[data-variant="manychat-recommendation-2up"] .ds-carousel__card b { display: block; font-weight: var(--ds-weight-semibold); margin-block-end: var(--ds-space-1); }
.ds-carousel[data-variant="manychat-recommendation-2up"] .ds-carousel__card p { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }

/* homerun: fixed 178×100 template thumbnails at 24 px gap, first = ground well with +, hard clip */
.ds-carousel[data-variant="homerun-blank-first-template-row"] { --_gap: var(--ds-space-6); --_ratio: 178 / 100; }
.ds-carousel[data-variant="homerun-blank-first-template-row"] .ds-carousel__track { grid-auto-columns: 178px; }
.ds-carousel[data-variant="homerun-blank-first-template-row"] .ds-carousel__tile { border-radius: var(--ds-radius-lg); background: var(--ds-surface-2); }
.ds-carousel[data-variant="homerun-blank-first-template-row"] .ds-carousel__item:first-child .ds-carousel__tile { background: var(--ds-ground-2); color: var(--ds-ink-2); align-items: center; justify-content: center; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-regular); }

/* attio: 56 px dark rounded squares in a row, end fade (the dark chapter — rendered on the inverse surface) */
.ds-carousel[data-variant="attio-integration-tile-row-endfade"] { --_gap: var(--ds-space-3); --_fade: var(--ds-space-20); }
.ds-carousel[data-variant="attio-integration-tile-row-endfade"] .ds-carousel__track { grid-auto-columns: 56px; }
.ds-carousel[data-variant="attio-integration-tile-row-endfade"] .ds-carousel__tile {
  --_ratio: 1; border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2); border-color: var(--ds-rule);
  align-items: center; justify-content: center; padding: 0; color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
}

/* fibery: two rows of chips, clipped both sides, drifting in opposite directions */
.ds-carousel[data-variant="fibery-chip-marquee"] { --_gap: var(--ds-space-2); --_speed: 48s; }

/* heron: a 22 px ticker of icon + two-word chips — chips lose their box and shrink to the label lane */
.ds-carousel[data-variant="heron-benefit-ticker"] { --_gap: var(--ds-space-8); --_speed: 30s; --_fade: var(--ds-space-8); }
.ds-carousel[data-variant="heron-benefit-ticker"] .ds-carousel__chip {
  min-height: var(--ds-space-6); padding: 0; border: 0; background: transparent;
  font-family: var(--ds-font-label); font-size: var(--ds-text-xs); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted);
}
.ds-carousel[data-variant="heron-benefit-ticker"] .ds-carousel__viewport { border-block: var(--ds-border-width) solid var(--ds-rule); padding-block: var(--ds-space-1); }


/* components/chapter-header/chapter-header.css */
/* ============================================================================
   components/chapter-header/chapter-header.css — Chapter / section header (marketing)
   taxonomy-components.md §K · common · S0  ·  implements L-HEAD-01 + L-HEAD-02 + L-HEAD-03 in ONE component
   Root:  <header class="ds-chapter-header"> (or <div>) — one per chapter; the h2 is the chapter's heading.
   Parts: __eyebrow (+ __eyebrow-index · __eyebrow-mark) · __title (L-HEAD-01: block two-tone via .ds-two-tone,
          or inline two-tone at data-level="h3") · __line[data-weight] (fibery mixed-weight pair) · __lead
          (support paragraph; may be .ds-two-tone) · __aside (right column: the lead, or an illustration) ·
          __actions (button-pair slot, composed) · __hint ([SCROLL TO CONTINUE], decorative)
   Axes:  data-eyebrow="mono | pill"    L-HEAD-02 device — mono "[03] LABEL" is the house; pill = Attio's
                                        sentence-case accent tint (drops the accent on a dark island)
          data-layout="stack | split"   split = L-HEAD-03: eyebrow + h2 left, __aside right, top-aligned to the h2
          data-align="start | center"
          data-level="h2 | h3"          h3 = Attio's INLINE two-tone: semibold fragment + regular continuation, ≤ 44 ch
          data-size="md | lg"           lg = display size from 768 (chapter opener, closing CTA)
          data-aside="start | end"      split only: the aside top-aligns to the h2 (start, house) or sits on its last line (end, cloudflare)
   Variants (data-variant): jstov (unmarked root) · attio-eyebrow-pill-plus-two-tone-h2 ·
     intercom-two-tone-heading-plus-lead · heron-two-column-eyebrow-h2-left-paragraph-right ·
     fibery-narrative-bridge-heading · fibery-mixed-weight-heading-pair
   States: rest · aria-busy="true" (skeleton bars in the true frame) — the header itself is inert; the
     buttons in __actions carry their own states.
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_gap --_title-size --_title-weight --_measure
     --_lead-measure --_lead-size --_cols
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. ROOT — a grid of named areas so every layout is a re-map, never a DOM change
   ------------------------------------------------------------------------- */
.ds-chapter-header {
  --_gap:          var(--ds-space-4);                /* eyebrow → h2 → lead pitch (attio 16–24) */
  --_title-size:   var(--ds-text-title-chapter, var(--ds-text-3xl));   /* 32 @14 · 37 @16 via the title-chapter alias (§13.4); lg → display ≥ 768 */
  --_title-weight: var(--ds-display-weight);         /* regular-weight display is the house    */
  --_measure:      26ch;                             /* 2–3 lines at chapter size             */
  --_lead-measure: 45ch;                             /* C-03: support ≤ 45 ch                  */
  --_lead-size:    var(--ds-text-lg);
  --_cols:         minmax(0, 7fr) minmax(0, 5fr);    /* split: h2 6–8 cols | paragraph 3–5    */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title" "lead" "actions" "aside";
  row-gap: 0;                                        /* the pitch is a margin on each PRESENT part (below) — an absent eyebrow / lead / actions no longer reserves its row's gap (2026-09-20; was gap: --_gap, which left a title-only header 4 × --_gap taller than its title) */
  column-gap: var(--_gap);
  align-items: start;
  min-width: 0;
  color: var(--ds-ink);
}
.ds-chapter-header > * { min-width: 0; max-width: 100%; }
.ds-chapter-header > * + * { margin-block-start: var(--_gap); }   /* eyebrow → h2 → lead → actions → aside pitch; empty rows cost nothing. The parts carry no margin: 0 of their own (the base reset zeroes h2 / p) so this sibling rule is the one margin */
.ds-chapter-header svg[fill="none"] { fill: none; stroke: currentColor; }

/* ---------------------------------------------------------------------------
   1. EYEBROW — L-HEAD-02. Mono "[03] LABEL" (house / heron) or the sentence-case pill (attio)
   ------------------------------------------------------------------------- */
.ds-chapter-header__eyebrow {
  grid-area: eyebrow;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  justify-self: start;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: .06em;
  text-transform: uppercase;              /* the mono lane is the ONE caps lane (R8) */
  color: var(--ds-ink-muted);
}
.ds-chapter-header__eyebrow-index { color: var(--ds-ink-faint); }

/* __eyebrow-meta — optional muted suffix after the eyebrow text ("· step 2 of 3"); added 2026-09-19
   for L-PRICE-01's onboarding form. Separator drawn here so the text stays plain. */
.ds-chapter-header__eyebrow-meta { color: var(--ds-ink-muted); }
.ds-chapter-header__eyebrow-meta::before { content: "·"; margin-inline: var(--ds-space-2); color: var(--ds-ink-faint); }
      /* index numbers: decorative, aria-hidden */
/* intercom's "■ LABEL": a 6 px accent square before the word (shown by the variant, or by markup anywhere) */
.ds-chapter-header__eyebrow-mark {
  inline-size: var(--ds-space-1-5);
  block-size: var(--ds-space-1-5);
  flex: none;
  background: var(--ds-accent);
}
.ds-chapter-header[data-eyebrow="pill"] .ds-chapter-header__eyebrow,
.ds-chapter-header[data-variant="attio-eyebrow-pill-plus-two-tone-h2"]:not([data-eyebrow="mono"]) .ds-chapter-header__eyebrow {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  letter-spacing: 0;
  text-transform: none;
  padding: var(--ds-space-0-5) var(--ds-space-2);
  border-radius: var(--ds-radius-xs);     /* attio: 4–6 px rect, not a capsule */
  background: var(--ds-accent-tint);
  color: var(--ds-accent-ink);
}
.ds-chapter-header[data-eyebrow="pill"] .ds-chapter-header__eyebrow-index,
.ds-chapter-header[data-variant="attio-eyebrow-pill-plus-two-tone-h2"]:not([data-eyebrow="mono"]) .ds-chapter-header__eyebrow-index { color: inherit; opacity: .7; }
/* the pill drops its accent on dark — attio's rule; explicit islands and the OS-dark page alike */
[data-mode="dark"] .ds-chapter-header[data-eyebrow="pill"] .ds-chapter-header__eyebrow,
[data-mode="dark"] .ds-chapter-header[data-variant="attio-eyebrow-pill-plus-two-tone-h2"]:not([data-eyebrow="mono"]) .ds-chapter-header__eyebrow,
.ds-chapter-header[data-mode="dark"][data-eyebrow="pill"] .ds-chapter-header__eyebrow { background: var(--ds-surface-2); color: var(--ds-ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .ds-chapter-header[data-eyebrow="pill"]:not([data-mode="light"]) .ds-chapter-header__eyebrow,
  :root:not([data-mode="light"]) .ds-chapter-header[data-variant="attio-eyebrow-pill-plus-two-tone-h2"]:not([data-eyebrow="mono"]):not([data-mode="light"]) .ds-chapter-header__eyebrow { background: var(--ds-surface-2); color: var(--ds-ink-2); }
}

/* ---------------------------------------------------------------------------
   2. TITLE — L-HEAD-01. One element; the muted clause is <span class="ds-muted"> (components/_base.css .ds-two-tone)
   ------------------------------------------------------------------------- */
.ds-chapter-header__title {
  grid-area: title;
  font-family: var(--ds-font-display);
  font-size: var(--_title-size);
  font-weight: var(--_title-weight);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-lh-tight);
  max-width: var(--_measure);
  text-wrap: balance;
  color: var(--ds-ink);
}
/* h3 level: attio's inline two-tone — semibold fragment + regular continuation in ONE paragraph, ≤ 44 ch */
.ds-chapter-header[data-level="h3"] {
  --_title-size: var(--ds-text-xl);
  --_measure: 44ch;
}
.ds-chapter-header[data-level="h3"] .ds-chapter-header__title {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-heading-tracking);
  line-height: var(--ds-lh-heading);
  text-wrap: pretty;
}
.ds-chapter-header[data-level="h3"] .ds-chapter-header__title .ds-muted { font-weight: var(--ds-weight-regular); }
/* fibery's mixed-weight pair: two lines, one regular, one bold (either order) */
.ds-chapter-header__line { display: block; }
.ds-chapter-header__line[data-weight="regular"] { font-weight: var(--ds-weight-regular); }
.ds-chapter-header__line[data-weight="bold"]    { font-weight: var(--ds-weight-bold); font-size: 1.3em; }

/* ---------------------------------------------------------------------------
   3. LEAD · ASIDE · ACTIONS · HINT
   ------------------------------------------------------------------------- */
.ds-chapter-header__lead {
  grid-area: lead;
  font-size: var(--_lead-size);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-muted);               /* readable secondary — never faint */
  max-width: var(--_lead-measure);
  text-wrap: pretty;
}
/* intercom: the lead is two-tone too — ink lead clause, muted remainder (the class must win over the muted default) */
.ds-chapter-header__lead.ds-two-tone { color: var(--ds-ink); }
.ds-chapter-header__aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  min-width: 0;
}
.ds-chapter-header__aside > .ds-chapter-header__lead { grid-area: auto; }
.ds-chapter-header__aside > svg, .ds-chapter-header__aside > img { max-width: min(100%, 220px); color: var(--ds-ink); }   /* intercom's is an INK drawing, not a technical line */
.ds-chapter-header__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
  margin-block-start: calc(var(--_gap) + var(--ds-space-2));   /* the pitch + 8: a pair sits a touch further from the copy */
}
.ds-chapter-header__actions > * { max-width: 100%; }
.ds-chapter-header__hint {                  /* [SCROLL TO CONTINUE] — decorative, aria-hidden */
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}

/* ---------------------------------------------------------------------------
   4. AXES — align · size · loading
   ------------------------------------------------------------------------- */
.ds-chapter-header[data-align="center"] { justify-items: center; text-align: center; }
.ds-chapter-header[data-align="center"] .ds-chapter-header__eyebrow { justify-self: center; }
.ds-chapter-header[data-align="center"] .ds-chapter-header__actions { justify-content: center; }
.ds-chapter-header[data-align="center"] .ds-chapter-header__aside { align-items: center; }

/* loading: bars in the true frame — no layout jump when the words arrive */
.ds-chapter-header[aria-busy="true"] :is(.ds-chapter-header__eyebrow, .ds-chapter-header__title, .ds-chapter-header__lead),
.ds-chapter-header[aria-busy="true"] :is(.ds-chapter-header__title, .ds-chapter-header__lead) * {
  color: transparent;
  background: var(--ds-skeleton);
  border-radius: var(--ds-radius-xs);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.ds-chapter-header[aria-busy="true"] .ds-chapter-header__eyebrow-mark { background: var(--ds-skeleton); }

/* ---------------------------------------------------------------------------
   5. VARIANTS
   ------------------------------------------------------------------------- */
/* attio — pill eyebrow, semibold two-tone h2 ending in a full stop, 2–3 lines [attio-2-1-830x8225] */
.ds-chapter-header[data-variant="attio-eyebrow-pill-plus-two-tone-h2"] {
  --_title-weight: var(--ds-weight-semibold);
  --_measure: 30ch;
}
/* intercom — "■ LABEL" mono eyebrow, two-tone h2 (either order) + two-tone lead + pair; ink drawing in the right third [intercom-3-830x8816] */
.ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"] {
  --_cols: minmax(0, 8fr) minmax(0, 4fr);
  --_measure: 24ch;
}
.ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"] .ds-chapter-header__eyebrow::before {
  content: "";
  inline-size: var(--ds-space-1-5);
  block-size: var(--ds-space-1-5);
  flex: none;
  background: var(--ds-accent);
}
.ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"] .ds-chapter-header__eyebrow > .ds-chapter-header__eyebrow-mark { display: none; }  /* the pseudo draws it */
.ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"] .ds-chapter-header__lead { font-family: var(--ds-font-body-alt); }
/* heron — mono eyebrow, bold h2 left, small muted paragraph right-aligned to the outer edge, scroll hint [heron-ai-830x5619]
   (heron sets the h2 in uppercase — a skin choice; headings never uppercase here, R8) */
.ds-chapter-header[data-variant="heron-two-column-eyebrow-h2-left-paragraph-right"] {
  --_title-weight: var(--ds-weight-bold);
  --_lead-size: var(--ds-text-sm);
  --_lead-measure: 34ch;
  --_cols: minmax(0, 8fr) minmax(0, 4fr);
}
.ds-chapter-header[data-variant="heron-two-column-eyebrow-h2-left-paragraph-right"] .ds-chapter-header__aside { gap: var(--ds-space-4); }
/* fibery — regular-weight centred sentence ending in … or :, a caption for the picture below [fibery-3-830x6495] */
.ds-chapter-header[data-variant="fibery-narrative-bridge-heading"] {
  --_title-size: var(--ds-text-2xl);
  --_title-weight: var(--ds-weight-regular);
  --_measure: 40ch;
  justify-items: center;
  text-align: center;
}
.ds-chapter-header[data-variant="fibery-narrative-bridge-heading"] .ds-chapter-header__title { font-family: var(--ds-font-sans); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); }
/* fibery — mixed-weight pair: line 1 regular, line 2 bold (or the reverse), left-aligned [fibery-3-830x6495] */
.ds-chapter-header[data-variant="fibery-mixed-weight-heading-pair"] {
  --_title-size: var(--ds-text-2xl);
  --_title-weight: var(--ds-weight-regular);
  --_measure: 30ch;
}
.ds-chapter-header[data-variant="fibery-mixed-weight-heading-pair"] .ds-chapter-header__title { font-family: var(--ds-font-sans); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); }

/* ---------------------------------------------------------------------------
   6. BREAKPOINTS — 768: display size for lg, split layout; 1024: wider measure
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ds-chapter-header[data-size="lg"] { --_title-size: var(--ds-text-display); --_measure: 22ch; }
  .ds-chapter-header[data-size="lg"][data-variant="attio-eyebrow-pill-plus-two-tone-h2"] { --_measure: 28ch; }
  .ds-chapter-header[data-level="h3"] { --_title-size: var(--ds-text-2xl); }
  .ds-chapter-header[data-layout="split"],
  .ds-chapter-header[data-variant="heron-two-column-eyebrow-h2-left-paragraph-right"]:not([data-layout="stack"]),
  .ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"]:not([data-layout="stack"]) {
    grid-template-columns: var(--_cols);
    column-gap: var(--ds-space-8);
    grid-template-areas:
      "eyebrow eyebrow"
      "title   aside"
      "lead    aside"
      "actions aside";
  }
  /* the right column: top-aligned to the h2, right-aligned to the outer edge (heron / house); intercom's drawing sits at the top too */
  .ds-chapter-header[data-layout="split"] .ds-chapter-header__aside,
  .ds-chapter-header[data-variant="heron-two-column-eyebrow-h2-left-paragraph-right"]:not([data-layout="stack"]) .ds-chapter-header__aside,
  .ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"]:not([data-layout="stack"]) .ds-chapter-header__aside {
    justify-self: end;
    align-self: start;
    max-width: var(--_lead-measure);
    margin-block-start: 0;                          /* the column starts level with the h2 … */
  }
  .ds-chapter-header[data-layout="split"]:has(> .ds-chapter-header__eyebrow) .ds-chapter-header__aside,
  .ds-chapter-header[data-variant="heron-two-column-eyebrow-h2-left-paragraph-right"]:not([data-layout="stack"]):has(> .ds-chapter-header__eyebrow) .ds-chapter-header__aside {
    margin-block-start: var(--_gap);                /* … including the h2's own pitch under an eyebrow */
  }
  .ds-chapter-header[data-variant="intercom-two-tone-heading-plus-lead"]:not([data-layout="stack"]) .ds-chapter-header__aside { grid-row: 1 / span 4; max-width: none; align-items: flex-end; margin-block-start: 0; }
  /* data-aside="end" — the aside sits on the h2's LAST line instead of its first (Cloudflare's split header:
     the paragraph is bottom-aligned to the display; L-HEAD-03's `align-items: end` form). 2026-09-20 */
  .ds-chapter-header[data-layout="split"][data-aside="end"] .ds-chapter-header__aside { align-self: end; }
}


/* components/data-tag/data-tag.css */
/* ============================================================================
   components/data-tag/data-tag.css — Data tag (a drawing callout on a diagram)
   taxonomy-components.md §K · niche · S2  ·  L-SHOT-05
   Root:  <span|button|a class="ds-data-tag" data-variant="…" data-pointer="up|down|left|right" style="--_x: 32%; --_y: 40%">
          inside a `position: relative` stage (.ds-data-tag-stage).
   Parts: __index (the mono 01) · __leader (hairline to the caption, house) · __caption (mono margin caption)
   Variants: jstov (unmarked) · heron-data-tag · fibery-annotation-chip[data-hue] · rains-eyebrow-feature-label[data-align]
   States: rest · hover (interactive: accent-hover) · focus-visible · aria-current="true" (outset ring)
   Tokens only. Private knobs: --_x --_y --_size --_fill --_ink --_leader --_caption-ground
   ========================================================================== */
.ds-data-tag-stage { position: relative; display: block; min-width: 0; }
.ds-data-tag {
  --_x: 0%; --_y: 0%;
  --_size: 20px;                                   /* heron: 20 px accent square */
  --_fill: var(--ds-accent);
  --_ink: var(--ds-ink-on-accent);
  --_leader: 72px;
  --_caption-ground: transparent;                  /* house: set to var(--ds-surface) when the caption crosses UI (a label plate, drawing convention) */
  position: absolute;
  inset-inline-start: var(--_x);
  inset-block-start: var(--_y);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  transform: translate(-50%, -50%);                /* the square sits ON the point */
  cursor: default;
}
/* house (leader + caption): offset by half the SQUARE, not half the tag, so the square — not the tag's midpoint —
   sits on the point and the leader runs right from it (fix 2026-09-20, L-SHOT-01 lane) */
.ds-data-tag:not([data-variant]),
.ds-data-tag[data-variant="jstov"] { transform: translate(calc(var(--_size) / -2), -50%); }
.ds-data-tag__index {
  display: inline-grid;
  place-items: center;
  inline-size: var(--_size);
  block-size: var(--_size);
  background: var(--_fill);
  color: var(--_ink);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  letter-spacing: 0;
  flex: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
/* pointer: a small hairline stalk on one side of the square */
.ds-data-tag[data-pointer]::before { content: ""; position: absolute; background: var(--_fill); }
.ds-data-tag[data-pointer="down"]::before  { inset-block-start: 100%; inset-inline-start: calc(var(--_size) / 2); inline-size: 1px; block-size: var(--ds-space-3); }
.ds-data-tag[data-pointer="up"]::before    { inset-block-end: 100%; inset-inline-start: calc(var(--_size) / 2); inline-size: 1px; block-size: var(--ds-space-3); }
.ds-data-tag[data-pointer="left"]::before  { inset-inline-end: 100%; inset-block-start: 50%; block-size: 1px; inline-size: var(--ds-space-3); }
.ds-data-tag[data-pointer="right"]::before { inset-inline-start: 100%; inset-block-start: 50%; block-size: 1px; inline-size: var(--ds-space-3); }
/* house: a hairline leader to a mono caption in the margin — a drawing callout, not a chip */
.ds-data-tag__leader { inline-size: var(--_leader); block-size: var(--ds-border-width); background: var(--ds-line-art); flex: none; }
.ds-data-tag__caption { padding-inline: var(--ds-space-1); margin-inline-start: calc(-1 * var(--ds-space-1)); background: var(--_caption-ground); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ds-ink-muted); white-space: nowrap; }
.ds-data-tag[data-variant="heron-data-tag"] :is(.ds-data-tag__leader, .ds-data-tag__caption) { display: none; }
/* fibery — a 14 px sans chip on the category hue: tint + same-hue ink (P6), never white-on-colour */
.ds-data-tag[data-variant="fibery-annotation-chip"] { --_fill: var(--ds-data-1-tint); --_ink: var(--ds-data-1-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="2"] { --_fill: var(--ds-data-2-tint); --_ink: var(--ds-data-2-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="3"] { --_fill: var(--ds-data-3-tint); --_ink: var(--ds-data-3-ink); }
/* hues 4–8 added 2026-09-20 (L-SHOT-01 lane): one enum = one hue everywhere, so a chip may need any of the eight */
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="4"] { --_fill: var(--ds-data-4-tint); --_ink: var(--ds-data-4-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="5"] { --_fill: var(--ds-data-5-tint); --_ink: var(--ds-data-5-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="6"] { --_fill: var(--ds-data-6-tint); --_ink: var(--ds-data-6-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="7"] { --_fill: var(--ds-data-7-tint); --_ink: var(--ds-data-7-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"][data-hue="8"] { --_fill: var(--ds-data-8-tint); --_ink: var(--ds-data-8-ink); }
.ds-data-tag[data-variant="fibery-annotation-chip"] .ds-data-tag__index { inline-size: auto; block-size: auto; padding: var(--ds-space-1) var(--ds-space-2-5); border-radius: var(--ds-radius-sm); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); letter-spacing: 0; }
.ds-data-tag[data-variant="fibery-annotation-chip"] :is(.ds-data-tag__leader, .ds-data-tag__caption) { display: none; }
/* states (interactive roots only) */
:is(button, a).ds-data-tag { cursor: pointer; }
:is(button, a).ds-data-tag:hover .ds-data-tag__index, .ds-data-tag[data-state="hover"] .ds-data-tag__index { background: var(--ds-accent-hover); }
.ds-data-tag:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-radius: var(--ds-radius-xs); }
.ds-data-tag[aria-current="true"] .ds-data-tag__index { outline: 2px solid var(--ds-border-selected); outline-offset: 2px; }
/* rains-eyebrow-feature-label [mobbin-rains-data-tag] — a 6 px square dot ON the point + a two-level label beside it:
   __eyebrow (xs muted) over __label (bold, tight, ≤ 2 lines). data-align="end" puts the text before the dot (left of the
   subject). No chip, no index number. Added 2026-09-30. */
.ds-data-tag[data-variant="rains-eyebrow-feature-label"] { --_size: 6px; --_fill: var(--ds-ink); align-items: flex-start; gap: var(--ds-space-2); transform: translate(calc(var(--_size) / -2), calc(var(--_size) / -2 - var(--ds-space-1-5))); text-align: start; }
.ds-data-tag[data-variant="rains-eyebrow-feature-label"][data-align="end"] { flex-direction: row-reverse; text-align: end; transform: translate(calc(-100% + var(--_size) / 2), calc(var(--_size) / -2 - var(--ds-space-1-5))); }
.ds-data-tag[data-variant="rains-eyebrow-feature-label"] .ds-data-tag__index { margin-block-start: var(--ds-space-1-5); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); }
.ds-data-tag[data-variant="rains-eyebrow-feature-label"] :is(.ds-data-tag__leader, .ds-data-tag__caption) { display: none; }
.ds-data-tag__text { display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-width: 0; }
.ds-data-tag__eyebrow { font-size: var(--ds-text-xs); line-height: 1.2; color: var(--ds-ink-muted); }
.ds-data-tag__label { max-inline-size: 13ch; font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold); line-height: 1.05; letter-spacing: -.01em; color: var(--ds-ink); text-wrap: balance; }
:is(button, a).ds-data-tag[data-variant="rains-eyebrow-feature-label"]:hover .ds-data-tag__index,
.ds-data-tag[data-variant="rains-eyebrow-feature-label"][data-state="hover"] .ds-data-tag__index { background: var(--ds-ink); transform: scale(1.5); }
:is(button, a).ds-data-tag[data-variant="rains-eyebrow-feature-label"]:hover .ds-data-tag__label,
.ds-data-tag[data-variant="rains-eyebrow-feature-label"][data-state="hover"] .ds-data-tag__label { text-decoration: underline; text-decoration-thickness: var(--ds-border-width); text-underline-offset: .15em; }
.ds-data-tag[data-variant="rains-eyebrow-feature-label"][aria-current="true"] .ds-data-tag__label { color: var(--ds-selected-ink); }


/* components/enum-chip/enum-chip.css */
/* ============================================================================
   enum-chip — Enum / category chip                       (taxonomy §D · common · S1)
   Root: .ds-enum-chip  (<span> for display; <button aria-pressed> when it filters; <a> when it navigates)
   Parts: __dot (8px hue dot) · __icon (14px stroke icon) · __label (truncates) · __bars (plane priority glyph)
   Axes:  data-hue="1…8"          the value's hue — ONE enum = ONE hue everywhere on the page
          data-tone="success|danger|warning|info|accent|accent-2"   a semantic hue (grammarly On-/Off-Brand)
          data-level="urgent|high|medium|low|none"                  priority glyph (plane)
          data-size="sm|md|lg"     18 / 20 / 24
   Row:   .ds-enum-chip-row[data-overflow="fade"] — one-line chip row masked at its end (manychat)
   Variants: default (unmarked root = retool-same-hue-pastel: pill, ~200 tint fill, ~900 same-hue ink) ·
     plane-uniform-meta-chip · plane-priority-bar-glyph · fibery-entity-tag · grammarly-semantic-chip-trio ·
     manychat-chip-in-sentence · luma-sub-query-chip · hsajl-merge-tag
   States: rest · hover (interactive only: same-hue edge) · focus-visible · aria-pressed / aria-selected ·
     disabled · aria-busy (skeleton) · aria-invalid (danger edge) · data-state="empty" (dashed placeholder)
   Private knobs: --_h --_pad-x --_radius --_fill --_ink --_edge --_hue --_gap --_size --_weight --_max
   ========================================================================== */

.ds-enum-chip svg[fill="none"] { fill: none; stroke: currentColor; }

.ds-enum-chip {
  --_h:      20px;                              /* 18–22 across the corpus                          */
  --_pad-x:  var(--ds-space-2);
  --_radius: var(--ds-radius-pill);
  --_gap:    var(--ds-space-1-5);
  --_size:   var(--ds-text-sm);                 /* 12 @14                                           */
  --_weight: var(--ds-weight-medium);
  --_max:    100%;
  /* neutral value: inset tint + ink-2 (a value with no hue assigned yet) */
  --_hue:    var(--ds-ink-muted);
  --_fill:   var(--ds-surface-2);
  --_ink:    var(--ds-ink-2);
  --_edge:   transparent;

  display: inline-flex;
  align-items: center;
  gap: var(--_gap);
  min-block-size: var(--_h);
  max-inline-size: var(--_max);
  padding-inline: var(--_pad-x);
  border-radius: var(--_radius);
  border: var(--ds-border-width) solid var(--_edge);
  background: var(--_fill);
  color: var(--_ink);
  font-family: var(--ds-font-sans);
  font-size: var(--_size);
  font-weight: var(--_weight);
  line-height: 1;
  letter-spacing: 0;
  text-transform: var(--ds-control-case);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  min-width: 0;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
button.ds-enum-chip { font: inherit; font-size: var(--_size); font-weight: var(--_weight); }
.ds-enum-chip[data-size="sm"] { --_h: 18px; --_pad-x: var(--ds-space-1-5); --_size: var(--ds-text-xs); }
.ds-enum-chip[data-size="lg"] { --_h: 24px; --_pad-x: var(--ds-space-3); --_size: var(--ds-text-md); }

/* -- the hue map: one enum value = one hue, set ONCE in the app and reused on every chart, badge and chip -- */
.ds-enum-chip[data-hue="1"] { --_hue: var(--ds-data-1); --_fill: var(--ds-data-1-tint); --_ink: var(--ds-data-1-ink); }
.ds-enum-chip[data-hue="2"] { --_hue: var(--ds-data-2); --_fill: var(--ds-data-2-tint); --_ink: var(--ds-data-2-ink); }
.ds-enum-chip[data-hue="3"] { --_hue: var(--ds-data-3); --_fill: var(--ds-data-3-tint); --_ink: var(--ds-data-3-ink); }
.ds-enum-chip[data-hue="4"] { --_hue: var(--ds-data-4); --_fill: var(--ds-data-4-tint); --_ink: var(--ds-data-4-ink); }
.ds-enum-chip[data-hue="5"] { --_hue: var(--ds-data-5); --_fill: var(--ds-data-5-tint); --_ink: var(--ds-data-5-ink); }
.ds-enum-chip[data-hue="6"] { --_hue: var(--ds-data-6); --_fill: var(--ds-data-6-tint); --_ink: var(--ds-data-6-ink); }
.ds-enum-chip[data-hue="7"] { --_hue: var(--ds-data-7); --_fill: var(--ds-data-7-tint); --_ink: var(--ds-data-7-ink); }
.ds-enum-chip[data-hue="8"] { --_hue: var(--ds-data-8); --_fill: var(--ds-data-8-tint); --_ink: var(--ds-data-8-ink); }
.ds-enum-chip[data-tone="success"]  { --_hue: var(--ds-success);  --_fill: var(--ds-success-tint);  --_ink: var(--ds-success-ink); }
.ds-enum-chip[data-tone="danger"]   { --_hue: var(--ds-danger);   --_fill: var(--ds-danger-tint);   --_ink: var(--ds-danger-ink); }
.ds-enum-chip[data-tone="warning"]  { --_hue: var(--ds-warning);  --_fill: var(--ds-warning-tint);  --_ink: var(--ds-warning-ink); }
.ds-enum-chip[data-tone="info"]     { --_hue: var(--ds-info);     --_fill: var(--ds-info-tint);     --_ink: var(--ds-info-ink); }
.ds-enum-chip[data-tone="accent"]   { --_hue: var(--ds-accent);   --_fill: var(--ds-accent-tint);   --_ink: var(--ds-accent-ink); }
.ds-enum-chip[data-tone="accent-2"] { --_hue: var(--ds-accent-2); --_fill: var(--ds-accent-2-tint); --_ink: var(--ds-accent-2-ink); }

/* -- parts ---------------------------------------------------------------- */
.ds-enum-chip__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: var(--ds-radius-pill); background: var(--_hue); }
.ds-enum-chip__icon { flex: none; inline-size: 14px; block-size: 14px; color: var(--_hue); }
.ds-enum-chip__icon svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-enum-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* -- row ---------------------------------------------------------------- */
.ds-enum-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1-5); min-width: 0; }
.ds-enum-chip-row[data-overflow="fade"] {
  flex-wrap: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent);
}
.ds-enum-chip-row[data-overflow="fade"] > * { flex: none; }

/* =========================================================================
   VARIANTS
   ========================================================================= */

/* retool (= the unmarked default): pill, ~18px, 7px padding, 12/500; tint fill + same-hue ink per value */
.ds-enum-chip[data-variant="retool-same-hue-pastel"] { --_h: 18px; }

/* plane: 22px hairline chip, r6, 8px padding, 8px dot or 14px icon; one skin for label / date / priority / avatar */
.ds-enum-chip[data-variant="plane-uniform-meta-chip"] {
  --_h: 22px;
  --_radius: var(--ds-radius-sm);
  --_fill: var(--ds-surface);
  --_ink: var(--ds-ink);
  --_edge: var(--ds-rule);
  --_gap: var(--ds-space-1-5);
}
.ds-enum-chip[data-variant="plane-uniform-meta-chip"]:not([data-hue]):not([data-tone]) .ds-enum-chip__icon { color: var(--ds-ink-muted); }

/* plane priority: 22×22 bordered square, 3 signal bars; count + hue encode the level, urgent = red "!" */
.ds-enum-chip[data-variant="plane-priority-bar-glyph"] {
  --_h: 22px;
  --_pad-x: 0px;
  --_radius: var(--ds-radius-sm);
  --_fill: var(--ds-surface);
  --_ink: var(--ds-ink);
  --_edge: var(--ds-rule);
  --_b1: var(--ds-rule-strong);
  --_b2: var(--ds-rule-strong);
  --_b3: var(--ds-rule-strong);
  inline-size: 22px;
  justify-content: center;
  font-weight: var(--ds-weight-bold);
}
.ds-enum-chip__bars {
  inline-size: 10px;
  block-size: 10px;
  background-image: linear-gradient(var(--_b1), var(--_b1)), linear-gradient(var(--_b2), var(--_b2)), linear-gradient(var(--_b3), var(--_b3));
  background-size: 2px 4px, 2px 7px, 2px 10px;
  background-position: 0 100%, 4px 100%, 8px 100%;
  background-repeat: no-repeat;
}
.ds-enum-chip[data-level="low"]    { --_b1: var(--ds-data-1); }
.ds-enum-chip[data-level="medium"] { --_b1: var(--ds-data-6); --_b2: var(--ds-data-6); }
.ds-enum-chip[data-level="high"]   { --_b1: var(--ds-data-4); --_b2: var(--ds-data-4); --_b3: var(--ds-data-4); }
.ds-enum-chip[data-level="urgent"] { --_fill: var(--ds-danger-tint); --_edge: var(--ds-danger); --_ink: var(--ds-danger-ink); }
.ds-enum-chip[data-level="urgent"] .ds-enum-chip__bars { display: none; }

/* fibery: 10–11px caps, 700, +.08em, r4 entity tag. Their white-on-hue failed contrast (teal); P6 paints tint + ink instead */
.ds-enum-chip[data-variant="fibery-entity-tag"] {
  --_h: 18px;
  --_radius: var(--ds-radius-xs);
  --_size: var(--ds-text-xs);
  --_weight: var(--ds-weight-bold);
  --_pad-x: var(--ds-space-1-5);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* grammarly: 20px, 12px, r4, tint bg + same-hue 1px border + darkened ink; the column heading is this same chip */
.ds-enum-chip[data-variant="grammarly-semantic-chip-trio"] {
  --_h: 20px;
  --_radius: var(--ds-radius-xs);
  --_edge: var(--_hue);
}

/* manychat: chip as a value inside a sentence — accent tint + hairline, 12/400 ink, per-chip ellipsis */
.ds-enum-chip[data-variant="manychat-chip-in-sentence"] {
  --_h: 20px;
  --_weight: var(--ds-weight-regular);
  --_fill: var(--ds-accent-tint);
  --_ink: var(--ds-ink);
  --_edge: color-mix(in srgb, var(--ds-accent) 18%, transparent);
  --_max: 72px;
}

/* luma sub-query chip (captured on perplexity): tint-1, no border, r6, 15px muted, 28 tall */
.ds-enum-chip[data-variant="luma-sub-query-chip"] {
  --_h: 28px;
  --_radius: var(--ds-radius-sm);
  --_size: var(--ds-text-md);
  --_weight: var(--ds-weight-regular);
  --_pad-x: var(--ds-space-3);
  --_fill: var(--ds-surface-2);
  --_ink: var(--ds-ink-muted);
  --_edge: transparent;
}

/* hsajl merge tag: violet on lavender, INLINE at body size, r4, wraps with the prose */
.ds-enum-chip[data-variant="hsajl-merge-tag"] {
  display: inline;
  min-block-size: 0;
  padding: 0 .3em;
  --_radius: var(--ds-radius-xs);
  --_fill: var(--ds-accent-2-tint);
  --_ink: var(--ds-accent-2-ink);
  --_edge: transparent;
  font: inherit;
  line-height: inherit;
  white-space: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================================
   STATES (last)
   ========================================================================= */
.ds-enum-chip:is(a, button, [role="option"]) { cursor: pointer; }
.ds-enum-chip:is(a, button, [role="option"]):hover,
.ds-enum-chip[data-state="hover"] { border-color: color-mix(in srgb, var(--_hue) 55%, transparent); }
/* selected (a filter chip that is on): the value's own edge + the selected weight; geometry never changes */
.ds-enum-chip:is([aria-pressed="true"], [aria-selected="true"]) { border-color: var(--_hue); font-weight: var(--ds-selected-weight); }
.ds-enum-chip:is([aria-pressed="true"], [aria-selected="true"]):not([data-hue]):not([data-tone]) { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: var(--ds-selected-line); }
.ds-enum-chip:is(:disabled, [aria-disabled="true"]) { --_fill: var(--ds-surface-3); --_ink: var(--ds-ink-faint); --_edge: transparent; --_hue: var(--ds-ink-faint); cursor: not-allowed; }
.ds-enum-chip[aria-invalid="true"] { --_edge: var(--ds-danger); }
.ds-enum-chip[aria-busy="true"] { --_fill: var(--ds-skeleton); --_edge: transparent; color: transparent; min-inline-size: 56px; }
.ds-enum-chip[aria-busy="true"] > * { visibility: hidden; }
/* empty: an unset enum is a dashed footprint that invites a value (dashed = empty / optional slot) */
.ds-enum-chip[data-state="empty"] { --_fill: transparent; --_edge: var(--ds-rule-strong); --_ink: var(--ds-ink-muted); --_hue: var(--ds-ink-muted); border-style: dashed; }


/* components/feature-checklist/feature-checklist.css */
/* ============================================================================
   feature-checklist — Check list                                  (taxonomy §J · common · S0)
   Root: .ds-feature-checklist (<ul>) — rows of [mark] [label] [meta | icon] on a fixed pitch with a hanging indent:
         a wrapped label's second line starts under its first, never under the mark.
   Parts: __item (<li>) · __mark (16px glyph cell: CSS tick by default; may hold an svg, a dot, an index) ·
          __label · __meta (trailing muted note: "coming soon", "add-on") · __icon (trailing icon cell, heron) ·
          __empty (the footprint message when the list has no rows)
   Axes:  data-marker="check|dot|number|none"   what the mark draws (none = the row is bare text; heron)
          data-tone="success|ink|accent"          the mark's colour (success = corpus default; ink = "a fact, not a
                                                  celebration" — airbnb; accent = brand spin)
          data-pitch="dense|default|loose"        24 / 32 / 40 px row pitch on a 14 px body
          data-size="lg"                          16 px label + 24 px mark (airbnb, origin)
          data-rule="hairline"                    a --ds-rule between rows (heron)
          data-align="center"                     centred rows (origin's promo bullets)
          data-meta="mono"                        __meta in the mono lane (a spec cell: `52 parts · 4 m`) — the house
                                                  row for L-FEAT-10 (2026-09-20, additive)
   Item states: data-state="soon" (muted label, neutral mark) · data-included="false" (dash mark, muted — the
          comparison "not in this plan") · root aria-busy (skeleton rows) · root data-state="empty" (dashed footprint)
   Variants: jstov (unmarked root — 32 px pitch, 16 px success tick, ink-2 text, rows are TEXT not links) ·
          jasper-green-check-underlined-rows · airbnb-verification-checklist · heron-icon-checklist-4-rows · origin-3-bullets
   Private knobs: --_pad-y --_gap --_mark-size --_mark --_size --_ink --_icon-cell
   ========================================================================== */

.ds-feature-checklist svg[fill="none"] { fill: none; stroke: currentColor; }

.ds-feature-checklist {
  --_pad-y:     var(--ds-space-1-5);              /* 6 + 20 line + 6 = 32 px pitch on a 14 body          */
  --_gap:       var(--ds-space-3);                /* mark ↔ label: Jasper 12                              */
  --_mark-size: var(--ds-icon-size);              /* 16                                                    */
  --_mark:      var(--ds-success);
  --_size:      var(--ds-text-md);
  --_ink:       var(--ds-ink-2);
  --_icon-cell: 60px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  color: var(--_ink);
}
.ds-feature-checklist[data-pitch="dense"] { --_pad-y: var(--ds-space-1); }
.ds-feature-checklist[data-pitch="loose"] { --_pad-y: calc(var(--ds-space-2) + var(--ds-space-0-5)); }
.ds-feature-checklist[data-size="lg"]     { --_size: var(--ds-text-lg); --_mark-size: var(--ds-icon-size-rail); --_pad-y: var(--ds-space-2); }
.ds-feature-checklist[data-tone="ink"]    { --_mark: var(--ds-ink); }
.ds-feature-checklist[data-tone="accent"] { --_mark: var(--ds-accent); }

/* ---- the row: hanging indent by grid — mark cell · label · trailing cell ---------------------------- */
.ds-feature-checklist__item {
  display: grid;
  grid-template-columns: var(--_mark-size) minmax(0, 1fr) auto;
  column-gap: var(--_gap);
  align-items: start;
  padding-block: var(--_pad-y);
  font-size: var(--_size);
  line-height: var(--ds-lh-body);
  min-width: 0;
}
.ds-feature-checklist[data-marker="none"] .ds-feature-checklist__item { grid-template-columns: minmax(0, 1fr) auto; }
.ds-feature-checklist[data-marker="none"] .ds-feature-checklist__mark { display: none; }
.ds-feature-checklist[data-rule="hairline"] .ds-feature-checklist__item + .ds-feature-checklist__item { border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-feature-checklist[data-align="center"] .ds-feature-checklist__item { grid-template-columns: auto minmax(0, auto); justify-content: center; }

/* mark cell: sized to the first line so a wrapped row keeps the glyph on line one */
.ds-feature-checklist__mark {
  display: inline-grid;
  place-items: center;
  inline-size: var(--_mark-size);
  block-size: calc(var(--_size) * var(--ds-lh-body));
  color: var(--_mark);
}
/* check (default): a tick drawn with two borders — no image, one hue */
.ds-feature-checklist__mark::before {
  content: "";
  inline-size: calc(var(--_mark-size) * .34);
  block-size: calc(var(--_mark-size) * .62);
  margin-block-start: calc(var(--_mark-size) * -.18);
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}
.ds-feature-checklist__mark > svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-feature-checklist__mark:has(> svg)::before { content: none; }
.ds-feature-checklist[data-marker="dot"] .ds-feature-checklist__mark::before { inline-size: 6px; block-size: 6px; margin: 0; border: 0; border-radius: var(--ds-radius-pill); background: currentColor; transform: none; }
.ds-feature-checklist[data-marker="number"] { counter-reset: ds-feature; }
.ds-feature-checklist[data-marker="number"] .ds-feature-checklist__item { counter-increment: ds-feature; }
.ds-feature-checklist[data-marker="number"] .ds-feature-checklist__mark::before { content: counter(ds-feature, decimal-leading-zero); inline-size: auto; block-size: auto; margin: 0; border: 0; transform: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }

.ds-feature-checklist__label { min-width: 0; }
.ds-feature-checklist__label b { font-weight: var(--ds-weight-medium); color: var(--ds-ink); }
.ds-feature-checklist__meta { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); white-space: nowrap; padding-block-start: calc((var(--_size) * var(--ds-lh-body) - var(--ds-text-sm) * var(--ds-lh-body)) / 2); }
.ds-feature-checklist__icon {
  display: inline-grid;
  place-items: center;
  inline-size: var(--_icon-cell);
  align-self: stretch;
  margin-block: calc(-1 * var(--_pad-y));
  color: var(--ds-ink-2);
}
.ds-feature-checklist__icon > svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* ---- item states ------------------------------------------------------------------------------------ */
.ds-feature-checklist__item[data-state="soon"] { color: var(--ds-ink-muted); }
.ds-feature-checklist__item[data-state="soon"] .ds-feature-checklist__mark { color: var(--ds-border-strong); }
.ds-feature-checklist__item[data-included="false"] { color: var(--ds-ink-muted); }
.ds-feature-checklist__item[data-included="false"] .ds-feature-checklist__mark { color: var(--ds-border-strong); }
.ds-feature-checklist__item[data-included="false"] .ds-feature-checklist__mark::before { inline-size: calc(var(--_mark-size) * .5); block-size: 0; margin: 0; border: 0; border-block-end: 2px solid currentColor; transform: none; }

/* ---- list states -------------------------------------------------------------------------------------- */
.ds-feature-checklist[aria-busy="true"] .ds-feature-checklist__item > * { visibility: hidden; }
.ds-feature-checklist[aria-busy="true"] .ds-feature-checklist__label { visibility: visible; color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); max-inline-size: 60%; }
.ds-feature-checklist[data-state="empty"] { padding: var(--ds-space-4); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-sm); }
.ds-feature-checklist__empty { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-align: center; }

/* =========================================================================
   VARIANTS
   ========================================================================= */

/* jasper: 32 px pitch, 14 px green 2 px-stroke check, every row underlined (their tooltip affordance —
   kept as the variant; the house leaves rows as plain text) */
.ds-feature-checklist[data-variant="jasper-green-check-underlined-rows"] { --_mark-size: 14px; --_gap: var(--ds-space-3); }
.ds-feature-checklist[data-variant="jasper-green-check-underlined-rows"] .ds-feature-checklist__label { text-decoration: underline; text-decoration-thickness: var(--ds-border-width); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .18em; }

/* airbnb: 24 px INK checks, 16/400 text, 40 px pitch, inside a bordered card; completion is a fact, not a celebration */
.ds-feature-checklist[data-variant="airbnb-verification-checklist"] { --_mark: var(--ds-ink); --_mark-size: var(--ds-icon-size-rail); --_size: var(--ds-text-lg); --_ink: var(--ds-ink); --_pad-y: var(--ds-space-2); --_gap: var(--ds-space-4); }

/* heron: 52 px rows separated by hairlines, a one-sentence text cell + a 60 px icon cell (hexagon-outlined glyph);
   no check mark at all — the icon is the mark */
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] { --_pad-y: var(--ds-space-4); --_size: var(--ds-text-sm); --_ink: var(--ds-ink); }
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__item { grid-template-columns: minmax(0, 1fr) auto; min-block-size: 52px; align-items: center; }
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__item + .ds-feature-checklist__item { border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__mark { display: none; }
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__icon { border-inline-start: var(--ds-border-width) solid var(--ds-rule); }
/* heron row with a house __meta spec cell before the icon (L-FEAT-10 JSTOV): label | meta | icon — additive 2026-09-20 */
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__item:has(> .ds-feature-checklist__meta) { grid-template-columns: minmax(0, 1fr) auto auto; }
.ds-feature-checklist[data-variant="heron-icon-checklist-4-rows"] .ds-feature-checklist__item:has(> .ds-feature-checklist__meta) .ds-feature-checklist__meta { padding-block-start: 0; padding-inline-end: var(--ds-space-4); }
/* data-meta="mono": the trailing note becomes a spec cell in the mono lane (uppercase, tracked, tabular) */
.ds-feature-checklist[data-meta="mono"] .ds-feature-checklist__meta { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* origin: three centred bullets under a serif headline — filled 6 px dot, 18 px text, 3–5 words each */
.ds-feature-checklist[data-variant="origin-3-bullets"] { --_mark: var(--ds-ink); --_size: var(--ds-text-lg); --_ink: var(--ds-ink); --_mark-size: 12px; --_pad-y: var(--ds-space-1); }
.ds-feature-checklist[data-variant="origin-3-bullets"] .ds-feature-checklist__item { grid-template-columns: auto minmax(0, auto); justify-content: center; }
.ds-feature-checklist[data-variant="origin-3-bullets"] .ds-feature-checklist__mark::before { inline-size: 6px; block-size: 6px; margin: 0; border: 0; border-radius: var(--ds-radius-pill); background: currentColor; transform: none; }


/* components/footer/footer.css */
/* ============================================================================
   footer — Footer
   taxonomy-components.md §A · common · S1  ·  sections L-FOOT-01/02/03, L-TESTI-04

   Root: <footer class="ds-footer" data-variant="…">  (one per page)
   Parts (reading order):
     __inner · __row · __brand (__logo, __mark, __wordmark, __tagline, __ai-rail,
     __badges, __brand-foot, __ambient) · __groups > __col? > __group (__group-title,
     __list, __link, __badge, __ext) · __card (__card-title, __emphasis, __card-cta,
     __proof, __proof-link, __stars, __rating, __proof-divider) · __subscribe (__input,
     __submit, __subscribe-msg) · __signoff (__signoff-svg) · __rule · __legal (__copy, __operator,
     __status, __legal-links, __theme, __privacy, __region-pill) · __terminator ·
     __utility-row > __cell · __colophon · __plate · __social (__social-tile,
     __social-glyph) · __region · __table > __cell (heron)
   Variants: jstov (default) · sequence-conversion-card · klarna-wordmark-monument ·
     rox-engineering-grid · legend-dashed-utility-row · vercel-sitemap-badges ·
     heron-table-footer · intercom-mono-labelled · attio-mega · fibery-proof-rail ·
     luma-app-footer · perplexity-in-app-link-row
   States: link hover/focus/current · groups[aria-busy] skeleton · groups[data-state=empty]
     dashed footprint · subscribe aria-invalid / data-state=success / submit aria-busy ·
     card CTA hover / disabled / aria-busy · theme radiogroup aria-checked
   Axes (root): data-headings="rule|eyebrow" · data-legal="mono" (one mono legal row, 2026-09-20) ·
     data-rules="solid" (legend: hairlines instead of dashes, 2026-09-20) · data-mode="dark" island
     (house group titles → ink / semibold, 2026-09-20)
   Tokens only (tools/lint-tokens.mjs). Private knobs are --_*.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. ROOT
   ------------------------------------------------------------------------- */
.ds-footer {
  --_pitch: var(--ds-control-h);            /* link row pitch: 36 (median of 29–51) */
  --_col-min: 140px;                        /* sitemap column minimum (auto-fit): 2 cols at 390 */
  --_card-w: clamp(340px, 24cqi, 432px);    /* conversion card: ~24 % of the container (sequence 432 @ 1920) */
  --_max: var(--ds-container-max);
  --_band: var(--ds-surface-inverse);       /* house terminator: ink band */
  --_link-ink: var(--ds-ink-muted);
  --_title-ink: var(--ds-ink-muted);
  --_toggle-h: var(--ds-control-h-sm);
  --_spin: var(--ds-ink);
  position: relative;
  container-type: inline-size;
  background: var(--ds-ground);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-list);
}
.ds-footer__inner {
  position: relative;
  width: 100%;
  max-width: var(--_max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter-page);
  padding-block: var(--ds-space-16) var(--ds-space-8);
  min-width: 0;
}

/* first row: brand | groups | card  (flex so each slot is optional) */
.ds-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--ds-space-10) var(--ds-space-6);   /* 40 × 24 (80 × 48 on an 8 px unit) */
  min-width: 0;
}
.ds-footer__brand  { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-5); }
.ds-footer__groups { flex: 2 1 320px; min-width: 0; }
/* several group grids stacked (rox: group A row, group B row — each row's headings align) */
.ds-footer__groups-stack { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-16); }
.ds-footer__groups-stack > .ds-footer__groups { flex: none; }
.ds-footer__card   { flex: 0 1 var(--_card-w); max-width: 100%; min-width: 0; }

/* ---------------------------------------------------------------------------
   1. BRAND BLOCK
   ------------------------------------------------------------------------- */
.ds-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  align-self: flex-start;
  min-height: var(--_pitch);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink);
  text-decoration: none;
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-lg);
  letter-spacing: var(--ds-heading-tracking);
}
.ds-footer__mark { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); flex: none; fill: currentColor; }
.ds-footer__tagline { color: var(--ds-ink-muted); max-width: 28ch; margin: 0; }

/* "Ask about us on:" AI-assistant rail (fibery; house GEO signal) */
.ds-footer__ai-rail { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-footer__ai-label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-footer__ai-list { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; }
.ds-footer__ai-tile {
  display: inline-grid;
  place-items: center;
  width: var(--ds-control-h-sm);
  height: var(--ds-control-h-sm);
  border: var(--ds-border-width) solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-footer__ai-tile:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); color: var(--ds-ink); }

/* compliance seals (fibery) */
.ds-footer__badges { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.ds-footer__seal {
  display: inline-grid;
  place-items: center;
  width: var(--ds-control-h-lg);
  height: var(--ds-control-h-lg);
  border: var(--ds-border-width) dashed var(--ds-rule-strong);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-muted);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.ds-footer__brand-foot { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--ds-space-4); }

/* decorative ambient art (rox globe): behind content, never figure */
.ds-footer__ambient {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: min(420px, 60%);
  height: auto;
  pointer-events: none;
  fill: none;
  stroke: var(--ds-line-art);
  stroke-width: 1;
  opacity: .5;
  z-index: 0;
}
.ds-footer__ambient + * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   2. SITEMAP GROUPS — heading is row zero of the list (muted, same size, same pitch)
   ------------------------------------------------------------------------- */
.ds-footer__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--_col-min), 100%), 1fr));
  gap: var(--ds-space-8) var(--ds-space-5);
  align-items: start;
}
.ds-footer__col { display: flex; flex-direction: column; gap: var(--ds-space-8); min-width: 0; }
.ds-footer__group { min-width: 0; }
.ds-footer__group-title {
  display: flex;
  align-items: center;
  min-height: var(--_pitch);
  margin: 0;
  font-size: inherit;
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-list);
  color: var(--_title-ink);
}
.ds-footer__list { margin: 0; padding: 0; list-style: none; }
.ds-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--_pitch);
  max-width: 100%;
  border-radius: var(--ds-radius-xs);
  color: var(--_link-ink);
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-footer__link:hover,
.ds-footer__link[data-state="hover"] {
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: .2em;
}
.ds-footer__link[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-selected-weight); }
.ds-footer__link[aria-disabled="true"] { color: var(--ds-ink-faint); pointer-events: none; }
/* inline recency badge: mono caps, hairline, xs radius — never white-on-colour */
.ds-footer__badge {
  display: inline-block;
  padding: 0 var(--ds-space-1);
  border: var(--ds-border-width) solid var(--ds-rule-strong);
  border-radius: var(--ds-radius-xs);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ds-ink-2);
  background: var(--ds-surface);
}
.ds-footer__badge[data-tone="accent"] { border-color: transparent; background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
/* external-link glyph (↗) */
.ds-footer__ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; color: var(--ds-ink-faint); flex: none; }
.ds-footer__link:hover .ds-footer__ext { color: currentColor; }

/* rule-under-heading columns (rox): opt in per root or per group */
.ds-footer[data-headings="rule"] .ds-footer__group-title,
.ds-footer__group[data-headings="rule"] .ds-footer__group-title {
  color: var(--ds-ink);
  border-block-end: var(--ds-border-width) solid var(--ds-rule-strong);
  margin-block-end: var(--ds-space-2);
}
/* eyebrow headings (intercom / legend / heron): the label lane, forced caps */
.ds-footer[data-headings="eyebrow"] .ds-footer__group-title,
.ds-footer__group[data-headings="eyebrow"] .ds-footer__group-title {
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
}

/* loading: skeleton bars in the true frame (no layout jump) */
.ds-footer__groups[aria-busy="true"] .ds-footer__group-title,
.ds-footer__groups[aria-busy="true"] .ds-footer__link {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ds-footer__groups[aria-busy="true"] .ds-footer__group-title::after,
.ds-footer__groups[aria-busy="true"] .ds-footer__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: calc(50% - .5em);
  width: 100%;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-3);
}
.ds-footer__groups[aria-busy="true"] .ds-footer__group-title::after { width: 60%; background: var(--ds-surface-2); }
/* empty: dashed footprint, never blank */
.ds-footer__groups[data-state="empty"] {
  display: grid;
  place-items: center;
  min-height: calc(var(--_pitch) * 4);
  border: var(--ds-border-width) dashed var(--ds-rule);
  border-radius: var(--ds-radius-md);
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-sm);
}
.ds-footer__groups[data-state="empty"]::before { content: attr(data-empty); }

/* ---------------------------------------------------------------------------
   3. CONVERSION CARD (sequence; house optional) — holds the view's ONE primary
   ------------------------------------------------------------------------- */
.ds-footer__card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  align-self: flex-start;
  padding: calc(var(--ds-card-pad) * 1.5);  /* 24; sequence 32 at 432 wide */
  border: var(--ds-border-width) solid var(--ds-card-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card-bg);
  box-shadow: var(--ds-card-shadow);
}
.ds-footer__card-title {
  margin: 0;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-heading);
  color: var(--ds-ink-muted);
  text-wrap: balance;
}
.ds-footer__emphasis { color: var(--ds-ink); font-weight: var(--ds-weight-medium); }
.ds-footer__card-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ds-control-h-lg);
  padding-inline: var(--ds-space-5);
  border: var(--ds-border-width) solid var(--ds-primary-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-primary-fill);
  color: var(--ds-ink-on-primary);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-md);
  text-decoration: none;
  text-transform: var(--ds-control-case);
  box-shadow: var(--ds-shadow-lip);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-footer__card-cta:hover { background: var(--ds-primary-fill-hover); }
.ds-footer__card-cta[aria-disabled="true"], .ds-footer__card-cta:disabled {
  background: var(--ds-surface-3); border-color: var(--ds-rule); color: var(--ds-ink-faint); box-shadow: none; cursor: not-allowed; pointer-events: none;
}
.ds-footer__card-cta[aria-busy="true"] { color: transparent; pointer-events: none; }
.ds-footer__card-cta[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: var(--ds-icon-size); height: var(--ds-icon-size);
  border: 2px solid var(--ds-ink-on-primary); border-inline-end-color: transparent; border-radius: var(--ds-radius-pill);
  animation: ds-footer-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-footer-spin { to { transform: rotate(360deg); } }
.ds-footer__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-footer__proof-link { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-ink-link); text-decoration: none; border-radius: var(--ds-radius-xs); white-space: nowrap; }
.ds-footer__proof-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.ds-footer__proof-link .ds-footer__ext { color: currentColor; }
.ds-footer__stars { display: inline-flex; gap: 2px; color: var(--ds-data-6); }
.ds-footer__stars svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: currentColor; }
.ds-footer__rating { font-variant-numeric: tabular-nums; color: var(--ds-ink-2); }
.ds-footer__proof-divider { width: var(--ds-border-width); height: 1.2em; background: var(--ds-rule-strong); }

/* ---------------------------------------------------------------------------
   4. SUBSCRIBE (heron; house optional) — input + submit cell, states specified
   ------------------------------------------------------------------------- */
.ds-footer__subscribe { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; }
.ds-footer__subscribe-text { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); max-width: 32ch; }
.ds-footer__subscribe-row { display: flex; min-width: 0; }
.ds-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ds-control-h);
  padding-inline: var(--ds-control-pad-x);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-ink);
}
.ds-footer__input:hover { border-color: var(--ds-border-strong); }
.ds-footer__input[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-footer__submit {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ds-control-h);
  min-height: var(--ds-control-h);
  margin-inline-start: calc(-1 * var(--ds-border-width));
  padding: 0;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  background: var(--ds-surface);
  color: var(--ds-ink);
  flex: none;
}
.ds-footer__submit:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); }
.ds-footer__submit svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-footer__submit[aria-busy="true"] svg { visibility: hidden; }
.ds-footer__submit[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: var(--ds-icon-size); height: var(--ds-icon-size);
  border: 2px solid var(--_spin); border-inline-end-color: transparent; border-radius: var(--ds-radius-pill);
  animation: ds-footer-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
.ds-footer__subscribe-msg { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); min-height: 1.4em; }
.ds-footer__subscribe[data-state="error"] .ds-footer__subscribe-msg { color: var(--ds-danger-ink); }
.ds-footer__subscribe[data-state="success"] .ds-footer__subscribe-msg { color: var(--ds-success-ink); }

/* ---------------------------------------------------------------------------
   5. SIGN-OFF, RULE, LEGAL ROW, TERMINATOR
   ------------------------------------------------------------------------- */
.ds-footer__signoff { margin-block: var(--ds-space-16) var(--ds-space-8); color: var(--ds-ink); }
.ds-footer__signoff-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ds-footer__signoff-svg text { font-family: var(--ds-font-display); font-weight: var(--ds-weight-bold); fill: currentColor; letter-spacing: -.03em; }
.ds-footer__signoff[data-style="outline"] .ds-footer__signoff-svg text { fill: none; stroke: var(--ds-line-art); stroke-width: 1.5; }

.ds-footer__rule { width: 100%; height: 0; margin-block: var(--ds-space-10) 0; border: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-footer__rule[data-style="faded"] {
  border: 0;
  height: var(--ds-border-width);
  background: linear-gradient(to right, transparent, var(--ds-rule) 15%, var(--ds-rule) 85%, transparent);
}
.ds-footer__rule[data-style="dashed"] { border-block-start-style: dashed; }

.ds-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-6);
  padding-block: var(--ds-space-6) 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
}
.ds-footer__legal-start, .ds-footer__legal-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-6); min-width: 0; }
.ds-footer__copy { margin: 0; }
/* the legal operator line (company, registration, VAT): a full-width xs row under the copyright */
.ds-footer__operator { margin: 0; flex-basis: 100%; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.ds-footer__copy--dense { font-size: var(--ds-text-xs); line-height: var(--ds-lh-body); max-width: 72ch; }
.ds-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-5); margin: 0; padding: 0; list-style: none; }
.ds-footer__legal-links a { color: inherit; text-decoration: none; border-radius: var(--ds-radius-xs); }
.ds-footer__legal-links a:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; }
.ds-footer__legal-links a[aria-current="page"] { color: var(--ds-ink); }

/* live status token (house · vercel) — dot + mono caps; text stays muted (R12) */
.ds-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-h-sm);
  border-radius: var(--ds-radius-xs);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ds-footer__status::before { content: ""; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-presence); flex: none; }
.ds-footer__status:hover { color: var(--ds-ink); }
.ds-footer__status[data-status="degraded"]::before { background: var(--ds-warning); }
.ds-footer__status[data-status="down"]::before { background: var(--ds-danger); }
.ds-footer__status[data-tone="accent"] { color: var(--ds-ink-link); }
.ds-footer__status[data-tone="accent"]::before { background: var(--ds-accent); }

/* 3-state theme toggle: system / light / dark — a radiogroup in a pill track */
.ds-footer__theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--_toggle-h);
  padding: 2px;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  margin: 0;
  align-self: flex-start;
  flex: none;
}
.ds-footer__theme-opt {
  display: inline-grid;
  place-items: center;
  width: calc(var(--_toggle-h) - 6px);
  height: calc(var(--_toggle-h) - 6px);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-ink-muted);
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-footer__theme-opt:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-footer__theme-opt[aria-checked="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); }
.ds-footer__theme-opt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* privacy-choices toggle (intercom): tiny switch glyph + text link */
.ds-footer__privacy { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: inherit; text-decoration: none; border-radius: var(--ds-radius-xs); }
.ds-footer__privacy::before {
  content: ""; width: 20px; height: 12px; border-radius: var(--ds-radius-pill);
  border: var(--ds-border-width) solid var(--ds-accent); background: linear-gradient(to right, var(--ds-accent) 50%, transparent 50%);
}
.ds-footer__privacy:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; }

/* regional pill (fibery "Crafted in Europe") */
.ds-footer__region-pill {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-raised); color: var(--ds-ink-2); font-size: var(--ds-text-xs); white-space: nowrap;
}

/* terminator: the brand band that ends the page (house 3 px ink; sequence gradient) */
.ds-footer__terminator { height: 3px; background: var(--_band); }

/* ---------------------------------------------------------------------------
   6. SOCIAL + WIDGETS
   ------------------------------------------------------------------------- */
.ds-footer__social { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.ds-footer__social-tile {
  display: inline-grid; place-items: center;
  width: var(--ds-control-h-lg); height: var(--ds-control-h-lg);
  border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: transparent; color: var(--ds-ink); text-decoration: none;
  font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-footer__social-tile:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); }
.ds-footer__social-tile[data-fill] { background: var(--ds-surface-2); border-color: var(--ds-rule); }
.ds-footer__social-glyph {
  display: inline-grid; place-items: center;
  width: var(--ds-control-h-sm); height: var(--ds-control-h-sm);
  border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); text-decoration: none;
  font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
}
.ds-footer__social-glyph:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-footer__social-glyph svg, .ds-footer__social-tile svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* market / region selector chip-button (klarna): the column's only filled surface */
.ds-footer__region {
  display: inline-flex; align-items: center; gap: var(--ds-space-3);
  min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-3) var(--ds-space-4);
  border: 0; border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2); color: var(--ds-ink); text-decoration: none; text-align: start; white-space: nowrap;
}
.ds-footer__region:hover { background: var(--ds-surface-3); }
.ds-footer__region-flag { width: 26px; height: 26px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); display: inline-grid; place-items: center; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); flex: none; }
.ds-footer__region svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; margin-inline-start: var(--ds-space-4); }

/* App Store badge (legend): a black badge honoured as the vendor draws it */
.ds-footer__store {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-rule-strong); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); text-decoration: none; line-height: 1.1;
}
.ds-footer__store svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: currentColor; }
.ds-footer__store small { display: block; font-size: var(--ds-text-xs); opacity: .8; }
.ds-footer__store strong { display: block; font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); }

/* ---------------------------------------------------------------------------
   7. LEGEND: dashed utility row + colophon + plate
   ------------------------------------------------------------------------- */
.ds-footer__utility-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-block: var(--ds-border-width) dashed var(--ds-rule-strong);
}
.ds-footer__cell { display: flex; flex-wrap: wrap; gap: var(--ds-space-6); padding: var(--ds-space-6) var(--ds-space-5); min-width: 0; }
.ds-footer__cell + .ds-footer__cell { border-inline-start: var(--ds-border-width) dashed var(--ds-rule-strong); }
.ds-footer__cell[data-align="center"] { align-items: center; justify-content: center; }
.ds-footer__cell[data-align="end"] { align-items: flex-end; justify-content: flex-end; }
.ds-footer__colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-10);
  padding-block: var(--ds-space-4);
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-ink-muted);
}
.ds-footer__colophon dl { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-10); margin: 0; }
.ds-footer__colophon div { display: inline-flex; gap: var(--ds-space-2); }
.ds-footer__colophon dt::after { content: ":"; }
.ds-footer__colophon dd { margin: 0; color: var(--ds-ink-2); }
.ds-footer__plate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  margin-block-start: var(--ds-space-8);
  background: linear-gradient(to bottom, transparent, var(--ds-illustration-ground));
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}
.ds-footer__plate[data-plate="none"] { min-height: 120px; }
.ds-footer__plate-mark { width: 96px; height: 96px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); display: grid; place-items: center; color: var(--ds-ink-inverse); }
.ds-footer__plate-mark svg { width: 40px; height: 40px; fill: currentColor; }

/* ---------------------------------------------------------------------------
   8. HERON TABLE — 3/2/2/2/3 cells × 2 rows, mark spanning rows
   ------------------------------------------------------------------------- */
.ds-footer__table {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
  border: var(--ds-border-width) solid var(--ds-rule);
  border-inline-end: 0;
  border-block-end: 0;
}
.ds-footer__table > .ds-footer__cell {
  flex-direction: column;
  flex-wrap: nowrap;          /* a wrapping column flex sizes itself to max-content and overflows the track */
  align-items: stretch;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-inline-end: var(--ds-border-width) solid var(--ds-rule);
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-footer__table > .ds-footer__cell + .ds-footer__cell { border-inline-start: 0; }
.ds-footer__cell-label {
  display: block;
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
}
.ds-footer__cell--span { grid-row: span 2; display: grid; place-items: center; }
.ds-footer__cell--span svg { width: min(160px, 60%); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ds-footer__tagline--display { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); text-transform: uppercase; color: var(--ds-ink); max-width: 18ch; }
.ds-footer__cell .ds-footer__link { min-height: var(--ds-control-h-sm); }
.ds-footer__cell .ds-footer__input { border-radius: 0; }
.ds-footer__cell .ds-footer__submit { border-radius: 0; }
.ds-footer__legal-cells { display: flex; margin: 0; padding: 0; list-style: none; }
.ds-footer__legal-cells a {
  display: inline-flex; align-items: center; min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-4);
  border-inline-start: var(--ds-border-width) solid var(--ds-rule); color: var(--ds-ink); text-decoration: none; font-size: var(--ds-text-sm);
}
.ds-footer__legal-cells a:hover { background: var(--ds-hover-bg); }

/* ---------------------------------------------------------------------------
   9. VARIANTS
   ------------------------------------------------------------------------- */

/* jstov (house, default) — Sequence's structure (brand | sitemap | conversion card;
   two-ended legal) with Klarna's ink-only hierarchy: no accent anywhere in the
   footer, headings = row zero, Fibery's "Ask about us on" AI rail in the brand
   column, Vercel's utility bar (status token + 3-state theme toggle) as the last
   row, 3 px ink band terminator. The card is optional (only when the page has no
   other close) and carries the view's one primary.                             */
.ds-footer:not([data-variant]),
.ds-footer[data-variant="jstov"] {
  --_pitch: var(--ds-control-h);
  --_col-min: 120px;
  --_band: var(--ds-surface-inverse);
}
.ds-footer:not([data-variant]) .ds-footer__brand,
.ds-footer[data-variant="jstov"] .ds-footer__brand,
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__brand { flex: 0 1 200px; }
.ds-footer:not([data-variant]) .ds-footer__proof-link,
.ds-footer[data-variant="jstov"] .ds-footer__proof-link { color: var(--ds-ink); }
.ds-footer:not([data-variant]) .ds-footer__stars,
.ds-footer[data-variant="jstov"] .ds-footer__stars { color: var(--ds-ink-2); }

/* sequence-conversion-card — brand | 3 ragged columns (51 px pitch, one type size)
   | bordered 432 px CTA card (gradient emphasis, full-width pill primary, G2 stars ›
   | product tour ›); faded hairline; two-ended legal; full-bleed gradient strip. */
.ds-footer[data-variant="sequence-conversion-card"] {
  --_pitch: calc(var(--ds-control-h) + var(--ds-space-4));
  --_col-min: 120px;
  --_link-ink: var(--ds-ink-2);
  --_band: linear-gradient(to right, var(--ds-accent), var(--ds-accent-2));
  font-size: var(--ds-text-lg);
  background: var(--ds-surface);
}
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__group-title { font-size: var(--ds-text-sm); }
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__card-title { font-size: var(--ds-text-lg); color: var(--ds-ink); }
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__emphasis {
  background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: inherit;
}
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__card-cta { border-radius: var(--ds-radius-pill); min-height: var(--ds-control-h-lg); }
.ds-footer[data-variant="sequence-conversion-card"] .ds-footer__terminator { height: var(--ds-space-1); }

/* klarna-wordmark-monument — five equal columns with widget slots (region
   chip-button, social tiles), bold white headings, 40 px pitch, no max-width;
   width-fitted wordmark band; hairline + split legal (dense disclosure left,
   utility links right). Committed dark: put data-mode="dark" on the root.       */
.ds-footer[data-variant="klarna-wordmark-monument"] {
  --_pitch: calc(var(--ds-control-h) + var(--ds-space-1));
  --_max: none;
  --_col-min: 200px;
  --_link-ink: var(--ds-ink-2);
  --_title-ink: var(--ds-ink);
}
.ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__inner { padding-inline: var(--ds-space-5); }
.ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__groups { gap: var(--ds-space-10) var(--ds-space-12); }
.ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__group-title {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-heading-tracking);
  min-height: calc(var(--_pitch) + var(--ds-space-4));
  align-items: flex-start;
}
.ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__legal { align-items: flex-start; }

/* rox-engineering-grid — 1/3 brand column (space-between: logo top, 3-state theme
   toggle + legal bottom, corner-anchored wireframe globe) + 2/3 link grid of two
   stacked rule-under-heading groups; rails at the container edges, a full-bleed
   seam at the top, drawn joins; bar-less end (no legal row).                     */
.ds-footer[data-variant="rox-engineering-grid"] {
  --_pitch: calc(var(--ds-control-h) + var(--ds-space-1));
  --_col-min: 150px;
  --_toggle-h: var(--ds-control-h-lg);
  border-block-start: var(--ds-border-width) solid var(--ds-rule);
}
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner {
  border-inline: var(--ds-border-width) solid var(--ds-rule);
  padding-block: var(--ds-space-16) var(--ds-space-12);
}
/* drawn joins where the seam meets the rails */
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before,
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after {
  content: "";
  position: absolute;
  inset-block-start: -5px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 100% 1px no-repeat,
    linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 1px 100% no-repeat;
}
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before { inset-inline-start: -5px; }
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after { inset-inline-end: -5px; }
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__row { gap: var(--ds-space-10) 0; }
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__brand {
  flex: 1 1 240px;
  padding-inline-end: var(--ds-space-8);
  border-inline-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__groups-stack { padding-inline-start: var(--ds-space-12); }
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__group-title {
  color: var(--ds-ink);
  border-block-end: var(--ds-border-width) solid var(--ds-rule-strong);
  margin-block-end: var(--ds-space-2);
}
.ds-footer[data-variant="rox-engineering-grid"] .ds-footer__col { gap: var(--ds-space-16); }

/* legend-dashed-utility-row — three dashed cells (two eyebrow lists | App Store
   badge | social tiles bottom-right) + KEY: VALUE colophon + the mark centred in
   an empty band feathered into the ground; nothing beneath the plate.           */
.ds-footer[data-variant="legend-dashed-utility-row"] {
  --_pitch: calc(var(--ds-control-h) + var(--ds-space-2));
  --_link-ink: var(--ds-ink);
}
.ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__inner { padding-block: 0 0; }
.ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__group-title {
  font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); min-height: var(--ds-control-h-sm);
}
.ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__colophon { border-block-end: var(--ds-border-width) dashed var(--ds-rule-strong); }

/* vercel-sitemap-badges — 12 groups flowing 6 × 2 (150 px min), 16/500 ink
   headings, 36 px pitch, inline NEW mono badges; utility bar = mark, accent
   status line left, 3-state theme toggle right. No rules, no band.              */
.ds-footer[data-variant="vercel-sitemap-badges"] {
  --_pitch: var(--ds-control-h);
  --_col-min: 150px;
  --_title-ink: var(--ds-ink);
}
.ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__group-title { font-weight: var(--ds-weight-medium); }
.ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__groups { gap: var(--ds-space-10) var(--ds-space-6); }
.ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--ds-space-6); padding-block-start: var(--ds-space-12); }
.ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__legal-end { width: 100%; justify-content: space-between; }

/* heron-table-footer — the page table continues: 3/2/2/2/3 × 2 cells, mark
   spanning rows, mono eyebrows, subscribe = text + input + bordered submit cell;
   construction-outline wordmark; bottom bar = legal left, bordered link cells right. */
.ds-footer[data-variant="heron-table-footer"] {
  --_pitch: var(--ds-control-h-sm);
  --_link-ink: var(--ds-ink);
  --_max: none;
}
.ds-footer[data-variant="heron-table-footer"] .ds-footer__inner { padding: 0; }
.ds-footer[data-variant="heron-table-footer"] .ds-footer__signoff { margin: 0; padding: var(--ds-space-6) var(--ds-gutter-page); border-block-end: var(--ds-border-width) solid var(--ds-rule); }
.ds-footer[data-variant="heron-table-footer"] .ds-footer__legal { padding: 0 0 0 var(--ds-gutter-page); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .04em; text-transform: uppercase; }

/* intercom-mono-labelled — 5 columns, uppercase mono group heads, 1–3 groups per
   column, ~28 px pitch; legal row = 3 links + privacy toggle; no logo, no social. */
.ds-footer[data-variant="intercom-mono-labelled"] {
  --_pitch: var(--ds-control-h-sm);
  --_col-min: 180px;
  --_link-ink: var(--ds-ink-2);
  background: var(--ds-surface);
}
.ds-footer[data-variant="intercom-mono-labelled"] .ds-footer__group-title {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ds-ink-muted);
}
.ds-footer[data-variant="intercom-mono-labelled"] .ds-footer__legal { justify-content: flex-start; padding-block-start: var(--ds-space-16); }

/* attio-mega — logo column (1/3) + 4 columns with stacked sub-groups, 32 px pitch,
   "New" accent badge (tint + accent ink, not white-on-blue), ↗ on externals;
   bottom row = social glyphs left, legal + 2 links right. Dark chapter close:
   put data-mode="dark" on the root.                                             */
.ds-footer[data-variant="attio-mega"] {
  --_pitch: var(--ds-control-h-sm);
  --_col-min: 130px;                       /* 4 × 130 + 3 gaps fits the 2/3 groups area at 1440 */
  --_link-ink: var(--ds-ink-2);
}
.ds-footer[data-variant="attio-mega"] .ds-footer__brand { flex: 0 1 33%; }   /* the reference's 1/3 logo column */
.ds-footer[data-variant="attio-mega"] .ds-footer__group-title { font-size: var(--ds-text-sm); }
.ds-footer[data-variant="attio-mega"] .ds-footer__link { font-size: var(--ds-text-sm); }
.ds-footer[data-variant="attio-mega"] .ds-footer__legal { padding-block-start: var(--ds-space-16); }

/* fibery-proof-rail — 6 columns on a lighter surface; brand column carries the
   tagline, "Ask about us on" AI tiles, compliance seals and a security line;
   bottom bar on the raised surface with ©, legal links, social glyphs and a
   regional pill.                                                                 */
.ds-footer[data-variant="fibery-proof-rail"] {
  --_pitch: var(--ds-control-h-sm);
  --_col-min: 130px;
  --_link-ink: var(--ds-ink-2);
  --_title-ink: var(--ds-ink);
  background: var(--ds-surface);
}
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__inner { padding-block-end: var(--ds-space-12); }
/* six equal columns in the reference: the brand is one of them, the five groups take the rest */
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__brand  { flex: 1 1 130px; }
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__groups { flex: 5 1 320px; }
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__group-title { font-weight: var(--ds-weight-semibold); }
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__link { font-size: var(--ds-text-sm); }
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__bar {
  background: var(--ds-surface-raised);
  border-block-start: var(--ds-border-width) solid var(--ds-rule);
}
.ds-footer[data-variant="fibery-proof-rail"] .ds-footer__bar .ds-footer__legal {
  max-width: var(--_max); margin-inline: auto; padding: var(--ds-space-4) var(--ds-gutter-page);
}

/* luma-app-footer — a rule; brand mark + links left / channel icons right; a
   centred promo line whose brand word takes the second accent's ink.            */
.ds-footer[data-variant="luma-app-footer"] {
  --_pitch: var(--ds-control-h-sm);
  --_link-ink: var(--ds-ink-muted);
}
.ds-footer[data-variant="luma-app-footer"] .ds-footer__inner { padding-block: 0 var(--ds-space-8); }
.ds-footer[data-variant="luma-app-footer"] .ds-footer__legal { justify-content: space-between; padding-block: var(--ds-space-5) 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-md); }
.ds-footer[data-variant="luma-app-footer"] .ds-footer__legal-links { gap: var(--ds-space-1) var(--ds-space-5); }
.ds-footer__promo { margin: var(--ds-space-6) 0 0; text-align: center; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }
.ds-footer__promo a { color: var(--ds-ink-link); text-decoration: none; }
.ds-footer__promo a:hover { text-decoration: underline; }
.ds-footer__promo .ds-footer__brand-word { color: var(--ds-accent-2-ink); font-weight: var(--ds-weight-medium); }

/* perplexity-in-app-link-row — centred muted links + a locale select at the
   bottom of the sheet; nothing else.                                            */
.ds-footer[data-variant="perplexity-in-app-link-row"] {
  --_pitch: var(--ds-control-h-sm);
  --_max: var(--ds-container-narrow);
  background: transparent;
}
.ds-footer[data-variant="perplexity-in-app-link-row"] .ds-footer__inner { padding-block: var(--ds-space-6); }
.ds-footer[data-variant="perplexity-in-app-link-row"] .ds-footer__legal { justify-content: center; padding: 0; }
.ds-footer__locale {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--ds-control-h-sm);
  padding-inline: var(--ds-space-2) var(--ds-space-6);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-sm);
  cursor: pointer;
}
.ds-footer__locale-wrap { position: relative; display: inline-flex; align-items: center; }
.ds-footer__locale-wrap svg { position: absolute; inset-inline-end: var(--ds-space-2); width: 12px; height: 12px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); color: var(--ds-ink-muted); }
.ds-footer__locale:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }

/* ---------------------------------------------------------------------------
   9b. ADDITIVE AXES (2026-09-20, sections-G lane · L-FOOT-01 / L-FOOT-02)
   ------------------------------------------------------------------------- */
/* house on a DARK ISLAND (a data-mode="dark" ancestor, the root itself, or a data-band band): the muted
   row-zero title loses its hierarchy against a dark ground (quick-tunnels recreation, defect 14 — the page's
   titles are paper at 600), so the house title reads --ds-ink at --ds-weight-semibold there. Other variants
   set --_title-ink themselves; sequence / intercom / attio keep muted titles because that is the reference. */
[data-mode="dark"] .ds-footer:not([data-variant]) .ds-footer__group-title,
[data-mode="dark"] .ds-footer[data-variant="jstov"] .ds-footer__group-title,
[data-band] .ds-footer:not([data-variant]) .ds-footer__group-title,
[data-band] .ds-footer[data-variant="jstov"] .ds-footer__group-title,
.ds-footer[data-mode="dark"]:not([data-variant]) .ds-footer__group-title,
.ds-footer[data-mode="dark"][data-variant="jstov"] .ds-footer__group-title { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .ds-footer:not([data-variant]):not([data-mode="light"]) .ds-footer__group-title,
  :root:not([data-mode="light"]) .ds-footer[data-variant="jstov"]:not([data-mode="light"]) .ds-footer__group-title { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
}
/* data-legal="mono" — the legal row as ONE mono row (`© 2026 Ledgerline Ltd · Privacy · Terms · Status`) instead of
   the two-ended split; the clusters flow left, separated by a faint middle dot. The theme toggle keeps its place
   at the end of the row. (quick-tunnels defect 14: "two-ended legal row vs one mono row".) */
.ds-footer[data-legal="mono"] .ds-footer__legal {
  justify-content: flex-start;
  gap: var(--ds-space-2) var(--ds-space-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: .02em;
}
.ds-footer[data-legal="mono"] .ds-footer__legal-start,
.ds-footer[data-legal="mono"] .ds-footer__legal-end,
.ds-footer[data-legal="mono"] .ds-footer__legal-links { gap: var(--ds-space-2) var(--ds-space-3); }
.ds-footer[data-legal="mono"] .ds-footer__legal-links li + li::before,
.ds-footer[data-legal="mono"] .ds-footer__legal-start > * + *:not(.ds-footer__status)::before,
.ds-footer[data-legal="mono"] .ds-footer__legal-end > .ds-footer__legal-links::before { content: "·"; margin-inline-end: var(--ds-space-3); color: var(--ds-ink-faint); }
.ds-footer[data-legal="mono"] .ds-footer__legal-links li { display: inline-flex; align-items: center; }
.ds-footer[data-legal="mono"] .ds-footer__legal-start > *,
.ds-footer[data-legal="mono"] .ds-footer__status { display: inline-flex; align-items: center; }
.ds-footer[data-legal="mono"] .ds-footer__legal-end { flex: 1 1 auto; }
.ds-footer[data-legal="mono"] .ds-footer__theme { margin-inline-start: auto; }
@container (max-width: 720px) {
  .ds-footer[data-legal="mono"] .ds-footer__legal-end > .ds-footer__legal-links::before { content: none; }   /* the cluster starts its own line: no orphaned dot */
}
/* data-rules="solid" (legend variant) — the dashed grid becomes the page's hairlines (L-FOOT-02 JSTOV:
   "dashed rules become the page's hairlines"): every dashed --ds-rule-strong rule is a solid --ds-rule. */
.ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__utility-row,
.ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__cell + .ds-footer__cell,
.ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__colophon { border-style: solid; border-color: var(--ds-rule); }

/* ---------------------------------------------------------------------------
   10. NARROW (container ≤ 720 px): rails off, tables stack, legal wraps
   ------------------------------------------------------------------------- */
@container (max-width: 720px) {
  .ds-footer__inner { padding-block: var(--ds-space-10) var(--ds-space-6); }
  .ds-footer__row { gap: var(--ds-space-8); }
  .ds-footer__card { flex-basis: 100%; }
  .ds-footer__groups { gap: var(--ds-space-6) var(--ds-space-4); }
  .ds-footer__legal { flex-direction: column; align-items: flex-start; }
  .ds-footer__legal-end { width: 100%; justify-content: space-between; }
  .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner { border-inline: 0; }
  .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before,
  .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after { display: none; }
  .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__brand { border-inline-end: 0; padding-inline-end: 0; }
  .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__groups-stack { padding-inline-start: 0; }
  .ds-footer__ambient { width: 60%; opacity: .35; }
  .ds-footer__table { grid-template-columns: 1fr 1fr; }
  .ds-footer__cell--span { grid-row: span 1; grid-column: span 2; }
  .ds-footer[data-variant="heron-table-footer"] .ds-footer__legal { flex-direction: row; flex-wrap: wrap; padding-inline-start: var(--ds-space-4); }
  .ds-footer__legal-cells { flex-wrap: wrap; width: 100%; }
  .ds-footer__legal-cells a { border-inline-start: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); flex: 1 1 auto; }
  .ds-footer__cell + .ds-footer__cell { border-inline-start: 0; border-block-start: var(--ds-border-width) dashed var(--ds-rule-strong); }
  .ds-footer__cell[data-align="end"] { justify-content: flex-start; }
}


/* components/illustration-slot/illustration-slot.css */
/* ============================================================================
   illustration-slot — Illustration slot                            (taxonomy §H · common · S2 skin-dominant)
   THE SLOT IS STRUCTURE; EVERY FILL IS SKIN. Ship the slot rules, not the art.
   Root:  <figure|div class="ds-illustration-slot" data-register="sticker|line|flat|photo|generated"
            data-placement="inline|band|well|corner|plate" [data-art="ambient"] [data-variant="…"]
            aria-hidden="true" | role="img" aria-label="…">
   Parts: __frame (the FIXED FRAME: --_ratio · --_size · --_ground · --_radius; overflow hidden; art centred) ·
          __caption (optional, outside) ·
          placeholder art, token-painted per register (a real site replaces them with its own svg/img/video):
            __card (+ <i> lines) · __disc · __slab · __mascot · __shape[data-shape] · __stroke (svg) · __plate ·
            __glow · __pattern · __globe · __toast (+ __toast-disc · __toast-lines) · __world (+ <i> ×3)
   THE SLOT RULES (what makes a set of illustrations read as one system):
     1. FIXED FRAME — one ratio and size per slot kind (confluence 268×130 band · manychat 128² well · elevenlabs
        ~100×90 in a 180² tile); the art scales inside, the frame never grows to fit the art;
     2. SHARED GROUND — --_ground = --ds-illustration-ground for every slot on a page; a hue-seeded ground is a
        theme decision, never a per-slot one;
     3. CAPPED HUE SET — ≤ 5 hues (--_hue defaults to --ds-data-1; a set walks --ds-data-1…5); one hue per product
        in a launcher (elevenlabs);
     4. CONTRAST CEILING FOR AMBIENT ART — data-art="ambient" paints everything in --ds-texture-color (≤ 1.2:1): visible
        as texture, never as figure (rox globe, braintrust pattern, vercel line-art).
   Registers (data-register — mirrors the page policy data-illustration):
     sticker  — white floating card with tinted lines + a coloured badge disc + a media slab (elevenlabs); mascots
     line     — single-weight strokes in --ds-line-art (technical) or --ds-ink (ink drawings), no fill
     flat     — flat shapes in the capped hue set on the shared ground
     photo    — a plate: token-painted gradient standing in for a photograph / 3D render, feathered edge
     generated — the media-tile default art (conic tint sweep); the slot only frames it
   Placements (data-placement):
     inline (default) · band (48 % illustration band at the top of a card, top corners only) · well (128 square flush
     left, quarantines colour) · corner (corner-anchored UNDER content, ambient) · plate (full-bleed cinematic plate
     with a feathered top edge)
   Variants (data-variant): confluence-fixed-frame-shared-ground · elevenlabs-sticker-stack · manychat-64-square-
     well-left · origin-toast-as-illustration · luma-generated-cover-art · braintrust-sub-perceptual-pattern ·
     fibery-two-register · heron-technical-line-art · rox-corner-anchored-globe · legend-cinematic-plate ·
     vercel-line-art-8pct · intercom-ink-drawings-3d-render · plane-mascot-band · homerun-guide-card-grounds
   Composes by ROOT class only: data-tag (+ .ds-data-tag-stage) for callouts on technical drawings.
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_ratio --_size --_ground --_radius --_hue --_hue-2 --_ink
   ========================================================================== */

.ds-illustration-slot {
  --_ratio:  268 / 130;                             /* confluence band                                      */
  --_size:   100%;
  --_ground: var(--ds-illustration-ground);         /* rule 2: the shared ground                            */
  --_radius: var(--ds-radius-md);
  --_hue:    var(--ds-data-1);                      /* rule 3: one hue per slot from the capped set         */
  --_hue-2:  var(--ds-data-5);
  --_ink:    var(--ds-line-art);                    /* line register: technical strokes; ink drawings → --ds-ink */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  inline-size: var(--_size);
  max-inline-size: 100%;
  min-width: 0;
  color: var(--ds-ink);
}
.ds-illustration-slot svg { fill: none; stroke: var(--_ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the frame: fixed ratio, shared ground, art centred, everything clipped ---- */
.ds-illustration-slot__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--_ratio);
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--_radius);
  background: var(--_ground);
  isolation: isolate;
  container-type: inline-size;
}
.ds-illustration-slot__frame > * { min-width: 0; }
.ds-illustration-slot__caption { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }

/* ---- placements ---- */
.ds-illustration-slot[data-placement="band"] { --_ratio: 268 / 130; }
.ds-illustration-slot[data-placement="band"] .ds-illustration-slot__frame { border-radius: var(--_radius) var(--_radius) 0 0; }
.ds-illustration-slot[data-placement="well"] { --_ratio: 1; --_size: 128px; flex: none; }
.ds-illustration-slot[data-placement="well"] .ds-illustration-slot__frame { border-radius: var(--_radius) 0 0 var(--_radius); }
.ds-illustration-slot[data-placement="corner"] {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  --_size: clamp(200px, 40%, 520px);
  --_ratio: 1;
  z-index: 0;
  pointer-events: none;
  transform: translate(-30%, 35%);                /* straddles the container edge, tangent to the bottom */
}
.ds-illustration-slot[data-placement="corner"] .ds-illustration-slot__frame { background: transparent; overflow: visible; }
.ds-illustration-slot[data-placement="plate"] { --_ratio: 21 / 9; --_radius: 0; }
.ds-illustration-slot[data-placement="plate"] .ds-illustration-slot__frame {
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%);
          mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%);   /* the feathered top edge */
}

/* ---- ambient: the contrast ceiling. Everything paints texture-color; nothing is figure ---- */
.ds-illustration-slot[data-art="ambient"] { --_hue: var(--ds-texture-color); --_hue-2: var(--ds-texture-color); --_ink: var(--ds-texture-color); }
.ds-illustration-slot[data-art="ambient"] .ds-illustration-slot__card { background: var(--ds-texture-color); box-shadow: none; }

/* ---------------------------------------------------------------------------
   PLACEHOLDER ART — token-painted primitives. A real site swaps them for its own assets.
   ------------------------------------------------------------------------- */
/* sticker: the white floating card with tinted placeholder lines (elevenlabs primitive 1) */
.ds-illustration-slot__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8cqi;
  inline-size: 46%;
  padding: 7cqi;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-object);            /* depth lives INSIDE illustrations, never in chrome */
  rotate: -4deg;
}
.ds-illustration-slot__card > i { display: block; block-size: 5cqi; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); }
.ds-illustration-slot__card > i:first-child { inline-size: 60%; background: color-mix(in srgb, var(--_hue) 35%, var(--ds-surface)); }
.ds-illustration-slot__card > i:nth-child(3) { inline-size: 75%; }
[data-register="flat"] .ds-illustration-slot__card { box-shadow: none; rotate: 0deg; }
/* sticker: the coloured badge disc (primitive 2) */
.ds-illustration-slot__disc {
  position: absolute;
  inset-block-end: 18%;
  inset-inline-end: 22%;
  inline-size: 22cqi;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-pill);
  background: var(--_hue);
  box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__disc::after { content: ""; position: absolute; inset: 32%; border-radius: var(--ds-radius-xs); background: var(--ds-ink-on-accent); }
/* sticker: the media slab (primitive 3) — a waveform / photo strip */
.ds-illustration-slot__slab {
  position: absolute;
  inset-block-end: 12%;
  inset-inline-start: 14%;
  inline-size: 34%;
  block-size: 18%;
  border-radius: var(--ds-radius-xs);
  background: repeating-linear-gradient(to right, var(--_hue-2) 0 3cqi, transparent 3cqi 6cqi);
  opacity: .8;
}
/* mascot: a three-lobed blob (plane) — two flat colours + two white eyes; outline only in the line register */
.ds-illustration-slot__mascot {
  position: relative;
  inline-size: 56%;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-pill);
  background: var(--_hue);
}
.ds-illustration-slot__mascot::before {
  content: "";
  position: absolute;
  inset: -18% 30% auto -12%;
  inline-size: 60%;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--_hue) 78%, var(--ds-ink));
  z-index: -1;
}
.ds-illustration-slot__mascot::after {
  content: "";
  position: absolute;
  inset: 40% 28% auto 28%;
  block-size: 18%;
  background:
    linear-gradient(var(--ds-ink-on-accent), var(--ds-ink-on-accent)) 15% 0 / 22% 100% no-repeat,
    linear-gradient(var(--ds-ink-on-accent), var(--ds-ink-on-accent)) 85% 0 / 22% 100% no-repeat;
}
[data-register="line"] .ds-illustration-slot__mascot { background: transparent; border: 1.5px solid var(--_ink); }
[data-register="line"] .ds-illustration-slot__mascot::before { background: transparent; border: 1.5px solid var(--_ink); }
[data-register="line"] .ds-illustration-slot__mascot::after {
  background:
    linear-gradient(var(--_ink), var(--_ink)) 15% 0 / 22% 100% no-repeat,
    linear-gradient(var(--_ink), var(--_ink)) 85% 0 / 22% 100% no-repeat;
}
/* flat: shapes in the capped hue set */
.ds-illustration-slot__shape { position: absolute; background: var(--_hue); }
.ds-illustration-slot__shape[data-shape="circle"] { inline-size: 26cqi; aspect-ratio: 1; border-radius: var(--ds-radius-pill); }
.ds-illustration-slot__shape[data-shape="square"] { inline-size: 18cqi; aspect-ratio: 1; border-radius: var(--ds-radius-xs); rotate: 12deg; }
.ds-illustration-slot__shape[data-shape="bar"] { inline-size: 6cqi; block-size: 30cqi; border-radius: var(--ds-radius-xs); }
.ds-illustration-slot__shape[data-shape="star"] { inline-size: 10cqi; aspect-ratio: 1; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
/* line: the stroke drawing fills the frame */
.ds-illustration-slot__stroke { position: absolute; inset: 8%; inline-size: auto; block-size: auto; max-inline-size: 84%; max-block-size: 84%; margin: auto; }
.ds-illustration-slot__stroke [data-accent] { stroke: var(--ds-accent); }
.ds-illustration-slot__stroke [data-dashed] { stroke-dasharray: 4 3; }
/* photo / render: the plate — a token gradient standing in for a photograph */
.ds-illustration-slot__plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 25% 15%, var(--ds-data-6-tint), transparent 60%),
    radial-gradient(80% 60% at 85% 90%, var(--_hue), transparent 55%),
    linear-gradient(to bottom, var(--_ground), color-mix(in srgb, var(--_ground) 60%, var(--ds-ink)));
}
[data-register="photo"] .ds-illustration-slot__frame { background: var(--ds-surface-inverse); }
/* the mark as light source (legend): a bloom behind a mark, reflected below */
.ds-illustration-slot__glow {
  position: absolute;
  inset-block-start: 22%;
  inset-inline-start: 50%;
  inline-size: 18cqi;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-ink-inverse);
  box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__glow::before {
  content: "";
  position: absolute;
  inset: -120%;
  border-radius: var(--ds-radius-pill);
  background: radial-gradient(circle, color-mix(in srgb, var(--ds-ink-inverse) 35%, transparent), transparent 60%);
  z-index: -1;
}
.ds-illustration-slot__glow::after {
  content: "";
  position: absolute;
  inset-block-start: 180%;
  inset-inline: 30%;
  block-size: 140%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-ink-inverse) 40%, transparent), transparent);
  -webkit-mask-image: repeating-linear-gradient(to bottom, var(--ds-ink) 0 2px, transparent 2px 5px);
          mask-image: repeating-linear-gradient(to bottom, var(--ds-ink) 0 2px, transparent 2px 5px);
}
/* generated: the media-tile default art, framed */
[data-register="generated"] .ds-illustration-slot__frame {
  background: conic-gradient(from 210deg at 60% 40%, var(--ds-accent-tint), var(--ds-data-7-tint), var(--ds-accent-2-tint), var(--ds-data-5-tint), var(--ds-accent-tint));
}
/* sub-perceptual pattern (braintrust): brand shapes at texture contrast */
.ds-illustration-slot__pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 100%, transparent 30%, var(--ds-texture-color) 30.5%, var(--ds-texture-color) 42%, transparent 42.5%),
    radial-gradient(circle at 80% 100%, transparent 52%, var(--ds-texture-color) 52.5%, var(--ds-texture-color) 64%, transparent 64.5%);
}
/* wire globe (rox): sphere + two great circles + chords, at texture contrast */
.ds-illustration-slot__globe {
  position: absolute;
  inset: 0;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--_ink);
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--_ink) 40%, transparent), transparent 60%);
}
.ds-illustration-slot__globe::before, .ds-illustration-slot__globe::after {
  content: "";
  position: absolute;
  inset: 0 30%;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--_ink);
}
.ds-illustration-slot__globe::after { inset: 30% 0; }
/* a real component as art (origin): a mock toast card with a stacked twin behind it */
.ds-illustration-slot__toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4cqi;
  inline-size: 60%;
  padding: 4cqi 5cqi;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__toast::before {
  content: "";
  position: absolute;
  inset: 40% 6% -14%;
  z-index: -1;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__toast-disc { inline-size: 10cqi; aspect-ratio: 1; border-radius: var(--ds-radius-pill); background: var(--ds-data-3-tint); }
.ds-illustration-slot__toast-lines { display: flex; flex-direction: column; gap: 2cqi; }
.ds-illustration-slot__toast-lines > i { display: block; block-size: 2.4cqi; border-radius: var(--ds-radius-pill); background: var(--ds-ink); inline-size: 55%; }
.ds-illustration-slot__toast-lines > i + i { inline-size: 35%; background: var(--ds-ink-muted); }
/* isometric world (fibery colour register): three stacked rhombi in three hues */
.ds-illustration-slot__world { position: relative; inline-size: 50%; aspect-ratio: 1; }
.ds-illustration-slot__world > i {
  position: absolute;
  inset: 20% 10%;
  background: var(--_hue);
  transform: rotateX(60deg) rotateZ(45deg);
  border-radius: var(--ds-radius-xs);
}
.ds-illustration-slot__world > i:nth-child(2) { inset: 8% 22% 32%; background: var(--_hue-2); }
.ds-illustration-slot__world > i:nth-child(3) { inset: -4% 34% 44%; background: var(--ds-data-3); }

/* ---------------------------------------------------------------------------
   VARIANTS — knobs only; the art is the register's
   ------------------------------------------------------------------------- */
.ds-illustration-slot[data-variant="elevenlabs-sticker-stack"] { --_ratio: 1; --_size: 180px; --_ground: var(--ds-surface-2); --_radius: var(--ds-radius-xl); }
.ds-illustration-slot[data-variant="manychat-64-square-well-left"] { --_ground: var(--ds-data-3-tint); }
.ds-illustration-slot[data-variant="braintrust-sub-perceptual-pattern"] { --_ratio: 220 / 272; --_size: 220px; --_ground: var(--ds-data-6-tint); --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="heron-technical-line-art"] { --_ratio: 4 / 3; --_ground: transparent; --_radius: 0; }
.ds-illustration-slot[data-variant="heron-technical-line-art"] .ds-illustration-slot__frame { border: var(--ds-border-width) solid var(--ds-rule); }
.ds-illustration-slot[data-variant="legend-cinematic-plate"] { --_ground: var(--ds-surface-inverse); --_hue: var(--ds-data-2); }
.ds-illustration-slot[data-variant="intercom-ink-drawings-3d-render"] { --_ink: var(--ds-ink); --_ratio: 1; --_radius: 0; }
.ds-illustration-slot[data-variant="intercom-ink-drawings-3d-render"][data-register="photo"] { --_hue: var(--ds-data-4); --_ground: var(--ds-data-4-tint); }
.ds-illustration-slot[data-variant="plane-mascot-band"] { --_ratio: 6 / 1; --_ground: var(--ds-data-7); --_radius: 0; }
.ds-illustration-slot[data-variant="plane-mascot-band"] .ds-illustration-slot__frame { display: flex; justify-content: space-around; align-items: flex-end; overflow: hidden; }
.ds-illustration-slot[data-variant="plane-mascot-band"] .ds-illustration-slot__mascot { inline-size: 9%; margin-block-end: -3%; }
.ds-illustration-slot[data-variant="homerun-guide-card-grounds"] { --_ratio: 4 / 3; --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="fibery-two-register"] { --_ratio: 1; }
.ds-illustration-slot[data-variant="fibery-two-register"][data-register="line"] { --_ink: var(--ds-ink); --_ground: transparent; }
.ds-illustration-slot[data-variant="vercel-line-art-8pct"] { --_ground: var(--ds-surface); --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="vercel-line-art-8pct"] .ds-illustration-slot__frame { border: var(--ds-border-width) solid var(--ds-rule); }

/* ---- states: a slot has no interaction; loading and empty only ---- */
.ds-illustration-slot[aria-busy="true"] .ds-illustration-slot__frame { background: var(--ds-skeleton); }
.ds-illustration-slot[aria-busy="true"] .ds-illustration-slot__frame > * { visibility: hidden; }
.ds-illustration-slot[data-state="empty"] .ds-illustration-slot__frame {
  background: transparent;
  outline: var(--ds-border-width) dashed var(--ds-rule-strong);
  outline-offset: calc(-1 * var(--ds-border-width));
  color: var(--ds-ink-muted);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* components/pagination/pagination.css */
/* ============================================================================
   pagination — pager / paginator                    (taxonomy §D · common · S0)
   Root: <nav class="ds-pagination" aria-label="…">
   Parts: __size (slot: page-size .ds-select-trigger, data-size="sm") · __range ("1–6 of 6", numbers
          medium, connective regular) · __nav (the prev/next cluster) · __btn[data-dir="prev|next"]
          (text or icon button) · __pill (givingli: ONE pill holding both chevrons) · __pos ("4 / 5")
          · __pages (ol of numbered page links — an extension, no reference shows one) · __page
   Variants (data-variant): navattic-tertiary-footer (default anatomy) · givingli-two-way-pager-pill ·
     manychat-ring-arrows · origin-in-grid-controls · givingli-hero-pager-pill · braintrust-peek and
     homerun-hard-clip are OVERFLOW treatments — they live in carousel (data-overflow="peek|clip").
   Rungs: pagination steps ONE RUNG DOWN from the surface's controls (cross-cutting rule 1) —
     the root sets data-size="sm" semantics itself: buttons are --ds-control-h-sm (32 · 28 compact).
   States: disabled = glyph/text to --ds-ink-faint, the ring/pill stays (manychat, givingli) ·
     hover = --ds-hover-bg + border-strong · loading = range text becomes a skeleton bar ·
     single page = data-state="single-page" hides the nav, keeps the count (navattic weakness fixed).
   Private knobs: --_h --_gap --_btn-radius --_pill-bg --_ring
   ========================================================================== */

.ds-pagination svg[fill="none"] { fill: none; }     /* _base.css paints svg fill; keep stroke icons hollow */

.ds-pagination {
  --_h:          var(--ds-control-h-sm);            /* one rung down: 32 · 28 compact · 40 comfortable */
  --_gap:        var(--ds-space-2);
  --_btn-radius: var(--ds-radius-button);
  --_pill-bg:    var(--ds-surface-2);
  --_ring:       var(--ds-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;                        /* navattic: right-aligned under the grid */
  gap: var(--ds-space-3) var(--ds-space-4);
  min-width: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-list);
  color: var(--ds-ink-2);
}
.ds-pagination[data-align="start"]   { justify-content: flex-start; }
.ds-pagination[data-align="between"] { justify-content: space-between; }

/* ---- range: "1–6 of 6" — numbers medium ink, connective regular muted (navattic) ---- */
.ds-pagination__range { white-space: nowrap; color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
.ds-pagination__range b { font-weight: var(--ds-weight-medium); color: var(--ds-ink); }

/* ---- page-size slot: a .ds-select-trigger at sm sits here ---- */
.ds-pagination__size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-muted); white-space: nowrap; }

/* ---- prev/next cluster ---- */
.ds-pagination__nav { display: inline-flex; align-items: center; gap: var(--_gap); }
.ds-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  min-height: var(--_h);
  min-width: var(--_h);
  padding-inline: calc(var(--ds-control-pad-x) - 2px);
  border-radius: var(--_btn-radius);
  border: var(--ds-border-width) solid var(--ds-rule);         /* navattic: ghost, border one grade lighter than controls */
  background: transparent;
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  text-transform: var(--ds-control-case);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-pagination__btn svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-pagination__btn:hover,
.ds-pagination__btn[data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); color: var(--ds-ink); box-shadow: var(--ds-hover-shadow); }
.ds-pagination__btn:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); }   /* pressed = --ds-surface-pressed (§13.4) */
.ds-pagination__btn:disabled,
.ds-pagination__btn[aria-disabled="true"] {
  color: var(--ds-ink-faint);                                 /* glyph dims; ring, size and hit area unchanged */
  background: transparent;
  border-color: var(--ds-rule);
  box-shadow: none;
  cursor: not-allowed;
}
.ds-pagination__btn[data-icon-only] { padding-inline: 0; width: var(--_h); }

/* ---- numbered pages (extension — specified from scratch, no reference shows numbers) ---- */
.ds-pagination__pages { display: inline-flex; align-items: center; gap: var(--ds-space-1); list-style: none; margin: 0; padding: 0; }
.ds-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--_h);
  min-height: var(--_h);
  padding-inline: var(--ds-space-2);
  border-radius: var(--_btn-radius);
  color: var(--ds-ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border: var(--ds-border-width) solid transparent;
}
.ds-pagination__page:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-pagination__page[aria-current="page"] {
  background: var(--ds-selected-bg);
  color: var(--ds-selected-ink);
  font-weight: var(--ds-selected-weight);
  border-color: var(--ds-selected-line);                       /* selection, never elevation (R4) */
}
.ds-pagination__ellipsis { min-width: var(--_h); text-align: center; color: var(--ds-ink-faint); }   /* decorative "…" */

/* ---- states on the root ---- */
.ds-pagination[data-state="single-page"] .ds-pagination__nav,
.ds-pagination[data-state="single-page"] .ds-pagination__pages { display: none; }      /* hide controls that can never act; keep the count */
.ds-pagination[aria-busy="true"] .ds-pagination__range > * { visibility: hidden; }
.ds-pagination[aria-busy="true"] .ds-pagination__range {
  color: transparent;
  background: var(--ds-skeleton);
  border-radius: var(--ds-radius-xs);
  min-width: 6em;
}
.ds-pagination[aria-busy="true"] .ds-pagination__btn { color: var(--ds-ink-faint); pointer-events: none; }

/* =========================================================================
   givingli-two-way-pager-pill — ONE tint pill holding both chevrons (66×40 → sm rung here)
   ========================================================================= */
.ds-pagination__pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--_h);
  border-radius: var(--ds-radius-pill);
  background: var(--_pill-bg);
  padding-inline: var(--ds-space-1);
  gap: 0;
}
.ds-pagination__pill .ds-pagination__btn {
  border: 0;
  background: transparent;
  min-width: calc(var(--_h) - var(--ds-space-2));
  min-height: calc(var(--_h) - var(--ds-space-2));
  padding-inline: 0;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink);
}
.ds-pagination__pill .ds-pagination__btn:hover { background: var(--ds-surface-selected); }
.ds-pagination__pill .ds-pagination__btn:disabled { color: var(--ds-ink-faint); background: transparent; }   /* dims in place */
.ds-pagination__pos { padding-inline: var(--ds-space-2); font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; color: var(--ds-ink); white-space: nowrap; }

/* =========================================================================
   manychat-ring-arrows — two hairline circles at the surface's control height (36), 8 px apart
   ========================================================================= */
.ds-pagination[data-variant="manychat-ring-arrows"] { --_h: var(--ds-control-h); --_btn-radius: var(--ds-radius-pill); }
.ds-pagination[data-variant="manychat-ring-arrows"] .ds-pagination__btn { border-color: var(--_ring); color: var(--ds-ink); width: var(--_h); padding-inline: 0; }
.ds-pagination[data-variant="manychat-ring-arrows"] .ds-pagination__btn:disabled { color: var(--ds-ink-faint); border-color: var(--_ring); }   /* ring unchanged */

/* =========================================================================
   origin-in-grid-controls — prev/next as bordered CELLS of the grid they page (heron logo table)
   ========================================================================= */
.ds-pagination[data-variant="origin-in-grid-controls"] { gap: 0; --_btn-radius: 0px; }
.ds-pagination[data-variant="origin-in-grid-controls"] .ds-pagination__nav { gap: 0; }
.ds-pagination[data-variant="origin-in-grid-controls"] .ds-pagination__btn {
  width: var(--ds-control-h-lg);
  min-height: var(--ds-control-h-lg);
  padding-inline: 0;
  border: var(--ds-border-width) solid var(--ds-rule-strong);
  margin-inline-start: calc(-1 * var(--ds-border-width));      /* cells share seams */
  color: var(--ds-ink);
}
.ds-pagination[data-variant="origin-in-grid-controls"] .ds-pagination__btn:first-child { margin-inline-start: 0; }

/* =========================================================================
   givingli-hero-pager-pill — frosted "‹ 4 / 5 ›" pill sitting on media (glass tokens, not a raw alpha)
   ========================================================================= */
.ds-pagination[data-variant="givingli-hero-pager-pill"] { --_h: var(--ds-control-h-lg); --_pill-bg: var(--ds-glass-fill); }
.ds-pagination[data-variant="givingli-hero-pager-pill"] .ds-pagination__pill {
  border: var(--ds-border-width) solid var(--ds-glass-border);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  backdrop-filter: blur(var(--ds-glass-blur));
  padding-inline: var(--ds-space-2);
}
.ds-pagination[data-variant="givingli-hero-pager-pill"] .ds-pagination__btn:hover { background: var(--ds-glass-border); }

/* density: the sm rung follows --ds-control-h-sm (28 / 32 / 40); nothing else moves */


/* components/pricing-card/pricing-card.css */
/* ============================================================================
   pricing-card — Pricing / plan card                             (taxonomy §J · common · S0)
   Root: .ds-pricing-card  (<article>; <li> inside .ds-pricing-card-grid)
   Grid: .ds-pricing-card-grid (<ul role="list">) — N EQUAL columns on one gutter; every card is a SUBGRID spanning
         the same 7 rows, so tier / tagline / price / note / description / features / CTA sit on one line across
         every column and every CTA shares a baseline (Jasper's divider drift is the trap). data-order="anchor-high"
         reverses the visual order (expensive → recommended → cheap) while the DOM stays ascending; data-columns="2|3|4".
   Parts (the 7 rows): __tier (composes .ds-tier-pill, or .ds-enum-chip) · __tagline (+ __info) · __price
         (__amount[data-text] · __period · __context — or __figure blocks joined by __plus with a mono __unit) ·
         __note · __desc · __features (full-bleed top rule; composes .ds-feature-checklist) · __cta (composes
         button-primary / button-secondary; + __cta-caption) · __name (a text name instead of a pill; intercom) ·
         __empty (the footprint message)
   States: data-recommended (hairline → ring drawn OUTSIDE the box, never wider / lifted / shaded — R4) ·
         data-kind="contact" (words in the price lane) · aria-current="true" (the customer's current plan) ·
         aria-busy (skeleton in the true frame) · data-state="empty" (dashed footprint)
   Variants: jstov (unmarked root — hairline card, 2px ring 3px outside, mono tabular amount with the annual total
         UNDER it, full-width CTA, footnote in readable ink) · jasper-3up-ring-highlight · intercom-single-plan-card
   The recommended card's CTA is the view's ONE filled control (button-hierarchy-rule); every other CTA is a
   button-secondary. Tokens only. Private knobs: --_min --_gap --_pad --_ring-w --_ring-offset --_amount-size --_edge
   ========================================================================== */

.ds-pricing-card svg[fill="none"] { fill: none; stroke: currentColor; }

/* ---- the grid ------------------------------------------------------------------------------------- */
.ds-pricing-card-grid {
  --_min: 260px;                                  /* 3-up ≥ ~900, 2-up tablet, 1-up phone                  */
  --_gap: var(--ds-space-8);                      /* Jasper: 32 px gutter                                  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr));
  gap: var(--_gap);
  align-items: stretch;
  min-width: 0;
  padding: var(--ds-space-1);                     /* room for the recommended ring (offset + width)        */
}
.ds-pricing-card-grid[data-columns="2"] { --_min: 320px; }
.ds-pricing-card-grid[data-columns="4"] { --_min: 220px; }
.ds-pricing-card-grid[data-order="anchor-high"] { direction: rtl; }          /* DOM ascending, visual descending */
.ds-pricing-card-grid[data-order="anchor-high"] > * { direction: ltr; }

/* ---- the card: 7 shared rows --------------------------------------------------------------------- */
.ds-pricing-card {
  --_pad: calc(var(--ds-card-pad) * 2);            /* 32 default · 24 compact · 40 comfortable              */
  --_ring-w: 2px;
  --_ring-offset: 3px;                            /* Jasper: ring ~3 px outside the box                    */
  --_amount-size: var(--ds-text-display);          /* display lane — nothing between it and the h2          */
  --_edge: var(--ds-card-border);
  position: relative;
  display: grid;
  grid-template-rows: subgrid;                    /* shares the grid's rows; standalone = plain auto rows  */
  grid-row: span 7;
  row-gap: 0;
  min-width: 0;
  padding: var(--_pad);
  background: var(--ds-card-bg);
  border: var(--ds-border-width) solid var(--_edge);
  box-shadow: var(--ds-card-shadow);
  border-radius: var(--ds-radius-md);
  color: var(--ds-ink);
}
.ds-pricing-card > * { min-width: 0; }
@supports not (grid-template-rows: subgrid) {
  .ds-pricing-card { display: flex; flex-direction: column; }
  .ds-pricing-card__cta { margin-block-start: auto; }
}

/* rows 1–7, explicit so a missing part (contact tier: no tagline / note) leaves an aligned gap */
.ds-pricing-card__tier     { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin-block-end: var(--ds-space-3); }
.ds-pricing-card__name     { grid-row: 1; margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); }
.ds-pricing-card__tagline  { grid-row: 2; display: flex; align-items: center; gap: var(--ds-space-1-5); margin: 0 0 var(--ds-space-6); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-pricing-card__price    { grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ds-space-2); row-gap: 0; margin-block-end: var(--ds-space-2); }
.ds-pricing-card__note     { grid-row: 4; margin: 0 0 var(--ds-space-6); font-size: var(--ds-text-sm); color: var(--ds-ink-2); }          /* readable, not faint: Jasper's footnote fails AA */
.ds-pricing-card__desc     { grid-row: 5; margin: 0 0 var(--ds-space-6); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--ds-ink-2); max-width: 32ch; }
.ds-pricing-card__features { grid-row: 6; margin: 0 calc(-1 * var(--_pad)) var(--ds-space-8); padding: var(--ds-space-6) var(--_pad) 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); }   /* full-bleed divider: edge to edge */
.ds-pricing-card__cta      { grid-row: 7; display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-2); align-self: end; min-width: 0; }
.ds-pricing-card__cta-caption { margin: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-align: center; }

/* one tooltip affordance for the tagline: the ⓘ (never ⓘ AND an underline — Jasper) */
.ds-pricing-card__info {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-icon-size);
  block-size: var(--ds-icon-size);
  padding: 0;
  border: var(--ds-border-width) solid currentColor;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-ink-muted);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
  cursor: help;
}
.ds-pricing-card__info:hover { color: var(--ds-ink); }

/* price block: display-size tabular MONO number, baseline-aligned period, context UNDER the number */
.ds-pricing-card__amount {
  font-family: var(--ds-font-mono);
  font-size: var(--_amount-size);
  font-weight: var(--ds-display-weight);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
}
.ds-pricing-card__amount[data-text] { font-family: var(--ds-font-display); white-space: nowrap; }   /* "Let's talk": words, not a number */
.ds-pricing-card__period  { font-size: var(--ds-text-lg); color: var(--ds-ink-muted); }
.ds-pricing-card__context { flex-basis: 100%; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
/* joined figures (intercom): amount over a mono caps unit, "+" between */
.ds-pricing-card__figure { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); }
.ds-pricing-card__unit   { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); }
.ds-pricing-card__plus   { align-self: center; font-family: var(--ds-font-mono); font-size: var(--_amount-size); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-tight); color: var(--ds-ink-2); padding-inline: var(--ds-space-2); }

/* CTA: full width in the house card; the composed button reads --_w */
.ds-pricing-card__cta > .ds-button-primary,
.ds-pricing-card__cta > .ds-button-secondary { --_w: 100%; }

/* =========================================================================
   STATES
   ========================================================================= */
/* recommended: hairline → ring OUTSIDE the box (outline + offset); the box does not move; the pill + CTA flip in markup */
.ds-pricing-card[data-recommended] {
  --_edge: transparent;
  outline: var(--_ring-w) solid var(--ds-border-selected);
  outline-offset: var(--_ring-offset);
}
/* the customer's current plan: a stronger hairline, the CTA (markup) becomes a disabled "Current plan" */
.ds-pricing-card[aria-current="true"] { --_edge: var(--ds-rule-strong); }
/* loading: every text row keeps its footprint under a skeleton fill; the CTA becomes a skeleton block */
.ds-pricing-card[aria-busy="true"] :is(.ds-pricing-card__amount, .ds-pricing-card__period, .ds-pricing-card__context, .ds-pricing-card__tagline, .ds-pricing-card__note, .ds-pricing-card__desc, .ds-pricing-card__name) { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); }
.ds-pricing-card[aria-busy="true"] :is(.ds-pricing-card__tier, .ds-pricing-card__features) > * { visibility: hidden; }
.ds-pricing-card[aria-busy="true"] .ds-pricing-card__cta { min-block-size: var(--ds-control-h-lg); background: var(--ds-skeleton); border-radius: var(--ds-radius-button); }
.ds-pricing-card[aria-busy="true"] .ds-pricing-card__cta > * { visibility: hidden; }
/* empty: a plan slot not defined yet — dashed footprint with one message across all 7 rows */
.ds-pricing-card[data-state="empty"] { --_edge: var(--ds-rule-strong); border-style: dashed; background: transparent; }
.ds-pricing-card__empty { grid-row: 1 / -1; display: grid; place-items: center; align-content: center; gap: var(--ds-space-2); text-align: center; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); min-block-size: calc(var(--ds-control-h-lg) * 4); }

/* =========================================================================
   VARIANTS
   ========================================================================= */

/* jasper: 4px ring 3px outside, 52/700 grotesk price (sans, bold), sans context, CENTRED content-width CTAs with a
   trailing arrow; filled pill + filled CTA on the ringed card (markup). Their brand-filled period select is not copied. */
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] { --_ring-w: 4px; --_ring-offset: 3px; }
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] .ds-pricing-card__amount { font-family: var(--ds-font-sans); font-weight: var(--ds-weight-bold); }
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] .ds-pricing-card__context { font-family: var(--ds-font-sans); flex-basis: auto; margin-inline-start: auto; }   /* "billed annually" right-set on the price line, as captured */
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] .ds-pricing-card__cta { align-items: center; }
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] .ds-pricing-card__cta > .ds-button-primary,
.ds-pricing-card[data-variant="jasper-3up-ring-highlight"] .ds-pricing-card__cta > .ds-button-secondary { --_w: auto; }

/* intercom: ONE centred card on the section's inset tint, name + serif-lane description, two numbers joined by "+",
   mono caps units beneath, one button; no tiers, no toggle, no list — defers the comparison to /pricing */
.ds-pricing-card[data-variant="intercom-single-plan-card"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-space-4);
  max-width: 480px;
  margin-inline: auto;
  --_edge: transparent;
  --_amount-size: var(--ds-text-3xl);
  background: var(--ds-surface-2);
  border-radius: 0;                                /* their card is a square cell with corner marks (page-frame ornament, not here) */
}
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__name { margin: 0; }
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__desc { margin: 0; max-width: 34ch; font-family: var(--ds-font-body-alt); }
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__price { justify-content: center; align-items: flex-start; margin-block: var(--ds-space-2); }
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__amount { font-family: var(--ds-font-sans); font-weight: var(--ds-weight-regular); }
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__cta { align-items: center; align-self: center; }   /* the root is a flex column: align-self: end (grid row 7) would push the button to the right edge (fixed 2026-09-20, sections-E) */
.ds-pricing-card[data-variant="intercom-single-plan-card"] .ds-pricing-card__cta > .ds-button-primary { --_w: auto; }

/* jstov-single-plan-cell (2026-09-20, sections-E): the L-PRICE-02 house — Intercom's anatomy (name · description · figures
   joined by "+" · mono unit labels · one button) as a CELL OF THE PAGE FRAME: radius 0, --ds-rule hairline on the ground
   (no fill, no shadow), left-aligned, the amount in the mono lane (tabular), a __features slot for a composed
   key-value-facts strip (the facts of the plan, mono values) above the CTA; nothing centred, nothing tinted. */
.ds-pricing-card[data-variant="jstov-single-plan-cell"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
  --_edge: var(--ds-rule);
  --_amount-size: var(--ds-text-3xl);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__tier { margin: 0; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__name { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__desc { margin: 0; max-width: 40ch; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__price { justify-content: flex-start; align-items: flex-start; margin-block: var(--ds-space-2) 0; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__figure { align-items: flex-start; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__amount { font-family: var(--ds-font-mono); font-weight: var(--ds-weight-medium); }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__features { align-self: stretch; margin-block: var(--ds-space-2) 0; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__cta { align-items: flex-start; align-self: stretch; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__cta-caption { text-align: start; }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__features { margin-block-end: 0; padding-block-start: var(--ds-space-4); }
.ds-pricing-card[data-variant="jstov-single-plan-cell"] .ds-pricing-card__cta > .ds-button-primary { --_w: auto; }

/* ── Grid looks (added 2026-09-30 for J7 checkout) — data-variant on .ds-pricing-card-grid restyles plain cards, so a
   journey supplies the plans as content and swaps only the look. The in-app plan picker marks the CURRENT plan
   (aria-current) and the plan that lifts the limit the user just hit (data-recommended).
   Grid looks: jstov (as above) · framer-in-app-columns · clickup-popular-header · apollo-selected-column ·
   savee-dark-cards · optimal-horizontal-rows. Grid state: rest · aria-busy. */
.ds-pricing-card-grid[data-variant="framer-in-app-columns"] { --_gap: var(--ds-space-3); --_min: 200px; }
.ds-pricing-card-grid[data-variant="framer-in-app-columns"] .ds-pricing-card { border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-card); font-size: var(--ds-text-sm); }
.ds-pricing-card-grid[data-variant="framer-in-app-columns"] .ds-pricing-card__amount { font-family: var(--ds-font-sans); }
.ds-pricing-card-grid[data-variant="framer-in-app-columns"] :is(.ds-pricing-card__desc, .ds-pricing-card__note) { display: none; }
.ds-pricing-card-grid[data-variant="clickup-popular-header"] .ds-pricing-card[data-recommended] { border-color: var(--ds-accent); outline: 0; box-shadow: var(--ds-shadow-float); }
.ds-pricing-card-grid[data-variant="clickup-popular-header"] .ds-pricing-card[data-recommended]::before { content: "Popular"; position: absolute; inset: 0 0 auto 0; transform: translateY(-100%); padding: var(--ds-space-1-5); border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)); color: var(--ds-ink-on-accent); text-align: center; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.ds-pricing-card-grid[data-variant="clickup-popular-header"] .ds-pricing-card { position: relative; }
.ds-pricing-card-grid[data-variant="clickup-popular-header"] { padding-top: var(--ds-space-8); }
.ds-pricing-card-grid[data-variant="apollo-selected-column"] { --_gap: 0; }
.ds-pricing-card-grid[data-variant="apollo-selected-column"] .ds-pricing-card { border-radius: 0; border-width: 0 0 0 var(--ds-border-width); box-shadow: none; background: transparent; }
.ds-pricing-card-grid[data-variant="apollo-selected-column"] .ds-pricing-card[data-recommended] { outline: 0; background: var(--ds-warning-tint); border: var(--ds-border-width) solid var(--ds-warning-line); border-radius: var(--ds-radius-md); }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card :is(.ds-pricing-card__context, .ds-pricing-card__note, .ds-pricing-card__desc, .ds-pricing-card__tagline) { color: inherit; opacity: 0.72; }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card .ds-feature-checklist { color: inherit; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] { grid-template-columns: minmax(0, 1fr); --_gap: var(--ds-space-3); }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "tier price cta" "tagline price cta" "features price cta"; align-items: center; gap: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-sm); }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card__tier { grid-area: tier; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card__tagline { grid-area: tagline; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card__price { grid-area: price; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card__features { grid-area: features; border: 0; padding: 0; margin: 0; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card__cta { grid-area: cta; }
.ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] :is(.ds-pricing-card__note, .ds-pricing-card__desc) { display: none; }
@media (max-width: 700px) { .ds-pricing-card-grid[data-variant="optimal-horizontal-rows"] .ds-pricing-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tier" "tagline" "price" "features" "cta"; } }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card :is(.ds-pricing-card__amount, .ds-pricing-card__period) { color: inherit; }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card .ds-button-primary { background: var(--ds-surface); border-color: var(--ds-surface); color: var(--ds-ink); }
.ds-pricing-card-grid[data-variant="savee-dark-cards"] .ds-pricing-card .ds-button-secondary { background: transparent; border-color: currentColor; color: inherit; }
.ds-pricing-card-grid[aria-busy="true"] .ds-pricing-card :is(.ds-pricing-card__amount, .ds-pricing-card__period, .ds-pricing-card__context, .ds-feature-checklist__label) { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); }
.ds-pricing-card-grid[aria-busy="true"] .ds-pricing-card__cta { opacity: 0.4; pointer-events: none; }


/* components/segmented-control/segmented-control.css */
/* ============================================================================
   components/segmented-control/segmented-control.css
   N mutually-exclusive options in one track; exactly one is selected. Two
   markups share the styles:
     radio form   <fieldset class="ds-segmented-control"> <label class="…__item">
                  <input class="…__input" type="radio"> <span class="…__label">
     tablist form <div class="ds-segmented-control" role="tablist">
                  <button class="…__item" role="tab" aria-selected="true">
   In the radio form the <input> is absolutely positioned to fill the item and
   IS the pill (paint + focus ring); the label text sits above it.

   Private knobs:
     --_inset       track padding = track − pill (4px in luma/hsaj)
     --_radius      track radius · --_pill-radius pill radius (one ladder step below)
     --_track / --_track-border / --_pill / --_pill-ink / --_ink
   ========================================================================== */

.ds-segmented-control {
  --_inset: var(--ds-space-1);
  --_radius: var(--ds-radius-md);
  --_pill-radius: var(--ds-radius-sm);
  --_track: var(--ds-surface-2);
  --_track-border: transparent;
  --_pill: var(--ds-selected-bg);          /* follows data-selection (tint · accent · invert) */
  --_pill-ink: var(--ds-selected-ink);
  --_ink: var(--ds-ink-muted);
  --_gap: 0px;

  display: inline-flex;
  align-items: stretch;
  gap: var(--_gap);
  padding: var(--_inset);
  min-height: var(--ds-size-h);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;                         /* mobile rule: the track scrolls, the page never does */
  scrollbar-width: none;
  border-radius: var(--_radius);
  background: var(--_track);
  border: var(--ds-border-width) solid var(--_track-border);
  font-size: var(--ds-size-text);
  line-height: var(--ds-lh-list);
  color: var(--_ink);
}
.ds-segmented-control::-webkit-scrollbar { display: none; }
/* equal-width cells — "this is a 2-way switch, not a tab strip" [clickup-web-147, hsajlzkwuaagtdc] */
.ds-segmented-control[data-fill="equal"] { display: flex; width: 100%; }
.ds-segmented-control[data-fill="equal"] .ds-segmented-control__item { flex: 1 1 0; }

/* ---- item ---------------------------------------------------------------- */
.ds-segmented-control__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: calc(var(--ds-size-h) - 2 * var(--_inset) - 2 * var(--ds-border-width));
  padding-block: 0;
  padding-inline: var(--ds-size-pad-x);
  border-radius: var(--_pill-radius);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--ds-weight-medium);
  text-transform: var(--ds-control-case);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-segmented-control__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
}
.ds-segmented-control__label svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; }
.ds-segmented-control svg[fill="none"] { fill: none; }   /* _base.css paints svg fill:currentColor; honour fill="none" */
/* the radio: fills the item, paints the pill, carries the ring */
.ds-segmented-control__input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  border: 0;
  background: transparent;
  cursor: inherit;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}

/* ---- states -------------------------------------------------------------- */
/* selected — pill paints --_pill; item ink + weight follow the selection tokens */
.ds-segmented-control__input:checked,
.ds-segmented-control__item[aria-selected="true"],
.ds-segmented-control__item[aria-checked="true"] { background: var(--_pill); }
.ds-segmented-control__item:has(.ds-segmented-control__input:checked),
.ds-segmented-control__item[aria-selected="true"],
.ds-segmented-control__item[aria-checked="true"] { color: var(--_pill-ink); font-weight: var(--ds-selected-weight); }
/* hover — unselected ink → ink, one tint step behind it (follows data-hover) */
.ds-segmented-control__item:hover:not(:has(.ds-segmented-control__input:checked)):not([aria-selected="true"]):not([aria-checked="true"]):not(:disabled),
.ds-segmented-control__item[data-state="hover"]:not(:has(.ds-segmented-control__input:checked)) { color: var(--ds-ink); }
.ds-segmented-control__input:hover:not(:checked):not(:disabled),
.ds-segmented-control__item[data-state="hover"] .ds-segmented-control__input:not(:checked) { background: var(--ds-hover-bg); }
.ds-segmented-control__item[role="tab"]:hover:not([aria-selected="true"]):not(:disabled) { background: var(--ds-hover-bg); }
/* focus-visible — the universal ring, hugging the pill inside the 4px inset */
.ds-segmented-control__input:focus-visible,
.ds-segmented-control__item[role="tab"]:focus-visible {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: 0;
}
/* disabled — one item, or the whole fieldset */
.ds-segmented-control__input:disabled,
.ds-segmented-control__item:disabled { cursor: not-allowed; }
.ds-segmented-control__item:has(.ds-segmented-control__input:disabled),
.ds-segmented-control__item:disabled { color: var(--ds-ink-faint); cursor: not-allowed; }
.ds-segmented-control:disabled,
.ds-segmented-control[aria-disabled="true"] { --_track: var(--ds-surface-3); --_pill: var(--ds-surface); --_pill-ink: var(--ds-ink-faint); --_ink: var(--ds-ink-faint); cursor: not-allowed; }
.ds-segmented-control:disabled .ds-segmented-control__item,
.ds-segmented-control[aria-disabled="true"] .ds-segmented-control__item { cursor: not-allowed; color: var(--ds-ink-faint); }
/* loading — the selection is being applied: pill pulses in its own frame, control inert */
.ds-segmented-control[aria-busy="true"] { pointer-events: none; }
.ds-segmented-control[aria-busy="true"] .ds-segmented-control__input:checked,
.ds-segmented-control[aria-busy="true"] .ds-segmented-control__item[aria-selected="true"] {
  animation: ds-segmented-control-pulse calc(var(--ds-dur-slow) * 4) var(--ds-ease-standard) infinite alternate;
}
@keyframes ds-segmented-control-pulse { from { opacity: 1; } to { opacity: .45; } }

/* ---- data-selection geometry — only the line styles change shape ---------- */
/* underline / bar: no track, hairline baseline, 2px selected line; equal cells
   read as a switch [clickup-web-147 "Required views | Default View Templates"] */
[data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]),
[data-selection="bar"]       .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]),
.ds-segmented-control[data-selection="underline"],
.ds-segmented-control[data-selection="bar"] {
  --_track: transparent;
  --_radius: 0px;
  --_pill-radius: 0px;
  --_inset: 0px;
  border: 0;
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
[data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input,
[data-selection="bar"]       .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input,
.ds-segmented-control[data-selection="underline"] .ds-segmented-control__input,
.ds-segmented-control[data-selection="bar"] .ds-segmented-control__input,
[data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__item[role="tab"],
.ds-segmented-control[data-selection="underline"] .ds-segmented-control__item[role="tab"] {
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
[data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input:checked,
[data-selection="bar"]       .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input:checked,
.ds-segmented-control[data-selection="underline"] .ds-segmented-control__input:checked,
.ds-segmented-control[data-selection="bar"] .ds-segmented-control__input:checked,
[data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__item[aria-selected="true"],
.ds-segmented-control[data-selection="underline"] .ds-segmented-control__item[aria-selected="true"] {
  border-block-end-color: var(--ds-selected-line);
}

/* ============================================================================
   VARIANTS
   ========================================================================== */

/* luma — 220×44 track r8; selected = WHITE pill with a 1px lift shadow, never
   accent; unselected muted. Fidelity: this is the corpus' one "elevated
   selection" (R4 exception, do not default to it) [luma-creating-an-event-00-03] */
.ds-segmented-control[data-variant="luma-lifted-white-pill"] {
  --_pill: var(--ds-surface);
  --_pill-ink: var(--ds-ink);
  min-height: var(--ds-control-h-lg);
}
.ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__input:checked,
.ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__item[aria-selected="true"] { box-shadow: var(--ds-shadow-lift); }
.ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-lg) - 2 * var(--_inset)); font-size: var(--ds-text-md); }

/* cloudflare — a WHITE track with a hairline edge (--ds-surface + --ds-rule, r12 = --ds-radius-md at the
   theme's scale) and an INVERTED selected pill (--ds-surface-inverse / --ds-ink-inverse, r9), 36 px tabs
   at 14/500 — Cloudflare's macOS / Windows / Linux OS switch. Reached before 2026-09-20 as
   data-selection="invert" + two inline knobs (l-feat-03); one attribute now. The pill reads the inverse
   pair directly so the variant is the same under any page-level data-selection. [try-cloudflare .os-tabs] */
.ds-segmented-control[data-variant="cloudflare-white-track-inverted-pill"] {
  --_track: var(--ds-surface);
  --_track-border: var(--ds-rule);
  --_pill: var(--ds-surface-inverse);
  --_pill-ink: var(--ds-ink-inverse);
  --_ink: var(--ds-ink-2);
}

/* hsaj — 202×42 track r10, white pill ~80×34 r8 inset 4, no border, no
   shadow; 16/500 text, 18px tab padding [hsajlzkwuaagtdc] */
.ds-segmented-control[data-variant="hsaj-tint-track-white-pill"] {
  --_pill: var(--ds-surface);
  --_pill-ink: var(--ds-ink);
  --_radius: var(--ds-radius-md);
  --_pill-radius: var(--ds-radius-sm);
  min-height: var(--ds-control-h-lg);
  font-size: var(--ds-text-lg);
}
.ds-segmented-control[data-variant="hsaj-tint-track-white-pill"] .ds-segmented-control__item {
  min-height: calc(var(--ds-control-h-lg) - 2 * var(--_inset));
  padding-inline: calc(var(--ds-space-4) + var(--ds-space-0-5));
}

/* fibery — no track; each option is a bordered pill; selected = DARKER fill
   ("pressed into the paper"), unselected lighter [fibery-3-830x6495] */
.ds-segmented-control[data-variant="fibery-pressed-selection"] {
  --_track: transparent;
  --_inset: 0px;
  --_gap: var(--ds-space-1);
  --_pill: var(--ds-surface-selected);
  --_pill-ink: var(--ds-ink);
  --_ink: var(--ds-ink-2);
  --_pill-radius: var(--ds-radius-pill);
  --_radius: var(--ds-radius-pill);
  border: 0;
  flex-wrap: wrap;
  overflow: visible;
}
.ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item {
  min-height: var(--ds-size-h);
  border: var(--ds-border-width) solid var(--ds-border);
  background: var(--ds-surface);
}
.ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__input { inset: calc(-1 * var(--ds-border-width)); }
.ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item:has(.ds-segmented-control__input:checked),
.ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item[aria-selected="true"] { border-color: var(--ds-border-strong); }

/* rox — 132×42 pill, hairline, recessed fill; three ICON-ONLY options on 44px
   centres; selected = a puck the FULL track height (no inset) with a tint fill
   and a 4px ring; icon flips muted → ink [rox-section] */
.ds-segmented-control[data-variant="rox-icon-only-three-state"] {
  --_track: var(--ds-surface-2);
  --_track-border: var(--ds-rule);
  --_radius: var(--ds-radius-pill);
  --_pill-radius: var(--ds-radius-pill);
  --_inset: 0px;
  --_pill: var(--ds-surface-selected);
  --_pill-ink: var(--ds-ink);
  min-height: var(--ds-control-h-lg);
}
.ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__item {
  min-height: calc(var(--ds-control-h-lg) - 2 * var(--ds-border-width));
  inline-size: calc(var(--ds-control-h-lg) - 2 * var(--ds-border-width));
  padding: 0;
}
.ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__input:checked,
.ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__item[aria-checked="true"] { border: 4px solid var(--ds-surface-3); }
.ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__label svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); }

/* vercel — 32px hairline pill, three icon-only options, selected = tinted
   circle with ink icon, 2px inset [vercel-page] */
.ds-segmented-control[data-variant="vercel-three-segment-theme"] {
  --_track: var(--ds-surface);
  --_track-border: var(--ds-border);
  --_radius: var(--ds-radius-pill);
  --_pill-radius: var(--ds-radius-pill);
  --_inset: var(--ds-space-0-5);
  --_pill: var(--ds-surface-selected);
  --_pill-ink: var(--ds-ink);
  min-height: var(--ds-control-h-sm);
}
.ds-segmented-control[data-variant="vercel-three-segment-theme"] .ds-segmented-control__item {
  min-height: calc(var(--ds-control-h-sm) - 2 * var(--_inset) - 2 * var(--ds-border-width));
  inline-size: calc(var(--ds-control-h-sm) - 2 * var(--_inset) - 2 * var(--ds-border-width));
  padding: 0;
}

/* navattic — scope pill 71×27 in a content filter bar: tinted pill track,
   white pill, small text; 27 is off-ladder → nearest rung is sm [navattic-web-88] */
.ds-segmented-control[data-variant="navattic-88-scope-segment"] {
  --_radius: var(--ds-radius-pill);
  --_pill-radius: var(--ds-radius-pill);
  --_inset: var(--ds-space-0-5);
  --_pill: var(--ds-surface);
  --_pill-ink: var(--ds-ink);
  min-height: var(--ds-control-h-sm);
  font-size: var(--ds-text-sm);
}
.ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__item {
  min-height: calc(var(--ds-control-h-sm) - 2 * var(--_inset));
  padding-inline: var(--ds-space-3);
}
.ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__input:checked,
.ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__item[aria-selected="true"] { box-shadow: var(--ds-shadow-lift); }

/* retool — no track; active = accent-100 pill (62×24, r6, 12px semibold),
   inactive plain text, 24px gap; sits in a card header [retool-web-25] */
.ds-segmented-control[data-variant="retool-tint-pill-tab"] {
  --_track: transparent;
  --_inset: 0px;
  --_gap: var(--ds-space-6);
  --_pill: var(--ds-accent-tint);
  --_pill-ink: var(--ds-accent-ink);
  --_ink: var(--ds-ink-2);
  --_pill-radius: var(--ds-radius-sm);
  min-height: auto;
  border: 0;
  font-size: var(--ds-text-xs);
}
.ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item {
  min-height: var(--ds-space-6);
  padding-inline: var(--ds-space-2);
  font-weight: var(--ds-weight-semibold);
}
.ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item:has(.ds-segmented-control__input:checked),
.ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item[aria-selected="true"] { font-weight: var(--ds-weight-semibold); }


/* components/status-badge/status-badge.css */
/* ============================================================================
   status-badge — Status badge                              (taxonomy §D · core · S1)
   Root: .ds-status-badge (<span>; put it INSIDE the <a>/<button> if it must be interactive — it is never one itself)
   Parts: __glyph[data-shape="dot|check|ring|icon"] (ring: data-fill="dashed|empty|partial|filled") · __label
   Axes:  data-tone="neutral|success|danger|warning|info|accent|accent-2|live"   which hue
          data-emphasis="outlined|tint|filled|inverse|quiet"                   how loud
          data-hue="1…8"                                                      an enum hue instead of a semantic one
          data-size="sm|md|lg"                                                18 / 20 / 24
   Variants: jstov (unmarked root — neutral OUTLINED for resting states, ONE semantic fill for live/active,
     uppercase = the one caps lane) · manychat-live-filled-red · manychat-draft-quiet-outlined ·
     clickup-group-status-pill · origin-inline-coloured-word · navattic-tonal-default · perplexity-pro-dark-caps ·
     descript-new-tint-pill · elevenlabs-two-emphasis-levels · vercel-mono-boxed-new · attio-status-chip-vocabulary ·
     plane-state-ring · oku-premium-accent-pill · manychat-trial-on-avatar
   States: rest · aria-busy="true" (skeleton pill) — a badge has no hover/focus/disabled of its own
   Private knobs: --_h --_pad-x --_radius --_fill --_ink --_edge --_hue --_glyph --_gap --_size --_weight --_case --_tracking
   ========================================================================== */

.ds-status-badge svg[fill="none"] { fill: none; stroke: currentColor; }

.ds-status-badge {
  --_h:        20px;                              /* 20–24 across the corpus; icon-row tall            */
  --_pad-x:    var(--ds-space-2);
  --_radius:   var(--ds-radius-xs);               /* r4 — manychat / clickup / oku; pills opt in         */
  --_gap:      var(--ds-space-1);
  --_size:     var(--ds-text-xs);
  --_weight:   var(--ds-weight-medium);
  --_case:     uppercase;                         /* R8: the badge is the one caps lane                  */
  --_tracking: .04em;
  /* hue set — the house resting badge is NEUTRAL OUTLINED */
  --_hue:      var(--ds-ink-muted);
  --_fill:     transparent;
  --_ink:      var(--ds-ink-muted);
  --_edge:     var(--ds-border);
  --_glyph:    var(--_hue);

  display: inline-flex;
  align-items: center;
  gap: var(--_gap);
  min-block-size: var(--_h);
  padding-inline: var(--_pad-x);
  border-radius: var(--_radius);
  border: var(--ds-border-width) solid var(--_edge);
  background: var(--_fill);
  color: var(--_ink);
  font-family: var(--ds-font-label);
  font-size: var(--_size);
  font-weight: var(--_weight);
  line-height: 1;
  letter-spacing: var(--_tracking);
  text-transform: var(--_case);
  white-space: nowrap;
  vertical-align: middle;
  max-inline-size: 100%;
}
.ds-status-badge__label { overflow: hidden; text-overflow: ellipsis; }
.ds-status-badge[data-size="sm"] { --_h: 18px; --_pad-x: var(--ds-space-1-5); }
.ds-status-badge[data-size="lg"] { --_h: 24px; --_pad-x: var(--ds-space-3); --_size: var(--ds-text-sm); }

/* -- tones: each sets the hue triplet; emphasis then decides which member paints what ------------- */
.ds-status-badge[data-tone="success"]  { --_hue: var(--ds-success); --_fill: var(--ds-success-tint); --_ink: var(--ds-success-ink); --_edge: transparent; }
.ds-status-badge[data-tone="danger"]   { --_hue: var(--ds-danger);  --_fill: var(--ds-danger-tint);  --_ink: var(--ds-danger-ink);  --_edge: transparent; }
.ds-status-badge[data-tone="warning"]  { --_hue: var(--ds-warning); --_fill: var(--ds-warning-tint); --_ink: var(--ds-warning-ink); --_edge: transparent; }
.ds-status-badge[data-tone="info"]     { --_hue: var(--ds-info);    --_fill: var(--ds-info-tint);    --_ink: var(--ds-info-ink);    --_edge: transparent; }
.ds-status-badge[data-tone="accent"]   { --_hue: var(--ds-accent);  --_fill: var(--ds-accent-tint);  --_ink: var(--ds-accent-ink);  --_edge: transparent; }
.ds-status-badge[data-tone="accent-2"] { --_hue: var(--ds-accent-2); --_fill: var(--ds-accent-2-tint); --_ink: var(--ds-accent-2-ink); --_edge: transparent; }
/* live / on-air: the ONE filled badge (house). --ds-live derives from danger; --ds-ink-on-semantic pairs with it */
.ds-status-badge[data-tone="live"]     { --_hue: var(--ds-live); --_fill: var(--ds-live); --_ink: var(--ds-ink-on-semantic); --_edge: transparent; --_glyph: currentColor; }
.ds-status-badge[data-hue="1"] { --_hue: var(--ds-data-1); --_fill: var(--ds-data-1-tint); --_ink: var(--ds-data-1-ink); --_edge: transparent; }
.ds-status-badge[data-hue="2"] { --_hue: var(--ds-data-2); --_fill: var(--ds-data-2-tint); --_ink: var(--ds-data-2-ink); --_edge: transparent; }
.ds-status-badge[data-hue="3"] { --_hue: var(--ds-data-3); --_fill: var(--ds-data-3-tint); --_ink: var(--ds-data-3-ink); --_edge: transparent; }
.ds-status-badge[data-hue="4"] { --_hue: var(--ds-data-4); --_fill: var(--ds-data-4-tint); --_ink: var(--ds-data-4-ink); --_edge: transparent; }
.ds-status-badge[data-hue="5"] { --_hue: var(--ds-data-5); --_fill: var(--ds-data-5-tint); --_ink: var(--ds-data-5-ink); --_edge: transparent; }
.ds-status-badge[data-hue="6"] { --_hue: var(--ds-data-6); --_fill: var(--ds-data-6-tint); --_ink: var(--ds-data-6-ink); --_edge: transparent; }
.ds-status-badge[data-hue="7"] { --_hue: var(--ds-data-7); --_fill: var(--ds-data-7-tint); --_ink: var(--ds-data-7-ink); --_edge: transparent; }
.ds-status-badge[data-hue="8"] { --_hue: var(--ds-data-8); --_fill: var(--ds-data-8-tint); --_ink: var(--ds-data-8-ink); --_edge: transparent; }

/* -- emphasis ------------------------------------------------------------------------------------ */
.ds-status-badge[data-emphasis="outlined"] { --_fill: transparent; --_edge: var(--ds-border); }
.ds-status-badge[data-emphasis="outlined"]:not([data-tone]):not([data-hue]) { --_ink: var(--ds-ink-muted); }
.ds-status-badge[data-emphasis="tint"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-2); --_edge: transparent; }
.ds-status-badge[data-emphasis="filled"]  { --_fill: var(--_hue); --_ink: var(--ds-ink-on-semantic); --_edge: transparent; --_glyph: currentColor; }
.ds-status-badge[data-emphasis="filled"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); }
.ds-status-badge[data-emphasis="filled"][data-tone="accent"] { --_ink: var(--ds-ink-on-accent); }
/* warning never fills: white fails on the light amber and the pair flips by mode — it stays tint (contract §4.5) */
.ds-status-badge[data-emphasis="filled"][data-tone="warning"] { --_fill: var(--ds-warning-tint); --_ink: var(--ds-warning-ink); --_glyph: var(--_hue); }
.ds-status-badge[data-emphasis="inverse"] { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); --_edge: transparent; --_glyph: currentColor; }
.ds-status-badge[data-emphasis="quiet"]   { --_fill: transparent; --_edge: transparent; --_pad-x: 0px; }
.ds-status-badge[data-emphasis="quiet"]:not([data-tone]):not([data-hue]) { --_ink: var(--ds-ink-muted); }
.ds-status-badge[data-emphasis="quiet"][data-tone] { --_ink: var(--_hue); }
.ds-status-badge[data-emphasis="quiet"][data-tone="success"] { --_ink: var(--ds-success-ink); }
.ds-status-badge[data-emphasis="quiet"][data-tone="danger"]  { --_ink: var(--ds-danger-ink); }
.ds-status-badge[data-emphasis="quiet"][data-tone="warning"] { --_ink: var(--ds-warning-ink); }
.ds-status-badge[data-emphasis="quiet"][data-tone="info"]    { --_ink: var(--ds-info-ink); }

/* -- glyph: dot (default) · check · ring (plane state vocabulary) · icon ------------------------- */
.ds-status-badge__glyph {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--_glyph);
  color: var(--_glyph);
}
.ds-status-badge__glyph[data-shape="check"] { inline-size: 12px; block-size: 12px; background: transparent; }
.ds-status-badge__glyph[data-shape="check"]::before {
  content: "";
  inline-size: 3px; block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
.ds-status-badge__glyph[data-shape="icon"] { inline-size: 12px; block-size: 12px; background: transparent; border-radius: 0; }
.ds-status-badge__glyph[data-shape="icon"] svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
/* ring: stroke style encodes state — dashed (backlog) · empty (to do) · partial (in progress, amber) · filled (done) */
.ds-status-badge__glyph[data-shape="ring"] {
  inline-size: 14px;
  block-size: 14px;
  background: transparent;
  border: 1.5px solid var(--_glyph);
  box-sizing: border-box;
}
.ds-status-badge__glyph[data-shape="ring"][data-fill="dashed"]  { border-style: dashed; }
.ds-status-badge__glyph[data-shape="ring"][data-fill="partial"]::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: conic-gradient(var(--_glyph) 50%, transparent 0);
}
.ds-status-badge__glyph[data-shape="ring"][data-fill="filled"] { background: var(--_glyph); }
.ds-status-badge__glyph[data-shape="ring"][data-fill="filled"]::before {
  content: "";
  inline-size: 3px; block-size: 6px;
  border-inline-end: 1.5px solid var(--ds-ink-on-semantic);
  border-block-end: 1.5px solid var(--ds-ink-on-semantic);
  transform: translateY(-1px) rotate(45deg);
}
/* live badges pulse the dot; collapses under reduced motion via --ds-motion-scale */
.ds-status-badge[data-tone="live"] .ds-status-badge__glyph[data-shape="dot"] { animation: ds-status-badge-pulse calc(1.6s * var(--ds-motion-scale)) var(--ds-ease-standard) infinite; }
@keyframes ds-status-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* =========================================================================
   VARIANTS
   ========================================================================= */

/* manychat: LIVE 41×22 r4 filled (their red collides with danger) vs STOPPED neutral tint r4 */
.ds-status-badge[data-variant="manychat-live-filled-red"] {
  --_h: 22px;
  --_size: var(--ds-text-sm);
  --_weight: var(--ds-weight-medium);
  --_tracking: .02em;
  --_fill: var(--ds-surface-2);
  --_ink: var(--ds-ink-muted);
  --_edge: transparent;
}
.ds-status-badge[data-variant="manychat-live-filled-red"][data-tone="live"] { --_weight: var(--ds-weight-semibold); --_fill: var(--ds-live); --_ink: var(--ds-ink-on-semantic); }

/* manychat draft: uppercase tracked, 1px rule outline, 24 tall, r6, no fill; their #838383 (3.4:1) is raised to ink-muted */
.ds-status-badge[data-variant="manychat-draft-quiet-outlined"] {
  --_h: 24px;
  --_radius: var(--ds-radius-sm);
  --_size: var(--ds-text-sm);
  --_tracking: .06em;
  --_edge: var(--ds-rule);
  --_fill: transparent;
  --_ink: var(--ds-ink-muted);
}

/* clickup: "TO DO" 12/700 upper on the state's tint, r4 — a kanban group header token */
.ds-status-badge[data-variant="clickup-group-status-pill"] {
  --_size: var(--ds-text-sm);
  --_weight: var(--ds-weight-bold);
  --_tracking: .02em;
  --_edge: transparent;
}
.ds-status-badge[data-variant="clickup-group-status-pill"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-2); }

/* origin: no box — the status is a coloured word in parentheses inside the meta line */
.ds-status-badge[data-variant="origin-inline-coloured-word"] {
  display: inline;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--_ink);
}
.ds-status-badge[data-variant="origin-inline-coloured-word"]::before { content: "("; }
.ds-status-badge[data-variant="origin-inline-coloured-word"]::after  { content: ")"; }
.ds-status-badge[data-variant="origin-inline-coloured-word"] .ds-status-badge__glyph { display: none; }

/* navattic: 81×20 r5 tonal, palette icon + 13/500 ink, sentence case, no border */
.ds-status-badge[data-variant="navattic-tonal-default"] {
  --_radius: var(--ds-radius-sm);
  --_size: var(--ds-text-sm);
  --_case: none;
  --_tracking: 0;
  --_fill: var(--ds-surface-2);
  --_ink: var(--ds-ink);
  --_edge: transparent;
  --_glyph: var(--ds-ink-2);
  --_gap: var(--ds-space-1-5);
}

/* perplexity: ~24×14 inverse rect, caps — the single uppercase token on the page (their 8px is raised to xs) */
.ds-status-badge[data-variant="perplexity-pro-dark-caps"] {
  --_h: 16px;
  --_pad-x: var(--ds-space-1);
  --_radius: var(--ds-radius-xs);
  --_weight: var(--ds-weight-semibold);
  --_tracking: .06em;
  --_fill: var(--ds-surface-inverse);
  --_ink: var(--ds-ink-inverse);
  --_edge: transparent;
}

/* descript: "New" on the accent tint, pill, 12/500 sentence */
.ds-status-badge[data-variant="descript-new-tint-pill"] {
  --_radius: var(--ds-radius-pill);
  --_size: var(--ds-text-sm);
  --_case: none;
  --_tracking: 0;
  --_fill: var(--ds-accent-tint);
  --_ink: var(--ds-accent-ink);
  --_edge: transparent;
}

/* elevenlabs: two emphasis levels for one word — inverse pill "New" (the look) vs grey tag "New" (the note) */
.ds-status-badge[data-variant="elevenlabs-two-emphasis-levels"] {
  --_h: 22px;
  --_radius: var(--ds-radius-pill);
  --_size: var(--ds-text-sm);
  --_case: none;
  --_tracking: 0;
  --_pad-x: var(--ds-space-2);
  --_fill: var(--ds-surface-2);
  --_ink: var(--ds-ink-2);
  --_edge: transparent;
}
.ds-status-badge[data-variant="elevenlabs-two-emphasis-levels"][data-emphasis="inverse"] { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); }

/* vercel: 10px mono caps in a 1px INK box, r3, 2×4 padding, surface fill; inline after link text */
.ds-status-badge[data-variant="vercel-mono-boxed-new"] {
  --_h: 16px;
  --_pad-x: var(--ds-space-1);
  --_radius: var(--ds-radius-xs);
  --_tracking: .06em;
  --_fill: var(--ds-surface);
  --_ink: var(--ds-ink);
  --_edge: var(--ds-ink);
  font-family: var(--ds-font-mono);
  margin-inline-start: var(--ds-space-2);
}

/* attio: hairline capsule with a leading glyph — Completed / Triggered (check) · Running / Live (dot) */
.ds-status-badge[data-variant="attio-status-chip-vocabulary"] {
  --_h: 22px;
  --_radius: var(--ds-radius-pill);
  --_size: var(--ds-text-sm);
  --_case: none;
  --_tracking: 0;
  --_gap: var(--ds-space-1-5);
  --_pad-x: var(--ds-space-2);
  --_fill: var(--ds-surface);
  --_ink: var(--ds-ink-2);
  --_edge: var(--ds-rule);
}

/* plane: no box; a 14px ring glyph whose stroke style is the state + a 14px sentence-case label */
.ds-status-badge[data-variant="plane-state-ring"] {
  --_h: 20px;
  --_pad-x: 0px;
  --_size: var(--ds-text-md);
  --_weight: var(--ds-weight-medium);
  --_case: none;
  --_tracking: 0;
  --_gap: var(--ds-space-2);
  --_fill: transparent;
  --_edge: transparent;
  --_ink: var(--ds-ink);
  --_glyph: var(--ds-ink-muted);
}
.ds-status-badge[data-variant="plane-state-ring"][data-tone="warning"] { --_glyph: var(--ds-warning); }
.ds-status-badge[data-variant="plane-state-ring"][data-tone="success"] { --_glyph: var(--ds-success); }

/* oku: 64×24 r4 ACCENT fill, 11px bold caps +.05em, 12px padding — the page's only accent use */
.ds-status-badge[data-variant="oku-premium-accent-pill"] {
  --_h: 24px;
  --_pad-x: var(--ds-space-3);
  --_weight: var(--ds-weight-bold);
  --_tracking: .05em;
  --_fill: var(--ds-accent);
  --_ink: var(--ds-ink-on-accent);
  --_edge: transparent;
}

/* manychat: 10px accent pill overlapping the avatar with a 2px surface ring (place it in avatar's __badge slot) */
.ds-status-badge[data-variant="manychat-trial-on-avatar"] {
  --_h: 16px;
  --_pad-x: var(--ds-space-1-5);
  --_radius: var(--ds-radius-pill);
  --_weight: var(--ds-weight-bold);
  --_tracking: .04em;
  --_fill: var(--ds-accent);
  --_ink: var(--ds-ink-on-accent);
  --_edge: var(--ds-surface);
  border-width: 2px;
}

/* =========================================================================
   STATES
   ========================================================================= */
/* loading: a skeleton pill of the label's width (or 48px when empty); label hidden, no edge */
.ds-status-badge[aria-busy="true"] {
  --_fill: var(--ds-skeleton);
  --_edge: transparent;
  color: transparent;
  min-inline-size: 48px;
}
.ds-status-badge[aria-busy="true"] > * { visibility: hidden; }


/* components/text-link/text-link.css */
/* ============================================================================
   components/text-link/text-link.css — Text link / inline link (core · S1)
   Root `.ds-text-link` is the <a> itself. Two idioms, one each (the rule the
   taxonomy sets): data-kind="inline" (default — in running text: --ds-ink-link
   + soft underline) and data-kind="route" (a navigational "See more →": ink,
   no underline, trailing arrow); plus data-kind="danger" (the destructive text
   action: danger-ink, inline underline rules). Designer idioms stay as data-variant.
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_gap --_glyph.
   ========================================================================== */

.ds-text-link {
  --_gap:   var(--ds-space-1);
  --_glyph: 1em;                                   /* arrow / chevron scale with the text */
  display: inline;                                 /* wraps like text                         */
  color: var(--ds-ink-link);
  font: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--ds-border-width);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .18em;
  border-radius: var(--ds-radius-xs);              /* the ring follows this               */
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease-standard),
              text-decoration-color var(--ds-dur-fast) var(--ds-ease-standard);
}
/* parts: an inline glyph after (→ › ↗) or before (G2 ›) the text */
.ds-text-link__glyph {
  display: inline-block;
  width: var(--_glyph);
  height: var(--_glyph);
  vertical-align: -.12em;
  margin-inline-start: var(--_gap);
  transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-text-link__glyph[data-slot="leading"] { margin-inline-start: 0; margin-inline-end: var(--_gap); }
.ds-text-link__glyph svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: var(--ds-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-text-link__label { }

/* ---- states ------------------------------------------------------------------ */
.ds-text-link:hover,
.ds-text-link[data-state="hover"] { text-decoration-color: currentColor; }
.ds-text-link:hover .ds-text-link__glyph:not([data-slot="leading"]) { transform: translateX(var(--ds-space-0-5)); }
.ds-text-link:focus-visible,
.ds-text-link[data-state="focus"] {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
  text-decoration-color: currentColor;
}
.ds-text-link:active { color: var(--ds-accent-hover); }
.ds-text-link[aria-current="page"],
.ds-text-link[aria-current="true"] { color: var(--ds-ink); font-weight: var(--ds-weight-medium); text-decoration: none; }
/* disabled link: no href, faint, no pointer — rare; prefer removing the link */
.ds-text-link[aria-disabled="true"] { color: var(--ds-ink-faint); text-decoration-color: currentColor; pointer-events: none; cursor: default; }
/* external: the ↗ glyph is content; nothing else changes */
.ds-text-link[data-external] .ds-text-link__glyph { vertical-align: -.05em; }

/* ---- kinds (the house rule: ONE inline idiom, ONE route idiom) -------------- */
/* route: ink, no underline, weight 500, trailing → ; a section "See more" or a nav item */
.ds-text-link[data-kind="route"] {
  display: inline-flex;
  align-items: center;
  color: var(--ds-ink);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
}
.ds-text-link[data-kind="route"]:hover,
.ds-text-link[data-kind="route"][data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-decoration-color: currentColor; }
.ds-text-link[data-kind="route"]:active { color: var(--ds-ink-2); }

/* danger: the destructive text action ("Delete account", "Remove") — --ds-danger-ink at rest, --ds-danger on
   hover, otherwise the inline rules (40 % underline → solid). Text only, never a red fill (R3); a danger
   action that needs a button footprint is button-secondary[data-variant="danger-text"]. (2026-09-20) */
.ds-text-link[data-kind="danger"] { color: var(--ds-danger-ink); }
.ds-text-link[data-kind="danger"]:hover,
.ds-text-link[data-kind="danger"][data-state="hover"] { color: var(--ds-danger); text-decoration-color: currentColor; }
.ds-text-link[data-kind="danger"]:active { color: var(--ds-danger); }

/* ============================================================================
   VARIANTS — each designer's idiom by name. Unmarked root = jstov: inline =
   --ds-ink-link + 40 % underline (the _base.css <a> convention), route =
   data-kind="route".
   ========================================================================== */

/* no-underline-coloured — accent, no underline at rest, underline on hover
   [descript-editing-profile-00-03] [grammarly-web-158-acordian] */
.ds-text-link[data-variant="no-underline-coloured"] { text-decoration: none; }
.ds-text-link[data-variant="no-underline-coloured"]:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* underlined-ink — same colour as body, 1px underline, offset ~3px; affordance by underline
   alone [jasper-web-19] [oku-web-88] [intercom-3-830x8816] [braintrust-web-13] "View all jobs" */
.ds-text-link[data-variant="underlined-ink"] {
  color: var(--ds-ink);
  text-decoration-color: currentColor;
  text-underline-offset: .2em;
}
.ds-text-link[data-variant="underlined-ink"]:hover { color: var(--ds-ink-2); text-decoration-thickness: 2px; }

/* hue-plus-trailing-chevron — accent text + 8px gap + thin › in the same hue, no underline
   [sequence-section] "Take product tour ›", "G2 ›" (chevron before the stars) */
.ds-text-link[data-variant="hue-plus-trailing-chevron"] {
  --_gap: var(--ds-space-2);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ds-text-link[data-variant="hue-plus-trailing-chevron"]:hover { color: var(--ds-accent-hover); }

/* arrow-suffix-route-link — "See more →": body ink, no underline, arrow suffix
   [oku-web-88] [braintrust-web-13] "Help Center ↗" */
.ds-text-link[data-variant="arrow-suffix-route-link"] {
  display: inline-flex;
  align-items: center;
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-text-link[data-variant="arrow-suffix-route-link"]:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* muted-underlined-in-system-text — inside a muted system line the link stays muted and
   is underlined; the reader knows it is a link without a colour jump [manychat-web-184] */
.ds-text-link[data-variant="muted-underlined-in-system-text"] {
  color: var(--ds-ink-muted);
  text-decoration-color: currentColor;
}
.ds-text-link[data-variant="muted-underlined-in-system-text"]:hover { color: var(--ds-ink); }

/* quiet-ink-cta — plain secondary ink, no underline, no glyph: scanners miss it (weakness
   kept as evidence) [confluence-web-23]. Hover restores an underline. */
.ds-text-link[data-variant="quiet-ink-cta"] {
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-text-link[data-variant="quiet-ink-cta"]:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* mono-caps-underlined — the label lane as a link: mono, uppercase, +0.12em, underlined
   [origin-connecting-an-account-05-06] "Direction", [heron-ai-830x5619] "BEARPLUS" */
.ds-text-link[data-variant="mono-caps-underlined"] {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-ink);
  text-decoration-color: currentColor;
  text-underline-offset: .25em;
}
.ds-text-link[data-variant="mono-caps-underlined"]:hover { color: var(--ds-ink-2); }
/* a text link on a <button> (a reset / "clear" action): drop the UA button chrome so it matches the anchor (fix 2026-09-30) */
button.ds-text-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }


/* components/tier-pill/tier-pill.css */
/* ============================================================================
   tier-pill — Tier pill                                          (taxonomy §J · niche · S0)
   Root: .ds-tier-pill (<span>; never interactive — it names the plan a card is about)
   Axes:  data-emphasis="tint|accent|filled"  tint = resting (neutral inset + ink-2) · accent = the RECOMMENDED
          signal in the house (accent-tint + accent-ink, P6: chips are tint + same-hue ink) · filled = jasper's
          accent fill + inverse label (the named variant's reading of "recommended")
          data-size="sm|md|lg"  20 / 24 / 28
   Variants: jstov (unmarked root — tint vs accent-tint) · jasper-tinted-vs-filled (grey + accent text vs accent + white)
   States: rest · aria-busy (skeleton pill) — a tier pill has no hover / focus / disabled of its own
   Private knobs: --_h --_pad-x --_fill --_ink --_size
   ========================================================================== */

.ds-tier-pill {
  --_h:     24px;                                 /* Jasper: 24 tall, 8 px side padding, 12/500          */
  --_pad-x: var(--ds-space-2);
  --_size:  var(--ds-text-sm);
  --_fill:  var(--ds-surface-2);
  --_ink:   var(--ds-ink-2);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--_h);
  max-inline-size: 100%;
  padding-inline: var(--_pad-x);
  border-radius: var(--ds-radius-pill);
  background: var(--_fill);
  color: var(--_ink);
  font-family: var(--ds-font-sans);
  font-size: var(--_size);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  letter-spacing: 0;
  text-transform: var(--ds-control-case);
  white-space: nowrap;
  vertical-align: middle;
}
.ds-tier-pill[data-size="sm"] { --_h: 20px; --_pad-x: var(--ds-space-1-5); --_size: var(--ds-text-xs); }
.ds-tier-pill[data-size="lg"] { --_h: calc(var(--ds-control-h-sm) - var(--ds-space-1)); --_pad-x: var(--ds-space-3); --_size: var(--ds-text-md); }

/* the recommendation signal: house = accent tint + accent ink (tint + same-hue ink, never white-on-colour) */
.ds-tier-pill[data-emphasis="accent"] { --_fill: var(--ds-accent-tint); --_ink: var(--ds-accent-ink); }
.ds-tier-pill[data-emphasis="filled"] { --_fill: var(--ds-accent); --_ink: var(--ds-ink-on-accent); }

/* jasper: resting pill = neutral inset fill with the ACCENT as the label ink; recommended = accent fill + white */
.ds-tier-pill[data-variant="jasper-tinted-vs-filled"] { --_ink: var(--ds-accent-ink); }
.ds-tier-pill[data-variant="jasper-tinted-vs-filled"][data-emphasis="filled"] { --_ink: var(--ds-ink-on-accent); }

.ds-tier-pill[aria-busy="true"] { --_fill: var(--ds-skeleton); color: transparent; min-inline-size: 56px; }


/* components/wordmark-signoff/wordmark-signoff.css */
/* ============================================================================
   components/wordmark-signoff/wordmark-signoff.css — Wordmark / signature sign-off
   taxonomy-components.md §K · niche · S2  ·  L-FOOT-03. OFF by default in the house (a slot, not a default).
   Root:  <div class="ds-wordmark-signoff" data-variant="…" data-fit="width|centred">  — between the link grid and the legal band
   Parts: __mark (the wordmark: text, or an inline <svg>) · __tick (heron's dimension ticks) · __glow (legend's light)
   Variants: jstov (unmarked = heron's construction outline) · klarna-full-bleed-wordmark · heron-construction-wordmark ·
             legend-mark-as-light-source
   Tokens only. Private knobs: --_fit (cqi per glyph) · --_h · --_chars
   ========================================================================== */
.ds-wordmark-signoff {
  --_chars: 10;                                    /* glyph count of the mark — sets the width-fit size */
  --_fit: calc(100cqi / var(--_chars) * 1.55);     /* ≈ full container width for a grotesk at cap-height ratio */
  --_h: var(--ds-space-24);
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  min-height: var(--_h);
  padding: var(--ds-space-6) var(--ds-gutter-page);
  overflow: hidden;
  color: var(--ds-ink);
  min-width: 0;
}
.ds-wordmark-signoff svg[fill="none"] { fill: none; stroke: currentColor; }
.ds-wordmark-signoff__mark {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--_fit);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-display-tracking);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
/* house / heron — the wordmark as construction geometry: outline strokes, dimension ticks, a crop-marked row */
.ds-wordmark-signoff:not([data-variant]) .ds-wordmark-signoff__mark,
.ds-wordmark-signoff[data-variant="heron-construction-wordmark"] .ds-wordmark-signoff__mark {
  color: transparent;
  -webkit-text-stroke: var(--ds-border-width) var(--ds-line-art);
  paint-order: stroke;
}
.ds-wordmark-signoff:not([data-variant]),
.ds-wordmark-signoff[data-variant="heron-construction-wordmark"] { border-block: var(--ds-border-width) solid var(--ds-rule); padding-block: var(--ds-space-10); }
.ds-wordmark-signoff__tick { position: absolute; inset-inline: var(--ds-gutter-page); block-size: 1px; background: var(--ds-line-art); pointer-events: none; }
.ds-wordmark-signoff__tick[data-edge="top"]    { inset-block-start: var(--ds-space-4); }
.ds-wordmark-signoff__tick[data-edge="bottom"] { inset-block-end: var(--ds-space-4); }
.ds-wordmark-signoff__tick::before, .ds-wordmark-signoff__tick::after { content: ""; position: absolute; inset-block-start: -3px; inline-size: 1px; block-size: 7px; background: var(--ds-line-art); }
.ds-wordmark-signoff__tick::before { inset-inline-start: 0; } .ds-wordmark-signoff__tick::after { inset-inline-end: 0; }
/* klarna — width-fitted solid wordmark on the inverse band, cropped by the band's bottom edge */
.ds-wordmark-signoff[data-variant="klarna-full-bleed-wordmark"] { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); padding-block: var(--ds-space-8) 0; align-items: end; --_h: var(--ds-space-20); }
.ds-wordmark-signoff[data-variant="klarna-full-bleed-wordmark"] .ds-wordmark-signoff__mark { margin-block-end: -0.18em; }
/* legend — a 182 px mark centred in an empty band (≈ 2.5× the mark), the mark lighting the scene */
.ds-wordmark-signoff[data-variant="legend-mark-as-light-source"] { --_h: 320px; background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); }
.ds-wordmark-signoff[data-variant="legend-mark-as-light-source"] .ds-wordmark-signoff__mark { font-size: 0; inline-size: 128px; block-size: 128px; }
.ds-wordmark-signoff__glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--ds-texture-color), transparent 35%); pointer-events: none; }
/* the SVG form of __mark (2026-09-20, L-FOOT-03 recipe): a brand asset inside __mark fits the container width like the
   text form; in the outline variants it is drawn with the same --ds-line-art stroke (the text form's colour is transparent,
   so currentColor alone would vanish). Legend's 128 px mark keeps its box (the rule fills it). */
.ds-wordmark-signoff__mark > svg { display: block; inline-size: 100%; block-size: auto; }
.ds-wordmark-signoff:not([data-variant]) .ds-wordmark-signoff__mark > svg,
.ds-wordmark-signoff[data-variant="heron-construction-wordmark"] .ds-wordmark-signoff__mark > svg { fill: none; stroke: var(--ds-line-art); stroke-width: var(--ds-border-width); }


/* patterns/sections/l-price-01-tiered-plan-grid.css */
/* ============================================================================
   patterns/sections/l-price-01-tiered-plan-grid.css
   L-PRICE-01 · Tiered plan grid (N equal columns, recommended ring) · core
   Root <section class="ds-sec-l-price-01-tiered-plan-grid"
                 data-variant="jstov | jasper-anchor-high"
                 (eyebrow device via data-eyebrow on the composed chapter-header)>
   Parts (section-local): __inner · __band · __controls · __incentive · __foot
   Head = composed components/chapter-header (since 2026-09-19); the section only PLACES it.
   [data-recommended] · __tier · __tagline · __price · __amount · __period · __context · __note ·
   __desc · __features (+ li) · __cta · __foot
   Composes by root class only: enum-chip (tier pill), segmented-control (billing period),
   button-primary (the ONE filled control — the recommended plan's CTA), button-secondary,
   text-link ("decide later").
   Equal header heights: each __plan is a SUBGRID spanning 7 shared rows, so tier / tagline /
   price / note / description / features / CTA sit on one line across every column and every
   CTA shares a baseline (Jasper's divider drift is the trap). Browsers without subgrid fall
   back to a flex column with the CTA pinned by margin-top:auto.
   Recommended column: hairline → ring drawn OUTSIDE the box (outline + offset), tint pill →
   accent-tint pill, outline CTA → filled CTA. Never wider, lifted or shaded (R4).
   Tokens only. Private knobs: --_min --_gap --_pad --_ring-w --_ring-offset --_pitch --_amount-size.
   ========================================================================== */

.ds-sec-l-price-01-tiered-plan-grid {
  --_min: 260px;                                 /* column min → 3-up ≥ ~900, 2-up tablet, 1-up phone */
  --_gap: var(--ds-space-8);                     /* Jasper: 32 px gutter */
  --_pad: var(--ds-space-8);                     /* Jasper: 32 px card padding */
  --_ring-w: 2px;
  --_ring-offset: 3px;                           /* Jasper: ring ~3 px outside the box */
  --_pitch: var(--ds-space-1-5);                 /* feature row block padding → ~32 px pitch on a 14 body */
  --_amount-size: var(--ds-text-display);        /* Jasper: 52 px on 14 (3.7×) — display lane, nothing between it and the h2 */
  position: relative;
  padding-block: var(--ds-section-gap);
  color: var(--ds-ink);
  min-width: 0;
}
.ds-sec-l-price-01-tiered-plan-grid__inner {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter-page);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  min-width: 0;
}

/* ---- band: composed chapter-header + controls row on the same band ≥ 768 ------------------------- */
.ds-sec-l-price-01-tiered-plan-grid__band { display: flex; flex-direction: column; gap: var(--ds-space-6); min-width: 0; }
/* head = composed .ds-chapter-header (eyebrow · title · lead) — local __head/__eyebrow/__heading/__lede removed 2026-09-19 */

/* ---- controls: incentive SENTENCE beside the period control, never inside it (Jasper) --------- */
.ds-sec-l-price-01-tiered-plan-grid__controls {
  position: relative;                            /* the segmented-control's sr-only legend needs a positioned ancestor */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3) var(--ds-space-4);
  min-width: 0;
}
.ds-sec-l-price-01-tiered-plan-grid__incentive { margin: 0; font-size: var(--ds-text-md); color: var(--ds-ink-muted); }
.ds-sec-l-price-01-tiered-plan-grid__incentive strong { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }

/* ---- the grid + cards are components/pricing-card (+ tier-pill, feature-checklist) since 2026-09-20 ---------
   The section only places the composed grid; the Jasper block sets data-variant="jasper-3up-ring-highlight" on
   each card (ring outside the box, 52/700 grotesk amount, centred content-width CTA). */
.ds-sec-l-price-01-tiered-plan-grid__inner > .ds-pricing-card-grid { margin-block-start: var(--ds-space-2); }

/* ---- foot: "decide later" path + comparison link (onboarding-gate use) ------------------------ */
.ds-sec-l-price-01-tiered-plan-grid__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }

/* ============================================================================
   ≥ 768: head and controls share one band — eyebrow/h2 left, controls right-anchored (Jasper)
   ========================================================================== */
@media (min-width: 768px) {
  .ds-sec-l-price-01-tiered-plan-grid__band { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-6) var(--ds-space-8); }
  .ds-sec-l-price-01-tiered-plan-grid__band > .ds-chapter-header { flex: 1 1 420px; }   /* placement of the composed root */
  .ds-sec-l-price-01-tiered-plan-grid__controls { flex: 0 1 auto; justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .ds-sec-l-price-01-tiered-plan-grid { --_gap: var(--ds-space-8); }
}


/* patterns/sections/l-faq-01-accordion.css */
/* ============================================================================
   patterns/sections/l-faq-01-accordion.css
   L-FAQ-01 · Audience / FAQ accordion · core
   Root <section class="ds-sec-l-faq-01-accordion"
                 data-variant="jstov | heron-audience-rows-plus-minus | attio-signals-no-chevron |
                               grammarly-two-column-semantic-accordion | quicken-fill-nested-tree-accordion"
                 [data-mode="dark"  (attio: the section root IS the dark island and paints its ground)]>
   Every list is components/accordion composed by ROOT class (jstov-faq-rows · heron-audience-plus-minus ·
   attio-no-chevron · grammarly-tint-row-lifts-to-card · quicken-fill-nested-tree); the head is chapter-header;
   art is illustration-slot; grammarly's column chips are status-badge. The section owns rhythm (C-01), the container
   (C-03), the heron / attio 6/6 split, and the two-column split (house, grammarly) with its ONE shared hairline.
   Section-local parts: __inner · __split (6/6) · __column (the text column of a split: head top, list bottom) ·
     __art / __list / __tree (placement classes on composed roots) · __cols[data-rule="gutter"] · __col ·
     __col-head (house: label-lane category name) · __col-chip (grammarly: the chip row)
   Tokens only. Private knobs: --_gap --_head-gap --_split-gap --_col-gap
   ========================================================================== */

.ds-sec-l-faq-01-accordion {
  --_gap:       var(--ds-section-gap);
  --_head-gap:  var(--ds-space-10);                                 /* head → rows (C-01: 6–10 units) */
  --_split-gap: var(--ds-space-10);                                 /* heron / attio: text inset from the seam */
  --_col-gap:   var(--ds-space-12);                                 /* grammarly: 48 px gutter with the rule down its centre */
  position: relative;
  padding-block: var(--_gap);
  padding-inline: var(--ds-gutter-page);
  color: var(--ds-ink);
  min-width: 0;
}
.ds-sec-l-faq-01-accordion[data-mode="dark"] { background: var(--ds-ground); }   /* attio: the island paints its own ground */
.ds-sec-l-faq-01-accordion__inner {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--_head-gap);
  min-width: 0;
}
.ds-sec-l-faq-01-accordion__list,
.ds-sec-l-faq-01-accordion__tree { width: 100%; }                 /* placement of the composed roots */
.ds-sec-l-faq-01-accordion__tree { max-width: 720px; }

/* ---------------------------------------------------------------------------
   1. TWO CATEGORIES — house (Heron's rows in Grammarly's split) and grammarly: equal columns, ONE rule between
   ------------------------------------------------------------------------- */
.ds-sec-l-faq-01-accordion__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--_head-gap) var(--_col-gap);
  min-width: 0;
}
.ds-sec-l-faq-01-accordion__col { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-sec-l-faq-01-accordion__col-head {
  margin: 0;
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-label-tracking);
  text-transform: var(--ds-label-case);
  color: var(--ds-ink-muted);
  padding-block-end: var(--ds-space-2);
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-sec-l-faq-01-accordion__col-chip { margin: 0; }
@media (min-width: 768px) {
  /* the shared rule down the gutter's centre (grammarly x = 924) — drawn on the second column's left edge, half a gutter out */
  .ds-sec-l-faq-01-accordion__cols[data-rule="gutter"] > * + *,
  .ds-sec-l-faq-01-accordion[data-variant="jstov"] .ds-sec-l-faq-01-accordion__cols > * + * {
    position: relative;
  }
  .ds-sec-l-faq-01-accordion__cols[data-rule="gutter"] > * + *::before,
  .ds-sec-l-faq-01-accordion[data-variant="jstov"] .ds-sec-l-faq-01-accordion__cols > * + *::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(-0.5 * var(--_col-gap));
    border-inline-start: var(--ds-border-width) solid var(--ds-rule);
  }
}

/* ---------------------------------------------------------------------------
   2. 6/6 SPLITS — heron: plate | head top + rows bottom-anchored; attio: head + rows | radar drawing
   ------------------------------------------------------------------------- */
.ds-sec-l-faq-01-accordion__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--_split-gap);
  min-width: 0;
}
.ds-sec-l-faq-01-accordion__split > * { min-width: 0; }
.ds-sec-l-faq-01-accordion__column {
  display: flex;
  flex-direction: column;
  gap: var(--_head-gap);
  min-width: 0;
}
.ds-sec-l-faq-01-accordion__art { --_size: 100%; width: 100%; }   /* the slot's public size knob: fill the cell */
.ds-sec-l-faq-01-accordion[data-variant="heron-audience-rows-plus-minus"] .ds-sec-l-faq-01-accordion__art { --_ratio: 4 / 5; --_radius: 0; }
.ds-sec-l-faq-01-accordion[data-variant="heron-audience-rows-plus-minus"] .ds-sec-l-faq-01-accordion__list { margin-block-start: auto; }   /* bottom-anchored rows (heron) */
.ds-sec-l-faq-01-accordion[data-variant="attio-signals-no-chevron"] .ds-sec-l-faq-01-accordion__art { --_ratio: 1; align-self: center; max-width: 480px; justify-self: end; }
@media (min-width: 900px) {
  .ds-sec-l-faq-01-accordion__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .ds-sec-l-faq-01-accordion__split > :first-child { padding-inline-end: var(--_split-gap); }
  .ds-sec-l-faq-01-accordion__split > * + * { border-inline-start: var(--ds-border-width) solid var(--ds-rule); padding-inline-start: var(--_split-gap); }
  .ds-sec-l-faq-01-accordion[data-variant="attio-signals-no-chevron"] .ds-sec-l-faq-01-accordion__split > * + * { border-inline-start: 0; }   /* attio: no seam, the drawing floats */
}
@media (max-width: 899px) {
  .ds-sec-l-faq-01-accordion[data-variant="heron-audience-rows-plus-minus"] .ds-sec-l-faq-01-accordion__art { --_ratio: 16 / 9; }
  .ds-sec-l-faq-01-accordion[data-variant="attio-signals-no-chevron"] .ds-sec-l-faq-01-accordion__art { display: none; }   /* the radar is decoration; the rows are the content */
}


/* patterns/sections/l-foot-01-sitemap-footer.css */
/* ============================================================================
   patterns/sections/l-foot-01-sitemap-footer.css
   L-FOOT-01 · Sitemap grid footer · core
   Root <div class="ds-sec-l-foot-01-sitemap-footer" data-variant="jstov | sequence-conversion-card |
        klarna-wordmark-monument | rox-engineering-grid | vercel-sitemap-badges | heron-table-footer |
        intercom-mono-labelled | attio-mega | fibery-proof-rail">
   CHROME — the one landing region with NO --ds-section-gap: a footer sits flush against whatever closed the page
   (the CTA band, the last chapter's seam) and the page ends on its legal row / terminator / rails. Everything
   visible is components/footer composed by ROOT class (.ds-footer[data-variant][data-headings][data-legal]);
   the composed <footer> carries the contentinfo landmark, its own container (--_max), gutters and ground, so
   this root has no padding, no container and no gap — it is the page-rhythm wrapper (l-nav-01's approach).
   What the wrapper adds:
     __signoff — the optional L-FOOT-03 slot (signoff_html) between the link grid and the legal band (house);
                 the composed .ds-wordmark-signoff inside it is full-bleed by design, so the slot only sets rhythm.
     data-labels / data-density on the root — the heron block sets data-labels="upper" (its cell labels are
                 the label lane), the intercom block data-density="compact" (its 27 px pitch); page attributes win.
   Rhythm knob: --_gap-start (default 0). A page whose last content section carries no bottom gap of its own may set
     --_gap-start: var(--ds-section-gap) inline on the root; the house footer's own top padding (space-16) is the
     usual separation.
   Tokens only. Private knobs: --_gap-start --_signoff-gap
   ========================================================================== */

.ds-sec-l-foot-01-sitemap-footer {
  --_gap-start: 0px;                                                /* chrome: no section gap (the footer's own padding is the pitch) */
  --_signoff-gap: var(--ds-space-10);                               /* grid → sign-off slot → rule (klarna 104 ≈ space-24 on 8 px; house one gap) */
  position: relative;
  padding: 0;
  padding-block-start: var(--_gap-start);
  min-width: 0;
  color: var(--ds-ink);
}
.ds-sec-l-foot-01-sitemap-footer > .ds-footer { width: 100%; }        /* placement of the composed root only */

/* the L-FOOT-03 slot: a composed .ds-wordmark-signoff (or a brand SVG) between the grid and the legal band */
.ds-sec-l-foot-01-sitemap-footer__signoff {
  margin-block-start: var(--_signoff-gap);
  min-width: 0;
}
.ds-sec-l-foot-01-sitemap-footer__signoff > * { max-width: 100%; }