/* 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: #3d9ad1; }
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; }
/* (30 Oct, his: "write Splat Magic Pro the same way every time … Splat Magic at the top and then big PRO … a little home button … the button for projects") the wordmark: the colour icon, SPLAT MAGIC small over a big PRO, and a house that opens the Project Manager */
body.penOn #primCorners, body.penOn #planCorners, body.penOn #hotLayer, body.penOn #luDots, body.penOn #orbitLayer { pointer-events: none !important; }
body.penOn #primCorners, body.penOn #planCorners { display: none !important; }
.row.dz > span { display: flex; align-items: center; gap: 6px; }
.dzLink { margin-left: auto; padding: 1px 5px; color: #ddd; line-height: 0; border: 1px solid transparent; background: none; border-radius: 4px; cursor: pointer; opacity: .55; font-size: 12px; }
.dzLink.on { opacity: 1; color: #3d9ad1; border-color: rgba(61,154,209,.5); }
.jobPair { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; white-space: nowrap; }
.jobPair .fcl.inv { opacity: .8; font-size: .92em; }
.fcl input:disabled + *, .fcl:has(input:disabled) { opacity: .4; }
.catchWhen { display: flex; gap: 12px; align-items: center; padding: 2px 0 6px 22px; font-size: 12px; color: var(--dim); }
#iconBar .primListBtn { width: 16px; min-width: 16px; padding: 0; margin-left: -4px; font-size: 10px; }
#primQuick { position: fixed; z-index: 60; min-width: 230px; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 10px; background: var(--panel, #1e2127); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
#primQuick .pqRow { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; }
#primQuick .pqRow:hover { background: rgba(255,255,255,.06); }
#primQuick .pqRow.off .pqName { opacity: .45; text-decoration: line-through; }
#primQuick .pqName { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#primQuick button { padding: 3px; background: transparent; border: 0; backdrop-filter: none; color: inherit; display: grid; place-items: center; }
#primQuick .pqPw { color: #6fdc8c; } #primQuick .pqPw.isoff { color: #777; }
#primQuick .pqNone { padding: 6px; opacity: .6; font-size: 12px; }
#top > #homeBtn.brandHome { padding: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-left: -8px; }
#top > .brandIc { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; margin: 0 -4px 0 -2px; }
#top > b.brand { display: flex; flex-direction: column; line-height: 1; letter-spacing: 0; }
#top > b.brand .sm { font-size: 8.5px; font-weight: 600; letter-spacing: .22em; opacity: .85; }
#top > b.brand .pro { font-size: 17px; font-weight: 800; letter-spacing: .12em; }
#top > b.brand .pro i { font-size: 10px; font-weight: 400; letter-spacing: 0; vertical-align: top; margin-left: 3px; }   /* ⌂ 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: #3d9ad1; }
.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(61,154,209, .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(61,154,209,.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); }
/* THE PUBLISHING WINDOW (1 Nov, app/export-wizard.js): a wide card, three steps across the top, the link card drawn as a feed shows it */
#sheet .card.wide { width: min(900px, calc(100vw - 32px)); }
#sheet .xwShips { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; }
#sheet .xwShips > b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#sheet .xwTicks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
#sheet .xwTicks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
#sheet .xwShips small { color: var(--dim); font-size: 12px; }
#sheet .xwSteps { display: flex; gap: 6px; margin: 6px 0 14px; }
#sheet .xwSteps b { flex: 1; text-align: center; font-size: 12px; font-weight: 500; padding: 6px 8px; border-radius: 8px; color: var(--dim); background: rgba(255,255,255,.04); cursor: pointer; }
#sheet .xwSteps b.on { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 -2px 0 var(--accent); }
#sheet .xwSteps b.done { color: #4be07a; }
#sheet .xwTwo { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
#sheet .xwTwo .f:first-child { margin-top: 0; }
#sheet .xwCount { float: right; color: var(--dim); font-size: 11px; }
#sheet .xwCount.over { color: #8cc8ee; }
#sheet .xwPicBtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#sheet .xwPicBtns select { width: auto; max-width: 200px; }
#sheet .xwTicks { display: grid; gap: 6px; margin-top: 10px; font-size: 12px; }
#sheet .xwTicks label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); }
#sheet .xwTicks label input[type=text] { flex: 1; }
#sheet .xwTicks select { width: auto; }
#sheet .xwCard { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #1c1d22; }
#sheet .xwImg { position: relative; aspect-ratio: 1200 / 630; background: #0b0b0e; display: grid; place-items: center; }
#sheet .xwImg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#sheet .xwImg .xwNone { position: relative; color: var(--dim); font-size: 12px; text-align: center; padding: 0 20px; }
#sheet .xwImg.has .xwNone { display: none; }
#sheet .xwMeta { padding: 10px 12px 12px; display: grid; gap: 3px; }
#sheet .xwMeta .xwDom { font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
#sheet .xwMeta .xwTitle { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.25; }
#sheet .xwMeta .xwLine { font-size: 12px; color: var(--dim); line-height: 1.35; }
#sheet .xwCap { margin: 8px 0 0; font-size: 11px; color: var(--dim); line-height: 1.5; }
#sheet .xwOpt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 0; font-size: 13px; cursor: pointer; }
#sheet .xwOpt.on { border-color: var(--accent); }
#sheet .xwOpt input { margin: 0; }
#sheet .xwSub { margin: 6px 0 4px 30px; display: grid; gap: 8px; font-size: 12px; }
#sheet .xwSub[hidden] { display: none; }
#sheet .xwSub .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#sheet .xwSub select { width: auto; max-width: 100%; }
#sheet .xwSub button.rec { border-color: #ff5a4a; color: #ff8a7e; font-weight: 600; }
#sheet .xwSub .xwDone { padding: 8px 10px; border-radius: 8px; background: rgba(75, 224, 122, .08); border: 1px solid rgba(75, 224, 122, .35); font-size: 12px; }
#sheet .xwSub .xwDone b { color: #4be07a; }
#sheet .xwNote { margin: 12px 0 0; font-size: 12px; color: var(--dim); line-height: 1.5; }
#sheet .xwSum { margin: 4px 0 0; font-size: 13px; line-height: 1.6; }
#sheet .xwSum b { color: #4be07a; }
#sheet .acts .sp { flex: 1; }
#sheet .acts button.back { margin-right: auto; }
/* (no recording dot: everything on the page is in the video) */
#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 */
  font-size: 12px; line-height: 1; opacity: .45; }
.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; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }      /* (5 Nov: a column too full for its panels scrolls, so none is ever beyond the window's edge) */
  #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; }      /* (5 Nov, his: "I don't have to drag them down to see what else is there") a panel is as tall as what is in it; when the column is full the tall ones share what is left (dock.js marks the short ones data-small), and none is squeezed to a strip */
  .rail > .panel.has-h { flex: 0 0 var(--h); min-height: 0 !important; max-height: none; }      /* (10 Nov, his: "grab the bottom edge of them and resize them") the height dragged on its bottom edge is the height it keeps; double-click the edge: back to its own size
  .rail > .panel[data-small] { flex-shrink: 0; }
  .rail > .panel:not([data-small]):not(.is-folded) { min-height: 180px; }
.rail > #scenesPanel:not(.is-folded) { flex-shrink: 0.25; min-height: 300px; }      /* (9 Nov) the Spaces list is THE list: the last to give way in a full column */
.rail > #libraryPanel { flex-shrink: 4; }      /* (the Library gives way first: it scrolls) */
  .rail > .panel > .dock-grip { cursor: ns-resize; }      /* (10 Nov) a docked panel's whole bottom edge sizes it (frame.css draws it as a bar)
  .rail > .panel { overflow-y: auto; overflow-x: hidden; }      /* (when a full column squeezes a panel, it scrolls, with its title bar kept at the top: the Background panel was cut off with no way to reach the rest) */
  .rail > .panel > header { position: sticky; top: 0; z-index: 3; }
  #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(61,154,209,.6) 3px, rgba(61,154,209,.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(61,154,209,.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, #loopBlack { 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 .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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(61,154,209,.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; }


