/* ==========================================================================
   TV and Video, chapter 4: the supply. Component styles.

   One sheet per chapter, matching the Connected Search layout. Nothing here
   introduces a colour: every value is a variable already declared in
   academy.css, so the Academy accent retunes in one place.
   ========================================================================== */

/* ------------------------------------------------ tvthreeq (4.2) --------- */
.tq-pick{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:12px}
.tq-i{cursor:pointer;width:28px;height:28px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.tq-i:hover{background:var(--bg-4);color:var(--ink-2)}
.tq-i.did{border-color:var(--money);color:var(--ink-2)}
.tq-i.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.tq-name{margin-left:8px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}

.tq-ax{margin-bottom:10px}
.tq-q{margin:0 0 5px;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.tq-opts{display:flex;flex-wrap:wrap;gap:6px}
.tq-o{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:6px 11px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.tq-o:hover{background:var(--bg-4);color:var(--ink)}
.tq-o.on{background:var(--bg-4);border-color:var(--ink-4);color:var(--ink)}
.tq-o.right{border-color:var(--money);color:var(--money)}
.tq-o.wrong{border-color:var(--open);color:var(--open)}

.tq-wait{margin:12px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.tq-rev{margin-top:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px}
.tq-rev p{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.tq-rev p:last-child{margin-bottom:0}
.tq-rev b{color:var(--ink-2)}
.tq-buy{padding-top:8px;border-top:1px solid var(--line)}
.tq-score{margin-top:12px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}

/* ---------------------------------------------- tvbuildhour (4.3) -------- */
.bh-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-bottom:14px}
.bh-ctl label,.sp-ctl label,.np-ctl label,.hp-ctl label{display:block;font-family:var(--ui);
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.bh-ctl b,.sp-ctl b,.np-ctl b,.hp-ctl b{float:right;text-transform:none;letter-spacing:0;
  font-size:13px;color:var(--ink)}
.bh-ctl input,.sp-ctl input,.np-ctl input,.hp-ctl input{width:100%;margin-top:6px}

.bh-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.bh-num,.sp-num,.np-num,.hp-num{background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px}
.bh-k,.sp-k,.np-k,.hp-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.bh-v,.sp-v,.np-v,.hp-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;
  font-weight:600;color:var(--ink)}
.bh-say,.sp-say,.np-say,.hp-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;
  line-height:1.65;color:var(--ink-2);grid-column:1/-1}

.bh-cmp,.bh-rep,.sp-p2,.sp-p3,.hp-price,.hp-warn{margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.bh-cmp h6,.bh-rep h6,.sp-p1 h6,.sp-p2 h6,.sp-p3 h6,.hp-price h6,.hp-warn h6{margin:0 0 10px;
  font-family:var(--ui);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.bh-r{margin-bottom:10px}
.bh-rt{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.bh-rn{margin:2px 0 4px;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.bh-rn b{color:var(--ink-2)}
.bh-track{height:7px;background:var(--bg-3);border-radius:4px;overflow:hidden}
.bh-bar{display:block;height:100%;background:var(--accent-2)}
.bh-rnote{margin:4px 0 0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}
.bh-grade{margin:10px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--warn)}

.bh-rp{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:8px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.bh-rpn{font-family:var(--ui);font-size:12px;color:var(--ink-2);flex:1 1 160px}
.bh-rpv{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.bh-rpv b{color:var(--ink);font-size:13px}
.bh-rpv.bad b{color:var(--open)}

/* -------------------------------------------------- tvsplit (4.4) -------- */
.sp-r{margin-bottom:8px}
.sp-rt{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.sp-rn{margin:2px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.sp-rn b.down{color:var(--open)}
.sp-rn b.up{color:var(--money)}
.sp-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-bottom:12px}
.sp-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.sp-num.big .sp-v{color:var(--accent-2)}
.sp-cav{margin:10px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--ink-4);
  grid-column:1/-1}
.sp-cons{margin:10px 0 0;padding-left:16px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.sp-cons li{margin-bottom:6px}
.sp-cons b{color:var(--ink-2)}

/* ---------------------------------------------- tvnextpound (4.5) -------- */
.np-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.np-s{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 11px}
.np-s:hover{background:var(--bg-4)}
.np-s.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.np-st{display:block;font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.np-sc{display:block;font-family:var(--ui);font-size:10.5px;color:var(--ink-4);margin-top:2px}
.np-ctl{margin-bottom:12px}
.np-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.np-num.big .np-v{color:var(--accent-2);font-size:23px}
.np-steps{grid-column:1/-1;margin-top:4px}
.np-step{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
  padding:7px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px}
.np-sn{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.np-sa{font-family:var(--ui);font-size:12.5px;color:var(--money)}
.np-sr{font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.np-snote{grid-column:1/-1;font-family:var(--ui);font-size:10.5px;line-height:1.55;
  color:var(--ink-4)}

/* --------------------------------------------------- tvhops (4.6) -------- */
.hp-ctl{margin-bottom:12px}
.hp-bar{position:relative;height:14px;background:var(--bg-3);border-radius:7px;overflow:hidden;
  margin-bottom:10px}
.hp-used{display:block;height:100%;background:var(--money)}
.hp-used.tight{background:var(--warn)}
.hp-used.gone{background:var(--open)}
.hp-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.hp-out .hp-bar{grid-column:1/-1}
.hp-v.tight{color:var(--warn)}
.hp-v.gone{color:var(--open)}
.hp-p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 11px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.hp-pt{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.hp-pv{font-family:var(--ui);font-size:17px;font-weight:600;color:var(--ink)}
.hp-pv.up{color:var(--open)}
.hp-w{margin:0;padding-left:16px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.hp-w li{margin-bottom:7px}
.hp-w b{color:var(--ink-2)}

@media (max-width:640px){
  .bh-out,.sp-out,.np-out,.hp-out{grid-template-columns:1fr}
}

/* The panel that survives the assumption: which seller to add next. */
.np-rank{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.np-rank h6{margin:0 0 10px;font-family:var(--ui);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.np-rrow{display:grid;grid-template-columns:190px 1fr;gap:10px;padding:8px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px;
  font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-2)}
.np-rk{color:var(--ink-4);font-size:11px}
@media (max-width:640px){ .np-rrow{grid-template-columns:1fr} }