/* Shared styles for the Economy charts.
   Each chart page sets its own accent with `style="--ec-c:#..."` on the
   .ec-wrap element; everything below reads that variable so the line, dots,
   area fill and highlights all stay in sync. */

.ec-wrap{--ec-c:var(--accent);margin:1.5rem 0 1rem;}

.ec-svg{display:block;width:100%;height:auto;
  font-family:ui-sans-serif,system-ui,sans-serif;
  touch-action:pan-y;}

.ec-area{fill:var(--ec-c);opacity:0.10;}
.ec-line{fill:none;stroke:var(--ec-c);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;}
.ec-grid{stroke:var(--rule);stroke-width:1;}
.ec-zero{stroke:var(--muted);stroke-width:1;}
.ec-ref{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 3;opacity:0.5;}
.ec-reflbl{fill:var(--muted);font-size:9px;}
.ec-ytk,.ec-xtk{fill:var(--muted);font-size:9px;
  font-variant-numeric:tabular-nums;}
/* Axis titles (units), shown when a chart sets xLabel / yLabel. */
.ec-axt{fill:var(--muted);font-size:10px;font-weight:600;}

/* Event dots sit on noted years; the cursor + big dot follow the pointer. */
.ec-evt{fill:var(--bg);stroke:var(--ec-c);stroke-width:1.6;}
.ec-cursor{stroke:var(--fg);stroke-width:1;opacity:0.45;}
.ec-hi{fill:var(--ec-c);stroke:var(--bg);stroke-width:1.6;}
.ec-hit{fill:transparent;cursor:crosshair;outline:none;}
.ec-hit:focus-visible + .ec-focusring,
.ec-hit:focus-visible{outline:2px solid var(--fg);outline-offset:2px;}

/* Linear / log toggle */
.ec-tools{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;
  margin:0.1rem 0 0.25rem;
  font-family:ui-sans-serif,system-ui,sans-serif;}
.ec-tools .ec-lbl{font-size:0.8rem;color:var(--muted);}
.ec-btn{appearance:none;border:1px solid var(--muted);background:var(--bg);
  color:var(--fg);font:inherit;font-size:0.82rem;
  padding:0.25rem 0.65rem;border-radius:999px;cursor:pointer;line-height:1;}
.ec-btn:hover{border-color:var(--fg);}
.ec-btn[aria-pressed="true"]{background:var(--fg);color:var(--bg);
  border-color:var(--fg);}

/* Legend (multi-line charts) */
.ec-legend{display:flex;flex-wrap:wrap;gap:0.4rem 1rem;align-items:center;
  margin:0.1rem 0 0.4rem;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:0.85rem;}
.ec-leg{display:inline-flex;align-items:center;gap:0.4rem;}
.ec-swatch{display:inline-block;width:0.7em;height:0.7em;border-radius:2px;
  flex:0 0 auto;}

/* Readout under the chart */
.ec-readout{min-height:3.2rem;margin:0.5rem 0 0;font-size:0.9rem;
  font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;}
.ec-readout .ec-hint{color:var(--muted);}
.ec-readout .ec-leg-row{display:flex;align-items:center;gap:0.4rem;
  margin-top:0.15rem;}
.ec-readout .ec-leg-name{color:var(--muted);}
.ec-readout .ec-yr{font-weight:600;font-variant-numeric:tabular-nums;}
.ec-readout .ec-val{font-weight:600;font-variant-numeric:tabular-nums;}
.ec-readout .ec-chg{font-variant-numeric:tabular-nums;}
.ec-readout .ec-chg.up{color:#0a8a3f;}
.ec-readout .ec-chg.down{color:#c0392b;}
.ec-readout .ec-sub{color:var(--muted);}
.ec-readout .ec-note{display:block;color:var(--fg);margin-top:0.2rem;
  font-size:0.86rem;}

@media (prefers-color-scheme: dark){
  .ec-readout .ec-chg.up{color:#46c97e;}
  .ec-readout .ec-chg.down{color:#f0776a;}
}

.ec-caption{font-size:0.8rem;color:var(--muted);
  font-family:ui-sans-serif,system-ui,sans-serif;margin:0.35rem 0 0;}

/* Collapsible data table — keeps the raw numbers in the page for
   accessibility and so they're readable without JavaScript. */
.ec-data{margin:1.25rem 0 0;font-size:0.85rem;}
.ec-data summary{cursor:pointer;color:var(--accent);
  font-family:ui-sans-serif,system-ui,sans-serif;}
.ec-data .ec-data-scroll{overflow-x:auto;margin-top:0.6rem;
  -webkit-overflow-scrolling:touch;}
.ec-data table{border-collapse:collapse;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:0.8rem;
  font-variant-numeric:tabular-nums;}
.ec-data th,.ec-data td{border:1px solid var(--rule);
  padding:0.25rem 0.6rem;text-align:right;}
.ec-data th{text-align:right;color:var(--muted);font-weight:600;}
.ec-data td.ec-data-note{text-align:left;color:var(--muted);
  font-variant-numeric:normal;}

.sources{font-size:0.9rem;padding-left:1.1rem;margin:0.5rem 0 0;}
.sources li{margin:0.35rem 0;}

@media (prefers-reduced-motion: reduce){
  .ec-line,.ec-area{transition:none;}
}