/* =========================================================================
   Rule of 72 · Compound Growth Calculator — Zhijie Tan
   Calculator-specific styles only. Brand tokens, base reset, header,
   footer, and generic atoms (buttons, glass panels, sliders, stat cards,
   the mode toggle) live in ../shared/theme.css, loaded before this file.
   ========================================================================= */

/* ---------- Decade colors ---------------------------------------------------
   One hue per 10-year block so the four stacks read at a glance: yellow
   (20s) → green (30s) → blue (40s) → rose (50s, closing in on retirement).
   Jewel-toned rather than neon to stay in the shared brand's register.
   These are the only calculator-specific theme tokens — everything else
   comes from shared/theme.css. */
:root,
:root[data-theme="dark"] {
  --d1: 244, 212, 141;  /* yellow / gold */
  --d2: 130, 190, 150;  /* emerald green */
  --d3: 116, 165, 218;  /* sapphire blue */
  --d4: 214, 120, 142;  /* dusty rose / red */
}
:root[data-theme="light"] {
  --d1: 154, 116, 40;
  --d2: 58, 122, 84;
  --d3: 56, 100, 156;
  --d4: 158, 60, 88;
}

/* ---------- Controls panel ---------------------------------------------------- */

.controls-panel { padding: clamp(20px, 2.6vw, 28px); }

.controls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.control-field { display: flex; flex-direction: column; gap: 10px; }

.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-weight: 500;
}
.control-label svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

.control-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent-deep);
}

/* ---------- Decade stack visualizer --------------------------------------- */

.stacks-panel { padding: clamp(20px, 2.6vw, 32px); overflow: hidden; }

/* Full-screen presentation mode — the native Fullscreen API hands the
   panel the whole display; give it a solid brand background and let it
   center/scroll instead of inheriting the page's cramped card padding. */
.stacks-panel:fullscreen,
.stacks-panel:-webkit-full-screen {
  background: var(--bg);
  overflow-y: auto;
  border-radius: 0;
  padding: clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stacks-panel.is-fullscreen { box-shadow: none; }

.stacks-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.stacks-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); margin-top: 6px; }
.stacks-desc { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px; max-width: 480px; }

.stacks-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  animation: fadeIn 0.3s ease;
}
.alert-banner-text { display: flex; align-items: flex-start; gap: 10px; }
.alert-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  color: var(--danger);
}
.alert-icon svg { width: 13px; height: 13px; }
.alert-banner-title { font-size: 12px; font-weight: 700; color: var(--danger); display: block; }
.alert-banner-body { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
.alert-reset-btn {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--danger-bd);
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 10.5px;
  transition: all 0.2s ease;
}
.alert-reset-btn:hover { background: var(--danger-bg); }

.stacks-board { position: relative; width: 100%; overflow-x: auto; padding-bottom: 6px; }
.stacks-board-inner { min-width: 720px; max-width: 980px; margin: 0 auto; position: relative; padding: 8px 4px 0; }

.rate-stamp {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  z-index: 3;
}
.rate-stamp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.stack-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  /* box-sizing:border-box means min-height includes the padding below, so
     this must cover the tallest stack's real content height (total badge +
     4 decade badges + gaps, ~347px) PLUS the padding, or it clips against
     .stacks-board's overflow:auto. Don't shrink this without re-measuring
     column 4's actual rendered height first. */
  min-height: 430px;
  padding: 52px 0 20px;
  position: relative;
}

/* Each column is just a positioning anchor — its stack is pulled out via
   absolute positioning and right-edge-aligned to the column's age-tick
   boundary (matching .stack-age-row's math exactly), so "$150k Base
   decade" sits with its right edge flush under "Age 30", covering the
   span that decade actually grew over without overlapping the next
   column's stack. */
.stack-col { position: relative; }

.stack-col-content {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 8px;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.stack-col-content.is-end { margin-left: 0; }

.decade-badge {
  width: 128px;
  max-width: 100%;
  border-radius: 12px;
  padding: 9px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  border: 1px solid rgba(var(--tone), 0.4);
  background: linear-gradient(135deg, rgba(var(--tone), 0.24), rgba(var(--tone), 0.08));
  box-shadow: 0 6px 18px -8px rgba(var(--tone), 0.35);
}
.decade-badge:hover { transform: translateY(-3px) scale(1.03); }
.decade-badge.is-focused { filter: brightness(1.28); transform: translateY(-4px) scale(1.06); }

.decade-badge-value { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.decade-badge-sub { font-size: 9.5px; color: var(--ink-muted); margin-top: 1px; }

.decade-badge.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
  box-shadow: none;
}
.decade-badge.is-disabled .decade-badge-value { text-decoration: line-through; color: var(--danger); }

.badge-skip-x {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 17, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
}
.badge-skip-x svg { width: 14px; height: 14px; }

/* Total-portfolio cap badge — sits atop the tallest (rightmost) stack,
   larger than a normal decade badge so the grand total reads as the
   headline figure the whole tower is building toward. */
.stack-total-badge {
  width: 148px;
  max-width: 100%;
  border-radius: 14px;
  padding: 13px 10px 14px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim-bd);
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease;
}
.stack-total-badge:hover { transform: translateY(-3px); border-color: var(--accent-soft); }
.stack-total-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stack-total-value {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 19px;
  color: var(--accent-deep);
  margin-top: 3px;
}

/* Segmented decade timeline — a colored, lightly hatched bar (one segment
   per decade) standing in for the axis line, echoing the hand-drawn
   reference. Sits directly above the age labels. */
