/* ═══════════ STOCKING CALCULATOR, on top of aqua.css ═══════════ */

.chead{position:relative;padding:clamp(92px,9vw,132px) 0 0}
.chead .kick{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,252,255,.8);
  margin-bottom:20px}
.chead .kick a:hover{color:var(--aqua)}
.chead h1{font-size:clamp(52px,8vw,124px);line-height:.92;letter-spacing:-.04em;font-weight:500;max-width:18em}
.chead h1 em{font-style:italic;color:var(--aqua)}
.chead .stand2{margin:26px 0 0;font-size:clamp(18px,1.8vw,23px);line-height:1.5;max-width:35em;color:var(--foam)}
.chead .stand2 b{color:var(--sun);font-weight:800}

/* ── the tool ── */
.tool{position:relative;margin-top:clamp(18px,2vw,28px)}
.tool > input{position:absolute;opacity:0;pointer-events:none}
.tanksel{border-top:1px solid rgba(240,252,255,.3);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:clamp(130px,14vw,210px) 1fr;align-items:stretch}
.tanksel .lb2{padding:20px 22px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f3);
  align-self:center}
.tanksel .row2{display:flex;flex-wrap:wrap;gap:9px;padding:16px 22px;border-left:1px solid var(--line)}
.tanksel label{cursor:pointer;padding:12px 20px;border-radius:999px;border:1px solid rgba(240,252,255,.26);
  font-size:15px;font-weight:700;color:var(--f2);transition:all .2s var(--out)}
.tanksel label:hover{border-color:rgba(140,255,232,.6);color:var(--foam)}
.tanksel label span{font-size:12px;font-weight:700;color:var(--f3);margin-left:6px}

.panel2{display:none;padding:clamp(28px,3.4vw,46px) 0 0}
/* The refusals used to sit in a .75fr rail beside the stock list, and they run three
   times its height: 33 pairwise notes against a list that stops, so align-items:start
   left up to 4,800px of empty column. Stacked now, and the rail width is kept on the
   stock list alone, because at full width its name and its figure would sit at
   opposite edges of the screen. */
.pgrid{display:block}
.pgrid > :not(.refuse){max-width:730px}
.answer2{font-family:var(--disp);font-size:clamp(30px,3.6vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.028em}
.answer2 b{color:var(--aqua);font-weight:500}
.answer2 s{text-decoration:none;color:var(--coral)}
.answer2 + .sub3{margin:16px 0 0;font-size:16.5px;color:var(--f2);max-width:42em}

.stock{margin-top:26px;border-top:1px solid rgba(240,252,255,.3)}
.stock .srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line)}
.stock .srow i{width:10px;height:10px;border-radius:50%;display:block;align-self:center}
.stock .srow.s-surface i{background:var(--aqua)}
.stock .srow.s-mid i{background:var(--cyan)}
.stock .srow.s-bottom i{background:var(--sun)}
.stock .srow.s-glass i{background:#B9E6EE}
.stock .nm5{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);font-weight:500;letter-spacing:-.02em;color:var(--foam)}
.stock .nm5 small{display:block;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--f3);margin-top:5px;
  letter-spacing:0}
.stock .cnt{font-family:var(--disp);font-size:clamp(22px,2.2vw,28px);font-weight:500;color:var(--aqua);white-space:nowrap}
.stock .lay{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f3);white-space:nowrap}

.heater{margin-top:22px;border:1px solid rgba(255,201,74,.4);background:linear-gradient(160deg,rgba(255,201,74,.1),rgba(1,19,31,.5));
  padding:22px 24px}
.heater .k3{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f3)}
.heater .v3{font-family:var(--disp);font-size:clamp(34px,3.6vw,50px);font-weight:500;color:var(--sun);margin-top:10px;
  letter-spacing:-.03em}
.heater p{margin:10px 0 0;font-size:14.5px;color:var(--f2)}

