/* Quiet Shelf T6 Talk to staff (QS-8) and the branch hours block. Tokens only.
   QS-13 (the reference T6): the contact rows as one list card (components.css .qsList), then
   the branch card (.qsPanel) with its name, today's hours and the week. */

.qsStaff {
  display: grid;
  gap: var(--gap);
}

.qsStaff > .qsSheet__text {
  margin-bottom: 0;
}

/* In the sheet the cards keep the sheet gutter. */
.qsSheet .qsStaff__branch {
  margin: 0 var(--gutter);
}

.qsStaff__rows .qsRow__title,
.qsStaff__rows .qsRow__sub {
  overflow-wrap: anywhere;
}

.qsStaff__call {
  text-decoration: none;
}

.qsStaff__call .qsRow__title {
  color: var(--primary);
  text-decoration: underline;
}

.qsStaff__call:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(-1 * (var(--focus-w) + 1px));
}

.qsStaff__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The branch card's label (the reference .eb). */
.qsStaff__eb {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-head);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-head);
  text-transform: uppercase;
}

/* The branch name (the reference T6 card's bold first line). */
.qsStaff__h {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

.qsStaff__sent {
  color: var(--success);
  font-weight: var(--weight-action);
}

.qsBranchHours .qsSheet__text,
.qsBranchHours__today {
  margin: 2px 0 0;
  color: var(--muted);
}

.qsHours {
  margin: 8px 0 0;
}

.qsHours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--gap);
  padding: 4px 0;
  border-top: var(--line-w) solid var(--line);
  font-variant-numeric: tabular-nums;
}

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

.qsHours dd {
  margin: 0;
  text-align: right;
}

/* AIA-70: the request kinds (a disclosure under "Ask someone to come to me") and the request
   status. In the sheet the heading and the status card keep the sheet gutter; the kinds list is a
   list card like the contact rows. Tokens only. */
.qsStaff__kinds {
  display: grid;
  gap: 8px;
}

.qsStaff [hidden] {
  display: none;
}

.qsSheet .qsStaff__kindsH,
.qsSheet .qsStaff__err,
.qsSheet .qsStaff__status {
  margin: 0 var(--gutter);
}

.qsStaff__status {
  display: grid;
  gap: var(--gap);
  justify-items: start;
}

.qsStaff__statusText {
  margin: 0;
  color: var(--fg);
  font-weight: var(--weight-action);
}