/* ============================================================
   Aspirean Wealth — calculator pages
   Loaded by src/layouts/CalculatorLayout.astro after styles.css, on
   calculator pages only. Everything reads the surface tokens in
   styles.css, so both colour schemes follow from the one
   prefers-color-scheme block there; nothing here needs its own dark rule
   except the chart series, which are tokens defined below.

   The first block is the tax-loss-harvesting page's inline <style>,
   moved here unchanged. The second is what the shared layout added.
   ============================================================ */

/* ---------- moved from tax-loss-harvesting-calculator.astro ---------- */
.calc-wrap { max-width: 880px; }
.calc-gate { border: 1px solid var(--line); background: var(--surface-lift); padding: 44px 40px; max-width: 560px; }
.calc-gate h2 { font-size: var(--step-2); font-weight: 300; margin: 10px 0 12px; }
.calc-gate p { color: var(--text-soft); max-width: 46ch; }
.calc-gate form { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.calc-gate .gate-fine { font-family: var(--sans); font-size: 0.75rem; color: var(--text-mid); margin-top: 14px; }
.calc-gate .gate-error { font-family: var(--sans); font-size: 0.8125rem; color: var(--error); margin: -6px 0 0; }
.calc-gate .gate-error[hidden] { display: none; }
.calc-tool[hidden] { display: none; }
.calc-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin: 8px 0 34px; align-items: end; }
@media (max-width: 860px) { .calc-inputs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calc-inputs { grid-template-columns: 1fr; } }
.field select {
  font: inherit; color: var(--text); background: transparent; border: 0;
  border-bottom: 1px solid var(--line); padding: 8px 2px; border-radius: 0;
}
.field select:focus-visible { outline: none; border-bottom: 1px solid var(--accent); box-shadow: 0 1px 0 var(--accent); }
.rate-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 40px; }
@media (max-width: 700px) { .rate-strip { grid-template-columns: 1fr; } }
.rate-chip { border: 1px solid var(--line); padding: 18px 20px; }
.rate-chip .rc-name { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); }
.rate-chip .rc-rate { font-size: var(--step-2); font-weight: 300; margin-top: 6px; color: var(--text); }
.rate-chip .rc-note { font-family: var(--sans); font-size: 0.72rem; color: var(--text-mid); margin-top: 4px; }
.calc-tool h2.calc-section-h { font-size: var(--step-1); letter-spacing: 0; max-width: none; font-weight: 400; margin: 44px 0 6px; }
.calc-section-sub { font-family: var(--sans); font-size: 0.8125rem; color: var(--text-mid); margin: 0 0 16px; }
.table-scroll { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc-table th { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); font-weight: 500; text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--text); white-space: nowrap; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; padding-left: 0; }
.calc-table td { font-family: var(--sans); font-size: 0.9rem; color: var(--text); text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.calc-table tr:last-child td { border-bottom: 1px solid var(--text); font-weight: 600; }
.calc-assume { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 28px; }
.calc-assume p { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.65; color: var(--text-soft); max-width: 76ch; margin: 0 0 12px; }

/* ---------- shared calculator layout ---------- */

/* Chart series. Tokens, not literals, so charts.js re-reads them at render
   time and a scheme switch repaints the data ink with the chrome. */
:root {
  --calc-series-1: var(--accent);   /* sage green: the path the page is about */
  --calc-series-2: var(--text);     /* ink: distinct from the text-mid axes */
  --calc-series-3: #8a6d3b;         /* ochre: the third path, warm against two cool lines */
}
@media (prefers-color-scheme: dark) {
  :root { --calc-series-3: #d2b27a; }
}

/* hero: the direct answer sits under the H1 as the lead, on ink in both
   schemes (article-hero and page-hero are ink bands) */
.calc-hero .lead {
  font-family: var(--sans); font-size: 1.125rem; line-height: 1.55;
  color: var(--paper-soft); text-shadow: none;
  max-width: 58ch; margin: 22px 0 0;
}
.article-hero.calc-hero h1 { max-width: 26ch; }

.calc-page .article h2:first-child { margin-top: 0; }
.calc-how ol, .calc-how ul { color: var(--text-soft); padding-left: 1.2em; margin: 0 0 1.4em; }
.calc-how li { margin: 0 0 10px; }

.calc-page .calc-gate { margin-top: 44px; }
/* a returning visitor's receipt is being checked: hold the form's space,
   show nothing, so neither answer moves the page or flashes the form */
.calc-gate.is-checking { visibility: hidden; }

.calc-hint { font-family: var(--sans); font-size: 0.75rem; line-height: 1.5; color: var(--text-mid); margin: 0; }
.field input[type="number"] { font-variant-numeric: tabular-nums; min-width: 0; }
.field input::placeholder { color: var(--text-mid); opacity: 1; }
.field select { min-width: 0; max-width: 100%; }
/* each field is label, control, hint on three rows shared across its grid
   row (subgrid), so a two-line label or a hint under one field leaves every
   control in the row on the same line; labels sit on the control. Without
   subgrid the grids' align-items: end still lines up fields without hints. */
.calc-inputs > .field, .calc-disclosure-body > .field {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px;
}
.calc-inputs > .field > label, .calc-disclosure-body > .field > label { align-self: end; }
.calc-inputs > .field > :not(label), .calc-disclosure-body > .field > :not(label) { align-self: start; }

/* the result: a hypothetical label, then one sentence with the number in it */
.calc-result { margin: 8px 0 34px; }
.calc-hypothetical {
  display: inline-block;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mid); border: 1px solid var(--line);
  padding: 4px 9px; margin: 0 0 14px;
}
.calc-verdict {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.25;
  color: var(--text); max-width: 34ch; margin: 0 0 12px;
}
.calc-verdict strong, .calc-verdict .calc-num {
  font-family: var(--serif); font-weight: 400;
  color: var(--accent); font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* KPI strip: the rate-chip look, four across, two on tablets, one on phones */
.calc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 0 0 40px; }
.calc-kpis .rate-chip { min-width: 0; }
.calc-kpis .rc-rate { font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
/* asset location's fourth KPI, in the example and the tool alike, is a
   phrase ("16 basis points"), not a figure: it keeps to one line and its
   size eases down with the card's width instead of breaking the phrase.
   The figures beside it keep the full size. */
[data-calc-page="asset-location"] .calc-kpis .rate-chip { container-type: inline-size; }
[data-calc-page="asset-location"] .calc-kpis .rate-chip:nth-child(4) .rc-rate {
  white-space: nowrap; font-size: clamp(1rem, 13.5cqi, var(--step-2));
  line-height: calc(var(--step-2) * 1.6);   /* the figures' line, so the notes below line up */
}
@media (max-width: 860px) { .calc-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* the static worked example: public, above the gate, same table as the tool */
.calc-example { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 28px; }
.calc-example > h2 { margin-top: 0; }
.calc-example .calc-example-inputs { font-family: var(--sans); font-size: 0.875rem; color: var(--text-soft); max-width: 68ch; margin: 0 0 24px; }
.calc-example figure { margin: 0; }
.calc-example figcaption, .calc-table caption {
  font-family: var(--sans); font-size: 0.8125rem; color: var(--text-mid);
  text-align: left; caption-side: top; padding: 0 0 12px;
}
.calc-example .calc-kpis { margin-top: 24px; }

/* "More detail": the advanced inputs, collapsed by default */
.calc-disclosure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: -10px 0 34px; }
.calc-disclosure > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mid); padding: 16px 0;
}
.calc-disclosure > summary::-webkit-details-marker { display: none; }
.calc-disclosure > summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.125rem; letter-spacing: 0;
  color: var(--accent); transition: transform 0.2s ease;
}
.calc-disclosure[open] > summary::after { transform: rotate(45deg); }
.calc-disclosure > summary:hover { color: var(--text); }
.calc-disclosure > summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.calc-disclosure-body {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px;
  padding: 6px 0 28px; align-items: end;
}
@media (max-width: 860px) { .calc-disclosure-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* charts: responsive SVG from public/js/calc/charts.js. overflow-x: clip
   keeps a tooltip near the edge from ever widening the page. */
.calc-chart { position: relative; width: 100%; min-width: 0; margin: 0 0 12px; overflow-x: clip; }
.calc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.calc-chart-tip {
  position: absolute; left: 0; top: 0; z-index: 2;
  transform: translate(-50%, 0); pointer-events: none; opacity: 0;
  transition: opacity 0.15s ease;
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.5; white-space: nowrap;
  color: var(--text); background: var(--surface-lift);
  border: 1px solid var(--line); padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
.calc-chart-tip b { font-weight: 500; }
.calc-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 0 0 12px;
  font-family: var(--sans); font-size: 0.8125rem; color: var(--text-soft);
}
.calc-legend li { display: flex; align-items: center; gap: 8px; }
.calc-legend .swatch { width: 18px; height: 2px; background: currentColor; flex: none; }
.calc-table tr.lit td { background: var(--surface-raised); }

/* definitions: the two or three terms a layperson will not know */
.calc-definitions { margin-top: 52px; }
.calc-definitions dl { margin: 0; max-width: 68ch; }
.calc-definitions dt { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--text); margin: 22px 0 6px; }
.calc-definitions dt:first-child { margin-top: 0; }
.calc-definitions dd { margin: 0; color: var(--text-soft); }

