/* STRATEGY AND PLANNING, chapter 4. What to say, and whether it decides where
   it runs.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 4 EXHIBITS.

     .sp-items / .sp-counts   spwritten, 4A's thirteen marked objects
     .sp-objs / .sp-step2     spdays,    4B's three days
     .sp-levers / .sp-agg     spmult,    4.1's two published multipliers
     .sp-ads / .sp-twoway     sptypo,    4.2's two classifications of six
     .sp-subs / .sp-marks     sparg,     4.3's channel argument bench
     .sp-joint / .sp-deadf    spjoint,   4.3's one joint and its dead field

   Nothing here restates sp_kit.css or the three earlier chapter files. The
   slider, the band, the refusal, the acceptance, the tally, the fiction note
   and the waiver are declared there and reused.

   ── ONE STYLE THIS CHAPTER ADDS, AND IT CARRIES AN OBLIGATION ─────────────

   `.sp-illus` is the declaration that an exhibit illustrates rather than
   teaches, and `.sp-counts` is the mitigation that goes with it. The two
   orientation exhibits are the only components in this book that carry them,
   and the counts row is styled to stay visible above a filtered list so that
   filtering can never hide the shape of the claim.

   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 rather than reflowing.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-items,.sim .sp-counts,.sim .sp-objs,.sim .sp-step2,.sim .sp-levers,.sim .sp-ads,
.sim .sp-subs,.sim .sp-marks,.sim .sp-joint,.sim .sp-wdet2,.sim .sp-daydet
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── THE DECLARATION AND ITS MITIGATION ──────────────────────────────────
   Said on the face of both orientation exhibits, every time. The counts row
   sits above the filter and is never affected by it. */
.sp-illus{margin:0 0 10px;padding:8px 11px;font-family:var(--ui);font-size:11.5px;line-height:1.55;
  color:var(--ink-3);background:var(--bg-2);border:1px dashed var(--line-2);border-radius:8px}
.sp-counts{margin:0 0 10px;padding:9px 11px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:8px}
.sp-counts .sp-label{margin:0 0 6px}
.sp-cnt{display:inline-block;margin:0 12px 4px 0;font-family:var(--ui);font-size:11.5px;
  line-height:1.4;color:var(--ink-3)}
.sp-cnt b{font-family:var(--mono);font-size:14px;color:var(--ink);margin-right:4px}
.sp-mfilt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}

/* ── 4A. THIRTEEN OBJECTS, MARKED ────────────────────────────────────────
   The marker sits in its own column on the right so the thirteen can be read
   down that column alone, which is the reading the exhibit exists for. */
/* "read down that column alone" is the reading the note above names, and on a
   phone that column was cut off. Scroll port for .sp-itb's floor width, see
   the note at .sp-rows in sp_c01.css */
