/* ===========================================================================
   RST — the shared scales.

   One origin for the two scales that are pure numbers: radius and type.
   Both the catalog and the application declared them independently and
   identically, which is exactly the arrangement that drifts: a caps label
   was set at 0.08em on one side and 0.06em on the other for weeks before
   anyone noticed, because there was nothing to disagree with.

   Only radius and type live here. Colour does NOT, and should not be moved:
   the catalog names its semantic colours without a prefix (--text-primary,
   --surface-page) and the application namespaces its own (--rst-text-primary),
   deliberately, so that serving the catalog inside the application cannot
   collide. That isolation is load-bearing; this file does not touch it.

   The type tokens resolve --font-sans at their point of use, so each side
   keeps its own font stack — the catalog's and the application's differ in
   their fallbacks and both remain correct.
   =========================================================================== */
:root {
  /* radius */
  --rst-radius-none: 0px;
  --rst-radius-xs: 4px;
  --rst-radius-sm: 8px;
  --rst-radius-md: 12px;
  --rst-radius-lg: 16px;
  --rst-radius-xl: 20px;
  --rst-radius-2xl: 24px;
  --rst-radius-3xl: 32px;
  --rst-radius-4xl: 36px;
  --rst-radius-full: 999px;

  /* type */
  --rst-type-display-01: 600 72px/76px var(--font-sans);
  --rst-type-display-02: 600 56px/60px var(--font-sans);
  --rst-type-heading-01: 600 40px/48px var(--font-sans);
  --rst-type-heading-02: 600 32px/40px var(--font-sans);
  --rst-type-heading-03: 500 24px/32px var(--font-sans);
  --rst-type-heading-04: 500 20px/28px var(--font-sans);
  --rst-type-body-01: 400 16px/24px var(--font-sans);
  --rst-type-body-02: 400 14px/20px var(--font-sans);
  --rst-type-label-01: 500 14px/20px var(--font-sans);
  --rst-type-helper-01: 400 12px/16px var(--font-sans);
  --rst-type-caption-01: 500 11px/16px var(--font-sans);
  --rst-type-data-01: 400 14px/20px var(--font-sans);
  --rst-type-metric-03: 600 48px/52px var(--font-sans);
  --rst-type-code-01: 400 13px/20px var(--font-mono);
}
/* ===========================================================================
   RST Design System — Token layer
   Ported 1:1 from the design variable collections in
   the RST Design System.

   Collections:
     RST / Primitive      131 vars  (single mode — raw values)
     RST / Semantic        64 vars  (Light / Dark)
     RST / Material         7 vars  (Light / Dark)
     RST / Component       22 vars  (Light / Dark)
     RST / Visualization   18 vars  (Light / Dark)

   Architecture mirrors the design library exactly: primitives never change between modes,
   semantic/material/component/visualization tokens alias primitives and are
   redefined per mode. Components must only ever consume the upper layers.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. PRIMITIVE — mode independent
   --------------------------------------------------------------------------- */
:root {
  --color-neutral-0:   #ffffff;
  --color-neutral-10:  #f7f8f8;
  --color-neutral-20:  #eceeef;
  --color-neutral-30:  #dde0e2;
  --color-neutral-40:  #c7cbcf;
  --color-neutral-50:  #a8adb2;
  --color-neutral-60:  #858b91;
  --color-neutral-70:  #60666c;
  --color-neutral-80:  #3b4045;
  --color-neutral-90:  #202326;
  --color-neutral-100: #0b0c0d;

  --color-blue-10:  #f2f7ff;  --color-blue-20:  #e1edff;  --color-blue-30:  #c5dbff;
  --color-blue-40:  #9fc2ff;  --color-blue-50:  #72a3ff;  --color-blue-60:  #477ff4;
  --color-blue-70:  #2862d8;  --color-blue-80:  #1949ad;  --color-blue-90:  #123982;
  --color-blue-100: #0c285d;

  --color-cyan-10:  #eefcff;  --color-cyan-20:  #d7f8ff;  --color-cyan-30:  #b4f0fb;
  --color-cyan-40:  #86e4f4;  --color-cyan-50:  #4fd2e7;  --color-cyan-60:  #20b6cf;
  --color-cyan-70:  #118fa8;  --color-cyan-80:  #0d7085;  --color-cyan-90:  #0c5666;
  --color-cyan-100: #093d49;

  --color-orange-10:  #fff7ed; --color-orange-20:  #ffebd2; --color-orange-30:  #ffd6a4;
  --color-orange-40:  #ffb970; --color-orange-50:  #f7953e; --color-orange-60:  #df701e;
  --color-orange-70:  #b75412; --color-orange-80:  #8e3e0e; --color-orange-90:  #6b2e0b;
  --color-orange-100: #4a2008;

  --color-yellow-10:  #fffce8; --color-yellow-20:  #fff7c2; --color-yellow-30:  #ffec83;
  --color-yellow-40:  #ffdb3e; --color-yellow-50:  #f4c517; --color-yellow-60:  #d8a807;
  --color-yellow-70:  #ab8103; --color-yellow-80:  #816102; --color-yellow-90:  #5f4703;
  --color-yellow-100: #413003;

  --color-green-10:  #f0fbf5; --color-green-20:  #daf5e6; --color-green-30:  #b8eacf;
  --color-green-40:  #88d8ae; --color-green-50:  #53bf89; --color-green-60:  #2b9e68;
  --color-green-70:  #1d7e53; --color-green-80:  #176440; --color-green-90:  #124c32;
  --color-green-100: #0c3523;

  --color-red-10:  #fff4f3; --color-red-20:  #ffe2df; --color-red-30:  #ffc6c0;
  --color-red-40:  #f99b91; --color-red-50:  #ef6c61; --color-red-60:  #d9443b;
  --color-red-70:  #b82e28; --color-red-80:  #90231f; --color-red-90:  #6d1b19;
  --color-red-100: #4b1312;

  --color-purple-10:  #f9f5ff; --color-purple-20:  #eee5ff; --color-purple-30:  #ddceff;
  --color-purple-40:  #c4acff; --color-purple-50:  #a282fa; --color-purple-60:  #825eeb;
  --color-purple-70:  #6842ce; --color-purple-80:  #5232a8; --color-purple-90:  #402881;
  --color-purple-100: #2e1d5d;

  /* spacing */
  --spacing-0: 0px;    --spacing-2: 2px;   --spacing-4: 4px;   --spacing-8: 8px;
  --spacing-12: 12px;  --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-40: 40px;  --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px;

  /* radius — values live in packages/rst/tokens/scales.css */
  --radius-none: var(--rst-radius-none); --radius-xs: var(--rst-radius-xs);
  --radius-sm: var(--rst-radius-sm);     --radius-md: var(--rst-radius-md);
  --radius-lg: var(--rst-radius-lg);     --radius-xl: var(--rst-radius-xl);
  --radius-2xl: var(--rst-radius-2xl);   --radius-3xl: var(--rst-radius-3xl);
  --radius-4xl: var(--rst-radius-4xl);   --radius-full: var(--rst-radius-full);

  /* opacity / blur / border */
  --opacity-disabled: 0.38;
  --opacity-subtle: 0.64;
  --opacity-glass: 0.52;
  --opacity-glass-strong: 0.65;
  --blur-sm: 8px;   --blur-md: 16px;  --blur-glass: 24px;  --blur-glass-strong: 32px;
  --border-subtle: 1px;
  --border-strong: 2px;

  /* sizing */
  --sizing-icon-16: 16px; --sizing-icon-20: 20px;
  --sizing-icon-24: 24px; --sizing-icon-32: 32px;
  --sizing-control-sm: 32px; --sizing-control-md: 40px;
  --sizing-control-lg: 48px; --sizing-control-xl: 56px;

  /* grid */
  --grid-gutter-mobile: 16px;  --grid-gutter-tablet: 24px;  --grid-gutter-desktop: 32px;
  --grid-columns-mobile: 4;    --grid-columns-tablet: 8;    --grid-columns-desktop: 16;

  /* elevation — from the RST/Elevation effect styles */
  --elevation-0: none;
  --elevation-1: 0 4px 12px 0 rgba(0,0,0,0.08);
  --elevation-2: 0 10px 24px 0 rgba(0,0,0,0.10);
  --elevation-3: 0 18px 40px 0 rgba(0,0,0,0.14);

  /* type — from the published RST text styles */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-01:  var(--rst-type-display-01);
  --type-display-02:  var(--rst-type-display-02);
  --type-heading-01:  var(--rst-type-heading-01);
  --type-heading-02:  var(--rst-type-heading-02);
  --type-heading-03:  var(--rst-type-heading-03);
  --type-heading-04:  var(--rst-type-heading-04);
  --type-body-01:  var(--rst-type-body-01);
  --type-body-02:  var(--rst-type-body-02);
  --type-label-01:  var(--rst-type-label-01);
  --type-helper-01:  var(--rst-type-helper-01);
  --type-caption-01:  var(--rst-type-caption-01);
  --type-data-01:  var(--rst-type-data-01);
  --type-metric-03:  var(--rst-type-metric-03);
  --type-code-01:  var(--rst-type-code-01);

  --motion-duration-fast: 150ms;
  --motion-duration-standard: 300ms;
  --motion-duration-reveal: 600ms;
  --motion-duration-slow: 800ms;
  --motion-stagger-tight: 60ms;
  --motion-stagger-standard: 100ms;
  --motion-stagger-relaxed: 150ms;
  /* Compatibility for existing catalog components. */
  --motion-fast: var(--motion-duration-fast);
  --motion-base: var(--motion-duration-standard);
  --motion-slow: var(--motion-duration-slow);
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ---------------------------------------------------------------------------
   2. SEMANTIC / MATERIAL / COMPONENT / VISUALIZATION — Light mode
   Declared on bare :root so the un-stamped (system) state always resolves.

   [data-theme-scope="light"] shares this block rather than copying it. It lets
   a single region of the page hold the Light values while the rest of the page
   follows the reader's own theme, which is what the Light and Dark comparison
   boards need. Nothing about the markup inside changes — only which set of
   variable values it resolves against, the same way a the design library frame changes mode.
   --------------------------------------------------------------------------- */
:root,
[data-theme-scope="light"] {
  /* semantic — background & surface */
  --background-primary:   #f7f8fa;
  --background-secondary: #fafafb;
  --background-inverse:   var(--color-neutral-100);
  --background-page:      #f7f8fa;
  --background-surface:   var(--surface-primary);
  --background-elevated:  var(--surface-secondary);
  --surface-primary:      #ffffff;
  --surface-secondary:    #f8f9fa;
  --surface-elevated:     var(--surface-secondary);
  --surface-glass:        var(--color-neutral-0);
  --surface-inverse:      var(--color-neutral-100);
  --surface-page:         #fafafb;
  --surface-base:         #fafafb;
  --surface-subtle:       #f8f9fa;
  --surface-interactive:  var(--surface-secondary);
  --surface-selected:     var(--color-blue-20);

  /* semantic — text & icon */
  --text-primary:   var(--color-neutral-100);
  --text-secondary: var(--color-neutral-70);
  --text-tertiary:  var(--color-neutral-60);
  --text-helper:    var(--color-neutral-60);
  --text-inverse:   var(--color-neutral-0);
  --text-inverse-muted: var(--color-neutral-30);
  --text-disabled:  var(--color-neutral-50);
  --icon-primary:   var(--color-neutral-100);
  --icon-secondary: var(--color-neutral-70);
  --icon-inverse:   var(--color-neutral-0);
  --icon-disabled:  var(--color-neutral-50);

  /* semantic — border */
  --border-subtle-color:  var(--color-neutral-20);
  --border-strong-color:  var(--color-neutral-50);
  --border-interactive:   var(--color-blue-70);
  --border-default:       var(--color-neutral-20);

  /* semantic — interactive */
  --interactive-primary:       var(--color-blue-70);
  --interactive-primary-hover: var(--color-blue-80);
  --interactive-hover:         var(--color-blue-80);
  --interactive-active:        var(--color-blue-70);
  --interactive-pressed:       var(--color-blue-70);
  --interactive-selected:      var(--color-blue-20);
  --interactive-disabled:      var(--color-neutral-30);
  --focus-ring:                var(--color-blue-60);

  /* semantic — selected-state foreground.
     Two families, because there are two kinds of selected surface.
       *-on-primary   sits on a STRONG primary fill (pagination current,
                      calendar selected day, primary button).
       *-on-selected  sits on a SOFT selected tint (nav rows, tabs pill,
                      menu and select options, segmented controls).
     Consumers must never reach past these to --interactive-primary or
     --text-inverse directly: that is what produced blue-on-blue in Dark. */
  --text-on-primary:   var(--color-neutral-0);
  --icon-on-primary:   var(--color-neutral-0);
  --text-on-selected:  var(--color-blue-80);
  --icon-on-selected:  var(--color-blue-80);

  /* semantic — status */
  --support-success: var(--color-green-70);
  --support-warning: var(--color-orange-60);
  --support-error:   var(--color-red-60);
  --support-info:    var(--color-blue-60);
  --status-success:  var(--color-green-70);
  --status-warning:  var(--color-orange-60);
  --status-error:    var(--color-red-60);
  --status-info:     var(--color-blue-60);

  /* semantic — soft status fills (added in repair pass 1) */
  --status-neutral-soft: var(--color-neutral-10);
  --status-info-soft:    var(--color-blue-20);
  --status-success-soft: var(--color-green-20);
  --status-warning-soft: var(--color-orange-20);
  --status-error-soft:   var(--color-red-20);

  /* semantic — brand */
  --brand-primary:         var(--color-blue-70);
  --brand-primary-hover:   var(--color-blue-80);
  --brand-primary-soft:    var(--color-blue-20);
  --brand-secondary:       var(--color-purple-60);
  --brand-secondary-hover: var(--color-purple-70);
  --brand-secondary-soft:  var(--color-purple-20);
  --brand-accent:          var(--color-cyan-60);
  --brand-accent-soft:     var(--color-cyan-20);
  --brand-warm:            var(--color-orange-50);
  --brand-warm-soft:       var(--color-orange-20);
  --brand-positive-accent: var(--color-green-50);

  /* material */
  --material-solid:        var(--color-neutral-0);
  --material-elevated:     var(--color-neutral-0);
  --material-glass:        rgba(255,255,255,0.52);
  --material-glass-strong: rgba(255,255,255,0.65);
  --material-gradient:     linear-gradient(135deg, var(--color-blue-20), var(--color-purple-20));
  --material-inverse:      var(--color-neutral-100);
  --material-interactive:  var(--color-blue-60);

  /* component */
  --button-primary-background: var(--color-blue-70);
  --button-primary-hover:      var(--color-blue-80);
  --button-primary-hover-border: var(--color-blue-80);
  --button-primary-text:       var(--color-neutral-0);
  --button-primary-border:     var(--color-blue-70);
  --button-glass-background:   var(--color-neutral-0);
  --button-glass-text:         var(--color-neutral-100);
  --card-background: var(--surface-primary);
  --card-text:       var(--color-neutral-100);
  --card-border:     rgba(15,23,42,0.08);
  --icon-button-background: var(--color-neutral-100);
  --icon-button-icon:       var(--color-neutral-0);
  --input-background: var(--color-neutral-0);
  --input-border:     var(--color-neutral-30);
  --navigation-background: var(--color-neutral-0);
  --overlay-background:    var(--color-neutral-0);
  --card-radius: var(--radius-3xl);
  --card-padding: var(--spacing-24);
  --button-radius: var(--radius-md);
  --button-radius-pill: var(--radius-full);
  --input-radius: var(--radius-md);
  --navigation-radius: var(--radius-lg);
  --overlay-radius: var(--radius-3xl);
  --chart-stroke-width: 1px;

  /* visualization */
  --data-1: var(--color-blue-60);
  --data-2: var(--color-cyan-60);
  --data-3: var(--color-orange-50);
  --data-4: var(--color-purple-60);
  --data-5: var(--color-green-60);
  --data-negative: var(--color-red-60);
  --chart-series-01: var(--color-blue-60);
  --chart-series-02: var(--color-orange-50);
  --chart-series-03: var(--color-green-60);
  --chart-series-04: var(--color-purple-60);
  --chart-series-05: var(--color-cyan-60);
  --chart-grid:  var(--color-neutral-20);
  --chart-axis:  var(--color-neutral-50);
  --chart-label: var(--color-neutral-70);
  --chart-tooltip-background: var(--color-neutral-0);
  --chart-tooltip-text: var(--color-neutral-100);

  --scrim: rgba(11,12,13,0.44);
  color-scheme: light;

  /* --- Phase A: semantic gradient stops (mode-aware) ------------------------ */
  --gradient-primary-from: var(--color-blue-70);
  --gradient-primary-to:   var(--color-purple-70);
  --gradient-hero-from:    var(--color-purple-60);
  --gradient-hero-to:      var(--color-orange-50);
  --gradient-ai-from:      var(--color-blue-70);
  --gradient-ai-to:        var(--color-cyan-60);
  --gradient-insight-from: var(--color-cyan-60);
  --gradient-insight-to:   var(--color-green-50);
  --gradient-soft-from:    var(--color-blue-20);
  --gradient-soft-mid:     var(--color-purple-20);
  --gradient-soft-to:      var(--color-orange-20);
  --gradient-ambient-from: var(--color-green-30);
  --gradient-ambient-mid:  var(--color-cyan-40);
  --gradient-ambient-to:   var(--color-purple-40);
  --gradient-glass-from:   var(--color-neutral-0);
  --gradient-glass-mid:    var(--color-neutral-20);
  --gradient-glass-to:     var(--color-neutral-30);

  /* Ready-to-use gradients composed from the stops above. */
  --gradient-primary: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to));
  --gradient-hero:    linear-gradient(135deg, var(--gradient-hero-from), var(--gradient-hero-to));
  --gradient-ai:      linear-gradient(135deg, var(--gradient-ai-from), var(--gradient-ai-to));
  --gradient-insight: linear-gradient(135deg, var(--gradient-insight-from), var(--gradient-insight-to));
  --gradient-soft:    linear-gradient(135deg, var(--gradient-soft-from), var(--gradient-soft-mid), var(--gradient-soft-to));
  --gradient-ambient: linear-gradient(135deg, var(--gradient-ambient-from), var(--gradient-ambient-mid), var(--gradient-ambient-to));
  --gradient-glass:   linear-gradient(135deg, var(--gradient-glass-from), var(--gradient-glass-mid), var(--gradient-glass-to));

  /* The five named RST brand gradients. These are aliases, not new values:
     the stops are the Phase A semantic gradient tokens, so a brand gradient
     and its underlying gradient can never drift apart. */
  --gradient-aurora:    var(--gradient-ai);        /* Blue to Cyan  */
  --gradient-vibe:      var(--gradient-hero);      /* Purple to Warm Orange */
  --gradient-positive:  var(--gradient-insight);   /* Cyan to Positive Green */
  --gradient-soft-vibe: linear-gradient(135deg, var(--gradient-soft-mid), var(--gradient-soft-to));

  /* Ink for text sitting directly on a gradient.

     --text-on-gradient is the ink for the SOFT gradient family (Soft, Soft
     Vibe, Ambient, Glass, and the gradient button material). Those gradients
     are pale in Light and deep in Dark, so their ink has to flip with the
     mode — a fixed dark ink is legible on the Light pair and unreadable on
     the Dark one. --text-on-gradient-strong is the ink for the SATURATED
     family (Primary, Hero, AI, Insight), which is dark in both modes and so
     keeps a constant light ink.

     -muted is the same ink one step down in emphasis, for supporting copy,
     eyebrows and evidence lines that must not fall back to --text-secondary:
     that token is tuned for the page surface, not for a gradient. */
  --text-on-gradient:        var(--color-neutral-100);
  --text-on-gradient-muted:  var(--color-neutral-70);
  --text-on-gradient-strong: var(--color-neutral-0);

  /* Dark translucent scrim material — dark in both modes. */
  --material-dark-glass: rgba(32, 35, 38, 0.58);
}

