/* ============================================================
   RETIREMENT ACCOUNT OPTIMIZER — Page styles
   Consumes the shared design-system tokens from variables.css.

   Legacy aliases: RAO's original local variable names are mapped
   to CV tokens here so that JS-generated inline styles (which
   reference var(--green), var(--red), etc.) keep working without
   touching rao.js.
   ============================================================ */

:root {
  /* ── Legacy RAO variable aliases ─────────────────────────── */
  --text2:         var(--text-secondary);
  --text3:         var(--text-muted);
  --green:         var(--secondary);
  --green-light:   rgba(0, 255, 136, 0.12);
  --green-mid:     var(--secondary);
  --purple:        var(--accent);
  --amber:         var(--cert);
  --amber-light:   rgba(245, 158, 11, 0.12);
  --red:           var(--error);

  /* ── RAO surface tokens ──────────────────────────────────── */
  --rao-surface:   var(--bg-card);
  --rao-surface2:  rgba(15, 15, 35, 0.55);
  --rao-border:    var(--border-subtle);
  --rao-border2:   rgba(100, 100, 150, 0.12);
}

/* ── Reset & page wrapper ──────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ────────────────────────────────────────────────── */
header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rao-border);
}

header h1 {
  font-family: var(--font-main);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

header h1 em {
  color: var(--secondary);
  font-style: italic;
}

header p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 520px;
}

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--rao-surface);
  border: 1px solid var(--rao-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* ── Grid helpers ──────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }

/* ── Field / input ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.field label a { color: var(--secondary); }

.iw { position: relative; }

.iw input,
.iw select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--rao-border);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.6);
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color 0.15s;
  outline: none;
}

.iw input { padding: 0 12px 0 24px; }
.iw select { padding: 0 12px; }
.iw.sfx input { padding: 0 28px 0 12px; }

.iw input:focus,
.iw select:focus { border-color: var(--secondary); }

.pfx {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}

.sfx-lbl {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Employment toggle ─────────────────────────────────────── */
.emp-toggle { display: flex; gap: 8px; }

.emp-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--rao-border);
  border-radius: 10px;
  background: var(--rao-surface);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s;
  text-align: center;
}

.emp-btn:hover { border-color: var(--secondary); color: var(--text-primary); }

.emp-btn.on {
  border: 1.5px solid var(--secondary);
  background: rgba(0, 255, 136, 0.08);
  color: var(--secondary);
}

.emp-btn .eb-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 3px;
  display: block;
  line-height: 1.4;
}

.emp-btn.on .eb-sub { color: rgba(0, 255, 136, 0.7); }

/* ── Policy grid ───────────────────────────────────────────── */
.pol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.pol-btn {
  border: 1px solid var(--rao-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--rao-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.pol-btn:hover { border-color: var(--secondary); }
.pol-btn.on    { border: 1.5px solid var(--secondary); background: rgba(0, 255, 136, 0.08); }
.pol-btn .pt   { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pol-btn .pd   { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.35; }
.pol-btn.on .pt { color: var(--secondary); }

/* ── Confidence slider ─────────────────────────────────────── */
.conf-wrap { margin-top: 1rem; }

.conf-row { display: flex; align-items: center; gap: 12px; }

.conf-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

.conf-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  outline: none;
  background: var(--rao-border2);
  cursor: pointer;
}

.conf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--secondary);
  border: 2px solid var(--bg-dark);
  box-shadow: 0 0 6px var(--secondary-glow);
  cursor: pointer;
}

.conf-slider:disabled { opacity: 0.35; cursor: not-allowed; }
.conf-slider:disabled::-webkit-slider-thumb { cursor: not-allowed; }

.conf-val {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-primary);
  min-width: 42px;
  text-align: right;
}

.conf-hint { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* ── Scenario pills ────────────────────────────────────────── */
.scenario-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.scenario-pill {
  background: var(--rao-surface2);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.scenario-pill .sp-label  { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.scenario-pill .sp-prob   { font-size: 15px; font-weight: 500; font-family: var(--font-mono); color: var(--text-primary); margin: 2px 0; }
.scenario-pill .sp-rate   { font-size: 11px; color: var(--text-secondary); }
.scenario-pill .sp-vote   { font-size: 11px; font-weight: 500; margin-top: 3px; }
.scenario-pill.active     { background: rgba(0, 255, 136, 0.1); }
.scenario-pill.active .sp-prob { color: var(--secondary); }

/* ── Rate adjustment ───────────────────────────────────────── */
.rate-adj-wrap { margin-top: 12px; }
.rate-adj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }

.suggested-tag {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(0, 255, 136, 0.1);
  color: var(--secondary);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: pointer;
}

.suggested-tag:hover { background: rgba(0, 255, 136, 0.2); }
.rate-adj-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Info panels ───────────────────────────────────────────── */
.info-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rao-border2);
}

.info-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.info-toggle .i-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; display: inline-block; }
.info-toggle.open .i-arrow { transform: rotate(90deg); }
.info-toggle .i-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.info-toggle .i-sub   { font-size: 11px; color: var(--text-muted); margin-left: auto; }

.info-body { display: none; margin-top: 0.75rem; }
.info-body.open { display: block; }

.info-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0.75rem; }

