/* Kestrel DSL — design system explorer (snyx showcase; reconstructed from client work, synthetic data).
   The page is itself built from the tokens it documents: the brand switcher rewrites the --p- and --s- ramp
   slots on :root,
   every semantic token below is derived from those, and nothing hard-codes a brand colour. */

:root {
  /* the brand ramp slots the switcher fills at runtime */
  --p-100: #dfeaf2; --p-200: #c3d9e7; --p-300: #93bed4; --p-400: #5c9ec0;
  --p-500: #2f7fa6; --p-600: #23688a; --p-700: #1a5170; --p-800: #133c55; --p-900: #0c2637;
  --s-100: #f6e2ea; --s-200: #eec6d4; --s-300: #de9db4; --s-400: #c96f90;
  --s-500: #b04a71; --s-600: #93395c; --s-700: #762c49; --s-800: #582036; --s-900: #3a1523;
  --gradient: linear-gradient(135deg, var(--p-500), var(--s-500));

  /* neutrals, shared by every brand — a spinoff may not touch these */
  --n-0: #ffffff; --n-50: #f7f8fa; --n-100: #eef0f4; --n-200: #e0e3ea; --n-300: #c6ccd7; --n-400: #818a9b;
  --n-500: #6b7280; --n-700: #474f60; --n-800: #2c3342; --n-900: #101425;

  /* semantic layer: what components actually reference */
  --bg: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-100);
  --line: var(--n-200); --line-strong: var(--n-400);
  --ink: var(--n-900); --ink-2: var(--n-700); --ink-muted: var(--n-500);
  --action-bg: var(--p-700); --action-bg-hover: var(--p-800); --action-bg-pressed: var(--p-900);
  --action-ink: var(--n-0);
  --action-2-bd: var(--p-700); --action-2-ink: var(--p-700);
  --action-2-bg-hover: var(--s-600); --action-2-bg-pressed: var(--s-800);
  --focus-ring: #1273c0;
  --disabled-bg: var(--n-100); --disabled-ink: var(--n-300);

  /* tone tokens (alerts, toasts) */
  --ok: #2c7a4e; --ok-bg: #eaf6ef; --ok-line: #b3ddc4;
  --warn: #8d6410; --warn-bg: #fdf6e6; --warn-line: #ebd6a3;
  --bad: #b23a30; --bad-bg: #fdf0ee; --bad-line: #eec3bd;
  --info-bg: var(--p-100); --info-line: var(--p-300); --info-ink: var(--p-800);

  /* type — never overridden by a spinoff */
  --font: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --t-alpha: 34px; --t-bravo: 27px; --t-charlie: 22px; --t-delta: 18px; --t-echo: 16px;
  --t-body-lg: 16px; --t-body: 14px; --t-body-sm: 13px; --t-small: 12px; --t-tiny: 11px;

  /* space + shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 20, 37, .07);
  --shadow-2: 0 16px 44px rgba(16, 20, 37, .2);
  --ctl-md: 40px; --ctl-lg: 48px;
  --top-h: 60px; --side-w: 218px; --insp-w: 316px;
}

body[data-theme="dark"] {
  --bg: #0c1020; --surface: #151b2d; --surface-2: #1d2437;
  --line: #2a3246; --line-strong: #3c465e;
  --ink: #eef1f7; --ink-2: #b6bfd1; --ink-muted: #7c869c;
  --action-bg: var(--p-400); --action-bg-hover: var(--p-300); --action-bg-pressed: var(--p-600);
  --action-ink: #0c1020;
  --action-2-bd: var(--p-300); --action-2-ink: var(--p-200);
  --disabled-bg: #222a3d; --disabled-ink: #4a5468;
  --ok-bg: #122a1e; --warn-bg: #2a2313; --bad-bg: #2c1714;
  --info-bg: var(--p-900); --info-line: var(--p-700); --info-ink: var(--p-200);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, .55);
}
body[data-density="compact"] {
  --sp-3: 8px; --sp-4: 12px; --sp-5: 18px; --sp-6: 24px; --sp-7: 34px;
  --ctl-md: 34px; --ctl-lg: 40px;
  --t-alpha: 29px; --t-bravo: 23px; --t-charlie: 19px; --t-delta: 16px; --t-echo: 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); font-size: var(--t-body); color: var(--ink); background: var(--bg);
       display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
       transition: background .2s, color .2s; }
button, input, select { font: inherit; color: inherit; }
.ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
code, .mono { font-family: var(--mono); font-size: .92em; }

/* ------------------------------------------------------------ top bar */
.topbar { height: var(--top-h); flex: none; background: var(--surface); border-bottom: 1px solid var(--line);
          display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); }
