/* Generated by scripts/build-ds.mjs from css/ds/*.css. Edit those files, then run npm run build:ds. */
/* ---- tokens ---- */
/* Outcomes design system: tokens.
   One palette, two themes. The theme lives on html[data-work-theme] (carbon by default, paper for light), set before
   paint by /js/work-theme.js. Every legacy variable (--w-*, --w-tone-*, --os-*) is mapped onto these tokens at the end
   of this file, so pages that have not moved to ds components yet still render in the new design. */

@font-face { font-family: "Outcomes Archivo"; src: url("/assets/outcomes/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Outcomes Mono"; src: url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outcomes Mono"; src: url("/assets/fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* type */
  --ds-font: "Outcomes Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-mono: "Outcomes Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ds-display-stretch: 112%;
  --ds-impact-stretch: 62%;
  --ds-text-xs: 11px; --ds-text-sm: 12.5px; --ds-text-md: 14px; --ds-text-lg: 15.5px; --ds-text-xl: 20px;
  --ds-display-sm: 26px; --ds-display-md: 34px; --ds-display-lg: 48px;

  /* space and shape */
  --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px;
  --ds-r-sm: 6px; --ds-r: 8px; --ds-r-lg: 12px; --ds-r-pill: 999px;
  --ds-control: 36px; --ds-control-lg: 40px;
  --ds-top: 56px; --ds-rail: 248px;
  --ds-ease: cubic-bezier(.22, 1, .36, 1);

  /* carbon (dark) */
  --ds-ground: #080808;
  --ds-surface: #0e0e0e;
  --ds-card: #121212;
  --ds-raised: #191919;
  --ds-hover: #1f1f1f;
  --ds-selected: #262626;
  --ds-line: #222222;
  --ds-line-strong: #353535;
  --ds-text: #fafafa;
  --ds-text-2: #c0c0c0;
  --ds-text-3: #949494;
  --ds-ink: #171719;
  --ds-on-ink: #fafafa;
  --ds-primary-bg: #fafafa;
  --ds-primary-fg: #121214;
  --ds-signal: #fc762f;
  --ds-signal-text: #fc8a4a;
  --ds-signal-soft: rgba(252, 118, 47, 0.14);
  --ds-ok: #e6e6e6;
  --ds-danger: #ff8f7a;
  --ds-danger-soft: rgba(255, 143, 122, 0.12);
  --ds-frost: rgba(18, 18, 18, 0.62);
  --ds-scrim: rgba(8, 8, 8, 0.66);
  --ds-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --ds-smoke-tint: 0.92, 0.92, 0.92;
  --ds-smoke-strength: 1;
  --ds-logo-chip: #f2f2f0;
  color-scheme: dark;
}

:root[data-work-theme=paper] {
  --ds-ground: #f6f5f1;
  --ds-surface: #fbfaf7;
  --ds-card: #ffffff;
  --ds-raised: #f0efea;
  --ds-hover: #ecebe6;
  --ds-selected: #e4e3dd;
  --ds-line: #e1dfd8;
  --ds-line-strong: #cbc8bf;
  --ds-text: #171719;
  --ds-text-2: #45454a;
  --ds-text-3: #6b6b6f;
  --ds-ink: #171719;
  --ds-on-ink: #fafafa;
  --ds-primary-bg: #171719;
  --ds-primary-fg: #fafafa;
  --ds-signal: #fc762f;
  --ds-signal-text: #b8480f;
  --ds-signal-soft: rgba(252, 118, 47, 0.13);
  --ds-ok: #2b2b2e;
  --ds-danger: #b4382c;
  --ds-danger-soft: rgba(180, 56, 44, 0.1);
  --ds-frost: rgba(255, 255, 255, 0.72);
  --ds-scrim: rgba(23, 23, 25, 0.32);
  --ds-shadow: 0 24px 60px -30px rgba(23, 23, 25, 0.35);
  --ds-smoke-tint: 0.09, 0.09, 0.1;
  --ds-smoke-strength: 0.55;
  --ds-logo-chip: #ffffff;
  color-scheme: light;
}

/* ---- legacy mapping: existing modules keep their variable names and get the new palette ---- */
:root, :root[data-work-theme=paper] {
  --w-bg: var(--ds-ground);
  --w-surface: var(--ds-card);
  --w-raised: var(--ds-raised);
  --w-hover: var(--ds-hover);
  --w-text: var(--ds-text);
  --w-muted: var(--ds-text-3);
  --w-line: var(--ds-line);
  --w-strong: var(--ds-line-strong);
  --w-accent: var(--ds-primary-bg);
  --w-inverse: var(--ds-primary-fg);
  --w-warning: var(--ds-signal-text);
  --w-danger: var(--ds-danger);
  --w-positive: var(--ds-ok);
  --w-radius: var(--ds-r-lg);
  --w-font: var(--ds-font);
  --w-display: var(--ds-font);
  --w-mono: var(--ds-mono);
  --font: var(--ds-font);
  --sans: var(--ds-font);
  --display: var(--ds-font);
  --mono: var(--ds-mono);
  --os-disp: var(--ds-font);
  --os-body: var(--ds-font);
  --os-mono: var(--ds-mono);
  --outcomes-header: var(--ds-top);
  --outcomes-rail: var(--ds-rail);
  --outcomes-rail-wide: var(--ds-rail);
}
:root {
  --w-tone-0: #fafafa; --w-tone-0-rgb: 250 250 250;
  --w-tone-10: #e8e8e8; --w-tone-10-rgb: 232 232 232;
  --w-tone-20: #cfcfcf; --w-tone-20-rgb: 207 207 207;
  --w-tone-35: #a8a8a8; --w-tone-35-rgb: 168 168 168;
  --w-tone-50: #949494; --w-tone-50-rgb: 148 148 148;
  --w-tone-65: #5e5e5e; --w-tone-65-rgb: 94 94 94;
  --w-tone-80: #353535; --w-tone-80-rgb: 53 53 53;
  --w-tone-90: #262626; --w-tone-90-rgb: 38 38 38;
  --w-tone-95: #1f1f1f; --w-tone-95-rgb: 31 31 31;
  --w-tone-98: #191919; --w-tone-98-rgb: 25 25 25;
  --w-tone-100: #121212; --w-tone-100-rgb: 18 18 18;
}
:root[data-work-theme=paper] {
  --w-tone-0: #171719; --w-tone-0-rgb: 23 23 25;
  --w-tone-10: #2b2b2e; --w-tone-10-rgb: 43 43 46;
  --w-tone-20: #3e3e42; --w-tone-20-rgb: 62 62 66;
  --w-tone-35: #56565b; --w-tone-35-rgb: 86 86 91;
  --w-tone-50: #6b6b6f; --w-tone-50-rgb: 107 107 111;
  --w-tone-65: #a3a19a; --w-tone-65-rgb: 163 161 154;
  --w-tone-80: #cbc8bf; --w-tone-80-rgb: 203 200 191;
  --w-tone-90: #e1dfd8; --w-tone-90-rgb: 225 223 216;
  --w-tone-95: #ecebe6; --w-tone-95-rgb: 236 235 230;
  --w-tone-98: #f0efea; --w-tone-98-rgb: 240 239 234;
  --w-tone-100: #ffffff; --w-tone-100-rgb: 255 255 255;
}

/* ---- components ---- */
/* Outcomes design system: components. Every class is ds-*; markup builders live in /js/ds/components.js and the living
   reference is /docs/design-system/. Components read only tokens, so they work in both themes. */

/* type */
.ds-eyebrow { font: 400 var(--ds-text-xs)/16px var(--ds-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-3); }
.ds-h1 { margin: 0; font: 300 var(--ds-display-md)/1.12 var(--ds-font); font-stretch: var(--ds-display-stretch); letter-spacing: -0.045em; color: var(--ds-text); text-wrap: balance; }
.ds-h1.is-lg { font-size: var(--ds-display-lg); }
.ds-h2 { margin: 0; font: 400 var(--ds-text-xl)/1.3 var(--ds-font); letter-spacing: -0.02em; color: var(--ds-text); }
.ds-h3 { margin: 0; font: 500 var(--ds-text-lg)/1.35 var(--ds-font); color: var(--ds-text); }
.ds-impact { font-stretch: var(--ds-impact-stretch); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.ds-lead { margin: 0; max-width: 68ch; font: 400 16px/1.55 var(--ds-font); color: var(--ds-text-2); }
.ds-body { margin: 0; font: 400 var(--ds-text-md)/1.55 var(--ds-font); color: var(--ds-text-2); }
.ds-muted { color: var(--ds-text-3); }
.ds-mono { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ds-signal { color: var(--ds-signal-text); }

/* page */
.ds-page { padding: 32px 40px 56px; display: flex; flex-direction: column; gap: 24px; max-width: 1240px; box-sizing: border-box; }
.ds-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ds-page-head > div:first-child { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 760px; }
.ds-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* buttons */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ds-control-lg); padding: 0 18px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-text); font: 400 var(--ds-text-md) var(--ds-font); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.ds-btn:hover { background: var(--ds-hover); }
.ds-btn--primary { background: var(--ds-primary-bg); color: var(--ds-primary-fg); border-color: var(--ds-primary-bg); }
.ds-btn--primary:hover { background: var(--ds-primary-bg); opacity: 0.86; }
.ds-btn--ghost { border-color: transparent; color: var(--ds-text-2); }
.ds-btn--danger { color: var(--ds-danger); border-color: var(--ds-danger-soft); }
.ds-btn--sm { height: 30px; padding: 0 12px; font-size: var(--ds-text-sm); }
.ds-btn--icon { width: var(--ds-control); height: var(--ds-control); padding: 0; border-radius: 50%; }
.ds-btn svg { width: 15px; height: 15px; }
.ds-btn:disabled { opacity: 0.45; cursor: default; }
.ds-link { color: var(--ds-text-2); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* form */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field > label, .ds-label { font: 400 var(--ds-text-xs) var(--ds-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-3); }
.ds-input, .ds-select, .ds-textarea { box-sizing: border-box; width: 100%; min-height: var(--ds-control-lg); padding: 9px 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r); background: var(--ds-card); color: var(--ds-text); font: var(--ds-text-md)/1.4 var(--ds-font); }
.ds-textarea { min-height: 90px; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 0; border-color: var(--ds-text-3); }
.ds-hint { font-size: var(--ds-text-sm); color: var(--ds-text-3); }

/* tags, status, pills */
.ds-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); color: var(--ds-text-2); font-size: var(--ds-text-sm); white-space: nowrap; }
.ds-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ds-text-sm); color: var(--ds-text-2); white-space: nowrap; }
.ds-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-text-3); flex: none; }
.ds-status[data-tone=ok]::before { background: var(--ds-ok); }
.ds-status[data-tone=done]::before { background: none; border: 1px solid var(--ds-text); }
.ds-status[data-tone=wait] { color: var(--ds-signal-text); }
.ds-status[data-tone=wait]::before { background: var(--ds-signal); }
.ds-status[data-tone=risk] { color: var(--ds-signal-text); }
.ds-status[data-tone=risk]::before { background: var(--ds-signal); border-radius: 1px; }
.ds-status[data-tone=idle]::before { background: none; border: 1px dashed var(--ds-text-3); }
.ds-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: none; color: var(--ds-text-2); font: 13px var(--ds-font); cursor: pointer; }
.ds-pill[aria-pressed=true], .ds-pill.is-on { background: var(--ds-selected); color: var(--ds-text); }
.ds-pill .ds-count { font: 11px var(--ds-mono); color: var(--ds-text-3); }
.ds-count.is-need { color: var(--ds-signal-text); }

