/* 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/text-input/text-input.css */
/* ============================================================================
   components/text-input/text-input.css — Text input (core · S1)
   Root `.ds-text-input` is the BOX (border, radius, height); the native
   <input class="ds-text-input__control"> inside is chromeless. Variants on
   data-variant; states via native pseudo-classes read through :has() on the
   root, with a fallback ring on the bare control for engines without :has().
   Tokens only (tools/lint-tokens.mjs). Private knobs: --_h --_pad-x --_radius
   --_w --_align --_icon.
   ========================================================================== */

.ds-text-input {
  --_h:      var(--ds-size-h);           /* 36 · 32 sm · 44 lg · ×density        */
  --_pad-x:  var(--ds-size-pad-x);       /* 12 · 10 sm · 16 lg                    */
  --_ti-text: var(--ds-size-text);       /* 14 · 13 sm · 16 lg (the size hook's text) */
  --_radius: var(--ds-radius-sm);        /* controls step (6 × radius-scale)      */
  --_w:      auto;                       /* instance width: style="--_w: 312px"  */
  --_align:  start;                      /* value alignment (descript = end)     */
  --_icon:   var(--ds-icon-size);        /* 16; origin uses the 20 row size      */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  width: var(--_w);
  max-width: 100%;
  min-width: 0;
  min-height: var(--_h);
  padding-inline: var(--_pad-x);
  font-size: var(--_ti-text);
  line-height: var(--ds-lh-list);
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--_radius);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard),
              background-color var(--ds-dur-fast) var(--ds-ease-standard),
              box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-text-input:hover { border-color: var(--ds-border-strong); }

/* ---- the native control: chromeless, fills the box ------------------------ */
.ds-text-input__control {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: var(--_align);
  text-overflow: ellipsis;
}
.ds-text-input__control::placeholder { color: var(--ds-ink-muted); opacity: 1; }   /* readable, ≥4.5:1 (R1) */
.ds-text-input__control::-webkit-search-decoration,
.ds-text-input__control::-webkit-search-cancel-button { appearance: none; }

/* fallback ring when :has() is unavailable: drawn on the bare control */
.ds-text-input__control:focus-visible {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
  border-radius: var(--ds-radius-xs);
}

/* ---- leading icon · inline label prefix · trailing affordances ------------- */
.ds-text-input__icon,
.ds-text-input__clear,
.ds-text-input__chevron { flex: none; color: var(--ds-ink-muted); }
.ds-text-input__icon { display: inline-flex; width: var(--_icon); height: var(--_icon); }
.ds-text-input__icon svg,
.ds-text-input__clear svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: var(--ds-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-text-input__prefix { flex: none; color: var(--ds-ink-muted); white-space: nowrap; }

/* conditional clear ✕ — shown only once the control has a value (needs a
   placeholder attribute, even placeholder=" ", for :placeholder-shown to work) */
.ds-text-input__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width:  calc(var(--ds-icon-size) + var(--ds-space-2));
  height: calc(var(--ds-icon-size) + var(--ds-space-2));
  margin-inline-end: calc(-1 * var(--ds-space-1));
  padding: var(--ds-space-1);
  border: 0; background: transparent; border-radius: var(--ds-radius-xs);
  cursor: pointer;
}
.ds-text-input__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-text-input:has(> .ds-text-input__control:placeholder-shown) .ds-text-input__clear { display: none; }

/* unit segment: tinted trailing cell ("kg", "%", "/mo") welded to the edge */
.ds-text-input__unit {
  flex: none; align-self: stretch;
  display: inline-flex; align-items: center;
  margin-inline-end: calc(-1 * var(--_pad-x));
  padding-inline: var(--ds-space-3);
  border-inline-start: var(--ds-border-width) solid var(--ds-border);
  border-start-end-radius: calc(var(--_radius) - var(--ds-border-width));
  border-end-end-radius:   calc(var(--_radius) - var(--ds-border-width));
  background: var(--ds-surface-2);
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-sm);
  white-space: nowrap;
}

/* chevron drawn from borders (no asset); rotates when the field is a picker */
.ds-text-input__chevron {
  width:  calc(var(--ds-icon-size) * .45);
  height: calc(var(--ds-icon-size) * .45);
  margin-inline-end: var(--ds-space-0-5);
  border: 0 solid currentColor;
  border-inline-end-width: var(--ds-icon-stroke);
  border-block-end-width:  var(--ds-icon-stroke);
  transform: translateY(-25%) rotate(45deg);
}

/* message line under the box: hint by default, error when data-tone="error" */
.ds-text-input__message {
  display: block;
  margin-block-start: var(--ds-space-1);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-muted);
}
/* error messages are composed .ds-validation-marks[data-kind="error"] roots (2026-09-20); __message keeps hint typography + placement */

/* ---- states (root reads the native control through :has) ----------------- */
@supports selector(:has(a)) {
  .ds-text-input__control:focus-visible { outline: none; }
  /* focus-visible: 2px --ds-ring drawn at −1px so it covers the 1px border and the
     box never grows out of its toolbar row (the _base.css input convention) */
  .ds-text-input:has(> .ds-text-input__control:focus-visible) {
    border-color: var(--ds-ring);
    outline: var(--ds-ring-width) solid var(--ds-ring);
    outline-offset: calc(-1 * var(--ds-border-width));
  }
  /* read-only = the descript tint idiom repurposed: tint fill, no border, ink value */
  .ds-text-input:has(> .ds-text-input__control[readonly]) {
    background: var(--ds-surface-2);
    border-color: transparent;
  }
  .ds-text-input:has(> .ds-text-input__control[readonly]) .ds-text-input__control { cursor: default; }
  /* disabled: faint ink on surface-3, still visible, not-allowed cursor */
  .ds-text-input:has(> .ds-text-input__control:disabled) {
    color: var(--ds-ink-faint);
    background: var(--ds-surface-3);
    border-color: var(--ds-rule);
    box-shadow: none;
    cursor: not-allowed;
  }
  .ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control { cursor: not-allowed; }
  .ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control::placeholder,
  .ds-text-input:has(> .ds-text-input__control:disabled) :is(.ds-text-input__icon, .ds-text-input__prefix, .ds-text-input__unit, .ds-text-input__chevron) { color: var(--ds-ink-faint); }
  /* error: danger border; the focus ring turns danger too so the error stays visible while typing */
  .ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]) { border-color: var(--ds-danger); }
  .ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]:focus-visible) {
    border-color: var(--ds-danger);
    outline-color: var(--ds-danger);
  }
}
/* attribute twins for engines without :has() and for static demos */
.ds-text-input[data-state="error"] { border-color: var(--ds-danger); }
.ds-text-input[data-state="hover"] { border-color: var(--ds-border-strong); }
.ds-text-input[data-state="focus"] {
  border-color: var(--ds-ring);
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: calc(-1 * var(--ds-border-width));
}

/* loading: inline spinner in the trailing slot, no layout jump (aria-busy on the root) */
.ds-text-input[aria-busy="true"]::after {
  content: "";
  flex: none;
  width: var(--ds-icon-size);
  height: var(--ds-icon-size);
  border: 2px solid var(--ds-rule);
  border-block-start-color: var(--ds-ink-muted);
  border-radius: var(--ds-radius-pill);
  animation: ds-text-input-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
.ds-text-input[aria-busy="true"] .ds-text-input__clear { display: none; }
@keyframes ds-text-input-spin { to { transform: rotate(360deg); } }

/* ---- sizes: data-size on the root (or an ancestor toolbar) ----------------- */
.ds-text-input[data-size] { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); }
/* self-contained (DESK-373): the same ladder as components/_base.css §4, restated on the root, so a host that skips
   _base.css (a Tailwind app) still gets sm / lg; where _base.css loads the values are identical. */
.ds-text-input[data-size="sm"] { --_h: var(--ds-control-h-sm); --_pad-x: calc(var(--ds-control-pad-x) - 2px); --_ti-text: var(--ds-text-sm); }
.ds-text-input[data-size="md"] { --_h: var(--ds-control-h); --_pad-x: var(--ds-control-pad-x); --_ti-text: var(--ds-text-md); }
.ds-text-input[data-size="lg"] { --_h: var(--ds-control-h-lg); --_pad-x: calc(var(--ds-control-pad-x) + 4px); --_ti-text: var(--ds-text-lg); }

/* ============================================================================
   VARIANTS — each reference designer's approach, kept by name.
   Unmarked root = data-variant="jstov" (house): --ds-border hairline (one grade
   below --ds-rule in every preset), radius-sm, 36/32/44, value left, placeholder
   at --ds-ink-muted, specified 2px ring, read-only = tint fill.
   ========================================================================== */

/* descript-editing-profile-00-03 — 312×36 borderless tint, r6, value right-aligned
   to the row's action edge, no placeholder */
