/* ============================================================
   SEGMENTATION vs PERISTALSIS ANIMATOR  ·  root class .segper
   The approved prototype's <style> block, moved here and scoped under
   one root class (build prompt 11, §4.2). EVERY VALUE IS THE
   PROTOTYPE'S — only the selectors changed:
     · `*`    -> `.segper, .segper *`
     · `body` -> `.segper` (the colour, background and font it set). The
       body's `margin: 0; padding: 24px` framed the standalone PAGE, not
       the component; inside a topic card they would double the card's
       own padding, so they are the one thing not carried over.
     · every other rule is prefixed `.segper `.
   Font stack and hexes stay literal: no platform token is a
   character-for-character / exact-visual match (§4.9).

   The one ADDED rule block is the §4.8 narrow-screen floor at the end:
   below 700px the stage SVG floors at 640px and its panel scrolls
   sideways — the same floor and breakpoint .mk-fig--dense gives every
   authored figure on this page — instead of shrinking to ~0.3 scale.
   ============================================================ */

.segper, .segper * { box-sizing: border-box; }
.segper {
    background: #FFFFFF; color: #111111;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Full card width (Chris, 2026-09-23: "the simulators are super thin, widen them
   out to fit the width of the card"). The prototype capped its standalone page
   at 980px; inside a topic card that left wide empty margins either side. */
.segper .wrap { max-width: none; margin: 0; }
.segper h1 { font-size: 21px; margin: 0 0 4px; }
.segper .sub { font-size: 14px; margin: 0 0 20px; }

.segper .panel { border: 2px solid #D8D2C7; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.segper svg.stage { width: 100%; height: auto; display: block; }

.segper .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.segper button.ctl {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 9px 17px; border-radius: 9px; cursor: pointer;
    background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
}
.segper button.ctl.on { background: #EFF4EC; border-color: #4B7B3F; }
.segper .controls .lab { font-size: 13px; font-weight: 700; margin-left: 8px; }
.segper input[type=range] { flex: 1 1 200px; min-width: 140px; accent-color: #4B7B3F; }

.segper .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 720px) { .segper .cards { grid-template-columns: 1fr; } }
.segper .card { border: 2px solid #B8B8B8; border-left-width: 6px; border-radius: 10px; padding: 12px 14px; }
.segper .card .h { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.segper .card .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-top: 5px; }
.segper .card .row b { font-size: 17px; }
.segper .card .n { font-size: 11px; margin-top: 8px; }

.segper .verdict { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.segper .verdict .h { font-size: 14.5px; font-weight: 700; }
.segper .verdict .b { font-size: 13.5px; margin-top: 4px; }

.segper .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 13px 15px; margin-top: 20px; }
.segper .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.segper .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.segper .locked li { margin-bottom: 5px; }
.segper .foot { font-size: 12px; margin-top: 8px; }

/* §4.8 — narrow-screen floor (ADDED). Matches .mk-fig--dense exactly:
   same 700px breakpoint, same 640px floor, sideways scroll inside the
   stage's own panel. At 640px the smallest on-stage label (9.5 units,
   "start"/"now") renders ~6.9px and the headings ~10.9px — the same
   legibility the page's authored figures get. */
@media (max-width: 700px) {
    .segper .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .segper svg.stage { min-width: 640px; }
}

/* Breathing room between the page's intro line and the component's own
   heading, which otherwise sit flush (2026-09-23). */
.segper { margin-top: 14px; }