/* Quiet Shelf Search and Book screens (QS-4e, QS-13 fidelity): S1 to S6. Tokens only
   (theme/tokens.css). Shapes follow the regenerated reference (.hd, .srch, .eb, .res, .li, .act,
   .empty, .btn, .sheet, .ok-big, .due): the shared classes in components.css carry the bar, rows,
   lists, eyebrows, buttons, covers and the book row; this file only lays them out. The 16 px
   gutter is the shell's (#main); nothing here adds side padding. */

.qsSearch,
.qsBook,
.qsPlaced,
#qsResultsHost,
.qsNoResults {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.qsSearch > *,
.qsBook > *,
.qsPlaced > * {
  margin: 0;
}

/* S1 to S3: the bar is the header (the reference draws no title), so the h1 is for screen readers
   and the shell's focus only. */
.qsSearch__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- The first row (the reference .hd): Back, then the bar or the title ---------- */
.qsTopRow {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--target-std);
  margin: 3px 0 5px;
}

.qsBack {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
}

.qsBack .ic {
  width: 29px;
  height: 29px;
}

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

.qsTopRow__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-head);
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

/* ---------- The bar (components.css .qsBar; the reference .srch) ---------- */
.qsSearchBar {
  flex: 1;
  min-width: 0;
  padding-inline-end: 4px;
}

.qsSearchBar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* The field's name, for screen readers (the reference bar shows only the icon and the query). */
.qsSearchBar .qsBar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.qsSearchBar .qsBar__input {
  flex: 1;
  min-width: 0;
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
}

.qsSearchBar .qsBar__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.qsSearchBar .qsBar__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

.qsSearchBar .qsBar__go:hover {
  background: var(--primary-soft);
}

.qsSearchBar .qsBar__go:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(0px - var(--focus-w));
}