.ds-text-input[data-variant="descript-tint-fill-right-aligned"] {
  --_align: end;
  background: var(--ds-surface-2);
  border-color: transparent;
}
.ds-text-input[data-variant="descript-tint-fill-right-aligned"]:hover { background: var(--ds-surface-hover); border-color: transparent; }

/* retool-web-25 / retool-web-12 — white, 1px rule, r4, 12px text, 32 tall;
   icon-left for date, chevron-right for select */
.ds-text-input[data-variant="retool-hairline-32"] {
  --_h: var(--ds-control-h-sm);
  --_pad-x: calc(var(--ds-control-pad-x) - 2px);
  --_radius: var(--ds-radius-xs);
  font-size: var(--ds-text-sm);
}

/* navattic-web-174 / navattic-web-153 — 32 tall, 1px border + the 1px lip shadow
   shared with the secondary button so inputs and buttons align on a row */
.ds-text-input[data-variant="navattic-hairline-lip"] {
  --_h: var(--ds-control-h-sm);
  --_pad-x: calc(var(--ds-control-pad-x) - 2px);
  box-shadow: var(--ds-shadow-lift);
}

/* origin-connecting-an-account-00-04 — 700×68 r16, darker 1px border, 20px
   placeholder, 20px icon: the consumer hero field */
.ds-text-input[data-variant="origin-large-rounded"] {
  --_h: calc(var(--ds-control-h-lg) + var(--ds-space-6));   /* 44 + 24 = 68 */
  --_pad-x: var(--ds-space-6);
  --_radius: var(--ds-radius-lg);
  --_icon: var(--ds-icon-size-row);
  --_w: 100%;
  gap: var(--ds-space-4);
  font-size: var(--ds-text-xl);
  border-color: var(--ds-border-strong);
}

/* hsajlzkwuaagtdc — 47–48 tall r10, 1px border, 16px text, every input full
   width even for 2-digit values */
.ds-text-input[data-variant="hsaj-full-width-48"] {
  --_h: calc(var(--ds-control-h) + var(--ds-space-3));       /* 36 + 12 = 48 */
  --_pad-x: var(--ds-space-4);
  --_radius: var(--ds-radius-md);
  --_w: 100%;
  font-size: var(--ds-text-lg);
}

/* hsajlzjwgaajrfp — "Subject:" muted + value 600, one 56px row, hairline below,
   no box: the editor's inline-label row */
.ds-text-input[data-variant="hsajl-inline-label-row"] {
  --_h: calc(var(--ds-row-h) + var(--ds-space-4));            /* 40 + 16 = 56 */
  --_pad-x: var(--ds-space-5);
  --_radius: 0;
  --_w: 100%;
  gap: var(--ds-space-6);
  font-size: var(--ds-text-lg);
  background: transparent;
  border-width: 0 0 var(--ds-border-width);
  border-color: var(--ds-rule);
}
.ds-text-input[data-variant="hsajl-inline-label-row"]:hover { border-color: var(--ds-rule-strong); }
.ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control { font-weight: var(--ds-weight-semibold); }
.ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control::placeholder { font-weight: var(--ds-weight-regular); }

/* luma-creating-an-event-04-07 — 962×49 white r10 on a tinted modal ground,
   conditional ✕ clear; needs a tinted parent (.ds-well) to hold its edge */
.ds-text-input[data-variant="luma-modal-white-with-clear"] {
  --_h: calc(var(--ds-control-h-lg) + var(--ds-space-1));     /* 44 + 4 = 48 */
  --_pad-x: var(--ds-space-4);
  --_radius: var(--ds-radius-md);
  --_w: 100%;
  font-size: var(--ds-text-lg);
  border-color: transparent;
}
.ds-text-input[data-variant="luma-modal-white-with-clear"]:hover { border-color: var(--ds-rule); }

/* perplexity-asking-a-question-05-09 — inputs get a darker rule than cards plus
   a 2–4px soft bottom shadow so the box holds against the sheet */
.ds-text-input[data-variant="perplexity-composer-strong-rule"] {
  --_h: var(--ds-control-h-lg);
  --_pad-x: var(--ds-space-4);
  font-size: var(--ds-text-lg);
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-lift);
}

/* ---- data-form: multiline (textarea) and native select (DESK-371, found by Forematter) -----------------------------
   Self-contained: neither form needs components/_base.css, so a host that skips the base resets (a Tailwind app)
   still gets a finished field. Same box, same states (hover / :focus-within ring / :disabled / aria-invalid).
     <div class="ds-text-input" data-form="multiline"><textarea class="ds-text-input__control" rows="4"></textarea></div>
     <div class="ds-text-input" data-form="select"><select class="ds-text-input__control">…</select>
       <span class="ds-text-input__chevron" aria-hidden="true"></span></div>   (the chevron is border-drawn, empty)
   Knob: --_rows (multiline minimum height in lines, default 4). */
.ds-text-input[data-form="multiline"] {
  --_rows: 4;
  align-items: stretch;
  padding-block: calc(var(--_pad-x) * 0.66);
  width: var(--_w, 100%);
}
.ds-text-input[data-form="multiline"] > .ds-text-input__control {
  min-height: calc(var(--_rows) * 1lh);
  line-height: var(--ds-lh-body, 1.5);
  resize: vertical;
  text-overflow: clip;
  white-space: pre-wrap;
  appearance: none;
}
.ds-text-input[data-form="select"] { position: relative; padding-inline-end: 0; }
.ds-text-input[data-form="select"] > .ds-text-input__control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-inline-end: calc(var(--_pad-x) + var(--ds-icon-size));
  min-height: calc(var(--_h) - 2 * var(--ds-border-width));
}
.ds-text-input[data-form="select"] > .ds-text-input__chevron {
  position: absolute;
  inset-inline-end: var(--_pad-x);
  top: 50%;
  margin: 0;
  transform: translateY(-75%) rotate(45deg);   /* the border-drawn chevron above, centred on the box */
  pointer-events: none;
}
.ds-text-input[data-form] > .ds-text-input__control:disabled { cursor: not-allowed; color: var(--ds-ink-faint); }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* components/banner-callout/banner-callout.css */
/* ============================================================================
   banner-callout — Banner / inline callout / announcement         (taxonomy §E · common · S1)
   Root: .ds-banner-callout — <div role="status"> (system notice), <aside> (callout), <a> (a pill that is one link),
     <div role="alert"> (a mode banner the user must see). It lives IN FLOW: a system notice pushes content down and
     never overlays the controls it references (X-05); the one exception, data-layout="floating", sits on the surface
     it governs (a canvas), not over chrome, and carries no shadow — it is not an overlay.
   Parts: __icon (16/20 stroke glyph; data-disc = a 28 px tinted disc) · __body (title + text) · __title · __text ·
          __action (link / small button slot, may sit inline in the sentence) · __dismiss (icon-button slot, end) ·
          __badge (status-badge slot, leading — "New") · __art (illustration slot, grammarly) · __chevron (trailing ›)
   Axes:  data-layout="inline|bar|pill|floating"     card callout (default) · full-width push-down bar · self-sized capsule ·
                                                     centred on the governed surface
          data-tone="neutral|info|success|warning|danger|accent|ai"   tint + same-hue hairline + same-hue ink;
                                                     ai = the SECOND accent (warm), never the action accent
   Variants: jstov (unmarked root — inline: tint + hairline, no dismiss unless transient; bar: neutral, icon · sentence ·
     one inline link · ×) · grammarly-plan-limit-tint-bordered · manychat-ai-insight-gradient ·
     manychat-push-down-system-notice · manychat-read-only-mode-banner · elevenlabs-announce-pill ·
     attio-announcement-capsule · fibery-note-pill · navattic-plan-status-pill · manychat-coach-mark-pill
   States: rest · hover (pill/link roots only: one tint step) · focus-visible (the universal ring on the root link) ·
     data-state="dismissed" (collapses) · aria-busy (skeleton bar in the true height)
   Private knobs: --_fill --_edge --_ink --_glyph --_radius --_pad-y --_pad-x --_gap --_min-h
   ========================================================================== */

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

