/* ==========================================================================
   Connected Local, chapter 1: local television. Component styles.

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

     lc-   the two shared engines, used by seven of the nine components
             grid()     one set of short options, many rows, each graded
             choices()  one situation at a time, with its own options
     lp-   ltvpolitical (1.4), the only component with its own shape

   THE LABELS ARE THE DESIGN and the styling exists to make three answers
   legible at a glance rather than to decorate them. A right answer is the
   money colour, a wrong one is the open colour, and the answer the reader
   missed is always shown next to the one they chose.
   ========================================================================== */

/* ---------------------------------------------- the shared option button -- */
.lc-o,.lc-p{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 12px;font-family:var(--ui);font-size:12.5px;line-height:1.5;
  color:var(--ink-3)}
.lc-o:hover:not(:disabled),.lc-p:hover:not(:disabled){background:var(--bg-4);color:var(--ink)}
.lc-o:disabled,.lc-p:disabled{cursor:default;opacity:.85}
.lc-o.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.lc-o.right,.lc-p.right{border-color:var(--money);color:var(--money);background:var(--money-soft)}
.lc-o.wrong,.lc-p.wrong{border-color:var(--open);color:var(--open);background:var(--open-soft)}
.lc-o.answer:not(.right){border-color:var(--money);color:var(--money);border-style:dashed}

/* ------------------------------------------------------------ grid() ----- */
.lc-row{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  margin-bottom:7px}
.lc-q{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.lc-opts{display:flex;flex-wrap:wrap;gap:6px}
.lc-opts .lc-o{flex:1 1 150px}
.lc-why{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-3)}
.lc-why b{color:var(--ink)}
.lc-mark{display:block;margin-top:9px;padding:9px 11px;background:var(--accent-soft);
  border-left:2px solid var(--accent);border-radius:0 8px 8px 0;color:var(--ink-2)}
.lc-score{margin:12px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.lc-close{margin-top:12px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 13px;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}
.lc-close b{color:var(--ink)}

/* --------------------------------------------------------- choices() ----- */
.lc-mo{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  margin-bottom:8px}
.lc-mo.done{border-color:var(--line-2)}
.lc-when{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600}
.lc-set{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.lc-set b{color:var(--ink)}
.lc-ask{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  font-weight:600}
.lc-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.lc-out{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.lc-out p{margin:0}
.lc-out p+p{margin-top:7px}
.lc-verdict{font-weight:600;letter-spacing:.02em}
.lc-verdict.ok{color:var(--money)}
.lc-verdict.no{color:var(--warn)}

/* ------------------------------------------------- ltvpolitical (1.4) ---- */
.lp-lab{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.lp-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.lp-row .lc-o{flex:1 1 180px}
.lp-gate{margin-top:4px;padding:12px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:12px}
.lp-ask{margin:0 0 9px;font-family:var(--ui);font-size:13px;color:var(--ink-2);font-weight:600}
.lp-gate .lp-row{margin-bottom:0}
.lp-out{margin-top:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px}
.lp-mark{margin:0 0 8px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.02em}
.lp-mark.ok{color:var(--money)}
.lp-mark.no{color:var(--warn)}
.lp-say{margin:0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}
.lp-say b{color:var(--ink)}
.lp-radio{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.lp-radio span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.lp-again{margin-top:11px}

/* Phones. Three columns of prose become one column rather than three
   illegible ones. A predecessor Academy shipped a three part row that kept two
   columns at phone width, so a value wrapped under the next row's label and the
   exhibit read as the opposite of what it said. */
@media (max-width:560px){
  .lc-opts,.lc-picks,.lp-row{display:flex;flex-direction:column}
  .lc-opts .lc-o,.lp-row .lc-o{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .lc-o,.lc-p,.lc-row,.lc-mo{transition:none}
}