/* SAINT BONES — MOBILE NAVIGATION DRAWER
 *
 * Authority: `Saint Bones Mobile Navigation.dc.html` states 02–05.
 *
 * WHAT THIS IS NOT
 * ----------------
 * It is not the frozen `.sb-sheet`. That primitive is a bottom sheet —
 * `inset: auto 0 0 0`, `max-height: 86vh`, hairline on its top edge — and the
 * approved navigation is the opposite: anchored under the header and filling
 * everything below it. Forcing the drawer into `.sb-sheet` would have meant
 * overriding almost every declaration in it, so the drawer is its own component
 * and borrows only the frozen layer token, `--sb-layer-sheet`.
 *
 * There is no scrim. The approved drawer is opaque Vienna Black across the full
 * width, so `.sb-sheet-scrim` would sit behind something nothing can see
 * through. Background suppression is handled by `inert` in the script instead,
 * which is the accessible half of the job and the half a scrim never does.
 *
 * NO ENTRANCE ANIMATION
 * ---------------------
 * The artifact draws static states and gives no evidence of a transition, so
 * none is invented. Opening is a state change, not a performance. Nothing here
 * needs a `prefers-reduced-motion` guard because there is no motion to reduce.
 *
 * ONE RULE THAT MUST NOT BE BROKEN BY A LATER EDIT
 * ------------------------------------------------
 * Never give `.sb-nav` or `.sb-nav__panel` a `display` value that is not guarded
 * against `[hidden]`. `hidden` is what keeps closed panels out of the tab order
 * and out of the accessibility tree; a bare `display: flex` silently defeats it
 * and leaves invisible focusable links behind the page.
 *
 * @package SaintBones
 */

/* ---------- SHELL -----------------------------------------------------
 * Fixed below the compact header, filling the rest of the viewport. The header
 * stays above it and stays usable — that is the approved open state, where the
 * wordmark and BAG remain live in the bar.
 *
 * `--sb-header-height-mobile` is the frozen compact-bar height, so the drawer
 * cannot drift out of alignment with the header if that token ever changes.
 */
.sb-nav {
  position: fixed;
  inset: var(--sb-header-height-mobile) 0 0 0;
  z-index: var(--sb-layer-sheet);
  display: flex;
  flex-direction: column;
  background: var(--sb-color-bg-inverse);
  color: var(--sb-color-text-inverse-body);
  overscroll-behavior: contain;
}

.sb-nav[hidden] {
  display: none;
}

/* ---------- NO-JS FALLBACK -------------------------------------------
 * The static fallback is emitted only by <noscript>, below the interactive
 * drawer. It uses the same 1040px navigation boundary: desktop retains the
 * canonical header, while compact widths receive every existing mobile-panel
 * destination without requiring the drawer button or JavaScript.
 */
.sb-nav__fallback {
  display: none;
}

@media (max-width: 1039px) {
  .sb-nav__fallback {
    display: block;
    background: var(--sb-color-bg-inverse);
    color: var(--sb-color-text-inverse-body);
  }

  .sb-nav__fallback-sections,
  .sb-nav__fallback-list,
  .sb-nav__fallback-utilities {
    display: flex;
    flex-direction: column;
  }

  .sb-nav__fallback-section {
    border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
  }

  .sb-nav__fallback-title {
    margin: 0;
    padding: var(--sb-space-8) var(--sb-page-inline-mobile);
    color: var(--sb-color-text-inverse-label);
    text-transform: uppercase;
  }

  .sb-nav__fallback-link {
    width: 100%;
  }

  .sb-nav__fallback-utilities {
    border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
  }
}

/* The panel stack scrolls. Each panel owns its own utility rail, because the
 * approved states each carry a different one, so the rail travels with the
 * panel rather than sitting outside it.
 */
.sb-nav__panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* `:not([hidden])` rather than a bare `display: flex` — a bare one would
 * override the `hidden` attribute and leave closed panels focusable. */
.sb-nav__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sb-nav__panel[hidden] {
  display: none;
}

/* Pushes the rail to the foot of the panel when the list is short, and lets it
 * scroll with the content when the list is long — the `margin-top: auto` the
 * approved artifact uses. */
.sb-nav__body {
  flex: 0 0 auto;
}

.sb-nav__list {
  display: flex;
  flex-direction: column;
}

/* ---------- LEVEL ONE -------------------------------------------------
 * Large light heading rows, hairline separated. `.sb-row` is not reused here:
 * its 44px minimum and 18px block padding are a different rhythm, and these
 * rows are headings rather than accordion controls.
 */
