/* GENERATED for the Customers UX-port pilot — do not edit by hand.
   Source: design-system/components.css, every rule scoped under .ds-view via
   native CSS nesting; @keyframes hoisted to top level. See scripts/scope_kit.py */

.ds-view {
/* ============================================================
   CSM 360 — Component Catalog
   Built on top of design-system/tokens.css — never hardcode values here.
   Task 2+ adds component definitions in §5 groups:
     5.1 Actions (Button)
     5.2 Status & scheduling (Status control, Three-pill control)
     5.3 Tags & indicators (Status pill, Priority tag, Source badge, etc.)
     5.4 Inputs (Text input, Textarea, Select, Search, Checkbox, Multiselect, Datepicker)
     5.5 Containers & surfaces (Card, Data table, Slide-over, Inline drawer, Modal, Toast, Tooltip, Empty state, Section header)
     5.6 Navigation & chrome (Sidebar nav item, View tabs, Column chooser, Popover/menu, Loading state)
   ============================================================ */

/* ── §5.6 Navigation & chrome ───────────────────────────────── */

/* ── Nav item ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  user-select: none;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.nav-item.is-active {
  background: var(--accent-muted);
  color: var(--accent);
}

.nav-item.is-active .nav-item-icon {
  opacity: 1;
}

/* ── Count badge (inside nav items) ── */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  background: var(--bg-hover);
  color: var(--text-3);
}

.nav-item.is-active .count-badge {
  background: var(--accent-muted);
  color: var(--accent);
}

/* ── Env badge ── */
.env-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* default: neutral (used as base for variants) */
  background: var(--bg-hover);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}

.env-badge--prod {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--border-2);
}

.env-badge--stage {
  background: var(--status-inproc-tint);
  color: var(--status-inproc);
  border-color: var(--border-2);
}

.env-badge--local {
  background: var(--bg-hover);
  color: var(--text-3);
  border-color: var(--border-2);
}

/* ── View tabs (tasks sub-tab strip) ── */
.view-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.view-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.view-tab:hover {
  color: var(--text-1);
}

.view-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Avatar ── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent-muted);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}

/* Small avatar — for dense table cells (owner chips). */
.avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

/* Owner chip — small avatar + name, for table owner cells app-wide. */
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.owner-chip__name { color: var(--text-2); }

/* ============================================================
   §5.1 Actions — Button
   ============================================================ */

/* ── Base button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background  var(--dur-base) var(--ease),
    color       var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
  /* default size: md */
  font-size: var(--fs-3);
  padding: var(--space-2) var(--space-4);
  height: 32px;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Size modifiers ── */
.btn--sm {
  font-size: var(--fs-2);
  padding: 0 var(--space-3);
  height: 26px;
  border-radius: var(--radius-sm);
}

.btn--md {
  font-size: var(--fs-3);
  padding: var(--space-2) var(--space-4);
  height: 32px;
}

/* ── Primary — teal fill ── */
.btn--primary {
  background: var(--accent);
  color: var(--bg-canvas);
  border-color: var(--accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

/* ── Secondary — surface + border ── */
.btn--secondary {
  background: var(--bg-raised);
  color: var(--text-1);
  border-color: var(--border-2);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-3);
}

.btn--secondary:active:not(:disabled) {
  background: var(--bg-active);
}

/* ── Danger — red ── */
.btn--danger {
  background: var(--red);
  color: var(--bg-canvas);
  border-color: var(--red);
}

.btn--danger:hover:not(:disabled) {
  background: var(--prio-high);
  border-color: var(--prio-high);
}

.btn--danger:active:not(:disabled) {
  box-shadow: 0 0 0 3px var(--red-ring);
}

/* ── Ghost — text-only ── */
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-1);
}

.btn--ghost:active:not(:disabled) {
  background: var(--bg-active);
}

/* ── Icon — square, no label ── */
.btn--icon {
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}

.btn--icon:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-1);
}

.btn--icon:active:not(:disabled) {
  background: var(--bg-active);
}

.btn--icon.btn--sm {
  width: 26px;
  height: 26px;
}

/* ── SVG sizing inside buttons ── */
.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}

