/* Bibliotheks-Suche. Definiert keine Tokens — sie konsumiert site.css
   (--bronze, --accent, --serif, --atelier-line) wie library.css auch.
   Zwei Bühnen: das Feld steht im dunklen Hero, die Ergebnisse auf Bone. */

.library-search[hidden],
.library-results[hidden],
.library-search__filters[hidden],
.library-search__empty[hidden],
.library-search__clear[hidden],
.library-search__chip[hidden] {
  display: none;
}

/* ── Feld im Hero ── */

.library-search {
  margin-top: clamp(26px, 3.4vw, 40px);
  max-width: 620px;
}

.library-search__form {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 240, 232, 0.28);
  transition: border-color 200ms ease;
}

.library-search__form:focus-within {
  border-bottom-color: var(--bronze);
}

.library-search__icon {
  width: 22px;
  height: 22px;
  color: rgba(244, 240, 232, 0.52);
  transition: color 200ms ease;
}

.library-search__form:focus-within .library-search__icon {
  color: var(--bronze);
}

.library-search__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #f4f0e8;
  font-family: inherit;
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.5;
  letter-spacing: 0;
  appearance: none;
}

.library-search__input::placeholder {
  color: rgba(244, 240, 232, 0.44);
}

.library-search__input:focus {
  outline: none;
}

.library-search__input::-webkit-search-decoration,
.library-search__input::-webkit-search-cancel-button,
.library-search__input::-webkit-search-results-button {
  appearance: none;
}

.library-search__clear {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(244, 240, 232, 0.56);
  cursor: pointer;
  transition: color 160ms ease;
}

.library-search__clear svg {
  width: 18px;
  height: 18px;
}

.library-search__clear:hover {
  color: var(--bronze);
}

.library-search__hint {
  margin: 12px 0 0 !important;
  color: rgba(244, 240, 232, 0.4) !important;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.66rem !important;
  letter-spacing: 0.1em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

/* ── Ergebnisse ── */

.library-results {
  background: #f6f1e6;
}

.library-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.library-search__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(23, 23, 20, 0.18);
  background: none;
  color: rgba(23, 23, 20, 0.62);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.library-search__chip:hover {
  border-color: rgba(23, 23, 20, 0.42);
  color: #171714;
}

.library-search__chip[aria-pressed="true"] {
  border-color: #171714;
  background: #171714;
  color: #f6f1e6;
}

.library-search__chip-count {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.62;
}

.library-search__status {
  margin: 0 0 18px;
  color: rgba(23, 23, 20, 0.55);
  font-size: 0.95rem;
  line-height: 1.6;
}

.library-row--result mark {
  background: rgba(154, 122, 79, 0.22);
  color: inherit;
  box-shadow: inset 0 -1px 0 rgba(154, 122, 79, 0.55);
}

.library-row--result:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

.library-search__more {
  display: block;
  width: 100%;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 20, 0.14);
  background: none;
  color: rgba(23, 23, 20, 0.62);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
}

.library-search__more:hover {
  color: var(--bronze);
}

.library-search__empty {
  max-width: 560px;
  padding-top: clamp(18px, 3vw, 30px);
  border-top: 1px solid rgba(23, 23, 20, 0.16);
}

.library-search__empty p {
  margin: 0 0 10px;
  color: #171714;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

.library-search__empty-help {
  color: rgba(23, 23, 20, 0.6) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.library-search__empty .button {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .library-search {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .library-search__form {
    grid-template-columns: 20px minmax(0, 1fr) 26px;
    gap: 11px;
  }

  .library-search__hint {
    letter-spacing: 0.08em;
  }
}