/* ── THE NESTED MENU ───────────────────────────────────────────────────────
   CODES → 005 BALANCE → BALANCE METER. Drawn by src/views/nested-nav.js from
   the tree in src/nav.js; opened and closed by public/js/nav.js.

   Two homes, one piece of markup:
     .navx--bar    a tab across a wide screen. Its branch drops down on a
                   painted sheet; a row with children opens a panel beside it.
     .navx--menu   a line of the phone menu. Every level opens in place.

   Each Code row carries its own two colours (--ra, --rb, light first), and
   passing over it draws a line of them at its left edge — orange at 000
   RESET, blue at 001 GROUND. The panel beside a Code is painted with the
   Code's wide art. Surfaces paint here; nothing is glass, and nothing casts a
   shadow. */

/* ── In the bar ────────────────────────────────────────────────────────── */
.navx--bar { position: relative; }
.navx__top .navx__chev { flex: none; transition: transform .35s var(--ease), opacity var(--t-fast); }
.navx--bar > .navx__top { display: inline-flex; align-items: center; gap: .42rem; }
.navx--bar > .navx__top .navx__chev { width: 8px; height: 5px; opacity: .7; }
.navx--bar.is-open > .navx__top .navx__chev { transform: rotate(180deg); opacity: 1; }

/* It hangs from the bar's lower edge — the tab fills the bar's height (see
   .topbar__nav in components.css) and the sheet's own top margin is part of
   it, so there is no strip of nothing between the tab and the list for the
   pointer to fall through. --navx-dx is set by nav.js to keep the sheet, and
   the panel that can open beside it, on the screen. */
.navx--bar > .navx__drop {
  position: absolute; top: 100%; left: var(--navx-dx, -1rem); z-index: 60;
  /* Its own width, not the tab's: hung from a 67px tab, a shrink-to-fit
     sheet cut SOLAR PLEXUS CHAKRA to SOLAR PLE… */
  width: max-content; max-width: calc(100vw - 32px);
  padding-top: 5px;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .34s var(--ease), visibility 0s linear .34s;
}
.navx--bar.is-open > .navx__drop {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s var(--ease), transform .34s var(--ease), visibility 0s;
}
.navx--bar .navx__sheet {
  position: relative;
  background: #0c0d11; color: #eef0f3;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
}
.navx--bar .navx__in { display: grid; gap: .75rem; padding: .95rem 1rem 1.05rem; }

