/* Northway Shared Components — Tesla-style rebuild
   Phase 3 / Architecture + Polish.
   See DESIGN-TESLA.md "Component inventory" for the canon.

   Every v2 page (portal-v2, ops-v2, tech-v2) links this stylesheet
   alongside tokens.css. Pages must NOT redefine these classes — they
   accept the canonical styling and apply per-page variation through
   spacing/layout tokens, not by rewriting rules.

   Pages that need them add the matching DOM (sheet close, sheet body,
   toast stack). The shared JavaScript in components.js targets the
   same IDs all three pages already use: #sheet, #sheetBackdrop,
   #sheetBody, #toastStack. */

/* ── Sheet (bottom sheet for secondary actions) ──────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-default) var(--ease-out);
  z-index: 90;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
  background: var(--color-surface);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-8);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-emph) var(--ease-spring);
  z-index: 100;
}
.sheet.open { transform: translate(-50%, 0); }

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
}

.sheet-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: transparent; border: 0;
  color: var(--color-text-muted);
  font-size: 28px; line-height: 1;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.sheet-close:hover { background: var(--color-surface-2); color: var(--color-text); }

/* ── Toast (transient notifications) ─────────────────────────────── */
.toast-stack {
  position: fixed; top: var(--space-4); right: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: 200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 240px;
  max-width: 360px;
  color: var(--color-text);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: toast-in var(--dur-default) var(--ease-out);
}
.toast-title {
  font-weight: var(--w-semibold);
  color: var(--color-gold);
  margin-bottom: 2px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Stat (KPI tile) ─────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); padding: var(--space-6) 0; gap: var(--space-4); }
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.stat:hover, .stat:active {
  background: rgba(201, 168, 76, 0.04);
  border-color: var(--color-border);
}
.stat-num {
  font-size: var(--text-h2);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-h2);
  color: var(--color-text);
}
@media (min-width: 720px) {
  .stat-num { font-size: var(--text-h1); line-height: var(--lh-h1); }
}
.stat-num.gold { color: var(--color-gold); }
.stat-num.success { color: var(--color-success); }
.stat-num.warn { color: var(--color-warning); }
.stat-num.danger { color: var(--color-danger); }
.stat-num.muted { color: var(--color-text-muted); }
.stat-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Action Card (single-action button-as-card) ──────────────────── */
.actions {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.action {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-body);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.action:hover {
  border-color: var(--color-gold);
  background: var(--color-surface-2);
}
.action:active { transform: scale(0.98); }
.action-badge {
  background: var(--color-gold);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
}

/* ── Dot (state indicator, no chrome) ────────────────────────────── */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.dot-success { background: var(--color-success); }
.dot-warn    { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger); }
.dot-muted   { background: var(--color-text-muted); }
.dot-info    { background: var(--color-info); }

/* ── Asset detail sheet (DESIGN-Q10-ASSET-HISTORY.md) ──────────── */
.section {
  margin-top: var(--space-6);
}
.section-title {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.row-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 100px;
}
.row-value {
  font-size: var(--text-body);
  text-align: right;
}
.row-value.mono,
.mono {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.row-muted {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}
.history-row {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.history-row:last-child {
  border-bottom: none;
}

/* Photo thumbnail strip (3 across on mobile) */
.thumb-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.thumb {
  aspect-ratio: 1;
  background-color: var(--color-surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-quick) var(--ease-out);
}
.thumb:hover { transform: scale(1.02); }
.thumb:active { transform: scale(0.98); }

/* Paperwork rows (warranties, receipts) */
.pdf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.pdf-row:last-child { border-bottom: none; }
.link {
  background: transparent;
  border: none;
  color: var(--color-gold);
  font-family: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.link:hover { text-decoration: underline; }

/* ── Quote / invoice sheet (DESIGN-Q10-QUOTES-APPROVALS-INVOICES.md) ── */
.line-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.line-item.subtotal {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.line-item-label {
  font-size: var(--text-body);
  color: var(--color-text);
}
.line-item-amount {
  font-size: var(--text-body);
  text-align: right;
}
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 2px solid var(--color-text);
  margin-top: var(--space-2);
}
.total-row span:first-child {
  font-size: var(--text-h2);
  font-weight: var(--w-semibold);
}
.total-row span:last-child {
  font-size: var(--text-h2);
  font-weight: var(--w-semibold);
  text-align: right;
}
.cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.cta-row .action.primary {
  background: var(--color-gold);
  color: var(--color-bg);
  border-color: var(--color-gold);
}
.cta-row .action.primary:hover {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
}
.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.check-mark {
  color: var(--color-success);
  font-weight: var(--w-semibold);
}

/* ── Inspection report sheet (DESIGN-INSPECTION-REPORT.md) ───────── */
.finding {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.finding:last-child {
  border-bottom: none;
}
.finding-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--w-semibold);
  font-size: var(--text-body);
  border-radius: var(--radius-full);
}
.finding-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--w-semibold);
  font-size: var(--text-caption);
  color: var(--color-gold);
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
}
.finding-label {
  font-size: var(--text-body);
  color: var(--color-text);
  font-weight: var(--w-medium);
}
.finding-body {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* History rows that are tap-to-open (inspection deep-links) */
.history-row-tap {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-3) 0;
  color: inherit;
  transition: background var(--dur-quick) var(--ease-out);
}
.history-row-tap:hover {
  background: var(--color-surface-2);
}
.history-row-tap:active {
  background: var(--color-surface);
}

