/* ChainRegistry /calculator and the coin page's returns strip (round 3, 2026-11-03). Tokens and the shared pieces (.card light edges,
   .hud, .figure, .provenance, .chip-tone, .tip, .kicker, .instrument, .perf) come from site.css. The one loud thing is the chart: the
   value line in cyan against what went in, with the light between them, mint where the coins were worth more and magenta where less.
   Chart geometry lives in SVG attributes (positions in percent of the plot), so this sheet holds no data and the page no style attributes. */

/* ---- the head: the kicker runs the full width so its date never gets cut */
.calc-head>div{flex:1 1 auto;min-width:0}
.calc-head .kicker{max-width:none}
.calc-head p:not(.kicker){max-width:64ch}

/* ---- the form: Fig. 01 */
.calc-form{margin:18px 0}
.calc-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px 18px;align-items:end}
.calc-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;padding:0;border:0}
.calc-label{display:block;padding:0;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.calc-label small{margin-left:6px;font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.calc-input{width:100%;min-width:0;height:44px;background:var(--bg);border:1px solid var(--line-field);border-radius:var(--r);padding:0 12px;color:var(--text);font:15px var(--sans);font-variant-numeric:tabular-nums;color-scheme:dark}
.calc-input::placeholder{color:var(--faint)}
.calc-input:focus{border-color:var(--cyan)}
.calc-input[type=date]{font-family:var(--mono);font-size:14px}
.calc-money{position:relative;display:flex}
.calc-unit{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:600 15px var(--mono);color:var(--muted);pointer-events:none}
.calc-money .calc-input{padding-left:28px;font-family:var(--mono)}
.calc-seg{display:flex;gap:0;height:44px;border:1px solid var(--line-field);border-radius:var(--r);overflow:hidden}
.calc-seg label{position:relative;flex:1;display:flex;min-width:0}
.calc-seg label+label{border-left:1px solid var(--line-field)}
.calc-seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.calc-seg span{flex:1;display:flex;align-items:center;justify-content:center;padding:0 10px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color var(--t-fast),background-color var(--t-fast)}
.calc-seg label:hover span{color:var(--text);background:rgba(110,243,255,.05)}
.calc-seg input:checked+span{background:var(--cyan);color:var(--brand-ink);font-weight:700}
.calc-seg input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:-4px}
.calc-seg input:checked:focus-visible+span{outline-color:var(--brand-ink)}
.calc-choice.is-off{opacity:.5}
.calc-choice.is-off input:checked+span{background:transparent;color:var(--muted);font-weight:500}
.calc-go{display:flex;justify-content:flex-end;grid-column:-2/-1}
.calc-go .btn{min-height:44px;min-width:150px}
.calc-try{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.calc-try ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.calc-try a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--text);font-size:13.5px;transition:border-color var(--t-fast),color var(--t-fast)}
.calc-try a:hover{border-color:var(--cyan);color:var(--cyan);text-decoration:none}
.calc-problems,.calc-notes{max-width:80ch}
.calc-notes ul{margin:0;padding-left:18px}
.calc-notes li+li{margin-top:4px}

