/* STRATEGY AND PLANNING, chapter 7. Lines the plan cannot hold.

   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_c07.js and their
   styles land here.

   Nothing in this file restates sp_kit.css. 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.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 7 EXHIBITS.

     .sp-tiers / .sp-tband    sptiers,   7.1's three payers and the band
     .sp-sch / .sp-schrow     spschema,  7.2's field collision
     .sp-col / .sp-colgrid    spcolumn,  7.2's row against column
     .sp-nm / .sp-nmalloc     spnomedia, 7.3's empty media column

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

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

   An EMPTY CELL has to look deliberate rather than unfinished, because in two
   of these four exhibits the empty cell is the whole teaching. `.sp-nmcell.no`
   and `.sp-schnone` therefore keep the cell's full size and its border and
   lose only the fill, with a printed reason inside them. A cell that collapses
   when it has nothing in it hides exactly the thing the reader came to see.

   Both render-pass rules are obeyed. Nothing below is under 10px at any width,
   and every list whose columns line up down the list carries a floor width and
   scrolls sideways with a right-edge fade rather than reflowing.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-tiers,.sim .sp-tband,.sim .sp-tcount,.sim .sp-tslot,.sim .sp-sch,
.sim .sp-col,.sim .sp-nm,.sim .sp-nmalloc
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── 7.1. THREE PAYERS, ONE MARKET ───────────────────────────────────────
   Each payer is a switch. Switched off it keeps its shape and loses its
   colour, because the teaching is that the payer still exists and is simply
   not in your view. */
.sp-tiers{margin:0 0 12px}
.sp-tier{margin:0 0 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);
  overflow:hidden;opacity:.55}
.sp-tier.on{opacity:1;border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-tsw{display:block;width:100%;text-align:left;padding:9px 12px;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line)}
.sp-tname{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.sp-twho{display:block;font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:2px}
.sp-tpot{display:block;font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--money);
  margin-top:3px}
.sp-topen{display:block;width:100%;text-align:left;padding:6px 12px;cursor:pointer;
  font-family:var(--ui);font-size:11px;color:var(--ink-4);background:none;border:0}
