/* Taktsmith — workbench UI in HORIZON (fleet standard since 26.09.2026, Design_System DESIGN.md Register 8).
   Bright sky, navy type, cobalt→turquoise gradient, white cards with soft blue shadows, pills; follows the OS dark mode.
   Only the chrome changed: the 3D viewport, the camera PiPs and the simulation colours (arm A orange, arm B teal,
   status green/amber/red) keep their meaning. The old variable names are kept so every view re-themes through them. */
@font-face { font-family: 'Archivo'; src: url(fonts/Archivo-400.woff2?v=81d0ae62c7) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/Archivo-500.woff2?v=81d0ae62c7) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/Archivo-700.woff2?v=81d0ae62c7) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/InstrumentSans-400.woff2?v=81d0ae62c7) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/InstrumentSans-500.woff2?v=81d0ae62c7) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/InstrumentSans-700.woff2?v=81d0ae62c7) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/IBMPlexMono-400.woff2?v=81d0ae62c7) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/IBMPlexMono-500.woff2?v=81d0ae62c7) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Horizon (light) — old names, new values: --ink = page, --panel = card, --cream = strong text */
  --ink: #F5F9FE;            /* page sky */
  --panel: #FFFFFF;          /* cards, sidebar panels, dock */
  --panel-2: #F3F8FE;        /* insets, table heads, inputs at rest */
  --tint: #EAF3FC;           /* hover, segmented-control track */
  --seam: #D2DEEE;           /* borders of controls */
  --hair: #DCE7F4;           /* hairlines */
  --cream: #0F2552;          /* navy: headlines, values, strong text */
  --text-2: #33466B;         /* ink: body text */
  --muted: #66779A;
  --agate: #8A98B5;
  --accent: #1F6FEB;         /* cobalt: links, focus, active */
  --accent-deep: #1E4FC4;
  --accent-ink: #FFFFFF;
  --grad: linear-gradient(90deg, #2EE6D0 0%, #22C3E8 45%, #1F6FEB 100%);
  --grad-button: linear-gradient(90deg, #1FB5E3, #1F6FEB);
  --ok: #059E86;   --ok-bg: #E3F8F3;
  --warn: #B26A00; --warn-bg: #FFF4DF;
  --bad: #D9304F;  --bad-bg: #FDE8EC;
  --info: #1A7FD0; --info-bg: #E6F2FD;
  --shadow: 0 1px 2px rgba(15, 37, 82, .06), 0 10px 30px rgba(31, 79, 196, .10);
  --shadow-lift: 0 2px 4px rgba(15, 37, 82, .06), 0 18px 40px rgba(31, 79, 196, .16);
  --glass: rgba(255, 255, 255, .9);
  --viewport-bg: #E3ECF7;
  /* simulation colours: unchanged, they encode meaning in the 3D scenes and every chart */
  --arm-a: #e8702a;
  --arm-b: #4fa3a5;
  /* chart palette: the canvas charts drawn with the old dark literals are mapped onto these (src/ui/canvasTheme.js?v=81d0ae62c7) */
  --ch-bg: #FFFFFF; --ch-panel: #F7FAFE; --ch-lane: #EEF4FB; --ch-grid: #E3EBF6; --ch-seam: #D2DEEE;
  --ch-wait: #D5DEEB; --ch-track: #BCC9DC; --ch-hatch: #97A6BF; --ch-agate: #71819F; --ch-muted: #5B6B8C;
  --ch-text2: #33466B; --ch-text: #0F2552; --ch-ok: #0B9E78; --ch-warn: #D08A00; --ch-bad: #D9304F; --ch-info: #2F8FDE;
  --ch-okt: #0B7F63; --ch-badt: #C22745; --ch-infot: #1A6FB8;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --topbar-h: 60px;
  --footer-h: 40px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #0B1630; --panel: #12213F; --panel-2: #152748; --tint: #172C52; --seam: #2A3E69; --hair: #1F3158;
    --cream: #EAF2FF; --text-2: #C9D6EE; --muted: #93A3C4; --agate: #7384A6;
    --accent: #5B9BFF; --accent-deep: #8AB6FF; --accent-ink: #FFFFFF;
    --ok: #3FD9BE; --ok-bg: #0F3A3A; --warn: #FFC266; --warn-bg: #3A2C12; --bad: #FF6B86; --bad-bg: #45172A; --info: #7FB2FF; --info-bg: #172C52;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .45);
    --glass: rgba(18, 33, 63, .9);
    --viewport-bg: #0E1A33;
    --ch-bg: #12213F; --ch-panel: #152748; --ch-lane: #1A2E54; --ch-grid: #1F3158; --ch-seam: #2A3E69;
    --ch-wait: #2C3D60; --ch-track: #3A4F78; --ch-hatch: #5E7096; --ch-agate: #7384A6; --ch-muted: #93A3C4;
    --ch-text2: #C9D6EE; --ch-text: #EAF2FF; --ch-ok: #3FD9BE; --ch-warn: #FFC266; --ch-bad: #FF6B86; --ch-info: #7FB2FF;
    --ch-okt: #3FD9BE; --ch-badt: #FF8FA4; --ch-infot: #9CC4FF;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink); background-image: linear-gradient(180deg, var(--tint) 0, var(--ink) 320px);
  color: var(--text-2); font-family: var(--sans); font-size: 14px; line-height: 1.5;
  display: grid; grid-template-rows: var(--topbar-h) 1fr var(--footer-h); min-height: 100dvh; overflow-x: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--cream); letter-spacing: -0.015em; }
