/* ===================== THEME (every color is a variable) ===================== */
:root {
  --paper: #ffffff;
  --ink: #161616;
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-50: #8d8d8d;
  --gray-70: #525252;
  --accent: #0f62fe;
  --accent-soft: #d0e2ff;
  --error: #da1e28;
  --warning: #b28600;
  --grid: #d4d4d4;
  --desk: #e8e8e8;
  --unassigned: #8d8d8d;
  --line: var(--ink);         /* UI rules: top bar, panel headers, menus, dialogs */
  --focus: #0f62fe;
  --button-primary: #0f62fe;
  --on-accent: #ffffff;       /* text on primary buttons */
  --overlay: rgba(22,22,22,.35);
  --sheet-dim: 1;             /* on-screen sheet brightness (exports never dim) */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
/* Dark UI (Carbon Gray 100): follows the system unless the user picked Light or Dark (html[data-theme]).
   Screen only, so printing is always light. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161616;         /* Carbon Gray 100: background */
    --ink: #f4f4f4;           /* text-primary */
    --gray-10: #262626;       /* layer-01, field-01 */
    --gray-20: #393939;       /* border-subtle */
    --gray-30: #525252;
    --gray-50: #6f6f6f;       /* border-strong, text-disabled */
    --gray-70: #c6c6c6;       /* text-secondary */
    --accent: #4589ff;        /* interactive (Blue 50) */
    --accent-soft: #002d9c;   /* highlight (Blue 80) */
    --error: #fa4d56;         /* support-error (Red 50) */
    --warning: #f1c21b;       /* support-warning (Yellow 30) */
    --desk: #262626;          /* Gray 90 around the sheet */
    --line: #6f6f6f;
    --focus: #ffffff;
    --overlay: rgba(0,0,0,.6);
    --sheet-dim: .88;         /* white sheet shows as about Gray 20 (#e0e0e0) */
    color-scheme: dark;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --paper: #161616;         /* Carbon Gray 100: background */
    --ink: #f4f4f4;           /* text-primary */
    --gray-10: #262626;       /* layer-01, field-01 */
    --gray-20: #393939;       /* border-subtle */
    --gray-30: #525252;
    --gray-50: #6f6f6f;       /* border-strong, text-disabled */
    --gray-70: #c6c6c6;       /* text-secondary */
    --accent: #4589ff;        /* interactive (Blue 50) */
    --accent-soft: #002d9c;   /* highlight (Blue 80) */
    --error: #fa4d56;         /* support-error (Red 50) */
    --warning: #f1c21b;       /* support-warning (Yellow 30) */
    --desk: #262626;          /* Gray 90 around the sheet */
    --line: #6f6f6f;
    --focus: #ffffff;
    --overlay: rgba(0,0,0,.6);
    --sheet-dim: .88;         /* white sheet shows as about Gray 20 (#e0e0e0) */
    color-scheme: dark;
  }
}
/* The sheet is always paper (same values as SHEET_THEME in js/01-constants.js); in dark mode it is only dimmed. */
#canvas, body.sheet-only #print-root {
  --paper: #ffffff; --ink: #161616; --gray-10: #f4f4f4; --gray-20: #e0e0e0; --gray-50: #8d8d8d; --gray-70: #525252;
  --accent: #0f62fe; --accent-soft: #d0e2ff; --error: #da1e28; --warning: #b28600; --grid: #d4d4d4; --unassigned: #8d8d8d;
}
#canvas, body.sheet-only #print-root svg { filter: brightness(var(--sheet-dim)); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 13px/1.4 var(--font-sans); }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { background: var(--paper); border: 1px solid var(--gray-20); padding: 3px 9px; cursor: pointer; height: 26px; }
button:hover { border-color: var(--ink); }
button.primary { background: var(--button-primary); color: var(--on-accent); border-color: var(--button-primary); }
button.danger:hover { border-color: var(--error); color: var(--error); }
button:disabled { color: var(--gray-50); cursor: default; border-color: var(--gray-20); }
input, select, textarea { background: var(--gray-10); border: 0; border-bottom: 1px solid var(--gray-50); padding: 3px 6px; height: 26px; min-width: 0; }
textarea { height: auto; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
input[type=checkbox] { height: auto; }
.mono { font-family: var(--font-mono); }
.label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-70); }

#app { display: grid; height: 100vh; grid-template-columns: 196px 1fr 340px; grid-template-rows: 40px 1fr 30px auto 26px;
  grid-template-areas: "top top top" "pal stage insp" "pal tabs insp" "issues issues issues" "status status status"; }
