/* --- Viewer-specific variables (architecture layer stroke colors) --- */
:root {
	--v-arch: #4C566A;
	--v-arch-2: #6b7690;
}
[data-theme="light"] {
	--v-arch: #8a94a9;
	--v-arch-2: #a3acbd;
}

/* Full-bleed viewer: fills remaining viewport below the top bar */
#viewer-page{display:flex;flex:1;min-height:0;overflow:hidden}

/* SVG container: blueprint grid backdrop */
#svg-container{
	flex:1;overflow:hidden;cursor:grab;position:relative;touch-action:none;
	background-color:var(--bg);
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size:2.25rem 2.25rem;
}
#svg-container.grabbing{cursor:grabbing}
#svg-container:focus-visible{outline-offset:-2px}
#svg-container svg{width:100%;height:100%;display:block}

/* Shared panel heading */
.panel-heading{
	font-size:0.6875rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;
	padding:0.875rem 1rem 0.625rem;border-bottom:1px solid var(--border);color:var(--text-3);
	position:sticky;top:0;background:var(--surface);z-index:1;
}

/* Left files panel */
#files-panel{width:min(17.5rem,18vw);min-width:min(17.5rem,18vw);background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;color:var(--text);font-size:0.8125rem;transition:width 200ms var(--ease-in-out),min-width 200ms var(--ease-in-out),visibility 200ms;display:flex;flex-direction:column}
#files-panel.collapsed{width:0;min-width:0;overflow:hidden;border-right:none;visibility:hidden}
.files-list{overflow-y:auto;flex:1;padding:0.375rem 0}
.file-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;font-size:0.8125rem;text-decoration:none;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background 120ms var(--ease-out),color 120ms var(--ease-out);border-left:2px solid transparent}
.file-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.file-item.active{background:var(--accent-soft);font-weight:600;color:var(--accent);border-left-color:var(--accent)}
.file-item.disabled{color:var(--text-3);cursor:default;font-style:italic}
.file-item.disabled:hover{background:none}
.file-item .file-icon{flex-shrink:0;opacity:0.5;width:0.875rem;height:0.875rem}
.file-item.active .file-icon{opacity:1}
.file-item.disabled .file-icon{opacity:0.3}

/* Right material panel */
#panel{width:min(22.5rem,28vw);min-width:min(22.5rem,28vw);background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:0 0 1rem 0;color:var(--text);font-size:0.8125rem;transition:width 200ms var(--ease-in-out),min-width 200ms var(--ease-in-out),visibility 200ms}
#panel.collapsed{width:0;min-width:0;overflow:hidden;padding:0;border-left:none;visibility:hidden}
#panel :focus-visible{outline-offset:-2px}

