/* Scene-first shell. Floating tools never consume a column or move the camera. */
:root {
  --paper: #edf1f4;
  --panel: #f7f9fc;
  --rule: #dbe2e9;
  --ink: #1b2d42;
  --ink-2: #526479;
  --muted: #67788b;
  --blue-deep: #2464aa;
  --surface: rgba(255, 255, 255, .96);
  --shadow: 0 12px 40px #14283e1a, 0 2px 8px #14283e0a;
}
html, body { height: 100%; height: 100dvh; min-height: 0; }
body, body.settings-hidden { display: flex; flex-direction: column; overflow: hidden; }
.top { flex: none; min-height: 64px; padding: 10px 22px; background: #152a3f; gap: 16px; z-index: 20; }
.brand { flex: 1; }
.brand > div { min-width: 0; }
.brand h1 { font-size: 20px; }
.brand p { font-size: 12px; margin-top: 4px; max-width: 620px; }
.top-right { display: flex; flex: none; width: auto; gap: 8px; align-items: center; }
.shell-button, .lang { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; color: #edf4fc; background: #243c53; border: 1px solid #496075; border-radius: 7px; cursor: pointer; font-size: 12px; }
/* The cover a visit from the studio arrives under (index.html, app.js), drawn as the studio's (#ballbot-go in its
   review.css): navy, the logo balancing, the title and a loading bar. If the page never draws, it lifts after 6 s. */
.arrive { display: none; }
.arriving .arrive { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 45%, #1e3a55, #152a3f 55%, #0e1d2c); color: #edf4fc; transition: opacity .6s ease, visibility .6s; animation: arrive-give-up 0s 6s forwards; }
.arrive svg { display: block; transform-origin: 50% 90%; animation: arrive-balance 1.4s ease-in-out infinite; }
.arrive p { margin: 0; font: 600 18px/1.2 system-ui, sans-serif; letter-spacing: .01em; }
.arrive i { width: 140px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #e9c61d 0 40%, #ffffff26 40%) 0 0 / 250% 100%; animation: arrive-load 1.1s linear infinite; }
.arrived .arrive { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes arrive-balance { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes arrive-load { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes arrive-give-up { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .arrive svg, .arrive i { animation: none; } }
.studio-back { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 7px 10px; color: #edf4fc; border: 1px solid #496075; border-radius: 7px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.studio-back[hidden] { display: none; }
.studio-back:hover { background: #334f69; }
.shell-button:hover { background: #334f69; }
.shell-button[aria-expanded='true'], .shell-button[aria-pressed='true'] { color: #173e66; background: #e5effb; border-color: #e5effb; }
.shell-button svg, .scene-tool svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stage { position: relative; flex: 1; min-height: 0; padding: 0; gap: 0; overflow: hidden; }
.viewport { position: absolute; inset: 0; display: block; min-height: 0; height: auto; overflow: hidden; border: 0; border-radius: 0; background: var(--paper); }
.view3d { position: absolute; inset: 0; min-height: 0; height: auto; max-height: none; overflow: hidden; }
.view3d > canvas { position: absolute; inset: 0; }
.scene-toolbar { position: absolute; top: 20px; left: 22px; z-index: 8; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #fff9; border-radius: 12px; background: var(--surface); box-shadow: 0 3px 16px #14283e12; backdrop-filter: blur(16px); }
.scene-tool { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 38px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.scene-tool:hover { background: #eef3f8; }
.scene-tool[aria-expanded='true'] { color: #1c5b9d; background: #e8f0fb; }
.scene-window { position: absolute; z-index: 10; top: 82px; left: 22px; right: auto; bottom: auto; width: 310px; max-width: calc(100% - 44px); max-height: calc(100% - 184px); margin: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; border: 1px solid #dbe2e9; border-radius: 14px; background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow); scrollbar-width: thin; pointer-events: auto; }
.window-heading, .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -2px 0 14px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); background: transparent; }
.window-heading h2, .panel-heading h2 { display: block; margin: 0; padding: 0; border: 0; font: 600 16px/1.3 var(--cond); }
.window-close, .close-panel, .part-card .x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 7px; color: var(--ink-2); background: #f5f7fa; font: 400 23px/1 var(--sans); cursor: pointer; }
.window-close:hover, .close-panel:hover { background: #e8eef5; }
.view-tools, .viewport.comparing .view-tools { display: block; inset: auto; top: 82px; left: 22px; width: 310px; padding: 16px; pointer-events: auto; }
.seg { display: flex; border-radius: 7px; margin-bottom: 12px; }
.seg button { flex: 1; min-height: 38px; padding: 8px; font-size: 13px; }
.view-options-body { position: static; display: grid; gap: 4px; width: auto; margin: 4px 0 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.view-tools .tgl { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 38px; padding: 8px; border: 0; border-radius: 6px; color: var(--ink-2); background: transparent; font-size: 13px; white-space: normal; }
.view-tools .tgl:hover { background: #edf2f7; }
.view-tools .tgl:has(input:checked) { color: var(--ink); background: transparent; }
.view-tools .tgl input { position: static; opacity: 1; pointer-events: auto; width: 16px; height: 16px; flex: none; }
.btn { min-height: 36px; padding: 8px 12px; border: 1px solid #cad4df; border-radius: 7px; font-size: 13px; }
.btn.small, .view-tools .btn.small { min-height: 36px; padding: 8px 10px; border-radius: 7px; font-size: 12px; }
#btnTour { background: #edf3fa; border-color: #d0deed; color: #245582; }
.btn:disabled, button:disabled { opacity: .45; cursor: default; }
#driveWindow { top: auto; bottom: 100px; }
.pads { position: static; display: grid; gap: 14px; padding: 0; transform: none; }
.pad { padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; font-size: 13px; }
.pad + .pad { border-top: 1px solid var(--rule); padding-top: 14px; }
.pad-head { flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pad-head b { font-size: 14px; }
.pad-head label { display: inline-flex; align-items: center; gap: 5px; }
.pad-head input { min-height: 34px; width: 60px; padding: 4px; }
.pad-keys, .remote { gap: 6px; }
.pad-keys button, .remote button { min-height: 40px; padding: 6px 3px; border-color: #d1dae4; border-radius: 7px; font-size: 12px; }
.remote button[data-rc='stop'] { background: #fff3f1; border-color: #e9c5bf; color: #a63c32; }
label.pad.tgl { align-items: flex-start; gap: 8px; line-height: 1.4; }
label.pad.tgl input { margin-top: 3px; flex: none; }
#dataWindow, #settingsPanel { left: auto; right: 22px; top: 20px; }
.hud { position: static; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; font-size: 12px; overflow: auto; }
.hud .t { font-size: 19px; color: var(--blue-deep); margin-bottom: 10px; }
.hud table { width: 100%; table-layout: fixed; }
.hud td, .hud th { padding: 5px 0 5px 8px; min-width: 0; overflow-wrap: anywhere; }
.hud td:first-child { width: 74px; }
.viewport.signalling .hud table { display: table; }
details.legend3d, details.legend3d[open] { width: auto; max-width: none; margin-top: 14px; border-radius: 7px; background: #f7f9fc; }
details.legend3d > summary { min-height: 36px; padding: 9px 10px; }
.viewport.inspecting details.legend3d[open] { display: block; }
#settingsPanel { width: 380px; display: block; grid-column: auto; grid-row: auto; max-height: calc(100% - 120px); border: 1px solid var(--rule); }
.panel-heading { margin-bottom: 8px; }
.summary { padding: 6px 0 14px; background: transparent; border-bottom: 0; }
.summary table { table-layout: fixed; }
.summary td, .summary th { padding: 3px 0; overflow-wrap: anywhere; vertical-align: top; }
.summary td:first-child, .summary th:first-child { width: 55%; padding-right: 8px; }
.tabs { position: sticky; top: -16px; z-index: 2; margin: 0 -16px; padding: 0 10px; background: #f7f9fc; }
.tabs button { min-height: 42px; font-size: 12px; padding: 10px 3px; }
.tabs button[aria-selected='true'] { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.tabbody { overflow: visible; padding: 0 0 14px; }
h2 { margin-top: 22px; font-size: 16px; padding-bottom: 7px; }
.row { margin: 12px 0; }
.row label { margin-bottom: 3px; }
.row input[type='number'] { min-height: 32px; }
.row input[type='range'] { min-height: 26px; }
.field { margin: 10px 0; flex-wrap: wrap; }
.field select { min-height: 34px; min-width: 0; max-width: 100%; }
.note { line-height: 1.5; }
select, input[type='number'] { border-radius: 6px; }
.transport { position: absolute; z-index: 12; left: 50%; right: auto; top: auto; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; width: max-content; max-width: calc(100% - 32px); padding: 7px; border: 1px solid #fff9; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.transport .time { min-width: 72px; margin: 0 6px; text-align: center; font-size: 14px; }
.transport .scene-tool { border-left: 1px solid var(--rule); border-radius: 0 7px 7px 0; font-size: 12px; }
#playbackWindow { top: auto; bottom: 90px; left: 50%; transform: translateX(-50%); width: 320px; }
#playbackWindow .inline { display: flex; justify-content: space-between; margin-top: 14px; }
#playbackWindow #scrub { display: block; width: 100%; min-width: 0; height: 30px; margin: 0 0 12px; accent-color: var(--blue-deep); }
#plots { left: 22px; right: 22px; top: auto; bottom: 92px; width: auto; max-width: none; max-height: min(36vh, 360px); padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; }
.plots > .window-heading, .plots-key { grid-column: 1 / -1; }
.plots > .window-heading { margin-bottom: 0; }
.plots-key { font-size: 12px; flex-wrap: wrap; }
.plots-key .hint { margin-left: auto; }
.plot { min-width: 0; }
.plot-head { flex-wrap: wrap; gap: 3px; }
.plot-title { font-size: 13px; white-space: normal; }
.plot-legend { gap: 7px; font-size: 12px; }
.plot canvas { height: 115px; }
#partCard { left: 22px; top: 82px; width: 310px; border-left: 1px solid var(--rule); }
.part-card header { align-items: center; margin-bottom: 10px; }
.part-card h3 { font-size: 16px; }
.part-card p { line-height: 1.5; }
#sigPanel { left: auto; right: 22px; top: 20px; width: 330px; }
.sig li { grid-template-columns: 1fr; gap: 4px; padding: 7px; }
#tour { top: 82px; width: 340px; background: #1a3047; color: #fff; }
.tour button { min-height: 36px; }
.tour .tour-nav { display: flex; align-items: center; gap: 6px; }
.tour .sp { flex: 1; }
.flags { position: absolute; z-index: 7; left: 22px; bottom: 90px; max-width: min(380px, calc(100% - 44px)); pointer-events: none; }
.flag { font-size: 12px; border-radius: 6px; }
.build-cap { z-index: 6; top: auto; bottom: 95px; max-width: calc(100% - 32px); white-space: normal; border-radius: 8px; text-align: center; }
.build-cap button { min-height: 30px; }
body.controls-hidden .scene-toolbar, body.controls-hidden .transport, body.controls-hidden .scene-window, body.controls-hidden .flags, body.controls-hidden #btnPanel { display: none !important; }
body.controls-hidden #btnFocus { color: #173e66; background: #e5effb; }
.fatal { z-index: 40; }
@media (max-width: 1100px) { .brand p { display: none; } }
@media (max-width: 1000px) {
  .top { padding: 9px 12px; min-height: 58px; flex-wrap: nowrap; gap: 8px; }
  .brand { gap: 7px; }
  .brand svg { width: 23px; height: 23px; }
  .brand h1 { font-size: 16px; line-height: 1.15; max-width: 165px; }
  .top-right { gap: 5px; }
  .lang { width: 42px; padding: 7px 3px; font-size: 12px; }
  .shell-button { min-height: 36px; padding: 7px; font-size: 12px; }
  .shell-button > span { display: none; }
  .studio-back { padding: 7px 9px; }
  .studio-back > span { display: none; }
  .scene-toolbar { top: 12px; left: 12px; right: 12px; width: max-content; max-width: calc(100% - 24px); padding: 4px; gap: 1px; }
  .scene-tool { min-height: 40px; padding: 9px 10px; gap: 6px; font-size: 12px; }
  .scene-tool svg { width: 17px; height: 17px; }
  .scene-window, .view-tools, .viewport.comparing .view-tools, #driveWindow, #dataWindow, #settingsPanel, #playbackWindow, #partCard, #sigPanel, #tour, #plots {
    position: absolute; left: 12px; right: 12px; top: auto; bottom: max(82px, calc(70px + env(safe-area-inset-bottom))); width: auto; max-width: none; max-height: min(48%, 430px); margin: 0; transform: none; padding: 14px; border-radius: 14px;
  }
  .window-heading, .panel-heading { margin-bottom: 10px; }
  .window-close, .close-panel, .part-card .x { width: 36px; height: 36px; }
  .view-tools .tgl { min-height: 40px; }
  .view-options-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; }
  .view-tools .tgl { font-size: 12px; padding: 6px; gap: 7px; }
  .view-tools .btn.small { min-height: 40px; }
  .transport { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100% - 24px); padding: 6px; gap: 5px; }
  .transport .btn { min-height: 40px; padding: 7px 10px; font-size: 12px; }
  .transport .time { min-width: 58px; margin: 0 2px; font-size: 13px; }
  .transport .scene-tool { padding: 8px; }
  .transport .scene-tool svg { display: none; }
  .transport .scene-tool span { max-width: 75px; white-space: normal; line-height: 1.15; }
  .pads { gap: 12px; }
  .pad-head input, select, input[type='number'], .row input[type='number'], .field select { font-size: 16px; }
  .pad-keys button, .remote button { min-height: 44px; font-size: 13px; }
  .tabs { top: -14px; margin: 0 -14px; padding: 0 8px; }
  .tabs button { padding: 12px 6px; font-size: 12px; }
  #plots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plot canvas { height: 105px; }
  .plots-key .hint { display: none; }
  .flags { left: 12px; bottom: 82px; max-width: calc(100% - 24px); }
  .build-cap { bottom: 82px; width: max-content; }
  .build-cap small { display: block; margin: 0 0 4px; }
}
@media (max-width: 370px) {
  .brand h1 { font-size: 14px; max-width: 115px; }
  .scene-toolbar { width: calc(100% - 24px); justify-content: space-between; }
  .scene-toolbar .scene-tool { padding: 9px 7px; font-size: 12px; gap: 4px; }
}
/* Keep close controls and settings tabs reachable when a tool is scrolled. */
.window-heading, .panel-heading { position: sticky; top: -16px; z-index: 4; margin: -16px -16px 14px; padding: 10px 14px; background: #fdfefe; }
#settingsPanel .tabs { top: 36px; }
.run-summary { margin-top: 14px; border-top: 1px solid var(--rule); }
.run-summary > summary { padding: 12px 0; cursor: pointer; font-weight: 500; }
.run-summary .summary { padding-bottom: 0; }
@media (max-width: 1000px) {
  .window-heading, .panel-heading { top: -14px; margin: -14px -14px 12px; padding: 8px 12px; }
  #settingsPanel .tabs { top: 38px; }
}

@media (max-width: 540px) {
  #plots { grid-template-columns: minmax(0, 1fr); }
  .plot canvas { height: 140px; }
}
/* Landscape phones use a side tool so controls do not consume the scene height. */
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  .scene-window, .view-tools, .viewport.comparing .view-tools, #driveWindow, #dataWindow, #settingsPanel, #playbackWindow, #partCard, #sigPanel, #tour, #plots {
    left: auto; right: 12px; top: 12px; bottom: auto; width: min(330px, 44%); max-height: calc(100% - 100px); transform: none;
  }
  #plots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 759px) {
  .scene-toolbar .scene-tool span { display: none; }
  .scene-toolbar .scene-tool { min-width: 40px; }
}
/* A driving tool stays a single readable column at tablet widths as well. */
.pads { grid-template-columns: minmax(0, 1fr); }
/* In clean scene mode only the restore button remains over the canvas. */
body.controls-hidden .brand, body.controls-hidden .lang-pick, body.controls-hidden #btnTour { display: none; }
body.controls-hidden .top { position: absolute; top: 12px; right: 12px; min-height: 0; width: max-content; padding: 0; background: transparent; }
body.controls-hidden #btnFocus { border: 1px solid #d4dfe9; box-shadow: var(--shadow); }
/* Plots can be pinned next to a control tool without stacking over it. */
#toolDeck { display: contents; }
#toolDeck[data-layout='paired'] { position: absolute; z-index: 10; left: 22px; right: 22px; bottom: 92px; height: min(44%, 360px); display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 12px; pointer-events: none; }
#toolDeck[data-layout='paired'] > .scene-window { position: relative; inset: auto; transform: none; width: auto; max-width: none; max-height: 100%; min-height: 0; margin: 0; pointer-events: auto; }
#toolDeck[data-layout='paired'] > #plots { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#toolDeck[data-layout='paired'] > .scene-window:not(#plots) { grid-column: 1; grid-row: 1; }
#toolDeck[data-layout='paired'] .plot canvas { height: 95px; }
.drive-extras { border-top: 1px solid var(--rule); margin-top: 2px; }
.drive-extras > summary { padding: 12px 0 0; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.drive-extras[open] > summary { padding-bottom: 12px; }
.drive-extras .pad { margin-bottom: 12px; }
#plotChoice { min-width: 0; max-width: 220px; margin-left: auto; font-size: 12px; }
#plots > .window-heading { gap: 10px; }
#plots:has(.plot[hidden]) { grid-template-columns: minmax(0, 1fr); }
#plots:has(.plot[hidden]) .plot canvas { height: 150px; }
@media (max-width: 1000px) {
  #btnTheme span { display: none; }
  #toolDeck[data-layout='paired'] { left: 12px; right: 12px; bottom: max(82px, calc(70px + env(safe-area-inset-bottom))); height: min(60%, 440px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 180px minmax(0, 1fr); gap: 8px; }
  #toolDeck[data-layout='paired'] > #plots { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); padding: 10px 14px; }
  #toolDeck[data-layout='paired'] > .scene-window:not(#plots) { grid-column: 1; grid-row: 2; }
  #toolDeck[data-layout='paired'] #plots > .window-heading { margin-bottom: 4px; padding-top: 4px; padding-bottom: 4px; }
  #toolDeck[data-layout='paired'] #plots .plots-key, #toolDeck[data-layout='paired'] #plots .plot-title { display: none; }
  #toolDeck[data-layout='paired'] #plots .plot-legend { margin-left: auto; }
  #toolDeck[data-layout='paired'] #plots .plot canvas { height: 90px; }
  #toolDeck[data-layout='paired'] #driveWindow > .window-heading { display: none; }
  #toolDeck[data-layout='paired'] .pads { gap: 6px; }
  #toolDeck[data-layout='paired'] .pad-head { margin-bottom: 6px; }
  #plotChoice { font-size: 16px; max-width: 190px; }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  #toolDeck[data-layout='paired'] #plots h2 { display: none; }
}
/* Cinematic glass palette, with a solid alternative available from the header. */
body[data-theme='glass'] { --paper: #071724; --panel: #102b3b; --card: #102b3b; --ink: #dff4ff; --ink-2: #adcbd8; --muted: #91b2c2; --rule: #629cb13d; --blue-deep: #266e9d; --surface: rgba(9, 29, 43, .66); --shadow: 0 12px 36px #0005, inset 0 1px #b6efff12; color-scheme: dark; }
body[data-theme='glass'] .top { background: #071a29d9; border-bottom: 1px solid #65cbe52b; }
body[data-theme='glass'] .scene-toolbar, body[data-theme='glass'] .transport, body[data-theme='glass'] .scene-window { border-color: #79d8ec45; backdrop-filter: blur(18px) saturate(1.2); }
body[data-theme='glass'] .scene-window { background: linear-gradient(135deg, #163d4d99, #091d2bcc); }
body[data-theme='glass'] .window-heading, body[data-theme='glass'] .panel-heading, body[data-theme='glass'] .tabs { background: #102b3be8; }
body[data-theme='glass'] .btn, body[data-theme='glass'] select, body[data-theme='glass'] input[type='number'], body[data-theme='glass'] .remote button, body[data-theme='glass'] .pad-keys button, body[data-theme='glass'] .window-close, body[data-theme='glass'] .close-panel, body[data-theme='glass'] .part-card .x, body[data-theme='glass'] .seg { background: #12394b80; border-color: #6fb9d54d; color: #dff4ff; }
body[data-theme='glass'] .scene-tool:hover, body[data-theme='glass'] .btn:hover, body[data-theme='glass'] .remote button:hover, body[data-theme='glass'] .view-tools .tgl:hover { background: #4cc9e226; }
body[data-theme='glass'] .scene-tool[aria-expanded='true'], body[data-theme='glass'] .remote button.on, body[data-theme='glass'] .seg button[aria-pressed='true'], body[data-theme='glass'] .btn.primary { background: #238ba657; color: #ddfbff; box-shadow: inset 0 0 0 1px #7be8f663, 0 0 16px #4fe0ff13; }
body[data-theme='glass'] .remote button[data-rc='stop'] { background: #913d4a40; border-color: #e8999a59; color: #ffcbce; }
body[data-theme='glass'] .tabs button[aria-selected='true'] { color: #7de5f6; border-bottom-color: #7de5f6; }
body[data-theme='glass'] .prose .eq, body[data-theme='glass'] .matwrap, body[data-theme='glass'] details.legend3d, body[data-theme='glass'] .callout.plain, body[data-theme='glass'] .row code, body[data-theme='glass'] .note code { background: #071e2c99; color: var(--ink); }
body[data-theme='glass'] .callout { background: #6b551b45; color: #f2dba5; }
body[data-theme='glass'] .tag { background: #0c2438c9; color: #dff4ff; }
body[data-theme='glass'] .tag.axis { background: none; color: #a3d9e8; }
body[data-theme='glass'] .plot-title select { background: #0d2939; }
body[data-theme='glass'] .plots-key .ln { border-color: #dff4ff; }
body[data-theme='glass'] #btnTour { background: #14566e70; color: #c6f4ff; border-color: #7be8f64d; }
body.controls-hidden #btnTheme { display: none; }
@media (prefers-reduced-transparency: reduce) { body[data-theme='glass'] { --surface: #102b3b; } body[data-theme='glass'] .scene-window { background: #102b3b; } }

#plots { align-content: start; }
body[data-theme='glass'] #btnTheme { color: #d6faff; background: #1d607b66; border-color: #70d5e966; }
#toolDeck[data-layout='paired'] > #plots:has(.plot[hidden]) { grid-template-columns: minmax(0, 1fr); }
body[data-theme='glass'] table.val .st.pass { color: #87e5b3; }
body[data-theme='glass'] table.val .st.fail, body[data-theme='glass'] .summary .bad { color: #ffb1ab; }
body[data-theme='glass'] .prose a, body[data-theme='glass'] .linkbtn { color: #80dcef; }
@media (max-width: 1000px) {
  #toolDeck[data-layout='paired'] #plots .plot-title:has(select) { display: block; }
}
/* Light glass brings the same depth to the bright scene, including form fields. */
body[data-theme='light'] { --surface: rgba(255, 255, 255, .43); --rule: #95afc44d; --shadow: 0 12px 36px #19364d14, inset 0 1px #ffffffd9; }
body[data-theme='light'] .scene-window { background: linear-gradient(145deg, #ffffffa6, #ffffff52); border-color: #ffffffc9; border-radius: 20px; }
body[data-theme='light'] .scene-window, body[data-theme='light'] .scene-toolbar, body[data-theme='light'] .transport { backdrop-filter: blur(14px) saturate(1.7); box-shadow: var(--shadow); }
body[data-theme='light'] .window-heading, body[data-theme='light'] .panel-heading, body[data-theme='light'] .tabs { background: #ffffff40; border-color: #a1b6c43b; }
body[data-theme='light'] .btn, body[data-theme='light'] select, body[data-theme='light'] input[type='number'], body[data-theme='light'] .remote button, body[data-theme='light'] .pad-keys button, body[data-theme='light'] .window-close, body[data-theme='light'] .close-panel, body[data-theme='light'] .part-card .x, body[data-theme='light'] .seg { background: #ffffff3d; border-color: #9fb4c65c; border-radius: 10px; box-shadow: inset 0 1px #ffffffe6; }
body[data-theme='light'] .scene-tool:hover, body[data-theme='light'] .btn:hover, body[data-theme='light'] .remote button:hover { background: #ffffff91; }
body[data-theme='light'] .scene-tool[aria-expanded='true'], body[data-theme='light'] .remote button.on { background: #8ab6ea40; color: #174d83; box-shadow: inset 0 1px #ffffffb3; }
body[data-theme='light'] .btn.primary { background: #2566b4d9; color: #fff; border-color: #3976b99c; box-shadow: inset 0 1px #ffffff4d; }
body[data-theme='light'] .remote button[data-rc='stop'] { background: #e98d8d1f; border-color: #cf8b8b52; color: #943c36; }
body[data-theme='light'] .prose .eq, body[data-theme='light'] .matwrap, body[data-theme='light'] details.legend3d { background: #ffffff40; }
.scene-window, .tabbody, .matwrap { scrollbar-width: thin; scrollbar-color: #54758c45 transparent; scrollbar-gutter: auto; }
.scene-window::-webkit-scrollbar, .tabbody::-webkit-scrollbar, .matwrap::-webkit-scrollbar { width: 3px; height: 3px; background: transparent; }
.scene-window::-webkit-scrollbar-track, .tabbody::-webkit-scrollbar-track, .matwrap::-webkit-scrollbar-track { background: transparent; }
.scene-window::-webkit-scrollbar-thumb, .tabbody::-webkit-scrollbar-thumb, .matwrap::-webkit-scrollbar-thumb { background: #54758c45; border-radius: 999px; }
.scene-window:hover::-webkit-scrollbar-thumb { background: #54758c73; }
body[data-theme='glass'] .scene-window { scrollbar-color: #b3e5f03d transparent; }
body[data-theme='glass'] .scene-window::-webkit-scrollbar-thumb { background: #b3e5f03d; }
/* Phones: the logo alone; the title stays for screen readers (the h1's aria-label). */
@media (max-width: 420px) {
  .brand > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-theme='light'] { --surface: #f7fafc; }
  body[data-theme='light'] .scene-window { background: #f7fafc; }
}

/* Scroll indicators stay quiet until the card is being used. */
.scene-window, .tabbody, .matwrap { scrollbar-color: transparent transparent; }
.scene-window:hover, .scene-window:focus-within, .tabbody:hover, .matwrap:hover { scrollbar-color: #54758c33 transparent; }
.scene-window::-webkit-scrollbar, .tabbody::-webkit-scrollbar, .matwrap::-webkit-scrollbar { width: 2px; height: 2px; }
.scene-window::-webkit-scrollbar-thumb, .tabbody::-webkit-scrollbar-thumb, .matwrap::-webkit-scrollbar-thumb { background: transparent; }
.scene-window:hover::-webkit-scrollbar-thumb, .scene-window:focus-within::-webkit-scrollbar-thumb, .tabbody:hover::-webkit-scrollbar-thumb, .matwrap:hover::-webkit-scrollbar-thumb { background: #54758c33; }
body[data-theme='glass'] .scene-window { scrollbar-color: transparent transparent; }
body[data-theme='glass'] .scene-window:hover, body[data-theme='glass'] .scene-window:focus-within { scrollbar-color: #b3e5f033 transparent; }
body[data-theme='glass'] .scene-window::-webkit-scrollbar-thumb { background: transparent; }
body[data-theme='glass'] .scene-window:hover::-webkit-scrollbar-thumb, body[data-theme='glass'] .scene-window:focus-within::-webkit-scrollbar-thumb { background: #b3e5f033; }
body[data-theme='glass'] .build-cap, body[data-theme='glass'] .tag.vec { background: #0b253ae6; color: #dff4ff; border: 1px solid #79d8ec45; }
.remote button, .pad-keys button { min-width: 0; overflow-wrap: anywhere; }
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  #toolDeck[data-layout='paired'] .remote button { font-size: 12px; padding-left: 2px; padding-right: 2px; }
  #toolDeck[data-layout='paired'] .pad-head b { max-width: 80px; font-size: 12px; }
}
body[data-theme='light'] select, body[data-theme='light'] input[type='number'], body[data-theme='light'] .remote button, body[data-theme='light'] .pad-keys button {
  background: linear-gradient(165deg, #ffffff66, #ffffff1a); border-color: #ffffffb3; box-shadow: inset 0 1px #ffffffed, inset 0 -1px #89a1b017, 0 1px 3px #2645580a;
}
body[data-theme='light'] .remote button[data-rc='stop'] { background: linear-gradient(165deg, #f7c2c23d, #e98d8d1a); border-color: #e6b0b057; }
/* Match the chart tray's 14px padding so its sticky header cannot create sideways scroll. */
#plots > .window-heading { margin-left: -14px; margin-right: -14px; }
/* Wide workspaces keep tools at the edges, leaving the full scene height available. */
@media (min-width: 1001px) {
  .transport { top: 20px; bottom: auto; left: auto; right: 22px; transform: none; gap: 5px; padding: 5px; }
  .transport .time { min-width: 62px; margin: 0 3px; }
  .transport .btn { padding: 7px 10px; }
  #playbackWindow { top: 82px; bottom: auto; left: auto; right: 22px; transform: none; }
}
#viewport #toolDeck[data-layout='desktop'] { display: contents; }
#viewport #toolDeck[data-layout='desktop'] > .scene-window {
  position: absolute; top: var(--tool-top, 82px); bottom: auto; left: 22px; right: auto; width: var(--tool-width, 280px); height: auto; max-width: none; max-height: var(--tool-height, calc(100% - 104px)); min-height: 0; transform: none; margin: 0; padding: 16px;
}
#viewport #toolDeck[data-layout='desktop'] > #plots {
  left: auto; right: 22px; top: var(--plot-top, 82px); width: var(--plot-width, 400px); grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px;
}
#toolDeck[data-layout='desktop'] #plots .plot canvas { height: 110px; }
#toolDeck[data-layout='desktop'] #plots .plots-key .hint { display: none; }
#toolDeck[data-layout='desktop'] #plotChoice { max-width: 210px; }
@media (max-width: 1000px) and (min-height: 521px) {
  #toolDeck[data-layout='paired'] { height: min(49%, 340px); grid-template-rows: 130px minmax(0, 1fr); }
  #toolDeck[data-layout='paired'] #plots .plot canvas { height: 62px; }
  #toolDeck[data-layout='paired'] #plots > .window-heading { padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; }
  #toolDeck[data-layout='paired'] #plots .window-heading .window-close { width: 30px; height: 30px; }
  #toolDeck[data-layout='paired'] #plots #plotChoice { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
}

/* In compact driving mode the directional keys stay ready; speed lives with extras. */
.pad-head .drive-speed-title { display: none; }
.drive-extras > .drive-speed { display: flex; align-items: center; gap: 7px; margin: 12px 0; }
.drive-extras > .drive-speed .drive-speed-title { margin-right: auto; }
.drive-speed input { width: 64px; min-height: 34px; }

#viewport #toolDeck[data-layout='desktop'] > #playbackWindow { left: auto; right: 22px; top: 82px; width: 320px; }
.tag.part { font-size: 12.5px; padding: 3px 7px; border-radius: 5px; }
@media (min-width: 1001px) {
  #toolDeck[data-layout='paired'] { bottom: 16px; }
}
@media (max-width: 1000px) {
  #toolDeck[data-layout='paired'] #driveWindow { padding-top: 8px; padding-bottom: 8px; }
  #toolDeck[data-layout='paired'] .pads { gap: 4px; }
  #toolDeck[data-layout='paired'] .drive-extras > summary { padding-top: 8px; }
}
/* Scrolled controls must not show through a sticky glass title. */
.window-heading, .panel-heading { isolation: isolate; backdrop-filter: blur(16px) saturate(1.3); }
body[data-theme='light'] .window-heading, body[data-theme='light'] .panel-heading { background: #f6f9fbe6; }
body[data-theme='glass'] .window-heading, body[data-theme='glass'] .panel-heading { background: #102b3be6; }
/* Tabs mask the scrolling form, including when backdrop filtering is unavailable. */
#settingsPanel .tabs { isolation: isolate; background: #f6f9fb; overflow-x: auto; }
#settingsPanel .tabs button { flex: 1 0 auto; padding-inline: 10px; white-space: nowrap; }
body[data-theme='glass'] #settingsPanel .tabs { background: #102b3b; }
/* Native option menus need their own colors rather than the dark trigger's ink. */
.lang { color-scheme: light; }
.lang option { background: #f6f9fb; color: #193047; }
.scene-window :is(input, select, button, summary, label) { scroll-margin-block: 64px 12px; }
/* Panel manipulation: title grips plus an outboard resize corner. */
.panel-drag-area { cursor: grab; touch-action: none; user-select: none; }
.panel-move { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 28px; padding: 4px; margin-right: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; }
.panel-move svg, .panel-resize svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.panel-move:hover { background: #8aafce24; color: var(--ink); }
.panel-move-floating, .panel-resize { position: absolute; transform: translate(-50%, -50%); border: 1px solid var(--rule); background: var(--surface); box-shadow: 0 2px 8px #17334a18; backdrop-filter: blur(10px); }
.panel-move-floating { width: 28px; height: 24px; border-radius: 7px; }
.panel-resize { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 4px; border-radius: 8px; color: var(--ink-2); cursor: nwse-resize; touch-action: none; }
.panel-interaction, .panel-interaction * { user-select: none !important; }
.panel-grabbed { outline: 2px solid #6299c8aa; outline-offset: 2px; }
.panel-limited { outline-color: #d19a42; }
.scene-window[data-panel-manual] { overflow: auto; box-sizing: border-box; }
#plots[data-panel-manual] { grid-template-columns: repeat(var(--panel-chart-cols, 1), minmax(0, 1fr)); align-content: start; }
#plots[data-panel-manual]:has(.plot[hidden]) { grid-template-columns: minmax(0, 1fr); }
#plots[data-panel-manual] .plot canvas { height: 110px; }
#plots[data-panel-manual][data-panel-compact='true'] .plots-key,
#plots[data-panel-manual][data-panel-compact='true'] .plot-title:not(:has(select)) { display: none; }
#plots[data-panel-manual][data-panel-compact='true'] .plot canvas { height: 62px; }
#plots[data-panel-manual][data-panel-compact='true'] > .window-heading { padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; }
#plots[data-panel-manual][data-panel-compact='true'] .window-close { width: 30px; height: 30px; }
.reset-panels { min-width: 32px; padding-left: 7px; padding-right: 7px; }
.quick-push { display: none; }
body.controls-hidden .panel-resize, body.controls-hidden .panel-move-floating, body.controls-hidden .quick-push { display: none !important; }
@media (max-width: 1000px) {
  .quick-push { position: absolute; z-index: 12; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--playback-height, 54px) + 8px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(366px, calc(100% - 24px)); padding: 5px 7px; border: 1px solid #ffffffa3; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.5); }
  .quick-push-title { flex: 1; min-width: 0; font-size: 12px; line-height: 1.1; font-weight: 500; }
  .quick-push-title small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); font-weight: 400; }
  .quick-push-keys { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; }
  .quick-push button { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); background: #ffffff3d; box-shadow: inset 0 1px #ffffff80; font-size: 13px; cursor: pointer; }
  .quick-push button:active, .quick-push button.pushed { background: #2566b4d9; color: #fff; }
  body[data-theme='glass'] .quick-push { border-color: #79d8ec45; }
  body[data-theme='glass'] .quick-push button { background: #12394b80; box-shadow: inset 0 1px #a6e5ff1a; }
  #toolDeck[data-layout='paired'] { bottom: var(--mobile-tool-bottom, 138px); }
  #viewport #toolDeck[data-layout='single'] > .scene-window { bottom: var(--mobile-tool-bottom, 138px); }
  .viewport[data-compact-driving='true'] #driveWindow > .window-heading { display: none; }
  .viewport[data-compact-driving='true'] #driveWindow { padding-top: 8px; padding-bottom: 8px; }
  .viewport[data-compact-driving='true'] #driveWindow .pads { gap: 4px; }
  .viewport[data-compact-driving='true'] .drive-extras > summary { padding-top: 8px; }
  .panel-resize { width: 30px; height: 30px; }
}
@media (max-width: 370px) { .scene-toolbar .scene-tool span { display: none; } .scene-toolbar .scene-tool { min-width: 40px; } }
@media (max-width: 1000px) {
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] > #plots { height: 190px; max-height: 190px; }
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] #plots .plots-key { display: none; }
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] #plots .plot-title:not(:has(select)) { display: none; }
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] #plots .plot canvas { height: 100px; }
  .drive-extras [data-pad='push'] .pad-keys { display: none; }
  .quick-push button { user-select: none; touch-action: manipulation; }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  .quick-push, .transport { left: 12px; transform: none; max-width: calc(50% - 24px); }
}

/* ── Workspace review, 2026-11-15 ─────────────────────────────────────── */
/* A short notice when a tool is closed to make room for another. */
.toast { position: absolute; z-index: 14; top: 76px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 10px; background: #1a3047; color: #fff; font-size: 13px; text-align: center; box-shadow: var(--shadow); pointer-events: none; }
body.controls-hidden .toast { display: none; }
/* Theme menu: three named choices instead of a cycling button. */
.theme-menu { position: fixed; z-index: 5000; display: grid; gap: 2px; min-width: 176px; padding: 6px; border: 1px solid #dbe2e9; border-radius: 10px; background: #fdfefe; box-shadow: 0 12px 40px #14283e33; }
.theme-menu button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #1b2d42; font-size: 13px; text-align: left; cursor: pointer; }
.theme-menu button::before { content: ''; flex: none; width: 14px; }
.theme-menu button[aria-checked='true']::before { content: '✓'; }
.theme-menu button[aria-checked='true'] { font-weight: 600; }
.theme-menu button:hover { background: #eef3f8; }
body[data-theme='glass'] .theme-menu { background: #102b3b; border-color: #79d8ec45; }
body[data-theme='glass'] .theme-menu button { color: #dff4ff; }
body[data-theme='glass'] .theme-menu button:hover { background: #4cc9e226; }
#btnTheme svg path { stroke: none; }
/* Model notes are information, not alarms; only a fall is styled as critical. */
.flag:not(.crit) { background: var(--surface); border-color: var(--rule); color: var(--ink-2); backdrop-filter: blur(10px); }
.flag:not(.crit)::before { content: '● '; color: #c98a12; }
/* The tour card's grip follows the dark card instead of the bordered tour buttons. */
.tour .tour-step { display: flex; align-items: center; gap: 4px; }
.tour .panel-move, .tour .panel-move:hover { min-height: 28px; padding: 4px; border: 0; background: transparent; color: #b9c6d2; }
.scrub-ends { display: flex; justify-content: space-between; gap: 12px; margin: -8px 0 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Phones: fixed sheets, so the move/resize grips and the layout reset are not offered. */
#viewport[data-phone='true'] .panel-move, #viewport[data-phone='true'] .panel-resize, #viewport[data-phone='true'] #btnPanelReset { display: none !important; }
#viewport[data-phone='true'] .panel-drag-area { cursor: auto; touch-action: auto; user-select: auto; }
@media (max-width: 1000px) {
  /* Finger-sized targets. */
  .top { min-height: 62px; }
  .shell-button, .lang { min-width: 44px; min-height: 44px; justify-content: center; }
  .lang { width: 58px; padding: 7px 6px; font-size: 13px; }
  .scene-toolbar { overflow-x: auto; scrollbar-width: none; }
  .scene-toolbar::-webkit-scrollbar { display: none; }
  .scene-tool, .seg button, .btn, .btn.small, .view-tools .btn.small, .transport .btn, .tabs button, .tour button, .theme-menu button { min-height: 44px; }
  .window-close, .close-panel, .part-card .x { width: 44px; height: 44px; }
  .view-tools .tgl, .field .tgl, label.pad.tgl { min-height: 44px; }
  input[type='checkbox'], .view-tools .tgl input { width: 20px; height: 20px; flex: none; }
  .row input[type='range'], #playbackWindow #scrub { height: 44px; min-height: 44px; }
  .row input[type='number'], .field select, select, .pad-head input, .drive-speed input { min-height: 44px; }
  summary { min-height: 44px; align-content: center; }
  #viewport #toolDeck[data-layout='paired'] #plots .window-heading .window-close { width: 40px; height: 40px; }
  #viewport #toolDeck[data-layout='paired'] #plots #plotChoice { min-height: 40px; }
}
@media (max-width: 420px) { .scene-toolbar .scene-tool { padding: 9px 6px; gap: 4px; } }
/* Portrait phones and tablets: long forms get a tall sheet. */
@media (max-width: 1000px) and (min-height: 521px) {
  #viewport #toolDeck[data-layout='single'] > #sigPanel { max-height: min(64%, 600px); }
  #toolDeck[data-layout='paired'] { grid-template-rows: 142px minmax(0, 1fr); }
}
/* Phones: Settings is a half sheet by default; its expand button grows it up to the toolbar. */
.panel-expand { display: none; margin-left: auto; }
.panel-expand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.panel-expand[aria-pressed='true'] svg { transform: rotate(180deg); }
@media (max-width: 699px) and (min-height: 521px) {
  .panel-expand { display: inline-flex; }
  #viewport #toolDeck[data-layout='single'] > #settingsPanel[data-expanded='true'] { max-height: calc(100% - var(--mobile-tool-bottom, 138px) - 76px); }
  #toolDeck[data-layout='paired']:has(> #settingsPanel[data-expanded='true']:not([hidden])) { height: calc(100% - var(--mobile-tool-bottom, 138px) - 76px); }
}
/* Tablets: tools keep a readable width at the lower corners instead of stretching across. */
@media (min-width: 700px) and (max-width: 1000px) and (min-height: 521px) {
  #viewport #toolDeck[data-layout='single'] > .scene-window { right: auto; width: min(400px, calc(100% - 24px)); max-height: min(60%, 640px); }
  #viewport #toolDeck[data-layout='single'] > #plots { left: auto; right: 12px; width: min(440px, calc(100% - 24px)); grid-template-columns: minmax(0, 1fr); }
  #viewport #toolDeck[data-layout='single'] > #settingsPanel { max-height: min(70%, 760px); }
  #toolDeck[data-layout='paired'] { height: min(58%, 640px); grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: end; }
  #toolDeck[data-layout='paired'] > #plots { grid-column: 2; grid-row: 1; padding: 14px; }
  #toolDeck[data-layout='paired'] > .scene-window:not(#plots) { grid-column: 1; grid-row: 1; }
  #toolDeck[data-layout='paired'] #driveWindow > .window-heading { display: flex; }
  #toolDeck[data-layout='paired'] #plots .plots-key { display: flex; }
  #toolDeck[data-layout='paired'] #plots .plot-title { display: block; }
  #toolDeck[data-layout='paired'] #plots .plot canvas { height: 110px; }
  #toolDeck[data-layout='paired'] #plots > .window-heading { margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; }
}
/* Landscape phones: plots and one tool share a single right-hand column, full height. */
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  #viewport #toolDeck[data-layout='paired'] { left: auto; right: 12px; top: 12px; bottom: 12px; width: min(330px, 44%); height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 132px minmax(0, 1fr); gap: 8px; }
  #viewport #toolDeck[data-layout='paired'] > #plots { grid-column: 1; grid-row: 1; }
  #viewport #toolDeck[data-layout='paired'] > .scene-window:not(#plots) { grid-column: 1; grid-row: 2; }
  #viewport #toolDeck[data-layout='paired'] #plots .plot canvas { height: 50px; }
  #viewport #toolDeck[data-layout='paired'] #plots > .window-heading { padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; }
  #viewport #toolDeck[data-layout='paired'] .remote button { min-height: 38px; }
  #viewport #toolDeck[data-layout='single'] > .scene-window { bottom: auto; max-height: calc(100% - 24px); }
}
/* In the wide shelf, view toggles pair up and the signal steps tighten so both tools fit a laptop screen. */
#toolDeck[data-layout='desktop'] > .scene-window[data-wide='true'] .view-options-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sigPanel li { padding: 5px 7px; gap: 2px; }
#sigPanel .sig-foot { margin-top: 6px; }

/* ── Mobile clock bar and docked plots, 2026-11-15 ────────────────────── */
/* Play and Reset carry icons; below desktop width only the icons show. */
.transport .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.transport .btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnPlay .ico-play path { fill: currentColor; stroke-width: 1.5; }
#btnPlay[data-state='playing'] .ico-play, #btnPlay:not([data-state='playing']) .ico-pause { display: none; }
.label-short { display: none; }
@media (max-width: 1000px) {
  /* One row: Pause, Reset, time, then the push keys. Playback sits in the scene toolbar. */
  .transport { gap: 4px; padding: 5px; }
  .transport .btn { min-width: 44px; min-height: 44px; padding: 0 10px; }
  .transport .btn span { display: none; }
  .transport .btn.primary { min-width: 48px; }
  .transport .time { min-width: 52px; margin: 0 2px; }
  .transport .quick-push, body[data-theme='glass'] .transport .quick-push { position: static; transform: none; display: flex; width: auto; padding: 0 0 0 5px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .transport .quick-push-title { display: none; }
  .transport .quick-push-keys { grid-template-columns: repeat(4, minmax(38px, 44px)); }
  .scene-toolbar .label-long { display: none; }
  .scene-toolbar .label-short { display: inline; }
}
@media (max-width: 699px) and (min-height: 521px) {
  .transport { left: 12px; right: 12px; width: auto; max-width: none; transform: none; }
  .transport .time { flex: 1; }
  /* Plots dock under the toolbar so the robot and the push keys stay in view below them. */
  #viewport #toolDeck[data-layout='single'] > #plots { top: 70px; bottom: auto; height: 176px; max-height: 176px; padding: 8px 12px; }
  #viewport #toolDeck[data-layout='single'] > #plots > .window-heading { margin: -8px -12px 0; padding: 2px 10px; }
  #viewport #toolDeck[data-layout='single'] #plots .plot canvas { height: 96px; }
  /* A second tool opens as the bottom sheet, sized so it stops short of the plots. */
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] > .scene-window:not(#plots) { max-height: min(40%, calc(100% - var(--mobile-tool-bottom, 82px) - 262px)); }
  #viewport[data-mobile-charts='true'] #toolDeck[data-layout='single'] > #settingsPanel[data-expanded='true'] { max-height: calc(100% - var(--mobile-tool-bottom, 82px) - 262px); }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 1000px) {
  .transport { max-width: calc(100% - min(330px, 44%) - 36px); }
}
/* Phones: the clock bar is for play, reset and pushes; the time is in Playback options. */
@media (max-width: 699px), (max-height: 520px) and (max-width: 1000px) {
  .transport .time { display: none; }
}
/* Language picker: a globe plus the native select. On small screens it is a globe button like the
   others, with the select laid invisibly over it so tapping still opens the system picker. */
.lang-pick { position: relative; gap: 4px; padding: 0 0 0 11px; }
.lang-pick .lang { min-height: 34px; padding: 7px 11px 7px 4px; border: 0; background: transparent; color: inherit; font: inherit; }
.lang-pick:focus-within { outline: 2px solid #8cc0f5; outline-offset: 2px; }
.lang-pick .lang:focus-visible { outline: none; }
/* The themes style every select as a field (fill, border, inset shadow, blur); inside the globe button the
   select is plain text, so the button reads as one control. */
body .lang-pick .lang, body .lang-pick .lang:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 1000px) {
  .lang-pick { width: 44px; padding: 0; justify-content: center; }
  .lang-pick .lang { position: absolute; inset: 0; width: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
}
/* Guided tour. Desktop: heads the left shelf (top/width/height from syncToolLayout) with the
   tool the step opened stacked under it. Phones and tablets: a strip under the toolbar, so the
   step's tool keeps the bottom sheet and its highlighted control stays in view. */
#viewport > #tour { position: absolute; z-index: 12; top: var(--tool-top, 82px); bottom: auto; left: 22px; right: auto; width: var(--tool-width, 300px); max-width: calc(100% - 44px); max-height: var(--tool-height, 45%); margin: 0; padding: 16px; overflow: auto; transform: none; }
#viewport[data-tour-strip='true'] > #tour { top: calc(var(--tour-top, 70px) + env(safe-area-inset-top, 0px)); left: var(--tour-left, 12px); right: var(--tour-right, 12px); width: auto; max-width: none; max-height: calc(100% - var(--tour-top, 70px) - 12px); padding: 10px 12px; border-radius: 12px; }
#viewport[data-tour-strip='true'] > #tour h3 { margin: 0 0 2px; font-size: 15px; }
#viewport[data-tour-strip='true'] > #tour p { margin: 0; }

/* The step's real controls are open and highlighted, so the strip leaves out its shortcut buttons. */
#viewport[data-tour-strip='true'] > #tour .tour-acts { display: none; }
#viewport[data-tour-strip='true'] > #tour .tour-nav button { min-height: 40px; }
.tour .tour-more { display: none; }
/* Short screens only (small phones, phones on their side): two lines of text and a More link.
   Everywhere else the strip has room for the whole text. */
@media (max-width: 1000px) and (max-height: 700px) {
  #viewport[data-tour-strip='true'] > #tour[data-more='false'] p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #viewport[data-tour-strip='true'] > #tour .tour-more { display: inline-block; min-height: 32px; padding: 0; border: 0; background: none; color: #ffcf7a; text-decoration: underline; }
}
body.controls-hidden #tour, body.controls-hidden .tour-invite { display: none !important; }
/* First-visit invite: one line under the toolbar until the user starts or dismisses the tour. */
.tour-invite { position: absolute; z-index: 11; top: var(--invite-top, 80px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 6px 6px 14px; border-radius: 999px; background: #1a3047; color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(19, 33, 46, .28); }
.tour-invite[hidden] { display: none; }
.tour-invite span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-invite button { flex: none; min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; }
.tour-invite .go { background: #ffa200; color: #2b1c00; }
.tour-invite .go:hover { background: #ffb733; }
.tour-invite .quiet { min-width: 34px; padding: 4px 10px; background: none; color: #b9c6d2; font-size: 17px; font-weight: 400; }
@media (max-width: 1000px) { .tour-invite button { min-height: 44px; } }
/* Small screens on the tour: only the tour card, the controls it outlines and the robot. The header,
   scene toolbar, notices and clock bar go (End tour is on the card), except the part of the clock bar
   a step outlines (the push keys). */
body[data-tour-strip='true'] .top,
body[data-tour-strip='true'] .scene-toolbar,
body[data-tour-strip='true'] .flags,
body[data-tour-strip='true'] .transport:not(:has(.tour-focus)),
body[data-tour-strip='true'] .transport > :not(.tour-focus):not(:has(.tour-focus)),
body[data-tour-strip='true'] [data-tour-off] { display: none !important; }
body[data-tour-strip='true'] .transport { width: max-content; }
/* With the toolbar hidden for the tour, plots docked under it move up to the top edge. */
body[data-tour-strip='true'] #viewport #toolDeck[data-layout='single'] > #plots { top: calc(8px + env(safe-area-inset-top, 0px)); }