.ds-banner-callout {
  --_fill:   var(--ds-surface);
  --_edge:   var(--ds-rule);
  --_ink:    var(--ds-ink);                       /* title / links                      */
  --_glyph:  var(--ds-ink-muted);                 /* icon                                */
  --_radius: var(--ds-radius-md);
  --_pad-y:  var(--ds-space-3);
  --_pad-x:  var(--ds-space-4);
  --_gap:    var(--ds-space-3);
  --_min-h:  0px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--_gap);
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--_min-h);
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--_radius);
  background: var(--_fill);
  border: var(--ds-border-width) solid var(--_edge);
  color: var(--ds-ink-2);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-body);
  text-decoration: none;
}
.ds-banner-callout__icon { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); margin-block-start: calc((1lh - var(--ds-icon-size)) / 2); color: var(--_glyph); }
.ds-banner-callout__icon svg { inline-size: 100%; block-size: 100%; }
.ds-banner-callout__icon[data-disc] { inline-size: 28px; block-size: 28px; margin-block-start: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); }
.ds-banner-callout__icon[data-disc] svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-banner-callout__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); }
.ds-banner-callout__title { color: var(--_ink); font-weight: var(--ds-weight-semibold); }
.ds-banner-callout__text { color: inherit; max-inline-size: var(--ds-measure); }
.ds-banner-callout__text a, .ds-banner-callout__action { color: var(--_ink); font-weight: var(--ds-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
.ds-banner-callout__text a:hover, .ds-banner-callout__action:hover { text-decoration-color: currentColor; }
.ds-banner-callout__action { flex: none; align-self: center; }
:is(.ds-banner-callout:not([data-layout]), .ds-banner-callout[data-layout="inline"]) > .ds-banner-callout__body > .ds-banner-callout__action { align-self: flex-start; margin-block-start: var(--ds-space-1); }   /* column body: start-aligned */
.ds-banner-callout__dismiss { flex: none; align-self: flex-start; margin-block: calc(-1 * var(--ds-space-1)); margin-inline-end: calc(-1 * var(--ds-space-2)); }
.ds-banner-callout__badge { flex: none; align-self: center; }
.ds-banner-callout__chevron { flex: none; align-self: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); }
.ds-banner-callout__art { flex: none; align-self: center; display: grid; place-items: center; inline-size: 56px; block-size: 56px; color: var(--_ink); }
.ds-banner-callout__art svg { inline-size: 100%; block-size: 100%; }

/* -- tones: tint fill, same-hue hairline (35 % of the hue), same-hue ink for title/links ---------------- */
.ds-banner-callout[data-tone="info"]    { --_fill: var(--ds-info-tint);    --_edge: color-mix(in srgb, var(--ds-info) 35%, transparent);    --_ink: var(--ds-info-ink);    --_glyph: var(--ds-info); }
.ds-banner-callout[data-tone="success"] { --_fill: var(--ds-success-tint); --_edge: color-mix(in srgb, var(--ds-success) 35%, transparent); --_ink: var(--ds-success-ink); --_glyph: var(--ds-success); }
.ds-banner-callout[data-tone="warning"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 40%, transparent); --_ink: var(--ds-warning-ink); --_glyph: var(--ds-warning); }
.ds-banner-callout[data-tone="danger"]  { --_fill: var(--ds-danger-tint);  --_edge: color-mix(in srgb, var(--ds-danger) 35%, transparent);  --_ink: var(--ds-danger-ink);  --_glyph: var(--ds-danger); }
.ds-banner-callout[data-tone="accent"]  { --_fill: var(--ds-accent-tint);  --_edge: var(--ds-accent-soft);                                     --_ink: var(--ds-accent-ink);  --_glyph: var(--ds-accent); }
/* ai: the warm second accent — distinct from the action accent by contract; disc + gradient wash */
.ds-banner-callout[data-tone="ai"]      { --_fill: var(--ds-accent-2-tint); --_edge: transparent; --_ink: var(--ds-accent-2-ink); --_glyph: var(--ds-accent-2-ink); }
.ds-banner-callout[data-tone="ai"] .ds-banner-callout__icon[data-disc] { background: color-mix(in srgb, var(--ds-accent-2-tint) 60%, var(--ds-surface)); }
.ds-banner-callout[data-tone] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-tone] .ds-banner-callout__title { color: var(--_ink); }

/* -- layouts ---------------------------------------------------------------------------------------- */
/* bar: full-width push-down system notice — one line, icon · sentence (link inline) · ×, hairline below */
.ds-banner-callout[data-layout="bar"] {
  --_radius: 0px;
  --_pad-y: var(--ds-space-1);
  --_min-h: calc(var(--ds-control-h-sm) + 2px);   /* 34 (manychat) */
  align-items: center;
  inline-size: 100%;
  border-width: 0 0 var(--ds-border-width);
}
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__icon { margin-block-start: 0; }
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); }
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__dismiss { align-self: center; margin-block: 0; }
.ds-banner-callout[data-layout="bar"][data-tone] { border-block-end-color: var(--_edge); }

/* pill: self-sized capsule, one click target; badge inset 8, text, chevron 16 */
.ds-banner-callout[data-layout="pill"] {
  --_radius: var(--ds-radius-pill);
  --_pad-y: 0px;
  --_pad-x: var(--ds-space-4);
  --_gap: var(--ds-space-2);
  --_min-h: var(--ds-control-h);
  display: inline-flex;
  align-items: center;
  inline-size: auto;
  max-inline-size: 100%;
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__body { flex-direction: row; align-items: center; gap: var(--ds-space-2); }
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__text { color: var(--ds-ink); font-size: var(--ds-text-md); }
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__icon { margin-block-start: 0; }
.ds-banner-callout[data-layout="pill"]:has(> .ds-banner-callout__badge) { padding-inline-start: var(--ds-space-2); }
.ds-banner-callout[data-layout="pill"]:hover, .ds-banner-callout[data-layout="pill"][data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); }
.ds-banner-callout[data-layout="pill"]:hover .ds-banner-callout__chevron { transform: translateX(var(--ds-space-0-5)); }
.ds-banner-callout[data-layout="pill"][data-tone] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-layout="pill"][data-tone]:hover { background: var(--_fill); border-color: var(--_ink); }
.ds-banner-callout[data-layout="pill"][data-w="full"] { display: flex; inline-size: 100%; }

/* floating: centred at the top of the surface it governs (host is position: relative); tint + hairline, NO shadow */
.ds-banner-callout[data-layout="floating"] {
  --_radius: var(--ds-radius-sm);
  --_pad-y: var(--ds-space-1);
  --_pad-x: var(--ds-space-3);
  --_min-h: var(--ds-control-h-sm);
  position: absolute;
  inset-block-start: var(--ds-space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--ds-z-sticky);
  display: inline-flex;
  align-items: center;
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--ds-space-4));
}
.ds-banner-callout[data-layout="floating"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); }
.ds-banner-callout[data-layout="floating"] .ds-banner-callout__text { font-size: var(--ds-text-md); }
/* hanging: a tab flush to the bar above it (coach mark) — square top corners */
.ds-banner-callout[data-layout="floating"][data-hanging] { inset-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-block-start-width: 0; }

/* -- states ------------------------------------------------------------------------------------------ */
.ds-banner-callout:is(a, button):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-banner-callout[data-state="dismissed"] { display: none; }
.ds-banner-callout[aria-busy="true"] { --_fill: var(--ds-skeleton); --_edge: transparent; color: transparent; }
.ds-banner-callout[aria-busy="true"] > * { visibility: hidden; }

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

/* grammarly: accent tint + 1 px accent-rule border, r4, 80 tall, content CENTRED: ~60 px brand blobs + 18/600 accent
   heading + one line with an inline link; no dismiss. Their soft shadow is skin and is dropped (R5). */
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] {
  --_fill: var(--ds-accent-tint);
  --_edge: var(--ds-accent-soft);
  --_ink: var(--ds-accent-ink);
  --_radius: var(--ds-radius-xs);
  --_min-h: 80px;
  --_pad-y: var(--ds-space-2);
  align-items: center;
  justify-content: center;
}
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__body { flex: 0 1 auto; }
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__title { font-size: var(--ds-text-lg); }
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__text { color: var(--ds-ink-2); }

/* manychat: AI insight card heading a list — no border, diagonal white → warm gradient, 28 px warm disc + sparkle,
   14 px question wrapping to two lines, 14 px accent link, × top-right. The AI hue is the second accent. */
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] {
  --_edge: transparent;
  --_radius: var(--ds-radius-md);
  --_ink: var(--ds-accent-2-ink);
  --_glyph: var(--ds-accent-2-ink);
  background: linear-gradient(135deg, var(--ds-surface) 30%, var(--ds-accent-2-tint) 100%);
}
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__text { color: var(--ds-ink); }
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__action { align-self: flex-start; color: var(--ds-ink-link); text-decoration: none; }

/* manychat: 34 px white bar ABOVE the app bar; bell · sentence · inline link · × far right; hairline below; pushes the app down */
.ds-banner-callout[data-variant="manychat-push-down-system-notice"] { --_fill: var(--ds-surface); --_edge: var(--ds-rule-strong); }
.ds-banner-callout[data-variant="manychat-push-down-system-notice"] .ds-banner-callout__text a { color: var(--ds-ink-link); font-weight: var(--ds-weight-regular); text-decoration: none; }

/* manychat: read-only mode — 326×29 warm-tint pill with a 1 px warm rule, r6, centred at the top of the canvas;
   "You are viewing a published version" + underlined accent "Edit"; no icon, no ×. Their 3.2:1 text → warning-ink. */
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 35%, transparent); --_ink: var(--ds-warning-ink); }
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__action { color: var(--ds-ink-link); }

/* elevenlabs: 36 tall white pill, 1 px hairline, self-sized; leading BLACK "New" pill badge (24 tall) · 14/400 message ·
   trailing muted chevron — one click target. */
