/*
 * code900 Signal components, v1.0.0
 * Class-based, framework-free, built on tokens.css. Every class is prefixed `ds-` (BEM-style: ds-block__element--modifier).
 * State comes from real HTML/ARIA (disabled, aria-pressed, aria-current, aria-invalid),
 * so the accessible markup is also the styling hook.
 * Mobile-first. Breakpoints (media queries can't read custom properties):
 *   40rem (640px): phone → tablet · 64rem (1024px): tablet → desktop (the brief's breakpoints, Tailwind's sm/lg). The 360px phone is the floor.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

.ds-root, body.ds-root {
  margin: 0;
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-md);
  line-height: var(--ds-line-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ds-root :where(h1, h2, h3, h4) { margin: 0; line-height: var(--ds-line-height-tight); letter-spacing: -0.02em; text-wrap: balance; }
.ds-root :where(p) { margin: 0; max-width: var(--ds-size-measure); }

.ds-root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .ds-root :where(.ds-button, .ds-input, .ds-slot, .ds-link) {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  }
}

/* Visually hidden but read by screen readers (labels for icon-only controls). */
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.ds-container { width: 100%; max-width: var(--ds-size-wrap); margin-inline: auto; padding-inline: var(--ds-space-4); }
@media (min-width: 40rem) { .ds-container { padding-inline: var(--ds-space-5); } }

.ds-main { padding-block: var(--ds-space-5) var(--ds-space-8); }
@media (min-width: 40rem) { .ds-main { padding-block-start: var(--ds-space-7); } }

.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-stack--sm { gap: var(--ds-space-2); }
.ds-stack--lg { gap: var(--ds-space-6); }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.ds-cluster--between { justify-content: space-between; }
.ds-grid { display: grid; gap: var(--ds-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .ds-grid--2, .ds-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Type helpers ---------- */
.ds-text-display { font-size: var(--ds-font-size-2xl); font-weight: 800; }
.ds-text-title { font-size: var(--ds-font-size-xl); font-weight: 800; }
.ds-text-heading { font-size: var(--ds-font-size-lg); font-weight: 700; }
.ds-text-muted { color: var(--ds-color-text-muted); }
.ds-text-small { font-size: var(--ds-font-size-sm); }
.ds-text-mono { font-family: var(--ds-font-family-mono); }
.ds-eyebrow {
  font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-color-brand-text);
}
@media (min-width: 40rem) { .ds-text-display { font-size: 2.75rem; } .ds-text-title { font-size: var(--ds-font-size-2xl); } }

/* ---------- Link ---------- */
/* Links in running text stay underlined: color alone is not an affordance (WCAG 1.4.1). Kit components that are links
   (a.ds-button, …) are left alone: :where() keeps this at (0,1,1) and :not() skips any ds- class. */
.ds-link, .ds-root :where(p, li, td, .ds-hint, .ds-alert) a:where(:not([class*="ds-"])) {
  color: var(--ds-color-brand-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ds-link:hover { text-decoration-thickness: 2px; }
/* A <button class="ds-link"> (an action that looks like a link, e.g. "Change") drops the browser's button box. */
button.ds-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }

/* ---------- Button ---------- */
.ds-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: var(--ds-size-tap); min-width: var(--ds-size-tap);
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid transparent;           /* stays visible in forced-colors mode */
  border-radius: var(--ds-radius-control);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  background: var(--ds-color-brand); color: var(--ds-color-on-brand);
}
.ds-button:hover { filter: brightness(1.08); }
.ds-button--secondary { background: transparent; color: var(--ds-color-text); border-color: var(--ds-color-border-strong); }
.ds-button--secondary:hover { background: var(--ds-color-surface-raised); filter: none; }
.ds-button--ghost { background: transparent; color: var(--ds-color-brand-text); }
.ds-button--ghost:hover { background: var(--ds-color-brand-tint); filter: none; }
.ds-button--danger { background: transparent; color: var(--ds-color-danger); border-color: var(--ds-color-danger); }
.ds-button--danger:hover { background: var(--ds-color-surface-raised); filter: none; }
.ds-button--block { display: flex; width: 100%; }
.ds-button--icon { padding: 0; width: var(--ds-size-tap); }
.ds-button--icon svg { width: 1.25rem; height: 1.25rem; }
.ds-button:disabled, .ds-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* ---------- Form field ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.ds-label { font-size: var(--ds-font-size-sm); font-weight: 600; color: var(--ds-color-text); }
.ds-hint { font-size: var(--ds-font-size-sm); color: var(--ds-color-text-muted); }
/* Not color-only: write the word in the copy ("Error: …"), in the page's language. Link it with aria-describedby. */
.ds-error { font-size: var(--ds-font-size-sm); color: var(--ds-color-danger); font-weight: 500; }

.ds-input {
  width: 100%; min-height: var(--ds-size-tap);
  padding: var(--ds-space-2) var(--ds-space-3);
  font: inherit; font-size: var(--ds-font-size-md);
  color: var(--ds-color-text); background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-control);
}
.ds-input::placeholder { color: var(--ds-color-text-muted); opacity: 1; }
textarea.ds-input { min-height: 6rem; resize: vertical; }
select.ds-input { padding-inline-end: var(--ds-space-6); }
.ds-input[aria-invalid="true"] { border: 2px solid var(--ds-color-danger); }
.ds-input:disabled { background: var(--ds-color-surface-raised); color: var(--ds-color-text-muted); cursor: not-allowed; }

