/* ChainRegistry coin page (Holo 2, 2026-10-26): the identity row, the chrome price with its provenance and change chips,
   the instrument row (24h range, venue spread, supply gauge, sentiment), the chart plate and the converter. The plates and
   the shared pieces (.instrument, .figure, .provenance, .chip-tone, .hud, .live-flash) come from site.css; this file draws
   only what sits inside them. Motion is transitions on live readings only; .calm and reduced motion switch them off there. */

/* ---- identity: logo and name (they travel from the ranking row in a view transition), pills, watch and compare, the vote */
.coin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 28px;padding:22px 0 0}
.coin-ident{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.coin-id{display:flex;align-items:center;gap:16px;min-width:0}
.coin-id h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;overflow-wrap:anywhere}
.coin-head h1 .coin-sym{margin-left:0;overflow-wrap:anywhere}
.coin-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.coin-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.coin-tools .watch,.coin-tools .cmp-add-label{height:32px;border:1px solid var(--line-field);border-radius:var(--r);color:var(--text-2);transition:color var(--t-fast),border-color var(--t-fast)}
.coin-tools .watch{width:32px}
.coin-tools .cmp-add-label{padding:0 10px 0 5px}
.coin-tools .watch:hover,.coin-tools .cmp-add-label:hover,.coin-tools .cmp-add-label[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan-line)}
.coin-head .coin-vote{flex:none}
.coin-vote .vote-meter{display:none}   /* the sentiment instrument below is this page's read-out of the same counts */

/* ---- the reading: the chrome figure, the change chips and where the number came from */
.coin-reading{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 30px;margin:22px 0 0}
.coin-figure{margin:0;min-width:0;max-width:100%}
.coin-figure .figure{display:block;padding:.04em 0 .06em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.coin-figure-long .figure{font-size:clamp(30px,5vw,72px)}   /* sub-cent prices run to 14 characters; the digits must all show */
.coin-reading-side{display:flex;flex-direction:column;gap:10px;padding-bottom:6px;min-width:0}
.coin-changes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.coin-changes .chip-tone{padding:5px 10px;font-size:12.5px}
.chg-span{font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.coin-reading .provenance time{color:var(--text-2);text-transform:none;letter-spacing:.06em}

/* ---- the instrument row: bodies take the slack so captions line up along the bottom */
.coin-instruments{margin:26px 0 20px}
.coin-instruments .instrument-body{flex:1}
.ins-empty{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--faint)}

/* 24h range: a chrome rod from the day's low to its high, travelled part lit, the price as a cyan needle */
.rng{position:relative;width:100%;padding-top:12px}
.rng::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;border-right:1px solid rgba(201,184,255,.4);background:linear-gradient(90deg,rgba(201,184,255,.4) 1px,transparent 1px) 0 0/10% 100% repeat-x}
.rng-track{position:relative;height:6px;border-radius:3px}
.rng-track::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--chrome-grad);opacity:.42}
.rng-fill{position:absolute;left:0;top:0;height:6px;width:var(--pos);border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(110,243,255,.08),rgba(110,243,255,.7));box-shadow:0 0 14px -2px var(--cyan-glow);transition:width var(--t-slow) var(--ease)}
.rng-needle{position:absolute;left:var(--pos);top:4px;width:2px;height:24px;margin-left:-1px;border-radius:1px;background:var(--cyan);box-shadow:0 0 0 1px rgba(7,7,12,.6),0 0 12px var(--cyan-glow);transition:left var(--t-slow) var(--ease)}
.rng-needle::before{content:'';position:absolute;left:50%;top:-5px;width:9px;height:6px;margin-left:-4.5px;background:var(--cyan);clip-path:polygon(0 0,100% 0,50% 100%)}
.rng-ends{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin-top:12px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.rng-ends span{white-space:nowrap}
.rng-ends span+span{margin-left:auto;text-align:right}
.rng-ends small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.rng-ends b{font-weight:500}

/* venue spread: a plate centred on the registry price (chrome line), one tick per venue, taller for more volume */
.spr{width:100%;padding-top:18px}
.spr-plate{position:relative;height:38px;border-radius:2px;background:linear-gradient(90deg,rgba(201,184,255,.06),rgba(201,184,255,.02) 50%,rgba(201,184,255,.06));box-shadow:inset 0 0 0 1px rgba(201,184,255,.13)}
.spr-plate::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(201,184,255,.2)}
.spr-zone{position:absolute;top:5px;bottom:5px;background:linear-gradient(90deg,rgba(110,243,255,.16),rgba(201,184,255,.1),rgba(255,107,241,.16));border-left:1px solid rgba(110,243,255,.45);border-right:1px solid rgba(255,107,241,.45)}
.spr-mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--chrome-grad);box-shadow:0 0 10px rgba(233,236,243,.45);z-index:2;transition:left var(--t-slow) var(--ease)}
.spr-tick{position:absolute;left:var(--x);top:50%;width:2px;height:calc(8px + 22px * var(--w));margin-left:-1px;transform:translateY(-50%);border-radius:1px;background:var(--cyan);opacity:calc(.5 + .5 * var(--w));box-shadow:0 0 6px -1px var(--cyan-glow);z-index:1}
.spr-tick.out{width:7px;height:10px;margin-left:0;opacity:1;background:var(--magenta);box-shadow:none;clip-path:polygon(100% 0,100% 100%,0 50%)}
.spr-tick.out-r{margin-left:-7px;clip-path:polygon(0 0,100% 50%,0 100%)}
.spr-code{position:absolute;bottom:calc(100% + 5px);left:clamp(16px,var(--x),calc(100% - 16px));transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1;color:var(--lavender-text);white-space:nowrap}
.spr-axis{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint);font-variant-numeric:tabular-nums}
.spr-axis span:nth-child(2){color:var(--text-2);letter-spacing:.12em;text-transform:uppercase}

