/* ============================================================
   Compact navigation menu (2026-09-11)
   Owner-approved design: untracked_files/CODEX_CLAUDE_SHARE/
   CLAUDE-COMPACT-DESKTOP-MOBILE-MENU-HANDOFF-2026-09-10.md

   Replaces the screen-filling collapsed navigation. Below 1600px the
   Menu control opens a header-anchored card instead of an edge-to-edge
   panel that ran to the bottom of the screen: one column under 640px,
   two columns from 640 to 1599. At 1600px and above nothing here
   applies, because that band still renders the inline bar.

   SCOPE (NAV-19): every selector is under .rmv-menu or .navbar. Nothing
   here touches a bare `summary`, `details`, `button`, `dialog` or body
   type, because BVA Search, the guides and the C&P pages all run their
   own accordions and a global rule would restyle them.
   ============================================================ */

/* ── The Menu control ──────────────────────────────────────────
   NAV-01: an explicit Menu word beside the icon wherever it fits, which is
   481px and up. The word is dropped at 480 and below, NOT the emblem and NOT
   the theme or Search controls, because the 375-380px band is where the 44px
   brand mark already collided once (tests/mobile-shared-controls-behavior).

   flex: none, because this button is a fixed-size control in a
   space-between row: letting it shrink would pull its own 48px box in
   under the text it contains, which is how the word came to be printed
   across the theme control.                                            */
.nav-toggle {
  display: none;
  align-items: center;
  flex: none;
  gap: .35rem;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: .4rem .5rem;
  /* 48px, not the 44px the touch rule requires: the hamburger this replaces
     was 48 and tests/mobile-shared-controls-behavior.test.js pins it, so
     dropping to the minimum would have been a silent downgrade of a size
     somebody chose on purpose. */
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.nav-toggle .nav-toggle-icon { font-size: 1.35rem; line-height: 1; }
.nav-toggle .nav-toggle-label { white-space: nowrap; }

/* ── The panel ────────────────────────────────────────────────
   `fixed`, not absolute: containment is measured against the VISIBLE
   viewport (NAV-04), and the page underneath must not move when the
   menu opens (NAV-02). The navbar is sticky at z-index 100, so this
   sits one above it and below the search overlay.

   --rmv-menu-max, --rmv-menu-top and --rmv-menu-right are refined at
   runtime from the real header rect and visualViewport. The values
   here are the no-JS / pre-measure fallbacks and are already inside
   every requirement on an ordinary phone.                            */
.rmv-menu {
  --rmv-menu-top: calc(var(--nav-height) + 9px);
  --rmv-menu-max: min(60vh, calc(100vh - var(--nav-height) - 28px));
  position: fixed;
  z-index: 101;
  top: var(--rmv-menu-top);
  left: 11px;
  right: 11px;
  max-height: var(--rmv-menu-max);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(0,0,0,.2);
  overflow: hidden;
  color: var(--color-text);
}
.rmv-menu[hidden] { display: none; }
.rmv-menu * { box-sizing: border-box; }
.rmv-menu a { color: var(--color-primary); text-decoration: none; }
.rmv-menu a:hover { background: var(--color-bg-alt); text-decoration: none; }
.rmv-menu a:focus-visible,
.rmv-menu button:focus-visible,
.rmv-menu summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Home and Close span the top on every width (NAV-03, NAV-07). Home is
   here as well as on the logo because a veteran who opened the menu
   should not have to guess that the emblem is a link. */
.rmv-menu-top {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,.12));
}
.rmv-menu-home {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 .75rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 7px;
}
.rmv-menu-close {
  flex: none;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.rmv-menu-close:hover { background: var(--color-bg-alt); color: var(--color-text); }

/* ONE scrolling body (NAV-05). min-height:0 is what makes the scroll
   real inside a flex column; without it the body grows and the panel
   blows past its own max-height instead of scrolling. overscroll-
   behavior:contain stops the page scrolling on at the boundaries. */
.rmv-menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: 2px 6px 4px 10px;
}

.rmv-group { border-bottom: 1px solid var(--color-border, rgba(0,0,0,.1)); }
.rmv-group:last-of-type { border-bottom: 0; }
.rmv-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .5rem .55rem;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  font-size: .95rem;
}
.rmv-group > summary::-webkit-details-marker { display: none; }
.rmv-group-title { flex: 1; min-width: 0; }
.rmv-group-title strong { display: block; font-weight: 600; line-height: 1.3; }
.rmv-group-title small {
  display: block;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
}
.rmv-group-arrow { flex: none; display: flex; align-items: center; transition: transform .15s; }
.rmv-group[open] > summary .rmv-group-arrow { transform: rotate(180deg); }

