/* ── Auth gate — shared CSS for every page served by the audit hub. Included by both the hub index AND every individual audit HTML so the gate looks identical everywhere. */ :root { --auth-gate-bg: #1a1d23; --auth-gate-panel: #242831; --auth-gate-panel-hover: #2c313c; --auth-gate-text: #e8e8ec; --auth-gate-muted: #9ca0aa; --auth-gate-accent: #d4a04b; --auth-gate-border: #353a45; --auth-gate-red: #d46b5f; --auth-gate-amber: #d4a04b; } .auth-gate { position: fixed; inset: 0; background: var(--auth-gate-bg); color: var(--auth-gate-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 100000; padding: 24px; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .auth-gate h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .auth-gate p { color: var(--auth-gate-muted); font-size: 13px; margin: 0 0 12px; text-align: center; max-width: 360px; } .auth-gate .auth-error { color: var(--auth-gate-red); font-size: 13px; max-width: 360px; text-align: center; } .auth-gate .auth-loading { color: var(--auth-gate-muted); font-size: 13px; margin: 0; } .auth-gate .auth-google-btn { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 6px; padding: 10px 18px; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: background 0.12s, box-shadow 0.12s; } .auth-gate .auth-google-btn:hover:not(:disabled) { background: #f5f5f5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .auth-gate .auth-google-btn:disabled { opacity: 0.55; cursor: not-allowed; } .auth-gate .auth-google-btn svg { flex-shrink: 0; } /* Signed-in chip — sits top-right after the gate is dismissed. */ .auth-chip { position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; align-items: center; gap: 8px; background: var(--auth-gate-panel); border: 1px solid var(--auth-gate-border); border-radius: 999px; padding: 4px 10px 4px 12px; font-size: 12px; color: var(--auth-gate-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .auth-chip button { background: transparent; color: var(--auth-gate-muted); border: none; cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius: 4px; font-family: inherit; } .auth-chip button:hover { color: var(--auth-gate-text); background: var(--auth-gate-panel-hover); } /* Hide the page until the gate passes — every host page must add the `auth-gated` class to so the body starts hidden. The gate JS removes the class on successful auth. Falls back gracefully if JS is disabled: the page stays blank, which is what we want. */ html.auth-gated body > *:not(.auth-gate):not(.auth-chip) { visibility: hidden; }