/* hps 2350..2353 + Fluke 1653/1663 — dark flat theme
   accent #ff671f
*/

:root{
  --bg:        #0b0c0d;
  --panel:     #17191c;
  --panel-2:   #1d2024;
  --panel-3:   #24272c;
  --line:      #2b2f35;
  --line-2:    #3a3f47;
  --ink:       #d6d8dc;
  --ink-dim:   #8a8f97;
  --ink-mute:  #5a5f67;
  --accent:    #ff671f;
  --accent-dim:#9a3e13;
  --ok:        #7cc07c;
  --fail:      #d24a4a;
  --brown:     #8a5a3b;
  --blue:      #2d6cb7;
  --gnye-a:    #d4c21a;
  --gnye-b:    #3aa34a;
  --black:     #151719;
  --lcd-bg:    #221406;
  --lcd-ink:   #ff671f;
  --lcd-dim:   #5a2508;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  font-size:13px; overflow:hidden; user-select:none; -webkit-user-select:none}

#stage{display:grid; grid-template-columns: 1fr 380px; height:100vh; width:100vw; gap:0}
#boards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:10px; padding:10px;
  overflow:auto;
}
#fluke{
  border-left:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
  position:relative;
}

.board{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  position:relative;
  min-height: 320px;
  display:flex; flex-direction:column;
}
.board .bhead{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);
}
.board .bhead .bid{color:var(--accent); font-weight:600; letter-spacing:0.1em}
.board .bhead .ftoggle{
  background:none; border:1px solid var(--line-2); color:var(--ink-mute);
  padding:2px 6px; border-radius:3px; font-size:10px; cursor:pointer;
  letter-spacing:0.1em;
}
.board .bhead .ftoggle:hover{color:var(--ink); border-color:var(--line-2)}
.board .bhead .ftoggle.active{color:var(--accent); border-color:var(--accent-dim)}
.board svg{flex:1; width:100%; display:block}

/* board graphics */
.comp-stroke{stroke:var(--line-2); stroke-width:1.25; fill:none}
.comp-fill{fill:var(--panel-2); stroke:var(--line-2); stroke-width:1}
.comp-label{fill:var(--ink-dim); font-size:9px; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:0.08em; text-transform:uppercase}
.comp-label-sm{fill:var(--ink-mute); font-size:8px; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:0.04em; text-transform:uppercase}
.comp-label-accent{fill:var(--accent); font-size:9px; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:0.08em}
.busbar{stroke:var(--line-2); stroke-width:4; stroke-linecap:round; fill:none}
.pe-bar{stroke:#4e5a2a; stroke-width:4; stroke-linecap:round; fill:none}
.n-bar{stroke:#2a3e5a; stroke-width:4; stroke-linecap:round; fill:none}
.wire-internal{stroke:var(--line); stroke-width:1.25; fill:none}

/* sockets */
.socket{
  cursor:pointer;
}
.socket .sring{fill:var(--panel-3); stroke:var(--line-2); stroke-width:1.25}
.socket .shole{fill:var(--black); stroke:var(--line); stroke-width:0.5}
.socket.l1 .sring{stroke:var(--brown)}
.socket.l2 .sring{stroke:var(--brown)}
.socket.l3 .sring{stroke:var(--brown)}
.socket.n  .sring{stroke:var(--blue)}
.socket.pe .sring{stroke:var(--gnye-b)}
.socket.earth .sring{stroke:var(--gnye-a)}
.socket.pen .sring{stroke:var(--gnye-b); stroke-dasharray:2 1}
.socket:hover .sring{stroke:var(--accent)}
.socket.active .sring{stroke:var(--accent); stroke-width:2}
.socket.probe-a .sring{stroke:var(--accent); stroke-width:2.5}
.socket.probe-b .sring{stroke:var(--accent); stroke-width:2.5; stroke-dasharray:3 2}
.socket.pending .sring{stroke:var(--accent); stroke-width:2; animation: pulse 1s ease-in-out infinite}
.socket text.slabel{
  fill:var(--ink-mute); font-size:7.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:0.05em; pointer-events:none; text-anchor:middle;
}
.socket:hover text.slabel, .socket.active text.slabel{fill:var(--ink-dim)}

/* bridges (jumpers) */
.bridge{
  stroke-width:3.5; fill:none; stroke-linecap:round; cursor:pointer;
  pointer-events:stroke;
}
.bridge:hover{stroke-width:5}
.bridge.c-brown{stroke:var(--brown)}
.bridge.c-blue{stroke:var(--blue)}
.bridge.c-gnye{stroke:var(--gnye-b); stroke-dasharray:3 3}
.bridge.c-black{stroke:#2c2e32}
.bridge.c-red{stroke:#a83434}
.bridge.c-probea{stroke:var(--accent)}
.bridge.c-probeb{stroke:var(--accent); stroke-dasharray:5 3}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
@keyframes bridgeSnap{
  0%{stroke-dashoffset:60; opacity:0.2}
  100%{stroke-dashoffset:0; opacity:1}
}
.bridge.snapping{
  stroke-dasharray:30 30; animation: bridgeSnap 220ms ease-out forwards;
}

/* fault menu */
#faultmenu{
  position:fixed; z-index:100;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:6px;
  min-width:220px; padding:6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
#faultmenu.hidden{display:none}
#faultmenu .fhead{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-mute); padding:4px 8px 6px; border-bottom:1px solid var(--line);
}
#faultmenu label{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:3px; cursor:pointer; font-size:11px;
}
#faultmenu label:hover{background:var(--panel-3)}
#faultmenu label input{accent-color:var(--accent); margin-right:8px}
#faultmenu label .flabel{flex:1}
#faultmenu label.on .flabel{color:var(--accent)}

/* tooltip (minimal hover info for socket) */
#tooltip{
  position:fixed; z-index:50; pointer-events:none;
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--ink);
  padding:3px 7px; border-radius:3px; font-size:10px;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing:0.05em;
}
#tooltip.hidden{display:none}

