/* SpaceEx — the responsive tiers. Loads after every sheet it overrides.

   One layout idea on every screen: the scene is the page, full-bleed and never
   scrolled; the interface floats over it. On a laptop that means corners — the
   story top-left, the facts top-right, the dock along the bottom. On a phone it
   means a stack along the bottom edge — tools, then the rail, then a fact card
   that opens on a tap — with the scene in the clear space above it. */

/* ═════════ Tablet, narrow laptop ════════════════════════════════════════ */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .search-trigger{width:auto;flex:1 1 auto;max-width:320px;margin-left:auto}
  .burger{margin-left:0}
  .hero{width:min(440px,46vw)}
  .panel{width:clamp(290px,34vw,340px)}
  .sheet{width:min(460px,calc(100vw - 2*var(--pad)))}
}

/* ═════════ Short laptop screens ════════════════════════════════════════ */
/* Under about 820px tall the hero's paragraph pushes its buttons down into the
   dock, so the paragraph goes and the headline steps down a size. */
@media (min-width:721px) and (max-height:820px){
  .hero{top:calc(var(--top) + 16px)}
  .hero p{display:none}
  .hero h1{font-size:clamp(36px,4vw,56px)}
  .hero-facts{margin-top:18px}
  .hero-cta{margin-top:20px}
  .dock{bottom:calc(66px + env(safe-area-inset-bottom))}
  .panel{max-height:calc(100svh - var(--top) - 190px)}
}

