/* ==========================================================================
   Connected Local, chapter 4: cinema. 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.

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

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

   A third shape appears here as it did in chapter 3, because the chain is
   worth drawing rather than listing:
     lcin-seg             the chain drawn as segments, with the uncertain one
                          marked. In out of home the marked segment was the
                          slow one. Here it is the one nobody upstream controls

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

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

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

/* ------------------------------------------- the chain, drawn in segments -
   In out of home the marked segment was the slow one, because a physical
   object has to be manufactured. Here the marked segment is the uncertain
   one: the cinema owner does not fix the showtimes until about a week out,
   and nothing upstream of that can move the date. Marked with a border and a
   label rather than with a colour a reader has to be told the meaning of. */
.lcin-segs{display:grid;gap:7px;margin-bottom:12px}
.lcin-seg{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lcin-seg.slow{border-color:var(--warn);background:var(--bg-3)}
.lcin-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}
.lcin-seg.slow .lcin-seg-t{color:var(--warn)}
.lcin-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. This chapter has one four-option row set, which is the widest thing
   in the Academy and the one most likely to wrap badly. */
@media (max-width:560px){
  .lcin-opts,.lcin-picks{display:flex;flex-direction:column}
  .lcin-opts .lcin-o{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .lcin-o,.lcin-p,.lcin-row,.lcin-mo,.lcin-seg{transition:none}
}