/* Responsive reading layout. Keep this sheet scoped to the shared breakpoint;
   content and simulations remain identical on desktop, tablet and phone. */
.mobile-chapter-hero{display:none}
.figure-detail[hidden]{display:none}
.tr-ask-short{display:none}
.tr-active-line{display:none}
.reading-resume,.section-next{display:none}
@media (max-width:860px), (hover:none) and (pointer:coarse){
  .mobile-chapter-hero{display:block;max-width:33rem;margin:0 auto;padding:40px 0 32px}
  .mobile-chapter-hero .meta{margin-top:1.5em}
  .reading-resume{display:block;min-height:44px;margin-top:16px;padding:10px 0;color:var(--ink);font:14px/1.5 var(--f-ui);text-decoration:none}
  .section-next{display:block;padding:24px 0 40px;border-top:1px solid var(--rule)}
  .section-next a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:18px;text-decoration:none}
  .scrolly .hero{display:none}
  .scrolly .steps{width:100%;max-width:33rem;justify-self:center}
  .scrolly .stage{max-width:600px;margin-inline:auto}
  h1{font-size:clamp(34px,8vw,48px)}
  .wide{margin:3rem 0}
  .scrolly .stage-col{padding:8px 0}
  .scrolly .stage > svg{height:auto;max-height:min(34svh,320px)}
  .scrolly .stage > .ns-caption,
  .scrolly .stage > .mx-caption,
  .scrolly .stage > .gv-caption,
  .scrolly .stage > .ct-caption{font-size:15px;line-height:1.45;min-height:4.4em;margin:8px auto 0}
  .scrolly .stage > .ft-foot{font-size:16px;min-height:2em;margin:8px 0 0}
  .scrolly .area svg{max-width:100%;max-height:min(31svh,280px)}
  .scrolly .area-foot{margin-top:6px;min-height:3.4em}
  .scrolly .gc-svg{max-height:min(31svh,280px)}
  .scrolly .gc-foot{font-size:16px}
  .scrolly .gc-read{min-height:2em}
  .scrolly .gc-axes > .gc-tick{transform:translateY(-20px)}
  .figure-detail{width:100%;font:13px var(--f-ui);color:var(--graphite-2)}
  .figure-detail summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--ink)}
  .figure-detail .gv-caption{min-height:8em;margin:4px 0 8px}
  .scrolly .scc-compact > .gv-svg{max-height:min(27svh,245px)}
  .scrolly .scc-compact > .scc-pass-title{height:24px;max-height:24px}
  .scrolly .scc-compact > .scc-pass-memory{height:45px;max-height:45px}
  .scc-compact .dg-order-long{grid-template-columns:repeat(12,minmax(0,1fr));width:100%;gap:3px;padding:20px 0;margin:2px 0 0}
  .scc-compact .dg-order-long span{width:100%;height:25px;font-size:14px}

  /* The visual, active instruction and controls form one reading group. The
     complete listing and values remain directly below it. */
  .trace{grid-template-columns:minmax(0,1fr);padding:10px;gap:16px;border-radius:22px}
  .tr-right{order:-1;padding:12px 10px;border-radius:16px}
  .tr-stage{min-height:180px;cursor:default}
  .tr-stage > svg{max-height:min(32svh,300px)}
  .tr-active-line{display:block;font-size:15px;line-height:1.45;min-height:3em;margin:8px 2px 0;padding:8px 10px;color:var(--ink);background:var(--ink-soft);border-radius:8px}
  .tr-active-line b{font-family:var(--f-ui);font-size:.94em;font-weight:600}
  .tr-cap{font-size:16px;margin:8px 2px}
  .tr-ctl{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;margin:6px 0 0}
  .tr-ctl .btn{font-size:14px;padding:8px 12px}
  .tr-count{grid-column:1 / -1;grid-row:1;margin:0;min-width:0;text-align:left}
  .tr-ask{margin:0;text-align:right;min-height:44px;font-size:12.5px}
  .tr-ask-full{display:none}
  .tr-ask-short{display:inline}
  .tr-scrub{min-height:44px;margin:0;touch-action:pan-y}
  .tr-code{font-size:16px;padding:14px 16px;line-height:1.65;overflow-wrap:anywhere}
  .tr-code .cl{padding-left:calc(var(--in,0) * 1em + 8px)}
  .wr{grid-template-columns:3.4em minmax(0,1fr) auto;gap:8px;padding:8px;margin:0 -8px}
  .wr-val{font-size:16px;white-space:normal;overflow-wrap:anywhere;max-width:11ch}
  .wr-desc{font-size:13px}
  .wv-tiles{flex-wrap:wrap;justify-content:flex-end;gap:2px}
  .wv-tiles b{width:20px;height:24px}
  .wt-call{flex-wrap:wrap;gap:2px 10px}
  .tr-general{padding:12px 14px 2px;overflow-wrap:anywhere}
  .tr-stage.dfs-pair .dfs-pane-title{font-size:12px;line-height:1.3;margin-bottom:4px}
  .tr-stage.dfs-pair .dfs-memory{max-height:80px;margin-top:4px}
  .tr-stage.dfs-pair .dfs-components{min-height:26px;margin-top:2px}
  .tr-stage.dfs-pair .dfs-component{font-size:11px;line-height:1.25}
  .tr-stage.dfs-pair > .gv-caption{font-size:12px;line-height:1.4;margin-top:4px;min-height:1.5em}
  .tr-stage .dg-order{margin:6px 0 0;min-height:32px;gap:5px}
  .tr-stage .dg-order span{width:32px;height:30px;font-size:18px}
  .tr-stage.dg-scc-trace .gv-caption{font-size:13px;line-height:1.4;min-height:3.2em;margin-top:6px}
  .rn-places .rn-d{font-size:10px}

  .btn,.chip{min-height:44px}
  .slider{gap:10px}
  .slider input{height:44px;min-width:0}
  .slider input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10.5px}
  .slider input::-moz-range-thumb{width:24px;height:24px}
  .num-drag{min-width:44px;min-height:44px;padding:5px 4px;touch-action:pan-y}
  .formula sup .num-drag{min-width:24px;min-height:0;padding:0 2px}
  .formula sup .num-drag::after{content:'';position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%);opacity:1}
  .mg-stage .tile.front::before{content:'';position:absolute;inset:-8px;min-width:44px;min-height:44px}
  .mg-stage .tile{font-size:12px!important}
  .mg-wrap .code{overflow-wrap:anywhere}
  .mg-wrap{grid-template-columns:minmax(0,1fr)}
  .askbar{max-height:calc(100dvh - var(--contents-height) - 24px);overflow:auto}
  .ab-peek summary,.askchip{min-height:44px}
  a,button,summary,.num-drag,.term,.def{-webkit-tap-highlight-color:var(--ink-soft)}

  .film-block{margin-top:3rem}
  .film{margin:0 -4px}
  .film-dialog{padding:16px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:20px}
  .fd-cap{font-size:18px;line-height:1.5;margin:10px 0}
  .fd-nav{position:sticky;bottom:-16px;padding:12px 0;background:var(--paper-hi);gap:8px;z-index:2}
  .fd-close{margin-left:0}
  .fd-nav .btn{padding:8px 12px;font-size:14px}

  .general{padding:18px 18px 6px;overflow-wrap:anywhere}
  .g-eq{font-size:18px;overflow-wrap:anywhere}
  .ex-grid.has-visual{grid-template-columns:minmax(0,1fr)}
  .ex-visual{position:static;order:-1;margin-bottom:8px;padding:12px}
  .ex-step{padding-left:1.5rem}
  .ex-act{gap:8px 12px;align-items:center}
  .ex-field{max-width:100%;flex-wrap:wrap}
  .ex-in{min-height:44px;font-size:20px;min-width:0}
  .ex-table th,.ex-table td{padding:5px 4px}
  .ex-table tbody th{width:28%}
  .ex-table .ex-in{width:100%;max-width:5ch;box-sizing:border-box}
  .ex-table select.ex-in{font-size:16px;min-width:0;max-width:100%;padding:6px 2px}
  .fb-acts{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0 0}
  .fb-acts button{min-height:44px}
  .bp-inputs{gap:12px}
  .cb-values{gap:3px;flex-wrap:wrap}
  .cb-value{min-width:24px}
  .cb-row{gap:5px}
}

