/* App shell: page layout and the top navigation bar shared by both views.
   The bar takes its colours from whichever view is showing (body[data-view]). */
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--shell-bg);
  --shell-bg: #0e0f13;
  --nav-bg: rgba(14, 15, 19, 0.92);
  --nav-line: #1f222b;
  --nav-text: #f2f3f5;
  --nav-muted: #8b90a0;
  --nav-accent: #4ade80;
  --nav-focus: #38bdf8;
}
body[data-view="scales"] {
  --shell-bg: #211d17;
  --nav-bg: rgba(27, 23, 18, 0.94);
  --nav-line: #443b2e;
  --nav-text: #ede4d0;
  --nav-muted: #a2977f;
  --nav-accent: #f2b24c;
  --nav-focus: #ffd98a;
}

.view { flex: 1; }
.view[hidden] { display: none !important; }

.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: stretch; gap: 28px;
  height: 52px; padding: 0 24px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  backdrop-filter: blur(8px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, border-color 0.2s;
}
.nav-brand {
  align-self: center;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--nav-muted);
  white-space: nowrap;
}
.nav-tabs { display: flex; gap: 4px; }
.nav-tab {
  font: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--nav-muted);
  background: none; border: 0; cursor: pointer;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tab:hover { color: var(--nav-text); }
.nav-tab[aria-current="page"] { color: var(--nav-text); border-bottom-color: var(--nav-accent); }
.nav-tab:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: -4px; border-radius: 6px; }

@media (max-width: 560px) {
  .nav { padding: 0 8px; gap: 0; }
  .nav-brand { display: none; }
  .nav-tabs { flex: 1; }
  .nav-tab { flex: 1; padding: 0 8px; font-size: 0.9rem; }
}