/* 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/breadcrumb/breadcrumb.css */
/* ============================================================================
   breadcrumb — where am I, as a text run          (taxonomy §A · common · S0)
   Root: <nav class="ds-breadcrumb" aria-label="Breadcrumb">
   Parts: __list (ol) · __item (li) · __link (parent crumb, <a>) · __leaf (aria-current="page")
          __sep (data-sep="slash|chevron|plus" on the root) · __icon (entity icon square)
          __control (leaf as a bordered select trigger) · __edit (pencil) · __badge (LIVE / DRAFT)
          __star (favourite toggle, aria-pressed) · __ellipsis (collapsed middle)
   Variants: navattic-interactive-leaf · hsaj-breadcrumb-as-h1 · clickup-icon-square ·
             manychat-editable-leaf-badge · perplexity-collection-untitled ·
             luma-admin-single-level
   The unmarked root is the CORPUS DEFAULT: parents muted 400, leaf ink 500, one body size.
   The house page-header composes hsaj-breadcrumb-as-h1 (taxonomy JSTOV: breadcrumb-as-H1).
   Private knobs: --_size --_gap --_leaf-weight --_sep-glyph.
   ========================================================================== */

/* 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-breadcrumb svg[fill="none"] { fill: none; }

.ds-breadcrumb {
  --_size: var(--ds-text-md);
  --_gap: var(--ds-space-2);
  --_leaf-weight: var(--ds-weight-medium);
  --_sep-glyph: "/";
  min-width: 0;
  font-size: var(--_size);
  line-height: var(--ds-lh-list);
  color: var(--ds-ink-muted);
}
.ds-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--_gap);
  min-width: 0;
  flex: 0 1 auto;
}
/* data-wrap="nowrap" (inside a bar): one line, the leaf truncates; default wraps (a page header) */
.ds-breadcrumb[data-wrap="nowrap"] .ds-breadcrumb__list { flex-wrap: nowrap; }
/* parents keep their words (up to half the row); the leaf is the crumb that truncates */
.ds-breadcrumb__item:has(> .ds-breadcrumb__link) { flex-shrink: 0; max-inline-size: 100%; }
/* parent crumb: muted, regular, becomes ink on hover — never underlined at rest */
.ds-breadcrumb__link {
  color: var(--ds-ink-muted);
  font-weight: var(--ds-weight-regular);
  text-decoration: none;
  border-radius: var(--ds-radius-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-breadcrumb__link:hover,
.ds-breadcrumb__link[data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; }
/* the leaf: ink, one weight up, the only crumb that is not a link */
.ds-breadcrumb__leaf {
  color: var(--ds-ink);
  font-weight: var(--_leaf-weight);
  font-size: inherit;            /* the leaf may be an <h1>: the ROOT owns the size */
  line-height: inherit;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* separator glyph — data-sep on the root picks / › + ; aria-hidden in markup */
.ds-breadcrumb__sep {
  flex: none;
  color: var(--ds-ink-faint);          /* decorative — faint is allowed */
  font-weight: var(--ds-weight-regular);
  user-select: none;
}
.ds-breadcrumb__sep::before { content: var(--_sep-glyph); }
.ds-breadcrumb[data-sep="chevron"] { --_sep-glyph: "›"; }
.ds-breadcrumb[data-sep="plus"]    { --_sep-glyph: "+"; }
.ds-breadcrumb__sep svg { inline-size: 12px; block-size: 12px; display: block; }   /* glyph geometry, not spacing */
.ds-breadcrumb__sep:has(svg)::before { content: none; }

/* collapsed middle (mobile / deep paths): an … button that reveals the hidden crumbs */
.ds-breadcrumb__ellipsis {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--ds-icon-size-rail);
  block-size: var(--ds-icon-size-rail);
  padding: 0 var(--ds-space-1);
  border: 0;
  border-radius: var(--ds-radius-xs);
  background: transparent;
  color: var(--ds-ink-muted);
  font: inherit;
  cursor: pointer;
}
.ds-breadcrumb__ellipsis:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }

/* entity icon square (clickup): a data-hue tile that type-codes the object */
.ds-breadcrumb__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-icon-size-row);
  block-size: var(--ds-icon-size-row);
  border-radius: var(--ds-radius-xs);
  background: var(--ds-data-1-tint);
  color: var(--ds-data-1-ink);
}
.ds-breadcrumb__icon[data-hue="2"] { background: var(--ds-data-2-tint); color: var(--ds-data-2-ink); }
.ds-breadcrumb__icon[data-hue="7"] { background: var(--ds-data-7-tint); color: var(--ds-data-7-ink); }
.ds-breadcrumb__icon svg { inline-size: 12px; block-size: 12px; }

/* leaf-as-control (navattic): a bordered select trigger for saved views */
.ds-breadcrumb__control {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-block-size: var(--ds-control-h-sm);
  padding-inline: var(--ds-space-3) var(--ds-space-2);
  font: inherit;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-lip);
  cursor: pointer;
  white-space: nowrap;
  max-inline-size: 100%;
}
.ds-breadcrumb__control svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); flex: none; }
.ds-breadcrumb__control:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); }
.ds-breadcrumb__control[aria-expanded="true"] { border-color: var(--ds-border-strong); background: var(--ds-surface-selected); }
.ds-breadcrumb__control:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; }

/* inline edit affordance (manychat): a pencil after the leaf; the leaf is dotted-underlined = editable */
.ds-breadcrumb__edit {
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-icon-size-rail);
  block-size: var(--ds-icon-size-rail);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-xs);
  background: transparent;
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.ds-breadcrumb__edit svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-breadcrumb__edit:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-breadcrumb__leaf[data-editable="true"] { text-decoration: underline dotted; text-decoration-color: var(--ds-rule-strong); text-underline-offset: .25em; }
/* an unnamed leaf: the "null = italic word" house data rule, in the readable muted lane */
.ds-breadcrumb__leaf[data-state="empty"] { color: var(--ds-ink-muted); font-style: italic; font-weight: var(--ds-weight-regular); padding-inline-end: .12em; }   /* italic overhang must not clip */

