/* ==========================================================================
   Poll / Pull Residence — Lighting & Low-Voltage System Explorer
   Editorial Design System & Workspace Styling
   Authoritative Reference: https://poll-lighting-plan-review.papiiii.chatgpt.site/system-explorer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design System Tokens & Color Variables
   -------------------------------------------------------------------------- */
:root {
  /* Dark Instrument. One palette; the names below it are aliases. */
  --sheet: rgba(14, 16, 18, .88);
  --sheet-solid: #0e1012;
  --sheet-raised: rgba(255,255,255,.04);
  --sheet-inset: rgba(0,0,0,.35);
  --rule: rgba(255,255,255,.08);
  --rule-strong: rgba(255,255,255,.16);
  --ink: #e8e6e1;
  --ink-2: #b8b5ae;
  --ink-3: #8a8780;
  --brass: #c49a57;
  --brass-ink: #0e1012;

  --paper: var(--sheet-solid);
  --ink-secondary: var(--ink-2);
  --accent: var(--brass);
  --accent-muted: var(--brass);
  --muted: var(--ink-3);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --panel: var(--sheet-solid);
  --panel-border: var(--rule);
  --ink-mute: var(--ink-3);

  /* Status, epistemic, and signal colors. These stay distinct from the chrome. */
  --notice-bg: #ece5d4;
  --notice-border: #b39355;
  --blocked-bg: #fff0e9;
  --blocked-text: #a33e28;
  --blocked-border: #e8a698;
  --success-text: #2f7d4a;
  --success-bg: #eaf5ed;
  --pulse-from: #efd790;
  --pulse-to: #eef4ed;
  --mode-audited-bg: #e6ebed;
  --mode-audited-ink: #1d3c45;
  --mode-audited-border: #56818f;
  --mode-sandbox-bg: #f9f2e3;
  --mode-sandbox-ink: #6e4c19;
  --mode-sandbox-border: #c4994e;
  --w-load: #b8860b;
  --w-rf: #1e90ff;
  --w-eth: #2e8b57;
  --w-poe: #3a9fd6;
  --w-wifi: #1c8f8a;
  --w-wan: #8b5cf6;
  --bulb-off-border: #a29871;
  --bulb-on-bg: #ffdb80;
  --bulb-on-glow: rgba(255, 206, 107, 0.42);
  --room-card-bg: #18332e;
  --room-card-text: #e3ece3;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .45);
  --space: 4px;
  --keyboard-inset: 0px;
  --vv-offset-top: 0px;
  --ctl-h: 32px;
  --rail-w: 48px;
  --rail-btn: 32px;
  --sheet-w: 280px;
  --app-header-h: 40px;
  --icon: 18px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-serif: Georgia, 'Times New Roman', Cambria, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

@media (any-pointer: coarse) {
  :root {
    --ctl-h: 40px;
    --rail-btn: 40px;
    --rail-w: 56px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & Global Typography
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

:is(button, [role=button], summary, input, select, a):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: -webkit-fill-available;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--sheet-solid);
  color: var(--ink);
  color-scheme: dark;
  font: 15px / 1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-feature-settings: "kern" 1, "liga" 1;
}

h1 {
  font: clamp(36px, 4.5vw, 64px) / 1.05 var(--font-serif);
  letter-spacing: -0.015em;
  margin: 18px 0 14px;
}
h1 em {
  color: var(--accent-muted);
  font-style: italic;
  font-weight: 400;
}

h2 {
  font: 24px / 1.25 var(--font-serif);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

h3 {
  font: 500 16px / 1.35 var(--font-sans);
  margin: 16px 0 8px;
}

.eyebrow {
  font: 600 11px / 1.2 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.intro {
  max-width: 820px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #233d39;
  margin: 8px 0 18px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   3. Header & Navigation Bar
   -------------------------------------------------------------------------- */
header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  height: var(--app-header-h);
  background: var(--sheet-solid);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  position: fixed;
  top: var(--vv-offset-top, 0px);
  left: 0;
  right: 0;
  z-index: 100;
}

.workspace-toolbar, .notice, footer#saveStatus {
  display: none !important;
}

header .header-brand {
  font-weight: 500;
  text-decoration: none;
  color: var(--brass);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
header .header-brand:hover {
  color: var(--brass);
}

header .header-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}

/* Dual Epistemic Mode Switcher in Header */
.mode-switcher-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--sheet-inset);
  padding: 2px;
  border-radius: var(--radius-2);
  border: 1px solid var(--rule);
  min-height: 32px;
}

