/* STRATEGY AND PLANNING: the shared kit's styles.

   Two components, and a reader meets both of them in nine chapters, so they are
   styled once here rather than nine times.

     A.spPage    the reasons page, filling as the reader moves
     A.spLadder  the five rungs, and the two joins with nothing behind them

   ── THE TWO RULES FROM THE RENDER PASS, AND BOTH ARE HARD ────────────────────

   1. NOTHING RENDERS UNDER 9px AT 360px WIDTH. The smallest value in this file
      is 10px and no rule below shrinks type at any breakpoint. The render pass
      measures it on every shot rather than judging by eye.

   2. A WIDE EXHIBIT SCROLLS SIDEWAYS WITH A RIGHT-EDGE FADE. It never scales
      down and it never reflows. A previous book narrowed a comparison grid on a
      phone expecting it to stack, it did not stack, every cell reflowed, and the
      row labels landed beside other rows' values: "the board did not get
      smaller. It got scrambled, and it looked deliberate."

      Both components here are lists of rows whose columns must line up DOWN the
      list, because the comparison across the nine entries and across the five
      rungs is the teaching. So each row carries a floor width and the list
      scrolls rather than reflowing, and the right edge fades so a reader can see
      there is more. One proven pattern, already used by three earlier exhibits
      on this platform, not a second one invented here.

   ── THE HUE TOKEN, AND WHY IT IS --stage RATHER THAN --st ────────────────────

   app.js sets --stage on the page wrapper, to var(--p{n}) for the chapter the
   reader is in. It is the only hue token anything writes. Two earlier kit files
   reach for --st, which is declared nowhere on this platform, and survive on
   their fallbacks. Reaching for it here would work by the same accident, so this
   file asks for the token that is actually set and falls back to the book accent
   for anywhere the wrapper has not painted.

   Nothing here mints a colour or a scale. Every value is a token declared in
   academy.css.                                                                */

/* One local alias, so the fallback chain is written once rather than in every
   rule that needs the book's hue. */
.sim .sp-page,
.sim .sp-entry,
.sim .sp-rungs,
.sim .sp-rung-d,
.sim .sp-fiction { --sp:var(--stage,var(--acad-strategy)) }

/* ── THE STATED FICTION ────────────────────────────────────────────────────
   Said on the face of the component, every time. The worked entries are from an
   invented advertiser and a reader must never have to wonder. */
.sp-fiction{margin:0 0 12px;padding:8px 11px;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-left:3px solid var(--ink-4);border-radius:0 8px 8px 0}

/* ── THE REASONS PAGE ──────────────────────────────────────────────────────

   Nine rows. The status column has to line up down all nine or the "written /
   written here / not yet" reading is lost, which is the whole picture. So the
   list scrolls sideways rather than letting a long title push the status out of
   column. */
.sp-page{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-direction:column;gap:4px;
  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-page li{display:block}

.sp-f{display:grid;grid-template-columns:38px minmax(150px,1fr) 82px;align-items:center;
  gap:10px;width:100%;min-width:286px;text-align:left;padding:9px 11px;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;
  transition:background .14s,border-color .14s}
.sp-f:hover{background:var(--bg-3);border-color:var(--line-2)}
.sp-f:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-f.sel{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy));
  box-shadow:inset 0 0 0 1px var(--line-2)}

.sp-f .sp-k{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}
.sp-f .sp-t{font-size:13px;line-height:1.35;color:var(--ink-2)}
.sp-f .sp-st{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}

/* THE THREE STATES. Written, being written here, not yet. The middle one is the
   only one that is ever loud, because it is the entry this module produces and a
   reader arriving cold needs to see which of the nine they are on. */
.sp-f.sp-done{border-left-color:var(--money)}
.sp-f.sp-done .sp-k{color:var(--money)}
.sp-f.sp-done .sp-st{color:var(--money)}
.sp-f.sp-now{border-left-color:var(--sp,var(--acad-strategy));background:var(--bg-3)}
.sp-f.sp-now .sp-k{color:var(--sp,var(--acad-strategy))}
.sp-f.sp-now .sp-t{color:var(--ink)}
.sp-f.sp-now .sp-st{color:var(--sp,var(--acad-strategy))}
.sp-f.sp-todo{opacity:.72}
.sp-f.sp-todo .sp-t{color:var(--ink-3)}

