/* WORD FOR WORD'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 */

/* 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 light round the lit tiles, over the face; the slots' contacts; the tiles over those; the parts over everything */
.panel2d { isolation: isolate; }
.p2-glow { position: absolute; pointer-events: none; z-index: 1; }
.p2-pin { position: absolute; width: 1.3%; aspect-ratio: 1; border-radius: 50%; background: #e2be6e; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.p2 { z-index: 4; }

/* a tile: black FR4, its cut edge catching the light below and to the right, its letters bare board lit from behind by --lit (0..1) */
.tile { --lit: 0; position: absolute; z-index: 3; display: block; padding: 0; margin: 0; border: 0; cursor: grab; touch-action: none;
  background: #141417; border-radius: 0.75mm; box-shadow: inset -0.12em -0.14em 0 rgb(112 102 70), 0.12em 0.2em 0.3em rgb(0 0 0 / 0.75);
  -webkit-user-select: none; user-select: none; }
.tile svg { display: block; width: 100%; height: 100%; }
.tile .letters { fill: color-mix(in srgb, rgb(132 122 86), rgb(255 250 236) calc(var(--lit) * 100%));
  filter: drop-shadow(0 0 calc(var(--lit) * 0.18em) rgb(255 240 205 / 0.9)); }
.tile.empty { background: transparent; box-shadow: none; outline: 1px dashed rgb(212 175 55 / 0.0); cursor: pointer; }
.tile.empty:hover, .tile.empty:focus-visible { outline-color: rgb(212 175 55 / 0.55); }
.tile.blank { cursor: grab; }
.tile[aria-pressed="true"] { outline: 2px solid rgb(240 216 120 / 0.95); outline-offset: 1px; }
.tile:focus-visible { outline: 2px solid rgb(212 175 55 / 0.8); outline-offset: 1px; }
.tile.ghost { position: fixed; z-index: 50; pointer-events: none; opacity: 0.92; transform: rotate(-3deg); cursor: grabbing; }

/* beside the panel: what it sings, the tin and the writer */
#scope { display: block; width: 100%; height: 170px; }
.status { min-height: 1.4em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.tin-box { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s-line); }
.tin-label { margin: 0 0 6px; font: 400 0.74rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--gold-hi); }
.tin-label span { color: var(--dim); }
#tin { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); gap: 5px; }
.tin-tile { aspect-ratio: 23 / 8.5; padding: 0; border: 0; border-radius: 3px; background: #141417; cursor: grab; touch-action: none;
  box-shadow: inset -1px -1px 0 rgb(112 102 70); -webkit-user-select: none; user-select: none; }
.tin-tile svg { display: block; width: 100%; height: 100%; }
.tin-tile .letters { fill: rgb(200 186 136); }
.tin-tile:hover .letters { fill: rgb(240 230 200); }
.tin-tile[aria-pressed="true"] { outline: 2px solid rgb(240 216 120 / 0.95); outline-offset: 1px; }
.writer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.writer label { font: 400 0.74rem/1 "Space Mono", ui-monospace, monospace; color: var(--dim); }
.writer input { flex: 1 1 7rem; min-width: 0; height: 2.2rem; padding: 0 0.6rem; font: 400 0.85rem/1 "Space Mono", ui-monospace, monospace;
  color: var(--gold-hi); background: transparent; border: 1px solid var(--s-line); }
.writer input:focus { outline: none; border-color: var(--gold); }
.pad { font: 400 0.8rem/1 "Space Mono", ui-monospace, monospace; color: var(--gold-hi); background: transparent; border: 1px solid var(--s-line); height: 2.2rem; padding: 0 0.7rem; cursor: pointer; }
.pad:hover { border-color: var(--gold); }
.pad:disabled { opacity: 0.45; cursor: default; }
#patch-note { min-height: 6.4em; }
@media (max-width: 460px) { #scope { height: 120px; } #tin { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); } }