.rmv-dests { list-style: none; margin: 0; padding: 0 .3rem .5rem 2.1rem; }
.rmv-dests a {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem .6rem;
  border-radius: 7px;
  font-size: .875rem;
  line-height: 1.4;
}
/* Prepare my claim carries the emphasis it has in the approved mockup
   (NAV-07). The gold rail is inset so it cannot widen the row. */
.rmv-dests a.rmv-priority {
  font-weight: 600;
  color: var(--color-text);
  background: rgba(176,122,31,.1);
  box-shadow: inset 3px 0 var(--color-accent);
}
/* The current destination is named in words, not colour alone. */
.rmv-menu [aria-current="page"]::after {
  content: 'Current';
  margin-left: auto;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Footer: the account area, always reachable (NAV-05, NAV-14) ── */
.rmv-menu-foot {
  flex: none;
  border-top: 1px solid var(--color-border, rgba(0,0,0,.12));
  background: var(--color-bg-alt);
  padding: .25rem .6rem;
}
.rmv-scroll-hint {
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Shown only when the body really does have more below it: the class is
   set from scrollHeight, so the cue can never claim content that is not
   there (NAV-05, "truthful continuation cue"). */
.rmv-menu.has-more .rmv-scroll-hint { display: flex; }

/* Long usernames and roles wrap instead of pushing the controls out
   (NAV-14). No nested popup: the account links open in this same body. */
.rmv-menu-account { padding: .15rem 0 .3rem; }
/* The revealed links live at the end of the scrolling body, not in the
   footer, so a six-entry admin list scrolls with everything else instead
   of eating the space the groups need on a short screen. */
.rmv-account-links-wrap[hidden] { display: none; }
.rmv-account-links-wrap { padding-top: .2rem; }
.rmv-account-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  padding: .25rem .5rem;
  border-radius: 7px;
  cursor: pointer;
}
.rmv-account-toggle .rmv-account-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rmv-account-toggle .rmv-account-more { margin-left: auto; flex: none; color: var(--color-text-muted); font-size: .75rem; font-weight: 400; }
.rmv-account-toggle:hover { background: rgba(0,0,0,.05); }
.rmv-account-links { list-style: none; margin: 0; padding: .3rem 0 .2rem; border-top: 1px solid var(--color-border, rgba(0,0,0,.12)); }
.rmv-account-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 7px;
  font-size: .875rem;
  overflow-wrap: anywhere;
}
.rmv-menu-signin {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: .9rem;
}

/* ── Below 1600px: the Menu control replaces the inline bar ──── */
@media (max-width: 1599px) {
  .nav-toggle { display: inline-flex; }
  /* The inline list is the WIDE presentation only. It is no longer the
     collapsed dropdown, so it is out of the layout and out of the tab
     order here; the panel above carries the same nine destinations. */
  .navbar-links { display: none; }
  .nav-auth { display: none !important; }
  /* The row never wraps to a second line now that the list is out of it
     (NAV-17). The old rule set flex-wrap:wrap to make room for the
     full-width dropdown. */
  .navbar .container { flex-wrap: nowrap; }
}

