/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  V7.135 — DESIGN TOKENS (per V1 Handoff)                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
:root {
  /* Brand */
  --crys-orange:        #F05A28;
  --crys-orange-dark:   #C03F10;
  --crys-orange-bg:     #FFF0E3;
  --crys-orange-border: #F9B97A;
  --crys-navy:          #1D3D72;
  --crys-navy-light:    #2B4F8A;
  /* Surface / neutrals */
  --bg:           #FAFAF7;
  --surface:      #FFFFFF;
  --surface-alt:  #F6F4EF;
  --border:       #E8E5DD;
  --border-strong:#D4CFC1;
  /* Type colors */
  --ink:        #1A1814;
  --ink-muted:  #5C574E;
  --ink-subtle: #8B8576;
  --ink-faint:  #B8B2A2;
  /* Canvas */
  --map-bg:   #EFECE2;
  --map-grid: rgba(0,0,0,0.05);
  /* Status */
  --good:    #15803d;  --good-bg:    #dcfce7;  --good-border: #86efac;
  --warn:    #c2410c;  --warn-bg:    #fff7ed;  --warn-border: #fdba74;
  --bad:     #b91c1c;  --bad-bg:     #fee2e2;  --bad-border:  #fca5a5;
  --critpath:#be185d;
  /* Radii */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px;
  /* Type */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-body:   13px;
  --fs-small:  11.5px;
  --fs-tiny:   10px;
  --fs-label:  9.5px;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px;
      background: var(--surface-alt); border: 1px solid var(--border); color: var(--ink-subtle); }
body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.4;
       background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ── App grid layout ──────────────────────────────────────────────── */
#app {
  display: grid;
  position: relative;
  grid-template-columns: var(--rail-w, 156px) 1fr 320px;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "header header   header"
    "rail   canvas   inspector";
  height: 100vh;
  width: 100vw;
}
.header      { grid-area: header; }
.rail        { grid-area: rail; }
.canvas-wrap { grid-area: canvas; }
.inspector   { grid-area: inspector; }

/* ── Header ──────────────────────────────────────────────────────── */
.header {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--crys-orange);
              display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.brand-name { color: var(--crys-orange); }
.brand-version { color: var(--ink-faint); font-weight: 400; margin-left: 4px; }
.file-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-sm);
             background: var(--surface-alt); color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.file-pill .file-state { color: var(--ink-faint); font-size: 10px; }
.file-pill input#project-name { border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit; padding: 2px 8px; border-radius: 5px; width: 300px; min-width: 80px; }
.file-pill input#project-name:hover { border-color: var(--border); }
.file-pill input#project-name:focus { outline: none; border-color: var(--crys-orange-border); background: var(--surface); width: 420px; }
/* V8.43 — optional "who you are" field next to the project name. NOTE: the
   width must NOT change on :focus — a blur-reflow moves the header buttons
   between mousedown and mouseup, silently swallowing the user's click. */
.file-pill input#who-input { border: 1px solid transparent; background: transparent; color: var(--ink-muted); font-size: 12px; font-family: inherit; padding: 2px 8px; border-radius: 5px; width: 170px; min-width: 60px; }
.file-pill input#who-input::placeholder { color: var(--ink-faint); }
.file-pill input#who-input:hover { border-color: var(--border); }
.file-pill input#who-input:focus { outline: none; border-color: var(--crys-orange-border); background: var(--surface); color: var(--ink); }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right  { display: flex; align-items: center; gap: 6px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px;
       font-size: 12px; font-weight: 500; background: transparent; color: var(--ink);
       border: 1px solid transparent; white-space: nowrap; user-select: none;
       transition: background .12s, border-color .12s, color .12s; }