.ds-banner-callout[data-variant="elevenlabs-announce-pill"] { --_edge: var(--ds-border); }

/* attio: hairline capsule, 12 px text, trailing ›, no colour, no icon; 40 px above the h1 as a soft news slot */
.ds-banner-callout[data-variant="attio-announcement-capsule"] { --_min-h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); --_gap: var(--ds-space-1); }
.ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__text { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__chevron { inline-size: 12px; block-size: 12px; }

/* fibery: the author's-voice aside — amber tint, icon + 14/500 text + "→"; single-line = 31 px pill, two-line = r16 rect.
   Amber is a brand voice hue, not warning: painted with the amber data hue. */
.ds-banner-callout[data-variant="fibery-note-pill"] { --_fill: var(--ds-data-6-tint); --_edge: transparent; --_ink: var(--ds-data-6-ink); --_glyph: var(--ds-data-6-ink); --_min-h: 31px; }
.ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__text { color: var(--_ink); font-weight: var(--ds-weight-medium); }
.ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__chevron { color: var(--_ink); }
.ds-banner-callout[data-variant="fibery-note-pill"][data-layout="inline"] { --_radius: var(--ds-radius-lg); }

/* navattic: full-width 32 px bordered pill in the nav footer, 1 px lip, 16 px accent ring glyph + 14/400 "Starter limit reached" */
.ds-banner-callout[data-variant="navattic-plan-status-pill"] {
  --_min-h: var(--ds-control-h-sm);
  --_edge: var(--ds-border);
  --_glyph: var(--ds-accent);
  --_pad-x: var(--ds-space-3);
  box-shadow: var(--ds-shadow-lip);
}
.ds-banner-callout[data-variant="navattic-plan-status-pill"] .ds-banner-callout__text { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); color: var(--ds-ink); }

/* manychat: coach-mark pill hanging from the toolbar centre — surface-2 fill, r8, 31 tall, muted 14 text with a pointer.
   Their emoji pointer is replaced by a stroke arrow (system labels never carry emoji: data-emoji policy). */
.ds-banner-callout[data-variant="manychat-coach-mark-pill"] { --_fill: var(--ds-surface-2); --_edge: transparent; --_glyph: var(--ds-ink-muted); --_min-h: 31px; --_radius: var(--ds-radius-sm); }
.ds-banner-callout[data-variant="manychat-coach-mark-pill"] .ds-banner-callout__text { color: var(--ds-ink-muted); font-size: var(--ds-text-md); }


/* components/field-row/field-row.css */
/* ============================================================================
   field-row — Form field row · taxonomy-components.md §B · core · S1
   One root, four grammars (pick per surface, never mix on one surface):
     form       label OVER control          jstov (default) · retool-label-over-field ·
                                            hsaj-same-size-grey-label
     inspector  label LEFT · control RIGHT  jstov-inspector · descript-label-left-control-right
     setting    icon · label · typed slot   jstov-setting · luma-setting-row ·
                                            luma-value-with-consequence-caption · hsajl-toggle-row ·
                                            navattic-88-icon-labelled-toggle-stacked (anti-pattern)
     card       2 px bordered toggle card   clickup-toggle-card
   Private knobs: --_pitch (row → next label), --_control-w (form/inspector control width),
   --_row-h (setting/inspector row height), --_bw (toggle-card border),
   --_row-pad-x (setting-row horizontal inset; read with a fallback so a container such as
   settings-row-group can set it to 0 for unboxed sections), --_dot-x (data-state="default": the gutter dot's
   inline offset).
   Default marker (2026-09-25): data-state="default" + .ds-field-row__default (the word) = an untouched default row.
   Tokens only; no --ds-* declared here.
   ========================================================================== */

/* ---- root: form grammar is the default ------------------------------------ */
.ds-field-row {
  --_row-h: calc(var(--ds-size-h) + 2 * var(--ds-space-2));   /* 52 · 48 compact · 60 comfortable */
  --_pitch: var(--ds-field-pitch);                             /* 16 · 12 · 20 */
  --_control-w: 100%;
  --_bw: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-field-gap);                                    /* label → control 8 */
  min-width: 0;
  padding-block-end: var(--_pitch);
  color: var(--ds-ink);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-list);
  text-align: start;
}

/* ---- label lane (form + inspector): family / case / tracking are theme knobs */
.ds-field-row__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-md);                 /* same size as the value — demoted by ink, not size */
  font-weight: var(--ds-weight-regular);
  letter-spacing: var(--ds-label-tracking);
  text-transform: var(--ds-label-case);
  color: var(--ds-ink-muted);
}
.ds-field-row__qualifier { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); }
/* __required / __optional / __error are composed .ds-validation-marks roots (2026-09-20) — the part classes below are PLACEMENT only */

/* ---- control slot --------------------------------------------------------- */
.ds-field-row__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
  max-width: 100%;
}
.ds-field-row__control > .ds-control { width: min(var(--_control-w), 100%); flex: 0 1 auto; }
.ds-field-row__control > textarea.ds-control { min-height: calc(var(--ds-size-h) * 2); padding-block: var(--ds-space-2); align-items: flex-start; }
/* native checkbox / radio fallback for a BARE input (no class). The sibling controls
   (.ds-toggle-switch__input, .ds-checkbox__input) carry a class and keep their own geometry —
   the :not([class]) guard sits inside :where() so this stays at (0,1,0) and never outranks them. */
.ds-field-row__control :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class])) { accent-color: var(--ds-accent); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); margin: 0; }

/* ---- hint / error / caption ---------------------------------------------- */
.ds-field-row__hint    { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-field-row__caption { grid-area: caption; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-field-row__error { display: none; }
.ds-field-row[data-state="error"] .ds-field-row__error,
.ds-field-row:has([aria-invalid="true"]) .ds-field-row__error { display: flex; }
.ds-field-row[data-state="error"] .ds-control,
.ds-field-row .ds-control[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-field-row[data-state="error"] .ds-control:hover,
.ds-field-row .ds-control[aria-invalid="true"]:hover { border-color: var(--ds-danger); }

/* ---- setting-grammar parts ------------------------------------------------ */
.ds-field-row__icon {
  grid-area: icon;
  width: var(--ds-icon-size-row);
  height: var(--ds-icon-size-row);
  color: var(--ds-ink-muted);
  transition: color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-field-row__icon svg,
.ds-field-row__edit,
.ds-field-row__chevron,
.ds-field-row__remove svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-field-row__icon svg { width: 100%; height: 100%; }
.ds-field-row__edit, .ds-field-row__chevron { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-muted); }

/* value word: muted default → ink semibold once set (luma-24-27) */
.ds-field-row__value {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-1);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: none;
  font: inherit;
  color: var(--ds-ink-muted);
  font-weight: var(--ds-weight-regular);
  font-variant-numeric: var(--ds-numeric);
  text-align: end;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
:is(button, a).ds-field-row__value { cursor: pointer; text-decoration: none; }
:is(button, a).ds-field-row__value:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-field-row[data-state="set"] .ds-field-row__value { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-field-row[data-state="set"] .ds-field-row__edit { color: var(--ds-ink-2); }

/* × remove — an icon button at the small control size (tap ≥ 32) */
.ds-field-row__remove {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: var(--ds-control-h-sm);
  height: var(--ds-control-h-sm);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: none;
  color: var(--ds-ink-muted);
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-field-row__remove svg { width: var(--ds-icon-size); height: var(--ds-icon-size); }
.ds-field-row__remove:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }

/* inline text-button in a slot (Change password · Edit) */
.ds-field-row__action {
  appearance: none;
  min-height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-1);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: none;
  font: inherit;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-ink);
  text-decoration: none;
  cursor: pointer;
  text-transform: var(--ds-control-case);
}
.ds-field-row__action:hover { background: var(--ds-hover-bg); }
.ds-field-row__action[data-tone="danger"] { color: var(--ds-danger-ink); }

/* read-only value (descript's un-signalled weakness fixed): tint fill, no border */
.ds-field-row__control > .ds-control:read-only:not(select),
.ds-field-row__control > .ds-control[aria-readonly="true"] { background: var(--ds-surface-2); border-color: transparent; color: var(--ds-ink-2); }

/* ---- states on the root --------------------------------------------------- */
/* dirty: a 6 px accent dot after the label (accent-scope "state" allows dots) */
.ds-field-row[data-state="dirty"] .ds-field-row__label::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
}
/* default (untouched): data-state="default" — house (c) of the create-an-object flow: a hollow gutter DOT + the word
   "default" (.ds-field-row__default), both muted. The value stays at --ds-ink-muted (AA) — never faded below 4.5:1.
   Touching the row moves it to data-state="set" (value → ink 600) and both marks disappear. The dot is decorative;
   the word carries the meaning. Additive 2026-09-25 (DESK-327). Knob: --_dot-x (the dot's inline offset). */
.ds-field-row[data-state="default"]::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--_dot-x, calc(-1 * var(--ds-space-3)));
  inset-block-start: calc(var(--ds-lh-list) * 0.5em - 3px);
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--ds-radius-pill);
  border: var(--ds-border-width) solid var(--ds-border-strong);
  pointer-events: none;
}
.ds-field-row__default {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-regular);
  letter-spacing: var(--ds-label-tracking);
  text-transform: var(--ds-label-case);
  color: var(--ds-ink-muted);
  white-space: nowrap;
}
.ds-field-row__label > .ds-field-row__default { margin-inline-start: var(--ds-space-1); }
.ds-field-row__control > .ds-field-row__default { margin-inline-end: var(--ds-space-1); }
.ds-field-row:not([data-state="default"]) .ds-field-row__default { display: none; }
/* disabled: faint ink, still visible; the control itself carries disabled */
.ds-field-row[aria-disabled="true"] { cursor: not-allowed; }
.ds-field-row[aria-disabled="true"] :is(.ds-field-row__label, .ds-field-row__value, .ds-field-row__caption, .ds-field-row__icon, .ds-field-row__edit, .ds-field-row__chevron, .ds-field-row__hint) { color: var(--ds-ink-faint); }
.ds-field-row[aria-disabled="true"] :is(.ds-field-row__value, .ds-field-row__remove, .ds-field-row__action) { pointer-events: none; }
/* locked: control at half strength + an explanation (cap strip or caption) */
.ds-field-row[data-state="locked"] .ds-field-row__control { opacity: .5; }
.ds-field-row[data-state="locked"] .ds-field-row__control > * { pointer-events: none; }
/* loading: skeleton in the TRUE footprint of the control slot — no layout jump */
.ds-field-row[aria-busy="true"] .ds-field-row__control > * { visibility: hidden; }
.ds-field-row[aria-busy="true"] .ds-field-row__control::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ds-radius-sm);
  background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-surface-3) 50%, var(--ds-surface-2) 75%);
  background-size: 200% 100%;
  animation: ds-field-row-shimmer calc(var(--ds-dur-slow) * 5) linear infinite;
}
@keyframes ds-field-row-shimmer { to { background-position: -200% 0; } }