/* ═════════ Phone (portrait), and any narrow window ══════════════════════ */
@media (max-width:720px){
  :root{--top:62px;--pad:14px;--tools-h:52px;--tour-w:auto}
  .topbar{gap:10px;padding-top:calc(12px + env(safe-area-inset-top))}
  .brand-glyph{width:30px;height:30px;flex:0 0 30px}
  .brand-name{font-size:16.5px}
  .brand-sub{display:none}
  .search-trigger{flex:0 0 42px;width:42px;height:42px;padding:0;justify-content:center;margin-left:auto;
    background:rgba(12,14,20,.55);box-shadow:inset 0 0 0 1px var(--line)}
  .search-trigger svg{width:17px;height:17px}
  .search-trigger .st-text,.search-trigger kbd{display:none}
  .menu-panel{left:var(--pad);right:var(--pad);width:auto;top:calc(var(--top) + env(safe-area-inset-top))}

  .hero{left:var(--pad);right:var(--pad);width:auto;top:calc(var(--top) + 18px + env(safe-area-inset-top))}
  .eyebrow{font-size:9.5px;margin-bottom:12px}
  .hero h1{font-size:clamp(34px,10.4vw,46px)}
  .hero p{display:none}
  /* Before the first choice the hero holds the stage; the fact card waits. */
  body:not(.explored) .panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
  .hero-facts{margin-top:18px;padding-top:13px}
  .hero-facts li{padding:0 12px}
  .hero-facts b{font-size:16px}
  .hero-facts span{font-size:10.5px}
  .hero-cta{margin-top:20px}
  .hero-cta .btn{flex:1 1 0;padding:0 14px}

  /* The bottom stack, from the edge up: tools, the dock, the fact card. */
  .tools{
    left:var(--pad);right:var(--pad);bottom:calc(10px + env(safe-area-inset-bottom));
    height:var(--tools-h);justify-content:space-between;border-radius:18px;padding:5px 6px;
    overflow-x:auto;scrollbar-width:none;
  }
  .tools::-webkit-scrollbar{display:none}
  .tool{width:34px;height:40px;flex:0 0 auto}
  .time{padding-right:3px;margin-right:1px}
  .tool.speed{min-width:36px;padding:0 4px}
  .credit{display:none}

  .dock{left:var(--pad);right:var(--pad);width:auto;transform:none;
    bottom:calc(var(--tools-h) + 18px + env(safe-area-inset-bottom));gap:8px;align-items:stretch}
  .touring .dock,.scaled .dock{transform:translateY(16px)}
  .immersive .dock{transform:translateY(24px)}
  .cats{align-self:flex-start;max-width:100%}
  .cats button{height:28px;padding:0 11px;font-size:11.5px}
  .cats .lg{display:none}
  .cats .sm{display:inline}
  .rail{padding:6px 6px;border-radius:18px}
  .world{min-width:58px;padding:6px 5px 5px;gap:6px}
  .world-label{font-size:10.5px}

  /* The fact card: a header you can always see, and the rest one tap away. */
  .panel{
    left:var(--pad);right:var(--pad);top:auto;width:auto;
    bottom:calc(var(--tools-h) + 140px + env(safe-area-inset-bottom));
    max-height:calc(100svh - var(--top) - var(--tools-h) - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:12px 12px 12px 14px;border-radius:18px;
  }
  .panel-head{cursor:pointer}
  .panel-swatch{width:38px;height:38px;flex:0 0 38px}
  .panel h2{font-size:26px;margin-top:3px}
  .panel-tag{display:none}
  .panel-more{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
    background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);
    transition:transform .3s var(--ease),background .2s ease;
  }
  .panel-more svg{width:15px;height:15px}
  .panel-open .panel-more{transform:rotate(180deg);background:var(--accent-soft)}
  .panel-body{display:none}
  .panel-open .panel-body{display:block;animation:fade-in .3s ease}
  .panel-open .panel-tag{display:block}
  .panel-lede{font-size:13.5px;margin-top:12px}
  /* A world opened up is the thing being read; the rail and hero step back. */
  .panel-open .hero{opacity:0;visibility:hidden}

  .sheet{
    left:0;right:0;top:auto;bottom:0;width:auto;
    max-height:88svh;border-radius:24px 24px 0 0;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(24px);
  }
  .sheet.open{transform:none}
  .sheet h2{font-size:30px}
  .sheet-open .dock,.sheet-open .tools{opacity:0;visibility:hidden;pointer-events:none}
  .toast{top:calc(var(--top) + 8px + env(safe-area-inset-top))}

  /* Tour on a phone: both cards stack in one fixed column at the bottom — two
     separately fixed cards cannot know each other's height. */
  .tour-dock{
    position:fixed;left:10px;right:10px;z-index:7;
    bottom:calc(10px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:8px;
    max-height:calc(100svh - var(--top) - 30px - env(safe-area-inset-top));
    pointer-events:none;           /* an empty stack must not swallow taps */
  }
  .tour-dock > *{pointer-events:auto}
  .tour{position:static;width:auto;padding:14px 15px 12px;overflow-y:auto;flex:0 1 auto}
  .tour-world{position:static;width:auto;padding:11px 14px;flex:0 0 auto;transform:translateY(10px);cursor:pointer}
  body.touring .tour-world{transform:none}
  .tour-world h3{font-size:21px;margin-top:3px}
  .tw-swatch{width:28px;height:28px;flex:0 0 28px}
  .tour-world:not(.is-open) .tw-look{display:none}
  .tw-look{margin-top:10px;padding-top:9px;font-size:12.5px;line-height:1.5}
  .tw-head::after{
    content:'What am I seeing?';margin-left:auto;align-self:center;
    font-size:10.5px;font-weight:600;color:var(--accent);white-space:nowrap;
  }
  .tour-world.is-open .tw-head::after{content:'Hide'}
  .tw-stats{margin-top:9px}
  .tw-stats div:nth-child(n+3){display:none}
  .tour-head{margin-bottom:7px}
  .tour h2{font-size:23px}
  .tour p{font-size:13px;line-height:1.52;margin-top:7px}
  .tour-real{font-size:11.8px !important;margin-top:8px !important}
  .tour-bar{margin-top:11px}
  .tour-ctl{margin-top:10px}
  .touring .tools{opacity:0;visibility:hidden;pointer-events:none}

  .scale{left:10px;right:10px;width:auto;
    bottom:calc(var(--tools-h) + 18px + env(safe-area-inset-bottom));
    max-height:58svh;overflow-y:auto;padding:15px 16px 13px}
  .scale h3{font-size:24px}
  .scale-look{font-size:13px}
  .scale-real{font-size:11.8px}
  .scale-tick{font-size:9px}
}

/* ═════════ Very short screens: landscape phones ═════════════════════════ */
@media (max-height:520px) and (orientation:landscape){
  :root{--top:56px;--tools-h:44px}
  .topbar{padding-top:10px}
  .brand-sub{display:none}
  .hero{top:calc(var(--top) + 6px);width:min(360px,44vw)}
  .hero p,.hero-facts,.eyebrow{display:none}
  .hero h1{font-size:clamp(26px,4.4vw,36px)}
  .hero-cta{margin-top:14px}
  .btn{height:40px}
  .panel{top:calc(var(--top) + 4px);bottom:auto;left:auto;right:var(--pad);width:min(320px,40vw);
    max-height:calc(100svh - var(--top) - 70px);padding:12px 14px}
  .panel-more{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
    background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
  .panel-more svg{width:14px;height:14px}
  .panel-head{cursor:pointer}
  .panel-body{display:none}
  .panel-open .panel-body{display:block}
  .panel-swatch{width:32px;height:32px;flex:0 0 32px}
  .panel h2{font-size:22px}
  .panel-tag{display:none}
  .dock{bottom:8px;left:var(--pad);right:auto;width:max(280px,calc(100vw - 2*var(--pad) - 440px));transform:none;align-items:flex-start;gap:6px}
  .touring .dock,.scaled .dock{transform:translateY(16px)}
  .cats button{height:24px;padding:0 10px;font-size:10.5px}
  .cats .lg{display:none}
  .cats .sm{display:inline}
  .rail{padding:4px 6px}
  .world{min-width:52px;padding:4px 4px 3px;gap:4px}
  .world-dot{--d:18px !important}
  .world-label{font-size:10px}
  .tools{right:var(--pad);left:auto;bottom:8px;height:auto;padding:4px;border-radius:999px;overflow:visible}
  .tool{width:34px;height:34px}
  .credit{display:none}
  .sheet{top:8px;bottom:8px;max-height:none;border-radius:20px;right:8px;left:auto;width:min(460px,60vw)}
  .tour,.scale{bottom:8px;width:min(400px,46vw);padding:12px 14px 10px}
  .tour p{font-size:12px;line-height:1.5}
  .tour-real,.scale-real{display:none}
  .tour-world{top:calc(var(--top) + 4px);width:min(300px,34vw);padding:11px 13px}
  .tw-look,.tw-stats{display:none}
  .touring .tools{opacity:0;visibility:hidden}
}

/* ── Entrance pre-state (removed once the entrance timeline finishes) ────── */
html.intro .hero h1 .ln > span{transform:translateY(1.1em);display:inline-block}
html.intro .eyebrow,
html.intro .hero p,
html.intro .hero-facts,
html.intro .hero-cta,
html.intro .brand,
html.intro .search-trigger,
html.intro .nav,
html.intro .burger,
html.intro .panel,
html.intro .cats,
html.intro .world,
html.intro .tools,
html.intro .credit{opacity:0}

/* ── Motion preferences ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .loader-ring{animation:none;border-top-color:var(--accent)}
  .loader-logo{animation:none}
}