/* segmented, switch, sub tabs */
.ds-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); }
.ds-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--ds-r-pill); background: none; color: var(--ds-text-3); font: 12.5px var(--ds-font); cursor: pointer; white-space: nowrap; }
.ds-seg button[aria-pressed=true] { background: var(--ds-primary-bg); color: var(--ds-primary-fg); }
.ds-switch { position: relative; width: 36px; height: 20px; flex: none; border: 0; border-radius: 20px; background: var(--ds-line-strong); cursor: pointer; padding: 0; }
.ds-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ds-text-3); transition: transform 0.2s var(--ds-ease); }
.ds-switch[aria-checked=true] { background: var(--ds-primary-bg); }
.ds-switch[aria-checked=true]::after { transform: translateX(16px); background: var(--ds-primary-fg); }
.ds-subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ds-line); overflow-x: auto; scrollbar-width: none; }
.ds-subtabs > :is(a, button) { padding: 0 0 10px; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--ds-text-3); font: 14px var(--ds-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-subtabs > [aria-selected=true], .ds-subtabs > [aria-current=page] { color: var(--ds-text); border-bottom-color: var(--ds-text); }

/* surfaces */
.ds-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-card); }
.ds-card.is-flush { padding: 0; gap: 0; overflow: hidden; }
.ds-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-card.is-flush > .ds-card-head { padding: 16px 18px 6px; }
.ds-frost { background: var(--ds-frost); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-lg); }
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ds-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-card); min-width: 0; }
.ds-kpi b { font: 300 30px/1.1 var(--ds-font); font-stretch: var(--ds-display-stretch); letter-spacing: -0.04em; color: var(--ds-text); }
.ds-kpi span:last-child { font-size: var(--ds-text-sm); color: var(--ds-text-2); }