.btn:hover     { background: var(--surface-alt); }
.btn:disabled  { opacity: .55; cursor: default; }
.btn-quiet     { background: var(--surface-alt); border-color: var(--border); }
.btn-quiet:hover { background: var(--bg); border-color: var(--border-strong); }
.btn-primary   { background: var(--crys-orange); color: #fff; border-color: var(--crys-orange); }
.btn-primary:hover { background: var(--crys-orange-dark); border-color: var(--crys-orange-dark); }
.btn-navy      { background: var(--crys-navy); color: #fff; border-color: var(--crys-navy); }
.btn-navy:hover{ background: var(--crys-navy-light); border-color: var(--crys-navy-light); }
.btn-active    { background: var(--crys-orange-bg); color: var(--crys-orange-dark); border-color: var(--crys-orange-border); }

/* ── Left rail (palette) ─────────────────────────────────────────── */
.rail { background: var(--surface); border-right: 1px solid var(--border);
        display: flex; flex-direction: column; align-items: stretch;
        padding: 10px 0; gap: 8px; overflow-y: auto; overflow-x: hidden; }
.rail-group { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.rail-group-label { font-size: 9px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.08em; margin: 0 0 2px 12px; text-align: left; text-transform: uppercase; }
.rail-divider { width: calc(100% - 24px); height: 1px; background: var(--border); margin: 1px auto; }
.rail-btn { display: flex; flex-direction: row; align-items: center; gap: 9px;
            width: calc(100% - 12px); margin: 0 6px; min-height: 30px; padding: 4px 9px;
            border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent; background: transparent;
            transition: background .12s, border-color .12s; text-align: left; }
.rail-btn:hover { background: var(--surface-alt); }
.rail-btn.is-active { background: var(--crys-orange-bg); border-color: var(--crys-orange-border); }
.rail-btn.is-active .rail-btn-label { color: var(--crys-orange-dark); font-weight: 700; }
/* shape-coded mini-icons: square=decoder/input/IO, hexagon=controller, triangle=DIN, diamond=LSP, circle=valve */
.ic { width: 14px; height: 14px; flex-shrink: 0; background: var(--c, #888); }
.ic-square { border-radius: 3px; }
.ic-circle { border-radius: 50%; }
.ic-diamond { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); }
.ic-hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.ic-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rail-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--c, #888); }
.rail-bar { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--c, #2255cc); flex-shrink: 0; }
.rail-btn-label { font-size: 11.5px; color: var(--ink-muted); font-weight: 500; text-align: left; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-btn .al500-variant { font-size: 8px; color: var(--ink-faint); line-height: 1; }
/* V7.150 — draggable rail-resize handle with a centered grip button */
#rail-resizer { position: absolute; top: 48px; bottom: 0; left: var(--rail-w, 156px);
                width: 10px; transform: translateX(-5px); cursor: col-resize; z-index: 60; }
#rail-resizer .grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                      width: 10px; height: 48px; border-radius: 6px; background: var(--surface);
                      border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
                      display: flex; align-items: center; justify-content: center; gap: 2px; }
#rail-resizer .grip::before, #rail-resizer .grip::after { content: ''; width: 2px; height: 16px; border-radius: 1px; background: var(--ink-faint); }
#rail-resizer:hover .grip { border-color: var(--crys-orange); }
#rail-resizer:hover .grip::before, #rail-resizer:hover .grip::after { background: var(--crys-orange); }
body.rail-resizing { cursor: col-resize; user-select: none; }
/* V7.150 — blocking cable-size modal */
.csm-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 500;
               display: flex; align-items: center; justify-content: center; }
.csm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
            box-shadow: var(--shadow-lg); padding: 16px 18px; width: 340px; max-width: 92vw; }
.csm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.csm-head b { font-size: 14px; color: var(--ink); }
.csm-x { border: none; background: transparent; font-size: 18px; color: var(--ink-faint); cursor: pointer; border-radius: 5px; padding: 2px 6px; }
.csm-x:hover { background: var(--bg); color: var(--ink); }
.csm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.csm-grid button { padding: 8px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
                   color: var(--ink); font-size: 12px; cursor: pointer; transition: background .1s, border-color .1s; }
.csm-grid button:hover:not(:disabled) { background: var(--crys-orange-bg); border-color: var(--crys-orange-border); }
.csm-grid button.is-current { border-color: var(--crys-orange); background: var(--crys-orange-bg); font-weight: 700; }
.csm-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
.csm-default { width: 100%; padding: 8px; border: 1px dashed var(--border-strong); border-radius: 7px; background: transparent; color: var(--ink-muted); font-size: 12px; cursor: pointer; }
.csm-default:hover { background: var(--bg); }
.csm-default.is-current { border-style: solid; border-color: var(--crys-orange); background: var(--crys-orange-bg); color: var(--ink); font-weight: 700; }
/* draw-size control (shown while drawing 2-Wire) */
#draw-size-control { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
                     display: none; align-items: center; gap: 7px; background: var(--surface);
                     border: 1px solid var(--crys-orange-border); border-radius: 8px; padding: 5px 10px; box-shadow: var(--shadow-md); }
#draw-size-control.visible { display: inline-flex; }
#draw-size-control span { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; }
#draw-size-control select { font-size: 12px; border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; background: var(--surface); color: var(--ink); }
/* V7.150 — right-click popover on the 2-Wire rail button */
#wire2-size-picker { position: fixed; z-index: 500; background: var(--surface); border: 1px solid var(--border);
                     border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 200px;
                     display: none; flex-direction: column; gap: 2px; }
