/* ChainRegistry — the stablecoin peg watch (/stablecoins: resources/views/stablecoins/index.blade.php, App\Support\Pegs, public/js/stablecoins.js).
   One scale for every drawing on the page: 1% either side of $1, half a percent shaded. Shades follow the site's spectral scale:
   grey near the dollar, mint above it and pink below it, brighter the further out (classes f0, u1–u4, d1–d4 from Pegs::level()). */

/* ---- the three figures */
.pg-facts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin:24px 0 0}
.pg-total .instrument-body{--ih:84px;align-items:flex-end}
.pg-total .figure{font-size:clamp(40px,5.2vw,76px)}
.pg-total .provenance{gap:3px 0}
.pg-total .provenance>span{white-space:nowrap}
.pg-total .provenance>span+span::before{content:'·';margin:0 8px;color:var(--faint)}
.pg-share .instrument-body,.pg-near .instrument-body{--ih:40px}
.pg-meter,.pg-cells{display:block;width:100%;height:14px;overflow:visible}
.pg-meter-track{fill:rgba(201,184,255,.12)}
.pg-meter-fill{fill:var(--cyan)}
.pg-kept{margin:16px 0 0}

/* ---- shades for the plate's dots: grey near $1, tinted further out, lit outside the band */
.pg-dots .f0{fill:var(--tone-flat)}
.pg-dots .u1{fill:color-mix(in oklab,var(--tone-up) 25%,var(--tone-flat))}
.pg-dots .u2{fill:color-mix(in oklab,var(--tone-up) 55%,var(--tone-flat))}
.pg-dots .u3{fill:color-mix(in oklab,var(--tone-up) 85%,var(--tone-flat))}
.pg-dots .u4{fill:var(--tone-up)}
.pg-dots .d1{fill:color-mix(in oklab,var(--tone-down) 25%,var(--tone-flat))}
.pg-dots .d2{fill:color-mix(in oklab,var(--tone-down) 55%,var(--tone-flat))}
.pg-dots .d3{fill:color-mix(in oklab,var(--tone-down) 85%,var(--tone-flat))}
.pg-dots .d4{fill:var(--tone-down)}
.pg-dots .u3,.pg-dots .u4{filter:drop-shadow(0 0 5px rgba(94,242,184,.55))}
.pg-dots .d3,.pg-dots .d4{filter:drop-shadow(0 0 5px rgba(255,92,138,.55))}
/* the cells: lit inside the band, the tone of their side outside it */
.pg-cells .in{fill:rgba(201,184,255,.6)}
.pg-cells .out-d{fill:var(--tone-down)}
.pg-cells .out-u{fill:var(--tone-up)}