/* ---- variant: retool-label-over-field — 12/600 label + * → 4 → 32 control → 12 (64 pitch) */
.ds-field-row[data-variant="retool-label-over-field"] { gap: var(--ds-space-1); --_pitch: var(--ds-space-3); }
.ds-field-row[data-variant="retool-label-over-field"] .ds-field-row__label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); }
.ds-field-row[data-variant="retool-label-over-field"] .ds-field-row__required { color: var(--ds-danger); }

/* ---- variant: hsaj-same-size-grey-label — 16/400 grey label, 16 above a 48 control, ~98 pitch */
.ds-field-row[data-variant="hsaj-same-size-grey-label"] { gap: var(--ds-space-4); --_pitch: var(--ds-space-4); }

/* ---- inspector grammar: label left, control right-aligned to ONE edge ------- */
.ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) {
  --_control-w: 312px;
  --_pitch: 0px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2) var(--ds-space-4);
  min-height: var(--_row-h);
}
.ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__label { flex: 1 1 auto; }
.ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__label { color: var(--ds-ink); font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; }
.ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__control {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
}
.ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__control > .ds-control { text-align: end; }
.ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) :is(.ds-field-row__hint, .ds-field-row__error) { flex-basis: 100%; }
/* descript: tint-fill borderless input one step below the card, value right-aligned */
.ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__control > .ds-control { background: var(--ds-surface-2); border-color: transparent; }
.ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__control > .ds-control:hover { border-color: var(--ds-border); }

/* ---- setting grammar: icon · label(+caption) · trailing slot typed by data --- */
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) {
  --_pitch: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon label control";
  align-items: center;
  align-content: center;
  column-gap: var(--ds-space-3);
  row-gap: 0;
  min-height: var(--_row-h);
  padding-block: var(--ds-space-2);
  padding-inline: var(--_row-pad-x, var(--ds-card-pad));
}
/* a caption / hint / error opens a second row under the label; icon + control span both */
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__caption, .ds-field-row__hint, .ds-field-row__error) {
  grid-template-areas: "icon label control" "icon caption control";
}
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):not(:has(.ds-field-row__icon)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label control";
}
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):not(:has(.ds-field-row__icon)):has(.ds-field-row__caption, .ds-field-row__hint, .ds-field-row__error) {
  grid-template-areas: "label control" "caption control";
}
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) .ds-field-row__label {
  grid-area: label;
  font-family: var(--ds-font-sans);       /* a setting's name is row text, not the label lane */
  text-transform: none;
  letter-spacing: 0;
  color: var(--ds-ink);
}
.ds-field-row:is([data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"]) .ds-field-row__label { color: var(--ds-ink-2); }
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) .ds-field-row__control {
  grid-area: control;
  justify-self: end;
  display: inline-flex;
}
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]) :is(.ds-field-row__hint, .ds-field-row__error) { grid-area: caption; }
/* default dot in a setting row: centred in the row's inline padding (falls back to the outside gutter when the
   row is unboxed, --_row-pad-x: 0 — set --_dot-x there if the container has no gutter either) */
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"])[data-state="default"]::before {
  inset-inline-start: var(--_dot-x, calc(var(--_row-pad-x, var(--ds-card-pad)) / 2 - 3px));
  inset-block-start: calc(50% - 3px);
}
.ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]) .ds-field-row__control { align-items: center; }
/* on a narrow row the word wraps ABOVE the value instead of pushing into the label (390 px): the label keeps its
   min-content, the control column may shrink */
.ds-field-row[data-state="default"]:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__default) { grid-template-columns: auto minmax(min-content, 1fr) minmax(0, auto); }
.ds-field-row[data-state="default"]:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__default):not(:has(.ds-field-row__icon)) { grid-template-columns: minmax(min-content, 1fr) minmax(0, auto); }
.ds-field-row[data-state="default"] .ds-field-row__control:has(> .ds-field-row__default) { flex-wrap: wrap; justify-content: flex-end; min-inline-size: 0; row-gap: 0; }
/* the whole row as a link / button (chevron type) */
:is(a, button).ds-field-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); }
:is(a, button).ds-field-row:hover { background: var(--ds-hover-bg); }
/* luma: leading icon colourises once the value departs from its default */
.ds-field-row[data-variant^="luma-"][data-state="set"] .ds-field-row__icon { color: var(--ds-accent); }
/* hsajl: 600 label stated as the ON condition, switch right, 48 row */
.ds-field-row[data-variant="hsajl-toggle-row"] { --_row-h: calc(var(--ds-size-h) + var(--ds-space-3)); }
.ds-field-row[data-variant="hsajl-toggle-row"] .ds-field-row__label { font-weight: var(--ds-weight-semibold); }
/* navattic-88 (anti-pattern kept for reference): switch stacked under the label */
.ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] {
  grid-template-areas: "icon label" "control control";
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: var(--ds-space-2);
  min-height: 0;
}
.ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] .ds-field-row__control { justify-self: start; }
.ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] .ds-field-row__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); }

/* ---- card grammar: clickup-toggle-card — 2 px border mirrors the switch ------ */
.ds-field-row[data-variant="clickup-toggle-card"] {
  --_pitch: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon label control";
  align-items: center;
  column-gap: var(--ds-space-2);
  min-height: var(--_row-h);
  padding-inline: var(--ds-space-4);
  background: var(--ds-surface);
  border: var(--_bw) solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-field-row[data-variant="clickup-toggle-card"]:has(input:checked) { border-color: var(--ds-border-selected); }
.ds-field-row[data-variant="clickup-toggle-card"]:hover { border-color: var(--ds-border-strong); }
.ds-field-row[data-variant="clickup-toggle-card"]:has(input:checked):hover { border-color: var(--ds-border-selected); }
.ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__label { grid-area: label; font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); gap: var(--ds-space-2); }
.ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-2); }
.ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__control { grid-area: control; justify-self: end; }
.ds-field-row[data-variant="clickup-toggle-card"]:has(.ds-field-row__cap) { padding-block-start: var(--ds-space-4); }
/* cap strip fused to the card top ("ALWAYS REQUIRED") — markup adds .ds-eyebrow for the caps */
.ds-field-row__cap {
  position: absolute;
  inset: calc(-1 * var(--_bw)) calc(-1 * var(--_bw)) auto;
  height: var(--ds-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-surface-inverse);
  color: var(--ds-ink-inverse);
  font-size: var(--ds-text-xs);
  line-height: 1;
  border-start-start-radius: var(--ds-radius-xs);
  border-start-end-radius: var(--ds-radius-xs);
}
/* inline marker chip ("Default view") — tint + same-hue ink, never white-on-colour */
.ds-field-row__marker {
  display: inline-flex;
  align-items: center;
  height: calc(var(--ds-icon-size) + var(--ds-space-1));
  padding-inline: calc(var(--ds-space-1) * 1.5);
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-2);
  color: var(--ds-ink-muted);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* components/upload-dropzone/upload-dropzone.css */
