/* LIBRAL search widget — plain CSS, no build step required. */

.libral-search {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 780px;
  color: #1a1a1a;
  line-height: 1.4;
}

.libral-search * {
  box-sizing: border-box;
}

/* --- Search box row --- */

.libral-search__row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.libral-search__input {
  flex: 1 1 0;
  /* An <input> carries an intrinsic minimum width (roughly 20 characters),
     and a flex item won't shrink below its intrinsic minimum unless told
     to — so without this the box stayed wide and pushed the Search button
     off the right edge on a 320px-wide phone. */
  min-width: 0;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #b9b9b9;
  border-radius: 6px;
}

.libral-search__input:focus {
  outline: none;
  border-color: seagreen;
  box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.2);
}

.libral-search__button {
  /* Never shrink: the input beside it absorbs the narrowing instead. */
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 15px;
  background: seagreen;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.libral-search__button:hover {
  background: #226644;
}

.libral-search__hint {
  font-size: 12.5px;
  color: #666;
  margin: 0 0 10px;
}

/* --- Refinement filters --- */

.libral-search__filter-toggle {
  padding: 10px 20px;
  font-size: 15px;
  background: seagreen;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
}

.libral-search__filter-toggle:hover {
  background: #226644;
}

.libral-search__filters {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #fafafa;
}

.libral-search__filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.libral-search__filter-row label {
  /* A fixed width (not min-width) so every row's label column lines up —
     min-width let a longer label (e.g. "Farming practices:") push that
     row's select further right than shorter-labelled rows. Wide enough
     for the longest label ("Date added to LIBRAL:") without wrapping. */
  width: 170px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
}

.libral-search__filter-row select,
.libral-search__lookup-input,
.libral-search__year-input {
  font-size: 13.5px;
  padding: 4px 6px;
  border: 1px solid #b9b9b9;
  border-radius: 4px;
}

.libral-search__year-input {
  width: 100px;
}

/* Author / Title. Wide enough to read a long title back, but allowed to
   shrink on a narrow screen rather than forcing the panel to scroll
   sideways. */
.libral-search__lookup-input {
  width: 320px;
  max-width: 100%;
  flex: 0 1 320px;
  min-width: 0;
}

.libral-search__filter-clear {
  font-size: 12.5px;
  color: seagreen;
  text-decoration: none;
  white-space: nowrap;
}

.libral-search__filter-clear:hover {
  text-decoration: underline;
}

.libral-search__filter-row--actions {
  margin-top: 4px;
  margin-bottom: 0;
}

/* The panel's own Search button, sharing the actions row with "Clear all
   filters". Same green as the main Search button so it reads as the same
   action, but sized to the row rather than to the header. */
.libral-search__filter-search {
  background: seagreen;
  border: 1px solid seagreen;
  border-radius: 6px;
  padding: 4px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.libral-search__filter-search:hover {
  background: #226644;
  border-color: #226644;
}

.libral-search__filter-clear-all {
  background: none;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: #333;
  cursor: pointer;
}

.libral-search__filter-clear-all:hover {
  background: #f0f0f0;
}

/* --- Results --- */

.libral-search__status {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.libral-search__group {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.libral-search__group-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
}

.libral-search__group-header:hover {
  background: #f5f7f5;
}

.libral-search__thumb {
  width: 48px;
  height: auto;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.libral-search__group-body {
  flex: 1;
  min-width: 0;
}

.libral-search__title {
  font-size: 14.5px;
}

.libral-search__description {
  font-size: 13px;
  color: #444;
  margin-top: 3px;
}

.libral-search__detail {
  font-size: 12.5px;
  color: #555;
  margin-top: 4px;
}

.libral-search__rights {
  font-size: 11.5px;
  color: #888;
  margin-top: 4px;
  font-style: italic;
}

.libral-search__group-count {
  flex-shrink: 0;
  font-size: 13px;
  color: #777;
  white-space: nowrap;
}

.libral-search__group-hits {
  display: none;
  border-top: 1px solid #eee;
  padding: 4px 14px 10px;
}

.libral-search__group.is-expanded .libral-search__group-hits {
  display: block;
}

.libral-search__hit {
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.libral-search__hit:last-child {
  border-bottom: none;
}

/* PDF link and page links ("p. 246") share one look and behaviour:
   same colour, size, weight and hover underline. Change them here, once.

   The selectors are deliberately specific, and cover :link and :visited
   separately. libral.css has bare "a:visited" rules (e.g. "td a:hover,
   a:visited { color: limegreen }") that apply to every visited link on the
   site and would otherwise beat a plain class selector, so a link you had
   already clicked would change colour and lose its styling. */
.libral-search a.libral-search__hit-page:link,
.libral-search a.libral-search__hit-page:visited,
.libral-search a.libral-search__pdf-link:link,
.libral-search a.libral-search__pdf-link:visited {
  font-size: 13px;
  color: seagreen;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.libral-search a.libral-search__hit-page:hover,
.libral-search a.libral-search__pdf-link:hover {
  color: seagreen;
  font-weight: 600;
  text-decoration: underline;
}

.libral-search__hit-snippet {
  font-size: 13.5px;
  color: #333;
  margin: 3px 0 0;
}

.libral-search__hit-snippet mark {
  background: #fff1a8;
  padding: 0 1px;
}

.libral-search__group-footer {
  padding: 8px 0 4px;
  border-bottom: 1px dashed #eee;
}

/* --- Sort control --- */

.libral-search__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13.5px;
}

.libral-search__sort label {
  font-weight: 600;
  color: #333;
}

/* The sort drop-down is dressed as one of the green buttons (same colour,
   size, corners and hover as Search / Filter results). It is still a
   real <select>, so phones keep their native picker. The white arrow is
   drawn here because appearance:none removes the browser's own. */
.libral-search__sort select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 38px 10px 20px;
  font-size: 15px;
  font-family: inherit;
  color: #fff;
  background-color: seagreen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.libral-search__sort select:hover {
  background-color: #226644;
}

.libral-search__sort select:focus-visible {
  outline: 2px solid #226644;
  outline-offset: 2px;
}

/* The open list is drawn by the browser: keep its text readable. */
.libral-search__sort select option {
  color: #1a1a1a;
  background: #fff;
}

.libral-search__pdf-pending {
  font-size: 12.5px;
  color: #999;
  font-style: italic;
}

.libral-search__hit-page--pending {
  color: #999;
  font-style: italic;
  cursor: default;
}

.libral-search__version {
  margin-top: 24px;
  font-size: 10.5px;
  color: #bbb;
}

/* ---------------------------------------------------------------------
   Narrow screens (phones, small tablets in portrait).

   The wide layout gives every row a fixed 170px label column so the
   labels line up. On a phone that column plus a <select> sized to its
   longest option is wider than the screen, so rows wrap raggedly — the
   date row ended up three lines tall, Author and Title two, while the
   county rows stayed on one. With a dozen filters that adds up to a lot
   of scrolling.

   Below, the label column is dropped: each label takes only the width it
   needs and its control takes whatever is left, so almost every row fits
   on a single line. The labels no longer align in a column, which is the
   trade — worth it here, since on a narrow screen a label sitting
   directly beside its own control reads perfectly well and the panel
   gets substantially shorter.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .libral-search__filters {
    padding: 10px 12px;
  }

  .libral-search__filter-row {
    gap: 8px;
    margin-bottom: 6px;
  }

  .libral-search__filter-row label {
    /* No fixed column, and allowed to wrap: "Date added to LIBRAL:" is
       too long to force onto one line on the narrowest phones. */
    width: auto;
    flex: 0 0 auto;
    white-space: normal;
  }

  /* min-width: 0 is what actually lets these shrink — without it a flex
     item refuses to go below its content's intrinsic width, which for a
     <select> is its longest option and for the lookup boxes is the 320px
     set above. */
  .libral-search__filter-row select,
  .libral-search__lookup-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  /* Two of these share the date row, so they split what's left evenly
     rather than each claiming a fixed 100px. */
  .libral-search__year-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}