@layer app {
/* ============================================================
   Session screen
   ============================================================ */
.session-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  min-height: 100dvh;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  gap: 16px;
  overflow-x: hidden;
  -webkit-user-select: auto;
  user-select: auto;
  overflow-y: auto;
  background: var(--page-bg);
  color: var(--page-text);
  position: relative;
}

/* Landing variant (homepage). The body is a sticky-footer flex column
   (main {flex:1}), so a full-height hero would push the footer a whole
   screen below the fold. Instead the hero grows to fill the space left above
   the footer (so the footer sits flush at the bottom on tall desktop screens
   with no dead gap) but collapses to its content height when the footer is
   tall, e.g. on mobile, so the footer stays reachable without a long scroll. */
.session-screen--landing {
  flex: 1 0 auto;
  min-height: 0;
  padding-bottom: 40px;
}

/* The hero fills the space above the footer, so the standard edge vignette
   faded the tile grid to a washed-out band right before the footer (the
   "gap between the animation and the footer"). Drop the vignette on the
   landing hero so the grid runs evenly all the way down to the footer. */
.session-screen--landing::before {
  display: none;
}

/* Vignette overlay */
.session-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--page-bg) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Session content above background + vignette */
.session-screen > :not(.sf-background) {
  position: relative;
  z-index: 2;
}

/* Animated background grid container */
.sf-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.sf-grid {
  opacity: 0.35;
}

.lobby .sf-grid {
  opacity: 0.15;
}

.session-screen .logo-tile {
  background: var(--cell-bg);
  border-color: var(--cell-brd);
  color: var(--flap-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.session-screen .logo-tile::after {
  background: var(--cell-split);
  z-index: 3;
}

.session-screen .logo-tile.accent {
  color: var(--orange);
}

.session-screen .name-input {
  background: var(--cell-bg);
  border-color: var(--cell-brd);
  color: var(--page-text);
}

.session-screen .name-input::placeholder {
  color: var(--page-sub);
}

.session-logo-link {
  text-decoration: none;
}

.session-screen .tagline {
  color: var(--page-sub);
}

.session-screen .btn-primary {
  box-shadow: 0 0 12px rgba(232,96,30,0.3);
}

.session-screen .session-divider {
  color: var(--page-sub);
}

.session-screen .session-divider::before,
.session-screen .session-divider::after {
  background: var(--cell-brd);
}

/* Split-flap logo tile internals (applies anywhere the split-flap controller mounts) */
.logo-tile .sf-char {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-flap);
  font-size: inherit;
  line-height: 1;
  user-select: none;
}

.logo-tile .sf-char-top { clip-path: inset(0 0 50% 0); }
.logo-tile .sf-char-bottom { clip-path: inset(50% 0 0 0); }

.logo-tile .sf-flap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  backface-visibility: hidden;
  background: var(--cell-bg);
  z-index: 2;
  box-shadow: none;
}

.logo-tile .sf-flap-top {
  top: 0;
  transform-origin: center bottom;
  border-radius: 4px 4px 0 0;
  overflow: visible;
}

.logo-tile .sf-flap-bottom {
  top: 50%;
  transform-origin: center top;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

.logo-tile .sf-flap-char {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-flap);
  font-size: inherit;
  line-height: 1;
  user-select: none;
  background: var(--cell-bg);
}

.logo-tile .sf-flap-top .sf-flap-char { top: 0; }
.logo-tile .sf-flap-bottom .sf-flap-char { bottom: 0; }

.logo-tile .sf-shadow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: black;
  pointer-events: none;
  opacity: 0;
}

.logo-tile .sf-shadow-lower { top: 50%; }
.logo-tile .sf-shadow-upper { top: 0; }

.logo-tiles {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  background: var(--cell-bg);
  border: 1px solid var(--cell-brd);
  border-radius: 3px;
  font-family: var(--font-flap);
  font-size: 22px;
  font-weight: 400;
  color: var(--flap-text);
  text-transform: uppercase;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.logo-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--cell-split);
  pointer-events: none;
}

.logo-tile.accent {
  color: var(--orange);
}

.logo-tiles-lg .logo-tile {
  width: 42px;
  height: 50px;
  font-size: 28px;
  border-radius: 4px;
}

.logo-tiles-lg {
  gap: 3px;
}

.tagline {
  color: var(--page-sub);
  font-size: 15px;
  letter-spacing: 1px;
}

/* Clerk component overrides — CSS is more reliable than JS appearance elements */

.session-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-top: 24px;
}

.name-input {
  background: var(--cell-bg);
  border: 1px solid var(--cell-brd);
  border-radius: var(--radius);
  color: var(--page-text);
  font-family: var(--font-flap);
  font-size: 20px;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: 2px;
}

.name-input::placeholder { color: var(--page-sub); }

.session-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  gap: 12px;
  color: var(--page-sub);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.session-divider::before,
.session-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cell-brd);
}

/* Clerk component overrides */
.cl-logoBox { display: none !important; }
#clerk-sign-in, #clerk-sign-up, #clerk-waitlist { min-height: 406px; }

}