/* ChainRegistry — the market pulse (/pulse, round 3, 2026-11-03). Tokens and the shared pieces (.instrument, .figure, .provenance, .table,
   .table-view, .section-head) come from site.css. This file: the reading and the averages, the breadth strip, the volatility ranking, the
   correlation triangle with the in-step lists, the method notes. Charts are server-drawn SVG with no viewBox wherever text sits on them:
   x and y are percent of the box, so lettering keeps its own size at any width; only the A/D path rides a stretched inner plate. */

/* ---- the reading and the averages */
.pl-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;margin:24px 0 0;align-items:stretch}
.pl-reading{padding:20px 24px 18px;gap:16px}
.pl-words{display:grid;gap:12px;max-width:66ch}
.pl-words p{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.pl-words p:first-child{font-size:19px;line-height:1.5;color:var(--text)}
.pl-reading .provenance{margin-top:auto;gap:3px 0}
.pl-reading .provenance>span{white-space:nowrap}
.pl-reading .provenance>span+span::before{content:'·';margin:0 8px;color:var(--faint)}
.pl-avg{gap:0;padding-bottom:16px}
.pl-avg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.pl-avg-row p{margin:0}
.pl-avg-name{font:500 var(--fs-label) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text);align-self:center}
.pl-avg-value{text-align:right;line-height:1}
.pl-avg-value b{font:600 22px var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.pl-avg-lead .figure{font-size:clamp(46px,4.8vw,74px)}
.pl-avg-lead{padding-top:6px}
.pl-dash{font:600 34px/1 var(--mono);color:var(--faint)}
.pl-meter{grid-column:1/-1;display:block;width:100%;height:8px;overflow:visible}
.pl-meter .track{fill:rgba(201,184,255,.1)}
.pl-meter .fill{fill:var(--cyan)}
.pl-meter .half{stroke:var(--text-2);stroke-width:1.5}
.pl-avg-note{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--muted)}
.pl-avg .instrument-caption{margin-top:auto;padding-top:12px}
@media (max-width:1000px){.pl-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pl-reading{padding:16px 16px 14px}.pl-words p{font-size:15.5px}.pl-words p:first-child{font-size:17px}.pl-reading .provenance{gap:3px 14px}.pl-reading .provenance>span+span::before{content:none}}

/* ---- Fig. 01: the breadth strip. Risers up from the axis and fallers down in the lower band, the A/D trace above, hatching where a
   day could not be counted, a crosshair and a readout (pulse.js) that follow the pointer or the arrow keys */
