/* nav.css v1 · NAV5 20261023 — 5-tab nav (Tonight · Play · Boards · Shows · You)
   Same tabs on the desktop rail and the phone dock. Only the active tab lists its pages on the rail.
   Phone: a tab opens its page list in the bottom sheet (#desk-drawer, replaces More).
   Footer (#n5-foot): About · Shop · Sponsor · Podcasts + the Presented-by card.
   Loaded after styles.css; selectors reuse the v299 two-ID rail scope so they win over the layered rules. */

/* ---------- rail: tabs ---------- */
html body :is(#house-rail, #x):is(#house-rail, #x) .n5-tabs { display: flex; flex-direction: column; }
html body :is(#house-rail, #x):is(#house-rail, #x) .n5-group + .n5-group { border-top: 1px solid var(--bd-v-rc-div, var(--rc-div, #22252e)); }
html body :is(#house-rail, #x):is(#house-rail, #x) .n5-group.is-open + .n5-group,
html body :is(#house-rail, #x):is(#house-rail, #x) .n5-group.is-open { border-top-color: transparent; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-tab em { font-weight: 600 !important; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-tab::before { display: none !important; }
/* sub-pages of the active tab: text rows, no icons, current page in gold */
html body :is(#house-rail, #x):is(#house-rail, #x) .n5-subs { display: flex; flex-direction: column; padding: 2px 0 6px; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub {
  min-height: 30px !important; padding: 6px 8px 6px 38px !important; font-size: 12.5px !important; color: var(--tx-v-rc-mut, var(--rc-mut, #9aa3b2)) !important;
  background: transparent !important; box-shadow: none !important;
}
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub::before { display: none !important; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub :is(.material-symbols-outlined, img.sq-ico) { display: none !important; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub:not(.is-current):hover { color: var(--tx-43, #fff) !important; background: var(--bg-180, rgba(255,255,255,.04)) !important; }
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub.is-current {
  color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)) !important; font-weight: 600 !important; background: transparent !important; box-shadow: none !important;
}
html body :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link .n5-ext { flex: 0 0 auto; font-size: 12px; opacity: .6; margin-left: auto; color: inherit; }

/* collapsed icon rail (1024–1279 auto, tablet 768–1023, or folded): the active tab's pages show as small icons */
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) .n5-subs { padding: 2px 0 4px; margin: 0 2px; border-left: 1px solid var(--bd-41, rgba(212,176,86,.18)); }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub { padding: 6px 0 !important; justify-content: center !important; min-height: 32px !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub :is(.material-symbols-outlined, img.sq-ico) { display: block !important; font-size: 18px !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub img.sq-ico { width: 18px !important; height: 18px !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub :is(em, .n5-ext) { display: none !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub.is-current { box-shadow: inset 0 0 0 1px var(--sh-41, rgba(212,176,86,.55)) !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link.n5-sub.is-current .material-symbols-outlined { color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)) !important; }
html body.rail-collapsed :is(#house-rail, #x):is(#house-rail, #x) #rail-links a.rail-link .n5-ext { display: none !important; }

/* ---------- one Discord (header) and one Live Circuit (Shows tab) ---------- */
html:root body:not(#n5a):not(#n5b) :is(.discord-fab, .site-header .btn-hud[href="https://livecircuit.trnbckl.net/"], #tn-hero a.tn-btn[href="https://livecircuit.trnbckl.net/"], #home-circuit a.splash-go[href="https://livecircuit.trnbckl.net/"]) { display: none !important; }
html body .site-header .nav:empty { display: none !important; }

/* ---------- phone dock: 5 tabs ---------- */
html body #app-dock.n5-dock a[data-tab] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html body #app-dock.n5-dock a[data-tab].is-sheet :is(.material-symbols-outlined, em) { color: var(--tx-v-gold, var(--gold, #d4b056)) !important; }

/* ---------- phone sheet: compact list of the tapped tab's pages ---------- */
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) .drawer-head .kicker {
  font: 600 22px/1 Teko, Oswald, sans-serif !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)) !important;
}
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) .n5-list {
  display: flex; flex-direction: column; background: var(--bg-v-rc-bg, var(--rc-bg, #12141a)); border: 1px solid var(--bd-v-rc-bd, var(--rc-bd, #262a35));
  border-radius: 16px; padding: 4px 8px; margin: 0 0 8px; box-sizing: border-box;
}
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; box-sizing: border-box; text-decoration: none;
  color: var(--tx-v-rc-txt, var(--rc-txt, #e8e3d6)); font: 500 15px/1.2 "IBM Plex Sans", system-ui, sans-serif; border-radius: 10px;
}
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row + a.n5-row { border-top: 1px solid var(--bd-v-rc-div, var(--rc-div, #22252e)); }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row em { font-style: normal; flex: 1 1 auto; }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row .material-symbols-outlined { font-size: 22px; color: var(--tx-v-rc-gold2, var(--rc-gold2, #d4b056)); }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row img.sq-ico { width: 22px; height: 22px; object-fit: contain; }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row .n5-ext { font-size: 16px; opacity: .6; flex: 0 0 auto; }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row.is-current { background: rgba(212, 176, 86, .13); color: var(--tx-118, #fff6dc); box-shadow: inset 3px 0 0 var(--rc-gold2, #d4b056); }
html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row.is-current + a.n5-row, html body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row.is-current { border-top-color: transparent; }

/* ---------- footer (inside the active view) ---------- */
html body #page-fine { display: none !important; } /* the footer carries the one copyright line */
html body .view .n5-foot {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 24px; align-items: start;
  margin: 28px 0 0; padding: 20px 4px 18px; border-top: 1px solid var(--bd-v-rc-bd, var(--rc-bd, #262a35)); clear: both;
  color: var(--tx-v-rc-mut, var(--rc-mut, #9aa3b2)); font: 400 12.5px/1.45 "IBM Plex Sans", system-ui, sans-serif; box-sizing: border-box;
}
html body .view .n5-foot .kicker { margin: 0 0 8px !important; font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--tx-v-gold, var(--gold, #d4b056)) !important; }
html body .view .n5-foot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)); }
html body .view .n5-foot-logo b { font: 600 22px/1 Teko, Oswald, sans-serif; letter-spacing: .06em; padding-top: 3px; }
html body .view .n5-foot-logo img { width: 26px; height: 26px; object-fit: contain; }
html body .view .n5-foot-brand p { margin: 8px 0 0; max-width: 34ch; }
html body .view .n5-foot-links { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
html body .view .n5-foot-links .kicker { flex: 0 0 100%; }
html body .view .n5-foot-links a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bd-v-rc-bd, var(--rc-bd, #262a35));
  color: var(--tx-v-rc-txt, var(--rc-txt, #e8e3d6)); text-decoration: none; font-weight: 500; box-sizing: border-box;
}
html body .view .n5-foot-links a:hover { border-color: var(--bd-25, #d4b056); color: var(--tx-43, #fff); }
html body .view .n5-foot-links a[aria-current="page"] { border-color: var(--bd-25, #d4b056); color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)); }
/* Presented-by card, compact */
html body .view .n5-foot :is(.presented-by, #presented-by) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "n go" "l go"; align-items: center; gap: 2px 12px;
  margin: 0 !important; padding: 12px 14px !important; min-height: 0 !important; text-align: left !important; max-width: none !important; width: auto !important;
  background: var(--bg-v-rc-bg, var(--rc-bg, #12141a)) !important; border: 1px solid var(--bd-v-rc-bd, var(--rc-bd, #262a35)) !important; border-radius: 14px !important; box-shadow: none !important;
}
html body .view .n5-foot :is(.presented-by, #presented-by)::before, html body .view .n5-foot :is(.presented-by, #presented-by)::after { display: none !important; }
html body .view .n5-foot .presented-by .kicker { grid-area: k; margin: 0 0 4px !important; }
html body .view .n5-foot .presented-by h3 { display: none !important; }
html body .view .n5-foot .presented-by .presented-name { grid-area: n; margin: 0 !important; font: 600 20px/1.05 Teko, Oswald, sans-serif !important; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-v-rc-gold, var(--rc-gold, #f0c43a)) !important; }
html body .view .n5-foot .presented-by .presented-line { grid-area: l; margin: 0 !important; font: 400 12px/1.35 "IBM Plex Sans", system-ui, sans-serif !important; color: var(--tx-v-rc-mut, var(--rc-mut, #9aa3b2)) !important; }
html body .view .n5-foot .presented-by .btn { grid-area: go; margin: 0 !important; min-height: 34px !important; padding: 0 14px !important; font-size: 11px !important; }
html body .view .n5-foot-pitch { margin: 6px 2px 0; font-size: 11.5px; }
html body .view .n5-foot a:not(.btn):not(.n5-foot-logo) { color: inherit; }
html body .view .n5-foot-pitch a, html body .view .n5-foot-fine a { color: var(--tx-v-rc-gold2, var(--rc-gold2, #d4b056)) !important; }
html body .view .n5-foot-fine { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11px; opacity: .85; }
@media (max-width: 1279.98px) {
  html body .view .n5-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body .view .n5-foot-pres { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  html body .view .n5-foot { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 14px 16px; margin-top: 20px; }
  html body .view .n5-foot-pres { grid-column: auto; }
}
/* light mode */
html[data-theme="light"] body .view .n5-foot { border-top-color: rgba(10, 15, 24, .14); color: #4b5563; }
html[data-theme="light"] body .view .n5-foot-links a { border-color: rgba(10, 15, 24, .18); color: #1f2430; }
html[data-theme="light"] body .view .n5-foot .presented-by { background: #fffaf0 !important; border-color: rgba(10, 15, 24, .14) !important; }
html[data-theme="light"] body .view .n5-foot :is(.presented-name, .n5-foot-logo) { color: #8a6a12 !important; }
html[data-theme="light"] body :is(#desk-drawer, #x):is(#desk-drawer, #x) .n5-list { background: #fffaf0; border-color: rgba(10, 15, 24, .14); }
html[data-theme="light"] body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row { color: #1f2430; }
html[data-theme="light"] body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row + a.n5-row { border-top-color: rgba(10, 15, 24, .1); }
html[data-theme="light"] body :is(#desk-drawer, #x):is(#desk-drawer, #x) a.n5-row .material-symbols-outlined { color: #8a6a12; }
html:root body:not(#n5a):not(#n5b) :is(#desk-drawer, #x):is(#desk-drawer, #x).n5-sheet {
  inset: auto 0 var(--n5-dock, 76px) 0 !important; top: auto !important; bottom: var(--n5-dock, 76px) !important; height: auto !important; min-height: 0 !important;
  max-height: calc(100vh - var(--n5-dock, 76px) - 64px) !important; overflow-y: auto !important; border-radius: 20px 20px 0 0 !important;
}