.ds-choice { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-size-tap); font-size: var(--ds-font-size-sm); cursor: pointer; }
.ds-choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ds-color-brand); flex: none; }

.ds-fieldset { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); padding: var(--ds-space-3) var(--ds-space-4); margin: 0; }
.ds-fieldset legend { padding-inline: var(--ds-space-1); font-size: var(--ds-font-size-sm); font-weight: 600; }

/* ---------- Card ---------- */
.ds-card {
  background: var(--ds-color-surface); color: var(--ds-color-text);
  border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-card);
  padding: var(--ds-space-4);
}
@media (min-width: 40rem) { .ds-card { padding: var(--ds-space-5); } }
.ds-card--attention { border-color: var(--ds-color-warning); }

/* ---------- Notice ---------- */
.ds-alert {
  display: flex; gap: var(--ds-space-3); align-items: flex-start;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-brand-tint-border); border-radius: var(--ds-radius-control);
  background: var(--ds-color-brand-tint); color: var(--ds-color-text); font-size: var(--ds-font-size-sm);
}
.ds-alert__label { font-weight: 700; color: var(--ds-color-brand-text); flex: none; }
.ds-alert--success { background: var(--ds-color-surface); border-color: var(--ds-color-success); }
.ds-alert--success .ds-alert__label { color: var(--ds-color-success); }
.ds-alert--warning { background: var(--ds-color-surface); border-color: var(--ds-color-warning); }
.ds-alert--warning .ds-alert__label { color: var(--ds-color-warning); }
.ds-alert--danger { background: var(--ds-color-surface); border-color: var(--ds-color-danger); }
.ds-alert--danger .ds-alert__label { color: var(--ds-color-danger); }

/* ---------- Badge ---------- */
/* Always pair the color with a glyph or word (● Live, ✓ Done, ! Needs you). */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-xs); line-height: 1.4;
  padding: 0.2rem 0.6rem; border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-color-border-strong); color: var(--ds-color-text-muted); white-space: nowrap;
}
.ds-badge--live { border-color: var(--ds-color-success); color: var(--ds-color-success); }
.ds-badge--done { border-color: var(--ds-color-brand-text); color: var(--ds-color-brand-text); }
.ds-badge--brand { border-color: var(--ds-color-brand-text); color: var(--ds-color-brand-text); } /* the current item, in the brand color (e.g. "In progress"); same look as --done */
.ds-badge--warning { border-color: var(--ds-color-warning); color: var(--ds-color-warning); }
.ds-badge--danger { border-color: var(--ds-color-danger); color: var(--ds-color-danger); }

/* ---------- Nav bar (no-JS phone menu via <details>) ---------- */
.ds-navbar { position: sticky; top: 0; z-index: 50; background: var(--ds-color-surface); border-bottom: 1px solid var(--ds-color-border); }
.ds-navbar__bar { display: flex; align-items: center; gap: var(--ds-space-4); min-height: 3.75rem; }
.ds-brand { font-family: var(--ds-font-family-mono); font-weight: 800; font-size: var(--ds-font-size-lg); letter-spacing: -0.02em; color: var(--ds-color-text); text-decoration: none; }
.ds-brand__accent { color: var(--ds-color-brand-text); }
.ds-navbar__links { display: none; margin-inline-start: auto; gap: var(--ds-space-1); align-items: center; }
.ds-navbar__links a, .ds-navbar__menu-list a {
  display: inline-flex; align-items: center; min-height: var(--ds-size-tap); padding-inline: var(--ds-space-3);
  color: var(--ds-color-text-muted); text-decoration: none; border-radius: var(--ds-radius-control); font-size: var(--ds-font-size-sm);
}
.ds-navbar__links a:hover, .ds-navbar__menu-list a:hover { color: var(--ds-color-text); background: var(--ds-color-surface-raised); }
.ds-navbar__links a[aria-current="page"], .ds-navbar__menu-list a[aria-current="page"] { color: var(--ds-color-text); font-weight: 600; }
.ds-navbar__menu { margin-inline-start: auto; }
.ds-navbar__menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ds-size-tap); min-height: var(--ds-size-tap); border-radius: var(--ds-radius-control); cursor: pointer;
}
.ds-navbar__menu > summary::-webkit-details-marker { display: none; }
.ds-navbar__menu > summary svg { width: 1.375rem; height: 1.375rem; }
.ds-navbar__menu-list {
  position: absolute; inset-inline: 0; top: 100%;
  display: flex; flex-direction: column; padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4);
  background: var(--ds-color-surface); border-bottom: 1px solid var(--ds-color-border-strong); box-shadow: var(--ds-shadow-popover); /* strong edge: the shadow is invisible on dark pages */
}
@media (min-width: 64rem) {
  .ds-navbar__links { display: flex; }
  .ds-navbar__menu { display: none; }
}

