/* SpaceEx — the grand tour's caption card and its side card, and what the
   rest of the HUD does while the tour runs. Both cards sit outside .ui so no
   HUD layout rule can move them. */

:root{--tour-w:min(420px,34vw)}

.tour{
  position:fixed;left:var(--pad);bottom:calc(24px + env(safe-area-inset-bottom));
  width:var(--tour-w);padding:20px 20px 16px;
  visibility:hidden;opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .6s var(--ease),visibility .6s;
  z-index:7;
}
.tour.open{visibility:visible;opacity:1;transform:none}

.tour-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tour-badge{font-size:10px;color:var(--accent)}
.tour-step{font-family:var(--mono);font-size:11px;color:var(--dim)}

.tour h2{font-size:clamp(26px,2.1vw,32px);line-height:1.02}
.tour p{margin-top:10px;font-size:13.6px;line-height:1.62;color:var(--ink-2)}

/* The real figure the model is compressing, set apart: it is the one line on
   the card that corrects the picture rather than describing it. */
.tour-real{
  margin-top:12px !important;padding-left:12px;
  border-left:2px solid var(--accent-line);
  font-size:12.2px !important;line-height:1.55 !important;color:var(--muted) !important;
}

.tour-bar{height:2px;margin-top:16px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.tour-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .6s var(--ease);
}

.tour-ctl{display:flex;align-items:center;gap:6px;margin-top:14px}
.tour-ctl button{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);
  transition:background .18s ease,color .18s ease;
}
.tour-ctl button:hover{background:var(--accent-soft);color:var(--ink)}
.tour-ctl svg{width:14px;height:14px}
#tourPlay .ic-play{display:none}
#tourPlay[aria-pressed="true"] .ic-pause{display:none}
#tourPlay[aria-pressed="true"] .ic-play{display:block}
.tour-exit{
  width:auto !important;border-radius:999px !important;padding:0 15px;
  margin-left:auto;font-size:12px;font-weight:500;
}

/* ── The side card: what you are looking at ──────────────────────────────── */
.tour-world{
  position:fixed;right:var(--pad);top:calc(var(--top) + 6px + env(safe-area-inset-top));
  width:clamp(280px,22vw,340px);padding:18px 18px 16px;
  visibility:hidden;opacity:0;transform:translateX(18px);
  transition:opacity .4s ease,transform .6s var(--ease),visibility .6s;
  z-index:7;
}
body.touring .tour-world{visibility:visible;opacity:1;transform:none}
.tour-world[hidden]{display:none}

.tw-head{display:flex;align-items:center;gap:13px}
.tw-swatch{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 44%),
    var(--sw,#f2c67c);
  box-shadow:inset -7px -5px 12px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.1),
    0 0 22px -4px var(--sw,#f2c67c);
}
/* A stop that is a region, not a world, has no colour of its own. */
.tour-world.is-place .tw-swatch{
  background:radial-gradient(circle at 50% 50%,rgba(242,198,124,.45),rgba(242,198,124,0) 68%);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.tw-title{min-width:0}
.tw-kicker{font-size:9.5px;color:var(--accent)}
.tour-world h3{font-family:var(--display);font-size:26px;line-height:1;margin-top:5px}
.tw-look{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:13px;line-height:1.6;color:var(--ink-2);
}
.tw-look span{
  display:block;margin-bottom:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.tw-look b{font-weight:400}
.tw-stats{
  margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  border-radius:12px;overflow:hidden;background:var(--line-soft);
  font-variant-numeric:tabular-nums;
}
.tw-stats[hidden]{display:none}
.tw-stats div{min-width:0;padding:9px 10px;background:rgba(8,10,15,.55)}
.tw-stats dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tw-stats dd{margin:4px 0 0;font-size:13px;font-weight:500;line-height:1.28}

/* Immersive mode folds the HUD away; the tour's cards must survive it. */
.immersive.touring .tour,.immersive.touring .tour-world{visibility:visible;opacity:1;transform:none}

/* ── The rest of the HUD while the tour runs ─────────────────────────────── */
/* A tour is a film: the caption and the side card carry it, and everything
   else steps back until it ends or the visitor takes over. */
.touring .panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(18px)}
.touring .dock,.touring .credit{opacity:0;visibility:hidden;pointer-events:none}
.touring .dock{transform:translate(-50%,16px)}
.cosmic .panel{opacity:0;visibility:hidden;pointer-events:none}