/* Rent vs. Buy — MSAL auth gate + fail-closed visibility (styles/auth.css)
   Loaded LAST-but-one (before embed.css) by BOTH index.html and tutorial.html,
   so the gate always wins. It cannot live in app.css: tutorial.html does not
   load that file, and duplicating the gate into a second stylesheet would
   guarantee drift.

   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 tool can
   never flash before auth completes, even if JavaScript fails entirely.
   scripts/auth.js advances body[data-auth-state]. There is no bypass.

   Tokens come from hfg-tokens.css / hfg-tool-shell.css (the v2 layer carries
   --hfg-blue-deep and --hfg-teal, which the v1 hfg-base.css used to define).

   ⚠ THE SELECTOR LIST IS PER-PAGE AND MUST BE COMPLETE. Anything top-level and
   unlisted flashes before auth resolves. index.html's children are .site-nav /
   #mv / #pg1 / #pg2; tutorial.html's single child is #tutorial (TutorialKit
   renders #tut-app and #tut-print into it). Selectors naming a region absent
   from the current page are harmless no-ops. */
body:not([data-auth-state="signed-in"]) .site-nav,
body:not([data-auth-state="signed-in"]) #mv,
body:not([data-auth-state="signed-in"]) #pg1,
body:not([data-auth-state="signed-in"]) #pg2,
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,.55);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:600;cursor:pointer;}
.auth-btn:hover{background:var(--hfg-teal-dark);}
/* The gate button ships with the [hidden] attribute and auth.js un-hides it.
   Nothing here sets display on it, so the UA [hidden] rule keeps working — but
   restate it anyway, because that is exactly the bug .nav-logo-link had. */
.auth-btn[hidden]{display:none;}

/* Graph /me headshot inside the MOBILE share-sheet avatar (scripts/profile.js);
   when no photo is available the .av keeps its initials text. The DESKTOP report
   avatar is no longer .rp .lo .av — under the v2 kit ReportKit builds it as
   .n-av, and its .has-photo rules live beside it in hfg-report-v2.css. */
#mv .sheet .lo .av img{width:100%;height:100%;border-radius:50%;object-fit:cover;}

/* Graph autofill status on the LO card. A block-level note under .lo-head (the
   v2 card has no .note-box to nest a span in), emphasized so the "review before
   printing" ask stands out. profile.js writes the text and clears [hidden]. */
.lo-autofill-note{margin:0 0 15px;padding:9px 13px;border-radius:9px;background:var(--hfg-teal-pale);color:var(--hfg-blue-deep);font-size:12px;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;}