.mode-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font: 500 12px / 1.2 var(--font-sans);
  padding: 6px 12px;
  border-radius: var(--radius-1);
  cursor: pointer;
  white-space: nowrap;
}

.mode-toggle-btn:hover {
  color: var(--ink);
}

/* Header Action Buttons */
header button:not(.mode-toggle-btn), .workspace-toolbar button {
  appearance: none;
  font: 500 12.5px / 1.2 var(--font-sans);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  background: var(--sheet-raised);
  padding: 6px 12px;
  color: var(--ink);
  cursor: pointer;
}

header button:not(.mode-toggle-btn):hover, .workspace-toolbar button:hover {
  background: var(--brass);
  color: var(--brass-ink);
  border-color: var(--brass);
}

/* --------------------------------------------------------------------------
   4. Main Workspace Layout & Scope
   -------------------------------------------------------------------------- */
main#workspace {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: -webkit-fill-available;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.notice {
  padding: 11px 16px;
  border-left: 4px solid var(--notice-border);
  background: var(--notice-bg);
  border-radius: 0 6px 6px 0;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #4a3c1e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notice .mode-badge {
  font: 600 11px / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.mode-badge.audited {
  background: var(--mode-audited-bg);
  color: var(--mode-audited-ink);
  border: 1px solid var(--mode-audited-border);
}

.mode-badge.sandbox {
  background: var(--mode-sandbox-bg);
  color: var(--mode-sandbox-ink);
  border: 1px solid var(--mode-sandbox-border);
}

/* Sticky Workspace Toolbar */
.workspace-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  position: sticky;
  top: 0;
  background: var(--sheet);
  color: var(--ink);
  z-index: 50;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.workspace-toolbar b {
  font-size: 14px;
  color: var(--ink);
  margin-right: auto;
}

.workspace-toolbar a {
  font-size: 13px;
  color: var(--brass);
  padding: 4px 8px;
  text-decoration: none;
  border: 1px dashed transparent;
  border-radius: 4px;
}
.workspace-toolbar a:hover {
  border-color: var(--brass);
  background: var(--sheet-raised);
}

/* --------------------------------------------------------------------------
   5. Primary Architecture Grid (Canvas + Sticky Control Inspector)
   -------------------------------------------------------------------------- */
.architecture-grid {
  display: block;
  margin: 0;
}

.canvas-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Rail view segments and text-only floor stops. */
.rail-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}

.floor-elevator {
  padding: 0 2px;
}

.floor-elevator button {
  width: 100%;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0;
  font: 600 11px / 1 var(--font-sans);
  border-radius: var(--radius-1);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  cursor: pointer;
}

.floor-elevator button:hover {
  background: var(--sheet-inset);
}

.chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chip-row button,
.layer-chip {
  appearance: none;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
  border-radius: var(--radius-2);
  background: var(--sheet-inset);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
}

.chip-row button:hover,
.layer-chip:hover {
  border-color: var(--brass);
}

.layer-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 12px 0 0;
  margin-top: 12px;
}

.layer-bar b {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.layer-chip input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brass);
}

#lutronStyle {
  display: block;
  width: 100%;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  margin: 8px 0 6px;
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
  color: var(--ink);
  background: var(--sheet-inset);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

#lutronSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.lutron-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--swatch);
  cursor: pointer;
}

.lutron-swatch[aria-pressed="true"] {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass);
}

@media (any-pointer: coarse) {
  .lutron-swatch {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

.lutron-swatch .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 2px;
  flex: 0 0 auto;
}
.dot.rf { background: var(--w-rf); }
.dot.eth { background: var(--w-eth); }
.dot.wan { background: var(--w-wan); }
.dot.poe { background: var(--w-poe); }
.dot.wifi { background: var(--w-wifi); }
.dot.load { background: var(--w-load); }

#viewportContainer, #stage {
  position: fixed;
  top: var(--app-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  touch-action: none;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  background: #0d273b;
  border: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: auto;
}

#viewportContainer canvas, #stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#viewportContainer canvas:focus-visible,
#stage canvas:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

#blueprintScenes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0 0;
  margin-top: 12px;
  background: var(--sheet);
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

#blueprintEvent {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 8px 0 0;
  min-height: 18px;
}

