/* ============================================================
 * 29COURT DESIGN LANGUAGE v2 — COMPONENTS
 * Executable classes built ONLY on tokens.css values.
 * Every declaration below must resolve to a --29d-* token.
 * Live: https://ideas.29court.com/design-system/components.css
 * ============================================================ */

/* ---------- base ---------- */
.ds-root, .ds-root input, .ds-root button, .ds-root select, .ds-root textarea {
  font-family: var(--29d-font-ui);
  font-feature-settings: "ss03", "cv11";
  color: var(--29d-text-1);
}
.ds-root { font-size: var(--29d-body-size); line-height: var(--29d-body-lh); }
.ds-mono { font-family: var(--29d-font-mono); }
.ds-display { font-family: var(--29d-font-display); }
.ds-tnum { font-variant-numeric: tabular-nums; }
.ds-overline {
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  font-weight: var(--29d-weight-bold); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--29d-text-3);
}

/* ---------- buttons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--29d-s-2); height: var(--29d-control-h);
  padding: 0 var(--29d-s-4); border-radius: var(--29d-r-2);
  font-size: var(--29d-body-size); font-weight: var(--29d-weight-semibold);
  line-height: 1; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--29d-t-instant) var(--29d-ease),
              box-shadow var(--29d-t-fast) var(--29d-ease),
              background-color var(--29d-t-fast) var(--29d-ease),
              border-color var(--29d-t-fast) var(--29d-ease);
  white-space: nowrap; user-select: none; text-decoration: none;
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: scale(0.98); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--29d-focus-halo), var(--29d-focus-ring); }
.ds-btn:disabled { cursor: not-allowed; transform: none; opacity: 0.55; }

.ds-btn-primary { background: var(--29d-coral-600); color: var(--29d-on-coral); }
.ds-btn-primary:hover { background: var(--29d-coral-700); }
.ds-btn-secondary { background: var(--29d-teal-600); color: #fff; }
.ds-btn-secondary:hover { background: var(--29d-teal-700); }
.ds-btn-outline {
  background: var(--29d-surface); color: var(--29d-text-1);
  border-color: var(--29d-border-strong);
}
.ds-btn-outline:hover { border-color: var(--29d-text-3); background: var(--29d-wash); }
.ds-btn-ghost { background: transparent; color: var(--29d-text-2); }
.ds-btn-ghost:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-btn-danger { background: var(--29d-red-600); color: #fff; }
.ds-btn-danger:hover { background: var(--29d-red-700); }
.ds-btn-sm { height: var(--29d-control-h-sm); padding: 0 var(--29d-s-3); font-size: var(--29d-text-sm); }
.ds-btn .ds-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: ds-spin 0.8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- inputs ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--29d-s-1); }
.ds-label {
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-2);
}
.ds-input, .ds-select, .ds-textarea {
  height: var(--29d-control-h); padding: 0 var(--29d-s-3);
  font-size: var(--29d-body-size); color: var(--29d-text-1);
  background: var(--29d-surface); border: 1px solid var(--29d-border-strong);
  border-radius: var(--29d-r-2);
  transition: border-color var(--29d-t-fast) var(--29d-ease),
              box-shadow var(--29d-t-fast) var(--29d-ease);
}
.ds-textarea { height: auto; min-height: 96px; padding: var(--29d-s-3); resize: vertical; }
.ds-input::placeholder { color: var(--29d-text-4); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--29d-coral-500);
  box-shadow: var(--29d-focus-halo);
}
.ds-input[aria-invalid="true"] {
  border-color: var(--29d-red-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--29d-red-500) 25%, transparent);
}
.ds-hint { font-size: var(--29d-text-sm); color: var(--29d-text-3); }
.ds-error { font-size: var(--29d-text-sm); color: var(--29d-red-600); font-weight: var(--29d-weight-medium); }

/* ---------- cards ---------- */
.ds-card {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); padding: var(--29d-card-pad);
}
.ds-card-title {
  font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl);
  font-weight: var(--29d-weight-bold); margin: 0 0 var(--29d-s-2);
}
.ds-card-clickable { cursor: pointer; transition: transform var(--29d-t-fast) var(--29d-ease), box-shadow var(--29d-t-fast) var(--29d-ease); }
.ds-card-clickable:hover { transform: translateY(-2px); box-shadow: var(--29d-shadow-pop); }
.ds-card-clickable:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }

/* ---------- tables (dense, Cloudflare lane) ---------- */
.ds-table-wrap {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); overflow: hidden;
  overflow-x: auto; /* dense tables scroll inside the card on small screens */
  -webkit-overflow-scrolling: touch;
}
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--29d-body-size); }
.ds-table th {
  text-align: left; font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  font-weight: var(--29d-weight-bold); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--29d-text-3); padding: var(--29d-s-3) var(--29d-s-4);
  border-bottom: 1px solid var(--29d-border); background: var(--29d-surface);
  white-space: nowrap;
}
.ds-table td {
  padding: 0 var(--29d-s-4); height: var(--29d-row-h);
  border-bottom: 1px solid var(--29d-border); color: var(--29d-text-1);
  vertical-align: middle;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--29d-wash); }
.ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--29d-font-mono); font-size: 0.92em; }

/* ---------- badges / pills (Linear -subtle pattern) ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--29d-s-1);
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-semibold);
  line-height: 1; padding: var(--29d-s-1) var(--29d-s-2);
  border-radius: var(--29d-r-1); border: 1px solid transparent;
  white-space: nowrap;
}
.ds-badge-neutral { background: var(--29d-wash-2); color: var(--29d-text-2); border-color: var(--29d-border); }
.ds-badge-accent  { background: var(--29d-coral-100); color: var(--29d-coral-700); }
.ds-badge-success { background: var(--29d-green-100); color: var(--29d-green-700); }
.ds-badge-warning { background: var(--29d-amber-100); color: var(--29d-amber-700); }
.ds-badge-danger  { background: var(--29d-red-100); color: var(--29d-red-700); }
.ds-badge-info    { background: var(--29d-blue-100); color: var(--29d-blue-700); }
.ds-badge .ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- kbd (Raycast chrome) ---------- */
.ds-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 var(--29d-s-1);
  font-family: var(--29d-font-mono); font-size: var(--29d-text-2xs); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-2); background: var(--29d-wash);
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-1);
}

/* ---------- nav ---------- */
.ds-topnav {
  height: 56px; display: flex; align-items: center; gap: var(--29d-s-4);
  padding: 0 var(--29d-page-pad); background: var(--29d-surface);
  border-bottom: 1px solid var(--29d-border);
}
.ds-navlink {
  font-size: var(--29d-body-size); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-2); text-decoration: none; padding: var(--29d-s-2) var(--29d-s-1);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ds-navlink:hover { color: var(--29d-text-1); }
.ds-navlink[aria-current="page"] { color: var(--29d-coral-700); border-bottom-color: var(--29d-coral-600); font-weight: var(--29d-weight-semibold); }

/* ---------- modal ---------- */
.ds-modal-backdrop {
  position: fixed; inset: 0; background: rgba(28, 25, 23, 0.45);
  display: flex; align-items: center; justify-content: center; padding: var(--29d-s-4);
  animation: ds-fade var(--29d-t-fast) var(--29d-ease);
}
[data-theme="dark"] .ds-modal-backdrop { background: rgba(0, 0, 0, 0.6); }
.ds-modal {
  background: var(--29d-overlay); border-radius: var(--29d-r-4);
  box-shadow: var(--29d-shadow-modal); padding: var(--29d-s-8);
  max-width: 560px; width: 100%;
  animation: ds-pop var(--29d-t-slow) var(--29d-ease);
}
.ds-modal-title { font-size: var(--29d-text-2xl); line-height: var(--29d-lh-2xl); font-weight: var(--29d-weight-bold); margin: 0 0 var(--29d-s-2); }
.ds-modal-actions { display: flex; justify-content: flex-end; gap: var(--29d-s-2); margin-top: var(--29d-s-6); }
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } }

/* ---------- toast ---------- */
.ds-toast {
  display: flex; align-items: center; gap: var(--29d-s-3);
  background: var(--29d-text-1); color: var(--29d-bg);
  border-radius: var(--29d-r-2); padding: var(--29d-s-3) var(--29d-s-4);
  box-shadow: var(--29d-shadow-pop); font-size: var(--29d-body-size);
  animation: ds-rise var(--29d-t-slow) var(--29d-ease);
  max-width: 420px;
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- empty state ---------- */
.ds-empty { text-align: center; padding: var(--29d-s-16) var(--29d-s-6); }
.ds-empty-title { font-family: var(--29d-font-display); font-size: var(--29d-text-2xl); font-weight: var(--29d-weight-xbold); margin: 0 0 var(--29d-s-2); }
.ds-empty p { color: var(--29d-text-3); margin: 0 0 var(--29d-s-6); }

/* ---------- skeleton ---------- */
.ds-skeleton {
  border-radius: var(--29d-r-2); background: var(--29d-wash-2);
  position: relative; overflow: hidden;
}
.ds-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--29d-wash) 50%, transparent 80%);
  animation: ds-shimmer 1.2s linear infinite;
}
@keyframes ds-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-root *, .ds-root *::before, .ds-root *::after {
    animation-duration: 80ms !important; transition-duration: 80ms !important;
  }
  .ds-skeleton::after { animation: none; }
}