/* tables and lists */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-table th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-text-3); font: 400 var(--ds-text-xs) var(--ds-mono); letter-spacing: 0.04em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.ds-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-text); vertical-align: top; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-hover); }
.ds-table .is-num { text-align: right; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; }
.ds-card.is-flush .ds-table-wrap { padding: 0 18px 8px; }
.ds-list { display: flex; flex-direction: column; }
.ds-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ds-line); font-size: 14px; color: var(--ds-text); text-decoration: none; }
.ds-list-row:first-child { border-top: 0; }
.ds-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.ds-kv > :nth-child(odd) { color: var(--ds-text-3); }

/* people, logos, meters, smoke */
.ds-avatar { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ds-raised); border: 1px solid var(--ds-line-strong); color: var(--ds-text-2); font: 500 10.5px var(--ds-font); }
.ds-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-avatar.is-sm { width: 22px; height: 22px; font-size: 9px; }
.ds-avatar.is-lg { width: 96px; height: 96px; font-size: 28px; }
.ds-avatars { display: inline-flex; }
.ds-avatars .ds-avatar { margin-left: -7px; border-color: var(--ds-ground); }
.ds-avatars .ds-avatar:first-child { margin-left: 0; }
.ds-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.ds-logo { display: inline-grid; place-items: center; height: 34px; min-width: 34px; padding: 0 9px; box-sizing: border-box; border-radius: var(--ds-r); background: var(--ds-logo-chip); border: 1px solid var(--ds-line); flex: none; }
.ds-logo img { max-height: 18px; max-width: 92px; display: block; }
.ds-logo.is-word { background: var(--ds-raised); color: var(--ds-text); font: 600 12.5px var(--ds-font); }
.ds-meter { position: relative; height: 6px; border-radius: 6px; background: var(--ds-raised); overflow: hidden; }
.ds-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--ds-text); }
.ds-meter > i.is-need { background: var(--ds-signal); }
.ds-smokebar { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--ds-raised); overflow: hidden; }
.ds-smokebar > span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--ds-text) 12%, transparent); }
.ds-smokebar canvas, .ds-smoke-surface > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ds-smoke-surface { position: relative; overflow: hidden; }
.ds-smoke-surface > :not(canvas) { position: relative; }

