/* ==========================================================================
   Connected Local: the shared kit. Component styles.

   Nothing here introduces a colour. Every value is a variable already declared
   in academy.css, so the Academy accent retunes in one place.

     lSignalBoard   sb-    the returning build, slot 1 of every craft chapter
     lHands         lh-    the three clocks
     lGhostMap      gm-    this craft's boundary over the same advertiser

   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. So the board
   is a plain table of plain questions, and the styling exists to make the three
   answers legible at a glance rather than to decorate them.
   ========================================================================== */

/* ------------------------------------------------ signal board ----------- */
.sb-q{margin:0 0 12px;padding:9px 12px;background:var(--bg-3);border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
/* TWO BY TWO, NOT THREE PLUS ONE. auto-fit gave three columns in the ~830px
   content measure, which left cinema alone on a second row and made the fourth
   craft look like an afterthought. Four crafts is a two by two matrix, each
   column gets nearly twice the width for prose that needs it, and the shape
   itself says "four things being compared". Found by the first render pass;
   no suite can see this. */
.sb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sb-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.sb-c.focus{border-color:var(--accent);background:var(--accent-soft)}
.sb-c.shut{background:var(--bg);border-style:dashed;display:flex;flex-direction:column;
  justify-content:space-between;min-height:120px}
.sb-name{margin:0 0 8px;font-family:var(--ui);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sb-name i{font-style:normal;font-size:9.5px;color:var(--accent);letter-spacing:.06em}
.sb-hidden{margin:0;font-family:var(--ui);font-size:12px;color:var(--ink-4);font-style:italic}
.sb-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0 0 9px}
.sb-rows dt{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sb-rows dd{margin:0;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.sb-rows dd.y{color:var(--money)}
.sb-rows dd.p{color:var(--warn)}
.sb-rows dd.n{color:var(--open)}
.sb-cost{margin:0;padding-top:8px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:12px;line-height:1.6;color:var(--ink-2)}
.sb-borrow{margin:8px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.sb-borrow span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.sb-more{display:flex;align-items:center;gap:12px;margin-top:12px}
.sb-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.sb-gate{margin-top:12px;padding:12px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:12px}
.sb-gq{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.55;color:var(--ink-2)}
.sb-opts{display:flex;flex-wrap:wrap;gap:8px}
.sb-say{margin-top:12px}
.sb-mark{margin:0 0 8px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.02em}
.sb-mark.ok{color:var(--money)}
.sb-mark.no{color:var(--warn)}
.sb-ans{margin:0 0 8px;font-family:var(--ui);font-size:13.5px;line-height:1.65;color:var(--ink)}
.sb-teach{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

/* ------------------------------------------------ three clocks ----------- */
.lh-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.lh-b{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:7px 12px;font-family:var(--ui);font-size:12px;color:var(--ink-3);flex:1 1 auto}
.lh-b:hover{background:var(--bg-4);color:var(--ink)}
.lh-b.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.lh-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lh-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.lh-c.focus{border-color:var(--accent-2)}
.lh-name{margin:0;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.lh-v{margin:4px 0 6px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.35}
.lh-d{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.lh-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3)}

/* ------------------------------------------------ ghost map -------------- */
.gm-wrap{position:relative}
.gm-svg{display:block;width:100%;height:auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.gm-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.gm-key{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-3)}
/* The legend. Each earlier boundary carries its own dash pattern, because the
   first render pass drew three of them identically and labelled all three "from
   the last chapter", which was wrong for two and unreadable for all three. */
.gm-sw{width:18px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}
.gm-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-2);display:inline-block;
  flex:0 0 auto}
.gm-earlier{margin-top:7px;padding-top:8px;border-top:1px solid var(--line);align-items:center}
.gm-lab{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.gm-key b{color:var(--ink);font-weight:600}
/* Dashes rather than colours: a faint line is faint by design, and three greys
   at different lightness would read as three importances. */
.gm-sw.gm-g0{background:repeating-linear-gradient(90deg,var(--ink-3) 0 6px,transparent 6px 10px)}
.gm-sw.gm-g1{background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 5px)}
.gm-sw.gm-g2{background:repeating-linear-gradient(90deg,var(--ink-3) 0 11px,transparent 11px 15px)}
.gm-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.gm-n{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.gm-n p{margin:0;font-family:var(--ui)}
.gm-n .k{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.gm-n .v{font-size:17px;font-weight:600;color:var(--ink);margin:3px 0 0}
.gm-n .d{font-size:11.5px;line-height:1.55;color:var(--ink-2);margin-top:4px}

/* Phones. The board is four columns of prose and it must become one column
   rather than four illegible ones. The predecessor Academy shipped a three
   part row that was given two columns at phone width, so the value wrapped
   under the next row's label and the exhibit read as the opposite of what it
   said. That is the defect this block exists to prevent. */
@media (max-width:560px){
  .sb-cols,.lh-cols,.gm-nums{grid-template-columns:1fr}
  .gm-earlier{flex-direction:column;align-items:flex-start;gap:5px}
  .sb-c.shut{min-height:0}
  .lh-pick{flex-direction:column}
  .lh-b{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .sb-c,.lh-c{transition:none}
}

/* The schematic grid. Cells are counties, dots are shops, the line is the
   craft's boundary and the faint lines are boundaries from earlier chapters. */
.gm-cell{fill:var(--bg-3);stroke:var(--line)}
.gm-cell.on{fill:var(--bg-4)}
.gm-shop{fill:var(--ink-2)}
.gm-line{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round}
.gm-ghost{stroke:var(--ink-4);stroke-width:1.5;fill:none;opacity:.8}
.gm-ghost.g0{stroke-dasharray:6 4}
.gm-ghost.g1{stroke-dasharray:2 3}
.gm-ghost.g2{stroke-dasharray:11 4}