/* ═══════════════════════════════════════════════════════════════════════
   SOQUPOOL — the mining calculator's stylesheet (2026-10-15).
   Loaded by the member console (app.html, with console.css) and by the
   public page (index.html, with foundry.css only). The rules under
   .calc-public are the console components the calculator relies on, scoped
   to the public page so the landing's own styles stay untouched; the console
   keeps its own. They come first so the calculator's rules win every tie.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── public page: the console components the calculator relies on ──────── */
.calc-public { --fs-min: 11px; --fs-body: 13.5px; }
/* the teaser: the calculator stays one bar tall until a visitor opens it */
.section.calc-public { padding-top: clamp(40px, 6vh, 64px); }
.calc-public .calc-teaser { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; border: 1px solid var(--seam); border-left: 2px solid var(--copper); background: var(--iron-900); }
.calc-public .calc-teaser-text { min-width: 0; max-width: 66ch; flex: 1 1 420px; }
.calc-public .calc-teaser .engraved { display: block; margin-bottom: 6px; }
.calc-public .calc-teaser-title { font-family: var(--font-display); font-variation-settings: "wdth" 118; font-weight: 800; text-transform: uppercase; font-size: clamp(19px, 2vw, 24px); line-height: 1.15; color: var(--text-hi); max-width: none; }
.calc-public .calc-teaser p { margin-top: 8px; font-size: 14.5px; color: var(--text-mid); line-height: 1.55; }
.calc-public .calc-teaser-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 1 auto; min-width: 0; }
.calc-public .calc-teaser-side .state { max-width: 320px; text-align: right; line-height: 1.5; }
.calc-public .calc-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.calc-public .calc-toggle-icon { display: inline-block; font-size: 1.3em; line-height: 1; transition: transform .2s ease; }
.calc-public:not(.collapsed) .calc-toggle-icon { transform: rotate(45deg); }
.calc-public.collapsed #calcState { display: none; }
.calc-public #pane-calculator[hidden] { display: none; }
@media (max-width: 700px) {
  .calc-public .calc-teaser { flex-direction: column; align-items: stretch; padding: 20px; }
  .calc-public .calc-teaser-text { flex: 0 0 auto; max-width: none; }
  .calc-public .calc-teaser-side { align-items: stretch; }
  .calc-public .calc-teaser-side .state { max-width: none; text-align: left; }
  .calc-public .calc-toggle { justify-content: center; flex: 1 1 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .calc-public .calc-toggle-icon { transition: none; } }
.calc-public .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--seam); background: var(--iron-900); }
.calc-public .p-title { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: .16em; text-transform: uppercase; color: var(--text-mid); }
.calc-public .panel-body { padding: 20px; }
.calc-public .field { margin-bottom: 18px; min-width: 0; }
.calc-public .field label { display: block; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 8px; }
.calc-public .field input, .calc-public .field select { width: 100%; padding: 11px 13px; background: var(--iron-950); border: 1px solid var(--seam); color: var(--text-hi); font-family: var(--font-mono); font-size: 13px; }
.calc-public .field input:focus, .calc-public .field select:focus { outline: none; border-color: var(--copper); }
.calc-public .hint { font-size: 12px; color: var(--text-lo); line-height: 1.5; margin-top: 7px; }
.calc-public .seg { display: inline-flex; border: 1px solid var(--seam); }
.calc-public .seg button { background: none; border: 0; cursor: pointer; padding: 6px 11px; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: .06em; color: var(--text-lo); border-right: 1px solid var(--seam); }
.calc-public .seg button:last-child { border-right: 0; }
.calc-public .seg button.on { background: var(--iron-800); color: var(--copper-hot); }
.calc-public .state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: .1em; text-transform: uppercase; }
.calc-public .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.calc-public .state-live { color: var(--copper-hot); } .calc-public .state-stale { color: var(--warn); } .calc-public .state-down { color: var(--down); } .calc-public .state-idle { color: var(--text-lo); }
.calc-public a.link { color: var(--copper-hot); } .calc-public a.link:hover { text-decoration: underline; }
.calc-public .mt { margin-top: 16px; } .calc-public .mt-sm { margin-top: 12px; }
.calc-public .engraved.block { display: block; margin-bottom: 4px; }
.calc-public .c-ltc { color: var(--ltc); } .calc-public .c-doge { color: var(--doge); } .calc-public .c-soq { color: var(--soq); } .calc-public .c-warn { color: var(--warn); }
.calc-public .calc-console { margin-top: 16px; font-size: 12.5px; color: var(--text-lo); line-height: 1.5; }
.calc-public .calc2 { margin-top: 28px; }

