/* STRATEGY AND PLANNING, chapter 1. The objective nobody wrote down.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE FOUR CHAPTER 1 EXHIBITS.

     .sp-fmts / .sp-fdet      spforms, 1.1's collection of fifteen
     .sp-rows / .sp-bars      sprate,  1.1's two populations on one document
     .sp-rcl  / .sp-rule      sproute, 1.2's router with its rule on its face
     .sp-specs / .sp-pins     spobj,   1.3's validator

   Both render-pass rules are obeyed. Nothing below is under 10px at any width,
   and every list whose columns have to line up 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 a second time.

   Nothing here restates sp_kit.css and nothing mints a colour or a scale. 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-fmts,.sim .sp-fdet,.sim .sp-rows,.sim .sp-rdet,.sim .sp-meas,.sim .sp-rule,
.sim .sp-claims,.sim .sp-cdet,.sim .sp-specs,.sim .sp-pins,.sim .sp-verd,.sim .sp-pindet,
.sim .sp-filters,.sim .sp-loosen,.sim .sp-sides,.sim .sp-count,.sim .sp-tally2
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── SHARED IN THIS CHAPTER ──────────────────────────────────────────────
   One waiver style, one tally style and one refusal style, because all four
   exhibits either waive a band, count something for the reader, or refuse. */
.sp-waiver{margin:0 0 12px;padding:9px 12px;font-family:var(--ui);font-size:11px;
  line-height:1.6;color:var(--ink-4);background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:8px}
