/* ChainRegistry /compare (Holo 2, 2026-10-26). Tokens and the shared pieces (.card light edges, .figure, .provenance, .chip-tone,
   .tip, .kicker) come from site.css; the toggle and the tray are styled by compare.js, which runs on every page. Each coin keeps one
   hue and one marker shape everywhere on the page, in rank order: cyan circle, magenta square, lavender triangle, steel diamond
   (steel is the chrome family's darker stop: the bright chrome sat too close to cyan to tell apart; the shapes carry identity for
   anyone who can't separate the hues at all). */
.s1{--hue:var(--cyan)}.s2{--hue:var(--magenta)}.s3{--hue:var(--lavender)}.s4{--hue:var(--steel)}
.key{display:inline-block;flex:none;width:9px;height:9px;background:var(--hue);vertical-align:middle}
.key.s1,.s1 .key{border-radius:50%}
.key.s2,.s2 .key{border-radius:1px}
.key.s3,.s3 .key{clip-path:polygon(50% 0,100% 100%,0 100%)}
.key.s4,.s4 .key{border-radius:1px;transform:rotate(45deg) scale(.82)}

/* ---- the head: the coins, the plain line under them; for a pair, the exchange rate as the page's one chrome figure */
.cmp-head{align-items:flex-end}
.cmp-head-text{flex:1 1 480px;min-width:0}
.cmp-head h1{overflow-wrap:anywhere}
.cmp-head h1.cmp-n4{font-size:clamp(22px,2.7vw,38px)}
.cmp-h1-part{display:inline-block}  /* "vs" stays with the coin after it, so no line ends on it */
.cmp-vs{display:inline-block;margin:0 .3em 0 .1em;font:500 .42em/1 var(--mono);letter-spacing:.14em;text-transform:lowercase;color:var(--lavender-text);vertical-align:.32em}
.cmp-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.cmp-ratio{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cmp-ratio-label{font:500 var(--fs-label) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.cmp-ratio-value{display:flex;align-items:baseline;gap:10px}
.cmp-ratio .figure{font-size:clamp(38px,4.6vw,66px)}
.cmp-ratio-in{font:600 clamp(15px,1.5vw,20px) var(--mono);letter-spacing:.06em;color:var(--text-2)}
.cmp-head .cmp-ratio .provenance{justify-content:flex-end;color:var(--lavender-text)}

/* ---- the cards */
.cmp-card{margin:18px 0}
.cmp-card .card-head{flex-wrap:wrap}
.cmp-card .card-head h2 small{color:var(--muted);text-transform:none;letter-spacing:.02em}
.cmp-crumbs span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-copy{min-width:96px;justify-content:center}
.cmp-copy[hidden]{display:inline-flex;visibility:hidden}  /* its box is kept until the script shows it, so nothing below jumps */
.cmp-swipe{display:none;margin:0 0 10px;font-size:13px;color:var(--muted)}
.cmp-caption{margin:14px 0 0;max-width:80ch;font-size:13px;line-height:1.5;color:var(--muted)}
.cmp-foot{margin:24px 0 8px;max-width:80ch}
.cmp-input{min-width:0;background:var(--bg);border:1px solid var(--line-field);border-radius:var(--r);padding:10px 12px;color:var(--text);font:15px var(--sans)}
.cmp-input::placeholder{color:var(--faint)}
.cmp-input:focus{border-color:var(--cyan)}
.cmp-add-form{display:flex;align-items:center;gap:8px}
.cmp-add-form .cmp-input{width:250px;padding:7px 10px;font-size:13px}
.cmp-overlay,.cmp-numbers{transition:opacity var(--t-fast)}
.cmp-loading{cursor:progress}
.cmp-loading .cmp-overlay,.cmp-loading .cmp-numbers{opacity:.45}

/* ---- Fig. 01, the sheet: one column per coin, the figures in rows; the label column stays put when the table scrolls sideways */
.cmp-table{table-layout:fixed;min-width:calc(170px + var(--n,2) * 150px)}
.cmp-table th[scope=row]{position:sticky;left:0;z-index:1;width:170px;background:var(--panel);font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text);white-space:normal;vertical-align:baseline;border-bottom-color:var(--line)}
.cmp-table tbody tr:hover th[scope=row],.cmp-table tbody tr:focus-within th[scope=row]{box-shadow:inset 2px 0 0 var(--cyan)}
.cmp-unit{color:var(--faint)}
.cmp-table td{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;vertical-align:baseline}
.cmp-table td small{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-table tbody tr:hover td:first-child{box-shadow:none}
.cmp-table .chip-tone.cmp-nil{padding-inline:0;border-color:transparent;background:none;color:var(--muted);font-size:14px}
.cmp-price{font-size:16px;font-weight:600;color:var(--text)}
.cmp-bar{display:block;width:100%;max-width:180px;height:3px;margin-top:9px;border-radius:2px;background:linear-gradient(90deg,var(--hue) 0 calc(var(--w,0) * 100%),rgba(201,184,255,.1) 0)}
.cmp-corner{width:170px;border-bottom:1px solid var(--line-2)}
.cmp-table th.cmp-coin{position:relative;padding:12px 34px 12px 10px;vertical-align:bottom;white-space:normal;text-transform:none;letter-spacing:0;font:inherit;color:var(--text);box-shadow:inset 0 2px 0 var(--hue)}
.cmp-coin-link{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text)}
.cmp-coin-link:hover{color:var(--cyan);text-decoration:none}
.cmp-coin-link .coin-logo{width:32px;height:32px}
.cmp-coin-name{font:600 16px/1.2 var(--sans);letter-spacing:-.01em;overflow-wrap:break-word;min-width:0}
.cmp-coin-meta{display:flex;align-items:center;gap:8px;margin:8px -24px 0 0;white-space:nowrap;font:500 11px var(--mono);letter-spacing:.08em;color:var(--muted)}
.cmp-remove{position:absolute;top:8px;right:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);color:var(--faint);font:18px/1 var(--sans);transition:color var(--t-fast),background-color var(--t-fast)}
.cmp-remove:hover{color:var(--magenta);background:var(--magenta-soft);text-decoration:none}

