/* ============================================================
   ERPForce Design System v2.0 — Components
   ============================================================ */

/* ─────────── Typography utilities ─────────── */
.t-display    { font-size: var(--text-4xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.t-h1         { font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.t-h2         { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--leading-tight); }
.t-h3         { font-size: var(--text-xl);  font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.t-h4         { font-size: var(--text-lg);  font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.t-body       { font-size: var(--text-md);  font-weight: 400; letter-spacing: var(--tracking-normal); line-height: var(--leading-normal); }
.t-body-sm    { font-size: var(--text-sm);  font-weight: 400; letter-spacing: var(--tracking-normal); line-height: var(--leading-snug); }
.t-label      { font-size: var(--text-sm);  font-weight: 500; letter-spacing: var(--tracking-normal); color: var(--text-secondary); }
.t-meta       { font-size: var(--text-xs);  font-weight: 400; color: var(--text-tertiary); letter-spacing: 0; }
.t-eyebrow    { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.t-mono       { font-family: var(--font-mono); font-size: var(--text-sm); }
.t-num        { font-variant-numeric: tabular-nums; }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 28px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-active); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn svg { width: 14px; height: 14px; stroke-width: 1.75; color: var(--text-tertiary); flex-shrink: 0; }

.btn--primary {
  background: var(--color-action);
  border-color: transparent;
  color: var(--color-on-action);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(7,50,32,.22);
}
.btn--primary:hover { background: var(--color-action-hover); }
.btn--primary:active { background: var(--color-action-active); }
.btn--primary svg { color: var(--color-on-action); opacity: .9; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn--ghost svg { color: var(--text-secondary); }
.btn--ghost:hover svg { color: var(--text-primary); }

.btn--danger { background: var(--surface-raised); border-color: var(--border-default); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-bg-strong); }
.btn--danger svg { color: var(--danger); }

.btn--ai { background: var(--surface-raised); border-color: var(--ai-bg-strong); color: var(--ai-fg); }
.btn--ai:hover { background: var(--ai-bg); }
.btn--ai svg { color: var(--ai-fg); }

.btn--xs { height: 22px; padding: 0 var(--s-4); font-size: var(--text-sm); border-radius: var(--r-sm); }
.btn--sm { height: 26px; padding: 0 var(--s-5); font-size: var(--text-sm); }
.btn--lg { height: 36px; padding: 0 var(--s-8); font-size: var(--text-base); }
.btn--icon { width: 28px; padding: 0; justify-content: center; }
.btn--icon.btn--xs { width: 22px; }
.btn--icon.btn--sm { width: 26px; }
.btn--icon.btn--lg { width: 36px; }
.btn--kbd { font-family: var(--font-mono); font-size: 10px; color: var(--text-quaternary); margin-inline-start: var(--s-3); padding: 1px 5px; border-radius: 3px; background: var(--surface-muted); border: 1px solid var(--border-subtle); }

/* ─────────── Inputs ─────────── */
.input {
  width: 100%;
  height: 30px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  font-size: var(--text-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--text-quaternary); }
.input:hover { border-color: var(--border-strong); }
.input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input--lg { height: 36px; padding: 0 var(--s-8); }
.input--sm { height: 26px; padding: 0 var(--s-5); font-size: var(--text-sm); }

.input-shell {
  position: relative;
  display: flex; align-items: center;
  height: 30px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0 var(--s-6);
  gap: var(--s-3);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input-shell:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input-shell > svg { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; stroke-width: 1.75; }
.input-shell > input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-size: var(--text-md); color: var(--text-primary);
}
.input-shell > input::placeholder { color: var(--text-quaternary); }
.input-shell--sunken { background: var(--surface-muted); border-color: transparent; }
.input-shell--sunken:focus-within { background: var(--surface-raised); }

textarea.input { height: auto; padding: var(--s-4) var(--s-6); line-height: var(--leading-normal); }

label.field { display: flex; flex-direction: column; gap: var(--s-3); }
label.field > .field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
label.field > .field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
label.field--error > .input,
label.field--error > .input-shell { border-color: var(--danger); }
label.field--error > .field-hint { color: var(--danger); }

/* ─────────── Pills / Badges ─────────── */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 20px;
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  white-space: nowrap;
}
.pill--lg { height: 22px; font-size: var(--text-sm); padding: 0 var(--s-5); }
/* Small count/status pills (graduated from audit-fixes bucket B — intentional
   API). Use instead of inline `style="height:14px"`; label-only, never words. */
.pill--micro { height: 16px; padding: 0 5px; font-size: var(--text-2xs); }
.pill--mini  { height: 18px; padding: 0 6px; font-size: var(--text-2xs); }
.pill--dot::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* Pill text is ≤13px — use the *-fg-strong tint-safe foreground so it
   clears AA (8.6–9.5:1). Base fg stays for 18px+ / icon usage (a11y 4.2). */
.pill--success { background: var(--success-bg); color: var(--success-fg-strong); }
.pill--warning { background: var(--warning-bg); color: var(--warning-fg-strong); }
.pill--danger  { background: var(--danger-bg);  color: var(--danger-fg-strong); }
.pill--info    { background: var(--info-bg);    color: var(--info-fg-strong); }
.pill--ai      { background: var(--ai-bg);      color: var(--ai-fg-deep); }

.pill--slate  { background: var(--tag-slate-bg);  color: var(--tag-slate-fg); }
.pill--green  { background: var(--tag-green-bg);  color: var(--tag-green-fg); }
.pill--blue   { background: var(--tag-blue-bg);   color: var(--tag-blue-fg); }
.pill--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.pill--amber  { background: var(--tag-amber-bg);  color: var(--tag-amber-fg); }
.pill--rose   { background: var(--tag-rose-bg);   color: var(--tag-rose-fg); }
.pill--teal   { background: var(--tag-teal-bg);   color: var(--tag-teal-fg); }
.pill--pink   { background: var(--tag-pink-bg);   color: var(--tag-pink-fg); }

/* AI marker — sparkle icon */
.ai-mark {
  display: inline-flex; align-items: center; gap: 4px;
  height: 16px; padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--ai-bg);
  color: var(--ai-fg);
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
}
.ai-mark svg { width: 9px; height: 9px; stroke-width: 1.8; }

/* ─────────── AI value lifecycle (gap-audit 3.c) ───────────
   The system-wide marker for a value the model SUGGESTED but the user has
   not yet touched: a dotted --ai-fg underline plus a trailing sparkle. The
   instant the user edits the value the marker clears to plain text — the
   provenance is NOT discarded, it travels in the audit payload (onAuditEvent),
   never the DOM. ONE contract, two consumers:
     • DataTable  — <td data-ai-state="suggested">  (sparkle via ::after)
     • Input      — <div class="input-shell" data-ai-state="suggested">
                    (underlines the field text; sparkle is a rendered
                     .ai-sparkle element so it sits after the affixes)
   Any field that renders a model-proposed value can opt in the same way. */
[data-ai-state="suggested"] {
  text-decoration: underline dotted var(--ai-fg);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
td[data-ai-state="suggested"]::after,
.ai-sparkle {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  flex-shrink: 0;
  background: var(--ai-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
td[data-ai-state="suggested"]::after { margin-inline-start: 5px; vertical-align: -1px; }
/* The input shell underlines its own text and never draws the auto-::after. */
.input-shell[data-ai-state="suggested"] { text-decoration: none; }
.input-shell[data-ai-state="suggested"] > input { text-decoration: underline dotted var(--ai-fg); text-underline-offset: 3px; }
.input-shell .ai-sparkle { margin-inline-start: var(--s-2); }

/* ─────────── Chips (filter) ─────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 24px;
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.chip:hover { background: var(--surface-hover); }
.chip--active { background: var(--green-50); border-color: var(--green-200); color: var(--text-brand-strong); }
.chip > svg { width: 12px; height: 12px; stroke-width: 1.8; color: var(--text-tertiary); }
.chip .chip-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: var(--r-xs); color: var(--text-tertiary); }
.chip .chip-x:hover { background: var(--surface-active); color: var(--text-primary); }
.chip .chip-k { color: var(--text-tertiary); }
.chip .chip-v { color: var(--text-primary); font-weight: 500; }

/* ─────────── Pill / chip label truncation (gap-audit 6.5) ───────────
   Long Arabic / German values get an ellipsis + native tooltip instead
   of pushing the row wider. Wrap the text in a `.pill-label` /
   `.chip-label` span and add `title="…"` so the full string is still
   reachable. The cap is generous (only genuinely long strings clip);
   override per-instance with `--pill-max-w` / `--chip-max-w`. The dot,
   icon, and × stay fully visible — only the label shrinks. */
.pill { max-width: var(--pill-max-w, 18rem); }
.chip { max-width: var(--chip-max-w, 22rem); }
.pill > .pill-label,
.chip > .chip-label,
.chip .chip-v {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────── Avatar ─────────── */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-active);
  color: var(--text-secondary);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.av--xs { width: 18px; height: 18px; font-size: 8.5px; }
.av--sm { width: 22px; height: 22px; font-size: 9.5px; }
.av--md { width: 28px; height: 28px; font-size: 11px; }
.av--lg { width: 36px; height: 36px; font-size: 13px; }
.av--xl { width: 48px; height: 48px; font-size: 16px; }
.av--green  { background: var(--green-100); color: var(--green-700); }
.av--blue   { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.av--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.av--amber  { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.av--rose   { background: var(--tag-rose-bg); color: var(--tag-rose-fg); }
.av--pink   { background: var(--tag-pink-bg); color: var(--tag-pink-fg); }
.av--teal   { background: var(--tag-teal-bg); color: var(--tag-teal-fg); }
.av-stack { display: inline-flex; }
.av-stack > .av { margin-inline-start: -6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 0 0 2px var(--surface-raised); }
.av-stack > .av:first-child { margin-inline-start: 0; }

/* ─────────── Checkbox / Radio / Toggle ─────────── */
.cb, .rd {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-raised);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.cb { border-radius: var(--r-xs); }
.rd { border-radius: 50%; }
.cb:hover, .rd:hover { border-color: var(--brand-green); }
.cb:checked, .rd:checked { background: var(--brand-green); border-color: var(--brand-green); }
.cb:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 1px;
  width: 4px; height: 7px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.rd:checked::after {
  content: ''; position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}

.toggle {
  appearance: none;
  width: 28px; height: 16px;
  border-radius: var(--r-full);
  background: var(--n-200);
  position: relative; cursor: pointer;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: transform var(--dur-fast) var(--ease-out);
}
.toggle:checked { background: var(--brand-green); }
.toggle:checked::after { transform: translateX(12px); }
[dir="rtl"] .toggle:checked::after { transform: translateX(-12px); }

/* ─────────── Tabs ─────────── */
.tabs {
  display: inline-flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
}
.tab {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 30px;
  padding: 0 var(--s-5);
  font-size: var(--text-md);
  color: var(--text-tertiary);
  position: relative;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab:hover { color: var(--text-secondary); background: var(--surface-hover); }
.tab--active { color: var(--text-primary); font-weight: 500; }
.tab--active::after {
  content: ''; position: absolute;
  inset-inline-start: var(--s-4); inset-inline-end: var(--s-4); bottom: -1px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 1px;
}
.tab svg { width: 14px; height: 14px; stroke-width: 1.75; }
.tab .tab-count { font-size: var(--text-xs); color: var(--text-quaternary); padding: 0 var(--s-3); background: var(--surface-muted); border-radius: var(--r-full); min-width: 18px; text-align: center; }

/* segmented control */
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
}
.seg-item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 22px; padding: 0 var(--s-5);
  font-size: var(--text-sm); color: var(--text-tertiary);
  border-radius: var(--r-sm);
}
.seg-item:hover { color: var(--text-secondary); }
.seg-item--active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); font-weight: 500; }
.seg-item svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* ─────────── Cards / Surfaces ─────────── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card--shadow { box-shadow: var(--shadow-sm); border-color: transparent; }
.card-head {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-6) var(--s-8);
  border-bottom: 1px solid var(--border-subtle);
}
.card-title { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); flex: 1; }
.card-body { padding: var(--s-8); }

/* ─────────── KBD ─────────── */
.kbd {
  display: inline-flex; align-items: center;
  padding: 1px 5px;
  height: 16px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 0 var(--border-default);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ─────────── Tooltip (static demo) ─────────── */
.tooltip {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  background: var(--n-900);
  color: var(--n-0);
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}

/* ─────────── Table ─────────── */
.tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--text-md);
}
.tbl thead th {
  height: 32px;
  padding: 0 var(--s-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  user-select: none;
  /* 6.5 — cap + ellipsis; pass the full label in `title`. */
  max-width: var(--th-max-w, 240px);
}
.tbl thead th .th-inner {
  display: inline-flex; align-items: center; gap: var(--s-3);
  max-width: 100%; min-width: 0;
}
.tbl thead th .th-inner > .th-label,
.tbl thead th > .th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl thead th .col-ic {
  width: 14px; height: 14px;
  color: var(--text-quaternary);
  stroke-width: 1.75;
}
.tbl tbody td {
  height: 36px;
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.tbl tbody tr:hover td { background: var(--n-25); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.col-check, .tbl th.col-check { width: 32px; padding-inline-end: 0; padding-inline-start: var(--s-6); }
.tbl td .row-cell {
  display: inline-flex; align-items: center; gap: var(--s-4);
}
.tbl td .row-cell .av { width: 18px; height: 18px; font-size: 9px; }
.tbl .dim { color: var(--text-tertiary); }
.tbl .domain { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); padding: 1px 6px; background: var(--surface-muted); border-radius: var(--r-xs); }

/* ─────────── Empty state ─────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-20) var(--s-12);
  text-align: center;
}
.empty-ic {
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  color: var(--text-tertiary);
  display: grid; place-items: center;
  margin-bottom: var(--s-2);
}
.empty-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.empty-sub   { font-size: var(--text-sm); color: var(--text-tertiary); max-width: 320px; }

/* ─────────── Workflow node ─────────── */
.node {
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  min-width: 220px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.node-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}
.node-head .node-ic {
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.node-head .node-ic svg { width: 11px; height: 11px; stroke-width: 1.8; }
.node-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); flex: 1; }
.node-body { padding: var(--s-4) var(--s-5); font-size: var(--text-sm); color: var(--text-tertiary); }

/* ─────────── Navigation (sidebar) ─────────── */
.nav-item {
  display: flex; align-items: center; gap: var(--s-5);
  height: 26px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  color: var(--text-secondary);
  width: 100%;
  text-align: start;
  position: relative;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item--active { background: var(--surface-raised); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-xs); border: 1px solid var(--border-subtle); }
.nav-item--child { padding-inline-start: var(--s-12); height: 24px; font-size: var(--text-sm); color: var(--text-tertiary); }
.nav-item--child:hover { color: var(--text-primary); }
.nav-item .nav-ic { width: 14px; height: 14px; color: var(--text-tertiary); stroke-width: 1.7; flex-shrink: 0; }
.nav-item--active .nav-ic { color: var(--brand-green); }
.nav-item .nav-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-tail { display: inline-flex; align-items: center; gap: 4px; color: var(--text-quaternary); font-size: var(--text-xs); }

.nav-section { padding: 0 var(--s-3); display: flex; flex-direction: column; gap: 1px; }
.nav-section + .nav-section { margin-top: var(--s-5); }
.nav-section-title {
  font-size: var(--text-xs); color: var(--text-quaternary);
  padding: var(--s-3) var(--s-5) var(--s-2);
  display: flex; align-items: center; gap: var(--s-3);
  letter-spacing: 0;
  font-weight: 500;
}

/* ─────────── Brand mark ─────────── */
.brand-mark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.03em;
}
.brand-mark .bm-icon {
  width: 18px; height: 18px;
  border-radius: var(--r-xs);
  background: var(--brand-green);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.brand-mark .bm-erp   { color: var(--brand-green); }
.brand-mark .bm-force { color: var(--brand-navy); }
.dark .brand-mark .bm-force { color: var(--text-primary); }

/* ─────────── Color swatch ─────────── */
.swatch {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sw-chip {
  height: 64px; border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}
.sw-meta { display: flex; justify-content: space-between; align-items: baseline; }
.sw-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.sw-hex  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

.scale-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--s-2); }
.scale-row .sc { display: flex; flex-direction: column; gap: var(--s-2); }
.scale-row .sc-chip { height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); }
.scale-row .sc-lab { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); text-align: center; }

