/* ═══════════ SILO HUB, on top of aqua.css ═══════════ */

/* ── hub head ── */
.hubhead{position:relative;padding:clamp(92px,9vw,132px) 0 clamp(8px,1vw,16px);overflow:clip}
.hubhead .shot{position:absolute;inset:0;z-index:-1}
.hubhead .shot img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(1.05) blur(1px)}
.hubhead::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,19,31,.62) 0%,rgba(1,19,31,.4) 46%,rgba(1,19,31,.86) 100%)}
.hubhead .wrap{position:relative;z-index:2}
.hubhead h1{font-size:clamp(56px,9vw,148px);line-height:.9;letter-spacing:-.04em;font-weight:500}
.hubhead h1 em{font-style:italic;color:var(--aqua)}
.hubhead .kick{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,252,255,.8);margin-bottom:20px}
.hubhead .kick a:hover{color:var(--aqua)}
.hubhead .lede2{margin:26px 0 0;font-size:clamp(18px,1.8vw,23px);line-height:1.5;max-width:33em;color:var(--foam)}
.hubhead .lede2 b{color:var(--sun);font-weight:800}
.hubstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.hubstats > div{padding:20px 22px 22px;border-right:1px solid var(--line)}
.hubstats > div:first-child{padding-left:0}
.hubstats > div:last-child{border-right:0;padding-right:0}
.hubstats .k{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--f3)}
.hubstats .v{font-family:var(--disp);font-size:clamp(26px,3vw,40px);font-weight:500;margin-top:10px;letter-spacing:-.03em}
.hubstats .v small{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--f2);margin-top:7px;letter-spacing:0}
.hubstats .queued .v{color:var(--sun)}

/* ── filters, no JS ── */
.hub{position:relative}
.hub > input{position:absolute;opacity:0;pointer-events:none}
.filters{border-top:1px solid rgba(240,252,255,.3);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:clamp(120px,13vw,190px) 1fr;align-items:stretch}
.filters + .filters{border-top:0}
.filters .fl2{padding:18px 22px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f3);
  align-self:center}
.filters .opts2{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-left:1px solid var(--line)}
.filters label{cursor:pointer;padding:9px 16px;border-radius:999px;border:1px solid rgba(240,252,255,.24);
  font-size:14px;font-weight:700;color:var(--f2);transition:all .2s var(--out)}
.filters label:hover{border-color:rgba(140,255,232,.6);color:var(--foam)}
.status{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:16px 0 4px;font-size:13px;color:var(--f3)}
.status b{color:var(--foam);font-weight:800}

/* ── the dense record list ── */
.list{margin-top:6px}
.rowh{display:grid;grid-template-columns:minmax(0,1.5fr) 92px 96px 108px 96px minmax(0,1fr);gap:18px;
  padding:14px 0 12px;border-bottom:1px solid rgba(240,252,255,.3);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f3)}
.row{display:grid;grid-template-columns:minmax(0,1.5fr) 92px 96px 108px 96px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);
  transition:transform .28s var(--out),background .28s var(--out)}
.row:hover{transform:translateX(9px);background:linear-gradient(90deg,rgba(140,255,232,.08),transparent 72%)}
.row .who2{min-width:0}
.row .nm2{font-family:var(--disp);font-size:clamp(23px,2.3vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.05;
  display:block;color:var(--foam)}
.row .bin2{display:block;font-size:12.5px;font-style:italic;color:var(--f3);margin-top:6px}
.row .val{font-family:var(--disp);font-size:20px;font-weight:500;color:var(--foam);white-space:nowrap}
.row .val.na2{font-family:var(--ui);font-size:12px;font-weight:800;color:var(--coral);white-space:normal}
.row .zn{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--f2);white-space:nowrap}
.row .zn i{width:9px;height:9px;border-radius:50%;display:block}
.row.z-surface .zn i{background:var(--aqua)}
.row.z-mid .zn i{background:var(--cyan)}
.row.z-bottom .zn i{background:var(--sun)}
.row .note2{font-size:14px;color:var(--f2)}
.row .note2 b{color:#FF8E7F;font-weight:800}
.empty{display:none;padding:34px 0 30px;border-bottom:1px solid var(--line)}
.empty .big2{font-family:var(--disp);font-size:clamp(24px,2.6vw,34px);font-weight:500;color:var(--coral)}
.empty p{margin:12px 0 0;font-size:15.5px;color:var(--f2);max-width:40em}

/* ── beginner picks ── */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:10px}
.pick2{border:1px solid var(--line);background:rgba(1,19,31,.48);padding:24px 24px 22px;
  transition:border-color .3s var(--out),transform .3s var(--out)}