/* ============================================================
 * TIER 1 — wow app kit (app shell, palette, datatable, forms,
 * dialogs/drawers, tabs, toasts, stats, avatars, progress,
 * search-highlight, slide-confirm, countup, like)
 * Tokens only. See run file design-components-2026-10-10.
 * ============================================================ */
/* ============================================================
 * 29COURT DESIGN LANGUAGE v2 — TIER 1 COMPONENT LIBRARY
 * "wow" app kit: app shell, command palette, data table pro,
 * form kit, dialogs+drawers, tabs, toasts, stat cards, avatars,
 * progress, search highlight, wow moments.
 *
 * RULES (from run contract):
 * - Every color/radius/space/shadow/font/motion resolves to a
 *   --29d-* token. Zero hex/rgb/hsl literals in declarations.
 * - Classes prefixed .ds-*, keyframes prefixed ds-*.
 * - NEVER redefines: ds-btn, ds-input, ds-select, ds-textarea,
 *   ds-field, ds-label, ds-hint, ds-error, ds-card, ds-table,
 *   ds-badge, ds-kbd, ds-topnav, ds-modal, ds-toast, ds-empty,
 *   ds-skeleton, ds-root, ds-overline, ds-mono, ds-display, ds-tnum.
 * - Requires tokens.css + components.css loaded first.
 * - Private layout constants live on --ds-* (NOT --29d-*).
 * ============================================================ */

/* Shared focus halo for tier-1 interactive parts (components.css
   owns :focus-visible for its own classes). */
.ds-nav-item:focus-visible,
.ds-topbar-search:focus-visible,
.ds-command-item:focus-visible,
.ds-sortable:focus-visible,
.ds-page-btn:focus-visible,
.ds-check-input:focus-visible + .ds-check-box,
.ds-radio-input:focus-visible + .ds-radio-dot,
.ds-switch-input:focus-visible + .ds-switch-track,
.ds-range:focus-visible,
.ds-segmented-btn:focus-visible,
.ds-otp-input:focus-visible,
.ds-tab:focus-visible,
.ds-like:focus-visible,
.ds-slide-handle:focus-visible,
.ds-toast-action:focus-visible {
  outline: none;
  box-shadow: var(--29d-focus-halo), var(--29d-focus-ring);
}

/* Visually-hidden helper for accessible form inputs */
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
 * 01 — APP SHELL (.ds-shell / .ds-sidebar / .ds-topbar)
 * Layout grid: sidebar + main. Collapse to icon rail on
 * desktop; overlay drawer under 900px.
 * ============================================================ */
:root {
  --ds-sidebar-w: 232px;
  --ds-rail-w: 64px;
  --ds-topbar-h: 60px;
}

.ds-shell {
  display: grid;
  grid-template-columns: var(--ds-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--29d-bg);
  color: var(--29d-text-1);
  font-family: var(--29d-font-ui);
  font-size: var(--29d-body-size);
  line-height: var(--29d-body-lh);
  transition: grid-template-columns var(--29d-t-base) var(--29d-ease);
}
.ds-shell--collapsed { grid-template-columns: var(--ds-rail-w) minmax(0, 1fr); }

.ds-sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--29d-surface);
  border-right: 1px solid var(--29d-border);
  padding: var(--29d-s-4) var(--29d-s-3);
  display: flex; flex-direction: column; gap: var(--29d-s-1);
  overflow-x: hidden; overflow-y: auto;
  width: var(--ds-sidebar-w);
  transition: width var(--29d-t-base) var(--29d-ease);
  z-index: 40;
}
.ds-shell--collapsed .ds-sidebar { width: var(--ds-rail-w); }

.ds-brand {
  display: flex; align-items: center; gap: var(--29d-s-3);
  padding: var(--29d-s-2) var(--29d-s-3) var(--29d-s-4);
  font-weight: var(--29d-weight-xbold);
  font-family: var(--29d-font-display);
  font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg);
  white-space: nowrap;
}
.ds-brand-mark {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--29d-r-2);
  background: var(--29d-coral-600); color: var(--29d-on-coral);
  display: grid; place-items: center;
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-xbold);
}
.ds-nav-group { margin-top: var(--29d-s-4); }
.ds-nav-group-label {
  padding: 0 var(--29d-s-3) var(--29d-s-1);
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  font-weight: var(--29d-weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--29d-text-4);
  white-space: nowrap;
}
.ds-nav-item {
  display: flex; align-items: center; gap: var(--29d-s-3);
  height: var(--29d-control-h);
  padding: 0 var(--29d-s-3);
  border-radius: var(--29d-r-2);
  color: var(--29d-text-2);
  font-size: var(--29d-body-size); font-weight: var(--29d-weight-medium);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
  position: relative;
  transition: background var(--29d-t-fast) var(--29d-ease),
              color var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-nav-item:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-nav-item:active { transform: scale(0.98); } /* tactile press */
.ds-nav-item.is-active {
  background: var(--29d-coral-100);
  color: var(--29d-coral-700);
  font-weight: var(--29d-weight-semibold);
}
.ds-nav-item.is-active::before {
  content: ""; position: absolute; left: calc(var(--29d-s-1) * -1);
  top: var(--29d-s-2); bottom: var(--29d-s-2); width: 3px;
  border-radius: var(--29d-r-1); background: var(--29d-coral-600);
}
.ds-nav-icon {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center;
}
.ds-nav-icon svg { width: 18px; height: 18px; }
.ds-nav-label {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--29d-t-fast) var(--29d-ease);
}
.ds-nav-count {
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  font-weight: var(--29d-weight-semibold);
  background: var(--29d-wash-2); color: var(--29d-text-3);
  border-radius: var(--29d-pill); padding: 1px var(--29d-s-2);
  font-variant-numeric: tabular-nums;
}
.ds-nav-item.is-active .ds-nav-count {
  background: color-mix(in srgb, var(--29d-coral-600) 14%, transparent);
  color: var(--29d-coral-700);
}
.ds-shell--collapsed .ds-nav-label,
.ds-shell--collapsed .ds-nav-count,
.ds-shell--collapsed .ds-nav-group-label,
.ds-shell--collapsed .ds-brand-text { display: none; }
.ds-shell--collapsed .ds-nav-item { justify-content: center; padding: 0; }
.ds-shell--collapsed .ds-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.ds-sidebar-foot { margin-top: auto; padding-top: var(--29d-s-4); border-top: 1px solid var(--29d-border); }

.ds-main { min-width: 0; display: flex; flex-direction: column; }

.ds-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--ds-topbar-h);
  display: flex; align-items: center; gap: var(--29d-s-3);
  padding: 0 var(--29d-s-6);
  background: var(--29d-surface);
  border-bottom: 1px solid var(--29d-border);
}
.ds-topbar-menu { display: none; }
.ds-topbar-title {
  font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg);
  font-weight: var(--29d-weight-bold); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-topbar-search {
  display: flex; align-items: center; gap: var(--29d-s-2);
  margin-left: auto;
  height: var(--29d-control-h-sm);
  padding: 0 var(--29d-s-2) 0 var(--29d-s-3);
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-2);
  background: var(--29d-sunken); color: var(--29d-text-4);
  font-size: var(--29d-text-sm); cursor: pointer;
  transition: border-color var(--29d-t-fast) var(--29d-ease),
              color var(--29d-t-fast) var(--29d-ease);
}
.ds-topbar-search:hover { border-color: var(--29d-border-strong); color: var(--29d-text-2); }
.ds-topbar-actions { display: flex; align-items: center; gap: var(--29d-s-2); }
.ds-topbar-sep { width: 1px; align-self: stretch; margin: var(--29d-s-2) 0; background: var(--29d-border); }

.ds-page { padding: var(--29d-page-pad); max-width: 1200px; width: 100%; min-width: 0; margin: 0 auto; }

