/* ==========================================================================
   TV and Video, chapter 6: what arrived. 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.

   Rewritten alongside the chapter correction recorded at the top of
   tv_ch6.js. The blocks for the four replaced components are gone and four new
   ones are here. The delivered second block is unchanged, because that
   component is unchanged.

   The chapter's own use of the semantic colours, kept consistent across all
   six components so a reader learns the code once:
     --money  what actually happened, or what a measure can honestly carry
     --warn   a modelled figure, or a party with money on the answer
     --open   a refusal, a gap, or a number nobody has published
   ========================================================================== */

/* ------------------------------------------------ tvcoviewing (6.2) ------ */
.cv-ctl{margin-bottom:10px}
.cv-ctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.cv-ctl b{float:right;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.cv-ctl input{width:100%;margin-top:6px}

.cv-marks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cv-m{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:6px 10px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.cv-m:hover{background:var(--bg-4);color:var(--ink)}
.cv-m.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.cv-m span{display:block;font-size:11px;color:var(--ink-4)}
.cv-m.on span{color:var(--ink-3)}
.cv-mn{margin:0 0 12px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}

.cv-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.cv-num{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.cv-num.fixed{border-color:var(--money)}
.cv-num.pay{border-color:var(--warn)}
.cv-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.cv-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;font-weight:600;
  color:var(--ink)}
.cv-num.pay .cv-v{color:var(--warn)}
.cv-num.fixed .cv-v{color:var(--money)}
.cv-n{display:block;margin-top:5px;font-family:var(--ui);font-size:11px;line-height:1.55;
  color:var(--ink-4)}
.cv-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}

.cv-real,.cv-tab{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cv-real h6,.cv-tab h6,.fb-best h6,.fb-ref h6,.pd-blame h6,.pd-ref h6,.at-rank h6,.at-fund h6,
.ds-cmp h6,.ds-spend 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}
.cv-rl{margin:0;padding-left:18px}
.cv-rl li{font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3);
  margin-bottom:5px}
.cv-rn,.cv-tn{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-2)}

.cv-tr{display:grid;grid-template-columns:1.1fr 1.2fr 60px 1.1fr 1.2fr;gap:9px;align-items:baseline;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px;font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
.cv-td{font-size:12.5px;color:var(--ink-2)}
.cv-tm{font-size:15px;font-weight:600;color:var(--warn)}
.cv-grade{margin:12px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--warn)}

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

.ds-screens{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ds-s{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);text-align:left}
.ds-s:hover{background:var(--bg-4);color:var(--ink)}
.ds-s.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.ds-s span{color:var(--ink-4);font-size:11px}
.ds-sn{margin:0 0 12px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}

.ds-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.ds-num{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ds-num.miss{border-color:var(--open)}
.ds-num.miss .ds-v{color:var(--open);font-size:15px}
.ds-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.ds-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;font-weight:600;
  color:var(--ink)}
.ds-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}

