/* =====================================================================
   tools.css — tool-specific layouts (dark ops console)
   ===================================================================== */

/* split layout: list rail + detail */
.split { display: grid; gap: 16px; align-items: start; }
.split.l { grid-template-columns: 340px minmax(0, 1fr); }
.split.r { grid-template-columns: minmax(0, 1fr) 320px; }
.split.lr { grid-template-columns: 280px minmax(0, 1fr) 300px; }
.split > * { min-width: 0; }
.card { min-width: 0; }

.listCard { display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.listScroll { overflow-y: auto; overflow-x: hidden; }
.listRow > * { min-width: 0; }

@media (max-width: 1120px) {
  .split.l, .split.r, .split.lr { grid-template-columns: 1fr; }
  .listCard { max-height: 460px; }
}

.listRow {
  display: grid; gap: 2px; padding: 10px 13px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .1s; border-left: 2px solid transparent;
}
.listRow:hover { background: var(--panel-2); }
.listRow.sel { background: var(--acc-glow); border-left-color: var(--acc); }
.listRow .lr-top { display: flex; align-items: center; gap: 8px; }
.listRow .lr-tag { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.listRow .lr-sub { font-size: 11px; color: var(--ink-3); }
.listRow .lr-meta { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* mini stat strip */
.statStrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.statStrip .st { background: var(--panel); padding: 11px 14px; }
.statStrip .st .cap { font-size: 9.5px; }
.statStrip .st .v { font-family: var(--mono); font-size: 19px; font-weight: 600; margin-top: 3px; letter-spacing: -0.01em; }
.statStrip .st .d { font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }

/* severity / status pills inline */
.pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.pill.high, .pill.alarm, .pill.fail, .pill.open { background: var(--alarm-bg); color: var(--alarm); }
.pill.medium, .pill.warn, .pill.draft, .pill.checking, .pill.answered { background: var(--warn-bg); color: var(--warn); }
.pill.low, .pill.ok, .pill.pass, .pill.done, .pill.closed, .pill.current { background: var(--ok-bg); color: var(--ok); }
.pill.info, .pill.none { background: var(--panel-3); color: var(--ink-3); }
.pill.acc { background: var(--acc-glow); color: var(--acc); }

/* properties grid */
.props { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.props .prop { background: var(--panel); padding: 9px 12px; }
.props .prop.full { grid-column: 1 / -1; }
.props .prop .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); }
.props .prop .v { font-size: 12.5px; margin-top: 2px; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { padding: 9px 13px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; margin-bottom: -1px; transition: .12s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--acc); }

/* topology / network graph */
.topo { position: relative; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; overflow: auto; }
.topoNode { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 11px; min-width: 130px; }
.topoNode.sup { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc-glow); }
.topoNode.off { opacity: 0.55; border-style: dashed; }

/* document page (FD preview) */
.docPage { background: #fbfbf9; color: #1a1d23; width: 820px; max-width: 100%; margin: 0 auto; padding: 64px 72px; font-family: "Cambria", Georgia, serif; font-size: 14px; line-height: 1.6; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6); border-radius: 2px; }
.docPage h2 { font-family: Arial, sans-serif; color: #163f79; font-size: 19px; margin: 26px 0 10px; }
.docPage h3 { font-family: Arial, sans-serif; color: #1e3a5f; font-size: 15px; margin: 16px 0 7px; font-weight: 600; }
.docPage p { margin: 0 0 11px; }
.docPage .docBullet { padding-left: 20px; position: relative; }
.docPage .docBullet::before { content: "•"; position: absolute; left: 4px; color: #163f79; }
.docPage .placeholder { color: #b1581a; font-style: italic; }

/* code / IO chips */
.iochip { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.iochip.AI { background: var(--info-bg); color: var(--info); }
.iochip.AO { background: var(--acc-glow); color: var(--acc); }
.iochip.DI { background: var(--viol-bg); color: var(--viol); }
.iochip.DO { background: var(--warn-bg); color: var(--warn); }
.iochip.BAC, .iochip.SW { background: var(--ok-bg); color: var(--ok); }

/* gantt */
.gantt { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ganttHd { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); }
.ganttWeeks { display: grid; }
.ganttWeeks .wk { border-left: 1px solid var(--line); font-size: 9px; color: var(--ink-4); padding: 4px 3px; text-align: center; font-family: var(--mono); }
.ganttRow { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); align-items: center; }
.ganttRow:hover { background: var(--panel-2); }
.ganttRow .gname { padding: 9px 13px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.ganttTrack { position: relative; height: 38px; }
.ganttBar { position: absolute; top: 9px; height: 20px; border-radius: 4px; display: flex; align-items: center; overflow: hidden; }
.ganttBar .fill { position: absolute; inset: 0; opacity: 0.3; }
.ganttBar .lbl { position: relative; font-size: 9.5px; padding: 0 7px; font-family: var(--mono); font-weight: 600; color: var(--bg-0); z-index: 1; }
.ganttGrid { position: absolute; inset: 0; display: grid; pointer-events: none; }
.ganttGrid i { border-left: 1px solid var(--line); }

/* wizard steps */
.steps { display: flex; gap: 0; margin-bottom: 18px; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; }
.step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--inset); border: 1px solid var(--line); color: var(--ink-3); flex-shrink: 0; }
.step.done .num { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.step.on .num { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 0 3px var(--acc-glow); }
.step .stxt { font-size: 12px; font-weight: 500; }
.step.pending .stxt { color: var(--ink-4); }
.step .line { flex: 1; height: 1px; background: var(--line); margin: 0 4px; }
.step.done .line { background: var(--acc-dim); }

/* dropzone */
.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 32px; text-align: center; color: var(--ink-3); background: var(--inset); transition: .15s; }
.dropzone:hover { border-color: var(--acc); color: var(--ink-2); background: var(--bg-0); }

/* heatmap cells (commissioning) */
.heatcell { aspect-ratio: 1; border-radius: 2px; }

/* mini map / legend */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }

/* checkbox */
.chk { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--inset); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.chk.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

/* toggle */
.tog { width: 34px; height: 19px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: .14s; flex-shrink: 0; }
.tog.on { background: var(--acc); border-color: var(--acc); }
.tog i { position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: .14s; }
.tog.on i { left: 16px; background: var(--acc-ink); }

/* split-flow connector dots */
.flowDots { display: flex; align-items: center; gap: 4px; color: var(--ink-4); }
.flowDots i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* ---- schematic canvas ---- */
.schematicCanvas {
  padding: 18px 16px; overflow-x: auto; overflow-y: hidden;
  background:
    linear-gradient(var(--grid-dot) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dot) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px;
}
.schematicCanvas svg { min-width: 520px; }
.schematicCanvas.hero { min-height: 340px; display: flex; align-items: center; overflow-x: auto; }
.schematicCanvas.hero svg { min-width: 0; width: 100%; max-height: 480px; }
.flowline { animation: flowdash 1.1s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .flowline { animation: none; } }

/* ---- schematic tool layout: plant strip on top, schematic hero + options ---- */
.plantStrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 16px; }
.plantPick {
  flex: 0 0 auto; width: 150px; text-align: left; display: grid; gap: 3px;
  padding: 9px 11px; border-radius: var(--r); background: var(--panel);
  border: 1px solid var(--line); color: var(--ink-2); transition: .12s;
}
.plantPick:hover { border-color: var(--line-2); background: var(--panel-2); }
.plantPick.sel { border-color: var(--acc); background: var(--acc-glow); color: var(--ink); box-shadow: 0 0 0 1px var(--acc-glow); }
.plantPick .pp-name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schematicMain { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .schematicMain { grid-template-columns: 1fr; } }

/* ---- valve recommendation cards ---- */
.valveCard { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-width: 0; }
.valveCard .vSpec { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.valveCard .vSpec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11px; padding: 1px 0; }
.valveCard .vSpec .k { color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; }
.valveCard .vSpec b { font-family: var(--mono); font-weight: 600; font-size: 11px; text-align: right; }
.recGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .recGrid { grid-template-columns: 1fr; } }

/* ---- LAN riser diagram ---- */
.riser { overflow: auto; background:
    linear-gradient(var(--grid-dot) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dot) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px; }
.floorRow { display: grid; grid-template-columns: 138px 1fr; border-bottom: 1px dashed var(--line); }
.floorRow:last-child { border-bottom: none; }
.floorTab { padding: 14px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; justify-content: center; background: var(--panel-2); position: sticky; left: 0; z-index: 2; }
.floorTab b { font-size: 12.5px; font-weight: 600; }
.floorTab span { font-size: 10px; color: var(--ink-3); }
.floorLane { padding: 14px 16px; display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; position: relative; }
.boardNode { width: 190px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; transition: .13s; align-self: flex-start; }
.boardNode:hover { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc-glow); }
.boardNode.sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc-glow); }
.boardNode .bn-hd { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.boardNode .bn-bd { padding: 8px 10px; display: grid; gap: 5px; }
.boardNode .bn-plant { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 6px; border-radius: 4px; background: var(--inset); cursor: pointer; }
.boardNode .bn-plant:hover { background: var(--panel-3); }
.roomBracket { align-self: flex-start; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 8px 8px; display: flex; gap: 12px; align-items: flex-start; position: relative; }
.roomBracket > .rb-lbl { position: absolute; top: -8px; left: 10px; background: var(--panel-2); padding: 0 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }

/* =====================================================================
   DOCUMENT REVIEW — preview · highlight · per-type process · AI scan
   ===================================================================== */
.docGrid { display: grid; grid-template-columns: 248px minmax(0, 1fr) 312px; gap: 14px; align-items: start;
  grid-template-areas: "files preview side"; }
.docGrid > * { min-width: 0; }
.docScope { container-type: inline-size; }
.docFiles { grid-area: files; }
.docPreview { grid-area: preview; }
.docSide { grid-area: side; }
.docFiles { max-height: calc(100vh - 250px); }

/* mid width — keep the preview wide: stack files on top, preview beside side */
@container (max-width: 1080px) {
  .docGrid { grid-template-columns: minmax(0, 1fr) 312px; grid-template-areas: "files files" "preview side"; }
  .docFiles { max-height: 230px; }
  .docFiles .listScroll { max-height: 150px; }
}
/* narrow — single column, preview full width */
@container (max-width: 720px) {
  .docGrid { grid-template-columns: 1fr; grid-template-areas: "files" "preview" "side"; }
  .docFiles { max-height: 220px; }
}
.docFiles .listRow { cursor: pointer; }
.lr-meta { display: inline-flex; align-items: center; gap: 6px; }

/* preview pane */
.docPreview { display: flex; flex-direction: column; max-height: calc(100vh - 250px); }
.docMeta { padding: 8px 16px; font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--inset); font-family: var(--mono); }
.docBody { overflow-y: auto; padding: 6px 0 14px; scroll-behavior: smooth; }
.docBlock { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.docBlock:hover { background: var(--inset); }
.docBlock.hdrBlock { background: var(--panel-2); }
.docRef { font-family: var(--mono); font-size: 10px; color: var(--ink-4); padding-top: 2px; text-transform: uppercase; letter-spacing: .04em; user-select: none; }
.docText { font-size: 13px; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }
.docText.mono { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; letter-spacing: -0.01em; }
.rowBlock .docText { color: var(--ink); }

/* highlight marks */
.hl { border-radius: 3px; padding: 0 1px; cursor: pointer; color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: filter .12s; }
.hl:hover { filter: brightness(1.18); }
.hl-detail { background: color-mix(in oklch, var(--warn) 30%, transparent); box-shadow: inset 0 -2px 0 var(--warn); }
.hl-rfi { background: color-mix(in oklch, var(--alarm) 30%, transparent); box-shadow: inset 0 -2px 0 var(--alarm); }
.hl-ok { background: color-mix(in oklch, var(--ok) 28%, transparent); box-shadow: inset 0 -2px 0 var(--ok); }
.hl.ai { border-top: 1px dashed currentColor; }
.hl.on { outline: 2px solid var(--acc); outline-offset: 1px; }

/* floating tag popover */
.hlPop { width: 282px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 10px; display: grid; gap: 9px; }
.hlPopTags { display: flex; flex-direction: column; gap: 5px; }
.hlTagBtn { text-align: left; padding: 8px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: .12s; }
.hlTagBtn:hover { border-color: var(--line-strong); color: var(--ink); }
.hlTagBtn.t-detail:hover, .hlTagBtn.t-detail.on { border-color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); color: var(--ink); }
.hlTagBtn.t-rfi:hover, .hlTagBtn.t-rfi.on { border-color: var(--alarm); background: color-mix(in oklch, var(--alarm) 14%, transparent); color: var(--ink); }
.hlTagBtn.t-ok:hover, .hlTagBtn.t-ok.on { border-color: var(--ok); background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ink); }
.hlNote { font-size: 12px; resize: vertical; }
.hlPopHint { font-size: 10.5px; color: var(--ink-4); text-align: center; }
.linkBtn { background: none; border: none; color: var(--acc); cursor: pointer; font: inherit; padding: 0; }

