/* ==========================================================================
   primitives.css — Phase A. Consumes tokens.css. Load after reset.css.
   --------------------------------------------------------------------------
   ROSETTA STONE — legacy -> new (migrators, apply class-by-class):

     .btn + .btn-primary           -> .btn .btn-primary      (44px, same)
     .btn + .btn-success           -> .btn .btn-primary      (use accent; green reserved for status)
                                      or .btn .btn-secondary for save-like actions
     .btn + .btn-outline           -> .btn .btn-secondary
     .btn + .btn-danger            -> .btn .btn-danger
     .btn-sm                       -> .btn.btn-sm            (desktop-dense only)
     .btn-icon                     -> .btn .btn-icon

     <input>/<select>/<textarea>   -> add class .input / .select / .textarea
     .form-group                   -> .field
     .form-group > label           -> .field-label
     .form-row                     -> .field-row-2
     .form-row-3                   -> .field-row-3

     <table> + tr:hover            -> wrap in .tbl-wrap, <table class="tbl">
                                      compact variant: class="tbl tbl-compact"
     th[data-sort]                 -> unchanged attribute; .tbl th styles apply

     .badge.green                  -> .chip.chip-success
     .badge.red                    -> .chip.chip-danger
     .badge.blue                   -> .chip.chip-info
     .badge.yellow | .amber        -> .chip.chip-warn
     .badge.gray                   -> .chip.chip-neutral
     .badge.orange | .purple       -> .chip.chip-warn | .chip-info (closest semantic)
     .status-chip.active           -> .chip.chip-success (with optional data-dot)
     .status-chip.setup_pending    -> .chip.chip-warn
     .status-chip.inactive         -> .chip.chip-neutral
     .ord-new                      -> .chip[data-status="new"]
     .ord-allocated                -> .chip[data-status="allocated"]
     .ord-partial                  -> .chip[data-status="partial"]
     .ord-out_of_stock             -> .chip[data-status="out_of_stock"]
     .ord-hold                     -> .chip[data-status="hold"]
     .ord-picking                  -> .chip[data-status="picking"]
     .ord-picked                   -> .chip[data-status="picked"]
     .ord-packing                  -> .chip[data-status="packing"]
     .ord-packed                   -> .chip[data-status="packed"]
     .ord-labeled                  -> .chip[data-status="labeled"]
     .ord-shipped                  -> .chip[data-status="shipped"]
     .ord-cancelled                -> .chip[data-status="cancelled"]
     .tier-badge.vip               -> .chip.chip-info (uppercase by default)

     .card                         -> .card (NO shadow; border-only now)
     .modal-overlay + .modal       -> .dialog-backdrop + .dialog
                                      (mobile sheets -> .sheet)
     drawer patterns (customers)   -> .drawer

     .toast                        -> .toast.toast-success|info|warn|danger
     .empty-state                  -> .empty
   ========================================================================== */

/* -------- Buttons ---------------------------------------------------------- */
/* .btn's display: inline-flex would otherwise win over the UA [hidden]
   default. Honor b.hidden = true so wireActions and friends can hide
   buttons by setting the attribute. */
.btn[hidden] { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast),
              color var(--motion-fast), box-shadow var(--motion-fast);
  user-select: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

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

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }

.btn-danger-ghost { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }

.btn-sm { min-height: 28px; padding: 0 var(--space-2); font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-md { min-height: 36px; padding: 0 var(--space-4); font-size: var(--t-md); }
.btn-lg { min-height: 44px; padding: 0 var(--space-4); font-size: var(--t-md); } /* touch-target */
.btn-xl { min-height: 56px; padding: 0 var(--space-5); font-size: var(--t-lg); } /* scanner/worker */

.btn-icon { width: 44px; min-width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 32px; min-width: 32px; }

/* -------- Inputs ----------------------------------------------------------- */
/* .input/.select/.textarea set display:block, which beats the UA [hidden]
   default of display:none. Honor el.hidden = true so mountWarehouseScope
   (and any other helper that toggles the attribute) actually hides the
   field on single-warehouse installs / when the picker is empty. */
.input[hidden], .select[hidden], .textarea[hidden] { display: none !important; }
.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.4;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.textarea { min-height: 72px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-subtle); opacity: .7; cursor: not-allowed; }