/* ============================================================================
   upload-dropzone — Upload dropzone · taxonomy-components.md §B · common · S0
   Anatomy: dashed 1 px border · centred instruction / alternative / constraint lines ·
   the real <input type="file"> (visually hidden, still focusable) · placed FIRST in a
   chooser (own upload ranks above the library).
   Variants (no house spin in the taxonomy; the unmarked root is luma's three-line zone):
     luma-124px-three-line (default) · luma-75px-single-sentence ·
     descript-avatar-as-upload · luma-on-media-disc
   States the references lack are specified here: hover · focus-visible (ring via :has) ·
   data-state="dragging" · aria-busy (progress) · aria-invalid (danger) ·
   data-state="filled" (preview + replace/remove) · aria-disabled.
   Knobs: --_min-h (124) · --_avatar (40) · --_disc (44)
   ========================================================================== */

.ds-upload-dropzone {
  --_min-h: 124px;
  --_avatar: 40px;
  --_disc: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  min-height: var(--_min-h);
  padding: var(--ds-space-4) var(--ds-card-pad);
  border: var(--ds-border-width) dashed var(--ds-rule-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
  color: var(--ds-ink);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-body);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
/* the real file input: covers the zone, invisible, keyboard-reachable */
.ds-upload-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.ds-upload-dropzone__input:focus-visible { outline: none; }            /* ring redrawn on the zone below */
.ds-upload-dropzone:has(.ds-upload-dropzone__input:focus-visible) { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }

.ds-upload-dropzone__icon { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); color: var(--ds-ink-muted); margin-block-end: var(--ds-space-1); }
.ds-upload-dropzone__icon svg, .ds-upload-dropzone__action svg, .ds-upload-dropzone__disc svg, .ds-upload-dropzone__avatar svg, .ds-upload-dropzone__error svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-upload-dropzone__instruction { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); }
.ds-upload-dropzone__instruction a, .ds-upload-dropzone__instruction span[data-link] { color: var(--ds-ink-link); text-decoration: underline; text-underline-offset: .15em; }
.ds-upload-dropzone__alternative, .ds-upload-dropzone__constraint { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-upload-dropzone__constraint { font-variant-numeric: tabular-nums; }

/* ---- hover / dragging ------------------------------------------------------ */
.ds-upload-dropzone:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); }
.ds-upload-dropzone[data-state="dragging"] {
  border-style: solid;
  border-color: var(--ds-accent);
  background: var(--ds-accent-tint);
}
.ds-upload-dropzone[data-state="dragging"] .ds-upload-dropzone__instruction,
.ds-upload-dropzone[data-state="dragging"] .ds-upload-dropzone__icon { color: var(--ds-accent-ink); }

/* ---- loading: progress in the same frame, no layout jump --------------------- */
.ds-upload-dropzone__progress {
  display: none;
  width: min(320px, 100%);
  flex-direction: column;
  gap: var(--ds-space-2);
  align-items: stretch;
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
}
.ds-upload-dropzone__bar { height: var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); overflow: hidden; }
.ds-upload-dropzone__bar > span { display: block; height: 100%; width: var(--_pct, 0%); border-radius: inherit; background: var(--ds-accent); transition: width var(--ds-dur-base) var(--ds-ease-out); }
.ds-upload-dropzone[aria-busy="true"] { cursor: progress; border-style: solid; border-color: var(--ds-border); background: var(--ds-surface); }
.ds-upload-dropzone[aria-busy="true"] .ds-upload-dropzone__progress { display: flex; }
.ds-upload-dropzone[aria-busy="true"] :is(.ds-upload-dropzone__alternative, .ds-upload-dropzone__constraint, .ds-upload-dropzone__icon) { display: none; }
.ds-upload-dropzone[aria-busy="true"] .ds-upload-dropzone__input { pointer-events: none; }

/* ---- error ---------------------------------------------------------------- */
.ds-upload-dropzone__error {
  display: none;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: var(--ds-text-sm);
  color: var(--ds-danger-ink);
}
.ds-upload-dropzone__error svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; }
.ds-upload-dropzone[aria-invalid="true"] { border-color: var(--ds-danger); background: var(--ds-danger-tint); }
.ds-upload-dropzone[aria-invalid="true"] .ds-upload-dropzone__error { display: inline-flex; }
.ds-upload-dropzone[aria-invalid="true"] .ds-upload-dropzone__constraint { color: var(--ds-danger-ink); }

/* ---- filled: preview thumb + name/size + replace / remove ----------------------- */
.ds-upload-dropzone[data-state="filled"] {
  flex-direction: row;
  flex-wrap: wrap;                       /* under ~390 px the actions drop below the name instead of squeezing it */
  justify-content: flex-start;
  gap: var(--ds-space-3);
  border-style: solid;
  border-color: var(--ds-rule);
  background: var(--ds-surface);
  text-align: start;
  cursor: default;
  min-height: 0;
  padding: var(--ds-space-3) var(--ds-card-pad);
}
.ds-upload-dropzone[data-state="filled"] .ds-upload-dropzone__input { display: none; }
.ds-upload-dropzone__thumb {
  flex: none;
  width: calc(var(--ds-control-h-lg) + var(--ds-space-2));
  aspect-ratio: 1;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-illustration-ground);
  object-fit: cover;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ds-ink-muted);
}
.ds-upload-dropzone__thumb svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-upload-dropzone__file { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); }
.ds-upload-dropzone__name { font-weight: var(--ds-weight-medium); color: var(--ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-upload-dropzone__meta { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
.ds-upload-dropzone__actions { display: inline-flex; gap: var(--ds-space-1); flex: none; margin-inline-start: auto; }
.ds-upload-dropzone__action {
  appearance: none;
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2);
  border: 0; border-radius: var(--ds-radius-sm); background: none;
  font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); cursor: pointer;
  text-transform: var(--ds-control-case);
}
.ds-upload-dropzone__action svg { width: var(--ds-icon-size); height: var(--ds-icon-size); }
.ds-upload-dropzone__action:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-upload-dropzone__action[data-tone="danger"] { color: var(--ds-danger-ink); }
.ds-upload-dropzone__action[data-tone="danger"]:hover { background: var(--ds-danger-tint); }

/* ---- disabled ---------------------------------------------------------------- */
.ds-upload-dropzone[aria-disabled="true"] { cursor: not-allowed; border-color: var(--ds-rule); background: var(--ds-surface-3); color: var(--ds-ink-faint); }
.ds-upload-dropzone[aria-disabled="true"] :is(.ds-upload-dropzone__instruction, .ds-upload-dropzone__alternative, .ds-upload-dropzone__constraint, .ds-upload-dropzone__icon) { color: var(--ds-ink-faint); }
.ds-upload-dropzone[aria-disabled="true"] .ds-upload-dropzone__instruction :is(a, span[data-link]) { color: var(--ds-ink-faint); text-decoration: none; }
.ds-upload-dropzone[aria-disabled="true"] .ds-upload-dropzone__input { pointer-events: none; }

/* ---- variant: luma-75px-single-sentence — one line, 14 px radius (lg), ~76 px */
.ds-upload-dropzone[data-variant="luma-75px-single-sentence"] {
  --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-8));
  border-radius: var(--ds-radius-lg);
  padding-block: var(--ds-space-3);
}
.ds-upload-dropzone[data-variant="luma-75px-single-sentence"] .ds-upload-dropzone__instruction { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); }
.ds-upload-dropzone[data-variant="luma-75px-single-sentence"][data-state="dragging"] .ds-upload-dropzone__instruction { color: var(--ds-accent-ink); }   /* restate: the variant rule above would otherwise outrank the dragging rule by source order */

/* ---- variant: descript-avatar-as-upload — no zone; the avatar IS the affordance */
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"] {
  --_min-h: 0px;
  display: inline-grid;
  place-items: center;
  width: var(--_avatar);
  height: var(--_avatar);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  overflow: visible;
}
.ds-upload-dropzone__avatar {
  display: grid;
  place-items: center;
  width: var(--_avatar, 40px);
  height: var(--_avatar, 40px);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent-2-tint);
  color: var(--ds-accent-2-ink);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .02em;
  overflow: hidden;
  transition: filter var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-upload-dropzone__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* hover: a camera glyph overlays the avatar so the affordance is discoverable (descript had none) */
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-overlay-fill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"] .ds-upload-dropzone__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ds-ink-inverse);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"] .ds-upload-dropzone__glyph svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linejoin: round; }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"]:is(:hover, [data-state="dragging"], [data-state="hover"])::after,
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"]:is(:hover, [data-state="dragging"], [data-state="hover"]) .ds-upload-dropzone__glyph { opacity: 1; }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"]:has(.ds-upload-dropzone__input:focus-visible),
button.ds-upload-dropzone[data-variant="descript-avatar-as-upload"]:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"][aria-disabled="true"] .ds-upload-dropzone__avatar { background: var(--ds-surface-3); color: var(--ds-ink-faint); }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"][data-size="sm"] { --_avatar: 32px; }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"][data-size="lg"] { --_avatar: 64px; }
.ds-upload-dropzone[data-variant="descript-avatar-as-upload"][data-size="lg"] .ds-upload-dropzone__avatar { font-size: var(--ds-text-lg); }

