/* =============================================================================
   CDS v9 shell: the rail (modes), the top bar, the pages (Connect, Settings, Admin) and
   where each mode puts its panels. Colours come from the theme's tokens (aries-theme.css).
   ============================================================================= */

:root {
  --rail-w: 84px;
  --sidebar-width: var(--rail-w);   /* (older rules measure from it: session windows) */
  --header-height: 56px;
}

.app-shell { display: block; min-height: 100vh; }

/* --- Rail --------------------------------------------------------------------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: calc(var(--z-sticky) + 10);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  background: var(--color-sidebar-bg, var(--color-bg-secondary)); border-right: 1px solid var(--color-border);
}
.rail-logo { display: flex; flex-direction: column; align-items: center; margin: 2px 0 12px; line-height: 1; }
.rail-logo span { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 22px; }
.rail-logo small { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-muted); margin-top: 4px; }
.rail-grow { flex: 1; min-height: 8px; }
.rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin: 0 8px; padding: 10px 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--color-sidebar-text, var(--color-text-secondary));
}
.rail-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-item span { font-family: var(--font-condensed); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rail-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.rail-item.active { background: var(--color-accent-subtle); color: var(--color-sidebar-active-text, #fff); }
[data-theme="light"] .rail-item.active { background: var(--color-sidebar-active-bg); }
.rail-item.active::before { content: ''; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
.rail-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.rail-dot { position: absolute; top: 7px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-sidebar-bg, var(--color-bg-secondary)); }
.rail-count { position: absolute; top: 4px; right: 10px; min-width: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px !important; letter-spacing: 0 !important; background: var(--color-accent); color: #fff; }
.rail-item.being-watched { box-shadow: inset 0 0 0 1px var(--color-data); animation: watched-glow 3s ease-in-out infinite; }
.rail-item.being-operated { box-shadow: inset 0 0 0 1px var(--color-warning); }
.rail-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff; font-family: var(--font-sans) !important; font-size: 12px !important; letter-spacing: 0 !important; }
.rail-user { position: relative; display: flex; flex-direction: column; }   /* its button as wide as the others, so it centres like them */
.rail-user-menu {
  /* fixed, not inside the rail: the rail scrolls (9.7.1) and would clip it out of sight (9.8.2) */
  position: fixed; left: calc(var(--rail-w) + 6px); bottom: 8px; width: 230px; z-index: calc(var(--z-sticky) + 30); padding: 6px;
  display: flex; flex-direction: column; background: var(--color-bg-elevated); border: 1px solid var(--color-border-light);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.rail-user-menu.hidden { display: none; }
.rail-user-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.rail-user-who span { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: capitalize; }
.rail-user-who span.admin { color: var(--color-accent); }
.rail-user-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--color-text-primary); cursor: pointer; font-size: var(--text-sm); }
.rail-user-menu button:hover { background: var(--color-bg-hover); }
.rail-user-credit { padding: 8px 10px 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.rail-user-credit a { color: var(--color-text-secondary); }

/* --- Main and top bar ------------------------------------------------------------ */
.main-content { margin-left: var(--rail-w) !important; min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.top-bar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--header-height); flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px;
  background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none;
  padding-right: 64px;   /* the shared bug-report button sits at the right end */
}
.top-bar::-webkit-scrollbar { display: none; }
.tb-logo { display: none; }   /* (only while the rail is along the bottom, below) */
.tb-adapters { display: flex; gap: 8px; flex-shrink: 0; }
.tb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; flex-shrink: 0; white-space: nowrap;
  border-radius: 17px; border: 1px solid var(--color-border); background: var(--color-bg-tertiary);
  color: var(--color-text-secondary); font-size: 12px; cursor: pointer; font-family: var(--font-sans);
}
.tb-chip > * { pointer-events: none; }   /* a click on a chip's words is a click on the chip */
.tb-chip:hover { border-color: var(--color-border-light); color: var(--color-text-primary); }
.tb-chip b { color: var(--color-text-primary); font-weight: 600; }
.tb-chip .mono { font-family: var(--font-mono); font-size: 11px; }
.tb-rate { color: var(--color-data); }
.tb-kinds { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tb-tag { font-family: var(--font-condensed); font-weight: 700; font-size: 10px; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: var(--color-bg-active); color: var(--color-data); }
.tb-led { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); flex-shrink: 0; }
.tb-led.warn { background: var(--color-warning); box-shadow: 0 0 6px var(--color-warning); }
.tb-led.off { background: var(--color-text-muted); box-shadow: none; }
#tb-readonly.on { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-bg); }
.tb-watch { border-color: rgba(245, 158, 11, .5); color: var(--color-warning); }
.tb-watch.operated { background: var(--color-warning-bg); }
.tb-link { border-color: color-mix(in srgb, var(--color-data) 45%, transparent); }
.tb-link.pending { border-style: dashed; }
.tb-link-icon { color: var(--color-data); }
.tb-stop {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px;
  border: 0; border-radius: 20px; background: var(--color-accent); color: #fff; cursor: pointer;
  font-family: var(--font-condensed); font-weight: 700; letter-spacing: .08em; font-size: 14px;
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.tb-stop:hover { background: var(--color-accent-hover); }
.tb-stop:active { transform: translateY(1px); }
.tb-stop i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; }
/* Session windows being watched: tabs in the top bar */
.top-bar .session-tabs { flex-direction: row; margin: 0; gap: 6px; flex-shrink: 0; }
.top-bar .session-tab { border: 1px solid var(--color-border); border-radius: 17px; padding: 0 4px; height: 32px; }
.top-bar .session-tab .st-open span { display: inline; }
.session-window { left: calc(var(--rail-w) + 12px); top: calc(var(--header-height) + 8px); }

#session-banner, #watch-banner { margin: var(--panel-gap) var(--panel-gap) 0; }