.btn--icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   §5.3 Tags & indicators
   ============================================================ */

/* ── Status pill ── */
/*
  Usage:
    <span class="pill--status" data-status="pending">Pending</span>
    <span class="pill--status" data-status="inproc-csm">In Process — CSM</span>
    <span class="pill--status" data-status="inproc-eng">In Process — Eng</span>
    <span class="pill--status" data-status="done">Done</span>
    <span class="pill--status" data-status="cancelled">Cancelled</span>
*/
.pill--status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  /* default tint — overridden by data-status below */
  background: var(--bg-hover);
  color: var(--text-2);
}

/* UX overhaul (2026-07-14): leading status dot, inherits the pill's per-status color. */
.pill--status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

.pill--status[data-status="pending"] {
  background: var(--status-pending-tint);
  color: var(--status-pending);
}

/* inproc-csm and inproc-eng share the amber in-process token */
.pill--status[data-status="inproc-csm"],
.pill--status[data-status="inproc-eng"] {
  background: var(--status-inproc-tint);
  color: var(--status-inproc);
}

.pill--status[data-status="done"],
.pill--status[data-status="solved"] {
  background: var(--status-solved-tint);
  color: var(--status-solved);
}

.pill--status[data-status="closed"] {
  background: var(--status-closed-tint);
  color: var(--status-closed);
}

.pill--status[data-status="cancelled"] {
  background: var(--status-cancelled-tint);
  color: var(--status-cancelled);
}

/* Customer lifecycle states (Customers screen + C360). Reuse the pill shape with
   semantic tints: Active = green, Prospect = purple, Churned = grey. */
.pill--status[data-status="active"] {
  background: var(--status-done-tint);
  color: var(--status-done);
}
.pill--status[data-status="prospect"] {
  background: var(--status-pending-tint);
  color: var(--status-pending);
}
.pill--status[data-status="churned"] {
  background: var(--status-cancelled-tint);
  color: var(--status-cancelled);
}

/* Feedback Hub states (Settings → Feedback). Same dot-pill shape, reusing the
   existing status tokens: queue = purple (received, undecided), planned = slate,
   wip = amber, delivered = green, declined = grey. */
.pill--status[data-status="queue"] {
  background: var(--status-pending-tint);
  color: var(--status-pending);
}
.pill--status[data-status="planned"] {
  background: var(--status-closed-tint);
  color: var(--status-closed);
}
.pill--status[data-status="wip"] {
  background: var(--status-inproc-tint);
  color: var(--status-inproc);
}
.pill--status[data-status="delivered"] {
  background: var(--status-done-tint);
  color: var(--status-done);
}
.pill--status[data-status="declined"] {
  background: var(--status-cancelled-tint);
  color: var(--status-cancelled);
}

/* ── Feedback type badge ──
  Usage:
    <span class="pill--type" data-type="feature">Feature</span>
    <span class="pill--type" data-type="general">General</span>
  Quiet outline pill, deliberately unlike the SOLID .badge--source, so a feedback
  row never reads like an ingested customer item.
*/
.pill--type {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
}
.pill--type[data-type="feature"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Vote control ──
  Usage:
    <button class="vote" aria-pressed="false">
      <span class="vote__caret">▲</span><span class="vote__count">7</span>
    </button>
  aria-pressed carries the state: "true" = the current user has voted.
  Wrap in .tooltip-wrap to attribute the votes on hover.
*/
.vote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 40px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-2);
  background: var(--bg-surface);
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.vote:hover {
  background: var(--bg-hover);
  border-color: var(--border-1);
}
.vote__caret { font-size: var(--fs-1); line-height: 1; }
.vote__count { font-size: var(--fs-3); font-weight: var(--fw-semibold); line-height: 1; }
.vote[aria-pressed="true"] {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Upload drop zone ──
  Usage:
    <div class="dropzone">
      <div class="dropzone__hint">Drag, paste, or click to add screenshots</div>
      <div class="dropzone__tiles"><!-- .dropzone__tile elements --></div>
    </div>
  Generic: any flow that sends files to Storage can use it.
*/
.dropzone {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-muted);
}
.dropzone__hint { font-size: var(--fs-2); color: var(--text-3); }
.dropzone__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  justify-content: center;
}
.dropzone__tile {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-2);
}
.dropzone__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dropzone__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--bg-canvas);
  color: var(--text-2);
  font-size: var(--fs-1);
  line-height: 1;
  cursor: pointer;
}

