/* Árindex page — KSH transaction prices + Eurostat house price index.
   Sits on top of base.css/pages.css; uses the shared tokens only. */

.ax-block {
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  padding: clamp(18px, 2.6vw, 30px);
}

.ax-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(16px, 2.4vw, 32px);
  align-items: flex-end;
  justify-content: space-between;
}
.ax-h2 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  margin: 0 0 .25em;
  color: var(--ink);
}
.ax-sub { margin: 0; font-size: .93rem; max-width: 54ch; }

.ax-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.ax-ctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ax-ctl > span {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* A field label has to be at least as readable as the control under it, and
     --ink-3 measures 4.1:1 here in light (the panel is over a warm patch of the
     aurora at this point in the page). One stop up clears the bar in both
     modes; base.css is not ours to retune. */
  color: var(--ink-2);
}
.ax-ctl .select { min-width: 150px; }
.ax-ctl-wide { flex: 1 1 260px; }
.ax-ctl-wide .select { min-width: 100%; }

/* combobox.js keeps the native <select> as the form's source of truth and hides
   it at 1×1px; the visible control is the .cb button beside it. The sizing
   rules above were written for the <select> and therefore also inflated the
   hidden one back to a real box — absolutely positioned, so it landed on top of
   whatever sat next to it. Size the visible control, and hold the native one at
   1×1 whatever else matches it. */
.ax-ctl > .cb { min-width: 150px; }
.ax-ctl-wide > .cb { min-width: 100%; }
.ax-ctl .select.cb-native,
.ax-ctl-wide .select.cb-native { min-width: 0; width: 1px; height: 1px; padding: 0; }

/* #axGeo is a real <select multiple> (see arindex.js — combobox.js cannot
   represent it), so it needs the listbox treatment, not the caret-and-one-line
   treatment .select gives it. */
#axGeo {
  padding: 6px;
  background-image: none;
  min-width: 100%;
  height: auto;
}
#axGeo option { padding: 7px 9px; border-radius: 9px; }
/* Browsers vary in how much of an <option> they let us paint; where the tint
   does not take, the UA's own selected highlight still reads clearly. */
#axGeo option:checked {
  background: var(--ax-optsel);
  color: var(--ink);
  font-weight: 600;
}

/* ── search + sort ─────────────────────────────────────────────────────── */
.ax-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: clamp(16px, 2.2vw, 24px) 0 12px;
}
.ax-search-row .input { flex: 1 1 220px; max-width: 340px; }
.ax-sortrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* .fpill / .bub live in map.css, which this page does not load — so these
   buttons were rendering as raw UA buttons (2px outset border, square corners)
   and the active sort had no visible state at all. Give them the same pill the
   rest of the site uses, scoped to this page. */
.ax-sortrow .fpill,
.ax-geo-quick .fpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ax-chip);
  box-shadow: var(--glass-rim);
  color: var(--ink-2);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .24s var(--ease), color .24s var(--ease), box-shadow .24s var(--ease);
}
.ax-sortrow .fpill:hover,
.ax-geo-quick .fpill:hover { background: var(--ax-chip-hover); color: var(--ink); }
.ax-sortrow .fpill:focus-visible,
.ax-geo-quick .fpill:focus-visible {
  outline: none;
  box-shadow: var(--glass-rim), 0 0 0 3.5px var(--brass-glow);
}
.ax-sortrow .fpill.on {
  background: linear-gradient(168deg, var(--fill-1) 0%, var(--fill-2) 100%);
  color: var(--fill-fg);
  box-shadow: inset 0 1px 0 var(--spec-soft), 0 8px 22px -10px rgba(var(--shadow-rgb),0.6);
}

/* ── area list ─────────────────────────────────────────────────────────── */
.ax-legendrow {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 1fr) 84px;
  gap: 12px;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--ax-rule);
}
/* The bar column only exists from the wide breakpoint down, so the header keeps
   three columns and the row grid collapses to match below. */
.ax-legendrow > :nth-child(2) { text-align: left; }
.ax-legendrow > :nth-child(3) { text-align: right; }

/* Column headers carry the units for every row below them; .muted (--ink-3)
   measures ~4.3:1 in both modes here, so they take the next stop up — which
   also gives the list the header/body hierarchy it was missing. */
.ax-legendrow.muted { color: var(--ink-2); }

.ax-list { list-style: none; margin: 0; padding: 0; }
.ax-row { border-bottom: 1px solid var(--ax-rule-2); }
.ax-row:last-child { border-bottom: 0; }

