/* EN | TL language switch (injected into every Parent / BHW / BNS page by app.py) */
.lang-switch { display: inline-flex; margin: 0 12px 0 0; padding: 3px; gap: 2px; background: #fff; border: 1.5px solid #bbf7d0; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.06); flex-shrink: 0; }
.lang-switch button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #166534; font-size: 1rem; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.lang-switch button:hover { background: #f0fdf4; }
.lang-switch button.on { background: #16a34a; color: #fff; }
.lang-switch button:focus-visible { outline: 3px solid #86efac; outline-offset: 1px; }
/* Topbar has 3 children (brand, switch, user pill): let the brand take the free space so the switch sits beside the user pill, not centred */
.bhw-topbar > .brand, .bns-topbar > .brand { flex: 1 1 auto; min-width: 0; }
.lang-floating { position: fixed; top: 14px; right: 14px; z-index: 1000; margin: 0; }
@media (max-width: 640px) { .lang-switch { margin-right: 8px; } .lang-switch button { min-width: 44px; padding: 0 8px; } }
@media (max-width: 420px) {
  .lang-switch { margin-right: 6px; padding: 2px; }
  .lang-switch button { min-width: 44px; min-height: 44px; padding: 0 6px; font-size: .95rem; }   /* 44 px tap target even at 320 px; the topbar below wraps */
  .bns-topbar, .bhw-topbar { flex-wrap: wrap; row-gap: 8px; }   /* long Tagalog title + switch + user pill must not collide at 320 px */
  .bns-topbar .brand, .bhw-topbar .brand { min-width: 0; gap: 8px; }
  .bns-topbar .brand-title, .bhw-topbar .brand-title { overflow-wrap: anywhere; }
}