/* ---------------------------------------------------------------- top bar
   Same bar on every page, so moving between the landing, the app pages and the
   policies feels like one site. Sticky, quiet, and it carries the two global
   controls: language and theme. */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px 16px;margin:0;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);}
@supports not (backdrop-filter: blur(2px)){ .topbar{background:var(--paper);} }
.topbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:.95rem;letter-spacing:-.01em;}
.topbar .brand img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center top;}
.topbar nav{display:flex;gap:14px;margin-inline-start:6px;}
.topbar nav a{text-decoration:none;color:var(--muted);font-size:.88rem;}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--accent);}
.topbar .spacer{flex:1;}
#lang-switch{display:flex;align-items:center;gap:7px;}
.lang-label{font-size:.78rem;color:var(--muted);}
@media (max-width:520px){ .lang-label{display:none;} }
#lang-select{font:inherit;font-size:.82rem;padding:5px 8px;border-radius:9px;
  border:1px solid var(--line);background:var(--chip);color:var(--ink);max-width:42vw;}
#lang-select:hover{border-color:var(--accent);}
.bar-toggle{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--chip);color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex:0 0 auto;}
.bar-toggle svg{width:17px;height:17px;}
.bar-toggle:hover{border-color:var(--accent);color:var(--accent);}
/* the fixed corner toggle is replaced by the one in the bar */
.theme-toggle{display:none;}
[dir="rtl"] .back{transform:scaleX(-1);display:inline-block;}
[dir="rtl"] ul{padding-left:0;padding-right:20px;}

/* Narrow screens: brand + nav + a 34-language select + toggle overflow 375px and clipped the
   theme button. Let the select shrink, tighten the gaps, and drop the brand name below 430px —
   the avatar still identifies it and the link still works. */
.topbar{flex-wrap:nowrap;}
.topbar .brand{flex:0 0 auto;min-width:0;}
.topbar nav{flex:0 0 auto;}
#lang-switch{flex:1 1 auto;min-width:0;justify-content:flex-end;}
#lang-select{min-width:0;flex:0 1 auto;}
@media (max-width:430px){
  .topbar{gap:8px;padding:10px 12px;}
  .topbar .brand span{display:none;}
  #lang-select{max-width:46vw;}
}