/* =====================================================================
   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; font-variant-numeric: tabular-nums; }
.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: color 120ms ease-out, border-color 120ms ease-out; min-height: 44px; outline: none; }
.tabs button:hover { color: var(--ink); }
.tabs button:focus-visible { outline: 1px solid var(--acc); outline-offset: -2px; }
.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: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out; }
.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 { min-width: 44px; min-height: 44px; 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; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.chk.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

/* toggle */
.tog { width: 36px; height: 20px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background-color 140ms ease-out, border-color 140ms ease-out; flex: 0 0 36px; display: inline-block; vertical-align: middle; }
.tog.on { background: var(--acc); border-color: var(--acc); }
.tog i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform 140ms ease-out, background-color 140ms ease-out; box-shadow: 0 1px 2px oklch(0 0 0 / 0.24); }
.tog.on i { transform: translateX(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: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out; min-height: 44px; outline: none; position: relative;
}
.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: border-color 130ms ease-out, box-shadow 130ms ease-out; align-self: flex-start; }
.boardNode .bn-hd { transition: background-color 130ms ease-out; }
.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: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }
.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: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }
.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: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }
.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: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }
.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: background-color 140ms ease-out, opacity 140ms ease-out, border-color 140ms ease-out; }
.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: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }
.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); }

/* =====================================================================
   QUOTE BUILDER — detail cards, spreadsheet view, pickers, modals
   ===================================================================== */
.qb {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  color: var(--ink);
}
.qb-undo {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  min-height: 58px;
  padding: 9px 10px 9px 12px;
  background: var(--panel-2);
  border: 2px solid var(--alarm);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop), 0 0 0 3px var(--alarm-bg);
}
.qb-undo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--alarm-bg);
  color: var(--alarm);
  font-size: 22px;
  font-weight: 750;
}
.qb-undo-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.qb-undo-copy strong { color: var(--alarm); font-size: 12px; }
.qb-undo-copy span { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.qb-undo-btn {
  min-height: 38px;
  padding-inline: 14px;
  border-color: var(--alarm);
  background: var(--alarm);
  color: white;
  white-space: nowrap;
}
.qb-undo-dismiss {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-3);
  font-size: 20px;
  cursor: pointer;
}
.qb-undo-dismiss:hover { background: var(--inset); color: var(--ink); }
.qb-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.qb-brandblock { display: grid; gap: 1px; min-width: 220px; }
.qb-eye { font-size: 9.5px; color: var(--acc); font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.qb-proj { display: flex; align-items: baseline; gap: 9px; font-weight: 650; min-width: 0; }
.qb-proj .mono { color: var(--ink-3); font-size: 10.5px; font-weight: 500; }
.qb-viewtog, .qb-tabs-add, .qd-brandsel, .qd-le-acts { display: flex; align-items: center; gap: 6px; }
.qb-spacer, .qd-spacer { flex: 1; }
.qb-gap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--inset);
  color: var(--ink-3);
  font-size: 10.5px;
}
.qb-gap.ok { color: var(--ink-2); }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); flex-shrink: 0; }
.sdot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.sdot.bad { background: var(--alarm); box-shadow: 0 0 0 3px var(--alarm-bg); }
.qb-rev {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
}
.qb-rev.saved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-bg); }
.qb-rev.dirty { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-bg); }
.qb-rev.saving { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); background: var(--acc-glow); }
.qb-rev.error { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 35%, var(--line)); background: var(--alarm-bg); }
.qb-tabs {
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.qb-tabs-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.qb-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-width: 154px;
  max-width: 230px;
  min-height: 50px;
  padding: 8px 10px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tabc, transparent);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.qb-tab:hover { border-color: var(--line-2); background: var(--panel-2); }
