/* indicators.css — page-scoped layer for the "indicators" group (loaded after style.css; see DESIGN.md).
   Pages: sentiment, altcoin-season-index, bitcoin-rainbow-chart, halving-cycle, gas, stablecoins, tools.
   Pattern: page head → hero "instrument" (the big reading) + answer/KPIs → history chart → tables →
   method → FAQ → more tools → disclaimer. Colours come from tokens only; the rainbow is the one
   fixed data palette and is declared once below as page tokens. */

/* ---------------------------------------------------------------------
   0. Page tokens
   --------------------------------------------------------------------- */
.pg-indicators{
  /* Rainbow chart bands, top (0 = maximum bubble) to bottom (8 = fire sale). A data palette by
     convention of the genre; used by the chart polygons, swatches and the band ladder. */
  --rb-0:#B8322A; --rb-1:#D9532C; --rb-2:#EC7F2F; --rb-3:#F2AE3A; --rb-4:#E2CB45;
  --rb-5:#97C25A; --rb-6:#4DA86A; --rb-7:#3C86B8; --rb-8:#5656AE;
  --rb-fill:.55;
  --zone-fill:.14;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pg-indicators{--rb-fill:.42;--zone-fill:.2} }
:root[data-theme="dark"] .pg-indicators{--rb-fill:.42;--zone-fill:.2}

/* zone tones (Fear & Greed): data colours, never used for text */
.ind-z1{--z:var(--g1)} .ind-z2{--z:var(--g2)} .ind-z3{--z:var(--g3)} .ind-z4{--z:var(--g4)} .ind-z5{--z:var(--g5)}
.rb-0{--rb:var(--rb-0)} .rb-1{--rb:var(--rb-1)} .rb-2{--rb:var(--rb-2)} .rb-3{--rb:var(--rb-3)} .rb-4{--rb:var(--rb-4)}
.rb-5{--rb:var(--rb-5)} .rb-6{--rb:var(--rb-6)} .rb-7{--rb:var(--rb-7)} .rb-8{--rb:var(--rb-8)}

/* ---------------------------------------------------------------------
   1. Page head: quiet dot-grid illustration on the right
   --------------------------------------------------------------------- */
.pg-indicators .phead{isolation:isolate}
.pg-indicators .phead::before{content:"";position:absolute;inset:0 0 0 35%;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 13%,transparent) 1px,transparent 0);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 65% 85% at 90% 10%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 65% 85% at 90% 10%,#000 10%,transparent 70%)}
.pg-indicators .phead{padding-bottom:var(--sp-6)}

/* ---------------------------------------------------------------------
   2. Hero: instrument + answer/KPI column
   --------------------------------------------------------------------- */
.ind-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-5);align-items:stretch;margin:0 0 var(--sp-10)}
@media (max-width:1023px){ .ind-hero{grid-template-columns:minmax(0,1fr)} }
.ind-hero--wide{grid-template-columns:minmax(0,1fr)}
.ind-hero__side{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.ind-hero__side>.answer{margin:0}
.ind-hero__side>.kpis{margin-top:auto}

/* The instrument: a premium widget with the one big reading. --tone tints it. */
.instr{--tone:var(--accent);display:flex;flex-direction:column;gap:var(--sp-5);padding:clamp(1.25rem,3vw,2rem);overflow:hidden;isolation:isolate;box-shadow:var(--shadow)}
.instr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 70% at 50% 0%,color-mix(in srgb,var(--tone) 10%,transparent),transparent 70%)}
.instr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 10%,transparent) 1px,transparent 0);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000,transparent 75%)}
.instr--z1{--tone:var(--g1)} .instr--z2{--tone:var(--g2)} .instr--z3{--tone:var(--muted)} .instr--z4{--tone:var(--g4)} .instr--z5{--tone:var(--g5)}
.instr__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.instr__k{display:inline-flex;align-items:center;gap:.5rem;font:600 var(--fs-12)/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.instr__date{font:500 var(--fs-13)/1.2 var(--font-sans);color:var(--muted);font-variant-numeric:tabular-nums}
.instr__read{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;min-width:0}
.instr__v{font:700 clamp(3.5rem,2.4rem + 5vw,6rem)/.92 var(--font-sans);letter-spacing:-.055em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--text)}
.instr__v--md{font-size:clamp(2.5rem,1.9rem + 2.8vw,4rem);letter-spacing:-.045em}
.instr__v--word{font-size:clamp(1.875rem,1.25rem + 1.6vw,2.625rem);letter-spacing:-.04em;line-height:1.05;overflow-wrap:break-word;text-wrap:balance}
.instr__unit{font:500 var(--fs-18)/1 var(--font-sans);color:var(--muted);letter-spacing:-.01em}
.instr__tag{display:inline-flex;align-items:center;gap:.5rem;min-height:32px;padding:0 .85rem;border-radius:var(--r-pill);width:fit-content;max-width:100%;
  background:color-mix(in srgb,var(--tone) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--tone) 34%,var(--line));font:600 var(--fs-14)/1.2 var(--font-sans);color:var(--text)}
