/* Phone navigation, shared by every page that has the top bar from Build tools/site_nav.py
   (it writes the bottom tab bar <nav class="ptabs"> and the link to this file).
   Loaded after style.css; uses its colour tokens, so dark mode comes for free.
   - top bar stays at the top while scrolling (sticky), safe from the phone's notch
   - phones (860px and narrower): 5 bottom tabs (Home, Practice, Study, Tests, Me),
     a compact top bar (logo, one Light/Dark button, login icon, menu; all 44px tap areas),
     and the ☰ menu shows every group open. */
:root {
  --gbar-h: calc(48px + env(safe-area-inset-top, 0px));
  --tabs-h: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* top bar: sticky on every inner page; anchors and "jump to question" land below it */
.gbar { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); }
html { scroll-padding-top: calc(var(--gbar-h) + 8px); }
/* things that already stuck to the top now stick just under the bar */
.st-chips, .tabs-bar { top: var(--gbar-h); }
html.js .tside, html.js .st-side { top: calc(var(--gbar-h) + 16px); max-height: calc(100vh - var(--gbar-h) - 32px); }
/* landscape phones with a notch */
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* login button: words on big screens, a person icon on phones */
.gbar a.gl-cta .gl-ico { display: none; }

/* bottom tabs: phones only */
.ptabs { display: none; }

@media (max-width: 860px) {
  /* top bar: logo · Light/Dark · login · ☰ (bookmarks live in the Me tab and the menu) */
  .gbar .gbar-row { gap: 2px; }
  .gbar .bm-link { display: none; }
  .gbar .theme-sw { gap: 0; padding: 0; margin: 0; background: none; }
  .gbar .theme-sw button { width: 44px; height: 44px; color: rgba(255, 255, 255, .85); }
  .gbar .theme-sw button[aria-pressed="true"] { display: none; } /* one button: it switches to the other theme */
  .gbar .theme-sw button:hover { background: rgba(255, 255, 255, .1); }
  .gbar .theme-sw svg { width: 19px; height: 19px; }
  .gbar a.gl-cta { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 980px; background: none; color: #fff; }
  .gbar a.gl-cta:hover { background: rgba(255, 255, 255, .1); }
  .gbar a.gl-cta .gl-ico { display: block; width: 21px; height: 21px; }
  .gbar a.gl-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pmenu-btn { width: 44px; height: 44px; margin: 0; padding: 0 12px; }

  /* ☰ menu: every group open, so each page is one tap away */
  .pnav { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .pnav .pdd-panel { display: grid; margin: 0 0 6px; }
  .pnav .pdd-btn { padding: 18px 2px 8px; border-bottom: 0; color: rgba(255, 255, 255, .6); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
  .pnav .pdd-btn svg { display: none; }

  /* bottom tab bar */
  .ptabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; height: var(--tabs-h);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
  .ptabs a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font: 600 11.5px/1.1 var(--sys); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .ptabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .ptabs a[aria-current] { color: var(--accent); }
  .ptabs a[aria-current] svg { stroke-width: 2.3; }
  .ptabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 10px; }
  body { padding-bottom: var(--tabs-h); }
  /* the one-question Prev / Next bar and the "Saved" toast sit just above the tabs */
  .onenav { bottom: calc(var(--tabs-h) + 8px); }
  .pc-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body .float-wa { bottom: calc(var(--tabs-h) + 12px); } /* homepage WhatsApp bubble above the tabs */
  /* typing (search, OTP, question number): the keyboard needs the room, so the tabs step aside */
  body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea):focus) .ptabs { display: none; }
  body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea):focus) .onenav { bottom: 12px; }
}
@media print { .ptabs { display: none !important; } .gbar { position: static; } }