/* ==========================================================================
   Browsa design system (ds.css)
   One idea: everything is a tab on a sheet. The chrome is the "desk", content
   lives on a "sheet", and whatever is selected is a tab joined to its sheet.
   Green means live. Nothing else is green.

   Every class is prefixed ds- so this file can load next to site.css and
   app.css during migration. Base type and colour apply inside .ds only.
   Docs: design/DESIGN.md, living examples: design/styleguide.html

   1 fonts  2 tokens  3 base  4 layout  5 type  6 actions  7 forms
   8 navigation family  9 data  10 feedback  11 overlays  12 code
   13 marketing patterns  14 app shell  15 motion policy
   ========================================================================== */

/* 1. FONTS ----------------------------------------------------------------- */
@font-face { font-family: "Martian Grotesk"; src: url("fonts/martian-grotesk.woff2") format("woff2"); font-weight: 500 800; font-stretch: 100% 112%; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks (computed by design/tools/build_fonts.py) so the swap does not move the layout. */
@font-face { font-family: "Martian Grotesk Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 500 800; size-adjust: 139.49%; ascent-override: 71.69%; descent-override: 14.34%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 101.55%; ascent-override: 98.48%; descent-override: 29.84%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 106.65%; ascent-override: 93.77%; descent-override: 18.75%; line-gap-override: 0%; }

/* 2. TOKENS ---------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Surfaces. Neutrals carry a little of the brand hue (155 to 160). */
  --ds-desk:    light-dark(oklch(0.952 0.008 155), oklch(0.155 0.012 160)); /* chrome behind sheets */
  --ds-sheet:   light-dark(oklch(0.992 0.004 155), oklch(0.2 0.012 160));   /* where content lives */
  --ds-sunken:  light-dark(oklch(0.972 0.006 155), oklch(0.172 0.012 160)); /* wells: code, disabled, table head */
  --ds-raised:  light-dark(oklch(0.992 0.004 155), oklch(0.24 0.013 160));  /* menus, dialogs, tooltips */

  /* Ink */
  --ds-ink:     light-dark(oklch(0.21 0.02 160), oklch(0.955 0.008 155));
  --ds-ink-2:   light-dark(oklch(0.37 0.02 160), oklch(0.84 0.012 155));
  --ds-ink-3:   light-dark(oklch(0.48 0.016 160), oklch(0.72 0.014 155));   /* muted text, still AA */
  --ds-ink-4:   light-dark(oklch(0.66 0.012 160), oklch(0.52 0.012 155));   /* disabled only */

  /* Lines */
  --ds-line:    light-dark(oklch(0.905 0.008 155), oklch(0.27 0.012 160));  /* row rules */
  --ds-line-2:  light-dark(oklch(0.84 0.01 155), oklch(0.335 0.013 160));   /* frames, tab edges */
  --ds-line-control: light-dark(oklch(0.6 0.014 158), oklch(0.58 0.014 158)); /* field outlines, 3:1 */

  /* Green means live or go. */
  --ds-green:      light-dark(oklch(0.6 0.16 152), oklch(0.78 0.17 152));
  --ds-green-ink:  light-dark(oklch(0.43 0.11 155), oklch(0.83 0.14 152));
  --ds-green-wash: light-dark(oklch(0.955 0.035 155), oklch(0.27 0.045 157));
  --ds-red:        light-dark(oklch(0.58 0.2 27), oklch(0.7 0.17 25));
  --ds-red-ink:    light-dark(oklch(0.47 0.17 27), oklch(0.82 0.1 25));
  --ds-red-wash:   light-dark(oklch(0.96 0.025 27), oklch(0.27 0.05 25));
  --ds-amber:      light-dark(oklch(0.62 0.15 62), oklch(0.8 0.14 80));
  --ds-amber-ink:  light-dark(oklch(0.45 0.1 65), oklch(0.86 0.11 85));
  --ds-amber-wash: light-dark(oklch(0.96 0.04 85), oklch(0.28 0.045 80));
  --ds-blue-ink:   light-dark(oklch(0.45 0.13 255), oklch(0.82 0.09 250));
  --ds-blue-wash:  light-dark(oklch(0.96 0.02 250), oklch(0.27 0.04 255));
  --ds-rust-ink:   light-dark(oklch(0.47 0.13 40), oklch(0.82 0.09 50));    /* code keywords */

  /* Derived */
  --ds-hover:        color-mix(in oklab, var(--ds-ink) 6%, transparent);
  --ds-press:        color-mix(in oklab, var(--ds-ink) 11%, transparent);
  --ds-sheet-hover:  color-mix(in oklab, var(--ds-ink) 5%, var(--ds-sheet));
  --ds-desk-hover:   color-mix(in oklab, var(--ds-ink) 6%, var(--ds-desk));
  --ds-primary:      var(--ds-ink);
  --ds-primary-hover: color-mix(in oklab, var(--ds-ink) 84%, var(--ds-sheet));
  --ds-on-primary:   var(--ds-sheet);
  --ds-on-primary-2: color-mix(in oklab, var(--ds-sheet) 74%, var(--ds-ink));
  --ds-on-primary-green: light-dark(oklch(0.78 0.17 152), oklch(0.43 0.11 155));
  --ds-on-primary-red:   light-dark(oklch(0.72 0.16 25), oklch(0.5 0.19 27));
  --ds-danger:       light-dark(oklch(0.5 0.19 27), oklch(0.72 0.16 25));
  --ds-on-danger:    light-dark(oklch(0.985 0.01 27), oklch(0.17 0.03 25));
  --ds-focus:        light-dark(oklch(0.43 0.11 155), oklch(0.78 0.17 152));
  --ds-scrim:        light-dark(oklch(0.21 0.02 160 / 0.42), oklch(0.08 0.01 160 / 0.66));

  /* Type */
  --ds-font-display: "Martian Grotesk", "Martian Grotesk Fallback", "Arial Black", sans-serif;
  --ds-font-text:    "Hanken Grotesk", "Hanken Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --ds-font-code:    "Martian Mono", "Martian Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --ds-text-2xs: 0.6875rem;  /* 11 */
  --ds-text-xs:  0.75rem;    /* 12 */
  --ds-text-sm:  0.8125rem;  /* 13 */
  --ds-text-md:  0.875rem;   /* 14  dashboard body */
  --ds-text-base: 1rem;      /* 16 */
  --ds-text-lg:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 to 18  marketing body */
  --ds-text-xl:  clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);   /* lead */
  --ds-text-h4:  1.0625rem;
  --ds-text-h3:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --ds-text-h2:  clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --ds-text-h1:  clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --ds-text-hero: clamp(2.5rem, 0.5rem + 5.4vw, 5.25rem);
  --ds-leading-tight: 1.04; --ds-leading-snug: 1.25; --ds-leading-body: 1.5; --ds-leading-prose: 1.65;

  /* Space: 4px steps, plus fluid page rhythm */
  --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem;
  --ds-space-20: 5rem; --ds-space-24: 6rem;
  --ds-gutter:  clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --ds-section: clamp(4rem, 2.6rem + 6vw, 8rem);

  /* Shape */
  --ds-radius-xs: 3px; --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-full: 999px;
  --ds-border: 1px solid var(--ds-line);
  --ds-border-frame: 1px solid var(--ds-line-2);
  --ds-border-control: 1px solid var(--ds-line-control);

  /* Control heights. Coarse pointers and phones get 44px (see the end of this block). */
  --ds-h-sm: 1.75rem; --ds-h-md: 2.125rem; --ds-h-lg: 2.75rem;

  /* Elevation: floating things only */
  --ds-shadow-pop:   0 0 0 1px light-dark(oklch(0.21 0.02 160 / 0.1), oklch(0.6 0.014 158 / 0.28)), 0 2px 4px -1px oklch(0.21 0.02 160 / 0.1), 0 12px 28px -10px oklch(0.21 0.02 160 / 0.28);
  --ds-shadow-modal: 0 0 0 1px light-dark(oklch(0.21 0.02 160 / 0.1), oklch(0.6 0.014 158 / 0.28)), 0 8px 16px -6px oklch(0.21 0.02 160 / 0.14), 0 32px 72px -20px oklch(0.21 0.02 160 / 0.42);

  /* Motion */
  --ds-dur-1: 120ms;  /* hover, press */
  --ds-dur-2: 200ms;  /* state change */
  --ds-dur-3: 320ms;  /* enter */
  --ds-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* expo out: entrances */
  --ds-ease-quart:  cubic-bezier(0.25, 1, 0.5, 1);     /* quart out: state changes */
  --ds-ease-in:     cubic-bezier(0.5, 0, 0.75, 0);     /* exits */

  /* Layers */
  --ds-z-raised: 10; --ds-z-sticky: 100; --ds-z-nav: 200; --ds-z-pop: 300; --ds-z-drawer: 400; --ds-z-dialog: 500; --ds-z-toast: 600; --ds-z-tip: 700;

  /* Widths */
  --ds-w-prose: 68ch; --ds-w-sm: 40rem; --ds-w-md: 55rem; --ds-w-lg: 70rem; --ds-w-xl: 82.5rem;
}
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; }
@media (pointer: coarse), (max-width: 640px) {
  :root { --ds-h-sm: 2.75rem; --ds-h-md: 2.75rem; --ds-h-lg: 3rem; }
}

