/* FOREVER:NEON // FN/B1 HARDWARE STANDARD 87
   Presentation-only physical equipment language for Book 1 (1987-1989).
   Scanlines belong to displays, not pages. Operable-looking controls must
   be backed by real controls/state; decorative fasteners are the exception. */

:root{
  --fn87-case:#4c4a42;
  --fn87-case-hi:#68685d;
  --fn87-case-lo:#2b2c27;
  --fn87-face:#151813;
  --fn87-seam:#747566;
  --fn87-nameplate:#d4c9aa;
  --fn87-nameplate-ink:#24231e;
  --fn87-crt:#080b08;
  --fn87-green:#a8d49b;
  --fn87-green-dim:#547054;
  --fn87-amber:#e4c37b;
  --fn87-red:#a94f42;
  --fn87-paper:#d2c5a3;
  --fn87-paper-ink:#27241d;
  --fn87-shadow:rgba(0,0,0,.62);
  --fn87-radius:2px;
  --fn87-mono:'Share Tech Mono','IBM Plex Mono',monospace;
}

.fn87-machine{
  position:relative;
  border:3px solid #171914;
  border-radius:var(--fn87-radius);
  background:
    linear-gradient(100deg,rgba(255,255,255,.06),transparent 9% 90%,rgba(0,0,0,.18)),
    linear-gradient(180deg,var(--fn87-case-hi),var(--fn87-case) 16%,var(--fn87-case-lo));
  box-shadow:0 28px 70px var(--fn87-shadow),inset 0 0 0 2px #737568,inset 0 -12px 24px rgba(0,0,0,.35);
}
.fn87-machine::before,.fn87-machine::after{
  content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,#85867c,#23251f 58%,#0b0c0a);
  box-shadow:inset 0 0 0 1px #111;
}
.fn87-machine::before{left:9px}.fn87-machine::after{right:9px}

.fn87-nameplate{
  border:1px solid #37372f;background:linear-gradient(#ddd2b6,#b7ad92);
  color:var(--fn87-nameplate-ink);padding:5px 8px;font:10px/1.25 var(--fn87-mono);
  letter-spacing:.09em;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.5);
}
.fn87-provenance{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
  color:#b7ae91;font:9px/1.35 var(--fn87-mono);letter-spacing:.09em;text-transform:uppercase;
}
.fn87-provenance b{color:var(--fn87-nameplate);font-weight:600}
.fn87-provenance .maker-badge{
  border:1px solid #242620;background:#ddd4bd;color:#24231e;padding:2px 6px;
  font-weight:700;letter-spacing:.06em;box-shadow:inset 0 -2px rgba(0,0,0,.08);
}

.fn87-bay{
  position:relative;border:1px solid #161813;border-radius:var(--fn87-radius);
  background:linear-gradient(#44463e,#272923);padding:12px;
  box-shadow:inset 0 0 0 2px #56584f,inset 0 0 28px rgba(0,0,0,.25);
}
.fn87-bay::before,.fn87-bay::after{
  content:"";position:absolute;top:5px;width:6px;height:6px;border-radius:50%;
  background:#20221d;box-shadow:inset 1px 1px #85867a;
}
.fn87-bay::before{left:5px}.fn87-bay::after{right:5px}
.fn87-label{
  color:#cbbf9b;font:9px/1.3 var(--fn87-mono);letter-spacing:.12em;text-transform:uppercase;
}

.fn87-crt{
  position:relative;border:10px solid #10120e;border-radius:13%/8%;
  background:radial-gradient(ellipse at 50% 42%,#102014 0,var(--fn87-crt) 64%,#020302 100%);
  color:var(--fn87-green);box-shadow:inset 0 0 54px #000,inset 0 0 8px rgba(168,212,155,.24),0 3px 8px #111;
  overflow:hidden;
}
.fn87-crt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(168,212,155,.045) 3px 4px);
}
.fn87-crt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(116deg,rgba(255,255,255,.035),transparent 28%);
  box-shadow:inset 0 0 42px rgba(0,0,0,.7);
}
.fn87-crt[data-powered="off"]{filter:brightness(.18);color:transparent;text-shadow:none}
.fn87-crt[data-powered="off"]::before{opacity:0}

