/* ═══════════════════════════════════════════════════════════════════════
   SITHIYAM OS — v6.1 COMPONENT OVERRIDES
   Loaded LAST in the cascade. Re-skins key components to match
   nd-prototype-*.html using v6.1 tokens. Zero DOM changes — pure CSS.
   Preserves all selectors targeted by JS.
   !important is used on typography/surface/border props to beat
   the 160+ !important declarations and hardcoded 'Roboto'/hex values
   scattered through styles.css.
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   GLOBAL TYPE RESET — kills Roboto fallback from styles.css/v5-*
─────────────────────────────────────────────────────────────────────── */
html, body, .card, .screen, .btn, .btn-sm, .btn-xs, .btn-teal, .btn-blue,
.sl, .f label, .f input, .f select, .f textarea, input, select, textarea,
.nav-pill, .nav-pill__item, .nav-pill__brand, .nav-pill__dd-item,
.status-ribbon, .spl, p, span, div, button, a, label, h1, h2, h3, h4, h5 {
  font-family: var(--fb);
}
h1, h2, .card h2, .screen h2, .sec-title, .doc-title,
.kpi-value, .qb2-section-title {
  font-family: var(--fd) !important;
  font-weight: 400;                       /* default; class rules can drop to 300 for hero */
  letter-spacing: -0.015em !important;
}
.sl, .sec-label, .doc-meta, .canvas-label, .pill-label,
.nav-pill__item, .nav-pill__brand, .nav-pill__dd-item small,
.status-ribbon__label, .btn, .btn-sm, .btn-xs, .btn-teal, .btn-blue, .spl {
  font-family: var(--fu) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   NAVIGATION — floating pill, glass backdrop, v6.1 rhythm
─────────────────────────────────────────────────────────────────────── */
.nav-pill {
  top: 16px !important;
  height: 56px !important;
  padding: 0 8px 0 18px !important;
  gap: 2px !important;
  background: var(--glass) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border: 1px solid var(--glass-b) !important;
  border-radius: var(--rp) !important;
  box-shadow: var(--sh2), var(--sh-inner) !important;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.nav-pill__brand {
  font-family: var(--fu);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--t1);
  padding: 8px 10px;
  border-radius: var(--rp);
}
.nav-pill__brand:hover { background: var(--accent-ghost); }
.nav-pill__star { color: var(--accent); font-size: 14px; }
.nav-pill__os {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: var(--accent);
}
.nav-pill__sep { background: var(--b1); height: 24px; margin: 0 8px; }

.nav-pill__item {
  padding: 8px 14px;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t3);
  border-radius: var(--rp);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-pill__item:hover { background: var(--accent-ghost); color: var(--t1); }
.nav-pill__item.active,
.nav-pill__item[aria-current="true"] {
  background: var(--bg-4);
  color: var(--t1);
  box-shadow: var(--sh1);
}

/* Dropdown panel */
.nav-pill__dropdown {
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  padding: 6px;
  margin-top: 10px;
}
.nav-pill__dd-item {
  font-family: var(--fb);
  color: var(--t2);
  border-radius: var(--r1);
  padding: 10px 12px;
  gap: 10px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-pill__dd-item small {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t4);
}
.nav-pill__dd-item:hover { background: var(--accent-ghost); color: var(--t1); }
.nav-pill__dd-item:hover small { color: var(--accent); }

/* Right cluster */
.nav-pill__right { gap: 8px; }
.nav-pill__cmd {
  background: var(--bg-2);
  border: 1px solid var(--b1);
  color: var(--t3);
  border-radius: var(--rp);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-pill__cmd:hover { background: var(--accent-ghost); color: var(--accent); border-color: var(--accent-ring); }

.nav-pill__avatar {
  width: 36px;
  height: 36px;
  background: var(--accent-metal);
  color: #140E08;
  font-family: var(--fu);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .06em;
  border-radius: 50%;
  border: 1px solid var(--accent-seam);
  box-shadow: var(--sh1), var(--sh-inner);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-pill__user-menu {
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
}
.nav-pill__user-email {
  color: var(--t3);
  font-family: var(--fb);
  font-size: 12px;
}
.nav-pill__user-signout {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  background: transparent;
  border: 1px solid var(--b1);
  border-radius: var(--rp);
  padding: 6px 12px;
}

/* Dirty chip */
#qtDirtyChip {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-ghost);
  border: 1px solid var(--accent-ring);
  padding: 5px 10px;
  border-radius: var(--rp);
}

/* ───────────────────────────────────────────────────────────────────────
   STATUS RIBBON — bottom bar, v6.1 glass
─────────────────────────────────────────────────────────────────────── */
.status-ribbon {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-b);
  border-radius: var(--rp);
  box-shadow: var(--sh2);
  padding: 8px 18px;
}
.status-ribbon__label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}
.status-ribbon__value {
  font-family: var(--fd);
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -.01em;
}
.status-ribbon__sep { background: var(--b1); }
.status-ribbon__dot { box-shadow: 0 0 0 3px var(--accent-ghost); }

/* ───────────────────────────────────────────────────────────────────────
   CARDS — unified look across screens
─────────────────────────────────────────────────────────────────────── */
.card,
.panel,
.sec-card,
.rev-card,
.d-card,
.kpi-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--sh1) !important;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card::after { display: none !important; }  /* kill the v5 gradient overlay */
.card:hover, .kpi-card:hover, .rev-card:hover {
  box-shadow: var(--sh2) !important;
  border-color: var(--b2) !important;
}

/* .sl — section small label (used everywhere for card subtitles) */
.sl {
  font-family: var(--fu) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 12px !important;
}

/* Typical card header patterns */
.card h2, .card .card-title {
  font-family: var(--fd);
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -.015em;
}
.card h3, .card .card-subtitle {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ───────────────────────────────────────────────────────────────────────
   BUTTONS — v6.1 pill hierarchy
─────────────────────────────────────────────────────────────────────── */
.btn, button.btn, .btn-sm, .btn-xs {
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  border-radius: var(--rp) !important;
  border: 1px solid var(--b2) !important;
  background: var(--bg-2) !important;
  color: var(--t1) !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover, .btn-sm:hover, .btn-xs:hover {
  background: var(--bg-3) !important;
  border-color: var(--b3) !important;
  transform: none !important;
}

/* btn-teal was the v5 "gold gradient" primary — map to accent-metal */
.btn-teal {
  background: var(--accent-metal) !important;
  color: #140E08 !important;
  border: 1px solid var(--accent-seam) !important;
  box-shadow: var(--sh1), var(--sh-inner) !important;
}
.btn-teal:hover {
  box-shadow: var(--sh2), var(--sh-inner) !important;
  filter: brightness(1.04);
  transform: none !important;
}

/* btn-blue → tinted blue */
.btn-blue {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  box-shadow: var(--sh1) !important;
}
.btn-blue:hover { filter: brightness(1.04); transform: none !important; }

/* Primary / accent CTA */
.btn.primary,
.btn.gold,
.btn-primary,
.btn-gold {
  background: var(--accent-metal) !important;
  color: #140E08 !important;
  border: 1px solid var(--accent-seam) !important;
  box-shadow: var(--sh1), var(--sh-inner) !important;
}

/* WhatsApp variant */
.btn.wa, .btn-wa {
  background: #25D366 !important;
  color: #0A3A1C !important;
  border-color: rgba(10,58,28,.18) !important;
}

/* Danger */
.btn.danger, .btn-danger, .btn-red {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border-color: var(--red) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   STATUS PILLS (.spl) — quote lifecycle
─────────────────────────────────────────────────────────────────────── */
.spl {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--rp);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.spl.draft    { color: var(--s-draft);    background: var(--s-draft-bg);  border: 1px solid var(--s-draft); }
.spl.sent     { color: var(--s-sent);     background: var(--accent-ghost); border: 1px solid var(--s-sent); }
.spl.followup { color: var(--s-followup); background: var(--violet-bg);   border: 1px solid var(--s-followup); }
.spl.confirm,
.spl.confirmed{ color: var(--s-confirm);  background: var(--s-confirm-bg);border: 1px solid var(--s-confirm); }
.spl.cancel,
.spl.cancelled{ color: var(--s-cancel);   background: var(--red-bg);     border: 1px solid var(--s-cancel); }

/* ───────────────────────────────────────────────────────────────────────
   FORMS — inputs, selects, labels
─────────────────────────────────────────────────────────────────────── */
.f > label,
label.f-label,
.f-lbl {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}
input[type="text"], input[type="number"], input[type="email"], input[type="date"],
input[type="tel"], input[type="url"], input[type="search"], input[type="password"],
select, textarea,
.f input, .f select, .f textarea {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: var(--r1);
  padding: 9px 12px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-1);
}
input::placeholder, textarea::placeholder { color: var(--t5); }

/* ───────────────────────────────────────────────────────────────────────
   DASHBOARD — KPI grid + alert rows (targets existing selectors + new)
─────────────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.kpi-card {
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 10px;
}
.kpi-card .kpi-value {
  font-family: var(--fd);
  font-size: 36px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-card .kpi-delta {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--t3);
}
.kpi-card .kpi-delta.up { color: var(--green); }
.kpi-card .kpi-delta.dn { color: var(--red); }

/* Alert rows */
.alert-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r1);
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-left-width: 3px;
  margin-bottom: 8px;
}
.alert-row.warn  { border-left-color: var(--orange); }
.alert-row.info  { border-left-color: var(--blue); }
.alert-row.gold  { border-left-color: var(--accent); }
.alert-row.success{ border-left-color: var(--green); }
.alert-row .alert-title {
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--t1);
  margin-bottom: 2px;
}
.alert-row .alert-desc {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--t3);
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────────
   SECTION HEADINGS — shared across screens