.instr__tag i{width:8px;height:8px;border-radius:50%;background:var(--tone);flex:none}
.instr__foot{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-13);color:var(--muted);margin-top:auto}
.instr__foot strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.instr__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:center}
@media (max-width:639px){ .instr__row{grid-template-columns:minmax(0,1fr)} }

/* gauge dial (sentiment) */
.instr__dial{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3)}
.instr__dial .gauge{max-width:min(100%,320px);width:100%}
.instr__dial .instr__read{justify-content:center;margin-top:calc(-1 * var(--sp-2))}
.instr__ends{display:flex;justify-content:space-between;width:min(100%,320px);padding:0 9%;margin-top:calc(-1 * var(--sp-3));font:500 var(--fs-11)/1 var(--font-sans);color:var(--muted);font-variant-numeric:tabular-nums}

/* zone legend under the dial */
.ind-zones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ind-zones li{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .5rem .5rem;border-radius:var(--r-sm);min-width:0;position:relative;font-size:var(--fs-12);line-height:1.25;color:var(--muted);transition:background var(--dur)}
.ind-zones li::before{content:"";height:4px;border-radius:var(--r-pill);background:var(--z);margin-bottom:.3rem}
.ind-zones__n{font-weight:550;color:var(--text-2);overflow-wrap:break-word;hyphens:manual}
.ind-zones__r{font-size:var(--fs-11)}
.ind-zones li.is-on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ind-zones li.is-on .ind-zones__n{color:var(--text);font-weight:650}
@media (max-width:420px){ .ind-zones{gap:2px} .ind-zones li{padding:.45rem .25rem;font-size:var(--fs-11)} }

/* 0–100 meter with the five zone colours and a marker */
.ind-meter{position:relative;display:block;height:6px;border-radius:var(--r-pill);margin:.7rem 0 .2rem;
  background:linear-gradient(90deg,var(--g1) 0 24.5%,var(--g2) 0 44.5%,var(--g3) 0 55.5%,var(--g4) 0 74.5%,var(--g5) 0)}
.ind-meter>i{position:absolute;top:50%;left:var(--at,50%);width:12px;height:12px;border-radius:50%;background:var(--surface);border:2.5px solid var(--text);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm)}

/* ---------------------------------------------------------------------
   3. Sections, charts, legends
   --------------------------------------------------------------------- */
.ind-sec{margin:var(--sp-12) 0 0}
.ind-sec>.sec__h{margin-bottom:var(--sp-4)}
.ind-sec .sec__h h2{font-size:var(--fs-24)}
.ind-sec>.chart{margin-top:0}
.ind-chart{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-3)}
.ind-chart>*{grid-column:1/-1;min-width:0}
.ind-chart>.ind-chart__t{grid-column:1;margin:0 0 var(--sp-3)}
.ind-chart>.chart__tabs{grid-column:2;justify-self:end}
.ind-chart [data-panel],.ind-plot{position:relative;min-width:0}
.ind-chart__t{font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--text)}
.ind-chart__t span{display:block;font-weight:500;font-size:var(--fs-12);color:var(--muted);margin-top:.15rem}
@media (max-width:479px){
  .ind-chart{grid-template-columns:minmax(0,1fr)}
  .ind-chart>.chart__tabs{grid-column:1;justify-self:start}
}
.ind-legend{list-style:none;padding:var(--sp-3) 0 0;margin:var(--sp-3) 0 0;border-top:1px solid var(--line)}
.ind-legend li{display:inline-flex;align-items:center;gap:.45rem}
.ind-sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;background:var(--z,var(--rb,var(--accent)))}
.ind-sw--btc{background:var(--btc)} .ind-sw--alt{background:var(--alt)} .ind-sw--line{height:3px;width:14px;border-radius:2px;background:var(--chart-line)}
.ind-sw--muted{background:var(--surface-3)}

