/* =========================================================================
   ELEVATY CONTENT ENGINE — Design-system components (M-UI.1)

   Every rule references ONLY the custom properties defined in tokens.css.
   No raw hex, no ad-hoc colours: colour comes from tokens, spacing from
   --sp-*, corners from --r-*, elevation from --shadow-*, focus from
   --focus-ring. tokens.css stays the single source of truth.

   Status tints are built with color-mix() over the THEME-AWARE --*-600
   tokens (which the token file flips for dark mode) rather than the fixed
   --*-50 tints, so success/warning/danger/insight read correctly in both
   light and dark without touching a single token value.
   ========================================================================= */

/* Minimal reset — the standalone auth pages (login/denied) load ds.css WITHOUT
   Tailwind, so they need border-box + zeroed body margin here. On the Tailwind
   pages this is a no-op (Preflight already applies exactly this). */
*, *::before, *::after { box-sizing: border-box; }

/* Form-control safety net for migrated feature screens: plain inputs/selects/
   textareas (not ds-* components) that carried no explicit background get token
   surface/text/border + a focus ring, so they read correctly in dark mode.
   :where() has ZERO specificity — any explicit Tailwind utility on the element
   still wins, and the higher-specificity .ds-input/.ds-select rules are untouched. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select) {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select)::placeholder { color: var(--text-muted); }
/* The same cascade problem as `.ds-input` above, for the plain controls on the screens that
   have not been migrated yet: `:where()` has ZERO specificity by design, so it loses to
   everything, including Tailwind's runtime stylesheet. The focus half is therefore written
   WITHOUT `:where()` — a focus indicator is not the kind of default an explicit utility
   should be able to remove by accident. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}

/* -------------------------------------------------------------------------
   Page scaffolding — only active where a page opts in (body.ds-body / .ds-page),
   so existing feature screens are never affected.
   ------------------------------------------------------------------------- */
body.ds-body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ui);
}
.ds-page {
  font-family: var(--font-ui);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ds-section { margin-top: var(--sp-10); }
.ds-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
  border-bottom: var(--border-hairline);
}
.ds-section__note { color: var(--text-secondary); font-size: var(--fs-label); margin-top: calc(-1 * var(--sp-4)); margin-bottom: var(--sp-6); }
.ds-subtitle { font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-4); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.ds-row--top { align-items: flex-start; }
.ds-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.ds-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Inline icon — sizes relative to surrounding text so it aligns everywhere. */
.ds-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }

/* -------------------------------------------------------------------------
   Type scale
   ------------------------------------------------------------------------- */
.ds-display-xl { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); color: var(--text-primary); letter-spacing: -.02em; }
.ds-display-l  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  color: var(--text-primary); letter-spacing: -.02em; }
.ds-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-primary); }
.ds-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-primary); }
.ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-primary); }
.ds-body-l { font-family: var(--font-ui); font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--text-primary); }
.ds-body   { font-family: var(--font-ui); font-size: var(--fs-body);   line-height: var(--lh-body);   color: var(--text-primary); }
.ds-label  { font-family: var(--font-ui); font-size: var(--fs-label);  line-height: var(--lh-label);  color: var(--text-secondary); }
.ds-caption{ font-family: var(--font-ui); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ds-mono   { font-family: var(--font-mono); font-size: var(--fs-mono);  line-height: var(--lh-mono);  color: var(--text-primary); }
.ds-text-secondary { color: var(--text-secondary); }
.ds-text-muted { color: var(--text-muted); }
.ds-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.ds-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* -------------------------------------------------------------------------
   Buttons — primary / secondary / ghost / danger · sizes sm / md
   ------------------------------------------------------------------------- */
/* A BARE `.ds-btn` is the neutral button, not the brand one (M-LILAC.6). It read as filled
   purple until now, so a pair like "Continue" + "Dismiss" rendered as two identical primary
   actions and the page had no visual answer to "which one did you mean". Filling is what
   `--primary` (and `--danger`, `--success`) are FOR; the default is the quiet one, which is
   also what every `class="ds-btn"` in the templates meant when it was written. */
.ds-btn {
  --_bg: var(--bg-surface);
  --_fg: var(--text-primary);
  border-color: var(--border-default);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body); line-height: 1;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-btn .ds-icon { width: 1.05em; height: 1.05em; }
.ds-btn--sm { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-label); border-radius: var(--r-sm); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ds-btn:hover:not(:disabled) { background: var(--bg-hover); }

.ds-btn--primary { background: var(--brand-fill, var(--brand-600)); color: var(--text-inverse); }
.ds-btn--primary:hover:not(:disabled) { background: var(--brand-fill-hover, color-mix(in srgb, var(--brand-600) 86%, black)); }

.ds-btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--bg-hover); }

.ds-btn--ghost { background: transparent; color: var(--text-secondary); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.ds-btn--danger { background: var(--danger-600); color: var(--text-inverse); }
.ds-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-600) 86%, black); }

.ds-btn--success { background: var(--success-600); color: var(--text-inverse); }
.ds-btn--success:hover:not(:disabled) { background: color-mix(in srgb, var(--success-600) 86%, black); }
[data-theme="dark"] .ds-btn--success,
[data-theme="dark"] .ds-btn--danger,
[data-theme="dark"] .ds-status--publikovano,
[data-theme="dark"] .ds-count { color: var(--bg-app); }

.ds-btn--block { width: 100%; }

/* Google sign-in mark — the official multi-colour "G" sits on a white chip so
   it keeps its brand colours and stays legible on any button background. */
.ds-gbtn__chip { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; border-radius: var(--r-xs); background: var(--slate-0); flex: none; }
.ds-gbtn__chip svg { width: 1em; height: 1em; display: block; }

/* -------------------------------------------------------------------------
   Brand logo — swaps automatically between the dark-ink and white wordmark
   depending on the active theme (both are the real elevaty.ai asset).
   ------------------------------------------------------------------------- */
.ds-logo { width: auto; display: block; }
.ds-logo--on-dark { display: none; }
[data-theme="dark"] .ds-logo--on-light { display: none; }
[data-theme="dark"] .ds-logo--on-dark { display: block; }

/* M-BRAND.1 — the typographic wordmark: the platform's mark when no logo file exists for
   PRODUCT_NAME (static/brand/<slug>-logo.png). One base, one size variant per slot the
   image used to fill, sized to the image heights those slots were built around. */
.ds-wordmark { display: inline-block; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text-primary); white-space: nowrap; }
.ds-wordmark--brand { font-size: 18px; }                     /* sidebar / classic header: 24px logo box */
.ds-wordmark--admin { font-size: 15px; }                     /* admin rail: 20px logo box */
.ds-wordmark--auth-panel { font-size: 26px; align-self: flex-start; margin-bottom: var(--sp-8); }   /* mirrors .ds-auth__brand-logo */
.ds-wordmark--auth-mobile { display: block; font-size: 22px; margin: 0 0 var(--sp-8); }             /* mirrors .ds-auth__logo--mobile */
@media (min-width: 900px) { .ds-auth__card .ds-wordmark--auth-mobile { display: none; } }
.ds-wordmark--auth-card { display: block; font-size: 24px; margin: var(--sp-2) auto var(--sp-6); }  /* classic card: .ds-auth__logo */

/* -------------------------------------------------------------------------
   Auth screens (login / access-denied) — centred single card on the app bg.
   ------------------------------------------------------------------------- */
.ds-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-7); background: var(--bg-app); }
.ds-auth__card { width: 100%; max-width: 380px; text-align: center; }
.ds-auth__logo { height: 32px; margin: var(--sp-2) auto var(--sp-6); }
.ds-auth__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-primary); }
.ds-auth__sub { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-body); margin-top: var(--sp-2); }
.ds-auth__note { color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); margin-top: var(--sp-6); }
.ds-auth__badge { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full); margin: 0 auto var(--sp-5); }
.ds-auth__badge--danger { color: var(--danger-600); background: color-mix(in srgb, var(--danger-600) 14%, transparent); }
.ds-auth__msg {
  font-size: var(--fs-label); line-height: var(--lh-label);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-5); text-align: left;
}
.ds-auth__msg--error { color: var(--danger-700); background: color-mix(in srgb, var(--danger-600) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger-600) 30%, transparent); }
.ds-auth__msg--warn  { color: var(--warning-700); background: color-mix(in srgb, var(--warning-600) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning-600) 30%, transparent); }
[data-theme="dark"] .ds-auth__msg--error { color: var(--danger-600); }
[data-theme="dark"] .ds-auth__msg--warn { color: var(--warning-600); }
.ds-auth__msg code { font-family: var(--font-mono); font-size: 0.95em; }

