:root {
  --bar: #0b3d91;
  --bar-fg: #ffffff;
  --accent: #4da3ff;
  --muted: #9fb3c8;
  --bg: #0e1116;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--bar-fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Header sits in normal flow at the top, so it scrolls away with the page. */
.topbar {
  background: var(--bar);
  padding: env(safe-area-inset-top) 8px 3px;
  padding-top: calc(3px + env(safe-area-inset-top));
  display: flex;
  justify-content: center;
  gap: 6px;
}
.tab {
  /* Size each tab to its own text (no grow), but allow shrinking so a narrow
     phone row compresses to fit instead of overflowing off-screen. min-width:0
     is what permits a flex item to shrink below its content width. */
  flex: 0 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--bar-fg);
  opacity: 0.7;
  padding: 4px 8px;
  font-size: clamp(11px, 3.2vw, 15px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.tab:hover {
  opacity: 1;
}

/* Phones: tighten spacing and shrink the text further so all tabs fit the
   width without being clipped. */
@media (max-width: 480px) {
  .topbar { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .tab {
    padding: 4px 6px;
    font-size: clamp(10px, 3.4vw, 14px);
  }
}
.tab[aria-selected="true"] {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #06223f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Stage holds all iframes stacked; only the active one is shown.
   Each frame is auto-sized by app.js to its full content height so it has no
   internal scrollbar — the outer page is the only scroller, which lets the
   header scroll away as you scroll the content. min-height avoids a collapsed
   frame before JS has measured it. */
.panel {
  display: none;
  width: 100%;
  height: auto;
  min-height: 100dvh;
  border: 0;
  background: #fff;
}
.panel.active { display: block; }