/* 3. BASE (inside .ds only) ------------------------------------------------- */
.ds { color: var(--ds-ink); font: 400 var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-text); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; font-variant-numeric: tabular-nums; }
body.ds { margin: 0; min-height: 100dvh; background: var(--ds-desk); }
.ds-marketing { font-size: var(--ds-text-lg); line-height: 1.6; }
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, pre, blockquote) { margin: 0; }
.ds :where(ul, ol)[class] { padding: 0; list-style: none; }
.ds :where(a) { color: inherit; }
.ds :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.ds :where(img, svg, video) { display: block; max-width: 100%; }
.ds :where(code, kbd, pre, samp) { font-family: var(--ds-font-code); font-size: 0.86em; font-variant-ligatures: none; }
.ds :where([hidden]) { display: none !important; }
.ds ::selection { background: var(--ds-green-wash); color: var(--ds-ink); }
.ds :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds :where([tabindex="-1"]):focus { outline: none; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ds-skip { position: absolute; left: var(--ds-space-3); top: var(--ds-space-3); z-index: var(--ds-z-tip); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-primary); color: var(--ds-on-primary); border-radius: var(--ds-radius-sm); transform: translateY(-200%); }
.ds-skip:focus { transform: none; }

/* Icons: one set (Lucide), drawn at an even optical stroke of about 1.4px. */
.ds-icon { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-icon--sm { width: 0.875rem; height: 0.875rem; stroke-width: 2.25; }
.ds-icon--lg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }
.ds-icon--xl { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }

/* 4. LAYOUT ------------------------------------------------------------------ */
.ds-container { width: 100%; max-width: calc(var(--ds-w-xl) + 2 * var(--ds-gutter)); margin-inline: auto; padding-inline: var(--ds-gutter); }
.ds-container--lg { max-width: calc(var(--ds-w-lg) + 2 * var(--ds-gutter)); }
.ds-container--md { max-width: calc(var(--ds-w-md) + 2 * var(--ds-gutter)); }
.ds-stack { display: flex; flex-direction: column; gap: var(--gap, var(--ds-space-4)); min-width: 0; }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--ds-space-2)); min-width: 0; }
.ds-cluster--between { justify-content: space-between; }
.ds-cluster--nowrap { flex-wrap: nowrap; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr)); gap: var(--gap, var(--ds-space-6)); }
.ds-cq { container-type: inline-size; }
/* Main plus aside. Wrap in .ds-cq: the aside drops below when the container is under 56rem. */
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, var(--ds-space-10)); align-items: start; }
@container (min-width: 56rem) { .ds-split { grid-template-columns: minmax(0, 1fr) minmax(18rem, var(--aside, 23rem)); } .ds-split--aside-first { grid-template-columns: var(--aside, 14rem) minmax(0, 1fr); } }
.ds-grow { flex: 1 1 0; min-width: 0; }
.ds-push { margin-inline-start: auto; }
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ds-rule { border: 0; border-top: var(--ds-border); margin: 0; }
.ds-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; overscroll-behavior: contain; }
.ds-sheet { background: var(--ds-sheet); }
.ds-desk { background: var(--ds-desk); }
@media (max-width: 640px) { .ds-hide-phone { display: none !important; } }
@media (min-width: 641px) { .ds-only-phone { display: none !important; } }

/* 5. TYPE -------------------------------------------------------------------- */
.ds-hero-title, .ds-h1, .ds-h2, .ds-h3 { font-family: var(--ds-font-display); font-weight: 650; font-stretch: 108%; text-wrap: balance; font-variant-numeric: normal; }
.ds-hero-title { font-size: var(--ds-text-hero); line-height: 0.98; letter-spacing: -0.045em; }
.ds-h1 { font-size: var(--ds-text-h1); line-height: var(--ds-leading-tight); letter-spacing: -0.04em; }
.ds-h2 { font-size: var(--ds-text-h2); line-height: 1.08; letter-spacing: -0.035em; }
.ds-h3 { font-size: var(--ds-text-h3); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; }
.ds-h4 { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); letter-spacing: -0.005em; }
.ds-h5 { font: 600 var(--ds-text-md)/1.4 var(--ds-font-text); }
.ds-lead { font-size: var(--ds-text-xl); line-height: 1.5; color: var(--ds-ink-2); max-width: 36em; text-wrap: pretty; }
.ds-body { font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); max-width: var(--ds-w-prose); text-wrap: pretty; }
.ds-small { font-size: var(--ds-text-sm); }
.ds-caption { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
/* Section label: plain words, never tracked-out capitals. */
.ds-overline { font: 500 var(--ds-text-sm)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.ds-muted { color: var(--ds-ink-3); }
.ds-soft { color: var(--ds-ink-2); }
.ds-num { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.ds-mono { font-family: var(--ds-font-code); font-size: 0.86em; font-variant-ligatures: none; }
.ds-code-inline { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); }
/* Long-form: docs, legal, guides */
.ds-prose { max-width: var(--ds-w-prose); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.ds-prose > * + * { margin-top: 1em; }
.ds-prose :where(h2) { font: 600 var(--ds-text-h3)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.025em; color: var(--ds-ink); margin-top: 2.4em; scroll-margin-top: 6rem; }
.ds-prose :where(h3) { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); margin-top: 2em; scroll-margin-top: 6rem; }
.ds-prose :where(ul, ol) { padding-inline-start: 1.25em; }
.ds-prose :where(li + li) { margin-top: 0.35em; }
.ds-prose :where(strong) { color: var(--ds-ink); font-weight: 600; }
.ds-prose :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.ds-prose :where(a:hover) { text-decoration-color: currentColor; }
.ds-prose :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); }