b, strong { color: var(--cream); }
button, input, select, textarea { font: inherit; color: inherit; }
.u-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.u-tnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.grad-text { background: linear-gradient(90deg, #1E4FC4, #1F6FEB 55%, #22A9E8); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { .grad-text { background-image: linear-gradient(90deg, #5B9BFF, #4FD6F2 60%, #2EE6D0); } }

/* ── masthead: mark + caps wordmark, pill navigation ── */
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 44px; }
.brand-mark { width: 30px; height: 30px; display: block; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.brand-sub { margin-left: 2px; }
.tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 0 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .short { display: none; }
.tabs a, .tabs .more > summary { text-decoration: none; padding: 0 14px; min-height: 40px; display: flex; align-items: center; gap: 6px; color: var(--text-2); border-radius: 999px;
  white-space: nowrap; font-weight: 500; font-size: 14px; transition: background 150ms var(--ease), color 150ms var(--ease); }
.tabs a:hover, .tabs .more > summary:hover, .tabs .more[open] > summary { background: var(--tint); color: var(--cream); }
.tabs a[aria-current="page"], .tabs .more.is-current > summary { color: #fff; background: var(--grad-button); box-shadow: 0 6px 14px rgba(31, 111, 235, .25); }
.tabs .more { position: static; }
.tabs .more > summary { list-style: none; cursor: pointer; }
.tabs .more > summary::-webkit-details-marker { display: none; }
.tabs .more > summary::after { content: '▾'; font-size: 11px; }
.more-menu { position: fixed; top: calc(var(--topbar-h) - 4px); z-index: 30; min-width: 230px; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-lift);
  border: 1px solid var(--hair); padding: 8px; max-height: calc(100dvh - var(--topbar-h) - 16px); overflow-y: auto; }
.more-menu .menu-group { margin: 10px 10px 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.more-menu .menu-group:first-child { margin-top: 4px; }
.tabs .more-menu a { min-height: 40px; padding: 0 12px; border-radius: 10px; display: flex; color: var(--text-2); background: none; box-shadow: none; }
.tabs .more-menu a:hover { background: var(--tint); color: var(--cream); }
.tabs .more-menu a[aria-current="page"] { color: var(--accent); background: var(--tint); font-weight: 700; }
.more-menu .short { display: none !important; }
.more-menu .long { display: inline !important; }

.quality { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.quality select { min-height: 36px; font-size: 13px; border-radius: 999px; padding: 0 30px 0 14px; }
.view { min-height: 0; min-width: 0; outline: none; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 12px; min-width: 0; }
.footer .u-label { letter-spacing: .12em; font-size: 10.5px; }
.attribution { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.attribution::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; }
.attribution strong { color: var(--cream); font-weight: 700; }
.attribution:hover, .attribution:hover strong { color: var(--accent); }

/* ── workbench layout (shared by 3D views): viewport + sidebar of white cards + dock ── */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 356px; grid-template-rows: minmax(0, 1fr) auto; height: calc(100dvh - var(--topbar-h) - var(--footer-h)); min-height: 520px; }
.workbench > .viewport { grid-column: 1; grid-row: 1; }
.workbench > .sidebar { grid-column: 2; grid-row: 1 / span 2; }
.workbench > .dock { grid-column: 1; grid-row: 2; }
.viewport { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--viewport-bg); }
.stage-canvas { display: block; touch-action: none; }
.sidebar { border-left: 1px solid var(--hair); overflow-y: auto; background: var(--ink); min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.dock { border-top: 1px solid var(--hair); background: var(--panel); min-width: 0; }

.panel { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.sidebar > .panel, .sidebar > details.panel, .sidebar > section.panel { background: var(--panel); border: 0; border-radius: 16px; box-shadow: var(--shadow); flex: none; }
.panel > h2, .panel > summary { margin: 0 0 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.panel > summary { cursor: pointer; list-style: none; margin: 0; display: flex; justify-content: space-between; min-height: 32px; align-items: center; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: '+'; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent); font-size: 14px; letter-spacing: 0; }
.panel[open] > summary { margin-bottom: 10px; }
.panel[open] > summary::after { content: '−'; }
.panel p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { appearance: none; border: 0; background: var(--panel); color: var(--cream); box-shadow: inset 0 0 0 1px var(--seam); min-height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; text-decoration: none;
  transition: box-shadow 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease); }
.btn:hover { color: var(--cream); box-shadow: inset 0 0 0 1px var(--accent); }
.btn:focus-visible, .tabs a:focus-visible, .tabs summary:focus-visible, .seg button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.btn--primary { background: var(--grad-button); color: #fff; box-shadow: 0 6px 16px rgba(31, 111, 235, .25); }
.btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31, 111, 235, .32); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.seg { display: inline-flex; background: var(--tint); border-radius: 999px; padding: 3px; gap: 2px; overflow: hidden; }
.seg button { appearance: none; background: transparent; border: 0; border-radius: 999px; min-height: 32px; padding: 0 12px; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.seg button:hover { color: var(--cream); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--cream); box-shadow: 0 1px 2px rgba(15, 37, 82, .08), 0 4px 12px rgba(31, 79, 196, .12); }

.field { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin: 0 0 10px; }
.field > span:first-child { font-size: 12.5px; color: var(--muted); }
.field > output, .field > .val { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cream); }
.field > input[type=range], .field > select { grid-column: 1 / -1; width: 100%; }
input[type=range] { accent-color: var(--accent); height: 24px; }
select, input[type=number], input[type=text], input[type=search], textarea { background: var(--panel); color: var(--cream); border: 1px solid var(--seam); border-radius: 10px; min-height: 36px; padding: 0 10px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
textarea { padding: 8px 10px; }
select:hover, input[type=number]:hover, input[type=text]:hover, textarea:hover { border-color: var(--agate); }
select:focus, input[type=number]:focus, input[type=text]:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

.kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kv th { text-align: left; font-weight: 400; color: var(--muted); padding: 4px 0; }
.kv td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; padding: 4px 0; color: var(--cream); }
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--hair); }

