/* Sway Studio product design system — components.
   Every value comes from tokens.css. Classes are ds- prefixed so pages can migrate one piece at a time. */

/* ── Base ─────────────────────────────────────────────────── */
.ds,
.ds-root {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: var(--tracking-md);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

.ds *, .ds *::before, .ds *::after,
.ds-btn, .ds-input, .ds-select, .ds-textarea, .ds-card, .ds-dialog, .ds-menu, .ds-metric { box-sizing: border-box; }

/* ── Type roles ───────────────────────────────────────────── */
.ds-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); text-wrap: balance; }
.ds-h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); font-weight: var(--weight-semibold); text-wrap: balance; }
.ds-h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-2xl); font-weight: var(--weight-semibold); }
.ds-h3 { font-size: var(--text-lg); line-height: var(--leading-lg); letter-spacing: var(--tracking-lg); font-weight: var(--weight-medium); }
.ds-h4 { font-size: var(--text-md); line-height: var(--leading-md); letter-spacing: var(--tracking-md); font-weight: var(--weight-medium); }
.ds-body { font-size: var(--text-md); line-height: var(--leading-md); letter-spacing: var(--tracking-md); }
.ds-lead { font-size: var(--text-lg); line-height: 28px; letter-spacing: var(--tracking-lg); color: var(--text-secondary); text-wrap: pretty; }
.ds-small { font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: var(--tracking-sm); }
.ds-caption { font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-xs); color: var(--text-muted); }
.ds-label { font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-xs); font-weight: var(--weight-medium); color: var(--text-secondary); }
.ds-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-secondary { color: var(--text-secondary); }
.ds-muted { color: var(--text-muted); }

/* ── Button ───────────────────────────────────────────────── */
.ds-btn {
  --btn-h: var(--control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-control);
  font: var(--weight-medium) var(--text-md) / 1 var(--font-sans);
  letter-spacing: var(--tracking-md);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.ds-btn:hover { background: var(--bg-muted); }
.ds-btn:active { transform: translateY(0.5px); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-control), var(--focus-ring); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ds-btn svg { width: 16px; height: 16px; flex: none; }

.ds-btn--primary { background: var(--accent-solid); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.ds-btn--primary:hover { background: var(--accent-solid-hover); }
.ds-btn--primary:active { background: var(--accent-solid-active); }
.ds-btn--primary:focus-visible { box-shadow: var(--shadow-accent), var(--focus-ring); }

.ds-btn--dark { background: var(--text); color: var(--bg); box-shadow: var(--shadow-accent); }
.ds-btn--dark:hover { background: color-mix(in oklab, var(--text) 86%, var(--bg)); }

.ds-btn--ghost { background: transparent; color: var(--text-secondary); box-shadow: none; }
.ds-btn--ghost:hover { background: var(--bg-muted); color: var(--text); }

.ds-btn--link { background: transparent; color: var(--text); box-shadow: none; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.ds-btn--link:hover { background: transparent; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.ds-btn--danger { background: var(--surface); color: var(--danger-ink); }
.ds-btn--danger:hover { background: var(--danger-soft); }

.ds-btn--sm { --btn-h: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); gap: 6px; }
.ds-btn--sm svg { width: 14px; height: 14px; }
.ds-btn--lg { --btn-h: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-base); }
.ds-btn--icon { width: var(--btn-h); padding: 0; }
.ds-btn--block { width: 100%; }

/* ── Field ────────────────────────────────────────────────── */
.ds-field { display: grid; gap: 6px; }
.ds-field > .ds-label { color: var(--text); }
.ds-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); }
.ds-field[data-invalid] .ds-hint { color: var(--danger-ink); }

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: var(--weight-regular) var(--text-md) / var(--leading-md) var(--font-sans);
  letter-spacing: var(--tracking-md);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-placeholder); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--border-strong); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ds-field[data-invalid] .ds-input { border-color: var(--danger); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--bg-muted); color: var(--text-muted); cursor: not-allowed; }
.ds-textarea { height: auto; min-height: 88px; padding: 10px var(--space-3); resize: vertical; }
.ds-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ds-input--search {
  padding-left: 34px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E") no-repeat 12px center;
  border-color: transparent;
}
.ds-input--search:hover { border-color: var(--border); }
.ds-input--search:focus { background-color: var(--surface); }

