/* ICONS. The .i2 stroke is the context layer and sits back; the primary stroke carries
   the subject. Two tones in one glyph is what stops an icon set reading as clipart. */
.ic{flex:none;color:var(--accent);vertical-align:-.24em}
.ic .i2{stroke:color-mix(in srgb,var(--accent) 42%,var(--muted-ink));}
.ic-lg{width:30px;height:30px}

/* SECTION TEXTURE. Three strata per band, per the methodology brain: a radial lift, a base
   wash, and a pattern overlay. Rotated by class so no two adjacent bands share a pattern.
   ⚠️ Opacities measured against this property's actual #fcfbf9 paper, not guessed. */
.band{position:relative;isolation:isolate}
.band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.band-a::before{background:
  radial-gradient(46rem 26rem at 88% 0%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 62%),
  repeating-linear-gradient(-42deg, color-mix(in srgb,var(--text) 3.2%,transparent) 0 1px, transparent 1px 46px)}
.band-b::before{background:
  radial-gradient(38rem 24rem at 6% 100%, color-mix(in srgb,var(--hue-operate) 10%,transparent), transparent 60%),
  radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--text) 5%,transparent) 1px, transparent 0) 0 0/26px 26px}
.band-c::before{background:
  radial-gradient(40rem 22rem at 50% -10%, color-mix(in srgb,var(--hue-money) 8%,transparent), transparent 58%),
  repeating-linear-gradient(90deg, color-mix(in srgb,var(--text) 2.6%,transparent) 0 1px, transparent 1px 32px),
  repeating-linear-gradient(0deg, color-mix(in srgb,var(--text) 2.6%,transparent) 0 1px, transparent 1px 32px)}

/* SECTION HEAD with icon. */
.shead{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.shead .ic{color:var(--accent)}

/* PILLS. Real state, never ornament: each one carries a value from the register. */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;text-transform:uppercase;padding:.3rem .62rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);white-space:nowrap}
.pill-w{border-color:color-mix(in srgb,var(--hue-money) 34%,transparent);background:color-mix(in srgb,var(--hue-money) 8%,transparent)}
.pill-g{border-color:color-mix(in srgb,var(--hue-operate) 34%,transparent);background:color-mix(in srgb,var(--hue-operate) 8%,transparent)}
.pill-row{display:flex;gap:.45rem;flex-wrap:wrap;margin:.9rem 0}

/* ── CHART: ranked county bars, with a hover reveal ──────────────────────────────── */
.vbars{display:grid;gap:.3rem;margin:1.5rem 0}
.vbar{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 5.2rem;gap:.9rem;align-items:center;
  padding:.42rem .55rem;border-radius:6px;transition:background .18s}
.vbar:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.vbar-l{font-size:.87rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbar-track{position:relative;height:19px;background:color-mix(in srgb,var(--text) 5%,transparent);border-radius:3px;overflow:hidden}
.vbar-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 88%,var(--text)),var(--accent));
  transform-origin:left;animation:vgrow .9s cubic-bezier(.16,1,.3,1) both}
.vbar-sub{position:absolute;inset:0 auto 0 0;border-radius:3px;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--paper) 55%,transparent) 0 3px,transparent 3px 6px)}
.vbar-n{font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}
.vbar-n small{display:block;font-size:.66rem;color:var(--muted-ink);letter-spacing:.02em}
@keyframes vgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.vbar-fill{animation:none}}

/* ── CHART: area curve, drawn from real yearly values ───────────────────────────── */
.varea{width:100%;height:auto;display:block;margin:1.3rem 0 .4rem;overflow:visible}
.varea .grid{stroke:color-mix(in srgb,var(--text) 9%,transparent);stroke-width:1}
.varea .fill{fill:url(#areaGrad)}
.varea .line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.5s cubic-bezier(.5,0,.2,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.varea .line{animation:none;stroke-dashoffset:0}}
.varea .dot{fill:var(--paper);stroke:var(--accent);stroke-width:2.2;transition:r .18s}
.varea g.pt:hover .dot{r:6}
.varea .lab{font-family:var(--mono);font-size:9.5px;fill:var(--muted-ink)}
.varea .val{font-family:var(--mono);font-size:11px;fill:var(--text);opacity:0;transition:opacity .18s}
.varea g.pt:hover .val{opacity:1}

/* ── CHART: the split, two cohorts as one bar ───────────────────────────────────── */
.vsplit{display:flex;height:52px;border-radius:8px;overflow:hidden;margin:1.4rem 0 .6rem;
  border:1px solid var(--line)}
.vsplit span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.82rem;font-weight:700;color:var(--paper);position:relative;transition:flex .5s ease}
.vsplit span::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 6px,transparent 6px 12px)}
.vkey{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.83rem;color:var(--muted-ink)}
.vkey i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.4rem;font-style:normal}

/* ── STAT TILES with hover lift ─────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin:1.5rem 0}
.tile{border:1px solid var(--line);border-radius:10px;padding:1.05rem 1.15rem;background:var(--paper);
  position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .22s}
.tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:0 10px 26px -18px color-mix(in srgb,var(--text) 55%,transparent)}
.tile::after{content:'';position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 6%,transparent);transition:transform .3s}
.tile:hover::after{transform:scale(1.25)}
.tile-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.tile-v{font-family:var(--display);font-size:1.85rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile-n{font-size:.82rem;color:var(--muted-ink);line-height:1.45;margin-top:.32rem}
@media (prefers-reduced-motion:reduce){.tile,.tile::after{transition:none}}