/* status pills: tint of the status colour; teal = fine, amber = a person must act, red = stop */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; color: var(--muted); background: color-mix(in srgb, currentColor 13%, transparent); }
.chip--ok { color: var(--ok); } .chip--warn { color: var(--warn); } .chip--blocked { color: var(--bad); } .chip--later { color: var(--muted); } .chip--info { color: var(--info); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

.log { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; max-height: 220px; overflow-y: auto; margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.log li { padding: 3px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 52px 18px 1fr; gap: 6px; }
.log .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.log .a-A { color: var(--arm-a); } .log .a-B { color: var(--arm-b); } .log .a-C { color: var(--info); }
.log .lvl-warn { color: var(--warn); } .log .lvl-bad { color: var(--bad); }

/* HUD overlays on top of the 3D viewport: glass cards (white by day, navy at night) */
.hud { position: absolute; pointer-events: none; font-family: var(--mono); font-size: 11px; color: var(--cream); }
.hud-tl { top: 10px; left: 10px; display: grid; gap: 6px; }
.hud-card { background: var(--glass); border: 0; border-radius: 10px; padding: 6px 10px; box-shadow: 0 1px 2px rgba(15, 37, 82, .08), 0 6px 18px rgba(15, 37, 82, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud-card b { font-weight: 500; }
.hud-card .chip { background: color-mix(in srgb, currentColor 14%, var(--panel)); }
.pip-frame { position: absolute; border: 2px solid var(--accent); pointer-events: none; }
.pip-frame .pip-label { position: absolute; top: 0; left: 0; background: var(--grad-button); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-bottom-right-radius: 8px; }
.pip-frame .pip-cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; }
.pip-frame .pip-cross::before, .pip-frame .pip-cross::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.8); }
.pip-frame .pip-cross::before { left: 12px; top: -8px; width: 1px; height: 40px; }
.pip-frame .pip-cross::after { top: 12px; left: -8px; height: 1px; width: 40px; }
.pip-frame .pip-data { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(11, 22, 48, 0.82); color: #EAF2FF; padding: 3px 6px; font-size: 10px; display: flex; justify-content: space-between; gap: 6px; }
.transport { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.transport .btn:not(.btn--primary), .transport .seg { background: var(--glass); box-shadow: 0 1px 2px rgba(15, 37, 82, .08), 0 6px 18px rgba(15, 37, 82, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.transport .btn:not(.btn--primary):hover { box-shadow: inset 0 0 0 1px var(--accent), 0 6px 18px rgba(15, 37, 82, .16); }
.transport .seg button { color: var(--text-2); }
.transport .seg button[aria-pressed="true"] { color: #fff; background: var(--grad-button); box-shadow: none; }

/* shared camera controls in scene transports (Tour + presets) */
.cw-tsep { width: 1px; align-self: stretch; background: var(--seam); margin: 6px 2px; }
.cw-tour[aria-pressed="true"] { color: var(--accent) !important; box-shadow: inset 0 0 0 2px var(--accent) !important; }
@media (max-width: 640px) { .cw-tsep { display: none; } }

/* Doc/reading views */
.doc { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
.doc h1 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 12px; line-height: 1.08; }
.doc h2 { font-size: 22px; margin: 40px 0 10px; padding-top: 16px; border-top: 1px solid var(--hair); }
.doc h3 { font-size: 15.5px; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--text-2); max-width: 72ch; }
.doc .lede { font-size: 16.5px; color: var(--muted); }
.doc code { font-family: var(--mono); font-size: 12.5px; background: var(--tint); color: var(--cream); border: 0; padding: 1px 6px; border-radius: 6px; }
.doc pre { font-family: var(--mono); font-size: 12px; background: var(--panel); border: 0; box-shadow: var(--shadow); padding: 14px 16px; overflow-x: auto; border-radius: 14px; }
.tablewrap { overflow-x: auto; border: 0; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); margin: 12px 0; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 520px; }
.tablewrap th, .tablewrap td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tablewrap tr:last-child td { border-bottom: 0; }
.tablewrap th { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--panel-2); }
/* a table inside a card or sidebar panel is flat: hairline instead of a second shadow */
.card .tablewrap, .panel .tablewrap { box-shadow: none; border: 1px solid var(--hair); border-radius: 12px; }
.diagram { width: 100%; height: auto; display: block; margin: 14px 0; border: 0; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.card { border: 0; border-radius: 16px; padding: 16px 18px; background: var(--panel); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card p { font-size: 13px; }

/* ── responsive ─────────────────────────── */
@media (max-width: 1100px) {
  .brand-sub, .quality .u-label { display: none; }
}
@media (max-width: 1024px) {
  .workbench { grid-template-columns: minmax(0, 1fr) 312px; }
}
@media (max-width: 860px) {
  .workbench { display: block; height: auto; min-height: 0; }
  .workbench > .viewport { height: min(62dvh, 560px); min-height: 340px; }
  .sidebar { border-left: 0; border-top: 1px solid var(--hair); overflow: visible; }
  .brand-sub { display: none; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 54px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .brand-name { display: none; }
  .tabs a, .tabs .more > summary { padding: 0 11px; font-size: 13px; }
  .tabs .long { display: none; }
  .tabs .short { display: inline; }
  .btn { min-height: 44px; }
  .seg button { min-height: 40px; }
  .footer { padding: 0 10px; font-size: 11px; }
  .footer .u-label { display: none; }
  .quality .u-label { display: none; }
  .quality select { min-height: 40px; padding: 0 22px 0 10px; }
  .sidebar { padding: 10px; gap: 10px; }
  .workbench > .viewport { height: 56dvh; min-height: 320px; }
  /* scene transports: one swipeable row instead of 2–3 wrapped rows covering the 3D view */
  .transport { right: 0; left: 0; bottom: 8px; padding: 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .transport::-webkit-scrollbar { display: none; }
  .transport > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* print: cards are drawn with shadows on screen; on paper they get a plain rule */
@media print {
  *, *::before, *::after { box-shadow: none !important; }
  .sidebar > .panel, .card, .tablewrap { border: 1px solid #bbb !important; }
}