/* HOW A HOTSPOT IS DRAWN — shared by the editor (index.html) and the web page File › Publish makes (view.html). Moved out of frame.css 24 Oct 2026 so the visitor sees the same orbs, stems and slides. */
/* ══ STEMS NEVER VANISH (24 Oct, his: "I can't see any stems"): a hotspot drawn smaller than designed keeps its lines (stem, rules, outlines) at their
   designed thickness on screen — at real size in the room a 1 px stem was a fraction of a pixel ══ */
#hotLayer .hot.tiny svg :is(path, line, polyline, polygon, circle, rect, ellipse),
.hotLayerMirror .hot.tiny svg :is(path, line, polyline, polygon, circle, rect, ellipse) { vector-effect: non-scaling-stroke; }
/* THE REAL REASON FOR NO STEMS AND NO ORBS (24 Oct): a hotspot's host is 0 × 0, so callout.js's drawing <svg> (width / height 100 %) was 0 × 0 —
   and an svg of zero size is not drawn at all (the SVG rule), whatever overflow says. 1 px keeps it drawn; its lines still reach out past it */
#hotLayer .callout > svg, .hotLayerMirror .callout > svg { width: 1px !important; height: 1px !important; }


/* a hotspot whose slide faces you but whose orb and stem stay in the room is drawn twice: the slide alone, and the orb with its stem alone */
#hotLayer .hot.slideOnly .callout > svg, .hotLayerMirror .hot.slideOnly .callout > svg { display: none !important; }
#hotLayer .hot.orbOnly .callout > div, .hotLayerMirror .hot.orbOnly .callout > div { display: none !important; }


/* the visitor's page: the hotspots only look — the camera gets every press */
#hotLayer.viewOnly:not(.blocking), #hotLayer.viewOnly:not(.blocking) * { pointer-events: none !important; }
#hotLayer.viewOnly.blocking { pointer-events: auto !important; }
/* (29 Oct) the Fly through button on the Project details card takes its press even with no page blocking the picture */
#hotLayer.viewOnly .hotPages [data-item=flybtn], #hotLayer.viewOnly .hotPages [data-item=flybtn] * { pointer-events: auto !important; cursor: pointer; }
#hotLayer.viewOnly.blocking .hot3d, #hotLayer.viewOnly.blocking .hot3d * { pointer-events: none !important; }
#hotLayer.viewOnly .hotPages [data-callout] { cursor: default; }
#hotLayer.viewOnly .hotPages [data-callout*=".b"] { cursor: pointer; }

/* the pages: flat on the picture, over the room */
.hotPages { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }

/* THE VISITOR'S PAGE FADES UP AND DOWN (25 Oct): 0.6 s; off = invisible and out of reach once the fade-out has finished */
.hotPages .hot { transition: opacity .6s ease; }
.hotPages .hot.pgOff { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s linear .6s; }
/* a page that fills the screen is not moved or scaled: no corner squares */
#hotLayer .hot.fillPage .hotCorner, #pagesLayer .hot.fillPage .hotCorner { display: none !important; }
/* IN THE EDITOR a page that fills the screen lets a press through its empty background (a click on the scan behind it is the scan's); its Explore button and the Pages list still pick it.
   The visitor's page keeps blocking while it shows (viewOnly.blocking above) */
#hotLayer:not(.viewOnly) .hot.fillPage:not(.noThrough) [data-callout]:not([data-callout*="."]), #hotLayer:not(.viewOnly) .hot.fillPage:not(.noThrough) [data-callout]:not([data-callout*="."]) *,
#pagesLayer .hot.fillPage:not(.noThrough) [data-callout]:not([data-callout*="."]), #pagesLayer .hot.fillPage:not(.noThrough) [data-callout]:not([data-callout*="."]) * { pointer-events: none !important; }
/* (25 Oct evening, his: "when I do try, I can't click on anything") the page's PARTS keep the mouse — its words (a double-click types them), its buttons, its slides; only the empty background lets a press through */
#hotLayer:not(.viewOnly) .hot.fillPage:not(.noThrough) [data-callout] [data-callout*="."], #hotLayer:not(.viewOnly) .hot.fillPage:not(.noThrough) [data-callout] [data-callout*="."] *,
#pagesLayer .hot.fillPage:not(.noThrough) [data-callout] [data-callout*="."], #pagesLayer .hot.fillPage:not(.noThrough) [data-callout] [data-callout*="."] *,
#pagesLayer .hot.fillPage:not(.noThrough):not(.locked) [data-callout] [data-line][data-item], #pagesLayer .hot.fillPage:not(.noThrough):not(.locked) [data-callout] [data-line][data-item] * { pointer-events: auto !important; }
/* THE VISITOR'S PAGE with "the scan behind can be dragged" ticked (his, 25 Oct late: "the drags go through and register, which is good"): the layer takes nothing; only the page's own buttons take a press */
#hotLayer.viewOnly.blocking.through, #hotLayer.viewOnly.blocking.through * { pointer-events: none !important; }
#hotLayer.viewOnly.blocking.through .hotPages [data-callout*=".b"], #hotLayer.viewOnly.blocking.through .hotPages [data-callout*=".b"] * { pointer-events: auto !important; }