/* ── Priority tag ── */
/*
  Usage:
    <span class="tag--priority" data-priority="high">High</span>
    <span class="tag--priority" data-priority="med">Med</span>
    <span class="tag--priority" data-priority="low">Low</span>
*/
/* UX overhaul (2026-07-14): priority as a graphic colored arrow + label (▲▶▼),
   no pill background — matches the mockup. */
.tag--priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-3);
}
.tag--priority::before { content: "▶"; font-size: 8px; }

.tag--priority[data-priority="high"] { background: transparent; color: var(--prio-high); }
.tag--priority[data-priority="high"]::before { content: "▲"; }

.tag--priority[data-priority="med"] { background: transparent; color: var(--prio-med); }
.tag--priority[data-priority="med"]::before { content: "▶"; }

.tag--priority[data-priority="low"] { background: transparent; color: var(--prio-low); }
.tag--priority[data-priority="low"]::before { content: "▼"; }

/* ── Source badge ── */
/*
  Usage:
    <span class="badge--source" data-source="call">Call</span>
    <span class="badge--source" data-source="zendesk">Zendesk</span>
    <span class="badge--source" data-source="slack">Slack</span>
    <span class="badge--source" data-source="email">Email</span>
    <span class="badge--source" data-source="manual">Manual</span>
*/
/* UX overhaul (2026-07-14): solid-filled source badges (was faint tints) —
   bolder / more graphic per the mockup. White label on the solid source color. */
.badge--source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  /* default: solid neutral */
  background: var(--src-manual);
  color: var(--on-solid);
}

.badge--source[data-source="call"] {
  background: var(--src-call);
  color: var(--on-solid);
}

.badge--source[data-source="zendesk"] {
  background: var(--src-zendesk);
  color: var(--on-solid);
}

.badge--source[data-source="slack"] {
  background: var(--src-slack);
  color: var(--on-solid);
}

.badge--source[data-source="email"] {
  background: var(--src-email);
  color: var(--on-solid);
}

.badge--source[data-source="manual"] {
  background: var(--src-manual);
  color: var(--on-solid);
}

/* ── UX overhaul (2026-07-14): content tags + indicators ── */
/* AI tag (AI-generated content) + Internal tag (internal-only content). */
.tag--ai, .tag--internal {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.tag--ai { background: var(--blue-tint); color: var(--blue); }
.tag--internal { background: var(--red-tint); color: var(--red); }

/* Circular progress ring — drive via inline --pct (0–100). */
.ring-progress {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), var(--bg-active) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ring-progress::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
}
.ring-progress__label {
  position: relative;
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--text-1);
}

/* Sentiment — emoji + color-coded label. */
.sentiment { display: inline-flex; align-items: center; gap: var(--space-2); }
.sentiment__emoji { font-size: var(--fs-5); line-height: 1; }
.sentiment__label { font-size: var(--fs-5); font-weight: var(--fw-bold); color: var(--text-1); }
.sentiment--positive .sentiment__label { color: var(--accent); }
.sentiment--at-risk .sentiment__label { color: var(--red); }

/* Tracker toggle — per-row Shown/Hidden switch controlling whether a task
   appears in the customer-facing export. role="switch"; aria-checked="true"
   means Shown (in the tracker). Drives only export visibility, nothing else.
     <button class="track-toggle" role="switch" aria-checked="true">
       <span class="track-toggle__track"></span><span class="track-toggle__label">Shown</span>
     </button>
*/
.track-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.track-toggle__track {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease);
}
.track-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--text-3);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.track-toggle[aria-checked="true"] {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: transparent;
}
.track-toggle[aria-checked="true"] .track-toggle__track { background: var(--accent); }
.track-toggle[aria-checked="true"] .track-toggle__track::after {
  transform: translateX(11px);
  background: var(--on-solid);
}
.track-toggle:hover { border-color: var(--border-3); }
.track-toggle[aria-checked="true"]:hover { background: var(--accent-muted); border-color: transparent; }