/* 6. ACTIONS ----------------------------------------------------------------- */
.ds-btn { --_bg: transparent; --_fg: var(--ds-ink); --_bd: transparent; --_bg-h: var(--ds-hover); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); height: var(--ds-h-md); padding-inline: var(--ds-space-3); border: 1px solid var(--_bd); border-radius: var(--ds-radius-sm); background: var(--_bg); color: var(--_fg); font: 500 var(--ds-text-md)/1 var(--ds-font-text); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-1) var(--ds-ease-quart), border-color var(--ds-dur-1) var(--ds-ease-quart), color var(--ds-dur-1) var(--ds-ease-quart), transform var(--ds-dur-1) var(--ds-ease-quart); }
.ds-btn:hover { background: var(--_bg-h); }
.ds-btn:active { transform: scale(0.98); }
.ds-btn--primary { --_bg: var(--ds-primary); --_fg: var(--ds-on-primary); --_bg-h: var(--ds-primary-hover); }
.ds-btn--secondary { --_bg: var(--ds-sheet); --_bd: var(--ds-line-control); --_bg-h: var(--ds-sheet-hover); }
.ds-btn--secondary:hover { border-color: var(--ds-ink); }
.ds-btn--ghost { --_fg: var(--ds-ink-2); }
.ds-btn--ghost:hover, .ds-btn--ghost[aria-expanded="true"], .ds-btn--ghost[aria-pressed="true"] { color: var(--ds-ink); background: var(--ds-hover); }
.ds-btn--danger { --_bg: var(--ds-danger); --_fg: var(--ds-on-danger); --_bg-h: color-mix(in oklab, var(--ds-danger) 86%, var(--ds-ink)); }
.ds-btn--ghost.ds-btn--danger, .ds-btn--secondary.ds-btn--danger { --_fg: var(--ds-red-ink); --_bg: transparent; --_bg-h: var(--ds-red-wash); }
.ds-btn--secondary.ds-btn--danger { --_bg: var(--ds-sheet); }
.ds-btn--secondary.ds-btn--danger:hover { border-color: var(--ds-red-ink); }
.ds-btn--sm { height: var(--ds-h-sm); padding-inline: 0.625rem; font-size: var(--ds-text-sm); gap: 0.375rem; }
.ds-btn--lg { height: var(--ds-h-lg); padding-inline: 1.125rem; font-size: var(--ds-text-base); }
.ds-btn--icon { width: var(--ds-h-md); padding: 0; }
.ds-btn--icon.ds-btn--sm { width: var(--ds-h-sm); }
.ds-btn--icon.ds-btn--lg { width: var(--ds-h-lg); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ds-btn:disabled:hover, .ds-btn[aria-disabled="true"]:hover { background: var(--_bg); border-color: var(--_bd); }
.ds-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.ds-btn[aria-busy="true"]::after, .ds-spinner { content: ""; display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid var(--_fg, currentColor); border-inline-end-color: transparent; animation: ds-spin 0.7s linear infinite; }
.ds-btn[aria-busy="true"]::after { position: absolute; inset: 0; margin: auto; }
.ds-btn .ds-btn__arrow { transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-btn:hover .ds-btn__arrow { transform: translateX(2px); }
@keyframes ds-spin { to { transform: rotate(1turn); } }

.ds-link { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--ds-line-control); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--ds-dur-1); cursor: pointer; }
.ds-link:hover { text-decoration-color: currentColor; }
.ds-link--quiet { text-decoration-color: transparent; color: var(--ds-ink-2); }
.ds-link--quiet:hover { color: var(--ds-ink); }
.ds-link--arrow { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; text-decoration-color: transparent; }
.ds-link--arrow .ds-icon { transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-link--arrow:hover .ds-icon { transform: translateX(3px); }

/* 7. FORMS ------------------------------------------------------------------- */
.ds-field { display: grid; gap: 0.375rem; min-width: 0; }
.ds-label { font: 500 var(--ds-text-sm)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.ds-label small { font-weight: 400; color: var(--ds-ink-3); font-size: inherit; }
.ds-help { font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-ink-3); }
.ds-error { display: flex; gap: 0.375rem; align-items: flex-start; font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-red-ink); }
.ds-error .ds-icon { margin-top: 0.125rem; }
.ds-input, .ds-textarea, .ds-select select { width: 100%; min-width: 0; height: var(--ds-h-md); padding: 0 0.625rem; border: var(--ds-border-control); border-radius: var(--ds-radius-sm); background: var(--ds-sheet); color: var(--ds-ink); font: 400 var(--ds-text-md)/1.4 var(--ds-font-text); transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1); appearance: none; }
.ds-textarea { height: auto; min-height: 5.5rem; padding-block: 0.5rem; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-ink-3); opacity: 1; }
.ds-input:hover, .ds-textarea:hover, .ds-select select:hover { border-color: var(--ds-ink-2); }
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select select:focus-visible { border-color: var(--ds-ink); outline: 2px solid var(--ds-focus); outline-offset: 1px; }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"], .ds-select select[aria-invalid="true"] { border-color: var(--ds-red-ink); box-shadow: inset 0 0 0 1px var(--ds-red-ink); }
.ds-input:disabled, .ds-textarea:disabled, .ds-select select:disabled { background: var(--ds-sunken); color: var(--ds-ink-4); border-color: var(--ds-line-2); cursor: not-allowed; }
.ds-input[readonly] { background: var(--ds-sunken); }
.ds-input--mono { font-family: var(--ds-font-code); font-size: var(--ds-text-xs); }
.ds-input--sm, .ds-select--sm select { height: var(--ds-h-sm); font-size: var(--ds-text-sm); }
.ds-input--lg { height: var(--ds-h-lg); font-size: var(--ds-text-base); padding-inline: 0.875rem; }
/* Input with a leading icon and optional trailing slot (kbd, button) */
.ds-inputgroup { position: relative; display: flex; align-items: center; min-width: 0; }
.ds-inputgroup > .ds-icon { position: absolute; left: 0.625rem; color: var(--ds-ink-3); pointer-events: none; }
.ds-inputgroup > .ds-icon ~ .ds-input { padding-left: 2rem; }
.ds-inputgroup__end { position: absolute; right: 0.375rem; display: flex; align-items: center; gap: 0.25rem; }
.ds-select { position: relative; display: inline-grid; min-width: 0; align-self: start; height: fit-content; }
.ds-select select { padding-right: 1.875rem; cursor: pointer; }
.ds-select::after { content: ""; position: absolute; right: 0.75rem; top: 50%; width: 0.375rem; height: 0.375rem; border-right: 1.5px solid var(--ds-ink-2); border-bottom: 1.5px solid var(--ds-ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ds-select--block { display: grid; }
/* Checkbox and radio: label.ds-check > input + text */
.ds-check { display: inline-flex; align-items: flex-start; gap: var(--ds-space-2); font-size: var(--ds-text-md); line-height: 1.3; cursor: pointer; min-height: 1.5rem; padding-block: 0.125rem; }
.ds-check input { flex: none; appearance: none; width: 1rem; height: 1rem; margin: 0.0625rem 0 0; border: 1.5px solid var(--ds-line-control); border-radius: var(--ds-radius-xs); background: var(--ds-sheet); cursor: pointer; transition: background-color var(--ds-dur-1), border-color var(--ds-dur-1), box-shadow var(--ds-dur-1); }
.ds-check input[type="radio"] { border-radius: 50%; }
.ds-check:hover input { border-color: var(--ds-ink); }
.ds-check input[type="checkbox"]:checked, .ds-check input[type="checkbox"]:indeterminate { border-color: var(--ds-ink); background: var(--ds-ink) linear-gradient(var(--ds-sheet), var(--ds-sheet)) center / 0.5rem 0.125rem no-repeat; }
.ds-check input[type="checkbox"]:checked { background: var(--ds-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(#000 0 0); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ds-check input[type="radio"]:checked { border-color: var(--ds-ink); box-shadow: inset 0 0 0 3px var(--ds-sheet); background: var(--ds-ink); }
.ds-check input:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-check:has(input:disabled) { color: var(--ds-ink-4); cursor: not-allowed; }
.ds-check small { display: block; margin-top: 0.125rem; color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
/* Switch: label.ds-switch > input[role=switch] + span.ds-switch__track + text. On is green: the thing is live. */
.ds-switch { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-md); cursor: pointer; min-height: 1.5rem; }
.ds-switch input { position: absolute; opacity: 0; width: 2rem; height: 1.125rem; margin: 0; cursor: pointer; }
.ds-switch__track { flex: none; position: relative; width: 2rem; height: 1.125rem; border-radius: var(--ds-radius-full); background: var(--ds-line-control); transition: background-color var(--ds-dur-2) var(--ds-ease-quart); }
.ds-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--ds-sheet); transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-switch input:checked + .ds-switch__track { background: var(--ds-green-ink); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(0.875rem); }
.ds-switch input:focus-visible + .ds-switch__track { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-switch:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
@media (pointer: coarse), (max-width: 640px) {
  .ds-input, .ds-textarea, .ds-select select { font-size: 1rem; }
  .ds-check, .ds-switch { min-height: 2.75rem; align-items: center; }
}

/* Composer: the address bar of the dashboard. One field, options below, one primary action. */
.ds-composer { display: grid; border: var(--ds-border-control); border-radius: var(--ds-radius-md); background: var(--ds-sheet); transition: border-color var(--ds-dur-1); }
.ds-composer:hover { border-color: var(--ds-ink-2); }
.ds-composer:focus-within { border-color: var(--ds-ink); outline: 2px solid var(--ds-focus); outline-offset: 1px; }
.ds-composer__input { width: 100%; min-height: 5.25rem; padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-2); border: 0; background: none; resize: none; font: 400 var(--ds-text-base)/1.5 var(--ds-font-text); color: var(--ds-ink); outline: none; }
.ds-composer__input::placeholder { color: var(--ds-ink-3); opacity: 1; }
.ds-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2); border-top: var(--ds-border); }
.ds-composer[aria-disabled="true"] { background: var(--ds-sunken); border-color: var(--ds-line-2); }
.ds-composer[aria-invalid="true"] { border-color: var(--ds-red-ink); }

/* 8. NAVIGATION FAMILY ------------------------------------------------------- */
/* Tabs: index tabs. The strip sits on the band colour, the selected tab takes the colour of the
   surface below and joins it. Set --_surface when the surface below is not the sheet. */
.ds-tabs { --_surface: var(--ds-sheet); --_h: 2.25rem; display: flex; align-items: flex-end; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--ds-line-2); }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab { flex: none; position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); height: var(--_h); padding-inline: 0.875rem; border: 1px solid transparent; border-bottom: 0; border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0; background: none; color: var(--ds-ink-3); font: 500 var(--ds-text-md)/1 var(--ds-font-text); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--ds-dur-1), background-color var(--ds-dur-1); }
.ds-tab + .ds-tab::before { content: ""; position: absolute; left: -1px; top: 32%; bottom: 32%; width: 1px; background: var(--ds-line-2); transition: opacity var(--ds-dur-1); }
.ds-tab:hover { color: var(--ds-ink); background: var(--ds-hover); }
.ds-tab:hover::before, .ds-tab:hover + .ds-tab::before, .ds-tab.is-selected::before, .ds-tab.is-selected + .ds-tab::before, .ds-tab[aria-selected="true"]::before, .ds-tab[aria-selected="true"] + .ds-tab::before, .ds-tab[aria-current="page"]::before, .ds-tab[aria-current="page"] + .ds-tab::before { opacity: 0; }
.ds-tab.is-selected, .ds-tab[aria-selected="true"], .ds-tab[aria-current="page"] { background: var(--_surface); border-color: var(--ds-line-2); color: var(--ds-ink); }
.ds-tab:focus-visible { outline-offset: -3px; }
.ds-tab:disabled, .ds-tab[aria-disabled="true"] { color: var(--ds-ink-4); cursor: not-allowed; background: none; }
.ds-tab__count { font-size: var(--ds-text-xs); color: var(--ds-ink-3); font-weight: 400; }
.ds-tab__close { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0; margin-inline-end: -0.375rem; border: 0; border-radius: var(--ds-radius-xs); background: none; color: var(--ds-ink-3); cursor: pointer; }
.ds-tab__close:hover { background: var(--ds-press); color: var(--ds-ink); }
.ds-tabs__gap { flex: 1 0 var(--ds-space-4); }
.ds-tabs--lg { --_h: 2.5rem; }
.ds-tabs--sm { --_h: 1.875rem; }
.ds-tabs--sm .ds-tab { padding-inline: 0.625rem; font-size: var(--ds-text-sm); }
.ds-tabs--sunken { --_surface: var(--ds-sunken); }
.ds-tabpanel { animation: ds-rise var(--ds-dur-2) var(--ds-ease-out); }
.ds-tabpanel:focus-visible { outline-offset: -2px; }
@keyframes ds-rise { from { opacity: 0; transform: translateY(4px); } }
/* Dock: on phones the app tabs hang under the sheet at the bottom of the screen, thumb height. */
@media (max-width: 640px) {
  .ds-tabs--dock { position: fixed; inset: auto 0 0 0; z-index: var(--ds-z-nav); align-items: flex-start; padding: 0 var(--ds-space-2) env(safe-area-inset-bottom); background: var(--ds-desk); box-shadow: inset 0 1px 0 var(--ds-line-2); overflow: visible; }
  .ds-tabs--dock .ds-tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.25rem; height: 3.5rem; padding-inline: 0.25rem; border: 1px solid transparent; border-top: 0; border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm); font-size: var(--ds-text-2xs); }
  .ds-tabs--dock .ds-tab::before, .ds-tabs--dock .ds-tabs__gap { display: none; }
  .ds-tabs--dock .ds-tab.is-selected, .ds-tabs--dock .ds-tab[aria-selected="true"], .ds-tabs--dock .ds-tab[aria-current="page"] { border-color: var(--ds-line-2); }
  .ds-tabs--dock .ds-icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }
  .ds-has-dock { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}

