create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/overlays/MarketSelector.tsx

@@ -0,0 +1,450 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Button } from '../base/Button'
+import { IconButton } from '../base/IconButton'
+import { Input } from '../base/Input'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { LocaleSelector, type LocaleSelectorProps } from '../navigation/LocaleSelector'
+import { useDialog } from './use-dialog'
+import { PHONE_QUERY, useMediaQuery } from '../../styles/viewport'
+import type { NovaLocalization, NovaMarket } from '@tanqory/theme-kit'
+import './MarketSelector.css'
+
+/**
+ * MarketSelector — the Region & language dialog behind LocaleSelector
+ * (12A "One trigger, three facts", designed in full there; Nova 13 13.8 adds
+ * unavailable combinations, applying and error).
+ *
+ *   desktop  a popover anchored to the trigger (above it in the footer,
+ *            below it in the header)
+ *   < 640    a bottom sheet: search countries, the country list, language,
+ *            Update; with 5+ languages, language is a second step
+ *
+ * Country leads (it sets currency and shipping); language is chosen
+ * alongside. The language control scales with the store: 2 → segmented,
+ * 3–4 → radio rows, 5+ → a searchable field. A language the chosen country
+ * does not offer is disabled with a note. Update applies (onChange may be
+ * async: "Updating…", then an error alert if it rejects); focus returns to
+ * the trigger. Presentational: the storefront's onChange switches the market;
+ * the trigger shows the new market once it resolves.
+ */
+export interface MarketSelectorProps extends Pick<LocaleSelectorProps, 'variant' | 'size' | 'block'> {
+  localization: NovaLocalization
+  /** Apply a market. Resolve to confirm; reject to show the error state. */
+  onChange?: (market: NovaMarket) => void | Promise<void>
+  /** Desktop popover position relative to the trigger. */
+  placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+  /** Lab / story pins. */
+  defaultOpen?: boolean
+  /** Force the phone sheet (otherwise decided by the viewport, < 640). */
+  sheet?: boolean
+}
+
+// ── market data helpers ─────────────────────────────────────────────────────
+
+interface Country {
+  code: string
+  name: string
+  currency: string
+}
+interface Language {
+  code: string
+  native: string
+  english: string
+}
+
+function uniq<T>(xs: T[], key: (x: T) => string): T[] {
+  const seen = new Set<string>()
+  return xs.filter((x) => (seen.has(key(x)) ? false : (seen.add(key(x)), true)))
+}
+
+/** Countries (store order), named in the current language when the store has that entry. */
+export function marketCountries(l: NovaLocalization): Country[] {
+  return uniq(l.available, (m) => m.countryCode).map((m) => {
+    const named = l.available.find((x) => x.countryCode === m.countryCode && x.languageCode === l.current.languageCode) ?? m
+    return { code: m.countryCode, name: named.country, currency: `${m.currencyCode} ${m.currencySymbol}` }
+  })
+}
+
+/** Published languages: the current one first, then store order. */
+export function marketLanguages(l: NovaLocalization): Language[] {
+  const all = uniq(l.available, (m) => m.languageCode).map((m) => ({ code: m.languageCode, native: m.language, english: m.languageEnglish ?? m.language }))
+  const cur = all.findIndex((x) => x.code === l.current.languageCode)
+  return cur > 0 ? [all[cur], ...all.slice(0, cur), ...all.slice(cur + 1)] : all
+}
+
+function available(l: NovaLocalization, country: string, language: string): NovaMarket | undefined {
+  return l.available.find((m) => m.countryCode === country && m.languageCode === language)
+}
+
+// ── viewport ────────────────────────────────────────────────────────────────
+
+function usePhone(force?: boolean): boolean {
+  const phone = useMediaQuery(PHONE_QUERY)
+  return force ?? phone
+}
+
+// ── searchable list (countries, 5+ languages) ───────────────────────────────
+
+interface Option {
+  value: string
+  label: ReactNode
+  text: string
+  meta?: string
+  disabled?: boolean
+}
+
+function PickerList({ options, value, onSelect, label, searchPlaceholder, searchable, autoFocus }: { options: Option[]; value: string; onSelect: (v: string) => void; label: string; searchPlaceholder: string; searchable: boolean; autoFocus?: boolean }) {
+  const { strings } = useNova()
+  const id = useId()
+  const [q, setQ] = useState('')
+  const shown = useMemo(() => {
+    const n = q.trim().toLowerCase()
+    return n ? options.filter((o) => `${o.text} ${o.meta ?? ''}`.toLowerCase().includes(n)) : options
+  }, [options, q])
+  const [active, setActive] = useState(() => Math.max(0, shown.findIndex((o) => o.value === value)))
+  useEffect(() => setActive((a) => Math.min(a, Math.max(0, shown.length - 1))), [shown.length])
+  const list = useRef<HTMLUListElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (!autoFocus) return
+    requestAnimationFrame(() => (searchable ? searchRef.current : list.current)?.focus())
+  }, [autoFocus, searchable])
+  useEffect(() => {
+    list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView?.({ block: 'nearest' })
+  }, [active])
+
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      const d = e.key === 'ArrowDown' ? 1 : -1
+      let i = active
+      for (let k = 0; k < shown.length; k++) {
+        i = (i + d + shown.length) % shown.length
+        if (!shown[i].disabled) break
+      }
+      setActive(i)
+    } else if (e.key === 'Enter' && shown[active] && !shown[active].disabled) {
+      e.preventDefault()
+      onSelect(shown[active].value)
+    }
+  }
+  const optionId = (i: number) => `${id}-opt-${i}`
+  return (
+    <div className="nv-market__picker">
+      {searchable && (
+        <Input
+          ref={searchRef}
+          type="search"
+          size="lg"
+          icon="search"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          onKeyDown={onKey}
+          placeholder={searchPlaceholder}
+          aria-label={searchPlaceholder}
+          aria-controls={`${id}-list`}
+          aria-activedescendant={shown[active] ? optionId(active) : undefined}
+          role="combobox"
+          aria-expanded="true"
+          aria-autocomplete="list"
+        />
+      )}
+      <ul
+        ref={list}
+        id={`${id}-list`}
+        className="nv-market__list"
+        role="listbox"
+        aria-label={label}
+        tabIndex={searchable ? -1 : 0}
+        onKeyDown={searchable ? undefined : onKey}
+        aria-activedescendant={!searchable && shown[active] ? optionId(active) : undefined}
+      >
+        {shown.map((o, i) => (
+          <li
+            key={o.value}
+            id={optionId(i)}
+            data-index={i}
+            role="option"
+            aria-selected={o.value === value}
+            aria-disabled={o.disabled || undefined}
+            data-active={i === active ? '' : undefined}
+            className="nv-market__option"
+            onMouseMove={() => !o.disabled && setActive(i)}
+            onClick={() => !o.disabled && onSelect(o.value)}
+          >
+            <span className="nv-market__option-label">{o.label}</span>
+            {o.meta && <span className="nv-market__option-meta">{o.meta}</span>}
+            <span className="nv-market__option-check">{o.value === value && <Icon name="check" size="sm" />}</span>
+          </li>
+        ))}
+        {!shown.length && <li className="nv-market__empty">{strings.noMatches}</li>}
+      </ul>
+    </div>
+  )
+}
+
+// ── the dialog body ─────────────────────────────────────────────────────────
+
+type Status = 'idle' | 'updating' | 'error'
+
+function Body({ localization, phone, onApply, onClose, status, titleId }: { localization: NovaLocalization; phone: boolean; onApply: (m: NovaMarket) => void; onClose: () => void; status: Status; titleId: string }) {
+  const { strings } = useNova()
+  const countries = useMemo(() => marketCountries(localization), [localization])
+  const languages = useMemo(() => marketLanguages(localization), [localization])
+  const [country, setCountry] = useState(localization.current.countryCode)
+  const [language, setLanguage] = useState(localization.current.languageCode)
+  const [openList, setOpenList] = useState<'country' | 'language' | null>(null)
+  const [step, setStep] = useState<'main' | 'language'>('main')
+  const countryName = countries.find((c) => c.code === country)?.name ?? ''
+  const enabled = (lang: string) => Boolean(available(localization, country, lang))
+
+  const pickCountry = (code: string) => {
+    setCountry(code)
+    setOpenList(null)
+    if (!available(localization, code, language)) {
+      const first = languages.find((l) => available(localization, code, l.code))
+      if (first) setLanguage(first.code)
+    }
+  }
+  const pickLanguage = (code: string) => {
+    setLanguage(code)
+    setOpenList(null)
+    setStep('main')
+  }
+  const unavailable = languages.filter((l) => !enabled(l.code))
+  const selected = languages.find((l) => l.code === language)
+  const current = countries.find((c) => c.code === country)
+
+  const countryOptions: Option[] = countries.map((c) => ({ value: c.code, label: c.name, text: c.name, meta: c.currency }))
+  const languageOptions: Option[] = languages.map((l) => ({
+    value: l.code,
+    label: (
+      <>
+        {l.native}
+        {l.english !== l.native && <span className="nv-market__option-meta"> {l.english}</span>}
+      </>
+    ),
+    text: `${l.native} ${l.english}`,
+    disabled: !enabled(l.code),
+  }))
+
+  // Phone, 5+ languages: the language list is a second step of the sheet.
+  if (phone && step === 'language') {
+    return (
+      <>
+        <div className="nv-market__head" data-step="language">
+          <IconButton icon="chevron-left" label={strings.back} onClick={() => setStep('main')} />
+          <h2 className="nv-market__title" id={titleId}>
+            {strings.language}
+          </h2>
+          <IconButton icon="close" label={strings.close} onClick={onClose} />
+        </div>
+        <PickerList options={languageOptions} value={language} onSelect={pickLanguage} label={strings.language} searchPlaceholder={strings.searchLanguages} searchable autoFocus />
+      </>
+    )
+  }
+
+  const languageControl =
+    languages.length <= 1 ? null : languages.length === 2 ? (
+      <div className="nv-market__segmented" role="radiogroup" aria-labelledby={`${titleId}-lang`}>
+        {languages.map((l) => (
+          <button
+            key={l.code}
+            type="button"
+            role="radio"
+            aria-checked={l.code === language}
+            aria-disabled={!enabled(l.code) || undefined}
+            className="nv-market__segment"
+            lang={l.code}
+            onClick={() => enabled(l.code) && pickLanguage(l.code)}
+          >
+            {l.native}
+          </button>
+        ))}
+      </div>
+    ) : languages.length <= 4 ? (
+      <div className="nv-market__radios" role="radiogroup" aria-labelledby={`${titleId}-lang`}>
+        {languages.map((l) => (
+          <label key={l.code} className="nv-market__radio" data-disabled={!enabled(l.code) ? '' : undefined}>
+            <input type="radio" name={`${titleId}-language`} checked={l.code === language} disabled={!enabled(l.code)} onChange={() => pickLanguage(l.code)} />
+            <span className="nv-market__radio-dot" aria-hidden />
+            <span lang={l.code}>{l.native}</span>
+            {l.english !== l.native && <span className="nv-market__option-meta">{l.english}</span>}
+          </label>
+        ))}
+      </div>
+    ) : phone ? (
+      <button type="button" className="nv-market__field" onClick={() => setStep('language')} aria-describedby={`${titleId}-lang`}>
+        <span className="nv-market__field-value">{selected?.native}</span>
+        <Icon name="chevron-right" size="sm" />
+      </button>
+    ) : (
+      <>
+        <button type="button" className="nv-market__field" aria-haspopup="listbox" aria-expanded={openList === 'language'} onClick={() => setOpenList((o) => (o === 'language' ? null : 'language'))}>
+          <span className="nv-market__field-value">{selected?.native}</span>
+          <Icon name={openList === 'language' ? 'chevron-up' : 'chevron-down'} size={14} />
+        </button>
+        {openList === 'language' && <PickerList options={languageOptions} value={language} onSelect={pickLanguage} label={strings.language} searchPlaceholder={strings.searchLanguages} searchable autoFocus />}
+      </>
+    )
+
+  return (
+    <>
+      <div className="nv-market__head">
+        <h2 className="nv-market__title" id={titleId}>
+          {strings.regionLanguage}
+        </h2>
+        <IconButton icon="close" label={strings.close} onClick={onClose} />
+      </div>
+      <div className="nv-market__body">
+        {phone ? (
+          <PickerList options={countryOptions} value={country} onSelect={pickCountry} label={strings.countryRegion} searchPlaceholder={strings.searchCountries} searchable={countries.length > 5} />
+        ) : (
+          <div className="nv-market__group">
+            <p className="nv-market__label">{strings.countryRegion}</p>
+            <button type="button" className="nv-market__field" aria-haspopup="listbox" aria-expanded={openList === 'country'} onClick={() => setOpenList((o) => (o === 'country' ? null : 'country'))}>
+              <span className="nv-market__field-value">{current?.name}</span>
+              <span className="nv-market__field-meta">{current?.currency}</span>
+              <Icon name={openList === 'country' ? 'chevron-up' : 'chevron-down'} size={14} />
+            </button>
+            {openList === 'country' && <PickerList options={countryOptions} value={country} onSelect={pickCountry} label={strings.countryRegion} searchPlaceholder={strings.searchCountries} searchable={countries.length > 5} autoFocus />}
+          </div>
+        )}
+        {languageControl && (
+          <div className="nv-market__group">
+            <p className="nv-market__label" id={`${titleId}-lang`}>
+              {strings.language}
+            </p>
+            {languageControl}
+            {unavailable.length > 0 && (
+              <p className="nv-market__note">
+                {unavailable.map((l) => fmt(strings.languageUnavailable, { language: l.english, country: countryName })).join(' ')}
+              </p>
+            )}
+          </div>
+        )}
+        <p className="nv-market__note">{strings.pricesInRegionCurrency}</p>
+        <Button
+          block
+          loading={status === 'updating'}
+          onClick={() => {
+            const m = available(localization, country, language)
+            if (m) onApply(m)
+          }}
+        >
+          {status === 'updating' ? strings.updating : strings.update}
+        </Button>
+        {status === 'error' && (
+          <p className="nv-market__error" role="alert">
+            <Icon name="alert" size="sm" />
+            {strings.regionSwitchFailed}
+          </p>
+        )}
+      </div>
+    </>
+  )
+}
+
+// ── the overlay ─────────────────────────────────────────────────────────────
+
+export function MarketSelector({ localization, onChange, placement = 'top-end', defaultOpen = false, sheet, variant, size, block }: MarketSelectorProps): JSX.Element | null {
+  const [current, setCurrent] = useState(localization.current)
+  const [open, setOpen] = useState(defaultOpen)
+  const [status, setStatus] = useState<Status>('idle')
+  const [session, setSession] = useState(0)
+  const phone = usePhone(sheet)
+  const trigger = useRef<HTMLButtonElement>(null)
+  const panel = useRef<HTMLDivElement>(null)
+  const root = useRef<HTMLSpanElement>(null)
+  const titleId = useId()
+  useEffect(() => setCurrent(localization.current), [localization.current])
+  const loc = useMemo<NovaLocalization>(() => ({ ...localization, current }), [localization, current])
+
+  const close = useCallback((restoreFocus = true) => {
+    setOpen(false)
+    setStatus('idle')
+    if (restoreFocus) requestAnimationFrame(() => trigger.current?.focus())
+  }, [])
+
+  // Desktop popover: focus in, Esc closes, a click outside closes; focus returns to the trigger.
+  useEffect(() => {
+    if (!open || phone) return
+    // Focus moves into the dialog itself (no ring on a pointer open); Tab reaches the controls.
+    requestAnimationFrame(() => panel.current?.focus())
+    const onKey = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      const expanded = panel.current?.querySelector('[aria-haspopup="listbox"][aria-expanded="true"]') as HTMLElement | null
+      if (expanded) {
+        expanded.click()
+        expanded.focus()
+      } else close()
+    }
+    const onDown = (e: MouseEvent) => {
+      if (root.current && !root.current.contains(e.target as Node)) close(false)
+    }
+    document.addEventListener('keydown', onKey)
+    document.addEventListener('mousedown', onDown)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('mousedown', onDown)
+    }
+  }, [open, phone, close])
+  // Phone sheet: the modal-surface contract (trap, Esc, scroll lock, focus return).
+  useDialog(open && phone, () => close(false), panel, panel)
+
+  const apply = async (m: NovaMarket) => {
+    if (m.countryCode === current.countryCode && m.languageCode === current.languageCode) return close()
+    setStatus('updating')
+    try {
+      await onChange?.(m)
+      setCurrent(m)
+      close()
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  const body = <Body key={session} localization={loc} phone={phone} onApply={apply} onClose={() => close()} status={status} titleId={titleId} />
+  const selector = (
+    <LocaleSelector
+      ref={trigger}
+      localization={loc}
+      variant={variant}
+      size={size}
+      block={block}
+      expanded={open}
+      onOpen={() => {
+        setSession((s) => s + 1)
+        setOpen((o) => !o)
+      }}
+    />
+  )
+  if (!LocaleSelectorWouldRender(loc)) return null
+
+  return (
+    <span ref={root} className="nv-market" data-block={block ? '' : undefined}>
+      {selector}
+      {open && !phone && (
+        <div ref={panel} className="nv-market__popover" data-placement={placement} role="dialog" aria-labelledby={titleId} tabIndex={-1}>
+          {body}
+        </div>
+      )}
+      {open && phone && (
+        <div className="nv-market__layer">
+          <div className="nv-market__scrim" onClick={() => close(false)} aria-hidden />
+          <div ref={panel} className="nv-market__sheet" role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
+            <span className="nv-market__grabber" aria-hidden />
+            {body}
+          </div>
+        </div>
+      )}
+    </span>
+  )
+}
+
+/** LocaleSelector renders nothing when neither country nor language can change; nor does the selector. */
+function LocaleSelectorWouldRender(l: NovaLocalization): boolean {
+  return new Set(l.available.map((m) => m.countryCode)).size > 1 || new Set(l.available.map((m) => m.languageCode)).size > 1
+}

package/templates/nova/src/components/overlays/Menu.css

@@ -0,0 +1,9 @@
+.nv-menu { list-style: none; margin: 0; padding: 0; }
+.nv-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-fg); font: inherit; font-size: 0.875rem; text-align: start; text-decoration: none; cursor: pointer; }
+.nv-menu__item:hover, .nv-menu__item:focus-visible { background: var(--color-bg-muted); outline: none; }
+.nv-menu__item:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--color-focus); }
+.nv-menu__item[aria-disabled='true'] { color: var(--color-fg-subtle); cursor: default; background: none; }
+.nv-menu__item[data-tone='danger'] { color: var(--color-danger); }
+.nv-menu__label { flex: 1; min-width: 0; }
+.nv-menu__check { flex: none; }
+.nv-sheet .nv-menu__item { min-height: 48px; padding-inline: 0; font-size: 1rem; border-radius: 0; border-block-end: 1px solid var(--color-border); }

