/* STRATEGY AND PLANNING, chapter 6. The sum nobody owns.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 6 EXHIBITS.

     .sp-cvbox / .sp-dup     spcurve, 6.1's fitted range and the three shapes
     .sp-cite / .sp-arw      spcite,  6.2's chain and the arrow nothing carries
     .sp-agr / .sp-agparts   spaggr,  6.3's aggregation bench
     .sp-per / .sp-pname     spperim, 6.4's perimeter and the dead naming control

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

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

   `.sp-dead` is the naming control at 6.4 when the word does not apply, and
   `.sp-perdead` is what it says instead. A dead control has to LOOK dead
   without looking broken, because the teaching is that the arithmetic works
   and the word does not. So it keeps its shape and loses its colour, and the
   break label sits beside the refusal in the same treatment chapter 4 uses.

   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 rather than reflowing.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-cvbox,.sim .sp-cite,.sim .sp-agr,.sim .sp-per,.sim .sp-perbar,.sim .sp-dupl
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── 6.1. THE FITTED RANGE, AND THREE SHAPES ─────────────────────────────
   The chart is the argument. The shaded rectangle is the band and it is the
   only place the exhibit prints a figure from. */
.sp-cvbox{margin:0 0 10px;padding:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-cvbox svg{display:block;width:100%;height:auto}
.sp-cvfit{fill:var(--sp,var(--acad-strategy));opacity:.14}
.sp-cvax{stroke:var(--line-2);stroke-width:1}
.sp-cv100{stroke:var(--warn);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.sp-cvline{fill:none;stroke:var(--ink-4);stroke-width:1.4;opacity:.55}
.sp-cvline.on{stroke:var(--sp,var(--acad-strategy));stroke-width:2.4;opacity:1}
.sp-cvnow{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
/* 9px is the floor on this platform and this axis label was drawn at 8. A
   diagram label a phone reader cannot resolve is a defect this platform has
   shipped before, so the number is raised rather than argued about. Found by
   the real browser render pass, which measures the smallest rendered glyph on
   every shot. */
.sp-cvlab{fill:var(--ink-4);font-size:9px;font-family:var(--ui)}
.sp-cvins{margin:0 0 10px}
.sp-cvforms{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-cvforms .sp-label,.sp-cvforms .sp-vd{flex:1 0 100%;margin:0}
.sp-cvfb{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-cvfb.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-cvfb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-cvdet{margin:0 0 12px}
.sp-cvprov{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-cvprovl{list-style:none;margin:8px 0 8px;padding:0}
.sp-cvt{display:block;width:100%;text-align:left;padding:7px 10px;margin-bottom:4px;
  font-family:var(--ui);font-size:11.5px;line-height:1.4;color:var(--ink-2);background:var(--bg-3);
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
.sp-cvt:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-cvd{margin:0 0 8px;padding:0 10px 4px;font-size:12px;line-height:1.6;color:var(--ink-3)}
.sp-dup{margin:0 0 4px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
/* scroll port for .sp-duprow's floor width, see the note at .sp-rows in sp_c01.css */
.sp-dupl{list-style:none;margin:8px 0 0;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-duprow{display:grid;grid-template-columns:minmax(150px,1fr) 116px;gap:6px 10px;
  min-width:300px;padding:8px 11px;margin-bottom:4px;background:var(--bg-3);
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-dupt{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.sp-dupm{font-family:var(--ui);font-size:10.5px;line-height:1.4;text-align:right;color:var(--ink-4)}
.sp-dupd{grid-column:1/-1;font-size:12px;line-height:1.6;color:var(--ink-3)}
.sp-m-doc{color:var(--ink-2)}
.sp-m-evi{color:var(--money)}
.sp-m-cnv{color:var(--warn)}

/* ── 6.2. THE CHAIN, AND THE ARROW NOTHING CARRIES ───────────────────────
   The gap is the exhibit, so the arrow that carries nothing is drawn
   differently from the four that do, before it is pressed rather than after. */
/* scroll port for .sp-cbtn's floor width, see the note at .sp-rows in sp_c01.css */
.sp-cite{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-clink{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-clink.on{border-left-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-cbtn{display:grid;grid-template-columns:62px minmax(150px,1fr) 84px;align-items:center;
  gap:10px;width:100%;min-width:326px;padding:9px 11px;text-align:left;background:none;border:0;
  cursor:pointer}
.sp-cbtn:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-cyear{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.sp-cwhat{font-size:12.5px;line-height:1.4;color:var(--ink)}
.sp-cmk{font-family:var(--ui);font-size:10.5px;line-height:1.4;text-align:right}
.sp-csaid{margin:0 11px 6px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sp-cbase{margin:0 11px 10px;font-size:12px;line-height:1.6;color:var(--ink-3)}
.sp-arwrap{margin:0 0 4px;padding-left:16px}
.sp-arw{font-family:var(--ui);font-size:10.5px;line-height:1.3;padding:5px 10px;
  border-radius:999px;cursor:pointer;color:var(--ink-4);background:var(--bg-2);
  border:1px dashed var(--line-2)}
.sp-arw.sp-arwgap{color:var(--warn);border-color:var(--warn);border-style:solid}
.sp-arw.on{background:var(--bg-3);color:var(--ink-2)}
.sp-arw:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-arwd{margin:6px 0 8px;padding:8px 11px;font-size:12px;line-height:1.6;color:var(--ink-3);
  background:var(--bg-2);border-left:2px solid var(--line-2)}
.sp-arwd.sp-gapd{color:var(--ink);border-left-color:var(--warn);background:var(--bg-3)}
.sp-citedet{margin:0 0 12px}
.sp-slot{margin:0 0 10px;padding:9px 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border:1px dashed var(--warn);border-radius:8px}
.sp-asm{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-asm:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-after{margin:0;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-afterl{list-style:none;margin:8px 0 0;padding:0}
.sp-arow2{display:grid;grid-template-columns:62px minmax(180px,1fr);align-items:start;gap:10px;
  min-width:262px;padding:6px 0;border-top:1px solid var(--line)}

/* ── 6.3. THE AGGREGATION BENCH ──────────────────────────────────────────
   Every seller carries its unit and its date in its own columns, because the
   reading is that the units are not the same kind of thing. */
/* scroll port for .sp-agrow's floor width, see the note at .sp-rows in sp_c01.css */
.sp-agr{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-agrow{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,.9fr);gap:5px 10px;
  min-width:300px;padding:9px 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-agrow.on{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy))}
.sp-agt{font-size:12.5px;line-height:1.4;color:var(--ink);text-align:left;background:none;
  border:0;padding:0;cursor:pointer;font-weight:600}
.sp-agt:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-agv{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}
.sp-agu,.sp-agsrc{grid-column:1/-1;font-family:var(--ui);font-size:11px;line-height:1.5;
  color:var(--ink-4)}
.sp-agpub{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-agpub:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-agout{margin:0 0 12px}
.sp-agparts{list-style:none;margin:0 0 10px;padding:0}
.sp-agparts li{padding:6px 0;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  border-top:1px solid var(--line)}
.sp-agparts i{display:block;font-style:normal;font-family:var(--ui);font-size:11px;
  color:var(--ink-4)}
.sp-agass{display:flex;flex-wrap:wrap;gap:6px}
.sp-agass .sp-label,.sp-agass .sp-eyou,.sp-agass .sp-bd{flex:1 0 100%;margin:0 0 4px}
.sp-agb,.sp-agw{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-agb.on,.sp-agw.on{color:var(--ink);border-color:var(--sp,var(--acad-strategy));
  background:var(--bg-3)}
.sp-agb:focus-visible,.sp-agw:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));
  outline-offset:2px}

/* ── 6.4. THE PERIMETER, AND THE CONTROL THAT DIES ───────────────────────
   The dead control keeps its shape and loses its colour, because the teaching
   is that the arithmetic works and the word does not. */
.sp-perband{margin:0 0 12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.sp-perbar{position:relative;height:18px;margin:8px 0 4px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.sp-perfill{position:absolute;top:0;bottom:0;left:0;background:var(--sp,var(--acad-strategy));
  opacity:.6}
.sp-perlab{display:flex;justify-content:space-between;margin:0 0 8px;font-family:var(--ui);
  font-size:10.5px;color:var(--ink-4)}
.sp-in2{color:var(--sp,var(--acad-strategy))}
.sp-out2{color:var(--warn)}
/* scroll port for .sp-perow's floor width, see the note at .sp-rows in sp_c01.css */
.sp-per{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-perow{display:grid;grid-template-columns:minmax(160px,1fr) 128px;align-items:center;gap:10px;
  min-width:308px;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-perow.on{background:var(--bg-3)}
.sp-perow.sp-perin.on{border-left-color:var(--sp,var(--acad-strategy))}
.sp-perow.sp-perout.on{border-left-color:var(--warn)}
.sp-pert{font-size:12.5px;line-height:1.4;color:var(--ink);text-align:left;background:none;
  border:0;padding:0;cursor:pointer}
.sp-pert:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-pmk{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4);text-align:right}
.sp-pname{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-pname.sp-dead{color:var(--ink-4);background:var(--bg-2);border-color:var(--line-2);
  border-style:dashed}
.sp-pname:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-perdet{margin:0}
.sp-perdead{margin:0 0 10px;padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--warn);border-radius:8px}
.sp-perdead b{color:var(--warn)}
.sp-brklab{display:block;margin-bottom:6px;font-family:var(--ui);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}