/* feedback */
.ds-empty { display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-lg); color: var(--ds-text-2); font-size: 14.5px; }
.ds-empty b { font-weight: 500; color: var(--ds-text); }
.ds-error { padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-danger-soft); color: var(--ds-danger); font-size: 13.5px; }
.ds-toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 18px; border-radius: var(--ds-r-pill); background: var(--ds-primary-bg); color: var(--ds-primary-fg); font-size: 13.5px; box-shadow: var(--ds-shadow); }

/* dialogs and sheets */
dialog.ds-dialog, dialog.ds-sheet { border: 1px solid var(--ds-line-strong); background: var(--ds-card); color: var(--ds-text); padding: 24px; box-shadow: var(--ds-shadow); }
dialog.ds-dialog { width: min(560px, calc(100vw - 32px)); border-radius: var(--ds-r-lg); }
dialog.ds-sheet { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(560px, 100vw); border-radius: 0; border-width: 0 0 0 1px; }
dialog.ds-dialog::backdrop, dialog.ds-sheet::backdrop { background: var(--ds-scrim); }

/* boards and timelines */
.ds-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.ds-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: color-mix(in srgb, var(--ds-card) 55%, transparent); }
.ds-col-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 6px; font: 500 13.5px var(--ds-font); }
.ds-kcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-card); font-size: 13.5px; color: var(--ds-text); text-decoration: none; }
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 18px; border-left: 1px solid var(--ds-line-strong); font-size: 14px; }
.ds-timeline li::before { content: ""; position: absolute; left: -4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-ground); border: 1px solid var(--ds-text-3); }
.ds-timeline li.is-done::before { background: var(--ds-text); border-color: var(--ds-text); }
.ds-timeline li.is-now::before { background: var(--ds-signal); border-color: var(--ds-signal); }
.ds-perm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ds-line); font-size: 13.5px; }
.ds-code { margin: 0; padding: 12px 14px; border-radius: var(--ds-r); background: var(--ds-raised); color: var(--ds-text-2); font: 12px/1.6 var(--ds-mono); white-space: pre-wrap; overflow-x: auto; }

@media (max-width: 900px) {
  .ds-page { padding: 24px 16px 40px; }
  .ds-split { grid-template-columns: minmax(0, 1fr); }
  .ds-h1 { font-size: 28px; }
}

/* ---- product components (from the redesign board) ---- */
/* tile: one card per connector, provider, agent, workspace or person */
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; }
.ds-tile { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-card); color: var(--ds-text); text-decoration: none; font-size: 13.5px; min-width: 0; }
.ds-tile:is(a, button):hover { border-color: var(--ds-line-strong); }
.ds-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-tile-title { font: 500 15px/1.3 var(--ds-font); }
.ds-tile-meta { display: flex; gap: 12px; flex-wrap: wrap; font: 11px var(--ds-mono); color: var(--ds-text-3); }
.ds-tile-meta b { color: var(--ds-text); font-weight: 500; }
/* profile header: person, agent, connector or workspace, with optional smoke */
.ds-profile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; padding: 24px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-card); }
.ds-profile > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ds-profile > :not(canvas) { position: relative; }
.ds-profile-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
/* mini numbers inside a card */
.ds-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ds-mini > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-r); }
.ds-mini b { font: 300 22px/1.1 var(--ds-font); font-stretch: var(--ds-display-stretch); letter-spacing: -0.03em; }
/* file covers by kind */
.ds-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.ds-file { display: flex; flex-direction: column; gap: 8px; color: var(--ds-text); text-decoration: none; font-size: 13.5px; min-width: 0; }
.ds-cover { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; box-sizing: border-box; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); }
.ds-cover[data-kind=deck] { background: #111; color: #fafafa; }
.ds-cover[data-kind=deck] b { font: 300 18px/1.15 var(--ds-font); font-stretch: var(--ds-display-stretch); letter-spacing: -0.03em; }
.ds-cover[data-kind=report], .ds-cover[data-kind=document] { background: #f4f3ef; color: #171719; justify-content: flex-start; }
.ds-cover[data-kind=report] i { display: block; height: 4px; border-radius: 2px; background: rgba(23, 23, 25, 0.14); }
.ds-cover[data-kind=site] { background: #0d0d0d; color: #fafafa; justify-content: flex-start; padding: 0; }
.ds-cover[data-kind=site]::before { content: ""; height: 18px; border-bottom: 1px solid #222; }
.ds-cover[data-kind=site] b { padding: 14px; font: 300 16px/1.2 var(--ds-font); font-stretch: var(--ds-display-stretch); }
.ds-cover .ds-cover-badge { position: absolute; top: 10px; right: 10px; }
/* document preview beside extracted fields */
.ds-paper { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px; border-radius: var(--ds-r); background: #f7f6f2; color: #1b1b1d; font: 12.5px/1.55 var(--ds-font); box-shadow: var(--ds-shadow); }
.ds-paper mark { background: var(--ds-signal-soft); outline: 1px solid color-mix(in srgb, var(--ds-signal) 60%, transparent); color: inherit; border-radius: 2px; }
/* settings rows and permission matrix */
.ds-setrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ds-line); font-size: 14px; }
.ds-setrow:first-child { border-top: 0; }
.ds-setrow small { display: block; margin-top: 2px; color: var(--ds-text-3); font-size: 12.5px; }
.ds-tick { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--ds-line-strong); vertical-align: middle; }
.ds-tick.is-on { background: var(--ds-primary-bg); border-color: var(--ds-primary-bg); }
/* run trace rows */
.ds-trace { display: flex; flex-direction: column; }
.ds-trace-row { display: grid; grid-template-columns: 76px 22px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--ds-line); align-items: start; font-size: 13.5px; }
.ds-trace-row > :first-child { font: 11.5px var(--ds-mono); color: var(--ds-text-3); }
/* dropdown menu */
.ds-menu { display: flex; flex-direction: column; gap: 2px; min-width: 240px; padding: 8px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-lg); background: var(--ds-card); box-shadow: var(--ds-shadow); }
.ds-menu > button, .ds-menu > a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-radius: var(--ds-r); background: none; color: var(--ds-text); font: 13.5px var(--ds-font); text-align: left; text-decoration: none; cursor: pointer; }
.ds-menu > :is(button, a):hover, .ds-menu > [aria-selected=true], .ds-menu > [aria-checked=true] { background: var(--ds-hover); }
.ds-menu small { color: var(--ds-text-3); font-size: 12px; }
/* chat composer: attachments, @ skill, plugins and the model picker */
.ds-composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 10px 16px; border: 1px solid var(--ds-line-strong); border-radius: 16px; background: var(--ds-frost); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ds-composer textarea { border: 0; outline: 0; resize: none; background: none; color: var(--ds-text); font: 15px/22px var(--ds-font); min-height: 24px; }
.ds-composer-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--ds-r); background: var(--ds-selected); font-size: 12.5px; }
.ds-composer-bar { display: flex; align-items: center; gap: 6px; }
.ds-picker { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: none; color: var(--ds-text-2); font: 12.5px var(--ds-font); cursor: pointer; }
.ds-picker[aria-expanded=true] { background: var(--ds-selected); color: var(--ds-text); }
.ds-send { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ds-primary-bg); color: var(--ds-primary-fg); cursor: pointer; }

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

