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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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