/*
 * Shared site bar: brand + subject tabs. Used by the landing page and by both
 * lesson pages in /lessons, so every class is prefixed `ub-` to stay clear of
 * the lessons' own styles. It scrolls away on purpose — each lesson has its
 * own sticky header underneath.
 */
.ub-bar {
  --ub-bg: #14202d;
  --ub-ink: #f2f6fa;
  --ub-muted: #a7b4c2;
  --ub-tab: rgba(255, 255, 255, 0.08);
  --ub-tab-on: #ffffff;
  --ub-tab-on-ink: #14202d;
  --ub-free: #3dcb8d;
  background: var(--ub-bg);
  color: var(--ub-ink);
  font: 600 15px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  .ub-bar {
    --ub-bg: #070b10;
    --ub-tab: rgba(255, 255, 255, 0.07);
  }
}
.ub-bar *, .ub-bar *::before, .ub-bar *::after { box-sizing: border-box; }
.ub-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.ub-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.ub-brand img { display: block; width: 26px; height: 26px; }
.ub-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--ub-tab);
}
.ub-tabs a {
  color: var(--ub-muted);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.ub-tabs a:hover { color: var(--ub-ink); }
.ub-tabs a[aria-current='page'] { background: var(--ub-tab-on); color: var(--ub-tab-on-ink); }
.ub-free {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ub-muted);
}
.ub-free::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ub-free);
}
.ub-bar a:focus-visible { outline: 3px solid var(--ub-free); outline-offset: 2px; }
@media (max-width: 520px) {
  .ub-free { display: none; }
  .ub-tabs { margin-left: auto; }
  .ub-tabs a { padding: 7px 13px; }
}