/* STRATEGY AND PLANNING, chapter 0. What a plan is, and the box with no schema.

   A STUB, ON PURPOSE, AND IT IS LISTED IN spfiles.js FROM THE FIRST DAY. The
   load list is the single source of truth for what this book is made of, and a
   stylesheet that appears on disk later than the file naming it is a file the
   suite has to be told to expect. Empty is a state. Missing is a defect.

   Chapter components are written into assets/js/strategy/sims/sp_c00.js and
   their styles land here. Everything both components in the shared kit need is
   already in sp_kit.css and nothing in this file may restate it.

   THE TWO RULES FROM THE RENDER PASS APPLY HERE TOO AND ARE NOT NEGOTIABLE:
   nothing renders 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
   written out in full at the head of sp_kit.css. Copy it rather than inventing a
   second one.

   The chapter hue is --p0 and it is set on the page wrapper by app.js. Ask for
   var(--stage) rather than naming --p0 here, or a component will draw in this
   chapter's colour when it is shown in another.                               */

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE CHAPTER 0 EXHIBITS ADDED FOR 0A, 0B AND 0.2.

     .sp-picks / .sp-cards / .sp-remedy   spdocs, 0A's recourse panel
     .sp-round / .sp-decs                 spround, 0B's calendar
     .sp-chain / .sp-act                  spcarry, 0.2's walk into the breaks

   Both render-pass rules are obeyed. Nothing below is under 10px at any width,
   and every row that has to line up down a list carries a floor width and
   scrolls sideways with a right-edge fade rather than reflowing. The pattern is
   copied from sp_kit.css rather than invented a second time.

   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-picks,.sim .sp-cards,.sim .sp-remedy,.sim .sp-round,.sim .sp-decs,
.sim .sp-step,.sim .sp-chain,.sim .sp-act,.sim .sp-claim,.sim .sp-ctrl2
  { --sp:var(--stage,var(--acad-strategy)) }

/* ── SHARED CONTROLS ──────────────────────────────────────────────────────
   One slider style and one row-of-buttons style, used by all three, so a
   reader meets the same control three times rather than three controls. */