/* ---- variant: luma-on-media-disc — the cover is the zone; a 44 px disc floats bottom-right */
.ds-upload-dropzone[data-variant="luma-on-media-disc"] {
  --_min-h: 0px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--ds-media-radius);
  background: var(--ds-illustration-ground);
  aspect-ratio: var(--_aspect, 1);
  max-width: 100%;
  overflow: clip;
  cursor: default;
  text-align: start;
}
.ds-upload-dropzone__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-upload-dropzone[data-variant="luma-on-media-disc"] .ds-upload-dropzone__input { display: none; }
.ds-upload-dropzone__disc {
  appearance: none;
  position: absolute;
  inset-block-end: var(--ds-space-3);
  inset-inline-end: var(--ds-space-3);
  display: grid;
  place-items: center;
  width: var(--_disc);
  height: var(--_disc);
  border: var(--ds-border-width) solid var(--ds-rule);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-raised);
  color: var(--ds-ink);
  cursor: pointer;
  box-shadow: var(--ds-shadow-float);
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-upload-dropzone__disc svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-upload-dropzone__disc:hover { background: var(--ds-hover-bg); }
.ds-upload-dropzone__disc:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); cursor: not-allowed; box-shadow: none; }
.ds-upload-dropzone[data-variant="luma-on-media-disc"][data-state="dragging"] { outline: var(--ds-ring-width) solid var(--ds-accent); outline-offset: calc(-1 * var(--ds-ring-width)); }
.ds-upload-dropzone[data-variant="luma-on-media-disc"][data-state="dragging"]::after { content: ""; position: absolute; inset: 0; background: var(--ds-accent-tint); opacity: .6; pointer-events: none; }
/* empty cover: dashed footprint with the disc still present */
.ds-upload-dropzone[data-variant="luma-on-media-disc"][data-state="empty"] { border: var(--ds-border-width) dashed var(--ds-rule-strong); background: var(--ds-surface-2); display: grid; place-items: center; color: var(--ds-ink-muted); }

/* ============================================================================
   J10 import variants (2026-09-30) — a spreadsheet dropzone for "Import your data". Same anatomy plus
   `.ds-upload-dropzone__browse` (a visible button twin of the click phrase; aria-hidden — the input is the control).
   Every one of these carries: rest · dragging · uploading (data-state + aria-busy) · error (data-state +
   aria-invalid) · disabled (data-state + aria-disabled). The states are restated after the variants (below) so a
   variant's own fill never hides one.
   Variants: jstov · attio-icon-drop-area · fresha-tinted-block · honeybook-browse-link · notion-dashed-accent ·
   bonsai-attachment-field.
   ========================================================================== */
.ds-upload-dropzone__browse { display: none; }

/* ---- jstov — a tall zone that says what it takes before you drop: the instruction, where the file comes from, the
   constraint (types · size · "the first row should be column names"), and a visible Choose a file button */
.ds-upload-dropzone[data-variant="jstov"] {
  --_min-h: 208px;
  gap: var(--ds-space-1-5);
  border-color: var(--ds-rule-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}
.ds-upload-dropzone[data-variant="jstov"] .ds-upload-dropzone__icon { display: grid; place-items: center; width: calc(var(--ds-control-h) + var(--ds-space-2)); height: calc(var(--ds-control-h) + var(--ds-space-2)); padding: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); margin-block-end: var(--ds-space-2); }
.ds-upload-dropzone[data-variant="jstov"] .ds-upload-dropzone__instruction { font-size: var(--ds-text-md); }
.ds-upload-dropzone[data-variant="jstov"] .ds-upload-dropzone__browse,
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] .ds-upload-dropzone__browse {
  display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); margin-block: var(--ds-space-2);
  padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink);
  text-transform: var(--ds-control-case);
}
.ds-upload-dropzone[data-variant="jstov"] .ds-upload-dropzone__instruction span[data-link] { color: inherit; text-decoration: none; }
.ds-upload-dropzone[data-variant="jstov"]:hover .ds-upload-dropzone__browse,
.ds-upload-dropzone[data-variant="attio-icon-drop-area"]:hover .ds-upload-dropzone__browse { border-color: var(--ds-border-strong); }

/* ---- attio-icon-drop-area — a big quiet canvas: a sheet illustration, "Drop your .CSV file onto this area to upload", "or", a Choose button */
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] { --_min-h: 280px; border-style: solid; border-color: var(--ds-rule-soft); border-radius: var(--ds-radius-lg); background: var(--ds-surface-2); }
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] .ds-upload-dropzone__icon { width: calc(var(--ds-icon-size-rail) * 2); height: calc(var(--ds-icon-size-rail) * 2); padding: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink-muted); margin-block-end: var(--ds-space-3); }
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] .ds-upload-dropzone__instruction { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); }
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] .ds-upload-dropzone__instruction span[data-link] { color: inherit; text-decoration: none; }
.ds-upload-dropzone[data-variant="attio-icon-drop-area"] .ds-upload-dropzone__alternative { display: none; }

/* ---- fresha-tinted-block — a solid lilac block, no border: a cloud glyph over one link-coloured "Upload CSV file" */
.ds-upload-dropzone[data-variant="fresha-tinted-block"] { --_min-h: 168px; border-color: transparent; border-radius: var(--ds-radius-sm); background: var(--ds-accent-tint); }
.ds-upload-dropzone[data-variant="fresha-tinted-block"]:hover { border-color: transparent; background: var(--ds-accent-soft); }
.ds-upload-dropzone[data-variant="fresha-tinted-block"] :is(.ds-upload-dropzone__icon, .ds-upload-dropzone__instruction) { color: var(--ds-accent-ink); }
.ds-upload-dropzone[data-variant="fresha-tinted-block"] .ds-upload-dropzone__instruction { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); }
.ds-upload-dropzone[data-variant="fresha-tinted-block"] .ds-upload-dropzone__instruction span[data-link] { color: inherit; }
.ds-upload-dropzone[data-variant="fresha-tinted-block"] .ds-upload-dropzone__alternative { display: none; }

/* ---- honeybook-browse-link — a compact dashed well with a sheet glyph: "Drag and drop your files here or Browse files" + ".csv, .xlsx or .xls" */
.ds-upload-dropzone[data-variant="honeybook-browse-link"] { --_min-h: 132px; border-color: var(--ds-rule); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); gap: var(--ds-space-0-5); }
.ds-upload-dropzone[data-variant="honeybook-browse-link"] .ds-upload-dropzone__icon { color: var(--ds-success-ink); }
.ds-upload-dropzone[data-variant="honeybook-browse-link"] .ds-upload-dropzone__instruction { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); }
.ds-upload-dropzone[data-variant="honeybook-browse-link"] .ds-upload-dropzone__alternative { display: none; }
.ds-upload-dropzone[data-variant="honeybook-browse-link"] .ds-upload-dropzone__constraint { font-size: var(--ds-text-xs); }

/* ---- notion-dashed-accent — the accent-coloured dashed edge on a faint accent ground; semibold title, one-line constraint */
.ds-upload-dropzone[data-variant="notion-dashed-accent"] { --_min-h: 148px; border-color: var(--ds-accent-line); border-radius: var(--ds-radius-sm); background: var(--ds-accent-tint); }
.ds-upload-dropzone[data-variant="notion-dashed-accent"]:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-upload-dropzone[data-variant="notion-dashed-accent"] .ds-upload-dropzone__icon { color: var(--ds-accent-ink); }
.ds-upload-dropzone[data-variant="notion-dashed-accent"] .ds-upload-dropzone__instruction { font-size: var(--ds-text-sm); }
.ds-upload-dropzone[data-variant="notion-dashed-accent"] .ds-upload-dropzone__alternative { display: none; }
.ds-upload-dropzone[data-variant="notion-dashed-accent"] .ds-upload-dropzone__constraint { font-size: var(--ds-text-xs); }

/* ---- bonsai-attachment-field — not a zone at all: an input-shaped row with a file glyph and a link "Include a file attachment" */
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] {
  --_min-h: var(--ds-control-h);
  flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--ds-space-1) var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3); border-style: solid; border-color: var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); text-align: start; font-size: var(--ds-text-sm);
}
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] .ds-upload-dropzone__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); margin: 0; color: var(--ds-ink-link); }
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] .ds-upload-dropzone__instruction { font-weight: var(--ds-weight-medium); color: var(--ds-ink-link); }
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] .ds-upload-dropzone__instruction span[data-link] { text-decoration: none; }
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] :is(.ds-upload-dropzone__alternative, .ds-upload-dropzone__constraint) { display: none; }
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] .ds-upload-dropzone__progress { flex: 1 1 100%; width: 100%; }
.ds-upload-dropzone[data-variant="bonsai-attachment-field"] .ds-upload-dropzone__error { flex: 1 1 100%; }

