:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#E9ECF7;--surface:#FFFFFF;--surface-2:#F2F4FB;--ink:#1A1D35;--ink-2:#50567A;--line:#D5D9EC;--accent:#4B3FD6;--accent-ink:#fff;--accent-soft:#E4E1FF;
  --rose:#C92A65;--ok:#17734A;--danger:#B8232A;--focus:#FFB300;--shadow:0 10px 30px rgba(26,29,53,.18);
  --font:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--display:'Bricolage Grotesque','Atkinson Hyperlegible',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1230;--surface:#181D45;--surface-2:#21275C;--ink:#EEF0FF;--ink-2:#AAB0DB;--line:#323A78;--accent:#A193FF;--accent-ink:#0E1230;--accent-soft:#2C2A6A;--rose:#FF7EAD;--ok:#5EE39C;--danger:#FF7171;--shadow:0 10px 30px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#0E1230;--surface:#181D45;--surface-2:#21275C;--ink:#EEF0FF;--ink-2:#AAB0DB;--line:#323A78;--accent:#A193FF;--accent-ink:#0E1230;--accent-soft:#2C2A6A;--rose:#FF7EAD;--ok:#5EE39C;--danger:#FF7171;--shadow:0 10px 30px rgba(0,0,0,.5)}
:root[data-contrast="high"]{--ink-2:var(--ink);--line:var(--ink);--shadow:none}
:root[data-motion="reduce"] *{animation:none!important;transition:none!important}
:root[data-read="1"] body{font-family:'Lexend',var(--font);letter-spacing:.03em;word-spacing:.12em;line-height:1.7}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.5;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0}h2{font-size:1.3rem}h3{font-size:1.02rem}p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:.5em 1.05em;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--ink-2)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.ghost{background:transparent;border-color:transparent}.btn.small{min-height:36px;padding:.3em .85em;font-size:.92rem}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.1rem;flex:none;position:relative;padding:0}
.icon-btn.small{width:34px;height:34px;font-size:.9rem}.icon-btn[aria-pressed="true"],.icon-btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icon-btn .dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}
.chip{display:inline-flex;align-items:center;gap:.35em;min-height:34px;padding:.2em .75em;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;cursor:pointer;position:relative;flex:none}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{display:inline-block;padding:.08em .5em;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--ink-2)}
.tag.live{background:var(--rose);border-color:var(--rose);color:#fff}.tag.demo{border-style:dashed}
.muted{color:var(--ink-2)}.small{font-size:.88rem}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.stack{display:grid;gap:.8rem}
.input{width:100%;min-height:44px;padding:.5em .8em;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);min-width:0}.input:focus{border-color:var(--accent)}
.field{display:grid;gap:.3rem}.field>label,.field>span{font-weight:700}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:700;margin-bottom:.4rem;padding:0}
.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 0;cursor:pointer}.switch small{display:block;color:var(--ink-2);font-weight:400}
.switch input{appearance:none;width:50px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;cursor:pointer;margin:0}.switch input::after{content:"";position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}.switch input:checked{background:var(--accent)}.switch input:checked::after{transform:translateX(20px)}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:.8rem}.card.soft{background:var(--surface-2)}
#app{height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr)}
.topbar{display:flex;align-items:center;gap:.55rem;padding:.5rem .9rem;background:var(--surface);border-bottom:1px solid var(--line);z-index:20;position:relative}
.brand{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;color:var(--ink);padding:.2rem}
.brand-mark{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE2AE 0 18%,#33449A 19% 100%);position:relative}.brand-mark::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.25rem}
.search{position:relative;display:flex;gap:.35rem;flex:1;min-width:0;max-width:560px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;padding:.25rem}
.search:focus-within{border-color:var(--accent)}.search input{flex:1;min-width:0;border:0;background:transparent;padding:.35rem .6rem;font-size:1rem}.search input:focus{outline:none}
.results{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:60vh;overflow-y:auto;padding:.3rem;z-index:30}
.res{display:grid;grid-template-columns:30px 1fr;gap:.55rem;align-items:center;padding:.5rem .55rem;border-radius:10px;cursor:pointer}.res[aria-selected="true"],.res:hover{background:var(--accent-soft)}.res b{display:block;line-height:1.25}.res span{font-size:.84rem;color:var(--ink-2)}
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.status i{width:9px;height:9px;border-radius:50%;background:var(--ink-2)}.status.live i{background:var(--ok)}
.spacer{flex:1}
.me-btn{display:flex;align-items:center;gap:.45rem;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.2rem .8rem .2rem .2rem;min-height:44px;font-weight:700;cursor:pointer}.me-btn img{width:36px;height:36px;border-radius:50%;background:var(--surface-2)}
.stage{position:relative;min-height:0;overflow:hidden}
#map{position:absolute;inset:0;outline:none}#map:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* Covers the map while you travel, until the street has loaded in full detail. Panels stay usable above it. */
.veil{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#2B3474,#0E1230 72%);transition:opacity .45s}.veil.out{opacity:0;pointer-events:none}
.veil-card{display:grid;gap:.35rem;justify-items:center;text-align:center;padding:1.1rem 1.4rem;border-radius:20px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);max-width:calc(100% - 2rem)}
.veil-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:veilspin .9s linear infinite}@keyframes veilspin{to{transform:rotate(360deg)}}
.cesium-viewer-bottom{display:none}
/* Map credits (Google's logo and data attributions) must stay visible: on the map, clear of the panels. */
.credits{position:absolute;left:.6rem;bottom:.3rem;z-index:4;max-width:calc(100% - 1.2rem);font-size:.68rem;line-height:1.35;color:#fff;text-shadow:0 1px 2px #000}
.credits .cesium-widget-credits{position:static;display:block;padding:0;font-size:inherit}.credits a{color:#fff}.credits img{max-height:18px;vertical-align:middle}
@media (min-width:861px){.credits{left:calc(350px + 1.5rem);max-width:calc(100% - 350px - 2.25rem)}body:not(.chat-hidden) .credits{max-width:calc(100% - 700px - 3.75rem)}}
.panel,.chat{position:absolute;top:.75rem;bottom:.75rem;width:min(350px,calc(100% - 1.5rem));background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:grid;min-height:0;z-index:5}
.panel{left:.75rem;grid-template-rows:auto auto 1fr}.chat{right:.75rem;grid-template-rows:auto auto 1fr auto}
.tabs{display:flex;gap:.2rem;padding:.4rem .6rem 0;border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:42px;background:none;border:0;border-bottom:3px solid transparent;font-weight:700;color:var(--ink-2);cursor:pointer}.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.panel-body{overflow-y:auto;min-height:0;padding:.6rem}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.item{width:100%;display:grid;grid-template-columns:38px 1fr auto;gap:.6rem;align-items:center;text-align:left;padding:.55rem;border-radius:14px;border:1.5px solid transparent;background:transparent;color:var(--ink);cursor:pointer}.item:hover{background:var(--surface-2)}
.glyph{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;color:#fff;background:var(--accent)}
.i-name{display:block;font-weight:700;line-height:1.25}.i-sub{display:block;font-size:.84rem;color:var(--ink-2)}
.section-h{font-size:.92rem;font-weight:700;color:var(--ink-2);margin:.8rem .3rem .35rem}
.empty{padding:1rem;text-align:center;color:var(--ink-2);display:grid;gap:.6rem;justify-items:center}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:.65rem .8rem .3rem}
.chat .chips{padding:.2rem .8rem .4rem}
.log{overflow-y:auto;min-height:0;padding:.4rem .8rem;display:grid;gap:.55rem;align-content:start}
.msg{display:grid;grid-template-columns:28px 1fr;gap:.5rem}.msg img{width:28px;height:28px;border-radius:50%;background:var(--surface-2)}
.msg .who{font-weight:700;font-size:.9rem}.msg .who small{font-weight:400;color:var(--ink-2);margin-left:.3rem}.msg .txt{overflow-wrap:anywhere}.msg .meta{font-size:.78rem;color:var(--ink-2)}
.msg.mine .who{color:var(--accent)}.msg.system{grid-template-columns:1fr;text-align:center;font-size:.84rem;color:var(--ink-2)}.msg.old{opacity:.75}
.linkish{background:none;border:0;padding:0;color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer}
.composer{border-top:1px solid var(--line);padding:.5rem .8rem;display:grid;gap:.4rem}.quick{flex-wrap:nowrap;overflow-x:auto;padding:0!important}.send{display:flex;gap:.4rem}
.hud{position:absolute;top:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;align-items:center;z-index:4;max-width:calc(100% - 760px - 2rem)}
.where{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:.9rem;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.modes{display:flex;gap:.3rem;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.2rem;box-shadow:var(--shadow);flex:none}
.actionbar{position:absolute;left:50%;bottom:2.1rem;transform:translateX(-50%);display:flex;gap:.4rem;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.35rem .5rem;box-shadow:var(--shadow);z-index:6;max-width:calc(100% - 1.5rem);overflow-x:auto}
.actionbar .sep{width:1px;align-self:stretch;background:var(--line);flex:none}
.cornerhud,.tourcard{position:absolute;z-index:6;background:var(--surface);border:2px solid var(--accent);border-radius:18px;box-shadow:var(--shadow);padding:.8rem .9rem;display:grid;gap:.5rem;width:min(330px,calc(100% - 1.5rem))}
.cornerhud{left:calc(350px + 1.5rem);top:4.2rem;max-height:calc(100% - 9rem);overflow-y:auto}
.tourcard{left:calc(350px + 1.5rem);bottom:6.4rem}
.links{display:flex;gap:.35rem;flex-wrap:wrap}.linkbtn{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:.25rem .7rem;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.86rem;text-decoration:none}
.party{border:1.5px solid var(--rose);border-radius:12px;padding:.5rem .6rem;display:grid;gap:.35rem}
.joy{display:none;position:absolute;left:1rem;bottom:5.5rem;width:120px;height:120px;border-radius:50%;background:rgba(18,20,42,.25);border:2px solid rgba(255,255,255,.5);z-index:6;touch-action:none}
.joy .knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.85)}
body.street.touch .joy{display:block}
#onboard{position:fixed;inset:0;z-index:50;background:linear-gradient(160deg,#B7C3EC,#E6EAF9);overflow-y:auto;padding:1rem}
:root[data-theme="dark"] #onboard{background:linear-gradient(160deg,#060920,#161C4C)}
.ob-card{max-width:680px;margin:2vh auto;background:var(--surface);border:1.5px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:1.4rem;display:grid;gap:1rem}
.ob-hero{font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.steps{display:flex;gap:.35rem}.steps span{flex:1;height:6px;border-radius:3px;background:var(--line)}.steps span.on{background:var(--accent)}
.builder{display:grid;grid-template-columns:170px 1fr;gap:1rem;align-items:start}.preview{border-radius:18px;background:linear-gradient(180deg,#B7C3EC,#E6EAF9);display:grid;place-items:center;padding:.5rem}.preview canvas{width:150px;height:300px}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap}.swatch{position:relative}.swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.swatch span{display:grid;place-items:center;min-width:42px;height:42px;border-radius:21px;border:3px solid transparent;background:var(--surface-2);padding:0 .65rem;font-weight:700;font-size:.88rem}.swatch.col span{width:42px;padding:0}.swatch input:checked+span{border-color:var(--accent)}.swatch input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
dialog{border:0;padding:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);width:min(600px,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem)}dialog.wide{width:min(820px,calc(100vw - 1.5rem))}dialog::backdrop{background:rgba(10,12,35,.55)}
.m-inner{display:grid;grid-template-rows:auto 1fr;max-height:calc(100dvh - 2rem)}.m-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem .4rem}.m-body{padding:.3rem 1.1rem 1.2rem;overflow-y:auto;display:grid;gap:.9rem}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.45rem}.theme-opt{position:relative}.theme-opt input{position:absolute;inset:0;opacity:0;margin:0}.theme-opt span{display:grid;gap:.15rem;padding:.55rem;border-radius:14px;border:2px solid var(--line);background:var(--surface-2);font-weight:700;font-size:.88rem;min-height:70px}.theme-opt input:checked+span{border-color:var(--accent);background:var(--accent-soft)}.theme-opt input:focus-visible+span{outline:3px solid var(--focus)}
.linkrow{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center}.linkrow .det{font-size:.8rem;font-weight:700;color:var(--ink-2);min-width:96px;text-align:right}
.kbd{display:inline-block;min-width:1.8em;padding:.05em .4em;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;font-weight:700;font-size:.85rem;text-align:center;background:var(--surface-2)}
.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:center}
#toasts{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:.5rem;z-index:60;width:min(460px,calc(100vw - 1.5rem));pointer-events:none}
.toast{background:var(--ink);color:var(--bg);border-radius:14px;padding:.65rem .9rem;box-shadow:var(--shadow);display:flex;gap:.7rem;align-items:center;justify-content:space-between;pointer-events:auto}.toast .btn{min-height:32px;padding:.2em .8em;background:var(--bg);color:var(--ink);border-color:var(--bg)}
.sheet-handle{display:none;width:100%;background:none;border:0;padding:.4rem 0 0;cursor:pointer}.sheet-handle span{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
body.chat-hidden .chat{display:none}
@media (max-width:1100px){.hud{left:auto;right:.75rem;transform:none;max-width:calc(100% - 350px - 2.5rem)}body:not(.chat-hidden) .hud{display:none}}
@media (max-width:860px){
  .hide-sm{display:none!important}.brand-name{display:none}.topbar{gap:.35rem;padding:.4rem .5rem}.me-btn{padding:.2rem}.status span{display:none}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;height:45%;border-radius:20px 20px 0 0}.panel.collapsed{height:112px}.sheet-handle{display:block}
  .chat{top:auto;left:0;right:0;bottom:0;width:auto;height:62%;border-radius:20px 20px 0 0;z-index:8}
  .hud{top:.5rem;left:.5rem;right:.5rem;transform:none;max-width:none;display:flex!important}.where{flex:1}
  .cornerhud{left:.5rem;right:.5rem;width:auto;top:3.6rem;max-height:40%}.tourcard{left:.5rem;right:.5rem;width:auto;bottom:calc(45% + 2.2rem)}
  body.panel-min .tourcard{bottom:calc(112px + 2.2rem)}body.street .panel{display:none}body.street .tourcard{bottom:6.2rem}
  .credits{bottom:calc(45% + .3rem)}body.panel-min .credits{bottom:calc(112px + .3rem)}body.street .credits{bottom:.3rem}body:not(.chat-hidden) .credits{bottom:calc(62% + .3rem)}
  .builder{grid-template-columns:1fr}
  .veil{place-items:start center;padding-top:18vh}
}