/* Gradient avatar (rounded-square brand mark) — variant of .avatar. */
.avatar--gradient {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: var(--on-solid);
}

/* Tab count/label chip (sits next to a .view-tab label). */
.tab-chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  color: var(--text-2);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
}

/* ── Assignee pill ── */
/*
  Usage:
    <span class="pill--assignee" data-assignee="csm">CSM</span>
    <span class="pill--assignee" data-assignee="eng">ENG</span>
*/
.pill--assignee {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-2);
}

.pill--assignee[data-assignee="csm"] {
  color: var(--accent);
  border-color: var(--accent);
}

.pill--assignee[data-assignee="eng"] {
  color: var(--blue);
  border-color: var(--blue);
}

/* ── New pill ── */
.pill--new {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--blue-tint);
  color: var(--blue);
}

/* ── Urgent tag ── */
.tag--urgent {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--red-tint);
  color: var(--red);
}

/* ── Possible-duplicate tag (Granola second source) ──
   Amber caution — a cross-account call the exact de-dupe couldn't collapse and
   that a CSM should confirm or dismiss. Distinct from red (urgent) / blue (new). */
.tag--duplicate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--prio-med-tint);
  color: var(--prio-med);
  cursor: pointer;
}

/* ── ID reference ── */
.id-ref {
  display: inline;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  color: var(--text-3);
  background: var(--bg-raised);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  white-space: nowrap;
}

/* ============================================================
   §5.4 Inputs
   Shared focus treatment: accent ring via --accent.
   All width/layout is context-driven — these classes are
   bare field styles, not layout wrappers.
   ============================================================ */

/* ── Shared focus ring (one rule, all inputs inherit it) ── */
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
.search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

/* ── Base text input ── */
.input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder {
  color: var(--text-3);
}

.input:hover:not(:focus-visible):not(:disabled) {
  border-color: var(--border-3);
}

.input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Textarea ── */
.textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  line-height: var(--lh-body);
  resize: vertical;
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.textarea::placeholder {
  color: var(--text-3);
}

.textarea:hover:not(:focus-visible):not(:disabled) {
  border-color: var(--border-3);
}

.textarea:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Select ── */
.select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 var(--space-6) 0 var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  /* Custom chevron using a data-URI svg (tokens can't be used in url(), so we
     inline a neutral grey that works in both themes — not a 6-digit hex color
     value used in the design palette, just a neutral mask). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='%236C6C72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5l4.5 5 4.5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
}

.select:hover:not(:focus-visible):not(:disabled) {
  border-color: var(--border-3);
}

.select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Search input (leading search icon) ── */
/*
  Wrapping structure:
    <div class="search-wrap">
      <span class="search-icon">…svg…</span>
      <input class="search" type="search" placeholder="Search…">
    </div>
*/
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--text-3);
  pointer-events: none;
}

.search {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 var(--space-4) 0 calc(var(--space-3) + 16px + var(--space-2));
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.search::placeholder {
  color: var(--text-3);
}

/* Cancel button (browser native on type="search") — hide it */
.search::-webkit-search-cancel-button {
  display: none;
}

.search:hover:not(:focus-visible):not(:disabled) {
  border-color: var(--border-3);
}

.search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.search:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Checkbox ── */
/*
  Usage:
    <label class="checkbox-label">
      <input type="checkbox" class="checkbox">
      <span class="checkbox-mark"></span>
      <span class="checkbox-text">Label</span>
    </label>
*/
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.checkbox-mark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-3);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background    var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease),
    box-shadow    var(--dur-base) var(--ease);
}

