/* home.css — page-scoped layer for the "home" group (loaded after style.css; see DESIGN.md).
   Tokens only. Mobile-first. Component prefixes:
   .hx hero · .hj jump nav · .hs section head · .hm movers · .hi indicators
   .hn news · .hc converter · .hl learn                                         */

/* ---------------------------------------------------------------------------
   Section heads: small accent label over each H2
   --------------------------------------------------------------------------- */
.hs__k{display:flex;color:var(--accent);margin-bottom:.6rem}
.hs__k::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex:none}
.hs .sec__intro{max-width:70ch}

/* ---------------------------------------------------------------------------
   HERO — the day's move, KPI strip, market map
   --------------------------------------------------------------------------- */
.hx{--hx-tint:var(--accent);position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.25rem,3.5vw,3.25rem) 0 clamp(1.75rem,4vw,3.5rem);border-bottom:1px solid var(--line)}
.hx--up{--hx-tint:var(--up)}
.hx--down{--hx-tint:var(--down)}
/* a quiet wash in the colour of the day's move, plus the dot grid from .deco-grid */
.hx::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 70% at 0% 0%,color-mix(in srgb,var(--hx-tint) 8%,transparent),transparent 72%),
    radial-gradient(45% 60% at 100% 0%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%)}
.hx__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,3.5vw,3.5rem);align-items:center}
@media (min-width:1024px){ .hx__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }
.hx__copy{min-width:0}

.hx__date{margin-bottom:var(--sp-5)}
.hx__badge{height:30px;padding:0 .8rem 0 .65rem;gap:.55rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text-2);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hx__badge .live{width:6px;height:6px}

.hx__h1{font-size:clamp(2.25rem,1.2rem + 2.9vw,3.75rem);line-height:1.04;letter-spacing:-.042em;font-weight:700;max-width:20ch}
/* the live number inside the H1: a tinted figure chip (arrow + sign + colour kept) */
.hx__h1 .d{display:inline-block;font-size:.88em;font-weight:700;letter-spacing:-.04em;line-height:1.08;
  padding:0 .2em .03em .16em;border-radius:.18em;white-space:nowrap}
.hx__h1 .d::before{font-size:.4em;vertical-align:.38em;margin-right:.16em}
.hx__h1 .d--up{background:var(--up-soft)}
.hx__h1 .d--down{background:var(--down-soft)}
.hx__h1 .d--flat{background:var(--surface-2)}

.hx__lede{font-size:clamp(var(--fs-17),1rem + .35vw,var(--fs-20));line-height:1.55;color:var(--text-2);margin:var(--sp-5) 0 var(--sp-6);max-width:56ch}

.hx__kpis{box-shadow:var(--shadow)}
.hx__kpi{display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.hx__kpi .kpi__v{font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
.hx__spark{display:block;margin-top:auto;padding-top:var(--sp-2)}
.hx__spark .spark{width:100%;max-width:120px;height:24px;margin:0}

.hx__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-5)}
.hx__meta .stamp{margin:0}
.hx__cta{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
@media (max-width:639px){
  .hx__cta{width:100%}
  .hx__cta .btn{flex:1 1 0;min-width:0}
}

/* market map card */
.hx__map{margin:0;padding:var(--sp-3);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
@media (min-width:768px){ .hx__map{padding:var(--sp-4)} }
.hx__maph{align-items:flex-start;margin:var(--sp-1) var(--sp-1) var(--sp-3)}
.hx__mapt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.hx__mapt .eyebrow{color:var(--text)}
.hx__mapsub{font-size:var(--fs-13);color:var(--muted);line-height:1.4}
.hx__mapall{display:inline-flex;align-items:center;gap:.3rem;min-height:30px;padding:0 .7rem;flex:none;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text-2);font-weight:550;text-decoration:none;transition:border-color var(--dur),background var(--dur),color var(--dur)}
.hx__mapall::after{content:"→"}
.hx__mapall:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--text)}
.hx__map .tm{background:var(--surface-2);border-radius:var(--r-md)}
.hx__mapfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-5);margin:var(--sp-3) var(--sp-1) var(--sp-1)}
.hx__key{flex:1 1 220px;min-width:0;max-width:340px}
.hx__key .map__key{margin:0}
.hx__key .map__key--labels{justify-content:space-between;margin-top:.35rem}
.hx__key .map__key--labels small{font-size:var(--fs-11);font-variant-numeric:tabular-nums}
.hx__breadth{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;font-size:var(--fs-13)}
.hx__breadth .badge{height:24px;font-size:var(--fs-12);letter-spacing:.02em;text-transform:none}

/* ---------------------------------------------------------------------------
   JUMP NAV — in-page section pills (scrolls inside itself on phones)
   --------------------------------------------------------------------------- */
