/* The one navigation: a left rail on desktop, a five-item bar on a phone.
   Shared by the app and by Campaigns, so every screen sits in the same frame. */
:root{--pmx-rail:224px;--pmx-navy:#1A203D;--pmx-navy-2:#262d52;--pmx-pink:#DB0072}
.pmx-rail{position:fixed;left:0;top:0;bottom:0;width:var(--pmx-rail);background:var(--pmx-navy);color:#fff;padding:1.1rem .75rem 1rem;display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;z-index:40;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.3}
.pmx-brand{display:block;text-decoration:none;margin:.1rem .45rem 1.3rem}.pmx-brand img{display:block;width:150px;height:auto}
.pmx-ni{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:11px;color:#c3c9e4;font-weight:600;font-size:.9rem;text-decoration:none;min-height:42px}
.pmx-ni:hover{background:var(--pmx-navy-2);color:#fff}
.pmx-ni.on{background:var(--pmx-pink);color:#fff}
.pmx-ni span{flex:1}
.pmx-ic{width:20px;height:20px;flex:0 0 20px}
.pmx-badge{background:#fff;color:var(--pmx-navy);font-size:.68rem;font-weight:800;border-radius:999px;min-width:20px;padding:1px 6px;text-align:center;line-height:1.6;font-style:normal}
.pmx-ni:not(.on) .pmx-badge{background:var(--pmx-pink);color:#fff}
.pmx-gap{height:.9rem}.pmx-fill{flex:1}
.pmx-who{font-size:.72rem;color:#8f97bd;padding:0 .7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmx-bar{display:none}
@media (max-width:899px){
  .pmx-rail{display:none}
  .pmx-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid #dfe2ec;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif}
  .pmx-bi{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border-radius:12px;color:#636a85;font-size:.66rem;font-weight:600;text-decoration:none;min-width:0}
  .pmx-bi.on{color:var(--pmx-pink)}
  .pmx-bic{position:relative;display:block;height:22px}
  .pmx-bic .pmx-ic{width:22px;height:22px}
  .pmx-bic .pmx-badge{position:absolute;top:-5px;left:14px;background:var(--pmx-pink);color:#fff;box-shadow:0 0 0 2px #fff;font-size:.6rem;min-width:17px;padding:0 4px}
}
/* a row of section links under a page heading (used by Campaigns) */
.pmx-sub{display:flex;gap:.4rem;overflow-x:auto;padding:2px 0 6px;margin:0 0 .6rem;scrollbar-width:none}
.pmx-sub::-webkit-scrollbar{display:none}
.pmx-sub a{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;border:1px solid #dfe2ec;background:#fff;border-radius:999px;padding:.38rem .95rem;font-weight:600;font-size:.84rem;color:#1A203D;text-decoration:none;white-space:nowrap}
.pmx-sub a.on{background:#1A203D;border-color:#1A203D;color:#fff}
.pmx-sub a b{background:#DB0072;color:#fff;border-radius:999px;font-size:.66rem;padding:0 6px;line-height:1.7;font-weight:800}
/* Added to a phone's home screen the page runs under the clock and the Dynamic Island: keep the
   content clear of them, and put a solid strip there so nothing shows through while scrolling. */
@media (max-width:899px){
  /* iOS lays a home-screen app out one status bar short, which leaves the bottom menu floating above a gap.
     Making the page that much taller puts the menu on the bottom edge, where it stays. */
  html{min-height:calc(100% + env(safe-area-inset-top,0px))}
  body{padding-top:env(safe-area-inset-top,0px)}
  .pmx-bar{transform:translateZ(0)}
  body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:#f5f6fa;z-index:60}
}