.wordmark { display: flex; align-items: center; gap: 9px; font-size: var(--t-echo); font-weight: 500; letter-spacing: -.01em; }
.wordmark b { font-weight: 800; }
.wordmark-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--gradient); }
.ver { font-family: var(--mono); font-size: var(--t-tiny); background: var(--surface-2); color: var(--ink-2);
       border-radius: var(--r-pill); padding: 2px 8px; }

.brandpicker { display: flex; gap: var(--sp-2); margin-right: auto; }
.brandchip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface);
             border-radius: var(--r-pill); padding: 5px 13px 5px 6px; cursor: pointer; font-size: var(--t-body-sm);
             color: var(--ink-2); }
.brandchip:hover { border-color: var(--line-strong); color: var(--ink); }
.brandchip.is-on { border-color: transparent; background: var(--surface-2); color: var(--ink); font-weight: 600;
                   box-shadow: inset 0 0 0 1px var(--p-400); }
.brandchip i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.brandchip small { font-size: var(--t-tiny); color: var(--ink-muted); }

.topbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.segbtn { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.segbtn button { background: var(--surface); border: 0; padding: 6px 12px; font-size: var(--t-small); cursor: pointer;
                 color: var(--ink-2); }
.segbtn button + button { border-left: 1px solid var(--line); }
.segbtn button.is-on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.iconbtn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line);
           border-radius: var(--r-sm); background: var(--surface); cursor: pointer; color: var(--ink-2); }
.iconbtn:hover { color: var(--ink); border-color: var(--line-strong); }

/* ------------------------------------------------------------ frame */
.app { flex: 1; min-height: 0; display: flex; }
.side { width: var(--side-w); flex: none; border-right: 1px solid var(--line); background: var(--surface);
        overflow-y: auto; padding: var(--sp-4) 0; }
.side h2 { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted);
           padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.side h2:first-child { padding-top: 0; }
.side button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
               padding: 7px var(--sp-5); font-size: var(--t-body-sm); color: var(--ink-2);
               border-left: 2px solid transparent; }
.side button:hover { color: var(--ink); background: var(--surface-2); }
.side button.is-on { color: var(--p-500); font-weight: 700; border-left-color: var(--p-500); background: var(--surface-2); }

.main { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-6) var(--sp-7); }
.wrap { max-width: 980px; }
.page-title { font-size: var(--t-alpha); font-weight: 800; letter-spacing: -.02em; }
.page-sub { color: var(--ink-2); margin-top: var(--sp-3); line-height: 1.65; max-width: 68ch; font-size: var(--t-body-lg); }
.sec { margin-top: var(--sp-7); }
.sec > h2 { font-size: var(--t-charlie); font-weight: 700; letter-spacing: -.01em; }
.sec > p { color: var(--ink-2); margin-top: var(--sp-2); line-height: 1.65; max-width: 68ch; }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0 0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.card-hd { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); display: flex; align-items: center;
           gap: var(--sp-3); font-weight: 700; font-size: var(--t-body-sm); }
.card-hd .acts { margin-left: auto; display: flex; gap: var(--sp-2); }
.card-bd { padding: var(--sp-4); }

/* ------------------------------------------------------------ colour ramps */
.ramp { margin-top: var(--sp-4); }
.ramp h3 { font-size: var(--t-body-sm); font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 8px; }
.ramp h3 code { color: var(--ink-muted); font-weight: 400; }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sw { width: 86px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
      cursor: pointer; overflow: hidden; text-align: left; padding: 0; }
