/* The interactive map (map-engine.js), shared by /platform and /harness. Tokens follow
   the DFIR Swarm design system, and each of the five accents still means one thing:
   kelp work in motion, slate files and the record, moss sealed and done, saffron keys
   and caps, brick refused. The map takes the colours of the ground it sits on: the
   band theme (the default, /platform) on the dark band, and .pm-paper on paper or a
   card, where every colour is the surrounding surface's own token. */
.pm{
  --pm-kelp:#3fb3b1;--pm-slate:#9db7d0;--pm-moss:#a7cf8a;--pm-saffron:#f0b964;--pm-brick:#f0a5ae;
  --pm-zone:#34322f;--pm-node:#262422;--pm-node-2:#2e2c29;--pm-edge-idle:.24;--pm-edge-dim:.08;
  --pm-canvas:#1f1e1c;--pm-canvas-line:var(--band-line);--pm-label-bg:#1f1e1c;
  --pm-ink:var(--band-ink);--pm-ink-2:var(--band-ink-2);--pm-ink-3:#a39e93;--pm-ink-4:#938e84;--pm-mute:#8c877d;
  --pm-line:var(--band-line);--pm-node-line:var(--band-line);--pm-node-line-hover:#6b675f;
  --pm-surface-2:var(--band-2);--pm-item-bg:var(--band-2);--pm-chip-bg:#1f1e1c;
  --pm-focus:var(--kelp-pale);--pm-kelp-text:var(--pm-kelp);
  --pm-kelp-wash:rgba(63,179,177,.1);--pm-kelp-wash-2:rgba(63,179,177,.16);
  --pp-bg:var(--paper);--pp-inset:var(--card);--pp-shadow:none;
  display:flex;flex-direction:column;gap:14px
}
/* On paper or a card: the canvas is the ground itself, the parts are cards on it, and
   every line and word takes the paper's tokens. The saffron of a line is the darker
   one of its pair, so a link still stands at 3:1 on paper. */
.pm.pm-paper{
  --pm-kelp:var(--kelp);--pm-slate:var(--slate);--pm-moss:var(--moss);--pm-saffron:#b57316;--pm-brick:var(--brick);
  --pm-zone:var(--line-2);--pm-node:var(--card);--pm-node-2:var(--card);--pm-edge-idle:.36;--pm-edge-dim:.1;
  --pm-canvas:transparent;--pm-canvas-line:transparent;--pm-label-bg:var(--paper);
  --pm-ink:var(--ink);--pm-ink-2:var(--ink-2);--pm-ink-3:var(--ink-3);--pm-ink-4:var(--ink-3);--pm-mute:var(--ink-3);
  --pm-line:var(--line-2);--pm-node-line:var(--line);--pm-node-line-hover:var(--line-2);
  --pm-surface-2:var(--paper-3);--pm-item-bg:var(--card);--pm-chip-bg:var(--paper);
  --pm-focus:var(--kelp-ink);--pm-kelp-text:var(--kelp-ink);
  --pm-kelp-wash:var(--kelp-soft);--pm-kelp-wash-2:var(--kelp-soft);
  --pp-bg:var(--card);--pp-inset:var(--paper);--pp-shadow:0 1px 0 rgba(28,27,26,.04),0 8px 24px rgba(28,27,26,.1);
}