─────────────────────────────────────────────────────────────────────── */
.sec-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec-title {
  font-family: var(--fd);
  font-size: 30px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.sec-desc {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t3);
  line-height: 1.65;
  max-width: 640px;
}

/* ───────────────────────────────────────────────────────────────────────
   SCROLLBAR (v6.1 subtle)
─────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: var(--rp); }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }

/* ───────────────────────────────────────────────────────────────────────
   SELECTION
─────────────────────────────────────────────────────────────────────── */
::selection { background: var(--accent-ring); color: var(--t1); }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD (#s-dash) — v6.1 layout
   Scoped overrides to beat inline styles on KPI values & sublabels.
═══════════════════════════════════════════════════════════════════════ */
#s-dash { padding: 40px 32px 80px; }
@media (max-width:720px){ #s-dash { padding: 24px 16px 80px; } }

/* KPI cards */
#s-dash > div[style*="grid-template-columns:repeat(auto-fit"] {
  gap: 14px !important;
  margin-bottom: 20px !important;
}
#s-dash .card {
  padding: 22px 24px !important;
}
#s-dash .card[style*="border-left:4px solid var(--gold)"] {
  border-left: 4px solid var(--accent) !important;
  background: linear-gradient(135deg, var(--accent-ghost), var(--bg-1) 40%) !important;
}

/* Small labels in dashboard */
#s-dash .sl {
  font-family: var(--fu) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--t4) !important;
  margin-bottom: 10px !important;
}

/* KPI values — big Cormorant display numbers */
#s-dash #d-cval,
#s-dash #d-pipeline-val,
#s-dash #d-conv,
#s-dash #d-month-q,
#s-dash #d-avg,
#s-dash #d-margin {
  font-family: var(--fd) !important;
  font-weight: 400 !important;
  color: var(--t1) !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}
#s-dash #d-cval {
  color: var(--accent) !important;
  font-size: 40px !important;
}
#s-dash #d-pipeline-val,
#s-dash #d-conv,
#s-dash #d-month-q,
#s-dash #d-avg,
#s-dash #d-margin {
  font-size: 34px !important;
}

/* KPI sublabels */
#s-dash #d-cval-month,
#s-dash #d-pipeline-sub,
#s-dash #d-conv-sub,
#s-dash #d-month-sub,
#s-dash #d-avg-sub {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  margin-top: 8px !important;
}

/* Section grids — consistent gap */
#s-dash > div[style*="grid-template-columns:1fr 1fr"] {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* Follow-up badge */
#s-dash #d-fu-badge {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-ring) !important;
  color: var(--accent) !important;
  font-family: var(--fu) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: var(--rp) !important;
}

/* Alert rows (generated by dashboard-screen.js) */
#s-dash #d-alerts > div {
  margin-bottom: 10px;
}

/* Recent quotes / funnel / routes / followups / enquiries lists */
#s-dash #d-funnel > *,
#s-dash #d-routes > *,
#s-dash #d-followups > *,
#s-dash #d-enquiries > *,
#s-dash #d-recent > *,
#s-dash #d-lead-source > *,
#s-dash #d-cost-mix > *,
#s-dash #d-velocity > *,
#s-dash #d-loss-reasons > *,
#s-dash #d-market > * {
  font-family: var(--fb);
}

/* ═══════════════════════════════════════════════════════════════════════
   SESSION 2 — BUILDER SCREENS
   QB v1 (.vb-*) · QB v2 (#s-qb2) · AI Builder (.aib-*) · Templates · Presets
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   QB v1 — Quote Builder classic (.vb-*)
─────────────────────────────────────────────────────────────────────── */

/* Topbar */
.vb-topbar {
  background: var(--glass) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid var(--glass-b) !important;
}
.vb-topbar-brand {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
.vb-topbar-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--accent) !important;
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  border-radius: var(--rp) !important;
}
.vb-compass {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--sh1) !important;
}
.vb-compass-arrow.up    { color: var(--red) !important; }
.vb-compass-arrow.down  { color: var(--green) !important; }
.vb-compass-arrow.flat  { color: var(--t3) !important; }
.vb-compass-label       { color: var(--t1) !important; font-family: var(--fu) !important; }
.vb-compass-sub         { color: var(--t3) !important; }

/* Buttons */
.vb-btn {
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--rp) !important;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease) !important;
}
.vb-btn-ghost {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
}
.vb-btn-ghost:hover {
  background: var(--bg-2) !important;
  border-color: var(--b2) !important;
  transform: translateY(-1px);
}
.vb-btn-gold {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent-seam) !important;
  box-shadow: 0 4px 16px var(--accent-ghost) !important;
}
.vb-btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-ring) !important;
}

/* Body / intro */
.vb-intro h2 {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
.vb-intro p { color: var(--t3) !important; }
.vb-expiry-badge {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  color: var(--accent) !important;
  font-family: var(--fu) !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--rp) !important;
}

/* Day cards */
.vb-day {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
.vb-day.drag-over {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.vb-day-head {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border-bottom: 1px solid transparent !important;
}
.vb-day.open .vb-day-head {
  border-bottom-color: var(--b1) !important;
}
.vb-day-head:hover {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-3)) !important;
}
.vb-day-num {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  color: var(--accent) !important;
  font-family: var(--fu) !important;
}
.vb-day-title {
  color: var(--t1) !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
}
.vb-day-meta { color: var(--t3) !important; }
.vb-day-toggle {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  color: var(--accent) !important;
}
.vb-day.open .vb-day-toggle {
  background: var(--accent-ghost) !important;
}

/* Tier chips */
.vb-tier-chip {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--rp) !important;
}

/* Section labels inside day body */
.vb-section-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
  text-transform: uppercase;
}

/* City tags */
.vb-city-tag {
  background: var(--blue-bg) !important;
  border: 1px solid var(--b1) !important;
  color: var(--blue) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  border-radius: var(--rp) !important;
}

/* Selects + add buttons in day body */
.vb-select {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r1) !important;
  color: var(--t1) !important;
  font-family: var(--fb) !important;
}
.vb-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}
.vb-add-btn {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--rp) !important;
}
.vb-add-btn:hover {
  background: var(--bg-2) !important;
  border-color: var(--b2) !important;
}

/* Hotel tier cards */
.vb-hotel-card {
  background: var(--bg-1) !important;
  border: 2px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease) !important;
}
.vb-hotel-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 6px 18px var(--accent-ghost) !important;
  transform: translateY(-1px);
}
.vb-hotel-card.vbsel {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, var(--bg-1), var(--accent-ghost)) !important;
  box-shadow: 0 6px 18px var(--accent-ring) !important;
}
.vb-hotel-card.vbsel-budget {
  border-color: var(--green) !important;
  background: linear-gradient(180deg, var(--bg-1), var(--green-bg)) !important;
}

/* Journey hero */
.vb-journeyhero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12)),
    var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r4) !important;
  box-shadow: var(--sh2) !important;
}
.vb-journeyhero-kicker {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
  text-transform: uppercase;
}
.vb-journeyhero-title {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
.vb-journeyhero-copy { color: var(--t3) !important; }
.vb-journeyhero-stat {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
}
.vb-journeyhero-stat .k {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
}
.vb-journeyhero-stat .v {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}

/* Map band */
.vb-mapband-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12)),
    var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r4) !important;
  box-shadow: var(--sh2) !important;
}
.vb-maptitle {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
.vb-mapcopy { color: var(--t3) !important; }
.vb-mapcanvas-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
}
.vb-mapnote {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  color: var(--t3) !important;
}
.vb-mapnote.ok    { color: var(--green) !important; background: var(--green-bg) !important; border-color: var(--green) !important; }
.vb-mapnote.error { color: var(--red)   !important; background: var(--red-bg)   !important; border-color: var(--red)   !important; }

/* Choice overlay (quote creation mode picker) */
.vb-choice-box {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r4) !important;
  box-shadow: var(--sh3) !important;
}
.vb-choice-box h3 {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
.vb-choice-copy { color: var(--t3) !important; }
.vb-choice-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
}
.vb-choice-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--sh1) !important;
}
.vb-choice-card strong { color: var(--t1) !important; }
.vb-choice-card span { color: var(--t3) !important; }

/* ───────────────────────────────────────────────────────────────────────
   QB v2 (#s-qb2) — scoped overrides on top of quote-builder-v2.css
─────────────────────────────────────────────────────────────────────── */

#s-qb2 .qb2-sidebar {
  background: var(--bg-1) !important;
  border-right: 1px solid var(--b1) !important;
}
#s-qb2 .qb2-sidebar-brand { color: var(--t1) !important; font-family: var(--fd) !important; }
#s-qb2 .qb2-sidebar-brandmark { color: var(--accent) !important; }
#s-qb2 .qb2-sidebar-brandname { color: var(--t1) !important; font-family: var(--fd) !important; }
#s-qb2 .qb2-nav-item {
  color: var(--t2) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
