/* FinHUD semantic visual system: local static CSS only. */
:root {
  --fh-bg-page: #050814;
  --fh-surface-0: rgba(2, 6, 23, 0.72);
  --fh-surface-1: rgba(15, 23, 42, 0.86);
  --fh-surface-2: rgba(30, 41, 59, 0.72);
  --fh-surface-raised: rgba(15, 23, 42, 0.96);
  --fh-border-soft: rgba(148, 163, 184, 0.18);
  --fh-border-mid: rgba(148, 163, 184, 0.30);
  --fh-border-strong: rgba(226, 232, 240, 0.42);
  --fh-text-main: #e5eefb;
  --fh-text-muted: #94a3b8;
  --fh-text-strong: #ffffff;
  --fh-accounts: #818cf8;
  --fh-income: #34d399;
  --fh-expense: #fb7185;
  --fh-bill: #f59e0b;
  --fh-transfer: #c084fc;
  --fh-threshold: #facc15;
  --fh-event: #38bdf8;
  --fh-graph: #67e8f9;
  --fh-export: #2dd4bf;
  --fh-boundary: #f6c453;
  --fh-info: #38bdf8;
  --fh-success: #34d399;
  --fh-warning: #f59e0b;
  --fh-error: #fb7185;
  --fh-debt: #f97316;
  --fh-neutral: #94a3b8;
}

button, .file-button { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
button:hover, .file-button:hover { transform: translateY(-1px); }
button.danger { background: rgba(127, 29, 29, 0.12); }
button.export-action, #exportJsonBtn, #exportScenarioCsvBtn, #exportResultsCsvBtn, #exportPngBtn {
  border-color: rgba(45, 212, 191, 0.44);
  color: #ccfbf1;
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.18), rgba(15, 23, 42, 0.74));
}
#runSimulationBtn, .quick-actions button[data-example] {
  border-color: rgba(103, 232, 249, 0.58);
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.40), rgba(15, 23, 42, 0.78));
}
#validateBtn {
  border-color: rgba(245, 158, 11, 0.48);
  color: #fde68a;
}
.file-button {
  border-color: rgba(45, 212, 191, 0.48);
  color: #ccfbf1;
}