/* status badge on the leaf (LIVE / DRAFT) — tint + same-hue ink, never white-on-colour */
.ds-breadcrumb__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  block-size: var(--ds-icon-size-row);      /* a badge is row-icon tall (20px), never a space step */
  padding-inline: var(--ds-space-2);
  border-radius: var(--ds-radius-xs);
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;      /* badges are the one uppercase component (R8) */
  background: var(--ds-surface-2);
  color: var(--ds-ink-2);
  border: var(--ds-border-width) solid var(--ds-rule);
}
.ds-breadcrumb__badge[data-tone="live"]  { background: var(--ds-danger-tint);  color: var(--ds-danger-ink);  border-color: transparent; }
.ds-breadcrumb__badge[data-tone="draft"] { background: var(--ds-surface-2);    color: var(--ds-ink-muted);   border-color: var(--ds-rule); }

/* favourite toggle (clickup): a ghost star; pressed = filled accent (a boolean-on spends the accent) */
.ds-breadcrumb__star {
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-icon-size-rail);
  block-size: var(--ds-icon-size-rail);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-xs);
  background: transparent;
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.ds-breadcrumb__star svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); fill: none; stroke: currentColor; }
.ds-breadcrumb__star:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-breadcrumb__star[aria-pressed="true"] { color: var(--ds-accent); }
.ds-breadcrumb__star[aria-pressed="true"] svg { fill: currentColor; }

/* -- variants ------------------------------------------------------------- */
/* hsaj: the breadcrumb IS the H1 — 26px, parent 400 muted, leaf 600, no separate title */
.ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] {
  --_size: var(--ds-text-2xl);
  --_gap: var(--ds-space-4);
  --_leaf-weight: var(--ds-heading-weight);
  --_sep-glyph: "›";
  line-height: var(--ds-lh-heading);
  letter-spacing: var(--ds-heading-tracking);
}
.ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__leaf { color: var(--ds-ink); white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }   /* an H1 wraps; it is never ellipsised */
.ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__sep { font-size: var(--ds-text-lg); color: var(--ds-ink-faint); }

/* navattic: parent plain, "/" separator with 12px gaps, leaf is a bordered view-switcher select */
.ds-breadcrumb[data-variant="navattic-interactive-leaf"] { --_gap: var(--ds-space-3); }

/* clickup: entity icon square + muted parent / ink current (600) + chevron + star */
.ds-breadcrumb[data-variant="clickup-icon-square"] { --_leaf-weight: var(--ds-weight-semibold); }

/* manychat: parent › Untitled + pencil + LIVE/DRAFT badge, in a 60px chrome bar */
.ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] { --_sep-glyph: "›"; }
.ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] .ds-breadcrumb__sep { color: var(--ds-accent); }   /* the reference paints the chevron in the accent */
.ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] .ds-breadcrumb__leaf { font-weight: var(--ds-weight-regular); }

/* perplexity: "+ Collection / Untitled" entirely in the muted lane — the crumb is an affordance */
.ds-breadcrumb[data-variant="perplexity-collection-untitled"] { --_leaf-weight: var(--ds-weight-regular); }
.ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__link,
.ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__leaf { color: var(--ds-ink-muted); }
.ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__leaf { font-style: italic; padding-inline-end: .12em; }
.ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__link::before { content: "+ "; color: var(--ds-ink-faint); }

/* luma: a single parent with a trailing chevron ("Personal ›"), 14px ink-2 */
.ds-breadcrumb[data-variant="luma-admin-single-level"] { --_sep-glyph: "›"; --_gap: var(--ds-space-1); }
.ds-breadcrumb[data-variant="luma-admin-single-level"] .ds-breadcrumb__link { color: var(--ds-ink-2); }

/* -- label lane policy: breadcrumbs are navigation, never uppercased (R8) ------- */
.ds-breadcrumb, .ds-breadcrumb__link, .ds-breadcrumb__leaf { text-transform: none; }

/* -- mobile: the leaf keeps its width; parents may collapse behind the … --------- */
@media (max-width: 720px) {
  .ds-breadcrumb[data-collapse="mobile"] .ds-breadcrumb__item[data-collapsible] { display: none; }
  .ds-breadcrumb[data-collapse="mobile"] .ds-breadcrumb__item[data-role="ellipsis"] { display: inline-flex; }
}
.ds-breadcrumb__item[data-role="ellipsis"] { display: none; }

/* ============================================================================
   J15 — "you always know where you landed". Root states (all variants below carry them):
     rest · data-state="collapsed" (deep path: workspace + … + the last two parents + leaf; the … names what it hides) ·
     data-state="switched" (the workspace crumb changed: it holds a tint until the next navigation, and __live says it)
   New parts: __initials (workspace initials inside __icon) · __live (visible announcement, role=status)
   Variants added: jstov · frame-space-icon (clickup-icon-square and hsaj-breadcrumb-as-h1 gained the J15 states)
   ========================================================================== */
.ds-breadcrumb__initials { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); line-height: 1; letter-spacing: 0; }
.ds-breadcrumb__icon:has(.ds-breadcrumb__initials) { font-size: var(--ds-text-xs); }
.ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__item[data-role="ellipsis"] { display: inline-flex; }
.ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__item[data-collapsible] { display: none; }
.ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__leaf { max-inline-size: 32ch; }
.ds-breadcrumb__live { display: none; }
.ds-breadcrumb[data-state="switched"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); }
.ds-breadcrumb[data-state="switched"] .ds-breadcrumb__item[data-role="workspace"] > .ds-breadcrumb__link { color: var(--ds-accent-ink); background: var(--ds-accent-tint); padding-inline: var(--ds-space-1); }
.ds-breadcrumb[data-state="switched"] .ds-breadcrumb__live { display: inline-flex; align-items: center; min-height: var(--ds-icon-size-row); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: 0; }
/* jstov: workspace initials square (inverse) as the first crumb, chevrons, parents muted, leaf semibold; the path
   is one line inside a bar (nowrap) and the LEAF is what truncates */
.ds-breadcrumb[data-variant="jstov"] { --_leaf-weight: var(--ds-weight-semibold); --_gap: var(--ds-space-1-5); font-size: var(--ds-text-sm); }
.ds-breadcrumb[data-variant="jstov"] .ds-breadcrumb__icon { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-radius: var(--ds-radius-xs); }
.ds-breadcrumb[data-variant="jstov"] .ds-breadcrumb__link { padding-inline: var(--ds-space-0-5); }
/* frame-space-icon: a building glyph before the space, › chevrons, the leaf bold and followed by nothing; tight 12 px
   run in the card header [mobbin-frame-search 05] */