#s-qb2 .qb2-nav-item:hover {
  background: var(--bg-2) !important;
  color: var(--t1) !important;
}
#s-qb2 .qb2-nav-item.active {
  background: var(--accent-ghost) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
}
#s-qb2 .topbar-status-sel {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  border-radius: var(--r1) !important;
  font-family: var(--fu) !important;
}
#s-qb2 .topbar-status-sel:focus { box-shadow: 0 0 0 3px var(--accent-ring) !important; }
#s-qb2 .topbar-save {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border-radius: var(--rp) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
#s-qb2 .topbar-save:hover { box-shadow: 0 4px 12px var(--accent-ring) !important; }
#s-qb2 .topbar-classic {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
}
#s-qb2 .topbar-classic:hover { background: var(--bg-3) !important; color: var(--t1) !important; }
#s-qb2 .qb2-dirty-chip {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  color: var(--accent) !important;
  font-family: var(--fu) !important;
  border-radius: var(--rp) !important;
}
#s-qb2 .qb2-dirty-chip.saving {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border-color: var(--green) !important;
}
#s-qb2 .sec-nav {
  background: var(--glass) !important;
  border-bottom: 1px solid var(--b1) !important;
  backdrop-filter: blur(18px) !important;
}
#s-qb2 .sec-tab {
  color: var(--t3) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
#s-qb2 .sec-tab:hover { color: var(--t1) !important; }
#s-qb2 .sec-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
#s-qb2 .qb2-section-title {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* ───────────────────────────────────────────────────────────────────────
   AI Builder (.aib-*) — JS-injects styles at runtime, must use !important
─────────────────────────────────────────────────────────────────────── */

.aib-loading-text { color: var(--t1) !important; font-family: var(--fd) !important; font-weight: 500 !important; }
.aib-loading-sub  { color: var(--t3) !important; }
.aib-error {
  background: var(--red-bg) !important;
  border: 1px solid var(--red) !important;
  border-radius: var(--r2) !important;
}
.aib-error-title { color: var(--red) !important; font-family: var(--fu) !important; }
.aib-error-msg   { color: var(--t2) !important; }

.aib-strategy {
  background: linear-gradient(135deg, var(--t1), var(--t2)) !important;
  border-radius: var(--r2) !important;
  color: #FFFFFF !important;
}
.aib-strategy-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,.55) !important;
}
.aib-stat { background: rgba(255,255,255,.1) !important; border-radius: var(--r1) !important; }
.aib-stat-k {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,.5) !important;
}
.aib-stat-v { color: #FFFFFF !important; font-family: var(--fd) !important; font-weight: 500 !important; font-size: 22px !important; }

.aib-alloc-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
}
.aib-night {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
}
.aib-night:hover {
  border-color: var(--accent-seam) !important;
  box-shadow: var(--sh1) !important;
}
.aib-night.hero {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, var(--bg-1), var(--accent-ghost)) !important;
}
.aib-day-pill {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  border-radius: var(--r1) !important;
}
.aib-day-num { font-family: var(--fd) !important; color: var(--t1) !important; font-weight: 500 !important; }
.aib-day-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--accent) !important;
}
.aib-night-hotel { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 700 !important; }
.aib-night-meta  { color: var(--t3) !important; }
.aib-night-notes { color: var(--t3) !important; }

.aib-role {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--rp) !important;
}
.aib-role.transit { background: var(--blue-bg)      !important; color: var(--blue)   !important; border: 1px solid var(--blue)   !important; }
.aib-role.core    { background: var(--bg-2)         !important; color: var(--t3)     !important; border: 1px solid var(--b1)     !important; }
.aib-role.hero    { background: var(--accent-ghost) !important; color: var(--accent) !important; border: 1px solid var(--accent-seam) !important; }

.aib-rate-val  { font-family: var(--fd) !important; color: var(--t1) !important; font-weight: 500 !important; }
.aib-rate-sub  { color: var(--t3) !important; }
.aib-rate-save { color: var(--green) !important; font-family: var(--fu) !important; }

.aib-narrative {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
}
.aib-narr-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--accent) !important;
}
.aib-narr-text { color: var(--t2) !important; }

.aib-client-msg {
  background: var(--green-bg) !important;
  border: 1px solid var(--green) !important;
  border-radius: var(--r2) !important;
}
.aib-client-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--green) !important;
}
.aib-client-text { color: var(--t2) !important; }

.aib-warn {
  background: var(--accent-ghost) !important;
  border: 1px solid var(--accent-seam) !important;
  color: var(--accent) !important;
  border-radius: var(--r1) !important;
}

.aib-adjust-input {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r1) !important;
  color: var(--t1) !important;
  font-family: var(--fb) !important;
}
.aib-adjust-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.aib-adjust-input::placeholder { color: var(--t4) !important; }
.aib-adjust-btn {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border-radius: var(--r1) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
.aib-apply-btn {
  background: var(--green) !important;
  color: #FFFFFF !important;
  border-radius: var(--r1) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
.aib-dismiss-btn {
  background: transparent !important;
  border: 1px solid var(--b1) !important;
  color: var(--t3) !important;
  border-radius: var(--r1) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
.aib-source {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--rp) !important;
}
.aib-source.claude        { background: var(--accent-ghost) !important; color: var(--accent) !important; border: 1px solid var(--accent-seam) !important; }
.aib-source.deterministic { background: var(--blue-bg)      !important; color: var(--blue)   !important; border: 1px solid var(--blue)   !important; }

.aib-inquiry-title {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
.aib-inquiry-sub { color: var(--t3) !important; }
.aib-inquiry-textarea {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  color: var(--t1) !important;
  font-family: var(--fb) !important;
}
.aib-inquiry-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.aib-inquiry-btn {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border-radius: var(--rp) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.aib-inquiry-ex {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  border-radius: var(--rp) !important;
  font-family: var(--fu) !important;
}
.aib-inquiry-ex:hover {
  background: var(--accent-ghost) !important;
  color: var(--accent) !important;
  border-color: var(--accent-seam) !important;
}

.aib-step-dot {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t3) !important;
  font-family: var(--fu) !important;
}
.aib-step--done .aib-step-dot,
.aib-step--active .aib-step-dot {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}
.aib-step-label {
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  color: var(--t3) !important;
}
.aib-step--active .aib-step-label { color: var(--accent) !important; }
.aib-step--done   .aib-step-label { color: var(--t2) !important; }
.aib-step-msg { color: var(--t2) !important; font-family: var(--fb) !important; }

/* ───────────────────────────────────────────────────────────────────────
   Templates (#s-templates) + Presets (#s-presets)
─────────────────────────────────────────────────────────────────────── */

#s-templates .card, #s-presets .card,
#s-templates .panel, #s-presets .panel {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
#s-templates h2, #s-presets h2 {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
#s-templates .sl, #s-presets .sl {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--accent) !important;
  text-transform: uppercase;
}

/* Template/Preset list rows */
#s-templates .tpl-row, #s-presets .preset-row,
#s-templates .list-row, #s-presets .list-row {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease) !important;
}
#s-templates .tpl-row:hover, #s-presets .preset-row:hover,
#s-templates .list-row:hover, #s-presets .list-row:hover {
  border-color: var(--accent-seam) !important;
  box-shadow: var(--sh1) !important;
}

/* Inputs within templates/presets */
#s-templates input, #s-templates select, #s-templates textarea,
#s-presets input, #s-presets select, #s-presets textarea {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r1) !important;
  color: var(--t1) !important;
  font-family: var(--fb) !important;
}
#s-templates input:focus, #s-templates select:focus, #s-templates textarea:focus,
#s-presets input:focus, #s-presets select:focus, #s-presets textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}

/* ───────────────────────────────────────────────────────────────────────
   QB v2 BODY — Round 2: hero, ticker, river, day cards, tags, tiers
   Targets hardcoded colors in quote-builder-v2.css that bypassed my
   Session 2 sidebar/topbar-only overrides.
─────────────────────────────────────────────────────────────────────── */

/* Persistent hero (dark band with client name + KPIs) */
#s-qb2 .qb2-persistent-hero {
  background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 100%) !important;
  border-bottom: 1px solid var(--b2) !important;
}
#s-qb2 .qb2-persistent-hero::after {
  background: radial-gradient(ellipse at 70% 30%, var(--accent-ring), transparent 60%) !important;
}
#s-qb2 .qb2-persistent-hero .client-hero-name {
  font-family: var(--fd) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
#s-qb2 .qb2-persistent-hero .client-hero-meta {
  color: rgba(255,255,255,.6) !important;
  font-family: var(--fb) !important;
}
#s-qb2 .qb2-persistent-hero .client-kpi {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r1) !important;
}
#s-qb2 .qb2-persistent-hero .client-kpi-val {
  color: var(--accent-up) !important;
  font-family: var(--fd) !important;
  font-weight: 500 !important;
}
#s-qb2 .qb2-persistent-hero .client-kpi-lbl {
  color: rgba(255,255,255,.45) !important;
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