.sp-tally{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sp-tally b{color:var(--ink);font-weight:600}
.sp-verdict{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.sp-refuse{margin:8px 0 0;padding:10px 13px;font-size:12.5px;line-height:1.6;
  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}
.sp-refuse b{color:var(--warn);font-weight:600}
.sp-takes{margin:8px 0 0;padding:10px 13px;font-size:12.5px;line-height:1.6;
  color:var(--ink-2);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-takes b{color:var(--ink);font-weight:600}
.sp-base{margin:8px 0 0;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}
.sp-interest{margin:8px 0 0;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}
.sp-count,.sp-tally2{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* One control-row style and one pill style for all four. */
.sp-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-filt,.sp-cmp,.sp-waste,.sp-flip,.sp-padd{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-filt.on,.sp-cmp.on,.sp-waste.on{background:var(--bg-3);color:var(--ink);
  border-color:var(--sp,var(--acad-strategy))}
.sp-filt:focus-visible,.sp-cmp:focus-visible,.sp-waste:focus-visible,
.sp-flip:focus-visible,.sp-padd:focus-visible
  {outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}

/* ── 1.1a. FIFTEEN FORMATS ───────────────────────────────────────────────
   Three columns that have to line up down the list, because the point is
   reading the state column straight down. So the row carries a floor width
   and the list scrolls sideways rather than reflowing. */
.sp-fmts{list-style:none;margin:0;padding:0 0 6px;max-height:none;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-fmt{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(96px,1fr) 132px;
  align-items:center;gap:10px;width:100%;min-width:394px;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-fmt.sp-gone{border-left-color:var(--warn)}
.sp-fmt.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-fmt:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-fa{font-size:13px;line-height:1.35;color:var(--ink);font-weight:600}
.sp-fp{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sp-fs{font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.sp-fmt.sp-gone .sp-fs{color:var(--warn)}
.sp-fdet{margin-top:12px}
.sp-fh{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.sp-fq{margin:0 0 8px;padding:10px 13px;font-size:13px;line-height:1.65;color:var(--ink-2);
  background:var(--bg-2);border-left:3px solid var(--sp,var(--acad-strategy));
  border-radius:0 8px 8px 0}
.sp-fdead{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-4)}
.sp-fx{margin:0 0 8px;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}
.sp-fread{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.8;color:var(--ink-3)}

/* ── 1.1b. TWO POPULATIONS, ONE DOCUMENT ─────────────────────────────────
   The two bars are the whole exhibit, so they are the only place in this file
   with two hues, and the second one is the warning colour because it is the
   side that disagrees. */
.sp-sides{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.sp-side{font-family:var(--ui);font-size:11.5px;line-height:1.4;color:var(--ink-3)}
/* THE FLOOR WIDTH NEEDS A SCROLL PORT TO SIT IN, AND TWELVE LISTS IN THIS BOOK
   WERE GIVEN THE FIRST AND NOT THE SECOND. `.sp-row` below carries
   `min-width:388px` on exactly the argument written at .sp-fmts above: the row
   holds its columns rather than reflowing. A 360px phone gives this list 288px.
   Without `overflow-x:auto` here the row simply escapes the list, and is then
   cut off by `div.sim{overflow-x:hidden}` further up, so the third column is
   not reachable by scrolling, by swiping or by any other means. It is gone.
   Same treatment as .sp-fmts, which had it and was fine. Found by the real
   browser render pass at 360px. */
.sp-rows{list-style:none;margin: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-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,1.4fr) 104px;
  align-items:center;gap:10px;width:100%;min-width:388px;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-radius:8px}
.sp-row.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-row:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-rq{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.sp-bars{display:block}
.sp-bar{display:block;height:14px;margin:2px 0;border-radius:7px;font-family:var(--mono);
  font-size:10px;line-height:14px;color:var(--bg-1);text-align:right;padding-right:4px;
  min-width:22px;box-sizing:border-box}
.sp-bm{background:var(--sp,var(--acad-strategy))}
.sp-ba{background:var(--warn)}
.sp-gap{font-family:var(--ui);font-size:10.5px;color:var(--ink-4);text-align:right}
.sp-rdet{margin-top:12px}
.sp-rh{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.sp-rn{margin:0 0 6px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.sp-rn b{color:var(--ink);font-weight:600}
.sp-caveat{margin:0;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}
.sp-wdet{margin-top:4px}

/* ── 1.2. THE ROUTER, WITH ITS RULE ON ITS FACE ──────────────────────────
   The rule is a list rather than a panel, because a reader has to be able to
   see a test go grey the moment they waive it. */
.sp-meas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;
  margin:0 0 12px}
.sp-meas-b{text-align:left;padding:9px 11px;cursor:pointer;color:inherit;font:inherit;
  background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--line-2);
  border-radius:0 0 8px 8px}
.sp-meas-b.on{background:var(--bg-3);border-top-color:var(--sp,var(--acad-strategy))}
.sp-meas-b:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-mt{display:block;font-size:13px;line-height:1.35;color:var(--ink);font-weight:600}
.sp-mw{display:block;margin-top:3px;font-family:var(--ui);font-size:11px;line-height:1.55;
  color:var(--ink-4)}
.sp-rule{list-style:none;margin:0 0 12px;padding:0}
.sp-rl{padding:6px 11px;margin-bottom:3px;font-family:var(--ui);font-size:11.5px;
  line-height:1.5;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);
  border-radius:6px}
.sp-rl.sp-rlw{color:var(--ink-4);border-style:dashed}
.sp-waived{margin-left:6px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn)}
.sp-loosen{margin:0 0 12px}
.sp-loose{display:block;font-family:var(--ui);font-size:11.5px;line-height:1.9;color:var(--ink-3)}
/* scroll port for .sp-rcl's floor width, see the note at .sp-rows */
.sp-claims{list-style:none;margin: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-rcl{display:grid;grid-template-columns:minmax(200px,3fr) 116px;align-items:center;gap:10px;
  width:100%;min-width:340px;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-rcl.sp-orphan{border-left-color:var(--warn)}
.sp-rcl.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-rcl:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-cq{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.sp-cs{font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.sp-cdet{margin-top:12px}
.sp-ch{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.sp-res{list-style:none;margin:0;padding:0}
.sp-res li{padding:5px 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
.sp-res li:last-child{border-bottom:0}
.sp-res .sp-yes b{color:var(--ink);font-weight:600}
.sp-res .sp-no b{color:var(--warn);font-weight:600}

/* ── 1.3. THE VALIDATOR ──────────────────────────────────────────────────
   The specimen list and the pin row, and the pin row is the control the
   reader spends longest on, so it is the only thing here with a full width
   affordance beside it. */
.sp-specs{list-style:none;margin:0 0 12px;padding:0}
.sp-spec{display:grid;grid-template-columns:1fr 56px;align-items:center;gap:10px;width:100%;
  min-width:280px;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-spec.sp-full{border-left-color:var(--sp,var(--acad-strategy))}
.sp-spec.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-spec:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-st2{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.sp-sn{font-family:var(--mono);font-size:11px;color:var(--ink-4);text-align:right}
.sp-pins{margin:0 0 12px}
.sp-pin{display:flex;flex-wrap:wrap;align-items:center;gap:8px;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-pin.sp-have{border-left-color:var(--sp,var(--acad-strategy))}
.sp-pt{flex:1 1 150px;text-align:left;padding:0;cursor:pointer;color:inherit;font:inherit;
  background:none;border:0}
.sp-pt:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-pn{display:block;font-size:12.5px;line-height:1.35;color:var(--ink);font-weight:600}
.sp-ps{display:block;margin-top:2px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.sp-pin.sp-have .sp-ps{color:var(--sp,var(--acad-strategy))}
.sp-verd{margin:0 0 12px}
.sp-sh{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.sp-kind{margin:0 0 8px;font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.sp-miss{list-style:none;margin:8px 0 0;padding:0}
.sp-miss li{padding:6px 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-radius:6px}
.sp-miss b{color:var(--warn);font-weight:600}
.sp-pindet{padding-top:10px;border-top:1px solid var(--line)}
.sp-ph{margin:0 0 6px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sp-ph b{color:var(--ink);font-weight:600}
.sp-seen{margin:0;padding:10px 13px;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--sp,var(--acad-strategy));border-radius:0 8px 8px 0}