/* ═══════════════════════════════════════════════════════════════════════
   SARVIS DILIGENCE — CANONICAL COMPONENTS
   The shared component primitives. Depends on tokens.css. Full spec: ../STYLE.md
   Selection convention everywhere: the `.active` class. Status color carries
   meaning (case/severity), never selection.
   ═══════════════════════════════════════════════════════════════════════ */

/* Segmented toggle: pick one of N views. Selected = ink-filled chip. */
.seg {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  padding: 5px 12px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base);
}
.seg-btn:hover:not(.active):not(:disabled) { color: var(--ink); }
.seg-btn.active { background: var(--ink); color: var(--surface-raised); }
.seg-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* Pill: standalone toggle / tag / chip. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.pill:hover:not(.active):not([disabled]) { border-color: var(--text-faint); color: var(--ink); }
.pill.active { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.pill[disabled] { opacity: 0.5; cursor: not-allowed; }
.pill-dot { width: 7px; height: 7px; border-radius: var(--r-circle); flex-shrink: 0; }
/* Case/status pills: active = soft status tint (color carries identity, not just selection). */
.pill.pill-status.active { background: var(--surface-raised); }
.pill.pill-floor.active   { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.pill.pill-base.active    { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.pill.pill-bull.active    { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.pill.pill-stretch.active { background: var(--accent-bg);  border-color: var(--accent);  color: var(--accent); }

/* Tag: static, non-interactive status label (period coverage, data badges).
   Unlike .pill (a toggle), a .tag never has hover/active/cursor affordances. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}
.tag-dot { width: 6px; height: 6px; border-radius: var(--r-circle); flex-shrink: 0; }
.tag.tag-warn   { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.tag.tag-danger { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.tag.tag-accent { background: var(--accent-bg);  border-color: var(--accent-border);  color: var(--accent); }

/* Buttons: tiers. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: var(--fs-base); }
.btn-primary { background: var(--ink); color: var(--surface-raised); }
.btn-primary:hover:not(:disabled) { background: var(--n-800); }
.btn-secondary { background: var(--surface-raised); color: var(--text-secondary); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }
.btn-ghost { background: none; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }
.btn-danger { background: var(--danger); color: var(--surface-raised); }
.btn-danger:hover:not(:disabled) { background: var(--red-600); }
.btn-success { background: var(--success); color: var(--surface-raised); }
.btn-success:hover:not(:disabled) { background: var(--green-600); }
.btn-warning { background: var(--warning); color: var(--surface-raised); }
.btn-warning:hover:not(:disabled) { background: var(--amber-700); }

/* Text inputs. Use .field for any single-line text/number input. .field-sm is
   the compact variant for inline edits (renaming a row, editing a label). */
.field {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-md);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.field::placeholder { color: var(--text-muted); }
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.field:disabled { opacity: 0.5; cursor: not-allowed; }
.field-sm { padding: 3px 8px; font-size: var(--fs-base); }

/* Underline tabs: top-level nav (.tab) and nested sub-nav (.subtab). Selected =
   ink text + ink underline. The page owns the row chrome (.tab-row) and panel
   show/hide (.tab-panel / .subtab-panel). */
.tab {
  padding: 13px 16px 12px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition: color var(--t-base), border-color var(--t-base);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.subtab-row { display: flex; gap: 0; margin: 12px 0 20px; border-bottom: 1.5px solid var(--border); }
.subtab {
  padding: 8px 18px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-subtle);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--t-base);
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: var(--fw-semibold); }

/* Org chart: top-down hierarchy tree built from roster reporting lines
   (staff.reportsTo). Pure-CSS connectors via the classic nested-<ul> pattern.
   Used by Operations › Roster; reusable for any reporting hierarchy. */
.orgchart { overflow-x: auto; padding: 4px 2px 8px; }
.orgchart ul { display: flex; justify-content: center; padding-top: 18px; position: relative; margin: 0; list-style: none; }
.orgchart li { position: relative; text-align: center; padding: 18px 8px 0; list-style: none; }
/* connectors between a node and its parent */
.orgchart li::before,
.orgchart li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  width: 50%; height: 18px; border-top: 1.5px solid var(--border-strong);
}
.orgchart li::after { right: auto; left: 50%; border-left: 1.5px solid var(--border-strong); }
.orgchart li:only-child::before,
.orgchart li:only-child::after { display: none; }
.orgchart li:first-child::before,
.orgchart li:last-child::after { border: 0 none; }
.orgchart li:last-child::before { border-right: 1.5px solid var(--border-strong); border-radius: 0 5px 0 0; }
.orgchart li:first-child::after { border-radius: 5px 0 0 0; }
/* vertical drop from a parent down to its children row */
.orgchart ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: 18px; border-left: 1.5px solid var(--border-strong);
}
/* top-level roots: no connector above them */
.orgchart > ul { padding-top: 0; }
.orgchart > ul > li { padding-top: 0; }
.orgchart > ul > li::before,
.orgchart > ul > li::after { display: none; }

.orgchart-node {
  display: inline-flex; flex-direction: column; gap: 1px; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-raised); padding: 6px 12px; min-width: 92px;
  cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base);
}
.orgchart-node:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.orgchart-node .ocn-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; }
.orgchart-node .ocn-role { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.orgchart-node.is-root { border-color: var(--ink); }
.orgchart-node.is-contractor { border-style: dashed; border-color: var(--accent-border); background: var(--accent-bg); }

/* ─── Overflow / kebab menu ──────────────────────────────────────────────────
   Canonical "⋯" trigger + floating popover menu. Position the .menu via JS
   (fixed coords from the trigger's bounding rect) and append it to the body so
   it never clips inside a scroll container. */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0.5px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.menu-btn:hover, .menu-btn.is-open { background: var(--surface-sunken); color: var(--ink); border-color: var(--border); }

.menu {
  position: fixed; z-index: 1000; min-width: 200px; max-width: 280px;
  background: var(--surface-raised); border: 0.5px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 5px; overflow: hidden;
}
.menu-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px 7px; margin-bottom: 4px; border-bottom: 0.5px solid var(--border-faint);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}
.menu-back {
  border: none; background: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; color: var(--text-muted);
}
.menu-back:hover { color: var(--ink); }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: none; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
  transition: background var(--t-fast), color var(--t-fast);
}
.menu-item:hover { background: var(--surface-sunken); }
.menu-item svg { flex-shrink: 0; color: var(--text-muted); }
.menu-item.is-active { color: var(--accent); }
.menu-item.is-active svg { color: var(--accent); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-bg); }
.menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-item-check { margin-left: auto; color: var(--accent); display: inline-flex; }
.menu-sep { height: 0.5px; background: var(--border-faint); margin: 4px 2px; }
.menu-search {
  width: 100%; box-sizing: border-box; margin-bottom: 4px;
  padding: 6px 8px; border: 0.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface-raised);
}
.menu-search:focus { outline: none; border-color: var(--accent); }
.menu-select {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  padding: 6px 8px; border: 0.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface-raised);
}
.menu-select:focus { outline: none; border-color: var(--accent); }
.menu-list { max-height: 240px; overflow-y: auto; }
.menu-empty { padding: 8px 9px; font-size: var(--fs-sm); color: var(--text-muted); }
/* Multi-line composer inside a menu popover (e.g. add a follow-up question). */
.menu-textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 6px; min-height: 58px;
  padding: 6px 8px; border: 0.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: var(--surface-raised); resize: none;
}
.menu-textarea:focus { outline: none; border-color: var(--accent); }
.menu-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 2px; }
/* Compose mode: a wider popover with room to type, used when a menu hosts a
   multi-line composer instead of a list of actions. */