@media (max-width:860px) and (max-height:540px), (hover:none) and (pointer:coarse) and (max-height:540px){
  .tr-stage > svg{max-height:320px}
  .scrolly,.scrolly.scrolly-paired{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .scrolly .steps{grid-column:1;grid-row:1}
  .scrolly .stage-col{grid-column:2;grid-row:1;padding:4px 0;align-self:start}
  .scrolly .stage-col::after{display:none}
  .scrolly .stage > svg{max-height:220px}
  .scrolly .stage > .ns-caption,
  .scrolly .stage > .mx-caption,
  .scrolly .stage > .gv-caption,
  .scrolly .stage > .ct-caption{min-height:2.9em;margin-top:4px}
  .scrolly .area svg{max-height:155px}
  .scrolly .area-foot{min-height:2.8em}
  .scrolly .roman{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
  .scrolly .rn-roman{gap:4px;grid-column:1}
  .scrolly .rn-sym b{font-size:22px}
  .scrolly .rn-g{padding:3px}
  .scrolly .rn-eq{grid-column:1;margin:0;font-size:15px}
  .scrolly .rn-grid{grid-column:2;grid-row:1 / span 2}
  .scrolly .rn-row{grid-template-columns:14px repeat(4,34px)}
  .scrolly .rn-d{font-size:22px}
  .scrolly .rn-places .rn-d{font-size:10px}
  .scrolly .rn-carry .rn-d{font-size:12px}
  .scrolly .dfs-compact{display:block}
  .scrolly .dfs-compact .dfs-panels .gv-svg{height:150px}
  .scrolly .dfs-compact .dfs-pane-title{font-size:11px;line-height:1.3;margin:0}
  .scrolly .dfs-compact .dfs-memory{height:64px;max-height:64px;margin-top:2px}
  .scrolly .dfs-compact .dfs-components{min-height:22px;margin-top:0}
  .scrolly .dfs-compact .dg-legend{min-height:18px;gap:6px;font-size:11px}
  .scrolly .dfs-compact .dg-legend span{padding:0 3px}
  .scrolly .dfs-compact .dfs-memory{height:60px;max-height:60px}
  .scrolly .scc-compact > .gv-svg{max-height:150px}
  .scrolly .scc-compact > .scc-pass-title{height:20px;max-height:20px}
  .scrolly .scc-compact > .scc-pass-memory{height:40px;max-height:40px}
  .scc-compact .dg-order-long{padding:12px 0}
  .scrolly .figure-detail[open]{position:fixed;inset:auto 12px 12px;width:auto;z-index:10;padding:0 16px 12px;border-radius:16px;background:var(--paper-hi);box-shadow:0 0 0 1px var(--rule)}
  .scrolly .figure-detail[open] .gv-caption{min-height:0;max-height:30svh;overflow:auto}
  .stage-col:has(.figure-detail[open])::before{content:'';height:44px;order:2;flex:none}
}