/* STRATEGY AND PLANNING, chapter 5. What each line is for.

   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_c05.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 --p5. Ask for var(--stage), never for --p5 by name.      */

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 5 EXHIBITS.

     .sp-lay / .sp-lrow     spbrief, 5.1's two documents laid over one another
     .sp-vlines / .sp-vb    spvoc,   5.2's four vocabularies over one plan
     .sp-weeks / .sp-shb    spshape, 5.3's shape and the calendar under it
     .sp-hrules / .sp-hcom  sphalf,  5.3's commit then reveal
     .sp-crow / .sp-bsb     spcut,   5.4's cut bench

   Nothing here restates sp_kit.css or the four earlier chapter files. The
   slider row, the fiction note, the waiver, the reader mark, the refusal, the
   acceptance and the tally are declared there and reused by name.

   Both render-pass rules are obeyed. Nothing below is under 10px at any width,
   and every list whose columns have to line up down the list carries a floor
   width and scrolls sideways with a right-edge fade rather than reflowing.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-lay,.sim .sp-vlines,.sim .sp-weeks,.sim .sp-hrules,.sim .sp-clines,
.sim .sp-bbar,.sim .sp-vsw,.sim .sp-dec2
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── 5.1. TWO DOCUMENTS, LAID OVER ONE ANOTHER ───────────────────────────
   The reading is DOWN a column and ACROSS a row at the same time, so the
   grid cannot reflow. It carries a floor width and scrolls sideways. The
   empty row is marked rather than left blank, because a blank cell reads as
   a layout accident and a labelled one reads as a finding. */
