/* pmfea — dense dark-neutral engineering UI */
:root {
  --bg: #111316;
  --panel: #171a1e;
  --panel2: #1d2126;
  --border: #2b3038;
  --text: #c9cdd3;
  --muted: #858d97;
  --accent: #4ea1ff;
  --accent2: #2f6fb8;
  --warn: #e0a040;
  --err: #e5534b;
  --ok: #57ab5a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --left-w: 350px;
  --right-w: 580px;
  --probe-h: 240px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 12px/1.35 var(--sans); }
body { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
button, select, input, textarea { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 3px; }
button { padding: 3px 9px; cursor: pointer; white-space: nowrap; }
button:hover { border-color: #46505c; background: #232830; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #1e3a5c; border-color: var(--accent2); color: #e6f0ff; }
button.primary:hover { background: #24476f; }
button.small { padding: 1px 6px; font-size: 11px; }
button.danger { border-color: #7a2f2b; }
button.active { background: #24476f; border-color: var(--accent); }
input[type=number], input[type=text] { padding: 2px 4px; width: 80px; font-family: var(--mono); }
select { padding: 2px 3px; }
input[type=checkbox] { vertical-align: middle; margin: 0 3px 0 0; }
label { white-space: nowrap; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); }
.err { color: var(--err); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }

/* --- top bar --- */
#topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 8px; background: var(--panel); border-bottom: 1px solid var(--border); }
#topbar .brand { font-weight: 700; letter-spacing: 0.04em; color: #e8ecf0; }
#topbar .sep { width: 1px; height: 20px; background: var(--border); }
#mode-badge { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 3px; }
#mode-badge.mock { background: #5a3d0c; color: #ffd28a; border: 1px solid #a8741b; }
#mode-badge.real { background: #183a1f; color: #a6e3ad; border: 1px solid #2f6b38; }
#solve-controls { display: inline-flex; gap: 5px; align-items: center; }
#solve-controls input[type=number] { width: 62px; }
#cur-fields { display: inline-flex; gap: 4px; align-items: center; }
#job-progress { display: inline-flex; align-items: center; gap: 6px; flex: none; }
#job-progress .bar { width: 140px; height: 9px; background: var(--panel2); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
#job-progress .fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }
#job-progress .txt { font-family: var(--mono); font-size: 11px; width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- main layout --- */
main { display: grid; grid-template-columns: var(--left-w) 4px 1fr 4px var(--right-w); min-height: 0; }
.splitter { background: var(--border); cursor: col-resize; }
.splitter:hover, .splitter.drag { background: var(--accent2); }
.hsplitter { height: 4px; background: var(--border); cursor: row-resize; }
.hsplitter:hover, .hsplitter.drag { background: var(--accent2); }
aside, #center { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); }
#center { background: var(--bg); }

.tabs { display: flex; flex-wrap: wrap; gap: 1px; padding: 3px 3px 0; border-bottom: 1px solid var(--border); background: var(--panel); flex: none; }
.tabs button { border-radius: 3px 3px 0 0; border-bottom: none; padding: 3px 8px; background: transparent; border-color: transparent; color: var(--muted); }
.tabs button.active { background: var(--panel2); border-color: var(--border); color: var(--text); }
.tabs button.has-data::after { content: " •"; color: var(--accent); }
.tabpane { display: none; flex: 1; min-height: 0; overflow: auto; padding: 6px 8px; }
.tabpane.active { display: block; }

/* --- spec form --- */
#left .tabpane { padding: 4px 6px; }
#spec-json { width: 100%; height: calc(100% - 26px); resize: none; font: 11px/1.35 var(--mono); padding: 4px; background: #0d0f12; white-space: pre; tab-size: 2; }
#spec-json.bad { border-color: var(--err); }
#json-msg { height: 18px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.form-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sf details { border: 1px solid var(--border); border-radius: 3px; margin: 3px 0; background: var(--panel); }
.sf details > summary { cursor: pointer; padding: 2px 5px; background: var(--panel2); font-weight: 600; display: flex; align-items: center; gap: 6px; list-style: none; }
.sf details > summary::-webkit-details-marker { display: none; }
.sf details > summary::before { content: "▸"; color: var(--muted); width: 9px; }
.sf details[open] > summary::before { content: "▾"; }
.sf details > summary .grow { flex: 1; }
.sf details > .body { padding: 2px 4px 4px 8px; }
.sf .row { display: grid; grid-template-columns: 1fr 112px 46px; align-items: center; gap: 4px; padding: 1px 0; }
.sf .row > .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4bac2; }
.sf .row > .unit { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.sf .row input[type=number], .sf .row input[type=text], .sf .row select { width: 100%; }
.sf .row.wide { grid-template-columns: 1fr; }
.sf .row.wide textarea { width: 100%; min-height: 60px; font: 11px var(--mono); }
.sf .row.irrelevant { display: none; }
.sf.show-all .row.irrelevant { display: grid; opacity: 0.5; }
.sf details.irrelevant { display: none; }
.sf.show-all details.irrelevant { display: block; opacity: 0.55; }
.sf .tuple { display: flex; gap: 3px; }
.sf .tuple input { width: 50% !important; }
.sf .ring-rotor > summary { border-left: 3px solid #d9534f; }
.sf .ring-stator > summary { border-left: 3px solid #e6b422; }
.sf .bad { border-color: var(--err) !important; }
.sf .arr-actions { display: flex; gap: 4px; margin: 3px 0 6px; }

/* --- viewer --- */
#viewer-toolbar { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 4px 6px; background: var(--panel); border-bottom: 1px solid var(--border); flex: none; }
#viewer-toolbar .grp { display: inline-flex; gap: 4px; align-items: center; }
#viewer-toolbar input[type=number] { width: 70px; }
#vw-solution { max-width: 300px; }
#rotor-bar { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; padding: 3px 6px; background: var(--panel); border-bottom: 1px solid var(--border); flex: none; }
#rotor-bar .grp { display: inline-flex; gap: 5px; align-items: center; }
#rotor-bar #spin-ctl { flex: 1 1 100%; flex-wrap: wrap; gap: 3px 8px; }
#rotor-bar #spin-ctl[hidden] { display: none; }
#rotor-bar input[type=number] { width: 66px; }
#rot-slider { width: 260px; accent-color: var(--accent); }
#spin-scrub { width: 150px; accent-color: #ffd23f; }
#spin-n, #spin-fps { width: 48px !important; }
#spin-spark { width: 180px; height: 34px; border: 1px solid var(--border); border-radius: 2px; vertical-align: middle; }
#spin-torque { font-size: 11px; white-space: nowrap; color: #e3e7ec; }
#spin-prog { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
#viewer-wrap { position: relative; flex: 1; min-height: 120px; }
#viewer { position: absolute; inset: 0; }
#viewer canvas { display: block; }
.ov { position: absolute; pointer-events: none; font: 11px/1.3 var(--mono); }
#ov-readout { left: 6px; top: 6px; background: rgba(13, 15, 18, 0.82); border: 1px solid var(--border); padding: 4px 6px; border-radius: 3px; min-width: 200px; white-space: pre; }
#ov-info { left: 6px; bottom: 6px; max-width: calc(100% - 300px); white-space: normal; background: rgba(13, 15, 18, 0.72); padding: 2px 6px; border-radius: 3px; }
#ov-colorbar { right: 6px; top: 6px; }
#ov-legend { right: 6px; top: 6px; background: rgba(13, 15, 18, 0.82); border: 1px solid var(--border); padding: 4px 6px; border-radius: 3px; max-height: 70%; overflow: hidden; }
#ov-legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: middle; border: 1px solid #0006; }
#ov-hint { right: 6px; bottom: 6px; max-width: 280px; text-align: right; color: var(--muted); background: rgba(13, 15, 18, 0.6); padding: 2px 6px; border-radius: 3px; }
#viewer.tool-line, #viewer.tool-circle { cursor: crosshair; }
#ov-empty { left: 50%; top: 45%; transform: translate(-50%, -50%); color: var(--muted); font-family: var(--sans); font-size: 12.5px; text-align: center; max-width: 70%; }

#probe-panel { height: var(--probe-h); flex: none; display: flex; flex-direction: column; background: var(--panel); min-height: 60px; }
#probe-toolbar { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 3px 6px; border-bottom: 1px solid var(--border); }
#probe-toolbar input[type=number] { width: 62px; }
#probe-plot { flex: 1; min-height: 0; }
#probe-toolbar select { max-width: 190px; }
#probe-qty { display: inline-flex; gap: 2px 6px; flex-wrap: wrap; }

/* --- results --- */
#right .tabpane h3 { margin: 8px 0 4px; font-size: 12px; color: #e3e7ec; border-bottom: 1px solid var(--border); padding-bottom: 2px; display: flex; align-items: center; gap: 8px; }
#right .tabpane h3 .grow { flex: 1; }
.plot { width: 100%; height: 300px; }
.plot.tall { height: 460px; }
.plot.short { height: 220px; }
table.grid, table.kv, table.metrics { border-collapse: collapse; width: 100%; font-size: 11.5px; }
table.grid th, table.grid td, table.kv th, table.kv td, table.metrics th, table.metrics td { border-bottom: 1px solid #23272d; padding: 2px 5px; text-align: left; vertical-align: top; }
table.grid { display: block; overflow-x: auto; max-width: 100%; }
table.grid th { color: var(--muted); font-weight: 600; background: var(--panel2); position: sticky; top: 0; }
table.grid td, table.metrics td.v { font-family: var(--mono); }
table.kv th { color: #aeb5bd; font-weight: normal; width: 42%; }
table.metrics td.v { text-align: right; white-space: nowrap; }
table.metrics td.u { color: var(--muted); font-family: var(--mono); white-space: nowrap; }
table.metrics tr.grp td { background: var(--panel2); color: #e3e7ec; font-weight: 600; padding-top: 5px; }
table.metrics td.note { color: var(--muted); font-size: 10.5px; }
/* characterization warnings / approximations (always visible above the result tabs) */
#char-notes { flex: none; border-bottom: 1px solid var(--border); background: #1a1813; max-height: 34vh; overflow: auto; font-size: 11.5px; }
#char-notes .cn-head { display: flex; gap: 10px; align-items: center; padding: 3px 8px; cursor: pointer; user-select: none; background: #221f16; }
#char-notes .cn-head b { color: var(--warn); }
#char-notes .cn-head .grow { flex: 1; }
#char-notes.folded .cn-body { display: none; }
#char-notes ul { margin: 2px 0 4px; padding-left: 18px; }
#char-notes li { margin: 1px 0; }
#char-notes .cn-body { padding: 0 8px 4px; }
#char-notes .cn-warn li { color: #f0c67a; }
#char-notes details > summary { cursor: pointer; color: #9fb7d3; }
#char-notes .approx li { color: #aeb5bd; }
.plotblock { min-width: 0; }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0 12px; }
.meta { font-size: 11px; margin: 0 0 6px; }
table.metrics td.l { white-space: normal; }
table.metrics td.v { width: 1%; }
table.metrics tr:hover td { background: #1c2026; }
table.metrics td.note { max-width: 260px; }
.legend-inline { display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.form-errors { margin: 4px 0; }
.form-errors li { cursor: pointer; }
.form-errors li:hover { text-decoration: underline; }
.sf .row.has-error > .lbl { color: var(--err); }
.sf .row.has-error input, .sf .row.has-error select, .sf .row.has-error textarea { border-color: var(--err); }
.sf details.has-error > summary { box-shadow: inset 2px 0 0 var(--err); }
.sf .errmsg { grid-column: 1 / -1; color: var(--err); font-size: 10.5px; }
.callout { border: 1px solid var(--border); border-left: 3px solid var(--warn); padding: 4px 6px; margin: 4px 0; background: #1c1a15; }
.callout.err { border-left-color: var(--err); background: #1f1515; }
.callout.info { border-left-color: var(--accent); background: #141b23; }
.big { font-size: 15px; font-family: var(--mono); color: #eef2f6; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; margin: 4px 0; }
.card { background: var(--panel2); border: 1px solid var(--border); border-radius: 3px; padding: 3px 6px; }
.card .k { color: var(--muted); font-size: 11px; }
pre.log { font: 11px/1.3 var(--mono); white-space: pre-wrap; margin: 0; color: #aeb5bd; }

/* --- status bar --- */
#status { display: flex; gap: 10px; align-items: center; padding: 3px 8px; background: var(--panel); border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; min-height: 22px; }
#status .msg { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#status .msg.error { color: var(--err); }
#status .msg.warn { color: var(--warn); }
#status .msg.ok { color: var(--ok); }
#status .busy { color: var(--accent); }
#status .muted { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sf .dflt { color: var(--muted); font-style: italic; }

/* --- narrow screens (phones / small tablets): stacked, collapsible panels --- */
.mobile-head { display: none; }
@media (max-width: 900px) {
  html, body { height: auto; }
  body { display: block; overflow: auto; font-size: 13px; }
  #topbar { gap: 4px 6px; padding: 4px 6px; }   /* not sticky: the viewer gets the screen; status/job bar is sticky at the bottom */
  #topbar .sep { display: none; }
  #status { position: sticky; bottom: 0; z-index: 10; flex-wrap: wrap; }
  #job-progress .txt { width: auto; max-width: 52vw; }
  #job-progress .bar { width: 70px; }
  .mapgrid { grid-template-columns: 1fr; }
  #char-notes { max-height: none; }
  #topbar label { font-size: 12px; }
  #example-select { max-width: 150px; }
  button, select, input { min-height: 28px; }
  main { display: flex; flex-direction: column; }
  .splitter, .hsplitter, #ov-hint { display: none; }
  aside, #center { overflow: visible; border-bottom: 1px solid var(--border); }
  #center { order: 1; } #right { order: 2; } #left { order: 3; }
  .mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--panel2); font-weight: 600; cursor: pointer; user-select: none; }
  .mobile-head::after { content: "▾"; color: var(--muted); }
  .collapsed > .mobile-head::after { content: "▸"; }
  .collapsed > :not(.mobile-head) { display: none !important; }
  #viewer-wrap { flex: none; height: 62vh; min-height: 280px; }
  #rot-slider { width: calc(100vw - 150px); }
  #spin-spark { width: 140px; }
  #probe-panel { height: 300px; }
  .tabpane { overflow-x: auto; overflow-y: visible; }
  aside, #center { max-width: 100vw; }
  table.kv { table-layout: fixed; }
  table.kv td { overflow-x: auto; }
  #left .tabpane[data-pane=form] { max-height: none; }
  #spec-json { height: 60vh; }
  .sf .row { grid-template-columns: 1fr 130px 44px; }
  .plot { height: 280px; }
  #ov-readout { font-size: 10px; min-width: 0; max-width: 62%; }
  #ov-info { max-width: 100%; font-size: 10px; }
  #ov-legend { font-size: 10px; max-height: 45%; }
  table.grid, table.kv, table.metrics { font-size: 11px; }
}

/* --- G7–G22 result sections --- */
.card.bad { border-color: var(--err); }
.card.bad .big { color: #ffb4ae; }
table.metrics td.unc { font-family: var(--mono); color: #9fb7d3; white-space: nowrap; font-size: 10.5px; text-align: right; }
table.metrics td.unc.warn { color: var(--warn); }
table.grid tr.warn td { background: rgba(224, 160, 64, 0.08); }
table.heat td, table.heat th { white-space: nowrap; }
#topbar #char-ms-lbl { color: var(--muted); }
table.grid.nowrap td, table.grid.nowrap th { white-space: nowrap; }
/* analysis-options summary (results_pwm.js) */
details.analysis-options { border: 1px solid var(--border); background: var(--panel2); padding: 3px 6px; margin: 4px 0 6px; border-radius: 3px; }
details.analysis-options > summary { cursor: pointer; }
.stage-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
span.stage { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 10.5px; border: 1px solid var(--border); white-space: nowrap; }
span.stage.stage-ran { color: #b9e3bb; border-color: #3c6e3e; background: rgba(87, 171, 90, 0.12); }
span.stage.stage-off { color: var(--muted); }
span.stage.stage-failed { color: #ffb4ae; border-color: var(--err); background: rgba(229, 83, 75, 0.14); }
span.stage.stage-na { color: var(--muted); border-style: dashed; }
table.stages td.num, table.pwm-loss td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.pwm-loss td { white-space: nowrap; }