/* crypto-analysis.css - the BTC perpetuals page and the crypto analysis shelf.
   Tokens only, no raw hex. Do NOT link assets/sport-board.css from these pages:
   it redefines --gain at the pre-fix 4.40:1 value with no dark twin (site.css:705-706
   has the corrected pair). Mary, 2026-09-24. */
/* ---- preview-only page CSS. Tokens only, no raw hex. ---- */
.pv{padding:28px 0 64px;max-width:820px;min-width:0}
.pv-crumb{font:600 12px var(--sans);color:var(--ink-3);margin:0 0 14px}
.pv-crumb a{color:var(--ink-2)}
.pv h1{font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.pv-lede{font:400 18px/1.62 var(--sans);color:var(--prose);margin:0 0 24px}
.pv h2{font:800 clamp(21px,2.6vw,27px)/1.22 var(--sans);letter-spacing:-.01em;color:var(--ink);margin:40px 0 14px;padding-top:18px;border-top:1px solid var(--line)}
.pv p{font:400 16px/1.68 var(--sans);color:var(--prose);margin:0 0 15px}
.pv code{font:600 13.5px ui-monospace,Menlo,monospace;background:var(--chip);padding:1px 5px;border-radius:4px;color:var(--ink-2)}

.pv-live{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 30px}
.pv-live > div{background:var(--paper);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.pv-live span{font:700 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pv-live b{font:800 21px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.pv-live i{font:500 11px var(--sans);font-style:normal;color:var(--ink-3)}

.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px}
.pv-t{width:100%;border-collapse:collapse;font:500 14.5px var(--sans);font-variant-numeric:tabular-nums}
.pv-t th{text-align:left;font:800 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 12px;border-bottom:2px solid var(--line-2);white-space:nowrap}
.pv-t td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--prose);white-space:nowrap}
.pv-t tbody tr:last-child td{border-bottom:0}
.pv-t b{color:var(--ink)}
.pv-up{color:var(--gain);font-weight:800}
.pv-liq,.pv-th-liq{color:var(--drop)}
.pv-liq{font-weight:800}
.pv-t--stakes tbody td:first-child{background:var(--surface-2)}

.pv-flag{border-left:3px solid var(--brand);background:var(--brand-soft);padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.pv-warn{border-left:3px solid var(--warn);background:var(--warn-soft);padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--warn-ink)}
.pv-warn b{color:var(--warn-ink)}
.pv-void{border-left:3px solid var(--drop);background:var(--drop-soft);padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.pv-void b{color:var(--drop)}
.pv-note{font:500 13.5px/1.6 var(--sans);color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:13px}

.pv-facts{margin:0 0 16px;padding:0 0 0 20px}
.pv-facts li{font:500 15.5px/1.75 var(--sans);color:var(--prose)}

.pv-cta{margin:26px 0 8px;padding:18px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2)}
.pv-go{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font:800 15px var(--sans);text-decoration:none}
.pv-go:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pv-paid{font:500 12.5px/1.6 var(--sans)!important;color:var(--ink-3)!important;margin:10px 0 0!important}
.pv-paid b{color:var(--ink-2)}

.wy{margin:6px 0 20px;padding:0;background:var(--paper);border:1px solid var(--line);
  border-top:2px solid var(--brand);border-radius:var(--r);overflow:hidden}
.wy-svg{display:block;width:100%;height:320px}
.wy-ctrl{display:flex;gap:7px;align-items:center;height:48px;padding:0 14px;border-bottom:1px solid var(--line)}
.wy-tab{appearance:none;cursor:pointer;min-height:32px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line-3);background:var(--paper);color:var(--ink-2);font:700 12px var(--sans)}
.wy-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wy-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Both captions occupy ONE grid cell and the taller one sizes it, so switching views cannot
   move a single pixel of the page below. Mary's rule: swapping a label's text counts as a
   view change, and a min-height guess is not a substitute for stacking them. */