/* zone bands behind index charts (polygons are drawn by tl_line_chart in band order) */
.ind-chart--zones polygon{opacity:var(--zone-fill)}
.ind-chart--zones polygon:nth-of-type(1){fill:var(--g1)}
.ind-chart--zones polygon:nth-of-type(2){fill:var(--g2)}
.ind-chart--zones polygon:nth-of-type(3){fill:var(--g3)}
.ind-chart--zones polygon:nth-of-type(4){fill:var(--g4)}
.ind-chart--zones polygon:nth-of-type(5){fill:var(--g5)}
.ind-chart--season polygon{opacity:var(--zone-fill)}
.ind-chart--season polygon:nth-of-type(1){fill:var(--btc)}
.ind-chart--season polygon:nth-of-type(2){fill:var(--alt)}
.ind-chart--rainbow polygon{opacity:var(--rb-fill)}
.ind-chart--rainbow polygon:nth-of-type(1){fill:var(--rb-0)} .ind-chart--rainbow polygon:nth-of-type(2){fill:var(--rb-1)}
.ind-chart--rainbow polygon:nth-of-type(3){fill:var(--rb-2)} .ind-chart--rainbow polygon:nth-of-type(4){fill:var(--rb-3)}
.ind-chart--rainbow polygon:nth-of-type(5){fill:var(--rb-4)} .ind-chart--rainbow polygon:nth-of-type(6){fill:var(--rb-5)}
.ind-chart--rainbow polygon:nth-of-type(7){fill:var(--rb-6)} .ind-chart--rainbow polygon:nth-of-type(8){fill:var(--rb-7)}
.ind-chart--rainbow polygon:nth-of-type(9){fill:var(--rb-8)}
.ind-chart--rainbow .ln{stroke:var(--text);stroke-width:1.75}
.ind-chart--rainbow .hover-d{fill:var(--text)}

/* axis labels are in SVG units; on phones the 760-unit chart shrinks ~2.5x, so enlarge them */
@media (max-width:639px){ .pg-indicators .chart .ax{font-size:17px} }

/* table helpers */
.ind-tbl{min-width:0}
.ind-tbl td .ind-sw{margin-right:.55rem;vertical-align:-1px}
.ind-share{display:inline-flex;align-items:center;justify-content:flex-end;gap:.6rem;width:100%}
.ind-share__bar{flex:1 1 auto;min-width:48px;max-width:160px;height:6px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;overflow:hidden}
.ind-share__bar>i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:var(--z,var(--accent))}
.ind-share .num{min-width:3.6em;text-align:right}
.ind-note{font-size:var(--fs-13);color:var(--muted);margin:var(--sp-3) 0 0}

/* stacked distribution bar (share of days / supply) */
.ind-dist{display:flex;gap:2px;height:12px;border-radius:var(--r-pill);overflow:hidden;margin:0 0 var(--sp-4);background:var(--surface-3)}
.ind-dist>i{flex:var(--n,1) 1 0;min-width:2px;background:var(--z,var(--accent))}

