/* markets.css — page-scoped layer for the "markets" group (loaded after style.css; see DESIGN.md).
   Coin pages, the coin list, prediction (volatility range) pages and the predictions hub.
   Tokens only; every class here is prefixed mk- or scoped to one of those. */

/* =====================================================================
   0. SHARED BITS (all four templates)
   ===================================================================== */
.mk-h2{font-size:var(--fs-24);line-height:1.2;letter-spacing:-.022em}
.mk-block{margin:var(--sp-10) 0 0;min-width:0}
.mk-block__h{margin-bottom:var(--sp-4)}
.mk-block__h--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.mk-block__intro{margin:.45rem 0 0;color:var(--muted);font-size:var(--fs-15);line-height:1.55;max-width:68ch}
.mk-note{margin:var(--sp-3) 0 0;line-height:1.55;max-width:78ch}
.mk-card__t{font-size:var(--fs-16);font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.mk-kpis{margin:var(--sp-6) 0 0}
/* tile values that hold a range ("$0.7583 – $1.20") wrap between the ends
   instead of being cut off by the base ellipsis */
.mk-rng{white-space:normal;overflow:visible;text-overflow:clip;font-size:clamp(1rem,.92rem + .35vw,1.1875rem);line-height:1.3}
.mk-rng__sep{color:var(--muted);font-weight:500}
.mk-kpis .kpi__v .d{font-weight:650}
.mk-kpis .kpi__m .d{font-size:var(--fs-12)}
.kpi__d .muted{font-weight:500;font-size:var(--fs-12)}
/* prose blocks set in a card (write-ups, drivers, method) */
.mk-prose,.mk-about{margin:var(--sp-10) 0 0}
.mk-prose h2,.mk-about h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.02em}
.mk-prose h2:not(:first-child),.mk-about h2:not(:first-of-type){padding-top:var(--sp-6);border-top:1px solid var(--line)}
.mk-about__k{display:flex;margin:0 0 var(--sp-2)}
.mk-about__k svg{width:14px;height:14px;flex:none}
.mk-about__k+h2{margin-top:var(--sp-3)}
.mk-prose .mk-about__k{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.mk-prose .mk-about__k+h2{border-top:0;padding-top:0}
/* small inline meter used in table cells (model chance, volatility) */
.mk-meter{display:inline-flex;align-items:center;justify-content:flex-end;gap:.6rem}
.mk-meter__bar{width:56px;height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;flex:none}
.mk-meter__bar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.mk-meter--vol .mk-meter__bar i{background:color-mix(in srgb,var(--accent) 55%,var(--surface-3))}
@media (max-width:639px){ .mk-meter__bar{width:36px} }

/* =====================================================================
   1. COIN PAGE — quote header
   ===================================================================== */
.mk-hd{padding:var(--sp-5) 0 var(--sp-8)}
.mk-hd__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.mk-id{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:nowrap;min-width:0}
.mk-id .coin__dot{width:52px;height:52px;font-size:.8rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.16),var(--shadow-sm)}
.mk-id__t{min-width:0}
.mk-id h1{font-size:clamp(1.625rem,1.25rem + 1.7vw,2.5rem);line-height:1.1;letter-spacing:-.032em;overflow-wrap:anywhere}
.mk-id__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.45rem}
.mk-tag{display:inline-flex;align-items:center;height:24px;padding:0 .55rem;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--surface);font:600 var(--fs-12)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-2);letter-spacing:.02em}
.mk-tag--sym{background:var(--surface-2);color:var(--text)}
.mk-hd__act{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.mk-hd__act .btn svg{width:15px;height:15px;color:var(--muted)}
.mk-hd__act .btn:hover svg{color:var(--accent)}
.mk-quote{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:var(--sp-5) 0 0}
.mk-quote .mk-quote__p{font-size:clamp(2.5rem,1.8rem + 3vw,4rem);line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}
.mk-quote__d{display:inline-flex;align-items:center;gap:.45rem}
.mk-quote .pill{font-size:var(--fs-15);padding:.28rem .6rem;border-radius:var(--r-sm)}
.mk-hd .stamp{margin-top:var(--sp-3)}
@media (max-width:639px){
  .mk-id{gap:var(--sp-3)}
  .mk-id .coin__dot{width:42px;height:42px;font-size:.68rem}
  .mk-hd__act{width:100%}
  .mk-hd__act .btn{flex:1 1 0;min-width:0}
}

/* =====================================================================
   2. COIN PAGE — body grid, chart, performance, write-up, news, side
   ===================================================================== */
.mk-cp{padding-top:0}
.mk-main{min-width:0}
.mk-main>.answer:first-child{margin-top:0}
/* chart card: title + range tabs on one row, panels full width below.
   The tabs stay a direct child of .chart so app.js finds the panels. */
.mk-chart{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--sp-4);margin:var(--sp-6) 0 0}
.mk-chart__h{min-width:0;margin-bottom:var(--sp-4)}
.mk-chart__sub{margin:.2rem 0 0;font-size:var(--fs-13);color:var(--muted)}
.mk-chart>.chart__tabs{justify-self:end;margin-bottom:var(--sp-4)}
.mk-chart>[data-panel]{grid-column:1/-1;position:relative;min-width:0}
/* SVG axis labels are sized in viewBox units and shrink with the chart; give
   phones a readable size (still inside the 64-unit label gutter). */
