/* ============================================================
   USC Annenberg WebTour · production UI layer · usc-ui v017
   Layered over the live Pano2VR player + skin (both untouched).
   Design source of truth: concept mockup v2.10 (approved 2026-07-07).
   ============================================================ */
:root{
  --uu-cardinal:#990000;
  --uu-cardinal-bright:#c60000;
  --uu-cardinal-deep:#4d0000;
  --uu-gold:#ffcc00;
  --uu-gold-soft:#ffdf66;
  --uu-ink:#171112;
  --uu-paper:#faf6ef;
  --uu-paper-dim:#e9e2d6;
  --uu-serif:"Libre Caslon Text",Georgia,serif;
  --uu-sans:"Source Sans 3",-apple-system,"Helvetica Neue",sans-serif;
  --uu-focus:0 0 0 3px var(--uu-ink),0 0 0 6px var(--uu-gold);
}

/* ---------- legacy skin chrome ----------
   This export renders NO DOM ids (ggId is a JS property only), so hiding is
   done at runtime by usc-ui.js: every top-level skin child gets .uu-hide
   except hotspotsContainer, popupContainer and hotspot instances. */
.uu-hide{display:none!important}

/* ---------- iOS dynamic viewport (fixes black bar under the pano) ---------- */
@supports (height:100dvh){
  html,body{height:100dvh!important}
  #container{height:100dvh!important}
}

/* ---------- base ---------- */
.uu-ui,.uu-ui *{box-sizing:border-box;margin:0;padding:0}
.uu-ui{font-family:var(--uu-sans);color:var(--uu-paper);-webkit-font-smoothing:antialiased}
.uu-ui button{font-family:var(--uu-sans);cursor:pointer;border:0;background:none;color:inherit;font-size:inherit}
.uu-ui :is(button,a,[tabindex]):focus-visible{outline:none;box-shadow:var(--uu-focus);border-radius:6px;z-index:5;position:relative}
.uu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes uuFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes uuShimmer{from{background-position:-200% 0}to{background-position:200% 0}}

/* ---------- in-pano hotspot icons: adaptive size on mobile ---------- */
/* Mobile hotspot shrink: scale the icon INSIDE the engine-positioned wrapper.
   Never `zoom` the wrapper itself — Safari scales the wrapper's screen coordinates
   too, drifting every icon toward the top-left (Eric's iPhone report 2026-08-28). */
body.uu-mobile #container div[class~="ggskin_hotspot"] > div{transform:scale(.55)}
body.uu-mobile #container .uu-vhs.uu-vhs{transform:scale(.55)}

/* ---------- no double-tap zoom (keeps pinch-zoom for accessibility) ---------- */
html,body,#container,.uu-ui,.uu-ui *{touch-action:manipulation}

/* ---------- CTA (base rule; hero variant used on end cards) ---------- */
.uu-cta.uu-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--uu-gold);color:var(--uu-ink);font-weight:700;font-size:14px;letter-spacing:.02em;padding:11px 18px;border-radius:999px;text-decoration:none;min-height:44px}
.uu-cta.uu-cta:hover{background:var(--uu-gold-soft)}
.uu-cta--hero.uu-cta--hero{font-size:clamp(17px,1.8vw,21px);padding:18px 46px;min-height:60px;box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 6px rgba(255,204,0,.18);margin:6px 0 4px}

/* ---------- landing / tour menu ---------- */
#uuLanding{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--uu-ink);transition:opacity .5s,visibility .5s}
#uuLanding.uu-gone{opacity:0;visibility:hidden}
#uuLanding .uu-bg{position:absolute;inset:0;overflow:hidden}
#uuLanding .uu-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#uuLanding .uu-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
#uuLanding .uu-lmain{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.uu-box{background:#000;border:2px solid var(--uu-gold);padding:clamp(18px,3vh,30px) clamp(16px,2.4vw,34px);max-width:min(620px,92vw);animation:uuFadeUp .7s .15s both}
.uu-buildings{display:flex;gap:clamp(16px,3vw,44px);align-items:stretch;justify-content:center}
.uu-bldg.uu-bldg{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);background:none;border:0;padding:0;color:#fff}
.uu-bldg .uu-photo{width:clamp(130px,13vw,180px);aspect-ratio:1/1.02;object-fit:cover;border-radius:8px;display:block}
.uu-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--uu-cardinal);border:1.5px solid var(--uu-gold);border-radius:999px;color:#fff;font-size:clamp(13px,1vw,15px);font-weight:600;padding:9px 20px;min-height:42px;min-width:clamp(170px,16vw,215px);text-align:center;line-height:1.25;transition:background .2s,transform .15s}
.uu-bldg.uu-bldg:hover .uu-pill{background:var(--uu-cardinal-bright);transform:translateY(-1px)}
.uu-bldg .uu-done{display:none;color:var(--uu-gold);font-weight:800}
.uu-bldg.uu-toured .uu-done{display:inline}
#uuLanding footer{position:relative;z-index:2;padding:14px clamp(20px,4vw,48px);font-size:11.5px;color:rgba(250,246,239,.55);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,204,0,.2)}