.qb-tab.on { border-color: var(--acc); background: var(--acc-glow); color: var(--ink); }
.qb-tab.group { border-left-color: var(--tabc, var(--viol)); }
.qb-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.qb-tab-tot { grid-column: 2; color: var(--ink-4); font-family: var(--mono); font-size: 10.5px; }
.qb-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tabc, var(--acc)); grid-row: span 2; }
.qb-tab-dot[data-grp="1"] { border-radius: 3px; }
.qb-tab-flag { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 0 3px var(--alarm-bg); }
.qb-tab-over { outline: 2px dashed var(--acc); outline-offset: 2px; }
.qb-body {
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.qb-detail { height: 100%; min-height: 0; display: flex; flex-direction: column; }

.qbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--acc-dim);
  border-radius: var(--r-sm);
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.qbtn:hover { filter: brightness(1.06); }
.qbtn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.qbtn.ghost { background: var(--inset); color: var(--ink-2); border-color: var(--line); }
.qbtn.ghost:hover { border-color: var(--line-2); color: var(--ink); }
.qSel, .qNum, .qs-in, .qs-hd-in, .qd-name, .qd-foot-name {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--inset);
  color: var(--ink);
  outline: none;
}
.qSel { padding: 6px 9px; max-width: 230px; }
.qNum { width: 64px; padding: 5px 7px; font-family: var(--mono); text-align: right; }
.qNum-lg { width: 78px; }
.qSel:focus, .qNum:focus, .qs-in:focus, .qs-hd-in:focus, .qd-name:focus, .qd-foot-name:focus { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-glow); }
.qBadge, .qs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--panel-3);
  color: var(--ink-3);
}
.qBadge.ok, .qs-pill.ok { background: var(--ok-bg); color: var(--ok); }
.qBadge.warn, .qs-pill.warn { background: var(--warn-bg); color: var(--warn); }
.qBadge.bad, .qs-pill.bad { background: var(--alarm-bg); color: var(--alarm); }
.qBadge.muted { color: var(--ink-4); }
.qEmpty { padding: 13px; color: var(--ink-4); background: var(--inset); border: 1px dashed var(--line); border-radius: var(--r-sm); }

.qd-head, .qd-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.qd-head.group { border-left: 3px solid var(--viol); }
.qd-name, .qd-foot-name { min-width: 220px; padding: 6px 9px; font-weight: 650; }
.qd-type, .qd-foot-grp { color: var(--ink-3); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.qd-head-grp { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 11px; }
.qd-head-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--tabc, var(--line-strong)); }
.qd-margin, .qd-assign { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 11px; }
.qd-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  align-items: start;
  padding: 12px;
}
.qd-card {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.qd-card.flagged { border-color: var(--alarm); box-shadow: 0 0 0 1px var(--alarm-bg); }
.qd-card.wide { grid-column: span 2; }
.qd-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.qd-hd-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.qd-hd-l .t, .qd-card-hd .t { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-hd-tot { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.qd-card-bd { padding: 12px; display: grid; gap: 11px; }
.qd-grip { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink-4); cursor: grab; }
.qd-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qd-pt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); }
.qd-pt label { color: var(--ink-3); font-size: 11px; font-weight: 650; }
.qd-gate, .qd-note {
  color: var(--ink-3);
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  line-height: 1.55;
}
.qd-note { border-left-color: var(--info); font-size: 11.5px; }
.qd-sug { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 9px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); }
.o-l { font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.o-v, .o-sug { font-family: var(--mono); font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-foot { border-top: 1px solid var(--line); border-bottom: none; margin-top: auto; }
.qd-foot-l { display: flex; align-items: center; gap: 7px; }
.qd-hdiv { width: 1px; height: 26px; background: var(--line); }
.qd-foot-seg { display: grid; gap: 1px; min-width: 80px; }
.qd-foot-seg .k, .qb-totals .k { color: var(--ink-4); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.qd-foot-seg b { font-family: var(--mono); font-size: 12px; }
.qd-foot-seg.grand b { color: var(--acc); font-size: 15px; }
.qd-del { color: var(--alarm); }
.qd-le { display: grid; gap: 5px; }
.qd-le-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); }
.qd-le-row[data-hidden="1"] { opacity: .55; }
.qd-le-name { font-size: 11.5px; color: var(--ink-2); }
.qd-le-acts button { min-width: 30px; min-height: 28px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); }
.qd-le-acts button.on { color: var(--acc); border-color: var(--acc-dim); }