#wire2-size-picker.is-open { display: flex; }
#wire2-size-picker button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: none;
                            background: transparent; border-radius: 5px; cursor: pointer; text-align: left;
                            font-size: 12px; color: var(--ink); }
#wire2-size-picker button:hover { background: var(--bg); }
#wire2-size-picker button.is-current { background: var(--crys-orange-bg); color: var(--crys-orange-dark); font-weight: 700; }
#wire2-size-picker .sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
#wire2-size-picker .sep { height: 1px; background: var(--border); margin: 4px 0; }
#wire2-size-picker .head { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px 2px; }
.rail-btn.is-active .al500-variant { color: var(--crys-orange-dark); }

/* ── Canvas + overlays ───────────────────────────────────────────── */
.canvas-wrap { position: relative; background: var(--map-bg); overflow: hidden;
               box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); }
canvas#c { display: block; width: 100%; height: 100%; user-select: none; }

.overlay { position: absolute; display: inline-flex; align-items: center; gap: 4px;
           background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: 4px;
           box-shadow: var(--shadow-md); z-index: 10; }
.overlay-divider { width: 1px; height: 16px; background: var(--border); margin: 0 3px; flex-shrink: 0; }
.overlay-label { padding: 0 6px; font-size: 11.5px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.overlay-label.tabular { font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }
.overlay-tl { position: absolute; top: 14px; left: 14px; flex-wrap: wrap; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-md); z-index: 10; }
/* V7.150 — secondary panel right below the auto-connect bar for bulk-clear actions */
.overlay-tl2 { position: absolute; top: 60px; left: 14px; display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-md); z-index: 10; }
.overlay-tr { position: absolute; top: 14px; right: 14px; gap: 6px; padding: 0; display: inline-flex; align-items: center; z-index: 10; }
.overlay-bl { position: absolute; bottom: 14px; left: 14px; display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-md); z-index: 10; }
.overlay-bc { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); flex-wrap: wrap; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-md); z-index: 10; }
.overlay-br { position: absolute; bottom: 14px; right: 14px; gap: 6px; padding: 0; display: inline-flex; align-items: center; z-index: 10; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
        font-size: 11px; font-weight: 600; background: var(--surface-alt); color: var(--ink-muted);
        border: 1px solid var(--border); white-space: nowrap; }
.pill-good { background: var(--good-bg); color: var(--good); border-color: var(--good-border); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill-bad  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad-border); }

/* Canvas overlays carried from V7.12 — restyled with new tokens */
#zoom-indicator { display: none; } /* hidden; the bl-overlay shows zoom now */
#cable-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
              font-size: 12px; color: var(--crys-navy); background: rgba(219,234,254,0.95);
              border: 1px solid #93c5fd; border-radius: 8px; padding: 4px 14px;
              pointer-events: none; display: none; white-space: nowrap;
              box-shadow: var(--shadow-md); z-index: 20; }
#scale-hint { position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
              font-size: 12px; color: #7c2d00; background: #ffedd5;
              border: 1px solid #fdba74; border-radius: 8px; padding: 4px 14px;
              pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-md); z-index: 20; }
#cable-size-panel { position: absolute; top: 60px; right: 14px; display: none;
                    font-size: 12px; background: var(--surface); border: 1px solid #93c5fd;
                    border-radius: 8px; padding: 6px 10px; box-shadow: var(--shadow-md);
                    align-items: center; gap: 6px; white-space: nowrap; z-index: 20; }
#cable-size-panel span { color: var(--ink); }
#cable-size-panel select { font-size: 12px; border: 1px solid var(--border); border-radius: 5px;
                            padding: 2px 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