/* ══ THE PAGES' OWN LAYER (25 Oct late): over the EDITING monitor since his rules of 25 Oct (the Preview has its own live copy, #pagesLive, below) — the same looks the hotspots' layer gives a page ══ */
#pagesLayer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: hidden; }      /* (over the hotspot titles drawn in the same viewport: a page covers them) */
#pagesLayer .callout > svg { width: 1px !important; height: 1px !important; }
#pagesLayer .hot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transform-style: flat; backface-visibility: visible; }
#pagesLayer .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
#pagesLayer .hot [data-callout] { pointer-events: auto; cursor: pointer; }
#pagesLayer .hot.locked [data-callout] { pointer-events: none; cursor: default; }
/* its words are hit-testable too — a double-click on them edits them (the backdrop of a filling page lets presses through) */
#pagesLayer .hot:not(.locked) [data-line][data-item] { pointer-events: auto; cursor: text; }
#pagesLayer .hotBox { position: absolute; border: calc(1px * var(--ik, 1)) solid rgba(143, 208, 245, .7); display: none; pointer-events: none; box-sizing: border-box; }
#pagesLayer .hot.picked .hotBox { display: block; }
/* (29 Oct, his: "I can't even move it … all that needs to be done directly in the viewport") a picked page can be dragged from anywhere inside its frame — words, glass or the empty part; the corners still size it */
#pagesLayer .hot.picked:not(.locked) .hotBox { pointer-events: auto; cursor: move; }
#pagesLayer .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; }
#pagesLayer .hot.locked .hotCorner { display: none; }
#pagesLayer .hotCorner.nw { left: 0; top: 0; cursor: nwse-resize; } #pagesLayer .hotCorner.ne { left: 100%; top: 0; cursor: nesw-resize; }
#pagesLayer .hotCorner.se { left: 100%; top: 100%; cursor: nwse-resize; } #pagesLayer .hotCorner.sw { left: 0; top: 100%; cursor: nesw-resize; }
#pagesLayer.dragging .hotBox { display: none !important; }
body.ws-designer #pagesLayer, body.ws-designer #pagesLayer * { pointer-events: none !important; }
/* THE PREVIEW'S COPY OF THE PAGES (his rules, 25 Oct): the visitor's — a button takes the click (it does what it does); a page that fills the screen and does not let the scan be dragged takes
   every press; the rest lets presses through to the Preview's camera. No frames, no corners */
