/* ========================================================================
 * atoms.css — single-purpose primitives
 *
 * Per docs/superpowers/specs/2026-05-08-atomic-design-system.md §3.
 * Each rule here is one block on its own — composable in isolation.
 *
 * Routing guide (atom inventory §3):
 *  - Button:      .btn-primary, .btn-ghost, .btn-login, .modal-close-btn,
 *                 .fc-tab, .filter-btn, .stab, .recipe-tab-btn
 *  - Input:       .login-input, .draft-textarea, .inline-edit-input
 *  - Label:       .login-label, .kpi-label, .card-title, .card-sub,
 *                 .section-title, .section-sub, .nav-label
 *  - Badge/Pill:  .badge-live|setup|proforma, .inv-status-ok|low|crit,
 *                 .s-review|pending|matched, .impact-critical|high|medium,
 *                 .status-pill, .sp-draft|ready|posted, .freq-*,
 *                 .inv-cat-pill, .rest-alert-chip
 *  - Chip:        .chip + 5 color modifiers
 *  - Tag:         .tag + 7 categories (Bottē-specific) + .eng-* engineering
 *  - Dot:         .live-dot, .alert-dot + .dot-red|amber|blue
 *  - KPI parts:   .kpi, .kpi-label, .kpi-value, .kpi-sub
 *  - Step:        .step-num
 *  - Avatar:      .user-avatar
 *  - AI badge:    .ai-badge
 *  - Progress:    .prog, .prog-fill
 *  - Tab:         .stab, .stab-active, .fc-tab(-active), .recipe-tab-btn
 *  - Period:      .period-badge
 * ======================================================================== */

/* ========================================================================
 * Button atom (canonical) — Phase 1.1
 *
 * BEM: .btn (base) + variants .btn--primary | --secondary | --ghost | --danger
 * State coverage: default / :hover / :focus-visible / :active / :disabled
 *
 * All colors reference tokens from tokens.css — no hex literals.
 * Legacy classes (.btn-primary, .btn-ghost, .btn-login) are retained as
 * aliases below to avoid a big-bang rename.
 * ======================================================================== */