#rail {
  position: fixed;
  top: calc(var(--app-header-h) + 12px + var(--vv-offset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px)));
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 max(4px, env(safe-area-inset-bottom, 0px));
  touch-action: manipulation;
  background: var(--sheet);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-sheet);
  z-index: 40;
  pointer-events: auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: sheet-reveal 200ms cubic-bezier(.23, 1, .32, 1) backwards;
}

.rail-spacer {
  flex: 1 0 8px;
}

.dock-btn {
  position: relative;
  width: var(--rail-btn);
  height: var(--rail-btn);
  min-width: var(--rail-btn);
  min-height: var(--rail-btn);
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font: 500 12px / 1.2 var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dock-btn svg {
  width: var(--icon);
  height: var(--icon);
}

.dock-btn:hover {
  background: var(--sheet-inset);
  border-color: var(--rule);
}

.rail-label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translate(-4px, -50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: var(--sheet-solid);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  padding: 6px 8px;
  font: 500 12px / 1.2 var(--font-sans);
  box-shadow: var(--shadow-sheet);
  z-index: 2;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) {
  .dock-btn:hover .rail-label,
  .dock-btn:focus-visible .rail-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.dock-btn:focus-visible .rail-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.dock-divider {
  width: 24px;
  height: 1px;
  margin: 4px 0;
  background: var(--rule-strong);
  flex: 0 0 auto;
}

.close-overlay-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: var(--ctl-h);
  height: var(--ctl-h);
  min-width: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0;
  background: var(--sheet-inset);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  z-index: 10;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1);
}

.close-overlay-btn:hover {
  background: var(--sheet-raised);
  border-color: var(--brass);
  color: var(--brass);
}

#advanced {
  position: fixed;
  top: calc(var(--app-header-h) + 12px + var(--vv-offset-top, 0px));
  left: calc(max(12px, env(safe-area-inset-left, 0px)) + var(--rail-w) + 12px);
  width: var(--sheet-w);
  max-width: calc(100vw - 96px);
  max-height: calc(100dvh - 72px - var(--keyboard-inset, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--sheet);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 12px 16px 16px;
  box-shadow: var(--shadow-sheet);
  z-index: 32;
  pointer-events: auto;
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms cubic-bezier(.23, 1, .32, 1);
  animation: sheet-reveal 200ms cubic-bezier(.23, 1, .32, 1) 60ms backwards;
}

#advanced h2 {
  font: 600 12px / 1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 calc(var(--ctl-h) + 8px) 8px 0;
  color: var(--ink);
}

#advanced .advanced-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

#advanced .advanced-row:last-child {
  border-bottom: 0;
}

#advanced .chip-row button,
#advanced .layer-chip,
#advanced .advanced-controls button,
#advanced select {
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
}

#advanced .layer-bar,
#advanced #blueprintScenes {
  position: static;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.advanced-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.advanced-controls input[type="range"] {
  flex: 1 1 100px;
  min-width: 80px;
  height: var(--ctl-h);
}

.advanced-controls output {
  min-width: 42px;
  font: 500 11px / 1 var(--font-mono);
  color: var(--ink-2);
  text-align: right;
}