/* Ticker (TOTAL COST / $350 / Hotels / Activities / Transport pills) */
#s-qb2 .ticker {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .ticker-total {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
#s-qb2 .ticker-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--t3) !important;
}
#s-qb2 .ticker-pill {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t3) !important;
  font-family: var(--fb) !important;
  border-radius: var(--rp) !important;
}
#s-qb2 .ticker-pill b { color: var(--t1) !important; }
#s-qb2 .ticker-bar { background: var(--bg-3) !important; }
#s-qb2 .ticker-budget { color: var(--t3) !important; }

/* Divider (7 NIGHTS · 8 DAYS) */
#s-qb2 .divider::before,
#s-qb2 .divider::after { background: var(--b1) !important; }
#s-qb2 .divider span {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
}

/* River navigator */
#s-qb2 .river {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .river-dot {
  border-color: var(--accent) !important;
  background: var(--bg-1) !important;
}
#s-qb2 .river-dot.arr { border-color: var(--green) !important; background: var(--green) !important; }
#s-qb2 .river-dot.dep { border-color: var(--blue)  !important; background: var(--blue)  !important; }
#s-qb2 .river-city  { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 700 !important; }
#s-qb2 .river-meta  { color: var(--t3) !important; }
#s-qb2 .river-hotel { color: var(--accent) !important; font-family: var(--fu) !important; }
#s-qb2 .river-daypill {
  background: var(--bg-2) !important;
  color: var(--t3) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
}
#s-qb2 .river-daypill:hover {
  background: var(--accent-ghost) !important;
  color: var(--accent) !important;
}
#s-qb2 .river-daypill.active {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px var(--accent-ring) !important;
}
#s-qb2 .river-edge-line {
  background: linear-gradient(90deg, var(--b2), var(--accent) 50%, var(--b2)) !important;
}
#s-qb2 .river-edge-time {
  color: var(--accent) !important;
  background: var(--accent-ghost) !important;
  font-family: var(--fu) !important;
  font-weight: 800 !important;
}

/* Day cards (collapsed) */
#s-qb2 .day-c {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .day-c:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--sh2) !important;
}
#s-qb2 .day-c-num {
  background: var(--accent-ghost) !important;
  color: var(--accent) !important;
  font-family: var(--fu) !important;
}
#s-qb2 .day-c-route { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 700 !important; }
#s-qb2 .day-c-sub   { color: var(--t3) !important; }
#s-qb2 .day-c-cost  { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 800 !important; }

/* Day panel (expanded) */
#s-qb2 .day-panel {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh2) !important;
}
#s-qb2 .day-header {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border-bottom: 1px solid var(--b1) !important;
}
#s-qb2 .day-col-left { border-right: 1px solid var(--b1) !important; }
#s-qb2 .day-num {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border-radius: var(--r1) !important;
  font-family: var(--fu) !important;
  box-shadow: 0 4px 12px var(--accent-ring) !important;
}
#s-qb2 .day-title    { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 800 !important; }
#s-qb2 .day-subtitle { color: var(--t3) !important; }

/* Day type chips (ARRIVAL / BASE / TRANSFER / DEPARTURE) */
#s-qb2 .dtype {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--rp) !important;
}
#s-qb2 .dtype.transfer  { background: var(--blue-bg)   !important; color: var(--blue)   !important; }
#s-qb2 .dtype.base      { background: var(--green-bg)  !important; color: var(--green)  !important; }
#s-qb2 .dtype.arrival   { background: var(--violet-bg) !important; color: var(--violet) !important; }
#s-qb2 .dtype.departure { background: var(--accent-ghost) !important; color: var(--accent) !important; }

/* Cards in body (Setup form etc.) */
#s-qb2 .card {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .card-label {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--t3) !important;
  text-transform: uppercase;
}
#s-qb2 .card-title {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}
#s-qb2 .card-sub { color: var(--t3) !important; }

/* Buttons inside QB2 body */
#s-qb2 .btn {
  background: var(--bg-2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  font-family: var(--fu) !important;
  font-weight: 700 !important;
  border-radius: var(--r1) !important;
}
#s-qb2 .btn:hover {
  background: var(--bg-3) !important;
  border-color: var(--b2) !important;
}
#s-qb2 .btn-gold {
  background: var(--accent-metal) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent-seam) !important;
  box-shadow: 0 4px 16px var(--accent-ghost) !important;
}
#s-qb2 .btn-green { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green) !important; }
#s-qb2 .btn-red   { background: var(--red-bg)   !important; color: var(--red)   !important; border-color: var(--red)   !important; }

/* Tags */
#s-qb2 .tag {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  border-radius: var(--rp) !important;
}
#s-qb2 .tag-green  { background: var(--green-bg)     !important; color: var(--green)  !important; border-color: var(--green)  !important; }
#s-qb2 .tag-blue   { background: var(--blue-bg)      !important; color: var(--blue)   !important; border-color: var(--blue)   !important; }
#s-qb2 .tag-amber  { background: var(--accent-ghost) !important; color: var(--accent) !important; border-color: var(--accent-seam) !important; }
#s-qb2 .tag-gold   { background: var(--accent-ghost) !important; color: var(--accent) !important; border-color: var(--accent-seam) !important; }
#s-qb2 .tag-red    { background: var(--red-bg)       !important; color: var(--red)    !important; border-color: var(--red)    !important; }
#s-qb2 .tag-violet { background: var(--violet-bg)    !important; color: var(--violet) !important; border-color: var(--violet) !important; }

/* Tier compare cards */
#s-qb2 .tier-card {
  background: var(--bg-1) !important;
  border: 2px solid var(--b1) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .tier-card:hover { box-shadow: var(--sh2) !important; }
#s-qb2 .tier-card.sel {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring), var(--sh1) !important;
}
#s-qb2 .tier-card.recommended::before {
  color: var(--accent) !important;
  background: var(--accent-ghost) !important;
  font-family: var(--fu) !important;
  font-weight: 800 !important;
}
#s-qb2 .tier-card-name   { font-family: var(--fd) !important; color: var(--t1) !important; font-weight: 500 !important; }
#s-qb2 .tier-card-price  { font-family: var(--fd) !important; color: var(--t1) !important; font-weight: 500 !important; }
#s-qb2 .tier-card-sub    { color: var(--t3) !important; }
#s-qb2 .tier-card-margin { border-top: 1px solid var(--b1) !important; font-family: var(--fu) !important; }

/* Commercial dial + slider + freeze */
#s-qb2 .dial-pct    { font-family: var(--fd) !important; color: var(--green) !important; }
#s-qb2 .dial-label  { font-family: var(--fu) !important; color: var(--t3) !important; letter-spacing: 0.14em !important; }
#s-qb2 .dial-profit { color: var(--accent) !important; font-family: var(--fb) !important; }
#s-qb2 .dial-meta-item { color: var(--t3) !important; }
#s-qb2 .dial-meta-val  { color: var(--t1) !important; }
#s-qb2 .margin-slider {
  background: var(--bg-3) !important;
}
#s-qb2 .margin-slider::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow: 0 2px 8px var(--accent-ring) !important;
}
#s-qb2 .margin-val { color: var(--accent) !important; font-family: var(--fb) !important; }
#s-qb2 .freeze-btn {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--b1) !important;
  color: var(--t2) !important;
  font-family: var(--fu) !important;
  border-radius: var(--rp) !important;
}
#s-qb2 .freeze-btn.active {
  background: var(--blue-bg) !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* Waterfall bars */
#s-qb2 .wf-bar.cost    { background: linear-gradient(to top, var(--red), var(--red))   !important; filter: brightness(1.1); }
#s-qb2 .wf-bar.margin  { background: linear-gradient(to top, var(--green), var(--green)) !important; filter: brightness(1.1); }
#s-qb2 .wf-bar.total   { background: var(--accent-metal) !important; }
#s-qb2 .wf-bar-val { color: var(--t1) !important; font-family: var(--fu) !important; }
#s-qb2 .wf-bar-lbl { color: var(--t3) !important; font-family: var(--fu) !important; }

/* What-if cards */
#s-qb2 .whatif-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
}
#s-qb2 .whatif-card:hover {
  border-color: var(--accent) !important;
  background: var(--bg-2) !important;
}
#s-qb2 .whatif-title { color: var(--t1) !important; font-family: var(--fb) !important; }
#s-qb2 .whatif-delta { font-family: var(--fu) !important; font-weight: 800 !important; border-radius: var(--rp) !important; }
#s-qb2 .whatif-delta.save  { background: var(--green-bg) !important; color: var(--green) !important; }
#s-qb2 .whatif-delta.spend { background: var(--red-bg)   !important; color: var(--red)   !important; }
#s-qb2 .whatif-desc { color: var(--t3) !important; }

/* Commercial table */
#s-qb2 .comm-table th {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--t3) !important;
  border-bottom: 1px solid var(--b1) !important;
}
#s-qb2 .comm-table td { border-bottom: 1px solid var(--b0) !important; }
#s-qb2 .comm-table tr.total td { border-top: 2px solid var(--b1) !important; color: var(--t1) !important; }
#s-qb2 .comm-table tr.sub td { color: var(--t3) !important; }
#s-qb2 .comm-table tr:hover td { background: var(--bg-2) !important; }
#s-qb2 .comm-highlight-price {
  font-family: var(--fd) !important;
  color: var(--t1) !important;
  font-weight: 500 !important;
}