.menu.is-compose { min-width: 340px; max-width: 380px; }
.menu.is-compose .menu-textarea { min-height: 100px; }

/* ─── Dropdown filter menu (nested) ──────────────────────────────────────────
   A trigger button + absolutely-positioned panel that hosts a list of menu
   items; each item can open a right-side flyout submenu of checkable options.
   Shares the popover vocabulary of `.menu` above but adds nesting + a checkable
   row. Toggle `.open` on `.filters-menu-panel` / `.filters-submenu-wrap` from JS
   (hover also opens the submenu via CSS). Used by the pipeline Filters control. */
.filters-menu-wrap { position: relative; margin-left: auto; }
.filters-menu-btn svg { opacity: 0.55; flex-shrink: 0; }
.filters-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  width: 252px;
  overflow: visible;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.filters-menu-panel.open { display: block; }
.filters-menu-list { display: flex; flex-direction: column; gap: 2px; }
.filters-submenu-wrap { position: relative; }
.filters-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
}
.filters-menu-item:hover,
.filters-menu-item:focus-visible,
.filters-submenu-wrap.open > .filters-menu-item,
.filters-submenu-wrap:hover > .filters-menu-item {
  background: var(--surface-sunken);
  color: var(--ink);
  outline: none;
}
.filters-menu-item-label { flex: 1; min-width: 0; }
.filters-menu-item-right { display: inline-flex; align-items: center; gap: 6px; color: var(--text-disabled); }
.filters-sub-count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--surface-raised);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.filters-sub-count.visible { display: inline-flex; }
.filters-menu-chevron { opacity: 0.55; flex-shrink: 0; }
.filters-menu-separator { height: 1px; margin: 6px -6px; background: var(--border-faint); }
.filters-menu-reset:hover { color: var(--danger); }
.filters-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 6px);
  top: -6px;
  z-index: 230;
  width: 230px;
  max-height: min(420px, calc(100vh - 190px));
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.filters-submenu-wrap.open > .filters-submenu,
.filters-submenu-wrap:hover > .filters-submenu {
  display: block;
}
.filters-submenu-title {
  padding: 6px 8px 5px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-faint);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Checkable menu row: a borderless checkbox whose state drives a glyph tick.
   `.checked` (or a checked native input) reveals `.filters-check-mark`. */
