/* Microsite Blueprint — live price chart component.
   Pairs with price_chart.py + the [data-pc-chart] block in main.js.
   Implements wiki/framework/live-data-components.md. Import AFTER the site's
   base stylesheet so the tokens below can lean on it.

   Dataviz rules encoded here rather than left to taste:
     - one series, so one accent and no legend box;
     - hairline SOLID gridlines one step off the surface (never dashed);
     - 2px line, round caps; area fill is a ~10% wash, not a saturated block;
     - the end dot carries a 2px ring in the SURFACE color so it stays legible
       where it crosses the line;
     - text wears text tokens, never the series color;
     - proportional figures on the hero price, tabular-nums only in the
       table and axis columns where digits must align vertically.
   Dark mode is SELECTED below (its own steps against the dark surface), not
   an automatic inversion of the light values. */

:root{
  --pc-surface:#fff;
  --pc-line:#1E6FBF;           /* series accent — 4.6:1 on white */
  --pc-fill:rgba(30,111,191,.10);
  --pc-grid:#e6eaf0;           /* one step off the surface, recessive */
  --pc-ink:var(--ink,#1a1a2e);
  --pc-ink-soft:var(--ink-soft,#4a5a6a);
  --pc-up:#0F7B4F;             /* 4.8:1 on white */
  --pc-down:#C02B2B;           /* 5.1:1 on white */
  --pc-radius:var(--radius,6px);
}

/* ---------------------------------------------------------------- hero ---- */
.pc-hero{background:var(--bg-alt,#f5f7fa);border-bottom:1px solid var(--line,#e3e8ee);padding:44px 0 38px}
.pc-hero__inner{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.pc-hero__main{flex:1 1 320px}
.pc-hero h1{margin:0 0 .3em}
.pc-hero__sub{color:var(--pc-ink-soft);margin:0 0 .8em;max-width:52ch}

/* The hero figure: body sans, never the Georgia --font-head (a serif price
   reads as decoration), and proportional figures — tabular-nums makes a
   number like $121 look loose at display sizes. */
.pc-price{font-family:var(--font-body);font-size:clamp(2.6rem,7vw,4rem);font-weight:700;
  line-height:1.05;margin:0 0 .15em;letter-spacing:-.02em;color:var(--pc-ink)}
.pc-price__unit{font-size:.9rem;font-weight:500;color:var(--pc-ink-soft);letter-spacing:0;margin-left:.4em}
.pc-price.is-stale .pc-price__value{opacity:.55}

.pc-change{font-size:1rem;font-weight:600;margin:0 0 .5em;color:var(--pc-ink-soft)}
.pc-change__sep{margin:0 .5em;color:var(--pc-grid)}
.is-up{color:var(--pc-up)}
.is-down{color:var(--pc-down)}
.is-flat{color:var(--pc-ink-soft)}
.pc-stamp{font-size:.85rem;color:var(--pc-ink-soft);margin:0}

/* --------------------------------------------------------------- chart ---- */
.pc-section{padding:48px 0}
.pc-intro{color:var(--pc-ink-soft);max-width:68ch}

/* Filter row: ONE row, above the card — never inside it. */
.pc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.pc-tab{font:inherit;font-size:.85rem;font-weight:600;padding:.45em 1em;cursor:pointer;
  background:var(--pc-surface);color:var(--pc-ink-soft);
  border:1px solid var(--line,#e3e8ee);border-radius:999px}
.pc-tab:hover{border-color:var(--pc-line);color:var(--pc-ink)}
.pc-tab.is-active{background:var(--pc-line);border-color:var(--pc-line);color:#fff}
.pc-tab:focus-visible{outline:2px solid var(--pc-line);outline-offset:2px}

.pc-card{position:relative;background:var(--pc-surface);border:1px solid var(--line,#e3e8ee);
  border-radius:var(--pc-radius);padding:18px 14px 8px}
.pc-chart{margin:0}
/* height:auto with the viewBox aspect preserved — the bottom padding in the
   viewBox already contains the x-axis label band, so the card never needs a
   nested scrollbar to show the axis. */
.pc-chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}

.pc-grid{stroke:var(--pc-grid);stroke-width:1;shape-rendering:crispEdges}
.pc-area{fill:var(--pc-fill);stroke:none}
.pc-line{fill:none;stroke:var(--pc-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pc-dot{fill:var(--pc-line);stroke:var(--pc-surface);stroke-width:2}
.pc-dot--muted{fill:var(--pc-ink-soft);stroke:var(--pc-surface);stroke-width:2}

/* Axis + label text wears text tokens, never the series color. */
.pc-axis{fill:var(--pc-ink-soft);font-family:var(--font-body);font-size:12px}
.pc-axis--y{font-variant-numeric:tabular-nums}
.pc-endlabel{fill:var(--pc-ink);font-family:var(--font-body);font-size:13px;font-weight:700}
.pc-peak{fill:var(--pc-ink-soft);font-family:var(--font-body);font-size:11px;font-weight:600}

/* The HTML `hidden` content attribute is NOT mapped to display:none inside the
   SVG namespace — without this rule the idle hover group paints at 0,0 as a
   stray dot in the chart's top-left corner. Caught on the first render. */
.pc-hover[hidden]{display:none}
.pc-crosshair{stroke:var(--pc-ink-soft);stroke-width:1;opacity:.45;shape-rendering:crispEdges}
.pc-hover-dot{fill:var(--pc-line);stroke:var(--pc-surface);stroke-width:2}

.pc-tip{position:absolute;pointer-events:none;z-index:5;background:var(--pc-ink);color:#fff;
  border-radius:var(--pc-radius);padding:8px 11px;font-size:.82rem;line-height:1.45;
  box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;transform:translate(-50%,-115%)}
/* Values lead, labels follow — the reader already has the series. */
.pc-tip b{display:block;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.pc-tip span{opacity:.75}
/* A short stroke of the series color keys the row — at tooltip density a
   filled box is data-weight ink doing a label's job. */
.pc-tip i{display:inline-block;width:12px;height:2px;background:var(--pc-line);
  vertical-align:middle;margin-right:6px;border-radius:2px}

.pc-source{font-size:.83rem;color:var(--pc-ink-soft);margin:14px 0 0;max-width:80ch}
.pc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- stats ---- */
.pc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line,#e3e8ee);border:1px solid var(--line,#e3e8ee);
  border-radius:var(--pc-radius);overflow:hidden;margin:26px 0 0}
.pc-stat{background:var(--pc-surface);padding:14px 16px}
.pc-stat dt{font-size:.78rem;color:var(--pc-ink-soft);margin:0 0 4px;text-transform:none}
.pc-stat__value{margin:0;font-size:1.15rem;font-weight:700;color:var(--pc-ink)}

/* --------------------------------------------------------------- table ---- */
.pc-table{width:100%;border-collapse:collapse;margin:26px 0 0;font-size:.92rem}
.pc-table caption{text-align:left;color:var(--pc-ink-soft);font-size:.85rem;padding-bottom:10px}
.pc-table th,.pc-table td{padding:.55em .7em;border-bottom:1px solid var(--line,#e3e8ee);text-align:left}
.pc-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--pc-ink-soft)}
.pc-table tbody th{font-weight:500}
/* Columns of numbers that align vertically — the one place tabular-nums belongs. */
.pc-table td{font-variant-numeric:tabular-nums}

/* Mobile: SVG text is in viewBox user units, so it shrinks with the chart —
   at a 375px viewport the 880-unit viewBox renders ~2.6x down, which turns a
   12px axis label into ~4.6px of unreadable grey. Scale the label sizes UP in
   user units so their RENDERED size stays ~11-12px. The gutters in
   price_chart.py are sized to hold these larger labels. */
@media (max-width:640px){
  .pc-section{padding:34px 0}
  .pc-card{padding:12px 8px 6px}
  .pc-axis{font-size:26px}
  .pc-axis--opt{display:none}   /* thin 6 date labels to 3 — they collide at this scale */
  .pc-endlabel{font-size:27px}
  .pc-peak{font-size:24px}
  .pc-dot{r:9}
  .pc-dot--muted{r:7}
  .pc-line{stroke-width:4}
  .pc-hover-dot{r:10}
  .pc-table{font-size:.85rem}
}

/* Tablet sits between the two scales. */
@media (min-width:641px) and (max-width:900px){
  .pc-axis{font-size:17px}
  .pc-endlabel{font-size:18px}
  .pc-peak{font-size:16px}
  .pc-line{stroke-width:2.6}
  .pc-dot{r:6}
}

/* ---------------------------------------------------------------- dark ---- */
/* OPT-IN, not automatic. The blueprint's base stylesheets (style.css and its
   variants) are light-only, so honouring prefers-color-scheme here by default
   produced a dark chart card marooned on a white page — verified in the
   browser, 2026-09-18. A site gets the dark chart only once its own shell goes
   dark too, by setting data-pc-theme="auto" on <html>.
   These steps are SELECTED against the dark surface, not an inversion of the
   light values: the accent is lifted to clear contrast on #12161d and the grid
   re-stepped one shade off THAT surface. */
@media (prefers-color-scheme:dark){
  :root[data-pc-theme="auto"]{
    --pc-surface:#12161d;
    --pc-line:#6FB3F2;
    --pc-fill:rgba(111,179,242,.13);
    --pc-grid:#252c38;
    --pc-ink:#e8ecf2;
    --pc-ink-soft:#9aa6b6;
    --pc-up:#4ECB8E;
    --pc-down:#F2726F;
  }
}

@media (prefers-reduced-motion:reduce){
  .pc-tab,.pc-price__value{transition:none}
}