/* Business Management Dashboard, a hotel front office's pieces (xd-stay-, xd-inbox, xd-outlet): the request inbox,
   the outlet summaries and what a stay request shows of its own. Drawn in the business's tokens. Layout only. */

/* A column heading in a wide table sits over the scroller's edge cue: in ink it stays readable there in this house's light theme. */
.xd-stay-frame .x-table thead th { color: var(--x-ink); }

/* What was made in this tab is listed as whole tables, so that page takes the full column; one record keeps its reading width. */
.xd-stay-frame .xd-record:has(> .xd-section) { max-width: 1200px; }

/* The head of a box on the overview: a small picture of the place the records come from, its name, the heading. */
.xd-stay-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xd-stay-head-t { display: grid; gap: 2px; min-width: 0; }
.xd-stay-thumb { width: 56px; border-radius: var(--x-radius, 8px); }
:where(#main) .xd-stay-head h2 { font-size: 1.3125rem; }

/* The inbox: two short groups, unread first. */
.xd-inbox-g { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--x-hair); }
.xd-inbox .xd-row:first-child { padding-top: 8px; }

/* Under the chart of arrivals: the way to the same requests as a list. */
.xd-stay-arrivals { --x-gap: 6px; }
.xd-stay-links { display: flex; flex-wrap: wrap; gap: 0 24px; padding-inline: 2px; }
/* Each link keeps a full line of its own height, so two that stack on a phone never share a place to press. */
.xd-stay-links li { display: flex; align-items: center; min-height: 44px; }

/* An outlet: its lines of status, then what else it wants said. */
.xd-outlet .xd-part-list { padding-top: 4px; }

/* One stay request: the room it names beside that room's own facts. */
.xd-stay { --x-gap: 14px; }
.xd-stay-pref { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface-2); }
.xd-stay-pref-in { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 14px; align-items: start; }
.xd-stay-pref-in > * { min-width: 0; }
.xd-stay-pic { width: 100%; border-radius: var(--x-radius, 8px); }
.xd-stay-pref-t { display: grid; gap: 6px; }
.xd-stay-room { font: var(--x-display-weight, 600) 1.375rem/var(--x-lh-head) "x-figures", var(--x-display, var(--x-text)); }
.xd-stay-facts { --x-fact-label: 6.5rem; font-size: .9375rem; }
.xd-stay-facts .x-fact { padding: 6px 0; }
.xd-stay-how { display: grid; gap: 4px; }
.xd-stay-how ul { display: grid; gap: 2px; }
.xd-stay-pref .x-note { background: var(--x-surface); }
@media (max-width: 29.99em) { .xd-stay-pref-in { grid-template-columns: minmax(0, 1fr); } .xd-stay-pic { max-width: 12rem; } }

.xd-stay-tools { display: flex; flex-wrap: wrap; gap: 10px; }
/* At a reader's doubled text size a long label wraps inside its button, which is never wider than the panel. */
.xd-stay .x-btn { max-width: 100%; white-space: normal; text-align: start; }

/* The steps of reviewing: where this request stands on each, in words. */
.xd-stay-path-h { padding-top: 6px; font-weight: 700; }
.xd-stay-path { display: grid; gap: 0; counter-reset: xd-stay-step; }
.xd-stay-step { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--x-hair); counter-increment: xd-stay-step; }
.xd-stay-step-s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.xd-stay-step .x-pill { min-width: 0; white-space: normal; }
.xd-stay-step-s::before { content: counter(xd-stay-step) "."; min-width: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.xd-stay-step--done .xd-stay-step-t { color: var(--x-muted); }

/* A reply that is only read: set like a letter, on the page's own surface. */
.xd-stay-reply { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xd-stay-letter { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--x-hair); border-inline-start: 3px solid var(--x-accent); border-radius: var(--x-radius, 8px); background: var(--x-bg); }
.xd-stay-letter p:last-child { color: var(--x-muted); }