/* ── Base — every variant inherits this ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
  user-select: none;
  white-space: nowrap;
}
.btn:focus { outline: none; }
.btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Primary (gold brand action) ────────────────────────── */
.btn-primary,
.btn.btn--primary {
  background: var(--gold);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.12s, opacity 0.12s;
  letter-spacing: -0.01em;
}
.btn-primary:hover:not(:disabled),
.btn.btn--primary:hover:not(:disabled) { background: var(--gold-hover); }
.btn-primary:active:not(:disabled),
.btn.btn--primary:active:not(:disabled) { background: var(--gold-hover); transform: translateY(0.5px); }
.btn-primary:focus-visible,
.btn.btn--primary:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn-primary:disabled,
.btn.btn--primary:disabled,
.btn-primary[aria-disabled="true"],
.btn.btn--primary[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Secondary (teal — confirm / save in success contexts) ── */
.btn.btn--secondary {
  background: var(--teal);
  color: #171B26;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  transition: background 0.12s, opacity 0.12s;
}
.btn.btn--secondary:hover:not(:disabled) { background: var(--teal-hover); }
.btn.btn--secondary:active:not(:disabled) { background: var(--teal-hover); transform: translateY(0.5px); }
.btn.btn--secondary:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn.btn--secondary:disabled,
.btn.btn--secondary[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Ghost (low-emphasis / in-card) ─────────────────────── */
.btn-ghost,
.btn.btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--text);
  border: 1px solid var(--btn-ghost-border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.12s;
}
.btn-ghost:hover:not(:disabled),
.btn.btn--ghost:hover:not(:disabled) {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
}
.btn-ghost:active:not(:disabled),
.btn.btn--ghost:active:not(:disabled) {
  background: var(--btn-ghost-bg-hover);
  transform: translateY(0.5px);
}
.btn-ghost:focus-visible,
.btn.btn--ghost:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn-ghost:disabled,
.btn.btn--ghost:disabled,
.btn-ghost[aria-disabled="true"],
.btn.btn--ghost[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Danger (destructive / non-food classify) ───────────── */
.btn.btn--danger {
  background: var(--terra);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  transition: background 0.12s, opacity 0.12s;
}
.btn.btn--danger:hover:not(:disabled) { background: var(--terra-hover); }
.btn.btn--danger:active:not(:disabled) { background: var(--terra-hover); transform: translateY(0.5px); }
.btn.btn--danger:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn.btn--danger:disabled,
.btn.btn--danger[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Size modifier: sm ─────────────────────────────────── */
.btn.btn--sm,
.btn-primary.btn--sm,
.btn-ghost.btn--sm {
  padding: 7px 14px;
  font-size: 12px;
}

/* ── Login (full-width, larger padding) — alias of primary ── */
.btn-login {
  width: 100%;
  background: var(--gold);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  transition: background 0.15s, opacity 0.12s;
}
.btn-login:hover:not(:disabled) { background: var(--gold-hover); }
.btn-login:active:not(:disabled) { background: var(--gold-hover); transform: translateY(0.5px); }
.btn-login:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.btn-login:disabled,
.btn-login[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Modal close (icon-style) — kept distinct ──────────── */
.modal-close-btn {
  background: var(--btn-ghost-bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.12); }
.modal-close-btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

/* ── Inputs ─────────────────────────────────────────────── */
.login-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: white;
  font-family: 'Inter', sans-serif;
  margin-bottom: 18px;
  transition: border-color 0.15s;
  outline: none;
}
.login-input:focus { border-color: var(--gold); background: rgba(232,183,66,0.07); }
.login-input::placeholder { color: #3A3A3C; }

.draft-textarea {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
  min-height: 88px;
  outline: none;
  box-sizing: border-box;
}
.draft-textarea:focus { border-color: rgba(232,183,66,0.5); }

.inline-edit-input {
  background: rgba(232,183,66,0.1);
  border: 1px solid rgba(232,183,66,0.35);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 7px;
  width: 70px;
  text-align: center;
  outline: none;
}

/* ── Labels & headings ──────────────────────────────────── */
.login-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6C6C70;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}
.section-sub { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ========================================================================
 * KPI atom (canonical) — Phase 1.5
 *
 * BEM: .kpi (host) > .kpi__label / .kpi__value / .kpi__sub / .kpi__delta
 *      Modifiers: .kpi--lg (hero-style 44px value), .kpi--compact (dense rows)
 *      Delta tone: .kpi__delta--positive | --negative | --neutral
 *
 * The legacy hyphenated parts (.kpi-label / .kpi-value / .kpi-sub) remain
 * as aliases below — index.html static markup uses them and is owned by
 * the parallel-agent split this phase.
 *
 * Wires to tokens --kpi-* from tokens.css. Color overrides for drift-
 * driven values (over-target → terra, on-target → teal) stay inline in
 * the rendering JS because they are data-driven, not static modifiers.
 *
 * a11y:
 *   - .kpi__value should carry aria-live="polite" when the value is
 *     replaced post-mount (e.g. realtime / async fetches).
 *   - .kpi__delta--negative / --positive carry color but ALSO a glyph
 *     in the DOM ("↑" / "↓") so colour is not the sole channel.
 * ======================================================================== */

/* ── Base — shared with legacy .kpi rule ────────────────── */
.kpi { padding: var(--kpi-padding); }
.kpi--compact { padding: 12px 14px; }

/* Canonical BEM parts ──────────────────────────────────── */
.kpi__label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kpi-label-color);
  margin-bottom: 10px;
}
.kpi__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-family: var(--font-display);
  color: var(--kpi-value-color);
}
.kpi__value--lg { font-size: 44px; letter-spacing: -0.02em; font-weight: 800; }
.kpi__sub { font-size: 12px; color: var(--kpi-sub-color); margin-top: 6px; }

/* Delta (drift / week-over-week chip) ──────────────────── */
.kpi__delta {
  font-size: 12px;
  color: var(--kpi-delta-color);
  margin-top: 8px;
  line-height: 1.4;
}
.kpi__delta--positive { color: var(--kpi-delta-positive); }
.kpi__delta--negative { color: var(--kpi-delta-negative); }
.kpi__delta--neutral  { color: var(--muted); }

/* ── Legacy hyphenated parts (still used by index.html) ── */
.kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-family: var(--font-display);
}
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── WoW (week-over-week) micro-chips ───────────────────── */
.wow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 8px;
}
.wow-bad  { background: rgba(255,69,58,0.15); color: #FF6B61; }
.wow-good { background: rgba(111,161,163,0.12); color: var(--teal); }

/* ── Chip (KPI sub-indicator) ───────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 10px;
}
.chip-red    { background: rgba(255,69,58,0.12);  color: #FF6B61; }
.chip-green  { background: rgba(111,161,163,0.12); color: var(--teal); }
.chip-orange { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.chip-blue   { background: rgba(232,183,66,0.12);  color: var(--gold); }
.chip-gray   { background: rgba(255,255,255,0.08); color: #AEAEB2; }

/* ── Restaurant-card status badges ──────────────────────── */
.rest-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
}
.badge-live     { background: rgba(111,161,163,0.12); color: var(--teal); }
.badge-setup    { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.badge-proforma { background: rgba(184,155,122,0.15); color: var(--purple); border: 1px solid rgba(184,155,122,0.25); }

/* ── Inventory status pills ─────────────────────────────── */
.inv-status-ok   {
  background: rgba(111,161,163,0.12);
  color: var(--teal);
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.inv-status-low  {
  background: rgba(232,183,66,0.12);
  color: var(--gold);
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.inv-status-crit {
  background: rgba(199,106,63,0.12);
  color: var(--terra);
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.inv-cat-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ── Supplier-classify status pills ─────────────────────── */
.s-review  { background: rgba(255,69,58,0.12);   color: #FF6B61; }
.s-pending { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.s-matched { background: rgba(111,161,163,0.12); color: var(--teal); }
.inv-status {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Insight impact badges ──────────────────────────────── */
.impact-badge {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.impact-critical { background: rgba(255,69,58,0.12);   color: #FF6B61; }
.impact-high     { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.impact-medium   { background: rgba(232,183,66,0.12);  color: var(--gold); }
.impact-dollar   { font-size: 13px; font-weight: 700; color: var(--teal); }

/* ── Big impact value ───────────────────────────────────── */
.big-impact {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--teal);
  font-family: var(--font-display);
}
.big-impact.bad { color: #FF453A; }

/* ── Status pills (social drafts) ───────────────────────── */
.status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
  border: none;
}
.sp-draft  { background: rgba(255,255,255,0.06);   color: var(--muted); }
.sp-ready  { background: rgba(232,183,66,0.15);    color: var(--gold); }
.sp-posted { background: rgba(111,161,163,0.15);   color: var(--teal); }

/* ── Tag (categorical) ──────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.tag-rossa      { background: rgba(255,69,58,0.12);   color: #FF6B61; }
.tag-bianca     { background: rgba(232,183,66,0.12);  color: var(--gold); }
.tag-veggie     { background: rgba(111,161,163,0.12); color: var(--teal); }
.tag-salads     { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.tag-sandwiches { background: rgba(191,90,242,0.12);  color: #BF5AF2; }
.tag-other      { background: rgba(255,255,255,0.08); color: #AEAEB2; }
.tag-beverages  { background: rgba(6,182,212,0.12);   color: #06B6D4; }

/* ── Menu-engineering category pills ────────────────────── */
.eng-star      { background: rgba(111,161,163,0.12); color: var(--teal); }
.eng-puzzle    { background: rgba(232,183,66,0.12);  color: var(--gold); }
.eng-plowhorse { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.eng-dog       { background: rgba(255,69,58,0.12);   color: #FF6B61; }

/* ── Prep frequency tags ────────────────────────────────── */
.freq-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.freq-daily  { background: rgba(255,69,58,0.12);   color: #FF6B61; }
.freq-twice  { background: rgba(255,159,10,0.12);  color: #FF9F0A; }
.freq-weekly { background: rgba(111,161,163,0.12); color: var(--teal); }

/* ── Food-cost color labels ─────────────────────────────── */
.fc-green { color: var(--teal); font-weight: 600; }
.fc-amber { color: #FF9F0A;     font-weight: 600; }
.fc-red   { color: #FF6B61;     font-weight: 600; }
.gm-green { color: var(--teal); font-weight: 600; }
.gm-amber { color: #FF9F0A;     font-weight: 600; }
.gm-red   { color: #FF6B61;     font-weight: 600; }

/* ── Avatars / dots ─────────────────────────────────────── */
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--teal);
  animation: blink 2s infinite;
}
.alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex-shrink: 0;
  margin-top: 5px;
}
.dot-red   { background: #FF453A; }
.dot-amber { background: #FF9F0A; }
.dot-blue  { background: #0A84FF; }

/* ── Step number (wizard / setup) ───────────────────────── */
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--gold);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── AI badge ───────────────────────────────────────────── */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(94,92,230,0.12);
  border: 1px solid rgba(94,92,230,0.18);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7B79F7;
  letter-spacing: 0.01em;
}

/* ── Progress bar ───────────────────────────────────────── */
.prog {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.prog-fill { height: 100%; border-radius: 99px; }

/* ── Period badge (selector chip) ───────────────────────── */
.period-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

/* ── Tabs ───────────────────────────────────────────────── */
.stab {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}
.stab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.stab-active { background: rgba(232,183,66,0.14); color: var(--gold); }

.fc-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.fc-tab:hover { color: var(--text); }
.fc-tab-active {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
  border-bottom-color: var(--card);
  margin-bottom: -1px;
}

.recipe-tab-btn {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.recipe-tab-btn.active { border-bottom-color: var(--gold); color: var(--gold); font-weight: 700; }

/* ── Filter buttons ─────────────────────────────────────── */
.filter-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  transition: all 0.12s;
  font-family: 'Inter', sans-serif;
}
.filter-btn.active { background: var(--gold); color: white; border-color: var(--gold); }
.filter-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

/* ── Restaurant alert chip ──────────────────────────────── */
.rest-alert-chip {
  background: rgba(255,69,58,0.15);
  color: #FF6B61;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Sidebar atoms ──────────────────────────────────────── */
.nav-icon { font-size: 13.5px; width: 18px; text-align: center; }
.nav-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #333845;
  padding: 10px 16px 2px;
  margin-top: 2px;
}

/* ========================================================================
 * Spinner atom (canonical) — Phase 1.3
 *
 * BEM: .spinner (base) + size variants .spinner--sm | .spinner--lg
 *
 * Wires to the existing @keyframes spin in css/base.css. Uses tokens
 * --spinner-track and --spinner-color from tokens.css.
 *
 * A11y:
 *   - prefers-reduced-motion: rotation is replaced with a 1.4s opacity
 *     pulse (same rhythm as `.live-dot` blink), so users who opt out of
 *     motion still get a visible "in progress" affordance.
 *   - The accompanying loading molecule (.loading) carries an
 *     aria-live="polite" + aria-busy="true" on the parent so SR users
 *     hear the label.
 *
 * Closes audit P0 #1 / atomic-design §8 #4 (Loading state absent).
 * ======================================================================== */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 24px; height: 24px; border-width: 2.5px; }

/* Reduced-motion fallback: pulse instead of rotate ─────── */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: blink 1.4s ease-in-out infinite;
  }
}

/* ========================================================================
 * Form atoms (canonical) — Phase 1.4
 *
 * BEM: .input / .label / .textarea / .select / .checkbox / .toggle / .help / .error-text
 * State coverage: default / :hover:not(:disabled) / :focus-visible / :disabled
 * Modifiers: .input--error (validation), .input--sm (compact rows),
 *            .label--required (adds * via ::after)
 *
 * All colors reference tokens from tokens.css — no hex literals.
 *
 * a11y contract:
 *   - Pair with <label for="..."> or wrap the control in a <label>
 *   - Required fields: aria-required="true" on the control + .label--required on label
 *   - Error state: aria-invalid="true" on the control + aria-describedby pointing at
 *     the .form-field__error element (see molecules.css)
 *   - Helper text: aria-describedby pointing at the .help / .form-field__help element
 *   - Focus is :focus-visible (keyboard a11y) — pointer focus does NOT show ring
 *
 * Checkbox: native <input type="checkbox"> with accent-color set to --gold so
 * we get the dark-theme tick + gold fill without losing native a11y semantics
 * (form participation, indeterminate, screen-reader announcement). Cheaper
 * and more accessible than a custom-painted box.
 *
 * Toggle: appearance: none on the native checkbox + sliding-pill via ::before
 * pseudo. Same visual language as the existing supplier-classify chip pattern.
 * ======================================================================== */

/* ── Input (text / email / number / date / etc.) ────────── */
.input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: 13px;
  color: var(--input-color);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--input-color-placeholder); }
.input:hover:not(:disabled):not(:focus) { border-color: var(--input-border-hover); }
.input:focus { border-color: var(--input-border-focus); }
.input:focus-visible {
  outline: 2px solid var(--input-focus-ring);
  outline-offset: 1px;
  border-color: var(--input-border-focus);
}
.input:disabled,
.input[aria-disabled="true"] {
  background: var(--input-bg-disabled);
  opacity: var(--input-disabled-opacity);
  cursor: not-allowed;
}
.input--error,
.input[aria-invalid="true"] {
  border-color: var(--terra);
}
.input--error:focus,
.input[aria-invalid="true"]:focus { border-color: var(--terra); }
.input--error:focus-visible,
.input[aria-invalid="true"]:focus-visible {
  outline-color: rgba(199,106,63,0.4);  /* semi-transparent --terra */
  border-color: var(--terra);
}
.input--sm {
  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
  font-size: 12px;
}

/* ── Label ──────────────────────────────────────────────── */
.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--label-color);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.label--required::after {
  content: ' *';
  color: var(--terra);
  font-weight: 700;
}

/* ── Textarea (taller .input) ───────────────────────────── */
.textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: 13px;
  color: var(--input-color);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  min-height: 88px;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
.textarea::placeholder { color: var(--input-color-placeholder); }
.textarea:hover:not(:disabled):not(:focus) { border-color: var(--input-border-hover); }
.textarea:focus { border-color: var(--input-border-focus); }
.textarea:focus-visible {
  outline: 2px solid var(--input-focus-ring);
  outline-offset: 1px;
  border-color: var(--input-border-focus);
}
.textarea:disabled,
.textarea[aria-disabled="true"] {
  background: var(--input-bg-disabled);
  opacity: var(--input-disabled-opacity);
  cursor: not-allowed;
}
.textarea--mono { font-family: 'Space Grotesk', 'SF Mono', Menlo, monospace; }
.textarea[aria-invalid="true"] { border-color: var(--terra); }

/* ── Select (custom chevron via inline SVG) ─────────────── */
.select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) calc(var(--input-padding-x) + 22px) var(--input-padding-y) var(--input-padding-x);
  font-size: 13px;
  color: var(--input-color);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* chevron: muted-color on dark bg */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238B92A5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.12s, background-color 0.12s, opacity 0.12s;
}
.select:hover:not(:disabled):not(:focus) { border-color: var(--input-border-hover); }
.select:focus { border-color: var(--input-border-focus); }
.select:focus-visible {
  outline: 2px solid var(--input-focus-ring);
  outline-offset: 1px;
  border-color: var(--input-border-focus);
}
.select:disabled,
.select[aria-disabled="true"] {
  background-color: var(--input-bg-disabled);
  opacity: var(--input-disabled-opacity);
  cursor: not-allowed;
}
.select option { background: var(--bg-card); color: var(--text); }
.select[aria-invalid="true"] { border-color: var(--terra); }
.select--sm {
  padding: var(--input-padding-y-sm) calc(var(--input-padding-x-sm) + 22px) var(--input-padding-y-sm) var(--input-padding-x-sm);
  font-size: 12px;
}

/* ── Checkbox (native + accent-color) ───────────────────── */
.checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
}
.checkbox:focus-visible {
  outline: 2px solid var(--input-focus-ring);
  outline-offset: 2px;
}
.checkbox:disabled { cursor: not-allowed; opacity: var(--input-disabled-opacity); }
/* Wrapper so a checkbox can sit inline with its label text */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text);
}

/* ── Toggle (sliding pill — built on native checkbox) ───── */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  margin: 0;
  vertical-align: middle;
}
.toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s, background 0.15s;
}
.toggle:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.toggle:checked::before {
  transform: translateX(16px);
  background: white;
}
.toggle:focus-visible {
  outline: 2px solid var(--input-focus-ring);
  outline-offset: 2px;
}
.toggle:disabled,
.toggle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--input-disabled-opacity);
}

/* ── Helper / error text (live below inputs) ───────────── */
.help {
  font-size: 11.5px;
  color: var(--help-color);
  line-height: 1.4;
}
.error-text {
  font-size: 11.5px;
  color: var(--terra);
  line-height: 1.4;
  font-weight: 500;
}

/* ========================================================================
 * Tab atom (canonical) — Phase 1.6
 *
 * BEM: .tab-bar (host row) > .tab (host item) + .tab--active / .tab--disabled
 *      .tab__count (sub-element for inline counters / badges)
 *
 * Wires to --tab-* tokens in tokens.css. Underline-on-active is the
 * canonical visual; legacy .stab (pill style) and .fc-tab (browser-tab
 * style) remain above with their own visual languages and are still used
 * by index.html static markup that the parallel agent is migrating.
 *
 * a11y:
 *   - The host element should carry role="tablist"; each .tab role="tab"
 *     with aria-selected="true" on the active item. JS toggling the
 *     .tab--active class should also flip aria-selected.
 *   - :focus-visible ring matches Button atom for consistency.
 *
 * Routing: prefer .tab for any new tab strip. .stab is kept as a "filter
 * pill" style (inventory categories, social subnav) and .fc-tab as a
 * "browser-tab card" style (Food Cost section) — both are pre-existing
 * visual languages we are NOT collapsing this phase.
 * ======================================================================== */

.tab-bar {
  display: flex;
  gap: var(--tab-gap);
  border-bottom: 1px solid var(--tab-bar-border);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--tab-padding-y) var(--tab-padding-x);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--tab-color);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.tab:hover:not(:disabled):not(.tab--disabled) { color: var(--tab-color-hover); }
