/* SimStorm standalone shell.
 *
 * The tool pages were lifted from the Astro site, where BaseLayout supplied the
 * design tokens and a marketing nav.  Standalone they need the same tokens and a
 * tool switcher instead -- the 64px top bar the pages already budget for in
 * `height: calc(100vh - 64px); margin-top: 64px`.
 */
:root {
  --navy: #0B1D33;
  --teal: #0094BF;
  --teal-glow: #12B8E8;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a1622;
  color: #fff;
  font-family: var(--sans);
  overflow-x: hidden;
}

/* ---- tool switcher ------------------------------------------------------- */

.ss-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 1.1rem;
  background: rgba(10, 22, 34, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 148, 191, 0.3);
}

.ss-nav .ss-brand {
  font-family: var(--serif);
  font-size: 1.32rem;
  margin-right: 1.1rem;
  letter-spacing: 0.01em;
}
.ss-nav .ss-brand b { color: var(--teal); font-weight: 400; }

.ss-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.42rem 0.75rem;
  border-radius: 7px;
}
.ss-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.ss-nav a.on { color: #fff; background: var(--teal); }

@media (max-width: 700px) {
  .ss-nav { gap: 0; padding: 0 0.5rem; overflow-x: auto; }
  .ss-nav .ss-brand { margin-right: 0.5rem; font-size: 1.1rem; }
  .ss-nav a { padding: 0.4rem 0.5rem; font-size: 0.8rem; white-space: nowrap; }
}

/* MapLibre's own controls, themed to match the panels. */
.maplibregl-ctrl-group { background: rgba(10, 22, 34, 0.9); border: 1px solid rgba(0, 148, 191, 0.3); }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* The trademark mark on every logo-form "SimStorm": always white, superscript,
   regardless of the teal <b> it sits inside. */
.ss-tm { color: #fff; font-size: 0.8em; vertical-align: 0.28em; letter-spacing: 0; font-family: var(--sans); }

/* Keep the complete shared tool navigation reachable on narrow displays. */
.ss-nav { overflow-x: auto; }
.ss-nav a { flex-shrink: 0; white-space: nowrap; }

/* Shared entry point: keep both tracker panels visually identical. */
.sim-panel a.ss-explorer-panel { display:flex; flex-direction:column; gap:8px; margin:18px 0; padding:16px; border:1px solid #306071; border-radius:12px; background:linear-gradient(135deg,#123442,#102432); color:#cee3eb; font:400 14px/1.45 var(--sans); text-decoration:none; }
.sim-panel a.ss-explorer-panel strong { display:flex; justify-content:space-between; color:#f0faff; font-size:17px; }
.sim-panel a.ss-explorer-panel b { color:#61d8eb; font-size:13px; }
.sim-panel a.ss-explorer-panel:hover { border-color:#61d8eb; background:#163b49; }
.sim-panel a.ss-explorer-panel:focus-visible { outline:3px solid #61d8eb; outline-offset:3px; }

.ss-nav a[href="/tools.html"] { margin-left: auto; }