.sw:hover { border-color: var(--line-strong); }
.sw.is-on { box-shadow: 0 0 0 2px var(--p-500); }
.sw i { display: block; height: 52px; }
.sw b { display: block; font-size: var(--t-tiny); font-weight: 700; padding: 6px 8px 0; }
.sw span { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-muted); padding: 0 8px 7px; }
.sw.base b::after { content: " Base"; color: var(--ink-muted); font-weight: 400; }

/* ------------------------------------------------------------ type scale */
.typerow { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0;
           border-bottom: 1px dashed var(--line); }
.typerow .lab { width: 150px; flex: none; font-size: var(--t-small); color: var(--ink-muted); font-weight: 600; }
.typerow .spec { margin-left: auto; font-family: var(--mono); font-size: var(--t-tiny); color: var(--ink-muted);
                 white-space: nowrap; }
.typerow .sample { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ the button under test */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
          height: var(--ctl-md); padding: 0 var(--sp-4); border-radius: var(--r-sm); border: 1px solid transparent;
          font-weight: 700; font-size: var(--t-body); cursor: pointer; white-space: nowrap; }
.ds-btn.lg { height: var(--ctl-lg); padding: 0 var(--sp-5); font-size: var(--t-body-lg); }
.ds-btn.icononly { width: var(--ctl-md); padding: 0; }
.ds-btn.lg.icononly { width: var(--ctl-lg); }
.ds-btn.primary { background: var(--action-bg); color: var(--action-ink); }
.ds-btn.primary:hover, .ds-btn.primary.state-hover { background: var(--action-bg-hover); }
.ds-btn.primary:active, .ds-btn.primary.state-pressed { background: var(--action-bg-pressed); }
.ds-btn.secondary { background: var(--surface); border-color: var(--action-2-bd); color: var(--action-2-ink); }
.ds-btn.secondary:hover, .ds-btn.secondary.state-hover { background: var(--action-2-bg-hover); border-color: transparent; color: #fff; }
.ds-btn.secondary:active, .ds-btn.secondary.state-pressed { background: var(--action-2-bg-pressed); border-color: transparent; color: #fff; }
.ds-btn.state-focus { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.ds-btn:disabled, .ds-btn.state-disabled { background: var(--disabled-bg); border-color: transparent;
                                           color: var(--disabled-ink); cursor: not-allowed; }
.on-dark { background: var(--p-900); border-radius: var(--r-md); padding: var(--sp-5); }
.on-dark .ds-btn.primary { background: var(--n-0); color: var(--p-900); }
.on-dark .ds-btn.primary.state-hover { background: var(--p-100); }
.on-dark .ds-btn.primary.state-pressed { background: var(--p-200); }
.on-dark .ds-btn.secondary { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; }
.on-dark .ds-btn.secondary.state-hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.on-dark .ds-btn.state-disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); }

.matrix { width: 100%; border-collapse: collapse; }
.matrix th { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted);
             font-weight: 700; padding: var(--sp-2) var(--sp-3); text-align: left; white-space: nowrap; }
.matrix td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
.matrix td.state { font-size: var(--t-small); color: var(--ink-muted); width: 92px; }
.matrix tr + tr td { border-top: 1px solid var(--line); }
.controls { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-4); }
.ctl { display: block; }
.ctl > span { display: block; font-size: var(--t-small); color: var(--ink-muted); margin-bottom: 5px; }
.ctl .segbtn button { padding: 7px 13px; font-size: var(--t-body-sm); }

/* ------------------------------------------------------------ combo box + alerts */
.combo { position: relative; width: 264px; }
.combo-field { display: flex; align-items: center; gap: var(--sp-2); height: var(--ctl-md); padding: 0 var(--sp-3);
               border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
               cursor: pointer; font-size: var(--t-body); }
.combo-field .ic { margin-left: auto; color: var(--ink-muted); }
.combo.is-open .combo-field { border-color: var(--p-500); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.combo.is-error .combo-field { border-color: var(--bad); }
.combo.is-disabled .combo-field { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: var(--surface);
              border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-2); overflow: hidden; }