/* --- Content: a page, or the panels ------------------------------------------------ */
.content-area { display: block !important; flex: 1; padding: var(--panel-gap); min-width: 0; }
#panel-container.hidden, .page-area.hidden { display: none; }
.dash-panel.mode-hidden { display: none !important; }

.dash-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.dash-toolbar.hidden { display: none; }
.dash-toolbar-title { font-family: var(--font-condensed); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-right: auto; }
.dash-add { position: relative; }
.dash-add .panel-add-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 280px; max-height: 70vh; overflow: auto;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.dash-add .panel-add-menu.hidden { display: none; }

/* A mode places its panels (panel-system.js sets --mode-cols/--mode-rows and each panel's --col/--row) */
@media (min-width: 1100px) {
  .panel-grid.fixed { grid-template-columns: var(--mode-cols) !important; grid-template-rows: var(--mode-rows, auto); grid-auto-flow: row; }
  .panel-grid.fixed > .dash-panel { grid-column: var(--col, auto) !important; grid-row: var(--row, auto); }
  /* Drive and Diagnose fill the screen under the top bar */
  .panel-grid.fill { height: calc(100vh - var(--header-height) - 2 * var(--panel-gap)); min-height: 560px; }
  .panel-grid.fill > .dash-panel { min-height: 0 !important; height: auto !important; }
  .panel-grid.fill > .dash-panel > .dash-panel-body { min-height: 0; }
  .panel-grid.fill .video-container { height: 100%; min-height: 0; }
  /* The line between the two columns, to drag (panel-system.js paintSplit, 9.26.3) */
  .panel-grid.fixed > .mode-split { display: block; grid-column: 2; grid-row: 1 / -1; justify-self: start; align-self: stretch; z-index: 5;
    width: calc(var(--panel-gap, 16px) + 6px); margin-left: calc(-1 * var(--panel-gap, 16px) - 3px); cursor: col-resize; touch-action: none; position: relative; }
  .panel-grid.fixed > .mode-split::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 48px; transform: translate(-50%, -50%);
    border-radius: 2px; background: var(--color-border-light); opacity: .55; transition: opacity .15s, background .15s; }
  .panel-grid.fixed > .mode-split:hover::after, .panel-grid.splitting > .mode-split::after { opacity: 1; background: var(--color-accent, #3b82f6); height: 96px; }
  .panel-grid.splitting { cursor: col-resize; user-select: none; }
  .panel-grid.splitting > .dash-panel { pointer-events: none; }
  /* The line between Drive's video and Telemetry, to drag (panel-system.js paintRowSplit, 9.26.4) */
  .panel-grid.fixed > .mode-rowsplit { display: block; grid-column: var(--col); grid-row: var(--row); align-self: start; justify-self: stretch; z-index: 5;
    height: calc(var(--panel-gap, 16px) + 6px); margin-top: calc(-1 * var(--panel-gap, 16px) - 3px); cursor: row-resize; touch-action: none; position: relative; }
  .panel-grid.fixed > .mode-rowsplit::after { content: ''; position: absolute; top: 50%; left: 50%; height: 4px; width: 48px; transform: translate(-50%, -50%);
    border-radius: 2px; background: var(--color-border-light); opacity: .55; transition: opacity .15s, background .15s; }
  .panel-grid.fixed > .mode-rowsplit:hover::after, .panel-grid.rowsplitting > .mode-rowsplit::after { opacity: 1; background: var(--color-accent, #3b82f6); width: 96px; }
  .panel-grid.rowsplitting { cursor: row-resize; user-select: none; }
  .panel-grid.rowsplitting > .dash-panel { pointer-events: none; }
}
.mode-split, .mode-rowsplit { display: none; }
.panel-grid.fixed { grid-template-columns: 1fr; }
.panel-grid.fixed > .dash-panel { grid-column: 1 / -1; }

/* Controllers drop-down (the 🎮 chip) */
.controllers-drop {
  position: fixed; z-index: calc(var(--z-sticky) + 20); top: calc(var(--header-height) + 6px); left: calc(var(--rail-w) + 12px);
  width: min(760px, calc(100vw - var(--rail-w) - 24px)); max-height: calc(100vh - var(--header-height) - 24px); overflow: auto;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.controllers-drop-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; }
.controllers-drop-body { padding: 14px; }

/* --- Pages -------------------------------------------------------------------------- */
.page-area { max-width: 1400px; }
.page-head { margin: 4px 0 18px; }
.page-head h1 { font-family: var(--font-display); font-size: 30px; margin: 6px 0 4px; color: var(--color-text-primary); text-wrap: balance; }
.page-head p { color: var(--color-text-secondary); max-width: 70ch; margin: 0; }
.page-kicker { font-family: var(--font-condensed); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.page-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--color-border-light); border-radius: 7px; overflow: hidden; }
.seg button { padding: 6px 11px; font-size: 12px; border: 0; background: none; color: var(--color-text-secondary); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-border); }
.seg button.on { background: var(--color-bg-active); color: var(--color-text-primary); }
.mono { font-family: var(--font-mono); }

.connect-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.connect-card { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.connect-card strong { font-size: 15px; color: var(--color-text-primary); }
.connect-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.connect-card p.text-muted { color: var(--color-text-muted); }
.connect-card .btn { align-self: flex-start; margin-top: 6px; }
/* Program boards (js/ui/board-programmer.js) */
.pgb-top { margin: 0 0 10px; font-size: var(--text-sm); }
.pgb-through { margin: 0 0 8px; font-size: var(--text-sm); }
.pgb-through label { font-weight: 600; }
.pgb-step { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.pgb-step p { margin: 6px 0; font-size: var(--text-sm); }
.pgb-h { font-weight: 600; margin-bottom: 6px; color: var(--color-text-primary); }
.pgb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.pgb-row select { flex: 1 1 220px; min-width: 0; }
.pgb-note { font-size: var(--text-xs) !important; }
.pgb-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.pgb-bar { height: 8px; border-radius: 4px; background: var(--color-bg-tertiary); overflow: hidden; margin: 8px 0 4px; }
.pgb-bar > div { height: 100%; background: var(--color-accent); transition: width .3s; }
.pgb-boards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pgb-board { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 8px; font-size: var(--text-sm); }
.pgb-board .text-muted { font-size: var(--text-xs); }
.pgb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pgb-ask { font-weight: 600; }
.pgb-good { color: var(--color-success); }
.pgb-bad { color: var(--color-danger, #ef4444); }
.pgb-overlay label.btn.disabled { opacity: .5; pointer-events: none; }
.connect-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0; }
.connect-ro { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--color-text-secondary); }
.connect-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.connect-side { display: flex; flex-direction: column; gap: 12px; }
.connect-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.connect-step { display: flex; gap: 12px; align-items: flex-start; }
.connect-step-n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-border-light); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.connect-step.done .connect-step-n { border-color: var(--color-success); color: var(--color-success); }
.connect-step.now .connect-step-n { border-color: var(--color-data); color: var(--color-data); }
.connect-step strong { color: var(--color-text-primary); }
.connect-hr { border: 0; border-top: 1px solid var(--color-border); margin: 6px 0; width: 100%; }

.settings-grid { columns: 3 340px; column-gap: 12px; margin-top: 12px; }   /* cards packed in columns: no gap beside a tall one */
.settings-grid > .page-card { break-inside: avoid; margin-bottom: 12px; }
.settings-more summary { cursor: pointer; font-size: var(--text-xs); color: var(--color-text-secondary); }
.settings-more[open] summary { margin-bottom: 6px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-primary); }
.settings-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); }
.page-card p { margin: 0; }