package/templates/nova/src/components/overlays/Menu.tsx

@@ -0,0 +1,124 @@
+import { cloneElement, useRef, useState, type KeyboardEvent, type ReactElement, type Ref } from 'react'
+import { Icon, type IconName } from '../../styles/Icon'
+import { Popover } from './Popover'
+import './Menu.css'
+
+export interface ActionMenuItem {
+  id: string
+  label: string
+  onSelect?: () => void
+  href?: string
+  disabled?: boolean
+  /** Destructive actions read in the danger colour, with their icon — never colour alone. */
+  tone?: 'danger'
+  icon?: IconName
+  /** A choice list (Sort by): the current item carries a check. */
+  checked?: boolean
+}
+
+export interface ActionMenuListProps {
+  items: readonly ActionMenuItem[]
+  label: string
+  /** Called after an item runs (the host closes the popover). */
+  onDone?: () => void
+}
+
+const ITEM = '[role^="menuitem"]:not([aria-disabled="true"])'
+
+/**
+ * Nova 13 · 17 Menu — role=menu; ↑ ↓ move (wrapping), Home / End, Enter or
+ * Space runs the item, Esc closes (the popover returns focus). Disabled
+ * items are skipped and announced; a choice list uses menuitemradio with a
+ * check. Rows 40, 14 / 400.
+ */
+export function ActionMenuList({ items, label, onDone }: ActionMenuListProps): JSX.Element {
+  const choice = items.some((i) => i.checked !== undefined)
+  const onKey = (e: KeyboardEvent<HTMLUListElement>) => {
+    const list = [...e.currentTarget.querySelectorAll<HTMLElement>(ITEM)]
+    const at = list.indexOf(document.activeElement as HTMLElement)
+    const go = (i: number) => {
+      e.preventDefault()
+      list[(i + list.length) % list.length]?.focus()
+    }
+    if (e.key === 'ArrowDown') go(at + 1)
+    else if (e.key === 'ArrowUp') go(at - 1)
+    else if (e.key === 'Home') go(0)
+    else if (e.key === 'End') go(list.length - 1)
+  }
+  return (
+    <ul className="nv-menu" role="menu" aria-label={label} onKeyDown={onKey}>
+      {items.map((it) => {
+        const common = {
+          role: choice ? 'menuitemradio' : 'menuitem',
+          'aria-checked': choice ? Boolean(it.checked) : undefined,
+          'aria-disabled': it.disabled || undefined,
+          tabIndex: -1,
+          className: 'nv-menu__item',
+          'data-tone': it.tone,
+        } as const
+        const body = (
+          <>
+            {it.icon && <Icon name={it.icon} size="sm" />}
+            <span className="nv-menu__label">{it.label}</span>
+            {choice && it.checked && <Icon name="check" size="sm" className="nv-menu__check" />}
+          </>
+        )
+        return (
+          <li key={it.id} role="none">
+            {it.href && !it.disabled ? (
+              <a {...common} href={it.href} onClick={() => onDone?.()}>
+                {body}
+              </a>
+            ) : (
+              <button
+                type="button"
+                {...common}
+                onClick={() => {
+                  if (it.disabled) return
+                  it.onSelect?.()
+                  onDone?.()
+                }}
+              >
+                {body}
+              </button>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export interface ActionMenuProps extends Omit<ActionMenuListProps, 'onDone'> {
+  /** The trigger (a Button or IconButton); it gets aria-haspopup / aria-expanded. */
+  trigger: ReactElement
+  align?: 'start' | 'end'
+  width?: number
+  defaultOpen?: boolean
+}
+
+/** A trigger + an anchored menu (a sheet at 390). */
+export function ActionMenu({ trigger, items, label, align = 'start', width = 220, defaultOpen = false }: ActionMenuProps): JSX.Element {
+  const [open, setOpen] = useState(defaultOpen)
+  const anchor = useRef<HTMLElement>(null)
+  return (
+    <>
+      {cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+        ref: anchor as Ref<HTMLElement>,
+        'aria-haspopup': 'menu',
+        'aria-expanded': open,
+        onClick: () => setOpen((o) => !o),
+      })}
+      <Popover open={open} onClose={() => setOpen(false)} anchor={anchor} label={label} align={align} width={width} role="none">
+        <ActionMenuList
+          items={items}
+          label={label}
+          onDone={() => {
+            setOpen(false)
+            anchor.current?.focus()
+          }}
+        />
+      </Popover>
+    </>
+  )
+}

package/templates/nova/src/components/overlays/MobileNavDrawer.css

@@ -0,0 +1,28 @@
+.nv-mnav-drawer .nv-drawer__body { padding: 0 var(--space-4); display: flex; flex-direction: column; }
+.nv-mnav__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); }
+.nv-mnav__head[data-level='top'] { grid-template-columns: 1fr auto; padding-inline-start: var(--space-4); }
+.nv-mnav__head[data-level='nested'] .nv-mnav__title { text-align: center; font-size: var(--type-body); }
+.nv-mnav__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--weight-strong); line-height: var(--leading-snug); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nv-mnav__all { display: flex; align-items: center; min-height: var(--row-height-md); border-bottom: var(--border-subtle); font-size: var(--type-nav-mobile); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); }
+.nv-mnav__item { border-bottom: var(--border-subtle); }
+.nv-mnav__link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  min-height: var(--row-height-md);
+  padding-block: var(--space-2);
+  font-size: var(--type-nav-mobile);
+  line-height: 1.5;
+  text-align: start;
+}
+.nv-mnav__link[aria-current='page'] { font-weight: var(--weight-medium); }
+.nv-mnav__link .nv-icon { color: var(--color-fg-muted); }
+.nv-mnav[data-level='nested'] .nv-mnav__link { font-size: var(--type-h5); }
+.nv-mnav__foot { display: grid; gap: var(--space-3); margin: auto calc(-1 * var(--space-4)) 0; padding: var(--space-4); background: var(--color-bg-muted); }
+.nv-mnav__util { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); font-size: var(--type-body); }
+.nv-mnav__logo { height: 24px; width: auto; max-width: 160px; }
+.nv-mnav-drawer .nv-drawer__body { padding-bottom: 0; }
+/* Nova 13 · 2 — the search entry on top of level 1 (opens the search overlay). */
+.nv-mnav__search { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; margin-block: var(--space-2) var(--space-3); padding-inline: var(--space-4); border: 1px solid var(--color-border-input); border-radius: var(--input-radius); background: var(--color-bg); color: var(--color-fg-muted); font: inherit; font-size: 1rem; text-align: start; cursor: pointer; }