/* Quiet Shelf rooms (QS-8): T1 Rooms and T2 Room confirmed. Tokens only (theme/tokens.css).
   QS-13: the layout of the reference T1 and T2 (the day segment, the room list as one card, the
   slot grid for the picked room, the policy line, Book at the foot; T2 centred under a round
   mark, the door code in a field box, Done at the foot). Rows and buttons are the shared
   components.css classes; slots are 48 (the floor), the segment options 48. Booked slots are
   struck through and say so in their name. The 16 px gutter is the shell's (#main). */

/* A screen fills the main area, so the last action can sit at the foot (the reference .fill). */
.qsRooms,
.qsRoomDone {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  box-sizing: border-box;
  min-height: 100%;
}

.qsRooms h1,
.qsRoomDone h1 {
  margin: 0;
}

/* The screen name, the size of the reference header title (20). */
#main .qsRooms h1 {
  font-size: var(--fs-action);
}

.qsRooms__intro,
.qsRooms__hint {
  margin: 0;
}

.qsRooms__hint {
  color: var(--muted);
}

/* Live rooms (Chronos): a room with no time left that day, and the patron's own bookings. */
.qsRooms__none {
  margin: 0;
  color: var(--muted);
}

.qsRooms__mine {
  display: grid;
  gap: 8px;
}

.qsRooms__mine .qsEyebrow {
  margin: 0;
}

/* Book while the live request runs (aria-disabled keeps focus on it): a visible busy cue. */
.qsRooms__book .qsBtn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* ---------- Day segment (the reference .seg) ---------- */
.qsRoomsSeg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--primary-soft);
  border-radius: var(--r-card);
}

.qsRoomsSeg__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: min-content;
  min-height: var(--target-min);
  padding: 4px 8px;
  /* Transparent, so forced colors still draws an edge round each option. */
  border: var(--line-w) solid transparent;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
  cursor: pointer;
}

.qsRoomsSeg__opt[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
}

.qsRoomsSeg__opt:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- Date field (Pick a day): the reference .field box ---------- */
.qsRoomsField {
  display: grid;
  gap: 2px;
  padding: 8px 16px;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsRoomsField:focus-within {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.qsRoomsField__label {
  color: var(--muted);
  font-weight: var(--weight-action);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qsRoomsField__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
}

.qsRoomsField__input:focus,
.qsRoomsField__input:focus-visible {
  outline: none;
}

/* ---------- The room list and the picked room's slots ---------- */
.qsRooms__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gap);
}

.qsRoom .qsRow__icon {
  align-self: center;
}

/* The picked room: the soft fill and a check at the end (not the fill alone, 1.4.1). */
.qsRoom__chk {
  display: flex;
  margin-inline-start: auto;
  color: var(--muted);
}

.qsRoom__meta {
  overflow-wrap: anywhere;
}

/* The reference .slots: three columns of 48 px cells. */
.qsSlots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

:root[data-text="large"] .qsSlots,
:root[data-text="larger"] .qsSlots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qsSlot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--target-min);
  padding: 4px;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-head);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.qsSlot:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* The pressed day, room and slot show a check mark as well as the fill (WCAG 1.4.1). */
.qsRoomsChk {
  display: inline-flex;
  flex: none;
}

.qsRoomsChk .ic {
  width: 1em;
  height: 1em;
}

.qsSlot__time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qsSlot__state {
  font-weight: var(--weight-action);
}

.qsSlot--booked {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.qsSlot[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: var(--weight-action);
}

/* The policy line (the reference .link in --muted), centred under the slots. */
.qsRooms__policy {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

/* Book sits at the foot of the screen, as the reference draws it. */
.qsRooms__book {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--gap);
}

.qsRooms__book .qsBtn,
.qsRoomDone > .qsBtn {
  width: 100%;
}

/* A Book that failed says so in text next to the button, never by color alone. */
.qsRooms__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: var(--line-w) solid var(--danger);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--fg);
  font-weight: var(--weight-action);
}

.qsRooms__error .ic {
  flex: none;
  margin-top: 2px;
  color: var(--danger);
}

/* ---------- T2 (the reference .ok-big, .field and .code) ---------- */
.qsRoomDone__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  text-align: center;
}

#main .qsRoomDone h1 {
  padding-inline-end: 0;
  font-size: var(--fs-section);
}

.qsRoomDone__mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--r-pill);
  background: var(--acc-events-wash);
  color: var(--success);
}

.qsRoomDone__mark .ic {
  width: 46px;
  height: 46px;
}

.qsRoomDone__when {
  margin: 0;
  color: var(--muted);
}

.qsRoomDone__code {
  padding: 13px 17px;
  background: var(--card);
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  text-align: center;
}

.qsRoomDone__label {
  margin: 0;
  color: var(--muted);
  font-weight: var(--weight-action);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qsRoomCode {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-code);
  font-weight: var(--weight-action);
  letter-spacing: var(--ls-code);
  line-height: var(--lh-head);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The Take me reminder at the booked time (contract 6): an offer in the page, never a jump. */
.qsRoomDone__remind {
  display: grid;
  gap: 8px;
  padding: var(--gap) var(--gutter);
  background: var(--card);
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
}

.qsRoomDone__remind p {
  margin: 0;
  font-weight: var(--weight-action);
}

.qsRoomDone__remindBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qsRoomDone__remindBtns .qsBtn {
  flex: 1 1 auto;
}

.qsRoomDone__remindSet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}

.qsRoomDone__remindSet .ic {
  flex: none;
  margin-top: 2px;
}

#qsRoomRemind:empty {
  display: none;
}

/* Done sits at the foot of the screen. */
.qsRoomDone > [data-rooms-action="done"] {
  margin-top: auto;
}

@media (forced-colors: active) {
  .qsRoomsSeg__opt,
  .qsSlot {
    border-color: ButtonText;
  }

  .qsSlot--booked {
    border-color: GrayText;
    color: GrayText;
  }

  .qsRoomsSeg__opt[aria-pressed="true"],
  .qsSlot[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }

  .qsRoomsChk .ic {
    color: currentColor;
  }

  .qsRooms__error,
  .qsRoomsField,
  .qsRoomDone__code {
    border-color: CanvasText;
  }
}