/* TURD FX — the words and the panel over the picture. */
:root { color-scheme: dark; --ink: #f2f2f2; --dim: rgba(242,242,242,.6); --glass: rgba(14,14,18,.72); --line: rgba(255,255,255,.12); --accent: #ffb020; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg-ui, #000); color: var(--ink);   /* View › Background colour */
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* THE VIEWPORT (his, 6 Oct: "can we make the fullscreen canvas fit in the middle as its own viewport so the panels dont sit
   over top of them and we can see everything clearly.... glassfx had this upgrade"): the picture's own box between the docked
   columns — GLASS FX's #stage. app/dock.js sets --vp-l / --vp-r (0 with nothing docked, on a narrow screen, or when too little
   picture would be left); the engine sizes the picture to this box (turdfx.js), never to the window */
#stage { position: fixed; top: 0; bottom: var(--vp-b, 0px); left: var(--vp-l, 0px); right: var(--vp-r, 0px); overflow: hidden; background: var(--bg-pic, #000);
  transition: left .12s ease, right .12s ease; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#gl.overHot { cursor: pointer; }      /* (over a hotspot the Preview lets be clicked — the floor plan's) */

#top { position: fixed; top: 10px; left: 12px; display: flex; gap: 12px; align-items: center; pointer-events: none; z-index: 9;
  background: var(--glass); border-radius: 999px; padding: 5px 14px; backdrop-filter: blur(8px); max-width: max(330px, calc(100vw - 752px)); }
/* (it stops short of the buttons at the top right — about 700 px of them: at 1366 px, or a 1920 screen at 125–150 %, its words
   covered the preset box and the menus took its clicks; 7 Oct audit) */
#top > b { letter-spacing: .08em; white-space: nowrap; flex: 0 0 auto; }
#top > b i { font-style: normal; font-weight: 400; color: var(--accent); letter-spacing: 0; margin-left: 2px; }   /* the version: TURD FX 1.5 */
#top > #homeBtn { pointer-events: auto; padding: 5px 12px; font-size: 13px; flex: 0 0 auto; }   /* ⌂ Home, top left (16 Oct) */
#top > span { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#facts:empty { display: none; }

#topBtns { position: fixed; top: 10px; right: 12px; display: flex; gap: 8px; z-index: 9; }   /* over the bar on the left, if a narrow window still makes them meet */
#topBtns button.on { border-color: var(--accent); color: var(--accent); }
button { font: inherit; color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; backdrop-filter: blur(8px); }
button:hover { border-color: rgba(255,255,255,.35); }
button:disabled { opacity: .35; cursor: default; }

/* the bottom: the modes, and the play / pause pill beside them */
#navbar { position: fixed; left: calc((var(--vp-l, 0px) + 100vw - var(--vp-r, 0px)) / 2); bottom: 16px; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 16px); display: flex; gap: 8px; align-items: center; transition: left .12s ease; }
#navbar { bottom: calc(var(--vp-b, 0px) + 16px); }
  /* in the middle of the picture, not the window; its own width (placed right of the middle of the window, a fixed box
     only gets the room from there to the window's edge, and "Free look" broke onto two lines) */