#cable-size-panel button { border: none; background: none; cursor: pointer; color: var(--ink-subtle);
                            font-size: 13px; padding: 0 2px; line-height: 1; }
#spec-menu { position: fixed; z-index: 400; display: none; background: var(--surface);
             border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg);
             padding: 4px 0; font-size: 12.5px; min-width: 200px; }
#spec-menu a { color: var(--crys-navy); text-decoration: none; }
#upload-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                  pointer-events: none; z-index: 5; }
#upload-overlay.hidden { display: none; }
/* V8.10 — plain white canvas when the user chooses "No map". */
.canvas-wrap.white-bg { background: #ffffff; }
/* V8.11 — Design / Manual view switcher in the header */
.view-tabs { display: inline-flex; gap: 2px; background: var(--surface-2, #eef1f5); border: 1px solid var(--border); border-radius: 8px; padding: 2px; margin-left: 14px; }
.view-tab { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-muted); background: transparent; border: 0; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.view-tab.is-active { background: var(--crys-orange); color: #fff; }
/* V8.11 — Manual view overlay (covers everything below the header) */
#manual-view { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; background: var(--bg); overflow: auto; z-index: 30; display: none; }
#manual-view.is-open { display: block; }
/* V8.20 — hide the rail-resizer drag handle and the selection popup when
   the Manual view is active. The class lives on <body> because
   #selection-popup is a sibling of #app rather than a descendant. */
body.manual-active #rail-resizer,
body.manual-active #selection-popup { display: none !important; }
.manual-wrap { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(300px, 460px); gap: 26px; max-width: 1100px; margin: 0 auto; padding: 28px 30px 60px; align-items: start; }
.manual-inputs h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.manual-hint { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 18px; line-height: 1.5; }
.manual-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 12.5px; color: var(--ink-muted); }
.manual-field > span:first-child { font-weight: 600; color: var(--ink); }
.manual-field input[type=number], .manual-field select { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); }
.seg { display: inline-flex; gap: 2px; background: var(--surface-2, #eef1f5); border: 1px solid var(--border); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
.seg-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-muted); background: transparent; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.seg-btn.is-active { background: var(--crys-orange); color: #fff; }
.manual-drow { display: grid; grid-template-columns: 1fr 64px 30px; gap: 8px; align-items: center; margin-bottom: 7px; }
.manual-drow select, .manual-drow input { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
.manual-drow .drow-del { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--bad); cursor: pointer; height: 30px; }
.manual-output { position: sticky; top: 28px; }
.mr-card { border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: var(--surface); }
.mr-volt { font-size: 34px; font-weight: 800; line-height: 1.1; }
.mr-status { font-size: 13px; font-weight: 700; margin-top: 2px; }
.mr-good { color: #16a34a; } .mr-warn { color: #c2410c; } .mr-bad { color: #b4231e; }
.mr-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--border); color: var(--ink-muted); }
.mr-row b { color: var(--ink); font-weight: 600; }
.mr-rows { margin-top: 14px; }
#upload-label { display: flex; flex-direction: column; align-items: center; gap: 10px;
                color: var(--ink-faint); cursor: pointer; pointer-events: auto;
                padding: 30px 50px; border: 2px dashed var(--border-strong); border-radius: 12px;
                background: rgba(255,255,255,0.6); transition: all .15s; }
#upload-label:hover { color: var(--crys-orange); border-color: var(--crys-orange-border);
                      background: var(--crys-orange-bg); }

/* Input config modal (carried from V7.12) — restyled */
#input-config-backdrop { position: fixed; inset: 0; display: none; background: rgba(15,23,42,0.45);
                          z-index: 500; align-items: center; justify-content: center; }
#input-config-modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg);
                       min-width: 320px; max-width: 440px; padding: 18px 20px; font-size: 13px; color: var(--ink); }
#input-config-modal h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
#input-config-modal select, #input-config-modal input { background: var(--surface); color: var(--ink);
                                                        border: 1px solid var(--border); border-radius: 6px;
                                                        padding: 4px 8px; }
#input-config-modal button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
                              background: var(--surface-alt); color: var(--ink); cursor: pointer; }
#input-config-modal button[onclick*="applyInputConfig"] { background: var(--crys-navy); border-color: var(--crys-navy); color: #fff; font-weight: 600; }