/* ---------- story chrome over the live player ---------- */
#uuStory{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0;visibility:hidden;transition:.4s}
#uuStory.uu-open{opacity:1;visibility:visible}
#uuStory .uu-scrim-top{position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,rgba(23,17,18,.8),rgba(23,17,18,0))}
#uuStory .uu-scrim-bot{position:absolute;bottom:0;left:0;right:0;height:44%;background:linear-gradient(0deg,rgba(23,17,18,.86),rgba(23,17,18,0))}
#uuStory .uu-top{position:absolute;top:0;left:0;right:0;padding:14px 16px 0;pointer-events:none}
#uuSegs{display:flex;gap:4px;margin-bottom:12px}
#uuSegs i{flex:1;height:4px;border-radius:2px;background:rgba(250,246,239,.28);transition:background .3s}
#uuSegs i.uu-done{background:var(--uu-gold);box-shadow:0 0 6px rgba(255,204,0,.5)}
#uuStory .uu-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
#uuStory .uu-meta .uu-k{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--uu-ink);background:var(--uu-gold);border-radius:999px;padding:6px 14px}
#uuStory .uu-meta .uu-btns{display:flex;gap:8px;pointer-events:auto}
.uu-iconbtn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(77,0,0,.7);border:1px solid rgba(255,204,0,.4);color:var(--uu-paper);font-size:18px;position:relative;flex:none;pointer-events:auto}
.uu-iconbtn:hover{border-color:var(--uu-gold);color:var(--uu-gold)}
.uu-iconbtn .uu-badge{position:absolute;top:-6px;right:-6px;background:var(--uu-gold);color:var(--uu-ink);font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 4px}
.uu-iconbtn .uu-badge.uu-show{display:flex}
#uuContent{position:absolute;left:0;bottom:0;padding:0 clamp(18px,4vw,52px) clamp(24px,5vh,52px);max-width:760px;transition:opacity .25s;pointer-events:none}
#uuContent.uu-swap{opacity:0}
#uuTitle{font-family:var(--uu-serif);font-size:clamp(30px,4.6vw,56px);line-height:1.06;margin-bottom:10px;border-left:6px solid var(--uu-cardinal-bright);padding-left:16px;color:#fff;font-weight:400;text-shadow:0 2px 18px rgba(0,0,0,.45)}
#uuTxt{font-size:clamp(15px,1.5vw,18px);font-weight:300;color:var(--uu-paper-dim);max-width:52ch;line-height:1.55;text-shadow:0 1px 10px rgba(0,0,0,.5);pointer-events:auto}
.uu-chev{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(23,17,18,.55);border:1px solid rgba(255,204,0,.5);color:var(--uu-gold);font-size:19px;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;pointer-events:auto}
.uu-chev:hover{background:rgba(77,0,0,.8)}
.uu-chev.uu-l{left:16px}
.uu-chev.uu-r{right:16px}
.uu-chev[data-hidden="true"]{opacity:0;pointer-events:none}
.uu-tap{position:absolute;top:80px;bottom:24px;width:10%;background:none;border:0;cursor:pointer;pointer-events:auto}
.uu-tap.uu-l{left:0}.uu-tap.uu-r{right:0}
.uu-tap::after{content:"";position:absolute;top:8%;bottom:8%;width:0;border-left:2px dotted rgba(250,246,239,.35);opacity:0;transition:opacity .5s}
#uuStory.uu-guides .uu-tap::after{opacity:1}
.uu-tap.uu-l::after{right:0}
.uu-tap.uu-r::after{left:0}
.uu-tap:hover{background:linear-gradient(90deg,rgba(23,17,18,.25),rgba(23,17,18,0))}
.uu-tap.uu-r:hover{background:linear-gradient(270deg,rgba(23,17,18,.25),rgba(23,17,18,0))}
#uuCoach{position:fixed;inset:0;z-index:130;background:rgba(23,17,18,.86);display:flex;align-items:center;justify-content:center;gap:8vw;opacity:0;visibility:hidden;transition:.35s;border:0;width:100%;color:var(--uu-paper)}
#uuCoach.uu-on{opacity:1;visibility:visible}
#uuCoach .uu-side{text-align:center;font-size:14.5px;font-weight:600;max-width:150px}
#uuCoach .uu-side .uu-ic{font-size:34px;display:block;margin-bottom:10px;color:var(--uu-gold)}