/* toolbar */
.pm-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pm-steps{align-items:center}
.pm-play{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--kelp);background:var(--kelp);color:#fff;font:500 14px var(--sans);cursor:pointer}
.pm-play:hover{background:var(--kelp-ink)}
.pm-play .pm-ico-pause{display:none}
.pm-play[aria-pressed="true"] .pm-ico-play{display:none}
.pm-play[aria-pressed="true"] .pm-ico-pause{display:block}
.pm-steps{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex:1 1 auto;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pm-steps button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--pm-ink-2);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
/* The number sits on the name's baseline, and the pair is centred in the frame. */
.pm-steps button span{font-family:var(--mono);font-size:11px;line-height:1;color:var(--pm-mute);position:relative;top:.5px}
.pm-steps button:hover{color:var(--pm-ink);border-color:var(--pm-line)}
.pm-steps button[aria-current="step"]{color:var(--pm-ink);border-color:var(--pm-kelp);background:var(--pm-kelp-wash)}
.pm-steps button[aria-current="step"] span{color:var(--pm-kelp-text)}
.pm-views{display:inline-flex;border:1px solid var(--pm-line);border-radius:var(--r-sm);overflow:hidden}
.pm-views button{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;background:transparent;color:var(--pm-ink-2);font:500 13px/1 var(--sans);cursor:pointer}
.pm-views button+button{border-left:1px solid var(--pm-line)}
.pm-views button[aria-pressed="true"]{background:var(--pm-surface-2);color:var(--pm-ink)}
.pm button:focus-visible,.pm [tabindex]:focus-visible,.pm summary:focus-visible{outline:2px solid var(--pm-focus);outline-offset:2px}

/* the stage: the map, and the part the examiner opened beside it */
.pm-stage{position:relative}
.pm-pan{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.pm-canvas{position:relative;border:1px solid var(--pm-canvas-line);border-radius:14px;background:var(--pm-canvas);overflow:hidden}
.pm-svg{width:100%;height:auto;display:block;font-family:var(--sans)}
.pm-svg text{pointer-events:none;user-select:none}

/* zones */
.pm-zone rect{fill:none;stroke:var(--pm-zone);stroke-width:1}
.pm-zone .pm-z-label{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--pm-ink-3)}
.pm-zone .pm-z-sub{font-size:11px;fill:var(--pm-ink-4)}

/* a caption the map sets on its own ground */
.pm-note{font-size:11.5px;fill:var(--pm-ink-3)}

/* edges */
.pm-edge path.pm-e{fill:none;stroke-width:1.4;stroke:var(--tone);opacity:var(--pm-edge-idle);transition:opacity .35s,stroke-width .35s}
.pm-edge.is-dash path.pm-e{stroke-dasharray:4 5}
.pm-edge.is-on path.pm-e{opacity:.95;stroke-width:2}
.pm-edge.is-dim path.pm-e{opacity:var(--pm-edge-dim)}
.pm-edge.is-on.is-dash path.pm-e{animation:pm-dash 3.6s linear infinite}
@keyframes pm-dash{to{stroke-dashoffset:-18}}
.pm-edge .pm-e-label{opacity:0;transition:opacity .3s}
.pm-edge.is-on .pm-e-label,.pm-edge.is-hot .pm-e-label{opacity:1}
.pm-e-label rect{fill:var(--pm-label-bg);stroke:var(--tone);stroke-width:1;opacity:.95}
.pm-e-label text{font-family:var(--mono);font-size:10.5px;fill:var(--pm-ink)}
.pm-dot{fill:var(--tone)}
.pm-dot-halo{fill:var(--tone);opacity:.22}

/* nodes */
.pm-node{cursor:pointer;outline:none;transition:opacity .35s}
.pm-node .pm-box{fill:var(--pm-node);stroke:var(--pm-node-line);stroke-width:1;transition:stroke .3s,fill .3s}
.pm-node:hover .pm-box{fill:var(--pm-node-2);stroke:var(--pm-node-line-hover)}
.pm-node .pm-ring{fill:none;stroke:var(--pm-focus);stroke-width:2;opacity:0}
.pm-node:focus-visible .pm-ring{opacity:1}
.pm-node .pm-pip{fill:var(--tone)}
.pm-node .pm-n-label{font-family:var(--serif);font-style:italic;font-size:21px;fill:var(--pm-ink)}
.pm-node .pm-n-mono{font-family:var(--mono);font-size:11px;fill:var(--pm-ink-3)}
.pm-node.is-on .pm-box{stroke:var(--tone);fill:var(--pm-node-2)}
.pm-node.is-dim{opacity:.34}
.pm-node.is-sel .pm-box{stroke:var(--pm-ink);stroke-width:2}
.pm-node .pm-pulse{fill:none;stroke:var(--tone);stroke-width:1.5;opacity:0}
.pm-node.is-flash .pm-pulse{animation:pm-pulse 1.1s ease-out}
@keyframes pm-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
.pm-node .pm-pulse{transform-box:fill-box;transform-origin:center}