.tab:focus { outline: none; }
.tab:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.tab--active {
  color: var(--tab-color-active);
  border-bottom-color: var(--tab-active-underline);
}
.tab--disabled,
.tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tab__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--tab-count-color);
}

/* ========================================================================
 * Pill / Badge atoms (canonical) — Phase 1.6
 *
 * BEM: .pill (base) + tone modifiers
 *      --success | --warning | --danger | --info | --neutral
 *      .badge — circular dot or count chip (composes .pill base when used
 *               for counts, or stand-alone as .badge.badge--dot)
 *
 * The legacy hyphenated families (.inv-status-ok|low|crit, .s-review|...,
 * .impact-critical|..., .sp-draft|..., .freq-*, .tag-*, .eng-*, .chip-*,
 * .badge-live|setup|proforma) all stay in their existing rule blocks
 * above — they encode product-specific semantics and the matching
 * markup lives in index.html (parallel agent's domain).
 *
 * Use the canonical .pill / .pill--<tone> for any *new* status / category
 * indicator and for migrations where the inline-styled pill has no
 * existing semantic class.
 *
 * No consolidations applied to legacy pills this phase — they are
 * canonical-by-domain (e.g. .inv-status-* is the canonical inventory
 * status pill). A future phase can rename them once index.html owns
 * its own atomic-design migration.
 *
 * a11y:
 *   - Pills convey color-coded state. When the pill is the *only* signal
 *     of state (e.g. an alert badge), pair it with role="status" or an
 *     aria-label so colour is not the sole channel.
 * ======================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.pill--success { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.pill--warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.pill--danger  { background: var(--pill-danger-bg);  color: var(--pill-danger-fg); }
.pill--info    { background: var(--pill-info-bg);    color: var(--pill-info-fg); }
.pill--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }

/* Size modifier — denser strips (e.g. inline status next to a row) */
.pill--sm {
  font-size: 10px;
  padding: 1px 7px;
}