/* ---- shell ---- */
/* Outcomes design system: shell. Rail on the left (pinned work, space switch, apps), top bar with the app's page tabs,
   search, the light/dark switch and the account menu. Scoped under body[data-ds-shell] so it outranks legacy shell CSS. */
body[data-ds-shell] { font-family: var(--ds-font); background: var(--ds-ground); color: var(--ds-text); -webkit-font-smoothing: antialiased; }
body.work-platform[data-ds-shell], body.work-platform[data-ds-shell][data-rail-pinned=true] { padding: var(--ds-top) 0 0 var(--ds-rail); }
body[data-ds-shell] :focus-visible { outline: 2px solid var(--ds-signal); outline-offset: 2px; }

/* rail */
body[data-ds-shell] .ds-rail { position: fixed; z-index: 95; inset: 0 auto 0 0; width: var(--ds-rail); display: flex; flex-direction: column; gap: 14px; padding: 14px 10px 12px; background: var(--ds-surface); border-right: 1px solid var(--ds-line); color: var(--ds-text); box-sizing: border-box; }
body[data-ds-shell] .ds-rail-head { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 6px; }
body[data-ds-shell] .ds-brand { display: inline-flex; color: var(--ds-text); text-decoration: none; }
body[data-ds-shell] .ds-brand .outcomes-wordmark { font-family: var(--ds-font); font-stretch: var(--ds-display-stretch); font-weight: 400; font-size: 19px; letter-spacing: -0.6px; line-height: 1; }
body[data-ds-shell] .ds-rail-close { display: none; }
body[data-ds-shell] .ds-pins, body[data-ds-shell] .ds-apps { display: flex; flex-direction: column; gap: 2px; }
body[data-ds-shell] .ds-apps { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
body[data-ds-shell] .ds-pin, body[data-ds-shell] .ds-app, body[data-ds-shell] .ds-rail-foot, body[data-ds-shell] .ds-history-new { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--ds-r); background: none; color: var(--ds-text-2); font: 400 14px/1 var(--ds-font); text-decoration: none; cursor: pointer; text-align: left; }
body[data-ds-shell] .ds-pin { color: var(--ds-text); }
body[data-ds-shell] :is(.ds-pin, .ds-app, .ds-rail-foot, .ds-history-new) svg { width: 16px; height: 16px; flex: none; opacity: 0.75; }
body[data-ds-shell] :is(.ds-pin, .ds-app, .ds-rail-foot, .ds-history-new):hover { background: var(--ds-hover); color: var(--ds-text); }
body[data-ds-shell] :is(.ds-pin, .ds-app)[aria-current=page] { background: var(--ds-selected); color: var(--ds-text); }
body[data-ds-shell] :is(.ds-pin, .ds-app)[aria-current=page] svg { opacity: 1; }
body[data-ds-shell] .ds-space-switch { display: grid; grid-template-columns: repeat(var(--spaces, 3), minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); }
body[data-ds-shell] .ds-space-switch button { height: 28px; border: 0; border-radius: var(--ds-r-pill); background: none; color: var(--ds-text-3); font: 400 13px var(--ds-font); cursor: pointer; }
body[data-ds-shell] .ds-space-switch button:hover { color: var(--ds-text); }
body[data-ds-shell] .ds-space-switch button[aria-pressed=true] { background: var(--ds-primary-bg); color: var(--ds-primary-fg); }
body[data-ds-shell] .ds-rail-foot { color: var(--ds-text-3); font-size: 13px; border-top: 1px solid var(--ds-line); border-radius: 0; padding-top: 12px; height: auto; }
body[data-ds-shell] .ds-history-search input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-card); color: var(--ds-text); font: 13px var(--ds-font); }
body[data-ds-shell] .ds-history-list { display: flex; flex-direction: column; gap: 1px; overflow: auto; }
body[data-ds-shell] .ds-conversation { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ds-r); background: none; color: var(--ds-text-2); font: 13.5px/1.35 var(--ds-font); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ds-shell] .ds-conversation:hover { background: var(--ds-hover); color: var(--ds-text); }
body[data-ds-shell] .ds-conversation[aria-current=page] { background: var(--ds-selected); color: var(--ds-text); }
body[data-ds-shell] .ds-history-empty { margin: 6px 10px; color: var(--ds-text-3); font-size: 12.5px; }

