:root {
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f4;
  --bg-tertiary:  #efefed;
  --text-primary:   #1a1a18;
  --text-secondary: #5f5e5a;
  --text-tertiary:  #9a9893;
  --border:    rgba(0,0,0,0.12);
  --border-md: rgba(0,0,0,0.20);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --purple-50:  #EEEDFE; --purple-200: #AFA9EC; --purple-600: #534AB7; --purple-800: #3C3489;
  --teal-50:    #E1F5EE; --teal-200:   #5DCAA5; --teal-600:   #0F6E56; --teal-800:   #085041;
  --amber-50:   #FAEEDA; --amber-200:  #FAC775; --amber-400:  #EF9F27; --amber-600:  #BA7517; --amber-800: #854F0B;
  --red-50:     #FCEBEB; --red-400:    #E24B4A; --red-600:    #A32D2D; --red-800:    #791F1F;
  --green-50:   #EAF3DE; --green-400:  #639922; --green-600:  #3B6D11; --green-800:  #27500A;
  --gray-100:   #D3D1C7; --gray-400:   #888780; --gray-600:   #5F5E5A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:   #1c1c1a;
    --bg-secondary: #252522;
    --bg-tertiary:  #2e2e2b;
    --text-primary:   #f0ede8;
    --text-secondary: #a8a59f;
    --text-tertiary:  #6e6c67;
    --border:    rgba(255,255,255,0.10);
    --border-md: rgba(255,255,255,0.18);
    --purple-50:  #26215C; --purple-200: #534AB7; --purple-600: #AFA9EC; --purple-800: #CECBF6;
    --amber-50:   #412402; --amber-600:  #FAC775; --amber-800:  #FAEEDA;
    --red-50:     #501313; --red-600:    #F09595; --red-800:    #FCEBEB;
    --green-50:   #173404; --green-400:  #97C459; --green-600:  #C0DD97; --green-800:  #EAF3DE;
  }
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 2rem 1rem;
}

.page-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.company-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: .4rem;
}
.page-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: .4rem;
}
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-400);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Metric cards ────────────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
}
@media(max-width:580px){ .metrics { grid-template-columns: repeat(2,1fr); } }
.metric {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.metric-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; }
.metric-val   { font-size: 24px; font-weight: 500; color: var(--text-primary); }
.metric-val.green { color: var(--green-600); }
.metric-val.amber { color: var(--amber-600); }
.metric-val.red   { color: var(--red-600);   }

/* ── Card wrapper ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 0.5px solid var(--border);
  padding: 0 1.25rem;
  background: var(--bg-primary);
  overflow-x: auto;
}
.tab {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
  transition: color .15s;
}
.tab:hover  { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--purple-600); }

/* ── Tab content ─────────────────────────────────────────────────────── */
.tab-content        { display: none; padding: 1.25rem; }
.tab-content.active { display: block; }

/* Fleet tab spans edge-to-edge so the split fills the full card width */
#tab-fleet.tab-content { padding: 0; }

/* ── Section label ───────────────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: .75rem;
}

/* ── Toggle row ──────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.toggle-label { font-size: 13px; color: var(--text-secondary); }
.toggle-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border: 0.5px solid var(--border-md);
  border-radius: 20px;
  cursor: pointer;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all .15s;
}
.toggle-btn.on {
  background: var(--purple-50);
  color: var(--purple-800);
  border-color: var(--purple-200);
}
.toggle-hint { font-size: 12px; color: var(--text-tertiary); }

/* ── Fleet list ──────────────────────────────────────────────────────── */
.fleet-list { display: flex; flex-direction: column; gap: 8px; }

.vehicle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vehicle-row:hover    { border-color: var(--border-md); background: var(--bg-primary); }
.vehicle-row.selected { border: 1.5px solid var(--purple-600); background: var(--bg-primary); }

.veh-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.veh-info   { flex: 1; min-width: 0; }
.veh-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.veh-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-dtc  { background: var(--red-50);   color: var(--red-600);   }
.badge-pred { background: var(--amber-50); color: var(--amber-800); }

.risk-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.risk-critical { background: var(--red-50);   color: var(--red-600);   }
.risk-warning  { background: var(--amber-50); color: var(--amber-800); }
.risk-healthy  { background: var(--green-50); color: var(--green-600); }