/* ---------- Groups ---------- */
.qsGroup {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.qsNotice {
  margin: 0;
  color: var(--fg);
}

.qsChev {
  display: flex;
  flex: none;
  margin-inline-start: auto;
  color: var(--muted);
}

/* ---------- AIA-31 UI: Check out a book (S1, under the bar) ---------- */
/* A disclosure row: the caret turns when the panel is open. Row height is the list row's
   --target-std (56 px, above the 48 px floor); the panel text is body size. */
.qsCheckout__caret {
  display: flex;
  flex: none;
  margin-inline-start: auto;
  color: var(--muted);
}

.qsCheckout__open[aria-expanded="true"] .qsCheckout__caret {
  transform: rotate(180deg);
}

.qsCheckout__how[hidden] {
  display: none;
}

.qsCheckout__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* The checkout form: the shared qsField / qsBtn components, stacked. The camera button sits at
   the end of the barcode row as a square of the field's height, and never wraps under it. */
.qsCheckout__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qsCheckout__form .qsField__row {
  flex-wrap: nowrap;
}

.qsCheckout__scan {
  flex: none;
  width: var(--target-std);
  padding: 0;
}

/* ---------- Result groups (the reference .res and .rh): one card per group ---------- */
.qsResGroup {
  gap: 0;
  overflow: hidden;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsResGroup__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  margin: 0;
  padding: 9px 14px;
  background: var(--bg);
  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;
}

.qsResGroup__h .qsGroup__h {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.qsResults {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qsResGroup .qsResults > li {
  border-top: var(--line-w) solid var(--line);
}

/* A list card of results (S4's other branches): rows divided by --line. */
.qsList.qsResults > li + li {
  border-top: var(--line-w) solid var(--line);
}

.qsResult {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 75px;
  padding-inline-end: 6px;
  background: var(--card);
}

.qsList > .qsResult {
  min-height: var(--target-std);
}

.qsResult > .qsRow {
  min-height: 75px;
}

.qsList > .qsResult:first-child,
.qsList > .qsResult:first-child > * {
  border-top-left-radius: calc(var(--r-card) - var(--line-w));
  border-top-right-radius: calc(var(--r-card) - var(--line-w));
}

.qsList > .qsResult:last-child,
.qsList > .qsResult:last-child > * {
  border-bottom-left-radius: calc(var(--r-card) - var(--line-w));
  border-bottom-right-radius: calc(var(--r-card) - var(--line-w));
}

.qsResult__open,
.qsResult__static {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--target-std);
  align-self: stretch;
  padding: 13px 0 13px 14px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.3;
  text-align: left;
}

.qsResult__open {
  cursor: pointer;
}

.qsResult__open:hover {
  background: var(--primary-soft);
}

.qsResult__open:focus-visible {
  /* Inset: one pixel wider, so the ring inside the box still meets the 2.4.13 area guidance. */
  outline: calc(var(--focus-w) + 1px) solid var(--focus);
  outline-offset: calc(0px - var(--focus-w) - 1px);
}

.qsResult__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.qsResult__title {
  overflow: hidden;
  font-weight: var(--weight-action);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qsResult__author,
.qsResult__call,
.qsResult__sub {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.qsResult__call {
  font-variant-numeric: tabular-nums;
}

/* Larger text (REQ-SET-4, 1.4.4): the whole title wraps instead of being cut off. */
:root[data-text] .qsResult__title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The text action at the end of a row (the reference .act): Place a hold, Take me. */
.qsAct {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  max-width: 45%;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
  text-align: center;
  cursor: pointer;
}

.qsAct:hover {
  background: var(--primary-soft);
}

.qsAct:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(0px - var(--focus-w));
}

/* Availability (the reference .avail): --success here, --warning otherwise; the words say it too. */
.qsAvail {
  margin: 0;
  color: var(--warning);
  font-weight: var(--weight-action);
  font-variant-numeric: tabular-nums;
}

.qsAvail--here {
  color: var(--success);
}

.qsResult__open:hover .qsAvail {
  color: var(--fg);
}

/* A1 (views/ask.js) draws the same groups inside its sheet: there they keep the gutter. */
.qsSheet .qsResGroup,
.qsSheet .qsNotice {
  margin: 0 var(--gutter) var(--gap);
}

/* ---------- S3 (the reference .empty) ---------- */
.qsEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 23px 11px;
  color: var(--muted);
  text-align: center;
}

.qsEmpty .qsEmpty__icon {
  width: 52px;
  height: 52px;
  color: var(--line);
}

.qsNoResults__h {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-head);
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
  overflow-wrap: anywhere;
}

.qsNoResults__body {
  margin: 0;
}

.qsNoResults__staff {
  display: grid;
}

.qsNoResults__hintRow {
  margin: 0;
  text-align: center;
}

/* Check spelling or try an author (the reference .link): back to the bar. */
.qsNoResults__hint {
  min-height: var(--target-min);
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
  text-decoration: underline;
  cursor: pointer;
}

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

/* ---------- S4 ---------- */
.qsBook__head {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.qsBook__meta {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.qsBook__meta > * {
  margin: 0;
}

/* The reference draws the book's name at 20 px here (#main h1 is the 30 px page title). */
#qsBookScreen .qsBook__title {
  font-size: var(--fs-action);
  line-height: 1.3;
}

.qsBook__author {
  color: var(--fg);
}

.qsBook__call {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.qsBook__actions,
.qsActions {
  display: grid;
  gap: var(--gap);
}

/* ---------- S5 (the reference .sheet with a .list of pickup rows) ---------- */
.qsHold {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.qsHold > * {
  margin-top: 0;
  margin-bottom: 0;
}

.qsHold__book {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--gutter);
}

.qsHold__bookText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.qsHold__title {
  font-weight: var(--weight-head);
}

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

.qsHold__opts {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.qsHold__legend {
  padding: 0 var(--gutter) var(--gap);
  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;
}

/* A pickup row: the radio covers the row (so the whole row is the target) and is drawn by the
   row itself: tinted and checked when chosen. */
.qsOpt {
  position: relative;
  line-height: 1.3;
  cursor: pointer;
}

.qsList > .qsOpt + .qsOpt {
  border-top: var(--line-w) solid var(--line);
}

.qsOpt__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.qsOpt:has(.qsOpt__input:checked) {
  background: var(--primary-soft);
}

/* The radio is invisible: the row shows its focus (focus-within where :has() is missing). */
.qsOpt:focus-within,
.qsOpt:has(.qsOpt__input:focus-visible) {
  outline: calc(var(--focus-w) + 1px) solid var(--focus);
  outline-offset: calc(0px - var(--focus-w) - 1px);
}

.qsOpt__icon {
  display: flex;
  color: var(--primary);
}

.qsOpt__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

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

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

.qsOpt__check {
  visibility: hidden;
  width: 23px;
  height: 23px;
  color: var(--muted);
}

.qsOpt__input:checked ~ .qsOpt__check,
.qsOpt:has(.qsOpt__input:checked) .qsOpt__check {
  visibility: visible;
}

.qsHold__note,
.qsHold__msg:not(:empty) {
  padding: 0 var(--gutter);
}

.qsHold__note {
  color: var(--muted);
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  text-align: center;
}

.qsHold__msg {
  color: var(--danger);
}

.qsHold__msg:empty {
  display: none;
}

.qsHold__signin {
  margin-top: 8px;
}

/* ---------- S6 (the reference .ok-big and .due) ---------- */
.qsPlaced__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  text-align: center;
}

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

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

/* Centered: the shell's end padding (clear of the staff buttons) is mirrored at the start. */
#main .qsPlaced__hero h1 {
  margin: 0;
  padding-inline: calc(var(--target-min) + 8px);
  font-size: var(--fs-section);
}

.qsPlaced__msg {
  max-width: 315px;
  margin: 0;
  color: var(--muted);
  line-height: 1.3;
}

.qsPlaced .qsRow {
  line-height: 1.3;
}

.qsPlaced .qsFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

:root[data-text] .qsPlaced .qsFacts {
  grid-template-columns: minmax(0, 1fr);
}

.qsPlaced .qsFacts {
  margin: 0;
  padding: 0;
  border: 0;
}

.qsPlaced .qsFacts div {
  display: block;
  padding: 11px 14px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsPlaced .qsFacts dt {
  min-width: 0;
  color: var(--muted);
  font-weight: var(--weight-action);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.qsPlaced .qsFacts dd {
  margin: 0;
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
  .qsSearchBar:focus-within,
  .qsResGroup,
  .qsPlaced .qsFacts div {
    border-color: CanvasText;
  }

  .qsBack {
    border: var(--line-w) solid ButtonText;
  }

  .qsOpt:has(.qsOpt__input:checked) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .qsOpt__input:checked ~ .qsOpt__check {
    color: Highlight;
  }

  .qsResult__open:focus-visible,
  .qsBack:focus-visible,
  .qsAct:focus-visible,
  .qsSearchBar .qsBar__go:focus-visible,
  .qsNoResults__hint:focus-visible,
  .qsSearchBar .qsBar__input:focus-visible,
  .qsOpt:focus-within,
  .qsOpt:has(.qsOpt__input:focus-visible) {
    outline: 3px solid Highlight;
  }
}

/* QS-13: the cover credit closes a results card. .qsResGroup clips (overflow: hidden), so the link
   needs inner room for its whole focus ring, and it lines up with the 14 px result rows. The 6 px
   bottom covers --focus-w + --focus-offset (4 px; 5 px in forced colors): grow it if those grow. */
.qsResGroup > .qsCredit { padding: 4px 14px 6px; border-top: var(--line-w) solid var(--line); }