/* method block */
.ind-method{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.25rem,3vw,2.25rem);margin:var(--sp-12) 0 0;position:relative}
.ind-method>h2:first-child,.ind-method>.ind-method__k+h2{margin-top:0}
.ind-method__k{display:inline-flex;align-items:center;gap:.45rem;font:600 var(--fs-12)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
.ind-method__k svg{width:15px;height:15px}
.ind-method ol{list-style:none;padding:0;counter-reset:ind-step;display:grid;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-5)}
.ind-method ol>li{counter-increment:ind-step;position:relative;padding:var(--sp-3) var(--sp-4) var(--sp-3) 3.25rem;margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-16);line-height:1.6}
.ind-method ol>li::before{content:counter(ind-step);position:absolute;left:var(--sp-4);top:var(--sp-3);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font:650 var(--fs-12)/1 var(--font-sans);font-variant-numeric:tabular-nums;margin-top:.1rem}
.ind-method .kpis{margin:var(--sp-5) 0;max-width:none}
.ind-formula{font-family:var(--font-mono);font-size:var(--fs-15);line-height:1.6;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);overflow-wrap:anywhere}

.pg-indicators .faq{margin-top:var(--sp-12)}
.pg-indicators .related-tools{margin-top:var(--sp-10)}

/* ---------------------------------------------------------------------
   4. Sentiment: history tiles
   --------------------------------------------------------------------- */
.ind-ago .kpi__v{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.ind-ago .kpi__m{color:var(--text-2);font-weight:500}

/* ---------------------------------------------------------------------
   5. Altcoin season: split bar, pin, waffle
   --------------------------------------------------------------------- */
.ind-season{position:relative;padding-top:1.9rem}
.ind-season .bar--split{height:14px}
.ind-season .bar--split>i{top:-5px;bottom:-5px;width:5px!important}
.ind-season__pin{position:absolute;top:0;left:var(--at,50%);transform:translateX(-50%);font:650 var(--fs-12)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--surface);background:var(--text);padding:.28rem .45rem;border-radius:var(--r-xs);white-space:nowrap}
.ind-season__zones{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:.6rem;font-size:var(--fs-13);color:var(--muted)}
.ind-season__zones span{display:inline-flex;align-items:center;gap:.4rem}
.ind-waffle{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:3px;margin-top:var(--sp-2)}
.ind-waffle>i{aspect-ratio:1;border-radius:2px;background:var(--surface-3)}
.ind-waffle>i.on{background:var(--alt)}
@media (max-width:479px){ .ind-waffle{grid-template-columns:repeat(10,minmax(0,1fr))} }
.ind-waffle__k{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-13);color:var(--muted);margin-top:var(--sp-3)}
.ind-waffle__k span{display:inline-flex;align-items:center;gap:.4rem}
.ind-waffle__k strong{color:var(--text);font-variant-numeric:tabular-nums}
.ind-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-6);align-items:start;margin-top:var(--sp-12)}
.ind-split>*{min-width:0}
.ind-split .ind-method{margin:0;position:sticky;top:calc(var(--hd-sticky) + 16px)}
.ind-split .ind-sec{margin:0}
@media (max-width:1023px){ .ind-split{grid-template-columns:minmax(0,1fr)} .ind-split .ind-method{position:static} }

/* ---------------------------------------------------------------------
   6. Rainbow: band ladder
   --------------------------------------------------------------------- */