/* top bar */
body[data-ds-shell] .ds-top { position: fixed; z-index: 100; top: 0; left: var(--ds-rail); right: 0; height: var(--ds-top); display: flex; align-items: stretch; gap: 24px; padding: 0 24px 0 28px; box-sizing: border-box; background: var(--ds-ground); border-bottom: 1px solid var(--ds-line); color: var(--ds-text); }
body[data-ds-shell] .ds-top-menu { display: none; align-self: center; width: 36px; height: 36px; place-items: center; border: 1px solid var(--ds-line-strong); border-radius: 50%; background: none; color: var(--ds-text); cursor: pointer; }
body[data-ds-shell] .ds-top-menu svg { width: 16px; height: 16px; }
body[data-ds-shell] .ds-tabs { display: flex; align-items: stretch; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
body[data-ds-shell] .ds-tab { display: inline-flex; align-items: center; white-space: nowrap; color: var(--ds-text-3); font: 400 14px var(--ds-font); text-decoration: none; border-bottom: 1px solid transparent; }
body[data-ds-shell] .ds-tab:hover { color: var(--ds-text); }
body[data-ds-shell] .ds-tab[aria-current=page] { color: var(--ds-text); border-bottom-color: var(--ds-text); }
body[data-ds-shell] .ds-top-title { align-self: center; margin: 0; font: 500 15px var(--ds-font); letter-spacing: 0; }
body[data-ds-shell] .ds-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
body[data-ds-shell] .ds-top-action { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-card); color: var(--ds-text-2); font: 13px var(--ds-font); cursor: pointer; }
body[data-ds-shell] .ds-top-action:hover, body[data-ds-shell] .ds-top-action[aria-expanded=true] { background: var(--ds-hover); color: var(--ds-text); }
body[data-ds-shell] .ds-top-action svg { width: 15px; height: 15px; }

