/* American Terawatt design system (design.amwatt.vercel.app), light theme, laid out
   and coloured the way the Transmission Planner is: a brand block and the navigation in
   a left bar, pages as cards on a subtle canvas, and black on white throughout — Ink is
   the accent (buttons, the current item), colour is kept for status only. Square corners,
   hairlines instead of shadows, Untitled Sans for text and Geist Mono in caps for labels:
   buttons, eyebrows, table headers. */
@font-face { font-family: "Untitled Sans"; src: url(/static/fonts/Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url(/static/fonts/Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url(/static/fonts/Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--bg: #FCFCFC;
	--bg-subtle: #F6F6F4;
	--bg-muted: #DBD8D2;
	--surface: #FCFCFC;
	--border: #E4E3DA;
	--border-strong: #9C8F83;
	--fg: #121212;
	--fg-muted: #635E56;
	--fg-subtle: #79746B;
	--fg-on-accent: #FCFCFC;
	--accent: #121212;
	--accent-hover: #000000;
	--accent-muted: #ECEEF0;
	--accent-fg: #121212;
	--focus: #121212;
	--info: #5089A6;
	--info-surface: #ECF4F9;
	--success: #5F8E00;
	--success-surface: #EAF4D7;
	--warning: #D7B718;
	--warning-surface: #FAF7D1;
	--danger: #EA553E;
	--danger-surface: #FEEDEC;
	--font-sans: "Untitled Sans", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--fast: 150ms;
	--sidebar-width: 240px;
	--shadow-sm: 0 1px 3px rgba(18, 18, 18, 0.06);
	--shadow: 0 4px 18px rgba(18, 18, 18, 0.10);
	--shadow-lg: 0 14px 40px rgba(18, 18, 18, 0.16);
	/* Kept for older rules; every step is 0 in this system. */
	--muted: var(--fg-muted);
	--muted2: var(--fg-subtle);
	--text: var(--fg);
	--line: var(--border);
}
* { box-sizing: border-box; border-color: var(--border); }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	background: var(--bg-subtle);
	color: var(--fg);
	font-size: 15px;
	line-height: 1.5;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--fg-on-accent); }
a { color: var(--fg); text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--fg); }
code { font-family: var(--font-mono); font-size: 0.85em; }

/* The mono label voice. */
.label, .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; line-height: 1.2; font-weight: 400; }
.eyebrow { font-size: 11px; letter-spacing: 0.06em; color: var(--fg-subtle); }

.muted { color: var(--fg-muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.warn { color: #8a6d00; }
.empty { color: var(--fg-muted); }
.chip { display: inline-block; padding: 2px 6px; background: var(--bg-muted); color: var(--fg); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 4px 4px 0; }

/* ---------------- The shell: a left bar and the page ---------------- */
.shell { display: flex; align-items: stretch; min-height: 100%; }
.sidebar {
	position: sticky; top: 0; align-self: flex-start; height: 100vh;
	width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
	display: flex; flex-direction: column;
	background: var(--surface); border-right: 1px solid var(--border);
}
.main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* The brand block at the top of every left bar, as on the planner. */
.brand { display: flex; align-items: center; gap: 11px; padding: 16px 18px 15px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); transition: opacity var(--fast) var(--ease); }
.brand:hover { opacity: 0.8; }
.brand-mark { height: 22px; width: auto; flex: 0 0 auto; display: block; }
.brand .wm { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.brand .wm small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.08em; color: var(--fg-muted); }

/* Navigation: the hub's numbered list, a hairline of Energy on the current page. */
.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; }
.nav-group { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px 8px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); }
.nav-group .rule { flex: 1; height: 2.5px; background-image: linear-gradient(to right, var(--border-strong) 2.5px, transparent 2.5px); background-size: 12px 2.5px; background-repeat: repeat-x; }
.sidebar nav a {
	display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 8px 10px; border-left: 2px solid transparent;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sidebar nav a .n { flex: 0 0 1.25rem; font-size: 11px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.sidebar nav a:hover { background: var(--bg-subtle); color: var(--fg); }
.sidebar nav a.active { border-left-color: var(--accent); background: var(--bg-subtle); color: var(--fg); font-weight: 700; }
.sidebar nav a.active .n { color: var(--fg); }

/* Who the runs are recorded under, at the foot of the bar. */
.sidebar-user { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--fg-muted); }
.sidebar-user .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 500; }
.sidebar-user form { display: flex; }
.whoami { flex-direction: column; gap: 6px; width: 100%; }
.whoami input { height: 32px; padding: 0 0.6rem; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 13px; color: var(--fg); width: 100%; min-width: 0; }
.whoami button { height: 32px; padding: 0 0.75rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; background: var(--accent); color: var(--fg-on-accent); cursor: pointer; }