/* Intel card (Map / Rooming cards) */
#s-qb2 .intel-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--sh1) !important;
}
#s-qb2 .intel-card-title {
  font-family: var(--fu) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--t3) !important;
}
#s-qb2 .intel-card-val { color: var(--t1) !important; font-family: var(--fb) !important; font-weight: 800 !important; }
#s-qb2 .intel-card-sub { color: var(--t3) !important; }

/* ───────────────────────────────────────────────────────────────────────
   THEME TOGGLE — nav user menu + login footer (Phase 1.5)
─────────────────────────────────────────────────────────────────────── */
.nav-user-theme {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  font-family: var(--fu);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--t1);
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-user-theme:hover {
  background: var(--bg-3);
  border-color: var(--accent-ring);
  color: var(--accent);
}

.lg-theme-toggle {
  display: inline-block;
  margin: 14px auto 0;
  padding: 6px 12px;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  background: transparent;
  border: 1px solid var(--b1);
  border-radius: var(--rp);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lg-theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-ring);
}

/* ───────────────────────────────────────────────────────────────────────
   FOCUS-VISIBLE — keyboard-only accent ring (Phase-Repair-4.1)
   Uniform, token-driven, softly rounded, works over any surface.
─────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* Box-shadow ring for form controls (composes with existing border/border-radius) */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.pill:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Inputs already use their own border-color change on focus — suppress extra outline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Reduced-motion: no transition on the ring */
@media (prefers-reduced-motion: reduce) {
  :focus-visible { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 5 FOLLOW-UP — Dark-mode overrides for inline-styled JS output
   (Phase 5.f — user-flagged remaining light surfaces)
   Targets parent classes so !important beats inline style= attributes
   emitted by pricing-display.js, pe-pricing-cards.js, proposal-engine.js,
   quote-builder-v2.js, etc.
═══════════════════════════════════════════════════════════════════════ */

/* Finance card: price summary rows (HOTELS / ACTIVITIES / TRANSPORT / GUIDE /
   SUPPLEMENTS / TOTAL COST / FLEX BASE / PROFIT) injected as <div style="…"> */
[data-theme="dark"] #financeCard > div,
[data-theme="dark"] #financeCard table,
[data-theme="dark"] #financeCard tr,
[data-theme="dark"] #financeCard td,
[data-theme="dark"] #financeCard th {
  background-color: transparent !important;
  color: var(--t1) !important;
  border-color: var(--b1) !important;
}
[data-theme="dark"] #financeCard [style*="background:#FDFAF6"],
[data-theme="dark"] #financeCard [style*="background:#fdfaf6"],
[data-theme="dark"] #financeCard [style*="background:#fff"],
[data-theme="dark"] #financeCard [style*="background:#FFF"],
[data-theme="dark"] #financeCard [style*="background:#faf8f4"],
[data-theme="dark"] #financeCard [style*="background:#f5f0e8"] {
  background-color: var(--bg-2) !important;
}
[data-theme="dark"] #financeCard [style*="color:#1A1714"],
[data-theme="dark"] #financeCard [style*="color:#1A1710"],
[data-theme="dark"] #financeCard [style*="color:#140E08"] {
  color: var(--t1) !important;
}

/* FLEX SELL / PREMIUM SELL cards (pe-pricing-cards.js + pricing-display.js
   emit inline bg/border on these tiles) */
[data-theme="dark"] #priceCardPanel > div,
[data-theme="dark"] #tierComp > div,
[data-theme="dark"] .price-card-sell,
[data-theme="dark"] [class*="price-card"] {
  background-color: var(--bg-2) !important;
  border-color: var(--b2) !important;
  color: var(--t1) !important;
}

/* Quote Action Panel (.qap family already tokenised but belt-and-braces
   for any inline style= on children) */
[data-theme="dark"] .qap [style*="background:#faf8f4"],
[data-theme="dark"] .qap [style*="background:#fff"],
[data-theme="dark"] .qap [style*="background:#FFF"] {
  background-color: var(--bg-2) !important;
}

/* Route Intelligence panel (inline styled top-level wrapper) */
[data-theme="dark"] [id*="rie"][style*="background:#"],
[data-theme="dark"] [id*="routeIntel"][style*="background:#"],
[data-theme="dark"] [class*="route-intel"][style*="background:#"],
[data-theme="dark"] [id*="rieCard"] {
  background-color: var(--bg-1) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] [id*="rieCard"] > *,
[data-theme="dark"] [id*="routeIntel"] > * {
  color: var(--t1);
}

/* Pricing Engine (margin-engine-inline already fixed; nested inline styles) */
[data-theme="dark"] .margin-engine-inline [style*="background:#fff"],
[data-theme="dark"] .margin-engine-inline [style*="background:#fff8e6"],
[data-theme="dark"] .margin-engine-inline [style*="background:#fff2cc"] {
  background-color: var(--bg-2) !important;
}
[data-theme="dark"] .margin-engine-inline [style*="color:#1A1714"] {
  color: var(--t1) !important;
}

/* INR indicative line (pq-ind-tag + similar warm-cream chips) */
[data-theme="dark"] .pq-ind-tag {
  background: var(--bg-2) !important;
  color: var(--t3) !important;
  border-color: var(--b1) !important;
}
[data-theme="dark"] .pq-price-divider {
  background: var(--b1) !important;
}
[data-theme="dark"] .pq-mini-list > div {
  border-bottom-color: var(--b1) !important;
}

/* Blanket: any QB2 descendant carrying a literal near-white inline background
   flips to a themed dark surface. Specific-enough to avoid leaking outside #s-quote. */
[data-theme="dark"] #s-quote [style*="background:#fff"]:not(.qap-publish):not(.qap-wa):not(.qap-save),
[data-theme="dark"] #s-quote [style*="background:#FFF"]:not(.qap-publish):not(.qap-wa):not(.qap-save),
[data-theme="dark"] #s-quote [style*="background:#FFFFFF"]:not(.qap-publish):not(.qap-wa):not(.qap-save),
[data-theme="dark"] #s-quote [style*="background:#ffffff"]:not(.qap-publish):not(.qap-wa):not(.qap-save),
[data-theme="dark"] #s-quote [style*="background:#FDFAF6"],
[data-theme="dark"] #s-quote [style*="background:#fdfaf6"],
[data-theme="dark"] #s-quote [style*="background:#faf8f4"],
[data-theme="dark"] #s-quote [style*="background:#fffdf9"],
[data-theme="dark"] #s-quote [style*="background:#FFFDF9"],
[data-theme="dark"] #s-quote [style*="background:#eaf5f1"],
[data-theme="dark"] #s-quote [style*="background:#EAF5F1"],
[data-theme="dark"] #s-quote [style*="background:#f0ede5"],
[data-theme="dark"] #s-quote [style*="background:#f3e8f3"] {
  background-color: var(--bg-2) !important;
}

/* And any QB2 descendant with a hardcoded dark-ink text color flips to cream */
[data-theme="dark"] #s-quote [style*="color:#1A1714"],
[data-theme="dark"] #s-quote [style*="color:#1A1710"],
[data-theme="dark"] #s-quote [style*="color:#140E08"],
[data-theme="dark"] #s-quote [style*="color:#2b2723"],
[data-theme="dark"] #s-quote [style*="color:#1c1713"] {
  color: var(--t1) !important;
}
/* And off-palette muted text colors flip to --t3 */
[data-theme="dark"] #s-quote [style*="color:#9a8f84"],
[data-theme="dark"] #s-quote [style*="color:#9B8E83"],
[data-theme="dark"] #s-quote [style*="color:#8a7d70"],
[data-theme="dark"] #s-quote [style*="color:#8c7f73"] {
  color: var(--t3) !important;
}
/* Off-palette thin borders */
[data-theme="dark"] #s-quote [style*="border:1px solid #e5dbcf"],
[data-theme="dark"] #s-quote [style*="border:1px solid #ede8e0"],
[data-theme="dark"] #s-quote [style*="border:1px solid #f0ebe3"],
[data-theme="dark"] #s-quote [style*="border:1px solid #c8e2da"] {
  border-color: var(--b1) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   LABEL UPPERCASE — canonical caps-label behaviour (Repair-Phase-2.2)
   Applied to every canonical label class. Idempotent vs already-uppercased
   text. Existing tracking/weight rules remain authoritative.