/* -------------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------------- */
.ds-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-field__label { font-size: var(--fs-label); font-weight: 600; color: var(--text-primary); }
.ds-field__req { color: var(--danger-600); margin-left: var(--sp-1); }
.ds-field__help { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ds-field__error { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--danger-600); }

.ds-input, .ds-textarea, .ds-select {
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-textarea { min-height: calc(var(--sp-12) + var(--sp-7)); resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-muted); }
/* The class is REPEATED on purpose (0,3,0 rather than 0,2,0). Tailwind's CDN build injects
   its stylesheet at RUNTIME, after this file, and its form-control focus rule has the same
   specificity as a single class — so it won the tie and replaced the ring with its own
   EMPTY ring composition. Measured on a real keyboard focus: `rgba(0,0,0,0) 0 0 0 0`, i.e.
   NO visible focus indicator on any text field, select or textarea in the product. Buttons
   were unaffected, which is why it survived a focus review that looked at buttons.
   Doubling the class is the smallest thing that wins the cascade without `!important`. */
.ds-input.ds-input:focus-visible,
.ds-textarea.ds-textarea:focus-visible,
.ds-select.ds-select:focus-visible {
  outline: none; border-color: var(--brand-600); box-shadow: var(--focus-ring);
}
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled {
  background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed;
}
/* Small variant — the size the shell's search box, the task panel and several filters have
   been asking for since M-UI.1. They used `ds-input--sm` / `ds-select--sm` and got nothing:
   the class was never defined, so the control simply rendered full size. Found by the sweep
   in `tests/test_design_system.py`, which now refuses any ds- class ds.css does not define. */
.ds-input--sm, .ds-textarea--sm, .ds-select--sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-label);
  border-radius: var(--r-sm);
}

.ds-input--error, .ds-textarea--error, .ds-select--error { border-color: var(--danger-600); }
.ds-input--error.ds-input--error:focus-visible,
.ds-textarea--error.ds-textarea--error:focus-visible,
.ds-select--error.ds-select--error:focus-visible {
  border-color: var(--danger-600);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--danger-600);
}

.ds-select-wrap { position: relative; display: block; }
/* Only hide the native caret when a custom chevron is provided by .ds-select-wrap;
   a bare ds-select keeps the OS dropdown arrow. */
.ds-select-wrap .ds-select { appearance: none; -webkit-appearance: none; padding-right: var(--sp-9); }
.ds-select-wrap__chevron { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }

/* Checkbox / radio — native control tinted with the brand token. */
.ds-choice { display: inline-flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; }
.ds-choice input[type="checkbox"], .ds-choice input[type="radio"] {
  appearance: auto; accent-color: var(--brand-600);
  width: var(--sp-5); height: var(--sp-5); margin: 0; flex: none; cursor: pointer;
}
.ds-choice input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-choice input:disabled { cursor: not-allowed; }
.ds-choice--disabled { color: var(--text-muted); cursor: not-allowed; }

/* -------------------------------------------------------------------------
   Badge / Tag
   ------------------------------------------------------------------------- */
.ds-badge {
  --_c: var(--slate-600);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); line-height: 1; font-weight: 600;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
  color: var(--_c);
  background: color-mix(in srgb, var(--_c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--_c) 28%, transparent);
  white-space: nowrap;
}
.ds-badge--neutral { --_c: var(--slate-500); color: var(--text-secondary); }
.ds-badge--brand   { --_c: var(--brand-600); }
.ds-badge--success { --_c: var(--success-600); }
.ds-badge--warning { --_c: var(--warning-600); }
.ds-badge--danger  { --_c: var(--danger-600); }
.ds-badge--info    { --_c: var(--info-600); }
.ds-badge--insight { --_c: var(--insight-600); }
.ds-badge--solid { color: var(--text-inverse); background: var(--_c); border-color: transparent; }
.ds-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
}

/* -------------------------------------------------------------------------
   Tooltip — CSS only, appears on hover + keyboard focus
   ------------------------------------------------------------------------- */
.ds-tooltip { position: relative; display: inline-flex; }
.ds-tooltip__bubble {
  position: absolute; bottom: calc(100% + var(--sp-3)); left: 50%; transform: translateX(-50%) translateY(var(--sp-2));
  background: var(--slate-900); color: var(--slate-0);
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); white-space: nowrap; z-index: 30;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ds-tooltip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: var(--sp-2) solid transparent; border-top-color: var(--slate-900);
}
.ds-tooltip:hover .ds-tooltip__bubble,
.ds-tooltip:focus-within .ds-tooltip__bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------------
   Toast
   ------------------------------------------------------------------------- */
.ds-toast {
  --_c: var(--info-600);
  display: flex; align-items: flex-start; gap: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-left: var(--sp-1) solid var(--_c);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: var(--sp-4) var(--sp-5); max-width: 420px;
}
.ds-toast--success { --_c: var(--success-600); }
.ds-toast--warning { --_c: var(--warning-600); }
.ds-toast--danger  { --_c: var(--danger-600); }
.ds-toast--info    { --_c: var(--info-600); }
.ds-toast__icon { color: var(--_c); margin-top: var(--sp-1); }
.ds-toast__body { flex: 1; min-width: 0; }
.ds-toast__title { font-weight: 600; font-size: var(--fs-body); color: var(--text-primary); }
.ds-toast__msg { font-size: var(--fs-label); color: var(--text-secondary); margin-top: var(--sp-1); }
.ds-toast__close {
  flex: none; background: transparent; border: 0; cursor: pointer; color: var(--text-muted);
  padding: var(--sp-1); border-radius: var(--r-xs); line-height: 0;
}
.ds-toast__close:hover { color: var(--text-primary); background: var(--bg-hover); }
.ds-toast__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */
.ds-tabs { display: flex; gap: var(--sp-2); border-bottom: var(--border-hairline); }
.ds-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600; color: var(--text-secondary);
  padding: var(--sp-4) var(--sp-4); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab[aria-selected="true"] { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.ds-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* -------------------------------------------------------------------------
   Dense table with sortable header look
   ------------------------------------------------------------------------- */
.ds-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--r-lg); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); background: var(--bg-surface); }
.ds-table th, .ds-table td { text-align: left; padding: var(--sp-3) var(--sp-4); }
.ds-table thead th {
  background: var(--bg-subtle); color: var(--text-secondary);
  font-weight: 600; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.ds-th-sort { cursor: pointer; user-select: none; }
.ds-th-sort__inner { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ds-th-sort .ds-icon { color: var(--text-muted); }
.ds-th-sort[aria-sort="ascending"], .ds-th-sort[aria-sort="descending"] { color: var(--brand-600); }
.ds-th-sort[aria-sort="ascending"] .ds-icon, .ds-th-sort[aria-sort="descending"] .ds-icon { color: var(--brand-600); }
.ds-table tbody td { border-bottom: var(--border-hairline); color: var(--text-primary); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--bg-hover); }
.ds-table td.ds-mono-cell { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-secondary); }

/* -------------------------------------------------------------------------
   Panel / Card
   ------------------------------------------------------------------------- */
.ds-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.ds-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ds-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-primary); }
.ds-card__body { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-body); }

/* -------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); padding: var(--sp-10) var(--sp-6);
  border: 1px dashed var(--border-default); border-radius: var(--r-lg);
  background: var(--bg-subtle);
}
.ds-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand-600) 12%, transparent); color: var(--brand-600);
}
.ds-empty__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-primary); }
.ds-empty__msg { font-size: var(--fs-body); color: var(--text-secondary); max-width: 40ch; }

/* -------------------------------------------------------------------------
   Skeleton / loading
   ------------------------------------------------------------------------- */