/* Buttons: primary is Energy with ink text; secondary is a hairline. */
button.link { border: 0; background: none; color: var(--fg-muted); cursor: pointer; font: inherit; font-size: 13px; padding: 0; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
button.link:hover { color: var(--fg); text-decoration-color: var(--fg); }
button.link.danger { color: var(--danger); }
.tool {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 36px; padding: 0 0.9rem;
	font-family: var(--font-mono); font-size: 12px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400;
	color: var(--fg); background: transparent; border: 1px solid var(--border-strong); border-radius: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.tool:hover:enabled, a.tool:hover { background: var(--bg-subtle); border-color: var(--fg); }
.tool:disabled { opacity: 0.4; cursor: default; }
.tool.primary { color: var(--fg-on-accent); background: var(--accent); border-color: transparent; }
.tool.primary:hover:enabled, a.tool.primary:hover { background: var(--accent-hover); border-color: transparent; }
.tool.danger { color: #fff; background: var(--danger); border-color: transparent; }
.tool.danger:hover:enabled { filter: brightness(1.08); border-color: transparent; }
.tool.small { height: 32px; padding: 0 0.75rem; font-size: 11px; letter-spacing: 0.06em; }
.tool.big { width: 100%; height: 44px; font-size: 13px; letter-spacing: 0.04em; }
.tool[aria-expanded="true"] { background: var(--bg-subtle); border-color: var(--fg); }

/* In-page dialogs (dialog.js) */
dialog.hvdc-dialog { width: 440px; max-width: calc(100vw - 2rem); padding: 1.5rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); border-radius: 0; }
dialog.hvdc-dialog::backdrop { background: rgba(18, 18, 18, 0.35); }
dialog.hvdc-dialog form { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
dialog.hvdc-dialog .dialog-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; }
dialog.hvdc-dialog .dialog-message { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
dialog.hvdc-dialog .dialog-input { height: 40px; padding: 0 0.75rem; font: inherit; font-size: 15px; color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); }
dialog.hvdc-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

/* ---------------- Pages: a header, then cards on the canvas ---------------- */
main.page { width: 100%; padding: 28px 36px 64px; }
main.page.narrow { max-width: 960px; }
main.page.wide { max-width: 1440px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 20px; }
.page-head > div { min-width: 0; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { color: var(--fg); }
.page-head h1 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 400; overflow-wrap: anywhere; }
.page-head .lede { margin: 10px 0 0; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.page-head .actions { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 2px; }

.card { background: var(--surface); border: 1px solid var(--border); padding: 20px 24px 24px; margin-bottom: 16px; }
.card h1 { margin: 0 0 0.5rem; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -0.005em; }
.card h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.3; font-weight: 500; }
.card h3 { margin: 1.25rem 0 0.5rem; font-size: 16px; font-weight: 500; }
.card > p { font-size: 15px; line-height: 1.65; }
.card p.muted { color: var(--fg-muted); }
.card > .empty { margin: 0; }
.crumbs { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); margin: 0 0 1rem; }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.stack { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.stack label { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); }
.stack input, .stack select { height: 40px; padding: 0 0.75rem; font: inherit; font-family: var(--font-sans); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0; }
.stack input:hover, .stack select:hover { border-color: var(--fg); }
.stack input::placeholder { color: var(--fg-subtle); }
.stack button { align-self: flex-start; }

table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); background: var(--bg-subtle); padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
table.list td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list.compact td, table.list.compact th { padding: 0.4rem 0.6rem; }
table.list a { text-decoration: none; }
table.list a:hover { text-decoration: underline; }
table.conductors input { width: 100%; min-width: 3rem; height: 30px; padding: 0 0.4rem; font: inherit; font-size: 13px; border: 1px solid var(--border-strong); background: var(--surface); }
table.conductors input[type="checkbox"] { width: auto; height: auto; }
table.conductors tr.add td { background: var(--accent-muted); }
form.inline { display: inline; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---------------- Workbench ---------------- */
body.workbench-page { overflow: hidden; }
body.workbench-page .shell, body.workbench-page .main { height: 100%; }
.workbench { --panel-width: 360px; display: flex; align-items: stretch; height: 100%; }

/* Inputs: the left bar. Brand block on top, as on the planner's map view. */
.panel { width: var(--panel-width); flex: 0 0 var(--panel-width); min-width: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.panel .brand { flex: 0 0 auto; }
.panel-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 7px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.panel-nav a { color: var(--fg-muted); text-decoration: none; }
.panel-nav a:hover { color: var(--fg); }
.panel-nav .email { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fg-subtle); }
.panel-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1rem 1.25rem 1.25rem; }
.panel-foot { flex: 0 0 auto; padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface); }
.panel h1.case-name { margin: 0.1rem 0 1rem; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -0.005em; cursor: text; }
.panel h2 { margin: 1.5rem 0 0.5rem; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); }
.case-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 0.75rem; }
.case-setup .hint { grid-column: 1 / -1; margin: 0; }
.case-setup .field.full { grid-column: 1 / -1; }
.case-setup .field[hidden] { display: none; }
.field { display: block; min-width: 0; }
.field-label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); margin-bottom: 0.35rem; }
.panel select { width: 100%; height: 36px; padding: 0 0.6rem; font: inherit; font-size: 14px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); border-radius: 0; }
.panel select:hover { border-color: var(--fg); }
.hint { margin: 0.6rem 0 0; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.status { margin: 0.6rem 0 0; font-size: 13px; color: var(--fg-muted); min-height: 1.3em; }
.status.error { color: var(--danger); }

/* Components: an accordion; the open item is the selected component. */
ul.components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.component + .component { border-top: 1px solid var(--border); }
.component-head {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.7rem 0.9rem 0.7rem 0.75rem;
	font: inherit; font-size: 14px; font-weight: 400; color: var(--fg); background: var(--surface); border: 0; border-left: 2px solid transparent; cursor: pointer; text-align: left;
	transition: background var(--fast) var(--ease);
}
.component-head:hover { background: var(--bg-subtle); }
.component.open > .component-head { background: var(--bg-subtle); border-left-color: var(--accent); font-weight: 500; }
.component.unbound > .component-head .name { color: var(--fg-subtle); }
.chev { width: 7px; height: 7px; border-right: 1.5px solid var(--fg-subtle); border-bottom: 1.5px solid var(--fg-subtle); transform: rotate(-45deg); transition: transform var(--fast) var(--ease); margin-right: 3px; }
.component.open .chev { transform: rotate(45deg); }
.component-body { padding: 0.75rem 0.9rem 1rem; border-top: 1px solid var(--border); }
.component-body .desc { margin: 0 0 0.75rem; font-size: 13px; }
.component-body .reset { margin-top: 0.75rem; }
.params { display: flex; flex-direction: column; gap: 0.75rem; }
.params .none { color: var(--fg-subtle); font-size: 13px; }
.p-row { display: flex; flex-direction: column; gap: 0.3rem; }
.p-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); display: flex; align-items: center; gap: 0.4rem; }
.p-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--border-strong); color: var(--fg-muted); font-family: var(--font-sans); font-size: 9px; letter-spacing: 0; cursor: help; flex: 0 0 auto; }
.p-help:hover { border-color: var(--fg); color: var(--fg); }
.p-field { display: flex; align-items: center; gap: 0.6rem; }
.p-field input, .p-field select { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 0.6rem; font: inherit; font-size: 14px; color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0; text-align: right; font-variant-numeric: tabular-nums; transition: border-color var(--fast) var(--ease); }
.p-field select { text-align: left; }
.p-field input:hover, .p-field select:hover { border-color: var(--fg); }
.p-field input.error, .p-field select.error { border-color: var(--danger); background: var(--danger-surface); }
.p-field input::placeholder { color: var(--fg-subtle); }
.p-unit { flex: 0 0 4.5rem; color: var(--fg-muted); font-size: 13px; }
.role-procedures { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.component-results { margin-top: 0.6rem; }
.component-results p { margin: 0.35rem 0; font-size: 13px; }

/* Drag handles between the regions. They straddle the gaps and show only on hover. */
.splitter { flex: 0 0 auto; position: relative; z-index: 5; background: transparent; transition: background var(--fast) var(--ease); }
.splitter.vertical { width: 7px; margin: 0 -3px 0 -4px; cursor: col-resize; }
.splitter.horizontal { height: 7px; margin: -0.6rem 0 -0.5rem; cursor: row-resize; }
.splitter:hover, .splitter.dragging { background: var(--accent); }
body.resizing, body.resizing * { cursor: inherit !important; user-select: none; }
body.resizing.col { cursor: col-resize; }
body.resizing.row { cursor: row-resize; }
body.resizing .diagram svg { pointer-events: none; }

/* Outputs: the drawing and the results */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; gap: 0.9rem; background: var(--bg-subtle); }
.diagram { flex: 1 1 55%; min-height: 140px; background: var(--surface); border: 1px solid var(--border); padding: 0.75rem; }
.diagram svg { width: 100%; height: 100%; display: block; }
.diagram .component { cursor: pointer; }
.diagram .component > rect.hit-area { fill: transparent; stroke: none; transition: fill var(--fast) var(--ease); }
.diagram .component:hover > rect.hit-area { fill: rgba(18, 18, 18, 0.05); }
.diagram .component.selected > rect.hit-area { fill: rgba(18, 18, 18, 0.07); stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 2; }
.diagram [data-symbol] { cursor: pointer; }
.diagram [data-symbol]:hover { text-decoration: underline dotted; }
.diagram [data-filled="1"] { font-weight: 600; }
.content.sized .diagram { flex: 0 0 var(--diagram-height); min-height: 0; }
.content.sized .results-card { flex: 1 1 0; }