.qLines { display: grid; gap: 6px; }
.qLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 22px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.qLine.child { opacity: .72; margin-left: 12px; }
.ln-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ln-c, .ln-q { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.ln-x { color: var(--ink-4); text-align: center; cursor: pointer; font-size: 16px; }
.ln-x:hover { color: var(--alarm); }
.ln-qty { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.ln-qty button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink-2); }
.qAdd { min-height: 34px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--inset); color: var(--acc); font-weight: 650; }

.qsch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.qsch-opt { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px; text-align: left; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); }
.qsch-opt:hover, .qsch-opt.on { border-color: var(--acc); background: var(--acc-glow); color: var(--ink); }
.qsch-check { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--acc); }
.qsch-main { display: grid; gap: 2px; min-width: 0; }
.qsch-main b { font-size: 12px; }
.qsch-main span, .qsch-tags { color: var(--ink-4); font-size: 10.5px; }
.qsch-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.qsch-tag, .qd-tool-soon { font-style: normal; font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--panel-3); color: var(--ink-3); }

.qpop-scrim, .qmodal-scrim { position: fixed; inset: 0; z-index: 360; background: oklch(0 0 0 / .35); }
.qpop {
  position: fixed;
  z-index: 370;
  width: min(420px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.qpop-hd, .qpop-foot { padding: 9px 11px; background: var(--panel); border-bottom: 1px solid var(--line); }
.qpop-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: none; color: var(--ink-4); font-size: 10px; }
.qpop-search { padding: 10px; }
.qpop-search input { width: 100%; min-height: 36px; padding: 7px 9px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); }
.qpop-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 0 10px 10px; }
.qpop-tab { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); color: var(--ink-3); font-size: 11.5px; }
.qpop-tab.on, .qpop-tab:hover { color: var(--ink); border-color: var(--acc); background: var(--acc-glow); }
.qpop-list { overflow-y: auto; padding: 4px 8px 8px; display: grid; gap: 4px; }
.qpop-it { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.qpop-it.hi, .qpop-it:hover { background: var(--inset); border-color: var(--line); }
.it-name { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-sku, .it-price { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.it-tag { font-family: var(--mono); font-size: 9px; color: var(--ok); background: var(--ok-bg); border-radius: 4px; padding: 1px 5px; }

.qmodal-scrim { z-index: 390; display: grid; place-items: center; padding: 24px; background: oklch(0 0 0 / .58); backdrop-filter: blur(2px); }
.qmodal { width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); overflow: hidden; }
.qmodal-hd, .qmodal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.qmodal-foot { border-top: 1px solid var(--line); border-bottom: none; }
.qmodal-title { font-size: 15px; font-weight: 700; }
.qmodal-x { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; }
.qmodal-x:hover { color: var(--ink); background: var(--inset); }
.qmodal-bd { overflow-y: auto; padding: 14px; }
.qmodal-sum { color: var(--ink-3); font-size: 11.5px; }

.qb-simpleWrap { height: 100%; overflow: auto; background: var(--inset); }
.qb-sheet { min-width: 980px; padding: 12px; }
.qs { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qs-c-item { width: 220px; }
.qs-c-unit { width: 92px; }
.qs-c-plant { width: 128px; }
.qs-c-tot { width: 112px; }
.qs th, .qs td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: middle; }
.qs th:last-child, .qs td:last-child { border-right: none; }
.qs thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); }
.qs-item-h, .qs-unit-h, .qs-tot-h { color: var(--ink-3); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.qs-col { text-align: left; }
.qs-col.group { background: color-mix(in oklch, var(--viol) 10%, var(--panel-2)); }
.qs-col-name { font-size: 12px; color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-col-sub { margin-top: 2px; color: var(--ink-4); font-family: var(--mono); font-size: 9.5px; }
.qs-band td { background: var(--bg-1); color: var(--ink-3); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px; }
.qs-band.total td { color: var(--acc); }
.qs-band-row, .qs-band-tog { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.qs-band-tog { background: transparent; border: none; color: inherit; padding: 0; text-align: left; }
.qs-band-chev { display: inline-block; transition: transform 120ms ease-out; margin-right: 6px; }
.qs-band-chev[data-open="1"] { transform: rotate(90deg); }
.qs-band-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--acc); border-radius: var(--r-sm); padding: 4px 8px; }
.qs-r td { background: var(--panel); }
.qs-r:hover td { background: var(--panel-2); }
.qs-r.qs-sub td { background: var(--inset); }
.qs-r.qs-grand td { background: var(--acc-glow); font-weight: 700; }
.qs-item-name { font-size: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-item-desc { color: var(--ink-4); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-unit, .qs-tot, .qs-ro, .qs-sell { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--ink-2); }
.qs-unit small { color: var(--ink-4); margin-left: 2px; }
.qs-cell { text-align: right; }
.qs-cell.group { background: color-mix(in oklch, var(--viol) 6%, var(--panel)); }
.qs-in { width: 100%; min-height: 28px; padding: 4px 6px; text-align: right; font-family: var(--mono); }
.qs-sell { color: var(--ink); font-weight: 700; }
.qs-spec { cursor: pointer; color: var(--acc); }
.qs-spec-i { font-style: normal; margin-left: 4px; color: var(--ink-4); }
.qs-hd-edit { position: relative; display: grid; gap: 3px; }
.qs-hd-in { width: 100%; min-height: 28px; padding: 4px 6px; font-size: 11px; }
.qs-hd-sub { color: var(--ink-4); font-family: var(--mono); font-size: 9.5px; cursor: pointer; }
.qs-hd-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); overflow: hidden; }
.qs-hd-opt { display: grid; gap: 1px; padding: 7px; cursor: pointer; }
.qs-hd-opt:hover { background: var(--inset); }
.qs-hd-opt-n { color: var(--ink); font-size: 11px; }
.qs-hd-opt-t { color: var(--ink-4); font-family: var(--mono); font-size: 9.5px; }
.qs-addcol { background: var(--inset) !important; }
.qs-addin { border-style: dashed; color: var(--acc); }