/* Checkbox and switch */
.ds-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-md); }
.ds-check input:not(.ds-switch) {
  appearance: none;
  width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  display: grid; place-content: center;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.ds-check input:not(.ds-switch)::after { content: ""; width: 9px; height: 5px; border: 1.75px solid var(--text-on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ds-check input:not(.ds-switch):checked { background: var(--accent-solid); border-color: var(--accent-solid); }
.ds-check input:not(.ds-switch):checked::after { opacity: 1; }
.ds-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Switch motion adapted from Redrob UI's Switch (MIT, (c) 2026 Janghoon Lee (Redrob) and contributors,
   https://github.com/redrob-labs/redrob-ui): the colour changes quickly, and the knob takes a little longer and
   overshoots slightly, so it snaps into place and settles. */
.ds-switch { --switch-settle: cubic-bezier(0.34, 1.4, 0.64, 1); appearance: none; position: relative; width: 32px; height: 20px; margin: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background-color 140ms var(--ease); flex: none; }
.ds-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgb(10 11 12 / 0.16), 0 1px 1px rgb(10 11 12 / 0.06); transition: transform 220ms var(--switch-settle); will-change: transform; }
.ds-switch:checked { background: var(--accent-solid); }
.ds-switch:checked::after { transform: translateX(12px); }
.ds-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Chip / badge / tag ───────────────────────────────────── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
  letter-spacing: var(--tracking-xs);
  white-space: nowrap;
}
.ds-chip--outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.ds-chip--accent { background: var(--accent-soft); color: var(--accent-ink); }
.ds-chip--positive { background: var(--positive-soft); color: var(--positive-ink); }
.ds-chip--warning { background: var(--warning-soft); color: var(--warning-ink); }
.ds-chip--danger { background: var(--danger-soft); color: var(--danger-ink); }
.ds-chip--info { background: var(--info-soft); color: var(--info-ink); }
.ds-chip--lg { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds-chip--positive .ds-dot { background: var(--positive); }
.ds-chip--warning .ds-dot { background: var(--warning); }
.ds-chip--danger .ds-dot { background: var(--danger); }
.ds-chip--info .ds-dot { background: var(--info); }
.ds-chip--accent .ds-dot { background: var(--accent); }

/* Announcement chip: white pill, one colored tag word */
.ds-announce { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3) 0 6px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-control); font: var(--weight-medium) var(--text-md) / 1 var(--font-sans); letter-spacing: var(--tracking-md); color: var(--text); text-decoration: none; }
.ds-announce b { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

.ds-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-secondary); font: var(--weight-medium) 11px / 1 var(--font-sans); }

/* ── Tabs (underline) ─────────────────────────────────────── */
.ds-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.ds-tab {
  position: relative;
  padding: var(--space-3) 0;
  margin-bottom: -1px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: var(--weight-medium) var(--text-md) / var(--leading-md) var(--font-sans);
  letter-spacing: var(--tracking-md);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}
.ds-tab:hover { color: var(--text); }
.ds-tab[aria-selected="true"], .ds-tab.is-active { color: var(--text); }
.ds-tab[aria-selected="true"]::after, .ds-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); }
.ds-tab .ds-count { margin-left: 6px; color: var(--text-placeholder); font-weight: var(--weight-regular); }

/* Segmented control (pill) */
.ds-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--bg-muted); }
.ds-segmented button { height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans); letter-spacing: var(--tracking-sm); cursor: pointer; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.ds-segmented button:hover { color: var(--text); }
.ds-segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-control); }

/* Nav pill: floating group of links */
.ds-navpill { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-control); }
.ds-navpill a { height: 30px; display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--text-secondary); font: var(--weight-medium) var(--text-md) / 1 var(--font-sans); letter-spacing: var(--tracking-md); text-decoration: none; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.ds-navpill a:hover { color: var(--text); background: var(--bg-muted); }
.ds-navpill a[aria-current="page"] { color: var(--text); background: var(--bg-muted); }

/* Sidebar nav list */
.ds-navlist { display: grid; gap: 1px; }
.ds-navlist a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font: var(--weight-medium) var(--text-md) / 1 var(--font-sans); letter-spacing: var(--tracking-md); text-decoration: none; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.ds-navlist a svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.ds-navlist a:hover { background: var(--bg-hover); color: var(--text); }
.ds-navlist a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-control); }
.ds-navlist a[aria-current="page"] svg { color: var(--accent); }
.ds-navlist .ds-navlist-meta { margin-left: auto; color: var(--text-placeholder); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.ds-navgroup { padding: var(--space-4) 10px 6px; font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); color: var(--text-muted); letter-spacing: var(--tracking-xs); }

/* ── Card / panel ─────────────────────────────────────────── */
.ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-card--raised { border-color: transparent; box-shadow: var(--shadow-raised); }
.ds-card--flat { border: 0; padding: 0; background: transparent; }
.ds-card--well { background: var(--bg-subtle); }
.ds-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.ds-card-title { margin: 0; font: var(--weight-medium) var(--text-base) / var(--leading-base) var(--font-sans); letter-spacing: var(--tracking-base); }
.ds-card-sub { margin: 2px 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); }
a.ds-card { display: block; color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
a.ds-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-control); }

/* Feature: icon disc + heading + body, no container */
.ds-feature { display: grid; gap: var(--space-3); justify-items: start; }
.ds-feature-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--white); }
.ds-feature-icon svg { width: 18px; height: 18px; }

