/* STRATEGY AND PLANNING, chapter 2. How much, in total.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE CHAPTER 2 EXHIBITS.

     .sp-ins / .sp-mets      spsix,   2.1's six routes to one total
     .sp-ladder / .sp-off2   sptask,  2.2's build up with a blocked rung
     .sp-eband / .sp-dem     spelast, 2.3's dial and its demolition

   All three are arithmetic benches, so all three share one input style: a
   labelled slider with the source of the number printed under it, because
   every value on these three exhibits has to say where it came from.

   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.
   That pattern is copied from sp_kit.css rather than invented again here.

   Nothing here restates sp_kit.css or sp_c01.css. The waiver, the tally, the
   refusal and the acceptance styles are chapter 1's and are reused rather than
   redeclared, because a reader meets the same four objects in both chapters.

   The hue token is --stage, which app.js sets on the page wrapper, with the
   book accent as the fallback for anywhere the wrapper has not painted.
   ══════════════════════════════════════════════════════════════════════════ */
.sim .sp-ins,.sim .sp-mets,.sim .sp-spread,.sim .sp-mdet,.sim .sp-ladder,.sim .sp-offers2,
.sim .sp-odet,.sim .sp-bandsw,.sim .sp-scale,.sim .sp-out,.sim .sp-qs,.sim .sp-edet,.sim .sp-dem
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── ONE INPUT STYLE FOR ALL THREE ───────────────────────────────────────
   The source line under each slider is the part that matters. Every number
   on these benches either came out of the advertiser's own records, off a
   published page, or out of the reader's head, and the exhibit has to say
   which every time. */
.sp-ins{margin:0 0 14px}
.sp-slab2{display:block;font-family:var(--ui);font-size:11.5px;line-height:1.4;
  color:var(--ink-3);margin:0 0 10px}
.sp-slab2 b{color:var(--ink);font-weight:600}
.sp-il{color:var(--ink-3)}
.sp-slab2 input[type=range]{display:block;width:100%;margin-top:6px;
  accent-color:var(--sp,var(--acad-strategy))}
.sp-isrc{display:block;margin-top:3px;font-size:10.5px;line-height:1.55;color:var(--ink-4)}
.sp-mark,.sp-mark2{margin:0 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sp,var(--acad-strategy))}
.sp-mark2{text-transform:none;letter-spacing:0;font-size:12px;line-height:1.6;
  color:var(--ink-2);padding:9px 12px;background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:8px}