/* ── What every branch holds ───────────────────────────────────────────── */
.navx__all {
  display: inline-flex; align-items: center; gap: .6rem; justify-self: start;
  padding: .4rem .6rem; border-radius: 8px;
  font-family: var(--font-ui); font-size: .6rem; font-weight: 600; letter-spacing: .24em; line-height: 1.4; text-transform: uppercase;
  color: rgba(238, 240, 243, .64);
  transition: color .16s var(--ease);
}
.navx__all:hover, .navx__all:focus-visible, .navx__all[aria-current] { color: #fff; }
.navx__all .i-arrow { transition: transform .25s var(--ease); }
.navx__all:hover .i-arrow, .navx__all:focus-visible .i-arrow { transform: translateX(3px); }

.navx__groups { display: flex; gap: 1rem; align-items: flex-start; }
.navx__group { display: grid; gap: .3rem; align-content: start; }
/* rhythm.css sets every p and li at body size; these set their own. */
.navx__label {
  margin: 0; padding: 0 .6rem;
  font-family: var(--font-ui); font-size: .55rem; line-height: 1.6; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(238, 240, 243, .42);
}
.navx__list, .navx__exps { list-style: none; margin: 0; padding: 0; }
.navx__row, .navx__exps li { font-size: inherit; line-height: inherit; }
/* Down, then across: nine to a column. */
.navx--bar .navx__list {
  display: grid; grid-template-rows: repeat(var(--rows, 9), auto); grid-auto-flow: column;
  grid-auto-columns: minmax(10.75rem, max-content); column-gap: .2rem;
}

/* A Code: its number in Qubed, its name in Maverix. */
.navx__link {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 2.75em minmax(0, 1fr) auto; align-items: center; column-gap: .3rem;
  width: 100%; min-height: 2.05rem; margin: 0; padding: .42rem .6rem;
  border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase;
  color: rgba(238, 240, 243, .8);
  transition: color .16s var(--ease);
}
/* THE LINE. Arian, 2026-09-24: "instead of turning the whole section around
   the code and code name the color bubble … just have it be that line towards
   the left of it that is colored so when I hover above 000 reset it should
   have a orange line to the left of it appear then it turns to the blue when
   I hover over the 001 ground." It waits, folded to its middle, at the row's
   left edge, and opens to the height of the words — the Code's own two
   colours, light at the top. */
.navx__link::before {
  content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ra, #3a66ff), var(--rb, #38e1ff));
  opacity: 0; transform: scaleY(.35);
  transition: opacity .16s var(--ease), transform .26s var(--ease);
}
.navx__num { font-family: var(--font-mark); font-weight: 400; font-size: 1.04em; letter-spacing: .06em; color: rgba(238, 240, 243, .46); transition: color .16s var(--ease); }
.navx__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navx__link .navx__chev { color: rgba(238, 240, 243, .5); transition: transform .35s var(--ease), color .16s var(--ease); }

/* Lit: under the pointer, under the keyboard, or open — the line opens and
   the words come up to white. Hover only where there is a pointer to hover
   with; on a touch screen it would stick. */
@media (hover: hover) {
  .navx__link:hover { color: #fff; }
  .navx__link:hover::before { opacity: 1; transform: none; }
  .navx__link:hover .navx__num, .navx__link:hover .navx__chev { color: rgba(255, 255, 255, .92); }
}
.navx__link:active::before,
.navx__link:focus-visible::before, .navx__row.is-open > .navx__link::before { opacity: 1; transform: none; }
.navx__link:focus-visible, .navx__row.is-open > .navx__link { color: #fff; }
.navx__link:focus-visible .navx__num, .navx__row.is-open > .navx__link .navx__num,
.navx__link:focus-visible .navx__chev, .navx__row.is-open > .navx__link .navx__chev { color: rgba(255, 255, 255, .92); }
.navx__link:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.navx--bar .navx__row.is-open > .navx__link .navx__chev--side { transform: translateX(2px); }

/* The Code you are on — or whose experience you are in — keeps a thinner
   thread of its colour in the same place, under the line. */
.navx__link[aria-current]::after, .navx__link.is-within::after {
  content: ''; position: absolute; left: .5px; top: 30%; bottom: 30%; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--ra, #3a66ff), var(--rb, #38e1ff));
  opacity: .7;
}
.navx__link[aria-current] .navx__num, .navx__link.is-within .navx__num { color: rgba(238, 240, 243, .9); }

/* ── The panel beside a Code ─────────────────────────────────────────────
   It sits against the sheet's right edge, as tall as the sheet, and slides
   out from under it. The 10px between them is part of the panel, so the
   pointer never crosses empty space on the way in. */
.navx--bar .navx__pane {
  position: absolute; top: -1px; bottom: -1px; left: 100%; z-index: 2;
  width: calc(20.5rem + 10px); padding-left: 10px;
  visibility: hidden; opacity: 0; transform: translateX(-12px);
  transition: opacity .22s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.navx--bar .navx__row.is-open > .navx__pane {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .22s var(--ease), transform .5s var(--ease), visibility 0s;
}
.navx--bar .navx__pane.is-flipped { left: auto; right: 100%; padding-left: 0; padding-right: 10px; transform: translateX(12px); }
.navx--bar .navx__row.is-open > .navx__pane.is-flipped { transform: none; }
.navx--bar .navx__fold, .navx--bar .navx__world { height: 100%; }

.navx__world {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  background: linear-gradient(165deg, var(--wb, #1b1f2a), var(--wa, #0c0d11));
  color: #fff;
}
/* The world settles into place as the panel opens. */
.navx__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .6s var(--ease), transform 1.4s var(--ease);
}
.navx__img.is-loaded { opacity: 1; }
.navx__row.is-open > .navx__pane .navx__img { transform: none; }
/* The words sit low, on the water. The shade is weighted to them and leaves
   the sky and the sun alone. */
.navx__sea {
  display: grid; gap: .5rem; padding: 1rem 1.1rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(5, 4, 22, .42) 62%);
}
.navx__code { display: inline-flex; align-items: baseline; gap: .6rem; justify-self: start; color: #fff; }
.navx__code-num { font-family: var(--font-mark); font-size: 1.55rem; line-height: 1; letter-spacing: .04em; }
.navx__code-name { font-family: var(--font-display); font-weight: 500; font-size: .66rem; letter-spacing: .3em; color: rgba(255, 255, 255, .86); }
.navx__code .i-arrow { align-self: center; opacity: .7; transition: transform .25s var(--ease), opacity .16s var(--ease); }
.navx__code:hover .i-arrow, .navx__code:focus-visible .i-arrow { transform: translateX(3px); opacity: 1; }
.navx__exps { display: grid; padding-top: .4rem; border-top: 1px solid rgba(255, 255, 255, .24); }
.navx__exp {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: .3rem 0;
  font-family: var(--font-display); font-weight: 300; font-size: 1.16rem; letter-spacing: .1em; line-height: 1.15; text-transform: uppercase;
  color: #fff;
}
.navx__exp .i-arrow { flex: none; transition: transform .25s var(--ease); }
.navx__exp:hover .i-arrow, .navx__exp:focus-visible .i-arrow { transform: translateX(4px); }
.navx__code:focus-visible, .navx__exp:focus-visible { outline: 1px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ── In the menu ───────────────────────────────────────────────────────── */
.navx--menu > .navx__top { width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.navx--menu > .navx__top .navx__chev { width: .3em; height: auto; align-self: center; margin-left: calc(var(--s-4) * -.45); opacity: .55; }
.navx--menu.is-open > .navx__top .navx__chev { transform: rotate(180deg); opacity: .9; }

/* Opening in place: the row's height runs from nothing to its content. The
   branch is invisible while shut, so nothing in it can be tabbed into. */
.navx--menu .navx__drop, .navx--menu .navx__pane {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s;
}
.navx--menu.is-open > .navx__drop, .navx--menu .navx__row.is-open > .navx__pane {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .5s var(--ease), visibility 0s;
}
.navx--menu .navx__sheet, .navx--menu .navx__fold { min-height: 0; overflow: hidden; }
/* The branch starts under the word, not under the number: the number ("01",
   about 1rem wide in its HUD type) and the menu's own gap before the word. */
.navx--menu .navx__in { display: grid; gap: 1rem; max-width: 36rem; padding: .7rem 0 1.5rem calc(1rem + var(--s-4)); }
.navx--menu .navx__all { margin-left: -.6rem; }
.navx--menu .navx__groups { display: grid; gap: 1.25rem; }
.navx--menu .navx__label { padding: 0; margin-bottom: .15rem; }
.navx--menu .navx__list { display: grid; }
.navx--menu .navx__link {
  width: calc(100% + .7rem); min-height: 44px; margin-left: -.7rem; padding: .5rem .7rem;
  grid-template-columns: 3.3em minmax(0, 1fr) auto;
  font-weight: 300; font-size: clamp(.84rem, 3.7vw, .98rem); letter-spacing: .11em;
}
/* A long name wraps rather than losing its end — SOLAR PLEXUS CHAKRA was
   SOLAR PLEXUS CH… at 390px. */
.navx--menu .navx__name { white-space: normal; overflow: visible; }
.navx--menu .navx__link .navx__chev { width: 10px; }
.navx--menu .navx__row.is-open > .navx__link .navx__chev { transform: rotate(180deg); }
/* On a phone the tile is wider than it is tall, so a crop around the sun
   left the words standing on the horizon. Here the whole wide world runs
   across the top — sky, sun and water, as painted — and fades into the
   Code's own colour, and the words sit on the water below it. */
.navx--menu .navx__world { max-width: 26rem; margin: .4rem 0 .7rem; border-radius: 16px; justify-content: flex-start; }
.navx--menu .navx__img {
  position: relative; inset: auto; z-index: 0; display: block;
  width: 100%; height: auto; object-fit: fill;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.navx--menu .navx__sea { position: relative; z-index: 1; margin-top: -1.9rem; padding: 0 1rem .9rem; background: none; }
.navx--menu .navx__exp { font-size: 1.12rem; }

/* ── Without scripts the bar still opens: on hover, and on focus. ──────── */
.no-js .navx--bar:hover > .navx__drop, .no-js .navx--bar:focus-within > .navx__drop,
.no-js .navx--bar .navx__row:hover > .navx__pane, .no-js .navx--bar .navx__row:focus-within > .navx__pane {
  visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
}

/* A screen too short for the whole sheet scrolls inside it. The panel beside
   a Code belongs to the sheet, not the scroll, so it is not cut off. */
@media (max-height: 640px) {
  .navx--bar .navx__in { max-height: calc(100vh - var(--nav-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .navx__drop, .navx__pane, .navx__img { transform: none !important; }
  .navx__drop, .navx__pane { transition-duration: .01s !important; }
  .navx__img { transition: opacity .2s linear; }
}

/* THE WORD GOES, THE ARROW OPENS (views/nested-nav.js, menuItem). The row is
   the word, which is the tab's link, and the arrow beside it, which alone
   opens the list; the list opens full width under both. */
.menu nav .navx--split { display: flex; flex-wrap: wrap; align-items: center; }
.menu nav .navx--split > .navx__top { width: auto; }
.navx--split > .navx__drop { flex: 0 0 100%; }
.navx__chevbtn {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: 0 0 0 .1rem; padding: 0;
  border: 0; background: none; color: inherit; opacity: .6; cursor: pointer;
}
.navx__chevbtn .navx__chev { width: 16px; height: auto; transition: transform .35s var(--ease); }
.navx__chevbtn:hover, .navx__chevbtn:focus-visible, .navx--split.is-open > .navx__chevbtn { opacity: 1; }
.navx__chevbtn:focus-visible { outline: 1px solid #fff; outline-offset: 2px; border-radius: 8px; }
.navx--split.is-open > .navx__chevbtn .navx__chev { transform: rotate(180deg); }

/* A Code that is not out yet on the public site (sections.js, publicCodes):
   in the list, grey, and not a link. */
.navx__link[aria-disabled="true"], .navx__code[aria-disabled="true"] { opacity: .32; filter: grayscale(1); cursor: default; }