/* Caspenda · P3-3 Institutional Calculator Presentation
   Adds research-note hierarchy to calculator pages without changing math or DOM behavior. */

/* Calculator page masthead */
main > .hero:not(.hero--home) {
  padding: 34px 0 18px !important;
  background: linear-gradient(180deg, rgba(7,28,63,.025), rgba(7,28,63,0));
  border-bottom: 1px solid rgba(20,32,51,.07);
  text-align: left;
}
main > .hero:not(.hero--home) .container { max-width: 1100px; }
main > .hero:not(.hero--home) .breadcrumb { margin-bottom: 18px; }
main > .hero:not(.hero--home) h1 {
  max-width: 820px;
  margin: 0 0 10px;
  color: #071c3f;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.035em;
}
main > .hero:not(.hero--home) .sub {
  max-width: 760px;
  margin: 0;
  color: #596579;
  font-size: 1rem;
  line-height: 1.72;
}
main > .hero:not(.hero--home) .quick-answer {
  max-width: 860px;
  margin: 20px 0 0;
  padding: 16px 18px;
  background: #f7f9fb;
  border: 0;
  border-left: 2px solid #168f83;
  border-radius: 0 !important;
  color: #526175;
  font-size: .92rem;
  line-height: 1.7;
}

/* Main calculator = research workbench */
main > .hero:not(.hero--home) + .container { max-width: 1180px; padding-top: 28px; }
main > .hero:not(.hero--home) + .container .calc-shell {
  margin-top: 0;
  border: 1px solid #d8e0e7;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(15,35,65,.035);
}
.calc-grid { grid-template-columns: minmax(310px,.9fr) minmax(0,1.25fr); }
.calc-panel { min-width: 0; padding: 28px 30px; }
.calc-panel.inputs {
  background: #f6f8fa;
  border-right: 1px solid #dce3e9;
}
.calc-panel.inputs > h2,
.calc-panel.results > h2 {
  margin-bottom: 8px;
  color: #66758a;
  font-size: .68rem;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.privacy-hint {
  margin-bottom: 22px;
  color: #7b8797 !important;
  font-size: .76rem;
}
.field { margin-bottom: 16px; }
.field label {
  margin-bottom: 7px;
  color: #4f5e72;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.input-affix, .input, select.input {
  height: 44px;
  border-color: #c8d2dc;
  border-radius: 0;
  background: #fff;
}
.input-affix input, .input { font-size: .98rem; }
.range-val { border-radius: 0 !important; }
.presets { margin-top: 9px; }
.preset {
  border-radius: 0;
  background: transparent;
  border-color: #d2dae2;
  color: #556477;
}
.preset.active {
  background: #071c3f;
  border-color: #071c3f;
  color: #fff;
}
.preset-note, .field-hint { font-size: .73rem; line-height: 1.5; }

/* Executive result hierarchy */
.calc-panel.results { background: #fff; }
.result-head {
  align-items: flex-end;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe5eb;
}
.result-head .label {
  color: #647286;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.growth-share {
  padding: 4px 7px;
  border: 1px solid rgba(22,143,131,.16);
  border-radius: 0;
  background: rgba(22,143,131,.055);
  color: #116f67;
  font-size: .68rem;
  font-weight: 700;
}
.fv {
  margin: 2px 0 20px;
  color: #071c3f;
  font-size: clamp(2.35rem,4.4vw,3.6rem);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.split {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  margin-bottom: 18px;
  border-top: 1px solid #e0e6eb;
  border-bottom: 1px solid #e0e6eb;
}
.split .split-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 13px 12px 12px 0;
  border-right: 1px solid #e0e6eb;
}
.split .split-row:last-child { padding-left: 16px; border-right: 0; }
.split .split-row b {
  grid-column: 2;
  margin-top: 2px;
  color: #13243c;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Secondary outputs resemble analyst callouts */
.withdraw-box, .result-box, .compare-result, .scenario-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.withdraw-box {
  margin: 18px 0;
  padding: 17px 18px;
  background: #f5f8fa;
  border: 1px solid #dde5eb;
  border-left: 3px solid #168f83;
}
.withdraw-box .label {
  color: #66758a;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.withdraw-amt {
  margin: 7px 0 9px;
  color: #071c3f !important;
  font-size: 1.8rem !important;
  font-weight: 650 !important;
  letter-spacing: -.035em;
}
.chart-box {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e0e6eb;
}
.chart-legend { color: #69778a; font-size: .72rem; }
.result-insight {
  margin: 18px 0 0;
  padding: 14px 0 14px 14px;
  border-left: 2px solid #168f83;
  background: transparent;
  color: #4e5d71;
  font-size: .84rem;
  line-height: 1.65;
}

/* Actions: one primary action, the rest quiet utilities */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e1e6eb;
}
.actions .btn {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 0;
  border-color: #cfd8e1;
  background: #fff;
  color: #445267;
  font-size: .78rem;
}
.actions .btn.primary {
  background: #071c3f;
  border-color: #071c3f;
  color: #fff;
}
.actions .btn:hover { border-color: #9facb9; background: #f7f9fb; }
.actions .btn.primary:hover { background: #102d5e; border-color: #102d5e; }

/* Scenario, yearly table and methodology = appendix treatment */
.scenario-compare {
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid #dce3e9;
}
.scenario-compare .section-head { margin-bottom: 10px; }
.scenario-compare .section-head h2 {
  color: #071c3f;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  text-transform: none;
}
.scenario-grid { gap: 0 !important; border-top: 1px solid #dce3e9; border-left: 1px solid #dce3e9; }
.scenario-grid > * {
  border: 0 !important;
  border-right: 1px solid #dce3e9 !important;
  border-bottom: 1px solid #dce3e9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
details.collapse {
  margin-top: 22px !important;
  border-top: 1px solid #dce3e9;
}
details.collapse summary {
  padding: 13px 0;
  color: #435269;
  font-size: .78rem;
  font-weight: 650;
}
.table-wrap { border: 1px solid #dce3e9; border-radius: 0; }
.table-scroll table th {
  background: #f3f6f8;
  color: #5b697b;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .08em;
}
.table-scroll table td {
  color: #35445a;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* Methodology and examples read as a research appendix */
.calc-shell + * { scroll-margin-top: 86px; }
.method-card {
  padding: 20px 0 !important;
  border: 0 !important;
  border-top: 1px solid #dce3e9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.method-card:last-of-type { border-bottom: 1px solid #dce3e9 !important; }
.method-card h3 {
  color: #071c3f;
  font-size: 1rem;
  font-weight: 650;
}
.formula-box {
  border-radius: 0 !important;
  border-color: #dbe3ea !important;
  background: #f4f7f9 !important;
  color: #26364d;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem;
}
.assumptions li { color: #536176; }

/* Desktop result pane stays visually anchored during long input forms. */
@media (min-width: 901px) {
  .calc-panel.results { position: relative; }
  .calc-panel.results > .result-head { margin-top: 1px; }
}

[data-theme="dark"] main > .hero:not(.hero--home) {
  background: linear-gradient(180deg,rgba(255,255,255,.018),transparent);
  border-bottom-color: var(--border);
}
[data-theme="dark"] main > .hero:not(.hero--home) h1,
[data-theme="dark"] .fv,
[data-theme="dark"] .withdraw-amt,
[data-theme="dark"] .scenario-compare .section-head h2,
[data-theme="dark"] .method-card h3 { color: var(--ink) !important; }
[data-theme="dark"] main > .hero:not(.hero--home) .quick-answer,
[data-theme="dark"] .calc-panel.inputs,
[data-theme="dark"] .withdraw-box,
[data-theme="dark"] .formula-box { background: var(--bg-soft) !important; border-color: var(--border) !important; }
[data-theme="dark"] .calc-panel.results,
[data-theme="dark"] .actions .btn { background: var(--bg) !important; }
[data-theme="dark"] .split,
[data-theme="dark"] .split .split-row,
[data-theme="dark"] .chart-box,
[data-theme="dark"] .actions,
[data-theme="dark"] .scenario-compare,
[data-theme="dark"] details.collapse,
[data-theme="dark"] .method-card { border-color: var(--border) !important; }
[data-theme="dark"] .actions .btn.primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #061410 !important; }

/* Dark mode readability: promote supporting calculator copy to accessible contrast. */
[data-theme="dark"] main > .hero:not(.hero--home) .sub,
[data-theme="dark"] main > .hero:not(.hero--home) .quick-answer,
[data-theme="dark"] .privacy-hint,
[data-theme="dark"] .field label,
[data-theme="dark"] .preset,
[data-theme="dark"] .preset-note,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .result-head .label,
[data-theme="dark"] .withdraw-box .label,
[data-theme="dark"] .chart-legend,
[data-theme="dark"] .result-insight,
[data-theme="dark"] details.collapse summary,
[data-theme="dark"] .assumptions li,
[data-theme="dark"] .table-scroll table th { color: var(--ink-soft) !important; }
[data-theme="dark"] .split .split-row,
[data-theme="dark"] .split .split-row b,
[data-theme="dark"] .table-scroll table td,
[data-theme="dark"] .formula-box,
[data-theme="dark"] .actions .btn { color: var(--ink) !important; }
[data-theme="dark"] .growth-share { color: #7bd4bf !important; background: rgba(58,166,140,.14) !important; border-color: rgba(123,212,191,.24) !important; }
[data-theme="dark"] .preset { border-color: var(--border-strong); }
[data-theme="dark"] .preset:hover { color: var(--ink); border-color: var(--brand); }
[data-theme="dark"] .preset.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #061410 !important; }
[data-theme="dark"] .input-affix,
[data-theme="dark"] .input,
[data-theme="dark"] select.input { background: var(--bg) !important; border-color: var(--border-strong) !important; color: var(--ink) !important; }
[data-theme="dark"] .input-affix .prefix,
[data-theme="dark"] .range-wrap span,
[data-theme="dark"] .real-note { color: var(--ink-soft) !important; }
[data-theme="dark"] .actions .btn:hover { background: var(--bg-soft) !important; border-color: var(--brand) !important; }

@media (max-width: 900px) {
  main > .hero:not(.hero--home) { padding: 22px 0 12px !important; }
  main > .hero:not(.hero--home) h1 { font-size: 1.9rem; }
  main > .hero:not(.hero--home) .quick-answer { margin-top: 14px; padding: 12px 14px; }
  main > .hero:not(.hero--home) + .container { padding-top: 18px; }
  .calc-grid { grid-template-columns: minmax(0,1fr); }
  .calc-panel { padding: 20px 18px; }
  .split { grid-template-columns: 1fr; }
  .split .split-row, .split .split-row:last-child { padding: 11px 0; border-right: 0; }
  .split .split-row + .split-row { border-top: 1px solid #e0e6eb; }
  .actions .btn { flex: 1 1 calc(50% - 8px); }
  [data-theme="dark"] .split .split-row + .split-row { border-top-color: var(--border); }
}