/* ==========================================================================
   S2 · What a holdout actually measures. One interactive, shholdout.

   Loaded after the chapter sheets, so it inherits .sim, .gate, .readouts, .ro
   and the range-input styling rather than restating any of it. A reader
   arriving here has met those shapes many times and a new look for the same job
   would read as a new idea.

   One genuinely new thing to express, and the whole sheet is built around it: a
   comparison between what you are looking for and what the test can see, where
   the reader has to be able to tell at a glance which bar is longer. So the two
   bars share a scale, and the second one changes colour on the crossing rather
   than on any threshold of its own. Blind is warn, not error: an underpowered
   test is a design problem, not a fault.
   ========================================================================== */

/* ------------------------------------------------------------ the controls */
.sh2-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:10px 18px;
  margin-bottom:16px}
.sh2-l{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;
  font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.sh2-l .sh2-lt{grid-column:1/2;line-height:1.35}
.sh2-l .sh2-v{grid-column:2/3;grid-row:1/2;justify-self:end;font-family:var(--mono);
  font-size:12px;color:var(--ink);white-space:nowrap}
.sh2-l input[type=range]{grid-column:1/3;width:100%;margin:2px 0 0}

/* ---------------------------------------------------------------- the bars */
/* The payoff of the whole component. Two bars, one scale, and the second one
   goes amber the moment it grows past the first. */
.sh2-bars{display:flex;flex-direction:column;gap:8px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:14px}
.sh2-brow{display:grid;grid-template-columns:210px 1fr 56px;gap:11px;align-items:center}
.sh2-bl{font-family:var(--ui);font-size:12px;line-height:1.35;color:var(--ink-3)}
.sh2-bt{height:14px;background:var(--bg-4);border-radius:7px;overflow:hidden}
.sh2-bt i{display:block;height:100%;border-radius:7px;transition:width .18s ease}
.sh2-bt i.want{background:var(--c1)}
.sh2-bt i.ok{background:var(--money)}
.sh2-bt i.blind{background:var(--warn)}
.sh2-bv{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
@media(max-width:640px){
  .sh2-brow{grid-template-columns:1fr 52px;gap:4px 9px}
  .sh2-bl{grid-column:1/3}
  .sh2-bt{grid-column:1/2}
}

/* The interval is a range rather than a figure, so it needs room the other
   readout values do not. */
.sh2-out .v.sh2-ci{font-size:19px;letter-spacing:-.01em;white-space:nowrap}

/* --------------------------------------------------------- twenty test runs */
/* Twenty dots is the cheapest honest picture of power there is. It is derived
   from the computed power rather than simulated, so it never moves on its own
   and two readers looking at the same dials see the same thing. */
.sh2-runs{margin:14px 0 10px}
.sh2-dots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sh2-dots i{display:block;width:15px;height:15px;border-radius:50%}
.sh2-dots i.hit{background:var(--money)}
.sh2-dots i.miss{background:var(--bg-4);border:1px solid var(--line-2)}
.sh2-dl{font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-3);margin:0}
.sh2-dl b{color:var(--ink);font-family:var(--mono)}

/* ------------------------------------------------------------- the verdict */
.sh2-note{border-top:1px solid var(--line);padding-top:11px}
.sh2-note p{font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin:0 0 7px}
.sh2-note p:last-child{margin-bottom:0}
.sh2-note b{color:var(--ink);font-weight:600}