.results-card { flex: 1 1 45%; min-height: 120px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.results-head { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem 0.6rem 1.25rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; background: var(--bg-subtle); }
.results-title { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.results-title h2 { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.results-title .small { font-size: 13px; }
.results-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.results-body { flex: 1; overflow: auto; }
.results-body .empty { margin: 1.25rem; font-size: 14px; }

.menu { position: relative; }
.menu-items { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 16rem; background: var(--surface); border: 1px solid var(--border-strong); padding: 0.25rem; display: flex; flex-direction: column; }
.menu-items[hidden] { display: none; }
.menu-items > a, .menu-items > button { text-align: left; padding: 0.55rem 0.75rem; font: inherit; font-size: 14px; color: var(--fg); background: none; border: 0; cursor: pointer; text-decoration: none; transition: background var(--fast) var(--ease); }
.menu-items > a:hover, .menu-items > button:hover { background: var(--bg-subtle); }
.menu-items.wide { min-width: 24rem; max-height: 60vh; overflow: auto; }
.history-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem; }
.history-row.current { background: var(--accent-muted); }
.history-row:hover { background: var(--bg-subtle); }
.history-pick { flex: 1; display: grid; grid-template-columns: 7rem 1fr; gap: 0 0.75rem; text-align: left; padding: 0.5rem 0.5rem; font: inherit; font-size: 13px; color: var(--fg); background: none; border: 0; cursor: pointer; }
.history-when { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); padding-top: 2px; }
.history-who { grid-column: 2; font-size: 12px; color: var(--fg-subtle); }

table.values { width: 100%; border-collapse: collapse; font-size: 13px; }
table.values th { position: sticky; top: 0; background: var(--bg-subtle); text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--border); }
table.values td { padding: 0.45rem 1.25rem; border-bottom: 1px solid var(--border); }
table.values tbody tr:last-child td { border-bottom: 0; }
table.values tr.group td { background: var(--surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); padding-top: 0.9rem; }
table.values td.value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.values td.unit { color: var(--fg-muted); font-size: 12px; }
table.values.compact { font-size: 12px; }
table.values.compact td { padding: 0.25rem 0.5rem; }
table.values.compact th { position: static; padding: 0.35rem 0.5rem; }