.ds-cmp,.ds-spend{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ds-go{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)}
.ds-go:hover{background:var(--bg-4);color:var(--ink)}
.ds-ref{margin-top:10px}
.ds-no{margin:0 0 8px;font-family:var(--ui);font-size:14px;line-height:1.55;color:var(--open)}
.ds-rw{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.ds-rw:last-child{margin-bottom:0}

.ds-sr{display:grid;grid-template-columns:1.1fr 1fr 1.2fr auto;gap:9px;align-items:baseline;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.ds-sd{font-size:12.5px;color:var(--ink-2)}
.ds-sv{font-size:13px;color:var(--money)}
.ds-snote{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-3)}

/* -------------------------------------------------- tvfrontload (6.4) ---- */
.fb-fmt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fb-f{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 11px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.fb-f:hover{background:var(--bg-4);color:var(--ink)}
.fb-f.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.fb-fn{margin:0 0 12px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.fb-ctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.fb-ctl b{float:right;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.fb-ctl input{width:100%;margin-top:6px}
.fb-at{margin:8px 0 12px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}

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

.fb-best,.fb-ref{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fb-br{display:grid;grid-template-columns:1.2fr 1.4fr 70px;gap:9px;align-items:baseline;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px}
.fb-br.on{border-color:var(--accent-2)}
.fb-bt{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.fb-bp{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-4)}
.fb-bv{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--money);text-align:right}
.fb-bn,.fb-rn{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-2)}

.fb-rctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-bottom:12px}
.fb-rctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.fb-rctl b{float:right;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.fb-rctl input{width:100%;margin-top:6px}
.fb-rr{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto auto;gap:9px;align-items:baseline;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.fb-rt{font-size:12.5px;color:var(--ink-2)}
.fb-rv{font-size:13px;color:var(--money)}
.fb-rh{color:var(--ink-4)}
.fb-grade{margin:12px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--warn)}

/* ---------------------------------------------------- tvpattern (6.5) ---- */
.pd-ctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.pd-ctl b{float:right;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.pd-ctl input{width:100%;margin-top:6px}
.pd-wins{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.pd-w{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:7px 13px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.pd-w:hover{background:var(--bg-4);color:var(--ink)}
.pd-w.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.pd-wn{margin:0 0 12px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}

.pd-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.pd-num{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.pd-num.meas{border-color:var(--money)}
.pd-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.pd-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;font-weight:600;
  color:var(--ink)}
.pd-num.bad .pd-v{color:var(--open)}
.pd-n2{display:block;margin-top:5px;font-family:var(--ui);font-size:11px;line-height:1.55;
  color:var(--ink-4)}
.pd-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}

.pd-blame,.pd-ref{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pd-br{display:grid;grid-template-columns:1fr 70px;gap:9px;align-items:baseline;padding:7px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.pd-bk{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.pd-bv{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--warn);text-align:right}
.pd-bn{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.pd-go{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)}
.pd-go:hover{background:var(--bg-4);color:var(--ink)}
.pd-rf{margin-top:10px}
.pd-no{margin:0 0 8px;font-family:var(--ui);font-size:14px;line-height:1.55;color:var(--open)}
.pd-rw{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.pd-rw:last-child{margin-bottom:0}
.pd-grade{margin:12px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--warn)}

/* -------------------------------------------------- tvattention (6.6) ---- */
.at-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.at-p{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:7px 11px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3);text-align:left}
.at-p:hover{background:var(--bg-4);color:var(--ink)}
.at-p.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.at-row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:baseline;padding:8px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.at-row.good{border-color:var(--money)}
.at-row.bad{border-color:var(--open)}
.at-k{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.5}
.at-row.good .at-k{color:var(--money)}
.at-row.bad .at-k{color:var(--open)}
.at-t{font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

.at-rank,.at-fund{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.at-models{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.at-m{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:6px 11px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3);text-align:left}
.at-m:hover{background:var(--bg-4);color:var(--ink)}
.at-m.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.at-rr{display:grid;grid-template-columns:26px 1fr auto;gap:9px;align-items:baseline;padding:8px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.at-rr.top{border-color:var(--money)}
.at-rk{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.at-rt{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.at-rv{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);text-align:right}
.at-rv em{display:block;font-style:normal;font-size:10px;font-weight:400;color:var(--ink-4)}
.at-rn,.at-fn{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-2)}

.at-fr{display:grid;grid-template-columns:1.2fr 1.4fr auto;gap:9px;align-items:baseline;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:5px}
.at-fw{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.at-fs{font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.at-ft{font-family:var(--ui);font-size:10.5px;color:var(--ink-4);text-align:right}
.at-ft.tv{color:var(--warn)}
.at-line{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:13px;line-height:1.75;color:var(--ink-2)}
.at-grade{margin:12px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.6;color:var(--warn)}

@media (max-width:640px){
  .cv-out,.ds-out,.fb-out,.pd-out{grid-template-columns:1fr}
  .cv-tr,.ds-sr,.fb-rr{grid-template-columns:1fr}
  .fb-br{grid-template-columns:1fr auto}
  .fb-bp{grid-column:1/-1}
  .at-row{grid-template-columns:1fr}
  .at-fr{grid-template-columns:1fr}
  .at-ft{text-align:left}
}