/* Sidebar overlay mode under 900px */
.ds-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: color-mix(in srgb, var(--29d-text-1) 45%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--29d-t-base) var(--29d-ease);
}
@media (max-width: 900px) {
  .ds-shell { grid-template-columns: minmax(0, 1fr); }
  .ds-shell--collapsed { grid-template-columns: minmax(0, 1fr); }
  .ds-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(var(--ds-sidebar-w), 84vw) !important;
    transform: translateX(-105%);
    transition: transform var(--29d-t-slow) var(--29d-ease);
    box-shadow: var(--29d-shadow-modal);
  }
  .ds-shell--nav-open .ds-sidebar { transform: translateX(0); }
  .ds-shell--nav-open .ds-scrim { opacity: 1; pointer-events: auto; }
  .ds-shell--collapsed .ds-nav-label,
  .ds-shell--collapsed .ds-nav-count,
  .ds-shell--collapsed .ds-nav-group-label,
  .ds-shell--collapsed .ds-brand-text { display: block; }
  .ds-shell--collapsed .ds-nav-item { justify-content: flex-start; padding: 0 var(--29d-s-3); }
  .ds-shell--collapsed .ds-brand { justify-content: flex-start; padding: var(--29d-s-2) var(--29d-s-3) var(--29d-s-4); }
  .ds-topbar-menu { display: inline-flex; }
  .ds-topbar-search .ds-topbar-search-text { display: none; }
}

/* ============================================================
 * 02 — COMMAND PALETTE (.ds-command-*)
 * Raycast-lane overlay: fuzzy filter, grouped items, kbd hints.
 * DOM is built by tier1.js on first open.
 * ============================================================ */
.ds-command-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--29d-text-1) 45%, transparent);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh var(--29d-s-4) var(--29d-s-4);
  animation: ds-fade var(--29d-t-fast) var(--29d-ease);
}
/* Author display:flex beats the UA [hidden]{display:none} rule — re-assert it.
   (Includes .ds-modal-backdrop: a compat fix for hidden-attribute toggling,
   not a restyle — its design still ships from components.css.) */
.ds-command-backdrop[hidden],
.ds-drawer-backdrop[hidden],
.ds-modal-backdrop[hidden] { display: none !important; }
.ds-command {
  width: min(640px, 100%);
  background: var(--29d-raised);
  border-radius: var(--29d-r-4);
  box-shadow: var(--29d-shadow-modal);
  overflow: hidden;
  animation: ds-command-in var(--29d-t-slow) var(--29d-ease);
}
@keyframes ds-command-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
.ds-command-input-row {
  display: flex; align-items: center; gap: var(--29d-s-3);
  padding: var(--29d-s-4);
  border-bottom: 1px solid var(--29d-border);
}
.ds-command-input-row svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--29d-text-4); }
.ds-command-input {
  flex: 1 1 auto; border: 0; background: transparent;
  font: inherit; font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg);
  color: var(--29d-text-1); outline: none; min-width: 0;
}
.ds-command-input::placeholder { color: var(--29d-text-4); }
.ds-command-list {
  max-height: 320px; overflow-y: auto;
  padding: var(--29d-s-2);
}
.ds-command-group-label {
  padding: var(--29d-s-3) var(--29d-s-3) var(--29d-s-1);
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  font-weight: var(--29d-weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--29d-text-4);
}
.ds-command-item {
  display: flex; align-items: center; gap: var(--29d-s-3);
  width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: var(--29d-s-2) var(--29d-s-3);
  border-radius: var(--29d-r-2);
  font: inherit; font-size: var(--29d-body-size); color: var(--29d-text-1);
  text-align: left;
  transition: background var(--29d-t-instant) var(--29d-ease);
}
.ds-command-item:hover { background: var(--29d-wash); }
.ds-command-item.is-active { background: var(--29d-wash-2); }
.ds-command-item .ds-command-icon {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center; color: var(--29d-text-3);
}
.ds-command-item .ds-command-icon svg { width: 16px; height: 16px; }
.ds-command-item .ds-command-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-command-item .ds-command-hint { display: flex; gap: var(--29d-s-1); }
.ds-command-empty {
  padding: var(--29d-s-8) var(--29d-s-4); text-align: center;
  color: var(--29d-text-3); font-size: var(--29d-text-sm);
}
.ds-command-foot {
  display: flex; align-items: center; gap: var(--29d-s-4);
  padding: var(--29d-s-2) var(--29d-s-4);
  border-top: 1px solid var(--29d-border);
  font-size: var(--29d-text-xs); color: var(--29d-text-3);
}

/* ============================================================
 * 03 — DATA TABLE PRO (.ds-datatable + friends)
 * Builds ON .ds-table (never redefines it): sortable headers,
 * filter, pagination footer, row checkboxes + bulk action bar.
 * ============================================================ */
.ds-datatable { display: flex; flex-direction: column; gap: var(--29d-s-3); }
.ds-datatable-toolbar {
  display: flex; align-items: center; gap: var(--29d-s-3);
  flex-wrap: wrap;
}
.ds-datatable-toolbar .ds-input { max-width: 280px; }
.ds-datatable-count {
  margin-left: auto; font-size: var(--29d-text-sm); color: var(--29d-text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ds-datatable-scroll {
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-3);
  background: var(--29d-surface); overflow: auto;
}
.ds-datatable-scroll .ds-table { border: 0; }
.ds-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ds-sortable:hover { background: var(--29d-wash); }
.ds-sortable .ds-sort-ind {
  display: inline-block; margin-left: var(--29d-s-1);
  color: var(--29d-text-4); font-size: var(--29d-text-xs);
  font-variant-numeric: tabular-nums; width: 1em; text-align: center;
}
.ds-sortable[aria-sort="ascending"] .ds-sort-ind,
.ds-sortable[aria-sort="descending"] .ds-sort-ind { color: var(--29d-coral-600); }
.ds-datatable tr.is-selected td {
  background: color-mix(in srgb, var(--29d-coral-600) 6%, transparent);
}
.ds-datatable-footer {
  display: flex; align-items: center; gap: var(--29d-s-3);
  font-size: var(--29d-text-sm); color: var(--29d-text-3);
  flex-wrap: wrap;
}
.ds-datatable-pages { margin-left: auto; display: flex; align-items: center; gap: var(--29d-s-1); }
.ds-page-btn {
  min-width: var(--29d-control-h-sm); height: var(--29d-control-h-sm);
  padding: 0 var(--29d-s-2);
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-2);
  background: var(--29d-surface); color: var(--29d-text-2);
  font: inherit; font-size: var(--29d-text-sm);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--29d-t-instant) var(--29d-ease),
              border-color var(--29d-t-instant) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-page-btn:hover:not(:disabled) { background: var(--29d-wash); border-color: var(--29d-border-strong); }
.ds-page-btn:active:not(:disabled) { transform: scale(0.95); }
.ds-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-page-btn.is-current {
  background: var(--29d-coral-600); border-color: var(--29d-coral-600);
  color: var(--29d-on-coral); font-weight: var(--29d-weight-semibold);
}
.ds-bulkactions {
  position: sticky; bottom: var(--29d-s-4); z-index: 10;
  align-self: center;
  display: flex; align-items: center; gap: var(--29d-s-3);
  background: var(--29d-text-1); color: var(--29d-bg);
  border-radius: var(--29d-r-3); padding: var(--29d-s-2) var(--29d-s-4);
  box-shadow: var(--29d-shadow-pop);
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-medium);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--29d-t-base) var(--29d-ease),
              transform var(--29d-t-base) var(--29d-ease);
}
.ds-bulkactions.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ds-bulkactions .ds-bulk-count { font-variant-numeric: tabular-nums; }
.ds-bulkactions .ds-btn { flex: 0 0 auto; }

/* ============================================================
 * 04 — FORM KIT (.ds-check / .ds-radio / .ds-switch / .ds-range /
 *          .ds-date / .ds-segmented / .ds-otp)
 * Textarea/select/text inputs ship in components.css (.ds-input
 * family) and are NOT redone here.
 * ============================================================ */
.ds-check, .ds-radio {
  display: inline-flex; align-items: flex-start; gap: var(--29d-s-2);
  cursor: pointer; font-size: var(--29d-body-size); color: var(--29d-text-1);
  user-select: none;
}
.ds-check-input, .ds-radio-input, .ds-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-check-box {
  flex: 0 0 auto; width: var(--29d-s-4); height: var(--29d-s-4); margin-top: 2px;
  border: 1px solid var(--29d-border-strong); border-radius: var(--29d-r-1);
  background: var(--29d-surface); position: relative;
  transition: background var(--29d-t-instant) var(--29d-ease),
              border-color var(--29d-t-instant) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-check:active .ds-check-box { transform: scale(0.9); } /* press */
.ds-check-box::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid var(--29d-on-coral); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--29d-t-instant) var(--29d-ease-pop);
}
.ds-check-input:checked + .ds-check-box {
  background: var(--29d-coral-600); border-color: var(--29d-coral-600);
}
.ds-check-input:checked + .ds-check-box::after { transform: rotate(45deg) scale(1); }
.ds-check-input:disabled ~ .ds-check-label,
.ds-check-input:disabled + .ds-check-box { opacity: 0.45; cursor: not-allowed; }