.source-links {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

#inspector {
  position: fixed;
  top: calc(var(--app-header-h) + 12px + var(--vv-offset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
  width: var(--sheet-w);
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--sheet);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 16px;
  box-shadow: var(--shadow-sheet);
  scrollbar-width: thin;
  z-index: 26;
  pointer-events: auto;
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms cubic-bezier(.23, 1, .32, 1);
  animation: sheet-reveal 220ms cubic-bezier(.23, 1, .32, 1) 120ms backwards;
}

.workspace-drawer {
  position: fixed;
  top: calc(60px + var(--vv-offset-top, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
  left: 0;
  right: 0;
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px;
  height: auto;
  margin-inline: auto;
  background: var(--sheet);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 16px 16px 24px;
  box-shadow: var(--shadow-sheet);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 45;
  pointer-events: auto;
  display: none;
}

.workspace-drawer[open] {
  display: block;
}

.workspace-drawer > summary {
  font: 600 22px / 1.25 var(--font-display);
  color: var(--ink);
  cursor: pointer;
  padding: 8px 52px 12px 0;
  list-style: none;
}

.workspace-drawer > summary::-webkit-details-marker {
  display: none;
}

.workspace-drawer > summary:hover {
  color: var(--brass);
}

.workspace-drawer[open] > summary {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

#inspector h2 {
  font: 600 22px / 1.25 var(--font-display);
  margin: 0 calc(var(--ctl-h) + 8px) 12px 0;
  color: var(--ink);
}

#inspector .muted,
#advanced .muted,
.workspace-drawer .muted {
  color: var(--ink-mute);
}

@keyframes sheet-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Station Dropdown & Quick Navigation */
.station-select-group {
  margin-bottom: 14px;
}

.station-select-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 4px;
}

#inspector select,
#advanced select,
.workspace-drawer select {
  width: 100%;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
  background: var(--sheet-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  color: var(--ink);
  cursor: pointer;
}

/* Quick Nav Button Grid for Stations 0–11 */
.station-quick-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 8px 0 12px;
}

.station-nav-btn {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--sheet-inset);
  width: 100%;
  min-width: 0;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  text-align: center;
  font: 500 12px / 1.2 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
}

.inspector-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.inspector-actions button {
  flex: 1;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
}

.station-nav-btn:hover {
  border-color: var(--brass);
}

.mode-toggle-btn.active,
.mode-toggle-btn[aria-checked="true"],
.dock-btn.active,
.dock-btn[aria-pressed="true"],
.floor-elevator button.active,
.floor-elevator button[aria-pressed="true"],
.chip-row button.active,
.chip-row button[aria-pressed="true"],
.station-nav-btn.active {
  background: var(--brass);
  color: var(--brass-ink);
  border-color: var(--brass);
}

#stationRole {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-mute);
  margin: 4px 0 12px;
  min-height: 32px;
}

/* --------------------------------------------------------------------------
   7. Tactile Physical Sunnata Keypad & Dimmer Faceplates
   -------------------------------------------------------------------------- */
.keypad-container {
  margin: 14px auto 18px;
  display: flex;
  justify-content: center;
}

/* Photorealistic / Tactile Sunnata Keypad Faceplate */
.photo-keypad {
  width: 172px;
  aspect-ratio: 560 / 920;
  position: relative;
  background: linear-gradient(150deg, #323538 0%, #1e2022 100%);
  border: 2px solid #5a5f64;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 59, 60, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* LED Lightbar on the Right Edge */
.keypad-lightbar {
  position: absolute;
  right: 8px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.keypad-lightbar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #ffca58, #fffaed);
  box-shadow: 0 0 8px #ffce6b;
  border-radius: 2px;
  transition: height 0.25s ease;
}

/* Tactical Sunnata Buttons Container */
.keypad-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  margin-right: 6px;
}

/* Tactile 3-Button Push Button */
.keypad-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  min-height: var(--ctl-h);
  background: linear-gradient(180deg, #2c2f32 0%, #202224 100%);
  border: 1px solid #44494e;
  border-radius: 5px;
  color: #e5ece8;
  font: 500 12px / 1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.1s ease;
  position: relative;
}

.keypad-btn:hover {
  background: linear-gradient(180deg, #373b3f 0%, #292c2f 100%);
  color: #ffffff;
}

.keypad-btn:active, .keypad-btn.pressed {
  background: #18191b;
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.6);
}

/* Button Status LED Pip */
.keypad-btn .led-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #47534c;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.keypad-btn.active .led-pip {
  background: #6fe3a5;
  box-shadow: 0 0 8px #6fe3a5;
}

/* Split Raise / Lower Rocker (Bottom) */
.keypad-rocker {
  display: flex;
  height: auto;
  min-height: var(--ctl-h);
  margin-right: 6px;
  margin-top: 8px;
  background: #202224;
  border: 1px solid #44494e;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.rocker-btn {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: #b0b8b4;
  font: 500 12px / 1.2 var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--ctl-h);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), opacity 160ms cubic-bezier(.23, 1, .32, 1);
}

.rocker-btn:first-child {
  border-right: 1px solid #383c40;
}