/* Sessions panel (Share) */
.sessions-share { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-tertiary); margin-bottom: 12px; }
.sessions-share-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sessions-label { font-family: var(--font-condensed); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }

/* --- Narrow screens: the rail becomes a bar along the bottom ---------------------- */
@media (max-width: 900px) {
  .connect-grid { grid-template-columns: 1fr; }
}

/* Pad view: the Basic Panel's controller drawn as its gamepad (the Basic Panel has the profile) */
.bp-pad .vc-embedded .vc-top-bar, .bp-pad .vc-embedded .vc-collapse-top { display: none; }
.bp-top-bar .seg button { padding: 4px 10px; }

/* Diagnose: the feed's Recordings menu */
.feed-rec-menu { position: fixed; z-index: calc(var(--z-sticky) + 20); width: 320px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.feed-rec-head { font-family: var(--font-condensed); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); padding: 6px 8px; }
.feed-rec-item { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border: 0; border-radius: 6px; background: none; color: var(--color-text-primary); cursor: pointer; font-size: var(--text-sm); text-align: left; }
.feed-rec-item:hover { background: var(--color-bg-hover); }
.feed-rec-count { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.feed-rec-session { border-top: 1px solid var(--color-border); border-radius: 0 0 6px 6px; margin-top: 4px; }
.feed-rec-empty { margin: 0; padding: 4px 8px 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 1099px) {
  /* Drive stacked: the camera a good size, the controls right under it */
  .panel-grid.fixed[data-mode="drive"] > [data-panel-id="video"] { height: 46vh; min-height: 260px !important; }
  .panel-grid.fixed[data-mode="drive"] > [data-panel-id="video"] .video-container { height: 100%; min-height: 0; }
}
@media (pointer: coarse) {
  .tb-stop { height: 48px; padding: 0 22px; font-size: 16px; }
  .tb-chip { height: 40px; }
  .rail-item { min-height: 48px; }
  .bp-container .bp-dir-btn, .bp-container .bp-tap, .bp-container .btn, .bp-container .bp-dir-btn { min-height: 52px; font-size: 15px; }
  .bp-container input[type="range"] { height: 36px; }
  .seg button { padding: 10px 14px; }
}

/* Diagnose: the Frame panel (frame-inspector.js), and the feed rows it follows */
.can-feed-row[data-id] { cursor: pointer; }
.can-feed-row.sel { background: var(--color-accent-subtle); box-shadow: inset 3px 0 0 var(--color-accent); }
.fi-head { display: flex; align-items: center; gap: 6px; }
.fi-id { font-size: 18px; color: var(--color-text-primary); margin-right: auto; }
.fi-desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 4px 0 10px; }
.fi-desc b { color: var(--color-text-primary); font-weight: 600; }
.fi-bytes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.fi-byte { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 6px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-light); transition: background .4s, border-color .4s; }
.fi-byte .mono { font-size: 16px; color: var(--color-text-primary); }
.fi-byte small { font-family: var(--font-condensed); font-size: 10px; letter-spacing: .08em; color: var(--color-text-muted); }
.fi-byte.lit { background: var(--color-info-bg); border-color: var(--color-data); }
.fi-note { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 8px 0 6px; }
.fi-chart { width: 100%; height: 72px; display: block; border-radius: 6px; }
.fi-chart-bg { fill: var(--color-bg-tertiary); }
.fi-grid { stroke: var(--color-border); stroke-width: 1; }
.fi-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 11px; color: var(--color-text-secondary); font-family: var(--font-mono); }
.fi-legend i { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 4px; }
.fi-legend .fi-axis { margin-left: auto; color: var(--color-text-muted); }
.recent-setups td { padding: 6px 4px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); vertical-align: middle; }
.recent-setups tr:last-child td { border-bottom: 0; }
.recent-setups td:last-child { text-align: right; }