.checkbox-mark svg {
  width: 10px;
  height: 10px;
  color: var(--bg-canvas);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.checkbox:checked + .checkbox-mark {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox:checked + .checkbox-mark svg {
  opacity: 1;
}

.checkbox:focus-visible + .checkbox-mark {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.checkbox-label:hover .checkbox-mark {
  border-color: var(--border-3);
  background: var(--bg-hover);
}

.checkbox-label:hover .checkbox:checked + .checkbox-mark {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.checkbox-text {
  font-size: var(--fs-3);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

/* ── Filter button + popover ── */
/*
  Structure:
    <div class="filter-wrap">
      <button class="filter">
        …icon… Status <span class="filter-badge">All</span> …chevron…
      </button>
      <div class="filter-pop">
        <div class="filter-group">
          <div class="filter-group-label">Status</div>
          <label class="filter-option">
            <input type="checkbox" class="checkbox">
            <span class="checkbox-mark">…</span>
            <span class="filter-option-label">Pending</span>
          </label>
          …
        </div>
      </div>
    </div>
*/
.filter-wrap {
  position: relative;
  display: inline-flex;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background    var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease),
    color         var(--dur-base) var(--ease);
}

.filter svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.filter:hover {
  background: var(--bg-hover);
  border-color: var(--border-3);
  color: var(--text-1);
}

.filter.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  background: var(--bg-hover);
  color: var(--text-3);
}

.filter.is-active .filter-badge {
  background: var(--accent-muted);
  color: var(--accent);
}

/* ── Filter popover ── */
.filter-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  z-index: var(--z-popover);
  padding: var(--space-3) 0;
}

.filter-group {
  padding: var(--space-2) 0;
}

.filter-group + .filter-group {
  border-top: 1px solid var(--border-1);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.filter-group-label {
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}

.filter-option:hover {
  background: var(--bg-hover);
}

.filter-option-label {
  font-size: var(--fs-3);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

/* ── Datepicker popover ── */
/*
  Structure:
    <div class="datepicker">
      <div class="datepicker-header">
        <button class="btn btn--icon btn--sm">…chevron-left…</button>
        <span class="datepicker-month">June 2026</span>
        <button class="btn btn--icon btn--sm">…chevron-right…</button>
      </div>
      <div class="datepicker-grid">
        <span class="datepicker-weekday">Su</span> …×7
        <button class="datepicker-day">1</button> …
        <button class="datepicker-day is-today">15</button>
        <button class="datepicker-day is-selected">20</button>
      </div>
      <div class="datepicker-footer">
        <button class="datepicker-clear">Clear</button>
      </div>
    </div>
*/
.datepicker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  z-index: var(--z-popover);
  padding: var(--space-4);
  width: 252px;
}

.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.datepicker-month {
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

/* 7-column day grid */
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.datepicker-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  cursor: pointer;
  transition:
    background  var(--dur-base) var(--ease),
    color       var(--dur-base) var(--ease);
}

.datepicker-day:hover:not(:disabled):not(.is-selected) {
  background: var(--bg-hover);
}

.datepicker-day:disabled {
  color: var(--text-3);
  cursor: default;
  opacity: 0.4;
}

/* Empty cells (padding before first day of month) */
.datepicker-day--empty {
  pointer-events: none;
}

.datepicker-day.is-today {
  font-weight: var(--fw-semibold);
  color: var(--accent);
}

.datepicker-day.is-selected {
  background: var(--accent);
  color: var(--bg-canvas);
  font-weight: var(--fw-semibold);
}

.datepicker-day.is-selected:hover {
  background: var(--accent-hover);
}

.datepicker-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.datepicker-clear {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:
    color       var(--dur-base) var(--ease),
    background  var(--dur-base) var(--ease);
}

.datepicker-clear:hover {
  color: var(--text-1);
  background: var(--bg-hover);
}

/* ============================================================
   §5.2 Status & scheduling
   ============================================================ */

/* ── Status Control ──────────────────────────────────────── */
/*
  Usage:
    <div class="status-control">
      <span class="status-control__label">Status</span>
      <div class="status-control__track">
        <button class="status-segment is-on" data-status="pending">Pending</button>
        <button class="status-segment" data-status="inproc-csm">In Process — CSM</button>
        <button class="status-segment" data-status="inproc-eng">In Process — Eng</button>
        <button class="status-segment" data-status="done">Done</button>
        <button class="status-segment" data-status="cancelled">Cancelled</button>
      </div>
      <div class="cancel-reason" hidden>
        <textarea class="textarea" placeholder="Reason for cancellation…"></textarea>
      </div>
    </div>
*/
.status-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.status-control__label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.status-control__track {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
}

/* Dividers between segments */
.status-segment + .status-segment {
  border-left: 1px solid var(--border-2);
}

.status-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background  var(--dur-base) var(--ease),
    color       var(--dur-base) var(--ease);
  user-select: none;
}

.status-segment:hover:not(.is-on) {
  background: var(--bg-hover);
  color: var(--text-1);
}

/* On-state: color reflects chosen status token */
.status-segment.is-on[data-status="pending"] {
  background: var(--status-pending-tint);
  color: var(--status-pending);
}

.status-segment.is-on[data-status="inproc-csm"],
.status-segment.is-on[data-status="inproc-eng"] {
  background: var(--status-inproc-tint);
  color: var(--status-inproc);
}

.status-segment.is-on[data-status="done"] {
  background: var(--status-done-tint);
  color: var(--status-done);
}

.status-segment.is-on[data-status="cancelled"] {
  background: var(--status-cancelled-tint);
  color: var(--status-cancelled);
}

/* Cancel reason field — revealed when Cancelled is active */
.cancel-reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cancel-reason[hidden] {
  display: none;
}

.cancel-reason .textarea {
  min-height: 64px;
}

/* ── Three-pill Control ──────────────────────────────────── */
/*
  Usage:
    <div class="three-pill">
      <button class="pill-urgent three-pill__pill">Urgent</button>
      <div class="three-pill__group">
        <button class="pill-due three-pill__pill">Due date</button>
        <div class="tray-due three-pill__tray" hidden>
          <button class="tray-option" data-value="today">Today</button>
          …
        </div>
      </div>
      <div class="three-pill__group">
        <button class="pill-prio three-pill__pill">Priority</button>
        <div class="tray-prio three-pill__tray" hidden>
          <button class="tray-option" data-priority="none">None</button>
          <button class="tray-option" data-priority="low">Low</button>
          <button class="tray-option" data-priority="med">Medium</button>
          <button class="tray-option" data-priority="high">High</button>
        </div>
      </div>
    </div>
*/
.three-pill {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Groups wrap pill + its tray in a column */
.three-pill__group {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Base pill style — shared by all three pills */
.three-pill__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  background: var(--bg-raised);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background    var(--dur-base) var(--ease),
    color         var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease);
}

.three-pill__pill:hover:not(.is-on) {
  background: var(--bg-hover);
  border-color: var(--border-3);
  color: var(--text-1);
}

/* Urgent pill on-state: red tint */
.pill-urgent.is-on {
  background: var(--red-tint);
  color: var(--red);
  border-color: var(--red);
}

/* Due pill on-state: accent tint */
.pill-due.is-on {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

/* Priority pill on-state: color by chosen priority via data-priority */
.pill-prio.is-on[data-priority="high"] {
  background: var(--prio-high-tint);
  color: var(--prio-high);
  border-color: var(--prio-high);
}

.pill-prio.is-on[data-priority="med"] {
  background: var(--prio-med-tint);
  color: var(--prio-med);
  border-color: var(--prio-med);
}

.pill-prio.is-on[data-priority="low"] {
  background: var(--bg-hover);
  color: var(--prio-low);
  border-color: var(--prio-low);
}

/* ── Tray (Due / Priority) ── */
.three-pill__tray {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 160px;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  z-index: var(--z-popover);
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
}

.three-pill__tray[hidden] {
  display: none;
}

/* Tray options */
.tray-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease);
}

.tray-option:hover {
  background: var(--bg-hover);
}

.tray-option.is-active {
  color: var(--accent);
  font-weight: var(--fw-medium);
}

/* Priority option colors when hovered (feedback via data-priority) */
.tray-option[data-priority="high"]:hover {
  color: var(--prio-high);
}

.tray-option[data-priority="med"]:hover {
  color: var(--prio-med);
}

.tray-option[data-priority="low"]:hover {
  color: var(--prio-low);
}

/* Active priority option uses the priority color */
.tray-option.is-active[data-priority="high"] {
  color: var(--prio-high);
}

.tray-option.is-active[data-priority="med"] {
  color: var(--prio-med);
}

.tray-option.is-active[data-priority="low"] {
  color: var(--prio-low);
}

/* Clear separator before Clear option in due tray */
.tray-option[data-value="clear"] {
  border-top: 1px solid var(--border-1);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  color: var(--text-3);
}

.tray-option[data-value="clear"]:hover {
  color: var(--text-1);
}

/* ── Form field wrapper (label + control + optional hint) ── */
/*
  Usage:
    <div class="field">
      <label class="field-label">Label</label>
      <input class="input" …>
      <span class="field-hint">Optional hint text</span>
    </div>
*/
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.field-hint {
  font-size: var(--fs-2);
  color: var(--text-3);
}

/* ============================================================
   §5.5 Containers & surfaces
   ============================================================ */

/* ── Section head ── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--space-5);
}

.section-head__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.section-head__sub {
  font-size: var(--fs-2);
  color: var(--text-3);
  margin-top: var(--space-1);
}

.section-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Card ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1);
}

.card--raised {
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.card__sub {
  font-size: var(--fs-2);
  color: var(--text-3);
  margin-top: var(--space-1);
}

.card__body {
  font-size: var(--fs-3);
  color: var(--text-2);
  line-height: var(--lh-body);
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
}

/* ── Data table ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-3);
  color: var(--text-1);
}

.data-table thead {
  border-bottom: 1px solid var(--border-2);
}

.data-table th {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

/* Sortable header */
.data-table .th--sort {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--dur-base) var(--ease);
}