.rocker-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.rocker-btn:active {
  background: rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* Hybrid 2-Button Faceplate Styling */
.hybrid-face .keypad-btn {
  min-height: 70px;
}

/* Concealed PRO Dimmer Load Inspector Card */
.load-inspector {
  margin-bottom: 16px;
  background: var(--sheet-inset);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: 12px;
  color: var(--ink);
}

.load-inspector h2 {
  font: 600 16px / 1.25 var(--font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.load-inspector p {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 4px 0 10px;
}

.load-inspector .row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.load-inspector button {
  flex: 1;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  font: 500 12px / 1.2 var(--font-sans);
  padding: 0 10px;
  background: var(--sheet-raised);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  cursor: pointer;
}

.load-inspector input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* Target & Raise/Lower Buttons in Inspector */
.raise-lower-group {
  margin: 12px 0;
}
.raise-lower-group .row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.raise-lower-group button {
  flex: 1;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
  background: var(--sheet-raised);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  cursor: pointer;
}

#buttonLegend p {
  font-size: 13px;
  margin: 4px 0;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   8. Live Command Path Hop Box
   -------------------------------------------------------------------------- */
.flow {
  background: var(--sheet-inset);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  margin: 16px 0;
  color: var(--ink);
}

.flow h2 {
  font: 600 16px / 1.25 var(--font-display);
  margin: 0 0 8px;
  color: var(--ink);
}

#path {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 32px;
}

.hop {
  font: 500 11.5px / 1.2 var(--font-sans);
  border: 1px solid #c4d5c9;
  background: #eef4ed;
  color: #1b3d35;
  padding: 6px 10px;
  border-radius: 6px;
  animation: pulse 0.7s ease-out;
  display: inline-flex;
  align-items: center;
}

.hop:not(:last-child)::after {
  content: " →";
  color: #94743d;
  font-weight: 700;
  margin-left: 6px;
}

.hop.blocked {
  background: var(--blocked-bg);
  color: var(--blocked-text);
  border-color: var(--blocked-border);
}

@keyframes pulse {
  from { background: var(--pulse-from); }
  to   { background: var(--pulse-to); }
}

#event {
  color: var(--ink-mute);
  font-size: 13px;
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   9. Phone App & Outage Simulator Drawer
   -------------------------------------------------------------------------- */
.simulator-drawer {
  margin: 14px 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.simulator-drawer summary {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 8px;
}

.phone {
  background: #1c2f2b;
  color: #ffffff;
  border: 5px solid #283a35;
  border-radius: 20px;
  padding: 16px 14px;
  margin: 14px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.phone small {
  display: block;
  font: 500 10px / 1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa69c;
  margin-bottom: 4px;
}

.phone h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 10px;
}

.phone button {
  width: 100%;
  margin: 4px 0;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
  background: #2a443e;
  color: #ffffff;
  border-color: #3b5a52;
}

.phone button:hover {
  background: #395c54;
}

.phone p {
  font-size: 11.5px;
  color: #c4d0c9;
  margin: 8px 0 0;
  line-height: 1.35;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin: 6px 0;
  cursor: pointer;
}

.check input[type="checkbox"] {
  cursor: pointer;
  accent-color: #254c42;
}

/* Drawer tables */
#fixtureMapping table, .workspace-drawer table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
}

.workspace-drawer th, .workspace-drawer td {
  padding: 9px 12px;
  border-bottom: 1px solid #d1d9da;
  text-align: left;
  vertical-align: middle;
}

.workspace-drawer th {
  background: var(--sheet-inset);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.workspace-drawer .row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0;
}

.workspace-drawer .row > button {
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 10px;
  font: 500 12px / 1.2 var(--font-sans);
}

/* Drawer 2: All 16 Outputs & Rooms */
.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.room {
  background: var(--room-card-bg);
  color: var(--room-card-text);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.room:last-child {
  grid-column: 1 / -1;
}

.room h3 {
  margin-top: 0;
  font: 18px var(--font-serif);
  color: #f0f6f2;
}

.fixtures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.fixture {
  background: none;
  border: 0;
  padding: 6px;
  color: #bbc8c0;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.fixture:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bulb {
  display: block;
  margin: 4px auto 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bulb-off-border);
  transition: all 0.3s ease;
}

.fixture.on .bulb {
  background: var(--bulb-on-bg);
  border-color: #ffca58;
  box-shadow: 0 0 20px 6px var(--bulb-on-glow);
}

.fixture small {
  display: block;
  font-family: var(--font-mono);
  margin-top: 2px;
  color: #9eb5a9;
}

/* Output Dimmer Sliders */
.load-row {
  display: grid;
  grid-template-columns: 1fr 120px 48px;
  gap: 12px;
  align-items: center;
  margin: 8px 0;
  padding: 6px 0;
  border-bottom: 1px solid #eef2f0;
}

.load-row input[type="text"] {
  padding: 6px 8px;
  border: 1px solid #ccd5d0;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
}

.load-row input[type="range"] {
  accent-color: var(--accent);
}

/* Drawer 4: Electrician Wiring Schematics */
.technical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 16px 0;
}

.technical-grid .panel {
  background: var(--sheet-raised);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: 16px;
}

.technical-grid svg {
  width: 100%;
  height: auto;
  background: #f7fafc;
  border: 1px solid #d9e3e7;
  border-radius: 6px;
}

.technical-note {
  border-left: 4px solid var(--brass);
  padding: 12px 16px;
  background: var(--sheet-inset);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  margin: 12px 0;
  font-size: 13px;
  color: var(--ink);
}

.product-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.product-strip figure {
  margin: 0;
  max-width: 160px;
  text-align: center;
}

.product-strip img {
  width: 120px;
  height: 150px;
  object-fit: contain;
  background: var(--sheet-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px;
}

.product-strip figcaption {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* Footer Status */
footer#saveStatus {
  padding: 24px 0 12px;
  font-size: 12px;
  color: #6a786c;
  text-align: center;
  border-top: 1px solid var(--line);
  margin-top: 36px;
}

/* iPad Safari: typed fields stay at 16px so focus does not zoom the page. */
input[type="text"],
input[type="time"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  font-size: 16px;
}

button,
a,
summary,
label,
select,
input,
.dock-btn,
.close-overlay-btn,
.layer-chip,
.chip-row button,
.mode-toggle-btn,
.station-nav-btn {
  touch-action: manipulation;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--ctl-h);
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--rule-strong);
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border: 2px solid var(--sheet-solid);
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 1px 4px rgba(23, 59, 60, 0.28);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   11. Responsive Layout & Media Queries
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .architecture-grid {
    display: block;
  }
}

