/* =====================================================================
   QP ACADEMY NAV — styles (schedule arc S4). One source for the shared
   member app-nav rendered by js/academy-nav.js: desktop sidebar (>900px)
   + mobile bottom-bar and "More" sheet (<=900px). Self-contained brand
   vars on the module roots (reserve-modal precedent) — consumers need no
   shared.css and keep their own page token sets untouched. Visual canon
   lifted from the dashboard sidebar (the richer of the two old copies).
   ONE breakpoint: 900px (R-S10).
   ===================================================================== */

.qpn-side, .qpn-bar, .qpn-sheet, .qpn-sheet-overlay {
  --qpn-teal: #5ba8b2;
  --qpn-teal-light: #4acfd9;
  --qpn-taupe: #ad9b84;
  --qpn-deep: #071825;
  --qpn-border: rgba(91,168,178,.15);
  --qpn-text: rgba(255,255,255,.88);
  --qpn-muted: rgba(255,255,255,.5);
  box-sizing: border-box;
}
.qpn-side *, .qpn-bar *, .qpn-sheet * { box-sizing: border-box; }
/* Light flip applies ONLY to shells that own the theme toggle. .qpn-pinned (set by the
   module when QP_NAV.theme === false — every members/* page) keeps the dark tokens no
   matter what html[data-theme] says: members pages are single-tone dark by design and
   the public qa-theme key (site header / academy toggle) must not leak into them. */
[data-theme="light"] .qpn-side:not(.qpn-pinned),
[data-theme="light"] .qpn-bar:not(.qpn-pinned),
[data-theme="light"] .qpn-sheet:not(.qpn-pinned),
[data-theme="light"] .qpn-sheet-overlay:not(.qpn-pinned) {
  --qpn-deep: #ebe8e2;
  --qpn-border: rgba(173,155,132,.2);
  --qpn-text: #1a1a2e;
  --qpn-muted: rgba(26,26,46,.72); /* .5 sat at 3.15:1 on #ebe8e2 — .72 clears 4.5:1 text and 3:1 for the .7-opacity icons (RELAY-05) */
  --qpn-teal: #25646c; /* teal-INK for light: #5ba8b2 is 2.1:1 on #ebe8e2 */
}

/* ── desktop sidebar ─────────────────────────────────────────────────── */
.qpn-side {
  width: 260px;
  background: var(--qpn-deep);
  border-right: 1px solid var(--qpn-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
}
.qpn-logo {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--qpn-border);
}
.qpn-logo img {
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: opacity .2s;
}
.qpn-logo img:hover { opacity: .8; }
/* per-theme brand asset (brand.imgLight, RELAY-05): dark asset by default, light asset under html[data-theme=light] */
.qpn-logo img.qpn-logo-light { display: none; }
[data-theme="light"] .qpn-side:not(.qpn-pinned) .qpn-logo img.qpn-logo-light { display: block; }
[data-theme="light"] .qpn-side:not(.qpn-pinned) .qpn-logo img.qpn-logo-dark { display: none; }

/* pre-nav slot: page-owned content (e.g. the dashboard profile/referral
   block) keeps its own page classes/styles; the slot only positions it. */
.qpn-slot[hidden] { display: none; }
/* RELAY-01 (Sep 14): sidebar top link back to the Academy front door */
.qpn-explore { display: flex; align-items: center; gap: 10px; margin: 0 14px 6px; padding: 11px 14px; border-radius: 12px; background: rgba(91,168,178,.12); border: 1px solid rgba(91,168,178,.32); color: var(--qpn-teal); font-weight: 600; font-size: 13px; text-decoration: none; transition: background .2s, border-color .2s; }
.qpn-explore:hover { background: rgba(91,168,178,.2); border-color: rgba(91,168,178,.55); }
.qpn-explore svg { width: 18px; height: 18px; flex-shrink: 0; }

.qpn-nav { padding: 12px 0; flex: 1; }
.qpn-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  font-size: 13px; color: var(--qpn-muted);
  text-decoration: none; transition: all .15s;
  border-left: 3px solid transparent;
}
.qpn-nav a:hover { color: var(--qpn-text); background: rgba(255,255,255,.02); }
[data-theme="light"] .qpn-side:not(.qpn-pinned) .qpn-nav a:hover { background: rgba(0,0,0,.03); }
.qpn-nav a.on {
  color: var(--qpn-teal); background: rgba(91,168,178,.06);
  border-left-color: var(--qpn-teal);
}
.qpn-nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; opacity: .7; }
.qpn-nav a.on svg { opacity: 1; }
.qpn-nav a[hidden] { display: none; }
/* ── R-S16 config-driven variant: collapsible group (members "My Health") ── */
.qpn-group-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 20px; font-size: 13px; color: var(--qpn-muted);
  font-family: inherit; background: none; border: none; border-left: 3px solid transparent;
  cursor: pointer; text-align: left; transition: all .15s;
}
.qpn-group-toggle:hover { color: var(--qpn-text); }
.qpn-group-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qpn-group-toggle .qpn-group-arrow { width: 12px; height: 12px; margin-left: auto; transition: transform .25s; }
.qpn-group.open .qpn-group-toggle .qpn-group-arrow { transform: rotate(180deg); }
.qpn-group-items { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.qpn-group.open .qpn-group-items { max-height: 320px; }
.qpn-group-items a { padding: 9px 20px 9px 44px; font-size: 12.5px; }
.qpn-side.qpn-variant .qpn-logo img { max-width: 160px; }
.qpn-sheet a[hidden] { display: none; }

.qpn-foot {
  padding: 8px 0 12px;
  border-top: 1px solid var(--qpn-border);
}
/* RELAY-03 (Sep 21, Todd ruling): the sidebar-foot theme pill is GONE — the toggle is the
   .qpn-theme-top icon button (below) + the "Theme" row in the More sheet. */
.qpn-foot .qpn-signout {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  font-size: 12px; color: var(--qpn-muted);
  text-decoration: none;
  transition: color .15s;
}
.qpn-foot .qpn-signout:hover { color: var(--qpn-text); }
.qpn-foot .qpn-signout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }

/* ── theme toggle: ONE spot (RELAY-03) ───────────────────────────────
   .qpn-theme-top mounts OUTSIDE the module shells (content header, beside
   #qp-bell-host) so it carries its own tokens — a var() scoped to a sibling
   would drop the declaration (lesson banked Sep 14). Not floating: absolute
   inside the header (…--abs, mirroring the bell) or inline in a declared
   [data-qpn-theme-host] row. 40px target, sun in dark / moon in light. */
.qpn-theme-top {
  --qpn-teal: #5ba8b2;
  --qpn-muted: rgba(255,255,255,.6);
  --qpn-text: rgba(255,255,255,.88);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--qpn-muted); cursor: pointer; flex-shrink: 0;
  transition: color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), background .3s cubic-bezier(.22,1,.36,1);
}
[data-theme="light"] .qpn-theme-top { --qpn-muted: rgba(26,26,46,.6); --qpn-text: #1a1a2e; }
.qpn-theme-top:hover, .qpn-theme-top:focus-visible { color: var(--qpn-teal); border-color: rgba(91,168,178,.35); background: rgba(91,168,178,.08); }
.qpn-theme-top:focus-visible { outline: 2px solid var(--qpn-teal); outline-offset: 2px; }
.qpn-theme-top svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qpn-theme-top--abs { position: absolute; top: 0; right: 50px; } /* 38px bell trigger + 12px gap */
.qpn-theme-top--abs ~ #qp-bell-host.qp-nb-abs ~ h1 { padding-right: 104px; } /* titles clear BOTH controls */
html[data-theme="dark"] .qpn-theme-moon { display: none; }
html:not([data-theme="dark"]) .qpn-theme-sun { display: none; }
.qpn-sheet .qpn-theme-current { margin-left: auto; font-size: 12px; color: var(--qpn-muted); }

/* ── mobile bottom bar ───────────────────────────────────────────────── */
.qpn-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--qpn-deep);
  border-top: 1px solid var(--qpn-border);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: 'Inter', sans-serif;
}
.qpn-bar a, .qpn-bar button {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 2px 7px;
  font-size: 10px; font-weight: 500;
  font-family: inherit;
  color: var(--qpn-muted);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  transition: color .15s;
  min-width: 0;
}
.qpn-bar a span, .qpn-bar button span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.qpn-bar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; flex-shrink: 0; }
.qpn-bar a.on { color: var(--qpn-teal); }

/* ── More sheet ──────────────────────────────────────────────────────── */
.qpn-sheet-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 70;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.22,1,.36,1);
}
.qpn-sheet-overlay.open { opacity: 1; }
.qpn-sheet {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--qpn-deep);
  border-top: 1px solid var(--qpn-border);
  border-radius: 16px 16px 0 0;
  padding: 6px 0 calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  font-family: 'Inter', sans-serif;
}
.qpn-sheet.open { transform: translateY(0); }
.qpn-sheet-grab {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--qpn-border);
  margin: 6px auto 8px;
}
.qpn-sheet a, .qpn-sheet .qpn-theme {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 24px;
  font-size: 14px; color: var(--qpn-text);
  font-family: inherit;
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.qpn-sheet a:hover, .qpn-sheet .qpn-theme:hover { background: rgba(255,255,255,.03); }
[data-theme="light"] .qpn-sheet:not(.qpn-pinned) a:hover,
[data-theme="light"] .qpn-sheet:not(.qpn-pinned) .qpn-theme:hover { background: rgba(0,0,0,.03); }
.qpn-sheet svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.qpn-sheet a[hidden] { display: none; }
.qpn-sheet .qpn-signout { color: var(--qpn-muted); }
.qpn-sheet .qpn-signout:hover { color: var(--qpn-text); }

/* ── the ONE breakpoint (900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  .qpn-side { display: none; }
  .qpn-bar { display: flex; }
  .qpn-sheet-overlay.open, .qpn-sheet-overlay { display: block; pointer-events: none; }
  .qpn-sheet-overlay.open { pointer-events: auto; }
  .qpn-sheet { display: block; }
  /* keep page content clear of the fixed bar */
  body.qpn-has-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}