/* Hide spinner / up-down stepper on every type=number input across the
   platform. Applies globally — workers prefer to scan/type the number,
   the tiny stepper buttons are noise + accidental clicks. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select {
  appearance: none;
  padding-right: var(--space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394a3b8'/%3E%3C/svg%3E");
}

.input-group { display: flex; align-items: stretch; }
.input-group > .input,
.input-group > .select { border-radius: 0; margin-left: -1px; }
.input-group > :first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); margin-left: 0; }
.input-group > :last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.input-group .input-addon {
  display: inline-flex; align-items: center; padding: 0 var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--t-sm);
}

/* -------- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field-hint { font-size: var(--t-sm); color: var(--text-muted); }
.field-error { font-size: var(--t-sm); color: var(--danger); }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }
.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) {
  .field-row-2, .field-row-3 { grid-template-columns: 1fr; }
}

/* -------- Tables (shell only, no logic) ----------------------------------- */
.tbl-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-md); color: var(--text); }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0 var(--space-3);
  height: 36px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl tbody td {
  padding: 0 var(--space-3);
  height: 32px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-hover); }
.tbl tr.is-selected td { background: var(--accent-soft); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.tbl th[data-sort] { cursor: pointer; user-select: none; padding-right: var(--space-5); position: sticky; }
.tbl th[data-sort]:hover { color: var(--text); }
.tbl th[data-sort]::after { content: ''; position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); }
.tbl th[data-sort].sort-asc::after  { content: '\25B2'; }
.tbl th[data-sort].sort-desc::after { content: '\25BC'; }

.tbl-compact tbody td { height: 28px; }
.tbl-compact thead th { height: 32px; }

/* -------- Chips (unified status + tint system) ---------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  min-height: 20px;
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-fg);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Status chips render pre-formatted human text via formatStatus(); leaving
   the CSS uppercase here would surface "OUT_OF_STOCK" again. */
.chip[data-status] {
  text-transform: none;
  letter-spacing: 0;
}
.chip[data-dot="true"]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
/* Interactive chips need the 44px target. Non-interactive remain compact. */
button.chip, a.chip { cursor: pointer; padding: 2px var(--space-2); } /* inline-friendly height */
button.chip:focus-visible, a.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.chip.chip-success { background: var(--chip-success-bg); color: var(--chip-success-fg); }
.chip.chip-info    { background: var(--chip-info-bg);    color: var(--chip-info-fg); }
.chip.chip-warn    { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.chip.chip-danger  { background: var(--chip-danger-bg);  color: var(--chip-danger-fg); }
.chip.chip-neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); }

.chip[data-status="new"]           { background: var(--status-new-bg);           color: var(--status-new-fg); }
.chip[data-status="allocated"]     { background: var(--status-allocated-bg);     color: var(--status-allocated-fg); }
.chip[data-status="partial"]       { background: var(--status-partial-bg);       color: var(--status-partial-fg); }
.chip[data-status="out_of_stock"]  { background: var(--status-out_of_stock-bg);  color: var(--status-out_of_stock-fg); }
.chip[data-status="hold"]          { background: var(--status-hold-bg);          color: var(--status-hold-fg); }
.chip[data-status="picking"]       { background: var(--status-picking-bg);       color: var(--status-picking-fg); }
.chip[data-status="picked"]        { background: var(--status-picked-bg);        color: var(--status-picked-fg); }
.chip[data-status="packing"]       { background: var(--status-packing-bg);       color: var(--status-packing-fg); }
.chip[data-status="packed"]        { background: var(--status-packed-bg);        color: var(--status-packed-fg); }
.chip[data-status="labeled"]       { background: var(--status-labeled-bg);       color: var(--status-labeled-fg); }
.chip[data-status="shipped"]       { background: var(--status-shipped-bg);       color: var(--status-shipped-fg); }
.chip[data-status="delivered"]     { background: var(--status-delivered-bg);     color: var(--status-delivered-fg); }
.chip[data-status="cancelled"]     { background: var(--status-cancelled-bg);     color: var(--status-cancelled-fg); text-decoration: line-through; }
/* Claims-workflow status chips (entity scope: data-entity="claim"
   would let us key off these even if names collide later) */
.chip[data-status="draft"]         { background: var(--status-draft-bg);         color: var(--status-draft-fg); }
.chip[data-status="filed"]         { background: var(--status-filed-bg);         color: var(--status-filed-fg); }
.chip[data-status="under_review"]  { background: var(--status-under_review-bg);  color: var(--status-under_review-fg); }
.chip[data-status="approved"]      { background: var(--status-approved-bg);      color: var(--status-approved-fg); }
.chip[data-status="denied"]        { background: var(--status-denied-bg);        color: var(--status-denied-fg); }
.chip[data-status="paid"]          { background: var(--status-paid-bg);          color: var(--status-paid-fg); }

/* Lifecycle statuses for non-order entities (receiving, returns, customers,
   invoices). Mapped to the shared semantic chip colors so they stop falling
   back to the neutral-gray base. NOTE: keyed on value only — if two entities
   ever need the same status string in different colors, scope with data-entity
   (billing-pilot already styles invoices via chip-success/info/warn/danger
   classes; customer-detail mirrors that mapping). */