.combo-list button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; background: none;
                     border: 0; padding: 9px var(--sp-3); cursor: pointer; font-size: var(--t-body); }
.combo-list button:hover { background: var(--surface-2); }
.combo-list button.is-on { background: var(--p-700); color: var(--n-0); }
.combo-msg { font-size: var(--t-small); color: var(--bad); margin-top: 5px; }

.alert { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
         border: 1px solid; font-size: var(--t-body-sm); line-height: 1.55; margin-bottom: var(--sp-2); }
.alert b { display: block; }
.alert.info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.alert.ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert.bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad); }

/* ------------------------------------------------------------ library shelf */
.shelf { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.file { width: 178px; border-radius: var(--r-md); padding: var(--sp-3); color: #fff; display: flex;
        flex-direction: column; min-height: 118px; cursor: pointer; border: 0; text-align: left; }
.file:hover { transform: translateY(-2px); }
.file .top { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .1em; opacity: .8; }
.file b { font-size: var(--t-body-lg); font-weight: 800; margin-top: auto; }
.file span { font-size: var(--t-tiny); opacity: .85; margin-top: 2px; }
.file .team { font-size: 9px; letter-spacing: .1em; opacity: .7; margin-top: var(--sp-3); }
.shelfrow { display: flex; gap: var(--sp-5); align-items: flex-start; padding: var(--sp-4) 0;
            border-top: 1px solid var(--line); }
.shelfrow .meta { width: 180px; flex: none; }
.shelfrow .meta b { display: block; font-size: var(--t-body-sm); font-weight: 700; }
.shelfrow .meta span { font-size: var(--t-small); color: var(--ink-muted); display: block; margin-top: 4px; }
.shelfrow.dep { opacity: .62; }

/* ------------------------------------------------------------ stats + governance */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.fig b { display: block; font-size: var(--t-bravo); font-weight: 800; letter-spacing: -.02em; }
.fig span { font-size: var(--t-small); color: var(--ink-muted); }
.fig small { display: block; font-size: var(--t-small); color: var(--ok); margin-top: 4px; font-weight: 600; }
.fig small.up { color: var(--bad); }

.gov { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.gov .card-bd ul { list-style: none; }
.gov .card-bd li { display: flex; gap: var(--sp-2); padding: 6px 0; font-size: var(--t-body-sm); color: var(--ink-2);
                   line-height: 1.5; }
.gov .card-bd li .ic { flex: none; margin-top: 2px; }
.gov .yes .ic { color: var(--ok); }
.gov .no .ic { color: var(--bad); }

/* ------------------------------------------------------------ token table + inspector */
.tokentable { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); }
.tokentable th { text-align: left; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .08em;
                 color: var(--ink-muted); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.tokentable td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tokentable tr { cursor: pointer; }
.tokentable tr:hover td { background: var(--surface-2); }
.tokentable code { color: var(--ink); }
.dot { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 7px;
       border: 1px solid rgba(0,0,0,.12); }

.inspector { width: var(--insp-w); flex: none; border-left: 1px solid var(--line); background: var(--surface);
             overflow-y: auto; padding: var(--sp-5); }
.insp-empty { color: var(--ink-muted); font-size: var(--t-body-sm); line-height: 1.6; }
.insp-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.insp-head .chip { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; }
.insp-head b { display: block; font-size: var(--t-delta); font-weight: 700; line-height: 1.25; }
.insp-head span { font-family: var(--mono); font-size: var(--t-tiny); color: var(--ink-muted); }
.chain { margin-top: var(--sp-5); }
.chain h3, .insp-sec h3 { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em;
                          color: var(--ink-muted); margin-bottom: var(--sp-2); }
.chain ol { list-style: none; }
.chain li { position: relative; padding: 8px 0 8px var(--sp-5); font-size: var(--t-body-sm); }
.chain li::before { content: ""; position: absolute; left: 5px; top: 15px; width: 7px; height: 7px; border-radius: 50%;
                    background: var(--p-500); }
.chain li::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: -4px; width: 1px; background: var(--line); }
.chain li:last-child::after { display: none; }
.chain li b { display: block; font-family: var(--mono); font-size: var(--t-small); color: var(--ink); }
.chain li span { color: var(--ink-muted); font-size: var(--t-small); }
.insp-sec { margin-top: var(--sp-5); }
.acrossbrands { display: flex; flex-direction: column; gap: 6px; }
.acrossbrands div { display: flex; align-items: center; gap: 9px; font-size: var(--t-body-sm); }
.acrossbrands i { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.acrossbrands code { margin-left: auto; color: var(--ink-muted); font-size: var(--t-tiny); }
.snippet { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3);
           font-family: var(--mono); font-size: var(--t-tiny); line-height: 1.7; color: var(--ink-2); white-space: pre-wrap;
           word-break: break-word; margin-top: var(--sp-2); }
.copybtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line);
           border-radius: var(--r-sm); padding: 5px 10px; font-size: var(--t-small); cursor: pointer; color: var(--ink-2);
           margin-top: var(--sp-2); }
