/* ==========================================================================
   TV and Video, chapter 0: one product, many doors. Component styles.

   One sheet per chapter, matching the rest of the Academy. Nothing here
   introduces a colour: every value is a variable already declared in
   academy.css, so the Academy accent retunes in one place.

   Two patterns recur and are worth naming, because both carry teaching:

     .fixed / .gap     a rate nobody in the deal chose, and a column the
                       research does not cover. Both are drawn differently
                       from everything around them on purpose. A fixed rate
                       that looks like a movable one teaches that all numbers
                       are arbitrary, which is the defect chapter 0.4 exists
                       to prevent.

     .right / .wrong   marking on answer buttons after a reveal, in the money
                       and open colours, never in red and green alone.
   ========================================================================== */

/* ------------------------------------------------ tvthirty (0.1) --------- */
.th-same,.th-unit{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px}
.th-same{margin-bottom:14px;border-left:3px solid var(--t0)}
.th-unit{margin-top:16px;border-left:3px solid var(--accent-2)}
.th-k{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.th-s{margin:0 0 5px;font-family:var(--ui);font-size:13.5px;color:var(--ink);font-weight:600}
.th-s2{margin:0;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-3)}
.th-u{margin:0 0 5px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.th-un{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}

.th-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-bottom:14px}
.th-g{min-width:0}
.th-gl{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.th-btns{display:flex;flex-wrap:wrap;gap:5px}
.th-b{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:6px 10px;font-family:var(--ui);font-size:12px;color:var(--ink-3);text-align:left}
.th-b:hover{background:var(--bg-4);color:var(--ink)}
.th-b.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.th-b.off{opacity:.35;cursor:not-allowed}
.th-note{margin:6px 0 0;font-family:var(--ui);font-size:10.5px;line-height:1.55;color:var(--ink-4)}
.th-slide label{display:block;font-family:var(--ui);font-size:11px;color:var(--ink-4);
  line-height:1.5}
.th-slide label b{color:var(--ink)}
.th-slide input{width:100%;margin-top:6px}

.th-film{position:relative;height:22px;background:var(--bg-3);border-radius:6px;overflow:hidden;
  margin-bottom:10px}
.th-bar{display:block;height:100%;background:var(--t0);opacity:.55}
.th-lab{position:absolute;left:9px;top:0;line-height:22px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink)}
.th-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.th-n{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.th-n.big{border-color:var(--line-2)}
.th-nk{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.th-nv{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;font-weight:600;
  color:var(--ink)}
.th-n.big .th-nv{color:var(--accent-2);font-size:23px}
.th-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.th-wrong{margin:12px 0 0;padding:10px 12px;background:var(--warn-soft);border-radius:10px;
  font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}

/* ----------------------------------------------- tvchain8 (0.2) ---------- */
.ch-rail{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.ch-h{cursor:pointer;display:flex;align-items:baseline;gap:6px;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:9px;padding:6px 10px}
.ch-h:hover{background:var(--bg-4)}
.ch-h.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.ch-n{font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.ch-h.on .ch-n{color:var(--accent-2)}
.ch-t{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.ch-h.on .ch-t{color:var(--ink)}

.ch-q{margin:0 0 5px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.ch-long{margin:0 0 12px;font-family:var(--ui);font-size:12px;line-height:1.7;color:var(--ink-3)}
.ch-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  margin-bottom:12px}
.ch-c{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  border-top:2px solid var(--line-2)}
.ch-linear{border-top-color:var(--t1)}
.ch-streaming{border-top-color:var(--t4)}
.ch-social{border-top-color:var(--t6)}
.ch-commerce{border-top-color:var(--t8)}
.ch-door{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.ch-a{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

.ch-own,.ch-go{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.ch-ok{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.ch-ow{margin:0 0 4px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.ch-os{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.ch-mods{margin:0;padding-left:16px;font-family:var(--ui);font-size:12.5px;line-height:1.8;
  color:var(--ink-3)}
.ch-mods a{color:var(--accent);text-decoration:none}
.ch-mods a:hover{text-decoration:underline}
.ch-none{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}

/* ------------------------------------------------ tvplace (0.2) ---------- */
/* shared answer-button pattern for tvplace, tvtasks and tvfunded */
.pl-count,.tk-count,.fu-count{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.pl-s,.fu-c{margin:0 0 14px;font-family:var(--display);font-size:17px;line-height:1.55;
  color:var(--ink)}
.tk-t{margin:0 0 14px;font-family:var(--display);font-size:16px;line-height:1.55;color:var(--ink)}
.pl-gl,.tk-gl,.fu-gl{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.pl-btns,.tk-btns,.fu-btns{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.pl-b,.tk-b,.fu-b{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:6px 10px;font-family:var(--ui);font-size:12px;color:var(--ink-3);
  text-align:left}
.pl-b:hover,.tk-b:hover,.fu-b:hover{background:var(--bg-4);color:var(--ink)}
.pl-b.on,.tk-b.on,.fu-b.on{background:var(--bg-4);border-color:var(--ink-4);color:var(--ink)}
.pl-b.right,.tk-b.right,.fu-b.right{border-color:var(--money);color:var(--money);
  background:var(--money-soft)}
.pl-b.wrong,.tk-b.wrong,.fu-b.wrong{border-color:var(--open);color:var(--open);
  background:var(--open-soft)}
.pl-b[disabled],.tk-b[disabled],.fu-b[disabled]{cursor:default}

.pl-check,.pl-next,.tk-check,.tk-next,.fu-check,.fu-next{cursor:pointer;background:var(--bg-4);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 14px;font-family:var(--ui);
  font-size:12.5px;color:var(--ink)}
.pl-check:hover,.pl-next:hover,.tk-check:hover,.tk-next:hover,.fu-check:hover,.fu-next:hover{
  background:var(--bg-5)}
.pl-check[disabled],.tk-check[disabled],.fu-check[disabled]{opacity:.4;cursor:not-allowed}

.pl-rev,.tk-rev,.fu-rev{margin-bottom:12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px}
.pl-rt,.tk-rw,.fu-rs{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-2)}
.pl-rn,.tk-rr{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-4)}
.pl-rm{margin:0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.pl-rm b{color:var(--ink)}
.pl-done{margin:0;font-family:var(--ui);font-size:13px;line-height:1.75;color:var(--ink-2)}
.pl-done b{color:var(--ink)}

/* ------------------------------------------------ tvtasks (0.3) ---------- */
.tk-score{margin:0 0 12px;font-family:var(--ui);font-size:14px;color:var(--ink-2)}
.tk-score b{color:var(--ink)}
.tk-map{margin-bottom:14px}
.tk-row{margin-bottom:8px}
.tk-rn{margin:0 0 4px;font-family:var(--ui);font-size:11.5px;color:var(--ink-2)}
.tk-cells{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.tk-cell{display:block;min-height:26px;border-radius:5px;background:var(--bg-3);
  font-family:var(--ui);font-size:9.5px;line-height:1.25;color:var(--ink-4);padding:4px 5px;
  overflow:hidden}
.tk-cell.on{color:var(--bg)}
.tk-lead .tk-cell.on{background:var(--t2)}
.tk-planner .tk-cell.on{background:var(--t4)}
.tk-buyer .tk-cell.on{background:var(--t6)}
.tk-stew .tk-cell.on{background:var(--t8)}
.tk-close,.tk-junior{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.75;
  color:var(--ink-2)}
.tk-junior{color:var(--ink-3)}

/* ------------------------------------------------ tvswaps (0.4) ---------- */
.sw-plan{margin:0 0 14px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--t0);border-radius:10px;font-family:var(--ui);font-size:13px;
  line-height:1.65;color:var(--ink-2)}
.sw-plan b{color:var(--ink)}
.sw-steps{display:grid;gap:8px}
.sw-s{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  border-left:3px solid var(--accent-2)}
.sw-s.fixed{border-left-color:var(--ink-4);background:var(--bg)}
.sw-n{margin:0 0 4px;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.sw-s.fixed .sw-n{color:var(--warn)}
.sw-t{margin:0 0 7px;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.sw-r,.sw-w{margin:0 0 4px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.sw-r span,.sw-w span{display:inline-block;min-width:92px;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sw-fx{margin:7px 0;padding:6px 9px;background:var(--warn-soft);border-radius:8px;
  font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.sw-opts{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.sw-o{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:5px 10px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.sw-o:hover{background:var(--bg-4);color:var(--ink)}
.sw-o.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.sw-v{margin:6px 0 5px;font-family:var(--ui);font-size:17px;font-weight:600;color:var(--ink)}
.sw-s.fixed .sw-v{color:var(--ink-2)}
.sw-y{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-4)}
.sw-slide{margin-top:14px;padding:12px 13px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:12px}
.sw-sk{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sw-sv{margin:0 0 6px;font-family:var(--ui);font-size:20px;font-weight:600;color:var(--accent-2)}
.sw-sr{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-4)}
.sw-note,.sw-find{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.75;
  color:var(--ink-2)}
.sw-find{padding:10px 12px;background:var(--money-soft);border-radius:10px}

/* ----------------------------------------------- tvclocks (0.5) ---------- */
.ck-pick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.ck-b{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)}
.ck-b:hover{background:var(--bg-4);color:var(--ink)}
.ck-b.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.ck-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.ck-c{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  border-top:2px solid var(--t1)}
.ck-finance{border-top-color:var(--t3)}
.ck-retail{border-top-color:var(--t8)}
.ck-social{border-top-color:var(--ev-unk)}
.ck-c.gap{background:var(--bg);border-style:dashed}
.ck-t{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.ck-m{margin:0 0 4px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);
  line-height:1.5}
.ck-c.gap .ck-m{color:var(--ev-unk)}
.ck-d{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;color:var(--accent-2)}
.ck-c.gap .ck-d{color:var(--ink-4)}
.ck-x{margin:0 0 8px;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.ck-right,.ck-wrong{margin:0 0 6px;font-family:var(--ui);font-size:11px;line-height:1.6;
  color:var(--ink-4)}
.ck-right span,.ck-wrong span{display:block;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.ck-right{color:var(--ink-3)}
.ck-spread{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}
.ck-spread b{color:var(--ink)}

/* ----------------------------------------------- tvfunded (0.6) ---------- */
.fu-rf,.fu-rn{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.fu-rf span,.fu-rn span{display:inline-block;min-width:130px;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.fu-tv2{color:var(--warn);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.fu-rs{padding-top:7px;border-top:1px solid var(--line)}
.fu-score{margin:0 0 12px;font-family:var(--ui);font-size:14px;color:var(--ink-2)}
.fu-score b{color:var(--ink)}
.fu-tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;
  margin-bottom:14px}
.fu-t{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.fu-tk{display:block;font-family:var(--ui);font-size:10.5px;line-height:1.45;color:var(--ink-4)}
.fu-tv{display:block;margin-top:4px;font-family:var(--ui);font-size:23px;font-weight:600;
  color:var(--ink)}
.fu-tv.bad{color:var(--open)}
.fu-close{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.75;color:var(--ink-2)}
.fu-close b{color:var(--ink)}
.fu-warn,.fu-ok{margin:0;padding:10px 12px;border-radius:10px;font-family:var(--ui);
  font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.fu-warn{background:var(--open-soft)}
.fu-ok{background:var(--money-soft)}