/* Forecast playground (/forecast) styles, loaded only by that page on top of
   site.css. The chart's forecast-* / fc-* classes mirror the app's app.css so
   the SVG markup ported into forecast-playground.js works unchanged. */


.fp-main {
  --chart-grid: rgba(31, 45, 56, .08);
  --chart-axis-label: #5d6b76;
  /* .wrap's padding shorthand beats the shared `main` padding-top rule */
  padding-top: 110px;
  padding-bottom: 72px;
}
.fp-head { max-width: 940px; margin: 10px auto 34px; text-align: center; }
.fp-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.06; letter-spacing: -0.015em; font-weight: 500;
  margin: 0 0 14px;
}
.fp-sub { color: var(--muted); font-size: 16.5px; margin: 0; }

/* Edit plan / Forecast view switch (reuses the pricing billing-toggle look) */
.fp-tabs { margin: 0 auto 20px; }
.fp-layout [data-fp-panel][hidden] { display: none; }
/* default stretch keeps side-by-side cards (income/retirement, tax/strategy)
   equal height per row */
.fp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fp-span { grid-column: 1 / -1; }
.fp-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Space held for the two blocks the script fills, so the first paint has the
   same geometry as the rendered page and nothing jumps (CLS). The heights
   mirror what renders: two rows of KPI tiles, and a chart card of head +
   240px chart + legend. `:empty` stops matching the moment the script fills
   the container, so a shorter result never leaves a gap behind. */
.fp-kpis:empty { min-height: 153px; }
#fp-chart-card:empty { min-height: 308px; }

.fp-card { padding: 20px 22px; }
.fp-card h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.2px; }
.fp-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.fp-hint-inline { color: var(--muted); font-size: 12.5px; }
.fp-loan-warn { color: var(--err); margin: 12px 0 0; }
.fp-note { text-align: center; color: var(--muted); font-size: 13px; margin: 28px auto 0; max-width: 640px; }

/* form controls */
.fp-form label { display: block; font-size: 13px; color: var(--muted); }
.fp-form input, .fp-form select {
  background: #ffffff; color: var(--ink);
  border: 1px solid rgba(31, 45, 56, 0.16);
  padding: 8px 10px; font-size: 14px; font-family: inherit; width: 100%;
  margin-top: 3px;
}
.fp-form input:focus, .fp-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 138, 143, .14);
}
.fp-form input[type="radio"], .fp-form input[type="checkbox"] { accent-color: var(--accent); }
.fp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 12px; margin-top: 4px;
}
.fp-grid[hidden], .fp-glide-only[hidden], .fp-tax-simple[hidden], .fp-tax-real[hidden] { display: none; }
/* .fp-form prefix so display:flex beats the `.fp-form label` block rule —
   without it the radio falls back to inline baseline alignment and rides
   above its text. */
.fp-form .fp-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.fp-form .fp-radio { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.4; }
/* explicit box so the native glyph sits on the row's optical center */
.fp-form .fp-check input, .fp-form .fp-radio input {
  width: 15px; height: 15px; margin: 0; padding: 0; flex: none;
}
/* a full-row field inside .fp-grid (the liquidation select's long options) */
.fp-grid .fp-wide { grid-column: 1 / -1; }

/* per-class table, stretched across the card */
.fp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fp-table th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  padding: 4px 12px 6px 0; white-space: nowrap;
}
.fp-table td { padding: 3px 12px 3px 0; white-space: nowrap; }
.fp-table td:first-child { color: var(--ink); padding-right: 18px; }
.fp-table input, .fp-table select { width: 100%; min-width: 88px; padding: 6px 8px; margin-top: 0; }
.fp-table th[hidden], .fp-table td[hidden] { display: none; }
/* input columns share the width equally (Class and Type size to content);
   the hidden basis column doesn't count, so toggling it re-splits evenly */
.fp-table th[data-tip]:not(:last-child) { width: 16%; }
.fp-cell-na { color: var(--muted); padding-left: 4px; }
.fp-class-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 7px; vertical-align: baseline;
}