.sp-tbody{padding:2px 12px 10px}
.sp-tbody .sp-bd{margin:0 0 6px;font-size:12px}
.sp-tctrl{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.sp-tgo,.sp-task{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-tgo{color:var(--ink);border-color:var(--sp,var(--acad-strategy))}
.sp-task.on{color:var(--ink);border-color:var(--warn);background:var(--warn-soft)}
.sp-tdet{margin:0 0 14px}
.sp-tmiss{list-style:none;margin:8px 0 0;padding:0}
.sp-tmiss li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-tmt{flex:0 0 118px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--warn)}
.sp-tmd{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* The band. Two bars, one inside the other's range, and the width of the top
   bar is the finding rather than its position. */
.sp-tband{margin:0 0 14px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-tband svg{display:block;width:100%;height:auto;margin:12px 0 14px;overflow:visible}
.sp-tbandr{fill:var(--sp,var(--acad-strategy));opacity:.55}
.sp-tbandu{fill:var(--ink-4);opacity:.4}
.sp-tbl{fill:var(--ink-3);font-size:9px;font-family:var(--ui)}
.sp-tband .sp-bd{margin:0 0 8px}

/* Counted facts. Three stacked strips a row, so nothing has to line up
   sideways and nothing needs to scroll. */
.sp-tcount{margin:0 0 14px}
.sp-tcl{list-style:none;margin:0;padding:0}
.sp-tcl li{padding:9px 0;border-top:1px solid var(--line)}
.sp-tct{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink)}
.sp-tcv{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:3px}
.sp-tcb{display:block;font-size:11.5px;line-height:1.55;color:var(--ink-4);margin-top:4px}

/* The empty slot. It is the refutation, so it is a real input and not a
   rhetorical gesture. */
.sp-tslot{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.sp-tslin{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}

/* ── 7.2a. THE ROW THAT WILL NOT FIT ─────────────────────────────────────
   Two columns, the deal on the left and the row on the right. The right cell
   keeps its full height when it is empty, because the empty cell is the
   teaching and a cell that collapses hides it. */
.sp-schctrl{margin:0 0 12px}
.sp-schctrl .sp-slab2{display:block;margin:0 0 8px}
.sp-schb{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-schb.on{color:var(--ink);border-color:var(--warn);background:var(--warn-soft)}
.sp-schb.amp.on{border-color:var(--open);background:var(--open-soft)}
.sp-sch{margin:0 0 12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sp-schhd{display:flex;background:var(--bg-3);border-bottom:1px solid var(--line)}
.sp-schhd 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-schrow{display:flex;width:100%;text-align:left;cursor:pointer;background:none;border:0;
  border-top:1px solid var(--line)}
.sp-schrow.sel{background:var(--bg-3)}
.sp-schl,.sp-schr{flex:1 1 50%;padding:8px 11px}
.sp-schl b{display:block;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink)}
.sp-schl i{display:block;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ink-4);
  margin-top:2px}
.sp-schr{font-family:var(--ui);font-size:12px;color:var(--ink-2);
  border-left:1px solid var(--line)}
.sp-schrow.ok .sp-schr{color:var(--money)}
.sp-schnone{display:inline-block;padding:3px 8px;border:1px dashed var(--warn);border-radius:5px;
  font-size:11px;color:var(--warn)}
.sp-schwhy{margin:0;padding:0 11px 9px}
.sp-schempty{list-style:none;margin:8px 0 0;padding:0}
.sp-schempty li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-schet{flex:0 0 118px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--warn)}
.sp-sched{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-schdet{margin:0 0 14px}
.sp-schslot{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.sp-schin,.sp-colnm{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}
.sp-schwaiv{margin:0}

/* ── 7.2b. A COLUMN, NOT A ROW ───────────────────────────────────────────
   The columns must line up DOWN the table, because the comparison down the
   payer column is the teaching. So the table carries a floor width and
   scrolls sideways with a right-edge fade rather than reflowing. */
.sp-colctrl{margin:0 0 12px}
.sp-colb{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-colb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-colwrap{position:relative;margin:0 0 12px}
.sp-colwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:22px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--bg))}
.sp-col{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.sp-colr{display:flex;min-width:520px;border-top:1px solid var(--line)}
.sp-colr:first-child{border-top:0}
.sp-colhd{background:var(--bg-3)}
.sp-colhd span{font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-colr span{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.sp-colt{flex:1 1 180px;min-width:150px}
.sp-colc{flex:0 0 88px;text-align:right;font-family:var(--mono);color:var(--money)}
.sp-colu{flex:0 0 118px;font-size:11.5px;color:var(--ink-4)}
.sp-colp{flex:0 0 128px;font-size:11.5px;color:var(--sp,var(--acad-strategy))}
.sp-colf{flex:1 0 156px;font-size:11.5px}
.sp-colr.out{background:var(--warn-soft)}
.sp-colr.out .sp-colp{color:var(--warn)}
.sp-coltot{background:var(--bg-3);font-weight:600}
.sp-coltot .sp-colt,.sp-coltot .sp-colc{color:var(--ink);font-weight:600}
.sp-colin{display:block;width:100%;margin:5px 0 0;padding:5px 7px;font-family:var(--ui);
  font-size:11px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:5px}
.sp-coldet{margin:0 0 14px}
.sp-colst{list-style:none;margin:8px 0 0;padding:0}
.sp-colst li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-colsk{flex:0 0 138px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.sp-colsd{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-colslot{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}

/* ── 7.3. FIVE LINES, NONE OF THEM MEDIA ─────────────────────────────────
   The media column is the exhibit. Its cells keep their full size and their
   border when they are empty, because a cell that collapses hides the thing
   the reader came to see. The table lines up down the page, so it carries a
   floor width and scrolls sideways with a right-edge fade. */
.sp-nmwrap{position:relative;margin:0 0 12px}
.sp-nmwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:22px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--bg))}
.sp-nm{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.sp-nmr{display:flex;min-width:520px;border-top:1px solid var(--line)}
.sp-nmr:first-child{border-top:0}
.sp-nmhd{background:var(--bg-3)}
.sp-nmhd span{font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-nmr span{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.sp-nmt{flex:1 1 210px;min-width:170px}
.sp-nmt b{display:block;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink)}
.sp-nmt i{display:block;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ink-4);
  margin-top:2px}
.sp-nms{flex:0 0 72px;text-align:right;font-family:var(--mono)}
.sp-nmc{flex:0 0 82px;text-align:right;font-family:var(--mono);color:var(--money)}
.sp-nmm{flex:0 0 148px}
.sp-nmcell{display:inline-block;padding:4px 9px;border-radius:5px;font-family:var(--ui);
  font-size:11px}
.sp-nmcell.no{border:1px dashed var(--warn);color:var(--warn)}
.sp-nmcell.yes{border:1px solid var(--open);color:var(--open);background:var(--open-soft)}
.sp-nmr.ad{background:var(--open-soft)}
.sp-nmins{margin:0 0 12px}
.sp-nmins .sp-slab2{display:block;margin:0 0 7px}
.sp-nmctrl{margin:0 0 12px}
.sp-nmb{font-family:var(--ui);font-size:11px;line-height:1.3;padding:6px 11px;border-radius:999px;
  cursor:pointer;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line)}
.sp-nmb.on{color:var(--ink);border-color:var(--warn);background:var(--warn-soft)}
.sp-nmb.wide{flex:1 0 100%;text-align:left}
.sp-nmb.wide.on{border-color:var(--open);background:var(--open-soft)}
.sp-nmdet{margin:0 0 14px}
.sp-nmempty{list-style:none;margin:8px 0 0;padding:0}
.sp-nmempty li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.sp-nmet{flex:0 0 96px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--warn)}
.sp-nmed{flex:1 1 160px;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* The three survey marks. No band is drawn across them and the absence of a
   connecting bar is deliberate rather than a missing element. */
.sp-nmsurv{margin:0 0 14px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-nmsurv svg{display:block;width:100%;height:auto;margin:8px 0 10px;overflow:visible}
.sp-nmax{stroke:var(--line-2);stroke-width:1}
.sp-nmdot{fill:var(--sp,var(--acad-strategy))}
.sp-nmlb{fill:var(--ink-3);font-size:9px;font-family:var(--ui)}
.sp-nmsl{list-style:none;margin:0 0 8px;padding:0}
.sp-nmsl li{padding:7px 0;border-top:1px solid var(--line)}
.sp-nmsv{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.sp-nmsd{display:block;font-size:12px;line-height:1.55;color:var(--ink-4);margin-top:3px}
.sp-nmslot{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.sp-nmin{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}