/* ---------- end card ---------- */
#uuEnd{position:fixed;inset:0;z-index:125;background:linear-gradient(165deg,var(--uu-cardinal-deep),var(--uu-cardinal) 70%,#ab0000);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:6px;overflow-y:auto}
#uuEnd.uu-on{display:flex}
#uuEnd::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--uu-gold),var(--uu-cardinal-bright),var(--uu-gold))}
#uuEnd .uu-k{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--uu-gold)}
#uuEnd h2{font-family:var(--uu-serif);font-size:clamp(28px,4.4vw,50px);max-width:17ch;line-height:1.12;margin:14px 0 26px;font-weight:400}
#uuNextBldg.uuNextPill{border:1.5px solid var(--uu-gold);color:#fff;font-weight:700;font-size:15px;border-radius:999px;padding:13px 26px;min-height:44px;display:inline-flex;align-items:center;gap:10px;margin-top:22px}
#uuNextBldg.uuNextPill:hover{color:var(--uu-gold)}
#uuNextBldg .uu-ar{color:var(--uu-gold);font-weight:800}
#uuEnd .uu-cta{border:2px solid var(--uu-gold);font-size:clamp(17px,1.8vw,21px);padding:18px 46px}
#uuEnd .uu-ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff;font-weight:700;font-size:15px;border-radius:999px;padding:13px 24px;min-height:44px;display:inline-flex;align-items:center;gap:10px;margin-top:12px}
#uuEnd .uu-ghost .uu-burger{font-size:17px;line-height:1;color:var(--uu-gold)}
#uuEnd .uu-ghost:hover{border-color:var(--uu-gold);color:var(--uu-gold)}
#uuEnd .uu-keep{margin-top:18px;color:var(--uu-gold);font-weight:700;font-size:14.5px;min-height:44px;letter-spacing:.04em}

/* ---------- logo, CTA pills, toolbar, hotspot toggle ---------- */
.uu-box .uu-logo{width:min(200px,52vw);height:auto;display:block;margin:0 auto clamp(16px,3vh,26px)}
.uu-brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.uu-brand img{height:30px;width:auto;display:block}
/* below the top-bar icon row: 14px pad + 16px segs block + 44px buttons + 10px gap */
.uu-links{position:absolute;top:84px;right:16px;display:flex;gap:8px;pointer-events:auto}
.uu-cta-mini.uu-cta-mini{font-size:12.5px;padding:8px 14px;min-height:36px}
.uu-tools{position:absolute;bottom:14px;right:14px;display:flex;gap:8px;pointer-events:auto}
body.uu-hs-off #container div[class~="ggskin_hotspot"]{display:none!important}
body.uu-mobile .uu-brand img{height:22px}
body.uu-mobile .uu-links{top:88px;right:10px}
/* 44px touch targets on mobile (WCAG 2.5.5 / launch-audit advisory, 2026-08-30) */
body.uu-mobile .uu-cta-mini.uu-cta-mini{font-size:12px;padding:12px 14px;min-height:44px}
body.uu-mobile .uu-tools{bottom:10px;right:10px;gap:6px}
body.uu-mobile .uu-tools .uu-iconbtn{width:44px;height:44px;font-size:16px}
body.uu-mobile #uuContent{padding-bottom:60px}

