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

   Extracted from the v1 styles/index.css during the v2 Tool Kit reskin, where it
   sat in the input screen's page stylesheet. It lives in its own layer now so the
   gate is not tangled up with the v2 kit swap, and so a second gated page could
   pick it up by adding one <link>.

   ⚠ LOADED BY index.html ONLY. tutorial.html is deliberately NOT auth-gated and
   loads neither this file nor the MSAL chain. Do not link it there casually:
   tutorial.html's <body> has no data-auth-state attribute, so the fail-closed
   selector below would match forever and blank the whole page. Gating that page
   means adding the attribute, the #auth-gate markup, and scripts/auth.js too.

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

   Tokens (--hfg-*, --sans) come from styles/hfg-tool-shell.css, which
   carries the legacy HFG aliases forward into the v2 layer. Load this
   file AFTER the kit so those tokens resolve.
   ═══════════════════════════════════════════════════════════════════ */

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"]) #wnr,
body:not([data-auth-state="signed-in"]) #mv{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,#072438);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,#499fbe);border:none;color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;}
.auth-btn:hover{background:var(--hfg-teal-dark,#2f7c9b);}
/* display:flex above outspecifies the UA [hidden] rule — restate it. */
.auth-btn[hidden]{display:none;}

/* ── Graph autofill note in the Loan Officer card ──
   scripts/profile.js unhides this after a successful /me autofill. */
.lo-autofill-note{font-size:11.5px;color:var(--hfg-teal-dark,#2f7c9b);background:var(--hfg-teal-pale,#d8e9f1);border-radius:8px;padding:8px 12px;margin-bottom:12px;line-height:1.5;}
.lo-autofill-note[hidden]{display:none;}

@media print{
  .auth-gate{display:none!important;}
  .lo-autofill-note{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);}