/* ─────────── Token table ─────────── */
.tok-tbl {
  display: grid;
  grid-template-columns: 80px 1fr 100px 120px;
  font-size: var(--text-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
}
.tok-tbl > div { padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; }
.tok-tbl > div:nth-last-child(-n+4) { border-bottom: 0; }
.tok-head { background: var(--surface-sunken); color: var(--text-tertiary); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.tok-name { font-family: var(--font-mono); color: var(--text-primary); }
.tok-val  { font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-xs); }

/* ─────────── Section primitives ─────────── */
.section { padding: var(--s-20) var(--s-12); max-width: 1280px; margin: 0 auto; }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: var(--s-12); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); }
.section-head .left { display: flex; flex-direction: column; gap: var(--s-3); }
.section-head .eye { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-brand); }
.section-head .ttl { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.section-head .sub { font-size: var(--text-md); color: var(--text-tertiary); max-width: 520px; }

.subsection { margin-bottom: var(--s-16); }
.subsection-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--s-4); margin-bottom: var(--s-8); border-bottom: 1px solid var(--border-subtle); }
.subsection-head .h { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.subsection-head .desc { font-size: var(--text-sm); color: var(--text-tertiary); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.row    { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.col    { display: flex; flex-direction: column; gap: var(--s-5); }

.demo {
  padding: var(--s-12);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.demo--canvas { background: var(--surface-canvas); }
.demo--sunken { background: var(--surface-sunken); }
.demo + .demo-caption { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--text-xs); color: var(--text-tertiary); }
.demo-tag { padding: 1px 6px; border-radius: var(--r-xs); background: var(--surface-muted); font-family: var(--font-mono); }

/* ─────────── Hit-target floors (WCAG 2.5.5 / T1) ───────────
   Extends the *interactive* target to --hit-min (32px fine / 44px
   coarse) without moving a pixel of painted layout. The overlay is
   transparent and belongs to its control, so clicks/hover in the
   extended halo route to the control and text stays visible. */
.btn, .btn--icon, .seg-item, .ax-row-act-btn, .chip .chip-x { position: relative; }
.btn::before, .btn--icon::before, .seg-item::before, .tab::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100%, var(--hit-min));
  height: max(100%, var(--hit-min));
}
.chip .chip-x::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100%, 24px); height: max(100%, 24px);
}
/* Row-action icons live in dense rows — cap the vertical target at the
   row height so adjacent rows never steal each other's clicks. */
