/* Pith search page. 13 Nov 2026.

   The page file for templates/search_page.html. The list is the paper card
   (components/card.css) and the parts are shared (the field, the button, the tabs,
   the fold); this file sets the page's own head, the air between the parts, the
   choices that narrow the list, the line under a row that says where the visitor's
   words were found, and the pager. Colours, sizes and widths come from tokens.css. */

/* The head says how many results there are and for which words. It is not a
   proposition, so it is set at the verdict step and the first result stays on a
   phone's first screen. */
.search-head {
  padding-block: var(--space-6) var(--space-5);
}

.search-head h1 {
  font: var(--type-verdict);
  font-weight: 700;
  letter-spacing: var(--track-verdict);
  overflow-wrap: anywhere;
}

.search-head__form {
  max-width: var(--reading);
  margin-top: var(--space-4);
}

/* On a phone the button sits beside the field, not under it. */
.search-head__form.field-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.search-start,
.search-empty {
  padding-bottom: var(--space-7);
}

.search-empty__more,
.search-empty__next {
  margin-top: var(--space-4);
}

/* A link that stands by itself is a full touch target. */
.search-empty__next a,
.search-narrow__go a,
.search-start__tries a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.search-start__tries {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

/* Inside running text a list is bulleted; this one is a row of links. */
.search-start .search-start__tries {
  margin-top: 0;
  padding: 0;
  list-style: none;
}

/* The list: the sentence that says how it is ordered stands above it. */
.search-list {
  padding-bottom: var(--space-7);
}

.search-list__order {
  margin-block: var(--space-4);
  max-width: var(--measure);
}

.search-list__rows {
  margin-top: var(--space-4);
}

/* What narrows the list. A select keeps the browser's own arrow. */
.search-narrow {
  border-bottom: var(--rule-hair);
}

.search-narrow__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: var(--reading);
}

.search-narrow select.field__input {
  appearance: auto;
}

.search-narrow__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* A record the card does not draw has the paper's cell and no review beside it. */
.search-plain .plate__paper {
  margin-bottom: var(--space-4);
}

/* Where the words were found: a foot line under the row it belongs to, the width of
   the row, with a hairline over it as the plate has between its rows. */
.search-found {
  padding-block: var(--space-3) var(--space-4);
  border-top: var(--rule-hair);
}

.search-found b {
  font-weight: 700;
}

.search-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.search-pager a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 600;
}

@media (min-width: 720px) {
  .search-head__form.field-row {
    gap: var(--gutter);
  }

  .search-narrow__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--gutter);
  }

  .search-narrow__go {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  /* With no review beside it, the record's own lines run the row's width. */
  .search-plain .plate__paper {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .search-narrow__form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}