.copybtn:hover { border-color: var(--line-strong); color: var(--ink); }

/* ------------------------------------------------------------ toasts */
.toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 80; display: flex; flex-direction: column;
          gap: var(--sp-2); }
.toast { background: var(--n-900); color: var(--n-0); padding: 10px 15px; border-radius: var(--r-sm);
         font-size: var(--t-body-sm); box-shadow: var(--shadow-2); max-width: 340px; animation: toast-in .16s ease-out; }
body[data-theme="dark"] .toast { background: var(--n-0); color: var(--n-900); }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1240px) { .inspector { display: none; } }
@media (max-width: 860px) {
  .side { display: none; }
  .brandpicker .brandchip small { display: none; }
  .gov { grid-template-columns: 1fr; }
  .main { padding: var(--sp-4); }
}

/* ============================================================ Storybook-shaped docs
   Everything below is the story shell: canvas toolbar, args table, code panel,
   accessibility report, changelog and the command palette. */

:root {
  --code-bg: #0f1424;
  --code-ink: #c9d4e8;
  --good: #2c7a4e;
  --okish: #8d6410;
  --poor: #b23a30;
}

/* ---- side rail extras ---- */
.sidetag { float: right; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
           background: var(--surface-2); color: var(--ink-muted); border-radius: var(--r-pill);
           padding: 2px 7px; margin-top: 1px; }
.side-foot { padding: var(--sp-5) var(--sp-5) 0; font-size: var(--t-tiny); color: var(--ink-muted); }
kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-bottom-width: 2px;
      border-radius: 3px; padding: 1px 5px; margin: 0 2px; background: var(--surface-2); color: var(--ink-2); }

/* ---- story head ---- */
.story-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.status { font-size: var(--t-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
          border-radius: var(--r-pill); padding: 3px 10px; border: 1px solid; }
.status.stable { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.status.beta { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.status.deprecated { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.since { font-family: var(--mono); font-size: var(--t-tiny); color: var(--ink-muted); }

/* ---- canvas toolbar ---- */
.canvas-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5);
              padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-bottom: 0;
              border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); }
.cb-label { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
            margin-left: var(--sp-2); }
.cb-label:first-child { margin-left: 0; }
.cb-sep { flex: 1; }
.cb-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent;
             border-radius: var(--r-sm); padding: 5px 9px; font-size: var(--t-small); cursor: pointer; color: var(--ink-2); }
.cb-toggle:hover { border-color: var(--line); color: var(--ink); }
.cb-toggle.is-on { background: var(--surface-2); border-color: var(--line); color: var(--ink); font-weight: 600; }
.cb-toggle .ic { width: 15px; height: 15px; }
.segbtn.wrap { flex-wrap: wrap; }

/* ---- canvas ---- */
.canvas { position: relative; border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
          padding: var(--sp-7) var(--sp-5); display: flex; flex-direction: column; align-items: center;
          gap: var(--sp-4); min-height: 190px; justify-content: center; }
