/* STRATEGY AND PLANNING, chapter 8. The page, assembled.

   A stub, listed in spfiles.js from the first day. Empty is a state; missing is
   a defect. Chapter components go in assets/js/strategy/sims/sp_c08.js and their
   styles land here.

   This is the chapter where all nine entries arrive at once, so it is the most
   likely place in the book to want a wide exhibit. It does not get an exception.
   The two render-pass rules apply: nothing under 9px at 360px width, and a wide
   exhibit scrolls sideways with a right-edge fade rather than scaling down or
   reflowing. The pattern is at the head of sp_kit.css, and the nine-row list it
   already styles is very likely the right thing to reuse rather than to rebuild.

   The chapter hue is --p8. Ask for var(--stage), never for --p8 by name.      */

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 8 EXHIBITS.

     .sp-aud / .sp-audcell   spaudit,    8.1's nine by four grid
     .sp-rec / .sp-recpan    sprecourse, 8.2's three panels
     .sp-jn / .sp-jnband     spjoin,     8.3's joins and the range of variation

   Nothing here restates sp_kit.css or the seven earlier chapter files. The
   fiction note, the label, the warning line, the reader mark, the refusal, the
   trap, the prompt and the band description are declared there and reused by
   name.

   ── THE ONE THING THIS CHAPTER ADDS, AND IT CARRIES A MEANING ─────────────

   AN EMPTY COLUMN THAT IS DRAWN RATHER THAN OMITTED. At 8.2 the dollar column
   on a television line is drawn at full width and left empty with its reason
   printed inside it, because the remedy there is paid in inventory and a
   column that disappears when it has nothing in it tells the reader the money
   question was never asked. `.sp-recempty` is that treatment and it is used
   nowhere else in the book.

   Both render-pass rules are obeyed. Nothing below is under 10px at any width,
   and every grid whose columns line up down the page carries a floor width and
   scrolls sideways with a right-edge fade rather than reflowing.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-aud,.sim .sp-rec,.sim .sp-jn,.sim .sp-jnband,.sim .sp-recstrip
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── 8.1. NINE ENTRIES, FOUR DOCUMENTS ───────────────────────────────────
   The grid is the argument. A row with nothing anywhere in it is marked on the
   row rather than only in its cells, because the finding is about the row. */
.sp-audctrl{margin:0 0 12px}
.sp-audb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:8px 13px;
  border-radius:999px;cursor:pointer;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-audb.on{color:var(--ink);border-color:var(--warn);background:var(--warn-soft)}
.sp-audwrap{position:relative;margin:0 0 12px}
.sp-audwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:22px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--bg))}
.sp-aud{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.sp-audr{display:flex;min-width:560px;border-top:1px solid var(--line);align-items:stretch}
.sp-audr:first-child{border-top:0}
.sp-audhd{background:var(--bg-3)}
.sp-audhd span{font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4);padding:8px 10px}
.sp-audr.nohome{background:var(--warn-soft)}
.sp-audr.sel{background:var(--bg-3)}
.sp-audk{flex:0 0 186px;padding:8px 10px;text-align:left;background:none;border:0;cursor:pointer}
.sp-audk b{display:block;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink)}
.sp-audk i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink-3);
  margin-top:2px}
.sp-audk em{display:block;font-style:normal;font-family:var(--ui);font-size:10.5px;
  color:var(--ink-4);margin-top:3px}
.sp-audc{flex:1 0 96px;padding:8px 8px}
.sp-audcell{display:inline-block;padding:4px 8px;border-radius:5px;font-family:var(--ui);
  font-size:10.5px;line-height:1.3}