.data-table .th--sort:hover {
  color: var(--text-2);
}

.data-table .th--sort.is-active {
  color: var(--accent);
}

/* Sort caret SVG (rendered inline via ::after is unsupported for SVG;
   the JS renders a <span class="sort-caret"> child instead) */
.sort-caret {
  display: inline-flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.th--sort:hover .sort-caret,
.th--sort.is-active .sort-caret {
  opacity: 1;
}

.th--sort.is-asc .sort-caret {
  transform: rotate(180deg);
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
  line-height: var(--lh-tight);
}

.data-table tbody tr {
  transition: background var(--dur-base) var(--ease);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row modifier — flags a row that needs a decision before it can move on
   (e.g. a pending access request). Amber caution, matching the existing
   .tag--duplicate convention (amber = "needs review"). Uses inset box-shadow
   rather than border-left: a real border on <tr> doesn't render reliably
   with border-collapse: collapse. */
.data-table tbody tr.row--attention {
  background: var(--prio-med-tint);
  box-shadow: inset 3px 0 0 var(--prio-med);
}

.data-table tbody tr.row--attention:hover {
  background: var(--prio-med-tint);
}

/* Compact density modifier */
.data-table--compact th {
  padding: var(--space-1) var(--space-3);
}

.data-table--compact td {
  padding: var(--space-2) var(--space-3);
}

/* ── Menu (one canonical floating popover primitive) ── */
/*
  Usage:
    <div class="menu-wrap">
      <button class="btn …">Trigger</button>
      <div class="menu" hidden>
        <button class="menu-item">Option A</button>
        <div class="menu-divider"></div>
        <button class="menu-item menu-item--danger">Delete</button>
      </div>
    </div>
*/
.menu-wrap {
  position: relative;
  display: inline-flex;
}

.menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 180px;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  z-index: var(--z-popover);
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
}

.menu[hidden] {
  display: none;
}

.menu--right {
  left: auto;
  right: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease);
  user-select: none;
}

.menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item:active {
  background: var(--bg-active);
}

.menu-item--danger {
  color: var(--red);
}

.menu-item--danger svg {
  color: var(--red);
}

.menu-item--danger:hover {
  background: var(--red-tint);
}

.menu-label {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-divider {
  height: 1px;
  background: var(--border-1);
  margin: var(--space-2) 0;
}

/* ── Slide-over ── */
/*
  Markup:
    <!-- placed at document body level -->
    <div class="slideover-scrim" hidden></div>
    <aside class="slideover" hidden aria-modal="true" role="dialog">
      <div class="slideover__head">
        <span class="slideover__title">Title</span>
        <button class="btn btn--icon btn--sm slideover__close">✕ svg</button>
      </div>
      <div class="slideover__body">…content…</div>
      <div class="slideover__foot">…actions…</div>
    </aside>
*/
.slideover-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.slideover-scrim.is-open {
  opacity: 1;
}

.slideover-scrim[hidden] {
  display: none;
}

.slideover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: calc(100vw - var(--space-8));
  background: var(--bg-surface);
  border-left: 1px solid var(--border-2);
  box-shadow: var(--shadow-3);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}

.slideover.is-open {
  transform: translateX(0);
}

.slideover[hidden] {
  display: none;
}

.slideover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}

