/* Exact supply proportions form one ribbon; the readable legend overlays the whole graphic. */
.supply { --supply-burn:#b4512a; --supply-lock:#987619; --supply-free:#527d35; --supply-base:var(--surface); position:relative; min-width:0; margin:30px 0 24px; }
.supply-ribbon { position:relative; isolation:isolate; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--supply-base); }
.supply-bar { position:absolute; inset:0; display:flex; overflow:hidden; pointer-events:none; }
.supply-segment { display:block; position:relative; flex:none; width:0; height:100%; background:color-mix(in srgb,var(--segment-color) 17%,var(--supply-base)); }
.supply-segment::before { content:""; position:absolute; top:0; left:0; right:0; height:7px; background:var(--segment-color); }
.supply-burned { --segment-color:var(--supply-burn); }
.supply-locked { --segment-color:var(--supply-lock); }
.supply-circulating { --segment-color:var(--supply-free); }
.supply-content { position:relative; display:grid; grid-template-columns:1fr auto; align-items:start; gap:20px; padding:25px 28px 23px; color:var(--ink); }
.supply-heading { min-width:0; }
.supply-heading h3 { font:500 21px/1.2 var(--display); letter-spacing:-.025em; margin:0; }
.supply-heading>span { display:block; margin-top:6px; font-size:10px; color:var(--muted); }
.supply-highlight { display:flex; align-items:baseline; gap:7px; padding-top:3px; }
.supply-highlight strong { font:500 24px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.supply-highlight>span { font-size:11px; color:var(--muted); }
.supply-legend { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; }
.supply-row { min-width:0; }
.supply-row dt { display:flex; align-items:center; gap:7px; font-size:12px; }
.supply-dot { width:7px; height:7px; border-radius:2px; flex:none; background:var(--segment-color); }
.supply-row dd { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 13px; margin:7px 0 0; font-variant-numeric:tabular-nums; }
.supply-row strong { font:500 34px/1 var(--display); letter-spacing:-.035em; }
.supply-row dd>span { color:var(--muted); font-size:13px; }
.supply-meta { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; padding:9px 2px 0; }
.supply-details { font-size:11px; }
.supply-details summary { display:flex; align-items:center; gap:7px; width:fit-content; padding:5px 0; cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line); }
.supply-details summary::-webkit-details-marker { display:none; }
.supply-details summary:hover { text-decoration-color:currentColor; }
.supply-details[open] { flex-basis:100%; }
.supply-details[open] summary>span { transform:rotate(90deg); }
.supply-explainer { color:var(--muted); font-size:12px; line-height:1.6; padding-top:3px; max-width:85ch; }
.supply-explainer p { margin:8px 0; }
.supply-sources { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.supply-sources a { text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.supply-status { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }
.supply[data-state="error"] .supply-status { color:var(--supply-burn); }
html[data-theme="dark"] .supply { --supply-burn:#f19a66; --supply-lock:#d4c17d; --supply-free:#71994c; }
/* The moved supply ribbon no longer shares the payout overview's two-column grid. */
#payouts .readout { grid-template-columns:minmax(0,1fr); }
.payout-total .spark { max-width:100%; height:43px; margin:25px 0 0; }
@media(max-width:640px) {
  .supply { margin-top:24px; }
  .supply-content { padding:22px 17px 20px; gap:22px 12px; }
  .supply-heading h3 { font-size:18px; }
  .supply-heading>span { max-width:20ch; font-size:10px; line-height:1.5; }
  .supply-highlight { flex-direction:column; align-items:flex-end; gap:5px; }
  .supply-highlight strong { font-size:23px; }
  .supply-highlight>span { font-size:10px; }
  .supply-legend { gap:10px; }
  .supply-row dt { font-size:11px; gap:5px; }
  .supply-row dd { flex-direction:column; align-items:flex-start; gap:7px; margin-top:9px; }
  .supply-row strong { font-size:clamp(23px,6.6vw,32px); }
  .supply-row dd>span { font-size:12px; }
  .supply-dot { width:6px; height:6px; }
  .payout-total .spark { max-width:400px; }
}
@media(max-width:360px) {
  .supply-content { padding-inline:13px; gap:20px 8px; }
  .supply-heading h3 { font-size:17px; }
  .supply-highlight>span { max-width:9ch; text-align:right; line-height:1.4; }
  .supply-legend { gap:8px; }
  .supply-row dt { gap:4px; }
}