.stack-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  height: 8px;
  margin-top: 18px;
}
.stack-timeline-seg {
  border-radius: 3px;
  background-color: rgba(var(--tone), 0.16);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--tone), 0.65) 0px,
    rgba(var(--tone), 0.65) 3px,
    transparent 3px,
    transparent 7px
  );
  transition: background-color 0.3s ease;
}

/* Age ticks pinned to the exact decade boundaries on the timeline (not
   centered under a column) — Age 30 sits precisely where the yellow
   segment ends and green begins, and so on. Each tick is anchored to the
   right edge of its own grid cell, offset by half the column gap so it
   lands dead-center in the gap between segments; the last tick sits flush
   on the true end of the line, and Age 20 is pinned to the true start. */
.stack-age-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 10px;
}
.stack-tick-cell { position: relative; height: 32px; }
.stack-tick {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.stack-tick.stack-tick-end { margin-left: 0; }
.stack-tick.stack-tick-start {
  left: 0;
  margin-left: 0;
  transform: translateX(0);
  align-items: flex-start;
}
.stack-tick-line { width: 1.5px; height: 9px; border-radius: 1px; background: var(--ink-faint); transition: background-color 0.3s ease; }
.stack-tick-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.axis-row {
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.axis-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.axis-hint svg { width: 12px; height: 12px; color: var(--accent); }

.toggle-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.decade-toggle {
  position: relative;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(var(--tone), 0.3);
  background: rgba(var(--tone), 0.08);
  color: rgb(var(--tone));
  transition: all 0.2s ease;
  overflow: hidden;
}
.decade-toggle:hover { border-color: rgba(var(--tone), 0.55); }
.decade-toggle-label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.decade-toggle-meta { font-size: 9.5px; color: var(--ink-muted); margin-top: 3px; }
.decade-toggle-hint { font-size: 8.5px; color: var(--ink-faint); margin-top: 5px; }

.decade-toggle.is-off { opacity: 0.55; filter: grayscale(0.6); }
.toggle-skip-x {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 17, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--danger);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--danger-bd);
  border-radius: 10px;
}
.toggle-skip-x svg { width: 13px; height: 13px; }

/* Decade breakdown cards */
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}
.breakdown-card { padding: 13px 14px; border-left: 2px solid rgb(var(--tone)); }
.breakdown-head { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: rgb(var(--tone)); margin-bottom: 6px; }
.breakdown-tag { font-family: var(--font-mono); font-size: 9.5px; padding: 2px 7px; border-radius: 999px; background: rgba(var(--tone), 0.14); color: rgb(var(--tone)); }
.breakdown-value { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.breakdown-note { font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; }
.breakdown-note strong { color: var(--accent-deep); font-weight: 600; }

/* ---------- Insights + chart section -------------------------------------- */

.analytics-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(18px, 2vw, 28px); align-items: stretch; }

.chart-panel { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chart-title { font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.chart-title svg { width: 14px; height: 14px; color: var(--accent); }
.chart-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; }
.chart-legend { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.chart-canvas-wrap { height: 280px; width: 100%; flex: 1; }

.insights-panel { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; justify-content: space-between; }
.insights-title { font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.insights-title svg { width: 14px; height: 14px; color: var(--accent); }
.insight-list { display: flex; flex-direction: column; gap: 10px; }
.insight-item { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); }
.insight-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.insight-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.insight-body strong { color: var(--accent-deep); font-weight: 600; }
.insights-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
.insights-foot strong { color: var(--accent-deep); }

/* ---------- Schedule table ------------------------------------------------- */

.table-panel { padding: clamp(20px, 2.6vw, 28px); }
.table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.table-title { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.table-title svg { width: 15px; height: 15px; color: var(--accent); }
.table-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 5px; }
.table-sub span { color: var(--accent-deep); font-family: var(--font-mono); }

.filter-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  color: var(--ink-muted);
  transition: all 0.2s ease;
}
.filter-badge.is-active { background: var(--accent-dim-bg); border-color: var(--accent-dim-bd); color: var(--accent); }
.filter-badge:hover { color: var(--accent); border-color: var(--accent-dim-bd); }

.table-scroll { overflow: auto; max-height: 480px; border-radius: 12px; border: 1px solid var(--divider); }

table.schedule-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.schedule-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
}
.schedule-table th.num, .schedule-table td.num { text-align: right; }
.schedule-table th.center, .schedule-table td.center { text-align: center; }

.schedule-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--divider);
  color: var(--ink-soft);
  white-space: nowrap;
}
.schedule-table tbody tr:hover { background: var(--accent-dim-bg); }
.schedule-table tr.is-milestone { background: var(--accent-dim-bg); }
.schedule-table tr.is-milestone td { color: var(--accent-deep); font-weight: 600; }

/* ---------- Responsive ------------------------------------------------------ */

@media (max-width: 980px) {
  .controls-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .controls-grid { grid-template-columns: 1fr; }
  /* The tick-boundary anchoring only holds up on the 4-across desktop
     layout; on the 2-col mobile wrap, fall back to simple centered
     stacking (normal flow) so nothing collapses or overlaps. */
  .stack-columns { grid-template-columns: repeat(2, 1fr); row-gap: 26px; min-height: 0; padding-top: 44px; align-items: end; }
  .stack-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
  .stack-col-content { position: static; margin-left: 0; transform: none; align-items: center; }
  .stack-timeline { grid-template-columns: repeat(2, 1fr); }
  .stack-age-row { grid-template-columns: repeat(2, 1fr); row-gap: 18px; margin-top: 10px; }
  .toggle-row { grid-template-columns: repeat(2, 1fr); }
  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }
  .rate-stamp { position: static; margin-bottom: 14px; }
  .stacks-board-inner { min-width: 0; padding-top: 0; }
}