/* Segmented control: a choice between views of the same data. Selected is solid ink.
   Markup: div.ds-seg[role=radiogroup] > label > input[type=radio] + span */
.ds-seg { display: inline-flex; min-width: 0; height: var(--ds-h-md); border: var(--ds-border-control); border-radius: var(--ds-radius-sm); background: var(--ds-sheet); overflow: hidden; }
.ds-seg > label, .ds-seg > button { position: relative; display: flex; flex: 1 0 auto; min-width: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.ds-seg > * + * { box-shadow: -1px 0 0 var(--ds-line-2); }
.ds-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ds-seg span, .ds-seg > button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 0.375rem; padding-inline: 0.75rem; font: 500 var(--ds-text-sm)/1 var(--ds-font-text); color: var(--ds-ink-2); white-space: nowrap; transition: background-color var(--ds-dur-1), color var(--ds-dur-1); }
.ds-seg label:hover span, .ds-seg > button:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-seg input:checked + span, .ds-seg > button[aria-pressed="true"] { background: var(--ds-primary); color: var(--ds-on-primary); }
.ds-seg input:focus-visible + span { outline: 2px solid var(--ds-focus); outline-offset: -3px; }
.ds-seg input:disabled + span { color: var(--ds-ink-4); cursor: not-allowed; background: none; }
.ds-seg--sm { height: var(--ds-h-sm); }
.ds-seg--block { display: flex; }

/* Chips: filters you can switch on, and removable tokens. */
.ds-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: var(--ds-h-sm); padding-inline: 0.625rem; border: var(--ds-border-frame); border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-2); font: 500 var(--ds-text-sm)/1 var(--ds-font-text); white-space: nowrap; cursor: pointer; text-decoration: none; transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1), color var(--ds-dur-1), transform var(--ds-dur-1); }
.ds-chip:hover { border-color: var(--ds-ink-2); color: var(--ds-ink); }
.ds-chip:active { transform: scale(0.98); }
.ds-chip[aria-pressed="true"] { border-color: var(--ds-ink); background: var(--ds-hover); color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); }
.ds-chip:disabled { color: var(--ds-ink-4); border-color: var(--ds-line); cursor: not-allowed; }
.ds-chip--static { cursor: default; background: var(--ds-sunken); }
.ds-chip--static:hover { border-color: var(--ds-line-2); color: var(--ds-ink-2); }
.ds-chip__x { flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; padding: 0; margin-inline-end: -0.25rem; border: 0; border-radius: var(--ds-radius-xs); background: none; color: var(--ds-ink-3); cursor: pointer; }
.ds-chip__x:hover { background: var(--ds-press); color: var(--ds-ink); }

/* Side navigation: vertical tabs. --attached joins the selected item to a sheet on its right. */
.ds-sidenav { display: grid; gap: 1px; align-content: start; }
.ds-sidenav__label { margin: var(--ds-space-4) 0 var(--ds-space-1); padding-inline: 0.625rem; font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.ds-sidenav__label:first-child { margin-top: 0; }
.ds-sidenav__item { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-h-md); padding: 0.25rem 0.625rem; border: 1px solid transparent; border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); font: 500 var(--ds-text-md)/1.3 var(--ds-font-text); text-decoration: none; cursor: pointer; background: none; text-align: start; transition: background-color var(--ds-dur-1), color var(--ds-dur-1); }
.ds-sidenav__item:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-sidenav__item[aria-current="page"], .ds-sidenav__item.is-selected { background: var(--ds-hover); color: var(--ds-ink); }
.ds-sidenav__item .ds-icon { color: var(--ds-ink-3); }
.ds-sidenav__item[aria-current="page"] .ds-icon, .ds-sidenav__item:hover .ds-icon { color: inherit; }
.ds-sidenav__item[aria-disabled="true"] { color: var(--ds-ink-4); cursor: not-allowed; background: none; }
.ds-sidenav--attached { padding-block: var(--ds-space-4); box-shadow: inset -1px 0 0 var(--ds-line-2); }
.ds-sidenav--attached .ds-sidenav__item { border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm); border-right: 0; }
.ds-sidenav--attached .ds-sidenav__item[aria-current="page"], .ds-sidenav--attached .ds-sidenav__item.is-selected { background: var(--ds-sheet); border-color: var(--ds-line-2); }

