/* The classroom session, as it appears on a screen: the teacher's broadcast strip, the lock, and the
   line that explains an empty page. Loaded by all three pages, so nothing here may assume a light
   background or a dark one — the overlay brings its own.
   js/session.js injects `[hidden] { display: none !important }` at first paint, so nothing in this
   file needs a `[hidden]` rule, and nothing in it may ever make a hidden element visible. */

/* ---------- the broadcast strip ----------
   One line from the front of the room, across the top of every screen at once, in the same dark as
   the site's banner so it reads as the building talking rather than the page. Fixed, because on
   RaceSim there is no page to sit at the top of. */
.session-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 34px;
  padding: 6px max(16px, env(safe-area-inset-left)) 6px max(16px, env(safe-area-inset-right));
  background: var(--banner);
  color: #F2F4F7;
  font-size: var(--t-sm); font-weight: 500; line-height: 1.3; text-align: center;
  text-wrap: balance;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* a small live mark, so a line that has been up a while still reads as being said now */
.session-bar::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #FFA25C;
}

/* The strip is fixed, so on a page that scrolls the banner steps down out from under it. `~` works
   because js/session.js puts the strip in as the body's first child. */
.session-bar:not([hidden]) ~ .top { margin-top: calc(34px + var(--s-3)); }

/* ---------- the line that explains a page with pieces missing ----------
   A dashed edge, because a dashed edge is how a drawing says "this space is reserved". Nothing on
   this page is broken; the rest of it has not been handed out yet. */
.stage-note {
  position: relative;
  max-width: 64ch; margin: 0 auto var(--s-5);
  padding: var(--s-3) var(--s-4) var(--s-3) 44px;
  border: 1px dashed var(--ink-3); border-radius: var(--radius);
  color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5;
}
.stage-note::before {
  content: ""; position: absolute; left: var(--s-4); top: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--orange);
}
/* inside RaceSim's start card it is one note in a column, not a page header */
.menu-card .stage-note { margin: 0 0 var(--s-4); max-width: none; }

/* ---------- the lock ----------
   A teacher has paused the room. Nothing has broken and nothing has been lost, so this screen is
   quiet: no red, no warning triangle, no shouting. Dark glass over whatever was there, and one card
   in the middle saying so. */
.lockout {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--s-5) max(16px, env(safe-area-inset-left)) var(--s-5) max(16px, env(safe-area-inset-right));
  background: rgba(13, 15, 18, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lockout:focus { outline: none; }

.lockout-card {
  max-width: 34rem; width: 100%;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: lockout-in 0.28s ease-out both;
}
@keyframes lockout-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.lockout-card h1 {
  font-size: var(--t-2xl); letter-spacing: -0.02em; line-height: 1.1;
  padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--orange);
}
.lockout-card p {
  margin-top: var(--s-4);
  color: var(--ink-2); font-size: var(--t-md); line-height: 1.55;
  max-width: 46ch;
}
/* what the teacher actually said, set apart from the standing explanation above it */
.lockout-card .lockout-say {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--paper); border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink); font-weight: 600; font-size: var(--t-md);
}

/* nothing behind the lock should scroll away under it */
body.is-locked { overflow: hidden; }

@media (max-width: 480px) {
  .lockout-card { padding: var(--s-5) var(--s-4); }
  .lockout-card h1 { font-size: var(--t-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .lockout-card { animation: none; }
}