/* nav-ux: grouped collapsible sidebar, playback popover, start strip, mobile bottom bar */
.side-nav .ux-ngh,.drawer .ux-ngh{position:relative}
.ux-ngh:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:6px}
.ux-ngh .si{transition:transform .2s}
.ux-ng.ux-closed > a.nav-link:not(.ux-ngh){display:none!important}
.ux-ng.ux-closed .ux-ngh .si{transform:rotate(-90deg);transition:transform .2s}
.ux-ng.ux-act > .ux-ngh{opacity:1}
.nav-link .ux-hint{display:block;font-size:.7rem;opacity:.7;font-weight:400;line-height:1.3;margin-top:1px}
.nav-link:has(.ux-hint){flex-wrap:wrap}
.drawer .ux-hint{display:block;font-size:.72rem;opacity:.7}
/* playback popover */
.ux-player{position:relative}
.ux-pset{display:inline-block;position:relative}
.ux-pset>summary{list-style:none;cursor:pointer}
.ux-pset>summary::-webkit-details-marker{display:none}
.ux-pset-pop{position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:30;display:flex;flex-wrap:wrap;gap:8px;background:var(--card,#fffaf0);border:1px solid var(--line,#e5d9c3);border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:260px}
/* start strip — same look as homepage stat cards */
.nx-start{position:fixed;inset-inline-start:16px;bottom:16px;z-index:60;width:300px;background:linear-gradient(180deg,#132a45,#0b1f35);color:#f3ecdb;border:1px solid rgba(212,166,87,.55);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:14px;font-family:LxBody,"Markazi Text",serif;animation:nxin .35s ease}
.nx-start b{display:block;font-family:LxHead,LxBody,serif;font-size:18px;color:#d4a657;margin-bottom:10px}
.nx-start .nx-ch{display:flex;flex-direction:column;gap:8px}
.nx-start .nx-ch a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(212,166,87,.35);background:rgba(255,255,255,.04);color:#f3ecdb;text-decoration:none;font-size:15px;font-weight:700}
.nx-start .nx-ch a:hover,.nx-start .nx-ch a:focus-visible{border-color:#d4a657;background:rgba(212,166,87,.12)}
.nx-start .nx-x{position:absolute;inset-inline-end:6px;top:6px;width:36px;height:36px;border:0;background:none;font-size:16px;cursor:pointer;color:#d4a657}
@keyframes nxin{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
/* homepage header must stay as before: no page tools/QR injected there */
html[data-route="home"] #fx-tools,html[data-route="home"] .fx-tools,html[data-route="home"] .fx-page-qr{display:none!important}
/* mobile bottom bar */
.nx-bb{display:none}
@media (max-width:760px){
  .nx-bb{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:55;background:#132036;border-top:1px solid rgba(212,166,87,.35);padding:4px 2px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}
  .nx-bb a,.nx-bb button{all:unset;flex:1;min-height:52px;min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.72rem;font-weight:700;color:#f3e7cf;cursor:pointer;text-align:center}
  .nx-bb [aria-current="page"]{color:#d4a657}
  .nx-bb svg{width:22px;height:22px}
  body.nx-has-bb{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
  body.nx-has-bb .nx-start{bottom:76px;inset-inline:10px;max-width:none}
  /* larger touch targets */
  .side-nav a,.drawer a,.ux-ib,.btn,button.ib,a.ib,.rd-tab,.fw-chip,.ed-chip,.pager a,.pager button,select,.ux-ngh{min-height:44px}
  .ux-ib,.btn,button.ib,a.ib{min-width:44px}
  .ux-pset-pop{position:fixed;inset-inline:10px;top:auto;bottom:80px}
}
body.bk-focus .nx-bb,body.focus .nx-bb,body:has(.pv-focus) .nx-bb,:fullscreen ~ .nx-bb,body.bk-focus .nx-start,body:has(.pv-focus) .nx-start{display:none!important}
body.bk-focus.nx-has-bb,body.nx-has-bb:has(.pv-focus){padding-bottom:0!important}
@media print{.nx-bb,.nx-start,.ux-pset{display:none!important}body.nx-has-bb{padding-bottom:0!important}}
body.nx-has-bb .mobile-bottom{display:none!important}
/* font unification — every top-level row is .nav-link with identical type */
.side-nav.main-nav, .drawer nav[aria-label]{
  --ux-nav-ff: LxBody, "Markazi Text", serif;
  --ux-nav-fs: calc(var(--u) * 11.6);
  --ux-nav-fw: 400;
  --ux-nav-fg: #f3ecdb;
}
.side-nav .nav-link,
.side-nav .nav-link > span:not(.si):not(.ux-hint),
.side-nav .ux-ngh,
.drawer .nav-link,
.drawer .nav-link > span:not(.si):not(.ux-hint),
.drawer .ux-ngh,
  font-family: var(--ux-nav-ff) !important;
  font-size: var(--ux-nav-fs) !important;
  font-weight: var(--ux-nav-fw) !important;
  font-synthesis: none !important;
  font-style: normal !important;
  font-variation-settings: "wght" 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  color: var(--ux-nav-fg) !important;
  -webkit-text-fill-color: var(--ux-nav-fg) !important;
  opacity: 1 !important;
}
.side-nav .nav-link .si,
.drawer .nav-link .si{color: var(--ux-nav-fg) !important; opacity:.85}
  margin-inline-start:auto;
  font-size:.7em !important;
  font-style:normal !important;
  font-family: inherit !important;
  opacity:.65 !important;
  color: var(--ux-nav-fg) !important;
  -webkit-text-fill-color: var(--ux-nav-fg) !important;
}
/* active row keeps gold pill + dark text */
html body .side-nav .nav-link[aria-current=page],
html body .side-nav .nav-link[aria-current=page] > span:not(.si),
html body .side-nav .nav-link[aria-current=page] .si{
  color:#0B1F35 !important;
  -webkit-text-fill-color:#0B1F35 !important;
  opacity:1 !important;
}
.side-nav .ux-ng:first-of-type > .ux-ngh,
.drawer .ux-ng:first-of-type > .ux-ngh{display:none !important}
.side-nav .ux-ng:first-of-type.ux-closed > a.nav-link:not(.ux-ngh),
.drawer .ux-ng:first-of-type.ux-closed > a.nav-link:not(.ux-ngh){display:flex !important}
.nx-startlink .si svg{width:20px;height:20px}
.nav-link .ux-hint{font-family:var(--ux-nav-ff)!important;font-size:.7rem!important;font-weight:400!important;opacity:.7!important}
.nx-start,.nx-bb a,.nx-bb button,.ux-pset-pop{font-family:LxBody,"Markazi Text",serif}