.ds-radio-dot {
  flex: 0 0 auto; width: var(--29d-s-4); height: var(--29d-s-4); margin-top: 2px;
  border: 1px solid var(--29d-border-strong); border-radius: var(--29d-pill);
  background: var(--29d-surface); position: relative;
  transition: border-color var(--29d-t-instant) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-radio:active .ds-radio-dot { transform: scale(0.9); }
.ds-radio-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: var(--29d-pill);
  background: var(--29d-coral-600); transform: scale(0);
  transition: transform var(--29d-t-instant) var(--29d-ease);
}
.ds-radio-input:checked + .ds-radio-dot { border-color: var(--29d-coral-600); }
.ds-radio-input:checked + .ds-radio-dot::after { transform: scale(1); }

.ds-switch {
  display: inline-flex; align-items: center; gap: var(--29d-s-2);
  cursor: pointer; user-select: none; font-size: var(--29d-body-size);
}
.ds-switch-track {
  flex: 0 0 auto; width: 36px; height: 20px; border-radius: var(--29d-pill);
  background: var(--29d-border-strong); position: relative;
  transition: background var(--29d-t-instant) var(--29d-ease);
}
.ds-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--29d-pill);
  background: var(--29d-surface);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--29d-text-1) 25%, transparent);
  transition: transform var(--29d-t-instant) var(--29d-ease);
}
.ds-switch:active .ds-switch-track::after { transform: scaleX(1.2); }
.ds-switch-input:checked + .ds-switch-track { background: var(--29d-coral-600); }
.ds-switch-input:checked + .ds-switch-track::after { transform: translateX(16px); }
.ds-switch:active .ds-switch-input:checked + .ds-switch-track::after { transform: translateX(13px) scaleX(1.2); }
.ds-switch-input:disabled ~ .ds-switch-label,
.ds-switch-input:disabled + .ds-switch-track { opacity: 0.45; cursor: not-allowed; }

/* Range slider: fill driven by --ds-p (0-100) set by tier1.js */
.ds-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; background: transparent; cursor: pointer;
  --ds-p: 50;
}
.ds-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--29d-pill);
  background: linear-gradient(
    to right,
    var(--29d-coral-600) 0%,
    var(--29d-coral-600) calc(var(--ds-p) * 1%),
    var(--29d-wash-2) calc(var(--ds-p) * 1%),
    var(--29d-wash-2) 100%
  );
}
.ds-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: var(--29d-pill);
  background: var(--29d-surface);
  border: 1px solid var(--29d-coral-600);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--29d-text-1) 25%, transparent);
  transition: transform var(--29d-t-instant) var(--29d-ease);
}
.ds-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ds-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--29d-focus-halo); }
.ds-range::-moz-range-track {
  height: 4px; border-radius: var(--29d-pill); background: var(--29d-wash-2);
}
.ds-range::-moz-range-progress {
  height: 4px; border-radius: var(--29d-pill); background: var(--29d-coral-600);
}
.ds-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: var(--29d-pill);
  background: var(--29d-surface); border: 1px solid var(--29d-coral-600);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--29d-text-1) 25%, transparent);
}
.ds-range:focus-visible::-moz-range-thumb { box-shadow: var(--29d-focus-halo); }
.ds-range:disabled { opacity: 0.45; cursor: not-allowed; }

/* Date input: native, styled to the system (use with .ds-input) */
.ds-input[type="date"] { color-scheme: light; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .ds-input[type="date"] { color-scheme: dark; }

/* Segmented control: sliding thumb, arrow-key support via JS */
.ds-segmented {
  display: inline-flex; position: relative;
  background: var(--29d-wash); border-radius: var(--29d-pill);
  padding: var(--29d-s-0);
}
.ds-segmented-thumb {
  position: absolute; top: var(--29d-s-0); bottom: var(--29d-s-0); left: 0;
  background: var(--29d-surface);
  border: 1px solid var(--29d-border); border-radius: var(--29d-pill);
  transition: transform var(--29d-t-base) var(--29d-ease),
              width var(--29d-t-base) var(--29d-ease);
  pointer-events: none;
}
.ds-segmented-btn {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  height: var(--29d-control-h-sm); padding: 0 var(--29d-s-4);
  border-radius: var(--29d-pill);
  font: inherit; font-size: var(--29d-text-sm); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-3); white-space: nowrap;
  transition: color var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-segmented-btn:hover { color: var(--29d-text-1); }
.ds-segmented-btn:active { transform: scale(0.96); }
.ds-segmented-btn.is-active { color: var(--29d-text-1); font-weight: var(--29d-weight-semibold); }

/* OTP / code input: boxes that auto-advance (tier1.js) */
.ds-otp { display: flex; gap: var(--29d-s-2); }
.ds-otp-input {
  width: 48px; height: 48px; padding: 0;
  text-align: center; font-size: var(--29d-text-2xl); line-height: 1;
  font-weight: var(--29d-weight-semibold);
  font-variant-numeric: tabular-nums;
  caret-color: var(--29d-coral-600);
}
.ds-otp-input.has-value { border-color: var(--29d-coral-500); }

/* ============================================================
 * 05 — DRAWERS + DIALOG SIZES
 * .ds-modal ships in components.css (NOT redefined). Sizes are
 * modifiers; the drawer is a new right slide-over. JS drives
 * .ds-modal-backdrop (existing) and .ds-drawer-backdrop (new)
 * open/close via the hidden attribute.
 * ============================================================ */
.ds-modal-sm { max-width: 400px; }
.ds-modal-lg { max-width: 800px; }

.ds-drawer-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--29d-text-1) 45%, transparent);
  display: flex; justify-content: flex-end;
  animation: ds-fade var(--29d-t-fast) var(--29d-ease);
}
.ds-drawer {
  width: min(480px, 92vw); height: 100dvh;
  background: var(--29d-overlay);
  box-shadow: var(--29d-shadow-modal);
  padding: var(--29d-s-6);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--29d-s-4);
  animation: ds-drawer-in var(--29d-t-slow) var(--29d-ease);
}
@keyframes ds-drawer-in { from { opacity: 0; transform: translateX(48px); } }
.ds-drawer-sm { width: min(340px, 92vw); }
.ds-drawer-lg { width: min(680px, 94vw); }
.ds-drawer-head {
  display: flex; align-items: flex-start; gap: var(--29d-s-3);
  padding-bottom: var(--29d-s-4); border-bottom: 1px solid var(--29d-border);
}
.ds-drawer-title {
  margin: 0; flex: 1 1 auto;
  font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl);
  font-weight: var(--29d-weight-bold);
}
.ds-drawer-body { flex: 1 1 auto; }
.ds-drawer-foot {
  display: flex; justify-content: flex-end; gap: var(--29d-s-2);
  padding-top: var(--29d-s-4); border-top: 1px solid var(--29d-border);
}
.ds-dialog-close {
  flex: 0 0 auto; width: var(--29d-control-h-sm); height: var(--29d-control-h-sm);
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--29d-r-2);
  color: var(--29d-text-3); cursor: pointer; font-size: var(--29d-text-lg); line-height: 1;
  transition: background var(--29d-t-fast) var(--29d-ease),
              color var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-dialog-close:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-dialog-close:active { transform: scale(0.92); }

/* ============================================================
 * 06 — TABS (.ds-tabs underline + .ds-tabs--segmented)
 * ============================================================ */
.ds-tabs { display: flex; flex-direction: column; gap: var(--29d-s-4); }
.ds-tablist {
  display: flex; gap: var(--29d-s-1);
  border-bottom: 1px solid var(--29d-border);
}
.ds-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: var(--29d-s-2) var(--29d-s-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: var(--29d-body-size); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-3); white-space: nowrap;
  transition: color var(--29d-t-fast) var(--29d-ease),
              border-color var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-tab:hover { color: var(--29d-text-1); }
.ds-tab:active { transform: scale(0.97); }
.ds-tab.is-active, .ds-tab[aria-selected="true"] {
  color: var(--29d-text-1); font-weight: var(--29d-weight-semibold);
  border-bottom-color: var(--29d-coral-600);
}
.ds-tabpanel { animation: ds-fade var(--29d-t-fast) var(--29d-ease); }

.ds-tabs--segmented .ds-tablist {
  align-self: flex-start;
  background: var(--29d-wash); border: 0; border-radius: var(--29d-pill);
  padding: var(--29d-s-0); gap: 0;
}
.ds-tabs--segmented .ds-tab {
  border: 0; margin: 0; border-radius: var(--29d-pill);
  padding: 0 var(--29d-s-4); height: var(--29d-control-h-sm);
}
.ds-tabs--segmented .ds-tab.is-active,
.ds-tabs--segmented .ds-tab[aria-selected="true"] {
  background: var(--29d-surface);
  box-shadow: 0 0 0 1px var(--29d-ring);
}