.chip[data-status="expected"]      { background: var(--chip-info-bg);    color: var(--chip-info-fg); }
.chip[data-status="in_progress"]   { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.chip[data-status="receiving"]     { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.chip[data-status="inspecting"]    { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.chip[data-status="completed"]     { background: var(--chip-success-bg); color: var(--chip-success-fg); }
.chip[data-status="active"]        { background: var(--chip-success-bg); color: var(--chip-success-fg); }
.chip[data-status="setup_pending"] { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.chip[data-status="inactive"]      { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); }
.chip[data-status="sent"]          { background: var(--chip-info-bg);    color: var(--chip-info-fg); }
.chip[data-status="void"]          { background: var(--chip-danger-bg);  color: var(--chip-danger-fg); }

/* -------- Cards (borders-over-shadows) ------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.card-header h3, .card-header .card-title {
  font-size: var(--t-lg); font-weight: 600; color: var(--text); margin: 0;
}
.card-body { display: flex; flex-direction: column; gap: var(--space-3); }
.card-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  margin: var(--space-3) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}

/* -------- Dialog / Drawer / Sheet ----------------------------------------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: var(--backdrop);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.dialog-backdrop.is-open { display: flex; }

.dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: dialogIn var(--motion-slow);
}
.dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-header h3, .dialog-title { font-size: var(--t-lg); font-weight: 600; }
.dialog-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.dialog-footer {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: min(480px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-slow);
}
.drawer.is-open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.drawer-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.drawer-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); display: flex; gap: var(--space-2); justify-content: flex-end; }

.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: sheetIn var(--motion-slow);
}
/* Defensive: every direct descendant of the dialog body uses
   border-box so a label + 100%-wide input can't poke out past the
   16px body padding, and any stray fixed-width grid wraps instead
   of overflowing. */
.dialog-body { overflow-x: hidden; }
.dialog-body, .dialog-body * { box-sizing: border-box; }
.dialog-body .input,
.dialog-body .select,
.dialog-body .textarea { max-width: 100%; }
/* Bottom-sheet breakpoint pushed from 640 to 768 so iPad portrait
   and narrow tablets get the full-width treatment too — small
   centered dialogs at those widths felt cramped with margins
   eating viewport on both sides. */
@media (max-width: 768px) {
  .dialog-backdrop { align-items: flex-end; padding: 0; }
  .dialog { max-width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheetIn var(--motion-slow); }
  .drawer { width: 100%; }
}
/* Phones — let footer buttons stack full-width if they would crowd. */
@media (max-width: 480px) {
  .dialog-footer { flex-wrap: wrap; }
  .dialog-footer > button { flex: 1 1 auto; min-width: 110px; }
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheetIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* -------- Empty state ----------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  color: var(--text-muted);
}
.empty-icon { font-size: 40px; line-height: 1; opacity: .7; }
.empty-title { font-size: var(--t-lg); font-weight: 600; color: var(--text); }
.empty-body { font-size: var(--t-md); max-width: 380px; }
.empty .btn { margin-top: var(--space-1); }
.empty-sample {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--text-muted);
  display: flex; align-items: center; gap: var(--space-2);
}

/* -------- Toasts ---------------------------------------------------------- */
.toast-container {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: 400;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
  max-width: 360px;
}
.toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--space-3) var(--space-4);
  font-size: var(--t-md);
  display: flex; align-items: flex-start; gap: var(--space-2);
  pointer-events: auto;
  animation: toastIn var(--motion-slow);
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-info    { border-left-color: var(--accent); }
.toast.toast-warn    { border-left-color: var(--warn); }
.toast.toast-danger  { border-left-color: var(--danger); }
.toast.is-dismissing { animation: toastOut var(--motion-slow) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(24px); } }
@media (max-width: 640px) {
  .toast-container { left: var(--space-3); right: var(--space-3); max-width: none; }
}