.ds-breadcrumb[data-variant="frame-space-icon"] { --_size: var(--ds-text-xs); --_gap: var(--ds-space-1-5); --_leaf-weight: var(--ds-weight-semibold); }
.ds-breadcrumb[data-variant="frame-space-icon"] .ds-breadcrumb__icon { background: transparent; color: var(--ds-ink-muted); }
/* hsaj in a deep path: parents shrink to the body size so the H1 leaf stays the headline */
.ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__icon { display: none; }
.ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"][data-state="collapsed"] .ds-breadcrumb__link { font-size: var(--ds-text-md); }


/* 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/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/citation-sources/citation-sources.css */
/* ============================================================================
   citation-sources — Citations + source cards                  (taxonomy §I · common · S0)
   Two roots, one component (the enum-chip / enum-chip-row precedent):
     .ds-citation-sources        the "Sources" section that lands BEFORE the answer (J2 rule 8): header + a grid of
                                 source cards + one overflow tile; or, with data-kind="row", a one-line favicon row
                                 + count for receipts and headers.
     .ds-citation-sources-cite   the inline numbered citation pill inside prose — an <a href="#src-n"> whose hover /
                                 focus card quotes the sentence it supports (house: every claim → source link is
                                 checkable without leaving the prose).
   Parts (section): __header · __icon · __title · __count · __grid (<ol>) · __card[data-kind="featured|compact|overflow"]
     · __link (<a> or <button>, the whole card) · __favicon[data-hue="1…8"] (20 disc; 40 in perplexity featured) ·
     __favicon-row (6 spaced discs) · __name (source title, clamps to 2 lines) · __meta · __domain · __index · __more ·
     __empty (dashed footprint) · __skeleton (loading twin)
   Parts (cite): __num · __card (the hover card: __quote · __source)
   Axes:  data-mark="mono|colour"   chroma-leakage policy for third-party marks: mono masks them to muted ink
                                    (house default — favicons are the only non-brand colour on the page), colour lets
                                    them through (perplexity)
          data-kind="grid|row"      section layout · one-line favicon row + count
          data-fit="row"            grid kind: every card + the overflow tile share ONE row (equal columns) above 560 px,
                                    whatever the column width — the deterministic answer to "3 cards + More in one row"
                                    (additive 2026-09-25, DESK-327). Without it the row count is arithmetic:
                                    N cards fit when N·--_min + (N−1)·8 ≤ the column (4-up at 610 needs --_min ≤ 146).
                                    Set --_min ON THE ROOT or the __grid — the root declares it, so an ancestor's value
                                    never reaches the grid.
          data-state="loading|empty"
   Variants: jstov (unmarked — uniform tint cards + one overflow tile; 20 px pill at ≥ 4.5:1; hover card) ·
     perplexity-provenance-first (featured / compact / overflow trio, 22 px pill, colour marks) ·
     copilot-numbered-reference-list (one column: index-disc provenance pill over the title; count + collapse __toggle) ·
     cohere-highlighted-spans (highlighted claim spans instead of numerals; "Citations:" footer of square domain chips)
   Extra parts: __toggle (copilot collapse chevron) · data-state="collapsed" hides the list, keeps header + count
   Private knobs: --_fill --_edge --_radius --_pad --_min --_disc --_pill
   Tokens only (tools/lint-tokens.mjs).
   ========================================================================== */

.ds-citation-sources svg[fill="none"], .ds-citation-sources-cite svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   SECTION
   ========================================================================= */
.ds-citation-sources {
  --_fill:   var(--ds-surface-2);               /* perplexity: tint-1 cards, no border                 */
  --_edge:   transparent;
  --_radius: var(--ds-radius-md);
  --_pad:    var(--ds-space-3);
  --_min:    160px;                              /* uniform card min width — four across a 720 column   */
  --_disc:   var(--ds-space-5);                  /* 20 favicon disc (perplexity compact 22 · featured 40) */
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  min-width: 0;
  max-width: 100%;
  color: var(--ds-ink);
}

/* -- header: 20 px outline icon + "Sources" + count in the mono lane ---------------------------- */
.ds-citation-sources__header { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-space-7); }
.ds-citation-sources__icon { flex: none; inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); color: var(--ds-ink-2); }
.ds-citation-sources__title { margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-heading); color: var(--ds-ink); }
.ds-citation-sources__count { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; color: var(--ds-ink-muted); }

/* -- grid: uniform cards + one overflow tile ----------------------------------------------------- */
.ds-citation-sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr));
  gap: var(--ds-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ds-citation-sources__card { min-width: 0; display: flex; }
.ds-citation-sources__link {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  inline-size: 100%;
  min-width: 0;
  min-block-size: calc(var(--ds-space-7) * 3);   /* 84 — perplexity's 97 at 1.25× ≈ 78 CSS               */
  padding: var(--_pad);
  border: var(--ds-border-width) solid var(--_edge);
  border-radius: var(--_radius);
  background: var(--_fill);
  color: var(--ds-ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-citation-sources__link:hover, .ds-citation-sources__link[data-state="hover"] { background: var(--ds-surface-3); color: var(--ds-ink); }
.ds-citation-sources__link:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-citation-sources__link[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ds-border-selected), var(--ds-card-shadow); }   /* the card the open cite points at */

.ds-citation-sources__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink);
}
.ds-citation-sources__meta { display: flex; align-items: center; gap: var(--ds-space-1-5); min-width: 0; margin-block-start: auto; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.ds-citation-sources__domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-citation-sources__index { flex: none; white-space: nowrap; font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; color: var(--ds-ink-2); }
.ds-citation-sources__index::before { content: "· "; color: var(--ds-ink-muted); }

/* -- favicon: a disc with the third-party mark; chroma policy on the root ------------------------ */
.ds-citation-sources__favicon {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--_disc);
  block-size: var(--_disc);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  box-shadow: inset 0 0 0 var(--ds-border-width) var(--ds-rule), var(--ds-card-shadow);
  color: var(--ds-ink-muted);
  overflow: hidden;
}
.ds-citation-sources__favicon > svg, .ds-citation-sources__favicon > img { inline-size: 60%; block-size: 60%; object-fit: contain; }
.ds-citation-sources__favicon[data-hue="1"] { color: var(--ds-data-1); }
.ds-citation-sources__favicon[data-hue="2"] { color: var(--ds-data-2); }
.ds-citation-sources__favicon[data-hue="3"] { color: var(--ds-data-3); }
.ds-citation-sources__favicon[data-hue="4"] { color: var(--ds-data-4); }
.ds-citation-sources__favicon[data-hue="5"] { color: var(--ds-data-5); }
.ds-citation-sources__favicon[data-hue="6"] { color: var(--ds-data-6); }
.ds-citation-sources__favicon[data-hue="7"] { color: var(--ds-data-7); }
.ds-citation-sources__favicon[data-hue="8"] { color: var(--ds-data-8); }
/* mono (house default): every third-party mark is masked to muted ink; images are desaturated */
.ds-citation-sources:not([data-mark="colour"]) .ds-citation-sources__favicon { color: var(--ds-ink-muted); }
.ds-citation-sources:not([data-mark="colour"]) .ds-citation-sources__favicon > img { filter: grayscale(1); opacity: .8; }
.ds-citation-sources__favicon-row { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }
.ds-citation-sources__more { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin-block-start: auto; }
.ds-citation-sources__link:hover .ds-citation-sources__more { color: var(--ds-ink); }

/* -- kinds ---------------------------------------------------------------------------------------- */
.ds-citation-sources[data-kind="row"] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.ds-citation-sources[data-kind="row"] .ds-citation-sources__favicon-row { gap: 0; }
.ds-citation-sources[data-kind="row"] .ds-citation-sources__favicon { margin-inline-end: calc(-1 * var(--ds-space-1)); box-shadow: 0 0 0 2px var(--ds-ground), inset 0 0 0 var(--ds-border-width) var(--ds-rule), var(--ds-card-shadow); }
.ds-citation-sources[data-kind="row"] .ds-citation-sources__count { font-family: inherit; font-size: var(--ds-text-sm); color: var(--ds-ink-2); padding-inline-start: var(--ds-space-2); }

/* -- fit: one row (data-fit="row") -------------------------------------------------------------------
   Cards flow into equal columns on a single row; names clamp to 2 lines and domains ellipsise, so a 146 px card
   still reads. Under 560 px the grid returns to auto-fit (a 4-up row would be ~80 px cards on a phone). Keep a
   fit-row to ≤ 4 cells (3 sources + the overflow tile, or featured ×2 + compact + overflow). */
.ds-citation-sources[data-fit="row"] .ds-citation-sources__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ds-citation-sources[data-fit="row"] .ds-citation-sources__favicon-row { flex-wrap: nowrap; overflow: hidden; }
.ds-citation-sources[data-fit="row"] .ds-citation-sources__favicon-row > :nth-child(n+5) { display: none; }   /* 4 discs fit a 146 px tile; a 5th would be cut */
@media (max-width: 560px) {
  .ds-citation-sources[data-fit="row"] .ds-citation-sources__grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); }
}

/* -- loading / empty ------------------------------------------------------------------------------ */
.ds-citation-sources[data-state="loading"] .ds-citation-sources__link { pointer-events: none; }
.ds-citation-sources__skeleton { display: block; block-size: var(--ds-text-sm); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); }
.ds-citation-sources__skeleton[data-w="short"] { inline-size: 55%; }
.ds-citation-sources__empty {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-block-size: calc(var(--ds-space-7) * 2);
  padding: var(--_pad);
  border: var(--ds-border-width) dashed var(--ds-border);
  border-radius: var(--_radius);
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-sm);
}
.ds-citation-sources__empty > svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }

/* =========================================================================
   INLINE CITE — <a class="ds-citation-sources-cite" href="#src-1">
   ========================================================================= */
.ds-citation-sources-cite {
  --_pill: var(--ds-space-5);                    /* 20 (house) · 22 perplexity                            */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  inline-size: var(--_pill);
  block-size: var(--_pill);
  margin-inline: var(--ds-space-0-5) 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-3);
  color: var(--ds-ink-2);                        /* ≥ 4.5:1 — perplexity's muted numeral at 3.5:1 is the weakness */
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-citation-sources-cite:hover, .ds-citation-sources-cite[data-state="open"] { background: var(--ds-surface-3); color: var(--ds-ink); }
.ds-citation-sources-cite:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-citation-sources-cite__num { display: inline-block; }

