/* Library Management System — the public catalogue (OPAC) and the kids' corner. Works at 320–390 px: the facets
   move under the results, long titles and ISBNs wrap, tables scroll inside their wrapper. */
.lib-opac-search {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-block: var(--space-3, 0.75rem);
}

.lib-opac-search .input {
  flex: 1 1 auto;
  min-width: 0;
}

.lib-opac-links {
  overflow-wrap: anywhere;
}

.lib-opac-layout {
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .lib-opac-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

.lib-opac-results {
  min-width: 0;
}

@media (max-width: 899px) {
  .lib-opac-facets {
    order: 2;
  }
}

.lib-opac-facet summary {
  font-weight: 600;
  cursor: pointer;
  padding-block: var(--space-1, 0.25rem);
}

.lib-opac-facet ul,
.lib-opac-hits,
.lib-opac-chips,
.lib-kids-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lib-opac-facet a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: 0.2rem 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lib-opac-facet a.is-active span:first-child {
  font-weight: 700;
}

.lib-opac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  margin-block: var(--space-3, 0.75rem);
}

.lib-opac-chips .chip.is-active {
  font-weight: 700;
}

.lib-opac-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.lib-opac-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.lib-opac-hit {
  display: flex;
  gap: var(--space-3, 0.75rem);
  padding-block: var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.lib-opac-hit-body {
  min-width: 0;
}

.lib-opac-hit-title {
  font-size: var(--text-lg, 1.1rem);
  margin: 0;
  overflow-wrap: anywhere;
}

.lib-opac-hit p {
  margin: 0.15rem 0;
}

.lib-opac-cover {
  flex: 0 0 auto;
  width: 60px;
  height: 90px;
  border-radius: 4px;
  object-fit: cover;
}

.lib-opac-cover-lg {
  width: 160px;
  height: 240px;
}

.lib-opac-record {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 1.5rem);
}

.lib-opac-record-body {
  flex: 1 1 18rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lib-opac-subtitle {
  font-weight: 400;
}

.lib-opac-dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
  padding-block: 0.2rem;
}

.lib-opac-dl dt {
  font-weight: 600;
}

.lib-opac-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .lib-opac-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .lib-opac-search .btn span {
    display: none;
  }
}

.lib-pre-line {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.lib-kids-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-4, 1rem);
}

.lib-kids-grid a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  text-decoration: none;
  font-size: var(--text-lg, 1.1rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lib-kids-grid .lib-opac-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

.lib-opac-shelf,
.lib-opac-classes {
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}

.lib-opac-shelf li {
  padding-block: 0.2rem;
}

.lib-opac-shelf .is-current {
  font-weight: 600;
}

/* Phase 9: booking slots (wrap on a phone), small inline forms in a list. */
.lib-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.lib-slots li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.lib-inline { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: 0; }

/* Phase 11: kiosks (large targets, no site header or footer), the digital card, self-check on a phone. */
.lib-kiosk-body .site-header, .lib-kiosk-body .site-footer, .lib-kiosk-body .announcement { display: none; }
.lib-kiosk { max-width: 52rem; padding-block: 1rem 2rem; }
.lib-kiosk-head { justify-content: space-between; align-items: center; gap: 1rem; }
.lib-kiosk-form .input-lg, .lib-kiosk .input-lg { font-size: 1.5rem; min-height: 3.25rem; width: 100%; }
.lib-kiosk .btn-lg { font-size: 1.25rem; min-height: 3.25rem; padding-inline: 1.25rem; }
.lib-kiosk-msg { font-size: 1.25rem; }
.lib-card { max-width: 24rem; margin-inline: auto; text-align: center; }
.lib-card-qr, .lib-card-offline img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.lib-card-offline { max-width: 24rem; margin: 1rem auto; padding: 1rem; border: 1px solid var(--border, #e5e7eb); border-radius: .75rem; text-align: center; }
.lib-late { color: var(--danger, #b91c1c); }
@media print { .lib-no-print { display: none; } }

/* Phase 12: the digital reader with its on-screen watermark. */
.lib-viewer { position: relative; overflow: hidden; border: 1px solid var(--border, #e5e7eb); border-radius: .5rem; background: #f8fafc; }
.lib-viewer-frame { display: block; width: 100%; height: min(80vh, 60rem); border: 0; }
.lib-viewer-media { display: block; width: 100%; max-height: 80vh; }
.lib-wm { position: absolute; inset: auto 0 40% 0; text-align: center; font-size: clamp(.9rem, 3vw, 1.4rem); color: rgba(30, 41, 59, .18); transform: rotate(-18deg); pointer-events: none; user-select: none; white-space: nowrap; }
.lib-summary dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.lib-opac code { overflow-wrap: anywhere; }