.ds-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.ds-crumbs li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ds-crumbs li + li::before { content: "/"; color: var(--ds-ink-4); }
.ds-crumbs a { color: inherit; text-decoration: none; }
.ds-crumbs a:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-crumbs [aria-current="page"] { color: var(--ds-ink); font-weight: 500; }

.ds-pager { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.ds-pager__info { margin-inline-end: auto; }

/* Menu: details.ds-menu > summary (any button) + div.ds-menu__panel */
.ds-menu { position: relative; display: inline-block; }
.ds-menu > summary { list-style: none; }
.ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu__panel { position: absolute; z-index: var(--ds-z-pop); top: calc(100% + 0.375rem); left: 0; min-width: 12.5rem; max-width: min(20rem, calc(100vw - 2rem)); padding: 0.25rem; border-radius: var(--ds-radius-md); background: var(--ds-raised); box-shadow: var(--ds-shadow-pop); animation: ds-pop var(--ds-dur-2) var(--ds-ease-out); transform-origin: top left; }
.ds-menu--end .ds-menu__panel { left: auto; right: 0; transform-origin: top right; }
.ds-menu__item { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; min-height: var(--ds-h-md); padding: 0.25rem 0.5rem; border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink); font: 400 var(--ds-text-md)/1.3 var(--ds-font-text); text-align: start; text-decoration: none; cursor: pointer; }
.ds-menu__item:hover, .ds-menu__item:focus-visible, .ds-menu__item[aria-selected="true"] { background: var(--ds-hover); }
.ds-menu__item[aria-checked="true"]::after { content: ""; margin-inline-start: auto; width: 0.3rem; height: 0.6rem; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-1px) rotate(45deg); }
.ds-menu__item--danger { color: var(--ds-red-ink); }
.ds-menu__item:disabled, .ds-menu__item[aria-disabled="true"] { color: var(--ds-ink-4); cursor: not-allowed; background: none; }
.ds-menu__item .ds-kbd, .ds-menu__item .ds-menu__meta { margin-inline-start: auto; color: var(--ds-ink-3); font-size: var(--ds-text-xs); }
.ds-menu__sep { height: 1px; margin: 0.25rem -0.25rem; background: var(--ds-line); }
.ds-menu__label { padding: 0.375rem 0.5rem 0.25rem; font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
@keyframes ds-pop { from { opacity: 0; transform: scale(0.97) translateY(-2px); } }

/* 9. DATA -------------------------------------------------------------------- */
/* Status: shape and word carry the meaning, colour supports it. */
.ds-status { --_c: var(--ds-ink-3); display: inline-flex; align-items: center; gap: 0.4375rem; font: 500 var(--ds-text-sm)/1.2 var(--ds-font-text); color: var(--ds-ink); white-space: nowrap; }
.ds-status::before { content: ""; flex: none; position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--_c); }
.ds-status--running { --_c: var(--ds-green); color: var(--ds-green-ink); }
.ds-status--running::before { animation: ds-live 1.8s var(--ds-ease-quart) infinite; }
.ds-status--queued::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ds-ink-3); }
.ds-status--done { --_c: var(--ds-ink); }
.ds-status--done::before { border-radius: 1px; width: 0.4375rem; height: 0.4375rem; }
.ds-status--failed { --_c: var(--ds-red); color: var(--ds-red-ink); }
.ds-status--failed::before { border-radius: 1px; width: 0.4375rem; height: 0.4375rem; transform: rotate(45deg); }
.ds-status--cancelled { color: var(--ds-ink-3); }
.ds-status--cancelled::before { background: linear-gradient(var(--ds-ink-3), var(--ds-ink-3)) center / 100% 1.5px no-repeat; border-radius: 0; }
.ds-status--warning { --_c: var(--ds-amber); color: var(--ds-amber-ink); }
.ds-status--warning::before { border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.ds-status--neutral::before { opacity: 0.6; }
.ds-status--icon-only { gap: 0; }
@keyframes ds-live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ds-green) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.375rem color-mix(in oklab, var(--ds-green) 0%, transparent); } }

.ds-badge { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding-inline: 0.375rem; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line-2); color: var(--ds-ink-2); font: 500 var(--ds-text-xs)/1 var(--ds-font-text); white-space: nowrap; }
.ds-badge--green { background: var(--ds-green-wash); color: var(--ds-green-ink); box-shadow: none; }
.ds-badge--red { background: var(--ds-red-wash); color: var(--ds-red-ink); box-shadow: none; }
.ds-badge--amber { background: var(--ds-amber-wash); color: var(--ds-amber-ink); box-shadow: none; }
.ds-badge--blue { background: var(--ds-blue-wash); color: var(--ds-blue-ink); box-shadow: none; }
.ds-badge--solid { background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; }

/* Table: dense, ruled, numbers right. Wrap in .ds-table-wrap. Add .ds-table--stack and data-label
   on each td to turn rows into stacked records when the wrap is narrower than 40rem. */
.ds-table-wrap { container-type: inline-size; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); line-height: 1.35; }
.ds-table th { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ds-line-2); color: var(--ds-ink-3); font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); text-align: start; white-space: nowrap; }
.ds-table th[aria-sort] { cursor: pointer; color: var(--ds-ink); }
.ds-table th[aria-sort="ascending"]::after { content: " \2191"; }
.ds-table th[aria-sort="descending"]::after { content: " \2193"; }
.ds-table td { padding: 0.5625rem 0.75rem; border-bottom: var(--ds-border); color: var(--ds-ink-2); vertical-align: middle; }
.ds-table td:not(.ds-table__primary) { white-space: nowrap; }
.ds-table--compare td:not(.ds-table__primary) { white-space: normal; }
.ds-table :is(th, td):first-child { padding-inline-start: 0; }
.ds-table :is(th, td):last-child { padding-inline-end: 0; }
.ds-table .ds-num { text-align: end; }
.ds-table tbody tr { transition: background-color var(--ds-dur-1); }
.ds-table--hover tbody tr:hover, .ds-table tbody tr[aria-selected="true"] { background: var(--ds-hover); }
/* Hover tables: text stays on the page edge, the row plate and focus ring bleed 8px past it. */
.ds-table-wrap:has(> .ds-table--hover) { margin-inline: calc(-1 * var(--ds-space-2)); }
.ds-table--hover :is(th, td):first-child { padding-inline-start: var(--ds-space-2); }
.ds-table--hover :is(th, td):last-child { padding-inline-end: var(--ds-space-2); }
.ds-table tbody tr[tabindex] { cursor: pointer; }
.ds-table tbody tr:focus-visible { outline-offset: -2px; }
.ds-table__primary { color: var(--ds-ink); font-weight: 500; max-width: 0; width: 46%; }
.ds-table__primary > span, .ds-table__primary > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-table__sub { display: block; margin-top: 0.125rem; color: var(--ds-ink-3); font-weight: 400; font-size: var(--ds-text-xs); }
.ds-table--inset :is(th, td):first-child { padding-inline-start: 0.75rem; }
.ds-table--inset :is(th, td):last-child { padding-inline-end: 0.75rem; }
.ds-table--compare th { color: var(--ds-ink); font-size: var(--ds-text-sm); font-weight: 600; }
.ds-table--compare td { padding-block: 0.875rem; vertical-align: top; font-size: var(--ds-text-md); }
@container (max-width: 40rem) {
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ds-table--stack, .ds-table--stack tbody { display: block; }
  .ds-table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem var(--ds-space-4); padding: 0.75rem 0; border-bottom: var(--ds-border); }
  .ds-table--stack td { display: flex; gap: var(--ds-space-2); align-items: baseline; padding: 0; border: 0; min-width: 0; }
  .ds-table--stack td[data-label]::before { content: attr(data-label); flex: none; color: var(--ds-ink-3); font-size: var(--ds-text-xs); }
  .ds-table--stack td.ds-num { text-align: start; }
  .ds-table--stack .ds-table__primary, .ds-table--stack td[data-full] { grid-column: 1 / -1; display: block; max-width: none; width: auto; }
  .ds-table--stack .ds-table__primary > span, .ds-table--stack .ds-table__primary > a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ds-table--stack td:empty { display: none; }
  .ds-table--stack td:not(.ds-table__primary) { flex-wrap: wrap; white-space: normal; }
  .ds-table--stack td:not(.ds-table__primary) .ds-table__sub { flex-basis: 100%; margin: 0; }
  .ds-table--compare.ds-table--stack tr { grid-template-columns: minmax(0, 1fr); }
  .ds-table--compare.ds-table--stack td[data-label]::before { flex: 0 0 9rem; }
  .ds-table--compare.ds-table--stack td { font-size: var(--ds-text-sm); }
}