.fn87-readout{
  display:inline-block;min-width:3.2em;padding:2px 6px;border:2px inset #060806;
  background:#080a07;color:var(--fn87-amber);font:22px/1 'VT323',var(--fn87-mono);
  letter-spacing:.05em;text-align:center;text-shadow:0 0 6px rgba(228,195,123,.55);
}
.fn87-readout--green{color:var(--fn87-green);text-shadow:0 0 6px rgba(168,212,155,.45)}
.fn87-readout[data-state="fault"]{color:#dc6c5f}

.fn87-pilot{
  display:inline-block;width:11px;height:11px;border-radius:50%;background:#343830;
  box-shadow:inset 0 0 3px #000,0 0 0 2px #12140f;
}
.fn87-pilot[data-state="on"],.fn87-pilot.is-lit{background:var(--fn87-green);box-shadow:0 0 10px rgba(168,212,155,.65),0 0 0 2px #12140f}
.fn87-pilot--amber[data-state="on"]{background:var(--fn87-amber);box-shadow:0 0 10px rgba(228,195,123,.65),0 0 0 2px #12140f}
.fn87-pilot--red[data-state="on"]{background:#d06454;box-shadow:0 0 10px rgba(208,100,84,.65),0 0 0 2px #12140f}

.fn87-meter{
  position:relative;border:1px solid #585340;background:linear-gradient(#e0d3ae,#bcae88);
  color:#28261f;padding:8px;box-shadow:inset 0 0 10px rgba(65,55,32,.22);
}
.fn87-meter-face{position:relative;height:86px;border:2px solid #665f4c;overflow:hidden;background:linear-gradient(#e7dcb9,#b9aa82)}
.fn87-meter-face::before{
  content:"0     20     40     60     80     100";position:absolute;left:5px;right:5px;top:10px;
  font:8px var(--fn87-mono);text-align:center;color:#39362c;white-space:pre;
}
.fn87-meter-needle{
  position:absolute;left:50%;bottom:-11px;width:2px;height:68px;background:#a22f28;
  transform-origin:bottom center;transform:rotate(var(--fn87-needle,-42deg));
  transition:transform .18s cubic-bezier(.2,.75,.3,1);
}
.fn87-meter-label{display:block;margin-top:4px;text-align:center;font:9px var(--fn87-mono);letter-spacing:.1em;text-transform:uppercase}

.fn87-key,.fn87-toggle,.fn87-knob{font-family:var(--fn87-mono)}
.fn87-key{
  min-height:38px;border:1px solid #11130f;border-radius:1px;background:linear-gradient(#5a523d,#2f2a1f);
  color:#e0d3ac;box-shadow:0 3px 0 #11130f,inset 0 1px rgba(255,255,255,.12);
  padding:7px 10px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.fn87-key:active,.fn87-key[aria-pressed="true"]{transform:translateY(2px);box-shadow:0 1px 0 #11130f;background:linear-gradient(#383224,#242018)}
.fn87-key:focus-visible,.fn87-knob:focus-visible{outline:3px solid var(--fn87-amber);outline-offset:3px}

/* State banks are annunciators, not controls. Keep them visually recessed so
   ARMED / RECORD / MEM HOLD cannot be mistaken for dead push-buttons. */
.fn87-state-key{
  display:grid;place-items:center;min-height:34px;border:1px solid #060806;border-top-color:#292d25;
  background:linear-gradient(#0b0d0a,#171a14);color:#777d70;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.82),0 1px 0 #65675b;
  font:8px var(--fn87-mono);letter-spacing:.08em;text-transform:uppercase;
  cursor:default;user-select:none;pointer-events:none;
}
.fn87-state-key[data-state="on"]{
  color:var(--fn87-green);background:linear-gradient(#11170f,#1a2118);
  text-shadow:0 0 6px rgba(168,212,155,.35);box-shadow:inset 0 3px 8px rgba(0,0,0,.82),inset 0 0 12px rgba(168,212,155,.08),0 1px 0 #65675b;
}

.fn87-paper{
  background:repeating-linear-gradient(0deg,#d6c9a5 0 19px,#c2b58f 20px);color:var(--fn87-paper-ink);
  box-shadow:2px 5px 8px rgba(0,0,0,.35);font:9px/1.55 var(--fn87-mono);padding:10px 15px;
}
.fn87-status-strip{
  display:flex;flex-wrap:wrap;gap:8px 16px;padding:7px 10px;border:1px solid #191b16;background:#0d100c;
  color:#8ca486;font:9px var(--fn87-mono);letter-spacing:.08em;text-transform:uppercase;
}
.fn87-status-strip output{color:var(--fn87-green)}

/* TR-317 meter refinement: sparse major ticks + one physical arc. This
   deliberately outranks the runtime presentation layer so the analog gauge
   never degenerates into a full radial fan. */
body #tr317 .controls .fn87-meter-face{
  background:
    radial-gradient(circle at 50% 100%,transparent 0 79px,#5a533f 80px 81px,transparent 82px),
    linear-gradient(#eadfbe,#b9aa82)!important;
}
body #tr317 .controls .fn87-meter-face::before{
  content:"0          25          50          75         100"!important;
  position:absolute!important;left:8px!important;right:8px!important;top:13px!important;height:21px!important;
  padding-top:1px!important;
  background:repeating-linear-gradient(90deg,#4a4537 0 1px,transparent 1px 25%) left bottom/100% 9px no-repeat!important;
  font:8px var(--fn87-mono)!important;text-align:center!important;color:#363228!important;white-space:pre!important;
}
body #tr317 .controls .fn87-meter-face::after{
  content:"";position:absolute;left:50%;bottom:4px;width:15px;height:15px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%,#77705a,#2c2a22 62%,#111);box-shadow:0 1px 3px #000;z-index:3;
}

@media(max-width:700px){
  .fn87-provenance{gap:4px 8px}
  .fn87-meter-face{height:78px}
}
@media(prefers-reduced-motion:reduce){
  .fn87-meter-needle,.fn87-key{transition:none!important}
}