/* ============================================================
 * 07 — TOAST STACK (extends .ds-toast from components.css)
 * .ds-toast itself is NOT redefined: stack + leaving state +
 * action button + variant dot only.
 * ============================================================ */
.ds-toast-stack {
  position: fixed; right: var(--29d-s-4); bottom: var(--29d-s-4); z-index: 100;
  display: flex; flex-direction: column; gap: var(--29d-s-2);
  align-items: flex-end; max-width: min(420px, calc(100vw - var(--29d-s-8)));
}
.ds-toast-leaving {
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-fast) var(--29d-ease);
}
.ds-toast-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--29d-pill);
  background: var(--29d-text-4);
}
.ds-toast-dot.is-success { background: var(--29d-green-600); }
.ds-toast-dot.is-error { background: var(--29d-red-500); }
.ds-toast-dot.is-info { background: var(--29d-blue-600); }
.ds-toast-action {
  border: 0; background: transparent; cursor: pointer;
  color: var(--29d-coral-300); font: inherit; font-size: inherit;
  font-weight: var(--29d-weight-semibold); white-space: nowrap;
  padding: var(--29d-s-1) var(--29d-s-2); border-radius: var(--29d-r-1);
}
.ds-toast-action:hover { text-decoration: underline; }
.ds-toast-action:active { transform: scale(0.96); }

/* ============================================================
 * 08 — STAT CARDS (.ds-stat)
 * Big tabular number; judgment lives in the sub-line/badge,
 * NEVER in the number color (v2 doctrine).
 * ============================================================ */
.ds-stat {
  background: var(--29d-surface);
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-3);
  padding: var(--29d-card-pad);
  display: flex; flex-direction: column; gap: var(--29d-s-1);
  min-width: 0;
}
.ds-stat-label {
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  font-weight: var(--29d-weight-medium); color: var(--29d-text-3);
  display: flex; align-items: center; gap: var(--29d-s-2);
}
.ds-stat-value {
  font-size: var(--29d-text-3xl); line-height: var(--29d-lh-3xl);
  font-weight: var(--29d-weight-xbold); color: var(--29d-text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ds-stat-delta {
  display: flex; align-items: center; gap: var(--29d-s-2);
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  color: var(--29d-text-3);
}
.ds-stat-grid {
  display: grid; gap: var(--29d-s-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ============================================================
 * 09 — AVATARS (.ds-avatar)
 * ============================================================ */
.ds-avatar {
  --ds-avatar-size: 40px;
  width: var(--ds-avatar-size); height: var(--ds-avatar-size);
  flex: 0 0 auto;
  border-radius: var(--29d-pill);
  background: var(--29d-coral-100); color: var(--29d-coral-700);
  display: inline-grid; place-items: center;
  font-size: calc(var(--ds-avatar-size) * 0.38);
  font-weight: var(--29d-weight-semibold);
  overflow: hidden; position: relative; user-select: none;
}
.ds-avatar-24 { --ds-avatar-size: 24px; }
.ds-avatar-32 { --ds-avatar-size: 32px; }
.ds-avatar-40 { --ds-avatar-size: 40px; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar-status {
  position: absolute; right: 0; bottom: 0;
  width: calc(var(--ds-avatar-size) * 0.3); height: calc(var(--ds-avatar-size) * 0.3);
  min-width: 8px; min-height: 8px;
  border-radius: var(--29d-pill);
  background: var(--29d-text-4);
  box-shadow: 0 0 0 2px var(--29d-surface);
}
.ds-avatar-status.is-online { background: var(--29d-green-600); }
.ds-avatar-status.is-busy { background: var(--29d-red-500); }
.ds-avatar-status.is-away { background: var(--29d-amber-600); }
.ds-avatar-stack { display: inline-flex; align-items: center; }
.ds-avatar-stack .ds-avatar {
  box-shadow: 0 0 0 2px var(--29d-surface); /* ring-border between overlaps */
}
.ds-avatar-stack .ds-avatar + .ds-avatar { margin-left: calc(var(--29d-s-2) * -1); }
.ds-avatar-more {
  background: var(--29d-wash-2); color: var(--29d-text-2);
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 10 — PROGRESS (.ds-progress linear + .ds-ring SVG)
 * ============================================================ */
.ds-progress {
  height: var(--29d-s-1); border-radius: var(--29d-pill);
  background: var(--29d-wash-2); overflow: hidden;
  min-width: 80px;
}
.ds-progress-bar {
  height: 100%; width: calc(var(--ds-p, 0) * 1%);
  background: var(--29d-coral-600); border-radius: var(--29d-pill);
  transition: width var(--29d-t-base) var(--29d-ease);
}
.ds-progress.is-indeterminate .ds-progress-bar {
  width: 40%; animation: ds-progress-slide 1.1s var(--29d-ease) infinite;
}
@keyframes ds-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.ds-progress-label {
  display: flex; justify-content: space-between; gap: var(--29d-s-2);
  font-size: var(--29d-text-sm); color: var(--29d-text-3);
  font-variant-numeric: tabular-nums; margin-bottom: var(--29d-s-1);
}
.ds-ring { display: inline-block; transform: rotate(-90deg); }
.ds-ring-track { stroke: var(--29d-wash-2); }
.ds-ring-value {
  stroke: var(--29d-coral-600); stroke-linecap: round;
  transition: stroke-dashoffset var(--29d-t-base) var(--29d-ease);
}

/* ============================================================
 * 11 — SEARCH HIGHLIGHT (mark styling, token-driven)
 * ============================================================ */
mark {
  background: var(--29d-amber-100); color: inherit;
  border-radius: var(--29d-r-1); padding: 0 1px;
}
.ds-search { display: flex; flex-direction: column; gap: var(--29d-s-2); max-width: 480px; }
.ds-search-list {
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-3);
  background: var(--29d-surface); overflow: hidden;
  max-height: 280px; overflow-y: auto;
}
.ds-search-item {
  padding: var(--29d-s-2) var(--29d-s-3);
  font-size: var(--29d-body-size); border-bottom: 1px solid var(--29d-border);
}
.ds-search-item:last-child { border-bottom: 0; }
.ds-search-item.is-hidden { display: none; }
.ds-search-empty {
  padding: var(--29d-s-6); text-align: center;
  color: var(--29d-text-3); font-size: var(--29d-text-sm);
}
.ds-search-empty[hidden] { display: none; }

/* ============================================================
 * 12 — WOW: slide-to-confirm / animated counter / like button
 * Motion budget: 80-240ms ease-out; ease-pop for success only.
 * ============================================================ */
.ds-slide-confirm {
  --ds-p: 0;
  position: relative; height: var(--29d-control-h);
  border-radius: var(--29d-pill);
  background: var(--29d-sunken);
  border: 1px solid var(--29d-border);
  overflow: hidden; user-select: none; touch-action: pan-y;
}
.ds-slide-fill {
  position: absolute; inset: 0; width: calc(var(--ds-p) * 1%);
  background: var(--29d-coral-600); border-radius: var(--29d-pill);
  transition: width var(--29d-t-instant) linear;
}
.ds-slide-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-3); pointer-events: none; white-space: nowrap;
}
.ds-slide-handle {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(var(--29d-control-h) - 8px);
  border-radius: var(--29d-pill);
  background: var(--29d-surface);
  border: 1px solid var(--29d-border);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--29d-text-1) 20%, transparent);
  display: grid; place-items: center;
  color: var(--29d-text-2); cursor: grab;
  touch-action: none;
}
.ds-slide-handle:active { cursor: grabbing; }
.ds-slide-confirm.is-dragging .ds-slide-fill,
.ds-slide-confirm.is-dragging .ds-slide-handle { transition: none; }
.ds-slide-confirm.is-done { border-color: var(--29d-coral-600); pointer-events: none; }
.ds-slide-confirm.is-done .ds-slide-fill { width: 100%; }
.ds-slide-confirm.is-done .ds-slide-label { color: var(--29d-on-coral); }
.ds-slide-confirm.is-done .ds-slide-handle {
  left: auto; right: 3px;
  animation: ds-confirm-pop var(--29d-t-slow) var(--29d-ease-pop);
  color: var(--29d-green-600); border-color: var(--29d-green-600);
}
@keyframes ds-confirm-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.ds-countup { font-variant-numeric: tabular-nums; }

.ds-like {
  display: inline-flex; align-items: center; gap: var(--29d-s-1);
  border: 0; background: transparent; cursor: pointer;
  padding: var(--29d-s-1) var(--29d-s-2); border-radius: var(--29d-r-2);
  color: var(--29d-text-3); font: inherit; font-size: var(--29d-text-sm);
  font-variant-numeric: tabular-nums;
  transition: color var(--29d-t-fast) var(--29d-ease),
              background var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-like:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-like:active { transform: scale(0.92); } /* tactile press */
.ds-like svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ds-like.is-liked { color: var(--29d-coral-600); font-weight: var(--29d-weight-semibold); }
.ds-like.is-liked svg { fill: var(--29d-coral-600); stroke: var(--29d-coral-600); }
.ds-like.is-liked.is-popping svg { animation: ds-like-pop var(--29d-t-slow) var(--29d-ease-pop); }
@keyframes ds-like-pop {
  0% { transform: scale(0.4); }
  55% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ============================================================
 * 13 — REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ds-shell *, .ds-shell *::before, .ds-shell *::after,
  .ds-command-backdrop, .ds-command-backdrop *,
  .ds-drawer-backdrop, .ds-drawer-backdrop *,
  .ds-toast-stack, .ds-toast-stack * {
    animation-duration: var(--29d-t-instant) !important;
    transition-duration: var(--29d-t-instant) !important;
  }
  .ds-progress.is-indeterminate .ds-progress-bar { animation: none; }
}

/* ============================================================
 * TIER 2 — rich interactive pieces (charts, kanban, chat,
 * calendar, timeline, dropzone, code, markdown, stepper,
 * pricing, settings, compare, tilt, reorder)
 * Tokens only. See run file design-components-2026-10-10.
 * ============================================================ */
/* ============================================================
 * 29COURT DESIGN LANGUAGE v2 — TIER 2 COMPONENTS
 * Richer interactive pieces. Vanilla JS + canvas, zero deps.
 * Every color/radius/space/shadow/font/motion -> --29d-* token.
 * Section banner per component. Do not redefine Tier 1 / core classes.
 * Live tokens: https://ideas.29court.com/design-system/tokens.css
 * ============================================================ */

/* ============================================================
 * 1. CHARTS — canvas sparkline / bar / line
 * DPR-aware, token colors (JS reads --29d-* via getComputedStyle),
 * resize-aware. Markup: <div class="ds-chart" data-ds-chart="line"
 * data-values="1,2,3"></div>
 * ============================================================ */
.ds-chart { position: relative; width: 100%; height: 180px; }
.ds-chart[data-ds-chart="sparkline"] { height: 56px; }
.ds-chart-canvas { display: block; width: 100%; height: 100%; }

/* ============================================================
 * 2. KANBAN — columns with counts, pointer-drag cards, keyboard move
 * ============================================================ */
.ds-kanban {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 300px);
  gap: var(--29d-s-4); overflow-x: auto; align-items: start;
  padding-bottom: var(--29d-s-2); -webkit-overflow-scrolling: touch;
}
.ds-kanban-col {
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); display: flex; flex-direction: column;
  min-height: 160px;
}
.ds-kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--29d-s-2); padding: var(--29d-s-3) var(--29d-s-4);
  border-bottom: 1px solid var(--29d-border);
}
.ds-kanban-col-title {
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  font-weight: var(--29d-weight-semibold); color: var(--29d-text-2);
}
.ds-kanban-col-count {
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-semibold);
  font-variant-numeric: tabular-nums; color: var(--29d-text-3);
  background: var(--29d-wash-2); border: 1px solid var(--29d-border);
  border-radius: var(--29d-pill); padding: var(--29d-s-0) var(--29d-s-2);
  min-width: 24px; text-align: center;
}
.ds-kanban-col-body {
  display: flex; flex-direction: column; gap: var(--29d-s-2);
  padding: var(--29d-s-3); flex: 1; min-height: 120px;
  border-radius: 0 0 var(--29d-r-3) var(--29d-r-3);
  transition: background-color var(--29d-t-fast) var(--29d-ease);
}
.ds-kanban-col-body.ds-drop-ok { background: var(--29d-wash); }
.ds-kanban-card {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-2); padding: var(--29d-s-3);
  cursor: grab; position: relative; touch-action: pan-y;
  transition: border-color var(--29d-t-fast) var(--29d-ease),
              transform var(--29d-t-instant) var(--29d-ease);
}
.ds-kanban-card:hover { border-color: var(--29d-border-strong); }
.ds-kanban-card:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }
.ds-kanban-card.ds-drag-src { opacity: 0.35; }
.ds-kanban-card-title {
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  font-weight: var(--29d-weight-semibold); color: var(--29d-text-1);
  margin: 0 0 var(--29d-s-1); padding-right: var(--29d-s-8);
}
.ds-kanban-card-meta {
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  color: var(--29d-text-3); margin: 0;
}
.ds-kanban-card-move {
  position: absolute; top: var(--29d-s-2); right: var(--29d-s-2);
  display: flex; gap: var(--29d-s-0); opacity: 0;
  transition: opacity var(--29d-t-fast) var(--29d-ease);
}
.ds-kanban-card:hover .ds-kanban-card-move,
.ds-kanban-card:focus-within .ds-kanban-card-move { opacity: 1; }
.ds-kanban-card-move button {
  width: 24px; height: 24px; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--29d-text-sm); line-height: 1;
  color: var(--29d-text-3); background: var(--29d-surface);
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-1);
  cursor: pointer; padding: 0;
}
.ds-kanban-card-move button:hover { color: var(--29d-text-1); background: var(--29d-wash); }
.ds-kanban-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  box-shadow: var(--29d-shadow-pop); opacity: 0.95; margin: 0;
}
.ds-kanban-insert {
  height: var(--29d-s-0); background: var(--29d-coral-600);
  border-radius: var(--29d-r-1);
}
.ds-dragging, .ds-dragging * { user-select: none !important; }

