/* calculators.css — page-scoped layer for the "calculators" group (loaded after style.css; see DESIGN.md).
   Converter pairs, coin calculators, the converter + calculator hubs and the tool pages
   (profit, DCA, position size, investment, mining, sats, market cap).
   Tokens only — no hard-coded colours, so light and dark both work.

   Sections
     1. Tool head + CSS illustration
     2. Calculator "app" (inputs / result panel)
     3. Sections, tables, explanation cards
     4. Converter widget (app treatment; base .cv still works elsewhere)
     5. Pair page: hero, local-exchange quote, conversion tables, ATH, guide, aside
     6. Directory cards (pair / coin / currency) + hubs
     7. Print */

/* =====================================================================
   1. TOOL HEAD
   ===================================================================== */
.calc-head{position:relative}
.calc-head__art{display:none}
@media (min-width:1024px){
  .calc-head .phead{padding-right:200px}
  .calc-head__art{position:absolute;right:28px;top:calc(var(--sp-5) + 52px);width:124px;height:124px;display:grid;place-items:center;color:var(--accent);pointer-events:none}
  .calc-head__art::before,.calc-head__art::after{content:"";position:absolute;inset:0;border-radius:28px}
  /* back tile: tinted, turned the other way */
  .calc-head__art::before{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);transform:rotate(12deg) translate(16px,6px)}
  /* front tile: the "app icon" */
  .calc-head__art::after{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);transform:rotate(-5deg)}
  .calc-head__art>*{position:relative;z-index:1}
  .calc-head__art>svg{width:52px;height:52px;transform:rotate(-5deg)}
  .calc-head__art .coin__dot{width:68px;height:68px;font-size:1rem;transform:rotate(-5deg)}
}

/* =====================================================================
   2. CALCULATOR APP — one card: inputs on the left, result on the right
   ===================================================================== */
.calc-app{padding:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);margin:var(--sp-6) 0 var(--sp-10);box-shadow:var(--shadow)}
@media (min-width:768px){ .calc-app{padding:0} }
.calc-app__in,.calc-app__out{padding:var(--sp-5);min-width:0}
.calc-app__out{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--answer-bg);border-top:1px solid var(--line)}
@media (min-width:768px){
  .calc-app{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .calc-app__in,.calc-app__out{padding:var(--sp-6)}
  .calc-app__out{border-top:0;border-left:1px solid var(--line)}
}
@media (min-width:1200px){ .calc-app__in,.calc-app__out{padding:var(--sp-8)} }
/* next to a 340px aside the main column is too narrow to split between 1024 and 1199px */
@media (min-width:1024px) and (max-width:1199px){
  .cp .calc-app{grid-template-columns:minmax(0,1fr)}
  .cp .calc-app__out{border-left:0;border-top:1px solid var(--line)}
}
.cp .calc-app{margin-top:0}

/* step labels */
.calc-app__k{display:flex;align-items:center;gap:.55rem;margin:0 0 var(--sp-4);font:600 var(--fs-12)/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-app__n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);font:650 11px/1 var(--font-sans);letter-spacing:0;font-variant-numeric:tabular-nums}
.calc-app__out .calc-app__k{margin:0;color:var(--accent)}
.calc-app__out .calc-app__n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* big, calm inputs */
.calc-app .fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--sp-4)}
.cp .calc-app .fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.calc-app .field{gap:.4rem}
.calc-app .field label{font-size:var(--fs-13);font-weight:600;color:var(--text-2)}
.calc-app .field input,.calc-app .field select{height:52px;border-radius:var(--r-md);background-color:var(--surface)}
.calc-app .field input{font-size:var(--fs-18);font-weight:600;letter-spacing:-.01em}
.calc-app .field select{font-size:var(--fs-15)}
.calc-app .field input::placeholder{color:var(--muted);font-weight:500;opacity:1}
.field--full{grid-column:1/-1}