/* ---------- Tabs (links with aria-current, or buttons with aria-selected) ---------- */
/* The divider is an inset shadow (not a border) and tabs don't hang below it, so the row never overflows
   vertically; overflow-y is hidden so Windows never shows a stray vertical scrollbar. Sideways scroll stays. */
.ds-tabs { display: flex; gap: var(--ds-space-1); box-shadow: inset 0 -1px 0 var(--ds-color-border); overflow-x: auto; overflow-y: hidden; }
.ds-tabs a, .ds-tabs button {
  display: inline-flex; align-items: center; min-height: var(--ds-size-tap); padding-inline: var(--ds-space-4);
  font: inherit; font-size: var(--ds-font-size-sm); color: var(--ds-color-text-muted); text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
/* The row clips anything outside it, so the focus ring is drawn inside the tab. */
.ds-tabs :is(a, button):focus-visible { outline-offset: -2px; }
.ds-tabs [aria-current="page"], .ds-tabs [aria-selected="true"] { color: var(--ds-color-text); font-weight: 600; border-bottom-color: var(--ds-color-brand); }

/* ---------- Table ---------- */
.ds-scroll-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-font-size-sm); }
/* Cells don't wrap by default (the .ds-scroll-area box handles width); mark long free-text cells with .ds-table__cell-wrap. */
.ds-table th, .ds-table td { text-align: start; padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); vertical-align: top; white-space: nowrap; }
.ds-table .ds-table__cell-wrap { white-space: normal; min-width: 12rem; }
.ds-table th { color: var(--ds-color-text-muted); font-weight: 600; font-size: var(--ds-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Timeline ---------- */
.ds-timeline { list-style: none; margin: 0 0 0 0.375rem; padding: 0 0 0 var(--ds-space-4); border-inline-start: 2px solid var(--ds-color-border); display: flex; flex-direction: column; gap: var(--ds-space-3); font-size: var(--ds-font-size-sm); }
.ds-timeline li { position: relative; }
.ds-timeline li::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--ds-space-4) - 7px); top: 0.4em;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ds-color-surface); border: 2px solid var(--ds-color-border-strong);
}
.ds-timeline li[data-state="done"]::before { background: var(--ds-color-brand); border-color: var(--ds-color-brand); }
.ds-timeline li[data-state="doing"]::before { background: var(--ds-color-success); border-color: var(--ds-color-success); }

/* ---------- Empty state ---------- */
.ds-empty-state { text-align: center; padding: var(--ds-space-7) var(--ds-space-4); border: 1px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius-card); color: var(--ds-color-text-muted); }
.ds-empty-state > * + * { margin-top: var(--ds-space-3); }
.ds-empty-state p { margin-inline: auto; }

/* ---------- Pattern: sign-in card ---------- */
/* One column that can shrink (minmax(0, 1fr)), so a wide card's table scrolls inside .ds-scroll-area instead of
   pushing the page sideways on phones (found by coreauth). Phones: card near the top; wider screens: centered. */
.ds-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; align-content: start; padding: var(--ds-space-5) var(--ds-space-4); }
@media (min-width: 40rem) { .ds-auth { place-items: center; align-content: center; } }
.ds-auth__card { width: 100%; max-width: 26rem; min-width: 0; }
.ds-auth > .ds-auth__card { justify-self: center; }

/* ---------- Pattern: time-slot picker ---------- */
.ds-day-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-2); }
.ds-time-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
@media (min-width: 40rem) { .ds-time-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-slot {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--ds-size-tap); padding: var(--ds-space-2);
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ds-color-text); cursor: pointer;
  background: var(--ds-color-surface); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-control);
}
.ds-slot:hover { background: var(--ds-color-surface-raised); }
.ds-slot[aria-pressed="true"] { background: var(--ds-color-brand-tint); border: 2px solid var(--ds-color-brand); }
.ds-day-picker .ds-slot[aria-pressed="true"] { background: var(--ds-color-brand); color: var(--ds-color-on-brand); }
.ds-slot:disabled { background: transparent; color: var(--ds-color-text-muted); border-style: dashed; cursor: not-allowed; }
.ds-slot__sub { font-size: var(--ds-font-size-xs); font-weight: 400; }
/* A full week (7 days): weekday + day number, the month named once above the strip. Fits 7 across at 390px. */
.ds-day-picker--week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ds-space-1); }
.ds-day-picker--week .ds-slot { padding-inline: 0; min-width: 0; }