/* supply: circulating over max on a half dial; dotted and open-ended when there is no fixed maximum */
.sup{display:flex;justify-content:center;width:100%}
.sup svg{display:block;width:160px;max-width:100%;height:auto;overflow:visible}
.sup-track{fill:none;stroke:rgba(201,184,255,.15);stroke-width:8;stroke-linecap:round}
.ins-supply-uncapped .sup-track,.ins-supply-unknown .sup-track{stroke-linecap:butt;stroke-dasharray:1.1 1.9;stroke:rgba(201,184,255,.3)}
.ins-supply-uncapped .sup-track{stroke:url(#sup-open)}   /* open-ended: the dial fades out where a maximum would be */
.sup-fill{fill:none;stroke:url(#sup-grad);stroke-width:8;stroke-linecap:round}
.sup-dot{fill:#fff;stroke:var(--cyan);stroke-width:1.5}
.sup-tick{stroke:rgba(201,184,255,.4);stroke-width:1.2}
.sup-num{font-family:var(--mono);font-size:17px;font-weight:600;fill:var(--text);font-variant-numeric:tabular-nums}
.sup-num,.sup-sub{paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}   /* long supplies run over the dial's ends; the halo keeps them legible */
.sup-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--lavender-text)}

/* sentiment: thumbs up from the left, thumbs down from the right, the even split marked */
.snt{width:100%}
.snt-bar{position:relative;display:flex;height:10px;border-radius:2px;overflow:hidden;background:rgba(201,184,255,.14)}
.snt-bar::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(7,7,12,.7)}
.snt-up{flex:0 0 var(--up);background:linear-gradient(90deg,color-mix(in oklab,var(--tone-up) 45%,transparent),var(--tone-up));transition:flex-basis var(--t-med) var(--ease)}
.snt-down{flex:1 1 0;background:linear-gradient(90deg,var(--tone-down),color-mix(in oklab,var(--tone-down) 45%,transparent));box-shadow:inset 2px 0 0 var(--panel)}
.snt-empty .snt-up,.snt-empty .snt-down{background:none;box-shadow:none}
.snt-counts{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--text-2);white-space:nowrap}
.snt-n{display:inline-flex;align-items:center;gap:6px}
.snt-n b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.snt-n svg{fill:currentColor}
.snt-n-up svg{color:var(--up)}.snt-n-down svg{color:var(--down)}
.snt-empty .snt-n svg{color:var(--faint)}

/* ---- the chart plate */
.coin-plate{--plate:var(--bg-2)}
.coin-plate>p:last-child{margin:10px 0 0}

/* ---- the converter: two-way fields with JavaScript, a 1 / 10 / 100 table for everyone */
.ins-convert{margin:0 0 20px}
.conv{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 32px;align-items:center}
.conv{overflow-x:auto;padding:3px;margin:-3px}   /* sub-cent coins write long figures: the table scrolls inside its plate, the page never does; the padding keeps focus rings */
.conv-form{display:none;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0}
.js .conv{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.js .conv-form{display:flex}
.conv-field{display:flex;align-items:center;gap:8px;flex:1 1 150px;min-width:0;margin:0}
.conv-field input{flex:1;min-width:0;width:100%;background:var(--bg);border:1px solid var(--line-field);border-radius:var(--r);padding:10px 12px;color:var(--text);font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.conv-field input:focus{border-color:var(--cyan);box-shadow:0 0 18px -6px var(--cyan-glow)}
.conv-unit{order:2;flex:none;min-width:40px;max-width:76px;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--lavender-text)}
.conv-eq{font-family:var(--mono);font-size:15px;color:var(--faint)}
.ins-convert .instrument-head{flex-wrap:wrap;gap:4px 12px}
.ins-convert .instrument-label{flex:none}
.ins-convert .instrument-readout{white-space:normal;overflow-wrap:anywhere}
.conv-table{margin:0;max-width:680px}
.conv-table th:first-child{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* a 13-letter ticker in the column head gives way to the figures */
.conv-table th[scope=row]{font-size:12px;letter-spacing:.04em;color:var(--text-2);text-transform:none}
.conv-table td{font-family:var(--mono)}
.conv-table tbody tr:last-child td,.conv-table tbody tr:last-child th{border-bottom:0}
.conv-rate{color:var(--text-2);font-family:var(--mono);font-weight:500}

/* ---- the page below the fold: markets fold to the ten busiest pairs with JavaScript, and everything else lines up */
.js .markets-fold tbody tr:nth-child(n+11){display:none}
.markets-more{display:none;margin:14px auto 0}
.js .markets-more{display:block}
.stat-grid small+small{display:block}
.perf div:last-child:nth-child(4n+3){grid-column:span 2}
.perf div:last-child:nth-child(4n+2){grid-column:span 3}
.perf div:last-child:nth-child(4n+1){grid-column:span 4}
.meta-card p:last-child,.links-card>p{margin-bottom:0}
.links-card>p{padding:4px 0 8px}
.coin-posts-head{flex-wrap:nowrap}
.coin-posts-head h2{min-width:0}
.coin-posts-head .btn{flex:none}
.facts .contract{grid-template-columns:110px minmax(0,1fr) auto;align-items:center}
.contract code{min-width:0}
.contract-copy{flex:none;padding:3px 8px;border:1px solid var(--line-field);border-radius:var(--r);background:none;color:var(--text-2);font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast)}
.contract-copy:hover,.contract-copy.done{color:var(--cyan);border-color:var(--cyan-line)}

/* ---- the history page's title: logo and name on one line, whatever the width */
.hist-title{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-width:0}
.hist-title h1{margin:0;overflow-wrap:anywhere}
.hist-title .coin-logo{flex:none}

/* ---- tablet and phone */
@media (max-width:900px){
  .js .conv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .coin-head{flex-direction:column;gap:14px;padding-top:16px}
  .coin-id{gap:12px}
  .coin-reading{margin-top:16px;gap:12px}
  .coin-reading-side{padding-bottom:0}
  .coin-reading .provenance{flex-direction:column;align-items:flex-start}
  .coin-reading .provenance>[aria-hidden]{display:none}
  .coin-tools .watch,.coin-tools .cmp-add-label{height:40px}
  .coin-tools .watch{width:40px}
  .coin-plate .chips{display:flex;width:100%;gap:6px}
  .coin-plate .chip{flex:1;min-height:40px;padding:12px 0;text-align:center}
  .markets-more{width:100%;min-height:40px}
  .facts .contract{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  .contract>span{grid-column:1/-1}
  .contract code{margin-top:0}
  .contract-copy{min-height:40px;padding:0 12px}
  .coin-instruments{margin-top:20px}
  .conv-table th,.conv-table td{padding-left:4px;padding-right:4px;font-size:11.5px}
  .conv-table th:first-child{max-width:64px}
  .conv-field{flex-basis:100%}
  .conv-field input{font-size:16px}
  .conv-eq{display:none}
}