/* STRATEGY AND PLANNING, chapter 3. The audience you have to author.

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

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAPTER 3 EXHIBITS.

     .sp-parts / .sp-said     spauth, 3.1's one-way conversion
     .sp-alloc / .sp-nodenom  sploss, 3.2's allocation that will not balance
     .sp-dist / .sp-outside   spbase, 3.2's buyer base distribution
     .sp-stack / .sp-vint     spsize, 3.3's three sources and three vintages

   Nothing here restates sp_kit.css, sp_c01.css or sp_c02.css. The slider, the
   band, the refusal, the acceptance, the tally and the fiction note are all
   declared in those three files and are reused rather than redeclared, because
   a reader meets the same objects in four chapters running.

   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.

   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-parts,.sim .sp-said,.sim .sp-adet,.sim .sp-alloc,.sim .sp-allocdet,
.sim .sp-dist,.sim .sp-distdet,.sim .sp-stack,.sim .sp-sizedet
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── 3.1. THE DESCRIPTION, AND WHAT IS MADE OF IT ────────────────────────
   Four groups of buttons, because the description has four parts and a
   reader has to see that each part is a separate decision. The composed
   sentence sits under them and is marked as the reader's own. */
.sp-parts{margin:0 0 12px}
.sp-part{margin:0 0 10px}
.sp-part .sp-label{margin:0 0 5px}
.sp-said{padding-top:10px;margin-bottom:12px;border-top:1px solid var(--line)}
.sp-lostl{list-style:none;margin:8px 0 0;padding:0}
.sp-lost{padding:6px 11px;margin-bottom:3px;font-size:12.5px;line-height:1.5;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:0 6px 6px 0}
.sp-adet{margin:0 0 12px}
.sp-hand,.sp-back,.sp-idx{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-hand{color:var(--ink);border-color:var(--sp,var(--acad-strategy))}
.sp-back{border-style:dashed;color:var(--ink-4)}
.sp-hand:focus-visible,.sp-back:focus-visible,.sp-idx:focus-visible
  {outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}

/* ── 3.2a. THE LOSS BUDGET ───────────────────────────────────────────────
   Four rows that have to line up down the right hand edge, because the
   comparison is between a row with a figure and a row without one. The row
   with no figure is marked rather than left blank: an empty cell reads as a
   layout accident and a labelled one reads as a finding. */
/* scroll port for .sp-arow's floor width, see the note at .sp-rows in sp_c01.css */
.sp-alloc{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-arow{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(130px,1.3fr) 78px;
  align-items:center;gap:10px;min-width:368px;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-arow.sp-nodenom{border-left-color:var(--warn)}
.sp-arow.sp-atot{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy))}
.sp-at{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.sp-af{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
.sp-av{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-arow.sp-nodenom .sp-av,.sp-arow.sp-nodenom .sp-af{color:var(--warn)}
.sp-allocdet{margin:0 0 10px}
.sp-est{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-est:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}

/* ── 3.2b. THE BUYER BASE ────────────────────────────────────────────────
   Four tiers, a bar each, and a column saying inside or outside the rule.
   The inside and outside reading is the whole exhibit, so that column has a
   fixed width and the row scrolls rather than letting a long tier name push
   it out of line. */
.sp-rulesw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-rulesw .sp-label{flex:1 0 100%;margin:0}
/* "the row scrolls rather than letting a long tier name push it out of line" is
   what the note above says, and the port that lets it scroll was missing, see
   the note at .sp-rows in sp_c01.css */
.sp-dist{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-drow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(90px,1.2fr) 48px 96px;
  align-items:center;gap:10px;min-width:404px;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-drow.sp-in{border-left-color:var(--sp,var(--acad-strategy))}
.sp-drow.sp-outside{opacity:.7;border-left-style:dashed}
.sp-dt2{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sp-dbar2{display:block;height:12px;background:var(--bg-3);border-radius:6px;overflow:hidden}
.sp-dfill{display:block;height:100%;background:var(--sp,var(--acad-strategy));border-radius:6px}
.sp-drow.sp-outside .sp-dfill{background:var(--ink-4)}
.sp-dv{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.sp-din{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4);text-align:right}
.sp-distdet{margin:0 0 12px}
.sp-pos{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--line)}

/* ── 3.3. THREE SOURCES, THREE VINTAGES ──────────────────────────────────
   The middle column is the date each figure was counted, and it is the
   column the exhibit exists for, so it lines up down the list and the row
   scrolls rather than reflowing. The row styles are the loss budget's,
   reused rather than redeclared. */
/* scroll port for .sp-vrow's floor width, see the note at .sp-rows in sp_c01.css */
.sp-stack{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-vrow{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(130px,1.2fr) 92px;
  align-items:center;gap:10px;min-width:382px;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-vrow.sp-atot{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy))}
.sp-sizedet{margin:0 0 10px}
.sp-print{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-print:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}