.ax-row-act-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100%, var(--hit-min));
  height: max(100%, min(var(--hit-min), var(--h-row)));
}

/* ─────────── Focus-visible (keyboard) ───────────
   Relocated here from responsive.css (audit 4.7) — focus rings are a
   component capability, not a responsive concern, so a responsive
   refactor can never drop them. */
.chip:focus-visible,
.tab:focus-visible,
.seg-item:focus-visible,
.nav-item:focus-visible,
.si-item:focus-visible,
.kb-card:focus-visible,
.ag-bucket:focus-visible,
.tm-stat:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-md);
}

/* ─────────── BottomSheet / Sheet (gap-audit MO-10 · addendum D2) ───────────
   The documented home for mobile overflow: row actions, filters, pickers,
   calendar day-view. A surface that rises from the bottom edge over a scrim
   with a draggable grip and snap points. Promoted out of the P2 spec into the
   system so every surface reaches for ONE sheet instead of hand-rolling.
   JS (drag + snap + focus trap) lives in the consumer; this is the skin. */
.sheet-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal-scrim);
  background: var(--surface-overlay);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column;
  max-height: 92dvh;
  background: var(--surface-raised);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--shadow-xl);
  will-change: transform; touch-action: none;
}
.sheet--anim { transition: transform var(--dur-slow) var(--ease-decelerate); }
/* Top-anchored variant — slides DOWN from under a bar (mobile nav, top toolbars).
   Vertical motion is direction-neutral; the sheet still spans the inline axis,
   so it is correct under RTL with no flip. `--sheet-anchor` is the offset from
   the top edge (e.g. the topbar height). Consumed by the mobile nav. */