.ds-skeleton {
  display: block; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 37%, var(--bg-subtle) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s var(--ease) infinite;
  height: var(--sp-5);
}
.ds-skeleton--text { height: var(--fs-body); margin: var(--sp-2) 0; }
.ds-skeleton--title { height: var(--fs-h2); width: 40%; }
.ds-skeleton--block { height: var(--sp-12); }
.ds-skeleton--circle { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full); }
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ds-skeleton { animation: none; } }

/* =========================================================================
   BRAND COMPONENTS — carry the product identity
   ========================================================================= */

/* Editorial status pill — icon + label + semantic colour, NEVER colour alone. */
.ds-status {
  --_c: var(--slate-500);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-label); line-height: 1; font-weight: 600;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  color: var(--_c);
  background: color-mix(in srgb, var(--_c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
  white-space: nowrap;
}
.ds-status .ds-icon { width: 1em; height: 1em; }
.ds-status--koncept      { --_c: var(--slate-500); color: var(--text-secondary); }
.ds-status--v-recenzi    { --_c: var(--info-600); }
.ds-status--k-prepracovani { --_c: var(--danger-600); }
.ds-status--schvaleno    { --_c: var(--success-600); }
.ds-status--publikovano  { --_c: var(--success-600); color: var(--text-inverse); background: var(--success-600); border-color: transparent; }
.ds-status--zastaraly    { --_c: var(--warning-600); }

/* Source + freshness chip — source + date; fresh = success, stale = warning. */
.ds-source {
  --_c: var(--success-600);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-caption); color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
}
.ds-source__name { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-primary); font-weight: 500; }
.ds-source__sep { color: var(--border-default); }
.ds-source__date { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--_c); font-weight: 600; }
.ds-source--fresh { --_c: var(--success-600); }
.ds-source--stale { --_c: var(--warning-600); }

/* "Náš insight" first-party block + "Proč" panel — the reserved insight accent. */
.ds-insight {
  --_c: var(--insight-600);
  border: 1px solid color-mix(in srgb, var(--_c) 32%, transparent);
  border-left: var(--sp-1) solid var(--_c);
  background: color-mix(in srgb, var(--_c) 8%, transparent);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.ds-insight__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--_c); margin-bottom: var(--sp-3);
}
.ds-insight__body { color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-body); }
.ds-insight--why { background: color-mix(in srgb, var(--_c) 6%, transparent); }
.ds-insight--why .ds-insight__body { color: var(--text-secondary); }

/* Counter-argument marker — the mandatory counter-argument label. */
.ds-counter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-700); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink-700) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink-700) 40%, transparent);
}
[data-theme="dark"] .ds-counter { color: var(--text-secondary); border-color: var(--border-default); background: var(--bg-subtle); }

/* AI-slop inline warning — flagged phrase from the Czech phrase checker. */
.ds-slop {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); color: var(--warning-700);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warning-600) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning-600) 34%, transparent);
}
[data-theme="dark"] .ds-slop { color: var(--warning-600); }
.ds-slop__phrase { font-weight: 600; text-decoration: underline wavy var(--warning-600); text-underline-offset: 3px; }
.ds-slop__close { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .7; padding: 0 var(--sp-1); line-height: 0; }
.ds-slop__close:hover { opacity: 1; }
.ds-slop__close:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* GEO readiness gauge — 0–100 dial, number in the display face. */
.ds-gauge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.ds-gauge__dial { position: relative; width: 140px; height: 88px; }
.ds-gauge__track { fill: none; stroke: var(--bg-hover); stroke-width: var(--sp-4); }
.ds-gauge__value-arc { fill: none; stroke: var(--_c, var(--brand-600)); stroke-width: var(--sp-4); stroke-linecap: round; transition: stroke-dashoffset var(--dur) var(--ease); }
.ds-gauge--low  { --_c: var(--danger-600); }
.ds-gauge--mid  { --_c: var(--warning-600); }
.ds-gauge--high { --_c: var(--success-600); }
.ds-gauge__readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ds-gauge__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-l); line-height: 1; color: var(--text-primary); }
.ds-gauge__den { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-muted); }
.ds-gauge__label { font-size: var(--fs-label); font-weight: 600; color: var(--_c, var(--text-secondary)); }

/* Targeted-revision diff — mono; additions success tint, removals danger tint. */
.ds-diff { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; }
.ds-diff__row { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); align-items: baseline; }
.ds-diff__sign { flex: none; width: 1ch; font-weight: 700; }
.ds-diff__text { white-space: pre-wrap; word-break: break-word; }
.ds-diff__row--add { background: color-mix(in srgb, var(--success-600) 12%, transparent); color: var(--success-700); }
.ds-diff__row--del { background: color-mix(in srgb, var(--danger-600) 12%, transparent); color: var(--danger-700); }
.ds-diff__row--ctx { color: var(--text-secondary); }
[data-theme="dark"] .ds-diff__row--add { color: var(--success-600); }
[data-theme="dark"] .ds-diff__row--del { color: var(--danger-600); }

/* Colour ramp / swatch grid (design gallery). */
.ds-ramp { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ds-swatch { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-swatch__chip { width: 72px; height: 48px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--slate-900) 12%, transparent); box-shadow: var(--shadow-xs) inset; }
.ds-swatch__name { font-size: var(--fs-caption); color: var(--text-secondary); font-family: var(--font-mono); }

/* M-EDT.4 — the editing surface. Tailwind's preflight strips list markers and heading
   sizes, so inside the editor a list looked like three paragraphs and an H2 measured the
   same 16 px as body text: a writer could not SEE the structure they were editing. Found
   by looking at the rendered editor, not by a test. Scoped to `.prose-editor` so nothing
   else on the page changes. */
.prose-editor .ProseMirror { outline: none; }
.prose-editor h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--text-primary); margin: var(--sp-5) 0 var(--sp-2); }
.prose-editor h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; color: var(--text-primary); margin: var(--sp-4) 0 var(--sp-2); }
.prose-editor h4 { font-family: var(--font-display); font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: 700; color: var(--text-primary); margin: var(--sp-4) 0 var(--sp-2); }
.prose-editor p { margin: 0 0 var(--sp-3); font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.prose-editor li { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.prose-editor ul { list-style: disc; padding-left: var(--sp-6); margin: 0 0 var(--sp-3); }
.prose-editor li { margin: 0 0 var(--sp-1); }
.prose-editor a { color: var(--brand-700); text-decoration: underline; }
/* A structured block's fields: the KEY is visible next to every input, because three
   anonymous boxes under "stats" tell a writer nothing about which is the number. */
.ds-field-row { display: flex; gap: var(--sp-2); align-items: baseline; margin-bottom: var(--sp-1); }
.ds-field-row__key { flex: none; min-width: 7rem; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
.ds-field-row__input { flex: 1 1 auto; }


/* =========================================================================
   SHELL — the accepted Lilac workspace chrome (M-LILAC.1)
   Sidebar (fixed ≥768px, off-canvas below), topbar, destination sub-navigation,
   mobile bottom bar, the person/account menu, and the page-level primitives the
   destination screens share (page head, notice, tabs, segmented control).
   Every colour is a token; purple marks action and selection only.
   ========================================================================= */
/* Icon button, notification count and keyboard hint — PRIMITIVES, declared before every
   responsive rule that hides or shows one of them. Source order is load-bearing: a later
   `.ds-iconbtn { display: inline-flex }` beats an earlier `@media … { .ds-topbar__menu {
   display: none } }` at equal specificity, which is exactly how the hamburger stayed
   visible at 1440 px and the activity icon on a phone. Found by measuring the rendered
   page, not by a test. */
.ds-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.ds-iconbtn .ds-icon { width: 18px; height: 18px; }
.ds-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ds-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The bell: its count sits OUTSIDE the button's box, so the badge variant guarantees the
   overflow that makes it visible rather than relying on the default. */
.ds-iconbtn--badge { overflow: visible; }
.ds-count { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--danger-600); color: var(--text-inverse); font-size: 0.6875rem; font-weight: 700; line-height: 1; }
[data-theme="dark"] .ds-count { color: var(--slate-900); }
.ds-kbd { font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.4; padding: 0 var(--sp-2); border: 1px solid var(--border-default); border-radius: var(--r-xs); color: var(--text-muted); background: var(--bg-subtle); }

.ds-skip { position: fixed; left: var(--sp-5); top: -100px; z-index: 100; padding: var(--sp-3) var(--sp-5); background: var(--brand-fill); color: var(--text-inverse); border-radius: var(--r-md); font-weight: 600; }
.ds-skip:focus { top: var(--sp-4); outline: none; box-shadow: var(--focus-ring); }
.ds-impersonation { position: sticky; top: 0; z-index: 70; background: var(--warning-700); color: var(--text-inverse); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-label); }

/* The body of a page inside the shell. `ds-body` gives it the token background and face;
   this adds what only the SHELL needs — no document scroll chaining past the sidebar, and
   room under the content for the mobile bottom bar (the content's own padding reserves it,
   so this stays a marker plus the overscroll rule rather than a second padding source). */
.ds-shell-body { overscroll-behavior-y: none; }

.ds-shell { display: flex; min-height: 100vh; }
.ds-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 768px) { .ds-shell__main { margin-left: var(--sidebar-w); } }

