/* 7 November 2026: map interface pass. The map opens sparse, as sections 1 to 3 do, and each part opens on request:
   values show for the hovered and selected operation and, once the field is zoomed in, for the rest; the field has
   its whole width; the List is a sidebar beside the record card; the card opens on its title and X, with its parts
   as section 4's slide-downs. */

/* two fingers on the field zoom the map, so the browser's own page pinch stays off over it; one finger still scrolls */
#inference-resolution-map #cv{touch-action:pan-y !important}
#inference-resolution-map #cv.dragging{cursor:grabbing}

/* values: hidden ones keep their place and their keyboard order, and show while focused */
#inference-resolution-map #mapShell .pt{transition:opacity .25s ease}
#inference-resolution-map #mapShell .pt.veil:not(:focus-visible){opacity:0 !important;pointer-events:none}

/* under the field: the record card, with the List as a sidebar on its right; on phones the List follows the card */
@media (min-width:701px){
  #inference-resolution-map #mapShell #stage{display:grid !important;grid-template-columns:minmax(0,1fr) clamp(260px,24vw,330px);column-gap:12px;row-gap:10px}
  #inference-resolution-map #mapShell #stage > .fieldbox{grid-column:1 / -1;grid-row:1}
  #inference-resolution-map #mapShell #stage > #dock{grid-column:1;grid-row:2;align-self:start;min-width:0}
  #inference-resolution-map #mapShell #stage > #panel{grid-column:2;grid-row:2;align-self:stretch;min-height:420px;contain:size}
  #inference-resolution-map #mapShell #stage > #panel.folded{align-self:start;min-height:0;contain:none}
}
@media (max-width:700px){
  #inference-resolution-map #mapShell #stage > .fieldbox{order:1}
  #inference-resolution-map #mapShell #stage > #dock{order:2}
  #inference-resolution-map #mapShell #stage > #panel{order:3}
  #inference-resolution-map #mapShell #stage > #panel:not(.folded){height:min(70svh,560px) !important}
}
#inference-resolution-map #mapShell #stage > #panel{position:relative !important;inset:auto !important;width:auto !important;max-width:none !important;
  border-radius:12px !important}
#inference-resolution-map #mapShell #stage > #panel.folded{height:auto !important}

/* the List's button, also its heading */
#inference-resolution-map #mapShell .panel .list-toggle > span:not(.arrow){all:unset;color:inherit}
/* the page's ▸ arrow as a CSS shape: inside the map every property is reverted, which also drops SVG path data */
#inference-resolution-map :is(#mapShell .panel .list-toggle,#dock #cardBody .slide-toggle) > .arrow{display:block;flex:0 0 auto;width:9px;height:9px;
  background:var(--c1,#39b3f8);clip-path:polygon(15% 5%,90% 50%,15% 95%);align-self:center;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
#inference-resolution-map #mapShell .panel .list-toggle{all:unset;box-sizing:border-box;position:relative;z-index:4;display:flex;align-items:baseline;
  gap:10px;width:100%;padding:14px 18px 10px;cursor:pointer;font-size:16px;line-height:1.3;color:var(--c2,#13a4fd);white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
#inference-resolution-map #mapShell .panel .list-toggle:hover{color:var(--c1,#39b3f8)}
#inference-resolution-map #mapShell .panel .list-toggle:hover .arrow{transform:translateX(2px)}
#inference-resolution-map #mapShell .panel .list-toggle[aria-expanded="true"] .arrow{transform:rotate(-90deg)}
#inference-resolution-map #mapShell .panel .list-toggle:focus-visible{outline:1px solid var(--c1,#39b3f8);outline-offset:-4px;border-radius:12px}
#inference-resolution-map #mapShell .panel:not(.folded){display:flex;flex-direction:column}
#inference-resolution-map #mapShell .panel:not(.folded) > .pbody{flex:1 1 auto;min-height:0}
#inference-resolution-map #mapShell .panel.folded > .pfade{display:none}

/* the record card: title and X, then the named parts as rows that slide down. The map's stylesheet reverts every
   property inside the dock, so these rows state their whole look here. */
#inference-resolution-map #dock #recHead{padding:16px 18px 0}
#inference-resolution-map #dock #cardBody{flex:1 1 100%;width:100%;min-width:0}
#inference-resolution-map #dock #cardBody .rec-slides,#inference-resolution-map #dock #cardBody .rec-slides .slide{display:block;width:100%;margin:0;padding:0}
#inference-resolution-map #dock #cardBody .rec-slides{margin-top:10px}
#inference-resolution-map #dock #cardBody .slide-toggle{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:12px;width:100%;
  padding:8px 0;cursor:pointer;font-size:16px;line-height:1.35;color:var(--c2,#13a4fd);-webkit-tap-highlight-color:transparent}
#inference-resolution-map #dock #cardBody .slide-toggle .slide-label{all:unset;color:inherit;transition:color .25s}
#inference-resolution-map #dock #cardBody .slide-toggle:hover{color:var(--c1,#39b3f8)}
#inference-resolution-map #dock #cardBody .slide-toggle:hover .arrow{transform:translateX(2px)}
#inference-resolution-map #dock #cardBody .slide-toggle[aria-expanded="true"] .arrow{transform:rotate(-90deg)}
#inference-resolution-map #dock #cardBody .slide-toggle:focus-visible{outline:1px solid var(--c1,#39b3f8);outline-offset:4px}
#inference-resolution-map #dock #cardBody .slide-body[hidden]{display:none}
#inference-resolution-map #dock #cardBody .slide-inner{padding:2px 0 18px;max-width:none}
#inference-resolution-map #dock #cardBody .slide-inner :is(p,td,th){font-size:13px;line-height:1.5}
#inference-resolution-map #dock #cardBody .slide-inner > p{max-width:110ch;margin:0}
#inference-resolution-map #dock #cardBody .cs{margin:12px 0 0}