/* ---------------------------------------------------------------------------
   3. Dark mode — only the upper layers are redefined, exactly as in the design library.
      Guarded so an explicit light choice always beats a dark OS setting.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-primary:   #0b0d0e;
    --background-secondary: #0f1213;
    --background-inverse:   var(--color-neutral-0);
    --background-page:      #0b0d0e;
    --background-surface:   var(--surface-primary);
    --background-elevated:  var(--surface-secondary);
    --surface-primary:      #111416;
    --surface-secondary:    #171a1c;
    --surface-elevated:     var(--surface-secondary);
    --surface-glass:        var(--surface-secondary);
    --surface-inverse:      var(--color-neutral-0);
    --surface-page:         #0f1213;
    --surface-base:         #0f1213;
    --surface-subtle:       #171a1c;
    --surface-interactive:  var(--surface-secondary);
    --surface-selected:     var(--color-blue-80);

    --text-primary:   var(--color-neutral-0);
    --text-secondary: var(--color-neutral-30);
    --text-tertiary:  var(--color-neutral-40);
    --text-helper:    var(--color-neutral-40);
    --text-inverse:   var(--color-neutral-100);
    --text-inverse-muted: var(--color-neutral-70);
    --text-disabled:  var(--color-neutral-50);
    --icon-primary:   var(--color-neutral-0);
    --icon-secondary: var(--color-neutral-30);
    --icon-inverse:   var(--color-neutral-100);
    --icon-disabled:  var(--color-neutral-50);

    /* One step closer to the surface it sits on. At neutral-70 a hairline
       on a neutral-90 panel read as an outline rather than a division,
       which is most of why Dark looked heavier than Light. */
    --border-subtle-color: var(--color-neutral-80);
    --border-strong-color: var(--color-neutral-40);
    --border-interactive:  var(--color-blue-70);
    --border-default:      var(--color-neutral-70);

    --interactive-primary:       var(--color-blue-70);
    --interactive-primary-hover: var(--color-blue-80);
    --interactive-hover:         var(--color-blue-80);

    /* Same CTA treatment as the explicit Dark block, for theme = system. */
    --button-primary-background: linear-gradient(135deg, var(--color-blue-70), var(--color-purple-60));
    --button-primary-hover:      linear-gradient(135deg, var(--color-blue-80), var(--color-purple-70));
    --button-primary-border:     transparent;
    --button-primary-hover-border: transparent;
    --interactive-active:        var(--color-blue-40);
    --interactive-pressed:       var(--color-blue-40);
    --interactive-selected:      var(--color-blue-80);
    --interactive-disabled:      var(--color-neutral-70);
    --focus-ring:                var(--color-cyan-40);

    --text-on-primary:   var(--color-neutral-0);
    --icon-on-primary:   var(--color-neutral-0);
    --text-on-selected:  var(--color-blue-20);
    --icon-on-selected:  var(--color-blue-20);

    --support-success: var(--color-green-40);
    --support-warning: var(--color-orange-40);
    --support-error:   var(--color-red-40);
    --support-info:    var(--color-blue-40);
    --status-success:  var(--color-green-40);
    --status-warning:  var(--color-orange-40);
    --status-error:    var(--color-red-40);
    --status-info:     var(--color-blue-40);

    --status-neutral-soft: var(--color-neutral-90);
    --status-info-soft:    var(--color-blue-90);
    --status-success-soft: var(--color-green-90);
    --status-warning-soft: var(--color-orange-90);
    --status-error-soft:   var(--color-red-90);

    --material-solid:        var(--color-neutral-90);
    --material-elevated:     var(--surface-secondary);
    --material-glass:        rgba(31,36,41,0.52);
    --material-glass-strong: rgba(31,36,41,0.65);
    --material-gradient:     linear-gradient(135deg, var(--color-purple-70), var(--color-blue-80));
    --material-inverse:      var(--color-neutral-0);
    --material-interactive:  var(--color-cyan-40);

    --button-glass-background: var(--surface-secondary);
    --button-glass-text:       var(--color-neutral-0);
    --card-background: var(--surface-primary);
    --card-text:       var(--color-neutral-0);
    --card-border:     rgba(255,255,255,0.08);
    --icon-button-background: var(--color-neutral-0);
    --icon-button-icon:       var(--color-neutral-100);
    --input-background: var(--surface-primary);
    --input-border:     var(--color-neutral-60);
    --navigation-background: var(--surface-page);
    --overlay-background:    var(--surface-secondary);

    --data-1: var(--color-blue-40);
    --data-2: var(--color-cyan-40);
    --data-3: var(--color-orange-40);
    --data-4: var(--color-purple-40);
    --data-5: var(--color-green-40);
    --data-negative: var(--color-red-40);
    --chart-series-01: var(--color-blue-40);
    --chart-series-02: var(--color-orange-40);
    --chart-series-03: var(--color-green-40);
    --chart-series-04: var(--color-purple-40);
    --chart-series-05: var(--color-cyan-40);
    --chart-grid:  var(--color-neutral-70);
    --chart-axis:  var(--color-neutral-50);
    --chart-label: var(--color-neutral-30);
    --chart-tooltip-background: var(--color-neutral-80);
    --chart-tooltip-text: var(--color-neutral-0);

    --elevation-1: 0 4px 12px 0 rgba(0,0,0,0.44);
    --elevation-2: 0 10px 24px 0 rgba(0,0,0,0.52);
    --elevation-3: 0 18px 40px 0 rgba(0,0,0,0.60);
    --scrim: rgba(0,0,0,0.64);
    /* --- Phase A: semantic gradient stops ---------------------------------- */
    --gradient-primary-from: var(--color-blue-80);
    --gradient-primary-to:   var(--color-purple-80);
    --gradient-hero-from:    var(--color-purple-80);
    --gradient-hero-to:      var(--color-orange-70);
    --gradient-ai-from:      var(--color-blue-80);
    --gradient-ai-to:        var(--color-cyan-80);
    --gradient-insight-from: var(--color-cyan-80);
    --gradient-insight-to:   var(--color-green-70);
    --gradient-soft-from:    var(--color-blue-90);
    --gradient-soft-mid:     var(--color-purple-90);
    --gradient-soft-to:      var(--color-orange-90);
    --gradient-ambient-from: var(--color-green-90);
    --gradient-ambient-mid:  var(--color-cyan-90);
    --gradient-ambient-to:   var(--color-purple-90);
    --gradient-glass-from:   var(--color-neutral-80);
    --gradient-glass-mid:    var(--color-neutral-90);
    --gradient-glass-to:     var(--color-neutral-100);
    --text-on-gradient:        var(--color-neutral-0);
    --text-on-gradient-muted:  var(--color-neutral-20);
    --text-on-gradient-strong: var(--color-neutral-0);
    --material-dark-glass: rgba(11, 12, 13, 0.58);
    color-scheme: dark;
  }
}

/* Explicit dark choice wins in the other direction too, and the same values
   serve a Dark-scoped region inside an otherwise Light page. */
:root[data-theme="dark"],
[data-theme-scope="dark"] {
  --background-primary:   #0b0d0e;
  --background-secondary: #0f1213;
  --background-inverse:   var(--color-neutral-0);
  --background-page:      #0b0d0e;
  --background-surface:   var(--surface-primary);
  --background-elevated:  var(--surface-secondary);
  --surface-primary:      #111416;
  --surface-secondary:    #171a1c;
  --surface-elevated:     var(--surface-secondary);
  --surface-glass:        var(--surface-secondary);
  --surface-inverse:      var(--color-neutral-0);
  --surface-page:         #0f1213;
  --surface-base:         #0f1213;
  --surface-subtle:       #171a1c;
  --surface-interactive:  var(--surface-secondary);
  --surface-selected:     var(--color-blue-80);

  --text-primary:   var(--color-neutral-0);
  --text-secondary: var(--color-neutral-30);
  --text-tertiary:  var(--color-neutral-40);
  --text-helper:    var(--color-neutral-40);
  --text-inverse:   var(--color-neutral-100);
  --text-inverse-muted: var(--color-neutral-70);
  --text-disabled:  var(--color-neutral-50);
  --icon-primary:   var(--color-neutral-0);
  --icon-secondary: var(--color-neutral-30);
  --icon-inverse:   var(--color-neutral-100);
  --icon-disabled:  var(--color-neutral-50);

  --border-subtle-color: var(--color-neutral-80);
  --border-strong-color: var(--color-neutral-40);
  --border-interactive:  var(--color-blue-70);
  --border-default:      var(--color-neutral-70);

  --interactive-primary:       var(--color-blue-70);
  --interactive-primary-hover: var(--color-blue-80);
  --interactive-hover:         var(--color-blue-80);
  --interactive-active:        var(--color-blue-40);
  --interactive-pressed:       var(--color-blue-40);
  --interactive-selected:      var(--color-blue-80);
  --interactive-disabled:      var(--color-neutral-70);
  --focus-ring:                var(--color-cyan-40);

  --text-on-primary:   var(--color-neutral-0);
  --icon-on-primary:   var(--color-neutral-0);
  --text-on-selected:  var(--color-blue-20);
  --icon-on-selected:  var(--color-blue-20);

  --support-success: var(--color-green-40);
  --support-warning: var(--color-orange-40);
  --support-error:   var(--color-red-40);
  --support-info:    var(--color-blue-40);
  --status-success:  var(--color-green-40);
  --status-warning:  var(--color-orange-40);
  --status-error:    var(--color-red-40);
  --status-info:     var(--color-blue-40);

  --status-neutral-soft: var(--color-neutral-90);
  --status-info-soft:    var(--color-blue-90);
  --status-success-soft: var(--color-green-90);
  --status-warning-soft: var(--color-orange-90);
  --status-error-soft:   var(--color-red-90);

  --material-solid:        var(--color-neutral-90);
  --material-elevated:     var(--surface-secondary);
  --material-glass:        rgba(31,36,41,0.52);
  --material-glass-strong: rgba(31,36,41,0.65);
  --material-gradient:     linear-gradient(135deg, var(--color-purple-70), var(--color-blue-80));
  --material-inverse:      var(--color-neutral-0);
  --material-interactive:  var(--color-cyan-40);

  --button-glass-background: var(--surface-secondary);
  --button-glass-text:       var(--color-neutral-0);
  --card-background: var(--surface-primary);
  --card-text:       var(--color-neutral-0);
  --card-border:     rgba(255,255,255,0.08);
  --icon-button-background: var(--color-neutral-0);
  --icon-button-icon:       var(--color-neutral-100);
  --input-background: var(--surface-primary);
  --input-border:     var(--color-neutral-60);
  --navigation-background: var(--surface-page);
  --overlay-background:    var(--surface-secondary);

  --data-1: var(--color-blue-40);
  --data-2: var(--color-cyan-40);
  --data-3: var(--color-orange-40);
  --data-4: var(--color-purple-40);
  --data-5: var(--color-green-40);
  --data-negative: var(--color-red-40);
  --chart-series-01: var(--color-blue-40);
  --chart-series-02: var(--color-orange-40);
  --chart-series-03: var(--color-green-40);
  --chart-series-04: var(--color-purple-40);
  --chart-series-05: var(--color-cyan-40);
  --chart-grid:  var(--color-neutral-70);
  --chart-axis:  var(--color-neutral-50);
  --chart-label: var(--color-neutral-30);
  --chart-tooltip-background: var(--color-neutral-80);
  --chart-tooltip-text: var(--color-neutral-0);

  --elevation-1: 0 4px 12px 0 rgba(0,0,0,0.44);
  --elevation-2: 0 10px 24px 0 rgba(0,0,0,0.52);
  --elevation-3: 0 18px 40px 0 rgba(0,0,0,0.60);
  --scrim: rgba(0,0,0,0.64);
  /* --- Phase A: semantic gradient stops ---------------------------------- */
  --gradient-primary-from: var(--color-blue-80);
  --gradient-primary-to:   var(--color-purple-80);
  --gradient-hero-from:    var(--color-purple-80);
  --gradient-hero-to:      var(--color-orange-70);
  --gradient-ai-from:      var(--color-blue-80);
  --gradient-ai-to:        var(--color-cyan-80);
  --gradient-insight-from: var(--color-cyan-80);
  --gradient-insight-to:   var(--color-green-70);
  --gradient-soft-from:    var(--color-blue-90);
  --gradient-soft-mid:     var(--color-purple-90);
  --gradient-soft-to:      var(--color-orange-90);
  --gradient-ambient-from: var(--color-green-90);
  --gradient-ambient-mid:  var(--color-cyan-90);
  --gradient-ambient-to:   var(--color-purple-90);
  --gradient-glass-from:   var(--color-neutral-80);
  --gradient-glass-mid:    var(--color-neutral-90);
  --gradient-glass-to:     var(--color-neutral-100);
  --text-on-gradient:        var(--color-neutral-0);
  --text-on-gradient-muted:  var(--color-neutral-20);
  --text-on-gradient-strong: var(--color-neutral-0);
  --material-dark-glass: rgba(11, 12, 13, 0.58);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Composite gradients, recomposed per scope.

   A custom property whose value contains var() is substituted where that
   property computes, not where it is used. So a gradient composed on :root
   bakes in the root's stops and then inherits as a finished value — which
   means a [data-theme-scope] region would show the page's gradient rather than
   its own. The Light and Dark comparison found exactly that: Soft Vibe stayed
   pale inside a Dark-scoped panel.

   Re-declaring the composites on every scope root makes them compose against
   that root's own stops. The stops themselves are still declared once per
   mode; nothing below is a new value.
   --------------------------------------------------------------------------- */
:root,
[data-theme-scope] {
  --gradient-primary: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to));
  --gradient-hero:    linear-gradient(135deg, var(--gradient-hero-from), var(--gradient-hero-to));
  --gradient-ai:      linear-gradient(135deg, var(--gradient-ai-from), var(--gradient-ai-to));
  --gradient-insight: linear-gradient(135deg, var(--gradient-insight-from), var(--gradient-insight-to));
  --gradient-soft:    linear-gradient(135deg, var(--gradient-soft-from), var(--gradient-soft-mid), var(--gradient-soft-to));
  --gradient-ambient: linear-gradient(135deg, var(--gradient-ambient-from), var(--gradient-ambient-mid), var(--gradient-ambient-to));
  --gradient-glass:   linear-gradient(135deg, var(--gradient-glass-from), var(--gradient-glass-mid), var(--gradient-glass-to));

  --gradient-aurora:    linear-gradient(135deg, var(--gradient-ai-from), var(--gradient-ai-to));
  --gradient-vibe:      linear-gradient(135deg, var(--gradient-hero-from), var(--gradient-hero-to));
  --gradient-positive:  linear-gradient(135deg, var(--gradient-insight-from), var(--gradient-insight-to));
  --gradient-soft-vibe: linear-gradient(135deg, var(--gradient-soft-mid), var(--gradient-soft-to));
}

/* ---------------------------------------------------------------------------
   Brand-derived component aliases, recomposed per scope.

   Same substitution rule as the composite gradients above, one layer higher.
   The component aliases below were declared once, in the Light block, and the
   Dark blocks never restated them — they carry no colour of their own, so
   there was nothing to restate. But "declared once, in the Light block" means
   they COMPUTE on :root: --button-primary-background resolves :root's
   --color-blue-70 there and then inherits into every descendant as a finished
   colour.

   That is invisible until a region re-points the ramp under itself. Brand
   Studio does exactly that: its preview panels carry [data-brand-scope="my"],
   which redeclares --color-blue-70 and the rest of the ramps on the panel.
   Tokens that are restated per mode — --interactive-primary, its hover — then
   recompute on the panel and pick the brand up, which is why the secondary
   button and the hover states followed the chosen Primary. The filled primary
   button did not, because --button-primary-background had already been
   resolved at :root, one level above where the brand ramp starts. The Light
   panel escaped it only by accident: [data-theme-scope="light"] is on the same
   selector as the Light :root block, so the alias recomputed there anyway.

   Declaring these on every scope root fixes the binding rather than the
   symptom. They are pointed at the semantic layer instead of at raw ramp
   steps, which is what the comment on the selected-state tokens already asks
   consumers to do, and the resolved values are unchanged for default RST:
   --interactive-primary is blue-70 in both modes and --text-on-primary is
   neutral-0 in both modes, exactly what these aliases held before.
   --------------------------------------------------------------------------- */
:root,
[data-theme-scope],
[data-brand-scope] {
  /* semantic — brand */
  --brand-primary:         var(--color-blue-70);
  --brand-primary-hover:   var(--color-blue-80);
  --brand-primary-soft:    var(--color-blue-20);
  --brand-secondary:       var(--color-purple-60);
  --brand-secondary-hover: var(--color-purple-70);
  --brand-secondary-soft:  var(--color-purple-20);
  --brand-accent:          var(--color-cyan-60);
  --brand-accent-soft:     var(--color-cyan-20);
  --brand-warm:            var(--color-orange-50);
  --brand-warm-soft:       var(--color-orange-20);
  --brand-positive-accent: var(--color-green-50);

  /* component — the filled primary button and its derived states.

     Dark is where the primary CTA carries the brand gradient: Primary Blue to
     Secondary Purple, the two named brand tokens, at the same 135deg the rest
     of the gradient family uses. Light stays a solid Primary Blue (see :root)
     because a gradient on a white page reads as decoration rather than as the
     one action the screen wants. The border goes transparent so a solid rule
     does not cut across the ramp; every other state is inherited unchanged. */
  --button-primary-background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --button-primary-hover:      linear-gradient(135deg, var(--color-blue-80), var(--color-purple-70));
  --button-primary-hover-border: transparent;
  --button-primary-text:       var(--text-on-primary);
  --button-primary-border:     transparent;
}
/* RST Catalog — reset and typographic base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font: var(--type-body-01);
  background: var(--background-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--interactive-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* Shared, visible focus treatment — every interactive element uses it. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.rst-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.rst-skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--interactive-primary); color: var(--text-inverse);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font: var(--type-label-01); transition: top var(--motion-base) var(--ease-standard);
}
.rst-skip-link:focus { top: 16px; text-decoration: none; }

/* Type ramp utilities — 1:1 with the published RST text styles */
.rst-display-01 { font: var(--type-display-01); }
.rst-display-02 { font: var(--type-display-02); }
.rst-heading-01 { font: var(--type-heading-01); }
.rst-heading-02 { font: var(--type-heading-02); }
.rst-heading-03 { font: var(--type-heading-03); }
.rst-heading-04 { font: var(--type-heading-04); }
.rst-body-01    { font: var(--type-body-01); }
.rst-body-02    { font: var(--type-body-02); }
.rst-label-01   { font: var(--type-label-01); }
.rst-helper-01  { font: var(--type-helper-01); }
.rst-caption-01 { font: var(--type-caption-01); letter-spacing: 0.04em; }
.rst-data-01    { font: var(--type-data-01); font-variant-numeric: tabular-nums; }
.rst-code-01    { font: var(--type-code-01); }

/* ===========================================================================
   Icon sizing.

   Every glyph the RST icon library renders carries `.rst-icon`. An <svg> with
   a viewBox and no width or height has no intrinsic size, so without this rule
   a browser falls back to the 300x150 replaced-element default wherever a
   component happens not to style its icons. That is how a file glyph ends up
   460px square inside a list row.

   1em square is the right default: an icon beside text matches the text. Every
   component rule that sets an explicit size still wins, because a CSS
   declaration always beats a presentation attribute — and `flex: none` stops a
   glyph being stretched by the row it sits in.
   =========================================================================== */
/* Only when the glyph was rendered without an explicit size: a CSS width would
   otherwise beat the width attribute that RSTIcons(name, 20) puts there. */
.rst-icon:not([width]) { width: 1em; height: 1em; }
.rst-icon { flex: none; }

/* An icon-only control needs a glyph large enough to read inside its target.
   18px in a 36-40px button is the RST relationship; without this the glyph
   falls back to the 1em text size and looks lost in the middle of the box. */
.rst-iconbtn .rst-icon { width: 18px; height: 18px; }
/* RST Catalog — application shell: side nav, header, content column */

.rst-app {
  display: grid;
  grid-template-columns: var(--nav-width, 256px) minmax(0, 1fr);
  min-height: 100vh;
}
.rst-app[data-nav="collapsed"] { --nav-width: 72px; }

/* ---------------------------------------------------------- Side navigation */
.rst-sidenav {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navigation-background);
  border-right: var(--border-subtle) solid var(--border-subtle-color);
  z-index: 40;
}
.rst-sidenav__head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: var(--border-subtle) solid var(--border-subtle-color);
  min-height: 64px;
}
/* The Ejju IT mark. The artwork ships with its own transparent margin, so it
   needs no tile behind it — the box is sized here and the mark sits inside. */
.rst-logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  object-fit: contain;
}

/* Catalog footer. One line, quiet, outside the documentation flow. */
.rst-sitefoot {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--border-subtle);
  font: var(--type-helper-01); color: var(--text-helper);
}
.rst-sitefoot__mark { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
.rst-sidenav__title { display: flex; flex-direction: column; min-width: 0; }
.rst-sidenav__title b { font: var(--type-label-01); color: var(--text-primary); }
.rst-sidenav__title span { font: var(--type-helper-01); color: var(--text-helper); }
.rst-app[data-nav="collapsed"] .rst-sidenav__title,
.rst-app[data-nav="collapsed"] .rst-navsearch__label,
.rst-app[data-nav="collapsed"] .rst-navsearch__key,
.rst-app[data-nav="collapsed"] .rst-nav-group__label,
.rst-app[data-nav="collapsed"] #rst-count,
.rst-app[data-nav="collapsed"] .rst-nav-link span { display: none; }
/* In the icon rail a link is just its indicator dot, centred. */
.rst-app[data-nav="collapsed"] .rst-nav-link { justify-content: center; padding: 8px 0; border-left-color: transparent; }
.rst-app[data-nav="collapsed"] .rst-nav-dot { width: 7px; height: 7px; flex-basis: 7px; }
.rst-app[data-nav="collapsed"] .rst-sidenav__foot { justify-content: center; }
.rst-app[data-nav="collapsed"] .rst-sidenav__search { padding: 10px 0 6px; display: flex; justify-content: center; }
.rst-app[data-nav="collapsed"] .rst-navsearch { width: 42px; padding: 0; justify-content: center; }

/* ------------------------------------------------------------ nav search
   A navigation search control, not a feature card. 42px tall, the width of
   the rail minus its padding, an 18px glyph and the shortcut pinned right.
   Collapsed, the label and the shortcut leave the layout and what remains is
   a square icon action — no reserved empty text space. */
.rst-sidenav__search { padding: 10px 12px 6px; }
.rst-navsearch {
  width: 100%; height: 42px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-radius: var(--radius-md);
  background: var(--surface-subtle); color: var(--text-helper);
  border: var(--border-subtle) solid transparent; font: var(--type-body-02);
  cursor: pointer; text-align: left;
}
.rst-navsearch .rst-icon { width: 18px; height: 18px; }
.rst-navsearch__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rst-navsearch:hover { border-color: var(--border-subtle-color); color: var(--text-secondary); }
.rst-navsearch:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rst-navsearch kbd {
  flex: none; font: var(--type-caption-01); font-family: var(--font-mono);
  background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-xs); padding: 1px 5px; color: var(--text-helper);
}

.rst-sidenav__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 24px; }
.rst-nav-group { margin-bottom: 2px; }
.rst-nav-group__label {
  width: 100%; display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius-xs);
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-helper); cursor: pointer;
}
.rst-nav-group__label:hover { background: var(--surface-interactive); color: var(--text-secondary); }
.rst-nav-group__chevron {
  margin-left: auto; width: 14px; height: 14px; flex: 0 0 14px;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.rst-nav-group[data-open="false"] .rst-nav-group__chevron { transform: rotate(-90deg); }
.rst-nav-group[data-open="false"] .rst-nav-group__items { display: none; }
.rst-nav-group__items { list-style: none; }

.rst-nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 6px 14px; border-radius: var(--radius-xs);
  font: var(--type-body-02); color: var(--text-secondary);
  border-left: 2px solid transparent; margin: 1px 0;
}
.rst-nav-link:hover { background: var(--surface-interactive); color: var(--text-primary); text-decoration: none; }
.rst-nav-link[aria-current="true"] {
  background: var(--surface-selected);
  color: var(--text-on-selected);
  border-left-color: var(--interactive-primary);
  font-weight: 500;
}
.rst-nav-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.32; flex: 0 0 5px; }
.rst-nav-link[aria-current="true"] .rst-nav-dot { opacity: 1; }
.rst-nav-link__new {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; margin-left: 3px; padding: 2px 6px;
  border-radius: 999px; background: linear-gradient(110deg, #2862D8, #825EEB);
  color: #fff; font: 700 9px/1.25 var(--font-sans); letter-spacing: .045em;
}

.rst-sidenav__foot {
  border-top: var(--border-subtle) solid var(--border-subtle-color);
  padding: 10px 12px; display: flex; gap: 8px; align-items: center;
}

/* ------------------------------------------------------------- Page header */
.rst-main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

.rst-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(16px, 3vw, 40px);
  min-height: 64px;
  background: var(--background-page);
  border-bottom: var(--border-subtle) solid var(--border-subtle-color);
}
.rst-header__crumb { font: var(--type-body-02); color: var(--text-helper); display: flex; gap: 8px; align-items: center; min-width: 0; }
.rst-header__crumb b { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rst-header__spacer { margin-left: auto; }
.rst-header__actions { display: flex; align-items: center; gap: 8px; }

.rst-iconbtn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--icon-secondary);
  border: var(--border-subtle) solid transparent;
}
.rst-iconbtn:hover { background: var(--surface-interactive); color: var(--icon-primary); }
.rst-iconbtn svg { width: 18px; height: 18px; }

.rst-navtoggle { display: none; }

/* ------------------------------------------------------------ Content column */
.rst-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1120px;
  padding: 0 clamp(16px, 3vw, 40px);
  padding-block: 0 96px;
}