.filters-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  color: var(--text-strong);
  cursor: pointer;
  font-size: var(--fs-sm);
  user-select: none;
}
.filters-check-item:hover { background: var(--surface-sunken); color: var(--ink); }
.filters-check-item.checked { color: var(--ink); font-weight: var(--fw-medium); }
.filters-check-item input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filters-check-mark {
  flex-shrink: 0;
  width: 14px;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1;
  opacity: 0;
  text-align: center;
}
.filters-check-item.checked .filters-check-mark,
.filters-check-item input[type=checkbox]:checked + .filters-check-mark {
  opacity: 1;
}
.filters-check-label { flex: 1; min-width: 0; }
.filters-empty {
  padding: 7px 8px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}
@media (max-width: 900px) {
  .filters-menu-panel {
    left: 0;
    transform: none;
    width: 252px;
  }
}
@media (max-width: 700px) {
  .filters-submenu {
    left: 0;
    top: calc(100% + 4px);
    width: min(252px, calc(100vw - 48px));
  }
}

/* ─── Column picker ───────────────────────────────────────────────────────────
   Trigger button + dropdown of grouped, checkable column toggles (used by the
   pipeline table to show/hide optional columns). Add `.has-selection` to the
   button when any optional column is active; toggle `.open` on the menu. */
.table-column-picker { position: relative; }
.table-column-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.table-column-btn:hover,
.table-column-btn.has-selection {
  border-color: var(--text-disabled);
  color: var(--ink);
  background: var(--surface-sunken);
}
.table-column-btn svg { opacity: 0.6; flex-shrink: 0; }
.table-column-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 220;
  width: 300px;
  max-height: min(520px, calc(100vh - 180px));
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
}
.table-column-menu.open { display: block; }
.table-column-group {
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border-faint);
}
.table-column-group:last-child { border-bottom: none; }
.table-column-group-title {
  padding: 4px 13px 5px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-faint);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.table-column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  color: var(--text-strong);
  cursor: pointer;
  font-size: var(--fs-sm);
  user-select: none;
}
.table-column-option:hover { background: var(--surface-sunken); }
.table-column-option input {
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.table-column-reset {
  width: calc(100% - 20px);
  margin: 6px 10px 2px;
  justify-content: center;
}

/* Count badge — a small pill showing a numeric count (e.g. "0/2", active
   filters). Sits inside buttons/labels. On a dark button, the page supplies a
   translucent-on-dark override. */
.compare-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

/* Toast — transient bottom confirmation for a completed action. Add `.show`
   to reveal; remove it to dismiss (caller manages the timer). Variant classes
   (.toast-success, .toast-warning) tint the left rule. */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 1000; max-width: min(440px, 90vw);
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--ink); color: var(--surface-raised);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--accent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-success { border-left-color: var(--success); }
.toast-warning { border-left-color: var(--warning); }