/* the assumptions block (A to D): each paragraph opens with its label */
.calc-assume h2 { margin-top: 0; }
.calc-assume p strong { color: var(--text); font-weight: 500; }

.calc-page [data-seo-faq] { margin-top: 64px; }
.calc-page .read-next { margin-top: 64px; }

/* phones: one column everywhere, and nothing wider than the screen */
@media (max-width: 560px) {
  .calc-kpis, .calc-disclosure-body { grid-template-columns: 1fr; }
  /* tables: tighter cells, the first column pinned while the rest scroll,
     and a soft shade at the right edge only while there is more to see
     (the surface-coloured cover travels with the content and hides the
     shade once the last column is in view) */
  .table-scroll {
    background:
      linear-gradient(to left, var(--surface) 40%, transparent) 100% 0 / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) 100% 0 / 14px 100% no-repeat scroll;
    background-color: var(--surface);
  }
  .calc-table { border-collapse: separate; border-spacing: 0; }
  .calc-table th, .calc-table td { padding: 6px 8px; }
  .calc-table td { font-size: 0.8rem; }
  .calc-table th { letter-spacing: 0.08em; }
  .calc-table th:first-child, .calc-table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface); padding-left: 0;
    box-shadow: inset -1px 0 0 var(--line);
  }
  .calc-table tr.lit td:first-child { background: var(--surface-raised); }
  .calc-gate { padding: 30px 22px; }
  .calc-verdict { max-width: none; }
  .calc-verdict strong, .calc-verdict .calc-num { white-space: normal; }
}

/* the hero eyebrow on a photo hero (page-hero) matches the ink one */
.calc-hero .eyebrow { color: var(--sage-glow); }
.calc-hero .eyebrow::before { background: var(--sage-glow); }