.rst-hero-doc { padding-block: 48px 8px; margin-bottom: 8px; }
.rst-hero-doc h1 { font: var(--type-heading-01); letter-spacing: -0.02em; }
.rst-hero-doc p { margin-top: 12px; max-width: 64ch; color: var(--text-secondary); font: var(--type-body-01); }
.rst-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 32px; font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); }
.rst-hero-meta b { color: var(--text-secondary); font-weight: 500; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .rst-app { grid-template-columns: var(--nav-width, 72px) minmax(0, 1fr); }
  .rst-app:not([data-nav="expanded"]) { --nav-width: 72px; }
  .rst-app:not([data-nav="expanded"]) .rst-sidenav__title,
  .rst-app:not([data-nav="expanded"]) .rst-sidenav__search,
  .rst-app:not([data-nav="expanded"]) .rst-nav-group__label,
  .rst-app:not([data-nav="expanded"]) #rst-count,
  .rst-app:not([data-nav="expanded"]) .rst-nav-link span { display: none; }
  .rst-app:not([data-nav="expanded"]) .rst-nav-link { justify-content: center; padding: 8px 0; border-left-color: transparent; }
  .rst-app:not([data-nav="expanded"]) .rst-nav-dot { width: 7px; height: 7px; flex-basis: 7px; }
  .rst-app:not([data-nav="expanded"]) .rst-sidenav__foot { justify-content: center; }
  .rst-app[data-nav="expanded"] { --nav-width: 256px; }
}

@media (max-width: 767px) {
  .rst-app { grid-template-columns: minmax(0, 1fr); }
  .rst-navtoggle { display: grid; }
  .rst-sidenav {
    position: fixed; inset: 0 auto 0 0; width: 284px; height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--ease-standard);
    box-shadow: var(--elevation-3);
  }
  .rst-app[data-nav="open"] .rst-sidenav { transform: translateX(0); }
  .rst-app .rst-sidenav__title,
  .rst-app .rst-sidenav__search,
  .rst-app .rst-nav-group__label,
  .rst-app .rst-nav-link span { display: revert; }
  .rst-nav-group__label { display: flex; }
  .rst-nav-link { display: flex; }
  .rst-navscrim {
    position: fixed; inset: 0; background: var(--scrim); z-index: 39;
    opacity: 0; pointer-events: none; transition: opacity var(--motion-base) var(--ease-standard);
  }
  .rst-app[data-nav="open"] .rst-navscrim { opacity: 1; pointer-events: auto; }
  .rst-main { grid-column: 1; }
  .rst-hero-doc { padding-block: 32px 8px; }
  .rst-hero-doc h1 { font: var(--type-heading-02); }
}

/* Header actions. A 40px target with a 20px glyph — the theme control is the
   one thing in the header people reach for repeatedly, and a 36px button with
   a 16px glyph reads as an afterthought. */
.rst-header__actions .rst-iconbtn { width: 40px; height: 40px; }
.rst-header__actions .rst-iconbtn .rst-icon { width: 20px; height: 20px; }
/* ===========================================================================
   RST Design System — component styles
   Anatomy, variant names, sizes and states mirror the library component sets.
   Every colour comes from the semantic / component token layer.
   =========================================================================== */

/* ============================================================ RST/Button ==== */
.rst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--button-radius);
  font: var(--type-label-01);
  border: var(--border-subtle) solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
  position: relative;
}
.rst-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* sizes */
.rst-btn[data-size="small"]  { height: 32px; padding: 0 12px; font: var(--type-body-02); font-weight: 500; }
.rst-btn[data-size="medium"] { height: 40px; padding: 0 16px; }
.rst-btn[data-size="large"]  { height: 48px; padding: 0 20px; font: var(--type-body-01); font-weight: 500; }
.rst-btn[data-size="xl"]     { height: 56px; padding: 0 28px; font: var(--type-heading-04); }
.rst-btn[data-size="small"] svg { width: 16px; height: 16px; }
.rst-btn[data-size="xl"] svg { width: 22px; height: 22px; }

/* types */
.rst-btn[data-type="primary"] { background: var(--button-primary-background); color: var(--button-primary-text); border-color: var(--button-primary-border); }
.rst-btn[data-type="primary"]:hover:not([disabled]) { background: var(--button-primary-hover); border-color: var(--button-primary-hover-border); }

.rst-btn[data-type="secondary"] { background: transparent; color: var(--interactive-primary); border-color: var(--interactive-primary); }
.rst-btn[data-type="secondary"]:hover:not([disabled]) { background: var(--brand-primary-soft); }
:root[data-theme="dark"] .rst-btn[data-type="secondary"]:hover:not([disabled]) { background: var(--color-blue-90); }

.rst-btn[data-type="tertiary"] { background: var(--surface-subtle); color: var(--text-primary); border-color: var(--border-subtle-color); }
.rst-btn[data-type="tertiary"]:hover:not([disabled]) { background: var(--surface-interactive); border-color: var(--border-strong-color); }

.rst-btn[data-type="ghost"] { background: transparent; color: var(--interactive-primary); }
.rst-btn[data-type="ghost"]:hover:not([disabled]) { background: var(--brand-primary-soft); }
:root[data-theme="dark"] .rst-btn[data-type="ghost"]:hover:not([disabled]) { background: var(--color-blue-90); }

.rst-btn[data-type="danger"] { background: var(--support-error); color: var(--color-neutral-0); border-color: var(--support-error); }
:root[data-theme="dark"] .rst-btn[data-type="danger"] { color: var(--color-neutral-100); }
.rst-btn[data-type="danger"]:hover:not([disabled]) { background: var(--color-red-70); border-color: var(--color-red-70); color: var(--color-neutral-0); }

.rst-btn[data-type="inverse"] { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.rst-btn[data-type="inverse"]:hover:not([disabled]) { opacity: 0.86; }

.rst-btn[data-type="glass"] {
  background: var(--material-glass); color: var(--button-glass-text);
  border-color: var(--border-subtle-color); backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
.rst-btn[data-type="glass"]:hover:not([disabled]) { background: var(--material-glass-strong); }

.rst-btn[data-type="gradient"] { background: var(--material-gradient); color: var(--text-on-gradient, var(--color-neutral-100)); border-color: transparent; }
:root[data-theme="dark"] .rst-btn[data-type="gradient"] { color: var(--color-neutral-0); }
.rst-btn[data-type="gradient"]:hover:not([disabled]) { filter: brightness(1.06); }

.rst-btn[data-type="pill"] { background: var(--button-primary-background); color: var(--button-primary-text); border-radius: var(--button-radius-pill); }
.rst-btn[data-type="pill"]:hover:not([disabled]) { background: var(--interactive-primary-hover); }

.rst-btn[data-type="icon-only"],
.rst-btn[data-type="round-icon"] { padding: 0; width: 40px; }
.rst-btn[data-type="icon-only"][data-size="small"],
.rst-btn[data-type="round-icon"][data-size="small"] { width: 32px; }
.rst-btn[data-type="icon-only"][data-size="large"],
.rst-btn[data-type="round-icon"][data-size="large"] { width: 48px; }
.rst-btn[data-type="icon-only"][data-size="xl"],
.rst-btn[data-type="round-icon"][data-size="xl"] { width: 56px; }
.rst-btn[data-type="icon-only"] { background: var(--surface-subtle); color: var(--icon-primary); border-color: var(--border-subtle-color); }
.rst-btn[data-type="icon-only"]:hover:not([disabled]) { background: var(--surface-interactive); }
.rst-btn[data-type="round-icon"] { border-radius: var(--radius-full); background: var(--surface-subtle); color: var(--icon-primary); border-color: var(--border-subtle-color); }
.rst-btn[data-type="round-icon"]:hover:not([disabled]) { background: var(--surface-interactive); }

.rst-btn[data-type="floating-action"] {
  border-radius: var(--radius-full);
  background: var(--button-primary-background); color: var(--button-primary-text);
  box-shadow: var(--elevation-2); padding: 0 20px;
}
.rst-btn[data-type="floating-action"]:hover:not([disabled]) { background: var(--interactive-primary-hover); box-shadow: var(--elevation-3); }
.rst-btn[data-type="floating-action"][data-icon-only="true"] { width: 56px; padding: 0; }

.rst-btn[data-type="segmented"] { border-radius: 0; background: var(--surface-subtle); color: var(--text-secondary); border-color: var(--border-subtle-color); }
.rst-btn[data-type="segmented"][aria-pressed="true"] { background: var(--surface-selected); color: var(--text-on-selected); }

/* states */
.rst-btn[data-state="hover"]:not([disabled]),
.rst-btn[data-type="primary"][data-state="hover"] { background: var(--button-primary-hover); border-color: var(--button-primary-hover-border); }
.rst-btn[data-state="pressed"] { transform: translateY(1px); }
.rst-btn[data-state="focus"] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rst-btn[data-state="selected"] { box-shadow: inset 0 0 0 2px var(--interactive-primary); }
.rst-btn:active:not([disabled]) { transform: translateY(1px); }
.rst-btn[disabled], .rst-btn[data-state="disabled"] {
  background: var(--interactive-disabled); color: var(--text-disabled);
  border-color: transparent; cursor: not-allowed; box-shadow: none; transform: none;
}
.rst-btn[data-state="loading"] { pointer-events: none; }
.rst-btn[data-state="loading"] .rst-btn__label { opacity: 0.45; }
.rst-btn__spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: rst-spin 640ms linear infinite;
}
@keyframes rst-spin { to { transform: rotate(360deg); } }

/* ===================================================== RST/Input family ==== */
.rst-field { display: flex; flex-direction: column; gap: 6px; max-width: 320px; width: 100%; }
.rst-field--wide { max-width: 100%; }
.rst-field__label { font: var(--type-label-01); color: var(--text-secondary); }
.rst-field__req { color: var(--support-error); margin-left: 2px; }
.rst-field__control {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px;
  background: var(--input-background);
  border: var(--border-subtle) solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.rst-field__control svg { width: 18px; height: 18px; color: var(--icon-secondary); flex: 0 0 auto; }
.rst-field__control input,
.rst-field__control textarea,
.rst-field__control select {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none;
  font: var(--type-body-01); color: var(--text-primary); padding: 12px 0;
}
.rst-field__control textarea { resize: vertical; min-height: 88px; line-height: 24px; }
.rst-field__control input::placeholder,
.rst-field__control textarea::placeholder { color: var(--text-helper); }
.rst-field__help { font: var(--type-helper-01); color: var(--text-helper); display: flex; align-items: center; gap: 5px; }
.rst-field__help svg { width: 14px; height: 14px; }

.rst-field:hover .rst-field__control { border-color: var(--border-strong-color); }
.rst-field__control:focus-within { border-color: var(--border-interactive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent); }
.rst-field[data-state="error"]   .rst-field__control { border-color: var(--support-error); }
.rst-field[data-state="error"]   .rst-field__help { color: var(--support-error); }
.rst-field[data-state="warning"] .rst-field__control { border-color: var(--support-warning); }
.rst-field[data-state="warning"] .rst-field__help { color: var(--support-warning); }
.rst-field[data-state="success"] .rst-field__control { border-color: var(--support-success); }
.rst-field[data-state="success"] .rst-field__help { color: var(--support-success); }
.rst-field[data-state="disabled"] { opacity: var(--opacity-disabled); pointer-events: none; }
.rst-field[data-state="disabled"] .rst-field__control { background: var(--surface-subtle); }
.rst-field[data-state="read-only"] .rst-field__control { background: var(--surface-subtle); border-style: dashed; }

/* select / dropdown trigger */
.rst-select { position: relative; }
.rst-select__trigger { width: 100%; text-align: left; cursor: pointer; justify-content: space-between; }
.rst-select__value { flex: 1 1 auto; font: var(--type-body-01); color: var(--text-primary); }
.rst-select__value[data-placeholder="true"] { color: var(--text-helper); }
.rst-select__chevron { transition: transform var(--motion-fast) var(--ease-standard); }
.rst-select[data-open="true"] .rst-select__chevron { transform: rotate(180deg); }
.rst-select__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--overlay-background); border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-md); box-shadow: var(--elevation-2);
  padding: 6px; max-height: 260px; overflow-y: auto; list-style: none;
}
.rst-select__option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius-xs);
  font: var(--type-body-02); color: var(--text-primary); cursor: pointer;
}
.rst-select__option:hover, .rst-select__option[data-active="true"] { background: var(--surface-interactive); }
.rst-select__option[aria-selected="true"] { background: var(--surface-selected); color: var(--text-on-selected); font-weight: 500; }
.rst-select__option svg { width: 16px; height: 16px; margin-left: auto; }

/* number input */
.rst-number__btn {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--icon-primary);
  border: var(--border-subtle) solid var(--border-subtle-color); background: var(--surface-subtle);
}
.rst-number__btn:hover:not(:disabled) { background: var(--surface-interactive); }
.rst-number__btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.rst-number input { text-align: center; font-variant-numeric: tabular-nums; }

/* ============================================ RST/Selection Control ======== */
.rst-choice { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font: var(--type-body-01); color: var(--text-primary); }
.rst-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.rst-choice__box {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px;
  border: var(--border-strong) solid var(--border-strong-color);
  border-radius: var(--radius-xs); background: var(--input-background);
  display: grid; place-items: center; color: var(--text-inverse);
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.rst-choice[data-size="small"] .rst-choice__box { width: 16px; height: 16px; flex-basis: 16px; }
.rst-choice[data-type="radio"] .rst-choice__box { border-radius: 50%; }
.rst-choice__box svg { width: 14px; height: 14px; opacity: 0; }
.rst-choice input:checked + .rst-choice__box { background: var(--interactive-primary); border-color: var(--interactive-primary); }
.rst-choice input:checked + .rst-choice__box svg { opacity: 1; }
.rst-choice input:indeterminate + .rst-choice__box { background: var(--interactive-primary); border-color: var(--interactive-primary); }
.rst-choice input:indeterminate + .rst-choice__box svg { opacity: 1; }
.rst-choice input:focus-visible + .rst-choice__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rst-choice[data-type="radio"] input:checked + .rst-choice__box { background: var(--input-background); }
.rst-choice[data-type="radio"] input:checked + .rst-choice__box::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--interactive-primary);
}
.rst-choice[data-state="error"] .rst-choice__box { border-color: var(--support-error); }
.rst-choice[data-state="disabled"] { opacity: var(--opacity-disabled); pointer-events: none; }
.rst-choice[data-state="read-only"] { pointer-events: none; }

/* toggle */
.rst-toggle__track {
  width: 44px; height: 26px; flex: 0 0 44px; border-radius: var(--radius-full);
  background: var(--interactive-disabled); position: relative;
  transition: background-color var(--motion-base) var(--ease-standard);
}
.rst-choice[data-size="small"] .rst-toggle__track { width: 36px; height: 20px; flex-basis: 36px; }
.rst-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-neutral-0);
  box-shadow: var(--elevation-1);
  transition: transform var(--motion-base) var(--ease-standard);
}
.rst-choice[data-size="small"] .rst-toggle__track::after { width: 14px; height: 14px; }
.rst-choice input:checked + .rst-toggle__track { background: var(--interactive-primary); }
.rst-choice input:checked + .rst-toggle__track::after { transform: translateX(18px); }
.rst-choice[data-size="small"] input:checked + .rst-toggle__track::after { transform: translateX(16px); }
.rst-choice input:focus-visible + .rst-toggle__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ============================================== RST/Form/Slider ============ */
.rst-slider { width: 100%; max-width: 360px; }
.rst-slider__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rst-slider__label { font: var(--type-label-01); color: var(--text-secondary); }
.rst-slider__value { font: var(--type-label-01); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rst-slider__row { display: flex; align-items: center; gap: 12px; }
.rst-slider__bound { font: var(--type-helper-01); color: var(--text-helper); font-variant-numeric: tabular-nums; }
.rst-slider input[type="range"] { flex: 1 1 auto; -webkit-appearance: none; appearance: none; background: none; height: 24px; cursor: pointer; }
.rst-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--interactive-primary) var(--rst-pct,50%), var(--interactive-disabled) var(--rst-pct,50%));
}
.rst-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--interactive-disabled); }
.rst-slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--interactive-primary); }
.rst-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-neutral-0); border: 2px solid var(--interactive-primary);
  box-shadow: var(--elevation-1);
}
.rst-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--interactive-primary);
  background: var(--color-neutral-0); box-shadow: var(--elevation-1);
}
.rst-slider[data-size="small"] input[type="range"]::-webkit-slider-runnable-track { height: 4px; }
.rst-slider[data-size="large"] input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
.rst-slider[data-state="disabled"] { opacity: var(--opacity-disabled); pointer-events: none; }

/* ================================================== RST/Upload ============= */
.rst-upload {
  border: 2px dashed var(--border-strong-color); border-radius: var(--radius-lg);
  background: var(--surface-subtle); padding: 32px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.rst-upload[data-state="dragging"], .rst-upload:hover { border-color: var(--interactive-primary); background: var(--surface-selected); }
.rst-upload[data-type="compact"] { flex-direction: row; text-align: left; padding: 16px 18px; }
/* Icon sizing is explicit here because a dropzone is a big box and a glyph
   inside one must not take its size from it. The wrapper reserves the space;
   the glyph is sized on the glyph. */
.rst-upload__icon {
  width: 32px; height: 32px; color: var(--icon-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.rst-upload__icon .rst-icon { width: 28px; height: 28px; }
.rst-upload[data-type="compact"] .rst-upload__icon { width: 24px; height: 24px; }
.rst-upload[data-type="compact"] .rst-upload__icon .rst-icon { width: 22px; height: 22px; }
/* the file glyph that leads a row */
.rst-upload__file > .rst-icon { width: 22px; height: 22px; color: var(--icon-secondary); }
/* the outcome marker on a finished or failed row */
.rst-upload__status { display: inline-flex; flex: none; }
.rst-upload__status .rst-icon { width: 18px; height: 18px; }
.rst-upload__file[data-state="complete"] .rst-upload__status { color: var(--status-success); }
.rst-upload__file[data-state="error"] .rst-upload__status { color: var(--status-error); }
.rst-upload__title { font: var(--type-label-01); color: var(--text-primary); }
.rst-upload__hint { font: var(--type-helper-01); color: var(--text-helper); }
.rst-upload__file { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color); }
.rst-upload__file .rst-progress { flex: 1 1 auto; }

/* ================================================= RST/Data Display ======== */
.rst-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font: var(--type-body-02); font-weight: 500;
  background: var(--status-neutral-soft); color: var(--text-secondary);
}
.rst-badge[data-size="small"] { padding: 2px 8px; font: var(--type-caption-01); }
.rst-badge[data-size="large"] { padding: 6px 14px; font: var(--type-body-01); }
.rst-badge[data-tone="info"]    { background: var(--status-info-soft); }
.rst-badge[data-tone="success"] { background: var(--status-success-soft); }
.rst-badge[data-tone="warning"] { background: var(--status-warning-soft); }
.rst-badge[data-tone="error"]   { background: var(--status-error-soft); }
.rst-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rst-badge[data-tone="info"] .rst-badge__dot    { background: var(--status-info); }
.rst-badge[data-tone="success"] .rst-badge__dot { background: var(--status-success); }
.rst-badge[data-tone="warning"] .rst-badge__dot { background: var(--status-warning); }
.rst-badge[data-tone="error"] .rst-badge__dot   { background: var(--status-error); }

/* Tag — outlined chip, per the SRC-03 repair */
.rst-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-xs);
  font: var(--type-body-02); background: transparent;
  border: var(--border-subtle) solid var(--border-strong-color); color: var(--text-secondary);
}
.rst-tag[data-tone="info"]    { border-color: var(--status-info); }
.rst-tag[data-tone="success"] { border-color: var(--status-success); }
.rst-tag[data-tone="warning"] { border-color: var(--status-warning); }
.rst-tag[data-tone="error"]   { border-color: var(--status-error); }
.rst-tag__dismiss { display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-xs); color: var(--icon-secondary); }
.rst-tag__dismiss:hover { background: var(--surface-interactive); color: var(--icon-primary); }
.rst-tag__dismiss svg { width: 12px; height: 12px; }

/* Metric — a figure, not a chip, per the SRC-03 repair */
.rst-metric-inline { font: var(--type-label-01); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rst-keyvalue { display: flex; gap: 8px; align-items: baseline; font: var(--type-body-02); }
.rst-keyvalue dt { color: var(--text-helper); }
.rst-keyvalue dd { margin: 0; color: var(--text-primary); font-weight: 500; }
.rst-code-chip { font: var(--type-code-01); background: var(--surface-subtle); border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-xs); padding: 2px 7px; color: var(--text-primary); }
.rst-timestamp { font: var(--type-body-02); color: var(--text-helper); font-variant-numeric: tabular-nums; }
.rst-confidence { display: inline-flex; align-items: center; gap: 8px; font: var(--type-body-02); color: var(--text-secondary); }
.rst-confidence__bar { width: 56px; height: 6px; border-radius: var(--radius-full); background: var(--interactive-disabled); overflow: hidden; }
.rst-confidence__bar i { display: block; height: 100%; background: var(--status-success); }

/* Avatar */
.rst-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--brand-primary-soft); color: var(--brand-primary);
  font: var(--type-label-01);
}
:root[data-theme="dark"] .rst-avatar { background: var(--color-blue-90); color: var(--color-blue-40); }
.rst-avatar[data-size="small"] { width: 28px; height: 28px; font: var(--type-caption-01); }
.rst-avatar[data-size="large"] { width: 56px; height: 56px; font: var(--type-heading-04); }
.rst-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rst-avatar-group { display: flex; }
.rst-avatar-group .rst-avatar { border: 2px solid var(--background-page); margin-left: -10px; }
.rst-avatar-group .rst-avatar:first-child { margin-left: 0; }

/* =========================================================== RST/Card ====== */
.rst-card {
  background: var(--card-background); color: var(--card-text);
  border: var(--border-subtle) solid var(--card-border);
  border-radius: var(--card-radius); padding: var(--card-padding);
  display: flex; flex-direction: column; gap: 12px;
}
.rst-card[data-material="elevated"] { box-shadow: var(--elevation-2); border-color: transparent; background: var(--surface-elevated); }
.rst-card[data-material="glass"] { background: var(--material-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.rst-card[data-material="gradient"] { background: var(--material-gradient); border-color: transparent; }
.rst-card[data-material="inverse"] { background: var(--surface-inverse); color: var(--text-inverse); border-color: transparent; }
.rst-card[data-interactive="true"] { cursor: pointer; transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.rst-card[data-interactive="true"]:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
.rst-card__eyebrow { display: flex; align-items: center; gap: 8px; font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); flex-wrap: wrap; }
.rst-card__eyebrow .rst-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); }
.rst-card__title { font: var(--type-heading-04); color: inherit; }
.rst-card__desc { font: var(--type-body-02); color: var(--text-secondary); }
.rst-card[data-material="inverse"] .rst-card__desc { color: var(--text-inverse-muted); }
.rst-card__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rst-card__value { font: var(--type-metric-03); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Metric card */
.rst-metric-card { gap: 6px; }
.rst-metric-card .rst-delta { font: var(--type-body-02); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
/* Direction and sentiment are two different things. data-dir is the arrow and
   the fallback colour, which is the old shorthand where a rise really is good
   news. data-sentiment overrides it when it is not: fewer failed runs is a
   fall and a win, rising churn is a rise and a loss. Written after these rules
   so it wins on equal specificity. */
.rst-delta[data-dir="up"] { color: var(--status-success); }
.rst-delta[data-dir="down"] { color: var(--status-error); }
.rst-delta[data-dir="flat"] { color: var(--text-helper); }
.rst-delta[data-sentiment="positive"] { color: var(--status-success); }
.rst-delta[data-sentiment="negative"] { color: var(--status-error); }
.rst-delta[data-sentiment="neutral"] { color: var(--text-secondary); }

/* ========================================================= RST/Data Table == */
.rst-table-wrap { border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-primary); }
.rst-table-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); flex-wrap: wrap; }
.rst-table-toolbar__title { font: var(--type-heading-04); }
.rst-table-toolbar__spacer { margin-left: auto; }
.rst-table-scroll { overflow-x: auto; }
.rst-table { width: 100%; min-width: 640px; font: var(--type-data-01); }
.rst-table th {
  text-align: left; font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-helper); padding: 12px 16px; background: var(--surface-subtle);
  border-bottom: var(--border-subtle) solid var(--border-subtle-color); white-space: nowrap;
}
.rst-table th[aria-sort] { cursor: pointer; user-select: none; }
.rst-table th[aria-sort]:hover { color: var(--text-primary); }
.rst-table th .rst-sort { display: inline-flex; width: 12px; height: 12px; margin-left: 6px; opacity: 0.4; vertical-align: -1px; }
.rst-table th[aria-sort="ascending"] .rst-sort, .rst-table th[aria-sort="descending"] .rst-sort { opacity: 1; }
.rst-table th[aria-sort="descending"] .rst-sort { transform: rotate(180deg); }
.rst-table td { padding: 12px 16px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); color: var(--text-primary); }
.rst-table tbody tr:last-child td { border-bottom: none; }
.rst-table tbody tr:hover td { background: var(--surface-interactive); }
.rst-table tbody tr[aria-selected="true"] td { background: var(--surface-selected); }
.rst-table[data-density="compact"] th, .rst-table[data-density="compact"] td { padding: 7px 16px; }
.rst-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.rst-table-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: var(--border-subtle) solid var(--border-subtle-color); flex-wrap: wrap; }