.sb-nav__l1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-7);
  width: 100%;
  padding: var(--sb-space-10) var(--sb-page-inline-mobile);
  border: 0;
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
  background: none;
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-26);
  letter-spacing: var(--sb-ls-heading);
  line-height: var(--sb-lh-display);
  color: var(--sb-color-text-inverse);
  text-align: left;
}

.sb-nav__drill {
  cursor: pointer;
}

/* ---------- LEVEL TWO -------------------------------------------------
 * Quieter, smaller rows under a panel title.
 */
.sb-nav__l2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-7);
  padding: var(--sb-space-7) var(--sb-page-inline-mobile);
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-17);
  line-height: var(--sb-lh-body);
  color: var(--sb-color-text-inverse-body);
}

/* Both levels render as a span while their route is unresolved. Neither may
 * imitate something actionable. */
span.sb-nav__l1,
span.sb-nav__l2,
span.sb-nav__util {
  cursor: default;
}

.sb-nav__arrow {
  flex: none;
  font-size: var(--sb-fs-14);
  color: var(--sb-color-text-inverse-label);
}

/* ---------- SUB-PANEL CHROME ------------------------------------------ */
.sb-nav__back {
  display: flex;
  align-items: center;
  gap: var(--sb-space-5);
  width: 100%;
  padding: var(--sb-space-8) var(--sb-page-inline-mobile);
  border: 0;
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
  background: none;
  font-weight: var(--sb-weight-regular);
  font-size: var(--sb-fs-10);
  letter-spacing: var(--sb-ls-eyebrow);
  line-height: var(--sb-lh-display);
  color: var(--sb-color-text-inverse-label);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.sb-nav__title {
  padding: var(--sb-space-10) var(--sb-page-inline-mobile) var(--sb-space-3);
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-30);
  letter-spacing: var(--sb-ls-display);
  line-height: var(--sb-lh-display);
  color: var(--sb-color-text-inverse);
}

/* ---------- UTILITY RAIL ----------------------------------------------
 * Per panel, not global. Which entries appear in which panel is decided in
 * `saintbones_mobile_navigation()` and is approved design authority, not a
 * convenience: root shows SEARCH · ACCOUNT · BAG, Watches and Studio show
 * SEARCH, Maison shows ACCOUNT. Every state shows the locale row.
 *
 * `margin-top: auto` is what the artifact uses to sit the rail at the foot of
 * the panel, above the safe area on devices that have one.
 * `.sb-nav-text--drawer` supplies the frozen 11px/.2em drawer type.
 */
.sb-nav__utils {
  flex: none;
  margin-top: auto;
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sb-nav__utils-list {
  display: flex;
  flex-direction: column;
}

.sb-nav__util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-7);
  padding: var(--sb-space-7) var(--sb-page-inline-mobile);
  color: var(--sb-color-text-inverse-muted);
  text-transform: uppercase;
}

.sb-nav__locale {
  padding: var(--sb-space-7) var(--sb-page-inline-mobile);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
  color: var(--sb-color-text-inverse-label);
  text-transform: uppercase;
}

/* ---------- 44px TARGET FLOOR -----------------------------------------
 * Level-one rows and the drill-downs clear it on their own padding. The
 * quieter rows do not, so the hit area is extended rather than the box — the
 * same technique the header and footer use, keeping the approved rhythm.
 */
.sb-nav__l2,
.sb-nav__util,
.sb-nav__back {
  min-height: var(--sb-control-height-md);
}

/* ---------- HEADER OPEN STATE -----------------------------------------
 * The approved bar swaps the burger for the words CLOSE × and drops SEARCH
 * from the right cluster while the menu is open. These rules live here, not in
 * header.css, so that the header component's own approved geometry is left
 * exactly as SB-IMP-003 verified it; this file owns the open state because the
 * open state belongs to the drawer.
 */
.sb-header__toggle-close {
  display: none;
  color: var(--sb-color-text-inverse-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-sb-nav-open="true"] .sb-header__burger,
body[data-sb-nav-open="true"] .sb-header__toggle-name {
  display: none;
}

body[data-sb-nav-open="true"] .sb-header__toggle-close {
  display: inline;
}

/* SEARCH moves into the drawer's utility rail while the menu is open, so the
 * bar does not offer it twice. BAG stays, as drawn. */
body[data-sb-nav-open="true"] .sb-header__utils li:nth-child(2) {
  display: none;
}

/* ---------- BEHAVIOURAL BOUNDARY --------------------------------------
 * 1040px is --sb-bp-nav. Above it the desktop navigation is the authority and
 * the drawer must not exist at any cost: the script closes it on the way up,
 * and this rule is the belt to that braces — even a stale open state cannot
 * paint over the desktop header.
 */
@media (min-width: 1040px) {
  .sb-nav {
    display: none;
  }
}