/* List rows: lead, body, trail. For things you open, not compare. */
.ds-list { display: grid; }
.ds-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-3); min-height: 2.75rem; padding: 0.5rem 0; border-bottom: var(--ds-border); color: inherit; text-decoration: none; }
.ds-row:last-child { border-bottom: 0; }
.ds-row__body { min-width: 0; grid-column: 2; }
.ds-row__title { display: block; color: var(--ds-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-row__meta { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-3); color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.ds-row__trail { grid-column: 3; display: flex; align-items: center; gap: var(--ds-space-3); color: var(--ds-ink-3); font-size: var(--ds-text-sm); white-space: nowrap; }
/* Rows you can open: the hover plate bleeds past the text without moving the rules. */
a.ds-row, .ds-row--action { position: relative; isolation: isolate; cursor: pointer; }
a.ds-row::before, .ds-row--action::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--ds-space-3)); border-radius: var(--ds-radius-sm); background: var(--ds-hover); opacity: 0; transition: opacity var(--ds-dur-1); }
a.ds-row:hover::before, .ds-row--action:hover::before, .ds-row[aria-selected="true"]::before { opacity: 1; }
a.ds-row:focus-visible { outline-offset: 2px; border-radius: var(--ds-radius-xs); }
/* Rows with buttons: on a narrow list the actions drop under the text. */
.ds-list { container-type: inline-size; }
@container (max-width: 30rem) { .ds-row--wrap { grid-template-columns: auto minmax(0, 1fr); } .ds-row--wrap .ds-row__trail { grid-column: 2; } .ds-row--wrap .ds-row__title { white-space: normal; } }

/* Panel: a frame, only when content needs a boundary (a form, a code sample, a destructive zone). Never nest. */
.ds-panel { border: var(--ds-border-frame); border-radius: var(--ds-radius-md); background: var(--ds-sheet); min-width: 0; }
.ds-panel__head { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 2.75rem; padding: var(--ds-space-2) var(--ds-space-4); border-bottom: var(--ds-border); }
.ds-panel__body { padding: var(--ds-space-4); }
.ds-panel__foot { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-top: var(--ds-border); background: var(--ds-sunken); border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.ds-panel--danger { border-color: color-mix(in oklab, var(--ds-red) 45%, var(--ds-line-2)); }

.ds-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); padding-block: var(--ds-space-8) var(--ds-space-6); }
.ds-pagehead > :first-child { flex: 1 1 20rem; min-width: 0; }
.ds-pagehead__title { font: 650 var(--ds-text-h3)/1.15 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; }
.ds-pagehead__desc { margin-top: 0.375rem; color: var(--ds-ink-3); max-width: 60ch; }
.ds-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-sechead { display: flex; align-items: baseline; gap: var(--ds-space-3); padding-bottom: var(--ds-space-2); border-bottom: 1px solid var(--ds-line-2); }
.ds-sechead__title { font: 600 var(--ds-text-md)/1.4 var(--ds-font-text); color: var(--ds-ink); }
.ds-sechead__meta { color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.ds-sechead__action { margin-inline-start: auto; font-size: var(--ds-text-sm); }

/* Key and value pairs */
.ds-kv { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 0 var(--ds-space-6); font-size: var(--ds-text-md); }
.ds-kv > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding-block: 0.5rem; border-bottom: var(--ds-border); }
.ds-kv > div:last-child { border-bottom: 0; }
.ds-kv dt { color: var(--ds-ink-3); }
.ds-kv dd { color: var(--ds-ink); min-width: 0; overflow-wrap: anywhere; }
.ds-kv--plain > div { border: 0; padding-block: 0.25rem; }

/* Figures: numbers set in a ruled line, not in tiles. Label above, value in the text face. */
.ds-figures { display: flex; flex-wrap: wrap; gap: var(--ds-space-4) 0; border-block: var(--ds-border); padding-block: var(--ds-space-3); }
.ds-figures > div { flex: 1 1 8rem; padding-inline: var(--ds-space-5); border-inline-start: var(--ds-border); }
.ds-figures > div:first-child { padding-inline-start: 0; border: 0; }
.ds-figures dt { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.ds-figures dd { margin-top: 0.125rem; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); white-space: nowrap; }
.ds-figures dd small { font-weight: 400; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }

/* Meter: usage against a limit. --value is 0 to 100. Steps variant counts whole things. */
.ds-meter { display: grid; gap: 0.375rem; }
.ds-meter__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.ds-meter__label b { color: var(--ds-ink); font-weight: 600; }
.ds-meter__track { height: 0.375rem; border-radius: 1px; background: var(--ds-line); overflow: hidden; }
.ds-meter__fill { height: 100%; width: 100%; background: var(--ds-ink); transform-origin: left; transform: scaleX(calc(var(--value, 0) / 100)); transition: transform var(--ds-dur-3) var(--ds-ease-out); }
.ds-meter--warning .ds-meter__fill { background: var(--ds-amber); }
.ds-meter--danger .ds-meter__fill { background: var(--ds-red); }
.ds-meter__steps { display: flex; gap: 3px; }
.ds-meter__steps i { flex: 1; height: 0.375rem; border-radius: 1px; background: var(--ds-line); }
.ds-meter__steps i.is-on { background: var(--ds-green); }

.ds-kbd { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.25rem; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line-2), inset 0 -1px 0 1px var(--ds-line-2); color: var(--ds-ink-2); font: 500 var(--ds-text-2xs)/1 var(--ds-font-text); white-space: nowrap; }
.ds-avatar { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--ds-radius-sm); background: var(--ds-ink); color: var(--ds-sheet); font: 600 var(--ds-text-xs)/1 var(--ds-font-text); text-transform: uppercase; overflow: hidden; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--sm { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; border-radius: var(--ds-radius-xs); }
.ds-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--ds-text-md); }

/* 10. FEEDBACK --------------------------------------------------------------- */
.ds-callout { --_ink: var(--ds-ink-2); --_wash: var(--ds-sunken); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ds-space-1) var(--ds-space-3); align-items: start; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-sm); background: var(--_wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_ink) 22%, transparent); font-size: var(--ds-text-md); color: var(--ds-ink-2); }
.ds-callout > .ds-icon { margin-top: 0.1875rem; color: var(--_ink); }
.ds-callout__title { display: block; color: var(--ds-ink); font-weight: 600; }
.ds-callout__actions { display: flex; gap: var(--ds-space-2); align-self: center; }
.ds-callout--info { --_ink: var(--ds-blue-ink); --_wash: var(--ds-blue-wash); }
.ds-callout--success { --_ink: var(--ds-green-ink); --_wash: var(--ds-green-wash); }
.ds-callout--warning { --_ink: var(--ds-amber-ink); --_wash: var(--ds-amber-wash); }
.ds-callout--danger { --_ink: var(--ds-red-ink); --_wash: var(--ds-red-wash); }
/* Banner: a callout that spans the page, under the tabs. */
.ds-callout--banner { border-radius: 0; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--_ink) 22%, transparent); padding-inline: var(--ds-gutter); }
@container (max-width: 30rem) { .ds-callout { grid-template-columns: auto minmax(0, 1fr); } .ds-callout__actions { grid-column: 2; } }

.ds-empty { display: grid; gap: var(--ds-space-2); justify-items: start; max-width: 34rem; padding-block: var(--ds-space-10); }
.ds-empty__title { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.ds-empty__text { color: var(--ds-ink-3); max-width: 46ch; }
.ds-empty__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-3); }
.ds-empty--error .ds-empty__title { color: var(--ds-red-ink); }

.ds-skel { display: block; height: 0.75rem; width: var(--w, 100%); border-radius: var(--ds-radius-xs); background: var(--ds-line); animation: ds-pulse 1.4s ease-in-out infinite; }
.ds-skel--title { height: 1.25rem; }
.ds-skel--block { height: var(--h, 6rem); border-radius: var(--ds-radius-sm); }
@keyframes ds-pulse { 50% { opacity: 0.45; } }

