/* =========================================================================
   RILA 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, the controls-panel/chart-panel form shell) live in
   ../shared/theme.css, loaded before this file.
   ========================================================================= */

/* ---------- Chart color tokens (additions to the shared theme) -------------
   Index = tfa-portal's --info blue (the market), RILA Return = the shared
   gold --accent (the product), Risk of Loss = tfa-portal's --neg red.
   The previous Athene-era dusty rose/amber pair was dropped: amber risk
   dots next to gold RILA bars were indistinguishable once gold became the
   accent. Read by app.jsx (chart) and the legend swatches below. */
:root,
:root[data-theme="light"] {
  --rila-index: #3F5F96;
  --rila-risk:  #C02626;
}
:root[data-theme="dark"] {
  --rila-index: #8AA4D0;
  --rila-risk:  #E07070;
}

.loading-panel {
  padding: 40px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* ---------- Market scenario panel ---------------------------------------- */

.scenario-panel { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 14px; }

.scenario-head { display: flex; justify-content: space-between; align-items: center; }
.scenario-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.scenario-title svg { width: 16px; height: 16px; color: var(--accent); }

/* Extend the shared .mode-toggle for 4 icon+text buttons instead of 2 plain
   text ones — same visual language, just wraps to a 2x2 grid on narrow
   screens instead of the 2-button flex-equal split. */
.scenario-toggle { flex-wrap: wrap; }
.scenario-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}
.scenario-toggle button svg { width: 13px; height: 13px; }

.custom-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  animation: fadeIn 0.25s ease;
}
.custom-date-row label {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.custom-date-row input[type="date"] {
  padding: 9px 12px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color-scheme: light;
}
:root[data-theme="dark"] .custom-date-row input[type="date"] { color-scheme: dark; }
.custom-date-row input[type="date"]:hover,
.custom-date-row input[type="date"]:focus { border-color: var(--cta-dim-bd); outline: none; }
.custom-date-row .control-note { flex-basis: 100%; }

/* ---------- Results grid -------------------------------------------------- */

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.results-span-2 { grid-column: span 2; }

/* ---------- Segment summary list (inside the Total Contract Value card) --- */

.segment-summary-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--accent-dim-bd);
}
.segment-summary-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.segment-summary-label { color: var(--ink-muted); white-space: nowrap; }
.segment-summary-label::after { content: ":"; }
.segment-summary-value {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ---------- Chart value row ------------------------------------------------
   The row of dollar figures above the chart canvas, one per year mark —
   mirrors Athene's own chart, which prints the Base Segment Value above
   each year column (flat at the purchase payment until the single
   Point-to-Point credit lands on the final year). */

.chart-value-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin-bottom: 4px;
}
.chart-value-cell {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  color: var(--accent);
}

/* Chart.js draws into a canvas sized in JS (ChartPanel's chartHeight
   constant) rather than pure CSS, but the wrapper's own height still needs
   to match so the page doesn't jump once JS measures/sizes it — keep this
   in sync with `chartHeight` in app.jsx if you change one. */
.chart-canvas-wrap { height: 400px; }

/* ---------- Chart legend (custom HTML) -------------------------------------
   Chart.js's own legend can't render the hatch patterns convincingly at
   swatch size, so this is plain HTML/CSS instead — same 5 items as
   Athene's reference chart's legend. */

.chart-legend-custom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}
.chart-legend-custom span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.legend-swatch { width: 18px; height: 13px; border-radius: 2px; flex: none; }
.legend-swatch-protection { background: var(--accent-dim-bg); border: 1px solid var(--accent-dim-bd); }
.legend-swatch-risk {
  background-color: color-mix(in srgb, var(--rila-risk) 35%, transparent);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--rila-risk) 90%, transparent) 1px, transparent 1.3px);
  background-size: 5px 5px;
  border: 1px solid color-mix(in srgb, var(--rila-risk) 60%, transparent);
}
.legend-swatch-line { height: 0; border-top: 2px dashed var(--rila-index); }
.legend-swatch-index {
  background-color: color-mix(in srgb, var(--rila-index) 25%, transparent);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rila-index) 85%, transparent) 0 2px, transparent 2px 5px);
  border: 1px solid var(--rila-index);
}
.legend-swatch-rila { background: var(--accent); }

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

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

@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; }
  .results-span-2 { grid-column: span 1; }
  .scenario-toggle button { flex: 1 1 45%; }
}