#topbar { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--paper); overflow-x: auto; white-space: nowrap; }
#topbar .brand { font: 600 13px var(--font-mono); letter-spacing: .18em; }
#topbar .grp { display: flex; gap: 4px; align-items: center; padding-left: 14px; border-left: 1px solid var(--gray-20); }
#docname { font: 12px var(--font-mono); color: var(--gray-70); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
#docname.dirty::after { content: " *"; color: var(--error); }
.menu { position: relative; }
.menu-list { position: fixed; background: var(--paper); border: 1px solid var(--line); z-index: 1000; min-width: 220px; display: none; }
.menu.open .menu-list { display: block; }
.menu-list button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--gray-20); height: 30px; }
.menu-list button:hover { background: var(--gray-10); }
.menu-list button[hidden] { display: none; }
.ctxmenu { position: fixed; z-index: 1001; background: var(--paper); border: 1px solid var(--line); min-width: 200px; padding: 0; border-radius: 0; font: 12px var(--font-sans); }
.ctxmenu button { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; height: 28px; padding: 0 10px; border: 0; border-radius: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ctxmenu button:hover:not([disabled]), .ctxmenu button:focus { background: var(--gray-10); outline: none; }
.ctxmenu button:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.ctxmenu button[disabled] { color: var(--gray-50); cursor: default; }
.ctxmenu button.danger { color: var(--error); }
.ctxmenu .k { font: 11px var(--font-mono); color: var(--gray-70); }
.ctxmenu .sep { border-top: 1px solid var(--gray-20); }

#palette { grid-area: pal; border-right: 1px solid var(--gray-20); overflow-y: auto; background: var(--paper); }
.section-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-70); padding: 10px 12px 6px; border-bottom: 1px solid var(--gray-20); display: flex; justify-content: space-between; align-items: center; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 3px 12px; white-space: nowrap; cursor: grab; border-bottom: 1px solid var(--gray-10); user-select: none; font-size: 12px; }
.pal-item:hover { background: var(--gray-10); }
.pal-item svg { width: 22px; height: 22px; flex: none; }
.pal-h { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); padding: 9px 12px 3px; border-top: 1px solid var(--gray-20); }
.pal-area { cursor: default; }
.pal-area .seg { margin-left: auto; display: flex; }
.pal-area .seg button { height: 20px; padding: 0 6px; font-size: 11px; cursor: grab; }
.pal-area .seg button + button { border-left: 0; }
.pal-hint { padding: 10px 12px; font-size: 11px; color: var(--gray-70); }
.pal-tool { cursor: pointer; }
.pal-tool.on { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }

#stage { grid-area: stage; position: relative; overflow: hidden; background: var(--desk); }
#canvas { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
#stage.panning, #stage.panning * { cursor: grabbing !important; }
#stage.space * { cursor: grab; }
#stage.tool #canvas, #stage.tool #canvas .nd-node, #stage.tool #canvas .nd-rowg { cursor: crosshair; }
#zoomhint { position: absolute; right: 10px; bottom: 8px; font: 11px var(--font-mono); color: var(--gray-70); background: var(--paper); border: 1px solid var(--gray-20); padding: 2px 6px; }