/* the hover card: quoted sentence + source line, on the raised neutral layer (R6), float shadow */
.ds-citation-sources-cite__card {
  position: absolute;
  inset-block-end: calc(100% + var(--ds-space-2));
  inset-inline-start: 0;
  z-index: var(--ds-z-popover);
  display: none;
  flex-direction: column;
  gap: var(--ds-space-2);
  inline-size: max-content;
  max-inline-size: min(320px, calc(100vw - var(--ds-space-8)));
  padding: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  border: var(--ds-border-width) solid var(--ds-rule);
  box-shadow: var(--ds-shadow-float);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-body);
  text-align: start;
  white-space: normal;
}
.ds-citation-sources-cite[data-placement="end"] .ds-citation-sources-cite__card { inset-inline-start: auto; inset-inline-end: 0; }
.ds-citation-sources-cite:hover .ds-citation-sources-cite__card,
.ds-citation-sources-cite:focus-visible .ds-citation-sources-cite__card,
.ds-citation-sources-cite[data-state="open"] .ds-citation-sources-cite__card { display: flex; }
.ds-citation-sources-cite__quote { margin: 0; padding-inline-start: var(--ds-space-2-5); border-inline-start: 2px solid var(--ds-accent-2); color: var(--ds-ink-2); font-family: var(--ds-font-body-alt); font-style: italic; }
.ds-citation-sources-cite__source { display: flex; align-items: center; gap: var(--ds-space-1-5); min-width: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.ds-citation-sources-cite__source .ds-citation-sources__favicon { --_disc: var(--ds-space-4); color: var(--ds-ink-muted); }
.ds-citation-sources-cite__source strong { color: var(--ds-ink); font-weight: var(--ds-weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phone: the card docks to the bottom of the viewport (a 320 px card anchored to a pill would leave a 390 px screen) */
@media (max-width: 560px) {
  .ds-citation-sources-cite__card { position: fixed; inset-inline: var(--ds-space-4); inset-block: auto var(--ds-space-4); inline-size: auto; max-inline-size: none; }
}

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

/* perplexity-provenance-first — Sources before Answer; card trio at three widths (featured 2-col: 40 disc + title + "domain · 1"
   on one line · compact: 2-line title over disc + domain · overflow: 6 spaced favicons + "View 18 more"); colour marks;
   22 px citation pill with a muted numeral [perplexity-asking-a-question-05-09] */
.ds-citation-sources[data-variant="perplexity-provenance-first"] { --_min: 150px; --_disc: 22px; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] { grid-column: span 2; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__link { flex-direction: row; align-items: center; gap: var(--ds-space-3); }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__favicon { --_disc: var(--ds-space-10); }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__name { -webkit-line-clamp: 1; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__name { flex: 1 1 auto; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__meta { flex: 0 1 auto; max-inline-size: 45%; margin-block-start: 0; margin-inline-start: auto; font-size: var(--ds-text-sm); }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__link { flex-direction: column-reverse; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__meta { margin-block-start: 0; }
.ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__favicon { --_disc: var(--ds-space-4); }
.ds-citation-sources-cite[data-variant="perplexity-provenance-first"] { --_pill: 22px; background: var(--ds-surface-3); color: var(--ds-ink-muted); font-family: var(--ds-font-sans); }
@media (max-width: 560px) {
  .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] { grid-column: auto; }
}

/* copilot-numbered-reference-list — a "References" heading with the count + a collapse chevron at the far end, then ONE
   column of numbered rows: a provenance pill (tinted index disc · favicon · domain) over the page title in body text;
   no card fill — the rows sit on the page. The inline cite is the same tinted index disc. [mobbin-copilot-citation-sources] */
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] { --_fill: transparent; --_pad: 0px; --_disc: var(--ds-space-4); gap: var(--ds-space-4); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__header { min-height: var(--ds-control-h-sm); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-medium); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__count { margin-inline-start: auto; font-family: inherit; font-size: var(--ds-text-md); color: var(--ds-ink-2); }
.ds-citation-sources__toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ds-control-h-sm);
  block-size: var(--ds-control-h-sm);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-ink-2);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-citation-sources__toggle svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); transition: transform var(--ds-dur-base) var(--ds-ease-standard); }
.ds-citation-sources__toggle:hover, .ds-citation-sources__toggle[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-citation-sources__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); }
.ds-citation-sources[data-state="collapsed"] .ds-citation-sources__grid { display: none; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link { min-block-size: 0; gap: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-sm); background: transparent; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__meta {
  align-self: flex-start;
  max-inline-size: 100%;
  margin-block-start: 0;
  min-block-size: var(--ds-space-7);
  padding-block: var(--ds-space-0-5);
  padding-inline: var(--ds-space-1) var(--ds-space-2-5);
  border: var(--ds-border-width) solid var(--ds-rule);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__index {
  order: -1;
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--ds-space-5);
  block-size: var(--ds-space-5);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent-tint);
  color: var(--ds-accent-ink);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
}
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__index::before { content: none; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__favicon { box-shadow: none; background: transparent; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__name { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) { background: transparent; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) .ds-citation-sources__meta { border-color: var(--ds-border-strong); background: var(--ds-surface-2); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) .ds-citation-sources__name { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--ds-rule-strong); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[data-state="focus"],
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__toggle[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[aria-current="true"] { box-shadow: none; }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[aria-current="true"] .ds-citation-sources__meta { border-color: var(--ds-selected-line); background: var(--ds-selected-bg); color: var(--ds-selected-ink); }
.ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__skeleton[data-w="pill"] { inline-size: 9em; block-size: var(--ds-space-7); border-radius: var(--ds-radius-pill); }
.ds-citation-sources-cite[data-variant="copilot-numbered-reference-list"] { --_pill: 18px; background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-family: var(--ds-font-sans); }
.ds-citation-sources-cite[data-variant="copilot-numbered-reference-list"]:is(:hover, [data-state="open"]) { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }

/* cohere-highlighted-spans — no numerals at all: every cited claim is a tinted HIGHLIGHT over the words themselves
   (the span is the link; hover / focus opens the same quote card), and the section is a one-line footer after the
   answer — a muted "Citations:" label flowing straight into small square-cornered domain chips (tint, 4 px radius,
   16 px square favicon) and a "+8" overflow chip. Sources follow the answer here — Cohere's choice, not the house
   order. [mobbin-cohere-citation-sources] */
.ds-citation-sources[data-variant="cohere-highlighted-spans"] { --_disc: var(--ds-space-4); display: block; line-height: var(--ds-lh-list); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__header { display: inline-flex; min-height: var(--ds-control-h-sm); margin-inline-end: var(--ds-space-2); vertical-align: middle; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__count { font-size: var(--ds-text-xs); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__grid { display: inline; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__card { display: inline-flex; max-inline-size: 100%; margin-block: var(--ds-space-1); margin-inline-end: var(--ds-space-2); vertical-align: middle; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-1-5);
  inline-size: auto;
  min-block-size: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-2-5);
  border: 0;
  border-radius: var(--ds-radius-xs);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
}
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) { color: var(--ds-ink); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link[aria-current="true"] { box-shadow: none; background: var(--ds-selected-bg); color: var(--ds-selected-ink); }   /* current = the selected fill, so it never reads as the focus ring */
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__favicon { border-radius: var(--ds-radius-xs); box-shadow: none; background: var(--ds-surface); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__favicon > svg { inline-size: 75%; block-size: 75%; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the chip shows the domain; the title stays for screen readers */
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__meta { margin-block-start: 0; font-size: inherit; color: inherit; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__index { display: none; }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__more { margin: 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-2); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__skeleton { display: inline-block; inline-size: 7em; block-size: var(--ds-text-xs); }
.ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__empty { display: inline-flex; min-block-size: var(--ds-control-h-sm); padding-block: 0; vertical-align: middle; }
.ds-citation-sources-cite[data-variant="cohere-highlighted-spans"] {
  display: inline;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  padding: .1em .15em;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-3);
  color: inherit;
  font: inherit;
  line-height: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ds-citation-sources-cite[data-variant="cohere-highlighted-spans"]:is(:hover, [data-state="open"]) { background: var(--ds-accent-2-tint); color: var(--ds-accent-2-ink); }
.ds-citation-sources-cite[data-variant="cohere-highlighted-spans"][data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }


/* components/cta-block/cta-block.css */
/* ============================================================================
   components/cta-block/cta-block.css — Closing CTA                  taxonomy-components.md §K · common · S0
   Root:  <section class="ds-cta-block" data-variant="…" [data-mode="dark"]> — the page's last ask.
   Composes (root class only): chapter-header (data-align="center" data-size="lg" — the eyebrow + mirrored
     headline + support), button-primary (THE view's one filled control), button-secondary, split-button
     (heron-label-divider-arrow, data-fill="primary"), text-link.
   Parts: __inner (centred stack) · __actions · __proof (a composed .ds-social-proof-line) · __cell (the frame band:
          rules + rails) · __coord[data-corner] (mono grid coordinates, decorative) · __command (+ __select ·
          __select-glyph · __cmd · __copy · __copy-done — the command bar; DEPRECATED, compose .ds-code-snippet
          [data-variant="vercel-command-bar"] instead) · __field (intercom's dot grid)
          · __tile[data-hue] (scattered image slots) · __card (+ __card-line · __em · __card-proof · __stars · __card-sep)
   Layouts (the ground change is the axis): band (plain ground) · cell (hairline frame — the frame IS the band, house)
     · field (dot grid + tiles) · card (bordered conversion card, sequence)
   Variants (data-variant): jstov (unmarked root) · vercel-command-bar-cta · intercom-mirrored-hero-on-ambient-field
     · attio-mirrored-dark (a data-mode="dark" island) · fibery-question-form-heading-plus-pair · heron-coordinate-annotated
     · sequence-footer-conversion-card
   States: rest · the buttons' own states · __copy: hover / focus-visible / data-state="copied" · aria-busy (skeleton
     through the composed chapter-header)
   Principle: repeat the hero's headline formula and the SAME two button labels, centred, at the end.
   Tokens only. Private knobs: --_measure --_pad-y --_dot-pitch --_x --_y --_w --_ratio --_card-w
   ========================================================================== */

.ds-cta-block {
  --_pad-y:     var(--ds-space-16);                /* the band's own breathing room (attio ≈ 160, heron 687-tall cell) */
  --_dot-pitch: 96px;                              /* intercom: sparse accent dot grid */
  --_card-w:    340px;
  position: relative;
  padding-block: var(--ds-section-gap);
  color: var(--ds-ink);
  text-align: center;
  min-width: 0;
}
.ds-cta-block svg[fill="none"] { fill: none; stroke: currentColor; }
.ds-cta-block__inner {
  position: relative;
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-6);
  min-width: 0;
}
.ds-cta-block__inner > * { min-width: 0; max-width: 100%; }
.ds-cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-4);
  min-width: 0;
}
.ds-cta-block__actions > * { max-width: 100%; }
/* the receipt line: figures at full strength, mono tabular */
.ds-cta-block__proof { margin: 0; margin-block-start: var(--ds-space-2); }   /* placement only — a composed .ds-social-proof-line (2026-09-20) */

/* ---------------------------------------------------------------------------
   1. THE CELL — heron's coordinate-annotated frame; the FRAME is the band, no ground change (house)
   ------------------------------------------------------------------------- */
.ds-cta-block__cell {
  position: relative;
  width: calc(100% - 2 * var(--ds-gutter-page));
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-block: var(--_pad-y);
  border: var(--ds-border-width) solid var(--ds-rule);
}
.ds-cta-block__cell > .ds-cta-block__inner { max-width: none; }
.ds-cta-block__coord {
  position: absolute;
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ds-ink-faint);                      /* decorative annotation only (aria-hidden) */
  pointer-events: none;
  user-select: none;
}
.ds-cta-block__coord[data-corner="tl"] { inset-block-start: var(--ds-space-2); inset-inline-start: var(--ds-space-2); }
.ds-cta-block__coord[data-corner="tr"] { inset-block-start: var(--ds-space-2); inset-inline-end: var(--ds-space-2); }
.ds-cta-block__coord[data-corner="bl"] { inset-block-end: var(--ds-space-2); inset-inline-start: var(--ds-space-2); }
.ds-cta-block__coord[data-corner="br"] { inset-block-end: var(--ds-space-2); inset-inline-end: var(--ds-space-2); }
/* heron: the drawn grid shows through — one vertical hairline at each third of the cell */
.ds-cta-block[data-variant="heron-coordinate-annotated"] .ds-cta-block__cell {
  --_pad-y: var(--ds-space-20);
  background-image: linear-gradient(to right, var(--ds-rule-soft) var(--ds-border-width), transparent var(--ds-border-width));
  background-size: calc(100% / 3) 100%;
}

/* ---------------------------------------------------------------------------
   2. THE COMMAND BAR — vercel: [selector ▾] | $ command | copy, paired with the filled pill
   DEPRECATED (2026-09-20): code-snippet owns this form — compose
   `.ds-code-snippet[data-variant="vercel-command-bar"]` inside __actions (the demo does). The
   __command / __select / __select-glyph / __cmd / __copy / __copy-done rules below stay for ONE
   release so existing markup keeps rendering, then go.
   ------------------------------------------------------------------------- */
.ds-cta-block__command {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  min-height: var(--ds-control-h-lg);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-ink);
  overflow: hidden;
  text-align: start;
}
.ds-cta-block__select {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1-5);
  padding-inline: var(--ds-space-4) var(--ds-space-3);
  border: 0;
  border-inline-end: var(--ds-border-width) solid var(--ds-border);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink-2);
  font: inherit;
  font-size: var(--ds-text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-cta-block__select:hover, .ds-cta-block__select[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-cta-block__select:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); }
.ds-cta-block__select-glyph, .ds-cta-block__select > svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); stroke-width: var(--ds-icon-stroke); color: var(--ds-ink-muted); flex: none; }
.ds-cta-block__cmd {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding-inline: var(--ds-space-4) var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-md);
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ds-cta-block__cmd::before { content: "$"; color: var(--ds-ink-muted); }
.ds-cta-block__copy {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--ds-control-h-lg);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink-muted);
  cursor: pointer;
  flex: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-cta-block__copy svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-cta-block__copy:hover, .ds-cta-block__copy[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-cta-block__copy:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); }