.sp-items{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-item{margin-bottom:4px}
.sp-itb{display:grid;grid-template-columns:minmax(180px,1fr) 118px;align-items:center;gap:10px;
  width:100%;min-width:308px;text-align:left;padding:8px 11px;cursor:pointer;color:inherit;
  font:inherit;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-itb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-itt{font-size:12.5px;line-height:1.45;color:var(--ink)}
.sp-itm{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4);text-align:right}
.sp-m-abs>.sp-itb,.sp-item.sp-m-abs>.sp-itb{border-left-color:var(--warn)}
.sp-m-doc>.sp-itb{border-left-color:var(--sp,var(--acad-strategy))}
.sp-itd{margin:0;padding:9px 12px;font-size:12.5px;line-height:1.65;color:var(--ink-3);
  background:var(--bg-2);border-radius:0 0 8px 8px}
.sp-wdet2{margin:0 0 4px}
.sp-tests,.sp-doors{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-tests:focus-visible,.sp-doors:focus-visible
  {outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-tests2{list-style:none;margin:0 0 10px;padding:0}
.sp-tests2 li{padding:8px 11px;margin-bottom:3px;font-size:12.5px;line-height:1.6;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0}
.sp-tests2 b{font-family:var(--mono);color:var(--ink);margin-right:4px}
.sp-tests2 i{font-style:normal;font-weight:600;color:var(--ink-2)}
.sp-tfail{border-left-color:var(--warn)}
.sp-tpass{border-left-color:var(--sp,var(--acad-strategy))}

/* ── 4B. THREE DAYS ──────────────────────────────────────────────────────
   Seven objects down, three columns across, and the marker column is the
   one that has to line up. An object that does not exist yet is dimmed
   rather than hidden, because the reader has to see it arrive. */
.sp-step2{padding:10px 12px;margin:0 0 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
/* scroll port for .sp-orow's 430px floor width, which lost 142px of its third
   column on a phone, see the note at .sp-rows in sp_c01.css */
.sp-objs{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-orow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1.2fr) 150px;
  align-items:center;gap:10px;min-width:430px;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-orow.sp-m-abs{border-left-color:var(--warn)}
.sp-orow.sp-m-doc{border-left-color:var(--sp,var(--acad-strategy))}
.sp-orow.sp-notyet{opacity:.45}
.sp-ot{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.sp-ol{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-3)}
.sp-om{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4);text-align:right}
.sp-ow{grid-column:1 / -1;margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.sp-daydet{margin:0 0 4px}
.sp-scrub{display:block;width:100%;margin-top:6px;accent-color:var(--sp,var(--acad-strategy))}

/* ── 4.1. TWO LEVERS ─────────────────────────────────────────────────────
   Bars against one scale, so the comparison the module is about is a
   length rather than a sentence. The creative row is marked because it is
   the one factor that is never split, which is the whole objection. */
.sp-objects{list-style:none;margin:0 0 12px;padding:0}
.sp-obj{margin-bottom:4px}
.sp-objb{display:block;width:100%;text-align:left;padding:8px 11px;cursor:pointer;color:var(--ink);
  font-family:var(--text);font-size:12.5px;line-height:1.45;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--sp,var(--acad-strategy));
  border-radius:0 8px 8px 0}
.sp-objb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-emarks2{margin:0 0 6px;padding:0 12px;font-family:var(--ui);font-size:11.5px;line-height:1.5;
  color:var(--ink-3)}
.sp-emarks2 b{font-family:var(--mono);font-size:13px;color:var(--ink);margin-right:5px}
/* scroll port for .sp-lev's floor width, see the note at .sp-rows in sp_c01.css */
.sp-levers{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-lev{display:grid;grid-template-columns:minmax(150px,1fr) minmax(110px,1.6fr) 52px;
  align-items:center;gap:10px;min-width:334px;padding:7px 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-lev.sp-star{border-left-color:var(--sp,var(--acad-strategy))}
.sp-lvt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sp-lvb{display:block;height:14px;background:var(--bg-3);border-radius:7px;overflow:hidden}
.sp-lvf{display:block;height:100%;background:var(--ink-4);border-radius:7px}
.sp-lev.sp-star .sp-lvf{background:var(--sp,var(--acad-strategy))}
.sp-lvv{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-multdet{margin:0 0 10px}
.sp-apply{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 dashed var(--line-2)}
.sp-apply:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}

/* ── 4.2. THE SAME SIX, CLASSIFIED TWICE ─────────────────────────────────
   Two rows of choices under each advertisement, because the reader has to
   see that they are answering two separate questions about one object. The
   verdict line under each card is the exhibit and it appears only once
   both answers exist. */
.sp-ads{list-style:none;margin:0 0 14px;padding:0}
.sp-ad{padding:10px 12px;margin-bottom:8px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-ad.sp-agree{border-left-color:var(--sp,var(--acad-strategy))}
.sp-ad.sp-differ{border-left-color:var(--warn)}
.sp-adt{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink);font-weight:600}
.sp-twoway{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.sp-adv{margin:6px 0 0;padding-top:7px;font-size:12px;line-height:1.6;color:var(--ink-3);
  border-top:1px solid var(--line)}
.sp-adv b{color:var(--ink);font-weight:600}
.sp-typodet{padding-top:10px;margin-bottom:12px;border-top:1px solid var(--line)}
.sp-lib{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--line)}

/* ── 4.3, FIRST COMPONENT. ONE JOINT, AND A DEAD FIELD ───────────────────
   The joint is drawn as a column so the reader travels down it and stops.
   The dead field sits between the rung above and the control, because the
   whole finding is that the control is dead BECAUSE the field takes no
   input. It is styled as an ordinary field on purpose: a field drawn as
   broken would be telling the reader the answer. */
.sp-joint{padding:12px;margin:0 0 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px}
.sp-jf,.sp-jt{margin:0;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-jt{margin-top:10px;opacity:.5}
.sp-deadf{display:block;margin:10px 0;font-family:var(--ui);font-size:11.5px;line-height:1.4;
  color:var(--ink-3)}
.sp-deadf input[type=text],.sp-slab2 input[type=text]{display:block;width:100%;margin-top:5px;
  padding:8px 10px;font-family:var(--text);font-size:12.5px;line-height:1.5;color:var(--ink);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px}
.sp-adv2{display:block;width:100%;padding:9px 11px;margin:0;cursor:pointer;font-family:var(--ui);
  font-size:12px;color:var(--ink-4);background:var(--bg-3);border:1px dashed var(--line-2);
  border-radius:8px}
.sp-adv2:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-jdet{margin:0 0 12px}
.sp-convs{margin:0 0 12px}
.sp-rec,.sp-load{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-rec:focus-visible,.sp-load:focus-visible
  {outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-loaddet{margin:0 0 4px}
.sp-io{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin:0 0 10px}
.sp-iol{list-style:none;margin:0;padding:0}
.sp-iol li{padding:6px 10px;margin-bottom:3px;font-size:12px;line-height:1.5;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px}

/* ── 4.3, SECOND COMPONENT. THE CHANNEL ARGUMENT BENCH ───────────────────
   Three panels, styled as three blocks with a heading each, because a
   reader shown only the third has been handed a set of rules with no
   account of what they replace.

   THE MARK BUTTONS ARE DELIBERATELY NOT NUMBERED AND NOT ORDERED IN A ROW
   WITH ARROWS. They wrap, they toggle, and an active one looks the same as
   any other active one. A build that numbered them would have turned four
   tests into four steps, which the specification forbids in writing. */
/* scroll port for .sp-subb's floor width, see the note at .sp-rows in sp_c01.css */
.sp-subs{list-style:none;margin:0 0 14px;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-sub{margin-bottom:4px}
.sp-subb{display:grid;grid-template-columns:minmax(180px,1fr) 96px;align-items:center;gap:10px;
  width:100%;min-width:286px;text-align:left;padding:8px 11px;cursor:pointer;color:inherit;
  font:inherit;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-subb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-subt{font-size:12.5px;line-height:1.45;color:var(--ink)}
.sp-subg{font-family:var(--ui);font-size:10.5px;color:var(--ink-4);text-align:right}
.sp-linesw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sp-linesw .sp-label{flex:1 0 100%;margin:0}
.sp-linesw .sp-filt i{font-style:normal;color:var(--sp,var(--acad-strategy))}
.sp-marks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-markb{font-family:var(--ui);font-size:12px;line-height:1.3;padding:8px 13px;cursor:pointer;
  color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.sp-markb.on{background:var(--bg-3);color:var(--ink);border-color:var(--sp,var(--acad-strategy))}
.sp-markb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-markdet{margin:0 0 12px}
.sp-mk{padding:11px 12px;margin-bottom:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-mkt{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sp,var(--acad-strategy))}
.sp-mkfor{margin:8px 0 0;padding-top:7px;font-size:11.5px;line-height:1.6;color:var(--ink-4);
  border-top:1px solid var(--line)}
.sp-swapl{margin:0 0 6px;padding:8px 11px;font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--ink-2);background:var(--bg-3);border-radius:6px}
.sp-count2{padding-top:10px;margin-bottom:10px;border-top:1px solid var(--line)}
.sp-meet{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-meet:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-meetdet{margin:0}