.qg-members { display: grid; gap: 7px; }
.qg-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); color: var(--ink-2); text-align: left; }
.qg-mchev { transition: transform 120ms ease-out; }
.qg-mchev[data-open="1"] { transform: rotate(90deg); }
.qg-mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-mtype { color: var(--ink-4); font-family: var(--mono); font-size: 10px; }
.qg-points { margin: 6px 0 8px 24px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qg-points-hd { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }
.qg-export { border: none; background: transparent; color: var(--acc); font-size: 11px; }
.qg-points-list { display: grid; }
.qg-points-list.modal { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qg-pt { display: grid; grid-template-columns: minmax(130px, .7fr) 52px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--inset); }
.qg-pt:last-child { border-bottom: none; }
.qg-pt-type { font-family: var(--mono); color: var(--acc); font-size: 10px; }
.qg-pt-desc { color: var(--ink-3); font-size: 11px; }

.qb-totals {
  display: flex;
  align-items: stretch;
  gap: 1px;
  min-height: 50px;
  overflow-x: auto;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.qb-totals .seg { display: grid; align-content: center; gap: 2px; min-width: 118px; padding: 7px 11px; background: var(--panel); }
.qb-totals .seg.grow { flex: 1; min-width: 20px; }
.qb-totals .seg b { font-family: var(--mono); font-size: 13px; }
.qb-totals .seg.aroflo { color: var(--acc); min-width: 78px; text-align: center; }
.qb-totals .seg.grand { min-width: 170px; background: var(--acc-glow); }
.qb-totals .seg.grand b { color: var(--acc); font-size: 17px; }

@media (max-width: 1180px) {
  .qd-grid { grid-template-columns: 1fr !important; }
  .qd-card.wide { grid-column: auto; }
  .qb-top { flex-wrap: wrap; }
}
.shell.mobile .qb { height: auto; min-height: 100%; }
.shell.mobile .qb-body { overflow: visible; }
.shell.mobile .qb-detail { height: auto; }
.shell.mobile .qb-top, .shell.mobile .qd-head, .shell.mobile .qd-foot { align-items: stretch; }
.shell.mobile .qb-top > *, .shell.mobile .qd-foot > * { min-width: 0; }

/* =====================================================================
   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; }
}