.pl-strip{padding-bottom:16px}
.pl-plot{position:relative;margin:6px 0 0;border-radius:var(--r)}
.pl-plot:focus-visible{outline-offset:6px}
.pl-svg{display:block;width:100%;height:340px;overflow:visible}
.pl-bars{overflow:visible}
.pl-bars .pl-u{fill:var(--up);opacity:.86}
.pl-bars .pl-d{fill:var(--down);opacity:.86}
.pl-svg .pl-hole{fill:url(#pl-hatch)}
#pl-hatch line{stroke:rgba(201,184,255,.2);stroke-width:1.2}
.pl-svg .pl-axis{stroke:var(--line-field);stroke-width:1}
.pl-svg .pl-guide{stroke:var(--line);stroke-width:1}
.pl-svg .pl-zero{stroke:var(--line-2);stroke-width:1}
.pl-svg .pl-tick{stroke:var(--line-2);stroke-width:1}
.pl-trace{overflow:visible}
.pl-trace path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.pl-trace .pl-ln{stroke:var(--cyan);stroke-width:2}
.pl-trace .pl-glow{stroke:var(--cyan);stroke-width:8;opacity:.13}
.pl-svg .pl-end{fill:var(--cyan);stroke:var(--panel);stroke-width:2}
.pl-svg .pl-t{font:500 10.5px var(--mono);letter-spacing:.06em;fill:var(--muted)}
.pl-svg .pl-cross{stroke:var(--text-2);stroke-width:1;opacity:0;transition:opacity var(--t-fast)}
.pl-plot.on .pl-cross{opacity:.55}
.pl-tip{position:absolute;top:0;left:0;z-index:4;pointer-events:none;min-width:150px;padding:8px 11px;border:1px solid var(--cyan-line);border-radius:var(--r);background:rgba(7,7,12,.95);font:500 11.5px/1.5 var(--mono);color:var(--text-2);white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
.pl-tip b{display:block;margin-bottom:2px;font-weight:600;color:var(--text);letter-spacing:.02em}
.pl-tip .up{color:var(--up)}.pl-tip .down{color:var(--down)}
.pl-tip i{font-style:normal;color:var(--muted)}
.pl-key{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:14px 0 0;padding:0;font-size:12.5px;line-height:1.3;color:var(--muted)}
.pl-key li{display:flex;align-items:center;gap:8px}
.pl-key i{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none}
.pl-key .k-line{width:18px;height:2px;border-radius:1px;background:var(--cyan)}
.pl-key .k-up{background:var(--up)}
.pl-key .k-down{background:var(--down)}
.pl-key .k-hole{border:1px solid var(--line-2);background:repeating-linear-gradient(45deg,rgba(201,184,255,.4) 0 1px,transparent 1px 4px)}
.pl-strip .instrument-caption{margin-top:10px;max-width:110ch}
.pl-none{margin:6px 0;color:var(--text-2);max-width:70ch}
@media (max-width:900px){.pl-svg{height:300px}}
@media (max-width:640px){.pl-svg{height:236px}.pl-key{gap:8px 16px;font-size:12px}.pl-trace .pl-glow{stroke-width:5}.pl-svg .pl-edge{display:none}}

/* ---- the "Show the numbers" tables under each figure */
.pl-numbers{margin-top:12px}
.pl-numbers summary{padding:8px 0;transition:color var(--t-fast)}
.pl-numbers summary:hover{color:var(--text)}
.pl-numbers .scroll-x{max-height:520px;overflow-y:auto;margin-top:6px}
/* selectors carry .table so they outrank site.css's .table.compact cells */
.table.pl-table th[scope=row]{font:500 12px var(--mono);color:var(--text-2);white-space:nowrap}
.table.pl-table td{font-family:var(--mono);font-size:12.5px;white-space:nowrap;text-align:right}
.table.pl-table td.pl-nc{text-align:left;font-family:var(--sans);font-size:13px;color:var(--muted)}
.table.pl-table thead th{position:sticky;top:0;background:var(--bg);z-index:1}
.pl-matrix abbr{text-decoration:none}
.table.pl-voltable th[scope=row]{white-space:normal;font-family:var(--sans);font-size:13.5px;color:var(--text)}
/* at 390 px both tables fit without a sideways scroll: headers wrap, cells tighten, the matrix keeps tickers and two-digit values */
.table.pl-table th.pl-wrap{white-space:normal;min-width:64px}
.table.pl-matrix td,.table.pl-matrix th{padding-left:4px;padding-right:4px}
@media (max-width:640px){
  .pl-numbers summary{min-height:44px;display:flex;align-items:center}
  .table.pl-table td,.table.pl-table th{padding-left:4px;padding-right:4px}
  .table.pl-matrix td,.table.pl-matrix th{padding-left:2px;padding-right:2px;font-size:11px}
  .table.pl-matrix thead th{letter-spacing:0;font-size:9.5px}
  .table.pl-matrix th[scope=row]{font-size:11px}
}

/* ---- Fig. 02: the volatility ranking, two columns of 25 sharing one scale; Bitcoin and Ethereum in cyan, the rest in lavender */
.pl-vol-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:4px}
.pl-vol-col{position:relative;display:grid;grid-template-columns:24px minmax(0,150px) minmax(0,1fr) 62px;grid-template-rows:auto auto;column-gap:10px;align-content:start}
.pl-vscale{grid-column:3;grid-row:1;display:block;width:100%;height:18px;overflow:visible}
.pl-vscale text{font:500 10px var(--mono);fill:var(--muted)}
/* the gridlines, drawn once for the column and laid behind the rows over the bar track (an absolutely placed grid item) */
.pl-vgrid{position:absolute;grid-column:3/4;grid-row:1/3;top:16px;left:0;width:100%;height:calc(100% - 16px);overflow:visible;z-index:0;pointer-events:none}
.pl-vgrid line{stroke:var(--line);stroke-width:1}
.pl-vgrid line.med{stroke:var(--lavender);stroke-opacity:.45}
.pl-vlist{position:relative;z-index:1;grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;list-style:none;margin:0;padding:0}
.pl-v{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:27px;border-radius:2px}
.pl-v:hover,.pl-v:focus-within{background:rgba(201,184,255,.05)}
.pl-rank{font:500 10.5px var(--mono);color:var(--faint);text-align:right}
.pl-coin{display:flex;align-items:baseline;gap:8px;min-width:0;color:var(--text)}
.pl-coin:hover{text-decoration:none}
.pl-coin:hover span{color:var(--text-2)}
.pl-coin b{flex:none;font:600 12px var(--mono);letter-spacing:.02em}
.pl-coin span{min-width:0;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-vbar{display:block;width:100%;height:27px;overflow:visible}
.pl-vbar rect{fill:rgba(201,184,255,.5)}
.pl-mark .pl-vbar rect{fill:var(--cyan)}
.pl-mark .pl-coin b{color:var(--cyan)}
.pl-vval{font:600 12px var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}
.pl-v-none .pl-vval{color:var(--faint)}
.pl-vols .instrument-caption{margin-top:12px;max-width:110ch}
@media (max-width:1000px){.pl-vol-cols{grid-template-columns:minmax(0,1fr)}.pl-vol-col+.pl-vol-col .pl-vscale{display:none}}
@media (max-width:640px){
  .pl-vol-col{grid-template-columns:22px minmax(0,96px) minmax(0,1fr) 54px;column-gap:8px}
  .pl-v{min-height:44px}
  .pl-coin{flex-direction:column;align-items:flex-start;gap:0;min-height:44px;justify-content:center}
  .pl-coin span{font-size:11.5px;max-width:100%}
  .pl-vscale .pl-minor{display:none}
}

/* ---- Fig. 03: the correlation triangle and the in-step lists */
.pl-corr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.pl-heat{position:relative;width:100%;max-width:600px;margin:4px auto 0}
.pl-heat svg{display:block;width:100%;height:auto;overflow:visible}
.pl-cell rect{fill:var(--cyan)}
.pl-cell.neg rect{fill:var(--magenta)}
.pl-cell.none rect{fill:none;stroke:var(--line-2);stroke-width:1}
.pl-cell text{font:600 12.5px var(--mono);fill:var(--text);text-anchor:middle}
.pl-cell.none text{fill:var(--faint);font-weight:500}
.pl-cell:hover rect,.pl-cell.on rect{stroke:var(--text);stroke-width:1.5}
.pl-hl{font:500 11.5px var(--mono);letter-spacing:.04em;fill:var(--lavender-text)}
.pl-hl.on{fill:var(--text)}
.pl-hkey text{font:500 11px var(--mono);fill:var(--text-2)}
.pl-hkey text.w{font-size:10.5px;letter-spacing:.06em;fill:var(--muted)}
.pl-hkey .pos{fill:var(--cyan)}
.pl-hkey .neg{fill:var(--magenta)}
.pl-heat-fig .instrument-caption{margin-top:10px}
.pl-steps{display:grid;gap:16px;align-content:start}
.pl-step{gap:6px}
.pl-step h3{margin:0}
.pl-slist{list-style:none;margin:0;padding:0}
.pl-slist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,120px) 48px;align-items:center;gap:12px;min-height:36px;border-bottom:1px solid var(--line)}
.pl-slist li:last-child{border-bottom:0}
.pl-sbar{display:block;width:100%;height:12px;overflow:visible}
.pl-sbar .track{fill:rgba(201,184,255,.07)}
.pl-sbar line{stroke:var(--line-field);stroke-width:1}
.pl-sbar .pos{fill:var(--cyan)}
.pl-sbar .neg{fill:var(--magenta)}
.pl-sval{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}
.pl-step-note{margin:0}
@media (max-width:1000px){.pl-corr-grid{grid-template-columns:minmax(0,1fr)}.pl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-step-note{grid-column:1/-1}}
@media (max-width:640px){
  .pl-steps{grid-template-columns:minmax(0,1fr)}
  .pl-slist li{min-height:44px}
  /* the triangle shrinks to about two thirds on a phone: its lettering is set larger in the SVG's own units to land near 10px */
  .pl-heat-fig{padding-inline:8px}
  .pl-heat-fig .instrument-head,.pl-heat-fig .instrument-caption{padding-inline:8px}
  .pl-cell text{font-size:15.5px}
  .pl-hl{font-size:14.5px}
  .pl-hkey text{font-size:14px}
  .pl-hkey text.w{font-size:13.5px}
}

/* ---- Ref. 02: the method notes */
.pl-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px 28px;margin:0}
.pl-defs div{padding-top:12px;border-top:1px solid var(--line)}
.pl-defs dt{margin:0 0 6px;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.pl-defs dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.pl-empty{padding:var(--pad-panel);margin:24px 0}
.pl-empty p{margin:0}

/* ---- motion: the crosshair is the only thing that moves, and only under the reader's hand */
.calm .pl-svg .pl-cross{transition:none}
@media (forced-colors:active){.pl-svg .pl-u,.pl-svg .pl-d,.pl-cell rect,.pl-vbar rect,.pl-sbar rect,.pl-meter .fill{fill:CanvasText}.pl-trace .pl-ln{stroke:CanvasText}}