/* ========================================================== RST/Feedback === */
.rst-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-md);
  border: var(--border-subtle) solid var(--border-subtle-color);
  background: var(--status-neutral-soft); color: var(--text-primary);
}
.rst-alert[data-tone="info"]    { background: var(--status-info-soft);    border-color: var(--status-info); }
.rst-alert[data-tone="success"] { background: var(--status-success-soft); border-color: var(--status-success); }
.rst-alert[data-tone="warning"] { background: var(--status-warning-soft); border-color: var(--status-warning); }
.rst-alert[data-tone="error"]   { background: var(--status-error-soft);   border-color: var(--status-error); }
.rst-alert__icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.rst-alert[data-tone="info"] .rst-alert__icon    { color: var(--status-info); }
.rst-alert[data-tone="success"] .rst-alert__icon { color: var(--status-success); }
.rst-alert[data-tone="warning"] .rst-alert__icon { color: var(--status-warning); }
.rst-alert[data-tone="error"] .rst-alert__icon   { color: var(--status-error); }
.rst-alert__body { flex: 1 1 auto; min-width: 0; }
.rst-alert__title { font: var(--type-label-01); }
.rst-alert__msg { font: var(--type-body-02); color: var(--text-secondary); margin-top: 2px; }
.rst-alert__close { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--icon-secondary); }
.rst-alert__close:hover { background: var(--surface-interactive); }
.rst-alert__close svg { width: 14px; height: 14px; }

.rst-alert[data-type="banner"] { border-radius: 0; border-width: 0 0 0 4px; }
.rst-alert[data-type="toast"] { box-shadow: var(--elevation-2); background: var(--overlay-background); border-color: var(--border-subtle-color); max-width: 400px; }
.rst-alert[data-type="toast"][data-tone="info"]    { border-left: 4px solid var(--status-info); }
.rst-alert[data-type="toast"][data-tone="success"] { border-left: 4px solid var(--status-success); }
.rst-alert[data-type="toast"][data-tone="warning"] { border-left: 4px solid var(--status-warning); }
.rst-alert[data-type="toast"][data-tone="error"]   { border-left: 4px solid var(--status-error); }

.rst-toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.rst-toast-region > * { pointer-events: auto; animation: rst-toast-in var(--motion-base) var(--ease-entrance); }
@keyframes rst-toast-in { from { opacity: 0; transform: translateY(10px); } }

.rst-skeleton { background: linear-gradient(90deg, var(--surface-subtle) 25%, var(--surface-interactive) 37%, var(--surface-subtle) 63%); background-size: 400% 100%; animation: rst-shimmer 1.4s ease infinite; border-radius: var(--radius-xs); }
@keyframes rst-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.rst-empty { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rst-empty__icon { width: 48px; height: 48px; color: var(--icon-disabled); }
.rst-empty__title { font: var(--type-heading-04); }
.rst-empty__desc { font: var(--type-body-02); color: var(--text-secondary); max-width: 44ch; }

/* progress + spinner */
.rst-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
/* gap, not just space-between: at narrow widths a wrapping label used to run
   straight into the percentage with no space between them. */
.rst-progress__head { display: flex; justify-content: space-between; gap: 10px; font: var(--type-body-02); }
.rst-progress__head > :first-child { min-width: 0; }
.rst-progress__value { color: var(--text-primary); font-variant-numeric: tabular-nums; flex: none; }
/* At 390 a two-word label wraps and the value used to sit on top of it,
   because a flex row with no alignment lets the two boxes overlap once the
   first one grows. Aligning to the start and keeping the value out of the
   flex negotiation fixes both. */
.rst-progress__head { align-items: flex-start; }
.rst-progress__head > :first-child { min-width: 0; overflow-wrap: anywhere; }
.rst-progress__track { height: 8px; border-radius: var(--radius-full); background: var(--interactive-disabled); overflow: hidden; }
.rst-progress[data-size="small"] .rst-progress__track { height: 4px; }
.rst-progress[data-size="large"] .rst-progress__track { height: 12px; }
.rst-progress__fill { height: 100%; background: var(--interactive-primary); border-radius: var(--radius-full); transition: width var(--motion-base) var(--ease-standard); }
.rst-progress[data-state="success"] .rst-progress__fill { background: var(--status-success); }
.rst-progress[data-state="error"] .rst-progress__fill { background: var(--status-error); }
.rst-progress[data-state="disabled"] { opacity: var(--opacity-disabled); }

.rst-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--interactive-disabled); border-top-color: var(--interactive-primary); animation: rst-spin 720ms linear infinite; }
.rst-spinner[data-size="small"] { width: 20px; height: 20px; border-width: 2px; }
.rst-spinner[data-size="large"] { width: 48px; height: 48px; border-width: 4px; }
.rst-spinner[data-state="disabled"] { border-top-color: var(--interactive-disabled); animation: none; }

/* ===================================================== Overlays ============ */
.rst-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; opacity: 0; transition: opacity var(--motion-base) var(--ease-standard); }
.rst-scrim[data-open="true"] { opacity: 1; }

.rst-modal {
  position: fixed; z-index: 61; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--overlay-background); border-radius: var(--overlay-radius);
  box-shadow: var(--elevation-3); border: var(--border-subtle) solid var(--border-subtle-color);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-entrance), transform var(--motion-base) var(--ease-entrance);
}
.rst-modal[data-open="true"] { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.rst-modal[data-type="full-screen"] { width: calc(100vw - 48px); height: calc(100vh - 48px); max-height: none; }
.rst-modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 12px; }
.rst-modal__title { font: var(--type-heading-03); flex: 1 1 auto; }
.rst-modal__body { padding: 0 24px; overflow-y: auto; flex: 1 1 auto; font: var(--type-body-01); color: var(--text-secondary); display: flex; flex-direction: column; gap: 16px; }
.rst-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 20px 24px 24px; flex-wrap: wrap; }
.rst-modal[data-type="destructive"] .rst-modal__title { color: var(--support-error); }

.rst-drawer {
  position: fixed; z-index: 61; top: 0; bottom: 0; right: 0;
  width: min(420px, 92vw); display: flex; flex-direction: column;
  background: var(--overlay-background); box-shadow: var(--elevation-3);
  border-left: var(--border-subtle) solid var(--border-subtle-color);
  transform: translateX(100%); transition: transform var(--motion-base) var(--ease-standard);
}
.rst-drawer[data-side="left"] { right: auto; left: 0; border-left: none; border-right: var(--border-subtle) solid var(--border-subtle-color); transform: translateX(-100%); }
.rst-drawer[data-open="true"] { transform: translateX(0); }
.rst-drawer__head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 14px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); }
.rst-drawer__title { font: var(--type-heading-04); flex: 1 1 auto; }
.rst-drawer__body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.rst-drawer__foot { padding: 16px 20px; border-top: var(--border-subtle) solid var(--border-subtle-color); display: flex; gap: 10px; }
@media (max-width: 480px) {
  .rst-drawer { width: 100vw; top: auto; height: 82vh; border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; transform: translateY(100%); border: var(--border-subtle) solid var(--border-subtle-color); }
  .rst-drawer[data-open="true"] { transform: translateY(0); }
}

.rst-tooltip {
  position: absolute; z-index: 70; pointer-events: none;
  background: var(--surface-inverse); color: var(--text-inverse);
  font: var(--type-body-02); padding: 7px 10px; border-radius: var(--radius-sm);
  max-width: 260px; box-shadow: var(--elevation-2);
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.rst-tooltip[data-open="true"] { opacity: 1; transform: translateY(0); }
.rst-tooltip__metric { display: block; font: var(--type-label-01); font-variant-numeric: tabular-nums; }

.rst-popover {
  position: absolute; z-index: 65; min-width: 220px;
  background: var(--overlay-background); border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-2); padding: 14px;
  opacity: 0; pointer-events: none; transform: scale(0.97);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.rst-popover[data-open="true"] { opacity: 1; pointer-events: auto; transform: scale(1); }
.rst-popover__title { font: var(--type-label-01); margin-bottom: 6px; }
.rst-popover__body { font: var(--type-body-02); color: var(--text-secondary); }

.rst-menu {
  min-width: 232px; background: var(--overlay-background);
  border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-md); box-shadow: var(--elevation-2); padding: 6px;
  list-style: none;
}
.rst-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius-xs);
  font: var(--type-body-02); color: var(--text-primary); text-align: left; cursor: pointer;
}
.rst-menu__item svg { width: 16px; height: 16px; color: var(--icon-secondary); flex: 0 0 16px; }
.rst-menu__item:hover:not([aria-disabled="true"]),
.rst-menu__item[data-active="true"] { background: var(--surface-interactive); }
.rst-menu__item[aria-selected="true"] { background: var(--surface-selected); color: var(--text-on-selected); }
.rst-menu__item[data-destructive="true"] { color: var(--support-error); }
.rst-menu__item[data-destructive="true"] svg { color: var(--support-error); }
.rst-menu__item[data-destructive="true"]:hover { background: var(--status-error-soft); }
.rst-menu__item[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.rst-menu__shortcut { margin-left: auto; font: var(--type-caption-01); font-family: var(--font-mono); color: var(--text-helper); }
.rst-menu__desc { display: block; font: var(--type-helper-01); color: var(--text-helper); }
.rst-menu__sep { height: 1px; background: var(--border-subtle-color); margin: 5px 2px; }

/* ==================================================== Navigation =========== */
.rst-tabs__list { display: flex; gap: 2px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); overflow-x: auto; }
.rst-tabs__tab {
  padding: 11px 16px; font: var(--type-label-01); color: var(--text-secondary);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.rst-tabs__tab:hover { color: var(--text-primary); }
.rst-tabs__tab[aria-selected="true"] { color: var(--interactive-primary); border-bottom-color: var(--interactive-primary); }
.rst-tabs__panel { padding-top: 20px; font: var(--type-body-01); color: var(--text-secondary); }

.rst-tabs[data-type="pill"] .rst-tabs__list { border-bottom: none; gap: 6px; }
.rst-tabs[data-type="pill"] .rst-tabs__tab { border-radius: var(--radius-full); border-bottom: none; padding: 8px 16px; }
.rst-tabs[data-type="pill"] .rst-tabs__tab[aria-selected="true"] { background: var(--surface-selected); color: var(--text-on-selected); }

.rst-tabs[data-type="segmented"] .rst-tabs__list {
  border-bottom: none; gap: 0; padding: 3px; background: var(--surface-subtle);
  border-radius: var(--radius-sm); display: inline-flex;
}
.rst-tabs[data-type="segmented"] .rst-tabs__tab { border-bottom: none; border-radius: var(--radius-xs); padding: 7px 16px; }
.rst-tabs[data-type="segmented"] .rst-tabs__tab[aria-selected="true"] { background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--elevation-1); }

.rst-tabs[data-type="glass"] .rst-tabs__list { border-bottom: none; background: var(--material-glass); backdrop-filter: blur(var(--blur-glass)); border-radius: var(--radius-full); padding: 4px; display: inline-flex; }
.rst-tabs[data-type="glass"] .rst-tabs__tab { border-bottom: none; border-radius: var(--radius-full); }
.rst-tabs[data-type="glass"] .rst-tabs__tab[aria-selected="true"] { background: var(--surface-primary); }
.rst-tabs[data-type="compact"] .rst-tabs__tab { padding: 7px 12px; font: var(--type-body-02); font-weight: 500; }

.rst-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--type-body-02); list-style: none; }
.rst-breadcrumbs a { color: var(--text-secondary); }
.rst-breadcrumbs a:hover { color: var(--interactive-primary); }
.rst-breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: 500; }
.rst-breadcrumbs__sep { color: var(--text-helper); display: grid; place-items: center; }
.rst-breadcrumbs__sep svg { width: 14px; height: 14px; }

.rst-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rst-pagination__btn {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font: var(--type-body-02); color: var(--text-secondary);
  border: var(--border-subtle) solid transparent; font-variant-numeric: tabular-nums;
}
.rst-pagination__btn:hover:not(:disabled) { background: var(--surface-interactive); color: var(--text-primary); }
.rst-pagination__btn[aria-current="page"] { background: var(--interactive-primary); color: var(--text-on-primary); }
.rst-pagination__btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.rst-pagination__btn svg { width: 16px; height: 16px; }
.rst-pagination__info { font: var(--type-body-02); color: var(--text-helper); margin-left: 8px; }

.rst-stepper { display: flex; gap: 0; width: 100%; }
.rst-stepper[data-orientation="vertical"] { flex-direction: column; gap: 0; }
.rst-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; }
.rst-stepper[data-orientation="vertical"] .rst-step { flex-direction: row; gap: 14px; padding-bottom: 24px; }
.rst-step__marker { display: flex; align-items: center; gap: 0; }
.rst-stepper[data-orientation="vertical"] .rst-step__marker { flex-direction: column; }
.rst-step__dot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: grid; place-items: center; font: var(--type-body-02); font-weight: 500;
  background: var(--surface-subtle); color: var(--text-helper);
  border: var(--border-strong) solid var(--border-subtle-color);
}
.rst-step__dot svg { width: 15px; height: 15px; }
.rst-step__line { flex: 1 1 auto; height: 2px; background: var(--border-subtle-color); }
.rst-stepper[data-orientation="vertical"] .rst-step__line { width: 2px; height: auto; min-height: 28px; flex: 1 1 auto; }
.rst-step:last-child .rst-step__line { display: none; }
.rst-step__text { min-width: 0; padding-right: 12px; }
.rst-step__label { font: var(--type-label-01); color: var(--text-primary); }
.rst-step__hint { font: var(--type-helper-01); color: var(--text-helper); }
.rst-step[data-state="completed"] .rst-step__dot { background: var(--interactive-primary); border-color: var(--interactive-primary); color: var(--text-inverse); }
.rst-step[data-state="completed"] .rst-step__line { background: var(--interactive-primary); }
.rst-step[data-state="current"] .rst-step__dot { background: var(--surface-primary); border-color: var(--interactive-primary); color: var(--interactive-primary); }
.rst-step[data-state="current"] .rst-step__label { color: var(--interactive-primary); }
.rst-step[data-state="in-progress"] .rst-step__dot { background: var(--status-info-soft); border-color: var(--status-info); color: var(--status-info); }
.rst-step[data-state="error"] .rst-step__dot { background: var(--status-error-soft); border-color: var(--status-error); color: var(--status-error); }
.rst-step[data-state="error"] .rst-step__label { color: var(--status-error); }
.rst-step[data-state="disabled"] { opacity: var(--opacity-disabled); }

/* header / top nav specimen */
.rst-topnav {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px; min-height: 64px;
  background: var(--navigation-background); border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--navigation-radius);
  flex-wrap: wrap; width: 100%;
}
.rst-topnav[data-type="glass"] { background: var(--material-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.rst-topnav[data-type="floating"] { border-radius: var(--radius-full); box-shadow: var(--elevation-2); }
.rst-topnav[data-type="marketing"] { background: transparent; border-color: transparent; }
.rst-topnav[data-type="compact"] { min-height: 48px; }
.rst-topnav__brand { display: flex; align-items: center; gap: 9px; font: var(--type-label-01); min-width: 0; }
.rst-topnav__links { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; min-width: 0; }
.rst-topnav__links a { padding: 7px 12px; border-radius: var(--radius-sm); font: var(--type-body-02); color: var(--text-secondary); }
.rst-topnav__links a:hover { background: var(--surface-interactive); color: var(--text-primary); text-decoration: none; }
.rst-topnav__links a[aria-current="page"] { color: var(--text-on-selected); background: var(--surface-selected); }
.rst-topnav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* At phone width a product header collapses its links behind a menu button,
   which is also what keeps the specimen inside the page. */
@media (max-width: 600px) {
  .rst-topnav__links { display: none; }
  .rst-topnav__end { margin-left: auto; }
}

/* ---------------------------------------------------------- Side Navigation
   Reference implementation of the production master RST/Side Nav. Every
   measurement here was read from the Expanded and Collapsed variants rather
   than chosen for the documentation: 256 and 72 rails, 12 padding, 12 gap,
   24 rail radius, 44 item height, 12 item radius, 20 icons.                  */
.rst-navrail {
  width: 256px; flex: 0 0 256px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; min-height: 520px;
  background: var(--navigation-background);
  border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: 24px;
  color: var(--text-primary);
}
.rst-navrail[data-state="collapsed"] { width: 72px; flex-basis: 72px; align-items: center; }
.rst-navrail[data-state="collapsed"] .rst-navrail__nav,
.rst-navrail[data-state="collapsed"] .rst-navrail__group,
.rst-navrail[data-state="collapsed"] .rst-navrail__actions { align-items: center; }
.rst-navrail[data-chrome="false"] { min-height: 0; border: 0; border-radius: 0; padding: 12px 0; gap: 0; }

/* Product header */
.rst-navrail__head { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; }
.rst-navrail[data-state="collapsed"] .rst-navrail__head { flex-direction: column; gap: 10px; }
.rst-navrail__mark {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--radius-md);
  background: var(--brand-primary); color: var(--text-inverse);
  display: grid; place-items: center; font: var(--type-label-01); letter-spacing: 0.02em;
}
.rst-navrail__product {
  flex: 1 1 auto; min-width: 0; font: var(--type-label-01); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rst-navrail__control {
  width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center;
  border-radius: var(--radius-xs); color: var(--icon-primary);
}
.rst-navrail__control:hover { background: var(--surface-interactive); }
.rst-navrail__control svg { width: 16px; height: 16px; }

/* Item groups. The gap between blocks is what carries the grouping once the
   category headings are gone in the collapsed rail. */
.rst-navrail__nav { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.rst-navrail__group { display: flex; flex-direction: column; gap: 6px; }
.rst-navrail__actions { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.rst-navrail__section {
  font: var(--type-caption-01); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-primary); padding: 0 2px; line-height: 16px;
}

.rst-navrail__item {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 12px; border-radius: 12px;
  font: var(--type-body-02); color: var(--text-primary);
}
.rst-navrail__item:hover { background: var(--surface-interactive); text-decoration: none; color: var(--text-primary); }
.rst-navrail__item[aria-current="page"] { background: var(--surface-selected); }
.rst-navrail__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--icon-primary); display: block; position: relative; }
.rst-navrail__icon svg { width: 20px; height: 20px; display: block; }
.rst-navrail__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rst-navrail__badge {
  flex: 0 0 auto; min-width: 28px; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
  background: var(--surface-subtle); color: var(--text-secondary);
  font: var(--type-caption-01); display: grid; place-items: center;
}
.rst-navrail[data-state="collapsed"] .rst-navrail__item {
  width: 48px; min-width: 48px; padding: 0;
  display: grid; place-items: center;
}
/* A count cannot be shown in 48px, so it becomes a presence dot and the number
   stays available through the tooltip and the accessible name. */
.rst-navrail__dot {
  position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--interactive-primary);
  box-shadow: 0 0 0 2px var(--navigation-background);
}

/* User profile */
.rst-navrail__user {
  position: relative; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 16px; background: var(--surface-subtle);
}
.rst-navrail__avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-full);
  background: var(--surface-primary); color: var(--icon-primary);
  display: grid; place-items: center;
}
.rst-navrail__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rst-navrail__who b { font: var(--type-body-02); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rst-navrail__who span { font: var(--type-helper-01); color: var(--text-helper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rst-navrail__chev { flex: 0 0 16px; color: var(--icon-secondary); display: grid; place-items: center; }
.rst-navrail__chev svg { width: 16px; height: 16px; }
.rst-navrail[data-state="collapsed"] .rst-navrail__user {
  width: 48px; height: 48px; padding: 0; border-radius: 14px; justify-content: center;
}
.rst-navrail[data-state="collapsed"] .rst-navrail__avatar { width: 36px; height: 36px; flex-basis: 36px; background: transparent; }

/* Tooltips. Only the collapsed rail carries data-tip, so the label a reader
   loses to the icon rail is still one hover or one Tab away. */
.rst-navrail [data-navtip] { position: relative; }
.rst-navrail [data-navtip]::after {
  content: attr(data-navtip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--surface-inverse); color: var(--text-inverse);
  font: var(--type-caption-01); padding: 5px 9px; border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none; opacity: 0; z-index: 5;
  transition: opacity var(--motion-fast) var(--ease-standard);
  box-shadow: var(--elevation-2);
}
.rst-navrail [data-navtip]:hover::after,
.rst-navrail [data-navtip]:focus-visible::after { opacity: 1; }

/* scrollbar specimen */
.rst-scrollbar-demo { height: 160px; overflow: auto; border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-md); padding: 14px; scrollbar-width: thin; scrollbar-color: var(--border-strong-color) transparent; }
.rst-scrollbar-demo::-webkit-scrollbar { width: 10px; height: 10px; }
.rst-scrollbar-demo::-webkit-scrollbar-thumb { background: var(--border-strong-color); border-radius: var(--radius-full); border: 3px solid var(--surface-primary); }
.rst-scrollbar-demo::-webkit-scrollbar-track { background: transparent; }

/* ===================================================== Media / Date ======== */
.rst-carousel { position: relative; }
.rst-carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); }
.rst-carousel__track { display: flex; transition: transform var(--motion-slow) var(--ease-standard); }
.rst-carousel__slide { flex: 0 0 100%; min-width: 0; padding: 2px; }
.rst-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.rst-carousel__dots { display: flex; gap: 7px; }
.rst-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--interactive-disabled); }
.rst-carousel__dot[aria-current="true"] { background: var(--interactive-primary); width: 22px; border-radius: var(--radius-full); }