/* ---- the result: Fig. 02 */
.calc-result{margin:18px 0}
.calc-copy{min-width:104px}
.calc-copy[hidden]{display:inline-flex;visibility:hidden}  /* the box is kept until the script shows it, so nothing below jumps */
.calc-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 40px;margin:4px 0 22px}
.calc-top.with-side{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:end}
.calc-read{display:grid;gap:10px;min-width:0}
.calc-coin-id{display:flex;align-items:center;gap:12px;min-width:0}
.calc-coin-id .coin-logo{width:40px;height:40px;flex:none}
.calc-coin-id a{font:600 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--text)}
.calc-coin-id a:hover{color:var(--cyan);text-decoration:none}
.calc-sym{padding:2px 7px;border:1px solid var(--line-2);border-radius:2px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--muted)}
.calc-lede{max-width:62ch;margin:4px 0 0;font-size:18px;line-height:1.5;color:var(--text-2);text-wrap:balance}
.calc-figure{margin:2px 0 0;line-height:1}
.calc-figure.long .figure{font-size:clamp(34px,5vw,74px)}
.calc-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 0}
.calc-chip{padding:5px 10px;font-size:14px}
.calc-verdict-words{font-size:14px;color:var(--text-2)}
.calc-prov{margin-top:6px}
.calc-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.calc-cells>div{min-width:0;padding:14px 16px;background:var(--panel)}
.calc-cells dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.calc-cells dd{margin:6px 0 0;font:600 18px/1.25 var(--mono);font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.calc-cells dd.calc-cell-sub{margin-top:4px;font:400 12px/1.45 var(--sans);color:var(--muted)}
.calc-cells dd.down{color:var(--down)}
.calc-cells dd.up{color:var(--up)}
.calc-cell-unit{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
/* the same money in bitcoin: two bars on one scale, the coin lit, bitcoin quiet, the money that went in as a chrome tick across both */
.calc-side{display:grid;gap:12px;min-width:0;margin:0;padding:16px 18px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(7,7,12,.45)}
.calc-side h3{margin:0}
.calc-bars{display:grid;gap:14px;margin:0}
.calc-bar-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 12px}
.calc-bar-row dt{font:600 11px var(--mono);letter-spacing:.08em;color:var(--text-2)}
.calc-bar-row dd{display:contents}
.calc-bar-v{justify-self:end;font:400 13px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-bar-v b{font-size:15px;font-weight:600;color:var(--text)}
.calc-bar{grid-column:1/-1;grid-row:2;display:block;width:100%;height:10px;overflow:visible}
.calc-bar-track{fill:rgba(201,184,255,.08)}
.is-coin .calc-bar-fill{fill:var(--cyan)}
.is-btc .calc-bar-fill{fill:rgba(201,184,255,.5)}
.calc-bar-in{stroke:var(--chrome);stroke-width:2}
.calc-side-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.calc-vs-none{margin:14px 0 0;font-size:13px;color:var(--muted)}

/* ---- the chart: Fig. 03. The plot box is the plate; the gutters around it hold the axis labels and the two end tags. */
.calc-chart-card{margin:18px 0}
.calc-chart{margin:0}
.calc-plot{--plot-h:340px;position:relative;height:var(--plot-h);margin:16px 112px 36px 62px;touch-action:pan-y;border-radius:2px}
.calc-plot:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}
.calc-plot>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.calc-paths{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 62%)}
.calc-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.calc-gap{fill:rgba(201,184,255,.07)}
.calc-up{fill:var(--up);fill-opacity:.15;stroke:none}
.calc-down{fill:var(--down);fill-opacity:.17;stroke:none}
.calc-put{fill:none;stroke:rgba(233,236,243,.62);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.calc-line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(110,243,255,.45))}
.calc-ytick,.calc-xtick{fill:var(--faint);font:10.5px var(--mono);font-variant-numeric:tabular-nums}
.calc-ring{fill:var(--panel);stroke:var(--cyan);stroke-width:2}
.calc-end{fill:var(--cyan);stroke:var(--panel);stroke-width:2}
.calc-mark{fill:var(--text-2);font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.calc-tag{fill:var(--text);font:600 12.5px var(--mono);font-variant-numeric:tabular-nums}
.calc-tag-put{fill:var(--text-2);font-weight:500}
.calc-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--text-2)}
.calc-legend li{display:flex;align-items:center;gap:9px}
.calc-key{display:inline-block;flex:none}
.calc-key-line{width:18px;height:2px;border-radius:1px;background:var(--cyan);box-shadow:0 0 6px rgba(110,243,255,.55)}
.calc-key-put{width:18px;height:2px;border-radius:1px;background:rgba(233,236,243,.62)}
.calc-key-up,.calc-key-down{width:14px;height:10px;border-radius:2px}
.calc-key-up{background:rgba(94,242,184,.22);box-shadow:inset 0 0 0 1px rgba(94,242,184,.45)}
.calc-key-down{background:rgba(255,92,138,.22);box-shadow:inset 0 0 0 1px rgba(255,92,138,.45)}
.calc-caption{margin:12px 0 0;max-width:80ch;font-size:13px;line-height:1.5;color:var(--muted)}
.calc-numbers{margin-top:16px}
.calc-numbers summary,.calc-more summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;color:var(--muted);font-size:13px;transition:color var(--t-fast)}
.calc-numbers summary:hover,.calc-more summary:hover{color:var(--text)}
.calc-numbers th[scope=row],.calc-buys th[scope=row]{font:500 12.5px var(--mono);letter-spacing:0;text-transform:none;color:var(--text-2);white-space:nowrap}
.calc-numbers th small,.calc-buys th small{display:block;margin-top:2px;font:400 11px var(--sans);color:var(--muted);white-space:normal}
/* the hover layer, added by calculator.js */
.calc-cross{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:rgba(233,236,243,.4);pointer-events:none}
.calc-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 2px var(--panel);pointer-events:none;background:var(--cyan)}
.calc-dot.put{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--chrome)}
.calc-cross[hidden],.calc-dot[hidden],.calc-tip[hidden]{display:none}
.calc-tip{min-width:190px;z-index:4}
.calc-tip .tip-row{justify-content:space-between;gap:14px;margin-top:4px}
.calc-tip .tip-row b{display:inline;font-size:12.5px}

/* ---- the buys: Fig. 04 */
.calc-buys-card{margin:18px 0}
/* every buy row is plain cells (the long plans run to hundreds of rows); the columns are set here by position:
   1 the number, 2 the day, 3 close, 4 bought, 5 coins held, 6 put in, 7 value then */
.calc-buys{min-width:560px}
.calc-buys td,.calc-buys thead th{text-align:right;white-space:nowrap}
.calc-buys td{font-family:var(--mono);font-variant-numeric:tabular-nums}
.calc-buys td:first-child,.calc-buys thead th:first-child{width:44px;text-align:left;font-size:11px;color:var(--faint)}
.calc-buys thead th:nth-child(2){text-align:left}
.calc-more{margin-top:10px}
.calc-more[open] summary{margin-bottom:8px}