/* --- Permissions (9.9): what each opens (app.js PAGE_PERM; body.perm-*) ------------------ */
body:not(.perm-operator) .rail-item[data-page="inspect"],
body:not(.perm-technician) .rail-item[data-page="drive"], body:not(.perm-technician) .rail-item[data-page="diagnose"],
body:not(.perm-technician) .rail-item[data-page="burnin"], body:not(.perm-technician) .rail-item[data-page="dashboard"],
body:not(.perm-technician) #gamepad-status-bar, body:not(.perm-technician) #settings-controllers,
body:not(.perm-advanced) .cs-add-can, body:not(.perm-pc5000) .rail-item[data-page="pc5000"] { display: none !important; }

/* --- Inspect (9.3) ------------------------------------------------------------------------ */
.insp-host { display: flex; flex-direction: column; gap: 8px; padding: 10px !important; overflow: hidden !important; }
.insp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; min-width: 0; }
.insp-bar > .btn { flex-shrink: 0; white-space: nowrap; }
.insp-bar .insp-cam { min-width: 90px; flex-shrink: 1; }
@media (max-width: 760px) { .insp-bar { flex-wrap: wrap; } }
.insp-bar .form-input { width: auto; max-width: 220px; padding: 4px 8px; font-size: 12px; }
.insp-sep { width: 1px; height: 24px; background: var(--color-border); }
.insp-rec-state { font-size: 12px; color: var(--color-error); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-rec-state.paused { color: var(--color-warning); }
.insp-bar .hidden { display: none; }
.insp-stage { position: relative; flex: 1; min-height: 220px; background: #000; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* the picture keeps its own shape (a phone's camera upright is taller than wide: 9.8) */
.insp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.insp-video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
/* (9.6: ＋ Observation is in the Inspection panel, bottom right: .insp-add-row) */
.insp-add kbd, .insp-save kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin-left: 4px; }
.insp-foot { flex-shrink: 0; }
.insp-foot .insp-fmt { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent, #4ea1ff); cursor: pointer; text-decoration: underline dotted; }
.insp-fmt-menu .fmt-opt { flex-wrap: wrap; }
.insp-fmt-menu .fmt-note { margin: -4px 0 4px 22px; }
.fmt-hw { font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.fmt-hw.ok { background: rgba(60, 170, 90, .18); color: #5fc27e; }
.fmt-hw.slow { background: rgba(220, 150, 40, .18); color: #e0a24a; }
.insp-drawer { flex-shrink: 0; max-height: 52%; overflow: auto; border: 1px solid var(--color-border-light); border-radius: 10px; background: var(--color-bg-elevated); }
.insp-drawer.hidden { display: none; }
.insp-dr-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-bg-elevated); }
.insp-dr-head .insp-dr-x { margin-left: auto; }
/* 9.8: Save at the bottom left of the form (the assistant's button is at the right) */
.insp-dr-foot { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-start; padding: 8px 12px; background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); }
.insp-dr-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.insp-dr-fields .insp-ft { width: calc(7ch + 34px); }   /* about 7 characters, with the spinner */
.insp-dr-fields .insp-val { width: calc(5ch + 34px); }
.insp-dr-fields .insp-rem { width: 100%; resize: none; overflow: hidden; min-height: 32px; line-height: 1.4; }
.insp-dr-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
.insp-dr-codes { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.insp-groups { flex-wrap: wrap; }
.insp-code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; max-height: 190px; overflow: auto; }
.insp-code-list button { text-align: left; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-tertiary); color: var(--color-text-primary); cursor: pointer; font-size: 12px; }
.insp-code-list button b { font-family: var(--font-mono); color: var(--color-data); margin-right: 4px; }
.insp-code-list button.on, .insp-code-list button:hover { border-color: var(--color-accent); }
/* 9.11: CDS's scheme — each group as the keyboard's left-hand block (Q W E R T, A S D F G, Z X C V B,
   each row half a key along), the letter on each box */
.insp-dr-codes:focus { outline: none; }
.insp-dr-codes:focus-visible .insp-code-list.kb, .insp-dr-codes:focus .insp-code-list.kb { box-shadow: 0 0 0 1px var(--color-accent); border-radius: 8px; }
.insp-dr-search { display: flex; }
.insp-dr-search .insp-code-q { flex: 1; min-width: 0; }
.insp-groups kbd { font-family: var(--font-mono); font-size: 10px; padding: 0 4px; border: 1px solid var(--color-border-light); border-radius: 3px; color: var(--color-data); }
.insp-code-list.kb, .insp-details .insp-code-list.kb { grid-template-columns: repeat(12, minmax(0, 1fr)); max-height: none; overflow: visible; padding: 2px; }
.insp-code-list.kb button { position: relative; min-height: 44px; padding: 14px 6px 4px; font-size: 11.5px; line-height: 1.2; overflow-wrap: break-word; }
.insp-code-list.kb button kbd { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--color-data); }
.insp-ob-code.words { font-family: var(--font-sans); width: auto; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-dr-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.insp-dr-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-condensed); font-weight: 700; }
.insp-dr-fields .form-input { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 400; }
.insp-row { display: flex; gap: 8px; align-items: flex-end; }
.insp-row label { flex: 1; }
.insp-picked { font-size: 14px; color: var(--color-text-primary); }
.insp-picked b { font-family: var(--font-mono); color: var(--color-data); }
@media (max-width: 900px) { .insp-dr-body { grid-template-columns: 1fr; } }

.insp-details { display: flex; flex-direction: column; gap: 10px; }
.insp-where b { font-size: 16px; color: var(--color-text-primary); }
.insp-stats { color: var(--color-text-primary); }
.insp-obs { display: flex; flex-direction: column; gap: 2px; overflow: auto; min-height: 0; }
.insp-ob { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.insp-ob-ft { width: 74px; white-space: nowrap; text-align: right; color: var(--color-data); flex-shrink: 0; }
.insp-ob-code { font-family: var(--font-mono); font-weight: 600; width: 58px; flex-shrink: 0; color: var(--color-text-primary); }
.insp-ob-code small { margin-left: 3px; color: var(--color-warning); }
.insp-ob-text { flex: 1; min-width: 0; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-empty p { color: var(--color-text-secondary); margin: 0 0 10px; }
.insp-modal { max-width: 760px; width: calc(100vw - 32px); }
.insp-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.insp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text-secondary); }
.insp-form label.wide { grid-column: 1 / -1; }
.insp-hist-table { width: 100%; border-collapse: collapse; }
.insp-hist-table th, .insp-hist-table td { padding: 6px; border-bottom: 1px solid var(--color-border); font-size: 12px; text-align: left; }
.insp-hist-table .nowrap { white-space: nowrap; }

