/* ==========================================================================
   Connected Local, chapter 2: local audio and radio. Component styles.

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

     lau-   everything in this chapter, prefixed so it cannot collide with
            chapter 1's lc- and lp- classes or with a later chapter's

   Two shared shapes carry ten of the twelve components:
     lau-row / lau-o     one set of short options, many rows, each graded
     lau-mo / lau-p      one situation at a time, with its own options

   THE LABELS ARE THE DESIGN. LANGUAGE.md section 8: a clever exhibit that
   needs a paragraph of explanation before it makes sense is not clever. 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 beside the one
   they chose.
   ========================================================================== */

/* ---------------------------------------------- the shared option button -- */
.lau-o,.lau-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)}
.lau-o:hover:not(:disabled),.lau-p:hover:not(:disabled){background:var(--bg-4);color:var(--ink)}
.lau-o:disabled,.lau-p:disabled{cursor:default;opacity:.85}
.lau-o:focus-visible,.lau-p:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lau-o.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.lau-o.right,.lau-p.right{border-color:var(--money);color:var(--money);background:var(--money-soft)}
.lau-o.wrong,.lau-p.wrong{border-color:var(--open);color:var(--open);background:var(--open-soft)}
.lau-o.answer:not(.right){border-color:var(--money);color:var(--money);border-style:dashed}

/* ------------------------------------------------- the many-rows shape --- */
.lau-row{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  margin-bottom:7px}
.lau-q{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.lau-q b{color:var(--ink)}
.lau-opts{display:flex;flex-wrap:wrap;gap:6px}
.lau-opts .lau-o{flex:1 1 150px}
.lau-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)}
.lau-why b{color:var(--ink)}
.lau-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)}
.lau-score{margin:12px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.lau-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)}
.lau-close b{color:var(--ink)}

/* ------------------------------------------- the one-situation shape ----- */
.lau-mo{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  margin-bottom:8px}
.lau-mo.done{border-color:var(--line-2)}
.lau-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}
.lau-who{margin:0 0 6px;font-family:var(--ui);font-size:11px;color:var(--accent);font-weight:600}
.lau-set{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.lau-set b{color:var(--ink)}
.lau-ask{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  font-weight:600}
.lau-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.lau-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)}
.lau-out p{margin:0}
.lau-out p+p{margin-top:7px}
.lau-verdict{font-weight:600;letter-spacing:.02em}
.lau-verdict.ok{color:var(--money)}
.lau-verdict.no{color:var(--warn)}

/* Phones. Columns of prose become one column rather than several 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){
  .lau-opts,.lau-picks{display:flex;flex-direction:column}
  .lau-opts .lau-o{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .lau-o,.lau-p,.lau-row,.lau-mo{transition:none}
}