/* result panel: space reserved so nothing jumps when app.js re-renders it */
.calc-app .result{border:0;background:none;padding:0;margin:0;min-height:7.5rem;display:flex;flex-direction:column;justify-content:center;gap:0;overflow-wrap:anywhere}
.calc-app .result__big{font:700 clamp(2.125rem,1.55rem + 2.3vw,3.25rem)/1.04 var(--font-sans);letter-spacing:-.045em;color:var(--text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.calc-app .result__big.d--up{color:var(--up)}
.calc-app .result__big.d--down{color:var(--down)}
.calc-app .result p{margin:.45rem 0 0;font-size:var(--fs-14);line-height:1.55;color:var(--text-2);max-width:56ch}
.calc-app .result p+p{margin-top:.25rem}
.calc-app .result p.muted{color:var(--muted)}
.calc-app .result strong{font-weight:650}
.calc-app__foot{margin:auto 0 0;padding-top:var(--sp-3);border-top:1px dashed var(--answer-line);font-size:var(--fs-12);line-height:1.5;color:var(--muted)}
/* style.css drops the arrow on big results; a coloured figure keeps its ▲/▼ here */
.pg-calculators .result__big.d--up::before,.pg-calculators .result__big.d--down::before{display:inline-block;font-size:.4em;vertical-align:.45em;margin-right:.3em;letter-spacing:0}
.pg-calculators .result__big.d--up::before{content:"▲"}
.pg-calculators .result__big.d--down::before{content:"▼"}

/* =====================================================================
   3. SECTIONS, TABLES, EXPLANATION CARDS
   ===================================================================== */
.calc-kpis{margin:0 0 var(--sp-8)}
.calc-sec,.pair-sec{margin:var(--sp-10) 0}
.calc-sec .sec__h{margin-bottom:var(--sp-4)}
.calc-sec .sec__h h2{font-size:var(--fs-24)}
.tbl-foot{margin:var(--sp-3) 0 0;font-size:var(--fs-13);color:var(--muted)}
.chart__foot{margin:var(--sp-2) 0 0;font-size:var(--fs-13);color:var(--muted)}
.chart__h .eyebrow{min-width:0}
/* highlight the example row of a table */
.tbl tbody tr.is-ex>td{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.tbl tbody tr.is-ex>td:first-child{box-shadow:inset 3px 0 0 var(--accent);font-weight:650}
.tbl .mult{color:var(--text-2)}
/* .tbl .num would otherwise paint a gain/loss cell in plain ink */
.tbl td.d--up{color:var(--up)} .tbl td.d--down{color:var(--down)}
/* live network inputs (mining) */
.mine-net{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.mine-net dd{white-space:normal;overflow:visible;overflow-wrap:anywhere}
/* "how it works" / formula — a readable card instead of a wall of text */
.calc-explain{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--sp-5);margin:var(--sp-10) 0}
@media (min-width:768px){ .calc-explain{padding:var(--sp-8) var(--sp-10)} }
.calc-explain>*{max-width:72ch}
.calc-explain h2{font-size:var(--fs-24);display:flex;align-items:center;gap:.65rem}
.calc-explain h2::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.calc-explain p:last-child{margin-bottom:0}

/* =====================================================================
   4. CONVERTER WIDGET — app treatment on this page group
   ===================================================================== */
.pg-calculators .cv{gap:var(--sp-2);box-shadow:var(--shadow)}
.cv__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.cv__t{font:650 var(--fs-16)/1.2 var(--font-sans);letter-spacing:-.012em;color:var(--text)}
.cv__live{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-12);font-weight:500;color:var(--muted)}
.pg-calculators .cv__box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);min-width:0}
.pg-calculators .cv__box:focus-within{border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)}
.pg-calculators .cv__box--out{background:var(--answer-bg);border-color:var(--answer-line)}
.cv__lab{display:block;margin:0 0 .1rem;font-size:var(--fs-12);font-weight:600;letter-spacing:.02em;color:var(--muted)}
.pg-calculators .cv__row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3)}
.pg-calculators .cv input{height:52px;border:0;background:transparent;padding:0;border-radius:var(--r-xs);font:650 clamp(1.5rem,1.25rem + 1vw,1.875rem)/1 var(--font-sans);letter-spacing:-.03em;box-shadow:none}
.pg-calculators .cv input:hover{border:0}
.pg-calculators .cv input:focus{box-shadow:none}
.pg-calculators .cv select{height:40px;width:auto;min-width:100px;border-radius:var(--r-pill);background-color:var(--surface);border-color:var(--line-2);font-size:var(--fs-15);padding-left:.95rem;box-shadow:var(--shadow-sm)}
.pg-calculators .cv__out{min-height:52px;padding:0;font:700 clamp(1.5rem,1.2rem + 1.2vw,2.125rem)/1.05 var(--font-sans);letter-spacing:-.035em;color:var(--text)}
/* swap: a round control that overlaps both panels */
.pg-calculators .cv__swap{justify-self:center;position:relative;z-index:1;margin:-18px 0;width:40px;height:40px;border-radius:50%;background:var(--surface);border-color:var(--line-2);box-shadow:var(--shadow);color:var(--text-2)}
.pg-calculators a.cv__swap:hover{color:var(--accent);border-color:var(--accent)}
.cv__swap svg{width:18px;height:18px}
.pg-calculators .cv__note{margin-top:var(--sp-2);font-size:var(--fs-13);line-height:1.5}
.cv__go a{display:inline-flex;align-items:center;min-height:32px;font-weight:600;color:var(--accent);text-decoration:none}
.cv__go a:hover{text-decoration:underline;color:var(--accent-hover)}

