/* ═══════════════════════════════════════════════════════════════════
   HFG AUTH GATE + FAIL-CLOSED FIRST PAINT (styles/auth-gate.css)

   Shared by EVERY gated page (index.html and tutorial.html). It lives in its
   own file rather than in app.css because tutorial.html does not load
   app.css — duplicating the rules into a second stylesheet would guarantee
   drift, and a drifted fail-closed list is a page that flashes its content
   before auth resolves.

   The body ships data-auth-state="checking" in STATIC HTML, and every
   protected region stays display:none in ANY state except signed-in — so no
   page can flash before auth completes, even if JavaScript fails entirely.
   scripts/auth.js advances the state machine:
     checking | signed-out | signed-in | error

   The selector list below is the UNION of both pages' top-level protected
   regions. A selector naming a region absent from the current page is a
   harmless no-op, so ONE list serves both:
     index.html    .site-nav  #pg1  #pg2  #mv
     tutorial.html .site-nav  #tutorial
   Add any NEW top-level region here — anything unlisted flashes.

   Tokens (--hfg-blue-deep, --hfg-teal…) come from styles/hfg-tool-shell.css.
   Custom properties resolve at use time, so this file's position in the link
   order is free.
   ═══════════════════════════════════════════════════════════════════ */

body:not([data-auth-state="signed-in"]) .site-nav,
body:not([data-auth-state="signed-in"]) #pg1,
body:not([data-auth-state="signed-in"]) #pg2,
body:not([data-auth-state="signed-in"]) #mv,
body:not([data-auth-state="signed-in"]) #tutorial{display:none!important;}
body[data-auth-state="signed-in"] .auth-gate{display:none;}

.auth-gate{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--hfg-blue-deep);text-align:center;padding:24px;}
.auth-title{font-family:var(--sans);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.01em;}
.auth-msg{font-size:13px;color:rgba(255,255,255,.45);max-width:380px;line-height:1.55;}
.auth-btn{margin-top:8px;padding:10px 22px;border-radius:8px;background:var(--hfg-teal);border:none;color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;}
.auth-btn:hover{background:var(--hfg-teal-dark);}
.auth-btn[hidden]{display:none;}

/* LO Graph-autofill note (shown after sign-in when /me populated fields).
   Sits inside the v2 Loan Officer card, between .lo-head and the field grid. */
.lo-autofill-note{margin:0 0 14px;padding:9px 13px;border-radius:8px;background:var(--hfg-teal-pale);color:var(--hfg-blue-deep);font-size:12px;line-height:1.5;}
.lo-autofill-note[hidden]{display:none;}

/* The gate is chrome, never client-facing output. */
@media print{ .auth-gate{display:none!important;} }

/* Override switch, dark-shell twin of #pg1 .lo-ovr (styles/hfg-input-v2.css).
   Same markup and the same visually-hidden-checkbox + .track pattern; only the
   palette differs. Kept beside the LO autofill note so the two LO-card
   additions stay together. */
#mv .lo-ovr{margin:0 0 12px;padding:11px 12px;border:1px solid var(--line,rgba(150,190,220,.16));border-radius:11px;background:var(--panel2,#123a5c);}
#mv .lo-ovr-sw{position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;}
#mv .lo-ovr-sw input{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
#mv .lo-ovr-sw .track{position:relative;flex:0 0 38px;width:38px;height:22px;border-radius:22px;background:rgba(150,190,220,.26);transition:background .15s ease;}
#mv .lo-ovr-sw .track i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s ease;}
#mv .lo-ovr-sw input:checked + .track{background:var(--lime,#bcd64a);}
#mv .lo-ovr-sw input:checked + .track i{transform:translateX(16px);}
#mv .lo-ovr-sw input:focus-visible + .track{outline:2px solid var(--lime,#bcd64a);outline-offset:2px;}
#mv .lo-ovr-sw .lbl{font-size:13px;font-weight:800;color:var(--ink,#eef5fc);line-height:1.35;}
#mv .lo-ovr-hint{margin-top:6px;padding-left:49px;font-size:11.5px;font-weight:600;line-height:1.5;color:var(--mut,#7794ac);}

/* Mobile LO Graph-autofill note (dark shell twin of .lo-autofill-note). The
   #m_loNote element it styles is written by scripts/lo-override.js; without this
   rule the message rendered as bare unstyled text on the live screen. */
#mv .lo-auto-note{background:rgba(188,214,74,.1);border:1px solid rgba(188,214,74,.32);border-radius:11px;padding:9px 12px;margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink2,#aecade);}
#mv .lo-auto-note[hidden]{display:none;}