/**
 * Shared site topbar — course / map / studio / learn.
 * Brand + section nav (left) · My Progress + Profile + theme (right).
 */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab,var(--color-bg) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.05);
  border-bottom:1px solid color-mix(in oklab,var(--color-divider) 85%, transparent);
}
.topbar-inner{
  max-width:1280px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 1.1rem;flex-wrap:nowrap;
}
.topbar .brand{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:inherit;text-decoration:none;min-width:0;
}
.topbar .brand span{white-space:nowrap}
.topbar .brand svg{width:1.55rem;height:1.55rem;color:var(--color-primary);flex:0 0 auto}
.topbar-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;min-width:0}
.topbar-nav a{
  font-size:var(--text-sm, .9rem);font-weight:650;color:var(--color-text-muted);text-decoration:none;
}
.topbar-nav a:hover{color:var(--color-primary)}
.topbar-nav a[aria-current="page"]{
  color:var(--color-primary);font-weight:750;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;
}
.topbar-controls{
  display:flex;align-items:center;gap:.55rem;margin-left:auto;flex-wrap:nowrap;flex:0 0 auto;
}
.topbar-controls .nav-progress{
  font-size:var(--text-sm, .9rem);font-weight:700;color:var(--color-text);
  text-decoration:none;white-space:nowrap;
  padding:.35rem .75rem;border-radius:999px;
  border:1px solid color-mix(in oklab,var(--color-primary) 40%, var(--color-divider));
  background:color-mix(in oklab,var(--color-primary) 12%, var(--color-surface));
}
.topbar-controls .nav-progress:hover{
  border-color:var(--color-primary);color:var(--color-primary);
}
.topbar-controls .nav-progress[aria-current="page"]{
  background:var(--color-primary);color:var(--color-text-inverse, #0d1424);border-color:transparent;
}
.topbar-controls #admin-graph-link{
  font-size:var(--text-sm, .9rem);font-weight:650;color:var(--color-text-muted);text-decoration:none;white-space:nowrap;
}
.topbar-controls #admin-graph-link:hover{color:var(--color-primary)}
.topbar .theme-toggle{
  display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--color-divider);
  border-radius:var(--radius-full, 999px);background:color-mix(in oklab,var(--color-surface) 92%, transparent);
  cursor:pointer;color:var(--color-text);flex:0 0 auto;
}
.topbar .theme-toggle:hover{
  border-color:color-mix(in oklab,var(--color-primary) 35%, var(--color-divider));
}
@media (max-width:720px){
  .topbar-nav a[data-lang-href="/learn"]{display:none}
}
@media (max-width:520px){
  .topbar .brand span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
  }
  .topbar-nav a[data-lang-href="/studio"]{display:none}
  .topbar .ll-profile-trigger-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
  }
  .topbar .ll-profile-trigger{padding:.2rem;min-width:40px;justify-content:center}
  .topbar-controls .nav-progress{padding:.3rem .6rem;font-size:.78rem}
}