/* -------- Utility helpers ------------------------------------------------- */
.stack-y-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-y-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-y-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-y-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-y-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-y-6 { display: flex; flex-direction: column; gap: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.num    { font-variant-numeric: tabular-nums; }
.mono   { font-family: var(--font-mono); }
.muted  { color: var(--text-muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ========= Phase E primitives (tabs/segmented/tooltip/menu/skeleton/progress/avatar/divider/breadcrumb/kbd) ========= */

/* -------- Tabs ------------------------------------------------------------ */
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  background: transparent;
  color: var(--text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.tab:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab:disabled { opacity: .5; cursor: not-allowed; }

/* -------- Segmented control ----------------------------------------------- */
.segmented {
  display: inline-flex; align-items: stretch;
  padding: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  gap: 2px;
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  min-height: 28px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
  white-space: nowrap;
}
.segmented button:hover:not(:disabled):not(.is-active) { color: var(--text); background: var(--surface-hover); }
.segmented button.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
:root[data-theme="dark"] .segmented button.is-active { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.segmented button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.segmented button:disabled { opacity: .5; cursor: not-allowed; }

/* -------- Tooltip --------------------------------------------------------- */
.tooltip { position: relative; display: inline-flex; }
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--text);
  color: var(--bg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-popover);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast), transform var(--motion-fast), visibility 0s linear var(--motion-fast);
  z-index: 200;
}
.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content,
.tooltip-content[data-show="true"] {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--motion-base), transform var(--motion-base);
  transition-delay: 300ms;
}

/* -------- Menu / dropdown ------------------------------------------------- */
.menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--space-1);
  min-width: 180px;
  display: flex; flex-direction: column;
  z-index: 250;
}
.menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2);
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  width: 100%;
  transition: background var(--motion-fast);
}
.menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-item .menu-item-icon { display: inline-flex; width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.menu-item .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .menu-item-shortcut { color: var(--text-muted); font-size: var(--t-xs); font-family: var(--font-mono); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .menu-item-icon { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: var(--space-1) 0; border: 0; }
.menu-label {
  padding: var(--space-1) var(--space-2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------- Skeleton loader ------------------------------------------------- */
.skel {
  display: block;
  background: var(--bg-subtle);
  background-image: linear-gradient(90deg, transparent 0%, var(--surface-hover) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -200% 0;
  border-radius: var(--r-sm);
  animation: skelShimmer 1.5s ease-in-out infinite;
}
.skel-line   { height: 12px; width: 100%; }
.skel-row    { height: 32px; width: 100%; border-radius: var(--r-md); }
.skel-circle { width: 32px; height: 32px; border-radius: 50%; }
@keyframes skelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* -------- Progress -------------------------------------------------------- */
.progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 200ms ease-out;
  border-radius: inherit;
}
.progress-sm { height: 4px; border-radius: 999px; }
.progress-sm .progress-bar { border-radius: 999px; }
.progress-lg { height: 10px; }
.progress.progress-success .progress-bar { background: var(--success); }
.progress.progress-warn    .progress-bar { background: var(--warn); }
.progress.progress-danger  .progress-bar { background: var(--danger); }

/* -------- Avatar ---------------------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--r-md);
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-fg);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 20px; height: 20px; font-size: 10px; border-radius: var(--r-sm); }
.avatar-lg { width: 32px; height: 32px; font-size: var(--t-sm); }
.avatar[data-tint="1"] { background: var(--chip-info-bg);    color: var(--chip-info-fg); }
.avatar[data-tint="2"] { background: var(--chip-success-bg); color: var(--chip-success-fg); }
.avatar[data-tint="3"] { background: var(--chip-warn-bg);    color: var(--chip-warn-fg); }
.avatar[data-tint="4"] { background: var(--chip-danger-bg);  color: var(--chip-danger-fg); }
.avatar[data-tint="5"] { background: var(--accent-soft);     color: var(--accent); }
.avatar[data-tint="0"] { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); }

/* -------- Divider --------------------------------------------------------- */
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.divider-vertical {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--space-3);
  vertical-align: middle;
}

/* -------- Breadcrumb ------------------------------------------------------ */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.breadcrumb a,
.breadcrumb button {
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 2px var(--space-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.breadcrumb a:hover,
.breadcrumb button:hover { color: var(--text); background: var(--surface-hover); }
.breadcrumb a:focus-visible,
.breadcrumb button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.breadcrumb-sep { color: var(--text-muted); opacity: .7; padding: 0 2px; user-select: none; }
.breadcrumb-sep::before { content: '\203A'; } /* › */
.breadcrumb-current { color: var(--text); font-weight: 500; padding: 2px var(--space-1); }

/* -------- Page head ------------------------------------------------------- */
/* Canonical page header: H2 title + subtitle on the left, .actions cluster
   on the right. Hoisted from 12 per-screen <style> duplicates. Pages with
   special needs (oversized welcome H2, custom H2 layouts, wider subtitle
   columns) override individual selectors locally and let everything else
   fall through to these defaults. */
.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.page-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}
.page-head p {
  color: var(--text-muted);
  font-size: var(--t-md);
  margin: 0;
  max-width: 60ch;
}
.page-head .actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.page-head .sub {
  color: var(--text-muted);
  font-size: var(--t-md);
  margin: 0;
}
.page-head .sub .sep-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}

/* -------- Kbd ------------------------------------------------------------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px;
  padding: 1px var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  vertical-align: middle;
  white-space: nowrap;
}