.sheet--top {
  inset-block: var(--sheet-anchor, 0) auto;
  max-height: calc(100dvh - var(--sheet-anchor, 0px));
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}
.sheet-grip { padding: var(--s-4) 0 var(--s-2); display: flex; justify-content: center; cursor: grab; flex-shrink: 0; touch-action: none; }
.sheet-grip:active { cursor: grabbing; }
.sheet-grip::before { content: ""; width: 36px; height: 4px; border-radius: var(--r-full); background: var(--n-300); }
.sheet-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-6) var(--s-5); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.sheet-head .sh-meta { flex: 1; min-width: 0; }
.sheet-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-sub { font-size: var(--text-xs); color: var(--text-tertiary); }
.sheet-x { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; }
.sheet-x:hover { background: var(--surface-hover); color: var(--text-primary); }
.sheet-x svg { width: 18px; height: 18px; stroke-width: 2; }
.sheet-body { overflow-y: auto; padding: var(--s-5) var(--s-6); flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: var(--s-5) var(--s-6) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--s-4); flex-shrink: 0; }
.sheet-foot .btn { flex: 1; justify-content: center; min-height: var(--touch-min); }

.sheet-row { display: flex; align-items: center; gap: var(--s-5); width: 100%; padding: var(--s-4) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-md); color: var(--text-primary); min-height: var(--touch-min); text-align: start; }
.sheet-row:last-child { border-bottom: 0; }
.sheet-row > svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--text-tertiary); flex-shrink: 0; }
.sheet-row .r-main { flex: 1; min-width: 0; }
.sheet-row .r-sub { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 1px; }
.sheet-row--danger { color: var(--danger); }
.sheet-row--danger > svg { color: var(--danger); }