/* ---- J10 states, restated over the variants' fills (same tokens as the base states) */
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[data-state="dragging"] { border-style: solid; border-color: var(--ds-accent); background: var(--ds-accent-tint); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[data-state="dragging"] :is(.ds-upload-dropzone__instruction, .ds-upload-dropzone__icon) { color: var(--ds-accent-ink); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[aria-busy="true"] { border-style: solid; border-color: var(--ds-border); background: var(--ds-surface); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"])[aria-busy="true"] .ds-upload-dropzone__browse { visibility: hidden; }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[aria-invalid="true"] { border-style: solid; border-color: var(--ds-danger); background: var(--ds-danger-tint); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[aria-invalid="true"] .ds-upload-dropzone__error { max-width: 60ch; text-align: start; }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[aria-disabled="true"] { border-color: var(--ds-rule); background: var(--ds-surface-3); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"], [data-variant="fresha-tinted-block"], [data-variant="honeybook-browse-link"], [data-variant="notion-dashed-accent"], [data-variant="bonsai-attachment-field"])[aria-disabled="true"] :is(.ds-upload-dropzone__icon, .ds-upload-dropzone__instruction, .ds-upload-dropzone__browse) { color: var(--ds-ink-faint); }
.ds-upload-dropzone:is([data-variant="jstov"], [data-variant="attio-icon-drop-area"])[aria-disabled="true"] .ds-upload-dropzone__browse { background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; }


/* components/validation-marks/validation-marks.css */
/* ============================================================================
   validation-marks — Required / optional / error / warning marks     (taxonomy §E · common · S0)
   Root: .ds-validation-marks (<span> inline · <p>/<div> below a control · overlay for the outline placement).
     ONE mark per instance; the field's own border (text-input aria-invalid → --ds-danger) is the other signal.
     Two signals per problem, never four (retool-12 weakness).
   Axes:  data-kind="required|optional|error|warning|success|info"      what the mark says
          data-placement="inline|below|gutter|outline"                  after the label · under the control ·
                                                                        in the row's left gutter · dashed overlay on a component
          data-size="sm"                                                text-xs, 12 px glyph (table cells, dense inspectors)
   Parts: __glyph (16 px stroke icon; 20 px in the gutter) · __text (the message) · __chip (outline placement: corner label)
   Variants: jstov (unmarked root — "optional" word instead of asterisks; error = glyph + sentence under the control) ·
     retool-red-asterisk-every-field · manychat-109-warning-gutter · retool-12-four-signal-error
   States: rest · aria-live="polite" / role="alert" containers (JS swaps the text) · :empty renders nothing
   Private knobs: --_hue --_ink --_gap --_glyph
   ========================================================================== */

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

.ds-validation-marks {
  --_hue:   var(--ds-danger);                     /* the glyph                       */
  --_ink:   var(--ds-danger-ink);                 /* the words (≥ 4.5:1 on surface)  */
  --_gap:   var(--ds-space-1-5);
  --_glyph: var(--ds-icon-size);                  /* 16; gutter = 20 (icon-size-row) */
  display: inline-flex;
  align-items: flex-start;
  gap: var(--_gap);
  max-inline-size: 100%;
  min-inline-size: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--_ink);
}
.ds-validation-marks:empty { display: none; }
.ds-validation-marks__glyph {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--_glyph);
  block-size: var(--_glyph);
  margin-block-start: 1px;                        /* optical centre on the first line of a 12/1.45 message */
  color: var(--_hue);
}
.ds-validation-marks__glyph svg { inline-size: 100%; block-size: 100%; }
.ds-validation-marks__text { min-inline-size: 0; overflow-wrap: anywhere; }
.ds-validation-marks__text a { color: inherit; }
.ds-validation-marks[data-size="sm"] { --_glyph: 12px; font-size: var(--ds-text-xs); }

/* -- kinds ----------------------------------------------------------------------------------------- */
.ds-validation-marks[data-kind="error"]   { --_hue: var(--ds-danger);  --_ink: var(--ds-danger-ink); }
.ds-validation-marks[data-kind="warning"] { --_hue: var(--ds-warning); --_ink: var(--ds-warning-ink); }
.ds-validation-marks[data-kind="success"] { --_hue: var(--ds-success); --_ink: var(--ds-success-ink); }
.ds-validation-marks[data-kind="info"]    { --_hue: var(--ds-info);    --_ink: var(--ds-info-ink); }

/* required / optional: inline text marks after a label, in the label's own lane */
.ds-validation-marks[data-kind="required"],
.ds-validation-marks[data-kind="optional"] {
  display: inline;
  gap: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ds-validation-marks[data-kind="required"] { --_ink: var(--ds-danger-ink); color: var(--_ink); font-weight: var(--ds-weight-semibold); margin-inline-start: var(--ds-space-0-5); }
/* the house mark: the WORD "optional", muted, sentence case regardless of --ds-label-case, one space after the label */
.ds-validation-marks[data-kind="optional"] { --_ink: var(--ds-ink-muted); color: var(--_ink); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; margin-inline-start: var(--ds-space-1-5); }
.ds-validation-marks[data-kind="optional"]::before { content: "("; }
.ds-validation-marks[data-kind="optional"]::after  { content: ")"; }

/* -- placements ------------------------------------------------------------------------------------ */
/* below (default for messages): a block under the control, 6 px after it, in the field's text column */
.ds-validation-marks[data-placement="below"] { display: flex; margin-block-start: var(--ds-space-1-5); }

/* gutter: a 20 px glyph in the row's LEFT gutter, vertically centred; the words are visually hidden
   (and must still be linked via aria-describedby / a tooltip-affordance — a glyph alone is dead on touch) */
.ds-validation-marks[data-placement="gutter"] {
  --_glyph: var(--ds-icon-size-row);
  position: absolute;
  inset-inline-start: calc(-1 * (var(--_glyph) + var(--ds-space-2)));
  inset-block-start: 50%;
  transform: translateY(-50%);
  gap: 0;
}
.ds-validation-marks[data-placement="gutter"] .ds-validation-marks__glyph { margin-block-start: 0; }
.ds-validation-marks[data-placement="gutter"] .ds-validation-marks__text {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* outline: an overlay on a positioned component — 1 px dashed hue border + a faint tint wash + a corner chip.
   pointer-events none so the component stays usable; radius inherits from the host. */
.ds-validation-marks[data-placement="outline"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
  border: var(--ds-border-width) dashed var(--_hue);
  background: color-mix(in srgb, var(--ds-danger-tint) 45%, transparent);
  pointer-events: none;
}
.ds-validation-marks[data-placement="outline"][data-kind="warning"] { background: color-mix(in srgb, var(--ds-warning-tint) 45%, transparent); }
.ds-validation-marks[data-placement="outline"] .ds-validation-marks__glyph { display: none; }
.ds-validation-marks[data-placement="outline"] .ds-validation-marks__text {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ds-validation-marks__chip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  block-size: 18px;
  padding-inline: var(--ds-space-1-5);
  border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0;
  background: var(--_hue);
  color: var(--ds-ink-on-semantic);
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}
.ds-validation-marks__chip svg { inline-size: 12px; block-size: 12px; }
.ds-validation-marks[data-placement="outline"][data-kind="warning"] .ds-validation-marks__chip { color: var(--ds-ink-on-warning); }

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

/* retool: a red asterisk after every label (their pure #d92d20 → --ds-danger, not the darker text ink).
   Kept for fidelity; the taxonomy calls it out — six asterisks in a row carry no information. */
.ds-validation-marks[data-variant="retool-red-asterisk-every-field"] { --_ink: var(--ds-danger); font-weight: var(--ds-weight-regular); margin-inline-start: var(--ds-space-0-5); }

/* manychat: a 20 px triangle in the left gutter beside the child row that has no target; no words on screen
   (their weakness) — here the words are sr-only and the row must carry aria-describedby. Their triangle is red. */
.ds-validation-marks[data-variant="manychat-109-warning-gutter"] { --_hue: var(--ds-danger); --_ink: var(--ds-danger-ink); }

/* retool: dashed danger outline + faint pink wash + a red "⚠ name" chip on the erroring component (+ a toast —
   the fourth signal, which the house drops). Their chip is r3 white-on-red 11 px, top-left, outside the box. */
.ds-validation-marks[data-variant="retool-12-four-signal-error"] { --_hue: var(--ds-danger); }
.ds-validation-marks[data-variant="retool-12-four-signal-error"] .ds-validation-marks__chip { border-radius: var(--ds-radius-xs); transform: translate(-1px, calc(-100% - 2px)); }


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