/* =====================================================================
   5. PAIR PAGE
   ===================================================================== */
.pair-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2) var(--sp-10);align-items:start}
@media (min-width:1024px){
  .pair-top{grid-template-columns:minmax(0,1fr) 400px}
  .pair-top__tool{padding-top:var(--sp-10)}
}
.pair-top__main .answer{margin:0 0 var(--sp-4)}
.pair-head{padding-bottom:var(--sp-6)}
.pair-head h1{max-width:22ch}
.pair-head__sub{display:block;margin-top:.55rem;font:500 clamp(1rem,.92rem + .4vw,1.25rem)/1.4 var(--font-sans);letter-spacing:-.01em;color:var(--muted)}
.pair-price{margin-top:var(--sp-5);align-items:center;gap:var(--sp-3) var(--sp-4)}
.pair-price .pair-price__v{display:inline-flex;align-items:baseline;flex-wrap:wrap;column-gap:.3em;font-size:clamp(2.25rem,1.45rem + 3.2vw,3.75rem);font-weight:700;letter-spacing:-.045em;overflow-wrap:anywhere;min-width:0}
.pair-price__u{font-size:.4em;font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.pair-price__d{display:inline-flex;align-items:center;gap:.45rem}
.pair-price__d .pill{font-size:var(--fs-14);padding:.2rem .55rem}
.pair-body{padding-top:var(--sp-6)}

/* local-exchange quote */
.lq{padding:0;overflow:hidden;margin:0 0 var(--sp-8)}
.lq__h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;padding:var(--sp-5) var(--sp-5) 0}
.lq__h>div:first-child{min-width:0;flex:1 1 260px}
.lq__h h2{font-size:var(--fs-24);margin-top:.45rem}
.lq__prem{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
@media (min-width:640px){ .lq__prem{align-items:flex-end} }
.lq__prem-k{font:600 var(--fs-11)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lq__prem .pill{font-size:var(--fs-20);font-weight:700;padding:.35rem .75rem;border-radius:var(--r-md);letter-spacing:-.02em}
.lq__cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp-3);margin:var(--sp-5) var(--sp-5) 0;padding:var(--sp-4);border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.lq__side{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.lq__side--loc{align-items:flex-end;text-align:right}
.lq__side-k{font-size:var(--fs-12);font-weight:500;color:var(--muted)}
.lq__side-v{font:650 var(--fs-20)/1.1 var(--font-sans);letter-spacing:-.03em;color:var(--text);overflow-wrap:anywhere}
@media (min-width:640px){ .lq__side-v{font-size:var(--fs-30)} }
.lq__side--loc .lq__side-v{color:var(--accent)}
.lq__arrow{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.lq__arrow svg{width:16px;height:16px}
.lq__stats{margin:var(--sp-4) var(--sp-5) 0;box-shadow:none}
.lq__stats .lq__vs{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.lq__stats .lq__vs dd .d{font-size:inherit;margin-top:0}
.lq__note{margin:var(--sp-4) var(--sp-5) var(--sp-5);font-size:var(--fs-14);line-height:1.6;color:var(--muted)}
.lq__note strong{color:var(--text)}
.lq__note a{color:var(--text-2)}
.lq .chart--inset{margin:0 var(--sp-5) var(--sp-5);box-shadow:none}
.pair-chart{margin:0 0 var(--sp-8)}
.pair-chart__d{display:inline-flex;align-items:center;gap:.4rem}

/* conversion tables: two clean columns */
.ctabs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6) var(--sp-5);margin:var(--sp-8) 0;align-items:start}
@media (min-width:640px){ .ctabs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ctab{min-width:0}
.ctab__t{font-size:var(--fs-20);letter-spacing:-.02em;margin:0 0 var(--sp-3)}
.tbl--pair th,.tbl--pair td{padding-top:.6rem;padding-bottom:.6rem}
.tbl--pair tbody td:first-child{color:var(--text-2)}
.tbl--pair tbody td:last-child{font-weight:600;color:var(--text)}
.sats-fx{margin-top:var(--sp-6)}

/* all-time-high fact */
.pair-ath{display:flex;gap:var(--sp-4);align-items:flex-start;margin:var(--sp-8) 0;padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text-2);font-size:var(--fs-15);line-height:1.6}
.pair-ath>span:last-child{min-width:0;padding-top:.35rem}
.pair-ath__ic{flex:none;width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.pair-ath__ic svg{width:18px;height:18px}

/* guide: readable column, sources line set apart */
.pair-guide{margin:var(--sp-10) 0}
.pair-guide>h2:first-child{margin-top:0}
.pair-guide h2{padding-top:var(--sp-2)}
.pair-guide .pair-guide__src{margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--fs-13);line-height:1.55;color:var(--muted)}

/* aside */
.pair-coin__h{display:flex;align-items:center;gap:.65rem;margin-bottom:var(--sp-2)}
.pair-coin__h h2{margin:0}
.pair-coin__go{margin:var(--sp-4) 0 0}
.pair-toc{margin:0;box-shadow:var(--shadow-sm)}
.pair-toc ol{columns:1}
.pair-toc a{display:inline-flex;align-items:center;min-height:28px}
@media (max-width:1023px){ .pair-toc{display:none} }

/* =====================================================================
   6. DIRECTORY CARDS + HUBS
   ===================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:var(--sp-2)}
@media (min-width:768px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3)} }
.pcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic t" "ic v";column-gap:.7rem;row-gap:.15rem;align-items:center;min-height:58px;padding:.65rem .85rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text);text-decoration:none;min-width:0;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pcard>.coin__dot,.pcard>.fxb{grid-area:ic}
.pcard__t{grid-area:t;min-width:0;font-size:var(--fs-13);font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur)}
.pcard__v{grid-area:v;min-width:0;font:650 var(--fs-15)/1.25 var(--font-sans);letter-spacing:-.012em;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pcard__s{font-size:var(--fs-12);font-weight:500;color:var(--muted)}
a.pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px);color:var(--text)}
a.pcard:hover .pcard__t{color:var(--accent)}
.pcard--coin .pcard__v{display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .55rem}
.pcard--coin .pcard__v .d{font-size:var(--fs-12)}
.pgrid--coins{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.pgrid--static .pcard{box-shadow:none}
/* aside mini grid (profit calculator) */
.pgrid--side{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--sp-2)}
.pcard--mini{grid-template-areas:"ic t";min-height:44px;padding:.4rem .6rem;column-gap:.5rem;box-shadow:none}
.pcard--mini .coin__dot{width:22px;height:22px;font-size:.5rem}
.pcard--mini .pcard__t{color:var(--text)}
/* currency badge */
.fxb{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 .4rem;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);font:650 var(--fs-12)/1 var(--font-sans);color:var(--text-2);white-space:nowrap}
.chip .fxb{min-width:22px;height:22px;padding:0 .3rem;border-radius:var(--r-xs);font-size:var(--fs-11)}