.rb-ladder{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rb-ladder li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:.75rem;align-items:center;min-height:34px;padding:.3rem .6rem;border-radius:var(--r-sm);font-size:var(--fs-14);color:var(--text-2)}
.rb-ladder li::before{content:"";width:12px;height:22px;border-radius:4px;background:var(--rb)}
.rb-ladder__n{min-width:0;overflow-wrap:anywhere}
.rb-ladder__r{font-size:var(--fs-13);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-ladder li.is-on{background:color-mix(in srgb,var(--rb) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rb) 45%,var(--line));color:var(--text);font-weight:650}
.rb-ladder li.is-on .rb-ladder__r{color:var(--text-2)}
.rb-ladder__here{display:inline-flex;align-items:center;margin-left:.5rem;padding:.1rem .45rem;border-radius:var(--r-xs);background:var(--text);color:var(--surface);font:650 var(--fs-11)/1.3 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
@media (max-width:359px){ .rb-ladder li{grid-template-columns:10px minmax(0,1fr);row-gap:0} .rb-ladder li::before{grid-row:span 2;height:30px} .rb-ladder__r{grid-column:2} }
.instr--rb{--tone:var(--rb)}
.instr--rb .instr__row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
@media (max-width:639px){ .instr--rb .instr__row{grid-template-columns:minmax(0,1fr)} }
.instr .kv{margin-top:var(--sp-2);border-top:1px solid var(--line)}
.rb-strip{display:flex;gap:2px;height:10px;margin-top:var(--sp-2)}
.rb-strip>i{flex:1;border-radius:2px;background:var(--rb);opacity:.35}
.rb-strip>i.on{opacity:1;transform:scaleY(1.5)}

/* ---------------------------------------------------------------------
   7. Halving: progress ring, countdown, era timeline
   --------------------------------------------------------------------- */
.hv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
@media (max-width:539px){ .hv{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center} }
.hv-ring{position:relative;width:clamp(180px,22vw,232px);aspect-ratio:1;display:grid;place-items:center;text-align:center;flex:none}
.hv-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1%),var(--surface-3) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px));mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px))}
.hv-ring::after{content:"";position:absolute;inset:22px;border-radius:50%;border:1px dashed var(--line-2)}
.hv-ring__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.hv-ring__v{font:700 clamp(2rem,1.6rem + 1.6vw,2.75rem)/1 var(--font-sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--text)}
.hv-ring__l{font-size:var(--fs-12);color:var(--muted);max-width:12ch;line-height:1.3}
.hv-count{display:grid;gap:var(--sp-4);min-width:0}
.hv-count__big{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
@media (max-width:539px){ .hv-count__big{justify-content:center} }
.hv-count__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.hv-count__cell{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--surface-2) 60%,var(--surface));min-width:0}
.hv-count__cell--wide{grid-column:1/-1}
.hv-count__cell .kpi__k{margin-bottom:.25rem}
.hv-count__cell .kpi__v{font-size:var(--fs-20)}
.hv-bar{height:10px}
.hv-bar>i{width:var(--w,0%);background:var(--accent)}
.hv-bar__t{margin:.5rem 0 0;font-size:var(--fs-13);color:var(--muted)}

.hv-eras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2)}
@media (max-width:1023px){ .hv-eras{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:479px){ .hv-eras{grid-template-columns:repeat(2,minmax(0,1fr))} }
.hv-era{display:flex;flex-direction:column;gap:.35rem;padding:var(--sp-3) var(--sp-4) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0;position:relative}
.hv-era__y{font:600 var(--fs-12)/1.2 var(--font-sans);color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hv-era__r{font:650 var(--fs-20)/1.1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.hv-era__r small{font-size:var(--fs-12);font-weight:500;color:var(--muted);letter-spacing:0}
.hv-era__h{font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.hv-era__b{display:block;height:4px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;overflow:hidden;margin-top:.3rem}
.hv-era__b>i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--text-2);border-radius:inherit}
.hv-era--now{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:var(--ring)}
.hv-era--now .hv-era__b>i{background:var(--accent)}
.hv-era--now .hv-era__y{color:var(--accent)}
.hv-era--next{border-style:dashed;background:transparent}
.hv-era--next .hv-era__r{color:var(--text-2)}

/* ---------------------------------------------------------------------
   8. Gas: tier meter + tier cards
   --------------------------------------------------------------------- */
.gas-meter{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.gas-meter li{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-14);color:var(--text-2)}
.gas-meter__b{height:8px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;overflow:hidden}
.gas-meter__b>i{position:absolute;inset:0 auto 0 0;width:max(6px,var(--w,0%));border-radius:inherit;background:var(--text-2)}
.gas-meter li.is-on{color:var(--text);font-weight:600}
.gas-meter li.is-on .gas-meter__b>i{background:var(--accent)}
.gas-meter .num{font-weight:600;color:var(--text);white-space:nowrap}
.gas-tier{display:flex;flex-direction:column;gap:var(--sp-2)}
.gas-tier__v{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .3rem}
.gas-tier__v .figure{font-size:clamp(2rem,1.6rem + 1.4vw,2.5rem)}
.gas-tier__v small{font-size:var(--fs-14);color:var(--muted);font-weight:500}
.gas-tier .kv{margin-top:var(--sp-2);border-top:1px solid var(--line)}
.gas-tier.is-on{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow),var(--ring)}
.gas-tier.is-on .eyebrow{color:var(--accent)}
.gas-btc .tile-num{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin:.3rem 0 .4rem}
.gas-btc .figure{font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem)}
.gas-btc small{font-size:var(--fs-14);color:var(--muted);font-weight:500}
.gas-btc .muted{display:block;line-height:1.45}