/* Badge — count or dot indicator. Count form composes .pill base. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--pill-danger-bg);
  color: var(--pill-danger-fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.badge--dot {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
}
.badge--success { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.badge--warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.badge--danger  { background: var(--pill-danger-bg);  color: var(--pill-danger-fg); }
.badge--info    { background: var(--pill-info-bg);    color: var(--pill-info-fg); }
.badge--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }

/* ========================================================================
 * Icon Button atom (canonical) — Phase 1.6
 *
 * BEM: .icon-btn (base) + size .icon-btn--sm and variant .icon-btn--ghost
 *
 * The 30x30 rounded-square × close-button pattern recurs in 5+ partials
 * (add-ing, inv-import, ls-connect, recipe-builder, etc.) with inline
 * styles. The partials live in the parallel agent's scope this phase, so
 * we publish the atom but only migrate JS-rendered icon buttons here.
 *
 * Distinct from .modal-close-btn (32x32, 8px radius) — kept separate
 * because the visual baseline test depends on .modal-close-btn dimensions.
 * Future cleanup can collapse them after a baseline regen.
 *
 * a11y:
 *   - icon-only buttons MUST set aria-label (or carry visually-hidden
 *     text) so screen readers announce the action.
 * ======================================================================== */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: var(--icon-btn-bg);
  color: var(--icon-btn-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.icon-btn:hover:not(:disabled) {
  background: var(--icon-btn-bg-hover);
  color: var(--icon-btn-color-hover);
}
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
.icon-btn:disabled,
.icon-btn[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
}
.icon-btn--sm { width: 24px; height: 24px; font-size: 14px; }
.icon-btn--ghost { background: transparent; }
.icon-btn--ghost:hover:not(:disabled) { background: var(--icon-btn-bg); }