/* ── Inspector ────────────────────────────────────────────────────── */
.inspector { background: var(--surface); border-left: 1px solid var(--border);
             display: flex; flex-direction: column; overflow: hidden; }
.inspector-scroll { flex: 1; overflow-y: auto; padding: 14px 16px;
                     display: flex; flex-direction: column; gap: 14px; }
.section { display: flex; flex-direction: column; gap: 5px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.section-label { font-size: 10px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.section-link { font-size: 11px; color: var(--ink-muted); padding: 2px 6px; border-radius: 4px; cursor: pointer; background: none; border: none; }
.section-link:hover { background: var(--surface-alt); color: var(--ink); }
.section-link.is-open { background: var(--crys-orange-bg); color: var(--crys-orange-dark); }

.row { display: flex; justify-content: space-between; align-items: center;
       font-size: 12px; padding: 2px 0; gap: 8px; }
.row > .row-key { color: var(--ink-muted); }
.row > .row-val { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.row-val.good { color: var(--good); font-weight: 700; }
.row-val.warn { color: var(--warn); font-weight: 700; }
.row-val.bad  { color: var(--bad);  font-weight: 700; }

.dec-row { display: flex; align-items: center; justify-content: space-between;
           font-size: 12px; padding: 2px 0; }
.dec-row-left { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--c, #888); }
.dec-row-count { font-weight: 600; font-variant-numeric: tabular-nums; }

.divider { height: 1px; background: var(--border); }

.viol { background: var(--warn-bg); border: 1px solid var(--warn-border);
        border-radius: var(--r-sm); padding: 6px 8px; font-size: 11.5px; color: var(--warn);
        display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.viol:hover { filter: brightness(0.98); }
.viol.is-bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad); }
.viol-marker { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
               background: currentColor; color: #fff; font-size: 9px; font-weight: 700;
               display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.viol-marker::before { content: '!'; color: var(--warn-bg); }
.viol.is-bad .viol-marker::before { color: var(--bad-bg); }
/* V8.18 — neutral info notice (e.g. "voltage calculation is off"). Distinct
   from the amber/red violation styles so it never reads as a problem. */
.viol-info { background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--r-sm);
             padding:6px 8px; font-size:11.5px; color:#1d4ed8; display:flex; gap:6px;
             align-items:flex-start; margin-top:4px; }
.viol-info .viol-marker { background:#3b82f6; }
.viol-info .viol-marker::before { content:'i'; color:#eff6ff; font-style:italic; }

.cv-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
          font-size: 11.5px; padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.cv-row:hover { background: var(--surface-alt); }
.cv-row.is-worst { background: var(--crys-orange-bg); }
.cv-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-name .cv-meta { color: var(--ink-subtle); font-weight: 400; margin-left: 4px; font-size: 10.5px; }
.cv-v { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.cv-status { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
             text-transform: uppercase; letter-spacing: 0.04em; }
.cv-status.ok    { background: var(--good-bg); color: var(--good); }
.cv-status.warn  { background: var(--warn-bg); color: var(--warn); }
.cv-status.bad   { background: var(--bad-bg);  color: var(--bad); }

/* Inputs / selects inside the inspector */
.inspector input[type=number], .inspector select {
  font-size: 11.5px; padding: 3px 6px; border-radius: 5px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.inspector input[type=number]:focus, .inspector select:focus { outline: 2px solid var(--crys-orange-border); border-color: transparent; }
.inspector label { color: var(--ink-muted); font-size: 11.5px; }

/* Voltage configure accordion (wraps V7.12 #ctrl-calc / #manual-breakdown) */
#voltage-configure { display: none; flex-direction: column; gap: 8px;
                     padding: 10px; margin-top: 6px;
                     background: var(--surface-alt); border: 1px solid var(--border);
                     border-radius: var(--r-md); font-size: 11.5px; }
#voltage-configure.is-open { display: flex; }
/* V8.17 — slider for the inspector's "Voltage calculation" on/off switch. */
.vc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.vc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vc-switch .vc-track { width: 30px; height: 16px; background: #cbd5e1; border-radius: 9px; transition: background .15s; position: relative; display: inline-block; }
.vc-switch .vc-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.vc-switch input:checked + .vc-track { background: var(--crys-orange); }
.vc-switch input:checked + .vc-track::after { left: 16px; }
.vc-switch input:focus-visible + .vc-track { outline: 2px solid var(--crys-orange-border); outline-offset: 2px; }
#voltage-configure .vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
#voltage-configure label { display: flex; flex-direction: column; gap: 3px; color: var(--ink-muted); }
#voltage-configure label > input, #voltage-configure label > select { width: 100%; }
#voltage-configure .vc-radios { display: flex; flex-direction: column; gap: 4px; }
#voltage-configure .vc-radios label { flex-direction: row; align-items: center; gap: 5px; cursor: pointer; }
#voltage-configure .vc-radios input { width: auto; margin: 0; }
#voltage-configure .vc-cap { color: var(--ink-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-top: 4px; }

/* V7.12 leftover containers — hide their original chrome; we host them inline now */
#ctrl-calc, #manual-breakdown, #volt-bar, #volt-result, #manual-toggle-btn,
#volt-toggle-btn, #volt-chevron, #manual-chevron, #volt-active, #volt-bar-hint,
#rules-line, #app-header, #toolbar-card, #toolbar, #settings-row,
#main-row, #main-col, #sidebar, #lang-button, #crysberg-logo {
  /* These IDs are referenced by V7.12 JS but their old chrome is removed. We
     either re-host the live inputs inside the inspector accordion (see
     #voltage-configure) or hide them entirely. */
}
#ctrl-calc-old, #toolbar-card-old, #settings-row-old, #sidebar-old, #app-header-old,
#main-row-old, #rules-line-old, #crysberg-logo-old { display: none !important; }

/* Settings popover (icon size / show valves / valve wire size) */
#settings-popover { position: absolute; right: 16px; top: 52px; display: none;
                    background: var(--surface); border: 1px solid var(--border);
                    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
                    padding: 12px 14px; min-width: 240px; z-index: 400;
                    flex-direction: column; gap: 10px; }
#settings-popover.is-open { display: flex; }
#settings-popover label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-muted); }
#settings-popover .row-inline { flex-direction: row; align-items: center; gap: 8px; }
#settings-popover input[type=range] { accent-color: var(--crys-orange); }

/* V7.146: selected-component popup — slides in next to the (always-visible) right inspector */
#selection-popup { position: fixed; top: 92px; right: 336px; width: 290px;
                   max-height: calc(100vh - 130px); overflow-y: auto;
                   background: var(--surface); border: 1px solid var(--border);
                   border-radius: var(--r-md); box-shadow: var(--shadow-lg);
                   padding: 12px 16px 14px; z-index: 360;
                   opacity: 0; transform: translateX(12px); pointer-events: none;
                   transition: opacity .14s ease, transform .14s ease; }
#selection-popup.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }
#selection-popup .selpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#selection-popup .selpop-head b { font-size: 12.5px; color: var(--ink); }
#selection-popup .selpop-close { border: none; background: transparent; color: var(--ink-faint);
                   font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
#selection-popup .selpop-close:hover { background: var(--bg); color: var(--ink); }

/* Language menu */
.menu { position: relative; }
.menu-popup { display: none; position: absolute; right: 0; top: calc(100% + 4px);
               background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--r-md); box-shadow: var(--shadow-lg);
               z-index: 300; overflow: hidden; min-width: 190px; }
.menu.is-open .menu-popup { display: block; }
.menu-item { display: block; width: 100%; padding: 7px 14px; border: 0; background: none;
              cursor: pointer; font-size: 12px; text-align: left; color: var(--ink); white-space: nowrap; }
.menu-item:hover { background: var(--surface-alt); }
.menu-item.is-active { background: var(--crys-orange-bg); color: var(--crys-orange-dark); font-weight: 600; }

/* Help modal (carried from V7.12) — restyled with tokens, keeps the same DOM */
#help-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55);
                  z-index: 600; align-items: center; justify-content: center; padding: 32px; }
#help-backdrop.open { display: flex; }
#help-modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
              max-width: 940px; width: 100%; max-height: 92vh; display: flex; flex-direction: column;
              overflow: hidden; color: var(--ink); }
#help-header { display: flex; align-items: center; justify-content: space-between;
                padding: 14px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#help-header h2 { font-size: 16px; font-weight: 700; color: var(--ink); }
#help-close { border: none; background: none; cursor: pointer; font-size: 18px; color: var(--ink-subtle); padding: 4px 8px; }
#help-close:hover { color: var(--ink); }
#help-body { overflow-y: auto; padding: 18px 22px; }
#help-body h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; }
#help-body h3:first-child { margin-top: 0; }
#help-body p, #help-body li { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; }
#help-body table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 12px; }
#help-body th, #help-body td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; color: var(--ink-muted); vertical-align: top; }
#help-body th { background: var(--surface-alt); color: var(--ink); font-weight: 600; }
#help-body ul { padding-left: 22px; }
#help-body code { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-alt);
                   padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.tag { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-block; }
.tag-gold { background: #d4b800; color: #1a1814; }
.tag-gray { background: #888; color: #fff; }

/* Refine button (V7.12) — keep purple accent */
#btn-refine-worst { border: 1px solid #c084fc; background: #faf5ff; color: #6b21a8;
                    padding: 3px 10px; border-radius: 6px; font-size: 11.5px;
                    font-weight: 600; cursor: pointer; white-space: nowrap; }
#btn-refine-worst:disabled { opacity: 0.55; cursor: wait; }

/* Selection-state body for inspector group/align actions */
/* V8.12 — compact cable-size buttons inside the selection popup (incl. mixed selections) */
.cs-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cs-mini-grid button { padding: 5px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
                       cursor: pointer; font-size: 11px; color: var(--ink); }
.cs-mini-grid button:hover:not(:disabled) { background: var(--crys-orange-bg); border-color: var(--crys-orange-border); }
.cs-mini-grid button.is-current { border-color: var(--crys-orange); background: var(--crys-orange-bg); font-weight: 700; }
.cs-mini-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.align-grid button { padding: 8px; border: 1px solid var(--border); border-radius: 6px;
                      background: var(--surface-alt); cursor: pointer; display: flex;
                      align-items: center; justify-content: center; font-size: 14px;
                      color: var(--ink-muted); }
.align-grid button:hover { background: var(--bg); border-color: var(--border-strong); color: var(--ink); }
.props-table { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 11.5px; }
.props-table .key { color: var(--ink-muted); }

/* ── DARK MODE ────────────────────────────────────────────────────── */
/* Crysberg logo — V7.12 treatment carried verbatim */
#crysberg-logo { display:inline-flex; align-items:center; justify-content:center; margin-left:8px; }
#crysberg-logo img { height:24px; width:auto; display:block; border-radius:4px; padding:2px 6px; background:#fff; }
/* V8.25 — partner brand logo replaces the Crysberg logo (sized to match) */
#partner-brand { align-items:center; margin-left:8px; }
#partner-brand img, #partner-brand svg { height:24px; width:auto; display:block; border-radius:4px; padding:2px 6px; background:#fff; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0F0E0B;
    --surface:      #1A1814;
    --surface-alt:  #232017;
    --border:       #312D24;
    --border-strong:#44403A;
    --ink:        #F4F1E8;
    --ink-muted:  #B8B2A2;
    --ink-subtle: #807A6C;
    --ink-faint:  #5C574E;
    --map-bg:   #1F1C16;
    --map-grid: rgba(255,255,255,0.04);
    --crys-orange-bg: rgba(240,90,40,0.16);
    --crys-orange-border: #C03F10;
    --good-bg: rgba(21,128,61,0.22);  --good-border: #166534;
    --warn-bg: rgba(194,65,12,0.22);  --warn-border: #9A3412;
    --bad-bg:  rgba(185,28,28,0.22);  --bad-border:  #991B1B;
  }
  #cable-hint  { color: #93c5fd; background: rgba(29,58,95,0.95); border-color: #3b82f6; }
  #scale-hint  { color: #fed7aa; background: rgba(124,45,18,0.55); border-color: #C03F10; }
  #upload-label { background: rgba(0,0,0,0.25); }
  #upload-overlay { color: var(--ink-faint); }
  #btn-refine-worst { background: rgba(192,132,252,0.16); color: #d8b4fe; border-color: rgba(192,132,252,0.45); }
  /* Keep the Crysberg logo's native brand colors (navy blue + orange) in
     dark mode by leaving the white card background intact. Add a subtle
     border + soft shadow so the chip reads as an intentional logo tile
     rather than a floating white square. */
  #crysberg-logo img { background:#1e293b; }   /* V7.12 dark-mode behavior — keep brand colors */
}