@media (max-width: 1000px) {
  #inspector {
    position: fixed;
    top: auto;
    left: calc(max(12px, env(safe-area-inset-left, 0px)) + var(--rail-w) + 12px);
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
    width: auto;
    max-width: none;
    max-height: 42dvh;
  }
  #advanced {
    max-height: calc(100dvh - var(--app-header-h) - 42dvh - 36px);
  }
}

@media (max-width: 700px) {
  #inspector {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: auto;
  }
}

@media (orientation: portrait) and (max-width: 834px) {
  #rail .rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
  }

  #inspector {
    top: auto;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
    width: auto;
    max-width: none;
    max-height: min(50dvh, calc(100dvh - var(--app-header-h) - 24px));
    border-radius: 16px 16px 12px 12px;
    padding-top: 18px;
  }

  #inspector::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: -6px auto 12px;
    border-radius: 999px;
    background: var(--rule-strong);
  }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity !important;
    transition-duration: 180ms !important;
  }
}

/* Electrician drawer. Sheet-solid base, raised cards, inset wells. */
.electrician-workspace {
  background: var(--sheet-solid);
  color: var(--ink);
}
.electrician-workspace :is(h2, h3, h4, strong, code) { color: var(--ink); }
.electrician-workspace h2,
.electrician-workspace h3,
.electrician-workspace h4 { font-family: var(--font-serif); margin: 0 0 8px; }
.electrician-workspace :is(p, li) { color: var(--ink-2); }
.electrician-workspace .elec-card {
  background: var(--sheet-raised);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
  margin: 0 0 20px;
}
.electrician-workspace .elec-card .elec-card {
  background: var(--sheet-solid);
}
.electrician-workspace .elec-notice {
  background: var(--sheet-raised);
  color: var(--ink);
  border-left: 3px solid var(--brass);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}