.refuse{border:1px solid var(--line);background:rgba(1,19,31,.5);padding:24px 26px;
  margin-top:clamp(28px,3vw,44px)}
.refuse h2.panelh{font-family:var(--disp);font-weight:500;font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
.refuse ul{list-style:none;margin:0;padding:0}
.refuse li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;color:var(--f2)}
.refuse li:first-child{border-top:0}
.refuse li b{color:var(--foam);font-weight:700}
.refuse li .no2{color:#FF9583;font-weight:800}
.refuse .blank2{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,90,70,.4);font-size:13.5px;color:#FF9583}
/* two columns above the breakpoint the rest of this file uses. The heading and the
   excluded list span both; a note is never broken across the gap. */
@media (min-width:1001px){
  .refuse{column-count:2;column-gap:clamp(26px,3vw,44px)}
  .refuse h2.panelh,.refuse ul{column-span:all}
  .refuse .blank2{break-inside:avoid}
}

/* ── derivation ── */
.derive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:10px}
.derive div{border:1px solid var(--line);background:rgba(1,19,31,.48);padding:24px 24px 22px}
.derive .n5{font-family:var(--disp);font-size:26px;font-weight:500;color:rgba(255,120,96,.62);line-height:1}
.derive h3{font-family:var(--ui);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--foam);margin-top:12px}
.derive p{margin:10px 0 0;font-size:15px;color:var(--f2)}

/* ── conversions ── */
.conv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px);margin-top:10px}
.conv table{width:100%;border-collapse:collapse;font-size:15.5px}
.conv caption{text-align:left;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f3);
  padding-bottom:12px}
.conv th,.conv td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.conv thead th{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f3);
  border-bottom:1px solid rgba(240,252,255,.3)}
.conv td{font-family:var(--disp);font-size:19px;font-weight:500;color:var(--foam)}
.conv td.note3{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--f2)}
.conv tbody tr:hover{background:rgba(140,255,232,.05)}

@media (max-width:1000px){
  .derive{grid-template-columns:1fr}
  .conv{grid-template-columns:1fr}
  .tanksel{grid-template-columns:1fr}
  .tanksel .row2{border-left:0}
  .stock .srow{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .stock .lay{grid-column:2/-1}
}

/* which panel shows */
.tool > #k-5:checked ~ .panel-5,
.tool > #k-10:checked ~ .panel-10,
.tool > #k-20:checked ~ .panel-20,
.tool > #k-29:checked ~ .panel-29{display:block}

/* chosen chip */
.tool > #k-5:checked ~ .tanksel label[for="k-5"],
.tool > #k-10:checked ~ .tanksel label[for="k-10"],
.tool > #k-20:checked ~ .tanksel label[for="k-20"],
.tool > #k-29:checked ~ .tanksel label[for="k-29"]{background:var(--cyan);border-color:var(--cyan);color:#04202C}
.tool > #k-5:checked ~ .tanksel label[for="k-5"] span,
.tool > #k-10:checked ~ .tanksel label[for="k-10"] span,
.tool > #k-20:checked ~ .tanksel label[for="k-20"] span,
.tool > #k-29:checked ~ .tanksel label[for="k-29"] span{color:#04202C}

/* focus rings for the off screen radios */
.tool > #k-5:focus-visible ~ .tanksel label[for="k-5"],
.tool > #k-10:focus-visible ~ .tanksel label[for="k-10"],
.tool > #k-20:focus-visible ~ .tanksel label[for="k-20"],
.tool > #k-29:focus-visible ~ .tanksel label[for="k-29"]{outline:none;box-shadow:0 0 0 1px rgba(140,255,232,.5),0 0 0 5px rgba(140,255,232,.12)}


/* a pairing warning is a record's own prose, 453 characters at the median, and the heater note
   enumerates every band in the build before it explains itself */
.refuse .blank2 p{margin:0}
.refuse .blank2 p+p{margin-top:.7em}
.heater p+p{margin-top:.8em}