/* Tool view: the original working instrument, without its project website. */
html:has(.practical) { scroll-behavior: auto; }
body.practical {
  margin: 0;
  background: #edf2e9;
  color: #213a32;
  min-height: 100svh;
  font-family: Arial, sans-serif;
  padding: max(4px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
}
.practical main.workspace { width: min(100%, 384px, max(298px, calc((100svh - 68px) * .4795))); max-width: none; padding: 0; margin: 0 auto; }
.practical .instrument-bar,.practical .guest-bar,.practical .play-controls,.practical .device-actions,.practical .sheet-head {
  display: flex; align-items: center; gap: 5px;
}
.practical .instrument-bar { min-height: 43px; padding-bottom: 4px; }
.practical .power-state { font: 600 11px/1.2 Arial,sans-serif; }
.practical .instrument-bar button,.practical .guest-bar button,.practical .play-controls button,.practical .sheet-head button,.practical .device-actions button,.practical .sheet-action {
  min-height: 36px; padding: 6px 10px; border-radius: 7px;
  background: #dce5d9; color: #203c31; font: 600 13px/1.1 Arial,sans-serif;
  border: 1px solid #bdcbbe; touch-action: manipulation;
}
.practical .guest-bar { padding: 0 0 5px; }
.practical .guest-bar h1 { margin: 0 auto 0 0; font: 650 16px/1.15 Arial,sans-serif; overflow-wrap: anywhere; }
.practical .guest-bar button { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.practical #guest-section { padding: 0; }
.practical .handheld { margin: 0; }
.practical .handheld .hardware-keys button,.practical .play-controls button { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.practical .guest-unit .hardware-keys button,.practical .play-controls button { touch-action:none; }
.practical .play-controls { justify-content:center; margin: 10px 0 4px; }
.practical .play-controls button { flex: 1; min-height: 44px; }
.practical .play-controls .held { background: #244a39; color: white; }
.practical #guest-status { margin: 4px 0; font: 12px/1.3 Arial,sans-serif; text-align:center; }
.practical dialog { width:min(410px,calc(100vw - 22px)); max-height: min(82svh,650px); padding:16px; margin:auto; overflow:auto; overscroll-behavior:contain; background:#f7f9f3; color:#223d31; border:1px solid #a0b6a8; border-radius:13px; box-shadow:0 12px 50px #15231b4d; }
.practical dialog::backdrop { background:#18291ed6; }
.practical .sheet-head { justify-content:space-between; margin-bottom:10px; }
.practical .sheet-head h2 { margin:0; font:650 22px/1.25 Arial,sans-serif; }
.practical dialog h3 { margin:16px 0 6px; font:650 15px/1.3 Arial,sans-serif; }
.practical .launcher-list { gap:0; }
.practical .launcher-list button { width:100%; min-height:48px; padding:9px 3px; }
.practical dialog p { font-size:14px; line-height:1.45; }
.practical dialog details summary { min-height:44px; cursor:pointer; }
.practical .device-actions { margin:12px 0; }
.practical .controls-credit,.practical #guest-credit { color:#455c4c; }
.practical dialog .credits { margin-top:14px; font-size:13px; }
.practical .control-row { color:#304f3e; justify-content:space-between; }
.practical [hidden] { display:none!important; }
.practical button:focus-visible,.practical a:focus-visible,.practical summary:focus-visible { outline:3px solid #ba6624; outline-offset:2px; }
@media (orientation:portrait) and (max-width:680px) {
  .practical .instrument-bar button { min-height:42px; }
  .practical .handheld .directions button::after { content:""; position:absolute; inset:-3px; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:450px) {
  .practical main.workspace { width:min(100%,880px); }
  .practical .instrument-bar { min-height:37px; padding-bottom:3px; }
  .practical .instrument-bar button,.practical .guest-bar button { min-height:32px; }
  .practical .handheld,.practical .guest-unit.device {
    height:max(282px,calc(100svh - 55px)); width:100%; aspect-ratio:auto;
    border-radius:14px; overflow:visible;
  }
  .practical .handheld .plate { left:3%; right:auto; width:29%; top:5%; height:9%; }
  .practical .plate-brand { font-size:clamp(11px,2vw,17px); }
  .practical .plate-brand .crest { width:23px; height:25px; }
  .practical .hardware-name { font-size:8px; }
  .practical .handheld .bezel { left:2.5%; width:30%; top:22%; height:63%; }
  .practical .handheld .instrument-screen,.practical .handheld .guest-screen { width:min(92%,calc((100svh - 80px) * .86)); }
  .practical .handheld .hardware-keys { inset:0 0 0 33%; }
  .practical .hardware-keys .graph-row { top:1%; height:14%; }
  .practical .hardware-keys .edit-rows { top:17%; height:23%; }
  .practical .hardware-keys .directions { top:16%; height:23%; }
  .practical .hardware-keys .science-bank { top:40%; height:30%; }
  .practical .hardware-keys .number-bank { top:70.5%; height:28.5%; }
  .practical .hardware-keys .cap small { font-size:clamp(6px,1.1vw,9px); }
  .practical .handheld .hardware-keys .cap { padding-bottom:1%; }
  .practical .hardware-keys .cap span { height:72%; font-size:clamp(9px,2vw,16px); }
  .practical .hardware-keys .directions button { font-size:15px; }
  .practical .handheld .statusline,.practical .handheld .lcd-footer { font-size:8px; }
  .practical .guest-bar { position:absolute; left:2%; top:42px; z-index:2; width:30%; flex-wrap:wrap; justify-content:center; }
  .practical .guest-bar h1 { flex-basis:100%; text-align:center; color:#e9eedc; font-size:13px; }
  .practical #guest-section { position:relative; }
  .practical .guest-bar { top:5px; left:3%; width:28%; }
  .practical #guest-section .plate { display:none; }
  .practical #guest-section .bezel { top:27%; height:51%; }
  .practical .guest-bar button { font-size:10px; padding:3px 5px; }
  .practical .play-controls { position:absolute; top:78%; left:3%; width:28%; margin:0; gap:2px; }
  .practical .play-controls button { padding:3px; font-size:10px; min-height:40px; }
}
@media (prefers-reduced-motion:reduce) { .practical * { scroll-behavior:auto!important; } }
/* A game can use two simultaneous touches. These keys stay next to the LCD;
   the complete emulated keypad remains available below it. */
.practical #guest-section { scroll-margin-top:55px; }
.practical .play-controls {
  display:grid; grid-template-columns:repeat(3,1fr) 1.4fr 1.4fr;
  grid-template-areas:". up . start fire" "left down right start fire";
  gap:3px; margin:0 0 6px; width:auto;
}
.practical .play-controls button { min-height:44px; padding:2px; font-size:13px; }
.practical .play-up {grid-area:up}
.practical .play-left {grid-area:left}
.practical .play-down {grid-area:down}
.practical .play-right {grid-area:right}
.practical .play-enter {grid-area:start}
.practical .play-fire {grid-area:fire}
@media (orientation:portrait) and (max-height:710px) {
  .practical #math-view .handheld {height:max(492px,calc(100svh - 61px));aspect-ratio:auto}
  .practical #math-view .instrument-screen {max-height:95%}
  .practical #math-view .hardware-keys .cap small {font-size:6.5px}
}
@media (orientation:landscape) and (max-height:600px) and (min-width:450px) {
  .practical .workspace {--screen-group:clamp(194px,33%,282px)}
  .practical .handheld .hardware-keys {
    inset:0 0 0 var(--screen-group); padding:5px 10px 7px 4px; display:grid;
    grid-template-columns: .96fr 1.15fr;
    grid-template-rows: minmax(31px,.21fr) minmax(72px,.43fr) minmax(144px,1fr);
    gap:6px 10px;
  }
  .practical .hardware-keys .graph-row,.practical .hardware-keys .edit-rows,
  .practical .hardware-keys .science-bank,.practical .hardware-keys .number-bank {
    position:static; width:100%; height:100%; transform:none; align-self:stretch;
  }
  .practical .hardware-keys .graph-row {grid-column:1/-1;grid-row:1}
  .practical .hardware-keys .graph-row button:nth-child(n+4) {transform:none}
  .practical .hardware-keys .edit-rows {grid-column:2;grid-row:2}
  .practical .hardware-keys .directions {position:relative;top:auto;left:auto;right:auto;width:111px;max-width:100%;height:100%;grid-column:1;grid-row:2;justify-self:center}
  .practical .hardware-keys .science-bank {grid-column:1;grid-row:3}
  .practical .hardware-keys .number-bank {grid-column:2;grid-row:3;border:0;padding:0}
  .practical #guest-section .bezel {top:17%;left:1.5%;width:calc(var(--screen-group) - 16px);height:44%}
  .practical #guest-section .guest-screen {max-width:96%;width:auto;height:94%}
  .practical .guest-bar {left:1%;width:calc(var(--screen-group) - 12px)}
  .practical .guest-bar h1 {flex-basis:auto;margin-right:0}
  .practical .play-controls {position:absolute;top:auto;bottom:29px;left:1.4%;width:calc(var(--screen-group) - 14px);margin:0;gap:2px}
  .practical .play-controls button {min-width:0;min-height:42px;font-size:11px}
}
@media (orientation:landscape) and (max-height:600px) and (min-width:450px) {
  .practical .play-controls {z-index:2}
}