.sp-audcell.v-part{border:1px solid var(--money);color:var(--money)}
.sp-audcell.v-box{border:1px solid var(--ink-4);color:var(--ink-3)}
.sp-audcell.v-none{border:1px dashed var(--warn);color:var(--warn)}
.sp-audwhy{margin:0;padding:0 10px 10px;min-width:560px}
.sp-auddet{margin:0 0 14px}
.sp-audt{list-style:none;margin:8px 0 0;padding:0}
.sp-audt li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-audtt{flex:0 0 132px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--warn)}
.sp-audtd{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-audslot{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.sp-audin{display:block;width:100%;margin:0 0 8px;padding:8px 10px;font-family:var(--ui);
  font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:6px}

/* ── 8.2. THE RECOURSE BENCH. SIGNATURE 5 ────────────────────────────────
   Three panels behind one selector, with the artefact strip above all three
   because it never changes and the reader has to be able to look back at it
   from whichever panel they are in. */
.sp-recstrip{margin:0 0 12px}
.sp-reccards{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 9px}
.sp-reccard{flex:1 1 132px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg-2)}
.sp-reccard.added{border-style:dashed;border-color:var(--ink-4)}
.sp-recct{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink)}
.sp-reccs{display:block;font-size:11px;line-height:1.5;color:var(--ink-4);margin-top:3px}
.sp-recb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:7px 12px;
  border-radius:999px;cursor:pointer;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-recb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-recdeck.on{border-color:var(--ink-4);border-style:dashed}
.sp-reca.on,.sp-recbb.on{border-color:var(--warn);background:var(--warn-soft)}
.sp-recnav{margin:0 0 12px}
.sp-recpan{margin:0 0 12px}
.sp-recpan .sp-slab2{display:block;margin:0 0 9px}
.sp-recas,.sp-recnot{display:block;width:100%;margin:5px 0 0;padding:7px 9px;
  font-family:var(--ui);font-size:12px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:6px}

/* The two columns. The left one fills as the version advances and the right
   one holds one thing at every version, which is the picture. */
.sp-rectwo{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.sp-reccol{flex:1 1 200px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg-2)}
.sp-reccol.money{border-left:3px solid var(--money)}
.sp-reccol.reason{border-left:3px solid var(--warn)}
.sp-recch{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 6px}
.sp-reccol .sp-bd{margin:0 0 7px;font-size:12px}
.sp-reccol .sp-bw{margin:0}

/* THE COLUMN THAT IS DRAWN AND LEFT EMPTY. Used once in this book, on the
   television line, because the remedy there is paid in inventory. It keeps its
   full width and prints its reason inside itself. */
.sp-recempty{margin:0;padding:12px 11px;border:1px dashed var(--warn);border-radius:6px;
  font-size:12px;line-height:1.6;color:var(--warn)}
.sp-recsteps,.sp-recnl,.sp-recref{list-style:none;margin:8px 0 12px;padding:0}
.sp-recsteps li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-recst{flex:0 0 132px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--warn)}
.sp-recsd{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-recnl li{padding:6px 0 6px 14px;font-size:12px;line-height:1.55;color:var(--warn);
  border-top:1px solid var(--line);position:relative}
.sp-recnl li::before{content:'';position:absolute;left:2px;top:13px;width:5px;height:5px;
  border-radius:50%;background:var(--warn)}
.sp-recref li{padding:9px 0;border-top:1px solid var(--line)}
.sp-recrt{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--sp,var(--acad-strategy))}
.sp-recrd{display:block;font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:4px}
.sp-recrn{display:block;font-size:12.5px;line-height:1.6;color:var(--ink);margin-top:6px;
  font-weight:600}

/* Panel three. Seventeen rows by four properties, so it lines up down the page
   and scrolls sideways with a right-edge fade rather than reflowing. */