/* KPI cards: two rows of four by default */
.fp-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.fp-kpi {
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 10px 14px;
}
.fp-kpi strong { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.fp-kpi-value { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }

/* chart card */
.fp-chart-panel { overflow: hidden; }
.fp-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.fp-chart-title { margin: 0; font-size: 15px; letter-spacing: -0.2px; }
.forecast-chart-wrap { overflow: hidden; }
.forecast-chart { width: 100%; height: auto; display: block; overflow: visible; }
.forecast-grid-line { stroke: var(--chart-grid); stroke-width: 1; fill: none; }
.forecast-area-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: butt; }
.forecast-axis-label { fill: var(--chart-axis-label); font-size: 11px; font-weight: 500; }
.forecast-hover-point {
  fill: var(--accent); stroke: #fff; stroke-width: 2;
  pointer-events: none; opacity: 0; transition: opacity 120ms ease;
}
.forecast-hover-point.visible { opacity: 1; }
.forecast-chart-controls { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.forecast-real-toggle {
  appearance: none; border: 0; background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 10px 4px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center;
  transition: background 120ms ease, color 120ms ease;
}
.forecast-real-toggle:is(:hover, :focus-visible) { background: rgba(15, 138, 143, .08); color: var(--accent-strong); }
.forecast-real-toggle.active,
.forecast-real-toggle.active:is(:hover, :focus-visible) { background: rgba(15, 138, 143, .16); color: var(--accent-strong); }
.fp-range-chips { display: inline-flex; gap: 2px; margin-left: 6px; }
.fp-range-chip {
  appearance: none; border: 0; background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 600;
  padding: 6px 8px 4px; cursor: pointer; line-height: 1;
}
.fp-range-chip:hover { background: rgba(15, 138, 143, .08); color: var(--accent-strong); }
.fp-range-chip.active { background: rgba(15, 138, 143, .16); color: var(--accent-strong); }
.forecast-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 12px; }
.forecast-legend-item { display: flex; align-items: center; gap: 5px; }
.forecast-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.forecast-legend-label { font-size: 12.5px; color: var(--muted); }
.forecast-fi-target { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .9; }
.forecast-retire-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.forecast-marker-label { fill: var(--chart-axis-label); font-size: 10px; font-weight: 600; }
.forecast-fi-dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.forecast-mc-band { fill: var(--accent); opacity: .14; stroke: none; }
.forecast-mc-median { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.forecast-legend-band { background: var(--accent); opacity: .25; }
.forecast-legend-median { background: var(--accent); }
.forecast-mc-note { font-size: 12.5px; color: var(--muted); }

/* insights + gain attribution */
.fp-insights { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.fp-insights[hidden] { display: none; }
.fp-insights p { margin: 0; }
.fc-gain-bar {
  display: flex; height: 10px; overflow: hidden;
  background: rgba(15, 138, 143, .1); margin: 4px 0 12px;
}
.fc-gain-seg { height: 100%; }
.fc-seg-existing { background: var(--accent-strong); }
.fc-seg-savings { background: var(--accent); }
.fc-seg-capital { background: rgba(15, 138, 143, .45); }
.fc-gain-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; flex-shrink: 0; }
.forecast-attribution-rows { display: flex; flex-direction: column; gap: 4px; }
.forecast-attr-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 13.5px; color: var(--muted);
}
.forecast-attr-row span:first-child { display: inline-flex; align-items: center; min-width: 0; }
.forecast-attr-total {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--ink);
}
.fc-gain-pos { color: var(--ok); font-variant-numeric: tabular-nums; }
.fc-gain-neg { color: var(--err); font-variant-numeric: tabular-nums; }
.fp-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.forecast-rate-note { font-size: 12.5px; margin: 8px 0 0; }

/* hover tooltip */
#forecast-tooltip {
  /* width overrides the site.css `body > *` full-width rule */
  position: fixed; z-index: 200; pointer-events: none; width: max-content;
  background: #1f2d38; color: #f2f5f7;
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 9px; font-size: 12.5px; line-height: 1.3;
  white-space: nowrap; display: none;
}
#forecast-tooltip.visible { display: block; }
.fc-tt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 5px; }
.fc-tt-head .fc-tt-total { font-weight: 620; font-variant-numeric: tabular-nums; }
.fc-tt-row { display: flex; align-items: center; gap: 6px; }
.fc-tt-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.fc-tt-label { margin-right: auto; opacity: .85; }
.fc-tt-val { font-variant-numeric: tabular-nums; padding-left: 14px; }

/* share + CTA */
.fp-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-cta { text-align: left; }
.fp-cta h3 { margin: 0 0 6px; font-size: 17px; }
.fp-cta p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.fp-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* data-tip pill (same role as the app's .app-tooltip) */
.fp-tip {
  position: fixed; z-index: 300; top: 0; left: 0;
  max-width: min(320px, 80vw); width: max-content;
  padding: 6px 9px;
  background: #1f2d38; color: #f2f5f7;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.fp-tip.visible { opacity: 1; visibility: visible; }
[data-tip] { cursor: help; }
button[data-tip], select[data-tip], .fp-grid label[data-tip] input, .fp-grid label[data-tip] select { cursor: auto; }

@media (max-width: 980px) {
  .fp-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns of tiles, and a chart head and legend that wrap */
  .fp-kpis:empty { min-height: 316px; }
  #fp-chart-card:empty { min-height: 370px; }
}
@media (max-width: 480px) {
  /* One tile per row. Two columns leave a signed amount too little text width,
     and the only line-break opportunity in "+€15,163,257" is the one right
     after the sign — so the tile reads as a bare "+" above its number, while
     the unsigned amount beside it (no break opportunity at all) sits on one
     line. Full width holds any magnitude. The cutoff clears the widest of the
     three locales by ~75px, i.e. several more digits than today's numbers:
     nl formats the same amount as "+€ 15.163.257" and needs 406px in two
     columns where en and fr need 401px. */
  .fp-kpis { grid-template-columns: 1fr; }
  .fp-kpis:empty { min-height: 560px; }
}