/* Coin calculator (/calculators/{TICKER}), phone redesign Nov 2026: see calc.js. Site tokens only, so dark mode follows. */
.cc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cc > *, .cc-side > * { min-width: 0; }
.cc-side { display: grid; gap: 16px; }
@media (min-width: 1100px) { .cc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.cc h2 { margin: 0 0 4px; }
.cc-lead { margin: 0 0 16px; font-size: 14px; color: hsl(var(--muted-foreground)); }

/* fields: label above, unit inside, 48 px tall */
.cc-form { display: grid; gap: 16px; }
.cc-f > label, .cc-l { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.cc-f > small { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: hsl(var(--muted-foreground)); }
.cc-box { display: flex; align-items: stretch; height: 48px; border: 1.5px solid hsl(var(--field-border, var(--input))); border-radius: 12px; background: hsl(var(--card)); overflow: hidden; }
.cc-box:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }
.cc-box input { flex: 1; min-width: 0; width: 100%; height: auto; border: 0; outline: 0; border-radius: 0; padding: 0 14px; font: inherit; font-size: 17px; font-weight: 600; background: transparent; color: inherit; font-variant-numeric: tabular-nums; }
.cc-box input:focus-visible { outline: 0; }
.cc-pre, .cc-suf { display: grid; place-items: center; padding: 0 12px; font-weight: 600; font-size: 15px; white-space: nowrap; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.cc-pre { border-right: 1px solid hsl(var(--border)); }
.cc-suf { border-left: 1px solid hsl(var(--border)); }
.cc-box select { flex: none; width: auto; min-width: 96px; height: auto; border: 0; border-left: 1px solid hsl(var(--border)); border-radius: 0; padding: 0 10px; font: inherit; font-weight: 600; background: hsl(var(--muted)); color: inherit; outline: 0; }
.cc-linked { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; vertical-align: 1px; color: var(--pos); background: var(--green-100); }
.cc-more { border-top: 1px solid hsl(var(--border)); }
.cc-more > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
.cc-more > summary::-webkit-details-marker { display: none; }
.cc-more > summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.cc-more[open] > summary::after { content: "−"; }
.cc-more > summary span { font-weight: 400; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }

/* miner picker button (APMobile.picker fills it): photo, model, specs */
.cc-pick { min-height: 64px; padding: 8px 14px 8px 8px; gap: 12px; border-width: 1.5px; border-color: hsl(var(--field-border, var(--input))); border-radius: 14px; }
.cc-pick .apm-pick-l { font-weight: 600; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.cc-pick .apm-pick-l small { margin-top: 2px; font-weight: 400; }
.cc-pick.cc-custom { border-style: dashed; color: hsl(var(--muted-foreground)); padding-left: 14px; }
/* the site's --card/--foreground are bare HSL triples, so mobile-ui.css's var(--card,#fff) is no colour here: give the sheet real ones */
.apm-sheet-p, .cc-pick { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.apm-q { background: hsl(var(--card)); color: inherit; border-color: hsl(var(--field-border, var(--input))); }
.apm-list li[data-v]:hover, .apm-list li[data-v]:focus { background: hsl(var(--muted)); }
.apm-list li[aria-selected="true"] { background: var(--green-100); }
.apm-list li small, .apm-pick-l small, .apm-pick-c { color: hsl(var(--muted-foreground)); }
.cc-ph { flex: none; width: 48px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--gray-100); }

/* result card */
.cc-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 12px; border-radius: 12px; background: hsl(var(--muted)); }
.cc-seg button { height: 44px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.cc-seg button[aria-pressed="true"] { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(16 24 40 / .15); }
.cc-seg button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }
.cc-big { margin: 18px 0 2px; font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.cc-profit { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc .good { color: var(--pos); } .cc .bad { color: var(--neg); }
.cc-verdict { margin: 6px 0 0; font-size: 15px; }
.cc-bar { display: flex; height: 12px; margin: 18px 0 10px; border-radius: 999px; overflow: hidden; background: hsl(var(--muted)); }
.cc-bar i { display: block; height: 100%; }
.cc-bar .p, .cc-rows .dot.p { background: var(--pos); }
.cc-bar .e, .cc-rows .dot.e { background: var(--amber-500); }
.cc-bar .fe, .cc-rows .dot.fe { background: #94a3b8; }
.cc-rows .dot.n { background: var(--neg); }
.cc-rows { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.cc-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 15px; }
.cc-rows li > span:last-child { text-align: right; white-space: nowrap; }
.cc-rows li:last-child { border-bottom: 0; font-weight: 700; font-size: 16px; }
.cc-rows .dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; }
.cc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cc-tile { padding: 12px; border-radius: 12px; background: hsl(var(--muted)); }
.cc-tile .l { font-size: 13px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.cc-tile .v { margin-top: 2px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-tile .s { font-size: 13px; color: hsl(var(--muted-foreground)); }
.cc-assume { margin: 12px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.cc-intro { max-width: 760px; margin: 20px 0 0; }

/* result bar pinned to the bottom on phones/tablets while the result card is off screen */
.cc-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #13243a; color: #fff; box-shadow: 0 -6px 20px rgb(0 0 0 / .18); transform: translateY(110%); visibility: hidden; transition: transform .45s cubic-bezier(.22, .61, .36, 1), visibility 0s .45s; }
.cc-dock.on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.cc-dock > div { min-width: 0; }
.cc-dock .l { font-size: 12px; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dock .v { font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-dock .v.good { color: #6ee7a8; } .cc-dock .v.bad { color: #ffb4ab; }
.cc-dock .pb { margin-left: auto; text-align: right; }
.cc-dock .pb .v { font-size: 17px; }
.cc-dock button { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #13243a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
html.cc-dock-on .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1100px) { .cc-dock { display: none; } }
@media (max-width: 380px) { .cc-dock { gap: 10px; padding-inline: 12px; } .cc-dock .v { font-size: 19px; } .cc-dock .pb .v { font-size: 15px; } .cc-profit { font-size: 34px; } }
@media (max-width: 1099px) { .sec-store .hw-main { padding-bottom: 72px; } }   /* the pinned bar never covers the last lines */
@media (prefers-reduced-motion: reduce) { .cc-dock, .cc-dock.on { transition: none; } }
@media print { .cc-dock { display: none; } }