/* ── Detail panel ────────────────────────────────────────────────────── */
.detail-panel {
  margin-top: 10px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.detail-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.detail-meta  { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

/* ── Alert rows ──────────────────────────────────────────────────────── */
.alert-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.alert-row.crit { background: var(--red-50);   border-left: 3px solid var(--red-400);   }
.alert-row.warn { background: var(--amber-50); border-left: 3px solid var(--amber-400); }
.alert-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.alert-row.crit .alert-icon { color: var(--red-600);   }
.alert-row.warn .alert-icon { color: var(--amber-800); }
.alert-text { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.alert-sub  { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }

/* ── Explainability ──────────────────────────────────────────────────── */
.factors-list {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.factor-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.factor-dot {
  font-size: 10px;
  color: var(--purple-600);
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Cost of inaction ────────────────────────────────────────────────── */
.cost-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.cost-box {
  border-radius: var(--radius-md);
  padding: .85rem;
}
.cost-green { background: var(--green-50);  border: 0.5px solid #b8d98b; }
.cost-red   { background: var(--red-50);    border: 0.5px solid #f0b3b3; }
.cost-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cost-green .cost-eyebrow { color: var(--green-600); }
.cost-red   .cost-eyebrow { color: var(--red-600);   }
.cost-amount {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cost-green .cost-amount { color: var(--green-600); }
.cost-red   .cost-amount { color: var(--red-600);   }
.cost-detail {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.cost-time {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cost-vs {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}
.cost-saving-banner {
  margin-top: 8px;
  background: var(--purple-50);
  border: 0.5px solid var(--purple-200);
  border-radius: var(--radius-md);
  padding: .6rem .9rem;
  font-size: 12px;
  color: var(--purple-800);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Component grid ──────────────────────────────────────────────────── */
.component-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: .5rem;
}
.comp-card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: .75rem;
}
.comp-name { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.comp-val  { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.bar-bg    { height: 5px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* ── 30-day forecast timeline ────────────────────────────────────────── */
.timeline-wrap { padding: .5rem 0; }
.tl-row {
  display: grid;
  grid-template-columns: 150px 1fr 60px;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
@media(max-width:500px){ .tl-row { grid-template-columns: 90px 1fr 50px; } }
.tl-label strong { font-weight: 500; color: var(--text-primary); display: block; }
.tl-label  { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.tl-track  { height: 8px; background: var(--bg-secondary); border-radius: 4px; position: relative; }
.tl-seg    { height: 8px; border-radius: 4px; position: absolute; opacity: .85; }
.tl-day    { font-size: 11px; color: var(--text-tertiary); text-align: right; }
.tl-axis {
  display: grid;
  grid-template-columns: 150px 1fr 60px;
  gap: 10px;
  margin-bottom: 8px;
}
@media(max-width:500px){ .tl-axis { grid-template-columns: 90px 1fr 50px; } }
.tl-axis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  padding-top: 4px;
}
.tl-legend { display: flex; gap: 16px; margin-top: 1.25rem; flex-wrap: wrap; }
.leg-item  { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.leg-dot   { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ── Map ─────────────────────────────────────────────────────────────── */
.map-svg {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  display: block;
}

/* ── ROI / Cost savings ──────────────────────────────────────────────── */
.savings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 1rem 0;
}
@media(max-width:460px){ .savings-grid { grid-template-columns: 1fr; } }
.sav-card {
  background: var(--green-50);
  border-radius: var(--radius-md);
  padding: .85rem;
  text-align: center;
}
.sav-val   { font-size: 20px; font-weight: 500; color: var(--green-600); }
.sav-label { font-size: 11px; color: var(--green-800); margin-top: 3px; }

.roi-vehicle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: .5rem;
}
.roi-vehicle-table th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 0 8px;
  border-bottom: 0.5px solid var(--border);
  text-align: left;
}
.roi-vehicle-table th:not(:first-child) { text-align: right; }
.roi-vehicle-table td {
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.roi-vehicle-table td:not(:first-child) { text-align: right; font-weight: 500; }
.saving-cell { color: var(--green-600) !important; }

.roi-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: .5rem;
}
.roi-summary-table td {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.roi-summary-table td:last-child { text-align: right; font-weight: 500; color: var(--text-primary); }
.roi-summary-table tr:last-child td {
  border-bottom: none;
  font-weight: 500;
  color: var(--green-600);
  font-size: 14px;
  padding-top: 12px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding: 10px 20px;
  border: 0.5px solid var(--purple-200);
  border-radius: 20px;
  background: var(--purple-50);
  color: var(--purple-800);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.cta-btn:hover { background: var(--purple-200); }

/* ── Master-detail split layout ──────────────────────────────────────── */
.fleet-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 520px;
}

.fleet-left {
  border-right: 0.5px solid var(--border);
  padding: 1rem;
  overflow-y: auto;
  max-height: 580px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fleet-right {
  padding: 1.1rem;
  overflow-y: auto;
  max-height: 580px;
  background: var(--bg-secondary);
}

/* Tighten vehicle rows for the narrower left column */
.fleet-left .vehicle-row {
  padding: .65rem .75rem;
}
.fleet-left .veh-icon {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.fleet-left .veh-name {
  font-size: 13px;
}
.fleet-left .veh-sub {
  font-size: 11px;
}
.fleet-left .risk-pill {
  font-size: 10px;
  padding: 3px 8px;
}

/* Toggle row in narrower left column */
.fleet-left .toggle-row {
  margin-bottom: .75rem;
  gap: 7px;
}
.fleet-left .toggle-hint {
  font-size: 11px;
}

/* Detail content directly inside .fleet-right */
.fleet-right .detail-header {
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 0.5px solid var(--border);
}

/* Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  gap: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 2rem;
}
.empty-state i    { font-size: 36px; opacity: .5; }
.empty-state p    { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.empty-hint       { font-size: 12px !important; font-weight: 400 !important; color: var(--text-tertiary) !important; }
.no-alerts-msg    { font-size: 13px; color: var(--text-secondary); margin-bottom: .75rem; }

/* Today marker on timeline ────────────────────────────────────────────── */
.tl-today-line {
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--purple-600);
  opacity: .5;
  border-radius: 1px;
  z-index: 2;
}

/* Responsive: stack split on small screens ────────────────────────────── */
@media(max-width:640px) {
  .fleet-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fleet-left {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
    max-height: 280px;
  }
  .fleet-right {
    max-height: none;
  }
}

/* ── State banner (DTC vs Predicted vs Healthy) ────────────────────────── */
.detail-state-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 13px;
}
.detail-state-banner i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.state-banner-title    { font-weight: 600; margin-bottom: 3px; font-size: 13px; }
.state-banner-sub      { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }

.detail-state-banner.is-dtc {
  background: var(--red-50);
  border-left: 3px solid var(--red-400);
}
.detail-state-banner.is-dtc i              { color: var(--red-600); }
.detail-state-banner.is-dtc .state-banner-title { color: var(--red-600); }

.detail-state-banner.is-pred {
  background: var(--purple-50);
  border-left: 3px solid var(--purple-600);
}
.detail-state-banner.is-pred i              { color: var(--purple-600); }
.detail-state-banner.is-pred .state-banner-title { color: var(--purple-800); }

.detail-state-banner.is-healthy {
  background: var(--green-50);
  border-left: 3px solid var(--green-400);
}
.detail-state-banner.is-healthy i              { color: var(--green-600); }
.detail-state-banner.is-healthy .state-banner-title { color: var(--green-600); }

/* ── Global hover tooltip ──────────────────────────────────────────────── */
.global-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 4px 24px rgba(0,0,0,.16);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.5;
}
.tip-veh      { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.tip-severity {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.tip-crit { background: var(--red-50);   color: var(--red-600);   }
.tip-warn { background: var(--amber-50); color: var(--amber-800); }
.tip-reason { color: var(--text-secondary); margin-bottom: 8px; }
.tip-action {
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin-bottom: 6px;
}
.tip-window {
  font-size: 11px;
  color: var(--text-tertiary);
  border-top: 0.5px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}

/* ── Action queue ──────────────────────────────────────────────────────── */
.action-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.action-queue-saving {
  background: var(--green-50);
  border: 0.5px solid #b8d98b;
  border-radius: var(--radius-lg);
  padding: .75rem 1.1rem;
  text-align: right;
  flex-shrink: 0;
}
.action-list { display: flex; flex-direction: column; gap: 8px; }

.action-card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .9rem 1rem;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  transition: border-color .15s;
}
.action-card:hover { border-color: var(--border-md); }

.action-priority {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.action-priority.crit { background: var(--red-50);   color: var(--red-600);   }
.action-priority.warn { background: var(--amber-50); color: var(--amber-800); }

.action-body { min-width: 0; }
.action-header-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.action-vehicle   { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.action-component { font-size: 12px; color: var(--text-secondary); }
.action-text {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.action-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.urgency-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.urgency-crit { background: var(--red-50);   color: var(--red-600);   }
.urgency-warn { background: var(--amber-50); color: var(--amber-800); }

.action-costs    { font-size: 11px; color: var(--text-secondary); }
.cost-avoided    { color: var(--green-600); font-weight: 500; }
.action-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  font-style: italic;
}