/* ============ FLUKE 1653/1663 ============= */
.fluke{
  height:100%; display:flex; flex-direction:column;
  padding:14px 14px 10px;
}
.fluke .meter{
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px;
  padding:12px; display:flex; flex-direction:column; gap:10px;
  flex:1; min-height:0;
}
.fluke .fhead{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--ink-mute); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
}
.fluke .fhead .fbrand{color:var(--accent); font-weight:700; letter-spacing:0.18em}
.fluke .fhead .fmodel{color:var(--ink-dim)}

.lcd{
  background:var(--lcd-bg); border:1px solid #3b1a05; border-radius:6px;
  padding:10px 12px; min-height:120px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color:var(--lcd-ink);
  display:flex; flex-direction:column; gap:6px;
  position:relative;
}
.lcd .lcd-row{display:flex; align-items:flex-end; justify-content:space-between; gap:8px}
.lcd .lcd-main{
  font-size:40px; font-weight:700; letter-spacing:2px; line-height:1;
  font-variant-numeric: tabular-nums;
}
.lcd .lcd-unit{font-size:16px; color:var(--lcd-ink); opacity:0.95; letter-spacing:1px}
.lcd .lcd-sub{
  display:flex; justify-content:space-between; font-size:10px; letter-spacing:0.1em;
  color:var(--lcd-ink); opacity:0.7;
}
.lcd .lcd-mode{font-size:10px; letter-spacing:0.18em; color:var(--lcd-ink); opacity:0.9; text-transform:uppercase}
.lcd .lcd-flags{
  display:flex; gap:10px; font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--lcd-dim);
}
.lcd .lcd-flags span.on{color:var(--lcd-ink)}
.lcd .lcd-pass{
  position:absolute; top:6px; right:10px; font-size:10px; letter-spacing:0.15em;
  padding:2px 6px; border-radius:3px;
}
.lcd .lcd-pass.pass{background:rgba(124,192,124,0.15); color:#7cc07c}
.lcd .lcd-pass.fail{background:rgba(210,74,74,0.15); color:#d24a4a}
.lcd .lcd-pass.hidden{display:none}
.lcd .lcd-bars{
  display:flex; gap:3px; height:4px; margin-top:4px;
}
.lcd .lcd-bars span{flex:1; background:var(--lcd-dim); border-radius:1px}
.lcd .lcd-bars span.on{background:var(--lcd-ink)}

/* rotary */
.rotary-wrap{
  display:flex; gap:10px; align-items:stretch;
}
.rotary{
  width:180px; height:180px; position:relative; flex:0 0 180px;
  background:var(--panel-3); border-radius:50%; border:1px solid var(--line-2);
}
.rotary .knob{
  position:absolute; inset:20px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #2a2d32, #16181b 70%);
  border:1px solid var(--line-2);
  transition: transform 200ms cubic-bezier(0.2,0.8,0.25,1);
  cursor:grab;
}
.rotary .knob::after{
  content:""; position:absolute; left:50%; top:6px; width:3px; height:18px;
  background:var(--accent); border-radius:2px; transform:translateX(-50%);
}
.rotary .pos{
  position:absolute; transform: translate(-50%,-50%);
  font-size:9px; font-family: ui-monospace, Menlo, Consolas, monospace;
  color:var(--ink-mute); letter-spacing:0.05em; cursor:pointer;
  width:32px; text-align:center; line-height:1.1; pointer-events:auto;
  user-select:none;
}
.rotary .pos:hover{color:var(--ink)}
.rotary .pos.active{color:var(--accent); font-weight:700}

.rside{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0}
.rside .btn{
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--ink);
  padding:8px 10px; border-radius:4px; cursor:pointer; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; text-align:center;
}
.rside .btn:hover{border-color:var(--line-2); color:var(--accent)}
.rside .btn:active{transform:translateY(1px)}
.rside .btn.test{background:#2a1308; border-color:var(--accent); color:var(--accent)}
.rside .btn.test:hover{background:#3a1a0a}
.rside .btn.test.armed{background:var(--accent); color:#1a1a1a}
.rside .btn.blue{border-color:#2d6cb7; color:#77a7df}
.rside .btn.hold.on{background:var(--accent); color:#1a1a1a; border-color:var(--accent)}
.rside .btn.small{font-size:10px; padding:5px 8px}
.rside .row{display:flex; gap:5px}
.rside .row .btn{flex:1}

/* probe area */
.probes{
  padding:10px; display:flex; gap:8px;
  border-top:1px solid var(--line); margin-top:auto;
}
.probe{
  flex:1; background:var(--panel-2); border:1px solid var(--line-2); border-radius:4px;
  padding:6px 8px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.probe:hover{border-color:var(--accent)}
.probe.active{border-color:var(--accent); color:var(--accent)}
.probe .ptag{color:var(--ink-mute)}
.probe .pval{font-family: ui-monospace, Menlo, Consolas, monospace; color:var(--ink)}
.probe.pa .ptag{color:var(--accent)}
.probe.pb .ptag{color:var(--accent); opacity:0.7}

.hint{
  color:var(--ink-mute); font-size:10px; letter-spacing:0.05em; padding:4px 0 0 2px;
}