/* ─── BOTTOM NAV — full-width app tab bar ───────────────────────────────── */
.nav{
  position:fixed;
  left:0;right:0;bottom:0;
  width:100%;max-width:none;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:#FFFFFF;
  border:none;
  border-top:1px solid rgba(183,218,221,0.35);
  border-radius:16px 16px 0 0;
  display:flex;align-items:flex-start;justify-content:space-around;
  padding-top:5px;
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  z-index:50;
  box-shadow:0 -1px 12px rgba(8,59,86,0.06);
}
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 8px;cursor:pointer;border:none;background:none;
  color:var(--text3);transition:color 0.15s;border-radius:var(--r-sm);min-width:44px;flex:1;
}
.nav-btn.active{color:var(--sf-yellow)}
.nav-btn svg{width:22px;height:22px}
.nav-label{font-size:10px;font-family:var(--font-display);font-weight:600;letter-spacing:0.05em;text-transform:uppercase}

/* ─── PERSISTENT HEADER ───────────────────────────────────────────────────
   Back (with destination) · title · Edit / actions / notifications.
   Rendered as the first child of the scrolling .screen so it sticks. */
.ph{
  position:sticky;top:0;z-index:60;
  height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  background:var(--c-header);
  border-bottom:1px solid var(--c-line-strong);
  box-shadow:0 6px 16px -14px var(--c-shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.screen>.ph{margin-top:calc(-1 * env(safe-area-inset-top))}
.ph-l{display:flex;align-items:center;justify-self:start;min-width:0}
.ph-r{display:flex;align-items:center;justify-self:end;gap:0}
.ph-t{
  font-family:var(--font-display);font-weight:900;font-size:1.15rem;font-style:italic;
  letter-spacing:0.02em;color:var(--c-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46vw;
}
button.ph-b{
  display:inline-flex;align-items:center;gap:1px;min-height:44px;padding:0 8px 0 2px;
  color:var(--c-teal);background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:0.82rem;letter-spacing:0.02em;
  max-width:130px;text-transform:none;
}
.ph-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-i{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;color:var(--c-teal);
  background:none;border:none;padding:0;cursor:pointer;
}
.ph-e{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;
  color:var(--c-teal);background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:0.74rem;letter-spacing:0.12em;
}
.bdg{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:#C9246B;color:#fff;
  font-family:var(--font-display);font-size:0.62rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--c-bg);
}

/* ─── ACTIVE TAB ─────────────────────────────────────────────────────────
   Filled pill behind icon + label so the current tab reads at a glance. */
.nav .nav-btn{color:var(--c-text2) !important}
.nav .nav-btn.active{
  color:var(--c-teal) !important;
  background:var(--c-tab-on) !important;
  border-radius:14px !important;margin:0 4px !important;
  box-shadow:inset 0 0 0 1px var(--c-tab-ring) !important;
}
.nav .nav-btn.active svg{stroke-width:2.4}
.nav .nav-btn.active .nav-label{font-weight:800}