/* Read the Glassware: the instrument view + keypad panel inside the practice shell's stage. */
.gw { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 10px 12px; }
.gw-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 8px; }
.gw-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gw-tool { min-height: 40px; padding: 4px 12px; font-size: 16px; }
.gw-tool[aria-pressed="true"] { background: var(--tlg-primary-tint); border-color: var(--tlg-primary); }
html[data-theme="dark"] .gw-tool[aria-pressed="true"] { background: var(--tlg-surface-3); }
.gw-tip { font-size: var(--tlg-text-md); margin-left: 4px; }
.gw-box { position: relative; flex: 1; min-height: 0; border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border);
  background: linear-gradient(#f7fbfd, #e3eef3); overflow: hidden; }
.gw-box:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.gw-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.gw-svg.is-dragging { cursor: grabbing; }
.gw-lens { cursor: move; }
.gw-lens-ring { stroke: #1b2238; }
.gw-lens-handle { stroke: #1b2238; stroke-linecap: round; }
.gw-box--static { height: 340px; flex: none; }
.ps-brief--drawer .gw-box--static { height: 300px; }
.gw-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px; }
/* The glassware stays light in dark mode: it is a picture of real glass on a bench. */
html[data-theme="dark"] .gw-box { background: linear-gradient(#dfe9ee, #c9d8e0); border-color: var(--tlg-border); }
@media (max-width: 1100px) { .gw { grid-template-columns: minmax(0, 1fr) 280px; } .gw-tip { display: none; } }
@media (max-width: 900px) {
  .gw { position: static; grid-template-columns: 1fr; }
  .gw-box { flex: none; height: 56vh; min-height: 340px; }
}