/* Key/value facts — the columns the card dropped, restored in the detail sheet */
.sheet-facts { display: flex; flex-direction: column; margin-bottom: var(--s-5); }
.sheet-fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--border-subtle); }
.sheet-fact .sf-k { font-size: var(--text-sm); color: var(--text-tertiary); flex-shrink: 0; }
.sheet-fact .sf-v { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--fw-medium); text-align: end; }

@media (prefers-reduced-motion: reduce) {
  .sheet--anim, .sheet-scrim { transition: none; }
}

/* ─────────── CommitBar — act-then-undo (gap-audit 7.3 / 2.6) ───────────
   The system's answer to "Are you sure?": commit the action immediately and
   float this bar with a live undo window. Replaces confirmation dialogs and
   backs AI-batch undo. Pairs with useUndoWindow for timing. role="status".
   RTL-safe via logical insets. (Packaged as <CommitBar>.) */
.commit-bar {
  position: fixed;
  inset-block-end: calc(var(--s-8) + env(safe-area-inset-bottom));
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  max-width: min(92vw, 560px);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
}
.commit-bar-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.12); color: var(--text-on-inverse); }
.commit-bar-ic svg { width: 14px; height: 14px; stroke-width: 2; }
.commit-bar--danger .commit-bar-ic { background: var(--danger); color: #fff; }
.commit-bar--ai .commit-bar-ic { background: var(--ai-fg); color: #fff; }
.commit-bar-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commit-bar-msg b { font-weight: var(--fw-semibold); }
.commit-bar-undo { display: inline-flex; align-items: center; gap: var(--s-3); height: 26px; padding: 0 var(--s-5); border-radius: var(--r-full); background: rgba(255,255,255,.14); color: var(--text-on-inverse); font-size: var(--text-sm); font-weight: var(--fw-semibold); flex-shrink: 0; cursor: pointer; }
.commit-bar-undo:hover { background: rgba(255,255,255,.24); }
.commit-bar-undo svg { width: 13px; height: 13px; stroke-width: 2; }
.commit-bar-count { font-variant-numeric: tabular-nums; opacity: .7; }
.commit-bar-x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-on-inverse); opacity: .7; flex-shrink: 0; cursor: pointer; }
.commit-bar-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
.commit-bar-x svg { width: 14px; height: 14px; stroke-width: 2; }

