/* Week 7 — Television Engineering. Appearance for the TV widgets, figures,
 * exercise blocks and the standalone companion pages. Scoped to .tv-* classes
 * so Weeks 1-6 are untouched. Light theme only, like the rest of the course. */

/* ---- figures ---------------------------------------------------------- */
.tv-figure{margin:.3rem 0 0;border:0;padding:0;display:grid;gap:.4rem;justify-items:center}
.tv-figure svg{display:block;width:100%;height:auto;max-height:16rem}
.tv-figure--tall svg{max-height:20rem}
.tv-figure figcaption{font-size:.83rem;line-height:1.5;color:var(--muted);text-align:center;max-width:70ch}
.tv-figure svg text{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}

.tv-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center}
.tv-two--wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.tv-chain{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.4rem 0}
.tv-chain span{padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.86rem;font-weight:700}
.tv-chain b{color:var(--blue)}
.tv-chain span.is-key{background:#eef5ff;border-color:var(--blue);color:var(--blue-dark)}
.tv-num{font-variant-numeric:tabular-nums}
.tv-steps{margin:.2rem 0 0;padding-left:1.25rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;font-size:.97rem}
.tv-steps li{padding-left:.2rem}
.tv-kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:.2rem 0;font-size:.95rem}
.tv-kv dt{font-weight:800;color:var(--blue-dark)}
.tv-kv dd{margin:0}