.ds-cta-block__copy-done { display: none; }
.ds-cta-block__copy[data-state="copied"] { color: var(--ds-success-ink); }
.ds-cta-block__copy[data-state="copied"] > svg:first-of-type { display: none; }
.ds-cta-block__copy[data-state="copied"] .ds-cta-block__copy-done { display: block; }
.ds-cta-block__copy:disabled { color: var(--ds-ink-faint); cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   3. THE FIELD — intercom: sparse accent dot grid + scattered image tiles that bleed past the container
   ------------------------------------------------------------------------- */
.ds-cta-block__field {
  position: relative;
  width: 100%;
  padding-block: var(--_pad-y);
  overflow: hidden;                                /* tiles may cross the container edge, never the viewport */
  background-image: radial-gradient(circle at center, var(--ds-accent) 1.5px, transparent 2px);
  background-size: var(--_dot-pitch) var(--_dot-pitch);
  background-position: center;
}
.ds-cta-block__field > .ds-cta-block__inner { position: relative; z-index: 1; }
.ds-cta-block__tile {
  --_x: 0%; --_y: 0%; --_w: 120px; --_ratio: 1;    /* per instance: style="--_x: 12%; --_y: 8%; --_w: 120px; --_ratio: 3 / 4" */
  position: absolute;
  inset-inline-start: var(--_x);
  inset-block-start: var(--_y);
  inline-size: var(--_w);
  aspect-ratio: var(--_ratio);
  background: var(--ds-illustration-ground);       /* an image slot: <img> inside covers it */
  border: var(--ds-border-width) solid var(--ds-rule);
  display: none;                                   /* phones: the field keeps its dots, drops the tiles */
  overflow: hidden;
}
.ds-cta-block__tile[data-hue="1"] { background: var(--ds-data-1-tint); }
.ds-cta-block__tile[data-hue="3"] { background: var(--ds-data-3-tint); }
.ds-cta-block__tile[data-hue="6"] { background: var(--ds-data-6-tint); }
.ds-cta-block__tile[data-hue="7"] { background: var(--ds-data-7-tint); }
.ds-cta-block__tile > img { width: 100%; height: 100%; object-fit: cover; }
.ds-cta-block[data-variant="intercom-mirrored-hero-on-ambient-field"] { --_pad-y: var(--ds-space-24); padding-block: 0; }

/* ---------------------------------------------------------------------------
   4. THE CARD — sequence: bordered conversion card pinned in a footer; two-tone line, full-width pill, proof row
   ------------------------------------------------------------------------- */
.ds-cta-block[data-variant="sequence-footer-conversion-card"] { padding-block: 0; text-align: start; }
.ds-cta-block__card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  width: min(100%, var(--_card-w));
  padding: var(--ds-card-pad);
  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);
  min-width: 0;
}
.ds-cta-block__card-line { margin: 0; font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--ds-ink); }
.ds-cta-block__em { color: var(--ds-accent-ink); font-weight: var(--ds-weight-medium); }   /* the rationed signature span (a gradient in the reference — skin) */
.ds-cta-block__card > .ds-button-primary { --_w: 100%; }
.ds-cta-block__card-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-cta-block__stars { color: var(--ds-data-6); letter-spacing: .05em; font-size: var(--ds-text-xs); }
.ds-cta-block__card-sep { inline-size: var(--ds-border-width); block-size: 1em; background: var(--ds-rule-strong); }