/* a chip inside a part: a job image, a job slot; it lights while work runs in it */
.pm-chip rect{fill:var(--pm-chip-bg);stroke:var(--pm-line);stroke-width:1;transition:fill .25s,stroke .25s}
.pm-chip text{font-family:var(--mono);font-size:12.5px;fill:var(--pm-ink)}
.pm-chip .pm-chip-sub{font-size:9.5px;fill:var(--pm-mute)}
.pm-chip.is-busy rect{stroke:var(--pm-kelp);fill:var(--pm-kelp-wash-2)}
.pm-chip:hover rect,.pm-chip:focus-visible rect{stroke:var(--pm-ink-2)}
.pm-chip{cursor:pointer;outline:none}
.pm-chip:focus-visible rect{stroke:var(--pm-focus);stroke-width:2}

.pm-hint{display:none;font-size:13px;color:var(--pm-ink-2);margin:-4px 0 0}
.pm[data-view="list"] .pm-hint{display:none!important}
/* narration */
.pm-narration{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:baseline;padding:14px 4px 0;border-top:1px solid var(--pm-line);position:relative}
.pm-narr-n{font-family:var(--mono);font-size:12px;color:var(--pm-kelp-text);white-space:nowrap}
.pm-narr-text{font-size:15px;color:var(--pm-ink-2);max-width:96ch}
.pm-narr-text b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--pm-ink);margin-right:8px}
.pm-meter{position:absolute;left:0;top:-1px;height:2px;background:var(--pm-kelp);width:0}
.pm-meter.is-run{transition:width linear}

/* the panel: the part the examiner opened, on paper */
.pm-panel{background:var(--pp-bg);color:var(--ink);border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--pp-shadow);position:absolute;top:12px;right:12px;bottom:12px;width:min(440px,42%);overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateX(24px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1);z-index:3}
.pm-stage.has-panel .pm-panel{opacity:1;transform:none}
.pm-panel[hidden]{display:block;visibility:hidden}
.pm-stage:not(.has-panel) .pm-panel{visibility:hidden;pointer-events:none}
.pp-head{position:sticky;top:0;z-index:2;background:var(--pp-bg);padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-zone{display:inline-flex;align-items:center;gap:8px}
.pp-zone i{width:8px;height:8px;border-radius:9999px;background:var(--tone-ink)}
.pp-close{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--pp-inset);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pp-close:hover{border-color:var(--line-2)}
.pp-title{font-size:32px}
.pp-mono{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.pp-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:18px}
.pp-role{font-size:15px;line-height:1.5;color:var(--ink)}
.pp-phases{display:flex;flex-wrap:wrap;gap:6px}
.pp-phases button{min-height:28px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--pp-inset);font:500 12px var(--sans);color:var(--ink-2);cursor:pointer}
.pp-phases button span{font-family:var(--mono);color:var(--ink-3);margin-right:5px}
.pp-phases button:hover{border-color:var(--kelp);color:var(--kelp-ink)}
.pp-sec{display:flex;flex-direction:column;gap:8px}
.pp-sec ul{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.pp-codes{display:flex;flex-wrap:wrap;gap:6px}
.pp-codes code{font-size:11.5px;background:var(--pp-inset);border:1px solid var(--line);border-radius:4px;padding:3px 7px;color:var(--ink-2)}
.pp-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-links>div{display:flex;flex-direction:column;gap:6px}
.pp-link{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--pp-inset);cursor:pointer;font:inherit;color:var(--ink)}
.pp-link:hover{border-color:var(--line-2)}
.pp-link b{font-weight:500;font-size:13.5px}
.pp-link span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pp-nav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.pp-nav button{min-height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--pp-inset);font:500 13px var(--sans);color:var(--ink);cursor:pointer}
.pp-nav button:hover{border-color:var(--line-2)}