/* (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, #3d9ad1); }

/* (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(61,154,209,.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, #3d9ad1); 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: #3d9ad1; border-color: rgba(61,154,209,.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; }
/* (6 Nov) THE PREVIEW'S PHONE FRAME: a dark mask over the rest of the monitor (the box itself never changes), a hairline round the frame, its size in words */
#pvMask { position: absolute; background: #0a0b0e; pointer-events: auto; }
#pvFrameLine { position: absolute; box-sizing: border-box; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; pointer-events: none; }
#pvFrameLab { position: absolute; text-align: center; font-size: 10.5px; letter-spacing: .06em; color: #8b93a0; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pvMask[hidden], #pvFrameLine[hidden], #pvFrameLab[hidden] { display: none; }
/* (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: #3d9ad1; }
.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; bottom: 0 !important; }      /* (9 Nov: and the full height — the Timeline is put away while the editor is open) */
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; }
body.ws-designer #wsTabs { display: inline-flex !important; }      /* (9 Nov) the full Hotspot editor open from the room: Composer | Hotspot editor shows, the way back */
body.ws-designer #modeTabs, body.ws-designer #bottomPanel { display: none !important; }      /* (the room's own tab strip and the Timeline stay out from behind the editor's panels) */
body.ws-designer #designerFrame { bottom: 0; height: calc(100% - 44px); }
/* 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; }      /* (6 Nov, his: hotspots went soft close up, like a baked picture) no will-change here: it made Chrome draw each hotspot once and stretch that picture as the camera came in; without it the lettering is drawn again at the size it is */
#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, #planCorners { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }      /* (#planCorners: the floor plan's four, 31 Oct) */
#primCorners .primCorner, #planCorners .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(61,154,209,.6) 3px, rgba(61,154,209,.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, #scenesPanel.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; }
/* (31 Oct, version 3 step G) THE PRIMITIVES LIST is the shared list (app/outline.js, app/outline.css): its icon is the shape’s colour square in its job’s colour (a diamond = only a zone); a click on it opens the swatches under it */
#primPanel .olist { max-height: none; }
.orow .oi .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; box-sizing: border-box; }
.orow .oi .sw.zn { transform: rotate(45deg) scale(.78); }
.orow .oi .sw.tri { clip-path: polygon(0 8%, 100% 8%, 50% 100%); border: 0; width: 14px; height: 13px; }
.orow .oi .sw.ci { border-radius: 50%; }
.orow .oi .sw.dr { border-radius: 5px 5px 1px 1px; width: 9px; height: 14px; }      /* (31 Oct) a doorway: a door's shape */
.primPal { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 6px; max-width: 232px; background: var(--frame, #272b32); border: 1px solid var(--edge, #3f444d); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.primPal .pal { display: flex; flex-wrap: wrap; gap: 4px; }
.primPal button { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; backdrop-filter: none; box-shadow: none; font-size: 11px; line-height: 1; color: var(--dim); cursor: pointer; }
.primPal button[data-more] { color: #fff; font-size: 14px; }
.primPal button.cur { outline: 2px solid #fff; outline-offset: 1px; }
/* a zone's colour square is a DIAMOND in the Primitives list (his: "zones had a diamond instead of a square") */

/* 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 #planCorners, 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, #scenesPanel .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 */
.pp-sw { padding: 0 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pp-sw[hidden] { display: none; }
.pp-sw .swWho { display: block; margin: 4px 0 2px; font-size: 12.5px; font-weight: 600; color: #fff; text-transform: none; letter-spacing: 0; }
.pp-sw .swForm .row { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 12px; }
.pp-sw .swForm .row > span { flex: 0 0 auto; }
.pp-sw .swForm .row select { flex: 1 1 auto; min-width: 0; }
.pp-sw .swForm .row input[type=range] { flex: 1 1 auto; min-width: 0; }
.pp-sw .swForm { padding: 6px 12px 4px; }
.pp-sw .swForm > b { display: block; margin: 10px 0 2px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.pp-sw .swForm > b:first-child { margin-top: 2px; }
.pp-sw .swForm > small { display: block; color: var(--dim); font-size: 11px; margin: 3px 0 6px; }
.pp-sw .swForm > small em { font-style: normal; color: var(--text, #eee); }
.pp-sw .swForm > small.psLater { margin-top: 12px; font-style: italic; opacity: .8; }
.pp-sw .ticks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 4px; }
.pp-sw .ticks .tick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.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 */
.pp-sw .dials { margin: 2px 0 2px; }
.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; }
.pp-sw .foldBtn:hover { color: var(--text, #eee); }
.pp-sw .dials.open .foldBtn { color: var(--text, #eee); }
.pp-sw .dialsIn { margin: 0 0 6px 8px; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); }
.pp-sw .dialsIn select { width: 100%; margin-top: 4px; }
.pp-sw .dialsIn > small.psSub { display: block; margin: 8px 0 0; color: var(--dim); font-size: 11px; }
.pp-sw .seg.kinds { margin: 3px 0 4px; }
.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; }
#propsPanel .psWarn { color: #ffb84d; }
.lookPic .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.lookPic .callout > svg { width: 1px !important; height: 1px !important; }

/* 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 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, #3d9ad1); 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, #3d9ad1); color: #111; border: 0; cursor: pointer; }
#drawPill button[data-next] { background: transparent; color: #fff; border: 1px solid var(--accent, #3d9ad1); }
#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, #3d9ad1); }
#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, #3d9ad1); 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, #3d9ad1); 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, #3d9ad1); 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, #3d9ad1); 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, #3d9ad1); 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, #3d9ad1); color: #111; }
#drawPill button[data-more] { background: transparent; color: #fff; border: 1px solid var(--accent, #3d9ad1); }

/* (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: max(var(--rail-l, 310px), calc(var(--vp-l, 0px) - 24px)); }      /* (11 Nov) across both columns: the five tabs read in full */
#modeTabs button { flex: 1; padding: 5px 2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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, #2b7fb0); }
@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, #3d9ad1); 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; }
/* (1 Nov) the pill never takes a click meant for the picture: a long hint had grown it up over the Compositor and swallowed a corner click — only its buttons and sliders take the pointer */
#drawPill { pointer-events: none; }
#drawPill button, #drawPill label, #drawPill input { pointer-events: auto; }
.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 */
/* (4 Nov) THE WEBSITE HANDOVER PANEL (app/handover-panel.js) — Luma's Reshoot look: small dark rounded cards, a label and its number on one row, two tiles for the way, one wide pill for the shot */
#handoverPanel .hdBody { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
#handoverPanel .hdLede { margin: 0 2px; font-size: 11.5px; opacity: .7; line-height: 1.35; }
#handoverPanel .hdCard { background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
#handoverPanel .hdCard h6 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; display: flex; flex-direction: column; gap: 1px; }
#handoverPanel .hdCard h6 small { font-weight: 400; font-size: 10.5px; opacity: .55; }
#handoverPanel .hdCam { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12px; }
#handoverPanel .hdGroup { display: flex; flex-direction: column; gap: 3px; }
#handoverPanel .hdGroup i { font-style: normal; font-size: 10.5px; opacity: .55; margin-bottom: 1px; }
#handoverPanel .hdNum { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px; }
#handoverPanel .hdNum span { opacity: .7; font-size: 11.5px; text-transform: lowercase; }
#handoverPanel .hdNum.lens { grid-column: 1 / -1; grid-template-columns: 42px 1fr auto; }
#handoverPanel .hdNum.lens span { text-transform: none; }
#handoverPanel .hdNum em { font-style: normal; font-size: 10.5px; opacity: .55; }
#handoverPanel .hdNum input { width: 100%; min-width: 0; box-sizing: border-box; padding: 3px 5px; text-align: right; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 5px; }
#handoverPanel .hdNum input:disabled { opacity: .35; }
#handoverPanel .hdRow { display: flex; gap: 6px; }
#handoverPanel .hdRow button { flex: 1; padding: 7px 8px; border-radius: 999px; }
#handoverPanel .hdRow button[data-a=fly] { flex: 0 0 auto; }
#handoverPanel .hdRow[data-custom] button { border-radius: 6px; padding: 5px 8px; font-size: 12px; }
#handoverPanel .hdRow[hidden] { display: none; }
#handoverPanel .hdRow button small { opacity: .6; margin-left: 6px; font-size: 10px; }
#handoverPanel .hdTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#handoverPanel .hdTiles button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; }
#handoverPanel .hdTiles button svg { width: 26px; height: 26px; fill: currentColor; opacity: .85; }
#handoverPanel .hdTiles button.on { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }
#handoverPanel .hdSel { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 6px; font-size: 12px; }
#handoverPanel .hdSel[hidden] { display: none; }
#handoverPanel select { width: 100%; min-width: 0; box-sizing: border-box; }
#handoverPanel .hdNote { margin: 0; font-size: 11px; opacity: .6; line-height: 1.35; }
#handoverPanel .hdLive { margin: 0 2px; font-size: 11.5px; line-height: 1.4; }
#handoverPanel .hdLive.on { color: #7fd79a; } #handoverPanel .hdLive.warn { color: #f0b35a; } #handoverPanel .hdLive.off { opacity: .6; }
#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(61,154,209, .18); outline: 1px solid var(--accent, #2b7fb0); }
#stopsPanel .stList li.spHd { display: block; margin: 8px 0 2px; padding: 2px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line); cursor: default; }
#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, #2b7fb0); position: relative; z-index: 1; }
/* (31 Oct) THE CAMERA PANEL'S CARDS: the plain controls first, the numbers behind Fine-tune */
.panel details.fine { margin: 4px 0 8px; }
.panel details.fine > summary { cursor: pointer; list-style: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 3px 0; user-select: none; }
.panel details.fine > summary::-webkit-details-marker { display: none; }
.panel details.fine > summary::before { content: '▸'; display: inline-block; width: 14px; }
.panel details.fine[open] > summary::before { content: '▾'; }
.panel details.fine[open] > summary { color: var(--ink); }
.panel details.fine[open] { border-left: 2px solid var(--line); padding-left: 8px; }
.panel details.fine[hidden] { display: none; }
#camPanel .row.fg i { font-style: normal; }
#camPanel .row.goto select { width: 190px; }

/* 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; }
/* 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; }
/* 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; }
/* (31 Oct) the Stops view's foot (‹ Explore & tour · Done · Titles ›) shows only in the view; as an ordinary panel the foot is ⤢ Whole picture */
#stopsPanel .stBtns.wiz { display: none; gap: 6px; }
/* (6 Nov) the Tours tab: the one list (tour › space › stops); the Wizard's Stops view: the full rows */
body:not(.mode-stops) #stopsPanel .stOld, body.mode-stops #stopsPanel .stNew { display: none; }
#stopsPanel .stNew .stTree { max-height: 60vh; overflow: auto; }
#stopsPanel .stNew .orow .stN { display: inline-block; min-width: 16px; text-align: right; font-weight: 400; color: var(--dim); }
#stopsPanel .stNew .orow.space .on { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
/* (9 Nov, Splat Candy) THE SPACES LIST: each space heads its own block, as the Tours tab's spaces do — its name in the accent, spaced capitals, on a faint band of the accent with a little air
   above it; what is in it (its scan, scenes, hotspots, pages, boxes) sits under it in the list's own rows; its scan row is quiet */
/* (9 Nov) Frame it up: the Compositor's bottom right corner, the bar's own look */
#frameBtn { position: fixed; z-index: 6; transform: translate(-100%, -100%); padding: 6px 14px; font: 500 12px/1.2 Jost, system-ui, sans-serif; color: var(--text); background: rgba(12,14,18,.82); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 4px; cursor: pointer; white-space: nowrap; }
#frameBtn:hover { border-color: var(--accent); color: #fff; }
#frameBtn[hidden] { display: none; }
/* (9 Nov) the Spaces list's Find box and kind buttons */
#scenesPanel .ofind { display: flex; flex-direction: column; gap: 5px; padding: 2px 8px 6px; }
#scenesPanel .ofind label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mute); }
#scenesPanel .ofindBox { flex: 1; min-width: 0; font: inherit; font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 4px; padding: 3px 7px; outline: none; }
#scenesPanel .ofindBox:focus { border-color: var(--accent); }
#scenesPanel .okinds { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }      /* (11 Nov) one Show drop-down in place of the eight chips */
#scenesPanel .ofind { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
#scenesPanel .ofind > label:first-child { flex: 1 1 auto; min-width: 0; }
#scenesPanel .okindSel { font: inherit; font-size: 12px; padding: 2px 4px; color: var(--text); background: var(--well, #1b1e23); border: 1px solid var(--edge, #3a3f48); border-radius: 4px; }
#scenesPanel .okinds button { font: inherit; font-size: 11px; line-height: 1.5; padding: 1px 8px; border-radius: 10px; cursor: pointer; color: var(--mute); background: transparent; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
#scenesPanel .okinds button:hover { color: var(--text); }
#scenesPanel .okinds button.on { color: var(--text); background: var(--accent); border-color: var(--accent); }
#scenesPanel .orow.space { margin-top: 6px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
#scenesPanel .orow.space:first-child { margin-top: 0; }
#scenesPanel .orow.space.on { background: color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: inset 3px 0 0 var(--accent); }      /* (9 Nov, his: "only half a shade different" — the picked space unmistakable) */
#scenesPanel .orow.space.on .on { color: var(--ink); }
#scenesPanel .orow.space .on { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
#scenesPanel .orow.space .on small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
#scenesPanel .orow.scanrow .on { color: var(--mute); }
#stopsPanel .stNew .orow.here .on::after { content: " ●"; color: var(--accent); }
#stopsPanel .stSays2 { margin: 6px 8px; font-size: 12px; color: var(--dim); }
.cdMinis { list-style: none; margin: 0 0 6px; padding: 0; }
.cdMinis li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.cdMinis li.on { background: var(--sel); }
.cdMinis li .lnk { flex: 1; text-align: left; }
#stopsPanel .stBtns.wiz button { flex: 1; width: auto; }
body.mode-stops #stopsPanel .stBtns.wiz { display: flex; }
body.mode-stops #stopsPanel .stBtns.full { display: none; }
#stopsPanel .stBtns.two button { flex: 1; width: auto; }
/* (3 Nov) a stop's mini tour, under the stop */
#stopsPanel .stMiniHd { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 2px 24px; font-size: 11px; opacity: .85; }
#stopsPanel .stMiniHd button { padding: 1px 6px; font-size: 11px; border: 1px solid var(--edge, rgba(255,255,255,.2)); border-radius: 3px; }
#stopsPanel .stMinis { list-style: none; margin: 0 0 0 24px; padding: 0; }
#stopsPanel .stList .stMinis li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 12px; }
#stopsPanel .stList .stMinis li b { width: 26px; flex: none; }
#stopsPanel .stMinis .nm2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stopsPanel .stMinis em { font-style: normal; font-size: 10px; opacity: .6; white-space: nowrap; }
#stopsPanel .stMiniNone { margin: 2px 0 0 24px; font-size: 11px; opacity: .65; }
#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, #2b7fb0); }

/* ── THE BOTTOM PANEL'S TWO TABS: Storyboard · Timeline (30 Oct night, version 3 step E) — the idle tab a step darker, the way a panel pair's tabs are (frame.css) ── */
#bottomPanel > header b { cursor: pointer; }
#bottomPanel > header b.off { background: var(--tab, #1d2025); color: var(--mute, #9aa1ac); border-top: 1px solid var(--edge, #3f444d); padding-top: 1px; line-height: 21px; z-index: 0; }
#bottomPanel > header b.off:hover { color: var(--text, #e6e8ec); background: #23272d; }
#bottomPanel .bp-pane { height: 100%; }
#bottomPanel .bp-pane[hidden] { display: none; }
/* (11 Nov, his: the tabs at the bottom) a bottom tab's panels stand side by side, each scrolling on its own, the row scrolling sideways when there are more than fit */
@media (min-width: 701px) {
  #bottomPanel .bp-pane.holds:not([hidden]) { display: flex; gap: 8px; padding: 6px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
  #bottomPanel .bp-pane > .panel.in-bottom { position: relative; inset: auto; left: auto; top: auto; right: auto; bottom: auto; flex: 0 0 340px; width: 340px; height: 100%; max-height: none; min-height: 0; overflow-y: auto; overflow-x: hidden; pointer-events: auto; }
  #bottomPanel .bp-pane > .panel.in-bottom[hidden] { display: none; }
  #bottomPanel .bp-pane > .panel.in-bottom > header { position: sticky; top: 0; z-index: 3; }
  #bottomPanel .bp-pane > .panel.in-bottom > .dock-grip { display: none; }
}
/* THE STORYBOARD'S PICTURES: a 16:9 picture at the top of a card and in each stop's square; the side column holds the title and the Take-the-pictures-again button */
#cueStrip .cueSide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; margin: 0 4px 0 -4px; }
#cueStrip .cueSide .cueTitle { margin: 0; }
#cueStrip .cueRetake { width: 22px; height: 22px; padding: 0; border: 1px solid var(--edge, #3f444d); border-radius: 3px; background: transparent; color: var(--mute, #9aa1ac); font-size: 13px; line-height: 20px; cursor: pointer; }
#cueStrip .cueRetake:hover { color: var(--text, #e6e8ec); background: rgba(255, 255, 255, .08); }
#cueStrip .cueRetake.busy { color: var(--accent); animation: cueSpin 1.2s linear infinite; }
#cueStrip .cueStart { padding: 4px 10px; border: 1px solid var(--accent, #3d9ad1); border-radius: 4px; background: transparent; color: var(--accent, #3d9ad1); font: inherit; font-size: 11.5px; cursor: pointer; }
#cueStrip .cueStart:hover { background: rgba(61,154,209, .14); }
@keyframes cueSpin { to { transform: rotate(360deg); } }
#cueStrip .pic { width: 100%; aspect-ratio: 16 / 9; margin: 0 0 6px; border-radius: 3px; overflow: hidden; background: #000; cursor: pointer; }
#cueStrip .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#cueStrip .cue > .pic { margin-top: 2px; }
#cueStrip .stop .pic { margin: 2px 0 4px; }
#cueStrip .stop { cursor: default; }
#cueStrip .cue[data-go], #cueStrip .stop[data-go] { cursor: pointer; }
/* ── THE TIMELINE (app/timeline.js): a header, a ruler, the lanes with their blocks, the playhead ── */
#tlPane { height: 100%; display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; color: var(--text, #e6e8ec); }
#tlPane .tlHead { display: flex; align-items: center; gap: 12px; padding: 4px 10px; flex: 0 0 auto; border-bottom: 1px solid var(--edge-dark, #0c0d0f); background: var(--strip, #131518); }
#tlPane .tlHead b { font-weight: 600; } #tlPane .tlHead em { font-style: normal; color: var(--dim); }
#tlPane .tlHead select { font: inherit; color: var(--text, #e6e8ec); background: var(--well, #1a1c20); border: 1px solid var(--edge, #3f444d); border-radius: 4px; padding: 1px 4px; }
#tlPane .tlTotal { color: var(--accent); }
#tlPane .tlHint { margin-left: auto; color: var(--mute, #9aa1ac); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tlPane .tlScroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
#tlPane .tlRuler { position: sticky; top: 0; z-index: 3; height: 18px; display: flex; background: #101216; border-bottom: 1px solid var(--edge-dark, #0c0d0f); }
#tlPane .tlCorner { position: sticky; left: 0; z-index: 4; flex: 0 0 92px; background: #101216; border-right: 1px solid var(--edge-dark, #0c0d0f); }
#tlPane .tlTicks { position: relative; height: 18px; flex: 0 0 auto; }
#tlPane .tlTicks i { position: absolute; top: 0; bottom: 0; border-left: 1px solid #3a3f48; }
#tlPane .tlTicks i b { position: absolute; left: 4px; top: 2px; font-weight: 400; font-size: 10px; color: #8b857a; white-space: nowrap; }
#tlPane .tlMark { position: absolute; top: 2px; padding: 0 4px; margin-left: 2px; font-style: normal; font-size: 10px; color: #8fb3d9; border-left: 1px solid rgba(143, 179, 217, .6); white-space: nowrap; }
#tlPane .tlLanes { position: relative; }
#tlPane .tlLane { position: relative; display: flex; border-bottom: 1px solid var(--edge-dark, #0c0d0f); }
#tlPane .tlLane:nth-child(even) { background: rgba(255, 255, 255, .02); }
#tlPane .tlLabel { position: sticky; left: 0; z-index: 2; flex: 0 0 92px; padding: 4px 8px; box-sizing: border-box; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute, #9aa1ac); background: var(--well, #1a1c20); border-right: 1px solid var(--edge-dark, #0c0d0f); }
#tlPane .tlLabel small { display: block; margin-top: 1px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #5f6671; }
#tlPane .tlTrack { position: relative; flex: 0 0 auto; }
/* (9 Nov) the red line is dragged on the ruler and the empty track; the pane with focus (its keys: Space, the arrows) wears a thin accent line along its top */
#tlPane .tlTicks, #tlPane .tlTrack { cursor: ew-resize; }
#tlPane .tlScroll { user-select: none; }
#tlPane:focus { outline: none; box-shadow: inset 0 1px 0 var(--accent, #d9b77a); }
#tlPane .tlBlock { position: absolute; box-sizing: border-box; border-radius: 4px; overflow: hidden; padding: 0 6px; white-space: nowrap; display: flex; align-items: center; gap: 5px; cursor: pointer; }
#tlPane .tlBlock .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tlPane .tlBlock .nm b { color: var(--accent); margin-right: 2px; }
#tlPane .tlBlock .nm em { font-style: normal; color: var(--mute, #9aa1ac); font-size: 10px; }
#tlPane .tlBlock.stop { background: rgba(111, 159, 207, .22); border: 1px solid rgba(111, 159, 207, .55); padding: 0 6px 0 2px; }
#tlPane .tlBlock.stop:hover { background: rgba(111, 159, 207, .34); }
#tlPane .tlBlock.stop.wait { background: repeating-linear-gradient(135deg, rgba(111, 159, 207, .18) 0 6px, rgba(111, 159, 207, .06) 6px 12px); }
#tlPane .tlBlock.stop img { flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
#tlPane .tlBlock.stop .noPic { flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 9; border-radius: 3px; background: rgba(0, 0, 0, .35); }
#tlPane .tlBlock.move { background: rgba(111, 159, 207, .10); border: 1px dashed rgba(111, 159, 207, .45); color: var(--mute, #9aa1ac); justify-content: center; font-size: 10px; }
#tlPane .tlBlock.move::before { content: '→'; color: rgba(143, 179, 217, .8); }
#tlPane .tlBlock.hot { background: rgba(61,154,209, .18); border: 1px solid rgba(61,154,209, .5); font-size: 10.5px; }
#tlPane .tlBlock.wait.hot, #tlPane .tlBlock.wait:not(.stop) { background: repeating-linear-gradient(135deg, rgba(61,154,209, .12) 0 5px, transparent 5px 10px); border: 1px dashed rgba(61,154,209, .5); font-size: 10.5px; }
#tlPane .tlBlock.music { background: rgba(124, 214, 124, .14); border: 1px solid rgba(124, 214, 124, .45); font-size: 10.5px; }
#tlPane .tlBlock.music .fade { position: absolute; top: 0; bottom: 0; pointer-events: none; }
#tlPane .tlBlock.music .fade.in { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); }
#tlPane .tlBlock.music .fade.out { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .55), transparent); }
#tlPane .tlBlock.music .loop { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(124, 214, 124, .8); }
#tlPane .tlBlock.music .nm { position: relative; }
#tlPane .tlBlock.page { background: rgba(230, 232, 236, .12); border: 1px solid rgba(230, 232, 236, .4); font-size: 10.5px; }
#tlPane .tlBlock.dissolve, #tlPane .tlBlock.black, #tlPane .tlBlock.cut { background: rgba(200, 120, 220, .16); border: 1px solid rgba(200, 120, 220, .5); font-size: 10.5px; }
#tlPane .tlBlock .tlKeys { display: none; }     /* (the keyframes' row under a block — his long view; nothing in it yet) */
#tlPane .tlPlay { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #ff4a4a; z-index: 5; pointer-events: none; }
#tlPane .tlPlay i { position: absolute; top: -1px; left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #ff4a4a; }
#tlPane .tlPlay[hidden] { display: none; }
/* (30 Oct night, version 3) THE WALL PLAN'S CARD (app/prim-panel.js .planBox): the masters, then a slab's own numbers with an "As the plan" button beside the slider */
.panel .planBox { margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.panel .planBox .planWhat { margin: 2px 0 6px; }
.panel .planBox .wpOwn { margin-top: 8px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.1); }
.panel .planBox .wpAs { margin-left: 6px; padding: 2px 8px; font-size: 11px; flex: 0 0 auto; border-radius: 999px; }
.panel .planBox .wpAs[hidden] { display: none; }
/* THE ITEM CARD (app/item-card.js, 30 Oct night, version 3): one card per item in the Settings panel — its sections in one order, a live line under every rule, a Fine-tune fold */
.pp-sw .swForm section.cd { margin: 0; padding: 6px 0 6px; border-top: 1px solid var(--line); }
.pp-sw .swForm section.cd:first-of-type { border-top: 0; }
.pp-sw .swForm section.cd > h5 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pp-sw .swForm section.cd h6 { margin: 6px 0 2px; font-size: 11.5px; font-weight: 600; color: var(--text, #eee); }
.pp-sw .swForm .cdLine { margin: 2px 0 4px; font-size: 12px; color: var(--dim); line-height: 1.4; }
.pp-sw .swForm .cdLine em { font-style: normal; color: var(--text, #eee); }
.pp-sw .swForm .cdLine small { font-size: 11px; }
.pp-sw .swForm .cdLive { margin: 3px 0 4px; font-size: 11.5px; line-height: 1.35; }
.pp-sw .swForm .cdLive.on { color: #3fd36b; }
.pp-sw .swForm .cdLive.off { color: #ff9d5d; }
.pp-sw .swForm .cdLive:empty { display: none; }
.pp-sw .swForm .cdPair { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 3px 0; font-size: 12px; }
.pp-sw .swForm .tlN { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.pp-sw .swForm .tlN input { width: 56px; }
.pp-sw .swForm .row input[type=text] { flex: 1 1 auto; min-width: 0; background: #0e1013; border: 1px solid rgba(255,255,255,.15); color: inherit; border-radius: 4px; padding: 3px 7px; }
.pp-sw .swForm .row input[type=color] { width: 36px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: transparent; }
.pp-sw .swForm .cdSlot:empty { display: none; }
.pp-sw .swForm .dials.fine .foldBtn { font-style: italic; }
.pp-sw .swForm button.lnk { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.pp-sw .swForm .skyRow { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; }
.pp-sw .swForm .skyRow .skySw { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.pp-sw .swForm .skyRow .skySw.on { outline: 2px solid #fff; outline-offset: 1px; }
.pp-sw .swForm .swWho + small { display: block; color: var(--dim); font-size: 11px; margin: 0 0 4px; }
#propsPanel .cdPark { display: none; }
/* the card's bits made by other panels, sitting in their sections */
#propsPanel .pp-cardbit .pp-sec { margin: 0; padding: 0; border: 0; }
#propsPanel .pp-cardbit .pp-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
#propsPanel .pp-cardbit .pp-row > span { width: 62px; color: var(--dim, #9aa3ad); font-size: 12px; }
#propsPanel .pp-cardbit .pp-row select { flex: 1 1 auto; min-width: 0; }
#propsPanel .pp-cardbit .pp-row input[type=number] { width: 76px; }
#propsPanel .pp-cardbit .pp-row em { font-style: normal; color: var(--dim, #9aa3ad); font-size: 11px; }
#propsPanel .pp-cardbit .pp-tick, #propsPanel .pp-cardbit .pp-tk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; margin: 2px 10px 2px 0; }
#propsPanel .pp-cardbit .pp-btns { display: flex; gap: 6px; margin-top: 6px; }
#propsPanel .pp-cardbit .pp-note { margin: 4px 0; color: var(--dim, #9aa3ad); font-size: 12px; }
#propsPanel .pp-cardbit .pp-show { padding: 2px 0 4px; }
#propsPanel .pp-cardbit .pp-show.pgOpts { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#propsPanel .pp-cardbit .pgDark { width: 100%; }
#propsPanel .pp-cardbit .pgDark input[type=range] { flex: 1 1 auto; min-width: 0; }
/* the picked shape's settings (app/prim-panel.js .sel) hosted in the card */
.pp-sw .swForm .sel { padding: 0; }
.pp-sw .swForm .sel[hidden] { display: none; }
.pp-sw .swForm .sel .psec > .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.pp-sw .swForm .sel .psec > .row > span { flex: 0 0 auto; }
.pp-sw .swForm .sel .psec > .row input[type=range] { flex: 1 1 auto; min-width: 0; }
.pp-sw .swForm .sel .psec .moreBox > .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; flex-wrap: wrap; }
.pp-sw .swForm .sel .psec .moreBox > .row > span { flex: 0 0 auto; }
.pp-sw .swForm .sel .psec .moreBox > .row input[type=range] { flex: 1 1 auto; min-width: 60px; }
.pp-sw .swForm .sel .psec .moreBox > .row small.hint { flex: 1 0 100%; }
.pp-sw .swForm .sel .psec .btns.this { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.pp-sw .swForm .sel .psec .note { margin: 4px 0; font-size: 11.5px; color: var(--dim); }
.pp-sw .swForm .sel .selColT { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.pp-sw .swForm .sel .selCol { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-sw .swForm .sel .selCol 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; }
.pp-sw .swForm .sel .selCol button.cur { outline: 2px solid #fff; outline-offset: 1px; }
.pp-sw .swForm .sel .zoneBox h4 { font-size: 11.5px; }

/* (31 Oct; 7 Nov his: "take a leaf out of Higgsfield's book … your eyes just don't get sick looking at it. You just keep scrolling") THE LIBRARY: one long scroll of big tiles,
   each design drawn on a picture of its kind of place; chips along the top for the kind of client; ⤢ opens it big over the picture */
#libraryPanel .otools .libFind { flex: 1 1 80px; min-width: 60px; background: var(--ctl-bg); border: 1px solid var(--edge, transparent); border-radius: 999px; color: var(--text); padding: 4px 10px; font: inherit; font-size: 12px; }
#libraryPanel .libBigBtn { margin-left: auto; background: none; border: 0; color: var(--dim, var(--text)); font-size: 14px; cursor: pointer; padding: 0 6px; }
#libraryPanel .libBigBtn:hover { color: var(--accent); }
#libraryPanel .libChips { display: flex; gap: 6px; padding: 2px 8px 8px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
#libraryPanel .libChips::-webkit-scrollbar { display: none; }
#libraryPanel .libKinds { display: flex; gap: 6px; padding: 2px 8px 4px; flex: 0 0 auto; }      /* (9 Nov) Headings · Hotspots · Pages, above the kinds of client */
#libraryPanel .libKinds .libChip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#libraryPanel .libChip { flex: 0 0 auto; border-radius: 999px; padding: 5px 11px; font-size: 11.5px; background: var(--ctl-bg); border: 1px solid transparent; color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
#libraryPanel .libChip em { font-style: normal; opacity: .55; margin-left: 2px; }
#libraryPanel .libChip:hover { border-color: var(--accent); }
#libraryPanel .libChip.on { background: var(--accent); color: var(--win); }
#libraryPanel .libChip.on em { opacity: .75; }
#libraryPanel .libBody { padding: 0 8px 10px; overflow-y: auto; scroll-behavior: smooth; }
#libraryPanel .libSec h4 { position: sticky; top: 0; z-index: 5; box-shadow: 0 6px 8px -6px var(--frame, var(--win)); display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 8px 2px 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim, var(--text)); background: var(--frame, var(--win)); }
#libraryPanel .libSec h4 em { font-style: normal; opacity: .6; letter-spacing: 0; }
#libraryPanel .libGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; padding: 2px 0 12px; }
#libraryPanel .libTile { position: relative; aspect-ratio: 16 / 10; cursor: pointer; border-radius: 10px; overflow: hidden; min-width: 0; background: var(--win) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06); transition: transform .18s ease, box-shadow .18s ease; }
#libraryPanel .libTile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)); transition: opacity .2s; pointer-events: none; }
#libraryPanel .libTile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0)); pointer-events: none; }
#libraryPanel .libTile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.45); }
#libraryPanel .libTile:hover::before { opacity: .55; }
#libraryPanel .libTile.on { box-shadow: 0 0 0 2px var(--accent), 0 10px 24px rgba(0,0,0,.45); }
#libraryPanel .libPic { position: absolute; inset: 0 0 6% 0; overflow: hidden; pointer-events: none; z-index: 1; }
#libraryPanel .libName { position: absolute; left: 9px; right: 9px; bottom: 7px; z-index: 2; font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
#libraryPanel .pp-note { margin: 2px 2px 8px; font-size: 11.5px; color: var(--dim, var(--text)); }
#libraryPanel .libNone { padding: 24px 4px; text-align: center; }
/* ⤢ big: the same panel over the picture, tiles three to six across */
#libraryPanel.libBig { position: fixed !important; inset: 52px 24px 24px 24px !important; width: auto !important; max-height: none !important; z-index: 60; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#libraryPanel.libBig .libGrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
#libraryPanel.libBig .libName { font-size: 13px; left: 12px; bottom: 10px; }
#libraryPanel.libBig .libChips { padding: 4px 12px 12px; }
#libraryPanel.libBig .libChip { font-size: 12.5px; padding: 6px 14px; }
#libraryPanel.libBig .libBody { padding: 0 14px 16px; }
/* (31 Oct) the Contents list at the top of the Slide panel */
#slidePanel .pp-contents { margin: 4px 0 6px; } #slidePanel .pp-contents h6 { margin: 2px 0 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim, #9aa3ad); font-weight: 500; }

/* (31 Oct) THE CARD'S CHIPS: the sections' names in a row, one section open at a time (the Camera panel's way, his pick) */
.pp-sw .swForm .cdChips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.pp-sw .swForm .cdChips button { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--tab, #3a3f48); color: #cfd3da; border: 1px solid rgba(255,255,255,.12); cursor: pointer; line-height: 1.3; }
.pp-sw .swForm .cdChips button:hover { color: #fff; }
.pp-sw .swForm .cdChips button.on { background: var(--frame, #272b32); color: #fff; border-color: var(--accent, #2b7fb0); }
.pp-sw .swForm.chips section.cd { border-top: 0; padding-top: 2px; }
.pp-sw .swForm.chips section.cd > h5 { display: none; }

/* (31 Oct) THE TIMELINE PICKS: the picked block (or the Camera lane's name = the tour) is lit; the lane names are buttons */
#tlPane .tlBlock.on { outline: 2px solid var(--accent, #2b7fb0); outline-offset: 1px; z-index: 2; }
#tlPane .tlLabel { cursor: pointer; }
#tlPane .tlLabel.on { color: var(--accent, #2b7fb0); }
#tlPane .tlLabel:hover { color: #fff; }
/* (31 Oct) THE INSPECTOR FULL SCREEN: the card node moved into a window over the picture, every section open */
#inspectWin { position: fixed; inset: 0; z-index: 19; display: flex; align-items: center; justify-content: center; }
#inspectWin[hidden] { display: none !important; }
#inspectWin .iwScrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#inspectWin .iwBox { position: relative; width: min(920px, 94vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--frame, #272b32); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); overflow: hidden; }
#inspectWin header { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--strip, #131518); border-bottom: 1px solid var(--edge-dark, #0c0d0f); }
#inspectWin header b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
#inspectWin header .iwSays { flex: 1; color: var(--mute, #9aa1ac); font-size: 11.5px; }
#inspectWin header button { padding: 6px 20px; }
#inspectWin .iwBody { overflow-y: auto; padding: 10px 20px 20px; }
#inspectWin .iwBody .pp-sw .swForm section.cd { padding: 10px 0 12px; }
#propsPanel header .full { margin-left: auto; margin-right: 2px; }

/* THE VIEW STRIP (31 Oct, app/view-strip.js): a row along the top of each monitor — COMPOSITOR (what it draws, then the rules that cut the scan) and PRESENTATION (the effects a visitor gets, each switchable off while editing).
   (9 Nov) SMALL SQUARE ICONS in the top bar's family (#iconBar, app/frame.css): no frame, a 17 px icon, its name very small under it, the full words on hover (#vsTip). On = white on a soft tile; off = dimmed */
#viewStrip { position: absolute; left: 0; top: 54px; width: 100%; height: 0; z-index: 7; pointer-events: none; }      /* (54: under the top bar, which lies over the picture's top — #stage starts at the window's top) */
#viewStrip .vsRow { position: absolute; top: 0; display: flex; flex-wrap: wrap; align-items: center; padding: 2px 6px; box-sizing: border-box; background: rgba(8, 10, 14, .82); white-space: nowrap; }      /* (3 Nov) wraps in a narrow monitor: nothing is ever cut off */
#viewStrip .vsRow[hidden] { display: none; }
#viewStrip .vsGap { flex: 0 0 auto; width: 1px; height: 24px; margin: 0 5px; background: var(--line); }      /* (the top bar's group line) */
#viewStrip button { pointer-events: auto; flex: 0 0 auto; width: 40px; height: 34px; margin: 0; padding: 3px 0 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; border-radius: 5px; background: transparent; color: rgba(255, 255, 255, .5); font-family: inherit; cursor: pointer; }
#viewStrip button svg { flex: 0 0 auto; width: 17px; height: 17px; }
#viewStrip button span { font-size: 8px; font-weight: 500; line-height: 9px; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
#viewStrip button:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
#viewStrip button.on { background: var(--on-bg); color: var(--on); box-shadow: inset 0 0 0 1px var(--on-edge); }      /* (9 Nov, his: "let's fix the on button so it's green": on is the top bar's green, look.css --on) */
#viewStrip button.on:hover { background: var(--on-bg); box-shadow: inset 0 0 0 1px var(--on); }
#viewStrip button.vsAct { color: rgba(255, 255, 255, .85); }      /* Hide all and Sync: a move, not a switch — drawn in the top bar's own white */
#viewStrip button.vsAct:hover { color: var(--ink); }
#viewStrip button.vsMore { width: 12px; margin-left: -2px; padding: 0; justify-content: center; color: rgba(255, 255, 255, .7); }      /* Primitives' ▾: the quick list, held to its square */
#viewStrip button.vsMore svg { width: 10px; height: 10px; }
#vsTip { position: fixed; z-index: 60; max-width: 300px; padding: 7px 10px; border-radius: 6px; background: #000; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; white-space: normal; }
#vsTip b { display: block; margin-bottom: 2px; font-weight: 600; }
#vsTip[hidden] { display: none; }
body.viewStripOn #viewCube { top: 128px; }      /* (the cube sits under the strip: 54 + 38 + a gap) */
body.fullPic #viewStrip, body.ws-designer #viewStrip, body.mode-stops #viewStrip { display: none !important; }
body.edNoHots #hotLayer { display: none !important; }                   /* COMPOSITOR › Hotspots off */
body.pvNoHots .hotLayerMirror { display: none !important; }             /* PRESENTATION › Hotspots off */
body.pvNoPages #pagesLive > .hot { display: none !important; }          /* PRESENTATION › Pages off (the buttons, the mode menu and the icons stay) */

/* (2 Nov) the Shortcuts window */
#sheet .card:has(.keysList) { width: min(860px, calc(100vw - 32px)); }
.keysList { columns: 2 340px; column-gap: 28px; margin-top: 8px; }
.keysList section { break-inside: avoid; margin-bottom: 16px; }
.keysList h3 { margin: 0 0 5px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.keyRow { display: grid; grid-template-columns: 138px 1fr; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; }
.keyRow kbd { font: inherit; font-weight: 500; color: var(--ink); }
.keyRow span { color: var(--dim); }

/* (4 Nov) THE TRIGGERS' ROWS: one sentence a row, wrapped to the panel's width */
.actRows .actRow { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.actRows select, .actRows .actName { flex: 1 1 42%; min-width: 0; max-width: 100%; font-size: 11px; }
.actRows .actX { flex: 0 0 auto; padding: 2px 6px; background: transparent; border: 0; color: inherit; opacity: .6; cursor: pointer; }
.actRows .actX:hover { opacity: 1; color: #ff8d8d; }
.actRows .btns { margin-top: 6px; }
.actRows .actNone { margin: 2px 0 0; }
.actHead { margin: 10px 0 2px; font-size: 11px; font-weight: 600; opacity: .8; }
#primPanel .pbar .ddMenu, .primJobs { }
.primJobs { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 3px 0; }
.primJobs.inv { padding-top: 0; }
.grpNote { margin: 2px 0 6px; color: #ffb56b; font-size: 11px; }
.moreBox > summary { cursor: pointer; font-size: 11px; opacity: .8; padding: 6px 0 3px; }
.actRows .actLive { margin: 4px 0 0; font-size: 11px; }
.apWrap { display: flex; gap: 14px; height: 100%; overflow: hidden; padding: 6px 12px; box-sizing: border-box; }
.apMain { flex: 1 1 auto; min-width: 0; overflow: auto; }
.apSide { flex: 0 0 250px; overflow: auto; border-left: 1px solid rgba(255,255,255,.08); padding-left: 12px; }
.apSide h6 { margin: 2px 0 4px; font-size: 11px; opacity: .8; font-weight: 600; }
.apSide .tick { display: flex; gap: 6px; align-items: center; padding: 1px 0; font-size: 11px; }
.apSide input[type=text] { width: 100%; font-size: 11px; }
.apHead { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.apWho { font-size: 12px; }
.apLive { font-size: 11px; }
.apChain .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; margin: 2px 0; font-size: 11px; }
.apChain .chain i { opacity: .5; font-style: normal; }
.apChain .chain span { padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,.07); }
.apChain .chT { background: rgba(120,170,255,.2) !important; }
.apChain .chO.on { background: rgba(63,211,107,.2) !important; }
.apChain .chO.off { background: rgba(255,157,93,.22) !important; }
.apChain .chW { opacity: .75; background: transparent !important; }
.apChain .chS { background: rgba(255,200,90,.2) !important; }
.apAll { margin-top: 6px; }
.apAllRow > b { font-size: 11px; font-weight: 600; opacity: .85; }
.actRows .actRowW { border-bottom: 1px solid rgba(255,255,255,.07); padding: 3px 0; }
.actRows .actRow { flex-wrap: nowrap; padding: 2px 0; border-bottom: 0; }
.actRows .actRow select, .actRows .actRow .actName, .actRows .stepLink { flex: 0 1 auto; width: auto; min-width: 90px; max-width: 240px; }
.actRows .actThen { padding-left: 22px; }
.actRows .actWord { font-size: 11px; opacity: .75; min-width: 28px; }
.actRows .actAfter { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; }
.actRows .stepAfter { width: 50px; }
.actRows .actThenAdd { flex: 0 0 auto; padding: 1px 7px; font-size: 11px; }
.actRows .stepX { background: transparent; border: 0; color: inherit; opacity: .6; cursor: pointer; }
.modeRow { display: flex; align-items: center; gap: 8px; }
.modeRow .tick { flex: 1 1 auto; }
.modeRow .modeWord { flex: 0 0 96px; width: 96px; font-size: 11px; }

/* (5 Nov) a stop's arc or line, and an orbit stop's numbers */
#stopsPanel .stList li button.arc { width: 20px; opacity: .55; font-size: 13px; }
#stopsPanel .stList li button.arc.on { opacity: 1; color: var(--accent, #2b7fb0); }
#stopsPanel .stOrbit { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
#stopsPanel .stOrbit label { display: flex; align-items: center; gap: 4px; min-width: 0; }
#stopsPanel .stOrbit label span { opacity: .7; white-space: nowrap; }
#stopsPanel .stOrbit label.c { grid-column: 1 / -1; }
#stopsPanel .stOrbit input, #stopsPanel .stOrbit select { flex: 1; min-width: 0; width: 100%; }
#stopsPanel .stOrbit em { opacity: .6; font-style: normal; }
#stopsPanel .stOrbit button { grid-column: 1 / -1; padding: 4px 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; }

/* THE HOTSPOT EDITOR's bar (6 Nov 2026): at the foot of the picture while a hotspot is being edited — Cancel leaves without saving, OK keeps */
#hotEditBar { position: fixed; z-index: 9; bottom: calc(var(--vp-b, 0px) + 12px); right: calc(var(--vp-r, 0px) + 12px);
  display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; background: var(--glass, rgba(10, 14, 20, .82)); border: 1px solid var(--ctl-edge, rgba(255, 255, 255, .3)); border-radius: 4px; color: var(--ink, #eef3f8); font-size: 13px; white-space: nowrap; }
#hotEditBar[hidden] { display: none; }
#hotEditBar .hbWho { margin-right: 4px; letter-spacing: .02em; }
#hotEditBar button { min-height: 26px; padding: 3px 12px; font-size: 13px; }
#hotEditBar button.go { border-color: var(--on-edge, #3ddc97); background: var(--on-bg, rgba(61, 220, 151, .16)); color: #fff; font-weight: 600; }
/* (6 Nov) the Library follows what is picked: the line at its top says what a click puts the look on */
#libraryPanel .libFor { margin: 4px 8px 2px; padding: 5px 8px; font-size: 12px; line-height: 1.35; color: var(--mute); border-radius: 4px; }
#libraryPanel .libFor.on { color: var(--text); background: var(--sel); border-left: 3px solid var(--accent); }
#libraryPanel .libFor b { color: #fff; }
/* (6 Nov) the picked part's settings sit in the Inspector card now: their drop-downs fit the panel (no sideways scroll) */
:is(#propsPanel, #inspectWin) .pp-row select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
:is(#propsPanel, #inspectWin) .cdSlot[data-slot=part] textarea { width: 100%; box-sizing: border-box; }
/* (10 Nov) the hotspot's Facing buttons, first under its name: the card's width, on one line (app/item-card.js) */
.cdFacing { display: flex !important; width: 100%; max-width: none; margin: 6px 0 10px; } .cdFacing > button { flex: 1 1 0; white-space: nowrap; padding: 5px 6px; }
/* (10 Nov, his: "go around and do the rest of them") EVERY ROW OF ICON BUTTONS in the monitor strips' look (#viewStrip above): a 17 px icon, its name very small under it, the full words on hover — the top bar's icons, the align icons, Pointer · Move */
button.icoNamed { width: 40px !important; height: 34px !important; padding: 3px 0 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; }
button.icoNamed svg { flex: 0 0 auto; width: 17px !important; height: 17px !important; }
button.icoNamed > span { font-size: 8px; font-weight: 500; line-height: 9px; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
button.icoNamed:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
button.icoNamed.on { background: var(--on-bg) !important; color: var(--on) !important; box-shadow: inset 0 0 0 1px var(--on-edge); }      /* (on is the strips' green, as his 9 Nov ask) */
/* THE DOUBLE-UPS PUT AWAY (11 Nov 2026, his: "one of everything … big massive buttons for things that could be right-click menus"). Put away, not deleted: each one's job is done elsewhere,
   named on its line. Take a line out and the button is back. Map: Splat Candy Documents › the map page "Splat Candy: where everything lives" */
#scenesPanel .otools [data-a="keep"] { display: none !important; }      /* Save position: Ctrl+Space does the same (its own tooltip said so) */
#pagesPanel .otools [data-a="keep"] { display: none !important; }      /* Save position: Ctrl+Space with the page picked */
#pagesPanel .otools [data-a="dup"] { display: none !important; }       /* Duplicate: right-click a page › Duplicate, Ctrl+D */
#pagesPanel .otools [data-a="del"] { display: none !important; }       /* Delete: the Delete key, right-click › Delete (Ctrl+Z brings it back) */
#stopsPanel .otools [data-n="save"] { display: none !important; }      /* Save this shot: Ctrl+Space with the stop picked, and Save this shot in Settings */
#iconBar [data-i="hot"] { display: none !important; }                  /* Hotspot: the Project list's + Add › Hotspot… (the same menu) */
#propsPanel .btns.this > button { display: none !important; }        /* Group · Ungroup · Lock · Delete in Settings: Ctrl+G, Ctrl+Shift+G, right-click › Lock, the Delete key */
#scenesPanel .olist .ob.op[data-act="play"], #pagesPanel .olist .ob.op[data-act="play"], #stopsPanel .olist .ob.op[data-act="play"], #hotsPanel .olist .ob.op[data-act="play"] { visibility: hidden; pointer-events: none; }      /* Fly there on every row: double-click the row (it flies there), right-click › Frame it up / Fly to it */
.starts > [data-s="save"] { display: none !important; }      /* Save start on the view cube: Ctrl+Space with the space picked in the Project list (its own tooltip said so) */