/* Toasts: inverse surface, bottom right, bottom centre on phones. */
.ds-toasts { position: fixed; z-index: var(--ds-z-toast); right: var(--ds-space-4); bottom: var(--ds-space-4); display: grid; gap: var(--ds-space-2); justify-items: end; pointer-events: none; }
.ds-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--ds-space-3); max-width: min(26rem, calc(100vw - 2rem)); min-height: 2.75rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-radius: var(--ds-radius-sm); background: var(--ds-primary); color: var(--ds-on-primary); font-size: var(--ds-text-md); box-shadow: var(--ds-shadow-pop); animation: ds-toast-in var(--ds-dur-3) var(--ds-ease-out); }
.ds-toast::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 1px; background: currentColor; }
.ds-toast--success::before { border-radius: 50%; background: var(--ds-on-primary-green); }
.ds-toast--error::before { transform: rotate(45deg); background: var(--ds-on-primary-red); }
.ds-toast__text { flex: 1; min-width: 0; }
.ds-toast__text small { display: block; color: var(--ds-on-primary-2); font-size: var(--ds-text-sm); }
.ds-toast__action, .ds-toast__close { flex: none; height: 1.75rem; padding-inline: 0.5rem; border: 0; border-radius: var(--ds-radius-xs); background: color-mix(in oklab, var(--ds-on-primary) 14%, transparent); color: inherit; font: 500 var(--ds-text-sm)/1 var(--ds-font-text); cursor: pointer; }
.ds-toast__close { background: none; display: grid; place-items: center; width: 1.75rem; padding: 0; color: var(--ds-on-primary-2); }
.ds-toast__action:hover, .ds-toast__close:hover { background: color-mix(in oklab, var(--ds-on-primary) 24%, transparent); color: var(--ds-on-primary); }
.ds-toast :focus-visible { outline-color: var(--ds-on-primary); }
.ds-toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--ds-dur-2) var(--ds-ease-in), transform var(--ds-dur-2) var(--ds-ease-in); }
.ds-toasts--static { position: static; justify-items: start; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 640px) { .ds-toasts { left: var(--ds-space-4); justify-items: stretch; } .ds-has-dock .ds-toasts { bottom: calc(4.25rem + env(safe-area-inset-bottom)); } }

/* Tooltip: put data-tip on a focusable element. Label text only. */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: var(--ds-z-tip); bottom: calc(100% + 0.375rem); left: 50%; width: max-content; max-width: 16rem; padding: 0.25rem 0.5rem; border-radius: var(--ds-radius-xs); background: var(--ds-primary); color: var(--ds-on-primary); font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--ds-dur-1), transform var(--ds-dur-1) var(--ds-ease-out); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.35s; }
[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 0.375rem); }
[data-tip][data-tip-pos="end"]::after { left: auto; right: 0; transform: translate(0, 3px); }
[data-tip][data-tip-pos="end"]:hover::after, [data-tip][data-tip-pos="end"]:focus-visible::after { transform: none; }

/* 11. OVERLAYS (native <dialog>) --------------------------------------------- */
.ds-dialog, .ds-drawer { padding: 0; border: 0; background: var(--ds-raised); color: var(--ds-ink); box-shadow: var(--ds-shadow-modal); }
.ds-dialog::backdrop, .ds-drawer::backdrop { background: var(--ds-scrim); animation: ds-fade var(--ds-dur-2) ease-out; }
.ds-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: min(40rem, calc(100dvh - 2rem)); margin: auto; border-radius: var(--ds-radius-md); }
.ds-dialog[open] { display: flex; flex-direction: column; animation: ds-dialog-in var(--ds-dur-3) var(--ds-ease-out); }
.ds-dialog--wide { width: min(44rem, calc(100vw - 2rem)); }
.ds-dialog__head { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-5) var(--ds-space-5) 0; }
.ds-dialog__title { flex: 1; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); }
.ds-dialog__body { padding: var(--ds-space-3) var(--ds-space-5) var(--ds-space-5); overflow: auto; color: var(--ds-ink-2); scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; }
.ds-dialog__foot { display: flex; justify-content: flex-end; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-5); border-top: var(--ds-border); }
.ds-drawer { width: min(32rem, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; }
.ds-drawer[open] { display: flex; flex-direction: column; animation: ds-drawer-in var(--ds-dur-3) var(--ds-ease-out); }
.ds-drawer__head { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 3.25rem; padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-5); border-bottom: var(--ds-border); }
.ds-drawer__title { flex: 1; font: 600 var(--ds-text-base)/1.3 var(--ds-font-text); min-width: 0; }
.ds-drawer__body { flex: 1; padding: var(--ds-space-5); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; overscroll-behavior: contain; }
.ds-drawer__foot { display: flex; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-5); border-top: var(--ds-border); }
/* Command palette: a dialog pinned near the top with an input and a result list. */
.ds-cmdk { width: min(36rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--ds-radius-md); background: var(--ds-raised); color: var(--ds-ink); box-shadow: var(--ds-shadow-modal); }
.ds-cmdk[open] { display: flex; flex-direction: column; max-height: min(28rem, 70dvh); animation: ds-dialog-in var(--ds-dur-2) var(--ds-ease-out); }
.ds-cmdk::backdrop { background: var(--ds-scrim); }
.ds-cmdk__input { display: flex; align-items: center; gap: var(--ds-space-3); padding: 0 var(--ds-space-4); border-bottom: var(--ds-border); color: var(--ds-ink-3); }
.ds-cmdk__input input { flex: 1; height: 3rem; border: 0; background: none; outline: none; font-size: var(--ds-text-base); color: var(--ds-ink); }
.ds-cmdk__input input::placeholder { color: var(--ds-ink-3); }
.ds-cmdk__list { padding: 0.25rem; overflow: auto; scrollbar-width: thin; }
.ds-cmdk__foot { display: flex; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-4); border-top: var(--ds-border); font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes ds-drawer-in { from { transform: translateX(24px); opacity: 0; } }

/* 12. CODE ------------------------------------------------------------------- */
/* A tabbed sample is the tab idea again: the band is the desk, the selected language joins the code. */
.ds-code { border: var(--ds-border-frame); border-radius: var(--ds-radius-md); background: var(--ds-sunken); min-width: 0; overflow: hidden; }
.ds-code__bar { display: flex; align-items: flex-end; gap: var(--ds-space-2); padding: 0.375rem 0.375rem 0 0.5rem; background: var(--ds-desk); box-shadow: inset 0 -1px 0 var(--ds-line-2); }
.ds-code__bar .ds-tabs { --_surface: var(--ds-sunken); flex: 1; box-shadow: none; }
.ds-code__title { flex: 1; align-self: center; padding: 0 0.25rem 0.375rem; font: 500 var(--ds-text-sm)/1.75rem var(--ds-font-text); color: var(--ds-ink-3); min-width: 0; }
.ds-code__copy { align-self: center; margin-bottom: 0.375rem; }
.ds-code pre { margin: 0; padding: var(--ds-space-4); overflow-x: auto; font: 400 var(--ds-text-xs)/1.7 var(--ds-font-code); color: var(--ds-ink-2); tab-size: 2; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; }
.ds-code pre code { font: inherit; }
.ds-code--plain { background: var(--ds-sunken); }
.ds-code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-tok-k { color: var(--ds-rust-ink); }
.ds-tok-s { color: var(--ds-green-ink); }
.ds-tok-f { color: var(--ds-blue-ink); }
.ds-tok-c { color: var(--ds-ink-3); }
.ds-tok-n { color: var(--ds-ink); }
[data-ds-copy][data-copied] { color: var(--ds-green-ink); }

/* 13. MARKETING PATTERNS ----------------------------------------------------- */
/* Site chrome: brand, page tabs, actions on the desk. The current page is a tab joined to the sheet. */
.ds-chrome { position: relative; z-index: var(--ds-z-nav); background: var(--ds-desk); }
.ds-chrome__row { display: flex; align-items: center; gap: var(--ds-space-6); min-height: 3.5rem; }
.ds-chrome__row .ds-tabs { align-self: flex-end; flex: 1; box-shadow: none; }
.ds-chrome { box-shadow: inset 0 -1px 0 var(--ds-line-2); }
.ds-chrome__actions { display: flex; align-items: center; gap: var(--ds-space-2); margin-inline-start: auto; }
.ds-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ds-ink); text-decoration: none; font: 700 1.0625rem/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.035em; }
.ds-brand__mark { width: 1.5rem; height: 1.5rem; flex: none; }
@media (max-width: 760px) {
  .ds-chrome__row { flex-wrap: wrap; gap: 0 var(--ds-space-3); padding-top: var(--ds-space-2); }
  .ds-chrome__row .ds-tabs { order: 3; flex: 1 0 100%; margin-inline: calc(-1 * var(--ds-gutter)); padding-inline: var(--ds-gutter); margin-top: var(--ds-space-2); }
  .ds-chrome__row .ds-brand { min-height: 2.75rem; }
}