.hj{background:var(--surface);border-bottom:1px solid var(--line)}
.hj__in{display:flex;align-items:center;gap:var(--sp-1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:var(--sp-2) 0;overscroll-behavior-x:contain}
.hj__in::-webkit-scrollbar{display:none}
.hj a{display:inline-flex;align-items:center;gap:.45rem;flex:none;height:36px;padding:0 .85rem;border-radius:var(--r-pill);
  font-size:var(--fs-14);font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap;transition:background var(--dur),color var(--dur)}
.hj a:hover{background:var(--surface-2);color:var(--text)}
.hj a:hover svg{color:var(--accent)}
.hj svg{width:16px;height:16px;color:var(--muted);flex:none;transition:color var(--dur)}

/* ---------------------------------------------------------------------------
   THE LEDGER (top-coins table)
   --------------------------------------------------------------------------- */
.hm-ledger .tbl-wrap{box-shadow:var(--shadow)}
.hm-ledger .tbl tbody td{padding-top:.8rem;padding-bottom:.8rem}
.hm-ledger .tbl td.num:nth-child(3){font-weight:600}

/* ---------------------------------------------------------------------------
   MOVERS — ranked lists with a magnitude bar behind each row
   --------------------------------------------------------------------------- */
.hm-movers{padding-top:0}
.hm{padding:0;overflow:hidden;display:flex;flex-direction:column}
.hm__h{display:flex;align-items:flex-start;gap:var(--sp-3) var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
.hm__ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.hm__ic svg{width:20px;height:20px}
.hm--up .hm__ic{background:var(--up-soft);color:var(--up)}
.hm--down .hm__ic{background:var(--down-soft);color:var(--down)}
.hm__t{min-width:0}
.hm__t h2{font-size:var(--fs-20);letter-spacing:-.02em;line-height:1.25}
.hm__t p{margin:.3rem 0 0}
.hm__list{counter-reset:mv;padding:0 var(--sp-3) var(--sp-3)}
.hm__list li{counter-increment:mv;isolation:isolate;padding:.5rem .75rem .5rem 2.25rem;border-bottom:1px solid var(--line)}
.hm__list li::before{content:counter(mv);position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  font:500 var(--fs-12)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--muted)}
.hm__list li::after{content:"";position:absolute;right:.75rem;bottom:-1px;height:2px;z-index:1;width:calc(var(--w,0%) * .6);border-radius:2px;opacity:.7}
.hm--up .hm__list li::after{background:var(--up)}
.hm--down .hm__list li::after{background:var(--down)}
.hm__list li:hover{background:var(--row-hover)}
.hm__list .coin{flex:1 1 auto;min-width:0}
.hm__list .num{font-weight:550;color:var(--text)}
.hm__list .coin>span:last-child{white-space:nowrap}
@media (max-width:639px){
  .hm__list .coin__n{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  .hm__list .coin__s{display:block;line-height:1.2}
}

/* ---------------------------------------------------------------------------
   INDICATORS — four instrument cards
   --------------------------------------------------------------------------- */
.hi__c{gap:var(--sp-3)}
.hi__k{display:flex;align-items:center;gap:.6rem;min-width:0}
.hi__ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.hi__ic svg{width:17px;height:17px}
.hi__viz{display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;min-height:8.75rem;margin-top:var(--sp-1)}
.hi__viz .gauge{width:150px;max-width:100%;margin-bottom:-.35rem}
.hi__unit{font:500 var(--fs-15)/1 var(--font-sans);letter-spacing:0;color:var(--muted)}
.hi__word{font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere}
.hi__bar{display:flex;flex-direction:column;gap:.45rem;margin-top:var(--sp-1)}
.hi__scale{display:flex;justify-content:space-between;gap:var(--sp-2);font:550 var(--fs-11)/1.2 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.hi__prog>i{background:var(--accent)}
.hi__bands{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;height:10px;align-items:center}
.hi__band{display:block;height:8px;border-radius:3px;opacity:.4}
.hi__band.is-on{height:14px;opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--text)}
/* cheap → expensive, built only from theme tokens */
.hi__band--1{background:var(--alt)}
.hi__band--2{background:color-mix(in srgb,var(--alt) 50%,var(--up))}
.hi__band--3{background:var(--up)}
.hi__band--4{background:var(--g4)}
.hi__band--5{background:color-mix(in srgb,var(--g4) 45%,var(--warn))}
.hi__band--6{background:var(--warn)}
.hi__band--7{background:var(--g2)}
.hi__band--8{background:color-mix(in srgb,var(--g2) 50%,var(--down))}
.hi__band--9{background:var(--down)}
.hi .inst__m{border-top:1px solid var(--line);padding-top:var(--sp-3);line-height:1.5}
@media (max-width:639px){ .hi__viz{min-height:0} }

/* ---------------------------------------------------------------------------
   NEWS — lead story card + latest list; typographic covers
   --------------------------------------------------------------------------- */
.hn{gap:clamp(1rem,2.5vw,1.5rem);align-items:stretch}
.hn__lead,.hn__list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);min-width:0}
.hn__lead{display:flex;flex-direction:column;padding:var(--sp-3);transition:border-color var(--dur),box-shadow var(--dur)}
.hn__lead:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.hn__media{display:block;position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none}
.hn__media .lead__img{border:0;border-radius:var(--r)}
.hn__media::after{content:"The Daily Coins";position:absolute;top:var(--sp-3);right:var(--sp-3);display:inline-flex;align-items:center;height:24px;padding:0 .6rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);font:600 var(--fs-11)/1 var(--font-sans);letter-spacing:.04em;box-shadow:var(--shadow-sm)}
.hn__media:has(img)::after{content:none}
.hn__body{padding:var(--sp-3) var(--sp-2) var(--sp-2)}
@media (min-width:768px){ .hn__body{padding:var(--sp-4) var(--sp-3) var(--sp-3)} }
.hn__body .meta{margin-top:0}
.hn__body h3{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);line-height:1.18;margin:var(--sp-3) 0}
.hn__body p{margin:0;color:var(--text-2);line-height:1.6}