/* ============================================================
 * 3. CHAT THREAD — bubbles, composer, typing indicator
 * ============================================================ */
.ds-chat {
  display: flex; flex-direction: column;
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); overflow: hidden;
}
.ds-chat-log {
  display: flex; flex-direction: column; gap: var(--29d-s-3);
  padding: var(--29d-s-4); overflow-y: auto; max-height: 420px;
  min-height: 160px;
}
.ds-chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.ds-chat-msg-in { align-self: flex-start; align-items: flex-start; }
.ds-chat-msg-out { align-self: flex-end; align-items: flex-end; }
.ds-chat-bubble {
  padding: var(--29d-s-2) var(--29d-s-3); border-radius: var(--29d-r-2);
  font-size: var(--29d-body-size); line-height: var(--29d-body-lh);
  overflow-wrap: break-word; max-width: 100%;
}
.ds-chat-msg-in .ds-chat-bubble {
  background: var(--29d-sunken); color: var(--29d-text-1);
  border: 1px solid var(--29d-border);
  border-top-left-radius: var(--29d-r-1);
}
.ds-chat-msg-out .ds-chat-bubble {
  background: var(--29d-coral-600); color: var(--29d-on-coral);
  border-top-right-radius: var(--29d-r-1);
}
.ds-chat-time {
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  color: var(--29d-text-4); margin-top: var(--29d-s-0);
  font-variant-numeric: tabular-nums;
}
.ds-chat-typing .ds-chat-bubble { display: inline-flex; gap: var(--29d-s-1); padding: var(--29d-s-3) var(--29d-s-4); }
.ds-chat-typing .ds-chat-bubble span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--29d-text-3);
  animation: ds-typing 1s var(--29d-ease) infinite;
}
.ds-chat-typing .ds-chat-bubble span:nth-child(2) { animation-delay: 0.15s; }
.ds-chat-typing .ds-chat-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.ds-chat-composer {
  display: flex; gap: var(--29d-s-2); padding: var(--29d-s-3);
  border-top: 1px solid var(--29d-border); background: var(--29d-surface);
}
.ds-chat-composer .ds-chat-input { flex: 1; min-width: 0; }

/* ============================================================
 * 4. CALENDAR / DATE PICKER — month grid, single + range select
 * ============================================================ */
.ds-calendar {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); padding: var(--29d-s-4);
  width: 300px; max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.ds-calendar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--29d-s-2);
}
.ds-calendar-label {
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-1);
}
.ds-calendar-nav {
  width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--29d-text-lg); line-height: 1;
  color: var(--29d-text-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--29d-r-2);
  cursor: pointer; padding: 0;
  transition: background-color var(--29d-t-fast) var(--29d-ease);
}
.ds-calendar-nav:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-calendar-nav:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }
.ds-calendar-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--29d-s-1);
}
.ds-calendar-week span {
  text-align: center; font-size: var(--29d-text-2xs);
  font-weight: var(--29d-weight-semibold); color: var(--29d-text-3);
  padding: var(--29d-s-1) 0; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ds-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--29d-s-0); }