/* ---------------------------------------------------------------------------
   5. VARIANTS on the plain band
   ------------------------------------------------------------------------- */
/* attio — dark island: the ground change IS the band; identical words to the hero; the pair inverted by the mode remap */
.ds-cta-block[data-variant="attio-mirrored-dark"] { --_pad-y: var(--ds-space-20); padding-block: var(--_pad-y); background: var(--ds-ground); color: var(--ds-ink); }
/* fibery — plain ground, bold question, no band */
.ds-cta-block[data-variant="fibery-question-form-heading-plus-pair"] .ds-chapter-header { --_title-weight: var(--ds-weight-bold); --_measure: 30ch; }
/* vercel — centred H2 + [filled pill] [command bar]; the pair sits in one row */
.ds-cta-block[data-variant="vercel-command-bar-cta"] .ds-cta-block__actions { gap: var(--ds-space-4); }

/* ---------------------------------------------------------------------------
   6. BREAKPOINTS — 768: tiles appear; 1024: coordinates step in
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ds-cta-block__tile { display: block; }
}
@media (min-width: 1024px) {
  .ds-cta-block__coord[data-corner="tl"], .ds-cta-block__coord[data-corner="bl"] { inset-inline-start: var(--ds-space-3); }
  .ds-cta-block__coord[data-corner="tr"], .ds-cta-block__coord[data-corner="br"] { inset-inline-end: var(--ds-space-3); }
}
@media (max-width: 480px) {
  .ds-cta-block__command { inline-size: 100%; }                 /* deprecated — see §2 */
  .ds-cta-block__select { padding-inline: var(--ds-space-3); }  /* deprecated — see §2 */
  .ds-cta-block[data-variant="vercel-command-bar-cta"] .ds-cta-block__actions > .ds-code-snippet { inline-size: 100%; }   /* placement: the composed bar fills the row on phones */
}


