/* lobby.css -- OWNER: the Rooms screen (the one-room lobby).
 *
 * Loaded by BOTH index.html and room.html after app.css, because the same
 * lobby pieces (who is here, the quiet feed, the next focus time) appear on
 * the Rooms tab and inside the room itself. In room.html it is loaded before
 * room.css, so the session screen can still override it.
 *
 * House rules that still apply here:
 *   - no url(), no raw hex (colour values come from styles/tokens.css)
 *   - at most five people are shown by name, the rest are a count
 *   - an empty room is stated calmly, never emphasised as a zero
 *   - honour prefers-reduced-motion
 *
 * There is very little here on purpose. The lobby is built out of the
 * components app.css already dresses -- rows, feed cards, notes, the sticky
 * primary bar -- and only the four things below have no home there.
 */

/* ===================================================================
   Who is in the room
   =================================================================== */

/* "+2 more". Deliberately a sentence in the muted voice rather than a badge:
   the people who did not fit are a fact about the room, not a call to open
   anything, and there is nothing behind it to open. */
.lobby-more {
  font-size: 14px;
  color: var(--muted);
}

/* ===================================================================
   The next focus time -- one line, with its own Reserve / Cancel
   =================================================================== */

/* The reserve control sits at the end of the line and must clear the 44px
   tap floor even though it is written in the small button size. */
.lobby-next .row-trail .btn {
  min-height: var(--tap);
  white-space: nowrap;
}

/* ===================================================================
   The one main button
   ===================================================================

   Same geometry as Focus, and for the same reason. A sticky bar inside
   .app-main lands ABOVE the dock by the height of that scroller's bottom
   padding -- the button floated 80px clear of the dock with lobby content
   still scrolling past underneath it, and it moved when you switched
   between Focus and Rooms. Pinning it against .app (the only positioned
   ancestor, and outside the scroller) puts the same button in the same
   place on both screens.

   Scoped to #panel-rooms on purpose: this file is loaded by room.html too,
   where .primary-bar must keep resting on the very bottom because that page
   has no dock. */

/* The band's height is --primary-bar-h in tokens.css, the same number the
   Focus bar uses. The lobby had its own 104px while Focus had 101px, so the
   button and the line above it shifted three pixels on every tab switch
   (ux-review F2). One token, one shape, no local override. */

/* .panel animates a transform, and a running transform makes the element the
   containing block for its absolutely positioned descendants. The app shell
   now attaches a one-shot entrance to the freshly rendered flow only when the
   destination actually changes. */
#panel-rooms {
  animation: none;
}

.lobby-flow {
  display: block;
  padding-bottom: var(--primary-bar-h);
}

/* Keyboard and screen-reader navigation scroll with the same clearance, so
   no control can land underneath the button. */
#panel-rooms :is(button, a[href], input, select, textarea) {
  scroll-margin-bottom: calc(var(--dock-h) + var(--safe-bottom) + var(--primary-bar-h) + 8px);
}

#panel-rooms .primary-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--dock-h) + var(--safe-bottom));
  z-index: 15;
  gap: 6px;
  padding: 10px var(--gutter) 12px;
}

/* The same 54px and the same 17px Focus uses. Switching tabs must not change
   the size of the button, only the screen behind it. */
#panel-rooms .primary-bar > .btn {
  width: 100%;
  min-height: 54px;
  font-size: 17px;
}

/* V2.1 persistent room directory. The legacy lobby rules above are kept for
   room.html, while this block owns the new Rooms tab. */
#panel-rooms:has(.room-directory-flow) {
  padding-bottom: 0;
  animation: none;
}

.room-directory-flow { padding-bottom: 28px; }
/* Keep the phone and full-height tablet flow unchanged. The wrapper exists so
   a short landscape viewport can place the room context beside the next real
   Focus action without reordering either region for assistive technology. */