/* The street-level world sits over the aerial map; panels, the curtain and the HUD stay above it. */
#world{position:absolute;inset:0;z-index:1;display:block;outline:none;touch-action:none}#world[hidden]{display:none}#world:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.world-credits{display:none}body.street .world-credits{display:block}body.street #credits{display:none}
.wx{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-weight:700;font-size:.88rem;box-shadow:var(--shadow);white-space:nowrap;flex:none}
.ctx{position:absolute;left:50%;bottom:calc(2.1rem + 64px);transform:translateX(-50%);z-index:6;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 1.5rem)}
.ctx .btn{box-shadow:var(--shadow);background:var(--surface)}
@media (max-width:860px){.wx{display:none}body.street .tourcard{bottom:calc(6.2rem + 52px)}}
.tabletalk{position:absolute;right:calc(350px + 1.5rem);top:4.2rem;z-index:6;width:min(340px,calc(100% - 1.5rem));background:var(--surface);border:2px solid var(--rose);border-radius:18px;box-shadow:var(--shadow);padding:.7rem .85rem;display:grid;gap:.45rem}.tabletalk .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.15rem}.tabletalk .chip{min-height:30px;font-size:.82rem}
body.chat-hidden .tabletalk{right:.75rem}.tt-q{font-family:var(--display);font-size:1.12rem;line-height:1.3;margin:0}
@media (max-width:860px){.tabletalk{left:.5rem;right:.5rem;width:auto;top:3.6rem;padding:.55rem .7rem}.tt-q{font-size:1rem}}
.venuecard{border-color:var(--rose)}.venuecard h2{font-size:1.2rem}
/* Sitting down, Table talk (which has the place's own questions) takes the venue card's spot. */
body:has(#tableTalk:not([hidden])) .venuecard{display:none}
/* Small phones: smaller top-bar buttons, so both rows fit in 375 px. */
@media (max-width:480px){.topbar{gap:.3rem;padding:.35rem .4rem}.topbar .icon-btn{width:38px;height:38px;font-size:1rem}.brand-mark{width:28px;height:28px}.me-btn{min-height:38px}.me-btn img{width:32px;height:32px}.search{padding:.15rem}.search .btn.small{padding:.25em .6em}}
/* Messages: private chats, groups and friends. On desktop a side panel over the Explore panel, so the area chat on the
   right stays usable; on phones a bottom sheet. */
.icon-btn .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--rose);color:var(--surface);border:2px solid var(--surface);font-size:.72rem;font-weight:700;line-height:16px;text-align:center}
.msgs{position:absolute;top:.75rem;bottom:.75rem;left:.75rem;width:min(350px,calc(100% - 1.5rem));background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0;overflow:hidden;z-index:7}
.msgs-head{display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem .45rem}.msgs-head>h2{flex:1;min-width:0}.msgs-head h2{font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msgs-head .glyph{width:34px;height:34px;flex:none}
.t-title{flex:1;min-width:0;display:grid}.t-title .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-acts{padding:0 .8rem .55rem;border-bottom:1px solid var(--line);gap:.4rem}
.msgs-body{flex:1;min-height:0;overflow-y:auto;padding:.6rem}.msgs .log{flex:1;padding-top:.6rem}.msgs .log>.btn{justify-self:center}
.msgs .item .i-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.i-meta{display:grid;justify-items:end;gap:.3rem}
.unread{width:11px;height:11px;border-radius:50%;background:var(--rose)}
.tab .n{display:inline-block;min-width:1.5em;padding:0 .4em;border-radius:999px;background:var(--rose);color:var(--surface);font-size:.75rem;line-height:1.5}
.glyph.av{border-radius:50%;background:var(--surface-2)}
.empty strong{color:var(--ink)}.on{color:var(--ok)}.card.warn{border-color:var(--rose)}label.section-h{display:block}
@media (max-width:860px){.msgs{top:auto;left:0;right:0;bottom:0;width:auto;height:82%;border-radius:20px 20px 0 0;z-index:9}}
/* The top bar was already wider than narrow screens (the search wouldn't shrink, so the whole page grew past the
   screen) and the Messages button adds to it. The spacer now gives way first and then the search shrinks, which keeps
   the layout as it was wherever it fitted; below 560px the search gets a row of its own. */
#app{grid-template-columns:minmax(0,1fr)}.search{flex:1 1 240px;min-width:0}.spacer{flex:1 1000 240px}
@media (max-width:560px){.topbar{flex-wrap:wrap;row-gap:.45rem}.spacer{flex:1}.search{order:1;flex:1 1 calc(100% - 3.2rem);max-width:none}.status{order:2}}
/* Meeting spots: an invite in a chat, with a button that takes you there. */
.meetcard{display:grid;gap:.25rem;justify-items:start;margin-top:.35rem;padding:.55rem .7rem;border:1.5px solid var(--rose);border-radius:14px;background:var(--surface-2);max-width:290px}.meetcard strong{overflow-wrap:anywhere}
/* Guided walks: the card for joining a walk and following it, with the guide's words and the stops so far. */
.walkcard{border-color:var(--rose);max-height:46vh;overflow-y:auto}.walkcard h2{font-size:1.15rem}
.wcap{font-size:.95rem;line-height:1.45;margin:0}.wcap strong{color:var(--rose)}
.wdots{display:flex;gap:.3rem;align-items:center}.wdot{width:9px;height:9px;border-radius:50%;background:var(--line)}.wdot.on{background:var(--rose)}
.tag.guide{background:var(--rose);color:var(--surface);border-color:var(--rose)}
body:has(#ctx:not([hidden])) .walkcard{bottom:calc(6.4rem + 46px)}
@media (max-width:860px){.walkcard{max-height:38vh}body.street:has(#ctx:not([hidden])) .walkcard{bottom:calc(6.2rem + 98px)}}
/* Property agents: the conversation panel (laid out like Messages) and the plan they propose. */
.agentpanel{z-index:8}.plan{margin:0 .8rem .6rem;border-color:var(--accent)}.plan h3{margin:0;font-size:1.1rem}
.est{width:100%;border-collapse:collapse}.est td,.est th{padding:.2rem 0;text-align:left;border-bottom:1px solid var(--line)}.est td:last-child,.est th:last-child{text-align:right;white-space:nowrap}
/* Photos: a quick white flash when you take one (skipped with reduced motion). */
.flash{position:fixed;inset:0;background:#fff;pointer-events:none;z-index:60;animation:flash .45s ease-out forwards}@keyframes flash{from{opacity:.85}to{opacity:0}}
/* Touch screens: a jump button opposite the joystick. */
.jumpbtn{display:none;position:absolute;right:1rem;bottom:5.8rem;width:64px;height:64px;border-radius:50%;place-items:center;font-size:1.6rem;font-weight:800;color:#fff;background:rgba(18,20,42,.45);border:2px solid rgba(255,255,255,.6);z-index:6;touch-action:manipulation}
body.street.touch .jumpbtn:not([hidden]){display:grid}
/* Things to do (js/activities.js): the one labelled button on the action bar, with a soft pulse until it's first used. */
.dobtn{flex:none;white-space:nowrap}
.dobtn.fresh{animation:dopulse 1.8s ease-out 5}
@keyframes dopulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* Trips (js/journey.js): where you're going, how long and the next turn; and the place's name when you get there. */
.tripcard{position:absolute;left:50%;top:3.9rem;transform:translateX(-50%);z-index:7;width:min(440px,calc(100% - 1.5rem));background:var(--surface);border:2px solid #0891b2;border-radius:18px;box-shadow:var(--shadow);padding:.6rem .75rem;display:grid;gap:.45rem}
.tripcard .glyph{background:#0891b2;flex:none}
@media (max-width:860px){.tripcard{top:3.6rem;left:.5rem;right:.5rem;width:auto;transform:none}}
.arrival{position:absolute;left:50%;top:20%;transform:translate(-50%,-10px);z-index:8;text-align:center;pointer-events:none;opacity:0;transition:opacity .7s ease,transform .7s ease;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.6);width:min(90%,720px)}
.arrival strong{display:block;font-family:var(--display);font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.arrival span{display:block;font-size:1rem;margin-top:.3rem;letter-spacing:.02em}
.arrival.show{opacity:1;transform:translate(-50%,0)}
/* Things to do (js/activities.js): the guide's greeting, what you feel like, and ideas with their reasons and ways there. */
.guide-head{display:grid;gap:.25rem;margin:-.2rem 0 .5rem}.guide-head strong{font-family:var(--display);font-size:1.25rem}
.chip.static{cursor:default;min-height:26px;padding:.15rem .55rem;font-size:.78rem;background:var(--surface-2);border-color:transparent;color:var(--ink)}
.vibes{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;margin:.2rem 0 .1rem;flex:none;min-height:44px}.vibes .chip{flex:none}.vibes .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ideas{display:grid;gap:.55rem}
.idea{border:1.5px solid var(--line);border-radius:16px;padding:.55rem .6rem;display:grid;gap:.45rem;background:var(--surface)}
.idea-main{display:grid;grid-template-columns:38px 1fr;gap:.6rem;align-items:start;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;width:100%;font:inherit}
.idea-main:hover .i-name{text-decoration:underline}
.idea-txt{display:grid;gap:.15rem;min-width:0}
.idea-when{color:var(--ink)!important;font-weight:700}
.idea-why{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.idea-go{display:flex;flex-wrap:wrap;gap:.35rem;padding-left:calc(38px + .6rem)}
.ideas.compact .idea-why{display:none}.ideas.compact .idea{padding:.45rem .5rem}
@media (max-width:860px){.idea-go{padding-left:0}}
/* Pickup matches (js/match.js): the score and the clock. */
.matchcard{border-color:#E63946}.matchcard .score{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:.02em}