.canvas.bg-surface { background: var(--surface); }
.canvas.bg-page { background: var(--bg); }
.canvas.bg-brand { background: var(--p-700); }
.canvas.bg-dark { background: var(--n-900); }
.canvas.is-grid { background-image: linear-gradient(to right, rgba(127, 139, 168, .22) 1px, transparent 1px),
                                    linear-gradient(to bottom, rgba(127, 139, 168, .22) 1px, transparent 1px);
                  background-size: 8px 8px; }
.canvas-stage { width: 100%; display: flex; justify-content: center; }
.canvas.is-measure .canvas-stage > * { outline: 1px dashed rgba(56, 182, 240, .85); outline-offset: 2px; }
.measure { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--mono);
           font-size: var(--t-tiny); color: var(--ink-muted); border-top: 1px dashed var(--line); padding-top: var(--sp-3);
           width: 100%; justify-content: center; }
.measure b { color: var(--ink-2); font-weight: 600; margin-right: 6px; }

/* the component adapts to a dark ground, the way the real system does */
.canvas.bg-brand .ds-btn.primary, .canvas.bg-dark .ds-btn.primary { background: var(--n-0); color: var(--p-900); }
.canvas.bg-brand .ds-btn.secondary, .canvas.bg-dark .ds-btn.secondary { background: transparent;
  border-color: rgba(255, 255, 255, .65); color: #fff; }
.canvas.bg-brand .ds-btn:disabled, .canvas.bg-dark .ds-btn:disabled { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); }
.canvas.bg-brand .ds-label, .canvas.bg-dark .ds-label { color: rgba(255, 255, 255, .8); }
.canvas.bg-brand .ds-msg, .canvas.bg-dark .ds-msg { color: rgba(255, 255, 255, .65); }
.canvas.bg-brand .measure, .canvas.bg-dark .measure { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .2); }
.canvas.bg-brand .measure b, .canvas.bg-dark .measure b { color: rgba(255, 255, 255, .85); }

/* ---- panel tabs ---- */
.paneltabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); margin-top: var(--sp-6); }
.paneltabs button { background: none; border: 0; padding: 10px 0; font-size: var(--t-body-sm); cursor: pointer;
                    color: var(--ink-2); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; }
.paneltabs button:hover { color: var(--ink); }
.paneltabs button.is-on { color: var(--p-500); font-weight: 700; border-bottom-color: var(--p-500); }
.pt-dot { width: 7px; height: 7px; border-radius: 50%; }
.pt-dot.ok { background: var(--good); }
.pt-dot.bad { background: var(--poor); }
.panel { padding-top: var(--sp-4); }

/* ---- args table ---- */
.argtable { width: 100%; border-collapse: collapse; }
.argtable th { text-align: left; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .09em;
               color: var(--ink-muted); font-weight: 700; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; }
.argtable td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--line); vertical-align: top; }
.argname { width: 34%; }
.argname code { color: var(--ink); font-weight: 600; }
.argname span { display: block; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.5; margin-top: 3px; }
.argctl { width: 34%; }
.argtype code, .argdef code { font-size: var(--t-tiny); color: var(--ink-muted); }
.argtext { width: 100%; max-width: 260px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong);
           border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-body-sm); }
.argtext:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.switch { width: 42px; height: 24px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
          background: var(--surface-2); cursor: pointer; padding: 2px; display: block; }
.switch i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-muted);
            transition: transform .16s ease, background .16s ease; }