/* ---------- Pattern: chat panel ---------- */
.ds-chat { display: flex; flex-direction: column; height: 100%; background: var(--ds-color-surface); color: var(--ds-color-text); }
.ds-chat__header { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); border-bottom: 1px solid var(--ds-color-border); }
.ds-chat__log { flex: 1; overflow-y: auto; padding: var(--ds-space-4); display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ds-chat__footer { padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4); border-top: 1px solid var(--ds-color-border); display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-chat__footer .ds-cluster { flex-wrap: nowrap; align-items: flex-end; }
.ds-chat__footer .ds-input { flex: 1; width: auto; min-width: 0; }
/* One-line composer that grows with its text (field-sizing where supported; apps may add JS auto-grow). */
.ds-chat__footer textarea.ds-input { min-height: var(--ds-size-tap); max-height: 8.5rem; resize: none; line-height: 1.4; padding-block: 0.6rem; field-sizing: content; }
.ds-chat-bubble { max-width: 80%; padding: var(--ds-space-2) var(--ds-space-3); border-radius: 14px 14px 14px 4px; background: var(--ds-color-surface-raised); align-self: flex-start; overflow-wrap: anywhere; }
.ds-chat-bubble--mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--ds-color-brand); color: var(--ds-color-on-brand); }
.ds-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-color-success); flex: none; }

/* ---------- Switch (on/off) ---------- */
/* Two markups, same look:
 *   JS:    <button type="button" class="ds-switch" role="switch" aria-checked="false"><span class="ds-switch__track" aria-hidden="true"></span>Dark mode</button>
 *   No JS: <label class="ds-switch"><input class="ds-switch__input" type="checkbox" role="switch"><span class="ds-switch__track" aria-hidden="true"></span>Notify me</label>
 * The label text is required (or aria-label on an icon-only switch). State comes from aria-checked or :checked. */
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-size-tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--ds-font-size-sm); text-align: start; cursor: pointer; }
.ds-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ds-switch__track { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-raised); border: 1px solid var(--ds-color-border-strong); }
.ds-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 8px); height: calc(1.5rem - 8px); border-radius: 50%; background: var(--ds-color-border-strong); }
.ds-switch[aria-checked="true"] .ds-switch__track, .ds-switch__input:checked + .ds-switch__track { background: var(--ds-color-brand); border-color: var(--ds-color-brand); }
.ds-switch[aria-checked="true"] .ds-switch__track::after, .ds-switch__input:checked + .ds-switch__track::after { transform: translateX(1.25rem); background: var(--ds-color-on-brand); }
.ds-switch__input:focus-visible + .ds-switch__track { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; }
.ds-switch:is(:disabled, [aria-disabled="true"]), .ds-switch:has(.ds-switch__input:disabled) { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .ds-switch__track, .ds-switch__track::after { transition: background-color 0.15s, transform 0.15s; } }

/* ---------- Segmented control (pick one of a few) ---------- */
/* For short exclusive choices such as Auto / Light / Dark. Three markups, same look:
 *   Links (server-rendered, no JS): <nav class="ds-segmented" aria-label="Color mode"><a href="?mode=auto" aria-current="true">Auto</a>…</nav>
 *   Radios (no JS, in a form):      <fieldset class="ds-segmented"><legend class="ds-visually-hidden">Color mode</legend><label><input type="radio" name="mode" value="auto" checked><span>Auto</span></label>…</fieldset>
 *   Buttons (JS):                   <div class="ds-segmented" role="group" aria-label="Color mode"><button type="button" aria-pressed="true">Auto</button>…</div> */
.ds-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0; min-inline-size: 0; width: fit-content; max-width: 100%; align-self: flex-start; border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised); }
.ds-segmented :where(a, button, label > span) { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--ds-size-tap) - 8px); padding: 0 var(--ds-space-3); border: 0; border-radius: calc(var(--ds-radius-control) - 3px); background: none; color: var(--ds-color-text-muted); font: inherit; font-size: var(--ds-font-size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-segmented label { display: inline-flex; position: relative; }
.ds-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ds-segmented :where(a:hover, button:hover, label:hover > span) { color: var(--ds-color-text); }
.ds-segmented :is(a[aria-current="true"], a[aria-current="page"], button[aria-pressed="true"], input:checked + span) { background: var(--ds-color-surface); color: var(--ds-color-text); box-shadow: 0 0 0 1px var(--ds-color-border-strong); }
.ds-segmented input:focus-visible + span { outline: 2px solid var(--ds-color-focus); outline-offset: 1px; }


/* ---------- Density (compact) ---------- */
[data-density="compact"] .ds-table :is(th, td) { padding-block: var(--ds-space-1); }
[data-density="compact"] .ds-card { padding: var(--ds-space-4); }

/* ---------- Overlays: shared surface ---------- */
/* Dialog, sheet, popover, menu, select list, tooltip and toast share one surface. They work with @c900pd/react-core (Radix
 * sets data-state="open|closed" and positions popovers through the CSSOM, which the strict CSP allows) or with your
 * own markup. Animations run only when motion is allowed. */
.ds-overlay { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / 0.5); }
.ds-dialog, .ds-sheet, .ds-popover, .ds-menu, .ds-select__content, .ds-toast {
  background: var(--ds-color-surface); color: var(--ds-color-text);
  border: 1px solid var(--ds-color-border-strong); box-shadow: var(--ds-shadow-popover);
}

