/* panther-phone-nav.css - styling for the shared phone nav (phase 2 of the
   phone rebuild, PHONE_REBUILD_BRIEF.md section 4). Pairs with
   panther-phone-nav.js. One definition of the phone top bar and tab bar. */

/* Top bar: back chevron left, page name centre, nothing right.
   Wordmark only on Home. */
.ppn-top{position:sticky;top:0;z-index:40;min-height:54px;background:#1a3558;color:#fff;
  display:flex;align-items:center;gap:4px;padding:0 8px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.ppn-back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:#fff;text-decoration:none;border-radius:12px;flex-shrink:0;}
.ppn-back svg{width:26px;height:26px;}
.ppn-back:active{background:rgba(255,255,255,.12);}
.ppn-back:focus-visible{outline:3px solid #2E75B6;outline-offset:2px;}
.ppn-title{flex:1;text-align:center;font-size:1.02rem;font-weight:800;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding:0 4px;}
.ppn-spacer{width:44px;flex-shrink:0;}
.ppn-wordmark{flex:1;text-align:center;font-size:1.1rem;font-weight:800;letter-spacing:-.2px;}
.ppn-wordmark span{color:#D97706;}

/* Bottom bar: four tabs, complete list. Home / Questions / Practise / Search. */
.ppn-tabs{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:#fff;
  border:1px solid #E6EBF2;border-radius:24px;box-shadow:0 8px 26px rgba(15,30,55,.20);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;}
.ppn-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;
  min-height:52px;color:#64748B;font-size:.75rem;font-weight:800;border-radius:16px;
  text-decoration:none;}
.ppn-tab svg{width:25px;height:25px;}
.ppn-tab:active{background:#F1F5FA;}
.ppn-tab.ppn-here{color:#D97706;}
.ppn-tab:focus-visible{outline:3px solid #2E75B6;outline-offset:2px;}

/* Room for the fixed tab bar. Pages that manage their own bottom padding set
   data-pn-phone-nopad on body. */
body.ppn-pad{padding-bottom:calc(96px + env(safe-area-inset-bottom));}

/* Wired shell pages: shell chrome stays on desktop, phone nav on phones. */
@media (max-width:700px){
  body.ppn-on .pn-bar,body.ppn-on .pn-strip{display:none;}
}
@media (min-width:701px){
  body[data-pn-crumb].ppn-on .ppn-top,body[data-pn-crumb].ppn-on .ppn-tabs{display:none;}
  body[data-pn-crumb].ppn-pad{padding-bottom:0;}
}