/* ==========================================================================
   Connected Social: 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.

     sBoard      sb-   the board. Nine rows, four columns, the returning build
     sUnits      su-   name the unit, and what each size costs you
     sLosses     sl-   which of the three losses is this

   THE BOARD IS THE MOST-USED COMPONENT IN THIS ACADEMY, by design and on
   Gareth's instruction: the visual is the primary teaching instrument rather
   than an illustration of prose that already exists. So it gets the most care
   here, and the care is spent on legibility rather than on decoration.

   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 board is a
   plain grid of plain questions and the styling exists to let a reader see, at a
   glance, which cells say "you" and which do not. That is the whole picture.
   ========================================================================== */

/* ------------------------------------------------ the 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)}

/* One label column plus one column per discipline shown. --cols is set by the
   component so the grid never has to guess. */
.sb-grid{--cols:4;display:grid;grid-template-columns:minmax(120px,1.5fr) repeat(var(--cols),minmax(0,1fr));
  gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.sb-row{display:contents}
.sb-rl,.sb-h,.sb-cell{padding:7px 9px;border-bottom:1px solid var(--line);
  font-family:var(--ui);font-size:12px;line-height:1.4}
.sb-rl{color:var(--ink-2);background:var(--bg-3);display:flex;gap:7px;align-items:baseline}
.sb-n{flex:0 0 auto;font-size:10px;color:var(--ink-4);font-variant-numeric:tabular-nums;
  min-width:11px}
.sb-head .sb-rl{background:var(--bg-3);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.sb-h{background:var(--bg-3);display:flex;flex-direction:column;gap:2px}
.sb-h b{font-size:12.5px;color:var(--ink);font-weight:600}
.sb-h i{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent)}
.sb-h.focus{background:var(--accent-soft)}
.sb-h.shut{color:var(--ink-4);font-style:italic}
.sb-can{font-size:11.5px;font-weight:600}
.sb-can.y{color:var(--money)}
.sb-can.p{color:var(--warn)}
.sb-can.w{color:var(--open)}
.sb-can.n{color:var(--open)}
.sb-spd{font-size:10.5px;color:var(--ink-4);line-height:1.35}

/* THE FOUR HOLDERS, AND THE COLOUR IS THE MESSAGE. A reader should be able to
   see, without reading a word, how much of the board is theirs. `you` is the
   only one that reads as present; the other three recede in three
   distinguishable ways so the audience column taking over in chapter 4 is
   visible from across a room. */
.sb-cell{color:var(--ink-3);text-align:center;font-size:11.5px}
.sb-cell.w-you{color:var(--money);background:color-mix(in srgb,var(--money) 10%,transparent);
  font-weight:600}
.sb-cell.w-platform{color:var(--ink-4)}
.sb-cell.w-creator{color:var(--ev-evi);background:color-mix(in srgb,var(--ev-evi) 9%,transparent)}
.sb-cell.w-audience{color:var(--ev-cnv);background:color-mix(in srgb,var(--ev-cnv) 14%,transparent);
  font-weight:600}
.sb-cell.shut{background:repeating-linear-gradient(45deg,transparent,transparent 5px,
  var(--bg-3) 5px,var(--bg-3) 10px)}
.sb-cell.focus{box-shadow:inset 2px 0 0 var(--accent)}
.sb-foot .sb-rl,.sb-foot .sb-cell{border-bottom:0;font-weight:600;background:var(--bg-3)}
.sb-tot{color:var(--ink);font-variant-numeric:tabular-nums}

/* THE NOTES SIT INSIDE THE GRID, SO THEY HAVE TO BE TOLD TO SPAN IT.

   Found by the first render pass and invisible to every suite, which is what
   that pass is for. `foot()` appends the notes as a sibling of the rows, and the
   rows use `display:contents` while their parent is the nine by four grid. So
   the notes block became a single grid item and rendered in the width of one
   column: four cards, 220px wide, stacked down the page, each one a paragraph
   squeezed into a gutter.

   Everything about it was correct in the markup and correct in jsdom. It is a
   layout defect and only a browser has a layout. */
.sb-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;
  margin-top:10px}
.sb-note{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 11px}
.sb-note.focus{border-color:var(--accent);background:var(--accent-soft)}
.sb-nm{margin:0 0 6px;font-family:var(--ui);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sb-nf{margin:0 0 7px;font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-2)}
.sb-nf span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.sb-nc{margin:0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.55;color:var(--ink-3)}

.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)}

/* THE PHONE, AND THE FIRST VERSION OF THIS WAS WRONG IN A WAY ONLY A BROWSER
   COULD SHOW.

   It narrowed `grid-template-columns` to two on a small screen, expecting the
   board to stack. It does not stack: the rows are `display:contents`, so every
   cell in the table simply reflowed into two columns and the row labels landed
   next to other rows' values. The board did not become smaller. It became a
   scrambled grid that looked intentional, and fifteen green suites had nothing
   to say about it because jsdom has no layout engine.

   The comparison across columns IS the teaching in this exhibit, so it is kept
   and the reader scrolls sideways, with the row labels pinned to the left edge
   so a value is never orphaned from its question. */
.sb-scroll{overflow-x:auto;overflow-y:hidden;border-radius:12px;
  -webkit-overflow-scrolling:touch}
.sb-rl{position:sticky;left:0;z-index:2}
@media (max-width:760px){
  .sb-grid{min-width:640px;font-size:11px}
  .sb-rl,.sb-h,.sb-cell{padding:6px 7px}
  .sb-h b{font-size:11.5px}
  .sb-notes{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------ name the unit ---------- */
.su-p{margin:0 0 11px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink)}
.su-fake{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);
  font-style:normal;border:1px solid var(--warn);border-radius:6px;padding:1px 5px;
  margin-left:6px;white-space:nowrap}
.su-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.su-o{display:flex;flex-direction:column;gap:3px;text-align:left;align-items:flex-start;
  padding:10px 11px;height:auto;white-space:normal}
.su-o b{font-size:12.5px}
.su-o span{font-size:11px;color:var(--ink-3);line-height:1.45}
.su-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 12%,transparent)}
.su-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.su-say{margin-top:11px}
.su-mark{margin:0 0 6px;font-family:var(--ui);font-size:12px;font-weight:600}
.su-mark.ok{color:var(--money)}
.su-mark.no{color:var(--warn)}
.su-why{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.su-cost{margin:0;padding:9px 11px;background:var(--bg-3);border-radius:10px;
  font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.su-cost span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.su-more{display:flex;align-items:center;gap:12px;margin-top:11px}
.su-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}

/* ------------------------------------------------ which loss ------------- */
.sl-c{margin:0 0 11px;padding:11px 13px;background:var(--bg-3);border-radius:12px;
  font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink);font-style:italic}
.sl-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.sl-o{text-align:left;white-space:normal;height:auto;padding:10px 11px;font-size:12px;
  line-height:1.45}
.sl-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 12%,transparent)}
.sl-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.sl-say{margin-top:11px}
.sl-mark{margin:0 0 6px;font-family:var(--ui);font-size:12px;font-weight:600}
.sl-mark.ok{color:var(--money)}
.sl-mark.no{color:var(--warn)}
.sl-why{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.sl-fix{margin:0;padding:9px 11px;background:var(--bg-3);border-radius:10px;font-family:var(--ui);
  font-size:12px;line-height:1.6;color:var(--ink-2)}
.sl-fix span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.sl-more{display:flex;align-items:center;gap:12px;margin-top:11px}
.sl-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}