/* The site navigation: one structure, one skin, one box on every page.
   Self-contained — three pages load no other CSS, so each token carries a fallback.
   Background is the only value a page varies. docs/decision-record.md 2026-09-21. */
.hv2-nav{
  display:flex;
  align-items:center;
  padding:12px var(--site-nav-pad-x, 44px);
  background:var(--site-nav-bg, transparent);
  border-bottom:0;

  --site-nav-bg:        transparent;
  --site-nav-pad-x:     44px;
  --site-nav-fg:        var(--grey, #8C8078);
  --site-nav-fg-strong: var(--ink, #1A1208);
  --site-nav-hover-bg:  rgba(26, 18, 8, 0.05);
  --site-nav-mark-bg:   rgba(26, 18, 8, 0.07);
  --site-nav-mark-fg:   var(--ink, #1A1208);
  --site-nav-pill:      999px;
}
.hv2-nav-logo{
  flex:0 0 auto;
  color:inherit;
  text-decoration:none;
}

/* min-width:0 is load-bearing: this cluster is a flex item, whose min-width is
   `auto`, so without it a long address cannot shrink and pushes Sign Out off the
   bar instead of ellipsing. Inert for an address that fits. RR-111. */
.hv2-nav-items{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  min-width:0;
}
.hv2-nav-items form{display:contents;}

/* Only the address shrinks: flex-shrink defaults to 1, so without this the links
   absorb the squeeze and wrap their own labels. The account block is deliberately
   NOT here — flex:none on it brought RR-111 back one level deeper. */
.hv2-nav-items > a,
.hv2-nav-items > form > button{flex:none;}

/* The account block IS the flexible item, and every link in the chain has to say so. */
.hv2-nav-acct{min-width:0;}

/* THE ITEM BOX. The combinators are load-bearing, measured in the rendered DOM: a
   descendant selector reaches the setup page's auth-widget buttons three levels down
   and gives them this pill radius, squaring buttons into capsules. */
.hv2-nav-items > a,
.hv2-nav-items > form > button,
.hv2-nav-acct-trigger,
.hv2-nav-acct-menu a,
.hv2-nav-acct-menu button{
  color:var(--site-nav-fg);
  background:none;
  border:0;
  padding:8px 14px;
  border-radius:var(--site-nav-pill, 999px);
  cursor:pointer;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.hv2-nav-items > a:hover,
.hv2-nav-items > form > button:hover,
.hv2-nav-acct-trigger:hover,
.hv2-nav-acct-menu a:hover,
.hv2-nav-acct-menu button:hover{
  background:var(--site-nav-hover-bg);
  color:var(--site-nav-fg-strong);
}

/* The marker hangs off aria-current="page", not a class, so a screen reader and a
   sighted reader are told the same thing by one token. Written once from the route
   by App\Support\SiteNav::ariaCurrent(). */
.hv2-nav-items > a[aria-current="page"]{
  background:var(--site-nav-mark-bg);
  color:var(--site-nav-mark-fg);
}

.hv2-nav-items > a,
.hv2-nav-items > form > button,
.hv2-nav-acct-trigger,
.hv2-nav-acct-menu a,
.hv2-nav-acct-menu button{
  font-family:"DM Mono", monospace;
  font-size:10px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  /* Pinned, not inherited: line-height came from the page, and the nav was 53px where
     the page said `normal`, 55 where it said 24px and 56 where it said 22.4px. */
  line-height:normal;
}

/* The address deviates from the skin in three properties — not uppercased, not
   tracked, not at the label size — because an address is data, not a label.
   It truncates rather than pushing: min-width:0 is what lets it shrink. RR-111. */
.hv2-nav-fac-value{
  font-size:var(--type-note, 13px);
  line-height:normal;
  letter-spacing:var(--type-note-tracking, 0);
  text-transform:none;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── THE ACCOUNT MENU ─────────────────────────────────────────────────────────────
   A disclosure above the nav's collapse breakpoint and a plain group of rows below it
   — see nav-menu.css, which owns the panel, and nav-menu.js, which owns both. */
.hv2-nav-acct{position:relative;}
.hv2-nav-acct-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
}
/* A caret, drawn rather than typed: a glyph would take the item's letter-spacing and
   sit off-centre, and it must not be announced. */
.hv2-nav-acct-caret{
  flex:0 0 auto;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  transition:transform .2s ease;
}
.hv2-nav-acct.nav-open .hv2-nav-acct-caret{transform:rotate(180deg);}

.hv2-nav-acct-menu{
  display:none;
  position:absolute;
  top:100%;right:0;
  z-index:200;
  min-width:180px;
  margin-top:4px;
  padding:6px 0;
  text-align:left;
  background:var(--surface-chrome, #E2DCD0);
  border:1px solid var(--border, rgba(26, 22, 18, 0.12));
  box-shadow:0 8px 24px rgba(26, 18, 8, 0.12);
}
.hv2-nav-acct.nav-open .hv2-nav-acct-menu{display:block;}
.hv2-nav-acct-menu a,
.hv2-nav-acct-menu button{
  display:block;
  width:100%;
  padding:8px 16px;
  text-align:left;
  border-radius:0;
}
.hv2-nav-acct-menu form{display:block;}

/* The rail's drawer toggle, only on pages that have a rail and only where it is a
   drawer. Separate from the menu burger because they open different things and one
   button cannot say which. It replaced layouts/app.blade.php's `.appbar`. */
.nav-rail-toggle{
  display:none;
  flex:0 0 auto;
  /* 33px, the account trigger's height, so this control cannot make the nav taller
     than it is on a page without a rail. At 40px it drove the bar to 64px between
     769 and 900, where the burger is hidden and nothing else was that tall. */
  width:33px;height:33px;
  margin-right:6px;
  padding:7px;
  background:none;border:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
}
.nav-rail-toggle i{
  display:block;
  height:2px;
  background:var(--ink, #1A1208);
  border-radius:1px;
}
@media(max-width:900px){
  .nav-rail-toggle{display:flex;}
}
/* Below the collapse breakpoint the burger governs the row's height, so the toggle
   can take the same 40px tap target without changing the bar. */
@media(max-width:768px){
  .nav-rail-toggle{width:40px;height:40px;padding:9px;}
}

/* The bar the burger sits in. The cluster's collapse into a panel is nav-menu.css's. */
@media (max-width: 768px){
  .hv2-nav{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    padding:8px 10px;
  }
  .hv2-nav-items > a,
  .hv2-nav-items > form > button{
    white-space:nowrap;
  }
}