/* ── 640 to 1599px: right-aligned two-column card (NAV-03) ───── */
@media (min-width: 640px) and (max-width: 1599px) {
  .rmv-menu {
    --rmv-menu-right: 12px;
    left: auto;
    right: var(--rmv-menu-right);
    width: min(560px, calc(100vw - 24px));
  }
  /* Claim help owns the left column; Research & tools and then
     Representatives stack in the right one. */
  .rmv-menu-body { padding: .35rem .5rem .5rem; }
  .rmv-menu-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .75rem;
    align-items: start;
  }
  .rmv-group { border-bottom: 0; }
  .rmv-group:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .rmv-group:nth-child(2) { grid-column: 2; grid-row: 1; }
  .rmv-group:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* Headings, not disclosure controls: every public destination is
     visible without opening anything.

     THE CONTENT IS REVEALED BY THE `open` ATTRIBUTE, NEVER BY CSS. All
     three groups ship `open` in the markup and the phone controller is
     what closes two of them below 640px. A CSS override does NOT work
     here: Chrome hides a closed details through its own shadow slot, so
     `display: block` on the light-DOM child leaves the links invisible
     while still reporting a box. Caught at 1440px on 2026-09-11, with
     five of the nine destinations silently missing. */
  .rmv-group > summary { cursor: default; min-height: 40px; pointer-events: none; }
  .rmv-group > summary .rmv-group-arrow { display: none; }
  .rmv-dests { padding-left: 0; }
  /* At a cramped effective width or high zoom the two columns would
     squeeze the labels, so fall back to the single column (NAV-03). */
  @media (max-width: 719px) {
    .rmv-menu-cols { grid-template-columns: 1fr; }
    .rmv-group { grid-column: 1 !important; grid-row: auto !important; border-bottom: 1px solid var(--color-border, rgba(0,0,0,.1)); }
    .rmv-group:last-of-type { border-bottom: 0; }
    .rmv-group > summary { pointer-events: auto; cursor: pointer; min-height: 52px; }
    .rmv-group > summary .rmv-group-arrow { display: flex; }
    .rmv-dests { padding-left: 2.1rem; }
  }
}

/* ── 480px and below: the icon carries the control ─────────────
   The word overran its own 48px button and printed across the theme
   control. Measured on /help at 390x844 (Codex independent review
   2026-09-11, item 1): the button ran x=266.1..314.1, the theme button
   began at 314.1, and the label ran x=301.2..338.9 , about 25px of text
   sitting on top of another control. Neither the no-overflow check nor
   the non-overlapping button rects caught it, because the text overflows
   the box, not the page.

   480 and not the old 379 because 481 is the first width where the phone
   Search pill and the brand tagline swap places (main.css both use the
   same 480 line), so it is the first width with room for a word. The
   button keeps aria-label="Menu", so its name never disappears.        */
@media (max-width: 480px) {
  .nav-toggle .nav-toggle-label { display: none; }
  .nav-toggle { justify-content: center; padding: .4rem; }
}

/* ── 481px and up: hold Menu off the wordmark ──────────────────
   The control sat flush against the "VA DISABILITY GUIDE" tagline (owner
   screenshot 2026-09-11 at 481px). The gap has to come from this side:
   .nav-theme-wrap carries margin-left:auto, so every spare pixel in the
   row is already behind the theme control, not in front of this one.   */
@media (min-width: 481px) {
  .nav-toggle { margin-left: 1.25rem; }
}

/* ── Dark mode: both mechanisms (explicit attribute and OS mirror) ── */
:root[data-theme="dark"] .rmv-menu { box-shadow: 0 16px 32px rgba(0,0,0,.55); }
:root[data-theme="dark"] .rmv-menu a { color: var(--color-text); }
:root[data-theme="dark"] .rmv-account-toggle { color: var(--color-text); }
:root[data-theme="dark"] .rmv-dests a.rmv-priority { background: rgba(217,162,71,.16); }
:root[data-theme="dark"] .rmv-account-toggle:hover { background: rgba(255,255,255,.07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rmv-menu { box-shadow: 0 16px 32px rgba(0,0,0,.55); }
  :root:not([data-theme="light"]) .rmv-menu a { color: var(--color-text); }
  :root:not([data-theme="light"]) .rmv-account-toggle { color: var(--color-text); }
  :root:not([data-theme="light"]) .rmv-dests a.rmv-priority { background: rgba(217,162,71,.16); }
  :root:not([data-theme="light"]) .rmv-account-toggle:hover { background: rgba(255,255,255,.07); }
}

/* ── Reduced motion (NAV-17) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rmv-group-arrow { transition: none; }
}

/* ── The wide inline row has to absorb the longer label (NAV-08, NAV-17) ──
   Measured at 1600px on 2026-09-11 with the longest eligible row (an admin
   who is also a claimed rep: Admin, Moderate, Rep Dashboard, Workspace,
   Profile, Logout). Renaming Search to Site Search cost 30px and pushed
   Logout past the viewport edge. Dropping the magnifier glyph from THIS item
   gives back 24px (the phone header control keeps its own) and trimming the
   pill padding gives back 8px, so the row is 2px narrower than before the
   rename rather than wider. Scoped to the band that renders the row. */
@media (min-width: 1600px) {
  .navbar-search-trigger { padding: .35rem .6rem; }
}