.electrician-workspace .elec-note {
  background: var(--sheet-solid);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  border-radius: 6px;
  padding: 16px;
}
.electrician-workspace .elec-inset {
  background: var(--sheet-inset);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
}
.electrician-workspace .elec-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--brass);
  color: var(--brass-ink);
  border: 0;
  border-radius: 4px;
  font: 700 13px / 1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.electrician-workspace .elec-chip {
  background: var(--brass);
  color: var(--brass-ink);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}
.electrician-workspace .elec-chip-float { position: absolute; top: -10px; right: 12px; }
.electrician-workspace .elec-pick { position: relative; border: 2px solid var(--brass); }
.electrician-workspace .elec-terminal-black { color: var(--ink); font-weight: 700; }
.electrician-workspace .elec-terminal-brass { color: #c49a57; font-weight: 700; }
.electrician-workspace .elec-terminal-silver { color: #b8b5ae; font-weight: 700; }
.electrician-workspace .elec-terminal-green { color: #6fbf73; font-weight: 700; }
.electrician-workspace .elec-terminal-blue { color: #7aa7ff; font-weight: 700; }
.electrician-workspace .elec-terminal-red { color: #e07a6a; font-weight: 700; }
.electrician-workspace .elec-ok { color: #6fbf73; font-weight: 700; }
.electrician-workspace .elec-bad { color: #e07a6a; font-weight: 700; }
.electrician-workspace .elec-warn { color: #c49a57; font-weight: 700; }
.electrician-workspace .elec-muted { color: var(--ink-3); }
.electrician-workspace .elec-badge {
  background: #6fbf73;
  color: var(--brass-ink);
  font: 700 13px var(--font-mono);
  padding: 3px 10px;
  border-radius: 4px;
}
.electrician-workspace .elec-badge.is-fail { background: #e07a6a; }
.electrician-workspace .elec-status {
  background: var(--sheet-inset);
  border: 1px solid #6fbf73;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.electrician-workspace .elec-status.is-fail { border-color: #e07a6a; }
.electrician-workspace .elec-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.electrician-workspace .elec-split { justify-content: space-between; align-items: flex-start; }
.electrician-workspace .elec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.electrician-workspace .elec-stack { grid-template-columns: 1fr; }
.electrician-workspace .elec-metrics { grid-template-columns: 1fr 1fr; }
.electrician-workspace .elec-scroll { overflow-x: auto; }
.electrician-workspace .elec-label {
  display: block;
  margin: 0 0 4px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.electrician-workspace .elec-label span {
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.electrician-workspace .elec-figure { font: 700 24px var(--font-mono); color: var(--ink); }
.electrician-workspace .elec-figure.elec-ok { color: #6fbf73; }
.electrician-workspace .elec-figure.elec-bad { color: #e07a6a; }
.electrician-workspace .elec-mono { font-family: var(--font-mono); font-weight: 700; }
.electrician-workspace .elec-check { text-align: center; }
.electrician-workspace .electrician-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.electrician-workspace .tab-btn {
  height: var(--ctl-h);
  padding: 0 10px;
  background: var(--sheet-inset);
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: 500 12px / 1.2 var(--font-sans);
  cursor: pointer;
}
.electrician-workspace .tab-btn.active {
  background: var(--brass);
  color: var(--brass-ink);
  border-color: var(--brass);
}
.electrician-workspace .tab-content { display: none; }
.electrician-workspace .tab-content.active { display: block; }
.electrician-workspace .preset-btn {
  background: var(--sheet-inset);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}
.electrician-workspace table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.electrician-workspace th,
.electrician-workspace td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.electrician-workspace select,
.electrician-workspace input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--sheet-inset);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 8px 10px;
}
.electrician-workspace input[type="range"] { width: 100%; accent-color: var(--brass); }
.electrician-workspace .elec-progress {
  width: 100%;
  height: 12px;
  background: var(--sheet-inset);
  border-radius: 6px;
  overflow: hidden;
}
.electrician-workspace .elec-progress-bar { height: 100%; background: #6fbf73; }
.electrician-workspace .elec-progress-bar.is-warn { background: #c49a57; }
.electrician-workspace .elec-progress-bar.is-bad { background: #e07a6a; }