/* --- Inspect 9.4: the clock face --------------------------------------------------------- */
.clock-picker { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cp-face { width: 150px; height: 150px; flex-shrink: 0; touch-action: none; cursor: pointer; user-select: none; }
.cp-rim { fill: var(--color-bg-tertiary); stroke: var(--color-border-light); stroke-width: 2; }
.cp-wedge { fill: transparent; stroke: var(--color-border); stroke-width: 1; transition: fill .12s; }
.cp-wedge:hover { fill: color-mix(in srgb, var(--color-data) 18%, transparent); }
.cp-wedge.on { fill: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.cp-wedge.end { fill: var(--color-accent); }
.cp-hub { fill: var(--color-bg-elevated); stroke: var(--color-border-light); }
.cp-hub-text { fill: var(--color-text-primary); font: 700 13px var(--font-mono); text-anchor: middle; }
.cp-num { fill: var(--color-text-secondary); font: 600 12px var(--font-sans); text-anchor: middle; pointer-events: none; }
.cp-inputs { display: flex; flex-direction: column; gap: 6px; min-width: 110px; }
.cp-inputs label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 500; }
.cp-inputs input { width: 64px; padding: 4px 6px; }
.cp-inputs .cp-clear { align-self: flex-start; }
.cp-hint { font-size: 11px; color: var(--color-text-muted); max-width: 150px; }
.insp-clock-wrap { display: flex; flex-direction: column; gap: 4px; }
.insp-label { font-family: var(--font-condensed); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

/* --- Inspect 9.4: the details, by section ------------------------------------------------- */
:root { --sec-survey: #3b82f6; --sec-location: #22a05e; --sec-pipe: #d98c0b; --sec-conditions: #8b5cf6; }
.insp-hmodal { max-width: 1100px; }
.insp-hmodal .modal-header { gap: 12px; }
.insp-h-legend { margin-left: auto; font-size: 12px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.insp-h-legend i, .hf.req > span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-left: 5px; vertical-align: middle; }
.hsec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.hsec { --sec: var(--color-border-light); border: 1px solid var(--color-border); border-top: 4px solid var(--sec); border-radius: 10px; background: color-mix(in srgb, var(--sec) 5%, var(--color-bg-secondary)); padding: 10px 12px 12px; }
.hsec-survey { --sec: var(--sec-survey); } .hsec-location { --sec: var(--sec-location); } .hsec-pipe { --sec: var(--sec-pipe); } .hsec-conditions { --sec: var(--sec-conditions); }
.hsec header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.hsec header b { color: var(--sec); font-family: var(--font-condensed); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hsec-hint { font-size: 12px; color: var(--color-text-muted); }
.hsec-count { margin-left: auto; font-size: 11px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.hsec-count.done { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.hsec-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.hf { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text-secondary); min-width: 0; }
.hf.wide { grid-column: 1 / -1; }
.hf .form-input { padding: 5px 8px; font-size: 13px; }
.hf.req.missing .form-input { border-color: color-mix(in srgb, var(--color-warning) 70%, transparent); }
.insp-dir { width: 100%; } .insp-dir button { flex: 1; }
.insp-add kbd, .insp-save kbd, .insp-obs kbd { font-family: var(--font-sans); font-weight: 700; }

/* --- Inspect 9.5: start / end of survey, overlay menu, screenshots in the list ---------------- */
.insp-se { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; padding: 12px; align-items: end; }
.insp-se label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text-secondary); }
.insp-se .wide { grid-column: 1 / -1; }
.insp-se .se-how { width: 100%; } .insp-se .se-how button { flex: 1; padding: 8px 12px; }
.insp-se .hidden { display: none; }
.insp-se .se-go { justify-self: start; }
.insp-ob-shot { width: 56px; height: 32px; object-fit: cover; border-radius: 3px; border: 1px solid var(--color-border); flex-shrink: 0; }
.insp-ovl-menu { position: fixed; z-index: calc(var(--z-sticky) + 20); width: 340px; padding: 12px; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.insp-ovl-menu .form-input { padding: 4px 6px; font-size: 12px; }
.insp-ovl-menu .ovl-bar-on { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.insp-ovl-menu .ovl-bar-on input { margin: 0; }
.insp-ovl-menu .ovl-bar.off { opacity: 0.45; }
.insp-ovl-menu .ovl-vlsetup summary { cursor: pointer; }
.insp-ovl-menu .ovl-vlgrid { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-top: 6px; }
.ovl-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; background: #000; border-radius: 4px; }
.ovl-fixed { color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ovl-sec { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.ovl-sec input { width: 56px; }
.insp-open-file { margin-left: auto; cursor: pointer; }

/* --- Inspect 9.6: the observation form in the Inspection column (the video is never covered) -- */
.insp-details { display: flex; flex-direction: column; }
.insp-det-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.insp-details.drawer-open > .insp-det-main { display: none; }
.insp-details .insp-drawer { flex: 1; min-height: 0; max-height: none; overflow: auto; border: 0; border-radius: 0; background: none; margin: calc(-1 * var(--space-4)); }
.insp-details .insp-dr-head { flex-wrap: wrap; background: var(--color-bg-secondary); }
.insp-details .insp-dr-head .text-sm { flex-basis: 100%; order: 3; }
.insp-details .insp-dr-body { grid-template-columns: 1fr; }
.insp-details .insp-code-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 34vh; }
.insp-details .insp-se { grid-template-columns: 1fr 1fr; }
.insp-details .insp-det-main .insp-obs { flex: 1; min-height: 0; }
.insp-add-line { padding: 8px 4px; }
/* 9.8: the footage (typed, or the reel's) and its preset; a lateral's note; the tap's ⤷ */
.insp-ftbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.insp-ftbar .insp-ft-now { width: 9ch; padding: 4px 6px; text-align: right; }
.insp-ft-preset { font-family: var(--font-mono); }
.insp-lat-note { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: var(--color-bg-tertiary); border-left: 3px solid var(--color-accent); font-size: 13px; }
.insp-ob-lat, .insp-ob-lat-sp { width: 26px; flex-shrink: 0; }
.insp-ob-lat { padding: 2px 0; font-size: 14px; }
.insp-ob-lat.has { color: var(--color-accent); border-color: var(--color-accent); }
/* Sound ▾, Export ▾, the preset */
.snd-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-primary); }
.snd-check.snd-sub { margin-left: 22px; font-size: 12px; }
.snd-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
.snd-mix[hidden] { display: none; }
.snd-row .form-input { flex: 1; min-width: 0; }
.insp-preset-menu .snd-row .form-input { flex: 0 0 9ch; text-align: right; }
.snd-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--color-text-muted); }
/* Picture ▾ (9.17) */
.pic-row .pic-name { flex: 0 0 34%; }
.pic-row .pic-name small { display: block; font-size: 10px; color: var(--color-text-muted); }
.pic-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--color-accent); }
.pic-row .pic-val { flex: 0 0 6ch; text-align: right; color: var(--color-text-primary); }
.snd-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.snd-msg { color: var(--color-text-secondary); }
.snd-msg.bad { color: var(--color-error); }
.insp-export-menu { width: 220px; }
.insp-export-menu .btn { justify-content: flex-start; }
@media (min-width: 1100px) {
  /* while the form is open, the column is the form: Inspection spreads over Telemetry */
  .panel-grid.insp-editing[data-mode="inspect"] > [data-panel-id="inspection"] { grid-row: 1 / span 2 !important; }
  .panel-grid.insp-editing[data-mode="inspect"] > [data-panel-id="telemetry"] { display: none !important; }
}
.insp-details .insp-dr-head { position: sticky; top: 0; z-index: 2; }
.insp-details .insp-code-list { max-height: 21vh; }   /* (the form fits a 1080p screen under the top bar) */