─────────────────────────────────────────────────────────────────────── */
.label, .pill-label, .sec-label, .doc-meta, .canvas-label,
.kpi-label, .stat-lbl, .card-label, [data-label-role] {
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-4.5 — MODAL GLASS STANDARDISATION
   Unifies backdrop scrim + glass chrome across all internal modals
   (public-quote pqc-* classes are client-facing brand and excluded).
═══════════════════════════════════════════════════════════════════════ */
.hdm-overlay,
.aib-modal-overlay,
.qb2-modal-overlay,
.prst-save-modal-overlay,
.vb-modal-overlay,
.cty-modal-overlay,
.htl-modal-overlay,
.confirm-modal-overlay,
.export-modal-overlay,
.ss-overlay,
.tp-overlay {
  background: var(--scrim) !important;
}
.hdm-overlay.open,
.aib-modal-overlay.open,
.qb2-modal-overlay.open,
.prst-save-modal-overlay.open,
.vb-modal-overlay.open,
.cty-modal-overlay.open,
.htl-modal-overlay.open,
.confirm-modal-overlay.open,
.export-modal-overlay.open,
.ss-overlay.open,
.tp-overlay.open {
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

/* Modal chrome itself: glass bg + themed border, only when parent is open */
.hdm-modal,
.aib-modal,
.qb2-modal,
.prst-save-modal,
.vb-modal-box,
.cty-modal,
.htl-modal,
.confirm-modal,
.export-modal {
  background: var(--glass-bg, var(--bg-1)) !important;
  border: 1px solid var(--b1) !important;
  box-shadow: 0 32px 80px var(--sh3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-4.2 — ASYNC BUTTON LOADING STATE
   Add .is-loading to any button to show a spinner + disable interaction.
═══════════════════════════════════════════════════════════════════════ */
.btn.is-loading,
button.is-loading,
[role="button"].is-loading {
  position: relative;
  pointer-events: none;
  opacity: .65;
  cursor: wait;
}
.btn.is-loading::after,
button.is-loading::after,
[role="button"].is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--accent-ring);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sit-btn-spin .7s linear infinite;
}
.btn.is-loading > *,
button.is-loading > *,
[role="button"].is-loading > * {
  visibility: hidden;
}
@keyframes sit-btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  button.is-loading::after,
  [role="button"].is-loading::after {
    animation: none;
    border-color: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-4.3 — TOAST CHROME OVERRIDE
   (SIT_Notify injects its own stylesheet; this layer forces theme tokens
    on top so toasts look native in both light and dark mode.)
═══════════════════════════════════════════════════════════════════════ */
#sit-notify-root .sit-toast {
  background: var(--glass-bg, var(--bg-1)) !important;
  border: 1px solid var(--b1) !important;
  box-shadow: 0 14px 34px var(--sh2) !important;
  color: var(--t1) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
#sit-notify-root .sit-toast-title { color: var(--t1) !important; }
#sit-notify-root .sit-toast-sub   { color: var(--t3) !important; }
#sit-notify-root .sit-toast-close { color: var(--t4) !important; }
#sit-notify-root .sit-toast-close:hover {
  color: var(--t1) !important;
  background: var(--bg-2) !important;
}
#sit-notify-root .sit-toast-icon.ok   { background: var(--green-bg) !important; color: var(--green) !important; }
#sit-notify-root .sit-toast-icon.warn { background: var(--accent-ghost) !important; color: var(--accent) !important; }
#sit-notify-root .sit-toast-icon.err  { background: var(--red-bg) !important; color: var(--red) !important; }
#sit-notify-root .sit-toast-icon.info { background: var(--bg-2) !important; color: var(--blue) !important; }

/* Confirm dialog */
.sit-confirm-overlay { background: var(--scrim) !important; }
.sit-confirm-box {
  background: var(--glass-bg, var(--bg-1)) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t1) !important;
  box-shadow: 0 32px 80px var(--sh3) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.sit-confirm-title { color: var(--t1) !important; }
.sit-confirm-body  { color: var(--t3) !important; }
.sit-confirm-cancel {
  background: var(--bg-2) !important;
  border-color: var(--b1) !important;
  color: var(--t2) !important;
}
.sit-confirm-cancel:hover { background: var(--bg-3) !important; }
.sit-confirm-ok {
  background: var(--t1) !important;
  color: var(--bg-1) !important;
}
.sit-confirm-danger {
  background: var(--red) !important;
  color: var(--bg-1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-4.4 — EMPTY STATE COMPONENT
═══════════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 14px;
  min-height: 240px;
  color: var(--t3);
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--t4);
  opacity: .75;
}
.empty-state__title {
  font-family: var(--fd, inherit);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--t1);
  margin: 0;
}
.empty-state__sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--t3);
  max-width: 360px;
  margin: 0;
}
.empty-state__cta {
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent-ring);
  background: var(--accent-ghost);
  color: var(--accent-dn);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.empty-state__cta:hover {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-6.5 — SKIP LINK
═══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10001;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--bg-1);
  border-radius: 0 0 10px 10px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-6.1 — SHORTCUTS HELP OVERLAY
═══════════════════════════════════════════════════════════════════════ */
.sit-shortcuts-help {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: var(--scrim);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: sit-shortcuts-fade 180ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes sit-shortcuts-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sit-shortcuts-help__box {
  background: var(--glass-bg, var(--bg-1));
  border: 1px solid var(--b1);
  border-radius: 18px;
  box-shadow: 0 32px 80px var(--sh3);
  padding: 24px 28px;
  width: min(520px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  color: var(--t1);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-family: var(--fb);
}
.sit-shortcuts-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--fd, inherit);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--t1);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--b1);
}
.sit-shortcuts-help__head kbd {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 6px;
  color: var(--t3);
  font-family: var(--fb);
}
.sit-shortcuts-help__scope {
  font-family: var(--fu, var(--fb));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 14px 0 6px;
}
.sit-shortcuts-help__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: var(--t2);
  border-bottom: 1px dashed var(--b1);
}
.sit-shortcuts-help__row:last-child { border-bottom: none; }
.sit-shortcuts-help__row kbd {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 6px;
  color: var(--t1);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-7 — FORM VALIDATION LAYER
═══════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Invalid / valid / required state chrome ──────────────────── */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--red) !important;
  background-color: var(--red-bg) !important;
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--red-ring) !important;
  outline: none !important;
}

/* Valid-confirmation (opt-in via data-validated="true") */
input[aria-invalid="false"][data-validated="true"],
select[aria-invalid="false"][data-validated="true"],
textarea[aria-invalid="false"][data-validated="true"] {
  border-color: var(--green) !important;
}
input[aria-invalid="false"][data-validated="true"]:focus,
select[aria-invalid="false"][data-validated="true"]:focus,
textarea[aria-invalid="false"][data-validated="true"]:focus {
  box-shadow: 0 0 0 3px var(--green-ring) !important;
}

/* Required-indicator on labels */
label[data-required="true"]::after,
.field[data-required="true"] > label::after {
  content: " *";
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}

/* ── 7.2 Inline error + help-text chrome ──────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.45;
  color: var(--red);
  margin-top: 4px;
  font-weight: 600;
}
.field-error::before {
  content: "⚠";
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 1px;
}
.field-help {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.45;
  color: var(--t4);
  margin-top: 4px;
}

/* Validation summary card (top-of-form on submit fail) */
.sit-validation-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-left-width: 3px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
}
.sit-validation-summary__title {
  font-weight: 800;
  color: var(--red);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sit-validation-summary__list {
  margin: 0;
  padding-left: 18px;
  color: var(--t2);
  font-size: 12px;
  line-height: 1.55;
}
.sit-validation-summary__list li { margin: 2px 0; }
.sit-validation-summary__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.sit-validation-summary__link:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-8 — RADIO / CHECKBOX / TOGGLE CHROME
═══════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Global accent-color baseline ──────────────────────────────
   Every native checkbox / radio paints with accent on :checked.
   One-line token fix, no HTML changes required.                      */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}
/* Disabled native inputs get consistent fade */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   8.2 PREMIUM OPT-IN CLASSES — .sit-check / .sit-radio / .sit-toggle
   Hide the native input, paint a styled visual. Keyboard + semantics
   come free from the real input.
═══════════════════════════════════════════════════════════════════════ */

/* Shared wrapper behaviour */
.sit-check,
.sit-radio,
.sit-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  line-height: 1.4;
}
.sit-check > input[type="checkbox"],
.sit-radio > input[type="radio"],
.sit-toggle > input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  width: 100%;
  height: 100%;
  /* Don't use display:none — would lose keyboard focus */
}

/* Labels inside the wrapper */
.sit-check__label,
.sit-radio__label,
.sit-toggle__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── 8.2a CHECKBOX visual ─────────────────────────────────────────── */
.sit-check__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--bg-2);
  border: 1.5px solid var(--b2);
  position: relative;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}
.sit-check__box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--bg-1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 120ms ease, opacity 120ms ease;
}
.sit-check > input[type="checkbox"]:checked ~ .sit-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.sit-check > input[type="checkbox"]:checked ~ .sit-check__box::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
/* Indeterminate: horizontal bar */
.sit-check > input[type="checkbox"]:indeterminate ~ .sit-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.sit-check > input[type="checkbox"]:indeterminate ~ .sit-check__box::after {
  content: "";
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
  border: none;
  background: var(--bg-1);
  transform: none;
  opacity: 1;
  border-radius: 1px;
}

/* ── 8.2b RADIO visual ────────────────────────────────────────────── */
.sit-radio__dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1.5px solid var(--b2);
  position: relative;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}
.sit-radio__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-1);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 120ms ease, opacity 120ms ease;
}
.sit-radio > input[type="radio"]:checked ~ .sit-radio__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.sit-radio > input[type="radio"]:checked ~ .sit-radio__dot::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ── 8.2c TOGGLE SWITCH visual ────────────────────────────────────── */
.sit-toggle__track {
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-3);
  border: 1px solid var(--b2);
  border-radius: 999px;
  transition: background-color 180ms cubic-bezier(.16,1,.3,1),
              border-color 180ms cubic-bezier(.16,1,.3,1);
}
.sit-toggle__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-1);
  box-shadow: 0 1px 3px var(--sh1);
  transition: transform 180ms cubic-bezier(.16,1,.3,1);
}
.sit-toggle > input[type="checkbox"]:checked ~ .sit-toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}
.sit-toggle > input[type="checkbox"]:checked ~ .sit-toggle__track .sit-toggle__knob {
  transform: translateX(16px);
}