/* 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/social-proof-line/social-proof-line.css */
/* ============================================================================
   social-proof-line — Social proof                                (taxonomy §J · common · S0)
   Root: .ds-social-proof-line (<p>) — a muted sentence in which ONLY the figure + its noun are at full strength;
         the cheapest proof there is (L-PROOF-02). Sits 20 px under a CTA pair (hero, cta-block), in a nav utility
         cluster, or as the proof row of a card.
   Parts: __figure (mono tabular figure + noun, ink, medium) · __sep (decorative middot, faint) ·
          __stars (five ★ in the rating hue; aria-label carries the score) · __brand (the muted subject of a two-tone
          claim) · __icon (16 px glyph before a count — github star) · __rule (a vertical hairline between two receipts) ·
          composed .ds-text-link for receipts ("G2 ›", "Take product tour ›") · composed .ds-avatar-stack for "joined by"
   Axes:  data-on-media   over an image: text --ds-ink-on-overlay (light in both modes), figure at full white
          data-size="sm|md"  12 / 14 (md for the card proof row)
   Variants: jstov (unmarked root — Vercel's grammar, Synara's placement; the figure is MONO tabular; never five
          unlabelled stars) · synara-number-in-sentence · vercel-two-tone-claim · sequence-stars-plus-receipt-link ·
          synara-github-star-count-in-nav · origin-testimonial-band-in-promo (stars + one-line quote + first name)
   States: aria-busy (the figure is a skeleton block; the sentence stays) · data-state="empty" = do not render —
          there is no honest empty proof line.
   Private knobs: --_gap --_ink --_figure-ink --_star
   ========================================================================== */

.ds-social-proof-line svg[fill="none"] { fill: none; stroke: currentColor; }

.ds-social-proof-line {
  --_gap:        var(--ds-space-2);
  --_ink:        var(--ds-ink-muted);
  --_figure-ink: var(--ds-ink);
  --_star:       var(--ds-data-6);               /* the rating hue — one hue for stars everywhere            */
  display: block;                                /* a sentence: inline flow, so word spaces stay word spaces  */
  margin: 0;
  min-width: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-body);
  color: var(--_ink);
  text-decoration: none;
  text-wrap: pretty;
}
/* a ROW of receipts / an avatar stack + sentence: flex with a gap (the sequence proof row, "joined by") */
.ds-social-proof-line[data-layout="row"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--_gap); }
.ds-social-proof-line[data-size="md"] { font-size: var(--ds-text-md); }
.ds-social-proof-line[data-on-media] { --_ink: color-mix(in srgb, var(--ds-ink-on-overlay) 72%, transparent); --_figure-ink: var(--ds-ink-on-overlay); }

.ds-social-proof-line__figure { color: var(--_figure-ink); font-family: var(--ds-font-mono); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ds-social-proof-line__sep    { color: var(--ds-ink-faint); margin-inline: var(--ds-space-1); }   /* decorative only */
.ds-social-proof-line__brand  { color: var(--ds-ink-muted); }
.ds-social-proof-line__stars  { display: inline-block; color: var(--_star); letter-spacing: .06em; font-size: .92em; white-space: nowrap; }
.ds-social-proof-line__icon   { display: inline-block; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); vertical-align: -.2em; margin-inline-end: var(--ds-space-1); }
.ds-social-proof-line__icon svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-social-proof-line__rule   { display: inline-block; inline-size: var(--ds-border-width); block-size: 1.1em; vertical-align: -.2em; margin-inline: var(--ds-space-1); background: var(--ds-rule-strong); }
.ds-social-proof-line[data-layout="row"] .ds-social-proof-line__rule { margin-inline: 0; }
.ds-social-proof-line__quote  { color: var(--ds-ink); }
.ds-social-proof-line__cite   { font-style: normal; }
.ds-social-proof-line > .ds-avatar-stack { flex: none; }

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

/* synara: "Already downloaded by 17,027 people" — sans figure + noun at 500, sentence at 60 % over the image */
.ds-social-proof-line[data-variant="synara-number-in-sentence"] .ds-social-proof-line__figure { font-family: var(--ds-font-sans); }

/* vercel: "[Brand] powers [number] [thing] on [Host]." — the sentence in ink-2, the BRAND muted so the metric is the subject */
.ds-social-proof-line[data-variant="vercel-two-tone-claim"] { --_ink: var(--ds-ink-2); font-size: var(--ds-text-md); }
.ds-social-proof-line[data-variant="vercel-two-tone-claim"] .ds-social-proof-line__figure { font-family: var(--ds-font-sans); font-weight: var(--ds-weight-medium); }

/* sequence: [G2 ›] [★★★★★] | [Take product tour ›] — receipts in the link hue, stars amber, a 1 px pipe between;
   their stars carry no figure (weakness kept as the variant; the house adds "4.8 · 212 reviews") */
.ds-social-proof-line[data-variant="sequence-stars-plus-receipt-link"] { --_gap: var(--ds-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--_gap); font-size: var(--ds-text-sm); }
.ds-social-proof-line[data-variant="sequence-stars-plus-receipt-link"] .ds-social-proof-line__rule { margin-inline: 0; }
.ds-social-proof-line[data-variant="sequence-stars-plus-receipt-link"] .ds-text-link { color: var(--ds-ink-link); }

/* synara nav: GitHub glyph + "1.8K" in the utility cluster — a count as live proof, no sentence */
.ds-social-proof-line[data-variant="synara-github-star-count-in-nav"] { --_ink: var(--ds-ink-2); --_figure-ink: var(--ds-ink-2); display: inline-flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-text-md); }
.ds-social-proof-line[data-variant="synara-github-star-count-in-nav"] .ds-social-proof-line__figure { font-weight: var(--ds-weight-medium); }

/* origin: five stars over a first-person one-line quote and a first name + initial — the proof line of the promo band */
.ds-social-proof-line[data-variant="origin-testimonial-band-in-promo"] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-1-5); font-size: var(--ds-text-md); --_ink: currentColor; }
.ds-social-proof-line[data-variant="origin-testimonial-band-in-promo"] .ds-social-proof-line__stars { font-size: var(--ds-text-lg); letter-spacing: .08em; }
.ds-social-proof-line[data-variant="origin-testimonial-band-in-promo"] .ds-social-proof-line__quote { color: inherit; max-width: 44ch; }   /* text ink follows the band's hue */
.ds-social-proof-line[data-variant="origin-testimonial-band-in-promo"] .ds-social-proof-line__cite { font-size: var(--ds-text-sm); }

/* =========================================================================
   STATES (last)
   ========================================================================= */
.ds-social-proof-line[aria-busy="true"] .ds-social-proof-line__figure { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); min-inline-size: 6ch; }
.ds-social-proof-line[aria-busy="true"] .ds-social-proof-line__stars { color: var(--ds-skeleton); }
.ds-social-proof-line[data-state="empty"] { display: none; }               /* no figure = no line; never "trusted by many" */


/* 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/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-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%; }