#inspector { grid-area: insp; border-left: 1px solid var(--gray-20); overflow-y: auto; background: var(--paper); }
.insp-body { padding: 10px 12px 24px; }
.field { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.field > span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-70); }
.field input, .field select, .field textarea { width: 100%; }
.readonly { font: 12px var(--font-mono); color: var(--gray-70); padding: 3px 0; }
.subh { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-70); margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.subh button { height: 22px; padding: 0 8px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.ifrow { border: 1px solid var(--gray-20); padding: 6px; margin-bottom: 6px; }
.ifrow.implicit { border-style: dashed; color: var(--gray-70); }
.ifrow .r { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.ifrow .r:last-child { margin-bottom: 0; }
.ifrow input, .ifrow select { font-family: var(--font-mono); font-size: 12px; }
.ifrow .del { width: 26px; padding: 0; flex: none; }
.netchecks { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 11px var(--font-mono); }
.netchecks label { display: flex; align-items: center; gap: 3px; }
.swatch { width: 12px; height: 12px; display: inline-block; flex: none; border: 1px solid var(--ink); }
.nettable { width: 100%; border-collapse: collapse; }
.netrow { border: 1px solid var(--gray-20); padding: 6px; margin-bottom: 6px; }
.netrow .r { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.netrow input { font-family: var(--font-mono); font-size: 12px; }
.netrow.hl { outline: 2px solid var(--accent); }
.netrow .r select { font-family: var(--font-mono); font-size: 12px; }
.chips { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--gray-20); padding: 2px 2px 2px 6px; font-size: 12px; }
.chip button { height: 20px; width: 22px; padding: 0; }
.pathbox { white-space: normal; word-break: break-word; line-height: 1.5; }
.colorbtn { width: 26px; height: 26px; padding: 0; border: 1px solid var(--ink); flex: none; }
.colorpop { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; border: 1px solid var(--line); background: var(--paper); margin-top: 4px; }
.colorpop button { width: 20px; height: 20px; padding: 0; border: 1px solid var(--gray-20); }
.colorpop button.on { outline: 2px solid var(--ink); }
.colorpop input[type=color] { width: 44px; height: 20px; padding: 0; border: 0; }
.hint { font-size: 11px; color: var(--gray-70); margin: 4px 0 8px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.logoslot { border: 1px dashed var(--gray-50); padding: 6px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; min-height: 52px; }
.logoslot.over { border-color: var(--accent); background: var(--accent-soft); }
.logoslot .prev { width: 120px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--gray-20); font-size: 10px; color: var(--gray-50); }
.logoslot .prev img { max-width: 100%; max-height: 100%; }
.logoslot .prev.gray img { filter: grayscale(1); }
.logoslot .meta { flex: 1; min-width: 0; font: 10px var(--font-mono); color: var(--gray-70); }
.logoslot .meta b { display: block; font: 500 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.logoslot button { height: 22px; padding: 0 6px; font-size: 11px; margin-top: 3px; }

#sheettabs { grid-area: tabs; display: flex; align-items: stretch; border-top: 1px solid var(--line); background: var(--paper); min-width: 0; font: 11px var(--font-mono); user-select: none; }
#sheettabs .tabs { display: flex; min-width: 0; overflow-x: auto; flex: 1; }
#sheettabs .tab { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-right: 1px solid var(--gray-20); cursor: pointer; white-space: nowrap; color: var(--gray-70); position: relative; touch-action: none; }
#sheettabs .tab:hover { background: var(--gray-10); }
#sheettabs .tab.on { background: var(--paper); color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
#sheettabs .tab.drop { background: var(--accent-soft); }
#sheettabs .tab.ins-l::before, #sheettabs .tab.ins-r::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 2px; background: var(--accent); }
#sheettabs .tab.ins-l::before { left: -1px; } #sheettabs .tab.ins-r::after { right: -1px; }
#sheettabs .tab .n { font-weight: 600; }
#sheettabs .tab .nm.none { color: var(--gray-50); }
#sheettabs .tab .nt { font-size: 9px; letter-spacing: .08em; color: var(--gray-70); border: 1px solid var(--gray-30); padding: 0 3px; text-transform: uppercase; }
#sheettabs .tab.ix .nm::after { content: " · INDEX"; color: var(--gray-50); }
#sheettabs .tab input { height: 20px; width: 150px; font: 11px var(--font-mono); }
#sheettabs .badge { font: 600 10px var(--font-mono); padding: 0 4px; line-height: 15px; color: var(--paper); }
#sheettabs .badge.err { background: var(--error); } #sheettabs .badge.warn { background: var(--warning); }
#sheettabs .tabacts { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-left: 1px solid var(--gray-20); }
#sheettabs .tabacts button { height: 22px; padding: 0 7px; font: 11px var(--font-mono); }
#issues { grid-area: issues; border-top: 1px solid var(--line); background: var(--paper); max-height: 190px; overflow-y: auto; display: none; }
#issues.open { display: block; }
#issues .item { display: grid; grid-template-columns: 16px 44px 110px 1fr; gap: 8px; padding: 3px 12px; border-bottom: 1px solid var(--gray-10); cursor: pointer; font-size: 12px; align-items: baseline; }
#issues .item:hover { background: var(--gray-10); }
#issues .code { font: 11px var(--font-mono); color: var(--gray-70); }
.lvl-error { color: var(--error); font-weight: 600; }
.lvl-warning { color: var(--warning); font-weight: 600; }
#statusbar { grid-area: status; display: flex; align-items: center; gap: 16px; padding: 0 10px; border-top: 1px solid var(--gray-20); font: 11px var(--font-mono); color: var(--gray-70); background: var(--paper); white-space: nowrap; overflow: hidden; }
#statusbar button { height: 20px; padding: 0 8px; font: 11px var(--font-mono); }
#statusbar .sp { flex: 1; }

#modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 50; }
#modal[hidden] { display: none; }
.dialog { background: var(--paper); border: 1px solid var(--line); min-width: 420px; max-width: 92vw; max-height: 88vh; overflow: auto; }
.dialog h2 { margin: 0; font: 500 11px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dialog .body { padding: 14px; }
.dialog .foot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--gray-20); }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pick-grid .who { font: 600 12px var(--font-mono); margin-bottom: 6px; }
.pick-grid select, .pick-grid input { width: 100%; margin-bottom: 6px; font-family: var(--font-mono); }
table.plan { border-collapse: collapse; font: 11px var(--font-mono); width: 100%; }
table.plan th { text-align: left; font: 500 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-70); border-bottom: 1px solid var(--line); padding: 4px 8px; }
table.plan td { border-bottom: 1px solid var(--gray-20); padding: 3px 8px; }
table.plan tr.nethead td { background: var(--gray-10); font-weight: 600; border-bottom: 1px solid var(--line); }
.plan-title { font: 600 13px var(--font-mono); margin-bottom: 8px; }

#print-root { display: none; }
#selftest { display: none; }
body.selftest #app { display: none; }
body.selftest #selftest { display: block; margin: 16px; font: 12px/1.5 var(--font-mono); white-space: pre-wrap; }
body.sheet-only #app { display: none; }
body.sheet-only #print-root { display: block; }
body.sheet-only { background: var(--desk); }
body.sheet-only #print-root svg { display: block; width: 100vw; height: 100vh; }

@media print {
  html, body { height: auto; background: var(--paper); }
  #app, #modal, #selftest { display: none !important; }
  #print-root { display: block !important; }
  #print-root svg { display: block; }
}