/* DRAWN's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own.
   The page is gold like every module's; only the panel's own lights keep their colour: the white behind the windows. */

/* 20 HP at the line's scale */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; overflow-x: clip; }
.stage:focus { outline: none; }

/* the card: the graphite and the light behind it on a canvas over the face, and the place to draw, over everything but the cables */
.panel2d { isolation: isolate; }
.p2-draw { position: absolute; pointer-events: none; z-index: 2; }
.p2 { z-index: 3; }
.p2-card { position: absolute; z-index: 5; cursor: crosshair; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; }
.p2-cell { position: absolute; }
.p2-cell:focus { outline: none; }
.p2-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* what you're holding: a sprite with its point at the pointer */
.p2-tool { position: absolute; z-index: 6; pointer-events: none; width: 34%; height: auto; transform-origin: 0 50%; transform: rotate(-58deg); filter: drop-shadow(-2px 5px 3px rgba(0, 0, 0, 0.5)); }
.p2-tool.p2-rubber { width: 12%; transform: translate(-50%, -50%) rotate(-14deg); transform-origin: 50% 50%; }
.p2-tool[hidden] { display: none; }

/* the tray under the panel: what you draw with */
.tray { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; margin: 0.7rem 0 0.2rem; }
.tray button { flex: 1 1 4.6rem; min-width: 4.4rem; height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; padding: 0.2rem 0.3rem; background: rgba(212, 175, 55, 0.05); border: 1px solid rgba(212, 175, 55, 0.3); color: var(--gold); font: 400 0.68rem/1 "Space Mono", ui-monospace, monospace; cursor: pointer; }
.tray button[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 175, 55, 0.16); }
.tray img { height: 1.1rem; width: auto; max-width: 92%; object-fit: contain; }
.tray .thumb { display: block; width: 1.1rem; height: 1.1rem; border-radius: 48% 48% 44% 44%; background: linear-gradient(160deg, #c79a7a, #8a5e46); }
.tray .newcard { display: block; width: 1.5rem; height: 1.1rem; background: #17171a; border: 1px solid rgba(212, 175, 55, 0.7); }

/* beside the panel: the boxes and the columns */
#scope { display: block; width: 100%; height: 196px; }
.status { min-height: 1.4em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.2em; }