/* ==========================================================================
   S4 · Why the channel numbers never add up.

   One component, so one short sheet. It inherits .btn, .readouts and .ro from
   academy.css and adds only what is genuinely new here.

   The one design decision worth recording. The component has two bars sharing
   one horizontal scale, and the whole lesson is that the second bar walks past
   the end of the first. So nothing in this sheet may set a width on a bar, and
   nothing may scale a bar to fit its container. The scale is fixed in the
   component at 1,800 orders across the full width, which leaves headroom above
   the largest total the settings can produce, and the truth line stays put.
   A sheet that made the bars "fit nicely" would quietly destroy the point.

   The second decision: within each platform's block, the part claimed with no
   click is the SAME colour at lower opacity, not a separate colour. It is not a
   different platform, it is the same platform claiming on weaker grounds, and
   giving it its own hue would read as a sixth channel.
   ========================================================================== */

/* ----------------------------------------------------------- the controls */
.sh4-ctl{display:flex;flex-wrap:wrap;gap:16px 26px;margin-bottom:16px}
.sh4-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sh4-lab{width:100%;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.sh4-c,.sh4-v{font-variant-numeric:tabular-nums}
.sh4-c.on,.sh4-v.on{background:var(--bg-4);border-color:var(--line-2);color:var(--ink);
  font-weight:600}

/* --------------------------------------------------------------- the bars */
.sh4-stage{margin-bottom:16px}
.sh4-svg{display:block;width:100%;height:auto;overflow:visible}
.sh4-svg rect{transition:width .18s ease,x .18s ease}
.sh4-cap{font-family:var(--ui);font-size:11px;fill:var(--ink-4);letter-spacing:.03em}
.sh4-tot{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .sh4-svg rect{transition:none}
}

.sh4-key{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:9px;
  font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sh4-key span{display:inline-flex;align-items:center;gap:5px}
.sh4-key i{width:9px;height:9px;border-radius:2px;display:inline-block}
.sh4-key .sh4-kv i{background:var(--ink-3);opacity:.34}

/* -------------------------------------------------------------- the table */
.sh4-tbl{width:100%;border-collapse:collapse;margin:14px 0 4px}
.sh4-tbl th{text-align:right;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);padding:0 9px 7px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.sh4-tbl th:first-child{text-align:left}
.sh4-tbl td{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink-2);
  padding:9px;border-bottom:1px solid var(--line);vertical-align:top;
  font-variant-numeric:tabular-nums}
.sh4-tbl td.k{text-align:left;font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--ink)}
.sh4-tbl td.k i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:7px}
.sh4-tbl td.k em{display:block;font-style:normal;font-weight:400;font-size:11.5px;
  line-height:1.45;color:var(--ink-4);margin-top:3px;padding-left:16px}
.sh4-tbl td.nil{color:var(--ink-4)}
.sh4-tbl td.tot{color:var(--ink);font-weight:600}
.sh4-tbl tr.sum td{border-top:1px solid var(--line-2);border-bottom:0;color:var(--ink);
  font-weight:600;padding-top:11px}
.sh4-tbl tr.sum td.k{font-size:12.5px}
.sh4-tbl tr.truth td{border-bottom:0;color:var(--ink-3);padding-top:3px}
.sh4-tbl tr.truth td.k{color:var(--ink-3);font-weight:400}
.sh4-tbl tr.truth td.tot{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------- the note */
.sh4-note{margin-top:12px;border-left:2px solid var(--line-2);padding:2px 0 2px 13px}
.sh4-note p{font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2);margin:0}
.sh4-note b{color:var(--ink)}

/* --------------------------------------------------------------- narrow */
/* Below about 700px the five-column table stops being readable, so the two
   click columns fold away. The claim total and the never-clicked column are the
   two the module argues from, so those are the two that stay. */
@media (max-width:700px){
  .sh4-tbl th:nth-child(2),.sh4-tbl td:nth-child(2),
  .sh4-tbl th:nth-child(3),.sh4-tbl td:nth-child(3){display:none}
  .sh4-tbl td.k em{display:none}
  .sh4-ctl{gap:14px}
}