/* converter hub */
.cvhub__top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2) var(--sp-12);align-items:start}
@media (min-width:1024px){
  .cvhub__top{grid-template-columns:minmax(0,1fr) 420px}
  .cvhub__tool{padding-top:var(--sp-10)}
}
.cvhub__why{margin:var(--sp-6) 0 0;max-width:64ch}
.cvhub__why p{color:var(--text-2)}
.cvhub__jump{position:sticky;top:var(--hd-sticky);z-index:5;display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-8) calc(-1 * var(--gut)) var(--sp-4);padding:var(--sp-3) var(--gut);background:var(--bg);border-bottom:1px solid var(--line)}
.cvhub__jump .eyebrow{flex:none;margin:0}
@media (max-width:639px){ .cvhub__jump .eyebrow{display:none} }
.cvhub__jump .chips{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:2px 28px 2px 2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.cvhub__jump .chips::-webkit-scrollbar{display:none}
.cvhub__jump .chip{flex:none}
.fxsec{margin:var(--sp-10) 0;scroll-margin-top:calc(var(--hd-sticky) + 76px)}
.fxsec__h{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.fxsec__sym{flex:none;min-width:48px;height:48px;padding:0 .6rem;border-radius:var(--r);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 var(--fs-18)/1 var(--font-sans);letter-spacing:-.02em;white-space:nowrap}
.fxsec__t{min-width:0}
.fxsec__t h2{font-size:var(--fs-24)}
.fxsec__m{margin:.3rem 0 0;font-size:var(--fs-14);color:var(--muted)}

/* calculator hub */
.calc-dir{margin:0 0 var(--sp-12)}
/* seven tools: first card featured so no row is left with an orphan */
@media (min-width:640px){ .calc-dir>.tool:first-child{grid-column:span 2} }
@media (min-width:1024px){ .calc-dir{grid-template-columns:repeat(4,minmax(0,1fr))} }
.calc-dir .tool p{margin:0}
.calc-dir .tool__v{display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;margin-top:auto;padding:.3rem .65rem;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-13);font-weight:600;color:var(--text-2)}
.calc-dir .tool__v::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.calc-dir .tool h3{margin-top:var(--sp-1)}

/* =====================================================================
   7. PRINT
   ===================================================================== */
@media print{
  .calc-head__art,.cv__swap,.cvhub__jump,.pair-toc,.pair-top__tool{display:none!important}
  .calc-app,.pcard,.calc-explain,.pair-ath,.lq{box-shadow:none!important;break-inside:avoid}
  .calc-app__out{background:none}
}