/* ── 8.3 Focus-visible ring (leverages Phase-6 base rule) ─────────── */
.sit-check > input[type="checkbox"]:focus-visible ~ .sit-check__box,
.sit-radio > input[type="radio"]:focus-visible ~ .sit-radio__dot,
.sit-toggle > input[type="checkbox"]:focus-visible ~ .sit-toggle__track {
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

/* ── 8.4 Disabled / readonly parity ───────────────────────────────── */
.sit-check:has(> input:disabled),
.sit-radio:has(> input:disabled),
.sit-toggle:has(> input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}
/* Fallback for engines without :has() */
.sit-check > input:disabled ~ .sit-check__box,
.sit-check > input:disabled ~ .sit-check__label,
.sit-radio > input:disabled ~ .sit-radio__dot,
.sit-radio > input:disabled ~ .sit-radio__label,
.sit-toggle > input:disabled ~ .sit-toggle__track,
.sit-toggle > input:disabled ~ .sit-toggle__label {
  opacity: .5;
  cursor: not-allowed;
}
/* Readonly: keeps visual but no interaction */
.sit-check > input[readonly] ~ .sit-check__box,
.sit-radio > input[readonly] ~ .sit-radio__dot,
.sit-toggle > input[readonly] ~ .sit-toggle__track {
  cursor: default;
}

/* ── Hover nudge ──────────────────────────────────────────────────── */
@media (hover: hover) {
  .sit-check:hover > input:not(:disabled) ~ .sit-check__box,
  .sit-radio:hover > input:not(:disabled) ~ .sit-radio__dot,
  .sit-toggle:hover > input:not(:disabled) ~ .sit-toggle__track {
    border-color: var(--accent);
  }
}

/* ── Reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sit-check__box,
  .sit-check__box::after,
  .sit-radio__dot,
  .sit-radio__dot::after,
  .sit-toggle__track,
  .sit-toggle__knob {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   8.5 CTY-TOGGLE RETROFIT
   Retrofit the legacy .cty-toggle to use the shared token palette
   without changing its HTML or click handler. The styles.css rules
   are already tokenised; this adds focus-visible + disabled polish.
═══════════════════════════════════════════════════════════════════════ */
.cty-toggle:focus-visible,
.cty-toggle[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.cty-toggle[aria-disabled="true"],
.cty-toggle.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
@media (hover: hover) {
  .cty-toggle:not(.on):hover {
    border-color: var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cty-toggle,
  .cty-toggle-knob { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-9 — SELECT & DROPDOWN CHROME
═══════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Native <select> closed-state restyle ────────────────────────
   Strips OS chrome + paints a custom chevron via inline-SVG background.
   Scoped to selects that don't already opt out via .sit-select-raw
   (so legacy selects with their own specific chrome remain intact
   if they set their own background).                                  */
select:not(.sit-select-raw) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238C7C6A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 32px;
}
/* Dark-theme chevron — re-encoded with dark-palette t3 colour */
[data-theme="dark"] select:not(.sit-select-raw) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238C7C6A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
}
/* Preserve multi-line selects — those aren't a dropdown */
select[multiple]:not(.sit-select-raw),
select[size]:not([size="1"]):not(.sit-select-raw) {
  background-image: none;
  padding-right: 12px;
  appearance: auto;
  -webkit-appearance: auto;
}

/* ── 9.2 .sit-select — premium wrapper ───────────────────────────────
   Full visual control over the trigger. Native <select> sits on top,
   opacity 0, click-through to OS menu.                                */
.sit-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 160px;
  padding: 9px 34px 9px 13px;
  background: var(--bg-1);
  border: 1.5px solid var(--b2);
  border-radius: var(--r2, 14px);
  color: var(--t1);
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sit-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--t3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 10px 10px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 10px 10px;
  pointer-events: none;
  transition: transform 120ms ease;
}
.sit-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  border: 0;
  padding: 0;
  background: transparent;
}
/* Hover */
@media (hover: hover) {
  .sit-select:hover {
    border-color: var(--accent);
  }
}
/* Focus (via :focus-within since the real select is inside) */
.sit-select:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Disabled */
.sit-select:has(> select:disabled),
.sit-select--disabled {
  opacity: .5;
  cursor: not-allowed;
}
.sit-select:has(> select:disabled) > select,
.sit-select--disabled > select {
  pointer-events: none;
}
/* Fallback for non-:has engines */
.sit-select > select:disabled {
  pointer-events: none;
}

/* ── 9.3 .sit-menu — popover primitive ───────────────────────────────
   Token-driven glass chrome matching Phase-4.5 modal style.
   Rendered programmatically or inlined. Keyboard nav via SIT_menu JS.  */
.sit-menu {
  position: absolute;
  z-index: 200;
  min-width: 180px;
  max-width: 320px;
  padding: 6px;
  background: var(--glass-bg, var(--bg-1));
  border: 1px solid var(--b1);
  border-radius: 14px;
  box-shadow: var(--sh3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.sit-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sit-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--t2);
  text-align: left;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.sit-menu__item:hover {
  background: var(--bg-2);
  color: var(--t1);
}
.sit-menu__item:focus-visible {
  outline: none;
  background: var(--bg-2);
  box-shadow: 0 0 0 2px var(--accent-ring) inset;
}
.sit-menu__item.is-active {
  background: var(--bg-2);
  color: var(--t1);
  font-weight: 700;
}
.sit-menu__item.is-danger {
  color: var(--red);
}
.sit-menu__item.is-danger:hover {
  background: var(--red-bg);
  color: var(--red);
}
.sit-menu__item[disabled],
.sit-menu__item:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.sit-menu__item__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
}
.sit-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--b1);
  border: none;
}
.sit-menu__label {
  padding: 8px 12px 4px;
  font-family: var(--fu, var(--fb));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}