/* "try it": the small working models inside the panel */
.pw{border:1px solid var(--line);border-radius:var(--r);background:var(--pp-inset);padding:14px;display:flex;flex-direction:column;gap:12px}
.pw-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pw-head .kicker{color:var(--kelp-ink)}
.pw-btns{display:flex;flex-wrap:wrap;gap:6px}
.pw-btn{min-height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--pp-bg);font:500 13px var(--sans);color:var(--ink);cursor:pointer}
.pw-btn:hover{border-color:var(--line-2)}
.pw-btn[aria-pressed="true"]{border-color:var(--kelp);background:var(--kelp-soft);color:var(--kelp-ink)}
.pw-btn.pw-primary{background:var(--kelp);border-color:var(--kelp);color:#fff}
.pw-btn.pw-primary:hover{background:var(--kelp-ink)}
.pw-btn:disabled{opacity:.45;cursor:default}
.pw-out{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;animation:pw-in .35s ease-out}
@keyframes pw-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pw-out h4{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;line-height:1.1}
.pw-out p{font-size:14px;color:var(--ink-2)}
.pw-out img{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.pw-mono{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:4px 8px;align-self:flex-start;overflow-wrap:anywhere}
.chip-na{background:transparent;border:1px dashed var(--line-2);color:var(--ink-3)}
.pm-paper .pw-out>.chip{align-self:flex-start}

/* steps */
.pw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.pw-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;padding:10px 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .3s}
.pw-step:first-child{border-top:0}
.pw-step.is-done{opacity:1}
.pw-step.is-now .pw-n{background:var(--kelp);color:#fff;border-color:var(--kelp)}
.pw-n{width:24px;height:24px;border-radius:9999px;border:1px solid var(--line-2);font:500 11px var(--mono);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);grid-row:span 3}
.pw-step b{font-weight:500;font-size:14px}
.pw-step p{font-size:13.5px;color:var(--ink-2)}
.pw-step .pw-mono{margin-top:2px}

/* the hash chain */
.pw-chain{display:flex;flex-direction:column;font-family:var(--mono);font-size:11.5px}
.pw-row{display:grid;grid-template-columns:22px minmax(0,1fr) 70px 70px;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.pw-row:first-child{border-top:0}
.pw-row .pw-txt{font-family:var(--sans);font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-row .pw-h{color:var(--ink-3)}
.pw-row.is-bad .pw-txt,.pw-row.is-bad .pw-h{color:var(--brick-ink)}
.pw-row.is-bad .pw-h b{font-weight:500;text-decoration:underline wavy var(--brick)}
.pw-row.is-edited .pw-txt{color:var(--brick-ink);font-style:italic}
.pw-rowhead{color:var(--ink-3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.pw-anchor{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;padding-top:8px;border-top:1px dashed var(--line-2);color:var(--ink-3)}

/* checks */
.pw-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pw-check{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.pw-check:first-child{border-top:0}
.pw-check small{grid-column:1/-1;color:var(--ink-3);font-size:12px}
.pw-check label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);cursor:pointer}
.pw-check .chip{min-width:74px;justify-content:center}
.pw-verdict{font-size:14px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line)}
.pw-verdict.ok{background:var(--moss-soft);color:var(--moss-ink);border-color:transparent}
.pw-verdict.bad{background:var(--brick-soft);color:var(--brick-ink);border-color:transparent}

/* lease */
.pw-lease{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.pw-agent{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.pw-agent i{width:18px;height:18px;border-radius:9999px}
.pw-agent span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.pw-file{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-align:center}
.pw-lock{width:34px;height:34px;border-radius:var(--r-sm);border:1px dashed var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);transition:all .3s}
.pw-lock.is-held{border-style:solid;border-color:var(--slate);background:var(--slate-soft);color:var(--slate-ink)}
.pw-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);max-height:140px;overflow:auto}
.pw-log li{animation:pw-in .3s ease-out}
.pw-log .bad{color:var(--brick-ink)}.pw-log .ok{color:var(--moss-ink)}

/* ledger kinds, redaction, review */
.pw-entry{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;font-size:12.5px}
.pw-entry dt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.pw-entry dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.pw-entry dd.m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.pw-red{background:var(--ink);color:var(--ink);border-radius:3px;padding:0 4px;font-family:var(--mono);font-size:11px}
.pw-revrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.pw-revrow:first-child{border-top:0}
.pw-revrow-stack{grid-template-columns:minmax(0,1fr);gap:6px}
.pw-revrow-stack small{color:var(--brick-ink);font-size:12px}
.pw-revrow-stack .chip{justify-self:start}
.pw-revrow .pw-btns .pw-btn{min-height:28px;padding:0 8px;font-size:12px}
.pw-images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pw-images .pw-btn{font-family:var(--mono)}
.pw-boot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.pw-boot li{animation:pw-in .3s ease-out}

/* the list view: the same parts as disclosures, readable with no script at all */
.pm-list{display:none;flex-direction:column;gap:22px}
.pm[data-view="list"] .pm-list,.pm:not(.is-live) .pm-list{display:flex}
.pm[data-view="list"] .pm-stage,.pm[data-view="list"] .pm-steps,.pm[data-view="list"] .pm-narration{display:none}
.pm:not(.is-live) .pm-bar,.pm:not(.is-live) .pm-narration{display:none}
.pm-group{display:flex;flex-direction:column;gap:8px}
.pm-group-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.pm-group-sub{font-size:12.5px;color:var(--pm-ink-2)}
.pm-item{background:var(--pm-item-bg);border:1px solid var(--pm-line);border-radius:var(--r)}
.pm-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:220px minmax(0,1fr);gap:4px 18px;padding:14px 16px;align-items:baseline}
.pm-item summary::-webkit-details-marker{display:none}
.pm-item-name{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--pm-ink)}
.pm-item-role{font-size:14px;color:var(--pm-ink-2)}
.pm-item[open] summary{border-bottom:1px solid var(--pm-line)}
.pm-item-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding:14px 16px 16px;font-size:14px;color:var(--pm-ink-2)}
.pm-item-body ul{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.pm-item-disk{grid-column:1/-1}
.pm-codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pm-codes code{font-size:11.5px;border:1px solid var(--pm-line);border-radius:4px;padding:3px 7px;color:var(--pm-ink)}
.pm-item-open{margin-top:4px}

/* the phases as a numbered sequence, on paper */
.pm-seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.pm-seq-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px 14px;padding:22px 0;border-top:1px solid var(--line)}
.pm-seq-n{font-family:var(--mono);font-size:13px;color:var(--kelp-ink);padding-top:6px}
.pm-seq-step h3{font-size:28px;margin-bottom:8px}
.pm-seq-step p{font-size:14.5px;color:var(--ink-2)}