/* ---------------- Equipment library ---------------- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.card-head h1 { margin: 0; }
.library-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 12px; }
.kind-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 18px 20px 22px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--fg); transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.kind-card:hover { background: var(--bg-subtle); border-color: var(--fg); }
.kind-card strong { font-size: 18px; font-weight: 500; }
.table-scroll { overflow-x: auto; }
table.list td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-head { text-transform: none; letter-spacing: 0; color: var(--fg-subtle); }

.equipment-form h1 { margin-bottom: 1rem; }
.form-error { margin: 0 0 1rem; padding: 0.6rem 0.8rem; background: var(--danger-surface); border-left: 2px solid var(--danger); font-size: 14px; }
.form-group { border: 0; border-top: 1px solid var(--border); margin: 0; padding: 1rem 0 0.5rem; }
.form-group:first-of-type { border-top: 0; padding-top: 0; }
.form-group legend { padding: 0 0.5rem 0 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.form-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.1fr); gap: 0.25rem 1rem; align-items: center; padding: 0.4rem 0; }
.form-row > label { font-size: 14px; color: var(--fg); }
.form-row .req { color: var(--danger); }
.form-input { display: flex; align-items: center; gap: 0.6rem; }
.form-input input, .form-input select, .form-input textarea { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 0.6rem; font: inherit; font-size: 14px; color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0; }
.form-input textarea { height: auto; padding: 0.45rem 0.6rem; resize: vertical; }
.form-input input.num { text-align: right; font-variant-numeric: tabular-nums; }
.form-input input:hover, .form-input select:hover, .form-input textarea:hover { border-color: var(--fg); }
.form-input input::placeholder, .form-input textarea::placeholder { color: var(--fg-subtle); }
.form-input .unit { flex: 0 0 5.5rem; color: var(--fg-muted); font-size: 13px; }
.form-input label.check { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--fg-muted); }
.form-input label.check input { flex: 0 0 auto; height: auto; }
.field-help, .field-error { grid-column: 2; margin: 0; font-size: 12px; line-height: 1.45; }
.field-help { color: var(--fg-muted); }
.field-error { color: var(--danger); }
.form-row.has-error input, .form-row.has-error select { border-color: var(--danger); background: var(--danger-surface); }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.delete-row { margin: -0.5rem 0 2rem; text-align: right; }

/* ---------------- Small screens ---------------- */
@media (max-width: 900px) {
	.shell { flex-direction: column; }
	.sidebar { position: static; height: auto; width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); }
	.sidebar .brand { border-bottom: 0; }
	.sidebar nav { flex-direction: row; padding: 0 8px; }
	.nav-group { display: none; }
	.sidebar nav a { border-left: 0; border-bottom: 2px solid transparent; }
	.sidebar nav a.active { border-bottom-color: var(--accent); }
	.sidebar-user { margin-left: auto; border-top: 0; padding: 8px 18px; }
	main.page { padding: 20px 16px 48px; }
}
@media (max-width: 760px) {
	body.workbench-page { overflow: auto; }
	body.workbench-page .shell, body.workbench-page .main { height: auto; }
	.workbench { height: auto; flex-direction: column; }
	.panel { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--border); }
	.panel-scroll { overflow: visible; }
	.splitter { display: none; }
	.diagram, .content.sized .diagram { flex: none; min-height: 50vh; }
	.results-card, .content.sized .results-card { flex: none; min-height: 40vh; }
	.form-row { grid-template-columns: 1fr; }
	.field-help, .field-error { grid-column: 1; }
}