/* ---- how it is worked out */
.calc-method{margin:18px 0 8px}
.calc-method-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;max-width:none;margin:0;padding:0;list-style:none}
.calc-method-list li{position:relative;padding-left:16px;font-size:14px;line-height:1.55;color:var(--text-2)}
.calc-method-list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--lavender)}

/* ---- the returns strip (partials/returns), on the coin page and here: one cell a period, each a link into the calculator */
.rtn{margin:18px 0;container:rtn/inline-size}
.rtn-head{align-items:center}
.rtn-head h2{margin:0;font-size:var(--fs-label)}
.rtn-open{display:inline-flex;align-items:center;min-height:32px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* one row when the strip is wide enough for every period, four across in a middling column, two in a narrow one; the
   cells of a short last row widen to fill it, so no empty slot shows */
.rtn .rtn-cells{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-radius:2px}
.rtn-n1{--n:1}.rtn-n2{--n:2}.rtn-n3{--n:3}.rtn-n4{--n:4}.rtn-n5{--n:5}.rtn-n6{--n:6}.rtn-n7{--n:7}
@container rtn (441px <= width <= 860px){
  .rtn .rtn-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rtn .rtn-cell:last-child:nth-child(4n+1){grid-column:span 4}
  .rtn .rtn-cell:last-child:nth-child(4n+2),.rtn .rtn-cell:nth-last-child(2):nth-child(4n+1),.rtn .rtn-cell:last-child:nth-child(4n+3){grid-column:span 2}
}
@container rtn (width <= 440px){
  .rtn .rtn-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rtn .rtn-cell:last-child:nth-child(odd){grid-column:span 2}
}
.rtn .rtn-cell{position:relative;padding:12px 14px 11px;text-align:left;background:var(--panel);transition:background-color var(--t-fast)}
.rtn .rtn-cell:hover,.rtn .rtn-cell:focus-within{background:var(--panel-2)}
.rtn .rtn-up{box-shadow:inset 0 2px 0 rgba(94,242,184,.5)}
.rtn .rtn-down{box-shadow:inset 0 2px 0 rgba(255,92,138,.55)}
.rtn .rtn-cell dt{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lavender-text)}
.rtn .rtn-cell dd{margin:5px 0 0}
.rtn .rtn-cell a{font:600 16px/1.2 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rtn .rtn-cell a::after{content:'';position:absolute;inset:0}
.rtn .rtn-cell a:hover{text-decoration:none}
/* the focus ring goes round the whole cell where :has() is known; elsewhere the link keeps its own */
@supports selector(:has(a)){.rtn .rtn-cell a:focus-visible{outline:none}.rtn .rtn-cell:has(a:focus-visible){outline:2px solid var(--cyan);outline-offset:-2px}}
.rtn .rtn-cell small{display:block;margin-top:3px;font:400 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1100px){
  .calc-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-go{grid-column:1/-1}
  .calc-top.with-side{grid-template-columns:minmax(0,1fr)}
  .calc-side{max-width:560px}
}
@media (max-width:900px){
  .calc-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-cells .calc-cell-wide{grid-column:1/-1}
  .calc-method-list{grid-template-columns:minmax(0,1fr)}
  .calc-plot{--plot-h:280px;margin-right:96px}
}
@media (max-width:640px){
  .calc-fields{grid-template-columns:minmax(0,1fr);gap:14px}
  .calc-input{font-size:16px}
  .calc-input[type=date]{font-size:16px}
  .calc-go .btn{width:100%}
  .calc-copy{min-height:44px}
  .calc-coin-id a{display:inline-flex;align-items:center;min-height:44px}
  .calc-try a{min-height:44px}
  .calc-lede{font-size:16px}
  .calc-cells>div{padding:12px}
  .calc-cells dd{font-size:16px}
  .calc-plot{--plot-h:230px;margin:14px 58px 32px 42px}
  .calc-ytick,.calc-xtick{font-size:9.5px}
  .calc-tag{font-size:11px}
  .calc-tag-word{display:none}
  .calc-x1,.calc-x3{display:none}
  .calc-legend{gap:6px 16px;font-size:13px}
  .calc-numbers summary,.calc-more summary{min-height:44px}
  .calc-buys{min-width:0}
  .calc-buys :is(td,th):is(:nth-child(1),:nth-child(4),:nth-child(5),:nth-child(6)){display:none}
  .table.compact.calc-buys :is(td,th),.calc-numbers .table.compact :is(td,th){padding:7px 5px;font-size:12px}
  .table.compact.calc-buys thead th,.calc-numbers .table.compact thead th{font-size:10px;letter-spacing:.06em;white-space:normal}
  .calc-numbers :is(td,th):nth-child(2){display:none}
  .calc-buys th small,.calc-numbers th small{font-size:10.5px}
  .rtn .rtn-cell{padding:12px}
  .rtn-open{min-height:44px}
}
html.calm .calc-seg span,html.calm .calc-try a,html.calm .rtn .rtn-cell{transition:none}
@media (forced-colors:active){.calc-key,.calc-dot,.calc-cross{forced-color-adjust:none}.calc-line{filter:none}}