.sp-mark2 b{color:var(--ink);font-weight:600}
.sp-how{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-3)}
.sp-how b{font-family:var(--ui);color:var(--ink)}
.sp-avg,.sp-which,.sp-pub,.sp-chk,.sp-one,.sp-off2{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-off2.on{background:var(--bg-3);color:var(--ink);border-color:var(--sp,var(--acad-strategy))}
.sp-avg:focus-visible,.sp-which:focus-visible,.sp-pub:focus-visible,.sp-chk:focus-visible,
.sp-one:focus-visible,.sp-off2:focus-visible
  {outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}

/* ── 2.1. SIX TOTALS ─────────────────────────────────────────────────────
   Name, bar, number. The bar is the comparison and the numbers have to line
   up down the right hand edge, so the row carries a floor width. The method
   that returns nothing gets no bar at all rather than a bar of zero, because
   a bar of zero is a total and this is an absence. */
/* scroll port for .sp-met's floor width, see the note at .sp-rows in sp_c01.css */
.sp-mets{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-met{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(110px,1.4fr) 84px;
  align-items:center;gap:10px;width:100%;min-width:354px;text-align:left;padding:8px 11px;
  margin-bottom:4px;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-met.sp-norm{border-left-color:var(--warn)}
.sp-met.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-met:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-mn{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sp-mbar{display:block;height:14px;background:var(--bg-3);border-radius:7px;overflow:hidden;
  position:relative}
.sp-mfill{display:block;height:100%;background:var(--sp,var(--acad-strategy));border-radius:7px}
.sp-nobar{display:block;font-family:var(--ui);font-size:10px;line-height:14px;color:var(--warn);
  text-align:center}
.sp-mv{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right}
.sp-met.sp-norm .sp-mv{color:var(--warn)}
.sp-spread{padding-top:10px;margin-bottom:12px;border-top:1px solid var(--line)}

/* ── 2.2. THE LADDER ─────────────────────────────────────────────────────
   Rungs down, with a break drawn where the build up stops. The break is a
   bar rather than a gap, because an empty space reads as a layout accident
   and a labelled bar reads as a finding. */
/* scroll port for .sp-lrung's 436px floor width, the widest row in the book and
   the one that lost 148px of its third column on a phone, see .sp-rows in sp_c01.css */
.sp-ladder{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-lrung{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(140px,1.4fr) 116px;
  align-items:center;gap:10px;min-width:436px;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-lrung.sp-blocked{border-left-color:var(--warn);opacity:.75}
.sp-lt2{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.sp-lf{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
.sp-lv{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-lv i{font-family:var(--ui);font-style:normal;font-size:10px;color:var(--ink-4)}
.sp-lrung.sp-blocked .sp-lv{color:var(--warn)}
.sp-gapbar{display:flex;align-items:center;justify-content:center;height:26px;margin:2px 0;
  border-top:2px dashed var(--warn);border-bottom:2px dashed var(--warn)}
.sp-gapbar span{font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn)}
.sp-offers2{margin:0 0 12px}
.sp-odet{margin-bottom:4px}

/* ── 2.3. THE DIAL ───────────────────────────────────────────────────────
   THE BAND IS THE POINT. Three published marks on one axis and the reader's
   own position drawn against them, so a value can never be read off this
   exhibit without the other two being visible beside it. */
.sp-bandsw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-scale{margin:0 0 4px}
.sp-eband{position:relative;height:22px;margin:0 0 8px;border-radius:11px;background:var(--bg-3);
  border:1px solid var(--line)}
.sp-emark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink-4)}
/* SCOPED TO .sp-eband, AND THIS IS THE FIX FOR A LIVE DEFECT RATHER THAN A
   TIDY-UP. Every chapter stylesheet in this book is loaded on every page, so an
   unscoped class name is a platform-wide name. `.sp-eyou` was unscoped here and
   means "your mark on the dial": absolutely positioned, three pixels wide, full
   height of the band. Chapters 6 and 7 use the same name for a PARAGRAPH of
   text, nine times between them. Chapter 6 happens to override enough of it to
   survive; chapter 7 does not, so on sp-c07-m3 the headline output paragraph
   was being drawn as a three pixel wide, 2,706 pixel tall absolutely positioned
   smear, at desktop and on a phone alike. Nothing threw, nothing rendered
   blank, and nineteen jsdom suites stayed green, because jsdom has no layout
   engine and a collision like this has no signature until something measures a
   box. Found by the real browser render pass. */
.sp-eband .sp-eyou{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;
  background:var(--sp,var(--acad-strategy))}
.sp-emarks{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.sp-emarks li{font-family:var(--ui);font-size:10.5px;line-height:1.5;color:var(--ink-4)}
.sp-emarks b{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.sp-out{padding-top:10px;margin-bottom:12px;border-top:1px solid var(--line)}
.sp-qs{margin:0 0 12px}
.sp-edet{margin-bottom:10px}
.sp-dem{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--line)}
.sp-demhead{margin:10px 0 6px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-demhead:first-child{margin-top:0}
.sp-demb{display:block;width:100%;text-align:left;padding:7px 11px;margin-bottom:3px;
  cursor:pointer;color:var(--ink-2);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(--warn);
  border-radius:0 8px 8px 0}
.sp-demb:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-demd{margin:0 0 6px;padding:9px 12px;font-size:12.5px;line-height:1.65;color:var(--ink-3);
  background:var(--bg-2);border-radius:8px}
.sp-var{padding:6px 11px;margin-bottom:3px;font-size:12.5px;line-height:1.55;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px}
.sp-var b{color:var(--ink);font-weight:600}
.sp-absent{margin-top:8px;padding:10px 13px;font-size:12.5px;line-height:1.65;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:0 8px 8px 0}