:root {
  --paper: #e9edf0;
  --panel: #f7f9fa;
  --card: #ffffff;
  --ink: #13212e;
  --ink-2: #4a5866;
  --muted: #7c8894;
  --rule: #d3dae0;
  --blue: #2a78d6;
  --blue-deep: #1c5cab;
  --orange: #eb6834;
  --aqua: #1baf7a;
  --violet: #7d5fb8;
  --ball: #e9c61d;
  --good: #006300;
  --crit: #d03b3b;
  --warn-bg: #fdf1cf;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --math: 'STIX Two Text', 'Cambria Math', 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid; grid-template-columns: minmax(0, 1fr) 388px; grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper); color: var(--ink); font: 14px/1.4 var(--sans); font-variant-numeric: tabular-nums;
}
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sym { font-family: var(--math); font-style: italic; font-size: 1.08em; }
sub { font-size: 0.8em; }

/* ── Header ─────────────────────────────────────────── */
.top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background: var(--ink); color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand h1 { margin: 0; font: 600 19px/1.1 var(--cond); letter-spacing: 0.01em; }
.brand p { margin: 2px 0 0; font-size: 12.5px; color: #b9c6d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Stage ──────────────────────────────────────────── */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.viewport { position: relative; flex: 1 1 auto; min-height: 280px; overflow: hidden; }
.viewport canvas { display: block; width: 100%; height: 100%; }
.label-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { font: 500 11.5px/1.2 var(--sans); color: var(--ink); background: rgba(255, 255, 255, 0.86); padding: 1px 6px; border-radius: 3px; white-space: nowrap; border-left: 3px solid var(--hue, var(--ink-2)); }
.tag.axis { background: none; border: 0; font: italic 600 14px var(--math); color: var(--ink-2); padding: 0; }
.tag.vec { border-left: 0; background: var(--ink); color: #fff; }

.hud { position: absolute; top: 10px; left: 12px; background: rgba(255, 255, 255, 0.88); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px; font-size: 12.5px; backdrop-filter: blur(4px); }
.hud table { border-collapse: collapse; }
.hud th { font-weight: 500; color: var(--ink-2); text-align: right; padding: 0 0 0 14px; }
.hud th:first-child, .hud td:first-child { text-align: left; padding-left: 0; color: var(--ink-2); }
.hud td { text-align: right; padding: 0 0 0 14px; min-width: 58px; }
.hud .t { font: 600 17px var(--cond); margin-bottom: 2px; }
.hud .swA, .hud .swB { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; background: var(--ink); }
.hud .swB { background: var(--violet); opacity: 0.6; }

.view-tools { position: absolute; top: 10px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.view-tools .tgl { background: rgba(255, 255, 255, 0.88); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 8px 2px 6px; font-size: 12.5px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 4px 10px; font-size: 12.5px; cursor: pointer; border-right: 1px solid var(--rule); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: #eef2f5; }
.seg button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.tgl { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.tgl input { accent-color: var(--blue-deep); margin: 0; }

.stack-bl { position: absolute; left: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.flags { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.flag { font-size: 12.5px; padding: 3px 8px; border-radius: 3px; background: var(--warn-bg); border: 1px solid #e3c463; color: #4d3a00; }
.flag.crit { background: #fbe3e1; border-color: #e0a09c; color: #7a1414; }
.flag::before { content: '▲ '; font-size: 12px; }

.legend3d { width: 300px; background: rgba(255, 255, 255, 0.88); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px; font-size: 12px; backdrop-filter: blur(4px); }
.ramp { display: flex; height: 8px; margin: 4px 0 2px; gap: 2px; }
.ramp i { flex: 3; border-radius: 2px; background: linear-gradient(90deg, #cde2fb, #86b6ef, #3987e5, #1c5cab, #0d366b); }
.ramp b { flex: 1; border-radius: 2px; background: var(--crit); }
.ramp-ticks { display: grid; grid-template-columns: 1fr 1fr 1fr 1.05fr; color: var(--ink-2); font-size: 12px; }
.ramp-ticks span:nth-child(2) { text-align: center; } .ramp-ticks span:nth-child(3) { text-align: right; } .ramp-ticks span:nth-child(4) { text-align: right; }
.legend-row.small { color: var(--ink-2); margin-top: 4px; line-height: 1.3; }

/* ── Transport ──────────────────────────────────────── */
.transport { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.btn { border: 1px solid #b9c2ca; background: #fff; border-radius: 4px; padding: 4px 11px; cursor: pointer; font-weight: 500; }
.btn:hover { background: #eef2f5; }
.btn.primary { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; min-width: 68px; }
.btn.primary:hover { background: #184f95; }
.btn.icon { padding: 4px 8px; font-size: 12.5px; }
#scrub { flex: 1 1 160px; accent-color: var(--blue-deep); min-width: 120px; }
.time { font: 600 15px var(--cond); min-width: 128px; text-align: right; }
.inline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); }
select, input[type='number'] { border: 1px solid #b9c2ca; border-radius: 4px; background: #fff; padding: 3px 5px; }

/* ── Plots ──────────────────────────────────────────── */
.plots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; padding: 6px 12px 8px; background: var(--card); flex: none; }
.plots-key { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.plots-key .ln { display: inline-block; width: 22px; border-top: 2px solid var(--ink); vertical-align: middle; margin-right: 5px; }
.plots-key .ln.dash { border-top-style: dashed; }
.plots-key .hint { margin-left: auto; color: var(--muted); }
.plot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.plot-title { font: 600 13.5px var(--cond); }
.plot-title .unit { font-weight: 500; color: var(--ink-2); }
.plot-legend { display: flex; gap: 9px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.plot-legend i, .plot-tip i { display: inline-block; width: 10px; height: 3px; border-radius: 1px; margin-right: 4px; vertical-align: middle; }
.plot canvas { display: block; width: 100%; height: 150px; cursor: crosshair; touch-action: none; }
/* Above every tool panel: panels.js raises a panel's z-index by one each time it is used, from 20, so a readout at 20
   ended up behind the Plots panel's frosted glass as a blurred blob. */
.plot-tip { position: fixed; z-index: 5000; pointer-events: none; background: var(--ink); color: #fff; border-radius: 4px; padding: 6px 9px; font-size: 12px; box-shadow: 0 4px 14px rgba(19, 33, 46, 0.25); }
.plot-tip table { border-collapse: collapse; }
.plot-tip td, .plot-tip th { padding: 0 0 0 10px; text-align: right; font-weight: 400; }
.plot-tip td:first-child { padding-left: 0; text-align: left; }
.plot-tip th { color: #b9c6d2; }
.plot-tip .tip-t { font-weight: 600; margin-bottom: 2px; }
.plot-tip .tip-u { color: #b9c6d2; margin-top: 2px; }

/* ── Side panel ─────────────────────────────────────── */
.panel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--rule); }
.summary { padding: 10px 14px 8px; border-bottom: 1px solid var(--rule); background: var(--card); }
.summary table { width: 100%; border-collapse: collapse; font-size: 13px; }
.summary th { font-weight: 500; color: var(--ink-2); text-align: right; padding-bottom: 2px; }
.summary th:first-child { text-align: left; font: 600 14px var(--cond); color: var(--ink); }
.summary td { padding: 1.5px 0; text-align: right; }
.summary td:first-child { text-align: left; color: var(--ink-2); }
.summary .bad { color: #a11d1d; font-weight: 600; }
.tabs { display: flex; border-bottom: 1px solid var(--rule); background: var(--card); }
.tabs button { flex: 1; border: 0; background: none; padding: 8px 4px 7px; cursor: pointer; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; }
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.tabbody { flex: 1; overflow-y: auto; padding: 4px 14px 24px; }
.tabbody[hidden] { display: none; }

h2 { font: 600 14.5px var(--cond); margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
h2 .ext { font: 500 11.5px var(--sans); color: #6b4e00; background: var(--warn-bg); border-radius: 3px; padding: 0 6px; }
.note { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px; line-height: 1.35; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 34px; align-items: center; gap: 2px 6px; margin: 5px 0; }
.row label { grid-column: 1 / -1; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.row label .ref { color: var(--muted); font-size: 12px; }
.row input[type='range'] { width: 100%; accent-color: var(--blue-deep); margin: 0; }
.row input[type='number'] { width: 76px; text-align: right; padding: 2px 4px; }
.row .u { font-size: 12px; color: var(--ink-2); }
.field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 13px; }
.field select { max-width: 215px; }
.field.wide { flex-direction: column; align-items: stretch; }
.field.wide select { max-width: none; width: 100%; }
.ab { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.ab .seg button { padding: 4px 12px; }
.linkbtn { border: 0; background: none; color: var(--blue-deep); cursor: pointer; padding: 0; text-decoration: underline; font-size: 13px; }

table.kv, table.mat, table.val { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.kv td { padding: 2px 0; border-bottom: 1px solid #e6ebef; }
table.kv td:last-child { text-align: right; }
table.mat { font-size: 12px; }
table.mat td, table.mat th { text-align: right; padding: 1px 3px; }
table.mat th { color: var(--ink-2); font-weight: 500; }
.matwrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; padding: 4px; background: #fff; }

table.val td { padding: 4px 4px 4px 0; border-bottom: 1px solid #e6ebef; vertical-align: top; }
table.val .st { white-space: nowrap; font-weight: 600; }
table.val .st.pass { color: var(--good); } table.val .st.fail { color: #a11d1d; } table.val .st.info { color: var(--ink-2); }
table.val .nm small { display: block; color: var(--muted); }
table.val .num { text-align: right; white-space: nowrap; }
.val-group { font: 600 13px var(--cond); margin: 14px 0 2px; }
.callout { border-left: 3px solid #d9a400; background: var(--warn-bg); padding: 7px 10px; font-size: 12.5px; line-height: 1.4; margin: 10px 0; border-radius: 0 4px 4px 0; }
.callout.plain { border-left-color: var(--ink-2); background: #eef2f5; }

.prose { font-size: 13px; line-height: 1.5; }
.prose p, .prose ul { margin: 6px 0; }
.prose ul { padding-left: 18px; }
.prose li { margin: 3px 0; }
.prose .eq { font-family: var(--math); font-size: 14.5px; background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px; margin: 6px 0; overflow-x: auto; white-space: nowrap; }
.prose code { font-size: 12px; background: #e6ebef; padding: 0 4px; border-radius: 3px; }

.fatal { position: fixed; inset: auto 16px 16px auto; max-width: 420px; background: #fbe3e1; border: 1px solid #e0a09c; color: #7a1414; padding: 10px 14px; border-radius: 4px; z-index: 30; font-size: 13px; }

@media (max-width: 1100px) { .plots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plot canvas { height: 120px; } }
@media (max-width: 900px) {
  html, body { height: auto; }
  body { display: block; }
  .panel { border-left: 0; border-top: 1px solid var(--rule); }
  .tabbody { overflow: visible; }
  .brand p { display: none; }
}
@media (max-width: 560px) { .plots { grid-template-columns: minmax(0, 1fr); } .time { min-width: 0; } }

/* ── Push and drive pads ────────────────────────────── */
.pads { position: absolute; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.pad { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 8px; font-size: 12.5px; backdrop-filter: blur(4px); }
.pad-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 4px; }
.pad-head b { font: 600 13px var(--cond); }
.pad-head input { width: 54px; padding: 1px 3px; text-align: right; }
.pad-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pad-keys button { border: 1px solid #b9c2ca; background: #fff; border-radius: 4px; padding: 4px 0; cursor: pointer; font-weight: 500; touch-action: none; user-select: none; }
.pad-keys button:hover { background: #eef2f5; }
.pad-keys button:active, .pad-keys button.on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.plot-title select { font: 600 13.5px var(--cond); padding: 0 2px; border-color: var(--rule); }
.tabs button { font-size: 13px; padding-left: 2px; padding-right: 2px; }
.flag button { margin-left: 8px; border: 1px solid currentColor; background: #fff; border-radius: 3px; cursor: pointer; font-size: 12px; padding: 0 6px; color: inherit; pointer-events: auto; }
.src { color: var(--muted); font-size: 12px; }

[hidden] { display: none !important; }
.row code, .note code { font-size: 12px; background: #e6ebef; padding: 0 3px; border-radius: 3px; }

.remote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.remote button { border: 1px solid #b9c2ca; background: #fff; border-radius: 4px; padding: 5px 4px; cursor: pointer; font-size: 12px; font-weight: 500; }
.remote button:hover { background: #eef2f5; }
.remote button.on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
label.pad.tgl { display: flex; }

.row { grid-template-columns: minmax(0, 1fr) 70px minmax(30px, auto); }
.row input[type='number'] { width: 70px; }
.row .u { font-size: 12px; line-height: 1.1; max-width: 92px; }

.btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.prose a { color: var(--blue-deep); }

.tag.force { background: var(--hue, var(--ink)); color: #fff; border-left: 0; font-weight: 600; }
.btn.small { padding: 2px 9px; font-size: 12.5px; }
.build-cap { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 4px; font: 600 15px var(--cond); white-space: nowrap; }
.build-cap small { font: 400 12.5px var(--sans); color: #b9c6d2; margin-right: 8px; }
.build-cap button { margin-left: 14px; border: 1px solid #5b6c7d; background: none; color: #fff; border-radius: 3px; padding: 0 8px; font: 500 12.5px var(--sans); cursor: pointer; }
.build-cap button:hover { background: #29405a; }

/* ── Top-left stack: readout, then the card of the selected part ── */
.stack-tl { position: absolute; top: 10px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; max-height: calc(100% - 20px); }
.stack-tl .hud { position: static; }
.part-card { pointer-events: auto; width: 292px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--rule); border-left: 3px solid #ff7a00; border-radius: 4px; padding: 7px 10px 8px; font-size: 12.5px; overflow-y: auto; box-shadow: 0 4px 14px rgba(19, 33, 46, 0.12); }
.part-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.part-card h3 { margin: 0; font: 600 15px/1.2 var(--cond); }
.part-card .x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; color: var(--ink-2); }
.part-card p { margin: 4px 0 6px; line-height: 1.35; color: var(--ink-2); }
.part-card table { width: 100%; border-collapse: collapse; }
.part-card td { padding: 2px 0; border-top: 1px solid #e6ebef; vertical-align: top; }
.part-card td:nth-child(2) { text-align: right; padding-left: 8px; font-weight: 500; }
.part-card td small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.part-card td small.live { color: var(--blue-deep); }
.part-card .pc-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* ── Follow the signal ── */
.sig { pointer-events: auto; width: 300px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px 7px; font-size: 12px; backdrop-filter: blur(4px); }
.sig-head { font: 600 13px var(--cond); margin-bottom: 3px; }
.sig ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sig li { counter-increment: s; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 6px; padding: 3px 6px; border-left: 3px solid #f0d9a8; border-radius: 0 3px 3px 0; margin: 2px 0; line-height: 1.3; color: var(--ink-2); }
.sig li.sense { border-left-color: #b9d9f7; }
.sig li b { font-weight: 600; color: var(--ink); }
.sig li b::before { content: counter(s) ' '; color: var(--muted); font-weight: 500; }
.sig li.on { background: #fff1d0; border-left-color: #ffa200; color: var(--ink); }
.sig li.sense.on { background: #e1f0fe; border-left-color: #2f9bff; }
.sig-foot { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; }

/* ── Guided tour ── */
.tour { pointer-events: auto; flex: none; margin: 10px 10px 0; background: var(--ink); color: #fff; border-radius: 5px; padding: 9px 13px 10px; font-size: 13px; line-height: 1.4; box-shadow: 0 6px 20px rgba(19, 33, 46, 0.3); }
.viewport.inspecting details.legend3d[open] { display: none; }
.tour .tour-step { font-size: 12px; color: #b9c6d2; }
.tour h3 { margin: 1px 0 4px; font: 600 16px/1.2 var(--cond); }
.tour p { margin: 0 0 7px; color: #e3e9ee; }
.tour .tour-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tour .tour-nav { display: flex; gap: 6px; align-items: center; }
.tour .tour-nav .sp { flex: 1; }
.tour button { border: 1px solid #5b6c7d; background: none; color: #fff; border-radius: 4px; padding: 2px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.tour button:hover { background: #29405a; }
.tour button.go { background: #ffa200; border-color: #ffa200; color: #2b1c00; }
.tour button.go:hover { background: #ffb733; }
.tour button.quiet { border-color: transparent; color: #b9c6d2; padding-left: 0; }
.tour button:disabled { opacity: 0.4; cursor: default; }
.tour-focus { outline: 3px solid #ffa200 !important; outline-offset: 2px; border-radius: 4px; }


/* ── 3D view wrapper, header tools ──────────────────────
   .view3d holds the canvas, labels, readout and cards. On a wide screen it fills .viewport and the
   tools, pads and legend float over it; on a phone it is a block of its own and they flow below it. */
.view3d { position: absolute; inset: 0; }
.view-tools, .pads, .stack-bl { z-index: 2; }
.sheets { display: contents; }
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { background: #1e3042; color: #fff; border: 1px solid #44566a; border-radius: 4px; padding: 5px 6px; font-size: 12.5px; cursor: pointer; }
:lang(ja) { --sans: 'Barlow', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', system-ui, sans-serif; --cond: 'Barlow Semi Condensed', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', system-ui, sans-serif; }

/* ── View options: one wrapping row of chips along the top of the 3D view ── */
.view-tools { left: 300px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; pointer-events: none; }
.view-tools > * { pointer-events: auto; flex: none; }
.view-tools .tgl { position: relative; white-space: nowrap; padding: 3px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--rule); font-size: 12.5px; }
.view-tools .tgl:hover { background: #fff; border-color: #b9c2ca; }
.view-tools .tgl input { position: absolute; opacity: 0; pointer-events: none; }
.view-tools .tgl:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.view-tools .tgl:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.view-tools .btn.small { border-radius: 14px; padding: 3px 11px; }
#btnTour { background: #ffa200; border-color: #ffa200; color: #2b1c00; }
#btnTour:hover { background: #ffb733; }

/* ── Legend: one line until opened ── */
details.legend3d { pointer-events: auto; width: auto; max-width: 300px; padding: 0; }
details.legend3d > summary { display: flex; align-items: center; gap: 8px; padding: 4px 10px; cursor: pointer; list-style: none; font-weight: 500; user-select: none; }
details.legend3d > summary::-webkit-details-marker { display: none; }
details.legend3d > summary::after { content: '▸'; color: var(--ink-2); margin-left: auto; }
details.legend3d[open] > summary::after { content: '▾'; }
details.legend3d[open] { width: 300px; }
details.legend3d > :not(summary) { margin-left: 10px; margin-right: 10px; }
details.legend3d > :last-child { margin-bottom: 7px; }
.ramp.mini { width: 84px; height: 7px; margin: 0; flex: none; }
details.legend3d[open] .ramp.mini { display: none; }

.stack-tl { z-index: 3; }                             /* the part card may overlap the signal panel, never the reverse */
/* The signal panel repeats the readout's numbers, and an open part card needs the panel's room */
.viewport.signalling .hud table { display: none; }
.viewport.signalling .hud .t { margin: 0; }
@media (min-width: 901px) { .viewport.inspecting .sig { display: none; } }
.viewport.comparing .view-tools { left: 380px; }     /* the readout is wider with two robots */

/* ── Room for the 3D view on laptop screens ── */
.time { min-width: 84px; }
@media (min-width: 901px) and (max-width: 1340px) {
  .transport .inline span { display: none; }
  .plot-title { font-size: 12.5px; white-space: nowrap; }
  .plot-legend { gap: 6px; font-size: 12px; }
  .plot-head { flex-wrap: wrap; row-gap: 0; }
}
.viewport { min-height: 340px; }
.stage { overflow-y: auto; }
.stage.plots-off .plots { display: none; }
@media (min-width: 1101px) { .plots { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plot canvas { height: 150px; } }
@media (min-width: 901px) and (max-width: 1100px) { .plot canvas { height: 92px; } }
@media (min-width: 901px) and (max-height: 820px) { .plot canvas { height: 108px; } .legend-row.small { font-size: 12px; } }
@media (min-width: 901px) and (max-height: 820px) and (max-width: 1100px) { .plot canvas { height: 80px; } }

/* ── Phones and narrow windows ──────────────────────────
   The 3D view keeps only the readout; view options become a swipeable row of chips, the push and
   remote pads sit below with finger-sized keys, and the tour and part card are bottom sheets. */
@media (max-width: 900px) {
  .top { flex-wrap: wrap; padding: 6px 10px; gap: 6px 10px; }
  .brand h1 { font-size: 16px; }
  .lang { padding: 7px 6px; }

  .viewport { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; background: var(--panel); }
  .view3d { position: relative; inset: auto; flex: none; height: min(60svh, 560px); min-height: 300px; overflow: hidden; }
  .stack-tl { top: 8px; left: 8px; }
  .hud { font-size: 12px; padding: 4px 8px; }
  .hud .t { font-size: 15px; margin-bottom: 0; }
  .hud td { min-width: 0; padding-left: 8px; }
  .build-cap { top: auto; bottom: 10px; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 20px); }

  .view-tools { position: static; order: 1; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; pointer-events: auto; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .view-tools::-webkit-scrollbar { display: none; }
  .view-tools .tgl { padding: 7px 12px; border-radius: 18px; font-size: 13px; }
  .view-tools .btn.small { padding: 7px 12px; border-radius: 18px; white-space: nowrap; font-size: 13px; }
  .view-tools .seg button { padding: 7px 12px; white-space: nowrap; font-size: 13px; }

  .stack-bl { position: static; order: 2; padding: 8px 10px 0; pointer-events: auto; align-items: stretch; }
  .flags { align-items: stretch; }
  .sig { width: auto; }
  details.legend3d, details.legend3d[open] { width: auto; max-width: none; }
  details.legend3d > summary { padding: 9px 10px; }
  .stage { overflow: visible; }
  .viewport { min-height: 0; }

  .pads { position: static; order: 3; transform: none; padding: 8px 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
  label.pad.tgl { grid-column: 1 / -1; padding: 11px 10px; font-size: 13.5px; }
  .pad { background: #fff; backdrop-filter: none; }
  .pad-head input { width: 62px; padding: 5px 4px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .pad-keys button, .remote button { min-height: 44px; font-size: 13.5px; }

  /* Tour and part card: sheets pinned to the bottom of the screen, so the robot stays in view above them */
  .sheets { display: flex; flex-direction: column-reverse; gap: 6px; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40; pointer-events: none; }
  .sheets .part-card { width: auto; pointer-events: auto; }
  .tour { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40; margin: 0; }
  body:has(.viewport.inspecting) .tour { display: none; }      /* an open part card takes the sheet; closing it brings the tour back */
  .part-card { max-height: 36svh; background: #fff; box-shadow: 0 6px 22px rgba(19, 33, 46, 0.28); }
  .part-card .x { font-size: 22px; padding: 2px 8px; }
  .tour button { padding: 8px 14px; font-size: 13.5px; }

  .transport { position: sticky; top: 0; z-index: 30; gap: 6px; padding: 6px 10px; }
  .transport .btn { min-height: 40px; }
  .transport select { min-height: 36px; }
  #scrub { order: 10; flex-basis: 100%; height: 28px; }
  .time { min-width: 0; margin-left: auto; }

  .plot canvas { touch-action: pan-y; }
  .plots-key { flex-wrap: wrap; gap: 4px 14px; }
  .plots-key .hint { margin-left: 0; }

  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 1 0 auto; padding: 12px 12px 11px; font-size: 14px; }
  .tabbody { padding-bottom: 40px; }
  .row { margin: 9px 0; }
  .row input[type='range'] { height: 30px; }
  .row input[type='number'], .field select, select, input[type='number'] { font-size: 16px; }
  .btn { min-height: 38px; }
  .fatal { inset: auto 8px 8px 8px; max-width: none; }
}
@media (max-width: 560px) {
  .pads { grid-template-columns: minmax(0, 1fr); }
  .brand svg { width: 22px; height: 22px; }
  #btnStep { display: none; }
  .transport .inline span { display: none; }
}