/* Wave 0 (tasks/065 §11) — shared occupant picker. Extends the .os-profile-row
   vocabulary with a selectable variant: the whole row is a <label> wrapping a
   visually-hidden REAL checkbox; selection = accent-soft tint + check mark;
   focus ring rides the checkbox's :focus-visible. Tokens only. */

.hos-occupant-picker__fieldset { border: 0; padding: 0; margin: 0; }

.hos-occupant-picker__legend {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

.hos-profile-row--pick {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px; border-radius: var(--radius-sm);
  cursor: pointer; position: relative;
}
.hos-profile-row--pick + .hos-profile-row--pick { border-top: 1px solid var(--hairline); }
/* Painted from :has(), NOT from the server-rendered `--on` class alone.
   `--on` reflects what the SERVER knew at render time; on a no-JS surface —
   and the guest portal is deliberately one (layouts/guest_v2 loads no
   importmap, so `occupant-picker` never connects) — clicking a row toggled the
   real checkbox inside the <label> and nothing changed colour, which reads as
   "I can't select anyone". `:has()` makes the paint BE the checked state, so
   it cannot disagree with it, with or without JS. `--on` stays for the
   first render. */
.hos-profile-row--pick.hos-profile-row--on,
.hos-profile-row--pick:has(input:checked) { background: var(--accent-soft); }
.hos-profile-row--pick[aria-disabled="true"] { cursor: not-allowed; }
.hos-profile-row--pick[aria-disabled="true"] .os-profile-row__name { color: var(--muted); }

/* Real checkbox, visually hidden but focusable — the platform owns semantics. */
.hos-occupant-picker__box {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.hos-profile-row--pick:has(input:focus-visible) { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.hos-occupant-picker__box:focus-visible ~ .os-profile-row__avatar {
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}

.hos-occupant-picker__mark { color: var(--hairline); margin-left: auto; display: inline-flex; }
.hos-profile-row--on .hos-occupant-picker__mark,
.hos-profile-row--pick:has(input:checked) .hos-occupant-picker__mark { color: var(--accent); }

.hos-occupant-picker__empty {
  text-align: center; padding: 18px 10px; color: var(--muted); font-size: var(--text-xs);
}
.hos-occupant-picker__empty strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* Staff quick-create slot (outside guests). */
.hos-occupant-picker__quick-create { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: 10px; }
.hos-occupant-picker__qc-field { margin-bottom: 8px; }
.hos-occupant-picker__qc-field label {
  display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.hos-occupant-picker__qc-field label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hos-occupant-picker__qc-field input {
  width: 100%; padding: 8px 11px; border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--hairline); font: inherit; color: var(--ink);
  background: var(--surface);
}
.hos-occupant-picker__qc-field input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.hos-occupant-picker__match { font-size: var(--text-xs); color: var(--muted); }

/* aria-live summary stack (portal variant B). */
.hos-occupant-picker__summary { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hos-occupant-picker__stack { display: flex; }
.hos-occupant-picker__chip {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 600; margin-left: -6px; box-shadow: 0 0 0 2px var(--surface);
}
.hos-occupant-picker__chip:first-child { margin-left: 0; }
.hos-occupant-picker__names { flex: 1; font-size: var(--text-xs); color: var(--muted); min-width: 0; }
.hos-occupant-picker__total { font-variant-numeric: tabular-nums; }

/* Wave 0 S5 — the Book form's sibling-day chips (D4 seats-left hint). */
.hos-exc-daychip { text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.hos-exc-daychip--on { background: var(--accent); color: var(--surface); box-shadow: none; }
.hos-exc-daychip--full { color: var(--text-muted); }
.hos-exc-seatsleft { font-size: var(--text-xs); color: var(--text-muted); }

/* Wave 0 S6 — board add-form (turbo-frame) chrome. */
.hos-exc-addform { margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.hos-exc-addform__modes { display: flex; gap: 6px; margin-bottom: 8px; }
.hos-exc-addform__banner { display: flex; gap: 8px; align-items: flex-start; background: var(--warning-bg);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--text-xs); color: var(--warning-ink); margin-bottom: 8px; }
.hos-exc-matchrow { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); padding: 4px 0; }
.hos-exc-matchnone { font-size: var(--text-xs); color: var(--muted); }
.hos-exc-resolve { position: relative; }
.hos-exc-resolve summary { list-style: none; cursor: pointer; }
.hos-exc-resolve summary::-webkit-details-marker { display: none; }
.hos-exc-resolve__menu { position: absolute; right: 0; z-index: 20; margin-top: 4px; background: var(--surface);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 4px; min-width: 180px; }