.ds-calendar-pad { aspect-ratio: 1; }
.ds-calendar-day {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--29d-text-sm); color: var(--29d-text-1);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--29d-r-2); cursor: pointer; padding: 0; font-family: inherit;
  transition: background-color var(--29d-t-fast) var(--29d-ease),
              color var(--29d-t-fast) var(--29d-ease);
}
.ds-calendar-day:hover { background: var(--29d-wash); }
.ds-calendar-day:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }
.ds-calendar-day.ds-today { border-color: var(--29d-border-strong); font-weight: var(--29d-weight-semibold); }
.ds-calendar-day.ds-selected {
  background: var(--29d-coral-600); color: var(--29d-on-coral);
  font-weight: var(--29d-weight-semibold);
}
.ds-calendar-day.ds-selected:hover { background: var(--29d-coral-700); }
.ds-calendar-day.ds-in-range { background: var(--29d-coral-100); border-radius: 0; }
.ds-calendar-day.ds-preview { background: var(--29d-wash-2); }

/* ============================================================
 * 5. TIMELINE / ACTIVITY FEED — vertical rail, semantic dots
 * ============================================================ */
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-timeline-item {
  position: relative; padding: 0 0 var(--29d-s-4) var(--29d-s-6); margin: 0;
}
.ds-timeline-item:last-child { padding-bottom: 0; }
.ds-timeline-item::before {
  content: ""; position: absolute; top: var(--29d-s-4); bottom: calc(var(--29d-s-4) * -1);
  left: 5px; width: 1px; background: var(--29d-border);
}
.ds-timeline-item:last-child::before { display: none; }
.ds-timeline-dot {
  position: absolute; top: var(--29d-s-1); left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--29d-text-5); border: 2px solid var(--29d-surface);
  box-shadow: 0 0 0 1px var(--29d-border);
}
.ds-timeline-dot-green  { background: var(--29d-green-600); box-shadow: 0 0 0 1px var(--29d-green-600); }
.ds-timeline-dot-amber  { background: var(--29d-amber-600); box-shadow: 0 0 0 1px var(--29d-amber-600); }
.ds-timeline-dot-red    { background: var(--29d-red-600);   box-shadow: 0 0 0 1px var(--29d-red-600); }
.ds-timeline-dot-blue   { background: var(--29d-blue-600);  box-shadow: 0 0 0 1px var(--29d-blue-600); }
.ds-timeline-dot-coral  { background: var(--29d-coral-600);  box-shadow: 0 0 0 1px var(--29d-coral-600); }
.ds-timeline-body {
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  color: var(--29d-text-1);
}
.ds-timeline-time {
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  color: var(--29d-text-3); font-variant-numeric: tabular-nums;
  margin-top: var(--29d-s-0);
}
[data-density="compact"] .ds-timeline-item { padding-bottom: var(--29d-s-2); }

/* ============================================================
 * 6. FILE DROPZONE — drag-over state, browse, file list
 * Front-end only: no network upload is performed.
 * ============================================================ */
.ds-dropzone {
  border: 1px dashed var(--29d-border-strong); border-radius: var(--29d-r-3);
  background: var(--29d-surface); padding: var(--29d-s-8) var(--29d-s-6);
  text-align: center; cursor: pointer;
  transition: border-color var(--29d-t-fast) var(--29d-ease),
              background-color var(--29d-t-fast) var(--29d-ease);
}
.ds-dropzone:hover { border-color: var(--29d-text-3); }
.ds-dropzone-over {
  border-color: var(--29d-coral-600); background: var(--29d-coral-50);
  border-style: solid;
}
.ds-dropzone:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }
.ds-dropzone-title {
  font-size: var(--29d-body-size); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-1); margin: 0 0 var(--29d-s-1);
}
.ds-dropzone-hint {
  font-size: var(--29d-text-sm); color: var(--29d-text-3); margin: 0;
}
.ds-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-dropzone-files { margin-top: var(--29d-s-4); display: flex; flex-direction: column; gap: var(--29d-s-2); text-align: left; }
.ds-dropzone-file {
  display: flex; align-items: center; gap: var(--29d-s-3);
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-2); padding: var(--29d-s-2) var(--29d-s-3);
}
.ds-dropzone-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--29d-text-sm); color: var(--29d-text-1);
  font-family: var(--29d-font-mono);
}
.ds-dropzone-size {
  font-size: var(--29d-text-xs); color: var(--29d-text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ds-dropzone-remove {
  width: 24px; height: 24px; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--29d-text-md); line-height: 1;
  color: var(--29d-text-3); background: transparent;
  border: 1px solid transparent; border-radius: var(--29d-r-1);
  cursor: pointer; padding: 0; flex: none;
}
.ds-dropzone-remove:hover { color: var(--29d-red-600); background: var(--29d-red-100); }

/* ============================================================
 * 7. CODE BLOCK — header (language + copy), mono body, h-scroll
 * ============================================================ */
.ds-code {
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); overflow: hidden;
}
.ds-code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--29d-s-2); padding: var(--29d-s-2) var(--29d-s-3);
  border-bottom: 1px solid var(--29d-border);
}
.ds-code-lang {
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--29d-text-3);
  font-family: var(--29d-font-mono);
}
.ds-code-copy {
  display: inline-flex; align-items: center; gap: var(--29d-s-1);
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-2); background: transparent;
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-1);
  padding: var(--29d-s-0) var(--29d-s-2); cursor: pointer; font-family: inherit;
  transition: background-color var(--29d-t-fast) var(--29d-ease),
              color var(--29d-t-fast) var(--29d-ease);
}
.ds-code-copy:hover { background: var(--29d-wash); color: var(--29d-text-1); }
.ds-code-copy:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }
.ds-code-copied { color: var(--29d-green-700); border-color: var(--29d-green-600); }
.ds-code pre {
  margin: 0; padding: var(--29d-s-4); overflow-x: auto;
  font-family: var(--29d-font-mono); font-size: var(--29d-text-sm);
  line-height: 1.6; color: var(--29d-text-1);
  -webkit-overflow-scrolling: touch;
}
.ds-code code { font-family: inherit; white-space: pre; }

/* ============================================================
 * 8. MARKDOWN RENDERER OUTPUT — safe subset styles
 * Applied to the HTML returned by DS.markdown().
 * ============================================================ */
.ds-md { color: var(--29d-text-1); font-size: var(--29d-body-size); line-height: var(--29d-body-lh); }
.ds-md > *:first-child { margin-top: 0; }
.ds-md > *:last-child { margin-bottom: 0; }
.ds-md h1, .ds-md h2, .ds-md h3 {
  font-weight: var(--29d-weight-bold); color: var(--29d-text-1);
  margin: var(--29d-s-6) 0 var(--29d-s-2);
}
.ds-md h1 { font-size: var(--29d-text-2xl); line-height: var(--29d-lh-2xl); }
.ds-md h2 { font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl); }
.ds-md h3 { font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg); }
.ds-md p { margin: 0 0 var(--29d-s-3); }
.ds-md ul, .ds-md ol { margin: 0 0 var(--29d-s-3); padding-left: var(--29d-s-6); }
.ds-md li { margin-bottom: var(--29d-s-1); }
.ds-md li ul, .ds-md li ol { margin: var(--29d-s-1) 0 0; }
.ds-md a { color: var(--29d-blue-600); text-decoration: underline; text-underline-offset: 2px; }
.ds-md a:hover { color: var(--29d-blue-700); }
.ds-md code.ds-md-code, .ds-md .ds-md-code {
  font-family: var(--29d-font-mono); font-size: 0.88em;
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-1); padding: 0 var(--29d-s-1);
}
.ds-md pre.ds-md-pre, .ds-md .ds-md-pre {
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-2); padding: var(--29d-s-3) var(--29d-s-4);
  overflow-x: auto; margin: 0 0 var(--29d-s-4);
}
.ds-md pre.ds-md-pre code, .ds-md .ds-md-pre code {
  font-family: var(--29d-font-mono); font-size: var(--29d-text-sm);
  line-height: 1.6; white-space: pre; background: none; border: none; padding: 0;
}
.ds-md strong { font-weight: var(--29d-weight-semibold); }

/* ============================================================
 * 9. STEPPER / WIZARD — numbered steps, panels, Back/Continue
 * ============================================================ */