/* --- The top bar is back at the top on every screen (9.8; 9.7.1–9.7.2 had it in the rail).
   The rail stays on the left on wide screens and in landscape (phones too), and along the
   bottom in portrait (phones, tablets, a phone showing the desktop site). ---------------- */
.rail { overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* STOP EVERYTHING never scrolls out of the bar: when the bar is too narrow and scrolls
   sideways, it sticks to the right end (clear of the bug button) */
.top-bar > .tb-stop { position: sticky; right: 0; z-index: 1; }
.top-bar > .tb-stop { box-shadow: 0 0 0 3px var(--color-accent-glow), -18px 0 12px 2px var(--color-bg-secondary); }
/* The bug report button: a circle floating at the top right, in the bar's end (drag it away to hide it until the next visit) */
.aries-bug-slot { top: 8px; right: 10px; touch-action: none; }
.aries-bug-btn { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.aries-bug-slot.dragging { transition: none; opacity: .85; }
.aries-bug-slot.thrown { transition: transform .25s ease-in, opacity .25s ease-in; opacity: 0; pointer-events: none; }
.aries-bug-slot.returning { transition: transform .2s ease-out; }
.dash-panel-header.under-bug { padding-right: var(--under-w, 52px) !important; }

/* Short landscape screens (a phone on its side): a slimmer rail and bar */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --rail-w: 76px; --header-height: 48px; }
  .rail { padding: 4px 0; }
  .rail-logo { margin: 4px 0 6px; }   /* (Bug #186: kept, smaller, so the other sites are a long press away) */
  .rail-logo span { font-size: 17px; }
  .rail-logo small { display: none; }
  .rail-item { padding: 6px 0; gap: 2px; margin: 0 6px; }
  .rail-item svg { width: 18px; height: 18px; }
  .rail-item span { font-size: 9.5px; }
  .rail-grow { min-height: 4px; }
  .rail-avatar { width: 24px; height: 24px; }
  .aries-bug-slot { top: 4px; }
  .tb-chip { height: 32px !important; }
  .tb-stop { height: 38px !important; }
  .panel-grid.fill { min-height: 0; }
}

/* 9.25.0: a phone on its side (owner) — the top bar folds away with STOP EVERYTHING left floating where it
   was, and the modes and Pegasus Mobile put the video at the left with the controls beside it, as on a PC */