@media (max-width:1100px){
  .pm-seq{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones and narrow tablets: the panel becomes a sheet over the page */
@media (max-width:900px){
  .pm-canvas{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pm.is-live .pm-hint{display:block}
  .pm-pan{transform:none!important}
  .pm-canvas .pm-svg{min-width:980px}
  .pm.pm-paper{--pm-canvas-line:var(--line)}
  .pm-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:86vh;border-radius:16px 16px 0 0;z-index:900;transform:translateY(24px);border-color:var(--line-2);border-width:1px 0 0}
  .pm-stage.has-panel .pm-panel{transform:none}
  .pp-links{grid-template-columns:1fr}
  .pm-item summary{grid-template-columns:minmax(0,1fr)}
  .pm-item-body{grid-template-columns:minmax(0,1fr)}
  .pm-narration{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pm-seq{grid-template-columns:minmax(0,1fr)}
  .pm-bar{gap:10px}
  .pm-steps{order:3;flex-basis:100%}
  .pw-images{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-row{grid-template-columns:18px minmax(0,1fr) 62px}
  .pw-row .pw-prev{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pm-pan,.pm-panel,.pm-edge path.pm-e,.pm-node{transition:none}
  .pm-edge.is-on.is-dash path.pm-e{animation:none}
}

/* On a phone, and on any touch screen, every control of the map is a full tap target. */
@media (max-width:860px),(pointer:coarse){
  .pm-steps button,.pm-views button{height:44px}
  .pm-play{min-height:44px}
  .pp-close{width:44px;height:44px}
  .pp-nav button{min-height:44px}
}