/* ==========================================================================
   Landing screen — mirrors the sportsacademy.school hero
   ========================================================================== */

.landing-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 48px;
  background:
    radial-gradient(
      900px 480px at 78% -10%,
      rgba(0, 74, 173, 0.35),
      transparent 65%
    ),
    radial-gradient(
      700px 420px at 12% 110%,
      rgba(245, 158, 11, 0.12),
      transparent 60%
    ),
    var(--surface-base);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Centered via margin:auto (not justify-content:center): when the content
   is taller than the window — guest form open at the 960×640 minimum —
   justify-content would clip BOTH ends unreachably; margin:auto degrades
   to a normal scroll instead. */
.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: auto;
}

/* The DAILY/CALL lockup mirrors the sportsacademy.school hero
   (Index.tsx SlamHeadline): words stacked as flex children under
   leading 0.82, so the word gap is this explicit `gap`, not font
   leading — the shared h1 line-height of 1.2 reads as ~48px of air
   inside IntegralCF's all-caps metrics. Also used by the fatal-error
   screen in app.ts (inline font-size), hence the em gap. */
.landing-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125em;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.82;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 16px 0 24px;
}

.landing-headline .accent {
  color: var(--color-accent);
}

.landing-sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 40px;
  text-wrap: balance;
}

.landing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Running-app version, shown for debugging (v0.1.123 / v0.1.0 (dev)).
   Fixed so it stays put when the screen scrolls. */
.app-version {
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Settings gear, mirrors .app-version's corner style (fixed for the same
   reason: stays put when the screen scrolls). Replaced the bare "Logs"
   link — revealing logs now lives inside the panel, beside the update
   check and the permission states. */
.landing-settings {
  position: fixed;
  bottom: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
}

.landing-settings svg {
  width: 18px;
  height: 18px;
}

.landing-settings:hover,
.landing-settings.is-active {
  color: var(--color-accent);
  background: rgb(255 255 255 / 8%);
}

.landing-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

.guide-passcode {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.landing-error {
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fca5a5;
  font-size: 14px;
  max-width: 520px;
}

/* --- Mandatory update block (the join gate's screen) ---------------------- */

/* Amber, not red: nothing is broken and the student did nothing wrong — the
   app is about to fix itself. The error banner's red is reserved for failures. */
.update-required {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.update-required-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fcd34d;
}

.update-required-body {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #cbd5e1);
}

.update-required-status {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
}

.update-required-action {
  margin-top: 4px;
}

/* --- Timeback launch session (TEX-2682) ----------------------------------- */

.launch-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.launch-identity {
  color: var(--text-muted);
  font-size: 15px;
}

.launch-identity strong {
  color: var(--text-primary, inherit);
}

.switch-timeback-user {
  margin-top: -8px;
  color: var(--text-muted);
  font-size: 14px;
}

.switch-timeback-user:disabled {
  cursor: default;
  opacity: 0.65;
}

.switch-timeback-user-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.launch-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 15px;
}

/* --- Host session picker + private room (session scoping, TEX) ------------ */

.session-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--color-accent-hover);
}

.private-room-toggle {
  align-self: center;
}

/* Collapsed-reveal forms (host private room, guest fallback) share one
   contained panel treatment so secondary flows read as intentional
   sub-contexts rather than floating fields. */
.reveal-panel {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}

.private-room-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.private-room-role {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.private-room-role label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* --- Local dev/e2e selector (TEX-3582) -------------------------------------
   One shared form: room id (when shown) + name over the two role buttons,
   all on a single centered column so every row shares one width. */

.local-join {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.local-join .field-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Guest fallback (server builds) ---------------------------------------- */

/* One flex gap owns the button → hint → guest link → guest form rhythm
   (the global reset zeroes margins, which used to leave the hint touching
   the button). Hidden children collapse out of the gap via [hidden]. */
.timeback-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Helper caption under the CTA — deliberately smaller than .landing-sub
   so it doesn't compete with the tagline. */
.landing-hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 0;
  text-wrap: balance;
}

.guest-link {
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.guest-link:hover {
  color: inherit;
}

.guest-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

/* --- Auto-update screen (TEX-2688) ---------------------------------------- */

.update-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 48px;
  background:
    radial-gradient(
      900px 480px at 78% -10%,
      rgba(0, 74, 173, 0.35),
      transparent 65%
    ),
    radial-gradient(
      700px 420px at 12% 110%,
      rgba(245, 158, 11, 0.12),
      transparent 60%
    ),
    var(--surface-base);
  overflow: hidden;
}

.update-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  max-width: 520px;
}

.update-title {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--text-primary);
  margin: 0;
}

.update-progress {
  width: 320px;
  max-width: 80vw;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.update-progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: var(--glow-accent);
  transition: width var(--duration-normal) var(--ease-out);
}

.update-percent {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

/* "Do not close the app…" — shown during downloading/restarting/migrating
   (the windows where a quit costs an install attempt). The quiet-caption
   treatment (user-picked 2026-09-01 over chip/footnote/divider variants):
   a plain muted line in flow right beneath the percent/countdown, styled
   like the screen's other hint text — no border, no dot, no rule. */
.update-warning {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

.update-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.update-actions .btn {
  min-width: 240px;
}

.update-hint {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 400px;
  margin: 0;
}

/* --- Post-update / held-link banner (landing) ---------------------------- */

.updated-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--radius-pill);
  background: rgba(87, 201, 155, 0.12);
  border: 1px solid rgba(87, 201, 155, 0.4);
  color: var(--color-success);
  font-size: 14px;
  font-weight: 600;
}

.updated-banner button {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  transition: color var(--duration-fast) var(--ease-default);
}

.updated-banner button:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}