/* Housekeeping board + the out-of-order drawer (#471 MR2).
 *
 * The page is stacked, lists first (DD3): canvas `.os-section-head` titles over
 * (1) the amber "guests booked into out-of-order rooms" list, (2) the out-of-order
 * list and (3) the room-card grid. Both lists are the FO worklist's row family
 * (`.hos-rwrows` / `.hos-rwrow`, fo_board.css) — extended there, not re-minted
 * here. This sheet owns only what is Housekeeping's: the section rhythm, the room
 * cards (the old inline styles, DF12) and the drawer's own bits.
 */

/* ── Page rhythm ─────────────────────────────────────────────────────────── */
.hos-hk { display: flex; flex-direction: column; gap: var(--space-8); }
.hos-hk__warnico { color: var(--warning); }
.hos-hk__quiet { margin: 0; padding: 0 var(--space-1); }

/* ── Room cards (tasks/073 A5 — card-grid gap is 16px, never --gutter) ───── */
.hos-hkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.hos-hkcard {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hos-hkcard__head { display: flex; align-items: flex-start; gap: var(--space-2); }
.hos-hkcard__id { flex: 1; min-width: 0; }
.hos-hkcard__no { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--leading-md); }
.hos-hkcard__reason {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--muted);
}
.hos-hkcard__reason svg { flex: none; color: var(--muted-2); }
.hos-hkcard__acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  border-top: 1px solid var(--hairline-2);
  padding-top: var(--space-2);
  margin-top: auto;
}
.hos-hkcard__acts form { margin: 0; }
.hos-hkcard__end { margin-left: auto; }

/* ── The schedule / edit drawer ──────────────────────────────────────────── */
.hos-blkdrawer__alert { margin-bottom: var(--space-4); }
.hos-blkdrawer__ways { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hos-blkdrawer__fixed { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.hos-blkdrawer__until { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-3); }
.hos-blkdrawer__until legend { padding: 0; }
.hos-blkdrawer__back[hidden] { display: none; }
.hos-blkdrawer__hint { margin: var(--space-1) 0 0; }
.hos-blkdrawer__preview { margin-top: var(--space-6); }

/* A short list of guests or blocks — bare rows + hairlines inside a card (the drawer preview, Settings → Rooms). */
.hos-blklist { list-style: none; margin: 0; padding: 0; }
.hos-blklist__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline-2);
}
.hos-blklist__row:first-child { padding-top: 0; }
.hos-blklist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hos-blklist__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.hos-blklist__more { margin: var(--space-2) 0 0; }
.hos-blklist__note { margin: var(--space-3) 0 0; }
.hos-blklist + .hos-blklist__note, .hos-blklist__more + .hos-blklist__note { margin-top: var(--space-3); }

/* DF11 — on a phone the drawer takes the whole width (on Housekeeping AND in the Front Desk board's drawer),
   its pinned action bar clears the home indicator, and every control is a ≥44px target. */
.hos-blkdrawer__bar { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) {
  .hos-odrawer-panel:has(.hos-blkdrawer) { width: 100%; }
  .hos-hk .hos-rwrow__act .os-btn,
  .hos-hkcard__acts .os-btn,
  .hos-blkdrawer .os-btn,
  .hos-blkdrawer__bar .os-btn,
  .hos-blkdrawer .os-segmented__option { min-height: 44px; }
  .hos-blkdrawer__close { min-width: 44px; min-height: 44px; }
}