.sp-bctrl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-lay{margin:0 0 10px;overflow-x:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
  mask-image:linear-gradient(90deg,#000 92%,transparent)}
.sp-lrow{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(auto-fit,minmax(120px,1fr));
  align-items:stretch;gap:6px;min-width:430px;margin-bottom:4px}
.sp-lhead{margin-bottom:6px}
.sp-lfld{display:flex;align-items:center;padding:8px 11px;font-size:12.5px;line-height:1.4;
  color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-lhead .sp-lfld{color:var(--ink-4);font-family:var(--ui);font-size:11px;background:none;
  border:0}
.sp-lh{display:block;width:100%;padding:8px 10px;font-family:var(--ui);font-size:11.5px;
  line-height:1.35;text-align:left;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
.sp-lh.on{background:var(--bg-3);border-color:var(--sp,var(--acad-strategy));color:var(--ink)}
.sp-lh:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-lc{display:flex;align-items:center;justify-content:center;padding:8px 10px;
  font-family:var(--ui);font-size:10.5px;line-height:1.35;text-align:center;
  border:1px solid var(--line);border-radius:8px}
.sp-h-yes{color:var(--money);background:var(--bg-3);border-color:var(--money)}
.sp-h-usu{color:var(--ink-3);background:var(--bg-2);border-style:dashed}
.sp-h-no{color:var(--ink-4);background:transparent;border-style:dotted}
.sp-lkey .sp-lfld{border-left-color:var(--warn);color:var(--ink)}
.sp-lkey .sp-h-no{color:var(--warn);border-color:var(--warn)}
.sp-lsrc{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sp-lsrc i{color:var(--ink-4);font-style:normal;display:block;margin-top:4px;
  font-family:var(--ui);font-size:11px}
.sp-strip{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-stlab{margin:0 0 6px;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-squote{margin:0 0 8px;padding:0 0 0 11px;font-size:13px;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--sp,var(--acad-strategy))}
.sp-sd{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-write{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-write .sp-label{flex:1 0 100%;margin:0}
.sp-wbtn{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:7px 11px;
  border-radius:999px;cursor:pointer;color:var(--ink-3);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-wbtn.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-wbtn:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-census{margin:0 0 10px;font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.sp-conc,.sp-price,.sp-narrow,.sp-v2d{margin:0 0 10px;font-size:12.5px;line-height:1.6;
  color:var(--ink-2)}
.sp-conc{padding:9px 12px;background:var(--bg-3);border:1px solid var(--line);
  border-left:3px solid var(--money);border-radius:0 8px 8px 0}
.sp-narrow{padding:9px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--sp,var(--acad-strategy));border-radius:0 8px 8px 0;color:var(--ink)}
.sp-v2d{padding:9px 12px;background:var(--bg-2);border:1px dashed var(--line-2);border-radius:8px}

/* ── 5.2. FOUR VOCABULARIES, ONE PLAN ────────────────────────────────────
   The role cell lines up down the list, because the reading is what changes
   in that column when the vocabulary switches. */
.sp-vsw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sp-vb{display:flex;flex-direction:column;gap:3px;font-family:var(--ui);font-size:11.5px;
  line-height:1.3;padding:7px 11px;border-radius:8px;cursor:pointer;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);text-align:left}
.sp-vb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-vb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-vm{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.sp-vd{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
/* scroll port for .sp-vrow2's floor width, see the note at .sp-rows in sp_c01.css */
.sp-vlines{list-style:none;margin:0 0 12px;padding:0 0 6px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
.sp-vrow2{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(120px,.8fr);
  align-items:center;gap:10px;min-width:330px;padding:8px 11px;margin-bottom:4px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0}
.sp-vrow2.on{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy))}
.sp-vlt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sp-vrole{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right}
.sp-vnone{color:var(--ink-4);font-family:var(--ui);font-size:11px}
.sp-vband{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-bbar{position:relative;height:16px;margin:8px 0 22px;background:var(--bg-3);
  border-radius:8px;overflow:visible}
.sp-bfill{position:absolute;top:0;bottom:0;background:var(--sp,var(--acad-strategy));
  border-radius:8px;opacity:.55}
.sp-bt{position:absolute;top:19px;font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.sp-bt1{left:40%;transform:translateX(-50%)}
.sp-bt2{left:60%;transform:translateX(-50%)}
.sp-bd{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sp-bw{margin:0;font-size:12px;line-height:1.55;color:var(--warn)}
.sp-stable,.sp-dyson{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.sp-dyson{padding:9px 12px;background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:8px}

/* ── 5.3a. THE SHAPE, AND THE CALENDAR UNDER IT ──────────────────────────
   Fifty two bars. They must stay bars at 360px, so the row scrolls sideways
   with a floor width rather than letting the bars fall under 2px wide. */
.sp-obs{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--money);border-radius:0 8px 8px 0}
.sp-od{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sp-ow2{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-shsw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sp-shsw .sp-label,.sp-shsw .sp-vd{flex:1 0 100%;margin:0}
.sp-shb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:7px 11px;
  border-radius:999px;cursor:pointer;color:var(--ink-3);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-shb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-shb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
/* .sp-weeks below carries BOTH `min-width:330px` and its own `overflow-x:auto`,
   which is a box that cannot scroll itself: the floor width wins and the bars
   spill out of .sp-cal instead. The port has to be on the parent. See the note
   at .sp-rows in sp_c01.css. */
.sp-cal{margin:0 0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.sp-weeks{display:flex;align-items:flex-end;gap:2px;height:96px;min-width:330px;padding:6px 8px;
  overflow-x:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:8px}
.sp-wk2{flex:1 0 4px;min-width:4px;background:var(--sp,var(--acad-strategy));border-radius:2px 2px 0 0}
.sp-woff{background:var(--line-2);height:3px}
.sp-wlab{margin:6px 0 0;font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}

/* ── 5.3b. COMMIT, THEN REVEAL ───────────────────────────────────────────
   The two rules are a two row comparison and the figure column lines up. */
.sp-hcom{margin:0 0 12px}
.sp-hcb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:8px 14px;
  border-radius:999px;cursor:pointer;color:var(--ink);background:var(--bg-3);
  border:1px solid var(--sp,var(--acad-strategy))}
.sp-hcb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-hband{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-hrules{list-style:none;margin:0 0 12px;padding:0}
.sp-hrow{display:grid;grid-template-columns:minmax(96px,.6fr) minmax(150px,1.4fr) 62px;
  align-items:center;gap:10px;min-width:334px;padding:8px 11px;margin-bottom:4px;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0}
.sp-hrow.on{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy))}
.sp-ht{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.sp-hd{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
.sp-hv{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-close2{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ── 5.4. THE CUT BENCH ──────────────────────────────────────────────────
   Four columns and the effect column is the one the exhibit is about, so it
   holds its width and the row scrolls. The empty cell is labelled rather
   than left blank, and a figure the reader typed carries a different colour
   from the one measured figure, permanently. */
.sp-dec2{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-dec2 .sp-label,.sp-dec2 .sp-vd,.sp-dec2 .sp-firstd{flex:1 0 100%;margin:0}
.sp-bsb{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:7px 11px;
  border-radius:999px;cursor:pointer;color:var(--ink-3);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-bsb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-bsb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-firstd{padding-top:8px;font-family:var(--ui);font-size:11.5px;line-height:1.5;
  color:var(--ink-3)}
.sp-cutins{margin:0 0 12px}
.sp-clines{margin:0 0 12px;overflow-x:auto}
.sp-crow{display:grid;grid-template-columns:minmax(160px,1.3fr) 54px minmax(120px,1fr) 60px;
  align-items:center;gap:10px;min-width:414px;padding:8px 11px;margin-bottom:4px;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0}
.sp-crow.sp-ccut{border-left-color:var(--warn);opacity:.82}
.sp-chead2{background:none;border:0;padding-bottom:0}
.sp-chead2 span{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.sp-clt{font-size:12.5px;line-height:1.4;color:var(--ink-2);text-align:left;background:none;
  border:0;padding:0;cursor:pointer}
.sp-clt:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-csp{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-ce{font-family:var(--ui);font-size:11px;line-height:1.4}
.sp-emeas{color:var(--money)}
.sp-eyours{color:var(--warn)}
.sp-eempty{color:var(--ink-4);font-style:italic}
.sp-cm{font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.sp-copen{grid-column:1/-1;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sp-copen p{margin:0 0 5px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.sp-etype{display:block;margin-top:6px;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sp-etype input{width:80px;margin-left:8px;padding:4px 6px;font-family:var(--mono);font-size:12px;
  color:var(--ink);background:var(--bg-3);border:1px solid var(--line);border-radius:6px}
.sp-ext,.sp-ag{font-family:var(--ui);font-size:11.5px;line-height:1.3;padding:7px 11px;
  margin:0 6px 6px 0;border-radius:999px;cursor:pointer;color:var(--ink-3);background:var(--bg-2);
  border:1px solid var(--line)}
.sp-ext.on{color:var(--ink);border-color:var(--warn);background:var(--bg-3)}
.sp-ext:focus-visible,.sp-ag:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));
  outline-offset:2px}
.sp-both{margin:0 0 10px;padding:9px 12px;font-size:12.5px;line-height:1.7;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px}