.rst-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-100); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.rst-video__poster { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-blue-80), var(--color-purple-80)); }
.rst-video__center { position: relative; z-index: 2; }
.rst-video__play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--color-neutral-100); display: grid; place-items: center; box-shadow: var(--elevation-2); }
.rst-video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.rst-video__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 12px 14px; display: flex; align-items: center; gap: 12px; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); color: #fff; }
.rst-video__bar button { color: #fff; display: grid; place-items: center; }
.rst-video__bar svg { width: 18px; height: 18px; }
.rst-video__time { font: var(--type-caption-01); font-variant-numeric: tabular-nums; min-width: 78px; }
.rst-video__scrub { flex: 1 1 auto; height: 4px; border-radius: var(--radius-full); background: rgba(255,255,255,0.3); cursor: pointer; position: relative; }
.rst-video__scrub i { position: absolute; inset: 0 auto 0 0; background: var(--color-blue-50); border-radius: var(--radius-full); }
.rst-video__state { position: absolute; z-index: 4; top: 12px; left: 14px; }
/* The poster frame is a plain <img> over the gradient fallback, so a team can
   drop a photograph into assets/posters/ and change nothing else. */
.rst-video__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.rst-videoblock { display: grid; gap: 14px; max-width: 560px; width: 100%; }
.rst-videopick__lede { font: var(--type-caption-01); color: var(--text-helper); margin: 0; }
.rst-videopick { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.rst-videopick__item { flex: 0 0 104px; display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rst-videopick__item:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.rst-videopick__shot { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-neutral-100); }
.rst-videopick__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rst-videopick__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.rst-videopick__play .rst-icon { width: 15px; height: 15px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.65)); }
.rst-videopick__name { font: var(--type-caption-01); color: var(--text-secondary); line-height: 1.3; }
.rst-videopick__item[aria-pressed="true"] .rst-videopick__shot { box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--interactive-primary); }
.rst-videopick__item[aria-pressed="true"] .rst-videopick__name { color: var(--text-primary); font-weight: 500; }
.rst-videopick__item:hover .rst-videopick__name { color: var(--text-primary); }

.rst-calendar { width: 320px; max-width: 100%; background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-lg); padding: 14px; }
.rst-calendar__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rst-calendar__month { flex: 1 1 auto; text-align: center; font: var(--type-label-01); }
.rst-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rst-calendar__dow { text-align: center; font: var(--type-caption-01); color: var(--text-helper); padding: 6px 0; }
.rst-calendar__day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
  font: var(--type-body-02); color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rst-calendar__day:hover:not(:disabled) { background: var(--surface-interactive); }
.rst-calendar__day[data-state="outside"] { color: var(--text-disabled); }
.rst-calendar__day[data-state="today"] { box-shadow: inset 0 0 0 2px var(--interactive-primary); color: var(--interactive-primary); font-weight: 600; }
.rst-calendar__day[aria-selected="true"] { background: var(--interactive-primary); color: var(--text-on-primary); }
.rst-calendar__day[data-range="middle"] { background: var(--surface-selected); border-radius: 0; color: var(--text-on-selected); }
.rst-calendar__day[data-range="start"] { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rst-calendar__day[data-range="end"] { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rst-calendar__day:disabled { color: var(--text-disabled); cursor: not-allowed; text-decoration: line-through; }

.rst-chatbox { border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-lg); background: var(--surface-primary); display: flex; flex-direction: column; max-width: 480px; }
.rst-chatbox__log { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.rst-msg { display: flex; gap: 10px; align-items: flex-start; }
.rst-msg__bubble { padding: 10px 13px; border-radius: var(--radius-md); font: var(--type-body-02); background: var(--surface-subtle); color: var(--text-primary); max-width: 78%; }
.rst-msg[data-from="me"] { flex-direction: row-reverse; }
.rst-msg[data-from="me"] .rst-msg__bubble { background: var(--interactive-primary); color: var(--text-inverse); }
.rst-chatbox__composer { display: flex; gap: 8px; padding: 12px; border-top: var(--border-subtle) solid var(--border-subtle-color); }
.rst-typing { display: inline-flex; gap: 3px; }
.rst-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-helper); animation: rst-bounce 1.1s infinite; }
.rst-typing i:nth-child(2) { animation-delay: 0.15s; }
.rst-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rst-bounce { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* kanban + feed */
.rst-kanban { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 12px; }
.rst-kanban__col { background: var(--surface-subtle); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.rst-kanban__title { font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); display: flex; justify-content: space-between; }
.rst-kanban__card { background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-sm); padding: 11px; display: flex; flex-direction: column; gap: 7px; }
.rst-kanban__card b { font: var(--type-body-02); font-weight: 500; }

.rst-feedpost { border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-lg); background: var(--surface-primary); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.rst-feedpost__head { display: flex; gap: 10px; align-items: center; }
.rst-feedpost__media { border-radius: var(--radius-md); aspect-ratio: 16/9; background: linear-gradient(135deg, var(--color-cyan-40), var(--color-blue-60)); }
.rst-feedpost__actions { display: flex; gap: 18px; color: var(--text-secondary); font: var(--type-body-02); }
.rst-feedpost__actions button { display: inline-flex; gap: 6px; align-items: center; color: inherit; }
.rst-feedpost__actions svg { width: 16px; height: 16px; }

/* ==================================================== Patterns ============= */
.rst-pattern-hero { border-radius: var(--radius-3xl); padding: 40px; background: var(--material-gradient); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rst-pattern-hero h3 { font: var(--type-heading-02); letter-spacing: -0.02em; color: var(--color-neutral-100); }
:root[data-theme="dark"] .rst-pattern-hero h3 { color: var(--color-neutral-0); }
.rst-pattern-hero p { font: var(--type-body-01); max-width: 52ch; color: var(--color-neutral-80); }
:root[data-theme="dark"] .rst-pattern-hero p { color: var(--color-neutral-20); }
.rst-hero-metrics { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 8px; }
.rst-hero-metrics div { display: flex; flex-direction: column; }
.rst-hero-metrics b { font: var(--type-heading-02); font-variant-numeric: tabular-nums; color: var(--color-neutral-100); }
:root[data-theme="dark"] .rst-hero-metrics b { color: var(--color-neutral-0); }
.rst-hero-metrics span { font: var(--type-helper-01); color: var(--color-neutral-70); }
:root[data-theme="dark"] .rst-hero-metrics span { color: var(--color-neutral-30); }

.rst-footer-demo { border-top: var(--border-subtle) solid var(--border-subtle-color); padding-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.rst-footer-demo h4 { font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); margin-bottom: 10px; }
.rst-footer-demo ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rst-footer-demo a { font: var(--type-body-02); color: var(--text-secondary); }

.rst-404 { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rst-404 b { font: var(--type-display-02); color: var(--interactive-primary); letter-spacing: -0.03em; }

.rst-template-preview {
  border-radius: var(--radius-lg);
  overflow: hidden; background: transparent; display: grid;
  grid-template-columns: 72px minmax(0,1fr); min-height: 280px;
}
/* The rail is the real collapsed Side Navigation at its production 72px, not a
   stack of grey blocks standing in for one. */
.rst-template-preview__rail {
  background: var(--navigation-background);
  display: flex; justify-content: center;
}
.rst-template-preview__rail .rst-navrail { width: 100%; flex: none; }
.rst-template-preview__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rst-template-grid { display: grid; gap: 12px; }

/* ===========================================================================
   RST/Agent and RST/Research — the AI & Intelligence public surfaces.
   Added in Phase G: the component masters (RST/Agent 6:22329, RST/Research
   6:24319) had no implementation here, so the developer reference had nothing
   real to point at. Both are authored at a fixed width — 320 and 340 — and
   neither flexes. Responsiveness comes from the parent layout container.
   =========================================================================== */

.rst-agent,
.rst-research {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--card-background);
  border: var(--border-subtle) solid var(--card-border);
  color: var(--card-text);
}
.rst-agent    { width: 320px; }
.rst-research { width: 340px; }

/* Materials mirror RST/Card, because they are the same material system. */
.rst-agent[data-material="glass"],
.rst-research[data-material="glass"] {
  background: var(--material-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}
.rst-agent[data-material="inverse"] {
  background: var(--surface-inverse); color: var(--text-inverse); border-color: transparent;
}
.rst-research[data-material="gradient"] {
  background: var(--gradient-soft); border-color: transparent;
  color: var(--text-on-gradient);
}

/* Setting `color` on the card is not enough, and this is the part that was
   wrong. Only the title inherits it; every other line inside these cards names
   its own colour — --text-secondary for body and evidence, --text-helper for
   the eyebrow and footer. Those two are tuned for the PAGE surface, so on a
   gradient or an inverse fill they keep the page's dark ink and the supporting
   copy goes black on a deep purple-to-orange gradient while the heading beside
   it is correct.

   So the material re-points its own foregrounds at the on-material tokens
   rather than each card hardcoding a colour. The tokens flip with the mode, so
   this holds for RST default and for any brand a Brand Studio panel applies. */
.rst-research[data-material="gradient"] .rst-research__title {
  color: var(--text-on-gradient);
}
.rst-research[data-material="gradient"] .rst-research__body,
.rst-research[data-material="gradient"] .rst-research__evidence,
.rst-research[data-material="gradient"] .rst-research__eyebrow,
.rst-research[data-material="gradient"] .rst-research__foot {
  color: var(--text-on-gradient-muted);
}
.rst-research[data-material="gradient"] .rst-research__foot a {
  color: var(--text-on-gradient);
}

.rst-agent[data-material="inverse"] .rst-agent__id b {
  color: var(--text-inverse);
}
.rst-agent[data-material="inverse"] .rst-agent__desc,
.rst-agent[data-material="inverse"] .rst-agent__state,
.rst-agent[data-material="inverse"] .rst-agent__foot {
  color: var(--text-inverse-muted);
}
.rst-agent[data-material="inverse"] .rst-agent__foot a {
  color: var(--text-inverse);
}

/* --- Agent ---------------------------------------------------------------- */
.rst-agent__head { display: flex; align-items: flex-start; gap: 10px; }
.rst-agent__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--brand-primary-soft); color: var(--interactive-primary);
}
.rst-agent__avatar svg { width: 18px; height: 18px; }
.rst-agent__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rst-agent__id b { font: var(--type-label-01); color: inherit; }
.rst-agent__state { font: var(--type-helper-01); color: var(--text-helper); }
.rst-agent__desc { font: var(--type-body-02); color: var(--text-secondary); }
.rst-agent__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; font: var(--type-helper-01); color: var(--text-helper);
}
.rst-agent__foot a { color: var(--interactive-primary); }

/* The status colour is carried by the state text, never by the surface alone. */
.rst-agent[data-state="complete"] .rst-agent__state { color: var(--status-success); }
.rst-agent[data-state="warning"]  .rst-agent__state { color: var(--status-warning); }
.rst-agent[data-state="failed"]   .rst-agent__state { color: var(--status-error); }
.rst-agent[data-state="researching"] .rst-agent__state,
.rst-agent[data-state="processing"]  .rst-agent__state,
.rst-agent[data-state="thinking"]    .rst-agent__state { color: var(--status-info); }

/* --- Research ------------------------------------------------------------- */
.rst-research__eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-helper);
}
.rst-research__title { font: var(--type-heading-04); color: inherit; }
.rst-research__body { font: var(--type-body-02); color: var(--text-secondary); }
.rst-research__evidence { font: var(--type-helper-01); color: var(--text-secondary); }
.rst-research__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; font: var(--type-helper-01); color: var(--text-helper);
}
.rst-research__foot a { color: var(--interactive-primary); }

/* Below the authored width there is nowhere left to go, so the surface gives
   up its fixed width rather than overflow the viewport. */
@media (max-width: 400px) {
  .rst-agent, .rst-research { width: 100%; }
}

/* ===========================================================================
   RST/Diagram — reference implementation.

   Nodes are HTML, connectors are one SVG layer beneath them, labels are HTML
   on top. Everything colours from semantic variables, so Light and Dark are
   the same markup in two modes rather than two sets of components.

   The canvas is a surface, not a box: a hairline, a radius and an optional
   grid, and nothing that competes with the nodes drawn on it.
   =========================================================================== */
.rst-dgfigure { margin: 0; }

.rst-dgcanvas {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle-color);
  padding: 24px;
}
.rst-dgcanvas[data-density="compact"] { padding: 14px; }
.rst-dgcanvas[data-density="spacious"] { padding: 36px; }

/* The grid is a hint about alignment, not a drawing. It stays under 6% so it
   reads as texture in Light and does not glow in Dark. */
.rst-dgcanvas[data-grid="on"] {
  background-image:
    radial-gradient(circle at 1px 1px, var(--border-subtle-color) 1px, transparent 0);
  background-size: 16px 16px;
  background-position: -1px -1px;
}
.rst-dgcanvas[data-material="glass"] {
  background-color: var(--surface-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border-color: var(--border-subtle-color);
}
.rst-dgcanvas[data-material="elevated"] {
  background-color: var(--surface-elevated);
  box-shadow: var(--elevation-1);
}
.rst-dgcanvas[data-pan="on"] {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.rst-dgstage { position: relative; }
.rst-dgedges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

/* ------------------------------------------------------------------- nodes */
.rst-dgnode {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle-color);
  box-shadow: var(--elevation-1);
  color: var(--text-primary);
}
.rst-dgnode[data-material="glass"] {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
.rst-dgnode__icon { display: inline-flex; flex: none; color: var(--brand-primary); margin-top: 1px; }
.rst-dgnode__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rst-dgnode__title { font: var(--type-label-01); color: var(--text-primary); }
.rst-dgnode__desc { font: var(--type-caption-01); color: var(--text-secondary); }
/* The type word is what keeps node meaning alive in greyscale and for anyone
   who cannot pick the accent apart from the border. */
.rst-dgnode__type {
  position: absolute; top: -9px; left: 12px;
  font: var(--type-helper-01);
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle-color);
  color: var(--text-helper);
  white-space: nowrap;
}

/* Type accents. Each is a left edge and an icon colour — never a fill, so a
   node never competes with a card. */
.rst-dgnode[data-type="start-end"] { border-radius: var(--radius-full); }
.rst-dgnode[data-type="start-end"] .rst-dgnode__icon { color: var(--text-secondary); }
.rst-dgnode[data-type="decision"] { border-color: var(--brand-warm); }
.rst-dgnode[data-type="decision"] .rst-dgnode__icon { color: var(--brand-warm); }
.rst-dgnode[data-type="user"] .rst-dgnode__icon { color: var(--brand-accent); }
.rst-dgnode[data-type="system"] .rst-dgnode__icon { color: var(--text-secondary); }
.rst-dgnode[data-type="agent"] { border-color: var(--brand-secondary); }
.rst-dgnode[data-type="agent"] .rst-dgnode__icon { color: var(--brand-secondary); }
.rst-dgnode[data-type="research"] .rst-dgnode__icon { color: var(--brand-accent); }
.rst-dgnode[data-type="data"] .rst-dgnode__icon { color: var(--text-secondary); }
.rst-dgnode[data-type="action"] .rst-dgnode__icon { color: var(--brand-primary); }
.rst-dgnode[data-type="outcome"] { border-color: var(--brand-positive-accent); }
.rst-dgnode[data-type="outcome"] .rst-dgnode__icon { color: var(--brand-positive-accent); }

.rst-dgnode[data-state="muted"] { opacity: .62; box-shadow: none; }
.rst-dgnode[data-state="current"] { border-color: var(--border-interactive); box-shadow: var(--elevation-2); }

/* -------------------------------------------------------------- connectors */
.rst-dgedge__line { fill: none; stroke: var(--border-strong-color); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rst-dgedge__head { fill: var(--border-strong-color); stroke: none; }
.rst-dgedge__line[data-edge="success"], .rst-dgedge__head[data-edge="success"] { stroke: var(--status-success); fill: var(--status-success); }
.rst-dgedge__line[data-edge="success"] { fill: none; }
.rst-dgedge__line[data-edge="warning"], .rst-dgedge__head[data-edge="warning"] { stroke: var(--status-warning); fill: var(--status-warning); }
.rst-dgedge__line[data-edge="warning"] { fill: none; }
.rst-dgedge__line[data-edge="error"], .rst-dgedge__head[data-edge="error"] { stroke: var(--status-error); fill: var(--status-error); }
.rst-dgedge__line[data-edge="error"] { fill: none; }
.rst-dgedge__line[data-edge="conditional"], .rst-dgedge__head[data-edge="conditional"] { stroke: var(--text-helper); fill: var(--text-helper); }
.rst-dgedge__line[data-edge="conditional"] { fill: none; }

/* A label sits on the line it names, on its own chip so the line does not
   strike through the words. */
.rst-dgedge__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font: var(--type-helper-01);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle-color);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: none;
}
.rst-dgedge__label[data-edge="success"] { color: var(--support-success); }
.rst-dgedge__label[data-edge="warning"] { color: var(--support-warning); }
.rst-dgedge__label[data-edge="error"] { color: var(--support-error); }

/* ------------------------------------------------------- groups and notes */
.rst-dggroup {
  position: absolute;
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border-subtle-color);
  background: color-mix(in srgb, var(--surface-base) 45%, transparent);
  pointer-events: none;
}
.rst-dggroup__label {
  position: absolute; top: -10px; left: 14px;
  font: var(--type-helper-01);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  color: var(--text-helper);
}
.rst-dggroup[data-tone="accent"] { border-color: var(--brand-accent-soft); }
.rst-dggroup[data-tone="brand"] { border-color: var(--brand-primary-soft); }

.rst-dgnote {
  position: absolute;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--status-info-soft);
  color: var(--text-primary);
  border-left: 2px solid var(--status-info);
}
.rst-dgnote__title { font: var(--type-label-01); }
.rst-dgnote__body { font: var(--type-caption-01); color: var(--text-secondary); }

/* ----------------------------------------------------------------- legend */
.rst-dglegend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.rst-dglegend__item { display: inline-flex; align-items: center; gap: 7px; font: var(--type-caption-01); color: var(--text-secondary); }
.rst-dglegend__swatch { display: inline-flex; color: var(--text-helper); }
.rst-dglegend__swatch[data-type="decision"] { color: var(--brand-warm); }
.rst-dglegend__swatch[data-type="agent"] { color: var(--brand-secondary); }
.rst-dglegend__swatch[data-type="user"], .rst-dglegend__swatch[data-type="research"] { color: var(--brand-accent); }
.rst-dglegend__swatch[data-type="action"] { color: var(--brand-primary); }
.rst-dglegend__swatch[data-type="outcome"] { color: var(--brand-positive-accent); }
.rst-dglegend__line { width: 22px; height: 0; border-top: 1.5px solid var(--border-strong-color); }
.rst-dglegend__line[data-edge="success"] { border-color: var(--status-success); }
.rst-dglegend__line[data-edge="warning"] { border-top-style: dashed; border-color: var(--status-warning); }
.rst-dglegend__line[data-edge="error"] { border-top-style: dashed; border-color: var(--status-error); }
.rst-dglegend__line[data-edge="conditional"] { border-top-style: dotted; border-color: var(--text-helper); }

.rst-dgcaption { margin-top: 10px; font: var(--type-caption-01); color: var(--text-helper); }

/* --------------------------------------------------------- reading order */
.rst-dgsteps { margin-top: 14px; }
.rst-dgsteps > summary {
  cursor: pointer; font: var(--type-label-01); color: var(--text-secondary);
  padding: 6px 2px; border-radius: var(--radius-sm);
}
.rst-dgsteps > summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rst-dgsteps ol { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.rst-dgsteps li { font: var(--type-body-02); color: var(--text-primary); }
.rst-dgsteps__type { font: var(--type-helper-01); color: var(--text-helper); margin-left: 8px; }
.rst-dgsteps__desc, .rst-dgsteps__next { display: block; font: var(--type-caption-01); color: var(--text-secondary); margin-top: 2px; }
.rst-dgsteps__next { color: var(--text-helper); }
.rst-dgnotice { font: var(--type-body-02); color: var(--text-secondary); margin-bottom: 10px; }

@media (max-width: 767px) {
  .rst-dgcanvas { padding: 14px; border-radius: var(--radius-xl); }
  .rst-dgnode__desc { font: var(--type-caption-01); }
}

/* Agent activity stream and tool calls — the two Agent surfaces that need
   structure of their own rather than another card. Both are lists first:
   order is the meaning, and the icon plus the word carry the state. */
.rst-actstream { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rst-actstream li { display: flex; gap: 10px; align-items: flex-start; font: var(--type-body-02); color: var(--text-primary); }
.rst-actstream__mark { display: inline-flex; flex: none; margin-top: 1px; color: var(--text-helper); }
.rst-actstream li[data-tone="done"] .rst-actstream__mark { color: var(--status-success); }
.rst-actstream li[data-tone="warn"] .rst-actstream__mark { color: var(--status-warning); }
.rst-actstream li[data-tone="fail"] .rst-actstream__mark { color: var(--status-error); }
.rst-actstream li[data-tone="active"] .rst-actstream__mark { color: var(--brand-primary); }
.rst-actstream__meta { display: block; font: var(--type-caption-01); color: var(--text-secondary); margin-top: 2px; }

.rst-toolcall {
  border: 1px solid var(--border-subtle-color);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  overflow: hidden;
}
.rst-toolcall > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font: var(--type-body-02); color: var(--text-primary);
}
.rst-toolcall > summary::-webkit-details-marker { display: none; }
.rst-toolcall > summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.rst-toolcall__icon { display: inline-flex; color: var(--text-helper); }
.rst-toolcall[data-tone="warn"] .rst-toolcall__icon { color: var(--status-warning); }
.rst-toolcall[data-tone="fail"] .rst-toolcall__icon { color: var(--status-error); }
.rst-toolcall[data-tone="done"] .rst-toolcall__icon { color: var(--status-success); }
.rst-toolcall__meta { margin-left: auto; font: var(--type-caption-01); color: var(--text-secondary); }
.rst-toolcall__body {
  margin: 0; padding: 12px 14px;
  border-top: 1px solid var(--border-subtle-color);
  background: var(--surface-subtle);
  font: var(--type-code-01); color: var(--text-secondary);
  overflow-x: auto; white-space: pre;
}
/* RST Catalog — documentation chrome (kept deliberately lighter than the components) */

.rst-cat {
  padding-block: 44px 8px;
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.rst-cat h2 { font: var(--type-caption-01); letter-spacing: 0.14em; text-transform: uppercase; color: var(--interactive-primary); }
.rst-cat span { font: var(--type-helper-01); color: var(--text-helper); font-family: var(--font-mono); }

.rst-sec { padding-block: 40px; scroll-margin-top: 80px; }
/* Sections take programmatic focus after a jump so screen readers land in the
   right place — but they are containers, not controls, so no ring is drawn. */
.rst-sec:focus, .rst-sec:focus-visible { outline: none; }
.rst-sec__head { margin-bottom: 20px; }
.rst-sec__title { font: var(--type-heading-02); letter-spacing: -0.015em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rst-sec__anchor { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.rst-sec__title:hover .rst-sec__anchor, .rst-sec__anchor:focus-visible { opacity: 1; }
.rst-sec__desc { margin-top: 10px; font: var(--type-body-01); color: var(--text-secondary); max-width: 68ch; }
.rst-sec__source {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 18px;
  font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper);
  padding: 9px 12px; background: transparent; border-radius: var(--radius-sm);
}
.rst-sec__source b { color: var(--text-secondary); font-weight: 500; }

.rst-block { margin-top: 26px; }
.rst-block__label {
  font: var(--type-caption-01); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-helper); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

/* the specimen frame — where live components are shown */
.rst-specimen {
  border-radius: var(--radius-lg);
  background: transparent;
  padding: 28px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  min-height: 96px;
}
.rst-specimen--stack { flex-direction: column; align-items: stretch; }
.rst-specimen--center { justify-content: center; }
.rst-specimen--plain { background: transparent; }
.rst-specimen--tight { padding: 16px; }

/* labelled specimen cells, used for state / variant rows */
.rst-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(var(--cell, 220px), 1fr)); }
.rst-cell {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 18px; border-radius: var(--radius-md);
  background: transparent;
}
.rst-cell--center { align-items: center; text-align: center; }
/* The caption always sinks to the bottom of the cell; everything else keeps
   its source order (default order:0 would otherwise float unordered children up). */
.rst-cell > * { order: 1; }
.rst-cell__name { font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); order: 9; }