/* ---------- Dialog ---------- */
/* <div class="ds-overlay"></div><div class="ds-dialog" role="dialog" aria-modal="true" aria-labelledby="…">
 *   <h2 class="ds-dialog__title">…</h2><p class="ds-dialog__description">…</p><div class="ds-dialog__actions">…</div></div> */
.ds-dialog {
  position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(32rem, calc(100vw - 2 * var(--ds-space-4))); max-height: calc(100dvh - 2 * var(--ds-space-4)); overflow: auto;
  display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-5); border-radius: var(--ds-radius-card);
}
.ds-dialog:focus { outline: none; }
.ds-dialog__title { margin: 0; font-size: var(--ds-font-size-lg); font-weight: 700; line-height: var(--ds-line-height-tight); }
.ds-dialog__description { margin: 0; color: var(--ds-color-text-muted); }
.ds-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); margin-top: var(--ds-space-2); }
.ds-dialog__close { position: absolute; top: var(--ds-space-2); right: var(--ds-space-2); }

/* ---------- Sheet (side or bottom drawer; the phone menu) ---------- */
.ds-sheet {
  position: fixed; z-index: 100; display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-5);
  overflow: auto; overscroll-behavior: contain;
}
.ds-sheet--right, .ds-sheet--left { top: 0; bottom: 0; width: min(22rem, 88vw); }
.ds-sheet--right { right: 0; border-right: 0; }
.ds-sheet--left { left: 0; border-left: 0; }
.ds-sheet--bottom { left: 0; right: 0; bottom: 0; max-height: 85dvh; border-bottom: 0; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; padding-bottom: max(var(--ds-space-5), env(safe-area-inset-bottom)); }

/* ---------- Popover, menu, select list, tooltip ---------- */
.ds-popover { z-index: 110; padding: var(--ds-space-4); border-radius: var(--ds-radius-control); max-width: min(22rem, calc(100vw - 2rem)); }
.ds-menu { z-index: 110; min-width: 12rem; padding: var(--ds-space-1); border-radius: var(--ds-radius-control); }
.ds-menu__item {
  display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; min-height: 2.5rem; padding: 0 var(--ds-space-3);
  border: 0; border-radius: calc(var(--ds-radius-control) - 2px); background: none; color: var(--ds-color-text);
  font: inherit; font-size: var(--ds-font-size-sm); text-align: start; text-decoration: none; cursor: pointer; user-select: none; outline: none;
}
.ds-menu__item[data-highlighted], .ds-menu__item:focus-visible { background: var(--ds-color-brand-tint); color: var(--ds-color-brand-text); }
.ds-menu__item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
.ds-menu__item--danger { color: var(--ds-color-danger); }
.ds-menu__item--danger[data-highlighted] { background: var(--ds-color-surface-raised); color: var(--ds-color-danger); }
.ds-menu__separator { height: 1px; margin: var(--ds-space-1) 0; background: var(--ds-color-border); }
.ds-menu__label { padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-1); font-size: var(--ds-font-size-xs); color: var(--ds-color-text-muted); }

.ds-select__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); text-align: start; cursor: pointer; }
.ds-select__trigger[data-placeholder] { color: var(--ds-color-text-muted); }
.ds-select__trigger svg { width: 1rem; height: 1rem; flex: none; opacity: 0.7; }
.ds-select__content { z-index: 110; overflow: hidden; border-radius: var(--ds-radius-control); min-width: var(--radix-select-trigger-width, 10rem); max-height: var(--radix-select-content-available-height, 20rem); }
.ds-select__viewport { padding: var(--ds-space-1); }
/* Radix Select would inject this as a <style> tag (blocked by a strict CSP); shipped here instead (Edison, 2026-10-18). */
[data-radix-select-viewport] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
[data-radix-select-viewport]::-webkit-scrollbar { display: none; }
.ds-select__item { padding-inline-end: var(--ds-space-6); position: relative; }
.ds-select__indicator { position: absolute; right: var(--ds-space-2); display: inline-flex; }
.ds-select__indicator svg { width: 1rem; height: 1rem; }

.ds-tooltip {
  z-index: 120; max-width: 18rem; padding: var(--ds-space-1) var(--ds-space-2); border-radius: calc(var(--ds-radius-control) - 2px);
  background: var(--ds-color-text); color: var(--ds-color-surface); font-size: var(--ds-font-size-xs); line-height: 1.4;
}

