/* BBYW OS · rustige bovenbalk (BBYW Design kaart 11, fase 2, 08-10) — hoort bij os-balk.js.
   Eén glazen balk, geen omrande eilanden: logo · zoekveld · statusknop · taken · bel · profiel.
   Alleen desktop (≥ 760 px); de telefoonbalk blijft zoals hij was (merk · zoeken · taken · bel · profiel). */

@media not all and (max-width: 759px) {
  /* de balk zelf: iets lager en rustiger (glas en lichtrand komen uit os-md-schil.css) */
  html[data-thema] .topbar { height: 48px; gap: 6px; padding: 0 8px 0 6px; margin-top: 8px; }
  @supports (padding: env(safe-area-inset-top)) { html[data-thema] .topbar { margin-top: max(8px, env(safe-area-inset-top)); } }

  /* links: waar je bent */
  html[data-thema] .topbar .merk { gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.012em; padding: 4px 8px 4px 4px; border-radius: 9px; }
  html[data-thema] .topbar .merk svg { width: 28px; height: 28px; }
  html[data-thema] .topbar .merk:hover { background: var(--md-fill-2, rgba(120,120,128,.08)); }

  /* midden: zoeken als een stil veld, ⌘K blijft */
  html[data-thema] .topbar .zoek {
    flex: 1 1 340px; max-width: 340px; min-width: 180px; height: 32px; margin: 0 auto; gap: 7px; padding: 0 6px 0 10px;
    border: 0; border-radius: 9px; background: var(--md-fill, rgba(120,120,128,.12)); color: var(--md-label-2, rgba(60,60,67,.62));
    transition: background .18s;
  }
  html[data-thema] .topbar .zoek:hover { border: 0; background: var(--md-fill, rgba(120,120,128,.12)); filter: brightness(.98); }
  html[data-thema] .topbar .zoek:focus-visible { box-shadow: 0 0 0 3px var(--md-tint-zacht, rgba(0,114,122,.12)); }
  html[data-thema] .topbar .zoek svg { width: 15px; height: 15px; }
  html[data-thema] .topbar .zoek .zoek-ph { font-size: 13px; color: var(--md-label-2, rgba(60,60,67,.62)); }
  html[data-thema] .topbar .zoek .kbd {
    min-width: 20px; height: 20px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 5px; font: 600 11px var(--f); color: var(--md-label-2, rgba(60,60,67,.62));
    background: var(--md-vlak-op-glas, rgba(255,255,255,.7)); box-shadow: 0 .5px 1px rgba(0,0,0,.12);
  }
  html[data-thema="avond"] .topbar .zoek .kbd { background: rgba(255,255,255,.12); box-shadow: none; }

  /* rechts: vijf dingen, zonder randen, gelijke maat en gelijke ruimte */
  html[data-thema] .topbar .rechts { gap: 2px; margin-left: 0; }
  html[data-thema] .topbar .ms-nu { display: none; }   /* vangnet: de nu-strook hoort achter de statusknop */
  html[data-thema] .topbar .rechts .ik { width: 32px; height: 32px; border-radius: 8px; color: var(--md-label, #1d1d1f); }
  html[data-thema] .topbar .rechts .ik:hover { background: var(--md-fill-2, rgba(120,120,128,.08)); }
  html[data-thema] .topbar .rechts .ik svg { width: 18px; height: 18px; stroke-width: 1.7; }
  html[data-thema] .topbar .rechts .op-zoek { display: none; }
  html[data-thema] .topbar .avatar { width: 28px; height: 28px; font-size: 12px; margin: 0 2px 0 6px; }
}

/* statusknop: één stip in de kleur van de stand, korte tekst alleen als er iets afwijkt */
.st-plek { position: relative; display: flex; flex: none; }
.st-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 32px; height: 32px; padding: 0 9px;
  border: 0; border-radius: 8px; background: none; color: var(--md-label, #1d1d1f); cursor: pointer;
  font: 500 13px var(--f); letter-spacing: -.003em; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background .18s;
}
.st-knop.st-met-tekst { padding: 0 11px 0 10px; }
.st-knop:hover, .st-knop[aria-expanded="true"] { background: var(--md-fill-2, rgba(120,120,128,.08)); }
.st-knop:focus-visible { outline: 2px solid var(--md-tint, #00727A); outline-offset: 2px; }
.st-stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--md-groen, #34C759); }
[data-st="loopt"] > .st-stip { background: var(--md-tint, #00727A); box-shadow: 0 0 0 3px var(--md-tint-zacht, rgba(0,114,122,.12)); animation: st-adem 2.4s ease-in-out infinite; }
[data-st="let"] > .st-stip { background: var(--md-oranje, #FF9500); }
[data-st="fout"] > .st-stip { background: var(--md-rood, #FF3B30); }
.st-knop[data-st="let"] { color: var(--md-oranje-tekst, #b25f00); }
.st-knop[data-st="fout"] { color: var(--md-rood-tekst, #c4271d); }
@keyframes st-adem { 50% { opacity: .45; } }

/* de oude knoppen liggen onzichtbaar óp de statusknop: zelfde plek, dus hun panelen openen eronder */
.st-bron { position: absolute; inset: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.st-bron > * { position: absolute !important; inset: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; }
@media (max-width: 759px) { .st-plek { display: none; } }

/* bel: stil stipje bij een ongelezen melding (geen getal; het "wacht op jou"-getal staat bij Gesprekken) */
.topbar .ik .bd.st-belstip { top: 6px; right: 6px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0;
  background: var(--md-tint, #00727A); box-shadow: 0 0 0 2px var(--md-vlak, #fff); }
html[data-thema="avond"] .topbar .ik .bd.st-belstip { box-shadow: 0 0 0 2px #2a2a2c; }

/* statusmenu: kop met de stand, per regel de waarde rechts; kleur alleen bij let op / fout */
.md-menu.st-menu { min-width: 260px; }
.st-menu .st-kop { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; font: 600 13px var(--md-letter, var(--f)); color: var(--md-label, #1d1d1f); }
.st-menu .md-menu-item .md-menu-sneltoets { color: var(--md-label-2, rgba(60,60,67,.62)); font-weight: 500; }
.st-menu .md-menu-item[data-st="let"] .md-menu-sneltoets { color: var(--md-oranje-tekst, #b25f00); }
.st-menu .md-menu-item[data-st="fout"] .md-menu-sneltoets { color: var(--md-rood-tekst, #c4271d); }
.st-menu .md-menu-item[data-st="loopt"] svg.md-i { color: var(--md-tint, #00727A); }
.st-menu .md-menu-item[data-st="uit"] .md-menu-sneltoets { color: var(--md-label-3, rgba(60,60,67,.3)); }

@media (prefers-reduced-motion: reduce) { [data-st="loopt"] > .st-stip { animation: none; } }

/* het menu is dik glas (C3): de schil zet backdrop-filter overal uit (os-strak.css), voor menu's weer aan */
html[data-thema] .md-menu {
  -webkit-backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(190%) !important;
  backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(190%) !important;
}
@media (prefers-reduced-transparency: reduce) { html[data-thema] .md-menu { background: var(--md-vlak, #fff); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
.st-menu .st-kop .st-stip { animation: none; }