/* Lobby (Vorraum) — the waiting surface of the tenant activation gate,
   rendered by Tenant::LobbiesController in layouts/lobby. Deliberately a
   WELCOME, not a warning: logo pinned top, greeting centered in the
   viewport, one slim activation hint. */

.lobby-page {
  position: relative;
  min-height: 100vh;
}

/* Organization switcher parked in the top corner, out of the reading line.
   A native <details> disclosure (no Bootstrap dropdown JS on this layout)
   dressed in the Tabler dropdown classes. */
.lobby-switcher {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
}

/* On narrow screens the corner would collide with the centered content:
   let the switcher flow at the top of the stack instead. */
@media (max-width: 575.98px) {
  .lobby-switcher {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    margin-bottom: 1.5rem;
  }
}

.lobby-switcher summary {
  list-style: none;
}

.lobby-switcher summary::-webkit-details-marker {
  display: none;
}

.lobby-switcher[open] .dropdown-menu {
  display: block;
  top: 100%;
  inset-inline-end: 0;
  inset-inline-start: auto;
  margin-top: 0.25rem;
}

.lobby {
  max-width: 44rem;
  margin-inline: auto;
}

/* Small, subtle brand mark above the greeting (logo-icon.svg brings its
   own soft-blue rounded background). */
.lobby-hero-mark {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
}

.lobby-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.lobby-tagline {
  color: var(--tblr-secondary);
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* The "almost there" checklist card: one done item, one open todo, and —
   for members — the admins to ping, separated by a divider. One reading
   line, no competing blocks. */
.lobby-todo {
  width: 100%;
  max-width: 30rem;
  box-shadow: var(--shadow-sm);
}

.lobby-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.lobby-check-item + .lobby-check-item {
  margin-top: 0.75rem;
}

/* The icon wrapper is exactly one text line tall (1lh resolves against the
   item's text metrics, NOT the svg's own enlarged line-height) and centers
   the icon inside it: pixel-exact on the first line at any font size. */
.lobby-check-icon {
  display: inline-flex;
  align-items: center;
  height: 1lh;
  flex-shrink: 0;
}

.lobby-check-item.is-done {
  color: var(--tblr-secondary);
}

.lobby-check-item.is-done .lobby-check-icon {
  color: var(--tblr-success);
}

.lobby-check-item.is-open {
  font-weight: 500;
}

.lobby-check-item.is-open .lobby-check-icon {
  color: var(--traqx-blue-600);
}

.lobby-todo-action {
  margin-top: 1rem;
  padding-inline-start: 2.125rem;
}

.lobby-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Booking slot (US-180): the click-to-load Brevo calendar. The calendar
   needs more room than the slim checklist card — once the panel is open,
   the card grows (:has() is fine across the browser baseline, FE-6). */
.lobby-todo:has(.lobby-booking-panel:not([hidden])) {
  max-width: 44rem;
}

.lobby-booking-panel {
  margin-top: 1rem;
}

.lobby-booking-frame {
  width: 100%;
  height: min(75vh, 46rem);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}

/* The escape-hatch line under the opened calendar: deliberately quiet
   (text hierarchy — before the click the button is the only element). */
.lobby-booking-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}