/* ════════════════════════════════════════════════════════════════════════════
   AUTH GATE + FAIL-CLOSED FIRST PAINT (MSAL Entra) — shared by every gated page
   ════════════════════════════════════════════════════════════════════════════
   Loaded by BOTH index.html (the tool) and tutorial.html (the LO tutorial).

   Each page ships body[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 its content before auth completes, even if JavaScript fails
   entirely. scripts/auth.js advances the state machine:
       checking | signed-out | signed-in | error

   The selector lists below are per-page (the two pages have different top-level
   body children). Selectors naming a region that doesn't exist on the current
   page are harmless no-ops, so both lists ship together in this one file.

   Tokens (--hfg-blue-deep / --hfg-teal / --hfg-teal-dark / --sans) come from
   styles/hfg-tool-shell.css, which both pages link — custom properties resolve
   at use time, so load order is free.

   NOTE: when a gated page gains a new top-level region, add it below. Under the
   v2 Tool Kit the tutorial renders into a SINGLE mount point (#tutorial, which
   TutorialKit fills with #tut-app + #tut-print), so the old v1 list of
   .app / .controls / .print-sheet is gone — those elements no longer exist.
   ──────────────────────────────────────────────────────────────────────────── */

/* index.html — the tool */
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,
/* tutorial.html — the LO tutorial (one mount point covers both rendered
   regions; the selectors are also listed by id in case the mount is bypassed) */
body:not([data-auth-state="signed-in"]) #tutorial,
body:not([data-auth-state="signed-in"]) #tut-app,
body:not([data-auth-state="signed-in"]) #tut-print{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 notice — scripts/profile.js writes into #lo-autofill-note by
   id after sign-in, and scripts/lo-override.js writes the "entering on behalf of
   another loan officer" explanation into the same element. Without this rule the
   message rendered as bare unstyled text. Restated [hidden] because the note
   ships hidden and a future display: rule on the class would otherwise outrank
   the UA rule. Matches the other eight tools. */
.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;}