/* ---------------- Sweeps ---------------- */
.tool.sweep { width: 100%; margin-top: 0.5rem; }
dialog.sweep-dialog { width: 560px; }
.sweep-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sweep-field select, .sweep-field input { width: 100%; height: 36px; padding: 0 0.6rem; font: inherit; font-size: 14px; color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0; }
.sweep-field select:hover, .sweep-field input:hover { border-color: var(--fg); }
.sweep-axis { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem; }
dialog.sweep-dialog .hint { margin: 0; }
dialog.sweep-dialog .sweep-error { margin: 0; min-height: 0; }
dialog.sweep-dialog .sweep-error:empty { display: none; }
table.values.sweep { white-space: nowrap; }
table.values.sweep th, table.values.sweep td { padding-left: 0.75rem; padding-right: 0.75rem; }
table.values.sweep thead tr.groups th { height: 26px; padding-top: 0.3rem; padding-bottom: 0; color: var(--fg-subtle); border-bottom: 0; }
table.values.sweep thead tr:not(.groups) th { top: 26px; }
table.values.sweep th.value, table.values.sweep td.value { text-align: right; }
table.values.sweep th.axis, table.values.sweep td.axis { background: var(--bg-subtle); font-weight: 500; }
table.values.sweep td.state { color: var(--fg-muted); font-size: 12px; }
table.values.sweep tr.failed td.error { color: var(--danger); white-space: normal; }
/* The swept values stay in view while the results scroll sideways. */
table.values.sweep th.axis, table.values.sweep td.axis { position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 9rem; }
table.values.sweep th.axis:nth-child(2), table.values.sweep td.axis:nth-child(2) { left: 9rem; }
table.values.sweep thead th.axis { z-index: 3; }