.status-pill, .tag, .mini-pill, .guide-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.tag-static { border-color: rgba(56, 189, 248, 0.32); background: rgba(14, 116, 144, 0.16); color: #cffafe; }
.tag-local, .tag-export { border-color: rgba(45, 212, 191, 0.36); background: rgba(20, 184, 166, 0.14); color: #ccfbf1; }
.tag-success { border-color: rgba(52, 211, 153, 0.32); background: rgba(21, 128, 61, 0.14); color: #bbf7d0; }
.tag-caution { border-color: rgba(245, 158, 11, 0.46); background: rgba(146, 64, 14, 0.18); color: #fde68a; }

.section-card, .hero-panel { position: relative; overflow: hidden; }
.section-card::before, .hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--fh-neutral);
  opacity: 0.95;
}
.hero-panel::before { background: var(--fh-graph); }
.section-card[data-domain="inputs"]::before { background: var(--fh-accounts); }
.section-card[data-domain="graph"]::before { background: var(--fh-graph); }
.section-card[data-domain="warnings"]::before { background: var(--fh-warning); }
.section-card[data-domain="results"]::before { background: var(--fh-info); }
.section-card[data-domain="export"]::before { background: var(--fh-export); }
.section-card[data-domain="boundary"]::before { background: var(--fh-boundary); }
.section-card[data-domain="legend"]::before { background: var(--fh-transfer); }


/* FinHUD sticky-panel hotfix: keep card clipping elsewhere, but let the two docked side panels scroll. */
.section-card.inputs-panel,
.section-card.warnings-panel {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 1260px) {
  .section-card.inputs-panel,
  .section-card.warnings-panel {
    overflow: visible;
  }
}

.section-heading { border-bottom: 1px solid rgba(148, 163, 184, 0.12); padding-bottom: 0.65rem; }
.section-heading .eyebrow { color: var(--fh-neutral); }
[data-domain="graph"] > .section-heading .eyebrow { color: var(--fh-graph); }
[data-domain="warnings"] > .section-heading .eyebrow { color: var(--fh-warning); }
[data-domain="export"] > .section-heading .eyebrow { color: var(--fh-export); }
[data-domain="boundary"] > .section-heading .eyebrow { color: var(--fh-boundary); }

.boundary-strip { border-color: rgba(246, 196, 83, 0.28); background: linear-gradient(90deg, rgba(246, 196, 83, 0.08), rgba(15, 23, 42, 0.76)); }
.boundary-strip span { font-size: 0.78rem; }

details[data-domain] { border-left: 4px solid var(--domain-color, var(--fh-neutral)); }
details[data-domain] summary { color: #f8fafc; background: linear-gradient(90deg, color-mix(in srgb, var(--domain-color, var(--fh-neutral)) 14%, transparent), transparent 65%); }
details[data-domain="accounts"] { --domain-color: var(--fh-accounts); }
details[data-domain="income"] { --domain-color: var(--fh-income); }
details[data-domain="expenses"] { --domain-color: var(--fh-expense); }
details[data-domain="bills"] { --domain-color: var(--fh-bill); }
details[data-domain="transfers"] { --domain-color: var(--fh-transfer); }
details[data-domain="thresholds"] { --domain-color: var(--fh-threshold); }
details[data-domain="events"] { --domain-color: var(--fh-event); }
.domain-pill { border-color: color-mix(in srgb, var(--domain-color, var(--fh-neutral)) 50%, transparent); background: color-mix(in srgb, var(--domain-color, var(--fh-neutral)) 14%, transparent); color: #fff; }
.domain-pill.accounts { --domain-color: var(--fh-accounts); }
.domain-pill.income { --domain-color: var(--fh-income); }
.domain-pill.expenses { --domain-color: var(--fh-expense); }
.domain-pill.bills { --domain-color: var(--fh-bill); }
.domain-pill.transfers { --domain-color: var(--fh-transfer); }
.domain-pill.thresholds { --domain-color: var(--fh-threshold); }
.domain-pill.events { --domain-color: var(--fh-event); }

.mini-table-wrap { background: rgba(2, 6, 23, 0.32); }
tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.38); }
tbody tr:hover { background: rgba(125, 211, 252, 0.075); }
td input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
th { box-shadow: 0 1px 0 rgba(148, 163, 184, 0.14); }
.mini-table-wrap[data-section="asset_accounts"] th { color: #c7d2fe; }
.mini-table-wrap[data-section="income_sources"] th { color: #bbf7d0; }
.mini-table-wrap[data-section="expenses"] th { color: #fecdd3; }
.mini-table-wrap[data-section="major_bills"] th { color: #fde68a; }
.mini-table-wrap[data-section="account_shifts"] th { color: #e9d5ff; }
.mini-table-wrap[data-section="threshold_rules"] th { color: #fef08a; }
.mini-table-wrap[data-section="user_events"] th { color: #bae6fd; }
.add-row-button[data-section="income_sources"] { border-color: rgba(52, 211, 153, 0.44); color: #bbf7d0; }
.add-row-button[data-section="expenses"] { border-color: rgba(251, 113, 133, 0.44); color: #fecdd3; }
.add-row-button[data-section="major_bills"] { border-color: rgba(245, 158, 11, 0.44); color: #fde68a; }
.add-row-button[data-section="account_shifts"] { border-color: rgba(192, 132, 252, 0.44); color: #e9d5ff; }
.add-row-button[data-section="threshold_rules"] { border-color: rgba(250, 204, 21, 0.44); color: #fef08a; }
.add-row-button[data-section="user_events"] { border-color: rgba(56, 189, 248, 0.44); color: #bae6fd; }

.graph-options { align-items: stretch; }
.control-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 3px solid var(--fh-graph);
  border-radius: 16px;
  padding: 0.62rem 0.7rem 0.7rem;
  margin: 0;
  background: rgba(2, 6, 23, 0.34);
}
.control-group[data-domain="events"] { border-left-color: var(--fh-event); }
.control-group legend { padding: 0 0.35rem; color: #e0f2fe; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.control-group select { min-width: 11rem; }
.horizon-control span { display: inline-flex; align-items: center; gap: 0.35rem; }
.horizon-control input {
  width: 5rem;
  min-width: 5rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.65rem;
  background: rgba(2, 6, 23, 0.72);
  color: var(--fh-text-strong);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.control-help {
  display: inline-flex;
  align-items: center;
  color: var(--fh-text-muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.event-type-controls .mini-pill { border-color: rgba(56, 189, 248, 0.25); background: rgba(56, 189, 248, 0.10); color: #bae6fd; }
.trace-controls label { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; padding: 0.28rem 0.55rem; background: rgba(15, 23, 42, 0.42); }
.canvas-wrap { border-color: rgba(103, 232, 249, 0.28); }

.warning-item { border-left: 4px solid var(--fh-info); }
.warning-item strong { letter-spacing: 0.03em; }
.warning-item.error { border-left-color: var(--fh-error); }
.warning-item.warning { border-left-color: var(--fh-warning); }
.warning-item.info { border-left-color: var(--fh-info); }
.warning-item.negative, .warning-item.debt, .warning-item.runaway { border-color: rgba(249, 115, 22, 0.58); border-left-color: var(--fh-debt); background: rgba(154, 52, 18, 0.18); }
#warningBadge.status-ok { border-color: rgba(52, 211, 153, 0.34); background: rgba(21, 128, 61, 0.16); color: #bbf7d0; }
#warningBadge.status-info { border-color: rgba(56, 189, 248, 0.34); background: rgba(14, 116, 144, 0.16); color: #bae6fd; }
#warningBadge.status-warning { border-color: rgba(245, 158, 11, 0.44); background: rgba(146, 64, 14, 0.18); color: #fde68a; }
#warningBadge.status-error { border-color: rgba(251, 113, 133, 0.50); background: rgba(127, 29, 29, 0.22); color: #fecdd3; }

.metric-card { border-left: 4px solid var(--fh-info); }
.metric-card.metric-total { border-left-color: var(--fh-graph); }
.metric-card.metric-good { border-left-color: var(--fh-success); }
.metric-card.metric-warning { border-left-color: var(--fh-warning); background: rgba(120, 53, 15, 0.12); }
.metric-card.metric-negative, .metric-card.metric-error { border-left-color: var(--fh-debt); background: rgba(127, 29, 29, 0.12); }
.metric-card.metric-neutral { border-left-color: var(--fh-neutral); }

.color-guide { margin-bottom: 0.85rem; }
.color-guide details { margin: 0; border-left-color: var(--fh-transfer); }
.color-guide-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.guide-chip { border: 1px solid rgba(148, 163, 184, 0.18); padding: 0.42rem 0.62rem; font-size: 0.78rem; }
.guide-chip.accounts { border-color: rgba(129, 140, 248, 0.4); color: #c7d2fe; background: rgba(67, 56, 202, 0.16); }
.guide-chip.income { border-color: rgba(52, 211, 153, 0.4); color: #bbf7d0; background: rgba(21, 128, 61, 0.16); }
.guide-chip.expenses { border-color: rgba(251, 113, 133, 0.4); color: #fecdd3; background: rgba(127, 29, 29, 0.16); }
.guide-chip.bills { border-color: rgba(245, 158, 11, 0.4); color: #fde68a; background: rgba(146, 64, 14, 0.16); }
.guide-chip.transfers { border-color: rgba(192, 132, 252, 0.4); color: #e9d5ff; background: rgba(88, 28, 135, 0.16); }
.guide-chip.thresholds { border-color: rgba(250, 204, 21, 0.4); color: #fef08a; background: rgba(113, 63, 18, 0.16); }
.guide-chip.events { border-color: rgba(56, 189, 248, 0.4); color: #bae6fd; background: rgba(14, 116, 144, 0.16); }
.guide-chip.negative { border-color: rgba(249, 115, 22, 0.46); color: #fed7aa; background: rgba(154, 52, 18, 0.18); }

:focus-visible { outline: 2px solid rgba(103, 232, 249, 0.72); outline-offset: 2px; }
@media (max-width: 760px) {
  .control-group { width: 100%; }
  .control-group label { width: 100%; }
  .control-group select { width: 100%; }
  .horizon-control input { width: 100%; }
  .control-help { width: 100%; }
}

/* Results collapse hotfix */

.section-card[data-domain="results"] { --domain-color: var(--fh-graph); }
.results-collapsible[open] .collapse-hint { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.34); color: #bbf7d0; }


/* Read-only public-demo posture */
.readonly-hero {
  border-left: 4px solid var(--fh-boundary);
}
.readonly-notice {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(246, 196, 83, 0.35);
  border-left: 4px solid var(--fh-boundary);
  border-radius: 1rem;
  background: rgba(245, 158, 11, 0.08);
  color: var(--fh-text-main);
}
.readonly-pill,
.readonly-table-note {
  border: 1px solid rgba(246, 196, 83, 0.34);
  background: rgba(245, 158, 11, 0.10);
  color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
}
.readonly-table-note {
  display: inline-flex;
  margin: 0.45rem 0 0.55rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
}
.readonly-params span {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--fh-border-soft);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.48);
}
.readonly-params output {
  color: var(--fh-text-strong);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.readonly-table-wrap table td {
  cursor: default;
}
.readonly-cell {
  color: var(--fh-text-main);
}
.readonly-cell.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.example-only-actions button {
  min-width: 12rem;
}