/* Explorer styles. Colours, fonts, header and footer come from the shared InterImm kit (https://interimm.org/kit/interimm.css). */
:root{--warn:#b26a00}
@media (prefers-color-scheme:dark){:root{--warn:#ffcf70}}

.explorer{position:relative;height:max(34rem,calc(100dvh - var(--hh,4.75rem)));overflow:hidden;background:#d9a07a}
#view{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud,#dock,#facilities,#walk-help{z-index:2}
kbd{display:inline-block;min-width:1.6em;padding:0 .4em;margin:0 .1em;text-align:center;background:var(--bg-alt);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius);font:.8em var(--font-mono)}
/* Paper-and-ink panels, as in the kit: solid surface, thin rule, small radius, no glass. */
.glass,#dock,#facilities,#walk-help,.cityhud,.modes{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}

/* top bar inside the viewport */
#hud{position:absolute;top:.75rem;left:.75rem;right:.75rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;pointer-events:none}
#hud>*{pointer-events:auto}
.cityhud{display:flex;align-items:center;gap:.6rem;padding:.35rem .9rem;border-radius:var(--radius);flex-wrap:wrap}
.cityhud b{font-family:var(--font-display);font-size:1.1rem;font-weight:500}
.cityhud small{color:var(--muted);font-size:.8rem}
.cityhud select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.15rem .4rem;font:inherit}
.modes{display:flex;gap:.25rem;padding:.25rem;border-radius:var(--radius)}
.modes .btn{padding:.3rem .95rem;border-color:transparent;background:transparent;cursor:pointer}
.modes .btn:hover{border-color:var(--link)}
.modes .btn.on{background:var(--text);border-color:var(--text);color:var(--bg)}

/* sun dock */
#dock{position:absolute;left:.75rem;bottom:.75rem;width:min(21rem,calc(100% - 1.5rem));padding:.7rem 1rem .6rem;border-radius:var(--radius)}
label{display:block;margin:.35rem 0;color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
label output{float:right;color:var(--link);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-family:var(--font-mono);font-size:.82rem;font-weight:500}
input[type=range]{width:100%;accent-color:var(--accent);margin:.2rem 0 0}
.note{color:var(--muted);font-size:.8rem;line-height:1.5;margin:.4rem 0 0}


/* open facilities */
#facilities{position:absolute;right:.75rem;top:3.9rem;bottom:.75rem;width:21rem;max-width:calc(100% - 1.5rem);overflow:auto;padding:1rem;border-radius:var(--radius)}
#facilities h2{margin:0 0 .25rem;font-size:1.3rem;font-weight:500}
.fac{margin-top:.7rem;padding:.7rem .8rem;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border)}
.fac header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.fac h3{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:500;line-height:1.3}
.chip{flex:none;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .45rem;border-radius:var(--radius);border:1px solid currentColor}
.st-operating{color:#1f9d6b}.st-reduced{color:#c28400}.st-maintenance{color:#3d7bff}.st-offline{color:#d64545}
@media (prefers-color-scheme:dark){.st-operating{color:#4fd59d}.st-reduced{color:#f2b84b}.st-maintenance{color:#7aa7ff}.st-offline{color:#ff7a7a}}
.kpi{display:grid;grid-template-columns:1fr auto;column-gap:.5rem;padding:.35rem 0;border-top:1px solid var(--border)}
.kpi:first-child{border-top:0}
.kk{color:var(--muted);font-size:.8rem}
.kk small{margin-left:.35rem;font-size:.7rem;opacity:.8}
.kv{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.kv small{font-weight:500;color:var(--muted)}
.fl{display:inline-block;margin-top:.4rem;font-size:.85rem;color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.2em}
.fl:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* walk hint */
#walk-help{position:absolute;left:50%;top:4rem;transform:translateX(-50%);margin:0;padding:.4rem .9rem;border-radius:var(--radius);font-size:.85rem;max-width:calc(100% - 1.5rem);text-align:center}

/* intro card */
#intro{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:1rem;overflow:auto;background:rgb(20 20 24 / .55);transition:opacity .4s}
#intro.gone{opacity:0;pointer-events:none}
.intro-card{max-width:34rem;padding:1.75rem 1.9rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text)}
.eyebrow{margin:0 0 .5rem;color:var(--accent);font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.intro-card h1{margin:0;font-weight:500;font-size:clamp(2rem,1.2rem + 3vw,2.9rem);line-height:1.1}
.intro-card .lede{margin:.3rem 0 1rem;font-size:1.2rem;color:var(--muted)}
.intro-card ul{padding-left:1.2rem;margin:.6rem 0}
.intro-card li{margin:.2rem 0}
.intro-card .fine{color:var(--muted);font-size:.82rem;line-height:1.55}
#enter{margin-top:.5rem;width:100%}
#enter:disabled{opacity:.6;cursor:progress}

canvas#view{touch-action:none;-webkit-tap-highlight-color:transparent}
#orbit-hint,#joy,#jump,#tabs{display:none}

/* ---------- phones and touch ---------- */
@media (max-width:760px){
  .explorer{height:calc(100dvh - var(--hh,3.5rem));min-height:26rem}
  /* compact one-row kit header on phones: logo, name and menu button inline, no tagline */
  .site-header .header-inner{flex-wrap:nowrap;gap:.5rem;min-height:0;padding-block:.5rem}
  .site-header .brand{min-width:0;flex:1}
  .site-header .brand-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-header .brand-sub{display:none}
  .site-header .brand-mark{width:1.75rem;height:1.75rem}
  .site-header .nav-toggle{flex:none}
  /* touch walking uses the whole screen: the header steps aside until you return to orbit */
  body:has(.explorer.walking.touch) .site-header{display:none}
  body:has(.explorer.walking.touch) .explorer{height:100dvh}
  #hud{top:.5rem;left:.5rem;right:.5rem;flex-direction:row;align-items:center;gap:.4rem}
  .cityhud{padding:.2rem .6rem;min-width:0;flex:1;flex-wrap:nowrap}
  .cityhud b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cityhud small,#btn-info{display:none}
  .cityhud select{max-width:9rem;min-height:2.25rem}
  .modes{flex:none}
  .modes .btn{min-height:2.5rem;padding:.25rem .9rem}

  /* the sun controls become a bottom sheet opened from the tab bar */
  #dock{display:none;left:.5rem;right:.5rem;width:auto;max-width:none;top:auto;bottom:3.6rem;height:auto;max-height:40%;border-radius:var(--radius);overflow:auto;z-index:3}
  #facilities{display:none;left:.5rem;right:.5rem;width:auto;max-width:none;top:auto;bottom:3.6rem;height:auto;max-height:46%;border-radius:var(--radius);overflow:auto;padding:.8rem;z-index:3}
  #facilities h2{font-size:1rem}
  .explorer.show-dock #dock,.explorer.show-facilities #facilities{display:block}
  #dock{padding:.7rem 1rem .6rem}
  input[type=range]{height:2.25rem}
  input[type=range]::-webkit-slider-thumb{width:1.5rem;height:1.5rem}

  #tabs{display:flex;position:absolute;left:.5rem;right:.5rem;bottom:.5rem;gap:.25rem;padding:.25rem;border-radius:var(--radius);z-index:4;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
  #tabs button{flex:1;min-height:2.6rem;border:0;border-radius:var(--radius);background:transparent;color:var(--text);font:inherit;font-weight:500;cursor:pointer}
  #tabs button[aria-pressed=true]{background:var(--text);color:var(--bg)}

  #orbit-hint{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:4.3rem;margin:0;padding:.35rem .8rem;border-radius:var(--radius);font-size:.8rem;text-align:center;background:var(--surface);border:1px solid var(--border);max-width:calc(100% - 1rem);pointer-events:none;z-index:2;transition:opacity .6s}
  #orbit-hint.gone{opacity:0}
  .explorer.walking #orbit-hint{display:none}

  #walk-help{top:3.4rem;bottom:auto;font-size:.8rem}
  .explorer.walking.touch #joy,.explorer.walking.touch #jump{display:block}
  #joy{position:absolute;left:1.2rem;bottom:5rem;width:7.5rem;height:7.5rem;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong);opacity:.9;touch-action:none;z-index:3}
  #knob{position:absolute;left:50%;top:50%;width:3.2rem;height:3.2rem;margin:-1.6rem 0 0 -1.6rem;border-radius:50%;background:var(--accent);opacity:.9}
  #jump{position:absolute;right:1.2rem;bottom:5.6rem;width:4.6rem;height:4.6rem;border-radius:50%;padding:0;background:var(--accent);color:var(--accent-text);border:0;font-weight:700;z-index:3}

  /* intro: compact, scrolls, button always reachable */
  #intro{padding:.5rem;place-items:start center}
  .intro-card{padding:1.1rem 1.1rem .8rem;max-height:100%;overflow:auto}
  .intro-card h1{font-size:1.8rem}
  .intro-card .lede{font-size:1.05rem;margin-bottom:.6rem}
  .intro-card ul{margin:.4rem 0;padding-left:1.1rem}
  .intro-card .fine{font-size:.75rem}
  #enter{position:sticky;bottom:0;min-height:3rem}
}

#live{margin:0 0 .5rem;padding:.3rem .8rem;font-size:.85rem}
#live.on{background:var(--text);border-color:var(--text);color:var(--bg)}
#live:not(.on){opacity:.75}