/* ---------- drawers (revisit + saved) ---------- */
#uuRevisit,#uuSaved{position:fixed;top:0;bottom:0;left:0;width:min(340px,88vw);background:var(--uu-ink);border-right:2px solid var(--uu-gold);z-index:240;transform:translateX(-102%);transition:transform .35s;display:flex;flex-direction:column;visibility:hidden}
#uuRevisit.uu-open,#uuSaved.uu-open{transform:none;visibility:visible}
#uuRevisit header,#uuSaved header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid rgba(255,204,0,.35)}
#uuRevisit header .uu-t,#uuSaved header .uu-t{font-family:var(--uu-serif);font-size:18px}
#uuRevisit ol,#uuSaved ol{list-style:none;overflow-y:auto;padding:10px 20px 24px;flex:1;counter-reset:uus}
#uuRevisit ol li,#uuSaved ol li{counter-increment:uus}
#uuRevisit ol button,#uuSaved ol button{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;padding:10px 8px;font-size:15.5px;color:var(--uu-paper);border-radius:8px;min-height:44px}
#uuRevisit ol button::before,#uuSaved ol button::before{content:counter(uus,decimal-leading-zero);font-size:11px;color:var(--uu-gold);font-weight:700}
#uuRevisit ol button:hover,#uuSaved ol button:hover{background:rgba(153,0,0,.35);color:var(--uu-gold)}
#uuScrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:235;opacity:0;visibility:hidden;transition:.3s}
#uuScrim.uu-on{opacity:1;visibility:visible}

/* ---------- confirm dialog + toast ---------- */
.uu-dialog{position:fixed;z-index:250;background:var(--uu-paper);color:var(--uu-ink);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s;display:flex;flex-direction:column;border-top:6px solid var(--uu-cardinal)}
.uu-dialog.uu-open{opacity:1;visibility:visible;transform:none}
.uu-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 20px 0}
.uu-dialog h2{font-family:var(--uu-serif);font-size:21px;margin-top:2px}
.uu-solid{background:var(--uu-cardinal);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.uu-solid:hover{background:var(--uu-cardinal-bright)}
.uu-outline{border:1.5px solid var(--uu-cardinal);color:var(--uu-cardinal);font-weight:700;font-size:14px;border-radius:999px;padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
#uuToast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);background:var(--uu-paper);color:var(--uu-ink);font-size:14px;font-weight:600;padding:12px 20px;border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:260;text-align:center;max-width:calc(100vw - 40px)}
#uuToast.uu-on{opacity:1;visibility:visible;transform:translateX(-50%)}

/* injected in-pano video hotspot (Digital Lounge YouTube Short) — exact twin of
   the skin's ht_youtube hotspots (37px circle rgb(153,0,0), 17px white play SVG,
   no border — measured from the live Media Center hotspot 2026-08-25);
   ggskin_hotspot class inherits the toggle-hide rule and the mobile zoom */
.uu-vhs.uu-vhs{width:37px;height:37px;border-radius:50%;background:rgb(153,0,0);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
.uu-vhs.uu-vhs:hover{background:rgb(175,0,0)}
.uu-vhs img{width:17px;height:17px;display:block}

.uu-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- WP hotspot popup coexistence ---------- */
body.uu-popup-open #uuStory .uu-top,
body.uu-popup-open #uuContent,
body.uu-popup-open .uu-chev,
body.uu-popup-open .uu-links,
body.uu-popup-open .uu-tools,
body.uu-popup-open .uu-tap{opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}

/* ---------- mobile ---------- */
body.uu-mobile .uu-box{padding:22px 18px;max-height:88dvh;overflow-y:auto}
body.uu-mobile .uu-buildings{flex-direction:column;gap:20px}
body.uu-mobile .uu-bldg.uu-bldg{gap:14px}
body.uu-mobile .uu-bldg .uu-photo{width:min(38vw,140px)}
body.uu-mobile .uu-pill{min-width:min(60vw,230px);font-size:14px;min-height:44px;padding:9px 20px}
body.uu-mobile .uu-chev{display:none}
body.uu-mobile .uu-tap::after{display:none}
body.uu-mobile #uuStory .uu-meta .uu-k{font-size:10px;padding:5px 10px;letter-spacing:.18em}
body.uu-mobile #uuTxt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
body.uu-mobile #uuTxt.uu-expanded{-webkit-line-clamp:unset}