.tb-fold { display: none; }
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1099px) {
  .tb-fold { display: inline-flex; justify-content: center; min-width: 38px; padding: 0 8px; font-size: 15px; }
  .top-bar > .tb-fold { margin-left: auto; }
  .top-bar > .tb-stop { margin-left: 0; }
  body.tb-folded { --header-height: 0px; }
  body.tb-folded .top-bar { position: fixed; top: 4px; right: 56px; left: auto; height: auto; width: auto; padding: 0; gap: 6px;
    background: none; border: 0; box-shadow: none; overflow: visible; z-index: calc(var(--z-sticky) + 5); }
  body.tb-folded .top-bar > :not(.tb-stop):not(.tb-fold) { display: none !important; }
  body.tb-folded .top-bar > .tb-fold, body.tb-folded .top-bar > .tb-stop { position: static; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
  body.tb-folded .top-bar > .tb-fold { background: var(--color-bg-elevated); height: 34px !important; }
  body.tb-folded .top-bar > .tb-stop { height: 34px !important; padding: 0 12px !important; font-size: 12px !important; gap: 6px !important; }
  body.tb-folded .top-bar > .tb-stop i { width: 12px; height: 12px; border-width: 2px; }

  /* Drive, Inspect, Diagnose: the PC's arrangement, the right column narrower, filling the height */
  .panel-grid.fixed.fill { grid-template-columns: minmax(0, 1fr) minmax(0, 44%) !important; grid-template-rows: var(--mode-rows, auto); grid-auto-flow: row;
    height: calc(100vh - var(--header-height) - 2 * var(--panel-gap)); height: calc(100dvh - var(--header-height) - 2 * var(--panel-gap)); }
  .panel-grid.fixed.fill > .dash-panel { grid-column: var(--col, auto) !important; grid-row: var(--row, auto); min-height: 0 !important; height: auto !important; }
  .panel-grid.fill > .dash-panel > .dash-panel-body { min-height: 0; overflow: auto; }
  .panel-grid.fill .video-container { height: 100%; min-height: 0; }
  .panel-grid.fixed[data-mode="drive"] > [data-panel-id="video"] { height: auto; min-height: 0 !important; }
  .panel-grid.fill .dash-panel-header { padding-top: 6px; padding-bottom: 6px; }
  /* folded: the right column's top panel starts below the floating STOP EVERYTHING (the left one, the video, goes to the top) */
  body.tb-folded .panel-grid.fixed.fill > .dash-panel[style*="--col: 2"][style*="--row: 1"] { margin-top: 42px; }

  /* Pegasus Mobile: the video in the left column, staying in view; everything else beside it */
  .page-pc5000 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .page-pc5000 > * { grid-column: 2; min-width: 0; }
  .page-pc5000 .pc5-main { display: contents; }
  .page-pc5000 .pc5-controls { grid-column: 2; margin: 0; }
  .page-pc5000 .pc5-video { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: calc(var(--header-height) + 6px); align-self: start; margin: 0; }
  .page-pc5000 .pc5-head h1 { display: none; }   /* (the rail says PC5X00) */
  body.tb-folded .page-pc5000 > .pc5-head { padding-right: 230px; }   /* clear of the floating STOP EVERYTHING */
  .page-pc5000 .pc5-video { padding: 8px; }
  .page-pc5000 .pc5-video-head { flex-wrap: nowrap; gap: 6px; margin-bottom: 6px; }
  .page-pc5000 .pc5-video-head .page-kicker, .page-pc5000 #pc5-video-mode { display: none; }
  .page-pc5000 .pc5-video-head select { flex: 1 1 0; min-width: 0; max-width: none; }
  .page-pc5000 .pc5-video-box { width: min(100%, calc((100dvh - var(--header-height) - 72px) * 4 / 3)); }
}

/* Portrait (phones, tablets, a phone's desktop-site mode): the rail along the bottom, scrolling
   sideways; the top bar stays at the top */
@media (max-width: 1099px) and (orientation: portrait), (max-width: 559px) {
  :root { --rail-w: 0px; --rail-h: 64px; --aries-fab-lift: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); }
  .rail { inset: auto 0 0 0; width: auto; height: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); flex-direction: row; align-items: stretch;
    padding: 0 4px env(safe-area-inset-bottom, 0px); overflow-x: auto; overflow-y: hidden; gap: 0;
    border-right: 0; border-top: 1px solid var(--color-border); }
  .rail-logo, .rail-grow { display: none; }
  /* Bug #186: the CDS mark moves to the top bar's left end, staying there when the bar scrolls sideways */
  .top-bar > .tb-logo { display: flex; align-items: center; align-self: stretch; flex-shrink: 0; position: sticky; left: -8px; z-index: 1;
    margin-left: -8px; padding: 0 6px 0 10px; background: var(--color-bg-secondary); cursor: pointer; line-height: 1; }
  .tb-logo span { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 19px; }
  .rail-item { margin: 4px 1px; padding: 6px 8px; min-width: 62px; flex-shrink: 0; justify-content: center; }
  .rail-item.active::before { display: none; }
  .rail-user { flex-shrink: 0; margin-left: auto; }
  .rail-user-menu { left: auto; right: 0; bottom: calc(100% + 6px); position: fixed; right: 8px; bottom: calc(var(--rail-h) + 8px); }
  .main-content { padding-bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); }
  .top-bar { gap: 6px; padding-left: 8px; }
  .controllers-drop { left: 8px; width: calc(100vw - 16px); max-height: calc(100vh - var(--header-height) - var(--rail-h) - 24px); }
  .session-window { left: 8px; }
}
@media (max-width: 559px) {
  .tb-chip { padding: 0 8px; font-size: 11.5px; }
  .tb-stop { padding: 0 14px !important; font-size: 12px !important; gap: 7px !important; }
  /* the controller chip keeps its words (an old v7 rule hid them, leaving an empty chip) */
  .top-bar #gamepad-status-text { display: inline-block !important; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  /* a phone: "STOP", so the chips still fit beside it */
  .tb-stop span { font-size: 0; }
  .tb-stop span::before { content: 'STOP'; font-size: 13px; }
}