/* ---------------- Home and Components: the planner's cards ---------------- */
main.page.hs-page { max-width: none; }
.hs-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.hs-top .hs-head { flex: 1 1 240px; min-width: 0; }
.hs-title { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--fg); }
.hs-sub { display: block; margin-top: 3px; max-width: 760px; line-height: 1.5; font-size: 12.5px; color: var(--fg-subtle); }
#hs-search { margin-left: auto; width: 200px; min-width: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--fg); font: inherit; font-size: 12.5px; padding: 9px 15px; outline: none; box-shadow: var(--shadow-sm); }
#hs-search:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.10); }
#hs-search::placeholder { color: var(--fg-subtle); }
#hs-sort { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--fg); font: inherit; font-size: 12.5px; padding: 9px 20px 9px 14px; outline: none; box-shadow: var(--shadow-sm); cursor: pointer; }
#hs-sort:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.10); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn:hover { border-color: var(--fg); }
.btn.primary { background: var(--fg); color: var(--fg-on-accent); border-color: var(--fg); padding: 10px 18px; font-size: 13px; flex: none; }
.btn.primary:hover { background: #000; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.hs-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; overflow: hidden; cursor: pointer; color: var(--fg); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.hs-card:hover { border-color: var(--fg); box-shadow: var(--shadow); transform: translateY(-1px); }
.hs-card[hidden] { display: none; }
.hs-prev { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--bg-subtle); object-fit: contain; padding: 4% 6%; box-sizing: border-box; }
svg.hs-prev { padding: 0; }
.hs-prev.hs-none { display: flex; align-items: center; justify-content: center; }
.hs-prev.hs-none img { height: 28px; width: auto; opacity: 0.18; }
.hs-body { padding: 10px 13px 12px; border-top: 1px solid var(--border); flex: 1; display: flex; align-items: flex-end; gap: 10px; }
.hs-body > .hs-txt { flex: 1; min-width: 0; }
.hs-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-meta { color: var(--fg-muted); font-size: 11.5px; margin-top: 3px; }
.hs-own { flex: none; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; background: var(--accent-muted); color: var(--fg); border: 1px solid var(--border); font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
.hs-menu-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; background: rgba(252, 252, 252, 0.95); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-muted); cursor: pointer; font-size: 16px; line-height: 1; box-shadow: var(--shadow-sm); }
.hs-card:hover .hs-menu-btn, .hs-menu-btn.open { display: flex; }
.hs-menu-btn:hover, .hs-menu-btn.open { color: var(--fg); border-color: var(--fg); }
.hs-menu { position: absolute; top: 38px; right: 8px; z-index: 3; min-width: 170px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); cursor: default; }
.hs-menu div { padding: 9px 13px; cursor: pointer; color: var(--fg); }
.hs-menu div:hover { background: var(--bg-subtle); }
.hs-menu div.danger:hover { color: var(--danger); }
.hs-card.blank { border-style: dashed; background: transparent; box-shadow: none; }
.hs-card.blank .hs-prev { display: flex; align-items: center; justify-content: center; background: transparent; }
.hs-card.blank .plus { font-size: 34px; font-weight: 300; color: var(--fg-subtle); line-height: 1; }
.hs-card.blank:hover .plus { color: var(--fg); }
@media (max-width: 900px) {
	#hs-search { margin-left: 0; flex: 1 1 160px; }
}