.room-directory-overview { display: contents; }
.room-directory-head { padding: 22px var(--gutter) 18px; border-bottom: var(--rule) solid var(--line); }
.room-directory-intro { max-width: 620px; margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.room-current-line { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--green); font-size: 13px; }
.room-directory-switch { padding: 16px var(--gutter) 10px; }
.room-circle-current {
  padding: 8px var(--gutter);
  border-bottom: var(--rule) solid var(--ai-line);
  background: var(--ai-wash);
}
.focus-session-section { padding: 18px var(--gutter) 10px; border-bottom: var(--rule) solid var(--line); }
.focus-session-section .section-title { margin-top: 3px; font-size: 19px; }
.focus-session-heading { display: flex; align-items: center; gap: 8px; }
.focus-session-heading .section-title { flex: 0 1 auto; }
.focus-session-help-button {
  margin-left: -2px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.focus-session-help-button:active { background: transparent; }
.focus-session-note { max-width: 620px; margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.focus-session-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  margin-top: 14px;
  padding: 15px;
  border: var(--rule) solid var(--ai-line);
  border-radius: 16px;
  background: var(--ai-wash);
}
.focus-session-next.is-reserved,
.focus-session-next.is-live { border-color: var(--green); background: var(--green-soft); }
.focus-session-next-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ai-ink);
  background: var(--paper);
}
.focus-session-next.is-reserved .focus-session-next-icon,
.focus-session-next.is-live .focus-session-next-icon { color: var(--green); }
.focus-session-next-icon .icon { width: 21px; height: 21px; }
.focus-session-next-body { min-width: 0; }
.focus-session-next-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.focus-session-next-date { margin-top: 2px; font-size: 19px; line-height: 1.25; }
.focus-session-next-time { margin-top: 3px; color: var(--ink-soft); font-size: 13px; }
.focus-session-next > .btn { grid-column: 1 / -1; width: 100%; }
.focus-session-list { margin-top: 12px; border-top: var(--rule) solid var(--line); }
.focus-session-row { min-height: 62px; }
.focus-session-row.is-live { background: var(--green-soft); }
.focus-session-row.is-ended { color: var(--muted); opacity: 0.58; }
.focus-session-row.is-reserved { background: var(--green-soft); }
.focus-session-row .row-value { max-width: 102px; color: var(--green); font-size: 12px; text-align: right; }
.focus-session-subtitle { margin-top: 20px; font-size: 16px; }
.focus-one-off-schedule { margin-top: 9px; }
.focus-date-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(var(--tap), 1fr));
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.focus-date-picker::-webkit-scrollbar { display: none; }
.focus-date-choice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 2px;
  border: var(--rule) solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--paper);
  font: inherit;
  cursor: pointer;
}
.focus-date-choice.is-today:not(.is-selected) {
  border-color: var(--ai-line);
  background: var(--ai-wash);
}
.focus-date-choice.is-selected {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-soft);
}
.focus-date-choice:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.focus-date-weekday { overflow: hidden; max-width: 100%; font-size: 11px; font-weight: 700; text-overflow: ellipsis; }
.focus-date-number { font-size: 12px; white-space: nowrap; }
.focus-date-sessions .focus-session-list { margin-top: 8px; }
.focus-date-sessions > .note { margin-top: 8px; }
.focus-weekly-control { margin-top: 8px; padding: 14px 0; border-top: var(--rule) solid var(--line); border-bottom: var(--rule) solid var(--line); }
.focus-weekly-time-label,
.focus-weekly-days-label { display: block; color: var(--ink-soft); font-size: 13px; }
.focus-weekly-time-select { position: relative; margin-top: 6px; }
.focus-weekly-time-input {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 44px 11px 12px;
  border: var(--rule) solid var(--line);
  border-radius: 10px;
  appearance: none;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
}
.focus-weekly-time-input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.focus-weekly-time-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.focus-weekly-days-label { margin-top: 14px; margin-bottom: 6px; }
.focus-weekly-control .weekday-picker { width: 100%; }
.focus-post-booking { display: grid; gap: 10px; margin-top: 14px; }
.focus-session-help-body { display: grid; gap: 16px; }
.focus-session-help-schedule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: var(--rule) solid var(--ai-line);
  border-radius: 14px;
  background: var(--ai-wash);
}
.focus-session-help-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--ai-ink);
  background: var(--paper);
}
.focus-session-help-icon .icon { width: 21px; height: 21px; }
.focus-session-help-schedule strong { font-size: 15px; }
.focus-session-help-schedule p { margin-top: 2px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.focus-session-help-copy { color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.room-directory-list { border-top: var(--rule) solid var(--line); border-bottom: var(--rule) solid var(--line); }
.room-directory-row { min-height: 84px; }
.room-directory-description { margin-top: 3px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.room-directory-create { padding: 18px var(--gutter) 0; }

/* Short landscape has almost twice as much useful width as height. Treating it
   like a tall phone hid Join / Reserve below the dock, even though that is the
   screen's main live decision. Room context stays on the left; the first real
   Focus session and its 44px action stay visible on the right. Everything
   after that card remains in the normal document flow and scrolls normally. */
@media (min-width: 640px) and (max-width: 959.99px) and (max-height: 600px) {
  .room-directory-flow {
    display: grid;
    grid-template-columns: minmax(235px, 2fr) minmax(360px, 3fr);
    align-items: start;
    min-width: 0;
    padding-bottom: 0;
  }

  .room-directory-overview {
    display: block;
    min-width: 0;
  }

  .room-directory-head {
    padding: 10px 14px 9px max(14px, env(safe-area-inset-left, 0px));
  }

  .room-directory-head .eyebrow { margin-bottom: 3px; }
  .room-directory-head .headline { font-size: 22px; line-height: 1.12; }
  .room-directory-intro { margin-top: 5px; line-height: 1.4; }
  /* The selected room row immediately below already carries the same Current
     state. Removing the duplicate line keeps the alternate-room action clear
     of the dock without losing the active-room cue. */
  .room-current-line { display: none; }

  .room-directory-row {
    min-height: 64px;
    padding-block: 8px;
    padding-right: 14px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }

  /* The lock and membership count already identify the private room here.
     Its longer description is available unchanged in every taller layout. */
  .room-directory-description { display: none; }

  /* This repeats the safety promise in .room-directory-intro. Keeping both in
     290px of usable height would push the switch action underneath the dock. */
  .room-directory-overview > .note { display: none; }

  .focus-session-section {
    min-width: 0;
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) 12px 14px;
    border-left: var(--rule) solid var(--line);
  }

  .focus-session-section .eyebrow { margin-bottom: 3px; }
  .focus-session-section .section-title { margin-top: 0; }
  .focus-session-note { margin-top: 3px; line-height: 1.4; }

  .focus-session-next {
    grid-template-columns: 42px minmax(0, 1fr) minmax(118px, 138px);
    gap: 8px 10px;
    margin-top: 8px;
    padding: 10px 12px;
  }

  .focus-session-next > .btn {
    grid-column: auto;
    width: 100%;
    min-height: var(--tap);
    padding-inline: 10px;
  }

  .focus-session-next-date { font-size: 17px; }
}

@media (min-width: 960px) {
  .app-body:not(.room-body) #panel-rooms:has(.room-directory-flow) {
    display: block;
    padding-bottom: 0;
    background-image: none;
  }
  .room-directory-head,
  .room-circle-current,
  .focus-session-section,
  .room-directory-switch,
  .room-directory-list,
  .room-directory-create { width: min(760px, calc(100% - 64px)); margin-left: auto; margin-right: auto; }
  .room-directory-head { padding-top: 38px; }
  .focus-session-next { grid-template-columns: auto minmax(0, 1fr) auto; }
  .focus-session-next > .btn { grid-column: auto; width: auto; }
}

/* The line above the button says what pressing it will do. It is the only
   text inside the pinned band, so it is quiet and single-purpose: never a
   second action, never a second sentence.

   Identical to .focus-bar-context in focus-os.css, deliberately: same size,
   same line box, same alignment, one line with an ellipsis. It used to be
   14px, centred and free to wrap, so the same sentence sat at a different
   height and a different x-position depending on which tab you were on, and
   a long material title pushed the button down (ux-review F2).

   It is NOT hidden on a short viewport either. Focus keeps its line when the
   keyboard is up, and a band that loses a row on one tab only is the same
   jump by another route. */
.primary-context {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}