/* control panel */
.rst-controls {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
  padding: 16px 18px; border-radius: var(--radius-md);
  background: transparent;
  margin-bottom: 14px;
}
.rst-control { display: flex; flex-direction: column; gap: 5px; min-width: 132px; }
.rst-control__label { font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); }
.rst-control select {
  height: 34px; padding: 0 28px 0 10px; border-radius: var(--radius-sm);
  border: var(--border-subtle) solid var(--input-border); background: var(--input-background);
  color: var(--text-primary); font: var(--type-body-02); cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.rst-control--check { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.rst-control--check input { width: 16px; height: 16px; accent-color: var(--interactive-primary); }
.rst-control--check label { font: var(--type-body-02); color: var(--text-secondary); cursor: pointer; }

/* usage guidance */
.rst-guidance { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }
.rst-guide { padding: 16px 18px; border-radius: var(--radius-md); background: transparent; }
.rst-guide h4 { display: flex; align-items: center; gap: 8px; font: var(--type-label-01); margin-bottom: 8px; }
.rst-guide h4 svg { width: 16px; height: 16px; }
.rst-guide--do h4 { color: var(--status-success); }
.rst-guide--dont h4 { color: var(--status-error); }
.rst-guide ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rst-guide li { font: var(--type-body-02); color: var(--text-secondary); padding-left: 14px; position: relative; }
.rst-guide li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong-color); }

.rst-a11y { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md); background: transparent; }
.rst-a11y h4 { font: var(--type-label-01); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.rst-a11y h4 svg { width: 16px; height: 16px; }
.rst-a11y p { font: var(--type-body-02); color: var(--text-secondary); }

.rst-props { margin-top: 26px; overflow-x: auto; border-radius: var(--radius-md); }
.rst-props table { width: 100%; min-width: 520px; font: var(--type-body-02); }
.rst-props th { text-align: left; font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); padding: 10px 14px; background: var(--surface-subtle); border-bottom: var(--border-subtle) solid var(--border-subtle-color); }
.rst-props td { padding: 9px 14px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); vertical-align: top; }
.rst-props tr:last-child td { border-bottom: none; }
.rst-props code { font: var(--type-code-01); color: var(--interactive-primary); }
.rst-props td:nth-child(3) { color: var(--text-secondary); }

/* foundations */
.rst-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.rst-swatch { border-radius: var(--radius-sm); overflow: hidden; border: var(--border-subtle) solid var(--border-subtle-color); }
.rst-swatch__chip { height: 56px; }
.rst-swatch__meta { padding: 7px 9px; background: var(--surface-primary); }
.rst-swatch__name { font: var(--type-caption-01); color: var(--text-primary); word-break: break-all; }
.rst-swatch__hex { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); text-transform: uppercase; }

.rst-ramp { display: flex; flex-direction: column; gap: 14px; }
.rst-ramp__row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding-bottom: 12px; }
.rst-ramp__meta { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); min-width: 210px; }

.rst-scale-row { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.rst-scale-row__bar { height: 22px; border-radius: var(--radius-xs); background: var(--interactive-primary); opacity: 0.85; }
.rst-scale-row__meta { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); white-space: nowrap; }

.rst-radius-grid, .rst-elev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.rst-radius-demo { height: 72px; background: var(--brand-primary-soft); border: var(--border-subtle) solid var(--interactive-primary); }
:root[data-theme="dark"] .rst-radius-demo { background: var(--color-blue-90); }
.rst-elev-demo { height: 72px; border-radius: var(--radius-md); background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color); }

.rst-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rst-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: var(--radius-sm); background: transparent; }
.rst-icon-cell svg { width: 24px; height: 24px; color: var(--icon-primary); }
.rst-icon-cell span { font: var(--type-helper-01); color: var(--text-helper); text-align: center; word-break: break-word; }

.rst-grid-demo { display: grid; gap: 8px; }
.rst-grid-demo__col { height: 56px; background: var(--brand-primary-soft); border-radius: var(--radius-xs); }
:root[data-theme="dark"] .rst-grid-demo__col { background: var(--color-blue-90); }

.rst-motion-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.rst-motion-track { flex: 1 1 auto; height: 34px; background: var(--surface-primary); border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.rst-motion-dot { position: absolute; top: 7px; left: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--interactive-primary); }
.rst-motion-track[data-run="true"] .rst-motion-dot { animation: rst-slide var(--dur, 320ms) var(--ease, ease) forwards; }
.rst-motion-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.rst-motion-examples button { min-height: 72px; padding: 12px; border: 1px solid var(--border-subtle-color); border-radius: var(--radius-sm); background: var(--surface-primary); color: var(--text-primary); cursor: pointer; font: var(--type-label-01); }
.rst-motion-examples button:hover { border-color: var(--interactive-primary); }
.rst-motion-examples button[data-play="true"] { animation: rst-variant-reveal var(--motion-duration-reveal) cubic-bezier(.22,1,.36,1) both; }
.rst-motion-examples button[data-motion-variant="fade"] { --rst-motion-from: translate3d(0,0,0); }
.rst-motion-examples button[data-motion-variant="fade-up"] { --rst-motion-from: translate3d(0,24px,0); }
.rst-motion-examples button[data-motion-variant="fade-down"] { --rst-motion-from: translate3d(0,-24px,0); }
.rst-motion-examples button[data-motion-variant="slide-left"] { --rst-motion-from: translate3d(24px,0,0); }
.rst-motion-examples button[data-motion-variant="slide-right"] { --rst-motion-from: translate3d(-24px,0,0); }
.rst-motion-examples button[data-motion-variant="scale"] { --rst-motion-from: scale(.96); }
@keyframes rst-variant-reveal { from { opacity: 0; transform: var(--rst-motion-from); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rst-motion-examples button[data-play="true"] { animation: none; } }
@keyframes rst-slide { to { left: calc(100% - 24px); } }

/* mode comparison */
.rst-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.rst-mode-panel { border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-page); }
.rst-mode-panel__label { font: var(--type-label-01); }

/* responsive preview */
.rst-viewports { display: flex; flex-direction: column; gap: 18px; }
.rst-viewport { border-radius: var(--radius-md); overflow: hidden; }
.rst-viewport__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); }
.rst-viewport__body { padding: 16px; }

/* charts */
.rst-chart { width: 100%; }
.rst-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.rst-chart__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rst-chart__titles { min-width: 0; }
.rst-chart__title { font: var(--type-heading-04); }
.rst-chart__subtitle { font: var(--type-body-02); color: var(--chart-label); }
.rst-chart__kpi { font: var(--type-heading-02); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rst-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.rst-chart__legend button { display: inline-flex; align-items: center; gap: 7px; font: var(--type-body-02); color: var(--chart-label); border-radius: var(--radius-xs); padding: 2px 4px; }
.rst-chart__legend button[aria-pressed="false"] { opacity: 0.4; }
.rst-chart__legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.rst-chart-card {
  background: var(--rst-catalog-panel-bg);
  border: 1px solid var(--rst-catalog-panel-border);
  border-radius: var(--radius-lg); padding: 22px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rst-chart-tip {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--chart-tooltip-background); color: var(--chart-tooltip-text);
  border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-sm); padding: 8px 10px; font: var(--type-body-02);
  box-shadow: var(--elevation-2); opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}
.rst-chart-tip[data-open="true"] { opacity: 1; }
.rst-chart-tip b { font-variant-numeric: tabular-nums; }
.rst-chart-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }

/* command palette / search */
.rst-cmdk {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center;
  padding-top: clamp(48px, 12vh, 140px); background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-standard);
}
.rst-cmdk[data-open="true"] { opacity: 1; pointer-events: auto; }
.rst-cmdk__panel {
  width: min(620px, calc(100vw - 32px));
  background: var(--overlay-background); border: var(--border-subtle) solid var(--border-subtle-color);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-3); overflow: hidden;
  transform: translateY(-8px); transition: transform var(--motion-base) var(--ease-entrance);
}
.rst-cmdk[data-open="true"] .rst-cmdk__panel { transform: translateY(0); }
.rst-cmdk__input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); }
.rst-cmdk__input svg { width: 18px; height: 18px; color: var(--icon-secondary); }
.rst-cmdk__input input { flex: 1 1 auto; border: none; outline: none; background: none; font: var(--type-body-01); color: var(--text-primary); }
.rst-cmdk__results { max-height: min(420px, 56vh); overflow-y: auto; padding: 6px; list-style: none; }
.rst-cmdk__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); text-align: left; color: var(--text-primary); }
.rst-cmdk__item[data-active="true"] { background: var(--surface-selected); }
.rst-cmdk__item b { font: var(--type-body-01); font-weight: 500; }
.rst-cmdk__item span { font: var(--type-helper-01); color: var(--text-helper); }
.rst-cmdk__cat { margin-left: auto; font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); }
.rst-cmdk__empty { padding: 28px; text-align: center; color: var(--text-helper); font: var(--type-body-02); }
.rst-cmdk__foot { display: flex; gap: 14px; padding: 9px 14px; border-top: var(--border-subtle) solid var(--border-subtle-color); font: var(--type-helper-01); color: var(--text-helper); }
.rst-cmdk__foot kbd { font-family: var(--font-mono); background: var(--surface-subtle); border: var(--border-subtle) solid var(--border-subtle-color); border-radius: var(--radius-xs); padding: 1px 5px; }

.rst-scope-note { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md); background: transparent; font: var(--type-body-02); color: var(--text-secondary); }
.rst-scope-note b { color: var(--text-primary); }

@media (max-width: 767px) {
  .rst-sec { padding-block: 30px; }
  .rst-sec__title { font: var(--type-heading-03); }
  .rst-specimen { padding: 18px; gap: 14px; }
  .rst-kanban { grid-template-columns: 1fr; }
  .rst-chart-gallery { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Developer reference — Phase G
   Code blocks, copy controls, token tables and the token layer diagram.
   Semantic tokens only; no primitives.
   =========================================================================== */

/* Spec vs reference implementation banner */
.rst-devnote {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md);
  background: transparent;
  font: var(--type-body-02); color: var(--text-secondary);
}
.rst-devnote b { color: var(--text-primary); }

.rst-split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 20px; }
.rst-split__col {
  padding: 16px 18px; border-radius: var(--radius-md);
  background: transparent;
}
.rst-split__col h4 {
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-helper); margin-bottom: 8px;
}
.rst-split__col p { font: var(--type-body-02); color: var(--text-secondary); }

/* ------------------------------------------------------------- code block */
.rst-code {
  margin-top: 14px;
  border-radius: var(--radius-md);
  background: transparent;
  overflow: hidden;
}
.rst-code__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px;
  background: transparent;
}
.rst-code__lang {
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-helper);
}
.rst-code__file { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); }
.rst-code__spacer { margin-left: auto; }
.rst-code pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; contain: paint;
  font: var(--type-code-01); color: var(--text-primary);
  tab-size: 2;
}
.rst-code code { font: inherit; color: inherit; background: none; padding: 0; }

/* ------------------------------------------------------------ copy button */
.rst-copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; min-width: 30px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: var(--border-subtle) solid var(--border-subtle-color);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font: var(--type-caption-01); letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.rst-copy:hover { background: var(--surface-interactive); color: var(--text-primary); border-color: var(--border-strong-color); }
.rst-copy svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* The label is a fixed-width slot so swapping Copy -> Copied never reflows. */
.rst-copy__label { display: inline-block; min-width: 46px; text-align: left; }
.rst-copy[data-state="done"] { color: var(--status-success); border-color: var(--status-success); }
.rst-copy[data-state="fail"] { color: var(--status-error); border-color: var(--status-error); }

/* --------------------------------------------------------- live + source */
.rst-example { margin-top: 20px; }
.rst-example__preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 24px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
}
.rst-example__preview--stack { flex-direction: column; align-items: stretch; }
/* Flex items default to min-width:auto, so a wide child (a table, a long
   code line) refuses to shrink and widens the page on a narrow viewport. */
.rst-example__preview, .rst-example__preview > * { min-width: 0; max-width: 100%; }
.rst-example .rst-code { margin-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ------------------------------------------------------------ token table */
.rst-tokens {
  margin-top: 20px;
  /* The table is wider than the column on purpose — this is the scroll
     container that keeps it from widening the page. */
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  /* overflow alone does not stop this table from widening the page in this
     layout — paint containment does, and changes nothing visually. */
  contain: paint;
  border-radius: var(--radius-md);
}
/* The host div the renderer mounts into must not size to its content either. */
[data-devref] { min-width: 0; max-width: 100%; }
.rst-tokens table { width: 100%; min-width: 760px; font: var(--type-body-02); border-collapse: collapse; }
.rst-tokens th {
  text-align: left; font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-helper); padding: 10px 14px; background: var(--surface-subtle);
  border-bottom: var(--border-subtle) solid var(--border-subtle-color); white-space: nowrap;
}
.rst-tokens td { padding: 9px 14px; border-bottom: var(--border-subtle) solid var(--border-subtle-color); vertical-align: middle; }
.rst-tokens tr:last-child td { border-bottom: none; }
.rst-tokens code { font: var(--type-code-01); color: var(--interactive-primary); white-space: nowrap; }
.rst-tokens__purpose { color: var(--text-secondary); min-width: 220px; }
.rst-tok-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper);
  text-transform: uppercase; white-space: nowrap;
}
.rst-tok-chip i {
  width: 20px; height: 20px; border-radius: var(--radius-xs); flex: 0 0 auto;
  border: var(--border-subtle) solid var(--border-subtle-color);
}
.rst-tokens__group td {
  background: var(--surface-subtle);
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* --------------------------------------------------- token layer diagram */
.rst-layers { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rst-layer {
  position: relative; min-width: 0; padding: 16px 18px; border-radius: var(--radius-md);
  background: transparent;
}
.rst-layer__step { display: block; font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); }
.rst-layer__name {
  display: block;
  font: var(--type-label-01); color: var(--text-primary); margin-top: 4px;
  /* Slash-separated token paths have no natural break point. */
  overflow-wrap: anywhere; min-width: 0;
}
.rst-layer__val {
  font: var(--type-code-01); color: var(--interactive-primary);
  margin-top: 8px; display: block;
  /* A long var() reference must break rather than widen the grid track. */
  word-break: break-word; overflow-wrap: anywhere; min-width: 0;
}
.rst-layer__why { font: var(--type-helper-01); color: var(--text-helper); margin-top: 8px; }

/* ------------------------------------------------------- availability tag */
.rst-avail {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--radius-full);
  font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase;
}
.rst-avail[data-state="available"] { background: var(--status-success-soft); color: var(--status-success); }
.rst-avail[data-state="missing"]   { background: var(--status-warning-soft); color: var(--status-warning); }

/* --------------------------------------------------------- dev component */
.rst-devitem {
  margin-top: 26px; padding-top: 24px;
}
.rst-devitem:first-of-type { padding-top: 0; }
.rst-devitem__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rst-devitem__head h3 { font: var(--type-heading-04); color: var(--text-primary); }
.rst-devitem__src { font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper); }
.rst-devitem__purpose { margin-top: 8px; font: var(--type-body-02); color: var(--text-secondary); max-width: 72ch; }
.rst-devitem__facts { margin-top: 14px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rst-fact { font: var(--type-body-02); }
.rst-fact b {
  display: block; font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-helper); margin-bottom: 3px;
}
.rst-fact span { color: var(--text-secondary); }
.rst-fact code { font: var(--type-code-01); color: var(--interactive-primary); }

@media (max-width: 767px) {
  .rst-example__preview { padding: 16px; }
  .rst-code pre { padding: 12px; }
  .rst-layers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rst-copy { transition: none; }
}

/* ===========================================================================
   Brand foundations — Phase H
   =========================================================================== */
.rst-brand-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 20px; }
.rst-brand-swatch {
  border-radius: var(--radius-md); overflow: hidden; min-width: 0;
  background: var(--rst-catalog-panel-bg);
  border: 1px solid var(--rst-catalog-panel-border);
}
.rst-brand-swatch__chip { height: 92px; }
.rst-brand-swatch__meta { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.rst-brand-swatch__role {
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper);
}
.rst-brand-swatch__name { font: var(--type-label-01); color: var(--text-primary); }
.rst-brand-swatch__token { font: var(--type-code-01); color: var(--interactive-primary); overflow-wrap: anywhere; }
.rst-brand-swatch__hex {
  font: var(--type-helper-01); font-family: var(--font-mono); color: var(--text-helper);
}
.rst-brand-swatch__use { margin-top: 6px; font: var(--type-body-02); color: var(--text-secondary); }

.rst-brand-grads { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 20px; }
.rst-brand-grad {
  border-radius: var(--radius-md); overflow: hidden; min-width: 0;
  background: var(--rst-catalog-panel-bg);
  border: 1px solid var(--rst-catalog-panel-border);
}
.rst-brand-grad__chip {
  min-height: 110px; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.rst-brand-grad__chip b { font: var(--type-heading-04); }
.rst-brand-grad__chip span { font: var(--type-helper-01); opacity: 0.85; }
.rst-brand-grad__meta { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.rst-brand-grad__meta code { font: var(--type-code-01); color: var(--interactive-primary); overflow-wrap: anywhere; }
.rst-brand-grad__meta p { font: var(--type-body-02); color: var(--text-secondary); }

.rst-brand-rule {
  margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md);
  background: transparent;
  font: var(--type-body-02); color: var(--text-secondary);
}
.rst-brand-rule b { color: var(--text-primary); }

/* ------------------------------------------------- dashboard documentation */
.rst-dash-meta { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }

.rst-dash-notes {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  border-radius: var(--radius-md); overflow: hidden;
}
.rst-dash-notes dt {
  font: var(--type-caption-01); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-helper); padding: 11px 14px; background: transparent;
}
.rst-dash-notes dd {
  font: var(--type-body-02); color: var(--text-secondary); padding: 11px 14px; min-width: 0;
}

.rst-dash-inv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rst-dash-inv__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 10px; border-radius: var(--radius-full);
  background: transparent;
}
.rst-dash-inv__item code { font: var(--type-code-01); color: var(--text-secondary); }
.rst-dash-inv__item b {
  min-width: 22px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--surface-subtle); color: var(--text-primary);
  font: var(--type-caption-01); text-align: center;
}
.rst-dash-src { font: var(--type-helper-01); color: var(--text-helper); }
.rst-dash-src code { font-family: var(--font-mono); color: var(--text-secondary); }

/* Light and Dark comparison. Each column carries its own theme scope, so the
   two halves render identical markup against two sets of variable values. */
.rst-dash-modes .rst-mode-panel { background: var(--surface-page); color: var(--text-primary); min-width: 0; }
.rst-dash-modes .rst-template-preview { min-height: 0; }

/* Dashboard previews are dense by design. Below tablet the rail leaves and the
   body takes the full width rather than squeezing the content into 72px less. */
@media (max-width: 720px) {
  .rst-template-preview { grid-template-columns: minmax(0, 1fr); }
  .rst-template-preview__rail { display: none; }
  .rst-dash-notes { grid-template-columns: minmax(0, 1fr); }
  .rst-dash-notes dt { padding-bottom: 0; background: transparent; }
  .rst-dash-notes dd { padding-top: 4px; }
}

/* ------------------------------------------------------ icon documentation */
.rst-icon-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.rst-icon-search { max-width: 460px; }
.rst-icon-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rst-icon-catwrap { min-height: 40px; padding: 0 12px; min-width: 210px; }
.rst-icon-catwrap select { border: 0; background: transparent; color: inherit; font: var(--type-body-02); width: 100%; }
.rst-icon-sizes { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-subtle); }
.rst-icon-size {
  min-width: 38px; height: 30px; padding: 0 10px; border-radius: var(--radius-full);
  font: var(--type-body-02); color: var(--text-secondary);
}
.rst-icon-size[aria-pressed="true"] { background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--elevation-1); }
.rst-icon-count { font: var(--type-helper-01); color: var(--text-helper); font-family: var(--font-mono); }
.rst-icon-empty { font: var(--type-body-02); color: var(--text-secondary); padding: 28px 0; }

.rst-iconcat { margin-top: 30px; }
.rst-iconcat__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font: var(--type-label-01); color: var(--text-primary);
}
.rst-iconcat__head span {
  font: var(--type-caption-01); font-family: var(--font-mono); color: var(--text-helper);
  padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-subtle);
}
.rst-iconcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

.rst-iconcard {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px 12px; border-radius: var(--radius-md); text-align: center;
  background: transparent; min-width: 0;
}
.rst-iconcard__art { height: 40px; display: grid; place-items: center; color: var(--icon-primary); }
/* Reserve the same box for a glyph that has no geometry yet, so the grid does
   not jump between ported and unported entries. */
.rst-iconcard__gap { display: block; width: 24px; height: 24px; border-radius: var(--radius-xs); border: 1px dashed var(--border-subtle-color); }
.rst-iconcard__name { font: var(--type-body-02); font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.rst-iconcard__src { font: var(--type-caption-01); font-family: var(--font-mono); color: var(--text-helper); overflow-wrap: anywhere; }
.rst-iconcard__acts { display: flex; gap: 4px; margin-top: 2px; justify-content: center; }
.rst-iconcard__acts .rst-btn { padding: 0 10px; white-space: nowrap; }
.rst-iconcard__todo { font: var(--type-caption-01); color: var(--text-helper); font-style: italic; }
.rst-iconcard.is-unported { background: transparent; }
.rst-icon-scope { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-subtle); }
.rst-icon-scope .rst-icon-size { min-width: 0; padding: 0 14px; }
.rst-icon-catwrap select:disabled { opacity: 0.5; }

/* ===========================================================================
   Sub-blocks.

   Phase I folded several of the old one-per-component sections into a single
   documented entry — Text inputs covers the field, the textarea and the number
   input; Comparison covers the three bar forms. A sub-block is how those parts
   keep their own heading, their own source line and their own id, so an old
   deep link still lands exactly where it used to. Spacing carries hierarchy.
   =========================================================================== */
.rst-sub { margin-top: 32px; padding-top: 28px; scroll-margin-top: 80px; }
.rst-sub:first-of-type { margin-top: 28px; }
.rst-sub__head { margin-bottom: 16px; }
.rst-sub__title { font: var(--type-heading-04, var(--type-heading-03)); letter-spacing: -0.01em; color: var(--text-primary); }
.rst-sub__desc { margin-top: 8px; font: var(--type-body-02); color: var(--text-secondary); max-width: 68ch; }
.rst-sub .rst-sec__source { margin-top: 10px; }