/* ── calculator: the answer first ─────────────────────────────────────── */
.calc2 { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.calc2 .bench { border: 1px solid var(--seam); }
.calc2 .bench .panel-head { border-bottom: 1px solid var(--seam); }
.calc2 .bench .panel-body { padding: 18px 20px; }
.calc2 .bench .field { margin-bottom: 14px; }
.calc2 .inline2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.calc2 .inline2 > .field { min-width: 0; margin-bottom: 0; }
.calc2 .unitrow { display: flex; gap: 8px; }
.calc2 .unitrow input { flex: 1; }
.calc2 .unitrow select { width: 96px; flex: none; }
.calc2 .elec { display: flex; gap: 12px; align-items: center; }
.calc2 .elec input[type=number] { width: 92px; }
.calc2 .slider { width: 100%; accent-color: var(--copper); margin: 6px 0 16px; }
.calc2 details { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--text-lo); }
.calc2 details summary { cursor: pointer; letter-spacing: .1em; text-transform: uppercase; list-style: none; display: block; padding: 8px 0; }
.calc2 details summary:hover { color: var(--text-mid); }
.calc2 details summary::-webkit-details-marker { display: none; }
.calc2 details summary::before { content: "\25B8\00a0\00a0"; }
.calc2 details[open] summary::before { content: "\25BE\00a0\00a0"; }
.answer { border: 1px solid var(--seam); border-top: 2px solid var(--copper); container-type: inline-size; }
.answer .a-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--seam); background: var(--iron-900); }
.answer .a-head .seg { flex: none; }
.answer .seg button { padding: 7px 14px; min-height: 32px; }
.answer .a-body { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.answer .big { font-family: var(--font-mono); font-weight: 600; color: var(--copper-hot); font-size: clamp(34px, 4vw, 52px); letter-spacing: -.02em; line-height: 1; }
.answer .big.neg { color: var(--down); }
.answer .big .u { font-size: 16px; color: var(--text-lo); font-weight: 400; margin-left: 8px; white-space: nowrap; display: inline-block; letter-spacing: 0; }
.answer .sentence { margin-top: 12px; font-size: 14.5px; color: var(--text-mid); line-height: 1.55; max-width: 46ch; }
.answer .sentence.sm { font-size: 12.5px; color: var(--text-lo); margin-top: 8px; }
.answer .sentence b { color: var(--text-hi); font-weight: 600; }
.ledger { border: 1px solid var(--seam); font-family: var(--font-mono); font-size: 12.5px; }
.ledger .lrow { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--seam); align-items: baseline; }
.ledger .lrow:last-child { border-bottom: 0; }
.ledger .lrow .k, .ledger .lrow .coins, .ledger .lrow .v { white-space: nowrap; }
.ledger .lrow .k { color: var(--text-lo); }
.ledger .lrow .coins { color: var(--text-lo); font-size: var(--fs-min); }
.ledger .lrow .v { color: var(--text-hi); text-align: right; min-width: 84px; }
.ledger .lrow.total { background: var(--iron-900); }
.ledger .lrow.total .v { color: var(--copper-hot); font-weight: 600; }
.ledger .lrow.cost .v { color: var(--down); }
.kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--seam); margin-top: 22px; }
.kpis3 .cell { padding: 16px 20px; border-right: 1px solid var(--seam); }
.kpis3 .cell:last-child { border-right: 0; }
.kpis3 .k { display: block; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: .14em; text-transform: uppercase; color: var(--text-lo); }
.kpis3 .v { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text-hi); }
.kpis3 .v .u { font-size: 12px; color: var(--text-lo); font-weight: 400; margin-left: 4px; }
.kpis3 .d { display: block; margin-top: 6px; font-size: 12px; color: var(--text-lo); }
.assume { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--seam); font-family: var(--font-mono); font-size: var(--fs-min); color: var(--text-lo); line-height: 1.7; }
.assume b { color: var(--text-mid); font-weight: 400; }
.assume p + p { margin-top: 8px; }
.soq-card { border: 1px solid var(--seam); border-top: 2px solid var(--soq); margin-top: 22px; }
.soq-card .a-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--seam); background: var(--iron-900); }
.soq-card .a-head .p-title { color: var(--soq); }
.soq-card .a-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.soq-card .big { font-family: var(--font-mono); font-weight: 600; color: var(--soq); font-size: 30px; letter-spacing: -.01em; }
.soq-card .big .u { font-size: 13px; color: var(--text-lo); font-weight: 400; margin-left: 6px; white-space: nowrap; display: inline-block; letter-spacing: 0; }
.soq-card .muted { color: var(--text-lo); font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
.soq-card .muted b { color: var(--text-mid); }
.soq-card input[type=range] { width: 100%; accent-color: var(--soq); }
.soq-card .range-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-min); color: var(--text-lo); margin-top: 4px; }
/* the ledger needs about 300px: when the answer box itself is too narrow for the figure and the
   ledger side by side, the ledger sits under the figure instead of wrapping its labels. Measured
   on the box, so the console's rail and gutters count. */
@container (max-width: 820px) {
  .answer .a-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .calc2 { grid-template-columns: 1fr; }
  .answer .a-body, .soq-card .a-body { grid-template-columns: 1fr; }
  .kpis3 { grid-template-columns: 1fr; }
  .kpis3 .cell { border-right: 0; border-bottom: 1px solid var(--seam); }
  .kpis3 .cell:last-child { border-bottom: 0; }
  .calc2 .unitrow select { width: 96px !important; }
  .answer .seg button { min-height: 40px; padding: 8px 16px; }
  .answer .a-head { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 420px) {
  .ledger .lrow { gap: 10px; padding: 10px 12px; }
  .ledger .lrow .v { min-width: 0; }
}