/* right column */
.docSide { display: grid; gap: 14px; align-content: start; }
.procHd { gap: 8px; }
.procDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.procBarWrap { padding: 0 14px 4px; }
.procSteps { padding: 6px 12px 12px; display: grid; gap: 4px; }
.procStep { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--inset); color: var(--ink-2); font-size: 11.5px; text-align: left; cursor: pointer; transition: .12s; }
.procStep:hover { border-color: var(--line); color: var(--ink); }
.procStep.done { color: var(--ink-3); }
.procStep.done span:last-child { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.chk2 { width: 16px; height: 16px; border-radius: 4px; border: 1.4px solid var(--line-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--bg-0); }
.procStep.done .chk2 { background: var(--acc); border-color: var(--acc); }

/* AI findings */
.aiFindings { border-top: 1px solid var(--line); padding: 10px 14px 12px; display: grid; gap: 8px; }
.aiFind { background: var(--inset); border: 1px solid var(--line); border-left: 2px solid var(--acc); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 5px; }
.aiFindMid { display: flex; gap: 10px; align-items: center; }
.aiNote { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.aiTag { font-size: 9.5px; font-weight: 600; color: var(--acc); font-family: var(--mono); letter-spacing: .03em; }

/* flagged sections list */
.flagList { display: grid; gap: 7px; padding: 10px 12px 12px; max-height: 280px; overflow-y: auto; }
.flagRow { background: var(--inset); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 5px; cursor: pointer; transition: .12s; }
.flagRow:hover { border-color: var(--line-strong); }
.flagRow.on { box-shadow: 0 0 0 1px var(--acc); }
.flagRow.hl-edge-detail { border-left-color: var(--warn); }
.flagRow.hl-edge-rfi { border-left-color: var(--alarm); }
.flagRow.hl-edge-ok { border-left-color: var(--ok); }
.flagQuote { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; font-style: italic; }
.flagNote { font-size: 10.5px; color: var(--ink-4); line-height: 1.4; }

/* Q&A */
.qaThread { max-height: 220px; overflow-y: auto; padding: 12px 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.qaMsg { display: grid; gap: 3px; }
.qaWho { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--ink-4); }
.qaMsg.user .qaWho { color: var(--acc); }
.qaText { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.qaMsg.user .qaText { color: var(--ink); }
.qaBox { display: flex; gap: 7px; padding: 12px 14px; align-items: center; }
.qaBox .input { flex: 1; }

/* spinner + mini icon button */
.spin { width: 13px; height: 13px; border: 2px solid var(--line-strong); border-top-color: var(--acc); border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconMini { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--ink-4); cursor: pointer; transition: .12s; }
.iconMini:hover { background: var(--inset); border-color: var(--line); color: var(--ink-2); }
.dzBtn { width: 100%; cursor: pointer; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.row.center { align-items: center; }

/* modal */
.modalWrap { position: fixed; inset: 0; background: oklch(0 0 0 / 0.55); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 300; padding: 24px; }
.modal { width: min(640px, 96vw); max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); }

/* mobile reflow */
.shell.mobile .docGrid { grid-template-columns: 1fr; grid-template-areas: "files" "preview" "side"; }

/* ---- controller-type catalogue (WCH points tool) ---- */
.ctypeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 9px; padding: 12px 14px; }
.ctypeCard { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; display: grid; gap: 4px; opacity: 0.62; transition: .14s; }
.ctypeCard.active { opacity: 1; border-color: var(--line-strong); }
.ctype-vendor { font-size: 11px; color: var(--ink-2); font-weight: 500; }
.ctype-meta { font-size: 10px; }
.ctype-io { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; }

/* ---- documented (as-built) valve schedule ---- */
.docValveNote { padding: 9px 14px 12px; }
.shell.mobile .ctypeGrid { grid-template-columns: 1fr 1fr; }

/* ---- export dropdown ---- */
.exportWrap { position: relative; }
.exportMenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 6px; }
.exportMenuHd { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); padding: 6px 9px 7px; font-weight: 600; }
.exportMenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; transition: .12s; }
.exportMenu button:hover { background: var(--inset); border-color: var(--line); }
.exportMenu button b { font-size: 12px; font-weight: 600; }
.exportMenu button span { font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); }

