/* layout/topbar.css — the shared page header: brand block, logo, language picker and header controls.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- top bar (shared: planner, admin, guide keep this) ---- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 20px 0;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
/* The mark and the wordmark live in components/brand.css (#147). */
.sub{font-size:12.5px;color:var(--dim)}

/* ---- language picker ---- */
.langpick{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:4px 8px;font-size:12px;font-family:inherit;cursor:pointer;
}
.langpick:hover{border-color:var(--accent)}
/* ---- header controls: language and account ---- */
.headctl{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
#acctBtn{white-space:nowrap}
#acctBtn.in{border-color:var(--good);color:var(--good)}

/* ---- account panel ---- */
@media(max-width:640px){
  .headctl{width:100%;margin:8px 0 0;order:3}
  .brand{flex-wrap:wrap}
}