/* ── Dashboard (functional portal surface) ──────────────── */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.dash-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.dash-section-title {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.dash-next-up-empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.dash-next-up-empty .dot {
  margin: 0;
}
.dash-next-up-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dash-next-up-when {
  font-size: var(--text-h2);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
}
.dash-next-up-label {
  font-size: var(--text-body);
}
.dash-next-up-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
}
.dash-attention-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
  color: inherit;
  transition: background var(--dur-quick) var(--ease-out);
}
.dash-attention-row:last-child {
  border-bottom: none;
}
.dash-attention-row:hover {
  background: var(--color-surface-2);
}
.dash-attention-row:active {
  background: var(--color-surface);
}
.dash-attention-row-meta {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.dash-attention-row-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.dash-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out);
}
.dash-activity-item:last-child {
  border-bottom: none;
}
.dash-activity-item:hover {
  background: var(--color-surface-2);
}
.dash-activity-item-meta {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.dash-activity-kind {
  display: inline-block;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

/* Stat strip (compact row, below the fold on mobile) */
/* Removed 2026-08-05 (Phil #northway 21:51:13): dead code. Not
   referenced from any v2 surface. Removing to prevent copy-paste
   resurrection of the no-mobile-breakpoint bug pattern (repeat(N,
   1fr) with no @media (min-width: 720px) overlay = overflows on
   narrow viewports). See .tsla-kpis which now follows the correct
   mobile-first pattern. */
.stat-mini {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.stat-mini:hover {
  border-color: var(--color-gold);
}
.stat-mini-num {
  font-size: var(--text-h2);
  font-weight: var(--w-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.stat-mini-label {
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-1);
}

/* Property scope chip (shown when 2+ properties) */
.chip {
  transition: border-color var(--dur-quick) var(--ease-out);
}
.chip:hover {
  border-color: var(--color-gold) !important;
}

/* ── Tesla-style dashboard (DASHBOARD-TESLA-MOCKUP.html reference) ────── */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

/* Section titles — micro, uppercase, muted */
.tsla-section-title {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: var(--w-medium);
  padding-left: 4px;
  margin-bottom: var(--space-3);
}

/* ── Hero: large ring + headline + legend ─────────────────────
   Previously: 2-column grid (140px ring + 1fr content). The wide
   content column made the pane read as right-leaning against the
   shell's center, even though the parent grid was correctly
   centered. The 2026-08-05 shell fix (grid-column: 1 / -1) closed
   the page-level gap but left the inner asymmetric split intact.

   Stack vertically on all breakpoints so the ring centers above
   the content. The hero reads as one balanced card, not two
   uneven columns. The .tsla-hero-next row stays horizontal
   (defined below) so the next-visit info sits as a single bar. */
.tsla-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.tsla-hero-left { display: flex; justify-content: center; }
.tsla-hero-right { min-width: 0; max-width: 560px; }
.tsla-hero-right h2 {
  font-size: var(--text-h1);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.tsla-hero-sub {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.tsla-hero-next {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
}
.tsla-hero-next-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: var(--w-medium);
}
.tsla-hero-next-when {
  font-weight: var(--w-semibold);
  color: var(--color-text);
}
.tsla-hero-next .link {
  background: transparent;
  border: none;
  color: var(--color-gold);
  font-family: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.tsla-hero-next .link:hover { text-decoration: underline; }

.tsla-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-caption);
}
.tsla-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tsla-legend .dot { margin: 0; }

/* Ring (used by hero + by per-system gauge) */
.tsla-ring {
  position: relative;
  width: 140px;
  height: 140px;
}
.tsla-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tsla-ring .ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 12;
}
.tsla-ring .ring-fill {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease, stroke 600ms ease;
}
.tsla-ring .ring-fill.yellow { stroke: var(--color-warning); }
.tsla-ring .ring-fill.red    { stroke: var(--color-danger); }
.tsla-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tsla-ring-score {
  font-size: 38px;
  font-weight: var(--w-semibold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tsla-ring-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── KPI strip ─────────────────────────────────────────────── */
.tsla-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .tsla-kpis { grid-template-columns: repeat(4, 1fr); }
}
.tsla-kpi {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.tsla-kpi:hover { border-color: var(--color-gold); }
.tsla-kpi-num {
  font-size: var(--text-h1);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tsla-kpi-num.green  { color: var(--color-success); }
.tsla-kpi-num.yellow { color: var(--color-warning); }
.tsla-kpi-num.red    { color: var(--color-danger); }
.tsla-kpi-label {
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
  font-weight: var(--w-medium);
}

/* ── Per-system gauges (small ring + label) ─────────────────── */
.tsla-gauges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .tsla-gauges { grid-template-columns: repeat(4, 1fr); }
}
.tsla-gauge {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tsla-gauge-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
}
.tsla-gauge-icon svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tsla-gauge-icon .ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}
.tsla-gauge-icon .ring-fill {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 800ms ease, stroke 600ms ease;
}
.tsla-gauge-icon .ring-fill.yellow { stroke: var(--color-warning); }
.tsla-gauge-icon .ring-fill.red    { stroke: var(--color-danger); }
.tsla-gauge-icon .ring-fill-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  color: var(--color-text-muted);
}
.tsla-gauge-text { flex: 1; min-width: 0; }
.tsla-gauge-label {
  font-weight: var(--w-semibold);
  margin: 0 0 2px;
  color: var(--color-text);
  /* Bug fix 2026-08-05 (Phil #northway 22:46:12 'center like the
     rest'): the percentage label inside the ring is centered via
     flexbox. Match that visual stance by centering the category
     label and meta line within the text column — same horizontal
     axis as the ring percentage. text-align: center keeps the
     white-space: nowrap / overflow: hidden / text-overflow: ellipsis
     behavior intact when the meta string is too long. */
  text-align: center;
}
.tsla-gauge-meta {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ── 3-year capital plan card ────────────────────────────────── */
.tsla-capital {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-4);
}
.tsla-capital-num {
  font-size: var(--text-h1);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.tsla-capital-num .tsla-capital-num-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  font-weight: var(--w-regular);
  margin-left: var(--space-2);
}
.tsla-capital-bar {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: var(--space-3);
}
.tsla-capital-bar > div {
  height: 100%;
  transition: width 800ms ease;
}
.tsla-capital-bar > div.red    { background: var(--color-danger); }
.tsla-capital-bar > div.yellow { background: var(--color-warning); }
.tsla-capital-bar > div.green  { background: var(--color-success); }
.tsla-capital-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.tsla-capital-legend span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.tsla-capital-legend .cap-red::before    { background: var(--color-danger); }
.tsla-capital-legend .cap-yellow::before { background: var(--color-warning); }
.tsla-capital-legend .cap-green::before  { background: var(--color-success); }

/* ── Quick actions (Tesla-clean: flat pills, gold primary) ────── */
.tsla-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (min-width: 720px) {
  .tsla-actions { grid-template-columns: repeat(3, 1fr); }
}
.tsla-action {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.tsla-action:hover { border-color: var(--color-gold); }
.tsla-action-primary {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ── Two-card row: attention + activity ─────────────────────── */
.tsla-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .tsla-row { grid-template-columns: 1.2fr 1fr; }
}
.tsla-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}