/* Sidebar */
.ds-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar-w); max-width: 86vw;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: color-mix(in srgb, var(--bg-surface) 70%, var(--bg-app));
  border-right: 1px solid var(--border-default);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform var(--dur) var(--ease);
}
@media (min-width: 768px) { .ds-sidebar { transform: none; } }
/* A translated-offscreen navigation must not remain in the keyboard/reader order. */
@media (max-width: 767px) { html:not([data-sidebar-open]) .ds-sidebar { display: none; } }
html[data-sidebar-open] .ds-sidebar { transform: none; box-shadow: var(--shadow-lg); }
.ds-scrim { position: fixed; inset: 0; z-index: 45; border: 0; padding: 0; background: color-mix(in srgb, var(--slate-900) 40%, transparent); display: none; cursor: default; }
html[data-sidebar-open] .ds-scrim { display: block; }
@media (min-width: 768px) { html[data-sidebar-open] .ds-scrim { display: none; } }
.ds-sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ds-sidebar__close { display: inline-flex; }
@media (min-width: 768px) { .ds-sidebar__close { display: none; } }
.ds-brand { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.ds-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-brand__img { height: 24px; width: auto; }
.ds-wscard { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-surface); }
.ds-wscard__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-text); font-weight: 700; }
.ds-wscard__meta { display: flex; flex-direction: column; min-width: 0; }
.ds-wscard__name { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-wscard__role { font-size: var(--fs-caption); color: var(--text-secondary); }
.ds-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-nav__item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 42px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md); color: var(--text-secondary); font-weight: 500; font-size: var(--fs-body);
  text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-nav__item .ds-icon { width: 18px; height: 18px; flex: none; }
.ds-nav__item:hover { background: var(--brand-soft); color: var(--brand-text); }
.ds-nav__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand-soft-border); }
.ds-nav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-nav__item--sub { min-height: 36px; font-size: var(--fs-label); padding-left: var(--sp-4); }
.ds-nav__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-nav__hint { font-size: var(--fs-caption); color: var(--text-muted); flex: none; }
.ds-nav__label { display: block; font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.ds-saved { margin: 0; }
.ds-saved__summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ds-saved__summary::-webkit-details-marker { display: none; }
.ds-saved__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.ds-saved__count { color: var(--text-secondary); font-weight: 600; }
.ds-saved__none { margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ds-sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--border-default); }
.ds-person-wrap { position: relative; }
.ds-person { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; font: inherit; }
.ds-person:hover { background: var(--bg-hover); }
.ds-person:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-person[aria-expanded="true"] { background: var(--bg-hover); }
.ds-person__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ds-person__name { font-weight: 600; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-person__role { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-person__chevron { color: var(--text-muted); flex: none; }
.ds-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .02em; }
.ds-avatar--sm { width: 24px; height: 24px; font-size: 0.6875rem; }
.ds-avatar--btn { border: 1px solid var(--brand-soft-border); cursor: pointer; font: inherit; font-weight: 700; font-size: var(--fs-caption); }
.ds-avatar--btn:hover { filter: brightness(.97); }
.ds-avatar--btn:focus-visible, .ds-avatar--btn[aria-expanded="true"] { outline: none; box-shadow: var(--focus-ring); }

/* Menus (dropdowns driven by shell.js [data-dd]) */
.ds-menu {
  position: absolute; z-index: 60; min-width: 248px; max-width: min(320px, 92vw);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-2);
  visibility: hidden; opacity: 0; transform: translateY(4px) scale(.98);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.ds-menu[data-open] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ds-menu--up { bottom: calc(100% + var(--sp-2)); left: 0; }
.ds-menu--right { top: calc(100% + var(--sp-2)); right: 0; }
.ds-menu__head { padding: var(--sp-3) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border-default); margin-bottom: var(--sp-2); }
.ds-menu__who { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-menu__eyebrow { font-size: var(--fs-caption); color: var(--text-muted); }
.ds-menu__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-body); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.ds-menu__item .ds-icon { width: 16px; height: 16px; color: var(--text-secondary); flex: none; }
.ds-menu__item:hover { background: var(--bg-hover); }
.ds-menu__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-menu__item--danger:hover { background: color-mix(in srgb, var(--danger-600) 10%, transparent); color: var(--danger-700); }
.ds-menu__section { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-default); margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }

/* Topbar */
.ds-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--topbar-h); padding: 0 var(--sp-6); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
@media (max-width: 767px) { .ds-topbar { padding: 0 var(--sp-4); } }
.ds-topbar__menu { display: inline-flex; }
@media (min-width: 768px) { .ds-topbar__menu { display: none; } }
.ds-topbar__crumbs { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-label); color: var(--text-secondary); }
.ds-topbar__crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-topbar__crumb--current { color: var(--text-primary); font-weight: 600; }
.ds-topbar__sep { color: var(--text-muted); }
@media (max-width: 480px) { .ds-topbar__crumb:not(.ds-topbar__crumb--current), .ds-topbar__crumbs .ds-topbar__sep { display: none; } }
.ds-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.ds-topbar__search { position: relative; display: none; align-items: center; }
@media (min-width: 1024px) { .ds-topbar__search { display: flex; } }
.ds-topbar__search-icon { position: absolute; left: var(--sp-3); color: var(--text-muted); display: inline-flex; pointer-events: none; }
.ds-topbar__search-icon .ds-icon { width: 16px; height: 16px; }
.ds-topbar__search-input { width: 15rem; padding-left: var(--sp-8); padding-right: var(--sp-9); }
@media (min-width: 1280px) { .ds-topbar__search-input { width: 18rem; } }
.ds-topbar__search .ds-kbd { position: absolute; right: var(--sp-3); pointer-events: none; }
.ds-topbar__new .ds-icon { width: 16px; height: 16px; }
@media (max-width: 767px) { .ds-topbar__new-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ds-topbar__new { padding: var(--sp-3); } }
.ds-topbar__activity { display: none; }
@media (min-width: 768px) { .ds-topbar__activity { display: inline-flex; } }
.ds-topbar__account { position: relative; display: inline-flex; }
@media (min-width: 768px) { .ds-topbar__account { display: none; } }

/* Destination sub-navigation */
.ds-subnav { display: flex; gap: var(--sp-1); padding: 0 var(--sp-6); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.ds-subnav::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .ds-subnav { padding: 0 var(--sp-4); } }
.ds-subnav__item { flex: none; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) - 2px); border-bottom: 2px solid transparent; font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.ds-subnav__item:hover { color: var(--text-primary); }
.ds-subnav__item[aria-current="page"] { color: var(--brand-600); border-color: var(--brand-600); font-weight: 600; }
.ds-subnav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* Content */
.ds-content { flex: 1 1 auto; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-10); }
.ds-content:focus { outline: none; }
@media (max-width: 767px) { .ds-content { padding: var(--sp-5) var(--sp-4) calc(var(--bottom-nav-h) + var(--sp-8)); } }
.ds-content--wide { max-width: none; }

