/* TheAIDuo brand skin for the walkthrough.
   Loaded AFTER tour.css. theme.css is deliberately not loaded: it also carries base
   body/img/button/h1/h2 rules that would overwrite the site shell.

   The tour and the site happen to share --bg, --line, --text and --maxw, and the site's
   values already suit the tour, so those are inherited rather than redefined. Only the
   tokens the site has no equivalent for are set here. */
#app{
  --mat:var(--bg2);              /* surround the framed photo sits on */
  --surface:var(--card);
  --surface-2:var(--card2);
  --muted:var(--text-mute);
  --accent:var(--pink);          /* hotspots, active map room, CTA */
  --on-accent:#fff;
  --font:'Instrument Sans',sans-serif;
  --serif:'Bricolage Grotesque',sans-serif;
  --tap:44px;
}

/* styles.css sets section{padding:100px 0}, which would pad the tour's own sections.
   Reset the three the tour owns. */
#app .t-stage{padding:0}
#app .t-facts{padding:0 0 6px}
#app .gallery{padding:0}

/* styles.css also styles bare h1/h2 (clamp sizing, 20ch max-width). Scope the tour's. */
#app .t-facts h2#prop-name{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1;
  max-width:none;margin:0;color:var(--text);
}
#app .gallery h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;
  max-width:none;margin:0 0 22px;
}

/* Frame: keep tour.css's sizing maths untouched, only restyle the surround. */
#app .viewer{border-radius:var(--radius);overflow:hidden}
#app .frame{border-color:var(--line)}

/* Pills and buttons in brand shape */
#app .t-pill{border-radius:999px;border-color:var(--line);background:rgba(11,10,14,.72);
  backdrop-filter:blur(8px);font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase}
#app .t-pill:hover{border-color:var(--pink);color:var(--text)}
#app .t-btn{font-family:'Instrument Sans',sans-serif;font-weight:600;letter-spacing:0;
  text-transform:none;font-size:15px}
#app .t-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px rgba(255,45,120,.55)}

/* Facts list matches the site's card language */
#app .facts-list li{background:var(--card);border-color:var(--line);border-radius:12px}
#app .t-facts .loc{color:var(--text-mute);font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}

#app .t-menu{background:var(--card);border-color:var(--line)}
#app .grid img{border-radius:10px}

/* The source pill hardcodes min-height:38px while the rest of the tour uses the
   44px --tap target. Raise it only where the pointer is coarse, so the desktop
   controls keep their tighter proportions. */
@media (pointer:coarse), (max-width:760px){
  #app .t-pill{min-height:var(--tap);padding:0 18px}
}