.ax-rowbtn {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 1fr) 84px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 12px;
  transition: background .18s var(--ease);
}
.ax-rowbtn:hover, .ax-rowbtn:focus-visible { background: var(--ax-row-hover); }
.ax-row.open .ax-rowbtn { background: var(--ax-row-open); }

.ax-rname { font-weight: 600; color: var(--ink); min-width: 0; }
.ax-tag {
  font-size: .66rem;
  letter-spacing: .06em;
  /* --ink-4 measures 2.4:1 light / 3.4:1 dark against this panel — under 4.5:1
     in BOTH modes, and this badge is the only thing saying "Budapest". Lifted
     one stop here rather than in base.css, which is not ours (same call
     calc.css and tka.css already made for .hint). */
  color: var(--ax-faint);
  border: 1px solid var(--ax-tag-line);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  vertical-align: middle;
}

/* Bar sits behind the price on wide screens; the price column carries the
   number so the bar is decoration, never the only encoding. */
.ax-rbar {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ax-track);
  overflow: hidden;
}
.ax-rfill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); transition: width .3s var(--ease); }

.ax-rprice { text-align: right; font-weight: 650; color: var(--ink); white-space: nowrap; }
/* Ditto: the unit is small, repeated 43×, and still has to be readable. */
.ax-rprice small { font-weight: 500; color: var(--ax-faint); font-size: .78em; }
/* .muted would give this --ink-3; routed through --ax-faint so the row's three
   quiet items (badge, unit, count) are one decision, not three. */
.ax-rtx { text-align: right; font-size: .85rem; white-space: nowrap; color: var(--ax-faint); }

/* ── expanded detail ───────────────────────────────────────────────────── */
.ax-detail { padding: 2px 12px 16px; }
.ax-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(16px, 3vw, 34px);
  align-items: center;
}
.ax-spark { width: min(320px, 100%); height: 90px; flex: 0 1 320px; }
.ax-detail-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.ax-detail-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ax-detail-stats span { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.ax-detail-stats strong { font-size: 1.02rem; color: var(--ink); }
.up { color: var(--forest); }
.down { color: var(--clay); }

.ax-note { font-size: .84rem; margin: 14px 0 0; max-width: 78ch; }

/* ── HPI chart ─────────────────────────────────────────────────────────── */
.ax-geo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2.4vw, 28px);
  align-items: flex-end;
  margin: clamp(16px, 2.2vw, 22px) 0 6px;
}
.ax-geo-quick { display: flex; flex-wrap: wrap; gap: 8px; }
/* (#axGeo listbox styling lives with the other control rules, above.) */

.ax-chart-wrap { margin: 14px 0 0; position: relative; }
.ax-chart { position: relative; width: 100%; }
.ax-svg { width: 100%; height: auto; display: block; overflow: visible; }