/* System sections (collapsible) */
.system-section{margin:0 0.75rem 0.625rem;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.system-section:first-of-type{margin-top:0.75rem}
.system-header{appearance:none;border:0;width:100%;font:inherit;color:inherit;text-align:left;padding:0.625rem 0.75rem;background:var(--surface-2);cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background 120ms var(--ease-out)}
.system-header:hover{background:var(--surface-3)}
.system-name{font-size:0.8125rem;font-weight:600;display:flex;align-items:center;gap:0.5rem}
.system-total{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:0.75rem;font-weight:600;color:var(--text-2);white-space:nowrap}
.color-dot{width:0.625rem;height:0.625rem;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 2px var(--surface)}
.system-body{padding:0;max-height:0;overflow:hidden;transition:max-height 300ms var(--ease-in-out)}
.system-section.open .system-body{max-height:none;padding:0 0 0.25rem 0}
.system-section:not(.open) .system-body{visibility:hidden}

/* Pipe/bend/fitting rows */
.pipe-row{display:flex;justify-content:space-between;padding:0.25rem 0.75rem 0.25rem 2rem;font-size:0.75rem;cursor:pointer;transition:background 120ms var(--ease-out);position:relative}
.pipe-row:hover{background:var(--surface-2)}
.pipe-row.active{background:var(--accent-soft)}
.bend-row{display:flex;justify-content:space-between;padding:0.125rem 0.75rem 0.125rem 3rem;font-size:0.6875rem;cursor:pointer;transition:background 120ms var(--ease-out);color:var(--text-2);position:relative}
.bend-row:hover{background:var(--surface-2)}
.bend-row.active{background:var(--accent-soft)}
.row-main{flex:1;display:flex;justify-content:space-between}
.row-main:focus-visible{outline:none}
[data-hl]:has(>.row-main:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.pipe-name{color:var(--text)}
.pipe-length{color:var(--accent);font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sub-header{padding:0.375rem 0.75rem 0.25rem 1.25rem;font-size:0.6875rem;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:0.375rem;cursor:pointer;transition:background 120ms var(--ease-out)}
.sub-header:hover{background:var(--surface-2)}
.sub-header.active{background:var(--accent-soft)}
.grand-total{padding:0.75rem;border-top:1px solid var(--border-strong);margin:0.5rem 0.75rem 0 0.75rem;font-size:0.8125rem;display:flex;justify-content:space-between;font-weight:600}
.grand-total span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent)}
.fitting-row{display:flex;justify-content:space-between;padding:0.25rem 0.75rem 0.25rem 2rem;font-size:0.75rem;cursor:pointer;transition:background 120ms var(--ease-out);position:relative}
.fitting-row:hover{background:var(--surface-2)}
.fitting-row.active{background:var(--accent-soft)}
.fitting-count{color:var(--accent);font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.section-divider{border-top:1px solid var(--border);margin:0.75rem 0.75rem 0.5rem 0.75rem;padding-top:0.625rem;font-size:0.6875rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.09em}
.panel-note{margin:0.5rem 0.75rem;padding:0.5rem 0.625rem;border-left:3px solid var(--warn);background:var(--surface-2);font-size:0.75rem;color:var(--text-2)}

/* SVG highlight/dim states */
.pipe-group{transition:opacity 200ms var(--ease-out)}
.pipe-size{transition:opacity 200ms var(--ease-out)}
.pipe-bend{transition:opacity 200ms var(--ease-out)}
.pipe-group.dimmed{opacity:0.08}
.pipe-size.dimmed{opacity:0.15}
.pipe-size.highlight{opacity:1}
.pipe-size.bend-active>g[data-handle]>path{opacity:0.15;transition:opacity 200ms var(--ease-out)}
.pipe-bend.highlight{opacity:1}
.fitting-group{transition:opacity 200ms var(--ease-out)}
.fitting-group.dimmed{opacity:0.05}
.fitting-group.highlight{opacity:1}
.arch-layer{transition:opacity 200ms var(--ease-out);pointer-events:none}
.arch{stroke:var(--v-arch);stroke-width:80px;opacity:0.5}
.arch-secondary{stroke:var(--v-arch-2);stroke-width:20px;opacity:0.45}
.arch-dashed{stroke-linecap:round}
.arch-fill{fill:var(--v-arch);stroke:none;opacity:0.22}
.arch-fill-secondary{fill:var(--v-arch-2);opacity:0.1}
.arch-fill-solid{opacity:0.4}
.arch-text{fill:var(--v-arch-2);stroke:none;opacity:0.8;font-family:Arial,"Helvetica Neue",sans-serif}

/* Zoom controls */
#zoom-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1)}
#zoom-controls button{appearance:none;border:none;background:var(--surface);color:var(--text-2);width:2.125rem;height:2.125rem;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background 120ms var(--ease-out),color 120ms var(--ease-out)}
#zoom-controls svg{width:0.875rem;height:0.875rem}
#zoom-controls button + button{border-top:1px solid var(--border)}
#zoom-controls button:hover{background:var(--surface-2);color:var(--text)}
#zoom-controls button:active{background:var(--surface-3)}

/* Tooltip */
#tooltip{display:none;position:absolute;background:var(--tooltip-bg);color:var(--tooltip-fg);padding:0.375rem 0.625rem;border-radius:var(--r-sm);font-size:0.6875rem;pointer-events:none;white-space:nowrap;z-index:10;font-family:var(--font-mono);box-shadow:var(--shadow-1)}

/* Expandable item lists */
.expandable{position:relative}
.row-caret{appearance:none;background:none;border:0;padding:0;font:inherit;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;font-size:0.5rem;color:var(--text-3);cursor:pointer;flex-shrink:0;user-select:none;margin-right:0.125rem}
.row-caret:hover{color:var(--text)}
.pipe-row .row-caret,.bend-row .row-caret,.fitting-row .row-caret{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%)}
.bend-row .row-caret{left:1.75rem}
.item-list{display:none;padding:0.125rem 0.75rem 0.25rem 3rem}
.item-row{display:flex;justify-content:space-between;padding:0.125rem 0.25rem;font-size:0.625rem;cursor:pointer;transition:background 100ms var(--ease-out);border-radius:0.1875rem}
.item-row:hover{background:var(--surface-2)}
.item-handle{font-family:var(--font-mono);color:var(--accent);font-size:0.625rem}
.item-detail{color:var(--text-2);font-size:0.625rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Handle highlight + locator pin */
g[data-handle].handle-highlight>path{stroke-width:inherit;filter:drop-shadow(0 0 6px currentColor)}
g[data-handle].handle-dimmed{opacity:0.06}
.locator-pin{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}