@media (prefers-reduced-motion: reduce) {
  .sit-menu { transition: none !important; }
  .sit-select::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-10 — COMBOBOX / TYPEABLE AUTOCOMPLETE
═══════════════════════════════════════════════════════════════════════ */
.sit-combobox {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sit-combobox__input {
  width: 100%;
  /* Rest of chrome inherited from Phase-7 input rules + app baseline */
}
.sit-combobox__list {
  position: absolute;
  z-index: 210;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--glass-bg, var(--bg-1));
  border: 1px solid var(--b1);
  border-radius: 14px;
  box-shadow: var(--sh3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.sit-combobox.is-open .sit-combobox__list {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Upward-flip variant (auto-set by SIT_combobox when no room below) */
.sit-combobox.flip-up .sit-combobox__list {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(4px) scale(.98);
}
.sit-combobox.flip-up.is-open .sit-combobox__list {
  transform: translateY(0) scale(1);
}
.sit-combobox__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--t2);
  line-height: 1.4;
  transition: background 120ms ease, color 120ms ease;
}
.sit-combobox__item:hover {
  background: var(--bg-2);
  color: var(--t1);
}
.sit-combobox__item.is-active {
  background: var(--bg-2);
  color: var(--t1);
}
.sit-combobox__item[aria-selected="true"] {
  background: var(--accent-ghost);
  color: var(--t1);
}
.sit-combobox__item__meta {
  margin-left: auto;
  color: var(--t4);
  font-size: 11px;
  white-space: nowrap;
}
.sit-combobox__item mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  padding: 0;
}
.sit-combobox__empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--t4);
  font-size: 12px;
  font-style: italic;
}
/* Loading bar at top of list */
.sit-combobox--loading .sit-combobox__list::before {
  content: "";
  position: sticky;
  top: -6px;
  display: block;
  height: 2px;
  margin: -6px -6px 6px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: sit-combobox-loading 1.2s linear infinite;
}
@keyframes sit-combobox-loading {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sit-combobox__list { transition: none !important; }
  .sit-combobox--loading .sit-combobox__list::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-11 — DATE PICKER
═══════════════════════════════════════════════════════════════════════ */
.sit-datepicker-anchor {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sit-datepicker__popover {
  position: absolute;
  z-index: 220;
  left: 0;
  top: calc(100% + 4px);
  min-width: 288px;
  padding: 12px;
  background: var(--glass-bg, var(--bg-1));
  border: 1px solid var(--b1);
  border-radius: 14px;
  box-shadow: var(--sh3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.sit-datepicker-anchor.is-open .sit-datepicker__popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sit-datepicker-anchor.flip-up .sit-datepicker__popover {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(4px) scale(.98);
}
.sit-datepicker-anchor.flip-up.is-open .sit-datepicker__popover {
  transform: translateY(0) scale(1);
}

/* ── Header: prev · month/year · next ──────────────────────────────── */
.sit-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.sit-datepicker__nav {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sit-datepicker__nav:hover {
  background: var(--bg-2);
  color: var(--t1);
  border-color: var(--b1);
}
.sit-datepicker__nav:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.sit-datepicker__title {
  flex: 1;
  text-align: center;
  font-family: var(--fd, inherit);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.01em;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 120ms ease;
}
.sit-datepicker__title:hover {
  background: var(--bg-2);
}

/* ── Week-day header row ──────────────────────────────────────────── */
.sit-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.sit-datepicker__weekday {
  font-family: var(--fu, var(--fb));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t4);
  text-align: center;
  padding: 6px 0;
}

/* ── Day grid ──────────────────────────────────────────────────────── */
.sit-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sit-datepicker__day {
  aspect-ratio: 1 / 1;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sit-datepicker__day:hover {
  background: var(--bg-2);
  color: var(--t1);
}
.sit-datepicker__day.is-outside-month {
  color: var(--t5);
  opacity: .55;
}
.sit-datepicker__day.is-today {
  border-color: var(--accent-ring);
  color: var(--accent);
  font-weight: 700;
}
.sit-datepicker__day.is-selected {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
  font-weight: 700;
}
.sit-datepicker__day.is-in-range {
  background: var(--accent-ghost);
  color: var(--accent);
  border-radius: 0;
}
.sit-datepicker__day.is-range-start {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
  border-radius: 8px 0 0 8px;
}
.sit-datepicker__day.is-range-end {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
  border-radius: 0 8px 8px 0;
}
.sit-datepicker__day.is-disabled {
  color: var(--t5);
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.sit-datepicker__day.is-disabled:hover {
  background: transparent;
}

/* ── Month-only mode grid (4×3 months) ────────────────────────────── */
.sit-datepicker__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.sit-datepicker__month {
  padding: 12px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  text-align: center;
}
.sit-datepicker__month:hover {
  background: var(--bg-2);
  color: var(--t1);
}
.sit-datepicker__month.is-selected {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
  font-weight: 700;
}
.sit-datepicker__month.is-disabled {
  color: var(--t5);
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Footer: today quick-pick + range hint ────────────────────────── */
.sit-datepicker__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--b1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sit-datepicker__today-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-ring);
  background: var(--accent-ghost);
  color: var(--accent-dn);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sit-datepicker__today-btn:hover {
  background: var(--accent);
  color: var(--bg-1);
  border-color: var(--accent);
}
.sit-datepicker__hint {
  font-size: 11px;
  color: var(--t4);
  font-style: italic;
}

/* ── Focus-visible ring on day/month cells ────────────────────────── */
.sit-datepicker__day:focus-visible,
.sit-datepicker__month:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sit-datepicker__popover,
  .sit-datepicker__day,
  .sit-datepicker__month,
  .sit-datepicker__nav,
  .sit-datepicker__title {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-12 — DATA TABLES
═══════════════════════════════════════════════════════════════════════ */
.sit-table-wrap {
  position: relative;
  width: 100%;
  max-height: inherit;
  overflow: auto;
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: 14px;
  box-shadow: var(--sh1);
  font-family: var(--fb);
  color: var(--t1);
}
.sit-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.4;
}
.sit-table__caption {
  padding: 14px 16px 10px;
  text-align: left;
  font-family: var(--fd, inherit);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--t1);
  caption-side: top;
}
.sit-table__caption.is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* Header row — sticky */
.sit-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-2);
  color: var(--t3);
  font-family: var(--fu, var(--fb));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
  user-select: none;
}
.sit-table thead th[data-sort] {
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.sit-table thead th[data-sort]:hover {
  background: var(--bg-3);
  color: var(--t1);
}
.sit-table thead th[data-sort]::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.sit-table thead th[aria-sort="ascending"]::after {
  opacity: 1;
}
.sit-table thead th[aria-sort="descending"]::after {
  opacity: 1;
  transform: translateY(-1px) rotate(180deg);
}
.sit-table thead th.sit-table__num,
.sit-table tbody td.sit-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sit-table thead th.sit-table__actions,
.sit-table tbody td.sit-table__actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.sit-table thead th.sit-table__check,
.sit-table tbody td.sit-table__check {
  width: 1%;
  padding-right: 0;
  white-space: nowrap;
}

/* Body cells */
.sit-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--b0);
  color: var(--t2);
  vertical-align: middle;
}
.sit-table tbody tr:last-child td { border-bottom: none; }
.sit-table:not(.sit-table--plain) tbody tr:nth-child(even) td {
  background: var(--bg-2);
}
.sit-table tbody tr {
  transition: background 120ms ease;
}
.sit-table tbody tr:hover td {
  background: var(--bg-3);
}
.sit-table tbody tr[data-clickable="true"] {
  cursor: pointer;
}
.sit-table tbody tr[data-selected="true"] td {
  background: var(--accent-ghost) !important;
  color: var(--t1);
}
.sit-table tbody tr[data-selected="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Keyboard focus on a cell (via tabindex) */
.sit-table tbody td:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-ring);
}

/* Sticky-first-column variant */
.sit-table--sticky-col tbody td:first-child,
.sit-table--sticky-col thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-1);
}
.sit-table--sticky-col thead th:first-child {
  background: var(--bg-2);
  z-index: 3;
}

/* Empty-state row */
.sit-table__empty-row td {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}
.sit-table__empty-row .empty-state {
  padding: 48px 24px;
}

/* Filter panel toggle + body (paired with SIT_collapse) */
.sit-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 2;
}
.sit-table__toolbar-left,
.sit-table__toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sit-table__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--b2);
  background: var(--bg-1);
  color: var(--t2);
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.sit-table__filter-toggle:hover {
  border-color: var(--accent);
  color: var(--t1);
}
.sit-table__filter-toggle.is-active {
  background: var(--accent-ghost);
  border-color: var(--accent-ring);
  color: var(--accent-dn);
}
.sit-table__filters {
  padding: 10px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--bg-1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.sit-table__filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sit-table__filter-field label {
  font-family: var(--fu, var(--fb));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}
.sit-table__count {
  font-size: 11px;
  color: var(--t4);
  font-variant-numeric: tabular-nums;
}
.sit-table__count mark {
  background: transparent;
  color: var(--t1);
  font-weight: 700;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sit-table tbody tr,
  .sit-table thead th,
  .sit-table__filter-toggle { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-13 — INLINE CELL EDITING
═══════════════════════════════════════════════════════════════════════ */

/* ── Idle (display) state — subtle affordance ───────────────────── */
[data-sit-inline-edit="idle"] {
  cursor: text;
  position: relative;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background 120ms ease, box-shadow 120ms ease;
  min-height: 1em;
}
[data-sit-inline-edit="idle"][data-inline-type="checkbox"] {
  cursor: pointer;
}
[data-sit-inline-edit="idle"][data-inline-type="date"],
[data-sit-inline-edit="idle"][data-inline-type="combobox"],
[data-sit-inline-edit="idle"][data-inline-type="select"],
[data-sit-inline-edit="idle"][data-inline-type="number"] {
  cursor: pointer;
}
@media (hover: hover) {
  [data-sit-inline-edit="idle"]:hover {
    background: var(--accent-ghost);
    box-shadow: inset 0 -1px 0 var(--accent-ring);
  }
}
[data-sit-inline-edit="idle"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}

/* Empty-placeholder hint when value is blank */
[data-sit-inline-edit="idle"][data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--t5);
  font-style: italic;
}

/* ── Active (editing) state — contains editor ─────────────────── */
[data-sit-inline-edit="editing"] {
  padding: 0;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.sit-inline-edit__editor {
  display: block;
  width: 100%;
  padding: 4px 8px;
  font: inherit;
  color: var(--t1);
  background: var(--bg-1);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  box-sizing: border-box;
}
.sit-inline-edit__editor:focus {
  outline: none;
}
/* Select editor variant */
select.sit-inline-edit__editor {
  padding-right: 28px;
}
/* Checkbox variant uses Phase-8 .sit-check inside */
.sit-inline-edit__check-wrap {
  display: inline-flex;
  align-items: center;
}

/* Saving pending state (async onCommit Promise in flight) */
[data-sit-inline-edit].is-saving {
  position: relative;
  pointer-events: none;
  opacity: .7;
}
[data-sit-inline-edit].is-saving::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid var(--accent-ring);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sit-inline-spin .7s linear infinite;
}
@keyframes sit-inline-spin {
  to { transform: rotate(360deg); }
}

/* Rejection shake */
@keyframes sitInlineShake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-3px); }
  40%,80% { transform: translateX(3px); }
}
.sit-inline-edit--shake {
  animation: sitInlineShake 360ms cubic-bezier(.36,.07,.19,.97);
}

/* Error row (Phase-7 style) floating below cell */
.sit-inline-edit__error {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 10;
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

/* Table cell editability affordance (works with Phase-12 .sit-table) */
.sit-table tbody td[data-editable="true"] {
  cursor: pointer;
  position: relative;
}
.sit-table tbody td[data-editable="true"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-ring);
}
.sit-table tbody td[data-editable="true"][data-sit-inline-edit="editing"] {
  /* Let the cell fully host the editor while editing */
  padding: 2px 4px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  [data-sit-inline-edit="idle"],
  .sit-inline-edit__editor { transition: none !important; }
  .sit-inline-edit--shake { animation: none !important; }
  [data-sit-inline-edit].is-saving::after { animation: none !important; }
}