.sp-recwrap{position:relative;margin:0 0 12px}
.sp-recwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:22px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--bg))}
.sp-recgrid{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.sp-recr{display:flex;min-width:540px;border-top:1px solid var(--line);align-items:center}
.sp-recr:first-child{border-top:0}
.sp-rechd{background:var(--bg-3)}
.sp-rechd span{font-family:var(--ui);font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-4)}
.sp-recr span{padding:7px 8px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.sp-recf{flex:0 0 178px}
.sp-recp{flex:1 0 74px;text-align:center}
.sp-recm{flex:0 0 82px;text-align:right}
.sp-recr.c-people{background:var(--bg-3)}
.sp-recr.c-reason{background:var(--warn-soft)}
.sp-recdot{display:inline-block;min-width:30px;padding:2px 6px;border-radius:4px;
  font-family:var(--ui);font-size:10px}
.sp-recdot.y{border:1px solid var(--money);color:var(--money)}
.sp-recdot.n{border:1px dashed var(--ink-4);color:var(--ink-4)}
.sp-recmk{font-family:var(--ui);font-size:10.5px;padding:4px 9px;border-radius:999px;
  cursor:pointer;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line)}
.sp-recmk.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg)}

/* ── 8.3. TWO DOCUMENTS, ONE YEAR ────────────────────────────────────────
   A join that carries nothing keeps its full row and its arrow, and the arrow
   says "nothing" rather than being removed. A missing arrow reads as a layout
   accident; an arrow labelled nothing reads as a finding. */
.sp-jn{margin:0 0 12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sp-jnhd{display:flex;background:var(--bg-3);border-bottom:1px solid var(--line)}
.sp-jnhd span{flex:1 1 50%;padding:7px 11px;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.sp-jnrow{display:flex;flex-wrap:wrap;align-items:center;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer}
.sp-jnrow.sel{background:var(--bg-3)}
.sp-jnrow.off{opacity:.5}
.sp-jnl,.sp-jnr{flex:1 1 160px;padding:8px 11px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.sp-jnarrow{flex:0 0 78px;padding:8px 4px;text-align:center;font-family:var(--ui);
  font-size:10.5px;border-radius:4px}
.sp-jnrow.live .sp-jnarrow{color:var(--money)}
.sp-jnrow.dead .sp-jnarrow{color:var(--warn)}
.sp-jnrow.live .sp-jnl,.sp-jnrow.live .sp-jnr{color:var(--ink)}
.sp-jnwhy{margin:0;padding:0 11px 10px}
.sp-jndet{margin:0 0 14px}
.sp-jnb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:8px 13px;
  border-radius:999px;cursor:pointer;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-jnb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}

/* The band, and it is the boundary object rather than a decoration on one. */
.sp-jnband{margin:0 0 14px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-jnband svg{display:block;width:100%;height:auto;margin:10px 0 12px;overflow:visible}
.sp-jnbandr{fill:var(--sp,var(--acad-strategy));opacity:.2}
.sp-jnax{stroke:var(--line-2);stroke-width:1}
.sp-jnnow{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:2 3}
.sp-jnlb{fill:var(--ink-4);font-size:9px;font-family:var(--ui)}
.sp-jnband .sp-slab2{display:block;margin:0 0 10px}
.sp-jnband .sp-bd{margin:0 0 8px}
.sp-jnband .sp-bw{margin:0}

/* What each owes the other. Two colours, one per direction, because the
   direction is the teaching. */
.sp-jnowes{margin:0 0 14px}
.sp-jnowl{list-style:none;margin:0;padding:0}
.sp-jnowl li{padding:9px 0 9px 11px;border-top:1px solid var(--line);border-left:3px solid transparent}
.sp-jnowl li.sp-o-plan{border-left-color:var(--sp,var(--acad-strategy))}
.sp-jnowl li.sp-o-year{border-left-color:var(--money)}
.sp-jnos{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-jnot{display:block;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);
  margin-top:3px}
.sp-jnod{display:block;font-size:12px;line-height:1.55;color:var(--ink-3);margin-top:3px}
.sp-jnslot{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.sp-jnin{display:block;width:100%;margin:0 0 8px;padding:8px 10px;font-family:var(--ui);
  font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:6px}