#pagesLive { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: hidden; }
#pagesLive .callout > svg { width: 1px !important; height: 1px !important; }
#pagesLive .hot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transform-style: flat; backface-visibility: visible; }
#pagesLive .hotArt { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
#pagesLive .hotBox, #pagesLive .hotCorner { display: none !important; }
#pagesLive .hot.fillPage.noThrough [data-callout] { pointer-events: auto; cursor: default; }
#pagesLive .hot [data-callout*=".b"], #pagesLive .hot [data-callout*=".b"] * { pointer-events: auto; cursor: pointer; }
#pagesLive .hot.pgOff, #pagesLive .hot.pgOff * { pointer-events: none !important; }
body.ws-designer #pagesLive, body.ws-designer #pagesLive * { pointer-events: none !important; }
/* the ⌂ while a page is put away (the editor's mini preview): top left of the viewport, as the visitor's */
.pgHome { position: absolute; left: 12px; top: 56px; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; z-index: 2; pointer-events: auto; cursor: pointer;
  background: rgba(14, 16, 20, .72); color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.pgHome:hover { background: rgba(40, 44, 52, .85); }
.pgHome[hidden] { display: none; }

/* the Darkness row in a page's Slide panel: the % stays on one line */
.pgDark input[type=range] { flex: 1 1 auto; min-width: 0; }
.pgDark em { white-space: nowrap; flex: 0 0 auto; min-width: 3.2em; text-align: right; }

/* THE LANDING PAGE CLEARS THE HOTSPOTS (his, 25 Oct: "while the landing page is up, the hotspots are gone"): each hotspot fades (not the 3D layer itself — opacity on it would flatten every hotspot's perspective mid-fade) */
#hotLayer .hot3d > .hot, .hotLayerMirror .hot3d > .hot { transition: opacity .6s ease, visibility 0s; }
#hotLayer .hot3d.landUp > .hot, .hotLayerMirror .hot3d.landUp > .hot { opacity: 0; visibility: hidden; pointer-events: none !important; transition: opacity .6s ease, visibility 0s linear .6s; }

/* THE VISITOR'S HOTSPOTS, while they may be clicked (the floor plan): a click flies down to the hotspot */
#hotLayer.viewOnly.hotPick:not(.blocking) .hot3d [data-callout] { pointer-events: auto !important; cursor: pointer; }
/* HOME · FLOOR PLAN (his, 25 Oct night: "sexy button[s]") — the Willow Retreat button: a dark frosted box, a thin frame, white capitals spaced out; on hover a line grows under the
   words, then up into the whole frame. The editor's (top left of the Preview, .pgNav) and the visitor's (#navPills) are the same */
.navPills { display: flex; gap: 10px; align-items: center; }
.navPills[hidden] { display: none; }
.pgNav { position: absolute; right: 12px; top: 232px; z-index: 2; pointer-events: auto; }      /* (under the editor's pointer tool, top left of the picture) */
.navPill { position: relative; padding: 11px 18px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 2px; background: rgba(12, 12, 14, .34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 400 11.5px/1 'Jost', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .3em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background .3s, border-color .3s; }
.navPill[hidden] { display: none; }
/* RESET CAMERA (his, 29 Oct): an icon, not words — the visitor's (#resetCam, turdfx.css) and the editor's Preview's (.pgReset, bottom right of the Preview) */
.camReset { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; letter-spacing: 0; }
.camReset svg { display: block; width: 36px; height: 36px; }
.pgReset { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
/* TELEPHOTO ICON (his, 29 Oct): a telephoto lens at the right edge, middle of the picture, while the lens is narrowed past max distance — the visitor's (#teleIcon) and the Preview's (.pgTele) */
.teleIcon { position: fixed; right: max(16px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%) scale(1.33); transform-origin: right center; z-index: 7; padding: 9px 11px;
  color: #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.teleIcon.on { opacity: 1; }
.teleIcon.pgTele { position: absolute; right: 12px; }
.navPill::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; margin: 0 auto; width: 0; height: 0; box-sizing: border-box; border: 1px solid transparent;
  border-bottom-color: rgba(255, 255, 255, .95); pointer-events: none; transition: width .28s ease, height .28s ease, border-color 0s .28s; }
.navPill:hover::before { width: calc(100% + 2px); height: calc(100% + 2px); border-color: rgba(255, 255, 255, .95);
  transition: width .28s ease, height .28s ease .28s, border-left-color 0s .28s, border-right-color 0s .28s, border-top-color 0s .28s; }
.navPill:hover { background: rgba(12, 12, 14, .5); }
.navPill.on { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .14); }
.navPill:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
/* NEXT / PREVIOUS (the guided tour, app/tour.js; his: "a next and previous button down the bottom and in the center") — the same frosted buttons; they fade up for the tour only */
.tourNav { display: flex; gap: 12px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.tourNav.on { opacity: 1; pointer-events: auto; }
.tourNav .navPill { min-width: 128px; padding: 13px 20px 12px; }
#tourNav { position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 6px); transform: translateX(-50%); z-index: 7; }
.pgTourNav { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 2; }
/* ON THE FLOOR PLAN, THE HEADINGS ONLY (his, 25 Oct): a detail fades away as the camera tips up over the plan, and back as it comes down */
#hotLayer .hot3d > .hot.planOut, .hotLayerMirror .hot3d > .hot.planOut { opacity: 0; visibility: hidden; pointer-events: none !important; transition: opacity .6s ease, visibility 0s linear .6s; }
/* THE PILL (his, 25 Oct, Trash Cult's: Explore ⇄ Tour, bottom centre) — between Previous and Next in the tour; alone exploring */
.tourNav .modePill { min-width: 112px; font-weight: 600; }
/* (29 Oct, his: "the tour button and the explore button need to be a switchable pill … the square around it being the space it needs") ONE pill, two words — Explore · Tour — the square sits round the one you are in; a click moves it to the other */
/* (his, later that day: "the pill stays still in the middle and just the writing moves underneath it") THE SQUARE NEVER MOVES: it is the pill's own frame in the middle; the two words slide under it — the one you are in
   comes to the middle, the other waits at its side, dim */
.tourNav .modePill.sw, .pgTourNav .modePill.sw { position: relative; display: block; width: 292px; height: 40px; padding: 0 !important; min-width: 0 !important; overflow: hidden; }
.tourNav .modePill.sw::before { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 104px; height: auto; margin: 0; transform: translateX(-50%); box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .14); pointer-events: none; transition: none; }
.tourNav .modePill.sw:hover::before { width: 104px; height: auto; }
.tourNav .modePill.sw span { position: absolute; left: 50%; top: 50%; white-space: nowrap; opacity: .5; transform: translate(-50%, -50%) translateX(var(--x, 0px)); transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .38s ease; }
.tourNav .modePill.sw [data-m=explore] { --x: -92px; }
.tourNav .modePill.sw [data-m=tour] { --x: 92px; }
.tourNav .modePill.sw[data-state=explore] [data-m=explore], .tourNav .modePill.sw[data-state=tour] [data-m=tour] { --x: 0px; opacity: 1; }
.tourNav .modePill.sw[data-state=explore] [data-m=tour] { --x: 92px; }
.tourNav .modePill.sw[data-state=tour] [data-m=explore] { --x: -92px; }
/* THE PILL NEVER MOVES (his): the nav is a grid — the pill on its own row, Previous / Next on the row under it (reserved, faded in only in the tour), Info floating above it */
.tourNav, .pgTourNav { display: grid !important; grid-template-columns: 1fr 1fr; justify-items: center; align-items: center; gap: 8px 12px; max-width: none !important; }
.tourNav::after { display: none !important; }
.tourNav .modePill.sw { grid-column: 1 / 3; grid-row: 1; }
.tourNav [data-go=prev], .tourNav #tourPrev { grid-row: 2; grid-column: 1; justify-self: end; }
.tourNav [data-go=next], .tourNav #tourNext { grid-row: 2; grid-column: 2; justify-self: start; }
.tourNav [data-go=info], .tourNav #tourInfo { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; }
.tourNav:not(.touring) [data-go], .tourNav:not(.touring) #tourPrev, .tourNav:not(.touring) #tourNext { display: inline-block !important; visibility: hidden; }
.tourNav [data-go=prev], .tourNav [data-go=next], .tourNav #tourPrev, .tourNav #tourNext { transition: opacity .4s ease; }
/* THE FLY THROUGH BUTTON lives on the Project details card (his, 29 Oct); it fades away while the fly-through runs and back at its last stop. Previous / Next the same width so the pill stays in the middle */
[data-item=flybtn] { transition: opacity .6s ease; }
body.flyRunning [data-item=flybtn] { opacity: 0 !important; pointer-events: none !important; }
.tourNav [data-go=prev], .tourNav [data-go=next], #tourNav #tourPrev, #tourNav #tourNext { min-width: 98px !important; text-align: center; }
/* THE VISITOR'S BUTTONS (25 Oct — the project's Walls and the room, a choice left to the visitor): next to the pill, in both modes */
.tourNav .askPill { min-width: 112px; }
.tourNav .askPill[hidden] { display: none; }
.tourNav:not(.touring) [data-go], .tourNav:not(.touring) #tourPrev, .tourNav:not(.touring) #tourNext { display: none; }      /* (the pill itself stays) */
/* INFO (the mini tour, his 25 Oct: "they can hit an info button and it takes them on a little mini tour around the kitchen from one feature to the next … it's there throughout the whole
   tour, but maybe it just has a slight change of state if there is a mini tour"): the middle button of ‹ Previous · Info · Next ›, in the tour the whole way — lit (.on) when the room has
   features to see, dim when it has nothing; BACK while in a room's features */
.tourNav #tourInfo, .tourNav [data-go=info] { min-width: 96px; }
.tourNav:not(.touring) #tourInfo { display: none; }
/* (29 Oct, his: "the info pill can go above it … only needs to be there once we start adding the spec slides or the micro tour slides") Info shows only in a room that has features, on a row of its own above the switch */
.tourNav { flex-wrap: wrap; justify-content: center; }
.tourNav #tourInfo, .tourNav [data-go=info] { order: -1; }
.tourNav::after { content: ''; order: -1; flex-basis: 100%; height: 0; }
.tourNav #tourInfo:not(.on), .tourNav [data-go=info]:not(.on) { display: none; }
/* THE TOUR PILLS IN A NARROW PICTURE (25 Oct night; noticed the night before: "five buttons in the tour pill can be wider than a small Preview"): they wrap onto a second row instead of
   running off the edge; the editor's small Preview monitor gets slimmer pills, and so does a narrow phone */
.tourNav { flex-wrap: wrap; justify-content: center; row-gap: 6px; max-width: calc(100% - 20px); }
.pgTourNav .navPill, .pgTourNav .modePill, .pgTourNav [data-go=info] { min-width: 0; padding: 9px 12px 8px; }
@media (max-width: 480px) { #tourNav .navPill, #tourNav .modePill, #tourNav #tourInfo { min-width: 0; padding: 10px 12px 9px; } }

/* THE MODE MENU (his, 29 Oct 2026: "it just shows the single mode that we are on. And if you click on it, the other mode that you can switch to appears above it … it folds away"): app/mode-menu.js.
   It takes the old switch's place (the switch's sliding words overlapped); the other modes unfold upward, one above the other, and fold back down into the pill */
.tourNav .modeMenu { position: relative; grid-column: 1 / 3; grid-row: 1; display: flex; flex-direction: column; align-items: center; }
.modeMenu .mmPill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 168px !important; font-weight: 600; }
.modeMenu .mmArrow { display: block; width: 6px; height: 6px; margin-top: 3px; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s ease, margin .3s ease; opacity: .8; }
.modeMenu.open .mmArrow { transform: rotate(225deg); margin-top: -4px; }
.modeMenu.single .mmArrow { display: none; }
.modeMenu.single .mmPill { cursor: default; }
.modeMenu .mmList { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.modeMenu .mmItem { min-width: 168px; text-align: center; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .22s ease, transform .28s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); pointer-events: none; }
.modeMenu.open .mmList { pointer-events: auto; }
.modeMenu.open .mmItem { opacity: 1; transform: none; pointer-events: auto; }
.pgTourNav .modeMenu .mmPill, .pgTourNav .modeMenu .mmItem { min-width: 140px !important; }
/* Info sits above the pill too: it gives way while the menu is open */
.tourNav:has(.modeMenu.open) [data-go=info], .tourNav:has(.modeMenu.open) #tourInfo { visibility: hidden; }
/* no Next / Previous in the fly-through (his, 29 Oct) */
.tourNav.flying [data-go=prev], .tourNav.flying [data-go=next], .tourNav.flying #tourPrev, .tourNav.flying #tourNext, .tourNav.flying [data-go=info], .tourNav.flying #tourInfo { display: none !important; }

/* THE NAVIGATION ROW, ONE LINE (his, 29 Oct 2026, a rough draft: "PREV · TOUR · NEXT … I want it all to be white, and the little thing above tour is just one of those little flattened out arrows"): Prev, the mode pill and Next sit on one row, bigger, no boxes, all white; the flattened chevron above the mode says it is a button that opens */
.tourNav, .pgTourNav { grid-template-columns: auto auto auto !important; gap: 28px !important; align-items: end !important; }
.tourNav .modeMenu { grid-column: 2 !important; grid-row: 1 !important; }
.tourNav [data-go=prev], .tourNav #tourPrev { grid-column: 1 !important; grid-row: 1 !important; justify-self: end; }
.tourNav [data-go=next], .tourNav #tourNext { grid-column: 3 !important; grid-row: 1 !important; justify-self: start; }
.tourNav .navPill, .tourNav .mmPill, .tourNav .mmItem { background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #fff !important; font-size: calc(clamp(14px, 1.5vw, 24px) * var(--nv, 1)) !important; letter-spacing: .4em;      /* (the visuals kit's own Tour button size: his 29 Oct, "the button on the home screen was the perfect font size") */ text-shadow: 0 1px 8px rgba(0, 0, 0, .75); padding: 12px 6px 10px; min-width: 0 !important; }
.tourNav .navPill::before { display: none !important; }
.tourNav .navPill:hover, .tourNav .mmPill:hover, .tourNav .mmItem:hover { color: #fff !important; text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 1px 8px rgba(0, 0, 0, .75); }
.tourNav [data-go=info], .tourNav #tourInfo { margin-bottom: calc(30px * var(--nv, 1)) !important; font-size: calc(clamp(12px, 1.1vw, 17px) * var(--nv, 1)) !important; }
.modeMenu .mmPill { flex-direction: column; gap: 2px; align-items: center; }
.modeMenu .mmChev { display: block; width: 30px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); transition: transform .3s ease; }
.modeMenu.open .mmChev { transform: rotate(180deg); }
.modeMenu.single .mmChev { display: none; }
.modeMenu .mmArrow { display: none !important; }
.modeMenu .mmList { bottom: calc(100% + 4px); }
.pgTourNav .navPill, .pgTourNav .mmPill, .pgTourNav .mmItem { font-size: calc(clamp(12px, 1.5vw, 24px) * var(--nv, 1)) !important; }
/* DESKTOP SIZE (his, 29 Oct: "Is there a way we can set font sizes for desktop? … way too small, but … perfectly fine for mobile"): on a wide screen with a mouse every navigation word is this many times its phone size — Navigation look panel › Desktop size (tour.json › nuiEdit.desktop; 1 to start — the kit's own size) */
@media (min-width: 900px) and (pointer: fine) { :root { --nv: var(--nv-desktop, 1); } }
.modeMenu .mmChev { width: calc(30px * var(--nv, 1)); height: calc(11px * var(--nv, 1)); }

/* THE LANDING PAGE DARKENS THE SCAN (his, 29 Oct 2026: "for the home screen, we'll have a darkened background until we hit a button to activate navigation. Because it's too hard to see the writing"): while the Home page (or the Project details card) is up the picture behind it is dimmed; it lifts as a mode is picked. The visitor's page (#stage) and the editor's Presentation monitor (#pagesLive) */
body.visitor #stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .7s ease; }
body.visitor.homeOn #stage::after { opacity: 1; }
#pagesLive::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .7s ease; }
#pagesLive.homeDim::before { opacity: 1; }

/* (his, 29 Oct: "the little ear above tour is too close … a hamburger menu with three lines, but each one reduces in size, and it creates the triangle like a tier") three lines, the widest at the foot, well clear of the word */
.modeMenu .mmChev { width: calc(26px * var(--nv, 1)); height: calc(14px * var(--nv, 1)); stroke-width: 1.6; }
.modeMenu .mmPill { gap: 12px !important; }
/* (his, 29 Oct: Home, settings and Reset camera "up to the top right corner snugly"; no title pill on the visitor's page) */
body.visitor #top { display: none; }
body.visitor #resetCam { top: max(10px, env(safe-area-inset-top)); bottom: auto; right: max(10px, env(safe-area-inset-right)); }
body.visitor #navPills { top: max(10px, env(safe-area-inset-top)); right: calc(max(10px, env(safe-area-inset-right)) + 62px); }
body.visitor .q-gear { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 128px); top: max(10px, env(safe-area-inset-top)); width: 58px; height: 58px; }
body.visitor.homeOn #resetCam, body.visitor.homeOn .q-gear { opacity: 0; }
body.visitor #loadingName { font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 200 !important; font-size: clamp(30px, 6vw, 56px) !important; letter-spacing: .5em !important; margin-right: -.5em; text-transform: uppercase; color: #cfe6f5 !important; }

/* (his, 30 Oct) the address under the loading bar; and the GLASS credit is a link to the website */
body.visitor #loadingUrl { font: 300 12px/1 'Jost', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .32em; color: rgba(255,255,255,.7); margin-right: -.32em; }
.credits a.glass { pointer-events: auto; text-decoration: none; cursor: pointer; }
.credits a.glass:hover { color: #fff; }