/* Mobile bottom bar */
.ds-bottom-nav { display: none; }
@media (max-width: 767px) {
  .ds-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: var(--bottom-nav-h); padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--bg-surface); border-top: 1px solid var(--border-default); }
}
.ds-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 48px; border-radius: var(--r-md); font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.ds-bottom-nav__item .ds-icon { width: 20px; height: 20px; }
.ds-bottom-nav__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.ds-bottom-nav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Page head, notice, tabs, segmented — the primitives the destination screens share */
.ds-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ds-page-head__title { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.02em; color: var(--text-primary); margin: 0; }
.ds-page-head__sub { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--sp-1) 0 0; max-width: 64ch; }
.ds-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ds-notice { --_c: var(--slate-500); display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent); background: color-mix(in srgb, var(--_c) 9%, transparent); color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-body); }
.ds-notice--brand { --_c: var(--brand-600); }
.ds-notice--info { --_c: var(--info-600); }
.ds-notice--success { --_c: var(--success-600); }
.ds-notice--warning { --_c: var(--warning-600); }
.ds-notice--danger { --_c: var(--danger-600); }
.ds-notice__icon { color: var(--_c); flex: none; margin-top: 2px; display: inline-flex; }
.ds-notice__body { min-width: 0; flex: 1 1 auto; }
.ds-notice__title { font-weight: 600; }
.ds-notice__text { color: var(--text-secondary); }
.ds-notice__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.ds-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-5); }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs__item { flex: none; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) - 2px); border-bottom: 2px solid transparent; font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.ds-tabs__item:hover { color: var(--text-primary); }
.ds-tabs__item[aria-current="page"], .ds-tabs__item[aria-selected="true"] { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }
.ds-tabs__item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.ds-tabs__count { margin-left: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; }
.ds-segmented { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); }
.ds-segmented__item { padding: var(--sp-2) var(--sp-4); min-height: 32px; display: inline-flex; align-items: center; gap: var(--sp-2); border: 0; background: transparent; font: inherit; font-size: var(--fs-label); font-weight: 500; color: var(--text-secondary); text-decoration: none; cursor: pointer; }
.ds-segmented__item + .ds-segmented__item { border-left: 1px solid var(--border-default); }
.ds-segmented__item:hover { color: var(--text-primary); background: var(--bg-hover); }
.ds-segmented__item[aria-pressed="true"], .ds-segmented__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.ds-segmented__item:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.ds-hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* Account entry — the split layout (M-LILAC.1) */
.ds-auth--split { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; align-items: stretch; }
@media (min-width: 900px) { .ds-auth--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.ds-auth__brand { display: none; }
@media (min-width: 900px) {
  .ds-auth__brand { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); padding: var(--sp-12) var(--sp-10); background: var(--brand-soft); color: var(--text-primary); }
}
.ds-auth__brand-logo { align-self: flex-start; height: 28px; width: auto; margin-bottom: var(--sp-8); }
.ds-auth__headline { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l); line-height: 1.15; letter-spacing: -.03em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.ds-auth__lead { color: var(--text-secondary); font-size: var(--fs-body-l); line-height: var(--lh-body-l); margin: 0; max-width: 44ch; }
.ds-auth__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); max-width: 420px; }
.ds-auth__minicard { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--brand-soft-border); border-radius: var(--r-lg); }
.ds-auth__minicard p { margin: 0; font-size: var(--fs-label); color: var(--text-secondary); }
.ds-auth__footer { margin: var(--sp-8) 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.ds-auth__pane { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-5); background: var(--bg-surface); min-height: 100vh; }
.ds-auth__card--plain { text-align: left; max-width: 400px; }
.ds-auth__card--plain .ds-auth__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.02em; }
.ds-auth__logo--mobile { margin: 0 0 var(--sp-8); }
@media (min-width: 900px) { .ds-auth__card .ds-auth__logo--mobile { display: none; } }
.ds-auth__form { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.ds-auth__aside { margin: var(--sp-3) 0 0; font-size: var(--fs-label); }
.ds-auth__or { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-muted); font-size: var(--fs-caption); }
.ds-auth__or::before, .ds-auth__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-default); }

@media (prefers-reduced-motion: reduce) {
  .ds-sidebar, .ds-menu, .ds-nav__item { transition: none; }
}


/* =========================================================================
   BOARD — the editorial columns and their cards (M-LILAC.2)
   Neutral columns carry the work; purple marks the action and the selection.
   The card's layout is one grid so a long title, a missing owner and a card
   with no next action all end up the same height as their neighbours.
   ========================================================================= */
/* M-PARITY.2: five columns at the reference's 224px minimum, scrolling sideways when the
   viewport is narrower than five of them (the reference's `.kanban { overflow-x: auto }`),
   one column on a phone with the stage-jump row above. The 2-column reflow that used to sit
   between 768 and 1279px hid two stages below the fold on every tablet. */
.ds-board { display: grid; gap: var(--sp-4); grid-template-columns: repeat(5, minmax(224px, 1fr)); align-items: start; overflow-x: auto; padding-bottom: var(--sp-2); }
@media (max-width: 767px) { .ds-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; } }
.ds-column { display: flex; flex-direction: column; min-height: 7rem; border-radius: var(--r-lg); background: var(--bg-subtle); border: 1px solid var(--border-default); }
.ds-column__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.ds-column__name { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-body); font-weight: 650; letter-spacing: -.01em; color: var(--text-primary); margin: 0; }
.ds-column__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-full); background: var(--bg-surface); border: 1px solid var(--border-default); font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); }
.ds-column__toggle { font-size: var(--fs-caption); color: var(--text-muted); text-decoration: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.ds-column__toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.ds-column__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-column__cards { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }
.ds-column__empty { padding: var(--sp-6) var(--sp-3); text-align: center; font-size: var(--fs-caption); color: var(--text-muted); }

.ds-card-article { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.ds-card-article:hover { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.ds-card-article:focus-within { border-color: var(--brand-300); }
.ds-card-article__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ds-card-article__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.45; color: var(--text-primary); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-card-article__title:hover { color: var(--brand-text); }
.ds-card-article__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-card-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); }
.ds-card-article__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); }
.ds-card-article__who { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ds-card-article__who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-card-article__when { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Four-step progress: dots, never a bar — a bar implies a percentage nobody measured. */
.ds-progress { display: flex; align-items: center; gap: var(--sp-2); }
.ds-progress__dot { height: 4px; width: 20px; border-radius: var(--r-full); background: var(--bg-hover); }
.ds-progress__dot--done { background: var(--brand-fill); }
.ds-progress__label { font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* The card's one verb. A decision LOOKS like a way to a screen (a chevron), a command like
   a button, because a control that promises the wrong one is how somebody approves by
   accident. */
.ds-card-action { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--fs-label); font-weight: 600; text-decoration: none; cursor: pointer; }
.ds-card-action:hover { background: var(--brand-soft); border-color: var(--brand-soft-border); color: var(--brand-text); }
.ds-card-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-card-action .ds-icon { width: 15px; height: 15px; flex: none; }
.ds-card-action--primary { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--text-inverse); }
.ds-card-action--primary:hover { background: var(--brand-fill-hover); border-color: var(--brand-fill-hover); color: var(--text-inverse); }
.ds-card-action--muted { color: var(--text-muted); font-weight: 500; border-style: dashed; cursor: default; }
.ds-card-action--muted:hover { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-muted); }

/* The keyboard equivalent of the drag (WCAG 2.2): every move OUT of this column, refusals
   included, because a control that vanishes when unavailable teaches nothing. */
.ds-moves { margin: 0; }
.ds-moves__summary { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; font-size: var(--fs-caption); color: var(--text-muted); padding: var(--sp-1) 0; }
.ds-moves__summary::-webkit-details-marker { display: none; }
.ds-moves__summary:hover { color: var(--text-primary); }
.ds-moves__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-moves__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-moves__refused { display: block; font-size: var(--fs-caption); color: var(--text-muted); padding: var(--sp-1) 0; }


/* Feed rows (notifications, M-LILAC.3). An unread row is marked by a dot AND a tinted
   surface — never by colour alone, and never by weight alone either. */
.ds-feed { list-style: none; margin: 0; padding: 0; }
.ds-feed__row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-default); }
.ds-feed__row:last-child { border-bottom: 0; }
.ds-feed__row--unread { background: color-mix(in srgb, var(--brand-600) 5%, transparent); }
.ds-feed__dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: var(--r-full); background: var(--border-default); }
.ds-feed__dot--unread { background: var(--brand-fill); }
.ds-feed__body { flex: 1 1 auto; min-width: 0; }
.ds-feed__title { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); text-decoration: none; }
.ds-feed__title:hover { color: var(--brand-text); text-decoration: underline; }
.ds-feed__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-feed__meta { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin-top: var(--sp-1); }
.ds-feed__action { flex: none; }