.info-stat { background: var(--rao-surface2); border-radius: 8px; padding: 10px 12px; }
.info-stat .is-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.info-stat .is-val   { font-size: 16px; font-weight: 500; font-family: var(--font-mono); color: var(--text-primary); margin: 2px 0; }
.info-stat .is-note  { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }

.info-bar-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.info-bar-label { font-size: 12px; color: var(--text-secondary); min-width: 120px; }
.info-bar-outer { flex: 1; background: var(--rao-border2); border-radius: 3px; height: 8px; }
.info-bar-inner { height: 8px; border-radius: 3px; }
.info-bar-val   { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); min-width: 36px; text-align: right; }

.info-p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.5rem; }
.info-p strong { color: var(--text-primary); font-weight: 600; }

.info-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 0.5rem; }
.info-table th {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  padding: 3px 0 6px;
  border-bottom: 1px solid var(--rao-border2);
}
.info-table th:not(:first-child) { text-align: right; }
.info-table td { padding: 5px 0; color: var(--text-secondary); border-bottom: 1px solid var(--rao-border2); }
.info-table td:not(:first-child) { text-align: right; font-family: var(--font-mono); }

.info-source { font-size: 10px; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.5; }

/* ── Laffer curve ──────────────────────────────────────────── */
.laf-title  { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.laf-desc   { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.laf-canvas-wrap { position: relative; width: 100%; height: 180px; }
.laf-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.ll { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.ld { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Results ───────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.metric { background: var(--rao-surface2); border-radius: 10px; padding: 12px 14px; }
.metric-lbl { font-size: 11px; color: var(--text-secondary); line-height: 1.35; }
.metric-val { font-size: 20px; font-weight: 500; font-family: var(--font-mono); color: var(--text-primary); margin-top: 4px; }
.metric-val.up   { color: var(--error); }
.metric-val.down { color: var(--secondary); }

table.ttbl { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 13px; }
.ttbl th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--rao-border2);
}
.ttbl th:not(:first-child) { text-align: right; }
.ttbl td { padding: 6px 0; color: var(--text-primary); }
.ttbl td:not(:first-child) { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.ttbl tr.subtotal td { color: var(--text-secondary); border-top: 1px solid var(--rao-border2); padding-top: 8px; font-style: italic; }
.ttbl tr.total    td { font-weight: 600; border-top: 1px solid var(--rao-border2); padding-top: 8px; }
.ttbl .note-row   td { font-size: 11px; color: var(--text-muted); padding-top: 4px; border: none; font-family: var(--font-main); }

/* ── Allocation bars ───────────────────────────────────────── */
.alloc-section { margin-bottom: 1.25rem; }
.alloc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.a-dot     { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.a-lbl     { font-size: 13px; color: var(--text-secondary); flex: 1; min-width: 110px; }
.a-bar-wrap { flex: 2; background: var(--rao-border2); border-radius: 4px; height: 7px; }
.a-bar     { height: 7px; border-radius: 4px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.a-pct     { font-size: 11px; color: var(--text-muted); min-width: 34px; text-align: right; }
.a-amt     { font-size: 13px; font-weight: 500; font-family: var(--font-mono); min-width: 72px; text-align: right; color: var(--text-primary); }

/* ── Score track ───────────────────────────────────────────── */
.score-wrap { margin: 0.25rem 0 0.5rem; }
.score-track-outer { display: flex; align-items: center; gap: 8px; }
.score-label-l, .score-label-r { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.score-track  { flex: 1; height: 6px; background: var(--rao-border2); border-radius: 3px; position: relative; }
.score-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--secondary);
  border: 2px solid var(--bg-dark);
  box-shadow: 0 0 6px var(--secondary-glow);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.score-sub { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; }

/* ── Misc ──────────────────────────────────────────────────── */
.lim-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.warn {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--cert);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cert);
}

.expl {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
}

.expl h3 { font-family: var(--font-main); font-size: 16px; font-weight: 600; color: var(--secondary); margin-bottom: 0.75rem; }
.expl p  { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 0.6rem; }
.expl strong { font-weight: 600; color: var(--text-primary); }
.expl ul { padding-left: 1.1rem; margin-bottom: 0.5rem; }
.expl li { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 0.4rem; }
.expl .disc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 255, 136, 0.15);
  line-height: 1.6;
}

/* ── Debug panel ───────────────────────────────────────────── */
.debug-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  cursor: pointer;
  user-select: none;
}

.debug-toggle span { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.debug-toggle .arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.debug-toggle.open .arrow { transform: rotate(90deg); }

.debug-panel {
  display: none;
  margin-top: 0.75rem;
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.25rem;
  overflow-x: auto;
}

.debug-panel.open { display: block; }
.debug-panel pre { font-family: var(--font-mono); font-size: 11px; line-height: 1.8; color: var(--text-secondary); white-space: pre; }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); font-size: 14px; }
.empty-state .icon { font-size: 2rem; margin-bottom: 0.5rem; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2rem;
  line-height: 1.6;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 580px) {
  .g3, .metrics, .pol-grid { grid-template-columns: 1fr 1fr; }
  .g2, .emp-toggle, .rate-adj-row { grid-template-columns: 1fr; flex-direction: column; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .info-stat-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .metrics { grid-template-columns: 1fr 1fr; }
}