@media (max-width:639px){ .pg-markets .chart .ax{font-size:16px} }
@media (max-width:639px){
  .mk-chart{grid-template-columns:minmax(0,1fr)}
  .mk-chart__h{margin-bottom:var(--sp-3)}
  .mk-chart>.chart__tabs{justify-self:start}
}
/* performance strip: a one-row table read as tiles */
.mk-perf__t .tbl{table-layout:fixed;min-width:540px}
.mk-perf__t .tbl th,.mk-perf__t .tbl td{text-align:left;padding:.75rem 1rem}
.mk-perf__t .tbl th+th,.mk-perf__t .tbl td+td{border-left:1px solid var(--line)}
.mk-perf__t .tbl thead th{position:static;border-bottom-color:var(--line)}
.mk-perf__t .tbl td{font-size:var(--fs-16);padding-top:.85rem;padding-bottom:.95rem}
.mk-perf__t .tbl tbody tr:hover{background:none}
/* 1-year range bar */
.mk-range{margin-top:var(--sp-3);box-shadow:none}
.mk-range__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.mk-range__k{font-size:var(--fs-13);font-weight:600;color:var(--text)}
.mk-range__m{font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.mk-range__bar{position:relative;height:6px;border-radius:var(--r-pill);background:var(--surface-3);margin:.8rem 0 .6rem}
.mk-range__bar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--at);border-radius:inherit;background:color-mix(in srgb,var(--accent) 40%,var(--surface-3))}
.mk-range__bar i{position:absolute;left:var(--at);top:50%;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm)}
.mk-range__ends{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-13);flex-wrap:wrap}
.mk-range__ends .num{font-weight:600;color:var(--text)}
.mk-range__l{color:var(--muted)}
/* write-up */
.mk-about>*{max-width:68ch}
/* news */
.mk-news__list{padding:var(--sp-1) var(--sp-5)}
@media (min-width:768px){ .mk-news__list{padding:var(--sp-1) var(--sp-6)} }
.mk-news__list .story{grid-template-columns:minmax(0,1fr);padding:var(--sp-4) 0}
.mk-news__list .story h3{font-size:var(--fs-16)}
.mk-near .tbl-wrap{margin:0}
/* side panel: sticky on desktop; scrolls inside itself if taller than the screen */
.mk-side__card h2{margin-bottom:var(--sp-2)}
.mk-side .mk-side__k{display:flex;align-items:center;gap:.4rem;font:600 var(--fs-12)/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:var(--sp-2) .25rem var(--sp-2)}
.mk-side__k svg{width:14px;height:14px;flex:none;color:var(--accent)}
.mk-side .kv dt,.mk-side .kv dd{padding:.62rem 0}
.mk-issued{display:block;min-width:84px;height:4px;margin-top:.45rem;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.mk-issued i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.mk-side .list a{font-size:var(--fs-14);color:var(--text-2);min-height:40px;padding:.55rem 0}
.mk-side .list a:hover{color:var(--accent)}
@media (min-width:1024px){
  .mk-side{max-height:calc(100vh - var(--hd-sticky) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;padding:2px;margin:-2px}
}
/* On shorter screens the panel is taller than the view: let it scroll with the
   page instead of trapping its last links behind an inner scrollbar. */
@media (min-width:1024px) and (max-height:1079px){
  .mk-side{position:static;max-height:none;overflow:visible}
}

/* =====================================================================
   3. COIN LIST + PREDICTIONS HUB — terminal tables
   ===================================================================== */
.mk-lh{padding-bottom:var(--sp-6)}
.mk-kpis--list{margin:0 0 var(--sp-8)}
.mk-list{min-width:0}
.mk-list__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.mk-list__t{margin:0;font-size:var(--fs-15);font-weight:600;color:var(--text)}
.mk-list__hint{font-weight:400;color:var(--muted)}
.mk-list__links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.mk-list .c-coin .coin{max-width:17rem}
.mk-list .tbl tbody td{padding-top:.8rem;padding-bottom:.8rem}
.mk-foot{margin:var(--sp-4) 0 0;max-width:78ch}
/* Desktop: the table fits, so the wrapper clips instead of scrolling and the
   column header sticks under the site header as the long list scrolls. */
@media (min-width:1280px){
  @supports (overflow:clip){
    .mk-list .tbl-wrap{overflow:clip}
    .mk-list .tbl thead th{top:var(--hd-sticky)}
  }
}
/* predictions hub cells */
.mk-pt__w{display:block;margin-top:.15rem;font-size:var(--fs-12);font-weight:500;color:var(--muted)}
.mk-pt__go{display:inline-flex;align-items:center;min-height:32px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-13);font-weight:600;text-decoration:none;color:var(--text-2);white-space:nowrap;transition:border-color var(--dur),color var(--dur),background var(--dur)}
.mk-pt__go:hover{border-color:var(--line-2);color:var(--accent);background:var(--surface-2)}
.mk-how{margin-top:var(--sp-10)}

/* =====================================================================
   4. PREDICTION PAGE
   ===================================================================== */
.mk-ph h1{max-width:26ch}
.mk-ph+.mk-kpis{margin-top:0}
.mk-empty{max-width:860px;margin:var(--sp-4) 0 var(--sp-8)}
.mk-empty a{color:var(--accent)}
/* fan chart */
.mk-fan{margin-top:var(--sp-6)}
.mk-fan .mk-chart__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.mk-fan__k{margin:0;line-height:1.45}
.mk-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;margin:0;padding:0;font-size:var(--fs-12);color:var(--muted)}
.mk-legend li{display:inline-flex;align-items:center;gap:.4rem}
.mk-legend i{display:inline-block;width:14px;height:8px;border-radius:2px}
.mk-legend__ln{height:2px!important;background:var(--chart-line)}
.mk-legend__b68{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.mk-legend__b90{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
/* body grid + "On this page" rail */
.mk-px{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--sp-8)}
.mk-px__main{min-width:0}
.mk-px__main>*:first-child{margin-top:0}
.mk-sec{scroll-margin-top:56px}
.mk-rail{position:sticky;top:var(--hd-sticky);z-index:5;background:var(--bg);margin:0 calc(-1 * var(--gut)) var(--sp-6);padding:var(--sp-2) var(--gut);border-bottom:1px solid var(--line)}
.mk-rail__k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-rail ol{display:flex;gap:var(--sp-2);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.mk-rail ol::-webkit-scrollbar{display:none}
.mk-rail li{flex:none}
.mk-rail a{display:inline-flex;align-items:center;min-height:32px;padding:0 .8rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-13);font-weight:550;color:var(--text-2);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:border-color var(--dur),color var(--dur),background var(--dur)}
.mk-rail a:hover{border-color:var(--line-2);color:var(--text);background:var(--surface-2)}
@media (min-width:1100px){
  .mk-px{grid-template-columns:minmax(0,1fr) 220px;gap:var(--sp-10);align-items:start}
  .mk-px__main{grid-column:1;grid-row:1}
  .mk-rail{grid-column:2;grid-row:1;top:calc(var(--hd-sticky) + 24px);margin:0;padding:0;border:0;background:none;z-index:auto}
  .mk-rail__k{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:0 0 var(--sp-3);font:600 var(--fs-12)/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .mk-rail ol{display:block;overflow:visible;border-left:1px solid var(--line)}
  .mk-rail a{display:flex;min-height:32px;padding:.3rem .85rem;margin-left:-1px;border:0;border-left:2px solid transparent;border-radius:0;background:none;font-size:var(--fs-14);white-space:normal;line-height:1.35}
  .mk-rail a:hover{background:none;color:var(--accent);border-left-color:var(--accent)}
  .mk-sec{scroll-margin-top:8px}
}
/* year sections */
.mk-years{display:grid;gap:var(--sp-5)}
.mk-year__h{display:flex;align-items:center;gap:var(--sp-4)}
.mk-year__yr{flex:none;display:grid;place-items:center;min-width:4.25rem;height:3rem;padding:0 .7rem;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);font:650 var(--fs-20)/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-year__t{min-width:0}
.mk-year__t .eyebrow{margin-bottom:.3rem}
.mk-year__kpis{margin:var(--sp-5) 0 var(--sp-4);box-shadow:none}
.mk-year__txt{margin:0;color:var(--text-2);line-height:1.7;max-width:74ch}
.mk-year__foot{margin:var(--sp-3) 0 0}
@media (max-width:639px){
  .mk-year__h{gap:var(--sp-3);align-items:flex-start}
  .mk-year__yr{min-width:3.5rem;height:2.5rem;font-size:var(--fs-16)}
}
/* range bar on a shared log scale */
.mk-band{margin:0 0 var(--sp-5)}
.mk-band__track{position:relative;height:14px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.mk-band__track i{position:absolute;top:0;bottom:0;display:block}
.mk-band__b90{left:var(--l90);width:calc(var(--h90) - var(--l90));border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.mk-band__b68{left:var(--l68);width:calc(var(--h68) - var(--l68));border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.mk-band__now{left:var(--now);width:2px;top:-4px!important;bottom:-4px!important;border-radius:1px;background:var(--text);transform:translateX(-50%)}
.mk-band__lbl{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:.45rem;font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.mk-band__mid{text-align:center}
.mk-band__note{margin:var(--sp-3) 0 0;max-width:78ch}
@media (max-width:479px){ .mk-band__mid{display:none} }
/* "Can X reach $Y?" — the searched-for level is marked */
.mk-reach tr.is-key>*{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.mk-reach tr.is-key>td:first-child{box-shadow:inset 3px 0 0 var(--accent);font-weight:650}
.mk-reach tr.is-key:hover>*{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
/* yearly returns: magnitude bar beside each change */
.mk-chg{display:inline-flex;align-items:center;justify-content:flex-end;gap:.7rem}
.mk-chg__bar{width:88px;height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;flex:none}
.mk-chg__bar i{display:block;height:100%;border-radius:inherit}
.mk-chg__bar--up i{background:color-mix(in srgb,var(--up) 65%,var(--surface))}
.mk-chg__bar--down i{background:color-mix(in srgb,var(--down) 65%,var(--surface))}
.mk-chg .d{display:inline-block;min-width:5.75em;text-align:right}
@media (max-width:639px){ .mk-chg__bar{width:44px} }
/* horizon ranges + last-year figures */
.mk-split{align-items:start;gap:var(--sp-8);margin-top:var(--sp-10)}
.mk-split>.mk-block{margin-top:0}
@media (max-width:1279px){ .mk-split{grid-template-columns:minmax(0,1fr)} }
.mk-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.mk-stats dt{white-space:normal}
/* method */
.mk-formula{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.25rem;padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0 var(--sp-5);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.mk-formula .mono{font-size:var(--fs-16)}
.mk-formula sup{font-size:.72em}
.mk-formula__k{font-size:var(--fs-13);color:var(--muted);font-variant-numeric:tabular-nums}
#faq .faq{margin:var(--sp-10) 0 0}
.mk-cta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-10) 0 0}

/* =====================================================================
   5. PRINT
   ===================================================================== */
@media print{
  .mk-rail,.mk-hd__act,.mk-list__links{display:none!important}
  .mk-px{display:block}
  .mk-year,.mk-range{break-inside:avoid;box-shadow:none}
}