/* ==========================================================================
   TV and Video, chapter 7: the count. 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.
   ========================================================================== */

/* Shared shapes across this chapter's components. */
.ct-num,.su-num,.po-num,.sv-lr{background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px}
.ct-k,.su-k,.po-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.ct-v,.su-v,.po-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;
  font-weight:600;color:var(--ink)}
.ct-say,.su-say,.po-say,.sv-say,.bk-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}
.ct-grade,.su-grade,.sv-grade{margin:10px 0 0;font-family:var(--ui);font-size:10.5px;
  line-height:1.6;color:var(--warn);grid-column:1/-1}
.ct-btn,.su-btn{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 13px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2);
  grid-column:1/-1;justify-self:start;margin-top:10px}
.ct-btn:hover,.su-btn:hover{background:var(--bg-4);color:var(--ink)}

.ct-p2,.ct-p3,.su-p2,.su-p3,.sv-swipe,.sv-std,.sv-live,.po-four,.bk-close{margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.ct-p1 h6,.ct-p2 h6,.ct-p3 h6,.su-p1 h6,.su-p2 h6,.su-p3 h6,.sv-swipe h6,.sv-std h6,
.sv-live h6,.po-four h6,.bk-close 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}

/* ------------------------------------------------ tvcounters (7.2) ------- */
.ct-sb{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.ct-num.big .ct-v{color:var(--accent-2)}
.ct-hid{color:var(--ink-4)}
.ct-ask{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-3);grid-column:1/-1}