#playPill, #orbitPill, #homeBtn { padding: 9px 16px; font-size: 14px; white-space: nowrap; }
/* the Primitives panel, 11 Oct: what a primitive does (in the list), the pen's button and its words, the kind box hidden for a shape */
.panel .plist li .does { font-style: normal; color: var(--dim); font-size: 11px; }
.panel .btns.draw { align-items: center; }
.panel .btns.draw .pensays { font-size: 11px; color: var(--accent); }
.panel select[hidden] { display: none; }
/* the publishing steps in the Export for the web sheet */
#sheet .pub { margin: 12px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 10px; }
#sheet .pub .step { display: grid; gap: 4px; }
#sheet .pub .step button { justify-self: start; }
#sheet .pub .step button.warn { border-color: #ff5a4a; color: #ff8a7e; }
#sheet .pub .says { font-size: 12px; color: var(--dim); word-break: break-all; }
#sheet .pub .says.bad { color: #ff8a7e; }
#sheet .pub .says a { color: var(--accent); }
#sheet .pub input[hidden], #sheet .f[hidden] { display: none; }
/* the ILS off: its sliders greyed, and the line that says so */
.panel .row.idle { opacity: .38; }
.panel p.row.ilsoff { margin: 6px 0; font-size: 12px; color: #ffb020; }
.panel p.row.ilsoff[hidden] { display: none; }
#playPill.on, #orbitPill.on { border-color: var(--accent); color: var(--accent); }
#playPill[hidden], #orbitPill[hidden] { display: none; }
#modes { display: flex; gap: 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); }
#modes button { border: 0; background: transparent; padding: 8px 20px; font-size: 14px; }
#modes button.on { background: var(--accent); color: #111; font-weight: 600; }

.panel { position: fixed; top: 52px; right: 12px; bottom: 76px; width: 310px; display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); overflow: hidden; }
.panel[hidden] { display: none; }
/* (25 Oct, his: "a little highlight around the panel, to indicate what is active") the panel holding what is picked — what Ctrl+Space saves the view onto */
.panel.focusOn { outline: 2px solid rgba(255, 176, 32, .85); outline-offset: -2px; }
.panel header { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.panel header b { font-size: 15px; }
.panel header .sub { color: var(--dim); font-size: 11px; flex: 1; }
.panel header .x { padding: 2px 8px; }
.panel .rows { overflow-y: auto; padding: 4px 14px 10px; flex: 1; }
.panel h4 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.panel .row { display: block; margin: 8px 0; }
.panel .row > span { display: flex; justify-content: space-between; }
.panel .row em { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.panel .row small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.panel input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; }
.panel .tick { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; }
.panel .tick small { grid-column: 2; }
.panel .tick input { accent-color: var(--accent); width: 16px; height: 16px; }
.panel footer { border-top: 1px solid var(--line); padding: 8px 14px 12px; }
.panel footer .row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; }
.panel select, .panel .name { font: inherit; color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.panel footer select { width: 170px; }
.panel .btns, .panel .saving { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.panel .btns button, .panel .saving button { padding: 5px 10px; font-size: 12px; }
.panel .default { border-color: var(--accent); }
.panel .saving .name { flex: 1; min-width: 0; }

#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #000; transition: opacity .6s; z-index: 10; }
#loading.gone { opacity: 0; pointer-events: none; }
#loadingName { font-size: 22px; font-weight: 300; letter-spacing: .06em; }
#loadingBar { width: min(280px, 60vw); height: 2px; background: rgba(255,255,255,.15); }
#loadingBar i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }

#toast { position: fixed; left: calc((var(--vp-l, 0px) + 100vw - var(--vp-r, 0px)) / 2); top: 52px; transform: translateX(-50%); background: var(--glass); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 6; width: max-content; max-width: min(520px, 80vw); text-align: center; }
#toast.on { opacity: 1; }

@media (max-width: 700px) {
  .panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 70px; max-height: 55vh; }
  #top { max-width: calc(100vw - 130px); }
  #facts { display: none; }
}
.panel .saving[hidden] { display: none; }
/* the gesture boxes */
.panel footer .clear { padding: 4px 10px; font-size: 12px; margin-right: 8px; }
.panel .mw { color: var(--dim); text-transform: none; letter-spacing: 0; }
.panel [data-tabs][hidden] { display: none; }
.panel .note { margin: 0 0 6px; color: var(--dim); font-size: 11px; }
.panel .row.pick { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.panel .row.pick > span { flex: 0 0 auto; }
.panel .row.pick select { width: 175px; min-width: 0; font: inherit; font-size: 12px; color: var(--ink);
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
/* (where each panel sits is THE DOCK's now — app/dock.js, the end of this file: the Primitives and Camera path panels start in
   the left column, the camera panel in the right) */
/* THE CAMERA PATH (app/orbit.js): drawn on a see-through canvas over the picture, under the panels, taking no clicks */
#orbitLayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }      /* in the stage, over the picture */
.panel h4 small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; margin-left: 4px; }
.panel .btns button.on { border-color: var(--accent); color: var(--accent); }
.panel button.go { border-color: var(--accent); color: var(--accent); }
/* the modes a camera has: a tick each, on the camera panel's foot */
.panel .modes-on { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.panel .modes-on .ticks { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
.panel .modes-on label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.panel .modes-on input { accent-color: var(--accent); margin: 0; }
.panel .add button { border-color: rgba(255,255,255,.3); }
.panel .plist { list-style: none; margin: 8px 0; padding: 0; border-top: 1px solid var(--line); }
.panel .plist li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.panel .plist li:hover { background: rgba(255,255,255,.05); }
.panel .plist li.on { background: rgba(255,176,32,.14); }
.panel .plist li i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.panel .plist li small { margin-left: auto; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.panel .plist li.none { cursor: default; color: var(--dim); font-size: 12px; }
.panel .seg { display: flex; gap: 0; margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.panel .seg button { flex: 1; border: 0; background: transparent; padding: 5px 0; font-size: 12px; }
.panel .seg button.on { background: var(--accent); color: #111; font-weight: 600; }
/* the camera target: five choices that wrap (Anchor point · POI · Behind · Forward · Headless); the shape: three */
.panel .seg.looks, .panel .seg.kinds { flex-wrap: wrap; border-radius: 14px; gap: 2px; }
.panel .seg.looks button, .panel .seg.kinds button { flex: 1 1 auto; padding: 5px 9px; border-radius: 999px; }
.panel .says { min-height: 2.6em; margin: 2px 0 4px; }
.panel .kindsays { min-height: 2.6em; margin: 2px 0 6px; }
.panel .btns button.fly { flex: 1 1 100%; }
.panel .xyz { display: grid; grid-template-columns: 62px 1fr 1fr 1fr; gap: 4px; align-items: center; margin: 4px 0; }
.panel .xyz.head i { font-style: normal; font-size: 10px; color: var(--dim); text-align: center; }
.panel .xyz span { font-size: 12px; }
.panel .xyz input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12px; color: var(--ink); background: rgba(0,0,0,.4);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; font-variant-numeric: tabular-nums; }
.panel .sel h4 { margin-top: 14px; }
.panel .del.warn { border-color: #ff5a4a; color: #ff8a7e; }
.panel footer .status { color: var(--dim); font-size: 11px; }
.panel .add + .note { margin-top: 6px; }
/* the preset box, top right: the CCS and ICS 1–5 — Load, Save */
#presetBox { display: inline-flex; align-items: center; background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 2px 2px 10px; backdrop-filter: blur(8px); }
#presetBox select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 4px 2px; cursor: pointer; }
#presetBox select option { background: #1b1b20; color: var(--ink); }
#presetBox button { padding: 4px 12px; margin-left: 4px; }
#presetBox #presetSave { border-color: var(--accent); }
#presetBox button:disabled { border-color: var(--line); }
#presetBox button.warn { border-color: #ff5a4a; color: #ff8a7e; }
.panel .row[hidden] { display: none; }
@media (max-width: 700px) {
  #top { max-width: calc(100vw - 320px); }
  #topBtns { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 100px); }
}
#presetBox #presetSaveAs { margin-left: 6px; color: var(--dim); max-width: 110px; }
/* 5 Oct, "the panels are getting too much": tabs, sections that fold, each section's hands, the explanations behind ? */
.panel [hidden] { display: none !important; }
.panel header .help { padding: 2px 9px; }
body.hints .panel header .help { border-color: var(--accent); color: var(--accent); }
body:not(.hints) .panel .hint { display: none; }
.panel .tabs { display: flex; margin: 8px 14px 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.panel .tabs button { flex: 1; border: 0; background: transparent; padding: 5px 0; font-size: 12px; }
.panel .tabs button.on { background: var(--accent); color: #111; font-weight: 600; }
.panel .grp { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.panel h4.tw { cursor: pointer; user-select: none; }
.panel h4.tw::before { content: '▾'; display: inline-block; width: 14px; }
.panel .grp.shut h4.tw::before { content: '▸'; }
.panel .grp.shut > :not(h4) { display: none; }
.panel .by { margin: -2px 0 6px 14px; color: var(--dim); font-size: 11px; cursor: pointer; }
.panel .by:hover { color: var(--ink); }
.panel .btns.this { align-items: center; }
.panel .btns.this select { font-size: 12px; }
@media (min-width: 701px) {                    /* a panel is as tall as what is in it, and scrolls past the bottom bar */
  .panel { bottom: auto; max-height: calc(100vh - 128px); }
  .panel .rows { min-height: 0; }
}

/* THE MENU BAR (app/file-menu.js): File · Edit · View · Help in the pill top left; each opens right under its own name */
#menubar { display: flex; gap: 0; margin: -3px 0; pointer-events: auto; flex: 0 0 auto; }
#menubar > button { border: 0; background: transparent; backdrop-filter: none; padding: 3px 9px; border-radius: 999px; font-size: 13px; }
#menubar > button:hover, #menubar > button.on { background: rgba(255,255,255,.1); }
#menubar > button.on { color: var(--accent); }
.menu-pop { position: absolute; top: calc(100% + 8px); min-width: 260px; max-width: min(380px, calc(100vw - 24px)); padding: 6px;
  max-height: calc(100vh - 64px); overflow-y: auto;      /* a long menu in a short window scrolls (the View menu grew, 6 Oct) */
  background: rgba(14,14,18,.92); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0,0,0,.45); pointer-events: auto; z-index: 12; }
.menu-pop .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; border: 0; border-radius: 8px;
  background: transparent; backdrop-filter: none; padding: 6px 10px 6px 4px; text-align: left; font-size: 13px; white-space: nowrap; }
.menu-pop .row:hover:not(:disabled) { background: var(--accent); color: #111; }
.menu-pop .row .tick { display: inline-block; width: 18px; text-align: center; font-style: normal; color: var(--accent); }
.menu-pop .row:hover:not(:disabled) .tick, .menu-pop .row:hover:not(:disabled) .k { color: #111; }
.menu-pop .row .k { color: var(--dim); font-size: 11px; }
.menu-pop .rule { height: 1px; background: var(--line); margin: 5px 6px; }
.menu-pop .note { color: var(--dim); font-size: 12px; line-height: 1.45; padding: 6px 10px; white-space: normal; }
.menu-pop .note b { color: var(--ink); font-weight: 600; }

/* THE SHEET: one dialog at a time, in the middle — the panels' own glass */
#sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
#sheet[hidden] { display: none; }
#sheet .card { width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; box-sizing: border-box; padding: 16px 18px 14px;
  background: rgba(14,14,18,.9); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#sheet h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
#sheet .lede { margin: 0 0 12px; color: var(--dim); font-size: 12px; }
#sheet .f { margin: 12px 0; }
#sheet label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
#sheet label i { font-style: normal; opacity: .8; }
#sheet small { display: block; color: var(--dim); font-size: 11px; margin-top: 4px; }
#sheet input[type=text], #sheet input[type=number], #sheet select { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
#sheet input:disabled { opacity: .45; }
#sheet select option { background: #1b1b20; }
#sheet .two { display: flex; gap: 10px; align-items: flex-end; }
#sheet .two > div { flex: 1; min-width: 0; }
#sheet .two > button { flex: 0 0 auto; }
#sheet .picked { flex: 1; min-width: 0; font-size: 12px; color: var(--dim); align-self: center; }
#sheet .picked b { color: var(--ink); }
#sheet .picked .path { word-break: break-all; }
#sheet .err { margin: 8px 0 0; color: #ff8a7e; font-size: 12px; }
#sheet .prog { margin: 6px 0 0; color: var(--accent); font-size: 12px; }
#sheet .err:empty, #sheet .prog:empty { display: none; }
#sheet .wait { margin: 10px 0 0; color: var(--dim); font-size: 12px; line-height: 1.6; }
#sheet .wait[hidden] { display: none; }
#sheet .wait button { padding: 2px 10px; font-size: 12px; margin-left: 2px; }
#sheet .acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#sheet button.go { border-color: var(--accent); color: var(--accent); }
#sheet button.go:hover:not(:disabled) { background: var(--accent); color: #111; }
#sheet .list { border-top: 1px solid var(--line); max-height: 52vh; overflow-y: auto; margin: 4px 0 0; }
#sheet .list button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; backdrop-filter: none; padding: 9px 6px; text-align: left; }
#sheet .list button:hover:not(:disabled) { background: rgba(255,255,255,.07); }
#sheet .list button:disabled { opacity: 1; cursor: default; }
#sheet .list b { display: block; font-weight: 600; }
#sheet .list small { margin-top: 1px; }
#sheet .list .side { text-align: right; flex: 0 0 auto; }
#sheet .list .now { font-style: normal; color: var(--accent); font-size: 11px; }

/* the server is older than the page: say so, and what to do */
#stale { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(560px, calc(100vw - 32px));
  background: rgba(14,14,18,.95); border: 1px solid #ff5a4a; border-radius: 12px; padding: 12px 16px; line-height: 1.5; }
#stale[hidden] { display: none; }

/* 6 Oct: THE PRIMITIVES LIST — a group is one row with its members under it; a lock on each; the snap steps */
.panel .plist li.gh { font-size: 12px; }
.panel .plist li.gh b { font-weight: 600; }
.panel .plist li input.rn { flex: 1 1 auto; min-width: 0; font: inherit; color: inherit; background: #000; border: 1px solid var(--accent, #ffb020); border-radius: 4px; padding: 1px 4px; }
.panel .plist li.gh.hid b { opacity: .5; }
.panel .plist li.in { padding-left: 20px; }
.panel .plist li.locked .nm { color: var(--dim); }
.panel .plist li .lk { flex: 0 0 auto; margin-left: 2px; padding: 0 3px; border: 0; background: transparent; backdrop-filter: none;
  font-size: 12px; line-height: 1; opacity: .45; }
.panel .plist li .lk:hover, .panel .plist li.locked .lk { opacity: 1; }
.panel .row.lands, .panel .row.steps { margin: 6px 0 8px; }
.panel .row.lands > span, .panel .row.steps > span { font-size: 12px; }
.panel .row.steps .seg button, .panel .row.lands .seg button { font-size: 11px; padding: 4px 0; }

/* 6 Oct: THE FIELD OF VIEW SLIDER'S LITTLE SQUARE — what the slider sets: DEF (the field of view), MIN (how far a zoom goes in),
   MAX (how far out) */
.panel .row.fov3 .fl { display: inline-flex; align-items: center; gap: 6px; }
.panel .row.fov3 .fl b { font-weight: 400; }
.panel .fovmode { min-width: 30px; height: 18px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: .06em;
  line-height: 16px; backdrop-filter: none; }
.panel .fovmode.on { border-color: var(--accent); color: var(--accent); }

/* THE VIEW CUBE (app/view-cube.js, lifted from GLASS FX's corner): top right, under the buttons; it steps left of the camera
   panel while that is open */
#viewCube { position: fixed; top: 52px; right: var(--cube-r, 12px); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 6px 7px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); user-select: none; }
#viewCube[hidden] { display: none; }
/* (his rules, 25 Oct) the view cube turns the EDITING camera: with both monitors it sits in the Editing monitor's top right corner; with the Preview alone there is no editing camera to turn */
/* (28 Oct, his: "move it up so it is not just floating in space … over to the right corner of the presentation window") top right of the picture, whichever monitors show */
#viewCube { top: 64px; }      /* (29 Oct, his: it overlapped Go live) under the top bar's buttons */

#viewCube svg { display: block; overflow: visible; }
#viewCube .dot { cursor: pointer; }
#viewCube .dot circle { transition: r .12s ease; }
#viewCube .dot:hover circle { r: 10.5; }
#viewCube .views { display: flex; gap: 2px; }
#viewCube .views button { padding: 2px 7px; font-size: 10.5px; border-radius: 6px; background: transparent; backdrop-filter: none; }
#viewCube .flat { font-size: 10px; letter-spacing: .08em; color: var(--accent); font-weight: 600; }
#viewCube .flat[hidden] { display: none; }
#viewCube .views button.on { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) { #viewCube { right: 12px; } }

/* ══ THE DOCK (app/dock.js, GLASS FX's dock written fresh round these panels — 6 Oct 2026) ══
   A column on each side, BESIDE the picture (it pushes the picture in — #stage, the top of this file); a panel docked in one
   stacks with the others there; a floating one sits over the picture, wherever it was let go. Phones and narrow windows:
   the bottom sheet, as always (the columns step aside). */
@media (min-width: 701px) {
  .rail { position: fixed; top: 52px; bottom: 12px;   /* (25 Oct: to the bottom of the window — the Timeline is between them now) */ display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 4; }
  #railL { left: 12px; width: var(--rail-l, 310px); }
  #railR { right: 12px; width: var(--rail-r, 310px); }
  .rail > .panel { position: relative; inset: auto; width: auto; max-height: none; flex: 0 1 auto; min-height: 0; pointer-events: auto; }
  .rail > .panel.has-h { flex: 0 1 var(--h); }      /* a height he set, but never more than the column has (a smaller window: its foot went off the screen) */
  #floats { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
  #floats > .panel { position: absolute; inset: auto; left: var(--x); top: var(--y); width: var(--w); height: auto; max-height: calc(100vh - var(--y) - 12px);
    pointer-events: auto; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
  #floats > .panel.has-h { height: var(--h); }
  .panel header { cursor: grab; touch-action: none; }
  .panel header button, .panel header select { cursor: pointer; }
  body.docking, body.docking * { cursor: grabbing !important; user-select: none !important; }
  .dock-grip { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2; opacity: .5;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 62%, transparent 62%, transparent 74%, rgba(255,255,255,.35) 74%, rgba(255,255,255,.35) 86%, transparent 86%); }
  .dock-grip:hover { opacity: 1; }
  .rail > .panel .dock-grip { cursor: ns-resize; }
  .rail-grip { position: fixed; top: 52px; bottom: 12px; width: 8px; cursor: ew-resize; z-index: 5; }
  .rail-grip:hover { background: linear-gradient(90deg, transparent 3px, rgba(255,176,32,.6) 3px, rgba(255,176,32,.6) 5px, transparent 5px); }
  #railGripL { left: calc(12px + var(--rail-l, 310px)); }
  #railGripR { right: calc(12px + var(--rail-r, 310px)); }
  .rail-grip[hidden] { display: none; }
  #dropHint { position: fixed; top: 52px; bottom: 12px; border: 2px dashed var(--accent); border-radius: 14px; background: rgba(255,176,32,.08);
    pointer-events: none; z-index: 6; box-sizing: border-box; }
  #dropHint.left { left: 12px; } #dropHint.right { right: 12px; }
  #dropHint[hidden] { display: none; }
}
@media (max-width: 700px) {
  .rail, #floats { display: contents; }
  .rail-grip, #dropHint, .dock-grip { display: none !important; }
}
/* ▾ folds a panel to its title bar */
.panel header .fold { padding: 2px 8px; }
.panel.is-folded > :not(header) { display: none !important; }
.panel.is-folded { height: auto !important; flex: 0 0 auto !important; }

/* DRAG ANY NUMBER (app/scrub.js): a slider's whole row — its name, its number — drags its value */
.panel .row:has(> input[type=range]) { cursor: ew-resize; user-select: none; }
.panel .row:has(> input[type=range]) input[type=range], .panel .row:has(> input[type=range]) button { cursor: pointer; }
.panel .row.is-scrubbing em, .panel .row.is-scrubbing > span { color: var(--accent); }
body.scrubbing, body.scrubbing * { cursor: ew-resize !important; }
/* THE PATHS PANEL (app/paths-panel.js): the list, like the Primitives list; the path on is lit */
@media (min-width: 701px) { .rail > #pathsPanel { flex: 0 0 auto; } #pathsPanel .plist { max-height: 30vh; overflow-y: auto; } }
/* (the list never squashed by the panel under it — and never taller than 30 % of the window: nine paths left the Camera path panel
   under it 2 px tall; 7 Oct audit) */
#pathsPanel .plist li i.pk { width: 18px; height: auto; border-radius: 0; font-style: normal; text-align: center; color: var(--accent); font-size: 13px; }
#pathsPanel .plist li .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pathsPanel .plist li input.name { flex: 1 1 auto; min-width: 0; }
#pathsPanel .plist li.on small { color: var(--accent); }
@media (max-width: 700px) { #pathsPanel { top: 52px; bottom: auto; max-height: 30vh; } }
/* FIRST PERSON / OVERVIEW: a little bar at the top centre of the picture */
#viewBar { position: fixed; top: 52px; left: calc((var(--vp-l, 0px) + 100vw - var(--vp-r, 0px)) / 2); transform: translateX(-50%);
  width: max-content; display: flex; gap: 0; padding: 3px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(8px); z-index: 5; transition: left .12s ease; }
#viewBar[hidden] { display: none; }
#viewBar button { border: 0; background: transparent; backdrop-filter: none; padding: 5px 14px; font-size: 12.5px; }
#viewBar button.on { background: var(--accent); color: #111; font-weight: 600; }
#toast { top: 96px; }                                    /* under the First person / Overview bar */
/* the Shape buttons, in the Paths panel now */
#pathsPanel .seg.kinds { margin: 4px 0 2px; }
/* THE SCANS PANEL (app/scans-panel.js): the list like the Paths list; an eye on each */
#scansPanel .plist li { gap: 6px; }
#scansPanel .plist li .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scansPanel .plist li input.name { flex: 1 1 auto; min-width: 0; }
#scansPanel .plist li.off .nm, #scansPanel .plist li.off small { opacity: .45; }
#scansPanel .plist li .eye { padding: 0 4px; border: 0; background: transparent; backdrop-filter: none; font-size: 15px; line-height: 1; color: var(--accent); }
#scansPanel .plist li[data-main] { cursor: default; }
#scansPanel .plist li.on small { color: var(--accent); }
#scansPanel .seeline { display: flex; align-items: center; gap: 8px; }
#scansPanel .seeline > span { flex: 0 0 74px; font-size: 12px; color: var(--dim); }
#scansPanel .seeline .seg button { white-space: nowrap; padding: 5px 2px; font-size: 11.5px; }
#scansPanel .seeline .seg { flex: 1; margin: 3px 0; }
#scansPanel .seeline .seg button:disabled { opacity: .35; }
#scansPanel .btns .line.go { border-color: var(--accent); color: var(--accent); }
/* THE TRANSITION'S BLACK (app/transition.js): over the picture, under everything else */
#fadeBlack { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; }
#scansPanel .tkinds { flex-wrap: wrap; border-radius: 14px; gap: 2px; }
#scansPanel .tkinds button { flex: 1 1 auto; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
/* THE LINE-UP DOTS (app/lineup.js): over the picture, the same size near or far; solid = the first scan's, ring = the copy */
#luDots { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#luDots .ludot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font: 700 10px/1 system-ui, sans-serif; cursor: grab;
  pointer-events: auto; user-select: none; touch-action: none; }
#luDots .ludot.a { background: var(--c); color: #111; border: 2px solid rgba(0,0,0,.55); z-index: 1; }
#luDots .ludot.b { background: rgba(0,0,0,.35); color: var(--c); border: 3px solid var(--c); z-index: 2; }
#luDots .ludot.on { box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255,255,255,.7); }
#luDots .ludot.b::after { content: attr(data-gap); position: absolute; left: 20px; top: 1px; white-space: nowrap; font: 600 10px/1 system-ui, sans-serif;
  color: var(--c); text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
#luDots .ludot[hidden] { display: none; }
@media (min-width: 701px) { .rail > #scansPanel { flex: 0 1 auto; } }      /* it may shrink, its rows scroll: with three scans, Preview and Back were under the window's edge (7 Oct audit) */
/* View › Background colour */
#sheet .bgrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
#sheet .bgrow input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
#sheet .bgrow .sw { width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); }

/* THE PRIMITIVES LIST, SIMPLER (19 Oct, his: "i dont need to know size in metres … colour each one with a swatch … the eyeball"):
   [colour] name · what it does … [eye] [lock] */
.panel .plist li .sw { flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border-radius: 2px; border: 1px solid rgba(255,255,255,.25); backdrop-filter: none; cursor: pointer; }
.panel .plist li .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel .plist li .pal { display: flex; gap: 4px; flex: 0 0 auto; }
.panel .plist li .pal button { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); backdrop-filter: none; font-size: 11px; line-height: 1; color: var(--dim); background: transparent; }
.panel .plist li .pal button.cur { outline: 2px solid #fff; outline-offset: 1px; }
.panel .plist li .eye { flex: 0 0 auto; padding: 0 3px; border: 0; background: transparent; backdrop-filter: none; color: var(--text, #ddd); opacity: .7; line-height: 0; }
.panel .plist li .eye:hover { opacity: 1; }
.panel .plist li.hid .nm, .panel .plist li.hid .sw { opacity: .4; }
.panel .plist li.hid .eye { opacity: 1; color: var(--accent); }
#viewCube .centre { padding: 2px 10px; font-size: 10.5px; border-radius: 6px; background: transparent; backdrop-filter: none; width: 100%; }   /* (19 Oct) the camera to the grid's white mark */

/* (22 Oct) a clip / show box's zones: a button each, lit when tied */
/* (22 Oct) the Primitives panel's own bar of buttons, and a foot that shows only when there is something to say */
.panel .pbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); }
.panel .pbar button { padding: 5px 10px; font-size: 12px; }
.panel .pbar button.clear { margin-left: auto; }
.panel .pbar button.on { border-color: var(--accent); color: var(--accent); }
#primPanel footer:has(.status:empty) { display: none; }
/* (22 Oct) the Primitives panel's sections: Clip · Crop · Zones · Other, each with + Add */
.panel .psec { margin-top: 10px; }
.panel .psec .sech { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; }
.panel .psec .sech small { color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.panel .psec .sech button { padding: 3px 10px; font-size: 12px; flex: 0 0 auto; }
.panel .psec .plist { margin: 4px 0; }
/* (22 Oct) the right-click menu on a shape */
.pmenu { position: fixed; z-index: 60; min-width: 170px; padding: 4px; border-radius: 10px; background: #14161a; border: 1px solid var(--line, #333); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.pmenu button { display: block; width: 100%; text-align: left; padding: 6px 12px; border: 0; background: transparent; color: var(--text, #ddd); border-radius: 6px; font-size: 13px; }
.pmenu button:hover:not(:disabled) { background: rgba(255,176,32,.16); }
.pmenu button:disabled { opacity: .35; }
.pmenu hr { border: 0; border-top: 1px solid var(--line, #333); margin: 4px 2px; }
/* (22 Oct) one list; each shape is two lines: name · switch · eye · lock · bin, then its ticks */
.panel .plist li { flex-wrap: wrap; row-gap: 3px; }
.panel .plist li .ticks { flex: 1 0 100%; display: flex; gap: 11px; padding-left: 22px; font-size: 11px; color: var(--dim); }
.panel .plist li label.fcl { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.panel .plist li input.fc { width: 13px; height: 13px; margin: 0; accent-color: var(--accent, #ffb020); cursor: pointer; }
.panel .plist li input.fc:disabled { opacity: .25; cursor: default; }
.panel .plist li button.pw { flex: 0 0 auto; padding: 0 3px; border: 0; background: transparent; backdrop-filter: none; color: #3fd36b; line-height: 0; opacity: .85; }
.panel .plist li button.pw.isoff { color: #ff5d5d; opacity: 1; }
.panel .plist li.off .nm, .panel .plist li.off .ticks { opacity: .4; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }


/* (22 Oct) the tabbed panel: Primitives · Scans in one title bar */
.panel header .tabs { display: flex; gap: 2px; align-self: center; }
.panel header .tabs .tab { padding: 4px 10px; font-size: 13px; font-weight: 600; border-radius: 8px 8px 0 0; border: 1px solid transparent; background: transparent; color: var(--dim); }
.panel header .tabs .tab.on { color: var(--text, #eee); border-color: var(--line); border-bottom-color: transparent; background: rgba(255,255,255,.06); cursor: default; }
.panel header .tabs .tab:not(.on):hover { color: var(--accent, #ffb020); }

/* (22 Oct) THE VIEWPORTS: the pill bottom left of the picture (One · Two), a label on each, an orange frame round the picked one */
#viewPill { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(12,14,18,.82); border: 1px solid var(--line); }
/* (25 Oct, his: "ditch the orbit and walk button now. Move play to the bottom left corner with the other pill buttons") One · Two and ▶ Play together bottom left; the modes bar gone (keys 1 2 3 still work) */
#vpBar { position: absolute; left: 12px; bottom: 14px; z-index: 6; display: flex; gap: 8px; align-items: stretch; }
#vpBar #playPill, #vpBar #orbitPill { padding: 0 16px; font-size: 12px; background: rgba(12,14,18,.82); }
body:not(.visitor) #navbar { display: none; }
.vpLabel.low { bottom: 14px; }
.vpLabel button.ics { cursor: pointer; }
.vpLabel button.ics:hover { border-color: rgba(255,176,32,.6); }
#viewPill button { padding: 5px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--dim); font-size: 12px; }
#viewPill button.on { background: var(--accent, #ffb020); color: #111; }
.vpLabel { position: absolute; bottom: 58px; z-index: 6; display: flex; gap: 6px; align-items: center; }
.vpLabel[hidden], .vpFrame[hidden] { display: none; }
.vpLabel .kind { padding: 4px 10px; border-radius: 8px; background: rgba(12,14,18,.78); border: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--text, #eee); }
.vpLabel.pv .kind { color: #ffb020; border-color: rgba(255,176,32,.6); }
.vpLabel select { font-size: 12px; padding: 2px 4px; }
.vpLabel select[hidden] { display: none; }
.vpFrame { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); pointer-events: none; z-index: 5; }
/* (25 Oct, his: "first person view as blue and overview as green for the borders around the actual monitor") the picked one bright, the other faint — each in its own colour */
.vpFrame { border-color: rgba(60, 210, 110, .28); }
.vpFrame.pv { border-color: rgba(70, 150, 255, .32); }
.vpFrame.picked { border: 2px solid rgba(60, 210, 110, .9); }
.vpFrame.picked.pv { border-color: rgba(70, 150, 255, .95); }

.vpLabel .ics { padding: 4px 8px; border-radius: 8px; background: rgba(12,14,18,.78); border: 1px solid var(--line); font-size: 11px; color: #ffb020; }
.vpLabel .ics[hidden] { display: none; }

/* ══ 1.7 — THE SLIDE DESIGNER PORTED IN (23 Oct 2026) ══
   THE WORKSPACE TABS (After Effects' workspace switcher), in the bar top left after the menus */
#wsTabs { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(12,14,18,.82); border: 1px solid var(--line); pointer-events: auto; flex: 0 0 auto; }
#wsTabs button { border: 0; background: transparent; padding: 4px 13px; border-radius: 999px; font-size: 12.5px; color: var(--dim); }
#wsTabs button:hover { color: var(--ink); }
#wsTabs button.on { background: var(--accent); color: #111; font-weight: 600; }
/* THE SLIDE DESIGNER WORKSPACE: its page over the whole window under the bar, see-through in the middle; the viewport behind it is the whole
   width (the Composer's columns are put away, not closed: they come back as they were) */
#designerFrame { position: fixed; top: 44px; left: 0; right: 0; bottom: var(--vp-b, 0px); width: 100%; height: calc(100% - 44px - var(--vp-b, 0px)); border: 0; background: transparent;
  color-scheme: dark; z-index: 8; display: none; }
body.ws-designer #designerFrame { display: block; }
body.ws-designer #stage { left: 0 !important; right: 0 !important; }
body.ws-designer .rail, body.ws-designer #floats, body.ws-designer .rail-grip, body.ws-designer #topBtns, body.ws-designer #navbar,
body.ws-designer #viewBar, body.ws-designer #viewCube, body.ws-designer #facts, body.ws-designer #vpBar, body.ws-designer .vpLabel { display: none !important; }
body.ws-designer #toast { top: auto; bottom: 22px; left: 50%; z-index: 11; }
body.ws-designer #hotLayer { pointer-events: none !important; }
body.ws-designer #hotLayer * { pointer-events: none !important; }
/* HOTSPOTS IN THE ROOM (app/hotspots.js): drawn by app/callout.js, moved to their point each frame. Only the orb and the slides take the pointer */
#hotLayer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: hidden; }
#hotLayer .hot3d, .hotLayerMirror .hot3d { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; pointer-events: none; }
#hotLayer .hot { transform-style: flat; backface-visibility: visible; }
.otools select[data-a="face"] { flex: 0 0 auto; border: 0; border-left: 1px solid rgba(255, 255, 255, .07); background: transparent; color: var(--text, #e6e8ec); font: inherit; padding: 4px 8px; }
.otools select[data-a="face"]:disabled { opacity: .5; }
#hotLayer .hot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#hotLayer .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
#hotLayer .hot [data-callout] { pointer-events: auto; cursor: pointer; }
#hotLayer .hot.locked [data-callout] { pointer-events: none; cursor: default; }
/* THE SCENES PANEL (app/scenes-panel.js), with the list's own look (app/outline.css) */
#scenesPanel .olist { max-height: none; flex: 1 1 auto; }
#scenesPanel .says { margin: 4px 14px 10px; font-size: 11.5px; color: var(--dim); min-height: 1em; }
#scenesPanel .orow small { color: var(--accent); }
/* 1.7, round two: the bounding box round a picked hotspot (orb + slides), and the handle's arrows over a slide */
/* the slide's bounding box and corner squares: the Slide Designer's own look (blue line, white squares), constant size on screen */
#hotLayer .hotBox { position: absolute; border: calc(1px * var(--ik, 1)) solid rgba(143, 208, 245, .7); display: none; pointer-events: none; box-sizing: border-box; }
#hotLayer .hot.picked .hotBox { display: block; }
#hotLayer .hotCorner { position: absolute; width: calc(8px * var(--ik, 1)); height: calc(8px * var(--ik, 1)); margin: calc(-4px * var(--ik, 1)); background: #fff; border: calc(1.5px * var(--ik, 1)) solid #3d9ad1;
  border-radius: calc(1.5px * var(--ik, 1)); box-sizing: border-box; pointer-events: auto; }
#hotLayer .hot.locked .hotCorner { display: none; }
/* the primitives' corner squares (app/primitives.js): the same squares as a slide's, placed after every frame */
#primCorners { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
#primCorners .primCorner { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: #fff; border: 1.5px solid #3d9ad1; border-radius: 2px; box-sizing: border-box; pointer-events: auto; cursor: nwse-resize; }
#hotLayer .hotCorner.nw { left: 0; top: 0; cursor: nwse-resize; } #hotLayer .hotCorner.ne { left: 100%; top: 0; cursor: nesw-resize; }
#hotLayer .hotCorner.se { left: 100%; top: 100%; cursor: nwse-resize; } #hotLayer .hotCorner.sw { left: 0; top: 100%; cursor: nesw-resize; }
#hotLayer.gz .hot [data-callout] { pointer-events: none !important; }
/* round five: a picked hotspot is NOT dimmed (his: the orb and the stem must show while it is dragged); the marquee and the name go while it moves */
#hotLayer.dragging .hotBox { display: none !important; }

/* ══ 1.7, round three: the Project panel, the Scenes | Hotspots tabs, the Timeline placeholder along the bottom ══ */
/* THE BOTTOM PANEL (app/bottom-panel.js): blank; the picture, the columns, the nav bar and the designer all stop above it (--vp-b) */
#bottomPanel { position: fixed; left: var(--vp-l, 0px); right: var(--vp-r, 0px); bottom: 0;   /* (25 Oct, his: "the timeline is too wide … go to the edge of the viewport so we've got room for more docs down the sides": the picture's width, the columns run to the bottom) */ height: var(--bot-h, 210px); z-index: 6; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--glass); border-top: 1px solid var(--line); }
#bottomPanel header { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; flex: 0 0 auto; color: var(--dim); font-size: 12px; }
#bottomPanel header b { font-weight: 600; letter-spacing: .04em; }
#bottomPanel .fold { margin-left: auto; padding: 0 8px; background: transparent; border: 0; color: var(--dim); }
#bottomPanel .bp-body { flex: 1 1 auto; min-height: 0; }
#bottomPanel.folded .bp-body { display: none; }
#bottomPanel .bp-grab { position: absolute; left: 0; right: 0; top: -4px; height: 9px; cursor: ns-resize; z-index: 2; }
#bottomPanel .bp-grab:hover { background: linear-gradient(0deg, transparent 3px, rgba(255,176,32,.6) 3px, rgba(255,176,32,.6) 5px, transparent 5px); }
@media (max-width: 700px) { #bottomPanel { display: none; } }
/* a tab pair pulled APART: each reads as a plain title */
.panel[data-apart] header .tabs .tab:not(.on) { display: none; }
.panel[data-apart] header .tabs .tab.on { background: transparent; border-color: transparent; color: var(--ink, #eee); cursor: inherit; }
/* THE PROJECT PANEL: a file dragged over it */
#projectPanel.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }
#projectPanel .olist, #scenesPanel .olist { max-height: none; min-height: 90px; }
#projectPanel .says, #scenesPanel .says { margin: 4px 14px 10px; font-size: 11.5px; color: var(--dim); min-height: 1em; }
.panel .orow .oi { width: 20px; }
/* a zone's colour square is a DIAMOND in the Primitives list (his: "zones had a diamond instead of a square") */
.panel .plist li .sw.zn { border-radius: 2px; transform: rotate(45deg) scale(.78); }

/* the titles in the other viewports (hotspots.js mirrors): same look, no pointer */
.hotLayerMirror { position: absolute; left: 0; top: 0; pointer-events: none !important; z-index: 3; overflow: hidden; }
.hotLayerMirror * { pointer-events: none !important; }
.hotLayerMirror .hot { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hotLayerMirror .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.hotLayerMirror .hotBox { display: none !important; position: absolute; border: calc(1px * var(--ik, 1)) solid rgba(143, 208, 245, .7); box-sizing: border-box; }
.hotLayerMirror .hot.picked .hotBox { display: block !important; }      /* (25 Oct late) a picked hotspot's frame in the other viewport too — no corners there */
.hotLayerMirror .hotCorner { display: none !important; }
/* THE EYE (25 Oct late): overview only — no frame in the other viewport; nothing — no frame, corners or page handles anywhere */
body.noGiz .hotLayerMirror .hotBox, body.noGiz #hotLayer .hotBox, body.noGiz #pagesLayer .hotBox, body.noGiz #primCorners, body.noGiz #luDots { display: none !important; }      /* (the gizmos switch, 25 Oct: the frames round what is picked and the handles' squares go with it) */

/* THE HOME PAGE on the web (25 Oct 2026, his: Explore hides it and a little home icon top left brings it back; the camera flies between the two positions): a plain title and an Explore button for now — the designed 2D page replaces it later */
#homePage { position: fixed; inset: 0; z-index: 8; display: none; align-items: flex-end; justify-content: center; padding-bottom: 12vh; background: linear-gradient(transparent 35%, rgba(0,0,0,.55)); }
#homePage.on { display: flex; }
#homePage .hpIn { text-align: center; color: #fff; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
#homePage h1 { margin: 0 0 22px; font-weight: 200; font-size: clamp(26px, 5vw, 56px); letter-spacing: .28em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
#hpExplore { padding: 14px 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 16px; letter-spacing: .3em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#hpExplore:hover { background: rgba(255,255,255,.25); }
#homeIcon:not(.navPill) { position: fixed; left: max(12px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + 54px); z-index: 7; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(16,18,22,.55); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#homeIcon:not(.navPill)[hidden] { display: none; }
body.homeOn #navbar, body.homeOn .q-gear, body.homeOn #resetCam { opacity: 0; pointer-events: none; }
/* RESET CAMERA (his, 29 Oct): the visitor's icon, bottom right; the modes bar (a page with no tour) sits to its left. Gone over the Home page and the floor plan, as the bar is */
#resetCam { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 7; transition: opacity .4s, background .3s, border-color .3s; }
body.planOn #resetCam { opacity: 0; pointer-events: none; }/* the Floor plan panel's settings (app/plan-panel.js) — and the Project settings panel's, the same look (app/project-settings.js) */
#planPanel .fpForm{ padding: 6px 12px 4px; }
#projectPanel .projSet { padding: 4px 12px 8px; }      /* (29 Oct) the Reset camera slider under the file list */
#planPanel .fpForm > b{ display: block; margin: 10px 0 2px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
#planPanel .fpForm > b:first-child{ margin-top: 2px; }
#planPanel .fpForm > small{ display: block; color: var(--dim); font-size: 11px; margin: 3px 0 6px; }
/* THE SETTINGS BLOCK (app/settings-block.js) at the top of the Settings panel — the presentation, or the picked thing */
#propsPanel .pp-sw { padding: 0 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#propsPanel .pp-sw[hidden] { display: none; }
#propsPanel .pp-sw .swWho { display: block; margin: 4px 0 2px; font-size: 12.5px; font-weight: 600; color: #fff; text-transform: none; letter-spacing: 0; }
#propsPanel .pp-sw .swForm .row { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 12px; }
#propsPanel .pp-sw .swForm .row > span { flex: 0 0 auto; }
#propsPanel .pp-sw .swForm .row select { flex: 1 1 auto; min-width: 0; }
#propsPanel .pp-sw .swForm .row input[type=range] { flex: 1 1 auto; min-width: 0; }
#propsPanel .pp-sw .swForm { padding: 6px 12px 4px; }
#propsPanel .pp-sw .swForm > b { display: block; margin: 10px 0 2px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
#propsPanel .pp-sw .swForm > b:first-child { margin-top: 2px; }
#propsPanel .pp-sw .swForm > small { display: block; color: var(--dim); font-size: 11px; margin: 3px 0 6px; }
#propsPanel .pp-sw .swForm > small em { font-style: normal; color: var(--text, #eee); }
#propsPanel .pp-sw .swForm > small.psLater { margin-top: 12px; font-style: italic; opacity: .8; }
#propsPanel .pp-sw .ticks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 4px; }
#propsPanel .pp-sw .ticks .tick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
#propsPanel .pp-sw .btns { display: flex; gap: 6px; margin: 6px 0 4px; }
/* THE CUE SHEET (app/cue-sheet.js) — cards left to right across the bottom panel, above the Timeline's place */
#cueStrip { height: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; box-sizing: border-box; font-size: 11.5px; line-height: 1.35; color: var(--text, #eee); }
#cueStrip .cueRow { display: flex; align-items: stretch; gap: 0; min-width: max-content; height: 100%; }
#cueStrip .cue { position: relative; flex: 0 0 auto; width: 230px; max-height: 100%; overflow: auto; padding: 8px 10px 8px 12px; border: 1px solid var(--edge, #3a3a3a); border-left: 3px solid var(--accent); border-radius: 4px; background: rgba(255, 255, 255, .035); box-sizing: border-box; }
#cueStrip .cue.tour { width: auto; min-width: 300px; max-width: 760px; }
#cueStrip .cue.dim { opacity: .6; border-left-color: var(--dim); }
#cueStrip .cue > b { position: absolute; right: 8px; top: 5px; font-size: 18px; line-height: 1; color: var(--accent); opacity: .5; }
#cueStrip .cue h4 { margin: 0 24px 4px 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
#cueStrip .cue p { margin: 0 0 3px; }
#cueStrip .cue p.leads { color: var(--dim); font-size: 11px; margin-top: 4px; }
#cueStrip .cue em { font-style: normal; color: var(--accent); }
#cueStrip .cue i.n { font-style: normal; color: #e0a040; }
#cueStrip .cue i.y { font-style: normal; color: #7cd67c; }
#cueStrip .sw { display: inline-block; margin: 2px 0 4px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 10.5px; letter-spacing: .02em; }
#cueStrip .own { display: block; margin-top: 3px; font-size: 10px; color: var(--dim); }
#cueStrip .stops { display: flex; align-items: stretch; gap: 0; margin: 6px 0 4px; }
#cueStrip .stop { position: relative; flex: 0 0 auto; width: 118px; padding: 6px 8px 6px 9px; border: 1px solid var(--edge, #3a3a3a); border-radius: 3px; background: rgba(0, 0, 0, .25); box-sizing: border-box; }
#cueStrip .stop > b { position: absolute; right: 6px; top: 3px; font-size: 13px; color: var(--accent); opacity: .6; }
#cueStrip .stop h5 { margin: 0 16px 2px 0; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cueStrip .stop p { margin: 0; font-size: 10.5px; color: var(--dim); }
#cueStrip .stopArrow { align-self: center; padding: 0 4px; color: var(--dim); font-size: 14px; }
#cueStrip .cueArrow { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 8px; color: var(--accent); font-size: 20px; line-height: 1; }
#cueStrip .cueArrow em { font-style: normal; font-size: 10px; color: var(--dim); letter-spacing: .03em; white-space: nowrap; margin-bottom: 2px; }
/* THE SWITCHBOARD's dials, folded under their ticks */
#propsPanel .pp-sw .dials { margin: 2px 0 2px; }
#propsPanel .pp-sw .foldBtn { display: block; width: 100%; text-align: left; padding: 4px 6px; border: 0; background: transparent; color: var(--dim); font-size: 11.5px; cursor: pointer; }
#propsPanel .pp-sw .foldBtn:hover { color: var(--text, #eee); }
#propsPanel .pp-sw .dials.open .foldBtn { color: var(--text, #eee); }
#propsPanel .pp-sw .dialsIn { margin: 0 0 6px 8px; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); }
#propsPanel .pp-sw .dialsIn select { width: 100%; margin-top: 4px; }
#propsPanel .pp-sw .dialsIn > small.psSub { display: block; margin: 8px 0 0; color: var(--dim); font-size: 11px; }
#propsPanel .pp-sw .seg.kinds { margin: 3px 0 4px; }
#propsPanel .pp-sw .seg.kinds button { font-size: 11.5px; white-space: nowrap; }
/* A STOP'S OWN SWITCHES (app/scenes-panel.js) — above the list, below the buttons */
#planPanel .fpForm select{ width: 100%; margin-top: 4px; }
#planPanel .fpForm .btns { margin: 8px 0 4px; }
/* the visitor's HOME · FLOOR PLAN (view.html #navPills; the look is hotspots.css .navPill) — where the house icon was */
#navPills { position: fixed; right: max(12px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 54px); z-index: 7; }
body.planOn #navbar, body.planOn .q-gear { opacity: 0; pointer-events: none; transition: opacity .4s; }
/* the client's page: the camera's modes go bottom RIGHT (his, 25 Oct night: "we can move the navigation modes over to the bottom right") — bottom centre is the tour's Next / Previous */
body.visitor #navbar { left: auto; right: calc(max(16px, env(safe-area-inset-right)) + 58px); transform: none; }      /* (to the left of the reset icon) */
/* the Hotspots list's Headings / Details buttons (show or hide each kind in the views): struck through while hidden */
.otools button.kind.off { color: var(--mute, #8a919c); text-decoration: line-through; }
/* one mode to explore in (a page with a tour): the modes bar goes — the Explore / Tour pill is bottom centre */
body.visitor.oneMode #navbar { display: none; }
/* THE DEBUG PANEL (app/debug-panel.js; View › Debug monitor) — the frames, the scans on screen, the cameras, the visitor, and the log newest first */
#debugPanel .dbg-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#debugPanel .dbg-stats { padding: 8px 14px 2px; font-size: 11.5px; line-height: 1.4; }
#debugPanel .dbg-stats b.hdr { display: block; margin: 8px 0 2px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
#debugPanel .dbg-stats b.hdr:first-child { margin-top: 0; }
#debugPanel .dbg-stats .r { display: flex; gap: 8px; margin: 1px 0; }
#debugPanel .dbg-stats .r > span:first-child { flex: 0 0 36%; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#debugPanel .dbg-stats .r > span:last-child { flex: 1 1 auto; min-width: 0; }
#debugPanel .dbg-stats .slow { color: #e0a040; }
#debugPanel .dbg-stats .idle { color: var(--dim); font-style: italic; }
#debugPanel .otools { flex: 0 0 auto; }
#debugPanel .dbg-log { flex: 1 1 auto; min-height: 90px; margin: 0; padding: 6px 14px 10px; overflow: auto; font: 10.5px/1.45 ui-monospace, Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; word-break: break-word; color: var(--text, #eee); }
#debugPanel .dbg-log .error { color: #ff7a7a; }
#debugPanel .dbg-log .warn { color: #e0a040; }
#debugPanel .dbg-log .toast { color: #9ecbff; }
#debugPanel .dbg-log .mark { color: #7cd67c; font-weight: 600; }
#debugPanel .dbg-log .note { color: var(--dim); }
/* THE STORYBOARD (his word, 25 Oct night, for the cue sheet): its name at the left of the cards; a stop's scan (the gallery, app/gallery.js) on its square */
#cueStrip .cueTitle { flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 4px 0 -4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#cueStrip .stop p.scan { color: var(--accent); font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* THE WIZARD (app/wizard.js; his, 26 Oct: "this is the wizard that lives inside it" — then: "bigger than a fucking docking panel … give me a window … step by step"): a BIG WINDOW over the
   picture, the steps down the left, the step on the right; a STRIP at the top of the picture while you work in the room; every explanation a HOVER HINT (#wzTip) */
#wizardWin { position: fixed; inset: 0; z-index: 19; display: flex; align-items: center; justify-content: center; }
#wizardWin[hidden], #wizardStrip[hidden], #wzTip[hidden] { display: none !important; }
#wizardWin .wzScrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#wizardWin .wzCard { position: relative; display: flex; flex-direction: column; width: min(1500px, calc(100vw - 48px)); height: min(880px, calc(100vh - 48px));
  background: var(--frame, #272b32); border: 1px solid var(--edge, #3f444d); border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .65); overflow: hidden; color: var(--text, #e6e8ec); }
#wizardWin header { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 22px; background: var(--strip, #131518); border-bottom: 1px solid var(--edge-dark, #0c0d0f); }
#wizardWin header b { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: #fff; }
#wizardWin header .wzTitle { flex: 1 1 auto; font-size: 13px; color: var(--mute, #9aa1ac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wizardWin header .x { border: 0; background: transparent; backdrop-filter: none; font-size: 16px; padding: 4px 10px; color: var(--mute, #9aa1ac); }
#wizardWin header .x:hover { color: #ff8a7e; }
#wizardWin .wzMain { flex: 1 1 auto; min-height: 0; display: flex; }
#wizardWin .wzSteps { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--well, #1a1c20); border-right: 1px solid var(--edge-dark, #0c0d0f); overflow: auto; }
#wizardWin .wzSteps button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; backdrop-filter: none; color: var(--mute, #9aa1ac); font-size: 14px; }
#wizardWin .wzSteps button i { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--edge, #3f444d); font-style: normal; font-size: 12px; font-weight: 600; }
#wizardWin .wzSteps button:hover { color: var(--text, #e6e8ec); background: rgba(255, 255, 255, .04); }
#wizardWin .wzSteps button.on { color: #fff; background: var(--frame, #272b32); border-color: var(--edge, #3f444d); }
#wizardWin .wzSteps button.on i { border-color: var(--accent); color: var(--accent); }
#wizardWin .wzSteps button.done i { background: rgba(124, 214, 124, .15); border-color: #7cd67c; color: #7cd67c; }
#wizardWin .wzSteps button.done i::before { content: '✓'; }
#wizardWin .wzSteps button.done:not(.on) i { font-size: 0; }
#wizardWin .wzSteps button.done:not(.on) i::before { font-size: 13px; }
#wizardWin .wzSteps button.done.on i::before { content: none; }
#wizardWin .wzBody { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 22px 34px 26px; font-size: 14px; line-height: 1.5; }
#wizardWin .wzBody h3 { margin: 0 0 14px; font-size: 22px; font-weight: 600; color: #fff; }
#wizardWin .wzBody h4 { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute, #9aa1ac); }
#wizardWin .wzBody p { margin: 0 0 10px; }
#wizardWin .wzBody p.lede { font-size: 15px; color: var(--text, #e6e8ec); }
#wizardWin .wzBody p.dim, #wizardWin .wzBody small { display: block; color: var(--mute, #9aa1ac); font-size: 12.5px; margin: 4px 0 8px; }
#wizardWin .wzBody em { font-style: normal; color: var(--accent); }
#wizardWin .wzBody .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
#wizardWin .wzBody .btns button { font-size: 13.5px; padding: 8px 16px; border-radius: 10px; background: var(--well, #1a1c20); backdrop-filter: none; border-color: var(--edge, #3f444d); }
#wizardWin .wzBody .btns button:hover { border-color: rgba(255, 255, 255, .4); }
#wizardWin .wzBody .btns button.big { flex: 1 1 100%; padding: 14px 18px; font-size: 15px; font-weight: 600; }
#wizardWin .wzBody .btns button.go, #wizardWin .wzFoot button.go, #wizardStrip button.go { border-color: var(--accent); color: #fff; font-weight: 600; }
#wizardWin .wzBody .btns button.big.go { background: rgba(255, 176, 32, .12); }
#wizardWin .wzBody .row { display: flex; align-items: center; gap: 12px; margin: 6px 0; max-width: 640px; }
#wizardWin .wzBody .row > span:first-child { flex: 0 0 auto; min-width: 150px; color: var(--mute, #9aa1ac); }
#wizardWin .wzBody .row select, #wizardWin .wzBody .row input[type=range], #wizardWin .wzBody .row input[type=text] { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 6px 10px; }
#wizardWin .wzBody .row select option { background: #1b1b20; }
#wizardWin .wzBody .ticks { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 6px 0 10px; }
#wizardWin .wzBody .tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
#wizardWin .wzBody .tick input { width: 16px; height: 16px; accent-color: var(--accent); }
#wizardWin .wzBody ul.stops { list-style: none; margin: 10px 0; padding: 0; max-width: 820px; }
#wizardWin .wzBody ul.stops li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--edge-dark, #0c0d0f); }
#wizardWin .wzBody ul.stops li b { color: var(--accent); min-width: 18px; text-align: right; }
#wizardWin .wzBody ul.stops li input[type=text] { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 6px 10px; }
#wizardWin .wzBody ul.stops li select { max-width: 34%; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 5px 8px; }
#wizardWin .wzBody ul.stops li button { padding: 5px 10px; border-radius: 8px; backdrop-filter: none; background: transparent; }
#wizardWin .wzBody ul.stops li small { display: inline; margin: 0; }
#wizardWin .wzBody .sum { margin: 4px 0; font-size: 15px; }
#wizardWin .wzBody i.y { font-style: normal; color: #7cd67c; }
#wizardWin .wzBody i.n { font-style: normal; color: var(--mute, #9aa1ac); }
#wizardWin .wzFoot { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--strip, #131518); border-top: 1px solid var(--edge-dark, #0c0d0f); }
#wizardWin .wzFoot button { padding: 9px 20px; font-size: 14px; border-radius: 10px; backdrop-filter: none; background: var(--well, #1a1c20); border-color: var(--edge, #3f444d); }
#wizardWin .wzFoot .wzSays { flex: 1 1 auto; text-align: center; font-size: 13px; color: var(--accent); }
/* THE STRIP: along the top of the picture, the Wizard's step and its controls, the picture free */
#wizardStrip { position: fixed; top: 44px; left: calc(var(--vp-l, 0px) + 10px); right: calc(var(--vp-r, 0px) + 10px); z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px 7px 14px;
  background: rgba(19, 21, 24, .94); border: 1px solid var(--edge, #3f444d); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: 13px; color: var(--text, #e6e8ec); pointer-events: auto; }
#wizardStrip .wzWhere { flex: 0 0 auto; color: #fff; }
#wizardStrip .wzWhere::before { content: 'Wizard · '; color: var(--mute, #9aa1ac); font-weight: 400; }
#wizardStrip .wzSays { flex: 1 1 auto; min-width: 0; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wizardStrip .wzQuick { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#wizardStrip .wzQuick .row { display: inline-flex; align-items: center; gap: 6px; }
#wizardStrip .wzQuick .row > span:first-child { color: var(--mute, #9aa1ac); }
#wizardStrip .wzQuick select { max-width: 170px; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 4px 8px; }
#wizardStrip .wzQuick select option { background: #1b1b20; }
#wizardStrip .wzQuick input[type=range] { width: 110px; }
#wizardStrip button { padding: 5px 12px; font-size: 13px; border-radius: 8px; backdrop-filter: none; background: var(--well, #1a1c20); border-color: var(--edge, #3f444d); }
/* THE HINT: one, under the pointer, after a moment; gone when the pointer leaves */
#wzTip { position: fixed; z-index: 30; max-width: 340px; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text, #e6e8ec); background: rgba(11, 12, 14, .97); border: 1px solid var(--edge, #3f444d); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none; }
/* THE LIVE PREVIEW IN THE WIZARD (his, 26 Oct: "a little preview window so I can see what's going on as we build"): the picture itself is sized into the cell at the window's right while the window is up */
#wizardWin .wzView { display: none; flex: 0 0 clamp(340px, 34%, 620px); flex-direction: column; gap: 6px; padding: 18px 18px 14px 0; box-sizing: border-box; }
#wizardWin.withView .wzView { display: flex; }
#wizardWin .wzHole { flex: 1 1 auto; min-height: 220px; border-radius: 10px; background: #000; }
#wizardWin .wzView small { color: var(--mute, #9aa1ac); font-size: 12px; text-align: center; }
body.wizardView #stage { left: var(--wzL) !important; top: var(--wzT) !important; right: var(--wzR) !important; bottom: var(--wzB) !important; z-index: 21; border-radius: 10px; box-shadow: 0 0 0 1px var(--edge, #3f444d); }
body.wizardView #navbar, body.wizardView #viewCube, body.wizardView #vpBar, body.wizardView .vpLabel { display: none !important; }
/* THE ROOMS LIST (the Wizard's step 3): a row a room; a waiting one is dimmed with its Place button; "Next: Kitchen" in the strip */
#wizardWin .wzBody ul.rooms { max-width: none; }
#wizardWin .wzBody ul.rooms li.wait > input[type=text] { opacity: .85; }
#wizardWin .wzBody ul.rooms li input[data-line] { flex: 1.2 1 auto; }
#wizardWin .wzBody ul.stops li .nmT { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wizardWin .wzBody ul.passes { list-style: none; margin: 2px 0 10px; padding: 0; }
#wizardWin .wzBody ul.passes li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
#wizardWin .wzBody ul.passes li b { width: 18px; text-align: right; opacity: 0.6; }
#wizardWin .wzBody ul.passes li .nmP { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wizardWin .wzBody ul.passes li .warn { color: #ffb84d; font-style: normal; white-space: nowrap; }
#propsPanel .psWarn { color: #ffb84d; }
#wizardWin .wzBody ul.rooms .tag { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--mute, #9aa1ac); border: 1px dashed var(--edge, #3f444d); }
#wizardWin .wzBody ul.rooms li button.go { border-color: var(--accent); color: #fff; font-weight: 600; }
#wizardStrip .wzNext { flex: 0 0 auto; color: #fff; font-weight: 600; }
/* the rooms list, two lines a room: name and buttons, then its line */
#wizardWin .wzBody ul.rooms li { flex-wrap: wrap; gap: 6px 8px; padding: 8px 0; }
#wizardWin .wzBody ul.rooms li .nm { flex: 1 1 150px; }
#wizardWin .wzBody ul.rooms li .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
#wizardWin .wzBody ul.rooms li .ln { flex: 1 1 100%; margin-left: 30px; }
#wizardWin .wzBody ul.rooms li input[data-line] { flex: 1 1 100%; }
#wizardWin .wzBody ul.rooms li .nm { flex: 1 1 90px; min-width: 90px; }
#wizardWin .wzBody ul.rooms li .acts { flex-wrap: nowrap; }
#wizardWin .wzBody ul.rooms li .acts button { padding: 5px 8px; }
/* the home and builder questions (step 1): labelled boxes in a column; the four small details on one line */
#wizardWin .wzBody .row.sm { max-width: 640px; }
#wizardWin .wzBody .row.sm .mini { display: flex; flex-direction: column; gap: 3px; flex: 1 1 60px; min-width: 0; }
#wizardWin .wzBody .row.sm .mini em { font-size: 11px; color: var(--mute, #9aa1ac); }
#wizardWin .wzBody .row.sm .mini input { width: 100%; box-sizing: border-box; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 6px 8px; }
#wizardWin .wzBody label.row input[type=text] { flex: 1 1 auto; }
/* THE LOOK STEP: the look as a real heading in a box, ‹ › to flip */
#wizardWin .wzFlip { display: flex; gap: 8px; align-items: center; max-width: 640px; margin: 4px 0 10px; }
#wizardWin .wzFlip select { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 8px; padding: 8px 10px; }
#wizardWin .wzFlip button { padding: 8px 16px; font-size: 18px; line-height: 1; border-radius: 10px; backdrop-filter: none; background: var(--well, #1a1c20); border-color: var(--edge, #3f444d); }
#wizardWin .wzLookPic { position: relative; height: 300px; max-width: 640px; overflow: hidden; border-radius: 12px; border: 1px solid var(--edge, #3f444d); background: radial-gradient(120% 120% at 30% 20%, #3a3f48 0%, #16181c 70%); margin: 4px 0 10px; }
.lookPic .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.lookPic .callout > svg { width: 1px !important; height: 1px !important; }
#wizardStrip .wzLookTag { flex: 0 0 auto; color: var(--mute, #9aa1ac); font-size: 12px; }
#wizardStrip .wzQuick .tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
#wizardStrip .wzQuick .tick input { accent-color: var(--accent); }
/* THE HOME PAGE'S BUTTON TICKS: the contacts sit under Enquire */
#wizardWin .ticks.sub { margin: 0 0 6px 22px; }
/* THE SECOND ROUND: a label under the step list */
#wizardWin .wzRound { display: block; margin: 8px 8px 0; color: var(--accent, #f90); font-size: 11px; line-height: 1.3; }

/* the two tracks of a scan change (26 Oct, the Settings panel) */
#propsPanel .swTl { margin: 6px 0 4px; padding: 6px 8px 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.03); }
#propsPanel .swTl .tlHead { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
#propsPanel .swTl .tlRow { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
#propsPanel .swTl .tlRow > span { flex: 0 0 56px; }
#propsPanel .swTl .tlTrack { position: relative; flex: 1 1 auto; height: 18px; border-radius: 4px; background: rgba(255,255,255,.06); }
#propsPanel .swTl .tlBar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; cursor: grab; touch-action: none; }
#propsPanel .swTl .tlBar:active { cursor: grabbing; }
#propsPanel .swTl .tlMove { background: #3d7bd9; cursor: ew-resize; }
#propsPanel .swTl .tlDis { background: #e0902f; }
#propsPanel .swTl .tlH { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; background: rgba(255,255,255,.55); border-radius: 0 3px 3px 0; }
#propsPanel .swTl .tlNums { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 12px; }
#propsPanel .swTl .tlN { display: flex; align-items: center; gap: 4px; }
#propsPanel .swTl .tlN input { width: 52px; }

/* the Wizard's brand step (26 Oct) */
#wizardWin .wzFound { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid var(--edge, rgba(255,255,255,.12)); border-radius: 10px; background: rgba(255,255,255,.03); max-width: 640px; }
#wizardWin .wzFound b { display: block; font-size: 13px; }
#wizardWin .wzFound small { display: block; margin-top: 3px; opacity: .8; }
#wizardWin .wzLogos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#wizardWin .wzLogos button { width: 92px; height: 56px; padding: 4px; border-radius: 8px; background: #fff; border: 2px solid transparent; backdrop-filter: none; }
#wizardWin .wzLogos button:hover { border-color: var(--accent, #ffb020); }
#wizardWin .wzLogos img, #wizardWin .wzLogoNow img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; }
#wizardWin .wzLogoNow { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
#wizardWin .wzLogoNow img { height: 44px; width: auto; max-width: 160px; background: #fff; padding: 4px; border-radius: 6px; }
#wizardWin .wzPal { display: flex; gap: 8px; margin: 4px 0 8px; }
#wizardWin .wzPal button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); padding: 0; backdrop-filter: none; }
#wizardWin input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--edge, rgba(255,255,255,.2)); border-radius: 6px; background: none; }

/* the drawing pill (26 Oct): the Wizard's pen — peel the ceiling, confirm and return */
#drawPill { position: fixed; bottom: calc(var(--vp-b, 210px) + 58px); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgba(20,22,26,.92); border: 1px solid var(--accent, #ffb020); box-shadow: 0 6px 24px rgba(0,0,0,.5); color: #fff; font-size: 12px; white-space: nowrap; }
#drawPill[hidden] { display: none !important; }
#drawPill label { display: inline-flex; align-items: center; gap: 8px; }
#drawPill input[type=range] { width: 150px; }
#drawPill button { border-radius: 999px; padding: 7px 16px; font-weight: 600; background: var(--accent, #ffb020); color: #111; border: 0; cursor: pointer; }
#drawPill button[data-next] { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); }
#drawPill { flex-wrap: wrap; justify-content: center; max-width: 92vw; border-radius: 22px; }
#drawPill .dpHint { flex: 0 0 100%; text-align: center; color: var(--mute, #b8bec9); font-size: 11px; white-space: normal; margin-bottom: 2px; }
#drawPill button[data-join], #drawPill button[data-del] { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); }
#drawPill button[hidden], #drawPill label[hidden] { display: none; }
#primCorners .primFace { width: 11px; height: 11px; left: -5.5px; top: -5.5px; border-radius: 1px; border: 1.5px solid rgba(0, 0, 0, 0.55); }      /* (26 Oct) the six middle-of-a-side squares: one axis only — (27 Oct, his: "little squares, coloured squares again") square, in the colour of their axis, as the Move arrows: X red, Y green, Z blue */
#primCorners .primFace[data-axis="0"] { background: #f0524a; }
#primCorners .primFace[data-axis="1"] { background: #5fd35a; }
#primCorners .primFace[data-axis="2"] { background: #4d8df5; }
#primCorners .primFace:hover { filter: brightness(1.35); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
#primCorners .primFace[data-axis="0"] { cursor: ew-resize; }
#primCorners .primFace[data-axis="1"] { cursor: ns-resize; }
#primCorners .primFace[data-axis="2"] { cursor: nesw-resize; }
#drawPill .dpTools { display: inline-flex; gap: 0; }
#drawPill .dpTools[hidden] { display: none; }
#drawPill .dpTools button { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); border-radius: 0; padding: 7px 12px; }
#drawPill .dpTools button:first-child { border-radius: 999px 0 0 999px; }
#drawPill .dpTools button:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
#drawPill .dpTools button.on { background: var(--accent, #ffb020); color: #111; }
/* (27 Oct) the ceiling slider: wide, with a number; the shape kinds (the outside · the building · just a shape) and the ticks that set them up; draw another / done */
#drawPill { gap: 7px 12px; padding: 8px 12px; }
#drawPill .dpPeel { flex: 1 0 100%; justify-content: center; }
#drawPill .dpPeel input[type=range] { width: 240px; }
#drawPill .dpPeel .dpPeelV { font-style: normal; color: var(--mute, #b8bec9); min-width: 108px; text-align: left; }
#drawPill .dpKinds { flex: 1 0 100%; display: flex; justify-content: center; align-items: center; gap: 0; }
#drawPill .dpKinds[hidden], #drawPill .dpRules[hidden] { display: none; }
#drawPill .dpKinds b { width: 62px; margin-right: 8px; font-weight: 600; color: var(--mute, #b8bec9); text-align: right; }
#drawPill .dpKinds button { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); border-radius: 0; padding: 5px 12px; }
#drawPill .dpKinds button:nth-of-type(1) { border-radius: 999px 0 0 999px; }
#drawPill .dpKinds button:nth-of-type(3) { border-radius: 0 999px 999px 0; border-left: 0; }
#drawPill .dpKinds button:nth-of-type(2) { border-left: 0; }
#drawPill .dpKinds button.on { background: var(--accent, #ffb020); color: #111; }
#drawPill .dpRules { flex: 1 0 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#drawPill .dpRule { display: inline-flex; align-items: center; gap: 0; }
#drawPill .dpRule b { width: 62px; margin-right: 8px; font-weight: 600; color: var(--mute, #b8bec9); text-align: right; }
#drawPill .dpRule button { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); border-radius: 0; padding: 4px 11px; font-size: 11.5px; }
#drawPill .dpRule button:nth-of-type(1) { border-radius: 999px 0 0 999px; }
#drawPill .dpRule button:nth-of-type(2) { border-left: 0; }
#drawPill .dpRule button:nth-of-type(3) { border-radius: 0 999px 999px 0; border-left: 0; }
#drawPill .dpRule button.on { background: var(--accent, #ffb020); color: #111; }
#drawPill button[data-more] { background: transparent; color: #fff; border: 1px solid var(--accent, #ffb020); }

/* (26 Oct, QA at 900 px wide: the form's boxes shrank to three letters) a narrow window: the label sits over its box, the form has less padding */
@media (max-width: 1050px) {
  #wizardWin .wzBody { padding: 18px 16px 22px; }
  #wizardWin .wzBody .row { flex-wrap: wrap; gap: 4px 12px; }
  #wizardWin .wzBody .row > span:first-child { flex: 1 1 100%; min-width: 0; }
  #wizardWin .wzBody .row select, #wizardWin .wzBody .row input[type=text] { flex: 1 1 160px; }
}
/* (28 Oct) THE MODE TABS: Hotspots · Camera · Primitives · Build, above the left column; the camera panel's own tabs go while the Camera tab is up (every section shows) */
#modeTabs { position: fixed; left: 12px; top: 52px; z-index: 5; display: flex; width: var(--rail-l, 310px); }
#modeTabs button { flex: 1; padding: 5px 4px; font-size: 12px; background: var(--tab, #3a3f48); color: #cfd3da; border: 1px solid rgba(255,255,255,.12); border-bottom: 2px solid transparent; margin-left: -1px; cursor: pointer; }
#modeTabs button:first-child { border-radius: 6px 0 0 0; margin-left: 0; } #modeTabs button:last-child { border-radius: 0 6px 0 0; }
#modeTabs button.on { background: var(--frame, #272b32); color: #fff; border-bottom-color: var(--accent, #d68a1f); }
@media (min-width: 701px) { #railL { top: 80px !important; } }
@media (max-width: 700px) { #modeTabs { display: none; } }
/* (28 Oct) the Camera panel has two tabs again, Camera and Bindings, in the Camera mode too */
#camPanel .camnow { margin: 4px 14px 2px; font-size: 12px; color: var(--dim); }
#camPanel .camnow b { color: var(--accent, #ffb020); font-weight: 600; }
#drawPill .dpLevel { flex: 1 0 100%; justify-content: center; display: flex; align-items: center; gap: 8px; }
#drawPill .dpLevel input[type=range] { width: 240px; }
#drawPill .dpLevel .dpLevelV { font-style: normal; color: var(--mute, #b8bec9); min-width: 108px; }
/* (28 Oct, his: "I don't want any ceiling peeling … I don't need any extra buttons there") the drawing pill is the pen, Arrow / Pen, OK — the rest are set in the panel afterwards */
#drawPill .dpPeel, #drawPill .dpLevel, #drawPill .dpKinds, #drawPill .dpRules { display: none !important; }
.panel .row[hidden], .panel .row.ext[hidden] { display: none !important; }
/* (28 Oct) THE STOPS VIEW: only the Stops panel; hotspots show, pages and boxes do not */
body.mode-stops #pagesLayer, body.mode-stops #pagesLive { visibility: hidden !important; }
#stopsPanel .stBody { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
#stopsPanel .stBtns button { width: 100%; padding: 8px 10px; }
#stopsPanel .stBtns small { opacity: .6; margin-left: 6px; }
#stopsPanel .stList { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
#stopsPanel .stList li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: default; }
#stopsPanel .stList li.on { background: rgba(255, 176, 32, .18); outline: 1px solid var(--accent, #d68a1f); }
#stopsPanel .stList li b { width: 18px; text-align: right; opacity: .6; }
#stopsPanel .stList li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
#stopsPanel .stList li button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0 4px; }
#stopsPanel .stList li button[data-del]:hover { color: #ff5d5d; }
#stopsPanel .stName { flex: 1; min-width: 0; }
#stopsPanel .stSays { font-size: 12px; opacity: .75; margin: 0; }
/* (28 Oct) WORKS WHEN THE CAMERA IS IN — the zone list on a picked shape */
.panel .zoneBox { margin: 8px 0; }
.panel .zoneBox h4 { margin: 6px 0 4px; }
.panel .zoneBox .zlist { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; padding: 5px 6px; background: var(--well, #1a1c20); border-radius: 4px; }
.panel .zoneBox .zrow { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.panel .zoneBox .zrow input { margin: 0; }
.panel .zoneBox .zinv { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.panel .zoneBox .zinv[hidden] { display: none; }
.panel .zoneBox .zlive { margin: 4px 0; font-size: 12px; min-height: 1em; }
/* THE BACKGROUND PANEL (app/sky-panel.js) — the dialog's look, in a panel */
#skyPanel .fpForm { padding: 6px 12px 8px; }
#skyPanel .fpForm > b { display: block; margin: 10px 0 2px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
#skyPanel .fpForm > b:first-child { margin-top: 2px; }
#skyPanel .f > label { display: block; font-size: 11.5px; color: var(--dim); margin-top: 6px; }
#skyPanel .bgrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
#skyPanel .bgrow input[type=color] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
#skyPanel .bgrow .sw { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); }
#skyPanel .zoneList { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; margin: 6px 0 8px; }
#skyPanel .zrow { display: flex; justify-content: space-between; gap: 12px; }
#skyPanel .zrow .inv { flex: none; opacity: .85; }
#sheet .zrow { display: flex; justify-content: space-between; gap: 12px; }
#sheet .zrow .inv { flex: none; opacity: .85; }
#sheet .zoneList { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; margin: 6px 0 10px; }
#sheet h3 { margin: 12px 0 4px; font-size: 13px; }
/* (28 Oct, his: the lit mode tab outlined all the way round) */
#modeTabs button.on { border: 2px solid var(--accent, #d68a1f); position: relative; z-index: 1; }
.panel .feelgrid .fgchips { display: flex; gap: 4px; margin-bottom: 6px; }
.panel .feelgrid .fgchips button { flex: 1; padding: 5px 2px; font-size: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: var(--tab, #3a3f48); color: #cfd3da; cursor: pointer; }
.panel .feelgrid .fgchips button.on { border-color: var(--accent, #d68a1f); color: #fff; background: var(--frame, #272b32); box-shadow: inset 0 0 0 1px var(--accent, #d68a1f); }

/* (28 Oct) the Travel button: the Select POI settings show under the Feel buttons only while Travel is picked */
#camPanel .grp.travelGrp { border: 0; margin: 0; padding: 0; }
#camPanel .grp.travelGrp.offTravel { display: none !important; }
#camPanel .feelgrid .fgchips { flex-wrap: wrap; }

/* (28 Oct) the Feel grid: row names are plain text, not italic */
#camPanel .feelgrid i { font-style: normal; }

/* THE TOURS PANEL (29 Oct): the Fly through tick sits in the toolbar */
#toursPanel .flyTick { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
#toursPanel .flyTick input { margin: 0; }
/* the Wizard's tours list */
#wizardWin .wzBody ul.trs { list-style: none; margin: 6px 0 8px; padding: 0; }
#wizardWin .wzBody ul.trs li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#wizardWin .wzBody ul.trs .trname { flex: 1 1 auto; min-width: 0; }
/* a tour's sky swatches (Tours panel and the Wizard) */
.skyRow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; }
.skyRow span { margin-right: 2px; }
.skySw { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; cursor: pointer; }
.skySw.on { outline: 2px solid #fff; outline-offset: 2px; }
#stopsPanel .stTour { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; }
#stopsPanel .stTour select { flex: 1 1 auto; min-width: 0; }
#wizardWin .wzBody .tourPick { margin-bottom: 8px; }
/* the Stops view's rows (29 Oct): name, order, landing, delete — and a line under */
#stopsPanel .stList li { display: block; cursor: pointer; }
#stopsPanel .stList li .r1 { display: flex; align-items: center; gap: 6px; }
#stopsPanel .stList li .acts { display: flex; gap: 2px; }
#stopsPanel .stList li .ln { width: 100%; margin-top: 4px; font-size: 12px; box-sizing: border-box; }
#stopsPanel .stBtns.two { display: flex; gap: 6px; }
#stopsPanel .stBtns.two button { flex: 1; width: auto; }
#stopsPanel .stCam { display: grid; gap: 4px; padding: 6px 8px; font-size: 12px; background: rgba(255, 255, 255, .04); border-radius: 6px; }
#stopsPanel .stCam label { display: grid; grid-template-columns: 62px 1fr 1fr 1fr; gap: 4px; align-items: center; }
#stopsPanel .stCam label:last-child { grid-template-columns: 62px 1fr auto; }
#stopsPanel .stCam input { width: 100%; min-width: 0; box-sizing: border-box; padding: 3px 4px; }
#stopsPanel .stList li.here:not(.on) { box-shadow: inset 3px 0 0 var(--accent, #d68a1f); }