/* ─── Icon button ─────────────────────────────────────────────────────────────
   Borderless square button wrapping a single inline SVG glyph (add / remove /
   drag). For an action that needs a text label, use .btn instead. Add
   .icon-btn-danger for destructive actions (remove). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 0.5px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); border-color: var(--border); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.icon-btn svg { width: 15px; height: 15px; display: block; }

/* Select: styled native <select>, visually matched to .field (border, focus
   ring, custom chevron). Use for any inline single-choice dropdown. */
.select {
  appearance: none; -webkit-appearance: none;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background-color: var(--surface-raised); color: var(--ink);
  font-family: inherit; font-size: var(--fs-md); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23727A7D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.select:disabled { opacity: 0.5; cursor: not-allowed; }
.select-sm { padding: 4px 22px 4px 8px; font-size: var(--fs-base); background-position: right 7px center; }

/* Reorderable list: a vertical stack of drag-to-reorder rows. The page owns the
   row markup and wires dragstart/dragover/drop in JS (see _onKanbanDragStart in
   index.html for the pattern). This provides the container, the grab handle, and
   the drag-state affordances. Apply .reorder-item to each draggable row. */
.reorder-list { display: flex; flex-direction: column; gap: 6px; }
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; flex-shrink: 0; align-self: stretch;
  color: var(--text-disabled); cursor: grab; user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 12px; height: 16px; display: block; }
.reorder-item.dragging { opacity: 0.4; }
.reorder-item.drag-over { box-shadow: inset 0 2px 0 var(--accent); }

/* Component card: a reorderable row that expands to reveal a detail/terms editor.
   A plain div (not <details>) so the header can hold interactive controls — only
   the chevron toggles. The page supplies the .comp-card-head row and body, and
   toggles `.open`. Pair with .reorder-item for drag support. */
.comp-card {
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-raised); overflow: hidden;
}
.comp-card-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px; }
.comp-card-chevron {
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: inline-flex; transition: transform var(--t-base);
}
.comp-card.open .comp-card-chevron { transform: rotate(90deg); }
.comp-card-body {
  display: none; padding: 8px 10px 10px;
  border-top: 0.5px solid var(--border-faint); background: var(--surface-alt);
}
.comp-card.open .comp-card-body { display: block; }

/* ─── Panel — surface card with optional title + subtitle ─────────────────────
   General-purpose content container: a settings section, a dashboard block.
   Stack panels and consecutive ones self-space. */
.panel {
  background: var(--surface-raised); border: 0.5px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.panel + .panel { margin-top: 20px; }
.panel-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 2px; }
.panel-subtitle { font-size: var(--fs-2xs); color: var(--text-muted); margin: 0 0 14px; }

/* ─── Stat grid — KPI / headline-metric tiles ─────────────────────────────────
   A responsive row of big numbers (dashboard KPIs, pipeline overview). Each
   .stat is label / value / optional sub. Tiles wrap at a min width. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface-raised); border: 0.5px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px;
}
.stat-label { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.1; }
.stat-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 4px; }

/* ─── Bar chart — horizontal proportional bars ────────────────────────────────
   Lightweight CSS chart for distributions and funnels: a column of
   label · track · value rows. Set each row's fill width inline
   (`style="width:NN%"` on .bar-fill). Override the fill color per row with the
   --bar-fill custom property (e.g. `style="--bar-fill: var(--partner)"`); the
   default is --accent. Tune the label / value column widths with
   --bar-label-w / --bar-value-w on .bar-chart when labels run long. */
.bar-chart { display: flex; flex-direction: column; gap: 2px; }
.bar-row {
  display: grid;
  grid-template-columns: var(--bar-label-w, 130px) 1fr var(--bar-value-w, 64px);
  align-items: center; gap: 12px; padding: 5px 0;
}
.bar-label { font-size: var(--fs-sm); color: var(--ink); }
.bar-track { height: 10px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; background: var(--bar-fill, var(--accent)); border-radius: inherit; }
.bar-value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); text-align: right; }
.bar-value span { font-weight: var(--fw-normal); color: var(--text-muted); }

/* ─── Item list — compact rows of records ─────────────────────────────────────
   A simple vertical list of records: a name (optionally a link) on the left,
   muted meta on the right, hairline dividers between rows. Use for deal lists,
   audit rows, any "name + meta" enumeration. */
.item-list { display: flex; flex-direction: column; }
.item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 0.5px solid var(--border-faint);
}
.item-row:last-child { border-bottom: 0; }
.item-row-name { font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.item-row-name:hover { color: var(--accent); text-decoration: underline; }
.item-row-meta { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }