/* ============================================================================
   Generator Power Advisor — Design System
   Brand: Deep Slate + Trust Blue. Green / Amber / Red are reserved EXCLUSIVELY
   for status (Safe / Near Capacity / Unsafe). Never use them for brand or chrome.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Surfaces — deep slate */
  --bg: #0c1420;
  --bg-grad: radial-gradient(1200px 700px at 50% -10%, #13203180 0%, transparent 60%), #0c1420;
  --surface: #141f2e;
  --surface2: #1c2a3c;
  --surface3: #24344a;
  --border: #27374d;
  --border-strong: #35496485;

  /* Brand — Trust Blue */
  --brand: #4b90f0;
  --brand-strong: #2f7bea;
  --brand-tint: rgba(75,144,240,0.14);
  --brand-tint-2: rgba(75,144,240,0.22);
  --brand-text: #93c0f7;

  /* Legacy aliases — most old "accent" usages were brand emphasis, so map them
     to the brand. The few that meant "caution/near" are re-pointed to --near. */
  --accent: var(--brand);
  --accent2: var(--brand);

  /* Text */
  --text: #e8eef6;
  --text-muted: #9fb0c4;
  --text-faint: #8b9eb4;

  /* Status — RESERVED (Safe / Near / Unsafe) */
  --good: #34d399;
  --good-tint: rgba(52,211,153,0.15);
  --near: #f59e0b;
  --near-tint: rgba(245,158,11,0.15);
  --over: #f4544f;
  --over-tint: rgba(244,84,79,0.15);
  --warn: var(--near);
  --danger: var(--over);

  /* Fuel identity — distinct from brand + status */
  --gas: #38bdf8;      /* gasoline — sky */
  --propane: #b79bfb;  /* propane — violet */

  /* Shape & depth */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.28);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.42);
  --ring: 0 0 0 3px var(--brand-tint-2);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;

  /* Layout */
  --maxw: 760px;
}

/* Light theme — auto by system preference … */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eef2f7;
    --bg-grad: radial-gradient(1200px 700px at 50% -10%, #dbe6f5 0%, transparent 60%), #eef2f7;
    --surface: #ffffff;
    --surface2: #f2f5fa;
    --surface3: #e7edf5;
    --border: #dde4ee;
    --border-strong: #c7d2e0;
    --brand-tint: rgba(47,123,234,0.10);
    --brand-tint-2: rgba(47,123,234,0.18);
    --brand-text: #2f7bea;
    --brand: #2f7bea;
    --brand-strong: #1f6ad6;
    --text: #101a28;
    --text-muted: #56657a;
    --text-faint: #5c6b7f;
    --good: #0f9d63;
    --good-tint: rgba(15,157,99,0.13);
    --near: #c77700;
    --near-tint: rgba(199,119,0,0.13);
    --over: #d93b36;
    --over-tint: rgba(217,59,54,0.12);
    --gas: #0d82c9;
    --propane: #7c53e6;
    --shadow-1: 0 1px 2px rgba(16,26,40,0.06), 0 6px 18px rgba(16,26,40,0.08);
    --shadow-2: 0 10px 34px rgba(16,26,40,0.14);
  }
}
/* … and by explicit toggle (data-theme wins in both directions). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --bg-grad: radial-gradient(1200px 700px at 50% -10%, #dbe6f5 0%, transparent 60%), #eef2f7;
  --surface: #ffffff;
  --surface2: #f2f5fa;
  --surface3: #e7edf5;
  --border: #dde4ee;
  --border-strong: #c7d2e0;
  --brand-tint: rgba(47,123,234,0.10);
  --brand-tint-2: rgba(47,123,234,0.18);
  --brand-text: #2f7bea;
  --brand: #2f7bea;
  --brand-strong: #1f6ad6;
  --text: #101a28;
  --text-muted: #56657a;
  --text-faint: #8493a6;
  --good: #0f9d63;
  --good-tint: rgba(15,157,99,0.13);
  --near: #c77700;
  --near-tint: rgba(199,119,0,0.13);
  --over: #d93b36;
  --over-tint: rgba(217,59,54,0.12);
  --gas: #0d82c9;
  --propane: #7c53e6;
  --shadow-1: 0 1px 2px rgba(16,26,40,0.06), 0 6px 18px rgba(16,26,40,0.08);
  --shadow-2: 0 10px 34px rgba(16,26,40,0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg-grad) fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Header ── */
header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  padding-top: max(10px, calc(env(safe-area-inset-top) + 6px));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* Brand lockup */
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, #3C536B 0%, #283A4E 100%);
  box-shadow: 0 4px 14px rgba(20,31,46,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-mark svg { width: 28px; height: 28px; display: block; }
.brand-text { min-width: 0; }
header h1 {
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header p {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-btn-group {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
}
/* Header action buttons (shared look) */
.header-help-btn,
.header-manage-btn,
.header-collapse-btn,
.theme-toggle-btn {
  flex: 0 0 auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 8px 13px;
  white-space: nowrap;
  min-height: 40px;
  transition: border-color .15s, color .15s, background .15s;
}
.header-manage-btn,
.header-collapse-btn { color: var(--brand-text); background: var(--brand-tint); border-color: transparent; }
.header-help-btn:hover,
.header-manage-btn:hover,
.header-collapse-btn:hover,
.theme-toggle-btn:hover { border-color: var(--brand); color: var(--brand-text); }
.theme-toggle-btn {
  padding: 8px 11px;
  min-width: 40px;
  display: grid; place-items: center;
  font-size: 1rem;
}

/* ── Quick Presets ── */
.preset-card { padding-bottom: 10px; }
.preset-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-preset-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.quick-preset-btn:hover,
.quick-preset-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brand-tint);
}
.preset-combo-row {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-combo-chip {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}
.preset-combo-chip.chip-meta {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}
.modal-restore-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 5px 12px;
}
.modal-restore-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 0;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px 32px;
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-close-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-preset-list { margin-bottom: 20px; }
.modal-preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.modal-preset-row:last-child { border-bottom: none; }
.modal-preset-name {
  font-size: 0.85rem;
  font-weight: 500;
}
.built-in-tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface2);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.modal-delete-btn {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  color: #f87171;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  flex: 0 0 auto;
}
.modal-save-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.modal-save-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.modal-save-row {
  display: flex;
  gap: 8px;
}
.modal-save-row input[type="text"] {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 10px 12px;
}
.modal-save-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-save-btn {
  background: var(--accent2);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 18px;
  flex: 0 0 auto;
}

/* ── Tabs ── */
nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
  gap: 4px;
  padding: 7px max(12px, env(safe-area-inset-left)) 7px max(12px, env(safe-area-inset-right));
  position: sticky;
  top: 0;
  z-index: 90;
  scroll-snap-type: x proximity;
}
.nav-inner { display: contents; }
nav::-webkit-scrollbar { display: none; }

nav button {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-radius: var(--pill);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 8px 14px;
  white-space: nowrap;
  letter-spacing: 0.005em;
  transition: color 0.15s, background 0.15s;
  scroll-snap-align: center;
}
nav button:hover { color: var(--text); background: var(--surface2); }
nav button.active {
  color: #fff;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 3px 10px rgba(47,123,234,0.32);
}
:root[data-theme="light"] nav button.active,
.card nav button.active { color: #fff; }

/* ── Tab panels ── */
main { display: block; }
.tab-panel { display: none; padding: 14px; max-width: var(--maxw); margin: 0 auto; }
.tab-panel.active { display: block; animation: panelIn 0.28s ease both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.card h2 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.card h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Results grid ── */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.result-block {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.result-block.full-width {
  grid-column: 1 / -1;
}
.result-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.result-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.result-value.accent { color: var(--accent); }
.result-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* ── Fuel status ── */
.fuel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fuel-block {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px;
}
.fuel-block h3 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.fuel-block h3.gas { color: var(--gas); }
.fuel-block h3.propane { color: var(--propane); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--pill);
  margin-bottom: 6px;
  border: 1px solid transparent;
}
.status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-good { background: var(--good-tint); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.status-near { background: var(--near-tint); color: var(--near); border-color: color-mix(in srgb, var(--near) 30%, transparent); }
.status-over { background: var(--over-tint); color: var(--over); border-color: color-mix(in srgb, var(--over) 30%, transparent); }

.headroom-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  margin-top: 3px;
}
.headroom-row span:first-child { color: var(--text-muted); }
.headroom-pos { color: var(--good); font-weight: 600; }
.headroom-neg { color: var(--over); font-weight: 600; }

/* ── Elevation input ── */
.elev-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.elev-gps-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-bottom: 4px;
}
.elev-gps-btn {
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.35);
  border-radius: 8px;
  color: #60a5fa;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
}
.elev-gps-btn:hover { background: rgba(96,165,250,0.22); }
.elev-gps-status {
  font-size: 0.73rem;
  min-height: 1.4em;
  margin-top: 4px;
}
.gps-ok  { color: #86efac; }
.gps-error { color: #fca5a5; }
.elev-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.elev-custom-row input[type="number"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 10px;
  width: 110px;
  text-align: center;
  -moz-appearance: textfield;
}
.elev-custom-row input[type="number"]::-webkit-inner-spin-button,
.elev-custom-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.elev-custom-row input[type="number"]:focus { outline: none; border-color: var(--accent); }
.elev-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.derate-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.derate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.78rem;
}
.derate-row span:first-child { color: var(--text-muted); }
.derate-row span:last-child { font-weight: 600; }
.derate-pct { color: var(--accent) !important; font-size: 1rem !important; }
.derate-divider { border-top: 1px solid var(--border); margin: 6px 0; }
.derate-note {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}
.preset-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 9px;
  transition: border-color 0.15s, color 0.15s;
}
.preset-btn:hover { border-color: var(--accent); color: var(--accent); }
.preset-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(245,158,11,0.12); }
.elev-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.batt-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.batt-strategy-note {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.batt-solar-info {
  background: rgba(96,165,250,0.08);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 8px;
  color: #93c5fd;
  font-size: 0.73rem;
  line-height: 1.5;
  margin-top: 10px;
  padding: 8px 12px;
}

.ac-divider {
  border-top: 1px dashed var(--border);
  margin: 6px 0;
}

/* ── Load status banner ── */
.load-banner {
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 10px 14px;
  text-align: center;
  letter-spacing: 0.02em;
}
.load-banner-near {
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.5);
  color: #fb923c;
}
.load-banner-over {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.5);
  color: #f87171;
}

/* ── Collapsible cards ── */
.collapsible-heading {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.collapsible-heading:hover { opacity: 0.85; }
.collapsible-heading > span:first-child { flex: 1; }
.collapse-icon {
  font-size: 1rem;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.section-watts {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--brand-tint);
  border-radius: 10px;
  padding: 2px 8px;
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}

/* ── Toggle switches ── */
.appliance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.appliance-row:last-child { border-bottom: none; }

.appliance-info { flex: 1; min-width: 0; margin-right: 10px; }
.appliance-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appliance-watts {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.toggle-wrap { flex: 0 0 auto; }

.toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.2s;
}
.slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .slider { background: var(--accent2); }
.toggle input:checked + .slider::before { transform: translateX(22px); }
.toggle input:disabled + .slider { opacity: 0.4; cursor: not-allowed; }

/* ── Battery selector ── */
.battery-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.battery-btn {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 4px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.battery-btn.active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-text);
}
.battery-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}
.battery-btn.active .battery-sub { color: var(--brand-text); opacity: 0.85; }

/* ── Strategy note ── */
.strategy-note {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 12px;
}
.strategy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.strategy-header h2 { margin-bottom: 0; }
.collapse-all-btn {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 8px;
  color: var(--brand-text);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 11px;
  white-space: nowrap;
}
.collapse-all-btn:hover { background: var(--brand-tint-2); }

.strategy-note h2 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-text);
  margin-bottom: 8px;
}
.strategy-note p { font-size: 0.78rem; margin-bottom: 4px; }
.strategy-note strong { color: var(--accent); }

.warn-note {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: #fca5a5;
  margin-top: 8px;
}

/* ── Fuel Tracker ── */
.tracker-start-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.tracker-start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 12px;
  gap: 4px;
  transition: opacity 0.15s;
  width: 100%;
}
.tracker-start-btn:hover { opacity: 0.88; }
.tracker-card-start-btn { padding: 10px 12px; margin-top: 8px; }
.tracker-btn-sub {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.8;
}
.tracker-gas-btn  { background: rgba(96,165,250,0.18); border: 1px solid rgba(96,165,250,0.4); color: #93c5fd; }
.tracker-prop-btn { background: rgba(167,139,250,0.18); border: 1px solid rgba(167,139,250,0.4); color: #c4b5fd; }
.tracker-both-btn { background: var(--brand-tint-2); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-text); }

.tracker-advanced {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tracker-advanced summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 12px;
  user-select: none;
  list-style: none;
}
.tracker-advanced summary::-webkit-details-marker { display: none; }
.tracker-advanced summary::before { content: '▸ '; }
.tracker-advanced[open] summary::before { content: '▾ '; }
.tracker-advanced-body { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.tracker-adv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.78rem;
}
.tracker-adv-row label { color: var(--text-muted); flex: 0 0 auto; }
.tracker-adv-row input[type="number"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 8px;
  width: 80px;
  text-align: center;
  -moz-appearance: textfield;
}
.tracker-adv-row input::-webkit-inner-spin-button,
.tracker-adv-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.tracker-adv-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
}
.tracker-adv-btn:hover { border-color: var(--accent); color: var(--accent); }

.tracker-load-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.tracker-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .tracker-cards-grid { grid-template-columns: 1fr; }
}
.tracker-fuel-card { padding: 12px; }
.tracker-fuel-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.gas-title  { color: #60a5fa; }
.prop-title { color: #a78bfa; }

.tracker-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  gap: 4px;
}
.tracker-stat-row:last-of-type { border-bottom: none; }
.tracker-label { color: var(--text-muted); flex: 0 0 auto; }
.tracker-val   { font-weight: 600; text-align: right; }
.tracker-remain { color: var(--accent2); }
.tracker-warn   { color: var(--warn) !important; }
.tracker-idle   { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.tracker-stop-btn {
  margin-top: 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  color: #f87171;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 10px;
  width: 100%;
}

.fuel-rate-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fuel-rate-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.fuel-rate-val   { font-size: 0.82rem; font-weight: 600; }

/* ── Welcome banner ── */
.welcome-banner {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.welcome-body { flex: 1; }
.welcome-title { font-size: 0.9rem; font-weight: 700; color: var(--brand-text); margin-bottom: 4px; }
.welcome-sub { font-size: 0.73rem; color: var(--text-muted); line-height: 1.5; }
.welcome-dismiss {
  flex: 0 0 auto;
  background: var(--brand-tint-2);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 8px;
  color: var(--brand-text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
}

/* ── Quick Start card ── */
.qs-card { padding: 14px; }
.qs-collapsed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.qs-collapsed-bar span { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.qs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qs-header h2 { margin-bottom: 0; }
.qs-toggle-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
}
.qs-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
.qs-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.qs-list li { font-size: 0.82rem; line-height: 1.4; }
.qs-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* ── What am I looking at ── */
.what-card { padding: 0; overflow: hidden; }
.what-summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px 14px;
  list-style: none;
  user-select: none;
}
.what-summary::-webkit-details-marker { display: none; }
.what-summary::before { content: '▸ '; }
details[open] .what-summary::before { content: '▾ '; }
.what-list {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.what-list dt { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-top: 6px; }
.what-list dd { font-size: 0.73rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ── Recommended Workflows ── */
.wf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 400px) { .wf-grid { grid-template-columns: 1fr; } }
.wf-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}
.wf-icon { font-size: 1.3rem; margin-bottom: 4px; }
.wf-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 6px; }
.wf-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}
.wf-row:last-of-type { border-bottom: none; }
.wf-row span:first-child { color: var(--text-muted); }
.wf-row span:last-child { font-weight: 600; }
.wf-note { font-size: 0.67rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* ── Preset description ── */
.preset-desc {
  font-size: 0.73rem;
  color: var(--text-muted);
  width: 100%;
  margin-bottom: 6px;
  line-height: 1.5;
  flex: 0 0 100%;
}
.preset-combo-row { flex-wrap: wrap; }

/* ── Help modal ── */
.help-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.help-list dt {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 12px;
  margin-bottom: 3px;
}
.help-list dd {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Fuel Tracker Tab ── */
.ft-sub { font-size: 0.73rem; color: var(--text-muted); line-height: 1.5; }
.ft-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.ft-config-item { display: flex; flex-direction: column; gap: 6px; }
.ft-config-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ft-toggle-pair { display: flex; gap: 6px; }
.ft-opt-btn {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 4px;
  transition: all 0.15s;
}
.ft-opt-btn.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-text); }
.ft-active-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
}
.ft-active-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ft-active-value { font-size: 1rem; font-weight: 700; }
.ft-src-propane { color: #c4b5fd; }
.ft-src-gas     { color: #93c5fd; }
.ft-src-none    { color: var(--warn); }
.ft-no-fuel { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3); border-radius: 8px; color: #fb923c; font-size: 0.75rem; margin-top: 8px; padding: 8px 12px; }

.ft-load-card { text-align: center; }
.ft-big-stat { font-size: 2rem; font-weight: 700; color: var(--accent); }
.ft-calc-nudge { font-size: 0.73rem; color: var(--text-muted); margin-top: 6px; }
.ft-calc-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.ft-load-changed { background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.3); border-radius: 6px; color: #93c5fd; font-size: 0.72rem; margin-top: 10px; padding: 7px 10px; }

.ft-runtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 400px) { .ft-runtime-grid { grid-template-columns: 1fr; } }
.ft-runtime-card { padding: 12px; }
.ft-active-card { border-color: var(--accent); }
.ft-fuel-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.ft-runtime-val { font-size: 1.6rem; font-weight: 700; margin-bottom: 2px; }
.ft-runtime-sub { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 8px; }
.ft-empty-row { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.ft-empty-row:last-child { border-bottom: none; }
.ft-empty-row span:first-child { color: var(--text-muted); }
.ft-empty-row span:last-child { font-weight: 600; }
.ft-combined-row span:last-child { color: var(--accent); }

.ft-green  { color: var(--good); }
.ft-yellow { color: var(--near); }
.ft-red    { color: var(--over); }

.ft-combined-val { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }

.ft-conf-card { border-width: 2px; }
.ft-conf-high { border-color: var(--good); }
.ft-conf-mid  { border-color: var(--near); }
.ft-conf-low  { border-color: var(--over); }
.ft-conf-badge { font-size: 1.1rem; font-weight: 700; margin: 8px 0 4px; }
.ft-conf-desc  { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px; }
.ft-conf-detail { border-top: 1px solid var(--border); padding-top: 10px; }

.ft-track-status {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.ft-track-prop { background: rgba(196,181,253,0.15); color: #c4b5fd; }
.ft-track-gas  { background: rgba(147,197,253,0.15); color: #93c5fd; }
.ft-track-off  { background: var(--surface2); color: var(--text-muted); font-weight: 400; }

.ft-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 480px) { .ft-start-grid { grid-template-columns: 1fr; } }
.ft-start-col { display: flex; flex-direction: column; gap: 6px; }
.ft-start-full { width: 100%; max-width: none; }
.ft-start-warn {
  font-size: 0.68rem;
  color: #fb923c;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1.5;
}

.ft-tracking-active { display: flex; flex-direction: column; gap: 0; }
.ft-tracking-btns { display: flex; gap: 8px; margin-top: 12px; }
.ft-reset-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 14px;
}
.ft-reset-btn:hover { color: var(--accent); border-color: var(--accent); }

.ft-active-badge {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(16,185,129,0.2); color: var(--good);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.ft-reserve-badge {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(148,163,184,0.15); color: var(--text-muted);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.ft-reserve-card { opacity: 0.85; }
.ft-reserve-val { color: var(--text-muted) !important; font-size: 1.4rem !important; }
.ft-reserve-note { font-size: 0.68rem; color: var(--text-muted); font-style: italic; margin-top: 6px; line-height: 1.4; }

.ft-conf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 420px) { .ft-conf-grid { grid-template-columns: 1fr; } }
.ft-conf-col { display: flex; flex-direction: column; gap: 2px; }
.ft-conf-col-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px;
}

.ft-combo-card { padding: 0; overflow: hidden; }
.ft-combo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px 14px;
}
.ft-combo-icon { font-size: 1.1rem; }
.ft-combo-both { background: rgba(196,181,253,0.1); color: #c4b5fd; }
.ft-combo-prop { background: rgba(196,181,253,0.1); color: #c4b5fd; }
.ft-combo-gas  { background: rgba(147,197,253,0.1); color: #93c5fd; }
.ft-combo-none { background: rgba(249,115,22,0.1);  color: #fb923c; }
.ft-combo-list {
  list-style: none;
  padding: 0 14px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ft-combo-list li {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ft-combo-list li strong { color: var(--text); }
.ft-combo-steps-label {
  color: var(--text) !important;
  font-weight: 600 !important;
  margin-top: 6px;
  font-size: 0.75rem !important;
}
.ft-combo-step {
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--text) !important;
  font-size: 0.75rem !important;
}

/* ── Real-World Tests ── */
.tests-table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  min-width: 600px;
}
th {
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 8px;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
td input[type="text"], td textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 4px 6px;
  width: 100%;
}
td textarea { resize: vertical; min-height: 36px; }
.check-cell { text-align: center; }
.check-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent2);
  cursor: pointer;
}

.add-row-btn {
  background: var(--accent2);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 18px;
  margin-top: 12px;
}
.del-btn {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  color: #f87171;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 3px 8px;
}

/* ── Fuel Burn ── */
.fuel-table-wrap { overflow-x: auto; margin-top: 8px; }
.fuel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  min-width: 400px;
}
.fuel-table th {
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.fuel-table th:first-child { text-align: left; }
.fuel-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.fuel-table td:first-child { text-align: left; font-weight: 600; }
.fuel-table tr.highlight-row td {
  background: var(--brand-tint);
  color: var(--brand-text);
  font-weight: 700;
}
.fuel-table th.gas-col { color: var(--gas); }
.fuel-table th.prop-col { color: var(--propane); }

.current-load-box {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 0.82rem;
}
.current-load-box strong { color: var(--accent); }

/* ── Ambient & A/C ── */
.duty-table-wrap { overflow-x: auto; margin-top: 8px; }
.duty-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
  min-width: 380px;
}
.duty-table th {
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.65rem;
  padding: 7px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.duty-table th:first-child { text-align: left; }
.duty-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.duty-table td:first-child { text-align: left; font-weight: 600; }
.duty-cell-low { color: var(--good); }
.duty-cell-mid { color: var(--near); }
.duty-cell-high { color: var(--warn); }
.duty-cell-max { color: var(--over); font-weight: 700; }

.guidance-list { list-style: none; padding: 0; }
.guidance-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  display: flex;
  gap: 8px;
}
.guidance-list li:last-child { border-bottom: none; }
.guidance-list li span:first-child {
  flex: 0 0 auto;
  font-size: 1rem;
}

/* ── About ── */
.about-section { margin-bottom: 16px; }
.about-section h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  gap: 8px;
}
.spec-row:last-child { border-bottom: none; }
.spec-row span:first-child { color: var(--text-muted); flex: 0 0 auto; }
.spec-row span:last-child { text-align: right; }

.disclaimer {
  background: rgba(148,163,184,0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Version badge ── */
.version {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 12px;
  opacity: 0.6;
}

/* ── Weather Advisory ── */
.wi-card { }
.wi-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.wi-row:last-of-type { border-bottom: none; }
.wi-label { font-size: 0.78rem; color: var(--text-muted); }
.wi-val { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.wi-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.wi-minimal  { background: rgba(74,222,128,0.15); color: #4ade80; }
.wi-moderate { background: rgba(250,204,21,0.15);  color: #fbbf24; }
.wi-elevated { background: rgba(251,146,60,0.15);  color: #fb923c; }
.wi-high     { background: rgba(239,68,68,0.15);   color: #f87171; }
.wi-advisory-row { font-size: 0.8rem; color: var(--text); padding: 8px 0 4px; }
.wi-fetched { font-size: 0.7rem; color: var(--text-muted); margin-top: 10px; }
.wi-link-btn { background: none; border: none; color: var(--accent); font-size: 0.7rem; cursor: pointer; padding: 0; text-decoration: underline; }
.wi-action-btn { width: 100%; margin-top: 10px; padding: 8px; background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.3); border-radius: 8px; color: #93c5fd; font-size: 0.75rem; cursor: pointer; }
.wi-disclaimer { font-size: 0.68rem; color: var(--text-muted); margin-top: 10px; font-style: italic; }
.wi-loading { font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 12px 0; }
.wi-error { font-size: 0.78rem; color: #f87171; margin-bottom: 10px; }
.wi-intro { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 12px; }
.wi-setup { display: flex; flex-direction: column; gap: 10px; }
.wi-gps-btn { padding: 10px; background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.3); border-radius: 8px; color: #93c5fd; font-size: 0.82rem; cursor: pointer; width: 100%; }
.wi-zip-row { display: flex; gap: 8px; }
.wi-zip-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 0.85rem; min-width: 0; }
.wi-zip-btn { padding: 8px 14px; background: var(--accent); border: none; border-radius: 8px; color: #fff; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.wi-conf-row { margin-top: 6px; }

/* ── 30A Shore Power ── */
.shore-intro { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }
.shore-intro strong { color: var(--text); }

.shore-limit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shore-limit { background: var(--surface2); border-radius: 8px; padding: 10px; text-align: center; }
.shore-limit-label { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; line-height: 1.3; }
.shore-limit-val { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.shore-limit-val.accent { color: var(--accent); }

.shore-hero { text-align: center; border-width: 2px; }
.shore-hero-good { border-color: var(--good); }
.shore-hero-near { border-color: var(--near); }
.shore-hero-over { border-color: var(--over); }
.shore-status-badge { display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 10px; }
.shore-amps-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.shore-amps { font-size: 3rem; font-weight: 800; line-height: 1.1; }
.shore-amps-good { color: var(--good); }
.shore-amps-near { color: var(--near); }
.shore-amps-over { color: var(--over); }
.shore-watts { font-size: 0.95rem; color: var(--text-muted); margin-top: 2px; }

.shore-bar { position: relative; height: 12px; background: var(--surface2); border-radius: 6px; margin-top: 18px; }
.shore-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px; transition: width 0.25s ease; }
.shore-bar-good { background: var(--good); }
.shore-bar-near { background: var(--near); }
.shore-bar-over { background: var(--over); }
.shore-bar-marker { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--text); opacity: 0.65; }
.shore-bar-legend { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-muted); margin-top: 8px; }
.shore-bar-rec { color: var(--text); font-weight: 600; }

.shore-rec { display: flex; gap: 12px; align-items: flex-start; border-color: var(--near); background: rgba(249,115,22,0.07); }
.shore-rec-icon { font-size: 1.4rem; line-height: 1.2; }
.shore-rec-body { flex: 1; }
.shore-rec-text { font-size: 0.85rem; font-weight: 700; color: var(--near); margin-bottom: 4px; line-height: 1.4; }
.shore-rec-sub { font-size: 0.73rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.shore-rec-btn { background: var(--brand); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 8px 14px; }
.shore-rec-btn:hover { opacity: 0.9; }

/* ============================================================================
   Phase 1 — new components & polish (appended)
   ========================================================================== */

/* Accessibility: visible keyboard focus everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}
button { font-family: inherit; }
button:active { transform: translateY(0.5px); }

/* Generic input focus ring */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: var(--ring);
}

/* ── Home hero (landing surface on the default tab) ── */
.gpa-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  margin-bottom: 14px;
  background:
    radial-gradient(600px 240px at 100% -30%, var(--brand-tint-2) 0%, transparent 70%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface2) 100%);
  box-shadow: var(--shadow-1);
}
.gpa-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand-text);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  padding: 4px 10px; border-radius: var(--pill);
  margin-bottom: 12px;
}
.gpa-hero-badge svg { width: 13px; height: 13px; }
.gpa-hero h2.gpa-hero-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text); text-transform: none; margin-bottom: 8px;
}
.gpa-hero-sub {
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; max-width: 46ch;
}
.gpa-hero-metrics {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.gpa-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  background: color-mix(in srgb, var(--surface3) 60%, transparent);
  border: 1px solid var(--border);
  padding: 6px 11px; border-radius: var(--pill);
}
.gpa-hero-chip b { color: var(--text); font-weight: 750; }

/* ── Verdict hero card (results, answer-first) ── */
.verdict-card {
  border-width: 1px;
  border-left: 4px solid var(--border);
  position: relative;
  transition: border-color 0.2s;
}
.verdict-card.v-good { border-left-color: var(--good); }
.verdict-card.v-near { border-left-color: var(--near); }
.verdict-card.v-over { border-left-color: var(--over); }

.verdict-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.verdict-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 6px 14px; border-radius: var(--pill);
  border: 1px solid transparent;
}
.verdict-pill.v-good { background: var(--good-tint); color: var(--good); border-color: color-mix(in srgb, var(--good) 32%, transparent); }
.verdict-pill.v-near { background: var(--near-tint); color: var(--near); border-color: color-mix(in srgb, var(--near) 32%, transparent); }
.verdict-pill.v-over { background: var(--over-tint); color: var(--over); border-color: color-mix(in srgb, var(--over) 32%, transparent); }
.verdict-fuel { font-size: 0.68rem; font-weight: 650; color: var(--text-faint); text-align: right; line-height: 1.3; }

.verdict-headline {
  font-size: 1.14rem; font-weight: 750; letter-spacing: -0.01em; color: var(--text);
  line-height: 1.25; margin-bottom: 4px;
}
.verdict-why {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px;
}
.verdict-why strong { color: var(--text); font-weight: 650; }
.verdict-why .vw-tip { color: var(--brand-text); font-weight: 600; }

.verdict-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.vm {
  background: var(--surface2); border-radius: var(--radius-sm); padding: 11px 10px; text-align: center;
}
.vm-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; line-height: 1.25; }
.vm-val { font-size: 1.14rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.vm-val.v-good { color: var(--good); }
.vm-val.v-near { color: var(--near); }
.vm-val.v-over { color: var(--over); }
.vm-sub { font-size: 0.58rem; color: var(--text-faint); margin-top: 2px; }

.verdict-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface2); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--pill);
}
.vchip b { color: var(--text); font-weight: 700; }
.vchip.v-good b { color: var(--good); }
.vchip.v-near b { color: var(--near); }
.vchip.v-over b { color: var(--over); }

/* Toggle slider — smoother */
.slider { transition: background 0.2s; }
.slider::before { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

/* Modal polish + light-theme legibility */
.modal-box { box-shadow: var(--shadow-2); }
:root[data-theme="light"] .modal-overlay { background: rgba(16,26,40,0.42); }

/* Add-row / primary action buttons: ensure readable label on brand fill */
.add-row-btn, .modal-save-btn, .wi-zip-btn { color: #fff; }
.add-row-btn { box-shadow: 0 3px 10px rgba(47,123,234,0.28); }

/* Desktop niceties */
@media (min-width: 720px) {
  .gpa-hero { padding: 28px 26px; }
  .gpa-hero h2.gpa-hero-title { font-size: 1.8rem; }
}

/* ── Header responsive: on narrow screens show mark + full wordmark ── */
@media (max-width: 600px) {
  .header-main { flex-direction: column; align-items: stretch; gap: 10px; }
  header h1 { font-size: 1.05rem; white-space: normal; }
  header p { display: none; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .header-btn-group { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .header-help-btn, .header-manage-btn, .header-collapse-btn { padding: 8px 11px; font-size: 0.72rem; }
}

/* ── Generator selection (Phase 2) ── */
.gen-card { border-left: 4px solid var(--brand); }
.gen-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gen-card-info { min-width: 0; }
.gen-card-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.gen-card-name { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.15; }
.gen-card-kind { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }
.gen-custom-tag { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-tint); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.gen-change-btn {
  flex: 0 0 auto; background: var(--brand); color: #fff; border: none;
  border-radius: 10px; font-size: 0.76rem; font-weight: 700; padding: 8px 15px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(47,123,234,0.28); min-height: 40px;
}
.gen-change-btn:hover { background: var(--brand-strong); }
.gen-card-badges { display: flex; gap: 6px; margin-top: 12px; }
.gen-fuel-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: var(--pill); border: 1px solid transparent; }
.gen-fuel-gas  { color: var(--gas);     background: color-mix(in srgb, var(--gas) 14%, transparent);     border-color: color-mix(in srgb, var(--gas) 30%, transparent); }
.gen-fuel-prop { color: var(--propane); background: color-mix(in srgb, var(--propane) 16%, transparent); border-color: color-mix(in srgb, var(--propane) 32%, transparent); }
.gen-card-ratings { font-size: 0.76rem; color: var(--text); margin-top: 10px; font-weight: 600; }

/* Generator modal */
.gen-modal-body { display: flex; flex-direction: column; gap: 8px; }
.gen-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; cursor: pointer; transition: border-color .15s, background .15s;
}
.gen-row:hover { border-color: var(--border-strong); }
.gen-row-active { border-color: var(--brand); background: var(--brand-tint); }
.gen-row-main { min-width: 0; }
.gen-row-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.gen-row-check { color: var(--brand-text); }
.gen-row-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.gen-row-del {
  flex: 0 0 auto; background: var(--over-tint); border: 1px solid color-mix(in srgb, var(--over) 30%, transparent);
  color: var(--over); border-radius: 8px; font-size: 0.7rem; font-weight: 600; padding: 5px 10px; cursor: pointer;
}
.gen-add-btn {
  margin-top: 4px; background: var(--brand-tint); border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand-text); border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700;
  padding: 11px; cursor: pointer; width: 100%;
}
.gen-add-btn:hover { background: var(--brand-tint-2); }
.gen-modal-note { font-size: 0.68rem; color: var(--text-faint); line-height: 1.5; margin-top: 4px; }

/* Custom generator form */
.gen-form { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-top: 6px; }
.gen-form-title { font-size: 0.85rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.gen-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gen-form-row span { font-size: 0.76rem; color: var(--text-muted); flex: 1 1 auto; }
.gen-form-row input {
  flex: 0 0 120px; width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.85rem; font-weight: 600; padding: 7px 9px; text-align: right;
}
.gen-form-row input[type="text"] { text-align: left; }
.gen-form-check { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text); margin: 10px 0; cursor: pointer; font-weight: 600; }
.gen-form-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.gen-form-btns { display: flex; gap: 8px; margin-top: 12px; }
.gen-form-save { flex: 1; background: var(--brand); color: #fff; border: none; border-radius: 9px; font-size: 0.82rem; font-weight: 700; padding: 10px; cursor: pointer; }
.gen-form-save:hover { background: var(--brand-strong); }
.gen-form-cancel { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border); border-radius: 9px; font-size: 0.82rem; font-weight: 600; padding: 10px 16px; cursor: pointer; }
.gen-form-err { color: var(--over); font-size: 0.74rem; margin-top: 8px; }

/* ── Generator search + confirm (Phase 3) ── */
.gen-search-wrap { margin-bottom: 10px; }
.gen-search {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem;
  padding: 11px 13px;
}
.gen-search::placeholder { color: var(--text-faint); }
.gen-group-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  color: var(--text-muted); margin: 12px 2px 6px;
}
.gen-group-label:first-child { margin-top: 2px; }
.gen-row-arrow { flex: 0 0 auto; color: var(--text-faint); font-size: 1.3rem; line-height: 1; }
.gen-search-hint { font-size: 0.72rem; color: var(--text-faint); line-height: 1.5; margin: 12px 2px 2px; }

.gen-back-btn {
  background: none; border: none; color: var(--brand-text); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; padding: 4px 2px; margin-bottom: 8px;
}
.gen-confirm { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.gen-confirm-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.gen-confirm-kind { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.gen-spec-table { display: flex; flex-direction: column; }
.gen-spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted);
}
.gen-spec-row:last-child { border-bottom: none; }
.gen-spec-row b { color: var(--text); font-weight: 750; font-size: 0.92rem; }
.gen-confirm-note { font-size: 0.72rem; color: var(--text-faint); line-height: 1.5; margin: 12px 0 14px; }
.gen-confirm-btns { display: flex; gap: 8px; }
.gen-confirm-btns .gen-form-save { flex: 1; }
.gen-confirm-del { width: 100%; margin-top: 10px; }

/* ── Verdict refinements (V1 polish): confidence, action, provenance ── */
.verdict-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.verdict-conf {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: var(--pill); white-space: nowrap;
  border: 1px solid transparent;
}
.verdict-conf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.conf-high { color: var(--good); background: var(--good-tint); border-color: color-mix(in srgb, var(--good) 26%, transparent); }
.conf-mod  { color: var(--near); background: var(--near-tint); border-color: color-mix(in srgb, var(--near) 26%, transparent); }

/* Recommended action callout */
.verdict-action {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: var(--radius-sm); padding: 11px 13px; margin: 0 0 14px;
}
.verdict-action-icon { color: var(--brand-text); font-weight: 800; font-size: 1rem; line-height: 1.4; flex: 0 0 auto; }
.verdict-action-body { flex: 1; min-width: 0; }
.verdict-action-text { font-size: 0.85rem; line-height: 1.5; color: var(--text); }
.verdict-action-text strong { font-weight: 700; }
.verdict-action-btn {
  margin-top: 9px; display: inline-flex; align-items: center;
  background: var(--brand); color: #fff; border: none; border-radius: 9px;
  font-size: 0.78rem; font-weight: 700; padding: 8px 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(47,123,234,0.28);
}
.verdict-action-btn:hover { background: var(--brand-strong); }

/* What this is based on */
.verdict-basis { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.verdict-basis > summary {
  cursor: pointer; list-style: none; font-size: 0.72rem; font-weight: 650;
  color: var(--text-muted); user-select: none; display: inline-flex; align-items: center; gap: 6px;
}
.verdict-basis > summary::-webkit-details-marker { display: none; }
.verdict-basis > summary::before { content: '▸'; font-size: 0.7rem; transition: transform .15s; }
.verdict-basis[open] > summary::before { content: '▾'; }
.verdict-basis > summary:hover { color: var(--text); }
.verdict-basis-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.basis-row { display: flex; align-items: flex-start; gap: 9px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
.basis-row strong { color: var(--text); font-weight: 650; }
.basis-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; margin-top: 3px; }
.basis-spec  { background: var(--good); }         /* manufacturer-published spec */
.basis-input { background: var(--brand); }        /* user-entered value */
.basis-est   { background: var(--near); }          /* calculated estimate */
.basis-obs   { background: var(--text-faint); }    /* observed real-world (to be logged) */

/* ── Landing status strip (answer-first on the default tab) ── */
.land-status { border-left: 4px solid var(--border); }
.land-status.v-good { border-left-color: var(--good); }
.land-status.v-near { border-left-color: var(--near); }
.land-status.v-over { border-left-color: var(--over); }
.land-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.land-status-link {
  background: none; border: none; color: var(--brand-text); cursor: pointer;
  font-size: 0.78rem; font-weight: 700; padding: 4px 2px; white-space: nowrap;
}
.land-status-link:hover { text-decoration: underline; }
.land-status-detail { font-size: 0.82rem; color: var(--text-muted); margin-top: 9px; }
.land-status-detail strong { color: var(--text); font-weight: 700; }

.gen-card-source { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; color: var(--text-faint); margin-top: 9px; }
.gen-card-source .basis-dot { margin-top: 0; }

/* ── Real-world evidence / Confirmed tier (Option A) ── */
.conf-confirmed { color: var(--good); background: var(--good-tint); border-color: color-mix(in srgb, var(--good) 40%, transparent); }

.verdict-evidence { margin-top: 14px; }
.verdict-evidence.ev-confirmed {
  display: flex; align-items: center; gap: 9px;
  background: var(--good-tint); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: 0.8rem; color: var(--text); line-height: 1.45;
}
.verdict-evidence.ev-confirmed .ev-icon {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--good); color: #fff; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 800;
}
.verdict-evidence.ev-confirmed strong { font-weight: 700; }
.verdict-evidence.ev-log {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.ev-lead { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 9px; }
.ev-lead strong { color: var(--text); }
.ev-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.ev-btn {
  background: var(--surface3); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--pill); font-size: 0.74rem; font-weight: 650; padding: 6px 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ev-btn:hover { border-color: var(--good); color: var(--good); }

/* Landing strip confirmed marker */
.land-status-tested { color: var(--good); font-weight: 700; }

/* ── Inline SVG icon system (Phase B) ── */
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: 0 0 auto; }
.verdict-pill .ic { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
.vchip .ic, .gen-fuel-badge .ic, .gpa-hero-chip .ic, .gen-card-ratings .ic { width: 1em; height: 1em; }
/* Nav icons */
nav button .ic { width: 15px; height: 15px; vertical-align: -0.18em; margin-right: 6px; opacity: 0.9; }
nav button.active .ic { opacity: 1; }
/* Evidence check uses a filled circle badge, keep emoji-free */

/* ── First-run onboarding card (Phase B) ── */
.onboard-card { border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); background: var(--brand-tint); }
.onboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.onboard-title { font-size: 0.9rem; font-weight: 750; color: var(--text); }
.onboard-dismiss {
  background: transparent; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand-text); border-radius: 8px; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; cursor: pointer;
}
.onboard-dismiss:hover { background: var(--brand-tint-2); }
.onboard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.onboard-steps li { display: flex; align-items: flex-start; gap: 11px; }
.onboard-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 800;
  display: grid; place-items: center; margin-top: 1px;
}
.onboard-steps li div { display: flex; flex-direction: column; }
.onboard-steps strong { font-size: 0.85rem; font-weight: 650; color: var(--text); }
.onboard-steps span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }

/* Nav icon spacing polish */
nav button { display: inline-flex; align-items: center; }

.onboard-sub { font-size: 0.72rem; color: var(--text-muted); margin: -4px 0 12px; line-height: 1.45; }

/* ── RC: default-generator trust cues ── */
.gen-card-example { background: linear-gradient(180deg, var(--brand-tint) 0%, transparent 60%); }
.gen-card-hint {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 11px;
  font-size: 0.72rem; line-height: 1.45; color: var(--brand-text);
  border-top: 1px solid var(--border); padding-top: 10px;
}
.gen-card-hint .ic { margin-top: 1px; }
.verdict-example {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand-text); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px;
  font-size: 0.74rem; line-height: 1.45; cursor: pointer;
}
.verdict-example:hover { background: var(--brand-tint-2); }
.verdict-example .ic { margin-top: 1px; flex: 0 0 auto; }
.verdict-example strong { font-weight: 700; }

/* ── RC: icon alignment for migrated spots ── */
.tracker-btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ft-conf-badge .ic { width: 1em; height: 1em; vertical-align: -0.14em; }
.gen-spec-row .ic, .derate-row .ic, .fuel-block h3 .ic, .ft-src-propane .ic, .ft-src-gas .ic, .ft-src-none .ic,
.ft-fuel-heading .ic, .ft-track-status .ic, .ft-no-fuel .ic, .ft-reserve-note .ic, .ft-start-warn .ic,
.shore-status-badge .ic, .wi-gps-btn .ic, .wi-action-btn .ic, .wi-error .ic,
.battery-btn .ic, .warn-note .ic, .elev-gps-btn .ic, .tracker-stop-btn .ic, .ft-reset-btn .ic,
.load-banner .ic, .current-load-box .ic { vertical-align: -0.15em; }
.guidance-list li span:first-child .ic { width: 1em; height: 1em; vertical-align: -0.12em; }
.ft-combo-icon .ic { width: 1.15rem; height: 1.15rem; }
.wf-icon .ic { width: 1.35rem; height: 1.35rem; }
.shore-rec-icon .ic { width: 1.4rem; height: 1.4rem; }

/* ── Privacy screen link ── */
.privacy-policy-link { color: var(--brand-text); font-weight: 650; text-decoration: none; }
.privacy-policy-link:hover { text-decoration: underline; }

/* ── About page: Privacy / Support / Contact links ── */
.about-links { text-align: center; font-size: 0.75rem; color: var(--text-faint); padding: 12px 12px 0; line-height: 1.7; }
.about-links a { color: var(--brand-text); text-decoration: none; font-weight: 600; }
.about-links a:hover { text-decoration: underline; }