/* ==========================================================================
   OTROTL guest / authenticated view contract — ONETIMELOGIN hub.

   Companion to /static/js/auth-state.js. Load BOTH on every public page:

     <link rel="stylesheet" href="/static/css/auth-state.css">
     <script src="/static/js/auth-state.js" defer></script>

   Per DOCS\NEW_WEBSITE_BUILD\LANDING_PAGE_AUTH_VIEWS_GATE.md.

   ── WHY THIS IS CSS AND NOT classList.toggle('hidden', ...) ────────────────
   These pages write navs with the standard Tailwind idiom
   `class="hidden sm:flex"`. In the exact stylesheet the hub loads
   (/vendors/tailwind/tailwind.min.css):

     .hidden{display:none}      byte 20,262        top level, all widths
     .sm\:flex{display:flex}    inside @media (min-width:640px)

   Both are single-class selectors — equal specificity (0,1,0) — so the tie
   breaks on source order, and the responsive utility is emitted MEGABYTES
   later. Adding `hidden` from JS therefore does NOTHING at >=640px, and
   removing it leaks the desktop nav onto mobile (no display utility applies
   below the breakpoint, so the div falls back to display:block).

   The gating has to be CSS with a higher-specificity selector. Every rule
   below is (0,1,1)+ with !important, which outranks .sm\:flex outright, so
   source order stops mattering.

   ── THE ONE INVARIANT ──────────────────────────────────────────────────────
   The nav rules only ever force `display:none`. NEVER force `display:flex` on
   a responsive container — `#auth-user-nav{display:flex!important}` would
   override `hidden sm:flex` in BOTH directions and leak the desktop nav onto
   mobile. Hiding one side lets the element's own responsive utilities keep
   deciding the display mode of the side that is visible.

   ── PRESENTATION, NOT AUTHORIZATION ────────────────────────────────────────
   `is-authenticated` is a CSS class; any visitor can set it from the console.
   Never put a secret or a privileged control behind these selectors alone.
   The server authorizes every endpoint independently.
   ========================================================================== */

/* ── Nav containers: hide the side that does not apply. display:none ONLY. ── */
body.is-authenticated       #auth-guest-nav,
body.is-authenticated       #mobile-guest-nav,
body:not(.is-authenticated) #auth-user-nav,
body:not(.is-authenticated) #mobile-user-nav { display: none !important; }

/* ── Section-level contract (byte-identical to the fleet standard) ──────────
   Guest-first: the authenticated block ships in the HTML for everyone and is
   revealed only after /auth/me resolves 2xx. Googlebot runs no session, so it
   must see marketing copy; and one HTML body stays CDN-cacheable for all. */
[data-auth-show="authenticated"] { display: none !important; }
body.is-authenticated [data-auth-show="authenticated"] { display: block !important; }
body.is-authenticated [data-auth-show="guest"]         { display: none  !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="flex"] { display: flex !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="grid"] { display: grid !important; }

/* ── Owner state ───────────────────────────────────────────────────────────
   auth-state.js adds `is-site-owner` when /auth/me reports the WEBSITE_OWNER
   role code, and retargets `a[data-auth-dashboard]` to /owner/dashboard. No
   display rules are defined for it here on purpose: an earlier revision
   shipped `[data-auth-audience="owner"|"personal"]` selectors that no page
   ever used, which is worse than nothing — a dangling contract invites the
   next author to add matching markup and assume it was tested. Add rules here
   only alongside the markup that needs them. */

/* ── Loading state ─────────────────────────────────────────────────────────
   auth-state.js stamps `is-auth-loading` before the fetch and clears it on
   resolution. Guest chrome stays visible throughout (never guess), so this
   hook exists only for pages that want to suppress a spinner or defer a
   transition. Deliberately no display rules — adding any here would produce
   the flash of wrong content the guest-first default exists to prevent. */