/* Lanaar 360° tour, Option C3: the picture route. Visual language follows lanaarschool.org:
   navy and gold, PP Fragment Serif for names, Inter for everything else, square edges.
   Donors recognise rooms by sight, so the route along the bottom is a strip of small pictures
   on every device: the current stop is larger and carries its name, its neighbours are small
   numbered pictures. Under it one quiet row: Home, Back, Next and the one gold action. */
:root{
  --navy:#042339;--navy-rail:rgba(4,35,57,.97);--navy-soft:rgba(4,35,57,.92);--navy-tile:#0B314D;
  --gold:#BC9E5D;--gold-light:#D3BC8E;--gold-ink:#7A6232;--paper:#F7F5F0;--ink-muted:#4A5E70;--rule:rgba(4,35,57,.12);--line:rgba(255,255,255,.12);
  --serif:"PP Fragment Serif",Georgia,"Times New Roman",serif;--sans:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --gutter-l:max(16px,var(--safe-l));--gutter-r:max(16px,var(--safe-r));
  --top:max(16px,env(safe-area-inset-top));
  --rail-h:170px; /* measured by tour360.js */
  /* The strip: neighbour pictures, the current picture, spacing; the dock row */
  --tw:96px;--th:60px;--cw:128px;--ch:80px;--strip-y:12px;--strip-x:24px;--strip-gap:10px;--where-w:300px;--dock-h:58px;
  color-scheme:dark;font-family:var(--sans);color:#fff;background:var(--navy);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:var(--navy)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
#panorama canvas:focus-visible{outline-offset:-4px}
.menu:focus-visible,.view-controls button:focus-visible,.hotspot:focus-visible,dialog#places :focus-visible,.failure :focus-visible{outline-color:var(--navy)}
.view-controls button:focus-visible{outline-offset:-3px}
dialog#places:focus,dialog#places:focus-visible{outline:none}
button:disabled{opacity:.32;cursor:default}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:block;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}

/* The panorama and the marks placed on it */
#panorama,#hotspots,#item-hotspots{position:fixed;inset:0}
#panorama canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#panorama canvas:active{cursor:grabbing}
#hotspots,#item-hotspots{pointer-events:none}
body::before{content:"";position:fixed;z-index:1;inset:0 0 auto;height:150px;pointer-events:none;background:linear-gradient(rgba(4,35,57,.5),rgba(4,35,57,0))}

.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;height:40px;max-width:230px;padding:0 15px 0 6px;border-radius:20px;background:rgba(255,255,255,.95);color:var(--navy);font-size:13px;font-weight:500;box-shadow:0 6px 20px rgba(4,35,57,.3);transition:transform .16s ease}
.hotspot .arrow{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff}
.hotspot .arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hotspot span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pill-yield (SW75): an arrow's pill that stepped aside from a gift marker and still met one shows its arrow alone. */
#hotspots .hotspot.compact{gap:0;padding:0 6px}
#hotspots .hotspot.compact span:last-child{display:none}

/* Gift markers: a navy disc with a white rim and a gold dot, legible on pale walls and dark furniture alike (the old gold ring
   measured 1.03-2.0:1 against the hallways' walls). Each look is a set of custom properties, so a state restyles only what it
   changes: .is-dedicated (tour360.js) is the slot for pieces already dedicated - until their own look (the dedication marker's
   seal) is chosen they keep this one; --mk-glyph takes a mask image (the crest's flame) for the dot. */