.ax-grid { stroke: var(--ax-grid); stroke-width: 1; }
.ax-base { stroke: var(--ax-base-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ax-cursor { stroke: var(--ax-cursor); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ax-ylab, .ax-xlab {
  font-family: var(--sans);
  font-size: 11px;
  /* --ink-4 is 2.5:1 light / 4.4:1 dark on the plot — axis labels are data. */
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ax-ylab { text-anchor: end; }
.ax-xlab { text-anchor: middle; }
/* The compact chart is drawn 1:1 with its container (arindex.js chartGeom), so
   these user units are real pixels — 11 would land under the legibility floor.
   Driven by a class, not a media query, so it can never drift out of step with
   the width threshold the JS actually uses. */
.ax-svg-compact .ax-ylab,
.ax-svg-compact .ax-xlab { font-size: 12px; }

.ax-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.ax-lg { display: inline-flex; align-items: center; gap: 7px; font-size: .87rem; color: var(--ink-2); }
.ax-lg i, .ax-stat-k i, .ax-tip-row i {
  width: 11px; height: 3px; border-radius: 2px; display: inline-block; flex: 0 0 auto;
}

.ax-tip {
  position: absolute;
  top: 8px;
  pointer-events: none;
  background: var(--ax-tip-bg);
  border: 1px solid var(--ax-tip-line);
  border-radius: 12px;
  padding: 8px 11px;
  font-size: .84rem;
  box-shadow: var(--ax-tip-shadow);
  min-width: 140px;
  z-index: 3;
}
.ax-tip strong { display: block; margin-bottom: 4px; color: var(--ink); }
.ax-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink-2); }
.ax-tip-row b { margin-left: auto; color: var(--ink); }

/* Phone readout: a block under the chart rather than a card floating over the
   very curve it is describing. */
.ax-tip-inline {
  position: static;
  margin-top: 10px;
  min-width: 0;
  box-shadow: none;
  background: var(--ax-tip-flat);
  border-color: transparent;
}

.ax-stats { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 3vw, 34px); margin-top: 16px; }
.ax-stat { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.ax-stat-k { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-2); }
.ax-stat-v { font-size: 1.5rem; font-weight: 650; color: var(--ink); line-height: 1.1; }
.ax-stat-sub { font-size: .78rem; }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.ax-cta {
  margin-top: clamp(26px, 3.6vw, 40px);
  padding: clamp(18px, 2.6vw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.ax-cta h3 { font-family: var(--display); font-size: 1.2rem; }

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Drop the bar column: at this width it is a few pixels wide and reads as
     noise, while the number stays fully legible. */
  .ax-rbar { display: none; }

  /* Two facts, two lines, no dead space. The old rule put the price and the
     transaction count in the same column on separate grid ROWS, which left the
     left half of every row empty and cost ~81px per area — nine screens of
     scrolling for 43 areas. Now the name and its transaction count stack on the
     left and the price block sits opposite them, spanning both lines. */
  .ax-legendrow, .ax-rowbtn { grid-template-columns: minmax(0, 1fr) auto; }

  .ax-legendrow {
    /* Column 2 now carries the price, so it must be labelled as the price. */
    font-size: .75rem;
    padding: 0 12px 7px;
  }
  .ax-legendrow > :nth-child(2) { display: block; text-align: right; }
  .ax-legendrow > :nth-child(3) { display: none; }

  .ax-rowbtn {
    column-gap: 12px;
    row-gap: 0;
    padding: 9px 12px;
    align-items: center;
  }
  .ax-rname { grid-column: 1; grid-row: 1; line-height: 1.35; }
  .ax-rtx {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    font-size: .78rem;
    line-height: 1.3;
  }
  .ax-rprice {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.2;
  }
  /* The unit repeats on all 43 rows, so keep it at the legibility floor and let
     it recede — the column header carries the loud version. */
  .ax-rprice small { display: block; font-size: .75rem; }
  .ax-tag { font-size: .75rem; padding: 1px 7px; }

  .ax-controls { width: 100%; }
  .ax-ctl { flex: 1 1 140px; }
  .ax-ctl > span { font-size: .78rem; letter-spacing: .07em; }
  .ax-ctl > .cb { min-width: 0; }
  .ax-ctl .select:not(.cb-native) { min-width: 0; width: 100%; }

  /* A 30-country listbox: give the options a finger-sized row and cap the
     height so it reads as a scrollable list instead of eating the screen. */
  /* 16px stops iOS zooming the page when the listbox takes focus. */
  #axGeo { font-size: 16px; height: 236px; }
  #axGeo option { padding: 13px 10px; }

  .ax-detail-stats span { font-size: .78rem; }
  .ax-stat-v { font-size: 1.25rem; }
  .ax-stat { min-width: 0; }
}

@media (max-width: 380px) {
  /* The combobox truncates its value with an ellipsis, which is right on a
     desktop-width control but hides the actual choice here ("Megyék + budapesti
     ker…"). Let it use a second line instead — the button is already full
     width, so nothing else has to move. */
  .ax-ctl .cb-btn { padding-top: .62em; padding-bottom: .62em; line-height: 1.32; }
  .ax-ctl .cb-val { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Longest label ("XXIII. kerület") plus the price needs every pixel here. */
  .ax-rowbtn, .ax-legendrow { column-gap: 8px; }
  .ax-rowbtn { padding: 9px 8px; }
  .ax-legendrow { padding: 0 8px 7px; }
  .ax-sortrow .fpill, .ax-geo-quick .fpill { padding: 0 13px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-rfill, .ax-rowbtn { transition: none; }
}

/* ── page palette ──────────────────────────────────────────────────────────
   Everything on this page that could not be said with a base.css token lives
   here, once, with a light value and a dark one. The light column is the
   original light design to the last hundredth of an alpha — this file's job in
   dark mode is to retheme, not to re-tune light.

   Two selectors per dark rule, always: the media query covers "follow the OS",
   the attribute covers a reader who forced dark from the switcher. */
:root {
  /* chips + rows */
  --ax-chip:        rgba(255, 255, 255, .66);
  --ax-chip-hover:  rgba(255, 255, 255, .88);
  --ax-row-hover:   rgba(255, 255, 255, .50);
  --ax-row-open:    rgba(255, 255, 255, .62);
  --ax-rule:        rgba(20, 23, 26, .07);
  --ax-rule-2:      rgba(20, 23, 26, .06);
  --ax-tag-line:    rgba(20, 23, 26, .14);
  --ax-track:       rgba(20, 23, 26, .07);
  --ax-optsel:      rgba(200, 154, 78, .26);

  /* The row's quiet text — badge, unit, transaction count. A custom property
     rather than a colour so that a row which lifts (hover / open) can restate
     it once and have all three follow; see the dark blocks. */
  --ax-faint:       var(--ink-3);

  /* chart furniture */
  --ax-grid:        rgba(20, 23, 26, .09);
  --ax-base-line:   rgba(168, 124, 63, .55);   /* --brass, translucent */
  --ax-cursor:      rgba(20, 23, 26, .32);
  --ax-tip-bg:      rgba(251, 249, 245, .96);
  --ax-tip-line:    rgba(20, 23, 26, .10);
  --ax-tip-shadow:  0 6px 20px rgba(20, 23, 26, .12);
  --ax-tip-flat:    rgba(20, 23, 26, .035);
  --ax-spark-area:  rgba(46, 125, 90, .14);

  /* The per-row heat bar is interpolated in JS (arindex.js heatColor), so its
     stops have to be readable from CSS. They are exactly the brand's three
     accents, which means the ramp re-tunes itself in dark with no dark block
     here and no second copy of the palette in the script. */
  --ax-heat-lo:     var(--forest);
  --ax-heat-mid:    var(--brass-lit);
  --ax-heat-hi:     var(--clay);

  /* Eight Eurostat lines that must stay separable from each other AND from the
     ground. This is the original set, tuned against bone. */
  --ax-s1: #2e7d5a; --ax-s2: #b8860b; --ax-s3: #7a5c3e; --ax-s4: #3b6ea5;
  --ax-s5: #a4453c; --ax-s6: #6b4c8a; --ax-s7: #2f7f8f; --ax-s8: #8a6d3b;
}

/* -- dark ------------------------------------------------------------------
   Not the light values inverted. The white films that read as "glass" on bone
   would read as headlights here, so they drop to a few percent; the ink-based
   rules and shadows become light instead; and the series palette is lifted to
   roughly 65% lightness, because mid-tones that separate cleanly on paper
   collapse into one another on near-black.

   The washes are deliberately quiet (4-6% rather than the light file's 50-62%):
   anything stronger lifts the row background far enough that the secondary text
   on it drops under 4.5:1, and a legible row matters more than a loud one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ax-chip:        rgba(255, 255, 255, .09);
    --ax-chip-hover:  rgba(255, 255, 255, .16);
    --ax-row-hover:   rgba(255, 255, 255, .04);
    --ax-row-open:    rgba(255, 255, 255, .06);
    --ax-rule:        rgba(255, 255, 255, .13);
    --ax-rule-2:      rgba(255, 255, 255, .07);
    --ax-tag-line:    rgba(255, 255, 255, .20);
    --ax-track:       rgba(255, 255, 255, .13);
    --ax-optsel:      rgba(210, 165, 92, .34);
    /* One stop louder than light's --ink-3, and deliberately so. Contrast
       compresses on a dark ground, and this panel is not one colour: the aurora
       drifts under it, so the same row measures anywhere from rgb(30,34,32) to
       rgb(48,53,50) depending on the moment. --ink-3 lands at 4.1-4.4:1 on the
       bright half of that range; --ink-2 clears 4.5:1 across all of it and still
       reads as the quiet text, because the price beside it is --ink. */
    --ax-faint:       var(--ink-2);

    --ax-grid:        rgba(255, 255, 255, .10);
    --ax-base-line:   rgba(232, 197, 131, .55); /* --brass-lit, translucent */
    --ax-cursor:      rgba(255, 255, 255, .42);
    /* Elevation by a lighter opaque surface, not by a deeper shadow — a
       translucent card here would let the very curve it describes show through. */
    --ax-tip-bg:      var(--surface-solid);
    --ax-tip-line:    rgba(255, 255, 255, .14);
    --ax-tip-shadow:  0 10px 30px rgba(0, 0, 0, .55);
    --ax-tip-flat:    rgba(255, 255, 255, .07);
    --ax-spark-area:  rgba(94, 156, 134, .22);

    /* Lifted to ~65-75% lightness AND re-spaced. A straight lift of the light
       set collapsed gold against brown (ΔE2000 12.1) and brown against khaki
       (6.1) — two lines that read as one is worse than a line that is merely
       dim. Re-tuned so the five a quick pick can show are ≥19 apart and all
       eight are ≥15, each still ≥3.9:1 against the brightest the panel gets.
       Slot order matches light, so Hungary is the green line in both themes. */
    --ax-s1: #5FBF93; --ax-s2: #E8BE63; --ax-s3: #BE8452; --ax-s4: #6FA8DC;
    --ax-s5: #EA7A83; --ax-s6: #A68CCC; --ax-s7: #4FC7C7; --ax-s8: #9C9A5A;
  }

}
/* Forced dark — keep in sync with the block above. */
:root[data-theme='dark'] {
  --ax-chip:        rgba(255, 255, 255, .09);
  --ax-chip-hover:  rgba(255, 255, 255, .16);
  --ax-row-hover:   rgba(255, 255, 255, .04);
  --ax-row-open:    rgba(255, 255, 255, .06);
  --ax-rule:        rgba(255, 255, 255, .13);
  --ax-rule-2:      rgba(255, 255, 255, .07);
  --ax-tag-line:    rgba(255, 255, 255, .20);
  --ax-track:       rgba(255, 255, 255, .13);
  --ax-optsel:      rgba(210, 165, 92, .34);
  --ax-faint:       var(--ink-2);

  --ax-grid:        rgba(255, 255, 255, .10);
  --ax-base-line:   rgba(232, 197, 131, .55); /* --brass-lit, translucent */
  --ax-cursor:      rgba(255, 255, 255, .42);
  --ax-tip-bg:      var(--surface-solid);
  --ax-tip-line:    rgba(255, 255, 255, .14);
  --ax-tip-shadow:  0 10px 30px rgba(0, 0, 0, .55);
  --ax-tip-flat:    rgba(255, 255, 255, .07);
  --ax-spark-area:  rgba(94, 156, 134, .22);

  --ax-s1: #5FBF93; --ax-s2: #E8BE63; --ax-s3: #BE8452; --ax-s4: #6FA8DC;
  --ax-s5: #EA7A83; --ax-s6: #A68CCC; --ax-s7: #4FC7C7; --ax-s8: #9C9A5A;
}

/* ══ HERO ══════════════════════════════════════════════════════════════════
   The page's opening statement: one area, its own line, its own two numbers.
   It replaces nothing below it — the national table and the European comparison
   keep their place, they just stop being the first thing asked of the reader. */
.ax-hero { padding: clamp(20px, 3vw, 32px); }
.ax-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.ax-hero-h1 {
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.06; letter-spacing: -0.025em;
  margin: 0.16em 0 0.22em;
  font-variation-settings: 'opsz' 60, 'SOFT' 10;
}
.ax-hero-sub { font-size: 0.9rem; max-width: 54ch; margin: 0; }
.ax-hero-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ax-here { white-space: nowrap; }
.ax-here svg { margin-right: 5px; vertical-align: -2px; }

.ax-hero-figs { display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; margin: clamp(14px, 2vw, 22px) 0 4px; }
.ax-fig { display: flex; flex-direction: column; gap: 2px; }
.ax-fig-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ax-fig-v {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 620;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.05;
}
.ax-fig-v small { font-family: var(--sans); font-size: 0.5em; font-weight: 600; color: var(--ink-3); }
.ax-fig-v.up { color: var(--forest); }
.ax-fig-v.down { color: var(--clay); }

.ax-hero-chart { position: relative; width: 100%; margin-top: 6px; }
.ax-hero-area { fill: var(--ax-spark-area, rgba(36,69,59,0.12)); stroke: none; }
.ax-hero-line { fill: none; stroke: var(--forest); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ax-hero-dot { fill: var(--forest); stroke: var(--paper); stroke-width: 1.6; }
.ax-hero .ax-note { margin-top: 8px; }

@media (max-width: 620px) {
  .ax-hero-head { flex-direction: column; align-items: stretch; }
  .ax-hero-controls { width: 100%; }
  .ax-hero-controls .ax-ctl { flex: 1 1 auto; }
  .ax-here { flex: 0 0 auto; min-height: 44px; }
}