/* Material study: fixed two-pixel construction, one uninterrupted plate.
   Geometry, controls, font, identity storage and rotary gestures stay upstream. */
:root {
  --bench:#353430; --case:#4b4942; --case-light:#858174; --case-low:#282722;
  --seam:#171713; --plate-hue:43deg; --plate-sat:12%; --plate-lum:69%;
  --plate:hsl(calc(var(--plate-hue) + var(--texture-hue,0deg)) var(--plate-sat) var(--plate-lum));
  --plate-light:#d9d4be; --plate-shadow:#8f8b7c; --ink:#292a23; --muted:#5b5b4f;
  --recess:#292a25; --recess-light:#696a5b; --key:#aba898; --key-light:#d4ceba;
  --glass:#c3c4ac; --glass-light:#e0dec4; --glass-ink:#292d26; --glass-muted:#515748;
  --accent:#a74c38; --accent-light:#d1845e; --accent-low:#682e25; --stamp:#c3bdab;
  --button-face:var(--key); --display:var(--recess);
}
:root[data-material="iron"] {
  --bench:#262625; --case:#363735; --case-light:#686a62; --case-low:#222321;
  --plate-hue:60deg; --plate-sat:3%; --plate-lum:33%; --plate-light:#7c7d70;
  --plate-shadow:#383a34; --ink:#e0ddc8; --muted:#b5b5a3; --key:#5b5e55;
  --key-light:#888b7c; --recess:#222520; --recess-light:#555b4d;
  --glass:#a8b19a; --glass-light:#c2cbb0; --glass-ink:#252e23; --glass-muted:#46513d;
  --accent:#bb6c3d; --accent-light:#dfaa68; --accent-low:#703e27; --stamp:#c0c0ac;
}
:root[data-material="enamel"] {
  --bench:#3c342e; --case:#65594a; --case-light:#9b8c72; --case-low:#332d27;
  --plate-hue:39deg; --plate-sat:29%; --plate-lum:77%; --plate-light:#eee0bf;
  --plate-shadow:#a89a7b; --ink:#3a3228; --muted:#73644d; --key:#c8b795;
  --key-light:#e8d5b0; --recess:#382f27; --recess-light:#776952;
  --glass:#c4bc9f; --glass-light:#e6d6ae; --glass-ink:#3d3829; --glass-muted:#655c44;
  --accent:#8e4033; --accent-light:#c47d56; --accent-low:#592c24; --stamp:#d6c5a6;
}
html,body {background:var(--bench);color:var(--ink)}
.device {background:var(--case);border-color:var(--seam);box-shadow:inset 2px 2px var(--case-light),inset -2px -4px var(--case-low),4px 4px var(--seam),8px 8px #20201c;background-image:url('./materials/study/case-edge.svg');background-size:800px 480px;background-repeat:no-repeat}
.case-screw {background:#8c897c;border-color:var(--seam);box-shadow:0 2px #11120f}
.case-screw:after {background:#34352d}
.left {border-color:var(--seam);background:var(--plate);box-shadow:inset 2px 2px var(--plate-light)}
.unit {background:var(--plate);border-color:var(--seam);box-shadow:inset 2px 2px var(--plate-light),inset -2px -2px var(--plate-shadow)}
.unit::before {background:url('./materials/study/sf-plate-nw.png') 2px 2px/60px 60px no-repeat,url('./materials/study/plate-edge.svg') left top/540px 300px no-repeat;opacity:.55;filter:none}
.unit>label,#unit-note,.unit>label span {color:var(--muted)}
select {background-color:var(--glass);color:var(--glass-ink);border-color:var(--seam);box-shadow:inset 2px 2px var(--plate-shadow),inset -2px -2px var(--glass-light)}
.unit-art:before {border-color:var(--seam);background:var(--recess) url('./materials/study/grille.svg') left top/8px 8px repeat;box-shadow:inset 2px 2px #11120f,inset -2px -2px var(--recess-light)}
.unit-art img {filter:drop-shadow(2px 2px #151511)}
.unit-art button {--button-face:var(--key);color:var(--ink)}
.unit-art button:hover {--button-face:var(--key-light)}
.parts-heading {background:var(--plate);color:var(--ink);box-shadow:inset 0 2px var(--plate-light)}
.parts-heading span {color:var(--muted)}
#parts {background:var(--recess);box-shadow:inset 2px 2px var(--seam);scrollbar-color:var(--plate-shadow) var(--recess)}
#parts button {--button-face:var(--key);color:var(--ink);background:var(--seam)!important}
#parts button:before {box-shadow:inset 0 2px var(--key-light),inset 0 -2px var(--plate-shadow)}
#parts button>span {color:var(--muted);border-color:var(--plate-shadow)}
#parts button[aria-current=true] {--button-face:var(--recess);color:#e2dbc7;box-shadow:inset 0 0 0 2px var(--seam)!important}
#parts button[aria-current=true]:before {box-shadow:inset 2px 2px #11120f,inset -2px -2px var(--recess-light);border-left:4px solid var(--unit-accent,var(--accent))}
#parts button[aria-current=true]>span {color:#b5b29e;border-color:var(--recess-light)}
#parts button[aria-current=true] i {color:var(--accent-light)}
.left-foot {background:var(--seam);color:var(--stamp)}
.screen {background:var(--glass);color:var(--glass-ink);border-color:var(--seam);box-shadow:inset 4px 4px #777a67,inset -2px -2px var(--glass-light)}
.screen::before {background:url('./materials/study/glass-edge.svg') left top/540px 102px no-repeat;opacity:.45}
.screen:after {background:var(--glass-light);top:auto;bottom:2px;left:4px}
.screen-top,.screen p,#edit-hint:not(:empty) {color:var(--glass-muted)}
.screen-top #mode {color:var(--glass-ink)}
.screen-top #mode:before {background:var(--accent);box-shadow:2px 0 var(--accent-low),0 2px var(--accent-low)}
h1 {color:var(--glass-ink);text-shadow:2px 2px #d9d9bd55}
#rack {background:var(--plate);border-color:var(--seam);box-shadow:inset 2px 2px var(--plate-light),inset -2px -2px var(--plate-shadow)}
#rack::before {background:url('./materials/study/sf-plate-nw.png') 2px 2px/60px 60px no-repeat,url('./materials/study/sf-plate-se.png') right 2px bottom 2px/60px 60px no-repeat,url('./materials/study/plate-edge.svg') left top/540px 300px no-repeat;opacity:.55}
#rack .cell {border-color:transparent;box-shadow:none;background:transparent}
/* Keep border geometry, but dissolve the tile lines into the shared faceplate. */
.cell output {color:var(--ink)}
.cell output:before {background:var(--plate-shadow)}
.cell label {color:var(--ink)}
.knob {background-image:url('./materials/study/bakelite.svg')}
.knob:before {background-image:url('./materials/study/dial-scale.svg')}
.knob:after {background:#e7d6b1;box-shadow:2px 0 #a99878,0 2px #74654c}
.knob:focus-within {outline-color:var(--accent)}
.toggle {--button-face:var(--key);color:var(--ink)}
.toggle:before {box-shadow:inset 2px 2px var(--key-light),inset -2px -4px var(--plate-shadow)}
.toggle[aria-pressed=true] {--button-face:var(--accent);color:#fff1d2}
.toggle[aria-pressed=true]:before {box-shadow:inset 2px 2px var(--accent-light),inset -2px -4px var(--accent-low)}
.cell.unavailable .toggle {--button-face:var(--plate-shadow);color:var(--ink)}
.cell.unused,.unused>span,.unused p {color:var(--muted)}
.blank-socket {background:var(--plate);box-shadow:inset 2px 2px var(--plate-shadow),inset -2px -2px var(--plate-light)}
.right footer {color:var(--stamp)}
.outside-note {color:var(--stamp)}
.outside-note a {color:var(--stamp)}
#identity-dialog {background:var(--plate);border-color:var(--seam);color:var(--ink);box-shadow:inset 2px 2px var(--plate-light),inset -2px -2px var(--plate-shadow),6px 6px var(--seam)}
#identity-form input,#identity-form select,#identity-form textarea {background-color:var(--glass);color:var(--glass-ink);border-color:var(--plate-shadow);box-shadow:inset 2px 2px var(--plate-shadow)}
#identity-form #save-editor {--button-face:var(--accent);color:#fff1d2}
#identity-form #identity-texture-hue {accent-color:var(--accent)}
#parts button:focus-visible::before,#parts button[aria-current=true]:focus-visible::before,.toggle[aria-pressed=true]:focus-visible::before {box-shadow:inset 0 0 0 2px var(--accent-light)}
:root[data-material="iron"] .knob:before {opacity:.8;filter:brightness(1.8)}
:root[data-material-embedded="true"] body {padding:20px 0;min-height:0}
:root[data-material-embedded="true"] .device {margin:0 auto}
:root[data-material-embedded="true"] .outside-note {display:none}
@media(max-width:799px) {#rack::before{background-size:60px 60px,60px 60px,100% 100%}.screen::before{background-size:100% 100%}}