.switch.is-on { background: var(--p-700); border-color: var(--p-700); }
.switch.is-on i { transform: translateX(18px); background: #fff; }

/* ---- code ---- */
.codehead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.codehead .copybtn { margin-left: auto; margin-top: 0; }
.code { background: var(--code-bg); color: var(--code-ink); border-radius: var(--r-md); padding: var(--sp-4);
        overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; tab-size: 2; }
.code.tall { max-height: 460px; overflow-y: auto; }
.code.snug { padding: var(--sp-3); font-size: var(--t-tiny); line-height: 1.7; }
.code code { font-family: inherit; font-size: inherit; }
.codenote { font-size: var(--t-small); color: var(--ink-muted); margin-top: var(--sp-2); line-height: 1.6; max-width: 76ch; }
.hl-c   { color: #6b7a99; font-style: italic; }
.hl-t   { color: #79c0ff; }
.hl-a   { color: #ffa657; }
.hl-s   { color: #a5d6ff; }
.hl-k   { color: #ff7b72; }
.hl-v   { color: #d2a8ff; }
.hl-n   { color: #f0b429; }
.hl-p   { color: #7ee787; }
.hl-sel { color: #ffa657; }
.hl-b   { color: #ff7b72; }
.hl-e   { color: #d2a8ff; }

/* ---- accessibility ---- */
.a11y-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.a11y-verdict { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--t-body-sm);
                border-radius: var(--r-pill); padding: 4px 12px; border: 1px solid; }
.a11y-verdict.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.a11y-verdict.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.a11y-note { font-size: var(--t-small); color: var(--ink-muted); }
.a11ytable { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); }
.a11ytable th { text-align: left; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .09em;
                color: var(--ink-muted); padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; }
.a11ytable td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--line); color: var(--ink-2);
                vertical-align: top; }
.a11ytable .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.a11ytable code { font-size: var(--t-tiny); color: var(--ink-muted); }
.a11y-why { display: block; font-size: var(--t-small); color: var(--ink-muted); margin-top: 3px; line-height: 1.5;
            max-width: 42ch; }
.verdict { display: inline-block; font-size: var(--t-tiny); font-weight: 700; border-radius: var(--r-sm);
           padding: 2px 8px; border: 1px solid; }
.verdict.aaa { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.verdict.aa  { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.verdict.fail { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.verdict.exempt { background: var(--surface-2); border-color: var(--line); color: var(--ink-muted); }
.a11y-sub { font-size: var(--t-delta); font-weight: 700; margin-top: var(--sp-6); }
.a11y-copy { color: var(--ink-2); line-height: 1.65; margin: var(--sp-2) 0 var(--sp-3); max-width: 72ch;
             font-size: var(--t-body-sm); }

/* ---- usage ---- */
.usage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.usage-col { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface); }
.usage-col h3 { display: flex; align-items: center; gap: 8px; font-size: var(--t-body-sm); font-weight: 700;
                margin-bottom: var(--sp-3); }
.usage-col.yes h3 { color: var(--ok); }
.usage-col.no h3 { color: var(--bad); }
.usage-col ul { list-style: none; }
.usage-col li { display: flex; gap: var(--sp-2); padding: 6px 0; font-size: var(--t-body-sm); color: var(--ink-2);
                line-height: 1.55; }
.usage-col li .ic { flex: none; margin-top: 2px; width: 15px; height: 15px; }
.usage-col.yes li .ic { color: var(--ok); }
.usage-col.no li .ic { color: var(--bad); }

/* ---- changelog ---- */
.changelist { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.change { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.change b { font-size: var(--t-echo); font-weight: 700; }
.change-area { font-family: var(--mono); font-size: var(--t-tiny); color: var(--ink-muted); margin-left: var(--sp-2); }
.change p { color: var(--ink-2); line-height: 1.65; margin-top: 5px; max-width: 72ch; font-size: var(--t-body-sm); }
.chip { flex: none; width: 86px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--r-sm); font-size: var(--t-tiny); font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; border: 1px solid; }
.chip.breaking { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.chip.fixed { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip.added { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.chip.changed { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ---- field, input and combo components ---- */
.ds-field { display: flex; flex-direction: column; gap: 6px; width: 264px; position: relative; text-align: left; }
.ds-label { font-size: var(--t-small); color: var(--ink-2); font-weight: 600; }
.ds-input { height: var(--ctl-md); padding: 0 var(--sp-3); border: 1px solid var(--line-strong);
            border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-body);
            width: 100%; }
.ds-field.lg .ds-input { height: var(--ctl-lg); font-size: var(--t-body-lg); }
.ds-input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.ds-field.is-focus .ds-input { border-color: var(--p-500); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.ds-field.is-error .ds-input { border-color: var(--bad); }
.ds-field.is-disabled .ds-input { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.ds-msg { font-size: var(--t-small); color: var(--ink-muted); display: flex; align-items: flex-start; gap: 6px;
          line-height: 1.5; }
.ds-msg .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ds-msg.is-err { color: var(--bad); }
.ds-combo-field { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; text-align: left; }
.ds-combo-field .ic { margin-left: auto; color: var(--ink-muted); }
.ds-combo.is-open .ds-combo-field { border-color: var(--p-500); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.ds-combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: var(--surface);
                 border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-2); overflow: hidden; }
.ds-combo-list button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
                        background: none; border: 0; padding: 9px var(--sp-3); cursor: pointer; font-size: var(--t-body);
                        color: var(--ink); }
.ds-combo-list button:hover { background: var(--surface-2); }
.ds-combo-list button.is-on { background: var(--p-700); color: var(--n-0); }
.ds-combo-gap { width: 17px; flex: none; }

/* ---- alert ---- */
.alert { max-width: 460px; }
.alert b { display: block; margin-bottom: 2px; }
.alert .ic { flex: none; margin-top: 2px; }
.alert.as-toast { background: var(--n-900); border-color: var(--n-900); color: var(--n-0); border-radius: var(--r-md);
                  box-shadow: var(--shadow-2); }
body[data-theme="dark"] .alert.as-toast { background: var(--n-0); border-color: var(--n-0); color: var(--n-900); }
.alert-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit; opacity: .6;
           padding: 0; display: grid; align-self: flex-start; }
.alert-x:hover { opacity: 1; }

/* ---- shared odds and ends ---- */
.brandlabel { font-size: var(--t-small); color: var(--ink-muted); margin-bottom: 8px; }
.undernote { margin-top: var(--sp-4); color: var(--ink-muted); font-size: var(--t-body-sm); line-height: 1.6; max-width: 72ch; }
.spacebar { display: inline-block; height: 14px; background: var(--p-500); border-radius: 2px; }
.radii { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.radii > div { text-align: center; }
.radiobox { width: 72px; height: 56px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.radii p { font-size: var(--t-tiny); color: var(--ink-muted); margin-top: 6px; }
.ctls { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.headsearch { border: 0; background: none; outline: 0; flex: 1; font-size: var(--t-body-sm); color: var(--ink);
              min-width: 120px; }
.ramp h3 em { font-style: normal; font-weight: 400; color: var(--ink-muted); font-size: var(--t-tiny); }
.insp-ref { font-size: var(--t-body-sm); color: var(--ink-2); padding: 3px 0; }
.insp-note { font-size: var(--t-small); color: var(--ink-muted); margin-top: var(--sp-2); line-height: 1.5; }
.chip-sw { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; }
.acrossbrands code.good { color: var(--good); }
.acrossbrands code.okish { color: var(--okish); }
.acrossbrands code.poor { color: var(--poor); }

/* ---- command palette ---- */
.palette-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(16, 20, 37, .45); display: flex;
                justify-content: center; align-items: flex-start; padding: 12vh 20px 20px; }
.pal { width: 560px; max-width: 100%; background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.pal-in .ic { color: var(--ink-muted); }
.pal-in input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--t-body-lg); color: var(--ink); }
.pal-list { list-style: none; max-height: 52vh; overflow-y: auto; }
.pal-list button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: none;
                   border: 0; padding: 10px var(--sp-4); cursor: pointer; font-size: var(--t-body-sm); color: var(--ink-2); }
.pal-list button:hover, .pal-list button.is-on { background: var(--surface-2); color: var(--ink); }
.pal-kind { flex: none; width: 92px; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .08em;
            color: var(--ink-muted); }
.pal-label { font-weight: 600; }
.pal-hint { margin-left: auto; font-family: var(--mono); font-size: var(--t-tiny); color: var(--ink-muted); }
.pal-empty { padding: var(--sp-5); text-align: center; color: var(--ink-muted); font-size: var(--t-body-sm); }

@media (max-width: 1100px) {
  .usage { grid-template-columns: 1fr; }
  .argname { width: auto; }
}