.hn__list{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
@media (min-width:768px){ .hn__list{padding:var(--sp-5) var(--sp-5) var(--sp-3)} }
.hn__lt{margin:0 0 var(--sp-2)}
.hn__list .story{grid-template-columns:minmax(0,1fr) 72px;gap:var(--sp-4);padding:var(--sp-3) 0;align-items:center}
@media (min-width:768px){ .hn__list .story{grid-template-columns:minmax(0,1fr) 96px} }
.hn__list .story h3{font-size:var(--fs-15);line-height:1.4;letter-spacing:-.008em}
.hn__list .meta{margin-top:.35rem}
.hn__list .story__img{border:0}

/* covers: bigger type on the lead, varied tones down the list so a run of
   image-less stories reads as a designed set, not as missing photos */
.hn .cover{border:0}
.hn__lead .cover{padding:clamp(1rem,3vw,1.75rem);justify-content:flex-start;gap:var(--sp-3)}
.hn__lead .cover__k{font-size:var(--fs-12);color:var(--text-2)}
.hn__lead .cover__t{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);max-width:11ch;letter-spacing:-.045em}
.hn__list .story:nth-of-type(4n+1) .cover{--cv:var(--accent)}
.hn__list .story:nth-of-type(4n+2) .cover{--cv:var(--up)}
.hn__list .story:nth-of-type(4n+3) .cover{--cv:var(--warn)}
.hn__list .story:nth-of-type(4n) .cover{--cv:var(--text-2)}
.hn .cover--sm{padding:.45rem .5rem}
.hn .cover--sm .cover__i{font-size:1.5rem;color:color-mix(in srgb,var(--cv) 70%,var(--text))}

/* ---------------------------------------------------------------------------
   CONVERTER + POPULAR CONVERSIONS
   --------------------------------------------------------------------------- */
.hc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
@media (min-width:1024px){ .hc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-12);align-items:start} }
.hc__cv,.hc__pop{min-width:0}
@media (min-width:1024px){ .hc__cv{position:sticky;top:calc(var(--hd-sticky) + 16px)} }
.hc__cv .cv{box-shadow:var(--shadow);gap:var(--sp-4)}
.hc__cv .cv__out{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.hc__grp+.hc__grp{margin-top:var(--sp-5)}
.hc__gh{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hc__chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:var(--sp-2)}
@media (min-width:640px){ .hc__chips{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))} }
.hc__chips .chip{justify-content:space-between;flex-wrap:wrap;gap:.15rem .5rem;min-height:42px;padding:.45rem .8rem;border-radius:var(--r-md);
  font-size:var(--fs-13);font-weight:600;letter-spacing:.01em;color:var(--text);box-shadow:var(--shadow-sm)}
.hc__chips .chip .num{font-size:var(--fs-13);font-weight:500;color:var(--text-2)}
.hc__chips a.chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.hc__chips a.chip:hover .num{color:var(--accent)}

/* ---------------------------------------------------------------------------
   LEARN — featured guides + topic index
   --------------------------------------------------------------------------- */
.hl__c h3{font-size:var(--fs-17);line-height:1.35}
.hl__c p{margin-bottom:var(--sp-2)}
.hl__read{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line);
  font-size:var(--fs-13);font-weight:500;color:var(--muted)}
.hl__read::after{content:"→";transition:transform var(--dur) var(--ease),color var(--dur)}
.hl__c:hover .hl__read::after{transform:translateX(3px);color:var(--accent)}

.hl__idx{margin-top:var(--sp-6)}
@media (min-width:768px){ .hl__idx{padding:var(--sp-6) var(--sp-8)} }
.hl__idxh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1) var(--sp-4);margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.hl__idxh h3{font-size:var(--fs-20);letter-spacing:-.018em}
.hl__cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--sp-6) var(--sp-8)}
.hl__col{min-width:0}
.hl__col .eyebrow{margin:0 0 var(--sp-1)}
.hl__col .list a{min-height:40px;padding:.5rem 0;font-size:var(--fs-14);line-height:1.4;color:var(--text-2)}
.hl__col .list a:hover{color:var(--accent)}

/* ---------------------------------------------------------------------------
   Closing note + print
   --------------------------------------------------------------------------- */
.pg-home .note--legal{margin-top:var(--sp-4)}
@media print{
  .hj,.hx__cta,.hx__mapall{display:none!important}
  .hx::after,.hx::before{content:none}
  .hx__map,.hx__kpis{box-shadow:none}
}