/* ---- Fig. 02, the overlay: a 1000 × 300 plate stretched to the card; lines keep 2px whatever the stretch; labels are HTML on top */
.cmp-overlay{--plot-h:330px;--axis-w:48px;--tags-w:96px;margin:4px 0 0}
.cmp-plot{position:relative;display:grid;grid-template-columns:var(--axis-w) minmax(0,1fr) var(--tags-w);height:var(--plot-h);margin-top:10px;touch-action:pan-y;border-radius:var(--r)}
.cmp-plot:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.cmp-yaxis,.cmp-tags,.cmp-area{position:relative;min-width:0}
.cmp-yaxis span{position:absolute;right:10px;transform:translateY(-50%);font:10.5px/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.cmp-yaxis span.base{color:var(--chrome)}
.cmp-area{border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:radial-gradient(120% 90% at 50% 0%,rgba(110,243,255,.035),transparent 60%)}
.cmp-area svg,.cmp-tags svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.cmp-area .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.cmp-area .base{stroke:rgba(233,236,243,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.cmp-area .ln{fill:none;stroke:var(--hue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px color-mix(in oklab,var(--hue) 55%,transparent))}
.cmp-end,.cmp-dot{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.cmp-end.s4,.cmp-dot.s4{transform:translate(-50%,-50%) rotate(45deg) scale(.82)}
.cmp-dot{z-index:2}
.cmp-dot[hidden],.cmp-cross[hidden]{display:none}
.cmp-cross{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:rgba(233,236,243,.45);pointer-events:none}
.cmp-tags svg{width:12px}
.cmp-tags path{fill:none;stroke:var(--hue);stroke-width:1;opacity:.7;vector-effect:non-scaling-stroke}
.cmp-tag{position:absolute;left:16px;transform:translateY(-50%);display:flex;align-items:baseline;gap:5px;white-space:nowrap;font:11.5px/1.2 var(--mono);color:var(--text-2);font-variant-numeric:tabular-nums}
.cmp-tag b{max-width:5.5em;overflow:hidden;text-overflow:ellipsis;color:var(--hue);font-weight:600}
.cmp-xaxis{position:relative;height:24px;margin:0 var(--tags-w) 0 var(--axis-w)}
.cmp-xaxis span{position:absolute;top:7px;transform:translateX(-50%);font:10.5px/1 var(--mono);color:var(--faint);white-space:nowrap}
.cmp-xaxis span:first-child{transform:none}
.cmp-xaxis span:last-child{transform:translateX(-100%)}
.cmp-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 0;padding:0;list-style:none}
.cmp-legend li{display:flex;align-items:center;gap:8px;font-size:14px}
.cmp-legend b{font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.cmp-tip{min-width:180px}
.cmp-tip .tip-row{gap:8px;margin-top:5px;font-size:11.5px}
.cmp-tip .tip-row b{display:inline;min-width:50px;font-size:12.5px;text-align:right}
.cmp-tip-sym{min-width:42px;color:var(--text-2)}
.cmp-numbers summary{padding:8px 0;transition:color var(--t-fast)}
.cmp-numbers summary:hover{color:var(--text)}
.cmp-numbers table{min-width:calc(130px + var(--n,2) * 150px)}
.cmp-numbers th[scope=row]{font:500 12px var(--mono);color:var(--text-2);white-space:nowrap}
.cmp-numbers td{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.cmp-numbers td b{font-weight:600;color:var(--text)}
.cmp-numbers .cmp-caption{margin:10px 0 4px}
.cmp-empty{display:flex;flex-wrap:wrap;align-content:center;gap:0 .35em;min-height:220px;margin:8px 0 4px;padding:24px;border:1px dashed var(--line-2);border-radius:var(--r)}

/* ---- Fig. 03, the venues: every exchange against every coin */
.cmp-venues th[scope=row]{font:600 14px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}
.cmp-venues th[scope=row] a{color:var(--text)}
.cmp-venues th[scope=row] a:hover{color:var(--cyan)}
.cmp-venues thead th:not(:first-child){font-weight:600;color:var(--text-2)}
.cmp-venues thead th .key{margin-right:8px}
.cmp-v{font-weight:600;color:var(--text)}
.cmp-none{color:var(--faint-line)}
.cmp-venues th[scope=row] small{display:block;margin-top:3px;font:400 11px/1.3 var(--mono);color:var(--muted)}
.cmp-silent th[scope=row] a{color:var(--text-2)}

/* ---- the picker */
.cmp-pick{margin:18px 0}
.cmp-find-label{display:block;margin:18px 0 8px;font:500 var(--fs-label) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.cmp-find{display:flex;gap:10px;max-width:620px}
.cmp-find .cmp-input{flex:1}
.cmp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:26px 0 0;padding:0;border:0;min-width:0}
.cmp-grid legend{padding:0;margin-bottom:10px;font:500 var(--fs-label) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.cmp-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.cmp-tile:hover{border-color:var(--cyan-line)}
.cmp-tile:has(:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.cmp-tile input:focus-visible{outline:none}
.cmp-tile:has(:checked){border-color:var(--cyan);background:var(--cyan-soft)}
.cmp-tile input{flex:none;margin:0;accent-color:var(--cyan)}
.cmp-tile .coin-logo{width:24px;height:24px}
.cmp-tile-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cmp-tile-sym{margin-left:auto;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--faint)}
.cmp-msg{margin:16px 0 0}
.cmp-pick-note{margin:18px 0 0}
.cmp-start{margin:40px 0 8px}
.cmp-start .kicker{margin-bottom:14px;font-size:11px}
.cmp-pairs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cmp-pairs a{display:inline-flex;transition:border-color var(--t-fast),color var(--t-fast);padding:9px 14px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--text);font-weight:500}
.cmp-pairs a:hover{border-color:var(--cyan);color:var(--cyan);text-decoration:none}

@media (max-width:1100px){.cmp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .cmp-table{min-width:calc(120px + var(--n,2) * 130px)}
  .cmp-table th[scope=row],.cmp-corner{width:120px}
  .cmp-numbers table{min-width:calc(110px + var(--n,2) * 130px)}
  .cmp-coin-link{flex-direction:column;align-items:flex-start;gap:6px}
  .cmp-head-side{align-items:flex-start;text-align:left;width:100%}
  .cmp-ratio{align-items:flex-start}
  .cmp-head .cmp-ratio .provenance{justify-content:flex-start}
  .cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cmp-swipe{display:block}
  .cmp-table{min-width:calc(96px + var(--n,2) * 108px)}
  .cmp-table th[scope=row],.cmp-corner{width:96px}
  .cmp-table th[scope=row]{padding:12px 6px;font-size:10px;letter-spacing:.06em;box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line-2)}
  .cmp-table tbody tr:hover th[scope=row],.cmp-table tbody tr:focus-within th[scope=row]{box-shadow:inset 2px 0 0 var(--cyan),inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line-2)}
  .cmp-venues th[scope=row]{font-size:13px;letter-spacing:0}
  .cmp-table td{padding:12px 8px;font-size:13px}
  .cmp-price{font-size:14px}
  .cmp-table th.cmp-coin{padding:10px 30px 10px 8px}
  .cmp-coin-name{font-size:14px}
  .cmp-coin-meta{gap:6px;letter-spacing:.04em}
  .cmp-remove{top:4px;right:0;width:36px;height:36px}
  .cmp-card .chips .chip{padding:12px 14px}
  .cmp-overlay{--plot-h:240px;--axis-w:36px;--tags-w:78px}
  .cmp-tag{left:14px;font-size:10.5px;gap:4px}
  .cmp-yaxis span{right:6px;font-size:10px}
  .cmp-xaxis span:nth-child(2),.cmp-xaxis span:nth-child(4){display:none}
  .cmp-add-form{width:100%}
  .cmp-add-form .cmp-input{flex:1;width:auto;font-size:16px}
  .cmp-find{flex-direction:column}
  .cmp-input{font-size:16px}
  .cmp-tile{padding:9px 10px;gap:8px}
  .cmp-tile-sym{display:none}
  .cmp-tile{min-height:50px}
  .cmp-tile-name{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  .cmp-pairs a{padding:11px 14px}
  .cmp-numbers table{min-width:calc(100px + var(--n,2) * 108px)}
  .cmp-numbers td{white-space:normal}
  .cmp-numbers td span{display:block;font-size:11px}
}
@media (forced-colors:active){.key,.cmp-end,.cmp-dot{forced-color-adjust:none}.cmp-area .ln{filter:none}}