/* =====================================================================
   JACE drill-down modal — IP HLI links then field buses w/ controllers
   ===================================================================== */
.jaceModal { width: min(880px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.jaceHd { gap: 9px; flex-shrink: 0; }
.jaceHd .hd-act { display: flex; align-items: center; gap: 8px; }
.jaceStat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.jaceStat > div { background: var(--panel); padding: 9px 14px; display: grid; gap: 2px; }
.jaceStat .cap { font-size: 9px; }
.jaceStat b { font-size: 16px; font-weight: 600; }
.jaceBody { overflow-y: auto; padding: 14px 16px 18px; }
.jaceSecLbl { display: flex; align-items: center; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; margin-bottom: 9px; }
.jaceSecLbl em { font-style: normal; color: var(--ink-4); font-family: var(--mono); }
.jaceSecLbl .dot { width: 8px; height: 8px; border-radius: 50%; }
.jaceSecLbl .dot.ip { background: var(--info); }
.jaceSecLbl .dot.bus { background: var(--acc); }
.jaceEmpty { font-size: 11.5px; padding: 4px 2px 8px; }

/* IP HLI rows */
.hliRow { background: var(--inset); border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 7px; display: grid; gap: 5px; }
.hliRow.hw { border-left-color: var(--ink-4); }
.hliMain { display: flex; align-items: center; gap: 9px; }
.hliKind { font-size: 12px; color: var(--ink); font-weight: 500; }
.hliMeta { display: flex; align-items: center; gap: 10px; }
.hliDesc { font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); line-height: 1.45; }

/* field bus blocks */
.busBlock { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 9px; overflow: hidden; }
.busHd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.busHd b { font-size: 12px; }
.busCtrls { display: grid; gap: 1px; background: var(--line); }
.busCtrl { background: var(--panel); }
.busCtrl.open { background: var(--inset); }
.busCtrlHd { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 12px; background: transparent; border: none; color: var(--ink); cursor: pointer; text-align: left; transition: background .12s; }
.busCtrlHd:hover { background: var(--inset); }
.bc-name { font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pts { font-size: 10.5px; flex-shrink: 0; }
.bc-real { color: var(--ok); font-size: 9px; flex-shrink: 0; }
.bcPoints { padding: 4px 12px 12px; }
.dtable.compact th, .dtable.compact td { padding: 4px 8px; font-size: 11px; }
.bcFoot { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 2px; }
.shell.mobile .jaceStat { grid-template-columns: 1fr 1fr; }
.shell.mobile .docFiles,
.shell.mobile .docPreview { max-height: none; }
.shell.mobile .docBody { max-height: 60vh; }

/* =====================================================================
   JACE commissioning-pack PREVIEW (screen) + print (PDF, 1 ctrl/page)
   ===================================================================== */
.jpv-overlay { position: fixed; inset: 0; z-index: 400; background: oklch(0 0 0 / 0.62); backdrop-filter: blur(3px); display: flex; flex-direction: column; padding: 0; }
.jpv-shell { display: flex; flex-direction: column; height: 100%; width: 100%; }
.jpv-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #161b22; border-bottom: 1px solid #2a3340; }
.jpv-tl { display: flex; align-items: center; gap: 9px; color: #e8eaed; min-width: 0; }
.jpv-tl b { font-size: 13px; }
.jpv-sub { font-size: 11px; color: #8a909c; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpv-tr { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.jpv-prog { font-size: 11px; color: #2fd4c4; font-family: var(--mono); }
.jpv-pages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 22px; background: #2b3038; }

.jpv-page { background: #fff; color: #14181d; width: 1040px; max-width: 100%; min-height: 720px; padding: 26px 30px; box-shadow: 0 4px 18px rgba(0,0,0,.35); border-radius: 3px; display: flex; flex-direction: column; }
.jpv-diagram { gap: 8px; }
.jpv-dhd { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 2px solid #1f2733; padding-bottom: 10px; margin-bottom: 6px; }
.jpv-dtitle { font-size: 18px; font-weight: 700; color: #1f2733; }
.jpv-dsub { font-size: 11px; color: #5b616e; font-family: var(--mono); margin-top: 3px; }
.jpv-dstat { display: flex; gap: 16px; }
.jpv-dstat span { font-size: 11px; color: #5b616e; }
.jpv-dstat b { font-size: 17px; color: #1f2733; display: block; }
.jpv-legend { width: 100%; border-collapse: collapse; margin-top: 12px; }
.jpv-legend th, .jpv-legend td { border: 1px solid #d4d8df; padding: 5px 9px; text-align: left; font-size: 11px; }
.jpv-legend th { background: #eef0f3; color: #3a4250; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.jpv-legend .mono { font-family: var(--mono); }

.jpv-chd { border-bottom: 2px solid #1f2733; padding-bottom: 9px; margin-bottom: 10px; }
.jpv-ctitle { display: flex; align-items: baseline; gap: 10px; }
.jpv-cid { font-size: 18px; font-weight: 700; color: #1f2733; font-family: var(--mono); }
.jpv-cname { font-size: 13px; color: #44505e; }
.jpv-cmeta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.jpv-cmeta span { font-size: 10.5px; color: #44505e; }
.jpv-cmeta b { color: #8a909c; font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: .04em; margin-right: 3px; }
.jpv-real { color: #1f8a5b; font-weight: 600; }
.jpv-rep { color: #b1551f; font-weight: 600; }
.jpv-ssnote { background: #eef6f1; border: 1px solid #bfe0cd; border-left: 3px solid #1f8a5b; border-radius: 3px; padding: 7px 10px; font-size: 10.5px; color: #2c4636; margin-bottom: 10px; line-height: 1.5; }
.jpv-ssnote b { color: #1f5b3a; }
.jpv-iaq { color: #b1551f; font-weight: 600; }
.jpv-dim { color: #8a909c; }

.jpv-tbl { width: 100%; border-collapse: collapse; }
.jpv-tbl th, .jpv-tbl td { border: 1px solid #cfd3db; padding: 3px 6px; font-size: 10.5px; text-align: left; vertical-align: middle; }
.jpv-tbl thead th { background: #2a3340; color: #fff; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; }
.jpv-tbl th.ck, .jpv-tbl td.ck { width: 34px; text-align: center; }
.jpv-tbl th.fill { width: 130px; }
.jpv-tbl td.pt { font-family: var(--mono); font-weight: 700; color: #1f2733; }
.jpv-tbl td.ds { color: #2a2f36; }
.jpv-tbl td.c { text-align: center; }
.jpv-tbl td.mono, .jpv-tbl td .mono { font-family: var(--mono); }
.jpv-tbl td.dim { color: #6a7180; }
.jpv-tbl tr.ss td.pt { color: #1f5b3a; }
.ssbadge { display: inline-block; margin-left: 7px; font-size: 8px; font-weight: 700; color: #1f5b3a; background: #dcefe3; border: 1px solid #bfe0cd; border-radius: 3px; padding: 0 4px; letter-spacing: .03em; vertical-align: 1px; }
.jpv-tbl .iochip { font-size: 9px; }
.jpv-in { width: 100%; border: none; background: #fffbe8; font: inherit; font-size: 10px; padding: 2px 4px; border-radius: 2px; outline: 1px solid #e6dca8; }
.jpv-in:focus { outline: 1.5px solid #2a6fdb; background: #fff; }
.jpv-tbl input[type=checkbox] { width: 15px; height: 15px; accent-color: #1f8a5b; cursor: pointer; }

.jpv-sign { display: flex; gap: 26px; margin-top: auto; padding-top: 16px; }
.jpv-sign > div { flex: 1; }
.jpv-sign .k { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #8a909c; font-weight: 600; }
.jpv-sign .ln { display: block; border-bottom: 1px solid #1f2733; height: 24px; margin-top: 2px; }
.jpv-foot { display: flex; justify-content: space-between; padding-top: 8px; margin-top: 12px; border-top: 1px solid #e3e6ea; font-size: 9px; color: #9aa0ac; }

.shell.mobile .jpv-page { width: 100%; padding: 16px; min-height: 0; }
.shell.mobile .jpv-toolbar { flex-wrap: wrap; }

/* ---- print: only the pages, one controller per page ---- */
@media print {
  body.jpv-printing { background: #fff !important; }
  body.jpv-printing > *:not(.jpv-overlay) { display: none !important; }
  .jpv-overlay { position: static !important; background: #fff !important; backdrop-filter: none !important; padding: 0 !important; display: block !important; }
  .jpv-shell { height: auto !important; display: block !important; }
  .jpv-toolbar { display: none !important; }
  .jpv-pages { overflow: visible !important; padding: 0 !important; background: #fff !important; display: block !important; }
  .jpv-page { box-shadow: none !important; border-radius: 0 !important; width: 100% !important; min-height: auto !important; padding: 8mm 6mm !important; page-break-after: always; break-after: page; }
  .jpv-page:last-child { page-break-after: auto; }
  .jpv-in { outline: none !important; background: transparent !important; }
  @page { size: A4 landscape; margin: 8mm; }
}