/* The invitation's facts, before anything is spent (M-LILAC.3). */
.ds-invite { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: var(--sp-5); border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-subtle); text-align: left; }
.ds-invite > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.ds-invite dt { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }
.ds-invite dd { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ds-invite__email { font-weight: 500; }


/* =========================================================================
   LISTS — the shape most destination screens are (M-LILAC.6)
   One row primitive: a severity/kind mark, a title that is the link, one line
   of supporting facts, and one right-hand fact or control. Used by the inbox,
   the article queue, tasks and requests, so those four cannot drift apart.
   ========================================================================= */
.ds-list { list-style: none; margin: 0; padding: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; }
.ds-list__row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-default); }
.ds-list__row:last-child { border-bottom: 0; }
.ds-list__row:hover { background: var(--bg-subtle); }
.ds-list__mark { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: var(--r-full); background: var(--border-default); }
.ds-list__mark--danger { background: var(--danger-600); }
.ds-list__mark--warning { background: var(--warning-600); }
.ds-list__mark--info { background: var(--info-600); }
.ds-list__mark--success { background: var(--success-600); }
.ds-list__mark--brand { background: var(--brand-fill); }
.ds-list__body { flex: 1 1 auto; min-width: 0; }
.ds-list__title { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); text-decoration: none; }
a.ds-list__title:hover { color: var(--brand-text); text-decoration: underline; }
a.ds-list__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-list__meta { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin-top: var(--sp-1); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.ds-list__aside { flex: none; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .ds-list__row { flex-wrap: wrap; }
  .ds-list__aside { width: 100%; padding-left: calc(8px + var(--sp-4)); }
}

/* Filter chips — a closed set of narrowings, the current one marked. */
.ds-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.ds-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); min-height: 32px; border: 1px solid var(--border-default); border-radius: var(--r-full); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--fs-label); font-weight: 500; text-decoration: none; }
.ds-chip:hover { border-color: var(--brand-soft-border); color: var(--brand-text); }
.ds-chip[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand-soft-border); color: var(--brand-text); font-weight: 600; }
.ds-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }


/* The article workspace's head (M-LILAC.8): one place for what the article IS — its state,
   who owns it, who reviews it, when it is meant to go out and where it goes. */
.ds-article-head { margin-bottom: var(--sp-5); }
.ds-article-head__back { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); color: var(--text-secondary); text-decoration: none; padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; }
.ds-article-head__back:hover { color: var(--brand-text); }
.ds-article-head__back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.ds-article-head__back .ds-icon { width: 15px; height: 15px; }
.ds-article-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-2); }
.ds-article-head__main { min-width: 0; }
.ds-article-head__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--fs-label); color: var(--text-secondary); }

/* =========================================================================
   THE ARTICLE WORKSPACE LAYOUT (M-PARITY.1) — tool row, paper, inspector, publishing facts.
   The accepted design (design-reference/workspace-article.css): the document first on a
   paper that leaves its rendering alone; a 340px inspector beside it, sticky; one tool row
   that holds the single act the state offers. Tokens only — dark mode comes for free.
   ========================================================================= */
.ds-toolrow {
  position: sticky; top: var(--topbar-h); z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "status tools actions" "help help help";
  align-items: center; column-gap: var(--sp-5); row-gap: var(--sp-2);
  padding: var(--sp-3) 0; margin: 0 0 var(--sp-5);
  background: var(--bg-app); border-bottom: 1px solid var(--border-default);
}
/* The status fragment is ONE element for htmx and three cells for the grid. */
.ds-toolrow__frag { display: contents; }
.ds-toolrow__status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; }
.ds-toolrow__step { font-size: var(--fs-caption); color: var(--text-muted); }
.ds-toolrow__step b { color: var(--text-primary); font-weight: 600; }
.ds-toolrow__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; }
.ds-toolrow__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.ds-toolrow__help { grid-area: help; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); }
.ds-toolrow__help .ds-hint { margin: 0; }
.ds-toolrow__hint--warning { color: var(--warning-700); }
.ds-toolrow__hint--success { color: var(--success-700); }
.ds-toolrow__hint--danger { color: var(--danger-600); }
.ds-toolrow__hint--brand { color: var(--brand-text); }
.ds-toolrow__running { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); font-weight: 500; color: var(--info-600); }
.ds-toolrow__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ds-toolrow__url { width: 18rem; max-width: 100%; font-size: var(--fs-caption); }
@media (max-width: 850px) {
  .ds-toolrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "tools" "actions" "help"; }
  .ds-toolrow__actions { justify-content: stretch; }
  .ds-toolrow__actions > .ds-btn, .ds-toolrow__actions > form, .ds-toolrow__actions > .ds-popover-host { flex: 1 1 auto; }
  .ds-toolrow__actions .ds-btn--primary, .ds-toolrow__actions .ds-btn--success, .ds-toolrow__actions .ds-popover-host > summary { width: 100%; justify-content: center; }
  .ds-toolrow__url { width: 100%; }
}

/* A disclosure that floats: the summary is a button in the row, the content a card below
   it. No JavaScript; Escape is the summary again. On a phone it opens in place. */
.ds-popover-host { position: relative; display: inline-block; }
.ds-popover-host > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ds-popover-host > summary::-webkit-details-marker { display: none; }
.ds-popover-host > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-popover-host[open] > summary { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border); }
.ds-popover {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: 35;
  min-width: 20rem; width: max-content; max-width: min(28rem, calc(100vw - 2 * var(--sp-5)));
  padding: var(--sp-5); display: grid; gap: var(--sp-4); text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.ds-popover--wide { max-width: min(36rem, calc(100vw - 2 * var(--sp-5))); }
.ds-toolrow__tools .ds-popover { right: auto; left: 0; }
.ds-popover__form { display: grid; gap: var(--sp-4); }
.ds-popover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
@media (max-width: 850px) {
  .ds-popover-host { display: block; }
  .ds-popover, .ds-toolrow__tools .ds-popover { position: static; width: auto; min-width: 0; max-width: none; margin-top: var(--sp-3); box-shadow: var(--shadow-sm); }
}

/* Document + inspector. */
.ds-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7); align-items: start; }
@media (min-width: 1600px) { .ds-article-layout { grid-template-columns: minmax(0, 1fr) 370px; gap: var(--sp-9); } }
@media (max-width: 1100px) { .ds-article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); } }
@media (max-width: 850px) { .ds-article-layout { grid-template-columns: minmax(0, 1fr); } }
.ds-article-layout[data-tool="read"] { grid-template-columns: minmax(0, 1fr); max-width: 1060px; margin-inline: auto; }
.ds-article-layout[data-tool="read"] .ds-inspector,
.ds-article-layout[data-tool="read"] .ds-inspector-jump { display: none; }

.ds-paper { min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ds-paper__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); font-size: var(--fs-caption); color: var(--text-secondary); }
.ds-paper__label { font-weight: 600; color: var(--text-primary); }
.ds-paper__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
/* The body constrains ITSELF to the reading measure; nothing here reaches into the render. */
.ds-paper__body { max-width: calc(810px + 2 * var(--sp-8)); margin-inline: auto; padding: var(--sp-8) var(--sp-8) var(--sp-10); }
.ds-paper__empty { color: var(--text-muted); font-style: italic; }
@media (max-width: 850px) { .ds-paper__body { padding: var(--sp-6) var(--sp-5) var(--sp-8); } }
.ds-inspector-jump { display: none; }
@media (max-width: 850px) { .ds-inspector-jump { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--brand-text); font-weight: 600; text-decoration: none; } }