/* Chat history is contextual, so it opens from the right instead of replacing workspace navigation. */
body[data-ds-shell] .ds-history-panel { position: fixed; z-index: 140; inset: 0 0 0 auto; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; padding: 16px; box-sizing: border-box; border-left: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow); transform: translateX(102%); visibility: hidden; transition: transform 0.22s var(--ds-ease), visibility 0.22s; }
body[data-ds-shell] .ds-history-panel[data-open=true] { transform: none; visibility: visible; }
body[data-ds-shell] .ds-history-head { display: flex; align-items: center; justify-content: space-between; height: 34px; }
body[data-ds-shell] .ds-history-head > div { display: flex; align-items: center; gap: 9px; }
body[data-ds-shell] .ds-history-head svg { width: 16px; height: 16px; }
body[data-ds-shell] .ds-history-head button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--ds-r); background: none; color: var(--ds-text-2); cursor: pointer; }
body[data-ds-shell] .ds-history-head button:hover { background: var(--ds-hover); color: var(--ds-text); }
body[data-ds-shell] .ds-history-panel .ds-history-new { width: 100%; border: 1px solid var(--ds-line-strong); background: var(--ds-card); color: var(--ds-text); }
body[data-ds-shell] .ds-history-panel .ds-history-list { flex: 1; min-height: 0; }
body[data-ds-shell] .ds-history-backdrop { position: fixed; z-index: 130; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: color-mix(in srgb, var(--ds-ground) 45%, transparent); cursor: default; }
/* search keeps its behaviour; only its look changes */
body[data-ds-shell] .ds-top .outcomes-global-search { width: auto; border: 0; }
body[data-ds-shell] .ds-top .outcomes-global-search > [data-open-command] { display: flex !important; align-items: center; gap: 10px; width: 260px; height: 36px; padding: 0 10px 0 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-card); color: var(--ds-text-3); font: 13.5px var(--ds-font) !important; cursor: pointer; }
body[data-ds-shell] .ds-top .outcomes-search svg { width: 15px; height: 15px; flex: none; }
body[data-ds-shell] .ds-top .ds-search-label { flex: 1; text-align: left; }
body[data-ds-shell] .ds-top .outcomes-search kbd { display: inline !important; border: 0; padding: 0; font: 11px var(--ds-mono); color: var(--ds-text-3); }
body[data-ds-shell] .ds-top .outcomes-global-search[data-open=true] { width: 360px; height: 36px; padding: 0 6px 0 14px; border: 1px solid var(--ds-text-3); border-radius: var(--ds-r-pill); background: var(--ds-card); box-sizing: border-box; }
body[data-ds-shell] .ds-top .outcomes-global-search[data-open=true] > [data-open-command] { display: none !important; }
body[data-ds-shell] .ds-top .outcomes-global-search[data-open=true] > input { font: 14px var(--ds-font); color: var(--ds-text); padding: 0; }
body[data-ds-shell] .outcomes-search-results { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-lg); background: var(--ds-card); box-shadow: var(--ds-shadow); font-family: var(--ds-font); }
body[data-ds-shell] .outcomes-search-results h3 { font: 11px var(--ds-mono) !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--ds-text-3); }
body[data-ds-shell] .outcomes-search-results a[aria-selected=true], body[data-ds-shell] .outcomes-search-results a:hover { background: var(--ds-hover); }
/* theme switch */
body[data-ds-shell] .ds-theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); }
body[data-ds-shell] .ds-theme button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ds-text-3); cursor: pointer; }
body[data-ds-shell] .ds-theme button svg { width: 15px; height: 15px; }
body[data-ds-shell] .ds-theme button[aria-pressed=true] { background: var(--ds-selected); color: var(--ds-text); }
/* account */
body[data-ds-shell] .ds-account { position: relative; }
body[data-ds-shell] .ds-account summary { list-style: none; cursor: pointer; display: grid; }
body[data-ds-shell] .ds-account summary::-webkit-details-marker { display: none; }
body[data-ds-shell] .ds-account .os-account-avatar { display: grid; width: 32px; height: 32px; }
body[data-ds-shell] .ds-account .os-account-avatar .person-avatar { width: 32px; height: 32px; }
body[data-ds-shell] .ds-account .os-account-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-lg); background: var(--ds-card); box-shadow: var(--ds-shadow); color: var(--ds-text); }
body[data-ds-shell] .ds-account .os-account-menu small { font: 11px var(--ds-mono); text-transform: uppercase; color: var(--ds-text-3); }
body[data-ds-shell] .ds-account .os-account-menu span { color: var(--ds-text-3); font-size: 13px; }
body[data-ds-shell] .ds-account .os-account-menu a { color: var(--ds-text-2); font-size: 13.5px; text-decoration: none; padding: 6px 0; border-top: 1px solid var(--ds-line); }

/* collapsed rail: icons only, for canvas-heavy work */
body[data-ds-shell] .ds-rail-collapse { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ds-r); background: none; color: var(--ds-text-3); cursor: pointer; }
body[data-ds-shell] .ds-rail-collapse:hover { background: var(--ds-hover); color: var(--ds-text); }
body[data-ds-shell] .ds-rail-collapse svg { width: 16px; height: 16px; }
@media (min-width: 901px) {
  body.work-platform[data-ds-shell][data-rail-collapsed=true] { padding-left: 64px; }
  body[data-ds-shell][data-rail-collapsed=true] { --ds-rail-now: 64px; }
  body[data-ds-shell][data-rail-collapsed=true] .ds-rail { width: 64px; padding-inline: 10px; }
  body[data-ds-shell][data-rail-collapsed=true] .ds-top { left: 64px; }
  body[data-ds-shell][data-rail-collapsed=true] .ds-brand, body[data-ds-shell][data-rail-collapsed=true] .ds-space-switch, body[data-ds-shell][data-rail-collapsed=true] :is(.ds-pin, .ds-app, .ds-rail-foot) span { display: none; }
  body[data-ds-shell][data-rail-collapsed=true] .ds-rail-head { justify-content: center; padding: 0; }
  body[data-ds-shell][data-rail-collapsed=true] :is(.ds-pin, .ds-app, .ds-rail-foot) { justify-content: center; padding: 0; }
}
@media (max-width: 900px) {
  body[data-ds-shell] .ds-rail-collapse { display: none; }
  body.work-platform[data-ds-shell], body.work-platform[data-ds-shell][data-rail-pinned=true] { padding-left: 0; }
  body[data-ds-shell] .ds-top { left: 0; padding: 0 12px; gap: 12px; }
  body[data-ds-shell] .ds-top-menu { display: grid; }
  body[data-ds-shell] .ds-rail { transform: translateX(-102%); transition: transform 0.25s var(--ds-ease); box-shadow: var(--ds-shadow); z-index: 120; }
  body[data-ds-shell] .ds-rail[data-open=true] { transform: none; }
  body[data-ds-shell] .ds-rail-close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; color: var(--ds-text-2); }
  body[data-ds-shell] .ds-rail-close svg { width: 16px; height: 16px; }
  body[data-ds-shell] .ds-top .outcomes-global-search > [data-open-command] { width: 36px; padding: 0; justify-content: center; }
  body[data-ds-shell] .ds-top :is(.ds-search-label, .outcomes-search kbd) { display: none !important; }
  body[data-ds-shell] .ds-top .outcomes-global-search[data-open=true] { width: min(300px, 60vw); }
  body[data-ds-shell] .ds-tabs { gap: 18px; }
  body[data-ds-shell] .ds-top-action { width: 34px; padding: 0; justify-content: center; }
  body[data-ds-shell] .ds-top-action span { display: none; }
}