.ds-steps { width: 100%; }
.ds-steps-head {
  display: flex; align-items: flex-start; margin: 0 0 var(--29d-s-6); padding: 0;
  list-style: none;
}
.ds-step {
  flex: 1; display: flex; align-items: flex-start; gap: var(--29d-s-2);
  position: relative; padding: 0; margin: 0;
  background: none; border: none; font: inherit; text-align: left;
}
.ds-step:not(:last-child) { padding-right: var(--29d-s-4); }
.ds-step:not(:last-child)::after {
  content: ""; position: absolute; top: 14px; left: 36px; right: var(--29d-s-2);
  height: 1px; background: var(--29d-border);
}
.ds-step-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--29d-sunken); color: var(--29d-text-3);
  border: 1px solid var(--29d-border);
  transition: background-color var(--29d-t-base) var(--29d-ease),
              color var(--29d-t-base) var(--29d-ease),
              border-color var(--29d-t-base) var(--29d-ease);
}
.ds-step-label { font-size: var(--29d-text-sm); font-weight: var(--29d-weight-medium); color: var(--29d-text-3); padding-top: var(--29d-s-1); }
.ds-step[data-state="current"] .ds-step-num { background: var(--29d-coral-600); border-color: var(--29d-coral-600); color: var(--29d-on-coral); }
.ds-step[data-state="current"] .ds-step-label { color: var(--29d-text-1); font-weight: var(--29d-weight-semibold); }
.ds-step[data-state="done"] .ds-step-num { background: var(--29d-green-100); border-color: var(--29d-green-600); color: var(--29d-green-700); }
.ds-step[data-state="done"] .ds-step-label { color: var(--29d-text-2); }
.ds-step[data-state="done"] { cursor: pointer; }
.ds-step[data-state="done"]:focus-visible { outline: none; }
.ds-step[data-state="done"]:focus-visible .ds-step-num { box-shadow: var(--29d-focus-halo); }
.ds-step-panel { animation: ds-fade var(--29d-t-fast) var(--29d-ease); }
.ds-stepper-actions {
  display: flex; justify-content: space-between; gap: var(--29d-s-2);
  margin-top: var(--29d-s-6); padding-top: var(--29d-s-4);
  border-top: 1px solid var(--29d-border);
}

/* ============================================================
 * 10. PRICING TABLE — 3 tiers, popular = coral ring (not blob)
 * ============================================================ */
.ds-pricing {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--29d-s-4); align-items: stretch;
}
.ds-pricing-tier {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-4); padding: var(--29d-s-6);
  display: flex; flex-direction: column; position: relative;
}
.ds-pricing-popular {
  border-color: var(--29d-coral-600);
  box-shadow: 0 0 0 1px var(--29d-coral-600);
}
.ds-pricing-flag {
  position: absolute; top: calc(var(--29d-s-3) * -1); left: 50%;
  transform: translateX(-50%);
  background: var(--29d-coral-600); color: var(--29d-on-coral);
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--29d-s-0) var(--29d-s-3); border-radius: var(--29d-pill);
  white-space: nowrap;
}
.ds-pricing-name {
  font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-2); margin: 0 0 var(--29d-s-1);
}
.ds-pricing-price {
  font-size: var(--29d-text-3xl); line-height: var(--29d-lh-3xl);
  font-weight: var(--29d-weight-xbold); color: var(--29d-text-1);
  font-variant-numeric: tabular-nums; margin: 0;
}
.ds-pricing-per { font-size: var(--29d-text-sm); color: var(--29d-text-3); margin: var(--29d-s-0) 0 var(--29d-s-4); }
.ds-pricing-desc { font-size: var(--29d-text-sm); color: var(--29d-text-2); margin: 0 0 var(--29d-s-4); }
.ds-pricing-features { list-style: none; margin: 0 0 var(--29d-s-6); padding: 0; flex: 1; }
.ds-pricing-features li {
  display: flex; gap: var(--29d-s-2); align-items: flex-start;
  font-size: var(--29d-text-sm); color: var(--29d-text-1);
  padding: var(--29d-s-1) 0;
}
.ds-pricing-check { color: var(--29d-green-600); font-weight: var(--29d-weight-bold); flex: none; }
.ds-pricing-features li.ds-off { color: var(--29d-text-4); }
.ds-pricing-features li.ds-off .ds-pricing-check { color: var(--29d-text-5); }
@media (max-width: 760px) { .ds-pricing { grid-template-columns: 1fr; } }

/* ============================================================
 * 11. SETTINGS PANEL — grouped rows: label + description + control
 * Works with Tier 1 form kit classes (ds-input, ds-select, ds-switch…).
 * ============================================================ */
.ds-settings { display: flex; flex-direction: column; gap: var(--29d-s-8); }
.ds-settings-group-title {
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-bold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--29d-text-3);
  margin: 0 0 var(--29d-s-2); padding-bottom: var(--29d-s-2);
  border-bottom: 1px solid var(--29d-border);
}
.ds-settings-rows {
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-3); overflow: hidden;
}
.ds-settings-row {
  display: flex; align-items: center; gap: var(--29d-s-4);
  padding: var(--29d-s-4) var(--29d-s-4);
}
.ds-settings-row + .ds-settings-row { border-top: 1px solid var(--29d-border); }
.ds-settings-row-text { flex: 1; min-width: 0; }
.ds-settings-row-label {
  font-size: var(--29d-body-size); font-weight: var(--29d-weight-medium);
  color: var(--29d-text-1); margin: 0 0 var(--29d-s-0);
}
.ds-settings-row-desc {
  font-size: var(--29d-text-sm); color: var(--29d-text-3); margin: 0;
}
.ds-settings-row-control { flex: none; margin-left: auto; display: flex; align-items: center; }

/* ============================================================
 * 12a. WOW — IMAGE COMPARE SLIDER (drag divider, labels)
 * ============================================================ */
.ds-compare {
  position: relative; overflow: hidden; border-radius: var(--29d-r-3);
  border: 1px solid var(--29d-border); aspect-ratio: 16 / 9;
  background: var(--29d-sunken); user-select: none; touch-action: pan-y;
}
.ds-compare img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; display: block;
}
.ds-compare-top { z-index: 1; }
.ds-compare-label {
  position: absolute; top: var(--29d-s-3); z-index: 3;
  font-size: var(--29d-text-xs); font-weight: var(--29d-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--29d-text-1); color: var(--29d-bg);
  padding: var(--29d-s-0) var(--29d-s-2); border-radius: var(--29d-r-1);
  pointer-events: none;
}
.ds-compare-label-before { left: var(--29d-s-3); }
.ds-compare-label-after { right: var(--29d-s-3); }
.ds-compare-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2;
  width: var(--29d-s-0); background: var(--29d-surface);
  box-shadow: 0 0 0 1px var(--29d-ring); transform: translateX(-50%);
  pointer-events: none;
}
.ds-compare-handle {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--29d-surface); border: 1px solid var(--29d-border-strong);
  box-shadow: var(--29d-shadow-pop);
  transform: translate(-50%, -50%); cursor: ew-resize;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--29d-text-2); font-size: var(--29d-text-sm); padding: 0;
  touch-action: none;
}
.ds-compare-handle:hover { color: var(--29d-coral-600); border-color: var(--29d-coral-600); }
.ds-compare-handle:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); }

/* ============================================================
 * 12b. WOW — TILT CARD (subtle pointer tilt; off under reduced motion)
 * ============================================================ */
.ds-tilt {
  transform-style: preserve-3d; will-change: transform;
  transition: transform var(--29d-t-fast) var(--29d-ease);
}
@media (prefers-reduced-motion: reduce) {
  .ds-tilt { transition: none; transform: none !important; }
}

/* ============================================================
 * 12c. WOW — REORDER LIST (drag to reorder, drop indicator)
 * ============================================================ */
.ds-reorder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--29d-s-2); }
.ds-reorder-item {
  display: flex; align-items: center; gap: var(--29d-s-3);
  background: var(--29d-surface); border: 1px solid var(--29d-border);
  border-radius: var(--29d-r-2); padding: var(--29d-s-3) var(--29d-s-4);
  font-size: var(--29d-body-size); color: var(--29d-text-1);
  transition: border-color var(--29d-t-fast) var(--29d-ease),
              box-shadow var(--29d-t-fast) var(--29d-ease);
}
.ds-reorder-item:hover { border-color: var(--29d-border-strong); }
.ds-reorder-handle {
  flex: none; cursor: grab; color: var(--29d-text-4);
  font-size: var(--29d-text-md); line-height: 1; letter-spacing: -2px;
  padding: var(--29d-s-1); touch-action: none; user-select: none;
  background: none; border: none; font-family: inherit;
}
.ds-reorder-handle:hover { color: var(--29d-text-2); }
.ds-reorder-handle:active { cursor: grabbing; }
.ds-reorder-handle:focus-visible { outline: none; box-shadow: var(--29d-focus-halo); border-radius: var(--29d-r-1); }
.ds-reorder-item.ds-reorder-dragging {
  border-color: var(--29d-coral-600); box-shadow: var(--29d-shadow-pop);
  opacity: 0.9;
}
.ds-reorder-drop {
  height: var(--29d-s-0); background: var(--29d-coral-600);
  border-radius: var(--29d-r-1); margin: 0;
}