/* ── BulkActionBar (gap-audit 2.5) — packaged selection bar ──────────────
   Count · actions · clear, or an undo window via useUndoWindow. Mirrors
   packages/ui/src/components/BulkActionBar/BulkActionBar.css. */
.bulk-bar {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 40px; padding: var(--s-3) var(--s-5);
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-radius: var(--r-md); font-size: var(--text-sm); box-shadow: var(--shadow-md);
}
.bulk-bar--inline { margin-block-end: var(--s-4); }
.bulk-bar--float {
  position: fixed; inset-block-end: calc(var(--s-8) + env(safe-area-inset-bottom));
  inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  min-width: min(440px, calc(100vw - var(--s-12))); box-shadow: var(--shadow-xl);
}
[dir="rtl"] .bulk-bar--float { transform: translateX(50%); }
.bulk-bar-count { white-space: nowrap; }
.bulk-bar-count b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bulk-bar-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.bulk-bar-acts { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex-wrap: wrap; }
.bulk-bar-spacer { flex: 1; }
.bulk-bar-acts button, .bulk-bar-clear, .bulk-bar-undo {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 28px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-full);
  background: rgba(255,255,255,.14); color: var(--text-on-inverse);
  font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap; transition: background var(--dur-fast);
}
.bulk-bar-acts button:hover, .bulk-bar-clear:hover, .bulk-bar-undo:hover { background: rgba(255,255,255,.26); }
.bulk-bar-clear { background: transparent; color: var(--shell-fg, #aeb9dc); padding-inline: var(--s-4); }
.bulk-bar-clear:hover { background: rgba(255,255,255,.12); color: var(--text-on-inverse); }
.bulk-bar-undo-n { font-variant-numeric: tabular-nums; opacity: .7; }
.bulk-bar--undo .bulk-bar-undo { background: rgba(46,178,115,.22); }
.bulk-bar--undo .bulk-bar-undo:hover { background: rgba(46,178,115,.34); }

/* ── Skeleton (gap-audit 2.9) — loading placeholder ─────────────────────
   skeleton → empty → populated. Mirrors
   packages/ui/src/primitives/Skeleton/Skeleton.css. */
.skeleton-region { display: block; }
.skeleton {
  display: block;
  background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--surface-muted) 50%, var(--surface-sunken) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
[dir="rtl"] .skeleton { animation-direction: reverse; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton--line   { height: var(--text-md); width: 100%; border-radius: var(--r-xs); }
.skeleton--rect   { height: 80px; width: 100%; border-radius: var(--r-md); }
.skeleton--circle { width: 32px; height: 32px; border-radius: 50%; }
.skeleton--chart  { height: 180px; width: 100%; border-radius: var(--r-md); }
.skeleton-lines { display: flex; flex-direction: column; gap: var(--s-3); }
.skeleton-kpi {
  display: flex; flex-direction: column; padding: var(--s-6); height: 96px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
}
.skeleton-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Breadcrumbs (gap-audit 2.10) ───────────────────────────────────────
   Mirrors packages/ui/src/components/Breadcrumbs/Breadcrumbs.css. */
.bc { min-width: 0; }
.bc-list { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.bc-item { display: inline-flex; align-items: center; min-width: 0; }
.bc-crumb {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 24px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm);
  background: transparent; font: inherit; font-size: var(--text-sm);
  color: var(--text-tertiary); text-decoration: none; max-width: 220px; cursor: default;
}
.bc-crumb .bc-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-crumb .bc-ic { flex-shrink: 0; opacity: .8; }
.bc-crumb--link { cursor: pointer; color: var(--text-secondary); }
.bc-crumb--link:hover { background: var(--surface-hover); color: var(--text-primary); }
.bc-crumb--link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bc-crumb--current { color: var(--text-primary); font-weight: var(--fw-semibold); cursor: default; }
.bc-crumb--ellipsis { padding: 0 var(--s-2); color: var(--text-quaternary); cursor: default; }
.bc-crumb--ellipsis:hover { color: var(--text-secondary); }
.bc-sep { display: inline-flex; align-items: center; color: var(--text-quaternary); flex-shrink: 0; }
.bc-sep svg { display: block; }

/* ── DataTable inline-edit affordance (gap-audit 2.11) ───────────────────
   Editable-cell hover hint + live edit input. Mirrors the dt-* edit rules
   added to packages/ui/src/primitives/DataTable/DataTable.css. */
.dt td.dt-cell--editable { cursor: text; position: relative; }
.dt td.dt-cell--editable:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-default); }
.dt-edit-hint { opacity: 0; margin-inline-start: var(--s-2); color: var(--text-quaternary); vertical-align: middle; transition: opacity var(--dur-fast); }
.dt td.dt-cell--editable:hover .dt-edit-hint { opacity: 1; }
.dt-edit-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-sm);
  color: var(--text-primary); background: var(--surface-raised);
  border: 1px solid var(--brand-green); border-radius: var(--r-xs);
  padding: 2px var(--s-3); outline: none; box-shadow: var(--shadow-focus);
}
.dt-cell--num .dt-edit-input { text-align: end; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-sunken); }
}