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

/* --------------------------------------------- tvscatterloop (2.2) ------- */
/* Drawn as a strip with an explicit "and round again" at the end, because the
   whole teaching object is that the last step causes the first. A list would
   lose that and a circle would not fit a narrow screen. */
.lp-ring{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;margin-bottom:12px}
.lp-s{cursor:pointer;flex:1 1 130px;text-align:left;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 10px}
.lp-s:hover{background:var(--bg-4)}
.lp-s.seen{border-color:var(--line)}
.lp-s.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.lp-n{display:block;font-family:var(--ui);font-size:9.5px;color:var(--ink-4)}
.lp-t{display:block;font-family:var(--ui);font-size:11.5px;line-height:1.4;color:var(--ink-2);
  margin-top:2px}
.lp-arrow{align-self:center;color:var(--ink-4);font-size:13px}
.lp-loop{align-self:center;font-family:var(--ui);font-size:10.5px;color:var(--accent-2);
  padding-left:6px}
.lp-d{margin:6px 0 0;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-3)}
.lp-ctl{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.lp-ctl button{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:7px 13px;font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.lp-ctl button:hover{background:var(--bg-4);color:var(--ink)}
.lp-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.lp-read{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.lp-read 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}
.lp-r{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.lp-gap{margin:0;padding:10px 12px;background:var(--warn-soft);border-radius:9px;
  font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-2)}

/* ---------------------------------------------- tvoptiondesk (2.3) ------- */
.od2-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-bottom:12px}
.od2-ctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.od2-ctl b{float:right;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.od2-ctl input{width:100%;margin-top:6px}
.od2-say{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.od2-cav{margin:0;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}
.od2-q,.od2-lad,.od2-year{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.od2-q h6,.od2-lad h6,.od2-year 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}
.od2-qq{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  margin-bottom:6px}
.od2-qt{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink);font-weight:600}
.od2-qd{margin:4px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.od2-l{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.od2-lw{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.od2-lt{font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.od2-trap{margin:9px 0 10px;padding:9px 11px;background:var(--warn-soft);border-radius:9px;
  font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-2)}
.od2-arrow{margin:10px 0 0;padding:10px 12px;background:var(--accent-2-soft);border-radius:9px;
  font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}

/* ----------------------------------------------- tvheadlines (2.4) ------- */
.hl-r{margin-bottom:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--bg-2)}
.hl-r.on{border-color:var(--accent-2)}
.hl-t{width:100%;cursor:pointer;display:grid;grid-template-columns:110px 1fr auto;gap:10px;
  align-items:baseline;background:transparent;border:0;padding:10px 12px;text-align:left}
.hl-t:hover{background:var(--bg-3)}
.hl-v{font-family:var(--ui);font-size:18px;font-weight:600;color:var(--ink)}
.hl-l{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.hl-w{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.hl-d{margin:0;padding:0 12px 11px;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-3)}
.hl-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}
.hl-bundle,.hl-market{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hl-bundle h6,.hl-market 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}
.hl-bs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:7px}
.hl-b{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:9px 11px}
.hl-b:hover{background:var(--bg-4)}
.hl-b.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.hl-bt{display:block;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.hl-bd{display:block;margin-top:5px;font-family:var(--ui);font-size:11px;line-height:1.6;
  color:var(--ink-3)}
.hl-pay{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}
.hl-cav{margin:10px 0 0;font-family:var(--ui);font-size:11px;line-height:1.65;color:var(--ink-4)}

/* ------------------------------------------------- tvrelease (2.5) ------- */
.rl-d{margin-bottom:6px;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:var(--bg-2)}
.rl-d.rl-linear{border-left:2px solid var(--t2)}
.rl-d.rl-streaming{border-left:2px solid var(--t4)}
.rl-d.rl-social{border-left:2px solid var(--t6)}
.rl-d.rl-commerce{border-left:2px solid var(--t8)}
.rl-t{width:100%;cursor:pointer;display:grid;grid-template-columns:1fr 1fr 90px;gap:10px;
  align-items:center;background:transparent;border:0;padding:11px 13px;text-align:left}
.rl-t:hover{background:var(--bg-3)}
.rl-n{font-family:var(--ui);font-size:12.5px;color:var(--ink);font-weight:600}
.rl-c{font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.rl-sp{display:block;height:6px;background:var(--bg-4);border-radius:3px;overflow:hidden}
.rl-sp i{display:block;height:100%;background:var(--accent-2)}
.rl-body{padding:0 13px 12px}
.rl-body p{margin:0 0 9px;font-family:var(--ui);font-size:12px;line-height:1.7;color:var(--ink-3)}
.rl-body p:last-child{margin-bottom:0}
.rl-p{padding-top:9px;border-top:1px solid var(--line)}
.rl-p b{color:var(--ink-2)}
.rl-f{color:var(--warn);font-size:11px}
.rl-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------------- tvtrace (2.6) ------- */
.tr-seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.tr-seg button{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:7px 13px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.tr-seg button:hover{background:var(--bg-4);color:var(--ink)}
.tr-seg button.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.tr-steps{margin:0;padding-left:20px;counter-reset:none}
.tr-steps li{margin-bottom:10px;padding-left:4px}
.tr-t{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink);font-weight:600}
.tr-d{margin:3px 0 0;font-family:var(--ui);font-size:12px;line-height:1.7;color:var(--ink-3)}

@media (max-width:640px){
  .hl-t{grid-template-columns:1fr}
  .rl-t{grid-template-columns:1fr}
  .od2-l{grid-template-columns:1fr}
}