@media (max-width: 767px) {
  .rst-sub { margin-top: 24px; padding-top: 20px; }
}

/* Diagram documentation layout. The demos sit directly on the page rather
   than inside another card — the canvas is already a surface. */
.rst-dgdemo { margin-top: 4px; }
.rst-dggrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rst-dggrid > div { min-width: 0; }

/* What's new — a timeline, because the order is the point. No boxes: a rail,
   a tag and some space carry the structure on their own. */
.rst-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--border-subtle-color); display: flex; flex-direction: column; gap: 26px; }
.rst-timeline li { position: relative; }
.rst-timeline li::before {
  content: ""; position: absolute; left: -27px; top: 6px;
  width: 9px; height: 9px; border-radius: var(--radius-full);
  background: var(--surface-page); border: 2px solid var(--brand-primary);
}
.rst-timeline li:first-child::before { background: var(--brand-primary); }
.rst-timeline__tag { font: var(--type-helper-01); letter-spacing: .04em; text-transform: uppercase; color: var(--text-helper); }
.rst-timeline__title { display: block; font: var(--type-heading-04); margin-top: 2px; }
.rst-timeline__body { margin-top: 6px; font: var(--type-body-02); color: var(--text-secondary); max-width: 66ch; }
.rst-cell__icon { display: inline-flex; color: var(--brand-primary); margin-bottom: 8px; }

/* Playground. Stage on the left, controls on the right, markup underneath.
   The stage is a surface so a glass or inverse specimen has something to be
   glass against; the panel is not a card, just a column with separators. */
.rst-pg { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.rst-pg__stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 190px; padding: 28px;
  border-radius: var(--radius-2xl);
  background: transparent;
}
.rst-pg__stage[data-ground="gradient"] { background-image: var(--gradient-ambient, none); }
.rst-pg__panel { display: flex; flex-direction: column; gap: 14px; }
.rst-pg__row { display: flex; flex-direction: column; gap: 6px; }
.rst-pg__label { font: var(--type-helper-01); letter-spacing: .04em; text-transform: uppercase; color: var(--text-helper); }
.rst-pg__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.rst-pg__opt {
  font: var(--type-caption-01);
  padding: 4px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle-color);
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
}
.rst-pg__opt:hover { background: var(--surface-interactive); color: var(--text-primary); }
.rst-pg__opt:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rst-pg__opt[aria-checked="true"] {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.rst-pg + .rst-code { margin-top: 14px; }

@media (max-width: 899px) {
  .rst-pg { grid-template-columns: minmax(0, 1fr); }
  .rst-pg__stage { min-height: 150px; padding: 20px; }
}

/* ===========================================================================
   Home.

   Editorial rather than a tile grid: a hero that says what the system is for,
   then panels that are wide where the content is wide. Each panel is a link,
   and the art inside it is a real component — so the front door cannot drift
   away from what it is advertising.
   =========================================================================== */
.rst-home { padding-block: 8px 44px; }

/* Neutral atmosphere stays behind the catalog and never catches input. */
:root[data-theme="dark"] .rst-main { position: relative; isolation: isolate; }
:root[data-theme="dark"] .rst-main::before {
  content: "";
  position: fixed; inset: -15%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 68% 28% at 18% 17%, #fff 0%, transparent 100%),
    radial-gradient(ellipse 56% 38% at 88% 62%, #aaa 0%, transparent 100%),
    radial-gradient(ellipse 72% 24% at 28% 95%, #777 0%, transparent 100%);
  filter: blur(100px);
  opacity: .055;
}
:root[data-theme="dark"] .rst-content { position: relative; z-index: 1; }

.rst-home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 48px 0 40px;
}
.rst-home-hero__flow-host, .rst-home-hero__flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.rst-home-hero__flow-host { z-index: -1; }
.rst-home-hero > :not(.rst-home-hero__flow-host) { position: relative; }
.rst-home-hero__eyebrow {
  font: var(--type-helper-01); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-primary);
}
.rst-home-hero__title {
  margin-top: 10px;
  font: var(--type-display-01);
  letter-spacing: -0.03em;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rst-home-hero__lede {
  margin-top: 14px; max-width: 46ch;
  font: var(--type-heading-04); font-weight: 400;
  color: var(--text-secondary);
}
.rst-home-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.rst-home-facts {
  display: flex; flex-wrap: wrap; gap: 28px 44px; margin: 34px 0 0;
}
.rst-home-facts div { display: flex; flex-direction: column; gap: 2px; }
.rst-home-facts dt { font: var(--type-helper-01); letter-spacing: .04em; text-transform: uppercase; color: var(--text-helper); }
.rst-home-facts dd { margin: 0; font: var(--type-label-01); color: var(--text-primary); }

.rst-home-grid {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rst-home-panel {
  display: grid; gap: 16px; grid-template-rows: auto 1fr auto;
  position: relative;
  padding: 22px;
  border-radius: var(--radius-2xl);
  background: var(--rst-catalog-group-bg);
  border: 1px solid transparent;
  color: inherit; text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.rst-home-panel:hover { background: var(--rst-catalog-panel-bg); }
.rst-home-panel:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.rst-home-panel[data-span="wide"] { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto; align-items: center; }
.rst-home-panel[data-span="wide"] .rst-home-panel__art { order: 2; }
.rst-home-panel[data-span="wide"] .rst-home-panel__text { order: 1; }
.rst-home-panel__art {
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; padding: 14px;
  border-radius: var(--radius-xl);
  background: transparent;
  overflow: hidden;
}
.rst-home-panel__eyebrow { font: var(--type-helper-01); letter-spacing: .06em; text-transform: uppercase; color: var(--text-helper); }
.rst-home-panel__title { display: block; margin-top: 6px; font: var(--type-heading-04); color: var(--text-primary); }
.rst-home-panel__desc { display: block; margin-top: 8px; font: var(--type-body-02); color: var(--text-secondary); max-width: 54ch; }
.rst-home-panel__go { display: inline-flex; color: var(--brand-primary); }
.rst-home-panel[data-span="wide"] .rst-home-panel__go { position: absolute; right: 22px; bottom: 22px; }

/* ---- panel art ---- */
.rst-home-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rst-home-brand__chip { width: 34px; height: 34px; border-radius: var(--radius-full); }
.rst-home-brand__rule { width: 1px; height: 30px; background: var(--border-subtle-color); margin-inline: 4px; }
.rst-home-brand__grad { width: 54px; height: 34px; border-radius: var(--radius-md); }

.rst-home-found { display: flex; align-items: center; gap: 22px; }
.rst-home-found__type { font: var(--type-display-02); letter-spacing: -0.03em; color: var(--text-primary); }
.rst-home-found__stack { display: flex; flex-direction: column; gap: 5px; }
.rst-home-found__stack i { height: 5px; border-radius: 2px; background: var(--brand-primary-soft); }
.rst-home-found__radii { display: flex; gap: 6px; }
.rst-home-found__radii i { width: 22px; height: 22px; border: 1.5px solid var(--border-strong-color); }

.rst-home-stack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rst-home-chart { width: 100%; }
.rst-home-dg { width: 100%; }
.rst-home-dg .rst-dgcanvas { background: transparent; border: none; padding: 0; }

.rst-home-theme { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.rst-home-theme__side { padding: 10px; border-radius: var(--radius-lg); background: var(--surface-page); display: flex; flex-direction: column; gap: 8px; }
.rst-home-theme__tag { font: var(--type-helper-01); color: var(--text-helper); }

.rst-home-code { margin: 0; width: 100%; font: var(--type-code-01); color: var(--text-secondary); white-space: pre; overflow: hidden; }
.rst-home-code b { color: var(--brand-primary); font-weight: 400; }
.rst-home-code__c { color: var(--text-helper); }

.rst-home-tpl { display: flex; gap: 10px; width: 100%; }
.rst-home-tpl { height: auto; }
.rst-home-tpl__body { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 8px; }
.rst-home-tpl__chart { grid-column: 1 / -1; min-height: 58px; }
.rst-home-tpl__chart .rst-chart { height: 100%; }

@media (max-width: 899px) {
  .rst-home-grid { grid-template-columns: minmax(0, 1fr); }
  .rst-home-panel[data-span="wide"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .rst-home-panel[data-span="wide"] .rst-home-panel__art { order: 0; }
  .rst-home-panel[data-span="wide"] .rst-home-panel__go { position: static; }
  .rst-home-hero { padding: 32px 0 28px; }
  .rst-home-hero__title { font: var(--type-display-02); }
}

/* Shared documentation surfaces. The specimens stay on the page; small
   annotations receive only a faint neutral tone in either theme. */
:root, [data-theme-scope="light"] {
  --rst-doc-surface: rgb(0 0 0 / 2%);
  --rst-catalog-demo-bg: var(--surface-primary);
  --rst-catalog-demo-border: rgba(15, 23, 42, 0.08);
  --rst-catalog-composed-bg: var(--card-background);
  --rst-catalog-composed-border: var(--card-border);
  --rst-catalog-group-bg: var(--surface-page);
  --rst-catalog-group-border: rgba(15, 23, 42, 0.08);
  --rst-catalog-panel-bg: var(--card-background);
  --rst-catalog-panel-border: var(--card-border);
}
:root[data-theme="dark"], [data-theme-scope="dark"] {
  --rst-doc-surface: rgb(255 255 255 / 2%);
  --rst-catalog-demo-bg: var(--surface-primary);
  --rst-catalog-demo-border: rgba(255, 255, 255, 0.08);
  --rst-catalog-composed-bg: var(--card-background);
  --rst-catalog-composed-border: var(--card-border);
  --rst-catalog-group-bg: var(--surface-page);
  --rst-catalog-group-border: rgba(255, 255, 255, 0.07);
  --rst-catalog-panel-bg: var(--card-background);
  --rst-catalog-panel-border: var(--card-border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --rst-doc-surface: rgb(255 255 255 / 2%);
    --rst-catalog-demo-bg: var(--surface-primary);
    --rst-catalog-demo-border: rgba(255, 255, 255, 0.08);
    --rst-catalog-composed-bg: var(--card-background);
    --rst-catalog-composed-border: var(--card-border);
    --rst-catalog-group-bg: var(--surface-page);
    --rst-catalog-group-border: rgba(255, 255, 255, 0.07);
    --rst-catalog-panel-bg: var(--card-background);
    --rst-catalog-panel-border: var(--card-border);
  }
}
.rst-specimen { border-radius: var(--radius-2xl); }
.rst-specimen--plain { padding-inline: 0; }
.rst-cell, .rst-guide, .rst-layer { background: var(--rst-doc-surface); }
.rst-example__preview, .rst-props, .rst-code { background: transparent; box-shadow: none; }
.rst-iconcard:hover { background: var(--rst-doc-surface); }

/* ===========================================================================
   Icon browser, Phase I.

   Tiles instead of cards: a glyph, its name, and nothing drawn round them. The
   specimen opens directly under the row that was clicked, so it reads as that
   tile expanding rather than as a panel arriving from somewhere else.
   =========================================================================== */
.rst-iconcats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rst-iconcat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--type-caption-01);
  padding: 5px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle-color);
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
}
.rst-iconcat-chip i { font-style: normal; font: var(--type-helper-01); color: var(--text-helper); }
.rst-iconcat-chip:hover { background: var(--surface-interactive); color: var(--text-primary); }
.rst-iconcat-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rst-iconcat-chip[aria-pressed="true"] {
  background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary);
}
.rst-iconcat-chip[aria-pressed="true"] i { color: inherit; }

.rst-icongrid {
  display: grid; gap: 4px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.rst-icontile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border: none; background: transparent;
  border-radius: var(--radius-lg); cursor: pointer; color: var(--text-primary);
  text-align: center;
}
.rst-icontile:hover { background: var(--surface-interactive); }
.rst-icontile:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.rst-icontile[data-open="true"] { background: var(--brand-primary-soft); color: var(--brand-primary); }
.rst-icontile__art { display: inline-flex; }
.rst-icontile__name {
  font: var(--type-helper-01); color: var(--text-secondary);
  overflow-wrap: anywhere; line-height: 1.3;
}
.rst-icontile[data-open="true"] .rst-icontile__name { color: inherit; }

.rst-iconspec {
  position: relative;
  display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap;
  margin-top: 10px; padding: 20px 22px;
  border-radius: var(--radius-xl);
  background: transparent;
}
.rst-iconspec__sizes { display: flex; align-items: flex-end; gap: 18px; }
.rst-iconspec__size { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-primary); }
.rst-iconspec__size i { font-style: normal; font: var(--type-helper-01); color: var(--text-helper); }
.rst-iconspec__body { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.rst-iconspec__name { font: var(--type-heading-04); }
.rst-iconspec__meta { font: var(--type-caption-01); color: var(--text-secondary); }
.rst-iconspec__use { font: var(--type-body-02); color: var(--text-secondary); max-width: 62ch; }
.rst-iconspec__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rst-iconspec__file { font: var(--type-helper-01); color: var(--text-helper); }
.rst-iconspec__close { position: absolute; top: 12px; right: 12px; }

.rst-iconmore { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.rst-iconmore span { font: var(--type-caption-01); color: var(--text-helper); }

@media (max-width: 599px) {
  .rst-icongrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .rst-iconspec { gap: 16px; padding: 16px; }
}

/* ===========================================================================
   Theme comparison.

   Two panels per row, each holding a variable mode. Their scoped page colors
   distinguish the themes without a decorative outline.
   =========================================================================== */
.rst-tc { display: flex; flex-direction: column; gap: 30px; margin-top: 24px; }
.rst-tc-head { margin-bottom: 12px; }
.rst-tc-name { font: var(--type-heading-04); color: var(--text-primary); }
.rst-tc-note { margin-top: 5px; font: var(--type-body-02); color: var(--text-secondary); max-width: 72ch; }
.rst-tc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rst-tc-panel {
  position: relative;
  padding: 34px 18px 18px;
  border-radius: var(--radius-xl);
  background: var(--surface-page);
  color: var(--text-primary);
  min-width: 0;
}
.rst-tc-tag {
  position: absolute; top: 10px; left: 14px;
  font: var(--type-helper-01); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-helper);
}
.rst-tc-inner { min-width: 0; }
.rst-tc-inner > * { max-width: 100%; }

.rst-tc-row { display: flex; gap: 12px; flex-wrap: wrap; }
.rst-tc-stack { display: flex; flex-direction: column; gap: 12px; }

.rst-tc-shell { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-base); }
.rst-tc-shell__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--navigation-background, var(--surface-elevated));
  border-bottom: 1px solid var(--border-subtle-color);
  font: var(--type-label-01);
}
.rst-tc-shell__acts { display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.rst-tc-shell__body { padding: 14px; background: var(--surface-subtle); }

.rst-tc-rail { height: 230px; overflow: hidden; border-radius: var(--radius-lg); }
.rst-tc-rail .rst-navrail { height: 100%; }

.rst-tc-overlay { display: flex; justify-content: center; padding: 8px 0; }
.rst-tc-glass {
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--gradient-ambient, var(--surface-subtle));
  display: flex; justify-content: center;
}
.rst-tc-grads { display: flex; gap: 10px; flex-wrap: wrap; }
.rst-tc-grad {
  flex: 1; min-width: 110px; padding: 20px 14px;
  border-radius: var(--radius-lg);
  font: var(--type-label-01); text-align: center;
}

@media (max-width: 767px) {
  .rst-tc-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Device viewports on the dashboard templates. Tablet and mobile are the same
   page rendered again at the real width and scaled to fit, so what you see is
   the live composition reflowing rather than a picture of it. */
.rst-vp { margin-top: 18px; }
.rst-vp__bar { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-subtle); }
.rst-vp__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--type-caption-01); color: var(--text-secondary);
  padding: 6px 14px; border: none; border-radius: var(--radius-full);
  background: transparent; cursor: pointer;
}
.rst-vp__btn i { font-style: normal; font: var(--type-helper-01); color: var(--text-helper); }
.rst-vp__btn:hover { color: var(--text-primary); }
.rst-vp__btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rst-vp__btn[aria-checked="true"] { background: var(--surface-base); color: var(--text-primary); box-shadow: var(--elevation-1); }
.rst-vp__btn[aria-checked="true"] i { color: var(--brand-primary); }
.rst-vp__frame { position: relative; margin-top: 16px; overflow: hidden; display: flex; justify-content: center; }
.rst-vp__device {
  transform-origin: top center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle-color);
  background: var(--surface-page);
}
.rst-vp__device iframe { display: block; width: 100%; height: 900px; border: 0; }
.rst-vp__frame[data-w="mobile"] .rst-vp__device iframe { height: 1400px; }

/* The embedded copy: no catalog chrome, just the section being previewed. */
[data-embed] .rst-sidenav,
[data-embed] .rst-header,
[data-embed] .rst-navscrim,
[data-embed] .rst-skip-link,
[data-embed] .rst-cmdk { display: none !important; }
[data-embed] .rst-app { grid-template-columns: 1fr; }
[data-embed] .rst-content { padding: 16px; }
[data-embed] .rst-sec { padding-block: 0; }


/* ===========================================================================
   Brand Studio

   A customization application, not a documentation page: a gradient hero
   carrying the brand identity fields, a controls rail, a large live preview
   and a sticky action bar. Surfaces are soft and rounded with almost no
   visible rectangular borders, per the RST visual language.

   Two scoping rules run through the markup:
     [data-brand-scope]  chooses which brand's ramps apply
     [data-theme-scope]  makes the semantic token layer recompute locally
   Anything previewing the brand carries both. Surfaces marked
   data-brand-follow have their theme scope synced to the page theme by
   scripts/brandstudio.js.
   =========================================================================== */
