/* ==========================================================================
   Connected Local, chapter 0: understand local. 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.

     ln-   every component in this chapter, behind three shared engines
             deck()   many rows, each graded, with an optional top control
             sides()  one brief, two real places, decide before the numbers
             two bespoke builds: the market file, and the four weeks

   THIS IS THE FIRST THING A READER EVER SEES IN THIS ACADEMY, so legibility
   beats decoration everywhere. 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.

   Nothing here animates, so prefers-reduced-motion has nothing to honour beyond
   the transition suppressed at the foot of this file.
   ========================================================================== */

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

/* ------------------------------------------------------------ deck() ----- */
.ln-lab{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ln-levels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.ln-levels .ln-o{flex:1 1 160px}
.ln-row{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  margin-bottom:7px}
.ln-q{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.ln-q b{color:var(--ink)}
.ln-fact{margin:0 0 9px;padding:8px 10px;background:var(--bg-3);border-left:2px solid var(--l0);
  border-radius:0 8px 8px 0;font-family:var(--ui);font-size:12.5px;line-height:1.6;
  color:var(--ink-3)}
.ln-fact b{color:var(--ink)}
.ln-lvl{margin:0 0 9px;font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-4)}
.ln-lvl b{color:var(--accent)}
.ln-opts{display:flex;flex-wrap:wrap;gap:6px}
.ln-opts .ln-o{flex:1 1 170px}
.ln-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)}
.ln-why b{color:var(--ink)}
.ln-score{margin:12px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.ln-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)}
.ln-close b{color:var(--ink)}

/* ----------------------------------------------------------- sides() ----- */
.ln-brief{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  margin-bottom:8px}
.ln-brief.done{border-color:var(--line-2)}
.ln-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}
.ln-set{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.ln-set b{color:var(--ink)}
.ln-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px}
.ln-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)}
.ln-out p{margin:0}
.ln-out p+p{margin-top:7px}
.ln-out b{color:var(--ink)}
.ln-verdict{font-weight:600;letter-spacing:.02em}
.ln-verdict.ok{color:var(--money)}
.ln-verdict.no{color:var(--warn)}
.ln-tab{width:100%;border-collapse:collapse;margin:10px 0 0;font-family:var(--ui);font-size:12px}
.ln-tab th{text-align:left;font-weight:400;color:var(--ink-4);padding:5px 8px 5px 0;
  border-top:1px solid var(--line);width:40%}
.ln-tab td{padding:5px 0 5px 8px;border-top:1px solid var(--line);color:var(--ink-2)}
.ln-src{margin:9px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-4)}

/* -------------------------------------- the gate used by two builds ------ */
.ln-gate{background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:12px 13px;
  margin-bottom:13px}
.ln-build{border-top:1px solid var(--line);padding-top:13px}

/* ------------------------------------------------ linfile (0.4) ---------- */
.ln-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  margin:12px 0 0}
.ln-n{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.ln-n .k{margin:0 0 4px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.ln-n .v{margin:0 0 5px;font-family:var(--display);font-size:24px;line-height:1.1;color:var(--ink)}
.ln-n .d{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.ln-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}

/* ------------------------------------------------ linweek (0.5) ---------- */
.ln-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;
  margin:12px 0 0}
.ln-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.ln-c.focus{border-color:var(--accent);background:var(--accent-soft)}
.ln-name{margin:0 0 6px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);
  letter-spacing:.01em}
.ln-c .ln-d{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.ln-c .ln-d b{color:var(--ink)}

/* 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){
  .ln-opts .ln-o,.ln-levels .ln-o{flex:1 1 100%}
  .ln-picks,.ln-nums,.ln-week{grid-template-columns:1fr}
  .ln-tab th{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .ln-o,.ln-p{transition:none}
}