/* ---- widgets ---------------------------------------------------------- */
.tv-widget{display:grid;gap:.45rem;margin:.3rem 0 0;padding:.6rem .75rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.tv-widget .widget__controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0;padding:0;border:0;background:none}
.tv-widget .control{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.88rem;font-weight:650}
.tv-widget .control input[type="range"]{width:min(11rem,34vw)}
.tv-widget select{max-width:100%;padding:.3rem .45rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:.88rem}
.tv-widget .control__value{font-variant-numeric:tabular-nums;font-weight:800;color:var(--blue-dark);min-width:3.4rem}
.tv-btn{border:1px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue-dark);padding:.32rem .85rem;font-weight:800;font-size:.86rem;min-height:2.1rem}
.tv-btn:hover{background:#eef5ff}
.tv-btn[aria-pressed="true"]{background:var(--blue);color:#fff}
.tv-readout{margin:0;font-size:.86rem;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.tv-readout strong{color:var(--blue-dark);font-weight:800}
.tv-seg{display:inline-flex;gap:.2rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;background:#f3f5f8}
.tv-seg label{position:relative;display:inline-flex;margin:0}
.tv-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tv-seg span{padding:.3rem .7rem;border-radius:999px;font-size:.84rem;font-weight:750;color:var(--muted)}
.tv-seg input:checked+span{background:var(--blue);color:#fff}
.tv-seg input:focus-visible+span{outline:3px solid #7ab4ff;outline-offset:2px}
.tv-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:650}

.tv-cv{display:block;width:100%;background:#fbfdff;border:1px solid #edf1f5;border-radius:8px}
.tv-cv--img{aspect-ratio:4/3;height:auto;image-rendering:pixelated}
.tv-cv--wave{height:8.2rem}
.tv-cv--strip{height:3.2rem}
.tv-cv--sq{aspect-ratio:1/1;height:auto}
.tv-cv--spec{height:12rem}
.tv-cv--freq{height:6.5rem}
.tv-cv--thin{height:2.2rem}
.tv-cv-label{margin:0 0 .15rem;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

.tv-grid-3>*,.tv-grid-2>*,.tv-il-grid>*,.tv-chroma-row>*,.tv-two>*{min-width:0}
.tv-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;align-items:start}
.tv-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;align-items:start}
.tv-raster .tv-grid-3{grid-template-columns:minmax(0,17rem) minmax(0,17rem) minmax(0,1fr)}
.tv-raster .tv-cv--wave{height:12.75rem}
.tv-chroma-row{display:grid;gap:.7rem;align-items:start}
.tv-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.tv-swatch{height:3.2rem;border:1px solid var(--line);border-radius:8px}
.tv-swatch-cap{font-size:.74rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.25;margin-top:.15rem}
.tv-presets{display:flex;flex-wrap:wrap;gap:.3rem}
.tv-preset{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0}
.tv-preset:focus-visible{outline:3px solid #7ab4ff;outline-offset:2px}

/* ---- exercises -------------------------------------------------------- */
.tv-ex{padding:.7rem .9rem;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;background:#fff;margin:.3rem 0}
.tv-ex__tag{margin:0 0 .2rem;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.tv-ex p{margin:.2rem 0}
.tv-grid-px{display:inline-grid;grid-template-columns:repeat(8,1.25rem);gap:2px;margin:.2rem 0;border:1px solid var(--ink);padding:2px;background:var(--ink)}
.tv-grid-px i{display:block;height:1.25rem;background:#fff}
.tv-grid-px i.k{background:#162033}
.tv-link-row{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:.4rem 0 0;font-weight:750;font-size:.92rem}

/* interlace explorer: two square-ish panels beside stacked strips */
.tv-il-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,15rem) minmax(0,1fr);gap:.6rem;align-items:start}
.tv-il-side{display:grid;gap:.5rem}
.tv-il-grid .tv-cv--strip{height:5.6rem}
.tv-two--ex1{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.tv-two--ex1 .quiz h3{font-size:1.02rem}
.tv-figure--short svg{max-height:11rem}
.tv-chroma-row{grid-template-columns:minmax(0,1fr) minmax(0,15rem)}
.tv-chroma-row .tv-cv--sq{max-width:15rem}
.tv-chroma-row .tv-cv--wave{height:7rem}

/* ---- slide-fit tuning (1440x900 is the QA bar) ------------------------ */
.lecture-slide[data-slide-type="interactive"] .slide-body{align-content:start}
.lecture-slide .tv-widget .tv-readout{min-height:2.6em}
.lecture-slide#interlace-explorer .tv-cv--sq{aspect-ratio:4/3}
.lecture-slide#vsb-explorer .tv-cv--spec{height:14rem}
.lecture-slide#channel-explorer .tv-cv--spec{height:13rem}

@media (max-width:760px){
  .tv-two,.tv-two--wide-left,.tv-two--ex1,.tv-grid-3,.tv-grid-2,.tv-chroma-row,.tv-il-grid,.tv-raster .tv-grid-3{grid-template-columns:minmax(0,1fr)}
  .tv-chroma-row .tv-cv--sq{max-width:18rem}
  .tv-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-widget .control{flex:1 1 100%}
  .tv-widget .control input[type="range"]{width:100%}
  .tv-widget .control{min-width:0}
  .tv-widget .control select,.tv-widget .control input[type="range"]{flex:1 1 auto;min-width:0}
  .tv-widget select{width:100%}
  .tv-cv--wave{height:9rem}
  .tv-cv--spec{height:13rem}
  .tv-figure svg,.tv-figure--tall svg{max-height:none}
}
@media (prefers-reduced-motion:reduce){.tv-widget *{scroll-behavior:auto}}

/* ---- standalone companion pages (article, practice, accuracy) ---------- */
.tv-page{max-width:var(--reading);margin:0 auto;padding:2.2rem 1.2rem 4rem}
.tv-page--wide{max-width:980px}
.tv-page h1{font-size:clamp(2rem,5vw,3.1rem)}
.tv-page h2{font-size:clamp(1.45rem,3vw,2rem);margin-top:2.2em}
.tv-page h3{margin-top:1.6em;color:var(--blue-dark)}
.tv-page .equation{overflow-x:auto;padding:.3rem 0}
.tv-page table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.93rem}
.tv-page th,.tv-page td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;vertical-align:top}
.tv-page th{background:#f3f6fb}
.tv-page .table-wrap{overflow-x:auto}
.tv-page .tv-figure svg{max-height:none}
.tv-page details{border:1px solid var(--line);border-radius:12px;background:#fff;margin:.8rem 0;padding:.2rem .9rem}
.tv-page details summary{cursor:pointer;font-weight:800;padding:.55rem 0;color:var(--blue-dark)}
.tv-page details[open] summary{border-bottom:1px solid var(--line);margin-bottom:.5rem}
.tv-page .tv-ex{margin:1.4rem 0 .4rem}
.tv-toc{padding:1rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:#fff;margin:1.2rem 0}
.tv-toc ol{margin:.3rem 0 0;padding-left:1.2rem}
.tv-note{padding:.8rem 1rem;border-left:4px solid var(--amber);background:#fff8ec;border-radius:0 10px 10px 0;margin:1rem 0;font-size:.95rem}
.tv-note--ok{border-left-color:var(--green);background:#eefaf4}
.tv-status{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.76rem;font-weight:800}
.tv-status--ok{background:#e3f5ec;color:var(--green)}
.tv-status--hist{background:#fff1dc;color:var(--amber)}
.tv-status--fix{background:#ffe9e6;color:var(--red)}

/* long display equations scroll inside their own box instead of widening the page */
.tv-page mjx-container[display="true"]{max-width:100%;overflow-x:auto;overflow-y:hidden}
.tv-page li,.tv-page details,.tv-page .tv-ex{min-width:0;max-width:100%}