/* ============================================================================
   prototype-menu.css  —  WellsAndSepticsPortal

   The main menu bar, and nothing else. Loaded LAST on the two screens that use
   the single-file prototype's stylesheet: Views/Portal/Index.cshtml and
   Views/Shared/_PrototypeLayout.cshtml.

   WHY THE MENU NEEDED A FILE OF ITS OWN, AND WHY THE FIX IS NOT IN
   prototype-final.css

   prototype-final.css is a GENERATED import — tools/extract-prototype.js
   rewrites it from the delivered prototype, so an edit made there is lost on the
   next re-import. This file is hand-written, and that is the only reason it is
   separate.

   THE BULLETS AND THE INDENT WERE ONE FAULT, NOT TWO

   The delivered prototype ran Tailwind from the CDN, which ships PREFLIGHT —
   Tailwind's global reset, part of which is `ul,ol{list-style:none;margin:0;
   padding:0}`. Our build deliberately switches preflight OFF, and
   tools/tailwind.config.js records why: the prototype declares its own box
   model, heading scale and control sizing, and its own comments describe
   fighting preflight over heading sizes. That decision stands.

   But it has a consequence nobody wrote down: every <ul> on these pages keeps
   the BROWSER's defaults instead — `list-style:disc`, `padding-left:40px`,
   `margin:1em 0`. On the menu bar that produced exactly what was reported: list
   markers, the whole bar indented by 40px so it no longer lined up with the
   masthead above it, and a 16px gap above and below it that read as the menu
   floating loose from the header.

   So this file does not re-open the preflight decision. It resets the ONE list
   that decision damaged. Scoped by `nav[aria-label="Main"] > ul[role="menubar"]`
   rather than by a class, because both menu bars are written that way, in two
   different files, and neither carries an id in common — _PrototypeLayout's has
   no id at all. A selector that matched only #menubar would have fixed the
   portal screen and left the sign-in, registration and Home pages indented.

   TYPE AND SPACING

   .btn is 13px (--fs-floor) because it was sized for dense toolbars inside
   tables. The menu bar is the page's primary navigation and is read before
   anything else on it, so it takes --fs-body (14px) — one step UP the
   prototype's own five-step scale, not an invented size. Nothing here
   introduces a font size, weight or colour the prototype does not already
   declare; the scale is the prototype's and stays the prototype's.

   The row gap matters more than the column gap. This bar holds eleven items and
   wraps to two rows below about 1200px, and at the browser default of 0 the two
   rows touched — which is the "padding between the line" that was asked for.
   ========================================================================== */

/* ---- the reset preflight would have applied --------------------------------
   Also `list-style:none` on the <li>. A flex container blockifies its children,
   so the marker is usually suppressed anyway — but only while the flex
   utilities are actually loaded. If prototype-tailwind.css ever fails to load,
   `display:flex` goes with it and the markers come back, on a bar that has just
   become a vertical stack. Declaring it on both means the bullets cannot
   reappear as a side effect of some other file's failure. */
nav[aria-label="Main"] > ul[role="menubar"] {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 0.4rem;
  column-gap: 0.35rem;
}

nav[aria-label="Main"] > ul[role="menubar"] > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ::marker as well as list-style, for the ::marker-only rendering paths in
   older WebKit. A belt-and-braces rule on a purely decorative pseudo-element
   costs nothing and closes the last route by which a bullet can appear. */
nav[aria-label="Main"] > ul[role="menubar"] > li::marker {
  content: "";
}

/* ---- the items themselves -------------------------------------------------
   line-height is pinned at 1.25 rather than inherited: the page body runs at
   1.5 (--lh-body), which on a 14px label makes each button 3px taller than the
   text needs and leaves the icon looking as though it sits above centre. */
nav[aria-label="Main"] > ul[role="menubar"] .btn {
  font-size: var(--fs-body);
  line-height: 1.25;
  padding: 0.5rem 0.85rem;
}

/* The vertical rule between the record items and the reference items. It is an
   <li> with .h-5, sized against the old 13px button; the taller buttons need
   the extra 2px or it reads as a tick mark rather than a divider. */
nav[aria-label="Main"] > ul[role="menubar"] > li.w-px {
  height: 1.5rem;
  align-self: center;
}

/* Breathing room under the bar, where the browser's 1em bottom margin used to
   be. Kept on the <nav> rather than the <ul> so it applies once whether or not
   the capability read-out below is rendered. */
nav[aria-label="Main"] {
  padding-bottom: 0.6rem;
}

/* ---- the capability read-out under the menu (portal screen only) ----------
   Four <p>s and a <details>, all of which inherit the browser's 1em paragraph
   margin for the same missing-preflight reason. At 1em each they occupied more
   vertical space than the menu they explain and pushed the dashboard grid below
   the fold — which is the defect the prototype's own comments describe closing
   by moving the documentation off the dashboard in the first place. */
#role-caps > p,
#role-caps > details {
  margin: 0;
}

#role-caps > p + p,
#role-caps > p + details {
  margin-top: 0.2rem;
}

/* ---- the masthead on a phone ------------------------------------------------
   The masthead row is `flex flex-wrap` with three children: the logo (shrink-0),
   the brand block (min-w-0 flex-1) and the identity/sign-in block, which has no
   shrink control and holds two buttons about 250px wide together.

   flex-1 is `flex: 1 1 0%`. With a zero basis and min-width:0 the brand block was
   the only thing in the row that could give, so it gave everything: at 390px the
   <h1> broke to one word per line and the agency line below it to three or four
   CHARACTERS per line. Every page on this layout was affected, the sign-in page
   included, and the wrap never happened because the row always found enough room
   by crushing the brand instead.

   ONE DECLARATION, ON THE BUTTONS ONLY — and the reason is how flex wrapping
   actually works. A line breaks on each item's FLEX BASE SIZE, not on how small it
   could be squeezed: items are placed in order, and one goes to the next line only
   when its base size does not fit what is left.

   So giving the buttons a 100% basis sends them, and only them, to row two. The
   brand keeps `flex-1` (base size 0), which always fits, so it stays on row one
   beside the logo and then GROWS into the space the buttons vacated. No crushing,
   because there is nothing left on that row to make room for.

   Two things tried first and rejected, both worse:
     flex: 1 1 100%  on the brand as well -- also stops the crushing, but the brand
       is then too big for row one too, so the logo is left alone on the first line
       with the wordmark orphaned beneath it: a mark floating in white space.
     flex: 1 1 auto  on the brand -- base size becomes max-content, about 460px,
       which does not fit beside the logo either, so it wraps for the same reason.

   40rem matches the breakpoint signin-lanes.css stacks its two cards at, so the
   masthead and the page below it reflow together rather than one at a time. */
@media (max-width: 40rem) {
  .pmast__acts {
    flex: 1 1 100%;
  }
}