.rst-bs { display: grid; gap: 24px; }
.rst-bs__create { display: grid; gap: 24px; min-width: 0; }
.rst-bs-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: center; gap: 16px; min-width: 0; padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(218, 187, 255, .22); border-radius: var(--radius-xl);
  background: linear-gradient(112deg, #17103F 0%, #3A1E55 45%, #6A3148 70%, #A04C32 100%);
  color: #fff;
}
.rst-bs-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 72% 43%, rgba(130, 94, 235, .21), transparent 48%),
    radial-gradient(ellipse at 95% 98%, rgba(247, 149, 62, .17), transparent 42%);
}
.rst-bs-hero__content { position: relative; z-index: 1; min-width: 0; }
.rst-bs-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #E6DDF9; font: var(--type-label-01); letter-spacing: .1em; text-transform: uppercase; }
.rst-bs-hero__new { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(255,255,255,.13); color: #fff; font: 700 10px/1.2 var(--font-sans); letter-spacing: .05em; }
.rst-bs-hero h4 { max-width: 18ch; color: #fff; font: var(--type-heading-01); letter-spacing: -.035em; }
.rst-bs-hero p { max-width: 60ch; margin-top: 16px; color: #F3EAF8; font: var(--type-body-01); line-height: 1.6; }
.rst-bs-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.rst-bs-hero__actions .rst-btn[data-type="secondary"] { color: #fff; border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); }
.rst-bs-hero__actions .rst-btn[data-type="secondary"]:hover:not([disabled]) { background: rgba(255,255,255,.17); }
.rst-bs-hero__visual { width: 100%; max-width: 360px; justify-self: center; pointer-events: none; }
.rst-bs-hero__visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.rst-bs-hero__spark, .rst-bs-hero__ring { transform-box: fill-box; transform-origin: center; }
.rst-bs-hero__spark--main { animation: rst-bs-spark-float 9s ease-in-out infinite; }
.rst-bs-hero__spark--small { animation: rst-bs-spark-float 10s ease-in-out infinite -3s; }
.rst-bs-hero__spark--warm, .rst-bs-hero__spark--tiny { animation: rst-bs-spark-glow 8s ease-in-out infinite alternate; }
.rst-bs-hero__ring { animation: rst-bs-spark-glow 12s ease-in-out infinite alternate; }
.rst-bs-hero__ring--outer { animation-delay: -5s; }
@keyframes rst-bs-spark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rst-bs-spark-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Local design.md review. The uploaded document is never rendered here. */
.rst-bs-import {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 12px; min-width: 0; padding: 24px;
  border: 1px solid var(--border-subtle-color);
  border-radius: var(--radius-xl);
  background: var(--surface-primary);
}
.rst-bs-import::before, .rst-bs-import::after {
  content: ''; position: absolute; pointer-events: none;
}
/* The local haze uses the four-color palette of the site's Mesh Drift shader.
   CSS motion keeps this catalog container free of another WebGL engine. */
.rst-bs-import::before {
  inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 28%, rgba(40, 98, 216, .13), transparent 47%),
    radial-gradient(ellipse at 77% 16%, rgba(130, 94, 235, .11), transparent 44%),
    radial-gradient(ellipse at 62% 83%, rgba(32, 182, 207, .10), transparent 48%);
  animation: rst-bs-orb-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.rst-bs-import[data-mesh-active="true"]::before { animation-play-state: running; }
.rst-bs-import::after { inset: 0; z-index: 1; background: var(--surface-primary); opacity: .80; }
.rst-bs-import > * { position: relative; z-index: 2; min-width: 0; }
:root[data-theme="dark"] .rst-bs-import,
[data-theme-scope="dark"] .rst-bs-import { background: #02010A; }
:root[data-theme="dark"] .rst-bs-import::before,
[data-theme-scope="dark"] .rst-bs-import::before {
  background:
    radial-gradient(ellipse at 14% 26%, rgba(4, 5, 46, .90), transparent 48%),
    radial-gradient(ellipse at 75% 22%, rgba(61, 44, 141, .44), transparent 43%),
    radial-gradient(ellipse at 57% 78%, rgba(145, 107, 191, .24), transparent 46%);
}
:root[data-theme="dark"] .rst-bs-import::after,
[data-theme-scope="dark"] .rst-bs-import::after {
  background: radial-gradient(ellipse at 50% 42%, rgba(2, 1, 10, .42), rgba(2, 1, 10, .12) 74%);
  opacity: 1;
}
.rst-bs-import__title { font: var(--type-heading-03); color: var(--text-primary); }
.rst-bs-import__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rst-bs-import__flow { min-width: 0; padding-top: 18px; border-top: 1px solid var(--border-subtle-color); }
.rst-bs-import__flow > div { display: grid; gap: 14px; min-width: 0; }
.rst-bs-import__filename {
  font: var(--type-label-01); color: var(--text-primary);
  overflow-wrap: anywhere;
}
.rst-bs-import__verify { max-width: 560px; }
.rst-bs-import__verify-form { display: grid; justify-items: start; gap: 14px; max-width: 420px; }
.rst-bs-import__verify-form .rst-field { max-width: 100%; }
.rst-bs-import__verify .rst-alert { max-width: 560px; }
.rst-bs-import__verify-form .rst-btn:disabled { opacity: .6; cursor: not-allowed; }
.rst-bs-updates { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: center; gap: 18px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--border-subtle-color); border-radius: var(--radius-xl); background: var(--surface-primary); }
.rst-bs-updates__content { position: relative; z-index: 1; display: grid; gap: 14px; min-width: 0; }
.rst-bs-updates__visual { position: relative; width: 100%; max-width: 360px; min-width: 0; justify-self: center; pointer-events: none; }
.rst-bs-updates__visual svg { display: block; width: 100%; height: auto; }
.rst-bs-updates__message, .rst-bs-updates__card, .rst-bs-updates__spark { transform-box: fill-box; transform-origin: center; }
.rst-bs-updates__message { filter: drop-shadow(0 12px 16px rgba(18, 12, 58, .17)); animation: rst-bs-spark-float 10s ease-in-out infinite; }
.rst-bs-updates__card--one { animation: rst-bs-spark-float 11s ease-in-out infinite -4s; }
.rst-bs-updates__card--two { animation: rst-bs-spark-float 12s ease-in-out infinite -6s; }
.rst-bs-updates__signal { animation: rst-bs-spark-glow 11s ease-in-out infinite; }
.rst-bs-updates__spark { animation: rst-bs-spark-glow 7s ease-in-out infinite; }
:root[data-theme="dark"] .rst-bs-updates, [data-theme-scope="dark"] .rst-bs-updates { background: #090B19; }
:root[data-theme="light"] .rst-bs-updates__visual, [data-theme-scope="light"] .rst-bs-updates__visual { opacity: .84; }
:root[data-theme="light"] .rst-bs-updates__message rect, [data-theme-scope="light"] .rst-bs-updates__message rect { fill: #F6F5FF; fill-opacity: .95; }
.rst-bs-updates h4 { font: var(--type-heading-04); color: var(--text-primary); }
.rst-bs-updates p { color: var(--text-secondary); max-width: 68ch; }
.rst-bs-updates form { display: grid; gap: 12px; justify-items: start; width: 100%; max-width: 540px; }
.rst-bs-updates form[hidden], .rst-bs-updates__status[hidden], .rst-bs-updates .rst-alert[hidden] { display: none; }
.rst-bs-updates .rst-field { width: 100%; }
.rst-bs-updates__consent { display: flex; align-items: flex-start; gap: 9px; font: var(--type-helper-01); color: var(--text-secondary); cursor: pointer; }
.rst-bs-updates__consent input { flex: none; margin-top: 3px; accent-color: #916bbf; }
.rst-bs-updates__trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.rst-bs-updates__status { font: var(--type-body-02); }
@media (max-width: 1050px) {
  .rst-bs-hero, .rst-bs-updates { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .rst-bs-hero h4 { font: var(--type-heading-02); }
}
@media (max-width: 700px) {
  .rst-bs-hero, .rst-bs-updates { grid-template-columns: minmax(0, 1fr); }
  .rst-bs-hero__visual { width: min(65%, 220px); margin-top: -12px; }
  .rst-bs-updates__visual { width: min(68%, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .rst-bs-hero__spark, .rst-bs-hero__ring, .rst-bs-updates__message,
  .rst-bs-updates__card, .rst-bs-updates__signal, .rst-bs-updates__spark { animation: none !important; }
}
.rst-bs-import__state-title { font: var(--type-heading-04); color: var(--text-primary); }
.rst-bs-import__counts { font: var(--type-body-02); color: var(--text-secondary); }
.rst-bs-import__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.rst-bs-import__results > div { min-width: 0; }
.rst-bs-import__results h6 { font: var(--type-label-01); color: var(--text-primary); margin-bottom: 8px; }
.rst-bs-import__results ul { display: grid; list-style: none; }
.rst-bs-import__results ul:empty::after { content: 'None'; font: var(--type-helper-01); color: var(--text-helper); }
.rst-bs-import__results li {
  display: grid; gap: 3px; padding: 9px 0; min-width: 0;
  border-top: 1px solid var(--border-subtle-color); overflow-wrap: anywhere;
}
.rst-bs-import__result-name { font: var(--type-label-01); color: var(--text-primary); }
.rst-bs-import__result-name::before { display: inline-block; width: 20px; color: var(--text-helper); }
.rst-bs-import__results li[data-status="complete"] .rst-bs-import__result-name::before { content: '✓'; color: var(--status-success); }
.rst-bs-import__results li[data-status="attention"] .rst-bs-import__result-name::before { content: '◐'; color: var(--status-warning); }
.rst-bs-import__results li[data-status="missing"] .rst-bs-import__result-name::before { content: '○'; }
.rst-bs-import__result-detail { font: var(--type-helper-01); color: var(--text-secondary); padding-left: 20px; }

/* Review workspace: original guidance stays separate from optional RST additions. */
.rst-bs-improve { display: grid; gap: 24px; min-width: 0; }
.rst-bs-improve__intro { display: grid; gap: 8px; }
.rst-bs-improve__intro p { font: var(--type-body-02); color: var(--text-secondary); max-width: 72ch; }
.rst-bs-improve__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rst-bs-improve__summary > div {
  display: grid; gap: 5px; min-width: 0; padding: 16px;
  border: 1px solid var(--border-subtle-color); border-radius: var(--radius-lg);
  background: var(--surface-page);
}
.rst-bs-improve__summary p { font: var(--type-body-02); color: var(--text-primary); }
.rst-bs-improve__section { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--border-subtle-color); }
.rst-bs-improve__section > h6, .rst-bs-improve__proposal > h6, .rst-bs-improve__preview > h6 {
  font: var(--type-heading-04); color: var(--text-primary);
}
.rst-bs-improve__complete { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.rst-bs-improve__complete-item {
  display: grid; gap: 3px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--border-subtle-color); border-radius: var(--radius-md);
  background: var(--surface-page);
}
.rst-bs-improve__complete-item b { font: var(--type-label-01); color: var(--text-primary); }
.rst-bs-improve__complete-item span { font: var(--type-helper-01); color: var(--status-success); }
.rst-bs-improve__complete-item p { font: var(--type-helper-01); color: var(--text-secondary); }
.rst-bs-improve__groups, .rst-bs-improve__group { display: grid; gap: 14px; }
.rst-bs-improve__group + .rst-bs-improve__group { margin-top: 10px; }
.rst-bs-improve__group > h6 { font: var(--type-label-01); color: var(--text-secondary); }
.rst-bs-improve__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.rst-bs-improve__card {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: 16px;
  border: 1px solid var(--border-subtle-color); border-radius: var(--radius-lg);
  background: var(--surface-page);
}
.rst-bs-improve__card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.rst-bs-improve__card-head h6 { font: var(--type-label-01); color: var(--text-primary); }
.rst-bs-improve__state { font: var(--type-caption-01); color: var(--text-helper); }
.rst-bs-improve__state[data-status="attention"] { color: var(--status-warning); }
.rst-bs-improve__state[data-status="strengthened"] { color: var(--interactive-primary); }
.rst-bs-improve__card p { font: var(--type-body-02); color: var(--text-secondary); }
.rst-bs-improve__card p b { color: var(--text-primary); font-weight: 500; }
.rst-bs-improve__card .rst-bs-import__actions { margin-top: auto; padding-top: 4px; }
.rst-bs-improve__proposal, .rst-bs-improve__preview {
  display: grid; gap: 14px; min-width: 0; padding: 18px;
  border: 1px solid var(--border-subtle-color); border-radius: var(--radius-lg);
  background: var(--surface-page);
}
.rst-bs-improve__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rst-bs-improve__compare > div, .rst-bs-improve__preview-parts > div { display: grid; gap: 8px; min-width: 0; }
.rst-bs-improve__compare h6, .rst-bs-improve__preview-parts h6 { font: var(--type-label-01); color: var(--text-primary); }
.rst-bs-improve__compare pre, .rst-bs-improve__preview-parts pre {
  min-width: 0; max-height: 280px; overflow: auto; overflow-wrap: anywhere;
  margin: 0; padding: 14px; border: 1px solid var(--border-subtle-color);
  border-radius: var(--radius-md); background: var(--surface-primary);
  color: var(--text-secondary); font: var(--type-code-01); white-space: pre-wrap;
}
.rst-bs-improve__preview-parts { display: grid; gap: 16px; }
.rst-bs-improve__footer {
  position: sticky; bottom: 0; z-index: 3; padding: 12px;
  border: 1px solid var(--border-subtle-color); border-radius: var(--radius-lg);
  background: var(--surface-primary); box-shadow: var(--elevation-1);
}
.rst-bs-improve__footer .rst-btn:disabled { opacity: .5; cursor: not-allowed; }
.rst-bs-import__analysis { justify-items: center; text-align: center; padding: 12px 0; }
.rst-bs-import__orb {
  position: relative; width: 148px; aspect-ratio: 1; margin: 8px auto 18px;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; isolation: isolate;
  background: radial-gradient(circle at 29% 24%, var(--color-cyan-30), transparent 38%),
    conic-gradient(from 30deg, var(--color-blue-60), var(--color-purple-60),
      var(--color-cyan-50), var(--color-blue-60));
  box-shadow: 0 12px 32px -14px var(--color-blue-70), 0 0 42px -8px var(--color-purple-30);
  animation: rst-bs-orb-morph 3.6s ease-in-out infinite alternate,
    rst-bs-orb-float 4.6s ease-in-out infinite;
}
.rst-bs-import__orb::before, .rst-bs-import__orb::after, .rst-bs-import__orb span {
  content: ''; position: absolute; pointer-events: none;
  border-radius: 55% 45% 42% 58% / 43% 55% 45% 57%;
}
.rst-bs-import__orb::before {
  inset: -18%; z-index: -1;
  background: radial-gradient(circle, var(--color-cyan-40), var(--color-purple-30) 45%, transparent 70%);
  filter: blur(18px); opacity: .42;
  animation: rst-bs-orb-glow 3.8s ease-in-out infinite alternate;
}
.rst-bs-import__orb::after {
  inset: 12%; background: radial-gradient(circle at 34% 33%, var(--color-cyan-20), transparent 60%);
  filter: blur(10px); opacity: .65;
  animation: rst-bs-orb-drift 4.2s ease-in-out infinite alternate;
}
.rst-bs-import__orb span:first-child {
  inset: 17% 31% 34% 9%; background: var(--color-blue-40);
  filter: blur(14px); opacity: .58;
  animation: rst-bs-orb-drift 3.3s ease-in-out -.6s infinite alternate-reverse;
}
.rst-bs-import__orb span:nth-child(2) {
  inset: 38% 6% 8% 38%; background: var(--color-purple-50);
  filter: blur(13px); opacity: .62;
  animation: rst-bs-orb-drift 3.9s ease-in-out -1.2s infinite alternate;
}
.rst-bs-import__orb span:last-child {
  inset: 24% 17% 22% 49%; background: var(--color-cyan-40);
  filter: blur(15px); opacity: .58;
  animation: rst-bs-orb-drift 4.4s ease-in-out -.9s infinite alternate-reverse;
}
@keyframes rst-bs-orb-morph {
  to { border-radius: 57% 43% 46% 54% / 43% 57% 48% 52%; }
}
@keyframes rst-bs-orb-float {
  50% { transform: translateY(-5px) scale(1.035) rotate(5deg); }
}
@keyframes rst-bs-orb-glow { to { transform: scale(1.14); opacity: .58; } }
@keyframes rst-bs-orb-drift { to { transform: translate(9px, -7px) rotate(24deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .rst-bs-import::before { animation: none; }
  .rst-bs-import__orb, .rst-bs-import__orb::before, .rst-bs-import__orb::after,
  .rst-bs-import__orb span { animation: none; }
}
@media (max-width: 600px) {
  .rst-bs-import { padding: 18px; }
  .rst-bs-import__results { grid-template-columns: minmax(0, 1fr); }
  .rst-bs-import__actions .rst-btn { flex: 1 1 100%; }
  .rst-bs-import__orb { width: 124px; }
  .rst-bs-improve__summary, .rst-bs-improve__compare { grid-template-columns: minmax(0, 1fr); }
  .rst-bs-improve__proposal, .rst-bs-improve__preview { padding: 14px; }
  .rst-bs-improve__footer { position: static; }
}

/* --- hero ----------------------------------------------------------------- */
.rst-bs__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 28px; align-items: center;
  padding: 26px 28px;
  border-radius: var(--radius-xl, 16px);
  background: var(--gradient-soft-vibe);
  color: var(--text-primary);
}
.rst-bs__herotext { display: grid; gap: 8px; }
.rst-bs__kicker {
  font: var(--type-caption-01); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.rst-bs__lede { font: var(--type-body-01); color: var(--text-secondary); margin: 0; max-width: 62ch; }
.rst-bs__herofields { display: grid; gap: 12px; }
.rst-bs__herofields .rst-input { background: var(--surface-page); border-color: transparent; }

/* --- layout --------------------------------------------------------------- */
.rst-bs__config {
  display: grid; grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.rst-bs__controls { display: grid; gap: 16px; min-width: 0; }
.rst-bs__preview { min-width: 0; }
.rst-bs__card {
  display: grid; gap: 14px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: transparent;
}
.rst-bs__h { font: var(--type-heading-04); color: var(--text-primary); margin: 0; }
.rst-bs__hint { font: var(--type-helper-01); color: var(--text-helper); margin: 0; max-width: 56ch; }

/* --- colour controls ------------------------------------------------------ */
.rst-bs-color { display: grid; gap: 6px; }
.rst-bs-color__text { display: grid; gap: 2px; }
.rst-bs-color__label { font: var(--type-label-01); color: var(--text-primary); }
.rst-bs-color__note { font: var(--type-helper-01); color: var(--text-helper); }
.rst-bs-color__row { display: flex; align-items: center; gap: 8px; }
.rst-bs-color__well {
  flex: none; width: 44px; height: 38px; padding: 0;
  border: 0; border-radius: var(--radius-md);
  background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.rst-bs-color__well::-webkit-color-swatch-wrapper { padding: 3px; }
.rst-bs-color__well::-webkit-color-swatch { border: 0; border-radius: 6px; }
.rst-bs-color__well::-moz-color-swatch { border: 0; border-radius: 6px; }
.rst-bs-color__hex {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--radius-md);
  background: var(--surface-page); color: var(--text-primary);
  font: var(--type-code-01); text-transform: uppercase;
}
.rst-bs-color__hex:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.rst-bs-color__hex[data-invalid] { box-shadow: inset 0 0 0 1px var(--status-error); }
.rst-bs-color__reset { flex: none; width: 38px; height: 38px; }
.rst-bs-color__warn:empty { display: none; }
.rst-bs-color__warn { font: var(--type-helper-01); color: var(--status-warning); margin: 0; }

/* --- gradients ------------------------------------------------------------ */
.rst-bs-grads { display: grid; gap: 10px; }
.rst-bs-grad { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; }
.rst-bs-grad__bar { grid-row: 1 / 3; height: 44px; border-radius: var(--radius-md); }
.rst-bs-grad__name { font: var(--type-label-01); color: var(--text-primary); align-self: end; }
.rst-bs-grad__desc { font: var(--type-helper-01); color: var(--text-helper); align-self: start; }

/* --- typography specimen -------------------------------------------------- */
.rst-bs-type {
  display: grid; gap: 12px; padding: 16px;
  border-radius: var(--radius-md); background: transparent;
}
.rst-bs-type__row { display: grid; gap: 2px; min-width: 0; }
.rst-bs-type__name {
  font: var(--type-caption-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-helper);
}
.rst-bs-type__sample {
  color: var(--text-primary); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rst-bs-type__row:nth-child(4) .rst-bs-type__sample { white-space: normal; }

/* --- design.md export ----------------------------------------------------- */
.rst-bs__exportrow { display: flex; flex-wrap: wrap; gap: 8px; }
.rst-bs__md { display: grid; gap: 0; border-radius: var(--radius-md); overflow: hidden; background: transparent; }
.rst-bs__mdhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 14px; font: var(--type-label-01); color: var(--text-primary);
}
.rst-bs__mdbody {
  margin: 0; padding: 14px; max-height: 320px; overflow: auto;
  font: var(--type-code-01); color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}

/* --- preview -------------------------------------------------------------- */
.rst-bs__previewhead { display: grid; gap: 12px; margin-bottom: 16px; }
.rst-bs__switches { display: flex; flex-wrap: wrap; gap: 14px; }
.rst-bs__switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-subtle); }

.rst-bs-grid { display: grid; grid-template-columns: repeat(var(--bs-cols, 2), minmax(0, 1fr)); gap: 16px; }
.rst-bs-panel {
  display: grid; gap: 14px; padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-primary);
  box-shadow: var(--elevation-1);
  min-width: 0; overflow: hidden;
}
.rst-bs-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rst-bs-panel__head b { font: var(--type-label-01); }
.rst-bs-panel__head span { font: var(--type-caption-01); color: var(--text-helper); letter-spacing: 0.06em; text-transform: uppercase; }
.rst-bs-spec { display: grid; gap: 14px; min-width: 0; }
.rst-bs-spec__row { display: flex; flex-wrap: wrap; gap: 6px; }
.rst-bs-spec .rst-agent, .rst-bs-spec .rst-research, .rst-bs-spec .rst-select { width: 100%; }
.rst-bs-spec .rst-tabs__panel { font: var(--type-body-02); }
.rst-bs-chart, .rst-bs-dg { min-width: 0; overflow: hidden; }
.rst-bs-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rst-bs-dash__chart { grid-column: 1 / -1; min-width: 0; }

/* A compact stand-in for the production Side Navigation. Selected uses the
   semantic selected pair, so it demonstrates the same rule the real nav uses. */
.rst-bs-nav { display: grid; gap: 2px; padding: 6px; border-radius: var(--radius-md); background: var(--surface-subtle); }
.rst-bs-nav__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font: var(--type-body-02); color: var(--text-secondary);
}
.rst-bs-nav__item i { width: 14px; height: 14px; border-radius: 4px; background: var(--icon-secondary); opacity: 0.5; }
.rst-bs-nav__item[data-current="true"] { background: var(--surface-selected); color: var(--text-on-selected); font-weight: 500; }
.rst-bs-nav__item[data-current="true"] i { background: var(--icon-on-selected); opacity: 1; }

/* --- sticky action bar ---------------------------------------------------- */
.rst-bs__sticky {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin: 4px 0 0; padding: 14px 18px;
  border-radius: var(--radius-lg);
  /* Glass, but opaque enough to read over a scrolling preview: a translucent
     bar here left the button labels sitting on top of chart bars. The blur and
     the raised edge carry the material; the surface carries the legibility. */
  background: var(--surface-base);
  -webkit-backdrop-filter: blur(var(--blur-glass, 14px));
  backdrop-filter: blur(var(--blur-glass, 14px));
  box-shadow: var(--elevation-3, var(--elevation-2));
}
.rst-bs__stickyactions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rst-bs__status { font: var(--type-helper-01); color: var(--text-secondary); margin: 0; max-width: 46ch; }
.rst-bs__status:empty { display: none; }

/* --- developer detail ----------------------------------------------------- */
.rst-bs__adv { padding-top: 6px; }
.rst-bs__adv summary { font: var(--type-label-01); color: var(--text-primary); cursor: pointer; }
.rst-bs__advbody { display: grid; gap: 10px; padding-top: 12px; font: var(--type-body-02); color: var(--text-secondary); max-width: 80ch; }
.rst-bs__advbody ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rst-bs__code { overflow: auto; max-height: 160px; padding: 12px; border-radius: var(--radius-md); background: transparent; font: var(--type-code-01); white-space: pre-wrap; word-break: break-all; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .rst-bs__config { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rst-bs__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .rst-bs__controls > :nth-child(3), .rst-bs__controls > :nth-child(4) { grid-column: auto; }
}
@media (max-width: 1024px) {
  .rst-bs__hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .rst-bs__controls { grid-template-columns: minmax(0, 1fr); }
  .rst-bs-grid { grid-template-columns: minmax(0, 1fr); }
  .rst-bs-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rst-bs__hero { padding: 20px; }
  .rst-bs__sticky { padding: 12px; }
  .rst-bs__stickyactions { width: 100%; }
  .rst-bs__stickyactions .rst-btn { flex: 1 1 auto; }
}

/* Composed UI receives depth; documentation shells above stay open. The
   custom properties follow local Light/Dark theme scopes as well as the page. */
.rst-controls,
.rst-viewport,
.rst-vp__device,
.rst-bs__card,
.rst-template-preview {
  background: var(--rst-catalog-group-bg);
  border: 1px solid var(--rst-catalog-group-border);
}
.rst-template-preview__rail {
  background: var(--rst-catalog-group-bg);
  box-shadow: inset -1px 0 0 var(--rst-catalog-group-border);
}
.rst-template-preview .rst-navrail[data-chrome="false"] { background: transparent; }

.rst-metric-card:not([data-material]),
.rst-template-preview .rst-card:not([data-material]),
.rst-template-preview .rst-table-wrap,
.rst-template-preview .rst-agent:not([data-material]),
.rst-template-preview .rst-research:not([data-material]),
.rst-template-preview .rst-kanban__card,
.rst-template-preview .rst-feedpost {
  background: var(--rst-catalog-panel-bg);
  border: 1px solid var(--rst-catalog-panel-border);
}
.rst-template-preview .rst-kanban__col {
  background: var(--surface-secondary);
  border: 1px solid var(--rst-catalog-group-border);
}
.rst-bs-panel {
  background: var(--surface-page);
  border: 1px solid var(--rst-catalog-group-border);
  box-shadow: none;
}
/* Preview canvases follow their own theme scope; the editor and page do not switch. */
.rst-bs-panel[data-theme-scope="light"] {
  background: var(--surface-page);
  border-color: var(--rst-catalog-group-border);
}

/* Catalog examples share one restrained surface language. Section headings,
   prose and category wrappers remain on the atmospheric page background. */
.rst-sec :is(
  .rst-specimen:not(:has(> :is(.rst-card, .rst-chart-card, .rst-template-preview, .rst-mode-panel, .rst-viewport, .rst-pg, .rst-grid, .rst-chart-gallery, .rst-videoblock, .rst-chatbox, .rst-kanban, .rst-feedpost, .rst-dgcanvas))),
  .rst-example__preview, .rst-cell, .rst-controls, .rst-iconspec,
  .rst-pg__stage, .rst-pg__panel, .rst-brand-swatch, .rst-brand-grad,
  .rst-swatch, .rst-props, .rst-tokens, .rst-motion-examples
) {
  background: var(--rst-catalog-demo-bg);
  border: 1px solid var(--rst-catalog-demo-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Composed widgets already have their own internal structure and padding. */
.rst-sec :is(.rst-chart-card, .rst-metric-card:not([data-material])) {
  background: var(--rst-catalog-composed-bg);
  border: 1px solid var(--rst-catalog-composed-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Each grid and token-shape example gets a local surface, without a large
   panel around the full Foundations section. */
#grid .rst-specimen { background: transparent; border: 0; backdrop-filter: none; }
#grid .rst-specimen > div,
.rst-radius-grid > div,
.rst-elev-grid > div {
  padding: 16px;
  background: var(--rst-catalog-demo-bg);
  border: 1px solid var(--rst-catalog-demo-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#grid .rst-specimen { padding-inline: 0; }

/* The component panel supplies the boundary inside richer preview frames. */
.rst-viewport .rst-cell { background: transparent; border: 0; backdrop-filter: none; }
.rst-sec .rst-specimen--plain { padding-inline: 24px; }
.rst-motion-examples { padding: 16px; }
@media (max-width: 767px) {
  .rst-sec .rst-specimen--plain { padding-inline: 16px; }
}
#motion .rst-guide {
  background: var(--rst-catalog-demo-bg);
  border: 1px solid var(--rst-catalog-demo-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}