/* ──────────────────────────────────────────────────────────────────────────
   Login gate — AIHRA (added 2026-10-14)

   Purpose: before authentication the page shows ONLY the sign-in card, so
   an anonymous visitor can't see course content (simulation, deliverables,
   stats, journals, nav links to Drive folders, admin tools).

   How it works:
     • index.html sets <body class="is-locked"> so the locked state applies on
       first paint — no flash of content while Supabase resolves the session.
     • script.js toggles that class in refreshUI() from state.currentUser, so
       it flips automatically on login, logout and session restore.

   To revert: delete the class from <body> and remove this file's <link>.
   ────────────────────────────────────────────────────────────────────────── */

/* Hide everything that isn't the sign-in card */
body.is-locked .hero-nav,
body.is-locked .hero-status,
body.is-locked .top-grid > .team-panel,
body.is-locked #admin-panel,
body.is-locked #deliverables-panel,
body.is-locked .grid,
body.is-locked #summary,
body.is-locked #ask-btn,
body.is-locked #ask-window {
  display: none !important;
}

/* Collapse the 12-column top grid to one centred card */
body.is-locked .top-grid {
  display: block;
  padding-top: 3vh;
}

body.is-locked .top-grid > .auth-panel {
  grid-column: auto;
  max-width: 440px;
  margin: 0 auto;
}

/* A quiet line under the form, no markup change needed */
body.is-locked .top-grid > .auth-panel::after {
  content: "Course content is available after sign-in.";
  display: block;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  text-align: center;
  color: var(--muted, #64748b);
  opacity: 0.8;
}

/* Keep the brand header tidy on the gate screen */
body.is-locked .hero {
  border-bottom: none;
  padding-bottom: 0.5rem;
}