.wy-caps{display:grid;padding:0 14px 12px}
.wy-caps > figcaption{grid-area:1/1;font:500 12.5px/1.55 var(--sans);color:var(--ink-3)}
/* NOT the `hidden` attribute: site.css:90 is `[hidden]{display:none!important}`, which no
   non-important rule can beat. A hidden caption therefore collapsed to 0 and the one-cell
   grid sized itself to whichever caption was showing - the exact bug this grid exists to
   prevent. It passed the proof sweep for two versions only because the captions happened to
   be the same height. Use data-off, the same attribute the window rail uses. */
.wy-caps > figcaption[data-off]{visibility:hidden;pointer-events:none}
@media (max-width:1023px){ .wy-svg{height:280px} }
@media (max-width:699px){ .wy-svg{height:232px} .pv-live{grid-template-columns:repeat(2,1fr)} }
@media (max-width:390px){ .wy-svg{height:208px} }

.pv-faq details{border-bottom:1px solid var(--line);padding:12px 0}
.pv-faq summary{font:700 15.5px var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.pv-faq summary::-webkit-details-marker{display:none}
.pv-faq summary::before{content:"+";display:inline-block;width:18px;color:var(--brand);font-weight:800}
.pv-faq details[open] summary::before{content:"\2212"}
.pv-faq p{margin:9px 0 2px 18px;font-size:15px}
.pv-fine{font:500 12.5px/1.6 var(--sans)!important;color:var(--ink-3)!important;margin-top:30px!important;
  padding-top:16px;border-top:1px solid var(--line)}
/* A <table> ignores width:1px (it is a minimum, not a maximum), so the classic visually-hidden
   recipe applied straight to one still lays out at full width and pushes the page sideways.
   The clipping has to happen on a block wrapper. clip-path is the modern half of the pair. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);border:0;display:block}
.sr-only > *{width:auto}

/* The stakes table is six columns of money. On a phone that is a scroll container, and the
   column that must never be scrolled out of sight is the one that says where you are closed
   out. So below 700px it stops being a table and becomes one card per stake, with the
   liquidation line pinned at the foot of each card in full view. */
@media (max-width:699px){
  .pv-t--stakes,.pv-t--stakes thead,.pv-t--stakes tbody,.pv-t--stakes tr,.pv-t--stakes td{display:block;width:auto}
  /* Not visually-hidden: display:none. Every cell carries its own label via data-l, so the
     header row has nothing left to say, and an absolutely-positioned thead does not clip its
     table-cell children - they kept laying out at the desktop width and scrolled the page. */
  .pv-t--stakes thead{display:none}
  .pv-t--stakes tr{border:1px solid var(--line-2);border-radius:var(--r);margin:0 0 12px;
    background:var(--paper);overflow:hidden}
  .pv-t--stakes td{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
    padding:9px 14px;border-bottom:1px solid var(--line);white-space:normal}
  .pv-t--stakes td::before{content:attr(data-l);font:700 10.5px var(--sans);letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-3);flex:none}
  .pv-t--stakes tbody td:first-child{background:var(--chip)}
  .pv-t--stakes td:last-child{border-bottom:0;background:var(--drop-soft)}
  .pv-t--stakes td:last-child::before{color:var(--drop)}
}

/* ---- Wyckoff event + count tables ---- */
.wk-t td{vertical-align:top}
.wk-t .wk-why{white-space:normal;min-width:260px;color:var(--ink-3);font-size:13.5px;line-height:1.55}
.wk-ph td{background:var(--chip);font:800 10.5px var(--sans)!important;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);padding:7px 12px}
.wk-v-hi{color:var(--drop);font-weight:800}
.wk-v-lo{color:var(--gain);font-weight:800}
.wk-met{color:var(--ink-3);font-style:italic}
.wk-t--count td:last-child{font-weight:700}
.wk-h3{font:800 clamp(17px,2vw,20px)/1.3 var(--sans);color:var(--ink);margin:28px 0 10px}
@media (max-width:760px){
  .wk-t,.wk-t thead,.wk-t tbody,.wk-t tr,.wk-t td{display:block;width:auto}
  .wk-t thead{display:none}
  .wk-t tr{border:1px solid var(--line-2);border-radius:var(--r);margin:0 0 10px;background:var(--paper);overflow:hidden}
  .wk-t tr.wk-ph{border:0;background:none;margin:16px 0 6px}
  .wk-t tr.wk-ph td{border-radius:var(--r-sm)}
  .wk-t td{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
    padding:8px 13px;border-bottom:1px solid var(--line);white-space:normal}
  .wk-t td::before{content:attr(data-l);font:700 10px var(--sans);letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-3);flex:none}
  .wk-t td:last-child{border-bottom:0}
  .wk-t .wk-why{display:block;min-width:0;background:var(--surface-2)}
  .wk-t .wk-why::before{display:block;margin-bottom:4px}
}