/* The pad full screen (9.7.2, Controls → ⛶ Full screen): the phone is the controller */
.bp-pad.bp-pad-full {
  position: fixed; inset: 0; z-index: 5000; margin: 0; background: var(--color-bg-primary);
  display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
body.bp-full-open { overflow: hidden; }
body.bp-full-open #aries-assistant-root, body.bp-full-open .aries-bug-slot, body.bp-full-open .top-bar { display: none; }
.bp-pad-full .vc-wrapper { flex: 1; min-height: 0; gap: 0; }
.bp-pad-full .vc-collapse-tab, .bp-pad-full .vc-custom-section, .bp-pad-full .vc-bottom-bar { display: none !important; }
.bp-pad-full .vc-controller-viewport { flex: 1; min-height: 0; padding: 4px; border-radius: 0; }
.bp-pad-full .vc-controller { width: min(98vw, calc((100vh - 60px) * 1.62)); width: min(98vw, calc((100dvh - 60px) * 1.62)); max-width: none; }
/* 9.26.0 (owner): on a touch screen the controller stretches to the screen — its controls keep their places, the
   sticks at the sides and View / Menu / Xbox / Share at the bottom middle — and the live video sits in its middle */
@media (pointer: coarse) and (orientation: landscape) {
  .bp-pad-full .vc-controller-viewport { padding: 4px 6px; }
  .bp-pad-full .vc-controller { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 40px; }
  .bp-pad-full .vc-controller-viewport:not(.vc-labels-hidden) { padding-inline: 64px; }   /* (B's and the left stick's labels sit outside it) */
}
.pf-video { position: absolute; left: 35%; right: 35%; top: 8%; bottom: 26%; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.pf-video > * { pointer-events: auto; }
.pf-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 12px; }
.pf-video-btn { border: 1px solid rgba(148, 163, 184, .35); color: #cbd5e1; background: rgba(15, 23, 42, .85); cursor: pointer; font-weight: 700; touch-action: manipulation; }
.pf-video-on { padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.pf-video-on:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }
.pf-video-on:disabled { opacity: .6; cursor: progress; }
.pf-video-off { position: absolute; top: 6px; right: 6px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; background: rgba(0, 0, 0, .6); }
.pf-video-msg { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; color: #94a3b8; }
.bp-full-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; flex-shrink: 0; order: -1; }
.bp-full-bar .btn { min-height: 40px; }
.bp-full-hint { color: var(--color-text-muted); font-size: var(--text-sm); display: none; }
@media (orientation: portrait) { .bp-pad-full .bp-full-hint { display: inline; } }
/* The controls' top line on a narrow screen: the badges don't break inside */
.bp-top-bar > div { flex-wrap: wrap; row-gap: 6px; }
.bp-top-bar .badge, .bp-top-bar .ctl-channel { white-space: nowrap; }
/* A panel header under the floating bug button: its buttons wrap below rather than under it */
.dash-panel-header.under-bug { flex-wrap: wrap; row-gap: 4px; }
.dash-panel-header.under-bug .dash-panel-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* Keyboard hints mean nothing on a full-screen pad */
.bp-pad-full .vc-key-hint { display: none !important; }
/* (9.8: the keys show only when ⌨️ Keys is on — off by default, touch screens included) */
.bp-keys.on { border-color: var(--color-accent); color: var(--color-text-primary); }

/* The voice's download (9.8.2): only while it downloads */
.insp-dlbar:empty { display: none; }
.insp-dlbar, .snd-dl .dl-row { flex-shrink: 0; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); }
.dl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-bar { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--color-bg-tertiary); overflow: hidden; }
.dl-bar i { display: block; height: 100%; background: var(--color-accent); transition: width .3s; }
.dl-row.dl-local .dl-bar i { background: var(--color-success); }   /* read from this computer, not downloaded (9.9.3) */
.dl-pct { font-size: 11px; color: var(--color-text-muted); }
.dl-x { border: 0; background: none; color: var(--color-text-muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.dl-x:hover { color: var(--color-error); }
.snd-note.dl-ok { color: var(--color-success); }

/* Inspection details: every field explains itself on hover (9.8.2) */
.hf .hf-q { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 5px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: var(--color-text-muted); border: 1px solid var(--color-border-light); vertical-align: middle; cursor: help; }
.hf:hover .hf-q { color: var(--color-text-primary); border-color: var(--color-accent); }
/* 9.8.5: the ? shows only on the field the pointer is over (or the one being typed in), lit */
.hf .hf-q { opacity: 0; transition: opacity .15s, box-shadow .15s, color .15s; }
.hf:hover .hf-q, .hf:focus-within .hf-q { opacity: 1; color: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 0 8px color-mix(in srgb, var(--color-accent) 55%, transparent); }

/* Playback of the finished inspection (9.8.5) */
.insp-playback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.insp-pb-bar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.insp-pb-bar > * { pointer-events: auto; }
.insp-pb-name { background: rgba(0,0,0,.65); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-canvas.hidden, .insp-playback.hidden, .insp-pb-bar.hidden { display: none; }

/* A screenshot, big (9.8.5) */
.insp-ob-shot { cursor: zoom-in; transition: transform .12s, box-shadow .12s; }
.insp-ob-shot:hover, .insp-ob-shot:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px var(--color-accent); outline: none; }
.insp-shot-view { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.insp-shot-view figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 140px); max-height: 100%; min-width: 0; }
.insp-shot-view img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.6); background: #000; cursor: zoom-out; }
.insp-shot-view figcaption { color: #eee; font-size: 14px; text-align: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: baseline; }
.insp-shot-view .isv-n { color: #aaa; font-size: 12px; margin-left: 10px; }
.isv-nav, .isv-x { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.isv-nav { width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.isv-nav:disabled { opacity: .2; cursor: default; }
.isv-nav:not(:disabled):hover, .isv-x:hover { background: rgba(255,255,255,.25); }
.isv-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 16px; }
@media (max-width: 560px) { .insp-shot-view { padding: 8px; gap: 4px; } .insp-shot-view figure { max-width: calc(100vw - 90px); } .isv-nav { width: 36px; height: 36px; font-size: 22px; } }

/* Load (9.8.5) */
.insp-load-table tr.is-open td { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.insp-st { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--color-border-light); white-space: nowrap; }
.insp-st-not-finished { color: var(--color-warning); border-color: var(--color-warning); }
.insp-st-abandoned { color: var(--color-danger, #d55); border-color: currentColor; }

.settings-row-end { display: inline-flex; align-items: center; gap: 8px; }