/* ---------------------------------------------------------------------
   9. Stablecoins: share bar + legend
   --------------------------------------------------------------------- */
.st-1{--z:var(--accent)} .st-2{--z:color-mix(in srgb,var(--accent) 65%,var(--surface))} .st-3{--z:color-mix(in srgb,var(--accent) 42%,var(--surface))}
.st-4{--z:var(--text-2)} .st-5{--z:color-mix(in srgb,var(--text-2) 55%,var(--surface))} .st-0{--z:var(--line-2)}
.st-dist{height:16px;border-radius:var(--r-sm);margin:0}
.st-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem var(--sp-5)}
.st-legend li{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-14);color:var(--text-2);min-width:0}
.st-legend .ind-sw{background:var(--z)}
.st-legend__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-legend .num{margin-left:auto;font-weight:600;color:var(--text)}
@media (max-width:420px){ .st-legend{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------------
   10. Tools hub: app-launcher
   --------------------------------------------------------------------- */
.lx{margin:var(--sp-4) 0 var(--sp-12)}
.lx+.lx{margin-top:0}
.lx .sec__h h2{font-size:var(--fs-24)}
.lx-grid{display:grid;gap:var(--sp-4)}
.lx-grid--live{grid-template-columns:repeat(3,minmax(0,1fr))}
.lx-grid--apps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){ .lx-grid--live{grid-template-columns:repeat(2,minmax(0,1fr))} .lx-grid--apps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .lx-grid--live,.lx-grid--apps{grid-template-columns:minmax(0,1fr)} }
.lx-app{display:flex;flex-direction:column;gap:var(--sp-2);height:100%;overflow:hidden;isolation:isolate}
.lx-app__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.lx-app__h .tool__ic{margin:0}
.lx-app__go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-size:var(--fs-14);flex:none;transition:transform var(--dur) var(--ease),color var(--dur),border-color var(--dur),background var(--dur)}
.lx-app:hover .lx-app__go{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);transform:translateX(2px)}
.lx-app h3{margin-top:var(--sp-2)}
.lx-app--live{padding:var(--sp-5)}
.lx-app--live::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
.lx-app--live .tool__v{margin-top:var(--sp-1);padding-top:0;font:700 clamp(1.5rem,1.25rem + 1vw,1.875rem)/1.1 var(--font-sans);letter-spacing:-.03em;color:var(--text)}
.lx-app--live p{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.lx-viz{display:block;min-height:22px;padding:.35rem 0 .15rem}
.lx-viz .ind-meter{margin:.45rem 0 .2rem}
.lx-viz .bar{display:block;height:8px}
.lx-viz .bar--split{margin:.45rem 0 .2rem}
.lx-viz .rb-strip{margin-top:.4rem}
.lx-viz .ind-dist{margin:.4rem 0 0;height:8px}
.lx-viz .gas-meter__b{display:block;margin-top:.45rem}
.lx-viz .gas-meter__b>i{background:var(--accent)}
.lx-live{display:inline-flex;align-items:center;gap:.4rem;font:600 var(--fs-11)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lx-app--sm{flex-direction:row;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5)}
.lx-app--sm .tool__ic{margin:0}
.lx-app--sm h3{margin:0 0 .25rem;font-size:var(--fs-15)}
.lx-app--sm .lx-app__b{min-width:0}
.lx-app--sm p{font-size:var(--fs-13);line-height:1.5}
@media (min-width:640px) and (max-width:1023px){ .lx-app--sm{padding:var(--sp-4)} }

/* print: instruments stay legible on white */
@media print{
  .instr,.ind-method{box-shadow:none!important;break-inside:avoid}
  .instr::before,.instr::after,.pg-indicators .phead::before,.lx-app--live::before{display:none}
}