.wk-sub{display:block;font:500 9.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-3);margin-top:2px}

/* ---- the projection widget: headline, transport, readout -------------------
   Mary, 2026-09-24. The headline is a PRICE RANGE, because that is the question
   the reader came with. The box size is a dial, named in words; the dollar value
   is a sub-line so the count stays reproducible. */
.wy-head{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.wy-range{font:800 clamp(24px,3.4vw,34px)/1.1 var(--sans)!important;color:var(--ink)!important;
  margin:0 0 6px!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wy-range b{color:var(--gain)}
.wy-sub{font:500 13px/1.6 var(--sans)!important;color:var(--ink-3)!important;margin:0!important;max-width:62ch}
.wy-sub b{color:var(--ink-2)}

.wy-tr{display:flex;align-items:center;gap:10px;padding:0 16px;height:44px;border-bottom:1px solid var(--line)}
.wy-badge{flex:none;font:800 9px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--drop);background:var(--drop-soft);border-radius:3px;padding:3px 7px}
.wy-play{flex:none;appearance:none;cursor:pointer;min-width:74px;height:30px;border-radius:999px;border:0;
  background:var(--brand);color:var(--on-brand);font:800 12px var(--sans)}
.wy-play:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wy-play[disabled]{background:var(--chip);color:var(--ink-3);cursor:default}
.wy-scrubw{flex:1 1 auto;min-width:60px;display:flex;align-items:center}
.wy-scrub{width:100%;accent-color:var(--brand);height:22px;cursor:pointer}
.wy-scrub:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wy-read{flex:none;display:flex;gap:14px;align-items:baseline}
.wy-r{display:flex;flex-direction:column;gap:1px}
.wy-r i{font:700 8.5px var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* fixed slots: the values change every frame and nothing may move */
.wy-r b{font:800 12.5px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;
  display:inline-block;text-align:right}
#wyd{min-width:9.4ch} #wyf,#wys{min-width:6.6ch}

@media (max-width:699px){
  .wy-ctrl{height:56px}
  .wy-tab{min-height:44px}
  .wy-tr{height:auto;flex-wrap:wrap;padding:8px 12px;row-gap:8px}
  .wy-play{height:44px;min-width:84px}
  .wy-read{order:-1;flex:1 0 100%;justify-content:space-between}
  .wy-scrubw{flex:1 1 100%}
  .wy-scrub{height:44px}
  .wy-head{padding:12px}
}
@media (prefers-reduced-motion:reduce){ .wy-play{--wy-rm:1} }

/* ---- the analysis shelf ---- */
.an-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px}
.an-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.an-k{font:700 10.5px var(--sans)!important;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)!important;margin:0 0 6px!important}
.an-t{font:800 clamp(19px,2.4vw,24px)/1.25 var(--sans);margin:0 0 8px;letter-spacing:-.01em}
.an-t a{color:var(--ink);text-decoration:none}
.an-t a:hover{color:var(--brand-ink);text-decoration:underline}
.an-d{font:400 15px/1.6 var(--sans)!important;color:var(--prose)!important;margin:0!important}
@media (min-width:860px){ .an-list{grid-template-columns:repeat(2,1fr)} }

/* two-phrase H1 (house rule): each phrase holds its own line */
h1.display .h-l1,h1.display .h-l2{display:block;text-wrap:balance}