.sp-picks,.sp-lens,.sp-offers{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sp-pick,.sp-len,.sp-off{font-family:var(--ui);font-size:11.5px;line-height:1.3;
  padding:7px 11px;border-radius:999px;cursor:pointer}
.sp-pick.on,.sp-len.on{background:var(--bg-3);border-color:var(--sp,var(--acad-strategy));
  color:var(--ink)}
.sp-slab{display:block;font-family:var(--ui);font-size:11.5px;color:var(--ink-3);
  margin:0 0 10px}
.sp-slab b{color:var(--ink);font-weight:600}
.sp-slab input[type=range]{display:block;width:100%;margin-top:7px;accent-color:var(--sp,var(--acad-strategy))}

/* ── 0A. FOUR DOCUMENTS ───────────────────────────────────────────────────
   Four cards. The signed and the unsigned are told apart by the left edge,
   because which two bind anybody is the whole first half of the module. */
.sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.sp-card{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0;padding:9px 11px}
.sp-card.sp-signed{border-left-color:var(--money,var(--sp,var(--acad-strategy)))}
.sp-card.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-chead{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;color:inherit;font:inherit}
.sp-chead:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-ct{display:block;font-size:13px;line-height:1.35;color:var(--ink);font-weight:600}
.sp-cb{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-top:3px}
.sp-card.sp-signed .sp-cb{color:var(--money,var(--ink-4))}
.sp-cwho{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.sp-csay{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.sp-remedy{margin-top:12px}
.sp-has,.sp-none,.sp-trap,.sp-nodate{margin:0 0 8px;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-radius:0 8px 8px 0}
.sp-has{border-left:3px solid var(--money,var(--sp,var(--acad-strategy)))}
.sp-none,.sp-nodate{border-left:3px solid var(--warn)}
.sp-none b,.sp-nodate b{color:var(--warn);font-weight:600}
.sp-trap{border-left:3px solid var(--ink-4)}
.sp-has b{color:var(--ink);font-weight:600}

/* THE BAND. A hard right edge where the standard sets one and a soft left edge
   where nobody publishes anything. No point estimate is drawn inside it,
   because none has been measured and drawing one would invent it. */
.sp-notice{margin-top:10px}
.sp-band{position:relative;height:16px;margin:4px 0 8px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line);overflow:hidden}
.sp-band i{position:absolute;top:0;bottom:0;background:var(--warn-soft);
  border-right:2px solid var(--warn)}
.sp-band u{position:absolute;top:0;bottom:0;width:2px;background:var(--warn)}
.sp-band b{position:absolute;top:-3px;bottom:-3px;width:3px;
  background:var(--sp,var(--acad-strategy));border-radius:2px}
.sp-bandnote{margin:0 0 8px;font-family:var(--ui);font-size:11px;line-height:1.55;
  color:var(--ink-4)}
.sp-ok{margin:0;font-size:12.5px;line-height:1.55;color:var(--money,var(--ink-2))}

/* ── 0B. THE ROUND ────────────────────────────────────────────────────────
   Six steps across, then the decision rows down. The rows have to line up so a
   reader can run their eye down the state column, so they scroll rather than
   reflow, exactly as the kit's two lists do. */
.sp-ctrl2{margin-bottom:12px}
.sp-round{display:flex;gap:6px;padding-bottom:6px;margin-bottom:12px;
  overflow-x:auto;overflow-y:hidden;-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-wk{flex:0 0 auto;min-width:126px;text-align:left;padding:8px 10px;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-wk.done{border-top-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-wk.sel{box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-wk:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-wn{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.sp-wt{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2);margin-top:2px}

.sp-label{margin:0 0 10px;font-family:var(--ui);font-size:11px;line-height:1.55;
  color:var(--ink-4)}
.sp-dec{display:grid;grid-template-columns:minmax(140px,1fr) minmax(110px,1.1fr) 96px;
  align-items:center;gap:10px;min-width:300px;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-dec.sp-closing{border-left-color:var(--warn)}
.sp-dec.sp-hard{border-left-color:var(--ink-4)}
.sp-dec.sp-never{border-left-color:var(--warn);opacity:.92}
.sp-dt{font-size:13px;line-height:1.35;color:var(--ink-2)}
.sp-dbar{position:relative;height:12px;border-radius:6px;background:var(--bg-3);
  border:1px solid var(--line)}
.sp-dbar i{position:absolute;top:0;bottom:0;background:var(--warn-soft);
  border-left:1px solid var(--warn);border-right:1px solid var(--warn)}
.sp-dbar b{position:absolute;top:-3px;bottom:-3px;width:3px;
  background:var(--sp,var(--acad-strategy));border-radius:2px}
.sp-ds{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.sp-dec.sp-closing .sp-ds,.sp-dec.sp-never .sp-ds{color:var(--warn)}
.sp-dd{grid-column:1 / -1;margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.sp-dd b{color:var(--ink-2);font-weight:600}
.sp-step{margin-top:12px;min-height:56px}
.sp-sw{margin:0 0 8px;font-size:13px;color:var(--ink)}

/* ── 0.2. CARRYING ONE CLAIM DOWN ─────────────────────────────────────────
   The chain is the exhibit. A link that has been passed shows what came out of
   it; a link supplied by the reader carries a stamp, because the stamp is the
   thing no plan document has anywhere on it. */
.sp-claim{margin:0 0 12px;padding:11px 13px;font-family:var(--text);font-size:13.5px;
  line-height:1.6;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--sp,var(--acad-strategy));border-radius:0 9px 9px 0}
.sp-claim b{font-weight:600}
.sp-chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sp-link{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.sp-link.sp-now{border-left-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-link.sp-done{border-left-color:var(--money,var(--ink-4))}
.sp-link.sp-todo{opacity:.72}
.sp-lk{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.sp-lt{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2);margin-top:2px}
.sp-lo{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.sp-stamp{margin:6px 0 0;padding:7px 10px;font-family:var(--ui);font-size:10.5px;
  line-height:1.5;color:var(--warn);background:var(--warn-soft);border-radius:6px}
.sp-act{margin-top:12px}
.sp-act .btn{font-family:var(--ui);font-size:11.5px;padding:7px 12px;cursor:pointer}
.sp-bandbox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px}
.sp-bandbox span{padding:9px 11px;font-size:12px;line-height:1.5;color:var(--ink-2);
  background:var(--bg-3);border:1px solid var(--warn);border-radius:8px}

/* ── NARROW ───────────────────────────────────────────────────────────────
   The rows do not reflow and the type does not shrink. Below the floor width
   the decision list scrolls, which is rule 2, and the only thing that changes
   is how much of the first column a row is willing to give up. */
@media (max-width:420px){
  .sp-decs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    -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-dec{grid-template-columns:minmax(132px,1fr) minmax(100px,1fr) 88px;gap:8px;padding:8px 10px}
  .sp-cards{grid-template-columns:1fr}
  .sp-bandbox{grid-template-columns:1fr}
}