/* Metric tile */
.ds-metric { display: grid; gap: 6px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ds-metric-label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); }
.ds-metric-row { display: flex; align-items: baseline; gap: var(--space-2); }
.ds-metric-value { font: var(--weight-medium) var(--text-2xl) / var(--leading-2xl) var(--font-sans); letter-spacing: var(--tracking-2xl); font-variant-numeric: tabular-nums; }
.ds-delta { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); font-variant-numeric: tabular-nums; }
.ds-delta--up { background: var(--positive-soft); color: var(--positive-ink); }
.ds-delta--down { background: var(--danger-soft); color: var(--danger-ink); }
.ds-delta--flat { background: var(--bg-muted); color: var(--text-muted); }

/* ── Table ────────────────────────────────────────────────── */
.ds-table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: var(--leading-md); }
.ds-table th { position: sticky; top: 0; padding: 10px var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border); text-align: left; font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-sans); letter-spacing: var(--tracking-xs); color: var(--text-muted); white-space: nowrap; }
.ds-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table td:first-child { color: var(--text); font-weight: var(--weight-medium); }
.ds-table tbody tr { transition: background-color var(--duration-fast) var(--ease); }
.ds-table tbody tr:hover { background: var(--bg-subtle); }
.ds-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.ds-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── List rows (dense alternative to a table) ─────────────── */
.ds-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ds-row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); }
.ds-row:first-child { border-top: 0; }
.ds-row-main { flex: 1; min-width: 0; }
.ds-row-title { font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row-sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); }

/* ── Avatar ───────────────────────────────────────────────── */
.ds-avatar { --size: 28px; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; background: var(--accent-soft-strong); color: var(--accent-ink); font: var(--weight-semibold) calc(var(--size) * 0.4) / 1 var(--font-sans); overflow: hidden; flex: none; box-shadow: 0 0 0 1.5px var(--bg); }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--lg { --size: 40px; }
.ds-avatar--sm { --size: 20px; }
.ds-avatars { display: inline-flex; }
.ds-avatars .ds-avatar + .ds-avatar { margin-left: -6px; }

/* Site favicon tile */
.ds-site-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-secondary); font: var(--weight-semibold) var(--text-sm) / 1 var(--font-sans); flex: none; overflow: hidden; }

/* ── Menu / popover ───────────────────────────────────────── */
.ds-menu { min-width: 200px; padding: 4px; background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.ds-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: var(--weight-regular) var(--text-md) / 1 var(--font-sans); letter-spacing: var(--tracking-md); text-align: left; cursor: pointer; }
.ds-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.ds-menu-item:hover, .ds-menu-item:focus-visible { outline: none; background: var(--bg-muted); }
.ds-menu-item .ds-kbd { margin-left: auto; }
.ds-menu-item--danger { color: var(--danger-ink); }
.ds-menu-item--danger svg { color: currentColor; }
.ds-menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }

.ds-tooltip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-xs); background: var(--carbon); color: var(--white); font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); letter-spacing: var(--tracking-xs); }

/* ── Dialog ───────────────────────────────────────────────── */
.ds-dialog { width: min(440px, 100%); padding: var(--space-6); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.ds-dialog-title { margin: 0 0 var(--space-1); font: var(--weight-semibold) var(--text-lg) / var(--leading-lg) var(--font-sans); letter-spacing: var(--tracking-lg); }
.ds-dialog-body { color: var(--text-secondary); }
.ds-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

/* ── Toast ────────────────────────────────────────────────── */
.ds-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--carbon); color: var(--white); box-shadow: var(--shadow-overlay); font-weight: var(--weight-medium); }
.ds-toast .ds-btn { --btn-h: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); background: rgb(255 255 255 / 0.12); color: var(--white); box-shadow: none; }
.ds-toast .ds-btn:hover { background: rgb(255 255 255 / 0.2); }

/* ── Callout ──────────────────────────────────────────────── */
.ds-callout { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-secondary); }
.ds-callout strong { color: var(--text); font-weight: var(--weight-medium); }
.ds-callout--accent { background: var(--accent-soft); border-color: transparent; }
.ds-callout--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning-ink); }
.ds-callout--warning strong { color: inherit; }
.ds-callout--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger-ink); }
.ds-callout--danger strong { color: inherit; }

/* ── Empty state ──────────────────────────────────────────── */
.ds-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.ds-empty p { max-width: 36ch; color: var(--text-muted); }

/* ── Progress / skeleton ──────────────────────────────────── */
.ds-progress { height: 6px; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; }
.ds-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ds-skeleton { border-radius: var(--radius-sm); background: var(--gradient-shimmer); background-size: 300% 100%; animation: ds-shimmer 1.4s linear infinite; }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.ds-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: ds-spin 0.7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── Layout helpers ───────────────────────────────────────── */
.ds-divider { height: 1px; border: 0; margin: 0; background: var(--border); }
.ds-stack { display: grid; align-content: start; gap: var(--stack-gap, var(--space-4)); }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.ds-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ds-band { background: var(--gradient-band); }

@media (prefers-reduced-motion: reduce) {
  .ds-skeleton, .ds-spinner { animation: none; }
  .ds-btn, .ds-switch, .ds-switch::after { transition: none; }
}