.pick2:hover{border-color:rgba(140,255,232,.5);transform:translateY(-3px)}
.pick2 .n3{font-family:var(--disp);font-size:clamp(24px,2.4vw,31px);font-weight:500;letter-spacing:-.02em}
.pick2 .why2{font-size:15px;color:var(--f2);margin-top:12px}
.pick2 .num{display:flex;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pick2 .num div{min-width:0}
.pick2 .num dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f3)}
.pick2 .num dd{margin:5px 0 0;font-family:var(--disp);font-size:18px;font-weight:500}

/* ── the queue ── */
.queue{border:1px solid var(--line);background:rgba(240,252,255,.05);padding:clamp(24px,3vw,34px);margin-top:10px}
.queue h3{font-size:clamp(24px,2.5vw,32px);margin-bottom:12px}
.queue p{font-size:15.5px;color:var(--f2);max-width:44em}
.queue .names{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.queue .names span{padding:9px 15px;border-radius:999px;border:1px dashed rgba(240,252,255,.28);font-size:14px;
  font-weight:700;color:var(--f2)}
.queue .names span b{color:var(--f4);font-weight:700;font-size:12px;margin-left:7px}
.queue form{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;max-width:520px}
.queue input{flex:1 1 200px;min-width:0;background:rgba(1,19,31,.6);border:1px solid rgba(240,252,255,.24);
  color:var(--foam);font-family:var(--ui);font-size:15px;font-weight:600;padding:13px 16px;border-radius:999px;outline:none}
.queue input:focus-visible{border-color:var(--aqua)}
.queue button{border:0;border-radius:999px;padding:13px 22px;cursor:pointer;background:var(--cyan);color:#04202C;
  font-family:var(--ui);font-size:14.5px;font-weight:800;transition:background .2s var(--out),transform .2s var(--out)}
.queue button:hover{background:var(--aqua);transform:translateY(-1px)}

@media (max-width:1080px){
  .rowh{display:none}
  .row{grid-template-columns:minmax(0,1fr) 96px;gap:14px 18px;padding:22px 0}
  .row .val,.row .zn{grid-column:auto}
  .row .who2{grid-column:1/-1}
  .row .note2{grid-column:1/-1;margin-top:4px}
  .picks{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hubstats{grid-template-columns:1fr 1fr}
  .hubstats > div{padding:16px 16px 18px}
  .filters{grid-template-columns:1fr}
  .filters .opts2{border-left:0}
  .row{grid-template-columns:1fr 1fr;gap:12px 16px}
}

/* filter behavior: two independent rules intersect */
.hub > #z-surface:checked ~ .list .row:not(.z-surface){display:none}
.hub > #z-mid:checked ~ .list .row:not(.z-mid){display:none}
.hub > #z-bottom:checked ~ .list .row:not(.z-bottom){display:none}
.hub > #t-5:checked ~ .list .row:not(.fit-5){display:none}
.hub > #t-10:checked ~ .list .row:not(.fit-10){display:none}
.hub > #t-20:checked ~ .list .row:not(.fit-20){display:none}

/* the one combination this silo cannot serve yet */
.hub > #z-bottom:checked ~ #t-5:checked ~ .list .empty{display:block}

/* chosen chips */
.hub > #z-all:checked ~ .filters label[for="z-all"],
.hub > #z-surface:checked ~ .filters label[for="z-surface"],
.hub > #z-mid:checked ~ .filters label[for="z-mid"],
.hub > #z-bottom:checked ~ .filters label[for="z-bottom"],
.hub > #t-any:checked ~ .filters label[for="t-any"],
.hub > #t-5:checked ~ .filters label[for="t-5"],
.hub > #t-10:checked ~ .filters label[for="t-10"],
.hub > #t-20:checked ~ .filters label[for="t-20"]{background:var(--cyan);border-color:var(--cyan);color:#04202C}

/* focus rings for the off-screen controls */
.hub > #z-all:focus-visible ~ .filters label[for="z-all"],
.hub > #z-surface:focus-visible ~ .filters label[for="z-surface"],
.hub > #z-mid:focus-visible ~ .filters label[for="z-mid"],
.hub > #z-bottom:focus-visible ~ .filters label[for="z-bottom"],
.hub > #t-any:focus-visible ~ .filters label[for="t-any"],
.hub > #t-5:focus-visible ~ .filters label[for="t-5"],
.hub > #t-10:focus-visible ~ .filters label[for="t-10"],
.hub > #t-20:focus-visible ~ .filters label[for="t-20"]{outline:none;box-shadow:0 0 0 1px rgba(140,255,232,.5),0 0 0 5px rgba(140,255,232,.12)}

/* the readout under the filters */
.status .s2{display:none}
.hub > #z-all:checked ~ .status .s-z-all,
.hub > #z-surface:checked ~ .status .s-z-surface,
.hub > #z-mid:checked ~ .status .s-z-mid,
.hub > #z-bottom:checked ~ .status .s-z-bottom,
.hub > #t-any:checked ~ .status .s-t-any,
.hub > #t-5:checked ~ .status .s-t-5,
.hub > #t-10:checked ~ .status .s-t-10,
.hub > #t-20:checked ~ .status .s-t-20{display:inline}


/* ═══════════ TEMPERATURE OVERLAP ═══════════ */
.overlap{margin-top:12px;border:1px solid var(--line);background:rgba(1,19,31,.44);padding:clamp(22px,2.8vw,34px)}
.olscale{position:relative;margin-top:34px;--lab:clamp(120px,14vw,200px);--gp:clamp(14px,2vw,26px)}
.olrow{display:grid;grid-template-columns:var(--lab) 1fr;gap:var(--gp);align-items:center;padding:13px 0}
.olrow .who3{font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);font-weight:500;letter-spacing:-.02em}
.olrow .who3 small{display:block;font-family:var(--ui);font-size:12px;font-weight:700;color:var(--f3);margin-top:4px;
  letter-spacing:.04em}
.oltrack{position:relative;height:26px}
.oltrack .base3{position:absolute;left:0;right:0;top:12px;height:2px;background:rgba(240,252,255,.2)}
.oltrack .band3{position:absolute;top:6px;height:14px;border-radius:2px;
  background:linear-gradient(90deg,#39C8E8,#7FE3C6 45%,#F2D06A 82%,#EF9F3E)}
.oltrack .dot3{position:absolute;top:2px;width:2px;height:22px;background:var(--foam)}
.oltrack .dot3::after{content:"";position:absolute;left:-4px;top:-6px;width:10px;height:10px;border-radius:50%;
  background:var(--foam)}
.olzone{position:absolute;top:0;bottom:34px;
  left:calc(var(--lab) + var(--gp) + var(--olz-left,0.3846) * (100% - var(--lab) - var(--gp)));
  width:calc(var(--olz-width,0.2308) * (100% - var(--lab) - var(--gp)));
  border-left:1px dashed rgba(140,255,232,.55);
  border-right:1px dashed rgba(140,255,232,.55);background:rgba(140,255,232,.09);pointer-events:none}
.olzone span{position:absolute;left:50%;top:-26px;transform:translateX(-50%);white-space:nowrap;font-size:11px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.olends{display:flex;justify-content:space-between;margin-top:6px;padding-left:calc(var(--lab) + var(--gp));
  font-size:11.5px;font-weight:700;color:var(--f3)}
.overlap .conc2{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:16px;color:var(--f2);max-width:46em}
.overlap .conc2 b{font-family:var(--disp);font-size:22px;font-weight:500;color:var(--aqua)}

/* ═══════════ FIELD MATRIX ═══════════ */

/* ═══════════ MISTAKES ═══════════ */
.mistakes{margin-top:10px;border-top:1px solid rgba(240,252,255,.3)}
.mistake{display:grid;grid-template-columns:clamp(200px,24vw,340px) 1fr;gap:clamp(18px,3vw,44px);padding:22px 0;
  border-bottom:1px solid var(--line);transition:background .28s var(--out)}
.mistake:hover{background:linear-gradient(90deg,rgba(255,90,70,.07),transparent 70%)}
.mistake .bad{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);font-weight:500;letter-spacing:-.02em;color:#FF9583}
.mistake .fix{font-size:15.5px;color:var(--f2)}
.mistake .fix b{color:var(--foam);font-weight:700}

/* ═══════════ FIELD GLOSSARY ═══════════ */
.gloss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:10px}
.gloss div{background:rgba(1,19,31,.5);padding:22px 22px 24px}
.gloss dt{font-family:var(--disp);font-size:clamp(20px,2vw,25px);font-weight:500;letter-spacing:-.02em;color:var(--foam)}
.gloss dd{margin:10px 0 0;font-size:14.5px;color:var(--f2)}

@media (max-width:1000px){
  .builds{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr}
  .mistake{grid-template-columns:1fr;gap:10px}
  .olrow{grid-template-columns:1fr;gap:8px}
  .olends{padding-left:0}
}

/* The queue asks by name through a page that exists, not a form that posts nowhere. */
.queue .askbtn{margin-top:24px}
.row.z-substrate .zn i{background:var(--foam)}


/* the overlap conclusion carries the rule above it, so only its first paragraph may draw one */
.overlap p.conc2+p.conc2{margin-top:.9em;padding-top:0;border-top:0}