/* ---- legacy ---- */
/* Outcomes design system: adapters for legacy classes.
   Visual properties only (type, colour, border, radius, control height): layout and positioning stay with each page so
   behaviour, scroll containment and tests are unchanged. Delete a rule here once its page renders ds-* components. */
body[data-ds-shell] { --legacy-scope: 1; }

/* type */
:where(body[data-ds-shell]) :where(h1, h2, h3, h4, p, li, td, th, label, input, select, textarea, button, a, span, small, strong) { font-family: inherit; }
body[data-ds-shell] :is(.page-heading h1, .gw-heading h1, .w-heading h1, .studio-view h1, main > header h1, .finance-head h1, .os-page-title) { font-family: var(--ds-font) !important; font-stretch: var(--ds-display-stretch); font-weight: 300 !important; letter-spacing: -0.045em !important; color: var(--ds-text); }
body[data-ds-shell] :is(.eyebrow, .finance-kicker, .work-kicker, .w-eyebrow, .sectionLabel, .os-label, .gw-caption) { font-family: var(--ds-mono) !important; font-size: var(--ds-text-xs) !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--ds-text-3) !important; font-weight: 400 !important; }
body[data-ds-shell] :is(code, pre, kbd, .numeric, .mono) { font-family: var(--ds-mono); }

/* buttons */
body[data-ds-shell] :is(.primary-button, button.primary, a.primary, .gw-button.primary, .w-button-primary) { min-height: 36px; padding: 0 16px; border: 1px solid var(--ds-primary-bg) !important; border-radius: var(--ds-r-pill) !important; background: var(--ds-primary-bg) !important; color: var(--ds-primary-fg) !important; font: 400 var(--ds-text-md) var(--ds-font) !important; box-shadow: none !important; }
body[data-ds-shell] :is(.secondary-button, button.secondary, a.secondary, .gw-button, .toggle-button, .deployment-action, .quiet) { min-height: 34px; padding: 0 14px; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-r-pill) !important; background: transparent !important; color: var(--ds-text) !important; font: 400 13.5px var(--ds-font) !important; box-shadow: none !important; }
body[data-ds-shell] :is(.secondary-button, button.secondary, .gw-button, .toggle-button, .deployment-action):hover { background: var(--ds-hover) !important; }
body[data-ds-shell] :is(.dialog-x, .dialog-close, .w-inspector-close) { border-radius: 50% !important; border: 1px solid var(--ds-line-strong) !important; background: transparent !important; color: var(--ds-text-2) !important; }

/* surfaces */
body[data-ds-shell] :is(.gw-panel, .finance-panel, .registry-panel, .os-system-card, .w-record, .catalog-card, .gw-stat, .detail-section, .panel) { background: var(--ds-card) !important; border-color: var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; }
body[data-ds-shell] :is(.gw-muted, .empty-copy, .w-record-meta, .skill-meta) { color: var(--ds-text-3) !important; }

/* forms */
body[data-ds-shell] :is(input, select, textarea) { font-family: var(--ds-font) !important; }
body[data-ds-shell] input[type=checkbox], body[data-ds-shell] input[type=radio] { accent-color: var(--ds-primary-bg); }

/* tables */
body[data-ds-shell] :is(.gw-table, .w-table, table.records, .table-wrap table) th { font-family: var(--ds-mono) !important; font-size: var(--ds-text-xs) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--ds-text-3) !important; border-color: var(--ds-line) !important; }
body[data-ds-shell] :is(.gw-table, .w-table, table.records, .table-wrap table) td { border-color: var(--ds-line) !important; }

/* tags and badges */
body[data-ds-shell] :is(.w-badge, .gw-pill, .tag, .badge) { border-radius: var(--ds-r-pill) !important; font-family: var(--ds-font) !important; font-size: var(--ds-text-sm) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* dialogs */
body[data-ds-shell] dialog:is(.studio-dialog, .finance-dialog, .gw-dialog, .workflow-dialog, .detail-panel, .w-inspector, .trajectory-curate-dialog) { background: var(--ds-card) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow) !important; }
body[data-ds-shell] dialog::backdrop { background: var(--ds-scrim); }

/* empty states */
body[data-ds-shell] :is(.empty-state, .w-empty, .gw-empty) { border: 1px dashed var(--ds-line-strong) !important; border-radius: var(--ds-r-lg) !important; background: transparent !important; color: var(--ds-text-2) !important; }

/* connector and provider marks: keep real logos legible in both themes */
body[data-ds-shell] :is(.resource-mark, .gw-logo, .connect-mark, .experience-logo, .stack-logo) { background: var(--ds-logo-chip) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r) !important; }

/* people */
body[data-ds-shell] .person-avatar { border-radius: 50%; background: var(--ds-raised); color: var(--ds-text-2); border: 1px solid var(--ds-line-strong); }