/* SATCHEL OPENS UPWARD (the Professor, 2026-10-06: "i dont want the satchel to cover itself as a clickable object, and the objects
   beside"; FEEDBACK s5: "when the satchel expands, it expands UPWARD only, above itself. The scene's useful items stay visible below it").
   Loaded after satchel-steady.css; it only overrides.
   Open: the bag stays in its corner (it is the open/close button), the leather pane stands ABOVE it, and the "useful here" things stay
   beside the bag, tappable as shortcuts (js/play-stage.js hintTap). */
:root{--ps-bag-h:calc(min(112px,max(72px,calc((100vw - var(--ps-col)) / 2 - 24px))) * 92 / 112)}
@media (max-width:699px){ :root{--ps-bag-h:79px} }
@media (orientation:landscape) and (max-height:520px){ :root{--ps-bag-h:69px} }
/* the bag keeps its place and its size when the satchel opens */
html body.ps-on .ps-sat.open .ps-bag{display:block;align-self:flex-end;flex:none}
html body.ps-on.ps-jim-left .ps-sat.open .ps-bag{align-self:flex-start;margin:0 0 6px 10px}
html body.ps-on .ps-sat.open .ps-bag .peek{opacity:.35}                  /* its things are out on the shelves */
/* the pane: everything that was there, minus the bag's height, so it ends above the bag */
html body.ps-on .ps-sat.open .ps-sat-pane{height:calc(var(--sat-room) - 34px - var(--ps-bag-h) - 12px);margin-bottom:6px}
/* the useful-here things stay out beside the bag, over everything else in the corner */
html body.ps-on.ps-bag-open .ps-sat-hints:not([hidden]){display:flex}
html body.ps-on .ps-sat-hints{z-index:12;max-height:var(--ps-bag-h)}
@media (max-width:1099px){ html body.ps-on.ps-bag-open .ps-sat-hints{display:none} }

/* FIT THE CONTENT (Eivind, 2026-10-07: "we get a text that doesn't fit. Please tighten up this code, not waste any space").
   The open pane is as tall as what is in it: the item card (picture, name, words, magnifier, the one answer line) and the shelves. No fixed
   card height, no stretched shelf area. It is still capped by the room above the bag; when it hits the cap the shelves scroll and the answer
   line is held to three lines (js/play-stage.js fitPane sets .tight). It grows UPWARD from the bag, so the shelves never move when the words change. */
html body.ps-on .ps-sat.open .ps-sat-pane{height:auto;min-height:0;max-height:calc(var(--sat-room) - 34px - var(--ps-bag-h) - 12px)}
html body.ps-on .ps-sat.open .ps-sat-all{flex:none!important;height:auto!important;min-height:0;max-height:none;overflow:visible;padding:14px 16px 10px;margin:8px 8px 0}
html body.ps-on .ps-sat.open .ps-sat-all .ps-big{gap:12px}
html body.ps-on .ps-sat.open .ps-sat-all .ps-iname{margin:2px 0 2px}
html body.ps-on .ps-sat.open .ps-sat-all .ps-idesc{font-size:16px;line-height:1.32}
html body.ps-on .ps-sat.open .ps-sat-all .ps-acts{margin-top:6px}
html body.ps-on .ps-sat.open .ps-sat-all .ps-ans{margin:8px 0 0;padding-top:6px;font-size:15px;line-height:1.35;overflow:visible;overflow-wrap:anywhere}
html body.ps-on .ps-sat.open .ps-sat-pane.tight .ps-sat-all .ps-ans{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html body.ps-on .ps-sat.open .ps-sat-row{flex:0 1 auto;min-height:0;padding:0 14px 12px}
html body.ps-on .ps-sat.open .ps-shelf{margin-top:6px}
html body.ps-on .ps-sat.open .ps-plank{padding:6px 6px 12px}
html body.ps-on .ps-sat.open .ps-sat-pane::before{inset:6px}
@media (max-width:599px){ html body.ps-on .ps-sat.open .ps-sat-all{padding:12px 12px 8px} html body.ps-on .ps-sat.open .ps-sat-all .ps-bigimg{width:84px} }