.ct-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ct-t{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:7px 11px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.ct-t:hover{background:var(--bg-4);color:var(--ink)}
.ct-t.did{border-color:var(--money)}
.ct-t.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.ct-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.ct-who{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ct-dl{margin:0}
.ct-dl dt{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ct-dl dd{margin:3px 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-3)}
.ct-do{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ct-do span{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:3px}
.ct-wait{margin:12px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}

.ct-au{margin-top:14px}
.ct-auk{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.ct-aunum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ct-aunum span{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  padding:7px 11px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.ct-aunum b{color:var(--ink);font-size:15px;margin-right:4px}
.ct-aunum .ct-zero{border-color:var(--open)}
.ct-aunum .ct-zero b{color:var(--open)}
.ct-aul{margin:0;padding-left:16px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.ct-aul li{margin-bottom:5px}

.ct-blind{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ct-bn{margin:0 0 9px;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-3)}
.ct-br{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:7px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.ct-brt{flex:1 1 130px;font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.ct-brv,.ct-brs{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.ct-brv b{color:var(--open);font-size:13px}
.ct-brs b{color:var(--ink-2);font-size:13px}
.ct-cav{margin:10px 0 0;padding-left:16px;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-4)}
.ct-cav li{margin-bottom:5px}

.ct-aqg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.ct-aqc{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.ct-aqc.miss{border-color:var(--open)}
.ct-aqc p{margin:0}
.ct-aqk{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:5px !important}
.ct-aqc ul{margin:0;padding-left:15px}
.ct-money{margin:10px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-4)}

/* ------------------------------------------------ tvsameview (7.3) ------- */
.sv-curve{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  margin-bottom:14px}
.sv-ck{margin:0 0 8px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sv-cr{display:grid;grid-template-columns:190px 1fr 34px;gap:9px;align-items:center;
  margin-bottom:5px}
.sv-crt{font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.sv-ctrack{height:7px;background:var(--bg-3);border-radius:4px;overflow:hidden}
.sv-cbar{display:block;height:100%;background:var(--accent-2)}
.sv-crn{font-family:var(--ui);font-size:12.5px;color:var(--ink);text-align:right}

.sv-r{margin-bottom:5px}
.sv-rb{display:grid;grid-template-columns:1fr 1fr 54px;gap:9px;align-items:baseline;width:100%;
  cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 11px}
.sv-rb:hover{background:var(--bg-4)}
.sv-r.on .sv-rb{background:var(--bg-2);border-color:var(--accent-2)}
.sv-rp{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.sv-rm{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.sv-rn{font-family:var(--ui);font-size:17px;font-weight:600;color:var(--ink);text-align:right}
.sv-rr{margin:5px 0 0;padding:0 11px;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-3)}
.sv-spread{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-2)}

.sv-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.sv-swc{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.sv-swc p{margin:0;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-3)}
.sv-swp{font-size:10px !important;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4) !important;margin-bottom:5px !important}

.sv-sdr{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.sv-sdr b{color:var(--ink-2)}
.sv-none{padding-top:9px;border-top:1px solid var(--line);color:var(--ink-2)}

.sv-lctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.sv-lctl b{float:right;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.sv-lctl input{width:100%;margin-top:6px}
.sv-lout{margin-top:12px}
.sv-lr{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:6px}
.sv-lt{margin:0;flex:1 1 100%;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.sv-lr span{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sv-lr span b{color:var(--ink);font-size:13px}
.sv-lrank{display:flex;flex-wrap:wrap;gap:10px;padding:8px 11px;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:10px;font-family:var(--ui);font-size:12px;
  color:var(--ink-3)}
.sv-lrank b{color:var(--accent-2)}

/* ------------------------------------------------ tvsumtotal (7.4) ------- */
.su-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.su-s{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 11px}
.su-s:hover{background:var(--bg-4)}
.su-s.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.su-st{display:block;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.su-sv{display:block;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink-2)}
.su-sh{display:block;font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.su-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.su-num.over{border-color:var(--open)}
.su-num.over .su-v{color:var(--open)}
.su-num.good{border-color:var(--money)}
.su-num.good .su-v{color:var(--money)}
.su-lab{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2);
  grid-column:1/-1}

.su-pr{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  margin-bottom:6px}
.su-pr p{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.su-prt{font-size:10px !important;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-2) !important;margin-bottom:5px !important}

.su-cl{display:grid;gap:4px}
.su-cr{display:grid;grid-template-columns:1fr 60px 1.1fr;gap:9px;align-items:baseline;
  padding:6px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px}
.su-cr.glob{border-style:dashed}
.su-crt{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.su-crv{font-family:var(--ui);font-size:13px;color:var(--ink);text-align:right}
.su-cru{font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.su-rs{margin:8px 0 0;padding-left:18px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.su-rs li{margin-bottom:6px}
.su-notnum{margin-top:12px;background:var(--bg-2);border:1px dashed var(--open);border-radius:10px;
  padding:10px 12px}
.su-nnk{margin:0 0 6px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--open)}
.su-nn{margin:0 0 5px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.su-nn s{color:var(--ink-4)}

/* ------------------------------------------------- tvposting (7.5) ------- */
.po-deal{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  margin-bottom:14px}
.po-num.big .po-v{color:var(--accent-2)}
.po-tog{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;
  margin-bottom:12px}
.po-tg{display:flex;gap:4px}
.po-tb{flex:1;cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 9px;font-family:var(--ui);font-size:11px;line-height:1.4;
  color:var(--ink-4)}
.po-tb:hover{background:var(--bg-4);color:var(--ink-2)}
.po-tb.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.po-r{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:baseline;padding:8px 11px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;margin-bottom:5px}
.po-r.moved{border-color:var(--warn)}
.po-rn{font-family:var(--ui);font-size:13px;color:var(--ink-4)}
.po-rt{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.po-rv,.po-rp,.po-re{grid-column:2;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.po-rv b,.po-rp b{color:var(--ink-2);font-size:12.5px}
.po-re b{color:var(--accent-2);font-size:12.5px}
.po-rd{grid-column:2;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--ink-4);
  margin-top:3px}
.po-rd b{color:var(--warn)}
.po-fo{margin:8px 0 0;padding-left:18px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.po-fo li{margin-bottom:6px}

/* ------------------------------------------------- tvbuckets (7.6) ------- */
.bk-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  margin-bottom:14px}
.bk-kc{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.bk-kc p{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.bk-kt{font-size:10px !important;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:5px !important}
.bk-solved{border-color:var(--money)}
.bk-solved .bk-kt{color:var(--money) !important}
.bk-modelled{border-color:var(--warn)}
.bk-modelled .bk-kt{color:var(--warn) !important}
.bk-refused{border-color:var(--open)}
.bk-refused .bk-kt{color:var(--open) !important}

.bk-i{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  margin-bottom:6px}
.bk-i.done{border-color:var(--line-2)}
.bk-it{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.bk-bs{display:flex;flex-wrap:wrap;gap:5px}
.bk-b{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:5px 10px;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.bk-b:hover{background:var(--bg-4);color:var(--ink-2)}
.bk-b.on{background:var(--bg-4);border-color:var(--ink-4);color:var(--ink)}
.bk-b.right{border-color:var(--money);color:var(--money)}
.bk-b.wrong{border-color:var(--open);color:var(--open)}
.bk-iw{margin:8px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.7;color:var(--ink-3)}
.bk-score{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.bk-do{margin:8px 0 0;padding-left:18px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.bk-do li{margin-bottom:6px}

@media (max-width:640px){
  .ct-sb,.su-tot,.po-deal{grid-template-columns:1fr}
  /* THE VALUE HAS TO STAY WITH ITS OWN ROW.
     This was `1fr 60px` against a three child row of label, bar, value. On a
     phone the bar took the second column and the value wrapped onto the next
     line, under the NEXT row's label, so "100" sat beside "still there at two
     seconds" and the exhibit read as the opposite of what it says. Found in the
     render pass; no suite can see it, because jsdom has no layout.
     Label and value now share the first row and the bar takes its own. */
  .sv-cr{grid-template-columns:1fr 44px;row-gap:4px}
  .sv-crt{grid-column:1;grid-row:1}
  .sv-crn{grid-column:2;grid-row:1}
  .sv-ctrack{grid-column:1/-1;grid-row:2}
  .sv-rb{grid-template-columns:1fr 48px}
  .sv-rp{grid-column:1/-1}
  .su-cr{grid-template-columns:1fr 60px}
  .su-cru{grid-column:1/-1}
}