/* SpaceEx — the zoom-out ladder's card, and what the rest of the HUD does
   while you are up it. It takes the tour caption's corner: the two are never
   on screen together (climbing stops the tour, touring drops the ladder). */

.scale{
  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;
}
body.scaled .scale{visibility:visible;opacity:1;transform:none}

.scale-kicker{font-size:10px;color:var(--accent)}
.scale h3{font-family:var(--display);font-size:clamp(26px,2.1vw,32px);line-height:1.02;margin-top:8px}
.scale-look{margin-top:12px;font-size:13.6px;line-height:1.62;color:var(--ink-2)}
.scale-look span{
  display:block;margin-bottom:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.scale-look b{font-weight:400}
/* The line that owns up to what this rung is compressing. */
.scale-real{
  margin-top:12px;padding-left:12px;border-left:2px solid var(--accent-line);
  font-size:12.2px;line-height:1.55;color:var(--muted);
}

/* ── The ladder: every rung clickable ────────────────────────────────────── */
.scale-rungs{
  position:relative;display:flex;justify-content:space-between;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);
}
.scale-rungs::before{
  content:'';position:absolute;left:7px;right:7px;top:22px;height:1px;background:var(--line);
}
.scale-rung{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  flex:1 1 0;min-width:0;padding:0 1px}
.scale-pip{
  width:9px;height:9px;border-radius:50%;background:#0b0d13;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.scale-rung:hover .scale-pip{box-shadow:inset 0 0 0 1.5px var(--accent)}
.scale-rung[aria-current="true"] .scale-pip{
  background:var(--accent);box-shadow:0 0 0 1px var(--accent-line),0 0 14px -1px var(--accent);transform:scale(1.2);
}
.scale-tick{font-size:9.5px;line-height:1.25;text-align:center;color:var(--dim);transition:color .22s ease}
.scale-rung:hover .scale-tick{color:var(--muted)}
.scale-rung[aria-current="true"] .scale-tick{color:var(--ink);font-weight:500}

#zoomOut.is-in{color:var(--accent);background:var(--accent-soft)}

/* ── The rest of the HUD while you are out there ─────────────────────────── */
.scaled .panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(18px)}
.scaled .dock,.scaled .credit{opacity:0;visibility:hidden;pointer-events:none}
.scaled .dock{transform:translate(-50%,16px)}
.immersive.scaled .scale{visibility:visible;opacity:1;transform:none}