/* ── AUTH GATE + FAIL-CLOSED FIRST PAINT (MSAL Entra) ──
   Shared by BOTH gated pages (index.html, tutorial.html) — a second gated page
   has different top-level body children and does not load app.css, so the gate
   lives in its own file rather than being duplicated and left to drift.

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

   NOTE: extend the selector list with any OTHER top-level protected region on
   either page. Selectors naming a region absent from the current page are
   harmless no-ops. */

/* index.html regions */
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 regions (#tutorial is the mount host for #tut-app + #tut-print) */
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 note (shown after sign-in when /me populated fields).
   index.html only; scripts/profile.js writes into it by id. */
.lo-autofill-note{margin:0 0 15px;padding:9px 13px;border-radius:9px;background:var(--rp-limebg,#f2f6df);border:1px solid #d6e29a;border-left:4px solid var(--rp-lime-ink,#7f9a16);color:var(--rp-ink2,#41607a);font-size:11px;font-weight:700;line-height:1.5;}
.lo-autofill-note[hidden]{display:none;}

/* 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;}