.item-hotspot{--mk-size:24px;--mk-rim:2px solid #fff;--mk-fill:rgba(4,35,57,.86);--mk-shadow:0 0 0 2px rgba(4,35,57,.26),0 3px 10px rgba(4,35,57,.45);--mk-dot-w:10px;--mk-dot-h:10px;--mk-dot-radius:50%;--mk-dot:var(--gold);--mk-glyph:none;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:transparent;font-size:0}
.item-hotspot::before{content:"";width:var(--mk-size);height:var(--mk-size);box-sizing:border-box;border-radius:50%;border:var(--mk-rim);background:var(--mk-fill);box-shadow:var(--mk-shadow);transition:transform .16s ease}
.item-hotspot::after{content:"";position:absolute;width:var(--mk-dot-w);height:var(--mk-dot-h);border-radius:var(--mk-dot-radius);background:var(--mk-dot);-webkit-mask:var(--mk-glyph) center/contain no-repeat;mask:var(--mk-glyph) center/contain no-repeat}
/* The dedicated look in the slot (the dedication marker's step 1, SW74; the hallway coordination's seal_as_one_rule): a solid
   gold seal bearing the flame of the school's crest (brand/lanaar-logo.svg) in place of the navy disc and its gold dot, the
   same size and place and the same 44 px target. */
:root{--flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18.3 -.2 14 20.4'%3E%3Cpath d='M20.036 16.086c1.027 1.192 3.152 2.937 4.359 3.9l.338-.087 3.08-.768c.209-.345.417-.675.625-1.012.804-.704 1.587-1.437 2.104-2.033.948-.998 1.508-2.27 1.508-3.662.022-1.516-.775-3.397-1.364-5.235-.086-.266-2.04 1.716-2.808 3.339-.158.337-.266.653-.294.933-.08.762.114 1.68.258 2.241.029.108-.014.13-.093.036-.747-.862-1.034-1.602-1.049-2.277-.014-.524.137-1.005.36-1.479.631-1.336 1.86-2.578 1.716-4.309-.008-4.194-2.995-5.68-3.965-5.68 1.092 5.178-6.362 7.066-6.29 12.423 0 1.386.567 2.665 1.508 3.663'/%3E%3C/svg%3E")}
.item-hotspot.is-dedicated{--mk-size:24px;--mk-rim:1px solid rgba(4,35,57,.5);--mk-fill:radial-gradient(circle at 38% 32%,#E2CFA5,var(--gold) 58%,#A98A4B);--mk-shadow:0 0 0 1px rgba(247,245,240,.55),0 4px 14px rgba(4,35,57,.42);--mk-dot-w:10px;--mk-dot-h:14.6px;--mk-dot-radius:0;--mk-dot:var(--navy);--mk-glyph:var(--flame)}
/* A line partly dedicated (some pieces dedicated, the rest still open): its own marker, with a small gold seal at its
   shoulder (tour360.js adds the <i class="mk-part">). */
.item-hotspot .mk-part{position:absolute;left:calc(50% + 4px);top:calc(50% - 18px);width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(4,35,57,.55);background:radial-gradient(circle at 38% 32%,#E2CFA5,var(--gold) 58%,#A98A4B);box-shadow:0 0 0 1px rgba(247,245,240,.6),0 2px 6px rgba(4,35,57,.45);pointer-events:none}
.item-hotspot .mk-part::after{content:"";position:absolute;inset:2.5px 3.6px;background:var(--navy);-webkit-mask:var(--flame) center/contain no-repeat;mask:var(--flame) center/contain no-repeat}
/* The hover label of a dedicated piece: its name, DEDICATED in small gold capitals in the price's place, then its words in
   the serif; a line partly dedicated adds how many are (tour360.js showHover). */
.pick-label.is-dedicated{max-width:min(300px,calc(100vw - 32px))}
.pick-label.is-dedicated .price{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pick-label .honoree{margin-top:4px;padding-top:6px;border-top:1px solid rgba(211,188,142,.3);font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.28;color:#fff;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.pick-label .part{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.74)}
.item-hotspot:focus-visible::before{transform:scale(1.15)}
/* Marks belong to a still view: they leave while the view moves between places and fade in once it
   settles (and whenever one comes into view), rather than popping in. Reduced motion: no fade. */
.hotspot,.item-hotspot{animation:mark-in .24s ease-out}
@keyframes mark-in{from{opacity:0}}

/* Top: the school mark, your gifts and the full list of rooms */
.toolbar{position:fixed;z-index:3;top:var(--top);left:var(--gutter-l);right:var(--gutter-r);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.toolbar>*{pointer-events:auto}
.brand{display:block;line-height:0;color:#fff}
.brand svg{height:42px;width:auto;filter:drop-shadow(0 1px 10px rgba(4,35,57,.35))}
.actions{display:flex;gap:8px}
.cart-link,.menu{height:48px;display:inline-flex;align-items:center;gap:10px;padding:0 16px;font-size:13px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.cart-link{background:var(--navy-soft);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cart-link .icon{width:18px;height:18px;color:var(--gold-light)}
.cart-link .count{min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;background:var(--gold);color:var(--navy);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.menu{background:#fff;color:var(--navy)}
.menu .icon{width:18px;height:18px}
.menu-short{display:none}

/* Desktop view controls: a single quiet column on the right, centred over the picture */
.view-controls{position:fixed;z-index:3;right:var(--gutter-r);top:calc(50% - var(--rail-h) / 2);transform:translateY(-50%);display:flex;flex-direction:column;background:#fff;box-shadow:0 10px 30px rgba(4,35,57,.25)}
.view-controls button{width:44px;height:44px;display:grid;place-items:center;color:var(--navy)}
.view-controls button+button{border-top:1px solid var(--rule)}

/* The rail: the picture route, then one row of controls */
.bottom{position:fixed;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--navy-rail);border-top:2px solid var(--gold);padding-bottom:var(--safe-b);box-shadow:0 -12px 40px rgba(4,35,57,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* The route: every stop in order, as pictures. tour360.js marks the current stop, moves the
   "where" block (stop number, room name, view) into it and keeps it centred. */
.stops{position:relative;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.stops::-webkit-scrollbar{display:none}
#stop-strip{display:flex;align-items:center;gap:var(--strip-gap);flex:none;width:max-content;margin:0;padding:var(--strip-y) max(var(--strip-x),var(--safe-r)) var(--strip-y) max(var(--strip-x),var(--safe-l));list-style:none}
#stop-strip li{display:flex;align-items:center;flex:none}
.stop{position:relative;display:block;flex:none;width:var(--tw);height:var(--th);color:#fff}
.thumb{position:absolute;inset:0;display:grid;place-items:center;background:var(--navy-tile);overflow:hidden}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
/* A stop without a picture of ours: a plain navy tile with a line drawing of the place */
.thumb.empty{background:linear-gradient(160deg,#123D5C,var(--navy-tile) 70%)}
.thumb.empty .icon{width:72%;height:72%;stroke-width:1.1;color:var(--gold-light);opacity:.75}
.stops .stop .thumb img,.stops .stop .thumb.empty .icon{transition:opacity .2s ease}
.stops .stop .thumb img{opacity:.7}
.stops .stop .thumb.empty .icon{opacity:.5}
.stop .n{position:absolute;z-index:1;left:0;top:0;min-width:24px;padding:4px 5px 3px;background:rgba(4,35,57,.88);font-size:10px;font-weight:600;line-height:1;letter-spacing:.06em;text-align:center;color:var(--gold-light);font-variant-numeric:tabular-nums}
/* The current stop: a larger picture in a gold frame, with its name beside it */
.current .stop{width:var(--cw);height:var(--ch)}
.stops .current .stop .thumb img{opacity:1}
.stops .current .stop .thumb.empty .icon{opacity:.95}
.current .thumb::after{box-shadow:inset 0 0 0 2px var(--gold)}
.current .stop .n{background:var(--gold);color:var(--navy)}
.stop:focus-visible{outline-offset:2px}
.stop .cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:14px 6px 5px;background:linear-gradient(rgba(4,35,57,0),rgba(4,35,57,.92) 60%);font-size:10.5px;font-weight:500;line-height:1.2;text-align:left;color:#fff;opacity:0;transition:opacity .15s ease;pointer-events:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.current .stop .cap{display:none}
.stop:focus-visible .cap{opacity:1}
.where{flex:none;display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:var(--where-w);padding:0 12px 0 14px}
#route-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where h1{margin:5px 0 0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.08;letter-spacing:-.005em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.view-name{margin-top:5px;font-size:13px;line-height:1.2;color:rgba(255,255,255,.62);white-space:nowrap}
.view-name:empty{display:none}

/* One row: Home and Back / Next together, then the gold action */
.route{display:flex;align-items:stretch;height:var(--dock-h);border-top:1px solid var(--line);padding:0 var(--safe-r) 0 var(--safe-l)}
.home,.step{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;padding:0 22px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em;white-space:nowrap;border-right:1px solid var(--line)}
.home{padding-left:var(--strip-x)}
.home .icon,.step .icon{color:var(--gold-light)}
.forward{justify-content:space-between;gap:18px;min-width:230px;max-width:360px;padding:0 20px 0 24px;text-align:left}
.next-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.next-line{display:block;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);white-space:nowrap}
.forward .to{font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.dedicate{flex:none;margin-left:auto;padding:0 36px;background:var(--gold);color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.dedicate:focus-visible{outline-color:var(--navy);outline-offset:-5px}

/* A first-visit hint; it fades away (tour360.js). It follows the rail's measured height. */
.help{position:fixed;z-index:2;left:50%;transform:translateX(-50%);bottom:calc(var(--rail-h) + 14px);max-width:calc(100vw - 32px);margin:0;padding:10px 16px;display:flex;align-items:center;gap:12px;background:rgba(4,35,57,.82);color:rgba(255,255,255,.92);font-size:12.5px;white-space:nowrap;pointer-events:none}
.help i{width:3px;height:3px;border-radius:50%;background:var(--gold-light)}
.help .short{display:none}
/* Tablets upright and narrow windows (641-819 px): the four-part hint, about 748 px on one line, takes two here: the walk pair
   over the gold pair, their dots in one column (SW75, audit F5). Children of #help (the seal's tour360.html): 1 span, 2 i,
   3 span.wide, 4 span.short, 5 i.wide (the dot joining the pairs, hidden here), 6 span.wide, 7 i.wide, 8 span.wide. */
@media (min-width:641px) and (max-width:819px) and (min-height:521px){
  .help{display:grid;grid-template-columns:auto auto auto;column-gap:12px;row-gap:4px}
  .help>span:nth-child(1),.help>span:nth-child(6){justify-self:end}
  .help>i:nth-child(5){display:none}
}

/* Loading and failure */
.status{position:fixed;z-index:4;top:calc(var(--top) + 64px);left:50%;transform:translateX(-50%);padding:11px 16px;background:var(--navy-soft);border-left:2px solid var(--gold);font-size:13px;white-space:nowrap}
.failure{position:fixed;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));padding:28px 28px 24px;background:var(--paper);color:var(--navy);border-top:2px solid var(--gold);box-shadow:0 24px 60px rgba(4,35,57,.35)}
.failure .eyebrow{color:var(--gold-ink)}
.failure h2{margin:10px 0 8px;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1}
.failure p{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--ink-muted)}
.failure-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.failure button{background:var(--navy);color:#fff;padding:13px 20px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.failure a{font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* All rooms: a panel from the right, like the school site's menu, now a grid of pictures in
   the order of the tour. Two columns on phones, three on tablets, four on computers. */
dialog#places{--cols:4;--pl:max(32px,calc(var(--safe-l) + 16px));--pr:max(32px,calc(var(--safe-r) + 16px));position:fixed;inset:0 0 0 auto;margin:0;width:min(940px,100vw);height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:var(--paper);color:var(--navy);box-shadow:-24px 0 60px rgba(4,35,57,.25)}
dialog#places[open]{display:flex;flex-direction:column}
dialog#places::backdrop{background:rgba(4,35,57,.42)}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:calc(var(--top) + 18px) var(--pr) 0 var(--pl)}
.dialog-head .eyebrow{color:var(--gold-ink)}
dialog#places .dialog-head h2{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.02}
.close{width:44px;height:44px;margin:-8px -12px 0 0;display:grid;place-items:center;color:var(--navy)}
.places-intro{margin:14px var(--pr) 18px var(--pl);max-width:52ch;font-size:14px;line-height:1.55;color:var(--ink-muted)}
#place-list{--gx:16px;--gy:20px;flex:1;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:var(--gx);container-type:inline-size;padding:0 var(--pr) 24px var(--pl);border-top:1px solid var(--rule);overscroll-behavior:contain}
#place-list .chapter-block{flex:0 1 auto;min-width:0}
#place-list .chapter{margin:24px 0 12px;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
#place-list .tiles{display:flex;flex-wrap:wrap;gap:var(--gy) var(--gx)}
/* One column width everywhere (from the list width), so a short chapter can sit beside the one before it */
dialog#places #place-list .tile{position:relative;flex:none;width:calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols) - .05px);display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;border:0;border-radius:0;background:none;text-align:left;color:var(--navy)}
#place-list .thumb{position:relative;inset:auto;display:grid;aspect-ratio:16/10}
#place-list .thumb img{transition:transform .3s ease}
#place-list .thumb.empty .icon{width:58%;height:58%;opacity:.85}
#place-list .tile .n{position:absolute;z-index:1;left:0;top:0;min-width:26px;padding:5px 6px 4px;background:rgba(4,35,57,.88);font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.06em;text-align:center;color:var(--gold-light);font-variant-numeric:tabular-nums}
#place-list .tile .name{margin-top:9px;font-family:var(--serif);font-size:18px;line-height:1.15}
#place-list .tile .here{display:none;margin-top:5px;font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
#place-list .tile[aria-current=true] .here{display:block}
/* On the way (a hallway view): "Up next" under the stop ahead; the hallway's own tile says "You are here" (tour360.js) */
#place-list .tile.ahead .here{display:block}
#place-list .tile[aria-current=true] .thumb::after{box-shadow:inset 0 0 0 3px var(--gold)}
#place-list .tile[aria-current=true] .n{background:var(--gold);color:var(--navy)}
.places-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:16px var(--pr) calc(max(16px,var(--safe-b)) + 8px) var(--pl);border-top:1px solid var(--rule);font-size:13px}
.text-button{font-size:13px;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.walk-link{color:var(--ink-muted);line-height:1.5}
.walk-link span{color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.walk-link small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E6F80}
.privacy-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}

/* Hover states only where there is a pointer that hovers (they stick after a tap on phones) */
@media (hover:hover){
  .hotspot:hover{transform:translate(-50%,-50%) scale(1.04)}
  .item-hotspot:hover::before{transform:scale(1.15)}
  .cart-link:hover{background:var(--navy)}
  .menu:hover{background:var(--paper)}
  .view-controls button:hover{background:var(--paper)}
  .home:hover,.step:hover:not(:disabled){background:rgba(255,255,255,.06)}
  .dedicate:hover{background:var(--gold-light)}
  .stops li:not(.current) .stop:hover .thumb img{opacity:.92}
  .stops li:not(.current) .stop:hover .thumb.empty .icon{opacity:.85}
  .stop:hover .cap{opacity:1}
  .close:hover{background:rgba(4,35,57,.06)}
  #place-list .tile:hover .thumb img{transform:scale(1.03)}
  #place-list .tile:hover .name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}

/* Touch devices look and zoom with gestures, so the view controls step aside */
@media (pointer:coarse){.view-controls{display:none}}

/* Smaller computers and tablets: the same rail, a little smaller */
@media (max-width:1100px){
  :root{--tw:80px;--th:50px;--cw:104px;--ch:65px;--strip-y:10px;--strip-x:20px;--strip-gap:8px;--where-w:260px;--dock-h:56px}
  .where h1{font-size:22px}
  .view-name{display:none}
  .home,.step{padding:0 18px}
  .home{padding-left:var(--strip-x)}
  .forward{min-width:0;max-width:280px;padding:0 18px 0 20px;gap:14px}
  .dedicate{padding:0 26px}
  dialog#places{--cols:3;width:min(720px,100vw)}
}

/* Phones held upright: the strip, then Home | Back | Next | the gold action in one row */
@media (max-width:640px) and (min-height:521px){
  :root{--tw:64px;--th:44px;--cw:80px;--ch:56px;--strip-y:8px;--strip-x:16px;--strip-gap:6px;--where-w:160px;--dock-h:50px}
  .brand svg{height:34px}
  .toolbar{gap:10px}
  .actions{gap:6px}
  .cart-link,.menu{height:44px;padding:0 13px;gap:8px}
  .menu-long{display:none}
  .menu-short{display:inline}
  .where{padding:0 10px 0 11px}
  #route-note{font-size:10px;letter-spacing:.13em}
  .where h1{margin-top:4px;font-size:18px;line-height:1.08}
  .home{gap:7px;padding:0 14px 0 max(16px,var(--safe-l))}
  .step{padding:0 12px}
  #previous{flex-direction:column;gap:3px;min-width:50px;padding:0 6px}
  #previous .step-text{font-size:9.5px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
  #forward{min-width:0;gap:4px;padding:0 10px 0 14px}
  .forward .to{display:none}
  .next-line{font-size:13px;letter-spacing:.02em;text-transform:none;color:#fff}
  .forward .kind{display:none}
  .dedicate{flex:1 1 auto;min-width:0;padding:0 10px;font-size:11.5px;letter-spacing:.1em}
  .help{bottom:calc(var(--rail-h) + 10px)}
  .help .wide{display:none}
  .help .short{display:inline}
  .hotspot{height:38px;max-width:170px;font-size:12px}
  .status{top:calc(var(--top) + 58px)}
  dialog#places{--cols:2;--pl:max(20px,calc(var(--safe-l) + 16px));--pr:max(20px,calc(var(--safe-r) + 16px));width:100vw}
  .dialog-head{padding-top:calc(var(--top) + 14px)}
  dialog#places .dialog-head h2{font-size:34px}
  .places-intro{margin-top:12px;margin-bottom:14px;font-size:13.5px}
  #place-list{--gx:12px;--gy:16px;padding-bottom:20px}
  #place-list .chapter{margin:20px 0 10px}
  #place-list .tile .name{margin-top:7px;font-size:16px}
  .places-foot{flex-direction:column;align-items:flex-start;gap:12px;padding-top:14px;padding-bottom:calc(max(14px,var(--safe-b)) + 6px)}
}
/* On the way, phones and short screens name only the stop ahead: "To stop 26 of 30" (the long form runs under the next picture) */
@media (max-width:640px),(max-height:520px){#route-note .way{display:none}}
/* Larger phones have room to say what Next does */
@media (min-width:420px) and (max-width:640px) and (min-height:521px){.forward .kind{display:inline}}
/* The narrowest phones: Home, Back and Next on one row, the gold action under them */
@media (max-width:359px) and (min-height:521px){
  :root{--cw:76px;--ch:54px;--where-w:136px}
  .route{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"home back next" "give give give";height:auto}
  .home{grid-area:home;height:48px}
  #previous{grid-area:back;height:48px}
  #forward{grid-area:next;height:48px;justify-content:flex-end;border-right:0}
  .dedicate{grid-area:give;height:48px;margin:0;font-size:12px;letter-spacing:.14em}
  .where h1{font-size:17px;line-height:1.06}
}
/* Short phones: the pictures need the room more than the intro does */
@media (max-width:640px) and (max-height:600px){.places-intro{display:none}#place-list{margin-top:12px}}
/* Small phones: the gold label keeps a little air */
@media (max-width:374px) and (min-width:360px) and (min-height:521px){.dedicate{padding:0 8px;letter-spacing:.08em}}
@media (max-width:380px){.cart-text{display:none}}
@media (max-width:360px){.help{flex-direction:column;gap:3px}.help i{display:none}}

/* Short screens (a phone on its side): one slim row, the strip between Back and Next */
@media (max-height:520px){
  :root{--tw:62px;--th:44px;--cw:72px;--ch:48px;--strip-y:6px;--strip-x:12px;--strip-gap:6px;--where-w:200px}
  .bottom{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"home back stops next give";padding-left:var(--safe-l);padding-right:var(--safe-r)}
  .route{display:contents}
  .stops{grid-area:stops;border-right:1px solid var(--line)}
  .home{grid-area:home;gap:7px;padding:0 14px 0 16px}
  #previous{grid-area:back;flex-direction:column;gap:3px;min-width:50px;padding:0 6px}
  #previous .step-text{font-size:9.5px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
  #forward{grid-area:next;min-width:0;gap:4px;padding:0 10px 0 14px}
  .forward .to,.forward .kind{display:none}
  .next-line{font-size:13px;letter-spacing:.02em;text-transform:none;color:#fff}
  .dedicate{grid-area:give;margin:0;padding:0 18px;font-size:11.5px;letter-spacing:.1em}
  .brand svg{height:32px}
  .cart-link,.menu{height:44px;padding:0 13px;gap:8px}
  #route-note{font-size:10px;letter-spacing:.13em}
  .where{padding:0 10px 0 11px}
  .where h1{margin-top:3px;font-size:17px;line-height:1.08}
  .view-name{display:none}
  .help{bottom:calc(var(--rail-h) + 10px)}
  .help .wide{display:none}
  .help .short{display:inline}
  .hotspot{height:38px;max-width:170px;font-size:12px}
  .status{top:calc(var(--top) + 54px)}
  dialog#places{--cols:4}
  .dialog-head{padding-top:calc(var(--top) + 10px)}
  dialog#places .dialog-head h2{font-size:30px}
  .places-intro{display:none}
  #place-list{margin-top:12px}
}
@media (max-height:520px) and (max-width:700px){
  :root{--where-w:140px}
  .home{padding:0 12px}
  .dedicate{padding:0 12px;letter-spacing:.06em}
  dialog#places{--cols:3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Any piece can be clicked (release-pick): the hand over a piece of the room you are in, and a small label with its name and
   price beside the mouse. It never takes a pointer event itself; a drag shows the grabbing hand as before. */
#panorama canvas.pick-over{cursor:pointer}
#panorama canvas.pick-over:active{cursor:grabbing}
.pick-label{position:fixed;z-index:2;left:0;top:0;pointer-events:none;display:flex;flex-direction:column;gap:2px;max-width:min(280px,calc(100vw - 32px));padding:7px 12px 8px 10px;background:var(--navy-soft);border-left:2px solid var(--gold);box-shadow:0 8px 22px rgba(4,35,57,.3);color:#fff;font-size:13px;font-weight:500;line-height:1.25}
.pick-label[hidden]{display:none}
.pick-label .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.pick-label .price{font-size:12px;font-weight:400;color:var(--gold-light);font-variant-numeric:tabular-nums}
/* Nav-arrow prototype (review only, 2026-09-25; tour360.js #nav=). Reduced motion: no nudge, no fade (the rule above). */
/* a: a floor arrow, a thick navy chevron with a white rim (the gift markers' navy and white, never their gold) lying on the
   floor and pointing to the room's other view, its name under it; the whole of it is the tap target. */
.nav-floor{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;min-width:96px;color:var(--navy);animation:mark-in .24s ease-out}
.nav-floor .chev{display:block;width:96px;height:69px;margin:-10px 0 -8px;transform:perspective(300px) rotateX(50deg) rotate(var(--turn,0deg));filter:drop-shadow(0 4px 6px rgba(4,35,57,.42))}
.nav-floor .chev svg{display:block;width:100%;height:100%;overflow:visible}
.nav-floor .chev path{fill:none;stroke:var(--navy);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;animation:nav-nudge 1.4s ease-in-out .5s 2}
.nav-floor .chev path.rim{stroke:#fff;stroke-width:17}
@keyframes nav-nudge{40%{transform:translateY(-6px)}}
.nav-floor .name{max-width:210px;padding:5px 12px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(4,35,57,.28);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-floor:focus-visible{outline:none}
.nav-floor:focus-visible .name{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover){.nav-floor:hover .chev path:not(.rim){stroke:#0B314D}.nav-floor:hover .name{background:#fff}}
/* c: a step to the room's next view says "Next view" on every phone; the count shows where there is room */
[data-nav~="c"] #forward.view-step .kind{display:inline}
@media (max-width:640px){[data-nav~="c"] #forward .of{display:none}}
/* The room gift (SW75): a small quiet button under the top bar's buttons, on every view of a room. Navy glass with a white rim,
   as "Your gifts", so it reads on bright walls and dark wood alike; 36 px to see, 44 px to tap. It waits while a view opens
   (the status line takes its place on phones) and while the film intro is up. Reduced motion: no fade (the rule above). */
.room-sponsor{position:fixed;z-index:3;top:calc(var(--tour-toolbar-bottom,64px) + 10px);right:var(--gutter-r);display:inline-flex;align-items:center;gap:8px;height:36px;max-width:calc(100vw - var(--gutter-l) - var(--gutter-r));padding:0 14px 0 11px;background:rgba(4,35,57,.84);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 14px rgba(4,35,57,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:mark-in .24s ease-out}
.room-sponsor::after{content:"";position:absolute;inset:-4px 0}
.room-sponsor .icon{width:16px;height:16px;color:var(--gold-light)}
.room-sponsor .held,.room-sponsor.is-held .give{display:none}
.room-sponsor.is-held .held{display:block}
.room-sponsor .label{overflow:hidden;text-overflow:ellipsis}
body:has(#status:not([hidden])) .room-sponsor,.intro-on .room-sponsor{visibility:hidden}
@media (hover:hover){.room-sponsor:hover{background:var(--navy)}}
/* On a short window with a mouse the view controls, centred on the picture, would reach its row: they keep below it. */
.view-controls{top:max(calc(50% - var(--rail-h) / 2),calc(var(--tour-toolbar-bottom,64px) + 142px))}
/* Phone fixes (the phone-fixes layer, 28 Sep 2026): small-phone fixes that every design direction needs, only inside three
   phone conditions, so a computer and a tablet do not change: P, a phone upright, (max-width:480px) and (min-height:521px);
   S, a small phone upright with its browser's bars shown, (max-width:480px) and (max-height:520px); L, a phone on its side,
   (min-width:481px) and (max-width:960px) and (max-height:520px). Nothing new moves (the reduced-motion rule above covers it).
   Every tap is at least 44 px: an arrow's pill keeps its 38 px look and the box the placement rules use (pill-yield), and takes
   a 44 px tap through a band above and below it, as the room button does; "Hide gift markers" in All rooms; the school's mark
   (home). The "BACK" caption is 10.5 px rather than 9.5. */
@media (max-width:480px),(min-width:481px) and (max-width:960px) and (max-height:520px){
  #hotspots .hotspot::after{content:"";position:absolute;inset:-3px 0}
  .places-foot .text-button{display:inline-flex;align-items:center;min-height:44px}
  .places-foot .walk-link{display:block;min-height:44px;padding:4px 0}
  #previous .step-text{font-size:10.5px}
  /* the school's mark, the way home from anywhere, is 34 px tall (32 under 341 px): a 44 px band, its look and box unchanged */
  .toolbar .brand{position:relative}
  .toolbar .brand::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
}
/* The top band fits from 320 px up with a two-digit count: 2 px less padding at 381-400 px (where "Your gifts" shows its
   words), a 32 px mark under 341 px. */
@media (min-width:381px) and (max-width:400px) and (min-height:521px){.cart-link,.menu{padding:0 11px}}
@media (max-width:340px){.brand svg{height:32px}}
/* S: a small phone upright with its browser's bars shown keeps the upright rail (the strip, then Home | Back | Next | the gold
   action; two rows under 360 px), slimmer, in place of the side-on single row that runs off a 320 px screen; the menu says
   "Rooms". */
@media (max-width:480px) and (max-height:520px){
  :root{--tw:64px;--th:44px;--cw:72px;--ch:48px;--strip-y:6px;--strip-x:16px;--strip-gap:6px;--where-w:160px;--dock-h:48px}
  .bottom{display:flex;flex-direction:column;padding-left:0;padding-right:0}
  .route{display:flex;align-items:stretch;height:var(--dock-h);padding:0 var(--safe-r) 0 var(--safe-l)}
  .stops{border-right:0}
  .toolbar{gap:10px}
  .actions{gap:6px}
  .menu-long{display:none}
  .menu-short{display:inline}
  .home{gap:7px;padding:0 14px 0 max(16px,var(--safe-l))}
  .step{padding:0 12px}
  .dedicate{flex:1 1 auto;min-width:0;margin:0 0 0 auto;padding:0 10px;font-size:11.5px;letter-spacing:.1em}
  dialog#places{--cols:2;--pl:max(20px,calc(var(--safe-l) + 16px));--pr:max(20px,calc(var(--safe-r) + 16px));width:100vw}
  #place-list{--gx:12px;--gy:16px}
  #place-list .tile .name{margin-top:7px;font-size:16px}
  .places-foot{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:359px) and (max-height:520px){
  .route{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"home back next" "give give give";height:auto}
  .home{grid-area:home;height:44px}
  #previous{grid-area:back;height:44px}
  #forward{grid-area:next;height:44px;justify-content:flex-end;border-right:0}
  .dedicate{grid-area:give;height:44px;margin:0;font-size:12px;letter-spacing:.14em}
}
/* "Your gifts" only once there is a gift (the owner: "easy to use but not taking up limited real estate on phone when not
   needed"): while your gifts hold nothing, a phone's top band shows the mark and "Rooms" only (tour360.js sets html[data-gifts]). */
@media (max-width:480px),(min-width:481px) and (max-width:960px) and (max-height:520px){html:not([data-gifts]) .toolbar .cart-link{display:none}}
/* "Add to Home Screen" in All rooms (phone only; tour360.js shows it when the phone can add the tour, never from the home screen) */
@media (max-width:480px),(min-width:481px) and (max-width:960px) and (max-height:520px){.places-foot .install-hint{margin:-6px 0 0;font-size:13px;line-height:1.45;color:var(--ink-muted)}}
/* Upright, All rooms' foot takes less of the screen from the rooms: "Hide gift markers" and "Add to Home Screen" share a row,
   the hint and the 3D walk link take rows of their own, then Privacy; every entry stays, in its own order (as the keyboard
   meets them). */
@media (max-width:480px){
  .places-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 20px}
  .places-foot .install-hint{flex:1 0 100%;margin:0 0 4px}.places-foot .walk-link{flex:1 0 100%}
}

/* ============================== Redesign A: the app shell on touch screens (html.ui-a) ==============================
   Every rule is scoped under html.ui-a (a touch screen, or #ui=a): a computer never matches, so it is unchanged. The real
   controls keep their ids, classes and words; tour360.js (redesign-a) only moves them into the shell's places.
   - The top bar: Home, the room's gifts, then Your gifts (with gifts) and All rooms, as round glass buttons and pills.
   - The route row at the foot: the tabs handle, Back, the picture strip (the current stop carries its name), Next in gold.
   - The tab bar (down in the 360 until a tap or the handle): a bar at the foot upright, a rail at the left on a phone on its
     side and on a tablet.
   - While a finger looks around, the top bar and the route row fade (tour360.js also makes them inert). */
html.ui-a{--a-glass:rgba(4,35,57,.88);--a-t:200ms;--a-ease:cubic-bezier(.2,.8,.2,1);--a-rail:76px;
  --a-gl:max(10px,calc(env(safe-area-inset-left,0px) + 8px));--a-gr:max(10px,calc(env(safe-area-inset-right,0px) + 8px));
  --tw:34px;--th:34px;--cw:34px;--ch:34px}
html.ui-a .a-vh,html.ui-a #home>span,html.ui-a #previous .step-text,html.ui-a .toolbar .cart-text,html.ui-a #open-places .menu-text{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}

/* ---- the top bar ---- */
html.ui-a .toolbar{top:max(10px,calc(env(safe-area-inset-top,0px) + 6px));left:var(--a-gl);right:var(--a-gr);justify-content:flex-start;gap:8px;transition:opacity var(--a-t) var(--a-ease),left var(--a-t) var(--a-ease)}
html.ui-a .toolbar .brand{display:none}
html.ui-a .toolbar .actions{margin-left:auto;display:flex;align-items:center;gap:8px}
html.ui-a #home,html.ui-a #open-places,html.ui-a #previous,html.ui-a .a-handle{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;gap:0;border:0;border-radius:50%;background:var(--a-glass);color:#fff;box-shadow:0 2px 10px rgba(2,17,29,.28)}
html.ui-a #home .icon,html.ui-a #open-places .icon,html.ui-a #previous .icon,html.ui-a .a-handle .icon{width:22px;height:22px;color:#fff}
html.ui-a #room-gifts{flex:0 1 auto;min-width:0;height:44px;margin:0;padding:0 16px;border:0;border-radius:22px;background:var(--a-glass);color:#fff;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 10px rgba(2,17,29,.28)}
html.ui-a .toolbar .cart-link{height:44px;min-width:44px;padding:0 12px;gap:6px;border-radius:22px;background:var(--a-glass);box-shadow:0 2px 10px rgba(2,17,29,.28)}
html.ui-a .toolbar .cart-link .count{border-radius:11px}
html.ui-a:not([data-gifts]) .toolbar .cart-link{display:none}
/* the room button stays at the upper right under the top bar, its right edge on the top bar's (room-button's probe: within 1 px),
   its top 10 px under it (tour360.js measures --tour-toolbar-bottom), never wider than the room between the gutters */
html.ui-a .room-sponsor{right:var(--a-gr);max-width:calc(100vw - var(--gutter-l) - var(--a-gr));transition:opacity var(--a-t) var(--a-ease)}

/* ---- the route row ---- */
html.ui-a .bottom{display:flex;flex-direction:column;align-items:stretch;background:none;border-top:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0 0 env(safe-area-inset-bottom,0px);pointer-events:none;transition:opacity var(--a-t) var(--a-ease)}
html.ui-a .bottom>*{pointer-events:auto}
html.ui-a .route{display:flex;align-items:center;gap:6px;height:auto;margin:0 var(--a-gr) 8px var(--a-gl);padding:0;border:0;pointer-events:none}
html.ui-a .route>*{pointer-events:auto}
html.ui-a #previous{border-right:0}
html.ui-a #previous:disabled{opacity:.45}
html.ui-a .route .stops{flex:1 1 0;min-width:0;height:48px;border:0;background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 12px),transparent 100%)}
html.ui-a #stop-strip{gap:6px;padding:2px 8px}
html.ui-a #stop-strip li{height:44px;padding:5px;border-radius:22px;background:var(--a-glass);box-shadow:0 2px 8px rgba(2,17,29,.22)}
html.ui-a .stops .stop{width:34px;height:34px;border-radius:50%;overflow:visible}
html.ui-a .stops .stop .thumb{border-radius:50%;overflow:hidden}
html.ui-a .stops .stop .thumb img{opacity:.92}
html.ui-a .stops .stop .n{left:auto;right:-5px;top:auto;bottom:-3px;min-width:16px;padding:2px 3px;border-radius:8px;font-size:9px}
html.ui-a .stops .stop .cap{display:none}
html.ui-a .stops .stop::after{content:"";position:absolute;inset:-5px}
html.ui-a #stop-strip li.current{background:#F7F5F0;padding-right:14px;box-shadow:0 2px 10px rgba(2,17,29,.28)}
html.ui-a .stops li.current .where{padding:0 0 0 8px;max-width:220px;color:#042339}
html.ui-a .stops li.current .where .eyebrow{font-size:10px;line-height:1.1;letter-spacing:.08em;color:#7A6232;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui-a .stops li.current .where h1{margin:1px 0 0;font-size:15px;line-height:1.15;-webkit-line-clamp:1;color:#042339}
html.ui-a .stops li.current .where .view-name{display:none}
html.ui-a #forward{flex:none;min-width:0;max-width:none;height:48px;margin:0;padding:0 8px 0 14px;gap:4px;border:0;border-radius:24px;background:#BC9E5D;color:#042339;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px rgba(2,17,29,.35);justify-content:flex-start}
html.ui-a #forward .next-copy{gap:1px;min-width:0}
html.ui-a #forward .next-line{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;color:#042339;opacity:.85}
html.ui-a #forward .kind{display:none}
html.ui-a #forward .to{display:block;max-width:124px;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#042339}
html.ui-a #forward .icon{width:22px;height:22px;color:#042339}
html.ui-a #forward:disabled{opacity:.55}
html.ui-a .a-handle .a-down{display:none}
html.ui-a.ui-a-tabs-up .a-handle .a-up{display:none}
html.ui-a.ui-a-tabs-up .a-handle .a-down{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none}

/* ---- the tab bar: at the foot upright ---- */
html.ui-a .a-tabs{display:flex;height:56px;padding:0 max(6px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));background:rgba(4,35,57,.95);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
html.ui-a .a-tabs[hidden]{display:none}
html.ui-a.ui-a-tabs-up .bottom{padding-bottom:0}
html.ui-a.ui-a-tabs-up .a-tabs{height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
html.ui-a .a-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:0;border:0;background:none;color:rgba(255,255,255,.7);font:600 11px/1.2 var(--sans)}
html.ui-a .a-tab .icon{width:26px;height:26px}
html.ui-a .a-tab.is-on{color:#D3BC8E}
html.ui-a:not([data-gifts]) .a-tab-gifts{display:none}
html.ui-a .a-tab .a-count{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#BC9E5D;color:#042339;font:700 11px/18px var(--sans);text-align:center}
html.ui-a .a-tab .a-count:empty{display:none}
html.ui-a.intro-on .a-tabs,html.ui-a.intro-on .a-handle{visibility:hidden}

html.ui-a #hotspots .hotspot::after{content:"";position:absolute;inset:-3px 0}
/* All rooms' foot: phone-fixes' 44 px bands for "Hide gift markers", "Add to Home Screen" and the 3D walk, at every A size */
html.ui-a .places-foot .text-button{display:inline-flex;align-items:center;min-height:44px}
html.ui-a .places-foot .walk-link{display:block;min-height:44px;padding:4px 0}

/* ---- the hint (#help): tour360.css keeps it 14 px (10 on phones) above the rail through --rail-h, which in the shell measures the
   route row (and the tab bar when it is up), so it is already clear of both. Here it only stays inside the notch insets, and
   beside the rail when the rail is up (below). With no insets the width rule is today's calc(100vw - 32px). ---- */
html.ui-a .help{max-width:calc(100vw - 2 * max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}

/* ---- looking around: the chrome steps aside ---- */
html.ui-a.ui-a-looking .toolbar,html.ui-a.ui-a-looking .bottom,html.ui-a.ui-a-looking .room-sponsor{opacity:0}

/* ---- the menu (a dialog of the shell's own: each row clicks a real control) ---- */
html.ui-a dialog.a-menu{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#F7F5F0;color:#042339;font-family:var(--sans);overflow:auto;overscroll-behavior:contain}
html.ui-a dialog.a-menu[open]{display:block}
html.ui-a dialog.a-menu::backdrop{background:rgba(4,35,57,.42)}
html.ui-a .a-menu-head{position:sticky;top:0;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:calc(max(10px,env(safe-area-inset-top,0px)) + 30px) max(16px,calc(env(safe-area-inset-right,0px) + 12px)) 16px max(16px,calc(env(safe-area-inset-left,0px) + 12px));background:#042339;color:#fff}
html.ui-a .a-menu-head h2{margin:0;font:400 34px/1.1 var(--serif)}
html.ui-a .a-menu-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
html.ui-a .a-menu-close .icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
html.ui-a .a-menu-body{padding:4px max(16px,calc(env(safe-area-inset-right,0px) + 12px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,calc(env(safe-area-inset-left,0px) + 12px));max-width:680px}
html.ui-a .a-menu-body h3{margin:22px 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7A6232}
html.ui-a .a-menu-body ul{list-style:none;margin:0;padding:0;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(4,35,57,.12)}
html.ui-a .a-menu-body li+li .a-row{box-shadow:inset 0 1px 0 rgba(4,35,57,.12)}
html.ui-a .a-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:9px 14px;border:0;background:none;text-align:left;color:#0E2233;font:inherit}
html.ui-a .a-row:active{background:rgba(4,35,57,.05)}
html.ui-a .a-row>.icon{flex:none;width:24px;height:24px;color:#7A6232}
html.ui-a .a-row .a-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.ui-a .a-row .a-t b{font-weight:600;font-size:15.5px;line-height:1.25;color:#042339}
html.ui-a .a-row .a-t small{font-size:12.5px;line-height:1.3;color:#4A5E70}
html.ui-a .a-row .a-t small.a-said{color:#7A6232;font-weight:600}
html.ui-a .a-row .a-chev{flex:none;width:18px;height:18px;color:rgba(4,35,57,.35);stroke:currentColor;stroke-width:2;fill:none}
html.ui-a .a-switch{position:relative;flex:none;width:51px;height:31px;border-radius:16px;background:rgba(4,35,57,.2);transition:background var(--a-t)}
html.ui-a .a-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(2,17,29,.25);transition:transform var(--a-t) var(--a-ease)}
html.ui-a .a-row[aria-checked="true"] .a-switch{background:#BC9E5D}
html.ui-a .a-row[aria-checked="true"] .a-switch::after{transform:translateX(20px)}

/* ---- a phone on its side, and a tablet: the tab bar is a rail at the left ---- */
@media (max-height:520px) and (orientation:landscape),(min-width:481px) and (min-height:521px){
  html.ui-a .a-tabs,html.ui-a.ui-a-tabs-up .a-tabs{position:fixed;z-index:5;left:0;top:0;bottom:0;width:calc(var(--a-rail) + env(safe-area-inset-left,0px));height:auto;flex-direction:column;justify-content:center;gap:6px;
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-shadow:1px 0 0 rgba(255,255,255,.08)}
  html.ui-a .a-tab{flex:none;height:60px}
  html.ui-a.ui-a-tabs-up .bottom{padding-bottom:env(safe-area-inset-bottom,0px)}
  html.ui-a.ui-a-tabs-up .toolbar{left:calc(var(--a-rail) + env(safe-area-inset-left,0px) + 10px)}
  html.ui-a.ui-a-tabs-up .route{margin-left:calc(var(--a-rail) + env(safe-area-inset-left,0px) + 8px)}
  html.ui-a.ui-a-tabs-up .help{left:calc(50% + (var(--a-rail) + env(safe-area-inset-left,0px)) / 2);max-width:calc(100vw - var(--a-rail) - env(safe-area-inset-left,0px) - 2 * max(16px,env(safe-area-inset-right,0px)))}
  /* the route row keeps to the lower right: the handle and Back at the left, the stops and Next at the right */
  html.ui-a #previous{margin-right:auto}
  html.ui-a .route .stops{flex:0 1 420px}
  html.ui-a .stops li.current .where{max-width:220px}
  html.ui-a dialog.a-menu{inset:0 0 0 auto;width:min(460px,62vw);border-radius:14px 0 0 14px}
  html.ui-a .a-menu-head{padding-top:calc(max(10px,env(safe-area-inset-top,0px)) + 14px)}
  html.ui-a .a-menu-head h2{font-size:28px}
}
/* upright phones: the stops on a line of their own above the controls, so the current stop keeps its name, Back stays and
   Next keeps its destination at every width (iOS Photos' thumbnail strip over its toolbar) */
@media (max-width:480px) and (orientation:portrait){
  html.ui-a .route{flex-wrap:wrap;row-gap:6px}
  html.ui-a .route .stops{order:-1;flex:1 1 100%}
  html.ui-a #forward{margin-left:auto}
}
/* A portrait tablet 820-899 px wide with the rail up: the rail leaves the one-row hint about 712-726 px, and it needs about 747.
   It takes T3's own two rows there (tour360.css, 641-819 px, audit F5), the same rules under html.ui-a.ui-a-tabs-up only.
   Children of #help: 1 span, 2 i, 3 span.wide, 4 span.short (not shown), 5 i.wide (the dot joining the pairs, hidden here),
   6 span.wide, 7 i.wide, 8 span.wide. The tour's [hidden]{display:none!important} still hides the hint once it has left. */
@media (min-width:820px) and (max-width:899px) and (min-height:521px){
  html.ui-a.ui-a-tabs-up .help{display:grid;grid-template-columns:auto auto auto;column-gap:12px;row-gap:4px}
  html.ui-a.ui-a-tabs-up .help>span:nth-child(1),html.ui-a.ui-a-tabs-up .help>span:nth-child(6){justify-self:end}
  html.ui-a.ui-a-tabs-up .help>i:nth-child(5){display:none}
}
@media (max-width:360px){
  html.ui-a #room-gifts{padding:0 12px;font-size:13px}
  html.ui-a #forward .to{max-width:110px}
  html.ui-a .stops li.current .where{max-width:170px}
}
@media (prefers-reduced-motion:reduce){
  html.ui-a .toolbar,html.ui-a .bottom,html.ui-a .room-sponsor,html.ui-a .a-switch,html.ui-a .a-switch::after{transition:none}
}
/* ===== ui-dedupe desktop (SW80) ===== The computer layout only: html:not(.ui-a) and no touch screen (the A shell is untouched).
   The shared spec (site-polish/ui-dedupe/DESIGN-SPEC.md 6afe475b): system font, one solid blue primary per screen, dark glass
   over the 360 (at most two blurred layers; solid while a dialog is up, in low-memory mode, with reduced transparency and
   without backdrop-filter), All rooms as a floating light-glass panel with its menu list, 48 px targets, 2 px focus rings. */
@media not all and (hover:none) and (pointer:coarse){
html:not(.ui-a){--ux-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sans:var(--ux-font);
  --ux-p:#1F4FD8;--ux-hover:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));--ux-ink:#111;--ux-ink2:#4a5261;--ux-line:#7b8494;
  --ux-dark:rgba(18,22,30,.62);--ux-dark-solid:rgba(18,22,30,.96);--ux-dark-line:rgba(255,255,255,.18);--ux-dark-blur:blur(24px) saturate(180%);
  --ux-light:rgba(255,255,255,.86);--ux-light-solid:rgba(255,255,255,.96);--ux-light-line:rgba(255,255,255,.55);--ux-light-blur:blur(28px) saturate(180%);
  --ux-e1:0 1px 3px rgba(0,0,0,.12);--ux-e2:0 4px 16px rgba(0,0,0,.16);--ux-e3:0 12px 40px rgba(0,0,0,.22);
  --ux-in:250ms cubic-bezier(.05,.7,.1,1)}
html:not(.ui-a)[data-ux-solid]{--ux-dark:var(--ux-dark-solid);--ux-light:var(--ux-light-solid);--ux-dark-blur:none;--ux-light-blur:none}

/* the dedupe: "Choose a room" = All rooms on a view with no room (there Next is the primary); "Your gifts 0" */
html:not(.ui-a):has(#toggle-items[hidden]) #room-gifts{display:none}
html:not(.ui-a):not([data-gifts]) .toolbar .cart-link{display:none}

/* the top bar: one dark-glass capsule (one blurred layer) */
html:not(.ui-a) .toolbar .actions{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--ux-dark);border:1px solid var(--ux-dark-line);box-shadow:var(--ux-e2);
  -webkit-backdrop-filter:var(--ux-dark-blur);backdrop-filter:var(--ux-dark-blur)}
html:not(.ui-a) .toolbar :is(.cart-link,.menu){height:48px;padding:0 16px;gap:8px;border-radius:12px;background:transparent;color:#fff;box-shadow:none;
  font:600 15px/1 var(--ux-font);letter-spacing:0}
html:not(.ui-a) .toolbar :is(.cart-link,.menu) .icon{color:#fff}
html:not(.ui-a) .toolbar :is(.cart-link,.menu):hover{background:rgba(255,255,255,.14)}
html:not(.ui-a) .toolbar .cart-link .count{min-width:24px;height:24px;border-radius:999px;background:#fff;color:#111;font:700 13px/1 var(--ux-font)}
/* the room's gift button under it: the same dark surface (the second blurred layer) */
html:not(.ui-a) .room-sponsor{height:48px;padding:0 16px;gap:8px;border-radius:12px;background:var(--ux-dark);color:#fff;border:1px solid var(--ux-dark-line);box-shadow:var(--ux-e2);
  font:600 15px/1.1 var(--ux-font);letter-spacing:0;-webkit-backdrop-filter:var(--ux-dark-blur);backdrop-filter:var(--ux-dark-blur)}
html:not(.ui-a) .room-sponsor:hover{background:var(--ux-dark-solid)}
html:not(.ui-a) .room-sponsor .icon{color:#fff}
/* the view controls: one solid dark group of 48 px icon buttons (no third blurred layer) */
html:not(.ui-a) .view-controls{background:var(--ux-dark-solid);border:1px solid var(--ux-dark-line);border-radius:16px;box-shadow:var(--ux-e2);overflow:hidden}
html:not(.ui-a) .view-controls button{width:48px;height:48px;color:#fff}
html:not(.ui-a) .view-controls button+button{border-top:1px solid rgba(255,255,255,.14)}
html:not(.ui-a) .view-controls button:hover{background:rgba(255,255,255,.12)}
/* a dialog up: the chrome behind it goes solid, so the dialog is the one blurred layer */
html:not(.ui-a):has(dialog[open]) :is(.toolbar .actions,.room-sponsor){background:var(--ux-dark-solid);-webkit-backdrop-filter:none;backdrop-filter:none}

/* the route row: tonal Home, Back and Next; the one primary at its end ("Dedicate a gift"; Next on a view with no room) */
html:not(.ui-a) .route{align-items:center;gap:8px;padding:0 max(16px,var(--safe-r)) 0 max(16px,var(--safe-l))}
html:not(.ui-a) :is(.home,.step){height:48px;padding:0 16px;gap:8px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;
  font:600 15px/1.1 var(--ux-font);letter-spacing:0}
html:not(.ui-a) :is(.home,.step):hover:not(:disabled){background:rgba(255,255,255,.16)}
html:not(.ui-a) :is(.home,.step) .icon{color:#fff}
html:not(.ui-a) #home:disabled{opacity:.4}
html:not(.ui-a) #forward .next-line{font:500 12px/1.1 var(--ux-font);letter-spacing:0;text-transform:none;opacity:.8}
html:not(.ui-a) #forward .to{font:600 15px/1.2 var(--ux-font)}
html:not(.ui-a) #room-gifts.dedicate{height:48px;margin-left:auto;padding:0 24px;border-radius:12px;background:var(--ux-p);color:#fff;font:600 15px/1 var(--ux-font);letter-spacing:0;text-transform:none}
html:not(.ui-a) #room-gifts.dedicate:hover{background:var(--ux-hover) var(--ux-p)}
html:not(.ui-a):has(#toggle-items[hidden]) #forward{background:var(--ux-p);border-color:var(--ux-p)}
html:not(.ui-a):has(#toggle-items[hidden]) #forward:hover{background:var(--ux-hover) var(--ux-p)}
html:not(.ui-a):has(#toggle-items[hidden]) #forward .next-line{opacity:.9;color:#fff}

/* All rooms: a floating light-glass panel under its button, its rooms as 16 px cards, its menu list at the foot */
html:not(.ui-a) dialog#places{--cols:2;--pl:24px;--pr:24px;inset:calc(var(--tour-toolbar-bottom,72px) + 8px) max(16px,var(--safe-r)) auto auto;margin:0;
  width:min(760px,62vw);min-width:min(520px,calc(100vw - 32px));height:calc(100dvh - var(--tour-toolbar-bottom,72px) - 24px);max-height:none;border-radius:28px;
  border:1px solid var(--ux-light-line);background:var(--ux-light);color:var(--ux-ink);box-shadow:var(--ux-e3);overflow:hidden;font-family:var(--ux-font);
  -webkit-backdrop-filter:var(--ux-light-blur);backdrop-filter:var(--ux-light-blur)}
html:not(.ui-a) dialog#places::backdrop{background:rgba(10,14,20,.28)}
@media (min-width:1084px){html:not(.ui-a) dialog#places{--cols:3}}   /* 3 columns while a tile stays 200 px or wider, else 2 */
/* one compact header row (the title, the intro beside it, the close button), the rooms (they scroll), the menu pinned at the foot */
html:not(.ui-a) dialog#places[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px}
html:not(.ui-a) dialog#places .dialog-head{display:contents}
html:not(.ui-a) dialog#places .dialog-head>div{grid-area:1/1;align-self:center;padding:14px 0 12px 24px}
html:not(.ui-a) dialog#places .dialog-head .eyebrow{display:none}
html:not(.ui-a) dialog#places .dialog-head h2{margin:0;font-size:26px;white-space:nowrap}
html:not(.ui-a) dialog#places .places-intro{grid-area:1/2;align-self:center;margin:0;padding:12px 0 10px;max-width:none;font-size:13px;line-height:1.4;color:var(--ux-ink2)}
html:not(.ui-a) dialog#places #close-places{grid-area:1/3;align-self:start;margin:12px 12px 0 0}
html:not(.ui-a) #place-list{grid-area:2/1/3/4;--gx:12px;--gy:12px;min-height:0;padding:0 24px 12px;border-top:1px solid rgba(17,17,17,.08)}
html:not(.ui-a) dialog#places .places-foot{grid-area:3/1/4/4}
/* each chapter a full-width section with its header sticky at the top of the list while its rooms scroll */
html:not(.ui-a) #place-list .chapter-block{flex:1 0 100%}
html:not(.ui-a) #place-list .chapter{position:sticky;top:0;z-index:2;margin:0 0 8px;padding:10px 0 7px;background:#f5f6f8;border-bottom:1px solid rgba(17,17,17,.06);
  font:600 12px/1.2 var(--ux-font);letter-spacing:.04em;text-transform:none;color:var(--ux-ink2)}
html:not(.ui-a) dialog#places #place-list .tile{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.78);border:1px solid rgba(17,17,17,.06);box-shadow:var(--ux-e1)}
html:not(.ui-a) #place-list .tile .name{margin:6px 12px 7px;font-size:15px;line-height:1.15}
html:not(.ui-a) #place-list .tile .here{margin:-3px 12px 7px;font:600 12px/1.2 var(--ux-font);letter-spacing:0;text-transform:none;color:var(--ux-p)}
html:not(.ui-a) #place-list .tile .n{border-radius:0 0 10px 0;background:rgba(18,22,30,.78);color:#fff}
html:not(.ui-a) #place-list .tile[aria-current=true]{border-color:var(--ux-p);box-shadow:0 0 0 1px var(--ux-p),var(--ux-e1)}
html:not(.ui-a) #place-list .tile[aria-current=true] .thumb::after{box-shadow:none}
html:not(.ui-a) #place-list .tile[aria-current=true] .n{background:var(--ux-p);color:#fff}
html:not(.ui-a) #place-list .tile:hover .name{text-decoration:none}
html:not(.ui-a) #place-list .tile:hover{box-shadow:var(--ux-e2)}
/* the menu: a glass list at the panel's foot (the fly-through, the gift-marker switch, the 3D walk, Privacy) */
html:not(.ui-a) .places-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 24px calc(max(12px,var(--safe-b)) + 2px);border-top:1px solid rgba(17,17,17,.08);font-size:15px}
html:not(.ui-a) .places-foot>:is(button,a){box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:8px 16px;border:0;border-radius:12px;
  background:rgba(17,17,17,.05);color:var(--ux-ink);font:600 15px/1.25 var(--ux-font);letter-spacing:0;text-align:left;text-decoration:none}
html:not(.ui-a) .places-foot>:is(button,a):hover{background:rgba(17,17,17,.09)}
html:not(.ui-a) .places-foot>[hidden]{display:none}
html:not(.ui-a) .places-foot .film-link svg{width:18px;height:18px;flex:none;fill:var(--ux-p)}
html:not(.ui-a) .places-foot .walk-link{display:block}
html:not(.ui-a) .places-foot .walk-link span{color:var(--ux-ink);font-weight:600;text-decoration:none}
html:not(.ui-a) .places-foot .walk-link small{display:block;margin-top:2px;font:500 12.5px/1.3 var(--ux-font);letter-spacing:0;text-transform:none;color:var(--ux-ink2)}
html:not(.ui-a) #toggle-items{font-size:0;justify-content:space-between}
html:not(.ui-a) #toggle-items::before{content:"Gift markers";content:"Gift markers"/"";font:600 15px/1.25 var(--ux-font);color:var(--ux-ink)}
html:not(.ui-a) #toggle-items::after{content:"";flex:none;width:44px;height:26px;border-radius:13px;background:#9aa1ad radial-gradient(circle 10px at 13px 50%,#fff 96%,transparent 100%);transition:background-position .15s}
html:not(.ui-a) #toggle-items[aria-pressed=true]::after{background:var(--ux-p) radial-gradient(circle 10px at 31px 50%,#fff 96%,transparent 100%)}
/* its one close button, and the fly-through's: 48 px round icon buttons */
html:not(.ui-a) :is(#close-places,#flythrough-close){width:48px;height:48px;margin:0;border-radius:999px;border:0;background:rgba(17,17,17,.07);color:var(--ux-ink)}
html:not(.ui-a) :is(#close-places,#flythrough-close):hover{background:rgba(17,17,17,.12)}
html:not(.ui-a) #flythrough-close{background:rgba(255,255,255,.9)}

/* motion: panels fade in and grow from .96 */
html:not(.ui-a) dialog#places[open]{animation:ux-pop var(--ux-in) both}
@keyframes ux-pop{from{opacity:0;transform:scale(.96)}}

/* focus: 2 px + 2 px; over the 360 a white ring on a dark band (3:1 on the brightest and the darkest views), blue on light */
html:not(.ui-a) :is(.toolbar a,.toolbar button,.room-sponsor,.view-controls button,.route button,.stops button,#hotspots button,#item-hotspots button):focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #0b0f17}
html:not(.ui-a) dialog#places :focus-visible,html:not(.ui-a) #flythrough :focus-visible{outline:2px solid var(--ux-p);outline-offset:2px;box-shadow:none}
}
@media not all and (hover:none) and (pointer:coarse){
  @media (prefers-reduced-transparency:reduce){html:not(.ui-a){--ux-dark:var(--ux-dark-solid);--ux-light:var(--ux-light-solid);--ux-dark-blur:none;--ux-light-blur:none}}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html:not(.ui-a){--ux-dark:var(--ux-dark-solid);--ux-light:var(--ux-light-solid)}}
  @media (prefers-reduced-motion:reduce){html:not(.ui-a) dialog#places[open]{animation:none}}
}
/* v3d (the coordinator, 29 Sep): a window 520 px tall or less, with a mouse: the view controls are a row of their four 48 px buttons
   (look left, zoom in, zoom out, look right) under the room chip's place at the right, so they clear the toolbar, the chip and the
   rail (as a column centred on the view they met the chip and the rail); taller windows are unchanged */
@media (max-height:520px){
  html:not(.ui-a) .view-controls{flex-direction:row;top:calc(var(--tour-toolbar-bottom,64px) + 68px);transform:none}
  html:not(.ui-a) .view-controls button+button{border-top:0;border-left:1px solid rgba(255,255,255,.14)}
}
/* ===== end ui-dedupe desktop ===== */
/* ===== ui-dedupe A (SW80) ===== M3-glass on touch screens (html.ui-a), the owner's pick (28 Sep, 22:16), after
   site-polish/ui-dedupe/DESIGN-SPEC.md (6afe475b). A computer never matches.
   - The tab bar is always up. Its destinations are the tour's own controls: Tour = #home, Rooms = #open-places,
     Your gifts = .cart-link; Menu is the shell's own. It is a floating dark-glass capsule upright, and a rail beside the view
     on a phone on its side and on a tablet.
   - The route (Back, the stops, Next) is one dark-glass capsule.
   - The one primary, #room-gifts, floats solid at the lower right in a room; on a view with no room Next is the primary.
   - The sponsor offer (.room-sponsor) stays on the 360 as a 44 px chip.
   - All rooms, the Menu and Add to Home Screen are light-glass sheets (upright) or floating panels.
   - Tokens as in the desktop block: glass .62 / .86, blue #1F4FD8.
   - At most two blurred layers show at once: the route and the tab bar, or a sheet over the dimmed view. */
html.ui-a{--m-dark:rgba(18,22,30,.62);--m-dark-solid:rgba(18,22,30,.96);--m-light:rgba(255,255,255,.86);--m-light-solid:rgba(255,255,255,.97);
  --m-blur-d:blur(24px) saturate(180%);--m-blur-l:blur(28px) saturate(180%);--m-line-d:rgba(255,255,255,.18);--m-line-l:rgba(255,255,255,.55);
  --m-p:#1F4FD8;--m-tonal:rgba(160,186,255,.20);--m-ink:#111;--m-ink2:#3c4452;--m-e1:0 1px 3px rgba(0,0,0,.12);--m-e2:0 4px 16px rgba(0,0,0,.16);--m-e3:0 12px 40px rgba(0,0,0,.22);
  --m-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--m-top:max(10px,calc(env(safe-area-inset-top,0px) + 6px))}
@media (prefers-reduced-transparency:reduce){html.ui-a{--m-dark:var(--m-dark-solid);--m-light:var(--m-light-solid);--m-blur-d:none;--m-blur-l:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html.ui-a{--m-dark:var(--m-dark-solid);--m-light:var(--m-light-solid)}}
html.ui-a.ui-a-solid{--m-dark:var(--m-dark-solid);--m-light:var(--m-light-solid);--m-blur-d:none;--m-blur-l:none}
/* set 2: the gold ink on the light glass (the Rooms sheet's chapter heads and "You are here") at 4.5:1 or more over the brightest
   views: #7A6232 -> #725B2E, the same hue a little darker (the token only; every rule that reads var(--gold-ink) keeps its rule) */
html.ui-a{--gold-ink:#725B2E}
/* the top bar is empty now (its controls are the tabs): it keeps its box for the tour's measurements, unseen and untouchable */
html.ui-a .toolbar{visibility:hidden;pointer-events:none}
/* ---- the sponsor offer: a 44 px dark chip at the upper right (no blur: the two blurred layers are the route and the tabs) ---- */
html.ui-a .room-sponsor{top:var(--m-top);right:calc(12px + env(safe-area-inset-right,0px));height:44px;min-height:44px;padding:0 16px 0 14px;border:1px solid var(--m-line-d);border-radius:999px;
  background:rgba(18,22,30,.70);color:#fff;font:600 15px/1 var(--m-ui);letter-spacing:0;box-shadow:var(--m-e2)}
html.ui-a.ui-a-solid .room-sponsor{background:var(--m-dark-solid)}
/* the music credit never hides it (Codex, tour-music.css:36): the chip keeps the top row, the credit keeps its place under it */
html.tour-music.tm-credit-on.ui-a .room-sponsor{visibility:visible}
/* ---- the foot: the route capsule over the tab capsule, upright ---- */
html.ui-a .bottom{gap:10px;padding:0 calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
html.ui-a.ui-a-tabs-up .bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
html.ui-a .route{flex-wrap:nowrap;gap:8px;height:56px;margin:0;padding:4px;box-sizing:border-box;border:1px solid var(--m-line-d);border-radius:999px;background:var(--m-dark);
  -webkit-backdrop-filter:var(--m-blur-d);backdrop-filter:var(--m-blur-d);box-shadow:var(--m-e1);pointer-events:auto}
html.ui-a .route .stops{order:0;flex:1 1 auto;min-width:0;height:48px;scroll-snap-type:x proximity}
html.ui-a #stop-strip li{background:rgba(255,255,255,.10);box-shadow:none;scroll-snap-align:center}
html.ui-a #stop-strip li.current{background:#fff}
html.ui-a .stops .stop{width:38px;height:38px}
html.ui-a .stops li.current .where{max-width:140px}
html.ui-a #previous,html.ui-a.tour-music #tour-music,html.tour-music.ui-a #tour-music{width:48px;height:48px;min-width:48px;margin:0;background:transparent;border:1.5px solid rgba(255,255,255,.30);box-shadow:none}
html.ui-a #forward{height:48px;margin:0;padding:0 10px 0 16px;border-radius:999px;background:var(--m-tonal);color:#fff;box-shadow:none}
html.ui-a #forward .next-line,html.ui-a #forward .to,html.ui-a #forward .icon{color:#fff}
/* set 2: the NEXT eyebrow on the route's dark glass at 4.5:1 or more: white at .9, the desktop's own token (v3c) */
html.ui-a #forward .next-line{opacity:.9}
html.ui-a #forward .to{max-width:120px}
/* (set 2: the rule that hid the current stop's name under 360 px is gone; the chip's own rules at the end of this block fit it) */
/* ---- the tab bar: a dark-glass capsule, the four destinations labelled ---- */
html.ui-a .a-tabs,html.ui-a.ui-a-tabs-up .a-tabs{display:flex;position:static;height:64px;padding:0 6px;box-sizing:border-box;align-items:center;justify-content:space-around;gap:0;
  border:1px solid var(--m-line-d);border-radius:999px;background:var(--m-dark);-webkit-backdrop-filter:var(--m-blur-d);backdrop-filter:var(--m-blur-d);box-shadow:var(--m-e2)}
html.ui-a #a-tabs>*{position:relative;flex:1 1 0;width:auto;min-width:48px;height:56px;min-height:48px;margin:0;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.84);text-decoration:none;font:600 12px/1 var(--m-ui);letter-spacing:0;text-transform:none}
html.ui-a #a-tabs>:is(#home,#open-places,.cart-link)>:not(.a-tab-face):not(.count){display:none!important}
html.ui-a #a-tabs .a-tab-face{display:flex;flex-direction:column;align-items:center;gap:4px;font-style:normal;pointer-events:none}
html.ui-a #a-tabs .a-tab-face .icon{width:24px;height:24px;padding:3px 16px;border-radius:999px;color:currentColor;stroke:currentColor;box-sizing:content-box}
html.ui-a #a-tabs>[aria-current="page"]{color:#fff}
html.ui-a #a-tabs>[aria-current="page"] .a-tab-face .icon{background:var(--m-tonal)}
html.ui-a #a-tabs .cart-link .count{position:absolute;top:5px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--m-p);color:#fff;font:700 11px/18px var(--m-ui);text-align:center}
html.ui-a:not([data-gifts]) #a-tabs .cart-link .count{display:none}
/* ---- the one primary: solid, 56 px, radius 16, above the foot at the lower right ---- */
html.ui-a #room-gifts{position:fixed;z-index:6;left:auto;top:auto;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(var(--rail-h,160px) + 12px);height:56px;max-width:calc(100vw - 32px);
  margin:0;padding:0 22px 0 18px;border:0;border-radius:16px;background:var(--m-p);color:#fff;font:600 16px/1 var(--m-ui);letter-spacing:0;text-transform:none;box-shadow:var(--m-e2);
  display:inline-flex;align-items:center;gap:10px;pointer-events:auto}
html.ui-a #room-gifts::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4.2' rx='1'/%3E%3Cpath d='M5.2 12.2v8.3h13.6v-8.3M12 8v12.5M12 8C10.4 4.4 7 4.3 7 6.4 7 7.6 9.4 8 12 8zm0 0c1.6-3.6 5-3.7 5-1.6C17 7.6 14.6 8 12 8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4.2' rx='1'/%3E%3Cpath d='M5.2 12.2v8.3h13.6v-8.3M12 8v12.5M12 8C10.4 4.4 7 4.3 7 6.4 7 7.6 9.4 8 12 8zm0 0c1.6-3.6 5-3.7 5-1.6C17 7.6 14.6 8 12 8z'/%3E%3C/svg%3E") center/contain no-repeat}
html.ui-a:has(dialog[open]) #room-gifts,html.ui-a.intro-on #room-gifts{visibility:hidden}
/* a view with no room (the grounds, the lobby, the hallways; item 6, the coordinator 23:17): the room button would only repeat the
   Rooms tab, so it goes, and Next is the primary there, solid blue (the tour hides "Hide gift markers" exactly on those views) */
html.ui-a:has(#toggle-items[hidden]) #room-gifts{display:none}
html.ui-a:has(#toggle-items[hidden]) #forward{background:var(--m-p)}
/* ---- focus: over the 360 a two-tone ring (white outline, dark band), in the sheets 2 px blue ---- */
html.ui-a :is(#a-tabs>*,.route button,#room-gifts,.room-sponsor):focus-visible,html.ui-a #room-gifts.dedicate:focus-visible,html.ui-a #stop-strip li.current .stop:focus-visible,html.ui-a #stop-strip li .stop:focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #0b0f17}
html.ui-a :is(dialog#places,dialog.a-menu) :focus-visible{outline:2px solid var(--m-p);outline-offset:2px;box-shadow:none}
/* ---- All rooms, the Menu and Add to Home Screen: light-glass sheets, inset 8 px, radius 28, a grabber; the view dims behind ---- */
html.ui-a dialog#places,html.ui-a dialog.a-menu{position:fixed;inset:auto calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));
  margin:0;width:auto;max-width:none;height:auto;max-height:min(78dvh,calc(100dvh - 64px));padding:0;border:1px solid var(--m-line-l);border-radius:28px;
  background:var(--m-light);-webkit-backdrop-filter:var(--m-blur-l);backdrop-filter:var(--m-blur-l);box-shadow:var(--m-e3);color:var(--m-ink);font-family:var(--m-ui);overflow:auto;overscroll-behavior:contain}
html.ui-a dialog#places{height:min(72dvh,660px)}
html.ui-a dialog#places::backdrop,html.ui-a dialog.a-menu::backdrop{background:rgba(0,0,0,.18)}
html.ui-a dialog#places::before,html.ui-a dialog.a-menu::before{content:"";position:sticky;top:8px;z-index:2;display:block;width:36px;height:5px;margin:8px auto -5px;border-radius:3px;background:rgba(60,68,82,.35)}
html.ui-a dialog#places *{font-family:var(--m-ui)}
html.ui-a #places .dialog-head{background:transparent;border:0}
html.ui-a #places .close,html.ui-a .a-menu-close{width:48px;height:48px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.72);color:var(--m-ink)}
html.ui-a #places .places-foot{display:none}
html.ui-a #places .tile{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--m-e1)}
html.ui-a .a-menu-head{position:sticky;top:0;background:transparent;color:var(--m-ink);padding:18px max(16px,calc(env(safe-area-inset-right,0px) + 12px)) 8px max(16px,calc(env(safe-area-inset-left,0px) + 12px));align-items:center}
html.ui-a .a-menu-head h2{font:700 22px/1.2 var(--m-ui);color:var(--m-ink)}
html.ui-a .a-menu-body{max-width:none}
html.ui-a .a-menu-body h3{color:var(--m-ink2)}
html.ui-a .a-menu-body ul{border-radius:16px}
html.ui-a .a-row{min-height:52px;font-family:var(--m-ui)}
/* the Menu shows when it scrolls: a shadow at the foot while rows lie below, and at the head once scrolled */
html.ui-a dialog.a-menu{background:linear-gradient(var(--m-light) 30%,rgba(255,255,255,0)) center top/100% 40px no-repeat local,linear-gradient(rgba(255,255,255,0),var(--m-light) 70%) center bottom/100% 40px no-repeat local,
  radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.20),rgba(0,0,0,0)) center top/100% 14px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.20),rgba(0,0,0,0)) center bottom/100% 14px no-repeat scroll,var(--m-light)}
html.ui-a .a-install-text{margin:8px 0 16px;font:400 17px/1.5 var(--m-ui);color:var(--m-ink)}
/* ---- a phone on its side and a tablet: the rail at the left, the route along the foot beside it, panels beside the rail ---- */
@media (max-height:520px) and (orientation:landscape),(min-width:481px){
  html.ui-a{--a-rail:104px}
  html.ui-a .a-tabs,html.ui-a.ui-a-tabs-up .a-tabs{position:fixed;z-index:5;left:calc(12px + env(safe-area-inset-left,0px));top:50%;bottom:auto;transform:translateY(-50%);width:80px;height:auto;
    flex-direction:column;justify-content:center;gap:6px;padding:10px 0;border-radius:40px}
  html.ui-a #a-tabs>*{flex:none;width:80px;height:64px}
  html.ui-a .route,html.ui-a.ui-a-tabs-up .route{margin-left:calc(var(--a-rail) + env(safe-area-inset-left,0px))}
  html.ui-a #previous{margin-right:0}
  html.ui-a #room-gifts{bottom:calc(var(--rail-h,80px) + 12px)}
  html.ui-a dialog#places,html.ui-a dialog.a-menu{inset:calc(12px + env(safe-area-inset-top,0px)) auto calc(12px + env(safe-area-inset-bottom,0px)) calc(var(--a-rail) + 4px + env(safe-area-inset-left,0px));
    width:min(720px,calc(100vw - var(--a-rail) - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));height:auto;max-height:none}
  html.ui-a dialog.a-menu{width:min(480px,calc(100vw - var(--a-rail) - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
  html.ui-a dialog#places::before,html.ui-a dialog.a-menu::before{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  /* set 2: the primary floats above the route at the lower right, as on a tablet, 48 px tall here; the route takes the width
     beside the rail (the band it kept for the primary left the current stop's chip no room) */
  html.ui-a #room-gifts{height:48px}
  /* the Menu fits a 342 px screen: a compact head, titles only, two columns of 48 px rows */
  html.ui-a .a-menu-head{padding-top:calc(max(8px,env(safe-area-inset-top,0px)) + 4px);padding-bottom:6px}
  html.ui-a .a-menu-head h2{font-size:20px}
  html.ui-a .a-menu-body h3{margin:8px 0 6px}
  html.ui-a .a-menu-body ul{display:grid;grid-template-columns:1fr 1fr}
  html.ui-a .a-menu-body li+li .a-row{box-shadow:none}
  html.ui-a .a-menu-body li .a-row{min-height:48px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10)}
  html.ui-a .a-row small{display:none}
}
@media (min-width:481px) and (min-height:521px){html.ui-a dialog#places{bottom:auto;max-height:78vh}html.ui-a dialog.a-menu{bottom:auto;max-height:78vh}}
/* a short phone upright (568 px and less of height): the Menu keeps every row in view, titles only, 48 px rows */
@media (max-height:600px) and (orientation:portrait){
  html.ui-a dialog.a-menu{max-height:calc(100dvh - 24px)}
  html.ui-a .a-menu-head{padding-top:12px;padding-bottom:4px}
  html.ui-a .a-menu-head h2{font-size:20px}
  html.ui-a .a-menu-body h3{margin:10px 0 6px}
  html.ui-a .a-menu-body li .a-row{min-height:48px}
  html.ui-a .a-row small{display:none}
}
@media (prefers-reduced-motion:reduce){html.ui-a #room-gifts,html.ui-a .route,html.ui-a .a-tabs{transition:none}}
/* ---- set 2 (the coordinator, 29 Sep): the current stop's chip is always whole; the hint and the primary never meet ----
   - The strip is a size container. The current chip's words stop short of the strip's width less the chip's own parts (the 38 px
     picture; 5, 8 and 14 px of padding) and its two 8 px fades, and the tour centres the chip in the strip (keepInView), so no
     fade ever lies over the current stop: the fades cover only the others. A name that still cannot fit (the narrowest phones
     only) ends in an ellipsis; the page's h1 keeps the whole name, and the stop's button its "Stop n of 31: name".
   - An upright phone: the name on up to two lines; "Stop 5 of 31" is for screen readers only there (the picture carries the
     stop's number); Next shows only its label ("Next", or "Start again" at the end): its accessible name and title still say
     where it goes.
   - While the first-visit hint is up (and not held hidden under a press), the primary waits above it, as a Material FAB rises
     over a snackbar: the hint is one row (35 px) or two (54 px), 10 px above the route, so the primary rises 74 px above it. */
html.ui-a .route .stops{container-type:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%)}
html.ui-a .stops li.current .where{min-width:0;max-width:min(240px,calc(100cqw - 81px))}
html.ui-a .stops li.current .where h1{text-overflow:ellipsis}
@media (max-width:480px) and (orientation:portrait){
  html.ui-a .stops li.current .where .eyebrow,html.ui-a #forward .kind{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
  html.ui-a #forward .to,html.ui-a #forward .icon{display:none}
  html.ui-a .stops li.current .where h1{-webkit-line-clamp:2;font-size:14px;line-height:1.12}
  html.ui-a #forward{padding:0 14px;gap:0;justify-content:center}
  html.ui-a #forward .next-line{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;opacity:1}
  /* a longer label ("Start again" at the last stop) takes two short lines, so the chip keeps its room */
  html.ui-a #forward .next-line,html.ui-a #forward .next-line .label{max-width:3.2em;white-space:normal;text-align:center}
}
/* snap-7 F2: the hint keeps its place (only turns invisible) during the press that ends it, and so does the Dedicate button it
   lifts; the button comes down once the hint leaves the layout, after that press (its first tap opens the list, SW81) */
html.ui-a:has(#help:not([hidden])) #room-gifts{bottom:calc(var(--rail-h,160px) + 74px)}
/* ===== end ui-dedupe A ===== */
/* SW82 D3 (the release-ui focus-indicator-contrast cases on button.stop): the stop strip's buttons get an inverted ring, a dark
   outline with a light halo, which reads on the white current-stop chip and on the dark strip alike. */
html:not(.ui-a) #stop-strip .stop:focus-visible,html.ui-a #stop-strip li.current .stop:focus-visible,html.ui-a #stop-strip li .stop:focus-visible{
  outline:2px solid #0b0f17;outline-offset:2px;box-shadow:0 0 0 4px #fff}
/* SW83 "Dedicated by" (DEDICATED-BY v2.1 §5.4): the hover label's name line (outside the words' 3-line clamp) */
.pick-label .by{display:block;margin-top:4px;font:500 12.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:rgba(255,255,255,.8);overflow-wrap:anywhere}
.pick-label .by[hidden]{display:none}
.pick-label .by bdi{color:#efd497;font-weight:600}