/* SIM viewer styles, shared by every project.
   Layout: full-bleed 3D cell with a teach-pendant side panel (stacks under the view on phones). Single dark look, like a pendant screen. */
:root {
  --bg: #0f1216;
  --panel: #161a20;
  --raise: #1d222a;
  --line: #2a313b;
  --fg: #e3e6e9;
  --muted: #8b95a1;
  --accent: #f5b31a;
  --accent-ink: #1a1404;
  --ok: #44c486;
  --stop: #e5503f;
  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 14px; overflow: hidden; }
.app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.view { position: relative; min-width: 0; min-height: 0; }
.view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); color: var(--muted); pointer-events: none; padding: 16px; text-align: center; }
.hint { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: 12px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); pointer-events: none; }
.panel { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  padding-block: 18px 24px; padding-left: 18px; padding-right: max(18px, env(safe-area-inset-right, 0px)); min-height: 0; }
header { display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-wrap: balance; }
.pill { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; padding: 3px 10px; border-radius: 3px; background: var(--ok); color: #06140d; }
.pill.manual { background: var(--accent); color: var(--accent-ink); }
#cmpRows td:not(:first-child), #compareSection th:not(:first-child) { white-space: nowrap; text-align: right; padding-left: 8px; }
#cmpRows td:first-child { font-family: var(--f-body); font-size: 12px; color: var(--fg); }
.robot-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.robot-pick label { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.robot-pick select { font: 500 14px var(--f-body); color: var(--fg); background: var(--raise); border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; min-width: 0; cursor: pointer; }
.robot-pick select:hover { border-color: var(--muted); }
.state { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-height: 2.6em; }
.state b { color: var(--fg); font-weight: 500; }
/* Checks: status line in the header, opens a grouped issue table (layout, payload, live torque). */
.checks { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font-family: var(--f-mono); font-size: 12px; padding: 6px 10px; border-radius: 4px; cursor: pointer; border: 1px solid var(--line); background: var(--raise); color: var(--fg); }
.checks span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--ok); vertical-align: 1px; }
.checks.bad { border-color: var(--stop); background: rgba(229, 80, 63, 0.12); }
.checks.bad span::before { background: var(--stop); }
.checks i { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; flex: none; }
.checks[aria-expanded="true"] i { transform: rotate(-135deg) translate(-2px, -2px); }
.issues { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--raise); max-height: 320px; overflow-y: auto; }
.ig-h { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.issues th { font-family: var(--f-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-align: left; padding: 3px 0; border-bottom: 1px solid var(--line); }
.issues th:not(:first-child), .issues td:not(:first-child) { text-align: right; padding-left: 8px; }
.issues td:first-child { font-family: var(--f-mono); font-size: 12px; color: var(--fg); }
/* Collapsible panel sections (<details open>): click the title to fold a section away. */
.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); user-select: none; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.sec:not([open]) > summary { margin-bottom: 0; }
.sec:not([open]) > summary::after { transform: rotate(-45deg); }
.sec > summary:hover { color: var(--fg); }
.sec + .sec, .counters + .sec, .sec + .counters { border-top: 1px solid var(--line); padding-top: 14px; }
h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.sec-body h3:not(:first-child) { margin-top: 14px; }
h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; padding: 9px 0; border: 0; background: var(--raise); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.row label { font-family: var(--f-display); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; }
.row output { font-family: var(--f-mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 8px; }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
td { padding: 4px 0; border-bottom: 1px solid var(--line); }
td:first-child { font-family: var(--f-display); font-size: 14px; letter-spacing: 0.04em; color: var(--muted); }
td:last-child { text-align: right; }
td.warn { color: var(--stop); }
.counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.counter { background: var(--raise); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.counter span { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.counter strong { font-family: var(--f-mono); font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { flex: 1; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; padding: 9px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--raise); color: var(--fg); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 2 / 4; }
.seg4 button { font-size: 13px; padding: 6px 0; }
.stats { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.stats b { color: var(--fg); font-weight: 500; }
.hist { max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; }
.hist th { position: sticky; top: 0; background: var(--panel); font-family: var(--f-display); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-align: left; padding: 5px 0; border-bottom: 1px solid var(--line); }
.hist th:last-child, .hist td:nth-child(3) { text-align: right; }
.hist td:nth-child(2) { font-family: var(--f-mono); color: var(--fg); font-size: 12px; }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dim-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-mono); font-size: 11px; line-height: 1.3; color: var(--accent); background: rgba(15, 18, 22, 0.88); border: 1px solid rgba(245, 179, 26, 0.5); padding: 2px 6px; border-radius: 3px; white-space: nowrap; text-align: center; }
.dim-label.meas { color: #5ec8ff; border-color: rgba(94, 200, 255, 0.5); }
.dim-label small { display: block; font-size: 10px; color: var(--muted); }
/* Dimensions toolbox: floating over the view, draggable by its title bar, collapsible; the part card opens inside it. */
.toolbox { position: absolute; top: 12px; left: max(16px, env(safe-area-inset-left, 0px)); width: min(330px, calc(100% - 32px)); max-height: calc(100% - 48px); display: flex; flex-direction: column; background: rgba(22, 26, 32, 0.94); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.tb-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; cursor: grab; touch-action: none; user-select: none; font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tb-head:active { cursor: grabbing; }
.tb-head b { flex: 1; font-weight: 600; }
.tb-head .tb-btn { flex: 0 0 auto; padding: 3px 8px; font-size: 11px; letter-spacing: 0.1em; }
.tb-grip { width: 10px; height: 14px; background-image: radial-gradient(var(--muted) 1px, transparent 1.2px); background-size: 5px 5px; opacity: 0.8; }
.tb-min { background: none; border: 1px solid var(--line); border-radius: 3px; color: var(--fg); width: 26px; height: 22px; line-height: 1; cursor: pointer; font-size: 15px; }
.tb-body { padding: 0 10px 10px; overflow-y: auto; min-height: 0; }
.toolbox.collapsed .tb-body { display: none; }
.tb-note { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; }
.card { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--f-display); font-size: 16px; letter-spacing: 0.04em; }
.card-h button { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.card td:first-child { font-size: 13px; padding-right: 10px; }
.note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
.note a { color: var(--accent); }
.note code { font-family: var(--f-mono); color: var(--fg); }
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54% 46%; }
  .panel { border-left: 0; border-top: 1px solid var(--line); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

#deviceRows td { font-size: 12px; vertical-align: top; } #deviceRows td:nth-child(3) { text-align: right; } .ok-t { color: var(--ok); }

.sub-h { margin: 10px 0 4px; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#boqParts td, #boqMat td, #ioRows td { font-size: 12px; vertical-align: top; } td.num { text-align: right; white-space: nowrap; }
#ioRows td:first-child { font-family: var(--f-mono); white-space: nowrap; } #ioRows i { color: var(--accent); font-style: normal; font-size: 10px; }
dialog.ladder { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; max-width: 96vw; width: 960px; }
dialog.ladder::backdrop { background: rgba(0, 0, 0, 0.6); } dialog.ladder .row-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-family: var(--f-display); font-size: 16px; }
dialog.ladder .btns { display: flex; gap: 8px; } .ladder-body { max-height: 78vh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 8px; color: var(--fg); }
.ladder-body svg { max-width: 100%; height: auto; }