/* The market hub (/market): hero, plays, section nav, the fodder ladder and the live SBCs. Everything is scoped under
   .mh; site.css supplies the tokens, the FUT card, buttons, badges and the kicker. market-hub-lists.css has the rest. */
html[data-page="market"] main{max-width:none;padding:0}
.mh{max-width:1240px;margin:0 auto;padding:0 clamp(16px,2.5vw,32px) 100px;--amber:#ffb86b;--panel-bg:rgba(8,19,14,.6);--head-h:64px;--bar-h:52px;--land:calc(var(--head-h) + var(--bar-h) + 14px)}
.mh *{box-sizing:border-box;min-width:0}
.mh a{text-decoration:none}
.mh .lead a,.mh .sub a,.mh .what p a,.mh .rumour a,.mh .about p a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.mh .lead a:hover,.mh .sub a:hover,.mh .about p a:hover,.mh .rumour a:hover{text-decoration-color:var(--pitch)}
.mh h1,.mh h2,.mh h3,.mh p{margin:0}
.mh h2.sec{margin:0 0 10px}
.mh .sub{max-width:66ch;font-size:15px;line-height:1.55}
.mh section{margin-top:72px;scroll-margin-top:var(--land)}
.mh .sec-head{align-items:flex-end;gap:18px 24px}
.mh .sec-head > .ghost{flex:none;border-color:var(--line-strong);color:var(--ink);margin-bottom:6px}
.mh .is-num{text-align:right}
.mh .gem{display:grid;place-items:center;width:44px;height:50px;border-radius:9px;background:linear-gradient(160deg,#fbe7a6,#e9c160 45%,#b8892b);color:#2b1d05;font:800 22px/1 var(--display);box-shadow:0 6px 14px -8px rgba(215,178,74,.7);transition:transform .15s}
.mh .gem.hi{background:linear-gradient(160deg,#fff5dc,#ecd9a6 45%,#c9a85e)}
.mh .gem:hover{transform:translateY(-2px)}
.mh .gem.sm{width:30px;height:34px;border-radius:7px;font-size:15px;box-shadow:none}
/* The coin before an index price or a cost, drawn here so the figure itself stays plain text. */
.mh .lprice::before,.mh .story-price b::before,.mh .srow .cost::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd166 40%,#c98f1e);box-shadow:inset 0 0 0 1.5px rgba(120,80,0,.35)}
.mh .lprice.is-none::before,.mh .srow .cost.is-none::before{display:none}
@keyframes mh-land{from{box-shadow:inset 0 0 0 999px rgba(255,209,102,.16)}to{box-shadow:inset 0 0 0 999px rgba(255,209,102,0)}}
.mh .lrow:target,.mh .srow:target,.mh .trow:target{animation:mh-land 1.8s ease-out both}

/* Hero: the day's story beside the chart that shows it. */
.mh .hub-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,470px);gap:32px 56px;align-items:center;padding:38px 0 30px}
.mh .kicker-sep{display:inline-block;width:1px;height:12px;margin:0 3px;background:var(--line-strong)}
.mh .hub-hero .h1{margin:20px 0 14px;max-width:16ch;font-size:clamp(36px,4.6vw,60px);line-height:1.03}
.mh .hub-hero .lead{max-width:40em;font-size:17px}
.mh .hub-hero .cta-row{margin-top:24px}
.mh .hub-hero .cta-row .ghost{border-color:var(--line-strong);color:var(--ink)}
.mh .story{display:grid;gap:4px;padding:16px 18px 14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,36,26,.6),rgba(8,19,14,.55) 55%)}
.mh .story-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mut);font:400 13.5px var(--sans)}
.mh .story-head b{color:var(--ink);font-weight:600}
.mh .story-d1{display:inline-flex;align-items:center;gap:6px}
.mh .story-d1 small{color:var(--mut);font:500 12px var(--sans)}
.mh .hchart{display:block;width:100%;height:auto;overflow:visible;margin:6px 0 2px}
.mh .hchart .area{fill:url(#mh-area)}
.mh .hchart .ln{stroke:var(--pitch);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mh .hchart .ln.estimated{stroke-dasharray:4 4;opacity:.6}
.mh .hchart .chart-grid{stroke:rgba(214,255,232,.1);stroke-dasharray:3 4}
.mh .hchart text{fill:var(--mut);font:500 10.5px var(--sans)}
.mh .hchart .xl{fill:var(--faint)}
.mh .hchart .pt{fill:#0f1714;stroke:var(--pitch);stroke-width:1.6}
.mh .hchart .pt.estimated{stroke-dasharray:2 2}
.mh .hchart .end{fill:var(--gold);stroke:#0f1714;stroke-width:2}
.mh .hchart .pl{fill:var(--gold);font:800 15px var(--display)}
.mh .chart-empty{padding:40px 0;text-align:center}
.mh .story-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
.mh .story-card .fut{width:54px}
.mh .story-card.is-empty{display:block;width:54px;height:77px;border-radius:10px;border:1px dashed var(--line-strong)}
.mh .story-who b{display:block;font:600 14px/1.3 var(--sans);color:var(--ink)}
.mh .story-who small{display:block;margin-top:2px;color:var(--mut);font:400 12.5px/1.4 var(--sans)}
.mh .story-price{display:grid;justify-items:end;gap:4px;color:var(--gold)}
.mh .story-price small{color:var(--mut);font:600 11px var(--sans)}
.mh .story-price b{display:inline-flex;align-items:center;gap:7px;font:800 26px/1 var(--display);font-variant-numeric:tabular-nums}
.mh .story-price:hover b{color:#ffe29a}

/* Three plays, divided by rules rather than boxed. */
.mh .plays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mh .play{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:baseline;padding:16px 22px;border-left:1px solid var(--line);color:var(--ink-2);font:400 14px/1.5 var(--sans)}
.mh .play:first-child{padding-left:0;border-left:0}
.mh .play:last-child{padding-right:0}
.mh .play .verb{min-width:58px;font:800 22px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase}
.mh .play-buy .verb{color:var(--pitch)}
.mh .play-sell .verb{color:var(--gold)}
.mh .play-watch .verb{color:var(--amber)}
.mh .play strong{color:var(--ink);font-weight:600}
.mh .play:hover span{color:var(--ink)}

/* The sections, as an opaque bar that stays under the site header and runs the full width of the page, so nothing scrolls into view behind it. */
.mh .mh-nav{position:sticky;top:var(--head-h);z-index:20;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:var(--bar-h);margin:18px 0 0;padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line-strong);background:#050b08;box-shadow:0 0 0 100vmax #050b08;clip-path:inset(0 -100vmax)}
.mh .mh-nav::-webkit-scrollbar{display:none}
.mh .mh-nav a{flex:none;padding:7px 15px;border-radius:999px;color:var(--ink-2);font:600 13.5px var(--sans);white-space:nowrap;transition:background .15s,color .15s}
.mh .mh-nav a:hover{color:var(--ink);background:rgba(214,255,232,.06)}
.mh .mh-nav a[aria-current="true"]{color:var(--pitch);background:rgba(34,232,137,.13)}

/* The fodder ladder: one row a rating, each strip a month of days against that rating's own median. */
.mh .ladder{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel-bg);overflow:hidden}
.mh .lhead,.mh .lrow{display:grid;grid-template-columns:40px minmax(150px,.8fr) minmax(260px,1.6fr) 100px 58px 58px 84px minmax(170px,1fr);gap:0 12px;align-items:center;padding:0 18px 0 14px}
.mh .lhead{align-items:end;padding-top:12px;padding-bottom:8px;background:rgba(16,36,26,.55);color:var(--mut);font:600 12px/1.3 var(--sans)}
.mh .lh-heat{display:grid;gap:5px}
.mh .ticks{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:1px;height:12px;font:500 10px/1 var(--sans);color:var(--faint)}
.mh .ticks i{font-style:normal;overflow:visible;white-space:nowrap}
.mh .ticks i:last-child{display:flex;justify-content:flex-end;color:var(--ink-2);font-weight:600}
.mh .lrow{padding-top:6px;padding-bottom:6px;border-top:1px solid var(--line);scroll-margin-top:var(--land);transition:background .15s}
.mh .lrow:hover{background:rgba(34,232,137,.035)}
.mh .lrow.is-best{background:linear-gradient(90deg,rgba(34,232,137,.1),rgba(34,232,137,.02) 70%)}
.mh .lrow .gem{width:40px;height:46px;font-size:20px}
.mh .lwho{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink)}
.mh .lwho img,.mh .lwho .ph{flex:none;width:38px;height:38px;border-radius:11px;object-fit:cover;background:var(--raised)}
.mh .lwho .ph{background:none;border:1px dashed var(--line-strong)}
.mh .lwho b{display:block;font:600 14.5px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh .lwho small{display:block;margin-top:2px;color:var(--mut);font:400 12px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh .lwho:hover b{color:var(--pitch)}
.mh .lwho.is-empty b{color:var(--ink-2);font-weight:500}
.mh .lwho.is-empty small{color:var(--pitch)}
.mh .heat{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:1px;height:38px;border-radius:6px;overflow:hidden;background:rgba(214,255,232,.04)}
.mh .heat i{display:block}
.mh .heat i:hover{outline:1px solid var(--ink);outline-offset:-1px}
.mh .heat .estimated{background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(242,245,238,.28) 3px 4px)}
.mh .heat .missing{background:rgba(214,255,232,.025)}
.mh .heat .today{box-shadow:inset 0 0 0 2px var(--ink)}
.mh .lprice{display:inline-flex;align-items:center;gap:7px;justify-self:end;color:var(--gold);font:800 21px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.mh .lprice:hover{color:#ffe29a}
.mh .lrow .d1,.mh .lrow .d7{justify-self:end;color:var(--faint)}
.mh .ppt b{display:block;font:700 15px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.mh .ppt small{display:block;color:var(--mut);font:400 11.5px/1.3 var(--sans)}
.mh .ppt em{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:99px;background:rgba(34,232,137,.14);color:var(--pitch);font:700 11px/1.5 var(--sans);font-style:normal}
.mh .eat{display:flex;align-items:center;gap:10px;min-width:0}
.mh .eat.is-none{color:var(--faint);font:400 13px var(--sans)}
.mh .ths{display:flex;flex:none}
.mh .th{display:grid;place-items:center;width:30px;height:30px;margin-left:-8px;border-radius:50%;border:2px solid #0f1714;background:var(--raised);overflow:hidden;transition:transform .15s}
.mh .th:first-child{margin-left:0}
.mh .th:hover{transform:translateY(-2px);z-index:1}
.mh .th img{width:100%;height:100%;object-fit:cover}
.mh .th.is-pack{color:var(--gold);background:#2a2412}
.mh .th.is-pack.k-upgrade{color:var(--pitch);background:#13261c}
.mh .th svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mh .eat-txt{min-width:0;color:var(--ink)}
.mh .eat-txt b{display:block;font:600 13.5px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh .eat-txt small{display:block;margin-top:1px;color:var(--mut);font:400 12px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh .eat-txt:hover b{color:var(--pitch)}
.mh .legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:12px 4px 0;color:var(--mut);font:400 12.5px/1.5 var(--sans)}
.mh .lg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mh .sw{width:12px;height:12px;border-radius:3px}
.mh .sw.dn{background:rgba(255,122,102,.6)}
.mh .sw.md{background:rgba(214,255,232,.14)}
.mh .sw.up{background:rgba(34,232,137,.6)}
.mh .sw.est{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(242,245,238,.45) 3px 4px),rgba(34,232,137,.32)}
.mh .sw.none{background:rgba(214,255,232,.025);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mh .lg-note{margin-left:auto}
.mh .mh-all{margin-top:14px}
.mh .mh-all summary{font:500 14px var(--sans);color:var(--ink-2)}
.mh .mh-all .ladder{margin-top:10px}

/* Live SBCs: one table, dearest first. */
.mh .seg{flex:none;margin-bottom:6px}
.mh .sbcs-panel{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel-bg);overflow:hidden}
.mh .shead,.mh .srow{display:grid;grid-template-columns:56px minmax(200px,1.4fr) 140px minmax(120px,.7fr) minmax(130px,.8fr) 120px;gap:0 18px;align-items:center;padding:0 18px 0 14px}
.mh .shead{padding-top:12px;padding-bottom:9px;background:rgba(16,36,26,.55);color:var(--mut);font:600 12px/1.3 var(--sans)}
.mh .srow{padding-top:10px;padding-bottom:10px;border-top:1px solid var(--line);scroll-margin-top:var(--land);transition:background .15s}
.mh .srow:hover{background:rgba(34,232,137,.035)}
.mh .srow[hidden]{display:none!important}
.mh #mh-sbcs.is-short .srow[data-more]{display:none}
.mh .srow .reward{display:flex;justify-content:center}
.mh .srow .reward .fut{width:50px}
.mh .srow .reward .fut:hover{transform:translateY(-3px) scale(1.03)}
.mh .pack{display:grid;place-items:center;width:50px;height:70px;border-radius:10px;border:1px solid var(--line-strong);background:linear-gradient(160deg,rgba(255,209,102,.14),rgba(8,19,14,.9) 70%);color:var(--gold)}
.mh .pack.k-upgrade{color:var(--pitch);background:linear-gradient(160deg,rgba(34,232,137,.12),rgba(8,19,14,.9) 70%)}
.mh .pack svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh .srow h3{font:650 15.5px/1.3 var(--sans)}
.mh .srow .smeta{display:block;margin-top:3px;color:var(--mut);font:400 12.5px/1.4 var(--sans)}
.mh .srow .net{display:block;margin-top:2px;font-weight:600}
.mh .srow .net.is-up{color:var(--up,#22e889)}
.mh .srow .net.is-down{color:var(--down,#ff7b7b)}
.mh .srow .cost{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;column-gap:7px;color:var(--gold);font:800 21px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.mh .srow .cost::before{grid-column:1;grid-row:1}
.mh .srow .cost small{grid-column:1/-1;grid-row:2;justify-self:end;margin-top:4px;color:var(--mut);font:400 11.5px/1.2 var(--sans);letter-spacing:0}
.mh .srow .needs{font:400 13.5px/1.4 var(--sans);color:var(--ink-2)}
.mh .srow .feeds{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mh .srow .feeds .none{color:var(--faint);font:400 13px var(--sans)}
.mh .srow .ends{justify-self:end;padding:6px 12px;border-radius:99px;border:1px solid var(--line-strong);color:var(--ink-2);font:600 12.5px/1.2 var(--sans);white-space:nowrap}
.mh a.ends:hover{border-color:var(--pitch);color:var(--ink)}
.mh .srow .ends.is-soon{border-color:rgba(255,184,107,.55);background:rgba(255,184,107,.1);color:var(--amber)}
.mh #mh-sbcs-more{margin-top:14px;border-color:var(--line-strong);color:var(--ink)}
.mh .mh-sources{margin-top:12px;color:var(--mut);font-size:12px}
.mh .mh-wait{padding:20px 0;color:var(--mut);font-size:14px}