.ds-inspector {
  position: sticky; top: calc(var(--topbar-h) + var(--toolrow-h, 64px) + var(--sp-4));
  max-height: calc(100dvh - var(--topbar-h) - var(--toolrow-h, 64px) - var(--sp-8));
  overflow: auto; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--topbar-h) + var(--toolrow-h, 64px) + var(--sp-4));
}
@media (max-width: 850px) { .ds-inspector { position: static; max-height: none; overflow: visible; } }
.ds-inspector__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.ds-inspector__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-primary); margin: 0; }
.ds-inspector__sub { font-size: var(--fs-caption); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.ds-inspector__mark { color: var(--brand-600); width: 18px; height: 18px; flex: none; margin-top: var(--sp-1); }
.ds-inspector__tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-3); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.ds-inspector__tabs::-webkit-scrollbar { display: none; }
.ds-inspector__tabs .ds-tabs__item { font-size: var(--fs-label); padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) - 2px); }
.ds-inspector__panel { display: flex; flex-direction: column; }
.ds-inspector__panel[hidden] { display: none; }
.ds-inspector__section { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-default); display: grid; gap: var(--sp-2); }
.ds-inspector__section:last-child { border-bottom: 0; }
.ds-inspector__section > .ds-hint { margin: 0; }
.ds-inspector__h { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); margin: 0; }
.ds-inspector__count { font-weight: 500; color: var(--text-muted); font-size: var(--fs-caption); }
.ds-inspector__list { display: flex; flex-direction: column; }
.ds-inspector__list--scroll { max-height: 24rem; overflow-y: auto; }
.ds-inspector__item { padding: var(--sp-3) 0; border-top: var(--border-hairline); font-size: var(--fs-label); }
.ds-inspector__item:first-child { border-top: 0; }
.ds-article-diff { margin-top: var(--sp-6); }

/* Publishing: three numbered facts and a presentation aside. */
.ds-pub { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7); align-items: start; }
@media (max-width: 1100px) { .ds-pub { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); } }
@media (max-width: 850px) { .ds-pub { grid-template-columns: minmax(0, 1fr); } }
.ds-pub__main { display: grid; gap: var(--sp-5); min-width: 0; }
.ds-pub__head .ds-h2 { margin: 0; }
.ds-pub__head .ds-hint { margin: var(--sp-1) 0 0; }
.ds-pub__fact { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.ds-pub__n { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: var(--fs-label); margin-top: var(--sp-3); }
.ds-pub__card { min-width: 0; }
.ds-pub__aside { display: grid; gap: var(--sp-5); min-width: 0; }
@media (max-width: 850px) {
  .ds-pub__fact { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--sp-3); }
  .ds-pub__n { width: 1.75rem; height: 1.75rem; font-size: var(--fs-caption); }
}
.ds-popover--form { min-width: 22rem; }
.ds-toolrow__details > summary { gap: var(--sp-1); }
.ds-toolrow__details[open] .ds-icon { transform: rotate(180deg); }
/* The inspector is a flex column that SCROLLS; its children must not shrink to make room —
   a scroll container child (the tab strip, overflow-x: auto) has min-height 0 and collapsed
   to its 1px border while the panels kept their height. Found by measuring the rendered
   strip (1px tall, 30px of content); no pin could see it. */
.ds-inspector > * { flex: none; }
.ds-pub--single { grid-template-columns: minmax(0, 1fr); max-width: 880px; }

/* =========================================================================
   THE EDITORIAL HOME (M-PARITY.2) — the calendar week above the pipeline, the pipeline's
   toolbar, a wide five-column board. Reference: design-reference/v2.css `.calendar-panel`,
   `.week-grid`, `.board-section`, `.kanban`. Tokens only.
   ========================================================================= */
.ds-board-page .ds-content { max-width: none; }

.ds-context-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-default); margin-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.ds-context-tabs::-webkit-scrollbar { display: none; }
.ds-context-tabs__item { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) - 2px); border-bottom: 2px solid transparent; font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.ds-context-tabs__item:hover { color: var(--text-primary); }
.ds-context-tabs__item[aria-current="page"] { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }
.ds-context-tabs__item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* The week. */
.ds-week { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-7); }
.ds-week__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-default); }
.ds-week__period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); }
.ds-week__period strong { color: var(--text-primary); font-family: var(--font-display); font-weight: 650; white-space: nowrap; margin-right: var(--sp-2); }
.ds-week__view { display: flex; align-items: center; gap: var(--sp-4); }
.ds-week__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ds-day { min-width: 0; min-height: 9rem; padding: 0 var(--sp-3) var(--sp-3); border-right: 1px solid var(--border-default); background: var(--bg-surface); }
.ds-day:last-child { border-right: 0; }
.ds-day--weekend { background: var(--bg-subtle); }
.ds-day--today { background: var(--brand-soft); box-shadow: inset 0 2px 0 var(--brand-600); }
.ds-day__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-1) var(--sp-3); }
.ds-day__wd { font-size: var(--fs-caption); color: var(--text-muted); }
.ds-day__num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; line-height: 1; color: var(--text-primary); letter-spacing: -.02em; }
.ds-day--today .ds-day__num { color: var(--brand-600); }
.ds-day__today { font-size: var(--fs-caption); color: var(--brand-text); font-weight: 600; margin-left: auto; }
.ds-day__plus { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-muted); text-decoration: none; font-size: var(--fs-label); line-height: 1; }
.ds-day__today + .ds-day__plus { margin-left: 0; }
.ds-day__plus:hover { color: var(--brand-text); border-color: var(--brand-soft-border); }
.ds-day__plus:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-day__events { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-event { --_c: var(--slate-500); display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent); background: color-mix(in srgb, var(--_c) 9%, var(--bg-surface)); color: var(--text-primary); text-decoration: none; font-size: var(--fs-caption); line-height: var(--lh-caption); min-width: 0; }
.ds-event:hover { border-color: var(--_c); }
.ds-event:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-event--generation { --_c: var(--info-600); }
.ds-event--target { --_c: var(--brand-600); }
.ds-event--task { --_c: var(--warning-600); }
.ds-event--published { --_c: var(--success-600); }
.ds-event__kind { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: color-mix(in srgb, var(--_c) 75%, var(--text-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-event__kind time { font-variant-numeric: tabular-nums; }
.ds-event__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--text-secondary); }
.ds-event--compact { display: block; padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1); }
.ds-event--compact .ds-event__title { display: block; white-space: nowrap; text-overflow: ellipsis; color: var(--text-primary); }
.ds-day__more, .ds-day__empty { font-size: var(--fs-caption); color: var(--text-muted); text-decoration: none; padding: var(--sp-1); }
.ds-day__more:hover, .ds-day__empty:hover { color: var(--brand-text); }
.ds-day__empty { opacity: 0; }
.ds-day:hover .ds-day__empty, .ds-day__empty:focus-visible { opacity: 1; }
.ds-week__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--border-default); font-size: var(--fs-caption); }
.ds-week__foot .ds-hint { margin: 0; }
@media (max-width: 767px) {
  .ds-week__bar { padding: var(--sp-3) var(--sp-4); }
  .ds-week__grid { display: block; }
  .ds-day { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--sp-3); min-height: 0; padding: var(--sp-3) var(--sp-4); border-right: 0; border-top: 1px solid var(--border-default); }
  .ds-day--today { box-shadow: inset 2px 0 0 var(--brand-600); }
  .ds-day__head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: 0; }
  .ds-day__today, .ds-day__plus { margin-left: 0; }
  .ds-day__events { align-self: center; }
  .ds-day__empty { opacity: 1; }
}

/* The pipeline's toolbar, the stage jumps, the footnote. */
.ds-pipeline-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); }
.ds-pipeline-bar__title-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ds-pipeline-bar__title { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.01em; color: var(--text-primary); margin: 0; }
.ds-pipeline-bar__count { font-size: var(--fs-label); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.ds-pipeline-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ds-pipeline-bar__search { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); }
.ds-pipeline-bar__search .ds-input { width: 14rem; max-width: 100%; }
@media (max-width: 640px) { .ds-pipeline-bar__search { flex-wrap: wrap; } .ds-pipeline-bar__search .ds-input { width: 100%; } }
.ds-stage-nav { display: none; }
@media (max-width: 767px) {
  .ds-stage-nav { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--sp-3); }
  .ds-stage-nav__item { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 34px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--r-sm); background: var(--bg-surface); font-size: var(--fs-caption); color: var(--text-primary); text-decoration: none; }
  .ds-stage-nav__item span { color: var(--text-muted); }
}
.ds-board-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.ds-board-foot .ds-icon { width: 14px; height: 14px; flex: none; }