/* ---- Fig. 01, the plate: three layouts drawn on the server, one shown per width */
.pg-defs{position:absolute;width:0;height:0;overflow:hidden}
.pg-plate{position:relative;margin:0;border:1px solid var(--line-2);border-radius:var(--r);background:radial-gradient(50% 80% at 50% 50%,rgba(110,243,255,.05),transparent 70%),radial-gradient(circle,rgba(255,255,255,.07) .75px,transparent 1.25px) 0 0/40px 40px,#06060b}
.pg-svg{display:none;width:100%;overflow:visible}
.pg-wide{display:block}
.pg-grid line{stroke:rgba(201,184,255,.1);stroke-width:1}
.pg-grid .pg-major{stroke:rgba(201,184,255,.24)}
.pg-band{fill:rgba(110,243,255,.045)}
.pg-grid line.pg-dollar{stroke:url(#pg-chrome);stroke-width:1.5}
.pg-grid text{font:500 10px var(--mono);letter-spacing:.06em;fill:rgba(201,184,255,.72);text-anchor:middle}
.pg-grid .pg-dollar-label{font-weight:700;fill:#f4f4ff}
.pg-grid .pg-side{text-anchor:start;letter-spacing:.14em;text-transform:uppercase;fill:rgba(201,184,255,.72)}
.pg-grid .pg-side-r,.pg-grid .pg-end{text-anchor:end}
.pg-grid .pg-start{text-anchor:start}
.pg-dots circle{stroke:#06060b;stroke-width:1.5;transition:stroke var(--t-fast)}
.pg-dots a{cursor:pointer}
.pg-dots a:focus{outline:none}
.pg-dots a:hover circle,.pg-dots a:focus-visible circle,.pg-dots a.on circle{stroke:var(--cyan);stroke-width:2}
.pg-tags text{font:600 10px var(--mono);letter-spacing:.04em;fill:#e9ecf3;text-anchor:middle;paint-order:stroke;stroke:#06060b;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.pg-tags .in{font-size:9px;letter-spacing:0;fill:#07070c;stroke:none}
.pg-plate-caption{margin:0;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:1100px){.pg-wide{display:none}.pg-mid{display:block}}
@media (max-width:640px){.pg-mid{display:none}.pg-narrow{display:block}}
/* the readout stablecoins.js shows on hover and focus */
.pg-hud{position:absolute;z-index:4;left:0;top:0;min-width:170px;max-width:240px;padding:9px 12px;border:1px solid rgba(110,243,255,.35);border-radius:var(--r);background:rgba(10,10,18,.94);box-shadow:0 18px 40px -18px #000;font:13px/1.35 var(--sans);pointer-events:none;opacity:0;transition:opacity var(--t-fast)}
.pg-hud.on{opacity:1}
.pg-hud strong{display:block;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-hud span{display:flex;justify-content:space-between;gap:14px;font:12px var(--mono)}
.pg-hud span i{font-style:normal;color:var(--lavender-text);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ---- Fig. 02, the table */
.pg-panel{padding:0}
.pg-table td{vertical-align:middle}
.pg-table .coin-logo{width:24px;height:24px}
.pg-sub{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.pg-sub.pg-under{display:none;margin-left:34px}
.pg-th-sub{display:block;margin-top:2px;font-size:9.5px;letter-spacing:.1em;color:var(--faint)}
.pg-dev b{font-family:var(--mono);font-weight:600}
.pg-week{width:200px;min-width:130px}
.pg-line{display:block;width:100%;height:36px;overflow:visible}
.pg-line path{fill:none;stroke:url(#pg-tone);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pg-line-band{fill:rgba(110,243,255,.06)}
.pg-line-dollar{stroke:rgba(233,236,243,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.s-up{stop-color:var(--tone-up)}.s-flat{stop-color:var(--tone-flat)}.s-down{stop-color:var(--tone-down)}
.pg-none{font-size:12px;color:var(--muted)}
.pg-range{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-days .pg-off{color:var(--down)}
@media (max-width:900px){.pg-sub.pg-under{display:block}.pg-week{width:auto;min-width:130px}}
@media (max-width:640px){
  .pg-week{min-width:96px}
  .pg-table .coin-cell>a{gap:8px;min-height:44px}
  .pg-sub.pg-under{margin-left:32px}
}

/* ---- Fig. 03 and 04, lost pegs and other currencies */
.pg-pair-sections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start}
.pg-pair-sections>.section{margin-bottom:0}
.pg-rule{margin:-4px 0 14px;max-width:62ch}
.pg-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pg-list-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.pg-list-fig{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--down)}
.pg-list-text{margin:0;font-size:14px;color:var(--text-2)}
.pg-other-card .pg-list-text{margin-bottom:12px}
.pg-code{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:2px 6px;border:1px solid var(--line-2);border-radius:2px;color:var(--lavender-text)}
@media (max-width:900px){.pg-pair-sections{grid-template-columns:minmax(0,1fr);gap:0}}

/* ---- how to read it, and what is left out */
.pg-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin:0}
.pg-dl dt{margin-bottom:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.pg-dl dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.pg-caveat{margin:24px 0 0}
.pg-left{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.pg-left p{margin:0 0 8px;max-width:110ch}

@media (max-width:1100px){
  .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-total{grid-column:1/-1}
  .pg-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pg-facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .pg-total .provenance{gap:3px 14px}
  .pg-total .provenance>span+span::before{content:none}
  .pg-dl{grid-template-columns:minmax(0,1fr);gap:16px}
}
html.calm .pg-dots circle,html.calm .pg-hud{transition:none}
@media (forced-colors:active){.pg-dots a,.pg-cells rect{fill:CanvasText;filter:none}.pg-line path,.pg-grid line.pg-dollar{stroke:CanvasText}}