/* ---------- Toast ---------- */
/* A polite live region (role="status") in a corner; Radix Toast or your own. Never the only way to learn something. */
.ds-toast-viewport {
  position: fixed; z-index: 130; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--ds-space-2);
  width: min(24rem, 100vw); max-height: 100dvh; margin: 0; padding: var(--ds-space-4); list-style: none; outline: none;
  pointer-events: none; /* the empty corner never blocks clicks; toasts themselves do */
}
.ds-toast { pointer-events: auto; }
.ds-toast { display: grid; grid-template-columns: 1fr auto; gap: var(--ds-space-1) var(--ds-space-3); align-items: start; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); border-inline-start-width: 4px; }
.ds-toast--success { border-inline-start-color: var(--ds-color-success); }
.ds-toast--danger { border-inline-start-color: var(--ds-color-danger); }
.ds-toast__title { font-weight: 700; font-size: var(--ds-font-size-sm); }
.ds-toast__description { grid-column: 1; font-size: var(--ds-font-size-sm); color: var(--ds-color-text-muted); }
.ds-toast__close { grid-row: 1 / span 2; grid-column: 2; }

@media (prefers-reduced-motion: no-preference) {
  .ds-overlay[data-state="open"] { animation: ds-fade-in 0.15s ease-out; }
  .ds-dialog[data-state="open"] { animation: ds-dialog-in 0.15s ease-out; }
  .ds-sheet--right[data-state="open"] { animation: ds-sheet-right 0.2s ease-out; }
  .ds-sheet--left[data-state="open"] { animation: ds-sheet-left 0.2s ease-out; }
  .ds-sheet--bottom[data-state="open"] { animation: ds-sheet-bottom 0.2s ease-out; }
  :is(.ds-popover, .ds-menu, .ds-select__content, .ds-tooltip)[data-state="open"],
  :is(.ds-popover, .ds-menu, .ds-select__content, .ds-tooltip)[data-state="delayed-open"] { animation: ds-fade-in 0.12s ease-out; }
  .ds-toast[data-state="open"] { animation: ds-fade-in 0.15s ease-out; }
}
@keyframes ds-fade-in { from { opacity: 0; } }
@keyframes ds-dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
@keyframes ds-sheet-right { from { transform: translateX(100%); } }
@keyframes ds-sheet-left { from { transform: translateX(-100%); } }
@keyframes ds-sheet-bottom { from { transform: translateY(100%); } }

/* ---------- Loading: skeleton, spinner ---------- */
.ds-skeleton { display: block; min-height: 1em; border-radius: calc(var(--ds-radius-control) - 2px); background: var(--ds-color-surface-raised); }
.ds-skeleton--text { height: 0.875em; width: 100%; }
.ds-skeleton--title { height: 1.5rem; width: 60%; }
.ds-skeleton--avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.ds-skeleton--button { width: 7rem; height: var(--ds-size-tap); border-radius: var(--ds-radius-control); }
.ds-skeleton--card { width: 100%; height: 8rem; border-radius: var(--ds-radius-card); }
.ds-skeleton-lines { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-skeleton-lines > .ds-skeleton:last-child { width: 70%; }
.ds-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--ds-color-border); border-top-color: var(--ds-color-brand); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .ds-skeleton { animation: ds-pulse 1.4s ease-in-out infinite; }
  .ds-spinner { animation: ds-spin 0.8s linear infinite; }
}
@keyframes ds-pulse { 50% { opacity: 0.55; } }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- Small pieces: avatar, tag, key-value list, divider, breadcrumbs ---------- */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ds-color-brand-tint); color: var(--ds-color-brand-text);
  font-size: var(--ds-font-size-xs); font-weight: 700; text-transform: uppercase;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--sm { width: 1.75rem; height: 1.75rem; }
.ds-avatar--lg { width: 3rem; height: 3rem; font-size: var(--ds-font-size-sm); }
.ds-tag {
  display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0.125rem var(--ds-space-2);
  border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text); font-size: var(--ds-font-size-xs); white-space: nowrap;
}
.ds-tag__remove { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; margin-inline-end: -0.375rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.ds-tag__remove:hover { background: var(--ds-color-border); }
.ds-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-1) var(--ds-space-4); margin: 0; }
.ds-kv dt { color: var(--ds-color-text-muted); font-size: var(--ds-font-size-sm); }
.ds-kv dd { margin: 0 0 var(--ds-space-2); }
@media (min-width: 40rem) { .ds-kv { grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); } .ds-kv dd { margin: 0; } }
.ds-divider { height: 0; margin: var(--ds-space-4) 0; border: 0; border-top: 1px solid var(--ds-color-border); }
.ds-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--ds-font-size-sm); color: var(--ds-color-text-muted); }
.ds-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--ds-space-1); color: var(--ds-color-border-strong); }
.ds-breadcrumbs a { color: var(--ds-color-text-muted); }
.ds-breadcrumbs [aria-current="page"] { color: var(--ds-color-text); }

