/* 8AM World / the experience layer. Additive UI over the campus: paper, ink,
   Klein Blue, Arial, hairlines, no radius. Everything under body.xp-ready
   only exists once assets/world/experience/experience.js has loaded, so a
   page whose import failed keeps its original furniture untouched.

   The entrance (the briefing as the arrival card) is styled in explore.html
   itself, not here: it paints before any module runs and must not wait on
   this file. The status bar keeps the page's own rules — what it says on a
   phone and on a desktop is held by tests/explore/hud.js — and only takes
   the paper here. */
:root{--xp-paper:#f7f6f2;--xp-line:#d8d9d5;--xp-muted:#666961;--xp-safe:env(safe-area-inset-bottom,0px)}
#xpRoot [hidden],.xp-card-close[hidden]{display:none!important}
button,a,input,select{ -webkit-tap-highlight-color:transparent }
:focus-visible{outline:2px solid #002fa7!important;outline-offset:4px}
body:not(.playing) .corner{visibility:hidden}
/* the header comes up on a fade once the flight is under way, not on the
   same frame as the panel going */
body.xp-ready .hud-top{transition:opacity .9s ease .5s}
body:not(.playing) .hud-top{opacity:0;pointer-events:none}
.boot{top:22px;left:auto;right:24px;transform:none;background:var(--xp-paper);padding:16px;z-index:45;color:var(--ink)}
/* The top section is the page's own and this file does not touch it: the
   white blurred mark over the world, the white chip buttons, the Klein
   corner. The reference's paper header bar was tried and Arlin sent it
   back (10 Sep: "we had mastered the top section before"). This layer puts
   NOTHING in that row -- it used to prepend a Map button, and on a phone
   that was a whole extra row under everything hung off the row's height.
   Only the fade-in above is the layer's. */
body.xp-ready .status{background:var(--xp-paper);border-color:var(--xp-line)}
.xp-mini{position:fixed;bottom:94px;left:24px;width:220px;background:var(--xp-paper);border:1px solid var(--xp-line);z-index:21;padding:0;text-align:left;cursor:pointer}
.xp-mini svg{display:block;width:100%;height:176px}
.xp-mini-foot{display:flex;justify-content:space-between;border-top:1px solid var(--xp-line);padding:10px 12px;font:9px var(--mono);letter-spacing:.07em;color:var(--ink)}
.xp-compass{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:var(--xp-paper);border:1px solid var(--xp-line);padding:9px 15px;z-index:21;font:9px var(--mono);letter-spacing:.14em;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0}
.xp-compass:hover{color:var(--klein)}
.xp-tools{position:fixed;right:24px;bottom:24px;display:flex;gap:1px;border:1px solid var(--xp-line);background:var(--xp-line);z-index:22}
.xp-tools button{background:var(--xp-paper);border:0;padding:13px 15px;min-height:44px;font:10px Arial;letter-spacing:.06em;cursor:pointer;color:var(--ink)}
.xp-tools button:hover{color:var(--klein)}
.xp-route{position:fixed;top:80px;right:24px;z-index:23;width:240px;background:var(--xp-paper);border:1px solid var(--xp-line);padding:17px}
.xp-route .xp-eyebrow{margin-bottom:9px}
.xp-route strong{display:block;font-size:18px;font-weight:400;margin-bottom:8px}
.xp-route p{font:10px var(--mono);color:var(--xp-muted);line-height:1.6}
.xp-route button{margin-top:12px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:10px;cursor:pointer;padding:5px 0;color:var(--ink)}
.xp-eyebrow{font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--klein)}
.xp-hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:24;background:var(--xp-paper);border:1px solid var(--xp-line);width:360px;padding:20px 22px}
.xp-hint h3{font-size:18px;font-weight:400;margin:8px 0}
.xp-hint p{font-size:12px;line-height:1.6;color:var(--xp-muted)}
.xp-hint .xp-hint-actions{display:flex;gap:18px;margin-top:14px}
.xp-hint button{background:none;border:0;color:var(--klein);font:10px var(--mono);padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.xp-hint button:last-child{color:var(--xp-muted)}
.xp-toast{position:fixed;left:50%;top:130px;transform:translateX(-50%);background:var(--xp-paper);border:1px solid var(--xp-line);padding:16px 24px;z-index:48;max-width:calc(100vw - 32px);font-size:12px;line-height:1.6}
.xp-overlay{position:fixed;inset:0;background:var(--xp-paper);z-index:47;display:flex;flex-direction:column;color:var(--ink)}
.xp-overlay-head{min-height:81px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 32px;border-bottom:1px solid var(--xp-line)}
.xp-overlay-head h2{font-size:22px;letter-spacing:-.04em;font-weight:500}
.xp-close{min-width:64px;min-height:44px;background:transparent;border:1px solid var(--xp-line);font:10px var(--mono);letter-spacing:.08em;cursor:pointer}
.xp-atlas-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0;flex:1}
.xp-atlas-map{padding:24px;display:flex;flex-direction:column;min-height:0;position:relative}
.xp-atlas-map svg{width:100%;height:100%;min-height:0;flex:1}
.xp-map-label{font:10px var(--mono);letter-spacing:.1em;display:flex;justify-content:space-between;padding:0 16px}
.xp-map-side{border-left:1px solid var(--xp-line);display:flex;flex-direction:column;min-height:0}
.xp-map-intro{padding:26px 24px 20px}
.xp-map-intro h3{font-size:29px;font-weight:400;letter-spacing:-.05em;line-height:1.15;margin:12px 0}
.xp-map-intro p{font-size:12px;line-height:1.6;color:var(--xp-muted)}
.xp-search{margin:0 24px 16px;width:calc(100% - 48px);border:1px solid var(--xp-line);background:#fff;padding:13px;font:14px Arial;border-radius:0;color:var(--ink)}
.xp-filters{display:flex;gap:0;padding:0 24px 16px}
.xp-filters button{flex:1;background:none;border:1px solid var(--xp-line);border-right:0;font-size:11px;cursor:pointer;padding:10px 6px;min-height:40px}
.xp-filters button:last-child{border-right:1px solid var(--xp-line)}
.xp-filters button[aria-pressed=true]{background:var(--klein);color:#fff;border-color:var(--klein)}
.xp-places{overflow:auto;overscroll-behavior:contain;flex:1;border-top:1px solid var(--xp-line)}
.xp-place{display:grid;grid-template-columns:27px 1fr 37px;gap:12px;text-align:left;width:100%;padding:18px 24px;border:0;border-bottom:1px solid var(--xp-line);background:transparent;cursor:pointer;color:var(--ink)}
.xp-place:hover,.xp-place[aria-pressed=true]{background:#eaece4}
.xp-place .xp-num{font:10px var(--mono);color:var(--klein);padding-top:2px}
.xp-place strong{display:block;font-size:15px;font-weight:400}
.xp-place small{display:block;font-size:10px;line-height:1.5;color:var(--xp-muted);margin-top:5px}
.xp-place .xp-distance{font:9px var(--mono);color:var(--xp-muted);text-align:right;padding-top:3px}
.xp-detail{border-top:1px solid var(--xp-line);padding:22px 24px;background:#eeeee8}
.xp-detail h3{font-size:21px;font-weight:400;margin:8px 0}
.xp-detail p{font-size:12px;line-height:1.6;color:var(--xp-muted);margin:8px 0 16px}
.xp-detail .btn{width:100%;min-height:44px}
.xp-empty{padding:24px;font-size:13px;line-height:1.6;color:var(--xp-muted)}
.xp-map-dot{cursor:pointer;outline:none}
.xp-map-dot .hit{fill:transparent;stroke:none}
.xp-map-dot circle.core{fill:var(--xp-paper);stroke:#798274;stroke-width:1}
.xp-map-dot text{font:8px var(--mono);fill:#37432e;pointer-events:none;text-anchor:middle;dominant-baseline:central}
.xp-map-dot.active circle.core,.xp-map-dot:hover circle.core,.xp-map-dot:focus-visible circle.core{fill:#002fa7;stroke:#002fa7}
.xp-map-dot.active text,.xp-map-dot:hover text,.xp-map-dot:focus-visible text{fill:white}
.xp-map-dot.found circle.core{stroke:#002fa7;stroke-width:1.6}
.xp-settings{max-width:680px;width:100%;margin:0 auto;padding:38px 32px;overflow:auto}
.xp-settings h3{font-size:40px;letter-spacing:-.06em;font-weight:400;margin:0 0 28px}
.xp-setting{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--xp-line);padding:22px 0}
.xp-setting strong{display:block;font-size:15px;font-weight:400;margin-bottom:6px}
.xp-setting small{display:block;font-size:12px;line-height:1.6;color:var(--xp-muted);max-width:350px}
.xp-setting button,.xp-setting select{background:#fff;border:1px solid var(--xp-line);min-width:100px;min-height:44px;padding:10px;font-size:12px;color:var(--ink);border-radius:0;cursor:pointer}
.xp-help{padding:22px 0;border-top:1px solid var(--xp-line);font-size:12px;line-height:2;color:var(--xp-muted)}
.xp-help kbd{font:10px var(--mono);color:var(--ink)}
body.xp-ready .veil:not(#intro):not(.veil--look){background:rgba(15,22,16,.28);justify-content:flex-end;align-items:stretch;padding:80px 24px 24px}
body.xp-ready .veil:not(#intro):not(.veil--look) .card{max-width:460px;max-height:100%;align-self:flex-start;background:var(--xp-paper);border-color:var(--xp-line);padding:30px}
body.xp-ready .veil .foot{line-height:1.8}
.xp-card-close{float:right;background:none;border:0;font:10px var(--mono);padding:0 0 18px 16px;min-height:35px;cursor:pointer;color:var(--xp-muted)}
body.xp-ready .prompt{bottom:28px;padding:17px 24px;font-size:12px;min-height:50px;max-width:calc(100vw - 32px);white-space:normal;line-height:1.5;background:var(--xp-paper);color:var(--ink);border:1px solid var(--xp-line)}
body.xp-ready .prompt .key{border-color:#bbb;color:var(--klein)}
body.xp-ready .prompt:hover{background:var(--klein);color:white}
body.xp-ready .prompt:hover .key{color:white}
body.xp-modal .prompt,body.xp-modal #stick,body.xp-modal #runBtn,body.xp-modal #waveBtn,body.xp-modal .clock{visibility:hidden!important}
body.xp-cinema .hud-top,body.xp-cinema .corner,body.xp-cinema .status,body.xp-cinema .clock,body.xp-cinema .xp-mini,body.xp-cinema .xp-route,body.xp-cinema .xp-compass,body.xp-cinema .prompt,body.xp-cinema .xp-hint{visibility:hidden!important}
body.xp-cinema .xp-tools button:not(#xpCinema){display:none}
body.xp-reduced *,body.xp-reduced *::before,body.xp-reduced *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
@media(max-width:1000px){
 .xp-atlas-body{grid-template-columns:minmax(0,1fr) 330px}
 .xp-mini{width:180px}.xp-mini svg{height:145px}
 .xp-hint{width:320px}.xp-tools button{padding:12px 10px}
}
@media(max-width:700px){
 .xp-mini{display:none}
 /* one row under the header: the level bar from the left, the compass at the
    right, the same 24px tall, twelve clear of the header's line. The bar's
    type comes down half a point so it still fits on one line beside the
    compass at 360 (tests/explore/hud.js holds the bar's own rules). */
 body.xp-ready.playing .status{top:calc(var(--hud-bottom,66px) + 12px);left:14px;font-size:8px;padding:6px 8px;max-width:calc(100vw - 76px)}
 body.xp-ready.playing .clock{top:calc(var(--hud-bottom,66px) + 12px + 24px);left:0}
 .xp-compass{left:auto;right:14px;top:calc(var(--hud-bottom,66px) + 12px);transform:none;padding:0;width:32px;height:24px;min-width:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;letter-spacing:.1em}
 /* A 32x24 chip is under half a thumb, and since Map came off the header
    bar this is the ONLY door to the map a phone has -- so it takes a hit
    area a thumb can find without the drawn box growing and breaking the row
    it shares with the level bar. The chip is position:fixed, which is its
    own containing block, so this hangs off it. It reaches 8px out and 10px
    up and down: the level bar ends 16px to its left and the header's last
    button 20px above, so it takes nothing else's taps. */
 .xp-compass::after{content:'';position:absolute;left:-8px;right:-8px;top:-10px;bottom:-10px}
 .xp-tools{right:14px;top:calc(var(--hud-bottom,66px) + 12px + 24px + 8px);bottom:auto;border:0;background:none;gap:0}
 .xp-tools #xpSound,.xp-tools #xpSettings{display:none}
 .xp-tools #xpCinema{display:block;padding:0 8px;height:24px;min-height:0;font-size:8.5px;letter-spacing:.1em;font-family:var(--mono);text-transform:uppercase;background:rgba(247,246,242,.82);border:1px solid var(--xp-line)}
 body.xp-cinema .xp-tools{opacity:.55}
 .xp-route{top:120px;right:14px;width:190px;padding:13px}.xp-route strong{font-size:16px}.xp-route .xp-eyebrow{font-size:8px}.xp-route button{margin-top:5px}
 .xp-hint{bottom:calc(157px + var(--xp-safe));width:calc(100vw - 28px);max-width:370px;padding:16px 18px}.xp-hint h3{font-size:16px}.xp-hint p{font-size:11px}
 body.xp-ready .prompt{bottom:calc(155px + var(--xp-safe));padding:14px 18px;font-size:11px;min-height:48px}
 .xp-overlay-head{min-height:68px;padding:12px 18px}.xp-overlay-head h2{font-size:20px}
 .xp-atlas-body{display:flex;flex-direction:column;overflow:auto}.xp-atlas-map{flex:none;height:33dvh;min-height:210px;padding:12px}
 .xp-map-label{font-size:8px;padding:0 6px}.xp-map-side{border-left:0;border-top:1px solid var(--xp-line);min-height:350px;flex:1;overflow:visible}
 .xp-map-intro{padding:18px 20px 14px}.xp-map-intro h3{font-size:24px;margin:8px 0}.xp-map-intro p{font-size:11px}
 .xp-search{margin:0 20px 12px;width:calc(100% - 40px);font-size:16px;padding:11px}.xp-filters{padding:0 20px 12px}
 .xp-places{min-height:160px;max-height:38dvh;flex:1;overflow:auto}.xp-place{padding:15px 20px}.xp-detail{padding:16px 20px}
 .xp-settings{padding:26px 22px}.xp-settings h3{font-size:34px}.xp-setting{gap:16px}.xp-setting small{font-size:11px}
 body.xp-ready .veil:not(#intro):not(.veil--look){padding:75px 14px calc(18px + var(--xp-safe));align-items:flex-end}
 body.xp-ready .veil:not(#intro):not(.veil--look) .card{max-width:none;align-self:flex-end;max-height:calc(100dvh - 100px);padding:24px}
}
@media(pointer:coarse){
 /* the page's own places for these stand (the stick right, under the
    thumb; Run and Wave left); only the cloth changes: translucent, the nub
    Klein, and Run barely there until it is held */
 body.xp-ready #stick{background:rgba(247,246,242,.5);border:1px solid rgba(198,202,192,.7)}
 body.xp-ready #nub{background:#002fa7}
 body.xp-ready #runBtn,body.xp-ready #waveBtn{background:rgba(247,246,242,.36);border:1px solid rgba(216,217,213,.6);color:rgba(10,10,10,.75);border-radius:0}
 body.xp-ready #runBtn.on{background:rgba(0,47,167,.85);border-color:transparent;color:#fff;box-shadow:none}
 /* Hide: everything but the stick goes; Run stays, faint, because a thumb
    still needs it */
 body.xp-cinema #runBtn{opacity:.35}
 body.xp-cinema #waveBtn,body.xp-cinema .hud-live{visibility:hidden!important}
}
/* A PHONE ON ITS SIDE. The mini map goes -- 176px of drawing will not fit
   under a 390px-tall viewport -- but THE COMPASS STAYS, which it did not
   used to. It is a 24px chip and it is now the only door to the map a thumb
   has: the header bar's Map button was taken out on 10 Sep 2026, and M is
   not a key anybody has here. Hiding it in this one orientation would mean
   turning the phone sideways closed the map. */
@media(max-height:500px) and (max-width:900px){.xp-mini{display:none}.xp-atlas-body{display:grid;grid-template-columns:1fr 330px}.xp-atlas-map{height:auto}.xp-map-side{min-height:0}.xp-map-intro{display:none}.xp-hint{bottom:20px;width:320px}.xp-route{top:70px}}