/* ==========================================================================
   Connected Local, chapter 3: out of home. 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.

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

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

   A third shape appears only here, because this craft has one thing no other
   craft has: a chain with a printing and shipping segment in the middle of it.
     looh-seg             the chain drawn as segments, with the slow one marked

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

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

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

/* ------------------------------------------- the chain, drawn in segments -
   The printing and shipping segment is the one no other craft has, and it is
   the reason this craft is slow. So it is marked rather than described, and
   the marking is a border and a label rather than a colour a reader has to be
   told the meaning of. */
.looh-segs{display:grid;gap:7px;margin-bottom:12px}
.looh-seg{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.looh-seg.slow{border-color:var(--warn);background:var(--bg-3)}
.looh-seg-t{margin:0 0 4px;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600}
.looh-seg.slow .looh-seg-t{color:var(--warn)}
.looh-seg-d{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* 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){
  .looh-opts,.looh-picks{display:flex;flex-direction:column}
  .looh-opts .looh-o{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .looh-o,.looh-p,.looh-row,.looh-mo,.looh-seg{transition:none}
}