/* ---------- Page structure: page header, section ---------- */
.ds-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-5); }
.ds-page-header__titles { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ds-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-section { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ds-section + .ds-section { margin-top: var(--ds-space-6); }

/* ---------- App shell: sidebar (desktop), bottom nav (phone) ---------- */
/* <div class="ds-app-shell"><aside class="ds-sidebar">…</aside><div class="ds-app-shell__main">…</div><nav class="ds-bottom-nav">…</nav></div>
 * Phone (<640px): no sidebar; a bottom nav (up to 5 items) and a menu button for the rest (a ds-sheet).
 * Tablet (640–1023px): sidebar closed by default (open it as a sheet); without JS, the bottom nav instead. Desktop (≥1024px): sidebar open; data-collapsed="true" = icons only. */
.ds-app-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.ds-app-shell__main { min-width: 0; padding-bottom: calc(var(--ds-size-tap) + var(--ds-space-5)); }
.ds-sidebar { display: none; }
.ds-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.ds-sidebar__nav a, .ds-sidebar__nav button {
  display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-size-tap); padding: 0 var(--ds-space-3);
  border: 0; border-radius: var(--ds-radius-control); background: none; color: var(--ds-color-text-muted);
  font: inherit; font-size: var(--ds-font-size-sm); text-decoration: none; text-align: start; cursor: pointer;
}
.ds-sidebar__nav :is(a, button):hover { background: var(--ds-color-surface-raised); color: var(--ds-color-text); }
.ds-sidebar__nav [aria-current="page"] { background: var(--ds-color-brand-tint); color: var(--ds-color-brand-text); font-weight: 600; }
.ds-sidebar__nav svg, .ds-bottom-nav svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ds-bottom-nav {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom); background: var(--ds-color-surface); border-top: 1px solid var(--ds-color-border-strong);
}
.ds-bottom-nav a, .ds-bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.5rem; padding: var(--ds-space-1);
  border: 0; background: none; color: var(--ds-color-text-muted); font: inherit; font-size: var(--ds-font-size-xs); text-decoration: none; cursor: pointer;
}
.ds-bottom-nav [aria-current="page"] { color: var(--ds-color-brand-text); font-weight: 700; }
.ds-bottom-nav :is(a, button) > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; } /* keep bottom-nav labels short (about 9 characters) */
/* Nav count (unread, new): a small brand pill after the label; on the bottom nav and the collapsed sidebar it sits on the
 * icon's corner. Hide it from screen readers (aria-hidden) and put the count in the link's name instead; react-core NavItem.badge does both. */