/* =========================================================================
   BOARD DRAG (M-PARITY.3) — what a pointer sees while it drags a card. The two rules that
   sat here before (`[data-dragging="true"]`, `.ds-column--drop`) were never set by any
   script since M-BRD.1: dead CSS, found by reading `shell.js` for who wrote them.
   ========================================================================= */
.ds-card-article[data-draggable="true"] { cursor: grab; }
.ds-card-article[data-dragging] { opacity: .45; cursor: grabbing; }
body[data-drag-active] { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ds-drag-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: .94; transform: rotate(1.5deg); box-shadow: var(--shadow-lg); }
.ds-column__cards[data-drop] { border-radius: var(--r-md); outline-offset: -4px; min-height: 5rem; }
.ds-column__cards[data-drop="legal"] { outline: 2px dashed var(--brand-300); background: color-mix(in srgb, var(--brand-600) 8%, transparent); }
.ds-column__cards[data-drop="legal"][data-drop-hover] { outline: 2px solid var(--brand-600); background: color-mix(in srgb, var(--brand-600) 16%, transparent); }
.ds-column__cards[data-drop="refused"], .ds-column__cards[data-drop="unknown"] { outline: 2px dashed var(--border-default); cursor: not-allowed; }
.ds-column__cards[data-drop="refused"] > .ds-card-article, .ds-column__cards[data-drop="unknown"] > .ds-card-article { opacity: .55; }
.ds-column__cards[data-drop="refused"][data-drop-hover] { outline-color: var(--danger-600); }
@media (prefers-reduced-motion: no-preference) {
  .ds-column__cards { transition: background-color var(--dur-fast) var(--ease), outline-color var(--dur-fast) var(--ease); }
}

/* =========================================================================
   SETTINGS (M-PARITY.4) — one page head, a section rail, a white panel. Reference:
   design-reference/lilac-settings-desktop.png, `.settings-layout` / `.section-navigation`.
   ========================================================================= */
.ds-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.ds-rail { display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }
.ds-rail__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); color: var(--text-secondary); font-size: var(--fs-body); font-weight: 500; text-decoration: none; }
.ds-rail__item .ds-icon { width: 18px; height: 18px; flex: none; }
.ds-rail__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.ds-rail__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.ds-rail__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-content: start; align-items: start; min-width: 0; padding: var(--sp-7); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ds-panel > * { grid-column: 1 / -1; min-width: 0; }
.ds-panel > .ds-panel__head { grid-column: 1; margin: 0; }
.ds-panel > .ds-panel__actions { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.ds-panel__title { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.02em; color: var(--text-primary); margin: 0; }
.ds-panel__sub { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--sp-1) 0 0; max-width: 64ch; }
.ds-panel .ds-card { box-shadow: none; }
.ds-panel .ds-stack > .ds-card:first-child, .ds-panel > .ds-card:first-of-type { margin-top: 0; }
@media (max-width: 900px) {
  .ds-settings { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ds-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ds-rail__item { border: 1px solid var(--border-default); background: var(--bg-surface); padding: var(--sp-3); font-size: var(--fs-label); }
  .ds-panel { padding: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
  .ds-panel > .ds-panel__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* The overview panel's section rows (the hub). */
.ds-hub-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3) var(--sp-6); padding: var(--sp-5) 0; border-top: var(--border-hairline); }
.ds-hub-row:first-of-type { border-top: 0; padding-top: 0; }
.ds-hub-row__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-primary); margin: 0; }
.ds-hub-row__desc { font-size: var(--fs-caption); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.ds-hub-row__summary { font-size: var(--fs-label); color: var(--text-secondary); margin: 0 0 var(--sp-3); }
.ds-hub-row__links { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ds-hub-row__links li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body); }
@media (max-width: 640px) { .ds-hub-row { grid-template-columns: minmax(0, 1fr); } }

/* Connections: the cards, the destination stepper, the choice grid. */
.ds-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.ds-conn { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--bg-surface); min-width: 0; }
.ds-conn--active { grid-column: 1 / -1; }
.ds-conn__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ds-conn__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-text); }
.ds-conn__icon .ds-icon { width: 18px; height: 18px; }
.ds-conn__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-primary); margin: 0; }
.ds-conn__provider { font-size: var(--fs-caption); color: var(--text-muted); }
.ds-conn__note { font-size: var(--fs-label); color: var(--text-secondary); margin: 0; }
.ds-conn__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: auto; }
.ds-conn__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); font-size: var(--fs-label); margin: 0; }
.ds-conn__facts dt { color: var(--text-muted); }
.ds-conn__facts dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.ds-setup { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border-default); }
.ds-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ds-stepper__step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-default); border-radius: var(--r-md); font-size: var(--fs-label); color: var(--text-secondary); background: var(--bg-subtle); }
.ds-stepper__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--bg-surface); border: 1px solid var(--border-default); font-weight: 700; font-size: var(--fs-caption); color: var(--text-secondary); flex: none; }
.ds-stepper__step--current { background: var(--brand-soft); border-color: var(--brand-soft-border); color: var(--brand-text); font-weight: 600; }
.ds-stepper__step--current .ds-stepper__n { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--text-inverse); }
.ds-stepper__step--done { color: var(--text-primary); }
.ds-stepper__step--done .ds-stepper__n { background: var(--success-600); border-color: var(--success-600); color: var(--text-inverse); }
@media (max-width: 640px) { .ds-stepper { grid-template-columns: minmax(0, 1fr); } }
.ds-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ds-choice-card { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-surface); cursor: pointer; }
.ds-choice-card:hover { border-color: var(--brand-soft-border); }
.ds-choice-card:has(input:checked) { border-color: var(--brand-600); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-600); }
.ds-choice-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.ds-choice-card input { margin-top: 3px; accent-color: var(--brand-600); }
.ds-choice-card__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--bg-subtle); border: 1px solid var(--border-default); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); color: var(--text-secondary); }
.ds-choice-card__name { display: block; font-weight: 600; color: var(--text-primary); font-size: var(--fs-body); }
.ds-choice-card__note { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 640px) { .ds-choice-grid { grid-template-columns: minmax(0, 1fr); } }
.ds-rail__item--locked { color: var(--text-muted); cursor: default; }
.ds-rail__item--locked:hover { background: transparent; color: var(--text-muted); }
/* A panel's prose never widens the page: the llms.txt URL (one unbreakable token) made the
   presentation cards' min-content wider than a 320px viewport — measured 3px of horizontal
   overflow at 320 and 2px at 1024, invisible to every pin. */
.ds-panel p, .ds-panel dd, .ds-panel li, .ds-panel code, .ds-panel .ds-hint { overflow-wrap: anywhere; }
.ds-panel .grid > *, .ds-panel .ds-stack > *, .ds-panel .ds-setup > * { min-width: 0; }
.ds-panel textarea.ds-input { width: 100%; min-width: 0; max-width: 100%; }

/* =========================================================================
   TEAM & ACCESS (M-PARITY.5) — a roster, not a table. Reference: team-1440/390/320.png.
   ========================================================================= */
.ds-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-roster__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: var(--border-hairline); }
.ds-roster__row:first-child { border-top: 0; padding-top: 0; }
.ds-roster__id { display: grid; gap: 2px; min-width: 0; }
.ds-roster__id strong { font-size: var(--fs-body); color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.ds-roster__you { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; margin-left: var(--sp-1); }
.ds-roster__meta { font-size: var(--fs-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.ds-roster__work { font-size: var(--fs-caption); color: var(--text-secondary); }
.ds-roster__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.ds-roster__actions .ds-popover { right: 0; left: auto; }
.ds-roster__empty { padding: var(--sp-6) 0; color: var(--text-muted); font-size: var(--fs-body); }
.ds-role-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border-default); }
.ds-role-guide__role { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); color: var(--text-primary); margin: 0 0 var(--sp-1); }
.ds-role-guide .ds-hint { margin: 0; }
@media (max-width: 640px) {
  .ds-roster__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar id" "badge actions"; }
  .ds-roster__row > .ds-avatar { grid-area: avatar; }
  .ds-roster__row > .ds-roster__id { grid-area: id; }
  .ds-roster__row > .ds-badge { grid-area: badge; justify-self: start; }
  .ds-roster__row > .ds-roster__actions { grid-area: actions; justify-content: flex-start; }
  .ds-role-guide { grid-template-columns: minmax(0, 1fr); }
}