.slideover__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.slideover__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.slideover__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-1);
  flex-shrink: 0;
}

/* ── Inline drawer ── */
/*
  Markup (rows inside a .drawer-host):
    <div class="drawer-host">
      <div class="drawer-row" data-drawer-id="row-1">
        <div class="drawer-row__trigger">…row content…</div>
        <div class="drawer" hidden>…drawer content…</div>
      </div>
      …more rows…
    </div>

  When a .drawer-row.is-open:
    - Its .drawer is visible, floats forward with shadow + accent top border
    - Sibling rows get .is-blurred (host gets .has-focus class)

  Only one drawer open at a time within a .drawer-host.
*/
.drawer-host {
  display: flex;
  flex-direction: column;
}

.drawer-row {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-1);
  transition: opacity var(--dur-base) var(--ease);
}

.drawer-row:last-child {
  border-bottom: none;
}

.drawer-row__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
  user-select: none;
}

.drawer-row__trigger:hover {
  background: var(--bg-hover);
}

.drawer-row.is-open .drawer-row__trigger {
  background: var(--bg-active);
}

/* Sibling blurring when host is focused */
.drawer-host.has-focus .drawer-row:not(.is-open) {
  opacity: 0.35;
  filter: blur(1px);
  pointer-events: none;
}

/* The inline drawer panel */
.drawer {
  overflow: hidden;
  border-top: 2px solid var(--accent);
  background: var(--bg-raised);
  box-shadow: var(--shadow-3);
  position: relative;
  z-index: var(--z-sticky);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.drawer[hidden] {
  display: none;
}

/* ── Modal ── */
/*
  Markup:
    <!-- at body level -->
    <div class="modal-scrim" hidden></div>
    <div class="modal" hidden role="dialog" aria-modal="true">
      <div class="modal__head">
        <span class="modal__title">Title</span>
        <button class="btn btn--icon btn--sm modal__close">✕</button>
      </div>
      <div class="modal__body">…</div>
      <div class="modal__foot">…actions…</div>
    </div>
*/
.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.modal-scrim.is-open {
  opacity: 1;
}

.modal-scrim[hidden] {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 480px;
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal[hidden] {
  display: none;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  font-size: var(--fs-3);
  color: var(--text-2);
  line-height: var(--lh-body);
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-1);
  flex-shrink: 0;
}

/* ── Toast ── */
.toast-region {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  pointer-events: all;
  white-space: nowrap;
  /* Enter animation */
  animation: toast-in var(--dur-slow) var(--ease) both;
}

.toast svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.toast--success {
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

.toast--error {
  border-left: 3px solid var(--red);
  color: var(--red);
}

.toast--info {
  border-left: 3px solid var(--blue);
  color: var(--blue);
}

.toast.is-leaving {
  animation: toast-out var(--dur-slow) var(--ease) both;
}

/* ── Tooltip ── */
/*
  Markup:
    <span class="tooltip-wrap">
      <button class="btn …">Trigger</button>
      <span class="tooltip" role="tooltip">Tooltip text</span>
    </span>
*/
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
  opacity: 1;
}

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-4);
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--bg-hover);
  color: var(--text-3);
}

.empty-state__icon svg {
  width: 24px;
  height: 24px;
}

.empty-state__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.empty-state__sub {
  font-size: var(--fs-3);
  color: var(--text-3);
  line-height: var(--lh-body);
  max-width: 320px;
}

.empty-state__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(var(--space-3)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--space-3)); }
}