.ds-section { padding-block: var(--ds-section); }
.ds-section + .ds-section { border-top: var(--ds-border); }
.ds-section__head { display: grid; gap: var(--ds-space-4); max-width: 60rem; margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem); }

.ds-hero { padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.ds-hero__top { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--ds-space-12); }
.ds-hero__demo { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.ds-hero__fine { color: var(--ds-ink-3); font-size: var(--ds-text-md); }
@media (min-width: 1000px) { .ds-hero__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* Window: a browser frame for product examples. Tab strip, address field, page. */
.ds-window { border: var(--ds-border-frame); border-radius: var(--ds-radius-md); background: var(--ds-sheet); overflow: hidden; min-width: 0; }
.ds-window__bar { padding: 0.375rem 0.5rem 0; background: var(--ds-desk); }
.ds-window__url { display: flex; align-items: center; gap: var(--ds-space-2); min-height: 2.25rem; padding: 0.375rem 0.75rem; border-bottom: var(--ds-border); font: 400 var(--ds-text-xs)/1 var(--ds-font-code); color: var(--ds-ink-3); }
.ds-window__url span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink-2); }
.ds-window__body { display: grid; min-width: 0; }
.ds-window__body > * { min-width: 0; }
.ds-window__body .ds-code { border: 0; border-radius: 0; }
.ds-window__pane { display: flex; flex-direction: column; min-width: 0; }
.ds-window__pane > .ds-code { flex: 1; }
.ds-window__label { padding: 0.625rem var(--ds-space-4) 0; font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.ds-window__body > * + * { border-top: var(--ds-border); }
@container (min-width: 44rem) { .ds-window__body--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ds-window__body--split > :first-child { grid-column: 1 / -1; } .ds-window__body--split > :nth-child(3) { border-inline-start: var(--ds-border); } }
@container (min-width: 64rem) { .ds-window__body--split { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); } .ds-window__body--split > :first-child { grid-column: auto; } .ds-window__body--split > * + * { border-top: 0; border-inline-start: var(--ds-border); } }

/* Trace: the steps of a run, in order. */
.ds-trace { display: grid; gap: 0; padding: var(--ds-space-4); font-size: var(--ds-text-sm); }
.ds-trace li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: var(--ds-space-2); align-items: baseline; padding-block: 0.375rem; color: var(--ds-ink-2); }
.ds-trace li::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 1px; background: var(--ds-ink); align-self: center; justify-self: center; }
.ds-trace li.is-live::before { border-radius: 50%; width: 0.5rem; height: 0.5rem; background: var(--ds-green); animation: ds-live 1.8s var(--ds-ease-quart) infinite; }
.ds-trace li.is-todo { color: var(--ds-ink-3); }
.ds-trace li.is-todo::before { background: none; border-radius: 50%; width: 0.5rem; height: 0.5rem; box-shadow: inset 0 0 0 1.5px var(--ds-ink-3); }
.ds-trace li > span:last-child { color: var(--ds-ink-3); font-size: var(--ds-text-xs); }
.ds-trace--reveal li { animation: ds-rise var(--ds-dur-3) var(--ds-ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }

/* Spec rows: one capability per ruled row. Name and promise, the facts, the proof. */
.ds-spec { border-top: 1px solid var(--ds-line-2); }
.ds-spec__row { display: grid; gap: var(--ds-space-6) var(--ds-space-10); padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-bottom: var(--ds-border); }
.ds-spec__name { display: grid; gap: var(--ds-space-2); align-content: start; }
.ds-spec__name p { color: var(--ds-ink-2); }
.ds-spec__name .ds-link { margin-top: var(--ds-space-3); justify-self: start; }
.ds-spec__facts { display: grid; gap: var(--ds-space-4); align-content: start; font-size: var(--ds-text-base); }
.ds-spec__facts dt { font-weight: 600; color: var(--ds-ink); }
.ds-spec__facts dd { color: var(--ds-ink-3); line-height: 1.5; }
@container (min-width: 46rem) { .ds-spec__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ds-spec__proof { grid-column: 1 / -1; } }
.ds-spec__proof { align-self: start; }
@container (min-width: 68rem) { .ds-spec__row { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); } .ds-spec__proof { grid-column: auto; } }

.ds-footer { padding-block: var(--ds-space-16) var(--ds-space-10); background: var(--ds-desk); border-top: 1px solid var(--ds-line-2); font-size: var(--ds-text-md); }
.ds-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ds-space-8); }
.ds-footer__grid > :first-child { grid-column: span 2; max-width: 22rem; color: var(--ds-ink-3); }
.ds-footer h2 { margin-bottom: var(--ds-space-3); font: 600 var(--ds-text-sm)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.ds-footer ul { display: grid; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.ds-footer li a { color: var(--ds-ink-2); text-decoration: none; }
.ds-footer li a:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3); margin-top: var(--ds-space-12); padding-top: var(--ds-space-5); border-top: var(--ds-border); color: var(--ds-ink-3); font-size: var(--ds-text-sm); }

/* 14. APP SHELL -------------------------------------------------------------- */
/* Desk on top (top bar, then tabs), sheet below. No sidebar: sections are tabs, live runs are tabs too. */
.ds-app { display: flex; flex-direction: column; min-height: 100dvh; background: var(--ds-desk); }
.ds-topbar { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 3.25rem; padding-inline: var(--ds-gutter); }
.ds-topbar > * { flex: none; }
.ds-topbar > .ds-menu { flex: 0 1 auto; min-width: 0; }
.ds-topbar > .ds-menu > summary { max-width: 100%; }
.ds-topbar .ds-topbar__omni { flex: 0 1 30rem; margin-inline: auto; }
/* Omnibox trigger: looks like an address field, opens the command palette. */
.ds-omni { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-h-md); padding-inline: 0.625rem 0.375rem; border: var(--ds-border-frame); border-radius: var(--ds-radius-sm); background: var(--ds-sheet); color: var(--ds-ink-3); font: 400 var(--ds-text-md)/1 var(--ds-font-text); text-align: start; cursor: pointer; transition: border-color var(--ds-dur-1); }
.ds-omni:hover { border-color: var(--ds-line-control); color: var(--ds-ink-2); }
.ds-omni span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-app__tabs { padding-inline: var(--ds-gutter); }
.ds-app__main { flex: 1; background: var(--ds-sheet); min-width: 0; }
.ds-app__page { padding-bottom: var(--ds-space-16); }
/* Live tab: a running browser or task pinned in the strip. */
.ds-tab--live { flex: 0 1 auto; min-width: 4.5rem; max-width: 15rem; color: var(--ds-ink-2); }
.ds-tab--live > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A live tab with a close button: div.ds-tab.ds-tab--live > i.ds-livedot + a.ds-tab__link + time + button.ds-tab__close */
.ds-tab__link { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.ds-tab__link::after { content: ""; position: absolute; inset: 0; }
.ds-tab:has(.ds-tab__link:focus-visible) { outline: 2px solid var(--ds-focus); outline-offset: -3px; }
.ds-tab__link:focus-visible { outline: none; }
.ds-tab--live time { flex: none; color: var(--ds-ink-3); font-weight: 400; font-size: var(--ds-text-xs); }
.ds-livedot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ds-green); animation: ds-live 1.8s var(--ds-ease-quart) infinite; }

/* 15. MOTION POLICY ---------------------------------------------------------- */
/* Only transform and opacity move. With reduced motion nothing travels: states switch at once,
   loading keeps a slow opacity pulse so it still reads as busy. */
@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-1: 0ms; --ds-dur-2: 0ms; --ds-dur-3: 0ms; }
  .ds *, .ds *::before, .ds *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .ds .ds-btn[aria-busy="true"]::after, .ds .ds-spinner, .ds .ds-skel { animation: ds-pulse 1.6s ease-in-out infinite !important; }
  .ds-btn:active, .ds-chip:active { transform: none; }
}