.ds-nav-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
  border: 1px solid transparent; border-radius: 999px; background: var(--ds-color-brand); color: var(--ds-color-on-brand);
  font-size: var(--ds-font-size-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.ds-sidebar__nav .ds-nav-count { margin-inline-start: auto; }
.ds-bottom-nav :is(a, button) { position: relative; }
.ds-bottom-nav :is(a, button) > .ds-nav-count { position: absolute; top: var(--ds-space-1); left: calc(50% + 0.25rem); max-width: none; overflow: visible; box-shadow: 0 0 0 2px var(--ds-color-surface); }
@media (min-width: 40rem) {
  .ds-bottom-nav { display: none; }
  .ds-app-shell__main { padding-bottom: 0; }
}
/* Phones: when every section fits in the bottom nav (react-core sets data-nav-fits), the menu button only repeats it. */
@media (max-width: 39.99rem) {
  .ds-app-shell[data-nav-fits] button.ds-app-shell__menu-button { display: none; }
}
/* Without JavaScript the menu sheet can't open, so keep the bottom nav on tablets too, and hide the dead menu button.
 * Put every section an app needs without JS in the first five nav items (or link them from the page). */
@media (scripting: none) {
  button.ds-app-shell__menu-button, .ds-sidebar button[aria-expanded] { display: none; }
}
@media (scripting: none) and (min-width: 40rem) {
  .ds-bottom-nav { display: grid; }
  .ds-app-shell__main { padding-bottom: calc(var(--ds-size-tap) + var(--ds-space-5)); }
}
@media (min-width: 64rem) {
  .ds-bottom-nav { display: none; }
  .ds-app-shell__main { padding-bottom: 0; }
  .ds-app-shell { grid-template-columns: 16rem minmax(0, 1fr); }
  .ds-app-shell[data-collapsed="true"] { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .ds-sidebar {
    display: flex; flex-direction: column; gap: var(--ds-space-4); position: sticky; top: 0; height: 100dvh; overflow: auto;
    padding: var(--ds-space-4) var(--ds-space-3); background: var(--ds-color-surface); border-inline-end: 1px solid var(--ds-color-border);
  }
  .ds-app-shell[data-collapsed="true"] .ds-sidebar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ds-app-shell[data-collapsed="true"] .ds-sidebar__nav :is(a, button) { justify-content: center; padding: 0; }
  .ds-app-shell[data-collapsed="true"] .ds-sidebar__nav :is(a, button) { position: relative; }
  .ds-app-shell[data-collapsed="true"] .ds-sidebar__nav .ds-nav-count { position: absolute; top: 2px; inset-inline-end: 6px; margin: 0; box-shadow: 0 0 0 2px var(--ds-color-surface); }
  .ds-app-shell__menu-button { display: none; }
}

.ds-app-shell__actions { margin-inline-start: auto; }

/* ---------- Data table extras: sortable headers, cards on phones ---------- */
.ds-table__sort { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ds-table__sort svg { width: 0.875rem; height: 0.875rem; opacity: 0.6; }
th[aria-sort] .ds-table__sort svg { opacity: 1; }
.ds-data-cards { display: grid; gap: var(--ds-space-2); }
@media (max-width: 39.99rem) { .ds-data-table--responsive .ds-scroll-area { display: none; } }
@media (min-width: 40rem) { .ds-data-table--responsive .ds-data-cards { display: none; } }

.ds-table .ds-table__cell--end { text-align: end; }
.ds-table tbody th { font-weight: 600; color: var(--ds-color-text); text-transform: none; letter-spacing: normal; font-size: inherit; }
.ds-data-cards { margin: 0; padding: 0; list-style: none; }

/* ---------- Page templates (used by @c900pd/react-core; usable in plain HTML too) ---------- */
.ds-progress { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.ds-progress progress { appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-raised); overflow: hidden; }
.ds-progress progress::-webkit-progress-bar { background: var(--ds-color-surface-raised); border-radius: var(--ds-radius-pill); }
.ds-progress progress::-webkit-progress-value { background: var(--ds-color-brand); border-radius: var(--ds-radius-pill); }
.ds-progress progress::-moz-progress-bar { background: var(--ds-color-brand); border-radius: var(--ds-radius-pill); }
.ds-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); margin: 0; }
@media (min-width: 64rem) { .ds-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-stat { gap: var(--ds-space-1); }
.ds-stat dt { color: var(--ds-color-text-muted); font-size: var(--ds-font-size-sm); }
.ds-stat dd { margin: 0; }
.ds-stat__value { font-size: var(--ds-font-size-xl); font-weight: 700; line-height: var(--ds-line-height-tight); }
.ds-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); }
@media (min-width: 64rem) { .ds-detail-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.ds-form-page { padding-bottom: 0; }
.ds-savebar {
  position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2);
  margin: var(--ds-space-4) calc(-1 * var(--ds-space-4)) 0; padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-color-surface); border-top: 1px solid var(--ds-color-border); border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);
}
@media (min-width: 40rem) { .ds-savebar { margin-inline: calc(-1 * var(--ds-space-5)); padding-inline: var(--ds-space-5); } }
.ds-settings-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); }
@media (min-width: 64rem) { .ds-settings-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ds-space-6); } }
.ds-settings-section + .ds-settings-section { padding-top: var(--ds-space-5); border-top: 1px solid var(--ds-color-border); }

/* ---------- Combobox (input + listbox) ---------- */
.ds-combobox { position: relative; }
.ds-combobox__list { position: absolute; z-index: 110; left: 0; right: 0; top: calc(100% + 4px); max-height: 16rem; overflow: auto; margin: 0; padding: var(--ds-space-1); list-style: none; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-control); box-shadow: var(--ds-shadow-popover); }
.ds-combobox__option { padding: var(--ds-space-2) var(--ds-space-3); border-radius: calc(var(--ds-radius-control) - 2px); cursor: pointer; font-size: var(--ds-font-size-sm); }
.ds-combobox__option[aria-selected="true"], .ds-combobox__option[data-active="true"] { background: var(--ds-color-brand-tint); color: var(--ds-color-brand-text); }
.ds-combobox__empty { padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-color-text-muted); font-size: var(--ds-font-size-sm); }

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .ds-dialog, .ds-sheet, .ds-popover, .ds-menu, .ds-select__content, .ds-toast, .ds-combobox__list { border-color: CanvasText; }
  .ds-menu__item[data-highlighted], .ds-combobox__option[data-active="true"], .ds-sidebar__nav [aria-current="page"] { outline: 2px solid Highlight; }
  .ds-tooltip { border: 1px solid CanvasText; }
  .ds-switch__track { border-color: CanvasText; }
  .ds-switch[aria-checked="true"] .ds-switch__track, .ds-switch__input:checked + .ds-switch__track { background: Highlight; border-color: Highlight; }
  .ds-segmented :is(a[aria-current="true"], a[aria-current="page"], button[aria-pressed="true"], input:checked + span) { outline: 2px solid Highlight; }
  .ds-button, .ds-slot, .ds-badge, .ds-card { border-color: CanvasText; }
  .ds-slot[aria-pressed="true"] { outline: 2px solid Highlight; }
}