/* ==========================================================================
   Connected Local, chapter 5: one market, four crafts. 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.

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

   FOUR SHARED SHAPES CARRY MOST OF THE EIGHT COMPONENTS, so eight components
   do not become eight sets of bugs:

     lmk-card / lmk-open    evidence you may open, with a budget of looks
     lmk-row  / lmk-o       many short questions, each graded on the spot
     lmk-step / lmk-nav     one moment at a time, moving forward through a year
     lmk-num  / lmk-pm      a number the reader raises and lowers with buttons

   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.

   NOTHING HERE ANIMATES BY DEFAULT, and the one transition that exists is
   removed under prefers-reduced-motion at the foot of this sheet.
   ========================================================================== */

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

/* --------------------------------------------------- evidence you open ---- */
.lmk-budget{margin:0 0 10px;padding:8px 11px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:10px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.lmk-budget b{color:var(--ink)}
.lmk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.lmk-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.lmk-card.shown{border-color:var(--line-2);background:var(--bg-3)}
.lmk-cname{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.lmk-card.shown .lmk-cname{color:var(--ink)}
.lmk-open{cursor:pointer;background:transparent;border:1px dashed var(--line-2);border-radius:8px;
  padding:6px 10px;font-family:var(--ui);font-size:12px;color:var(--ink-3);width:100%}
.lmk-open:hover:not(:disabled){border-color:var(--accent);color:var(--ink-2)}
.lmk-open:disabled{cursor:default;opacity:.5}
.lmk-cbody{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.lmk-cbody b{color:var(--ink)}

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

/* ------------------------------------------------- one moment at a time --- */
.lmk-step{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.lmk-when{margin:0 0 4px;font-family:var(--ui);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--l5)}
.lmk-what{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.lmk-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px}
.lmk-nav .lmk-count{font-family:var(--ui);font-size:12px;color:var(--ink-4);margin-left:auto}
.lmk-track{display:flex;gap:3px;margin:0 0 11px}
.lmk-track i{flex:1 1 0;height:4px;border-radius:2px;background:var(--bg-4)}
.lmk-track i.done{background:var(--l5)}
.lmk-track i.now{background:var(--accent)}

/* --------------------------------------------------- numbers you set ------ */
.lmk-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.lmk-num{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.lmk-nlab{margin:0 0 3px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.lmk-nval{margin:0 0 8px;font-family:var(--display);font-size:22px;color:var(--ink)}
.lmk-nrow{display:flex;gap:6px;align-items:center}
.lmk-pm{min-width:38px;text-align:center;font-size:14px;line-height:1.2;padding:5px 8px}
.lmk-nhint{margin:8px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-4)}

/* ------------------------------------------------------ the verdict box --- */
.lmk-total{margin-top:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px}
.lmk-out:empty,.lmk-try:empty{display:none}
.lmk-say{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)}
.lmk-say b{color:var(--ink)}
.lmk-say.no{border-color:var(--open);background:var(--open-soft)}
.lmk-say.ok{border-color:var(--money);background:var(--money-soft)}
.lmk-say.warn{border-color:var(--warn);background:var(--warn-soft)}
.lmk-head{margin:0 0 6px;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.lmk-big{margin:0 0 6px;font-family:var(--display);font-size:26px;line-height:1.15;color:var(--ink)}
.lmk-big.no{color:var(--open)}
.lmk-big.ok{color:var(--money)}
.lmk-strike{text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--open);color:var(--ink-4)}

/* ------------------------------------------------------ the four crafts --- */
.lmk-crafts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;
  margin-top:10px}
.lmk-c{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:10px 11px}
.lmk-c.tv{border-top:2px solid var(--l1)}
.lmk-c.audio{border-top:2px solid var(--l2)}
.lmk-c.ooh{border-top:2px solid var(--l3)}
.lmk-c.cinema{border-top:2px solid var(--l4)}
.lmk-cn{margin:0 0 5px;font-family:var(--ui);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.lmk-cv{margin:0 0 5px;font-family:var(--display);font-size:17px;line-height:1.2;color:var(--ink)}
.lmk-cd{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.lmk-cd b{color:var(--ink-2)}
.lmk-c.pass{background:var(--money-soft)}
.lmk-c.fail{background:var(--open-soft)}

/* ------------------------------------------------ the borrowing matrix ---- */
.lmk-grid{overflow-x:auto}
.lmk-grid table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--ui);
  font-size:12px}
.lmk-grid th,.lmk-grid td{border:1px solid var(--line);padding:7px 8px;text-align:left;
  vertical-align:top;line-height:1.55;color:var(--ink-3)}
.lmk-grid th{color:var(--ink-2);background:var(--bg-3);font-weight:600}
.lmk-grid td.own{background:var(--money-soft);color:var(--money)}
.lmk-grid td.borrowed{background:var(--warn-soft);color:var(--warn)}
.lmk-grid td.none{background:var(--bg-2);color:var(--ink-4)}
.lmk-key{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-4)}
.lmk-key span{display:flex;align-items:center;gap:6px}
.lmk-key i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ------------------------------------------------------------- the bars --- */
.lmk-bar{height:9px;border-radius:5px;background:var(--bg-4);overflow:hidden;margin:6px 0 4px}
.lmk-bar i{display:block;height:100%;background:var(--l5);transition:width .18s var(--ease)}
.lmk-bar i.cut{background:var(--open)}
.lmk-legend{margin:9px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}

/* -------------------------------------------------------- the gate list --- */
.lmk-gates{margin:10px 0 0;padding:0;list-style:none}
.lmk-gates li{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;margin-bottom:5px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;font-family:var(--ui);
  font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.lmk-gates li b{color:var(--ink-2)}
.lmk-gates li.shut{border-color:var(--open);background:var(--open-soft)}
.lmk-gates li.open{border-color:var(--money);background:var(--money-soft)}
.lmk-mark{flex:0 0 auto;font-family:var(--display);font-size:14px;line-height:1.4;width:18px;
  text-align:center;color:var(--ink-4)}
.lmk-gates li.shut .lmk-mark{color:var(--open)}
.lmk-gates li.open .lmk-mark{color:var(--money)}

@media (prefers-reduced-motion: reduce){
  .lmk-bar i{transition:none}
}