/* ── THE ENTRY PANEL ───────────────────────────────────────────────────────
   Obligation C. The worked entry is shown for every field at every appearance,
   whether or not the reader has reached it, so somebody who has written nothing
   can still see what a good one looks like. It is the loudest thing in the
   component for that reason. */
.sp-entry{margin-top:12px;min-height:56px}
.sp-prompt{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.sp-what{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.sp-what b{color:var(--ink);font-weight:600}
.sp-worked{margin:0;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-where{margin:8px 0 0;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}

/* ── THE LADDER ────────────────────────────────────────────────────────────

   Five rungs, top to bottom, with the two breaks drawn between them. The unit
   column is the argument: the same decision is denominated differently at every
   height, and a reader must be able to run their eye down that column. Same
   floor width, same scroll, same fade. */
.sp-rungs{display:flex;flex-direction:column;gap:4px;padding-bottom:6px;
  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-rung{display:grid;grid-template-columns:32px minmax(130px,1fr) minmax(104px,.9fr);
  align-items:center;gap:10px;width:100%;min-width:286px;text-align:left;padding:9px 11px;
  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;
  transition:background .14s,border-color .14s}
.sp-rung:hover{background:var(--bg-3);border-color:var(--line-2)}
.sp-rung:focus-visible{outline:2px solid var(--sp,var(--acad-strategy));outline-offset:2px}
.sp-rung.sel{background:var(--bg-3);border-left-color:var(--sp,var(--acad-strategy));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.sp-rung .sp-rk{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)}
.sp-rung.sel .sp-rk{color:var(--sp,var(--acad-strategy))}
.sp-rung .sp-rt{font-size:13px;line-height:1.35;color:var(--ink-2)}
.sp-rung.sel .sp-rt{color:var(--ink)}
.sp-rung .sp-ru{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4)}

/* THE TWO BREAKS, DRAWN RATHER THAN DESCRIBED. They sit between the rungs they
   separate and they say which kind they are, because one is missing a method and
   the other is missing a number, they fail differently, and a reader who thinks
   they are the same thing reaches for the wrong repair. Amber, which on this
   platform means "look at this", not red, which would mean "broken". */
.sp-break{display:flex;align-items:center;gap:8px;min-width:286px;margin:3px 0;padding:0 11px}
.sp-break::before,.sp-break::after{content:"";flex:1 1 auto;height:0;
  border-top:1px dashed var(--warn);opacity:.6}
.sp-break span{flex:0 0 auto;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn);padding:2px 8px;border:1px solid var(--warn);
  border-radius:999px;background:var(--warn-soft);white-space:nowrap}

/* ── THE RUNG DETAIL ───────────────────────────────────────────────────────
   What is counted, who decides, and what can see it. Three rows a reader can
   compare against the same three rows one rung up. */
.sp-rung-d{margin-top:12px;min-height:56px}
.sp-d{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.sp-d b{color:var(--ink);font-weight:600}

.sp-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:0;
  font-size:12.5px}
.sp-dl dt{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);padding-top:3px;white-space:nowrap}
.sp-dl dd{margin:0;line-height:1.5;color:var(--ink-2)}

/* The break, restated where the reader is standing, with what it is missing.
   Same amber, so the mark on the ladder and the paragraph under it are visibly
   the same object. */
.sp-brk{margin:11px 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-brk b{color:var(--warn);font-weight:600}

/* ── NARROW ────────────────────────────────────────────────────────────────

   THE ROWS DO NOT REFLOW AND THE TYPE DOES NOT SHRINK. Below the floor width
   the lists scroll, which is rule 2, and the only thing that changes here is
   how much of the middle column a row is willing to give up. Nothing in this
   file is under 10px at any width, which is rule 1 with a point of headroom. */
@media (max-width:420px){
  .sp-f{grid-template-columns:34px minmax(150px,1fr) 78px;gap:8px;padding:9px 10px}
  .sp-rung{grid-template-columns:30px minmax(126px,1fr) minmax(100px,.9fr);gap:8px;padding:9px 10px}
  .sp-worked{padding:10px 12px}
}