/* ===================================================================
   Search: the header box + autocomplete, and the full results page.

   The results page reads as a table of contents -- a citation in the
   accent, a heading beside it, one row per section -- because that is what
   it is: a listing of places in the Code, ordered by how well they answer
   a question instead of by where they sit in it. What a listing does not
   have is the quote underneath, and that is set in the serif, because it is
   statutory text and everything else on the page is furniture. ========= */

.search {
  position: relative;
  flex: 2 1 auto;
  max-width: 28rem;
  width: 100%;
}

.search input {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.search input.has-scope,
.search-form input[type="search"].has-scope {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

/* `.panel-float` gives the surface; position and overflow are the list's own. */
#ac-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
}
#ac-results:empty { display: none; }
#ac-results a {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
}
#ac-results a:hover, #ac-results a.on { background: var(--accent-soft); }
#ac-results .num { color: var(--accent); font-weight: 650; min-width: 4rem; }
#ac-results .name { color: var(--muted); }
#ac-results .ac-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}
#ac-results .ac-item-header {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
}
#ac-results .ac-preview-snippet {
  font-family: var(--serif);
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink);
  opacity: .88;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-1);
}

/* The last row of the header's autocomplete: the way from a list of section
   numbers to a search of what the sections say. */
#ac-results .full {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
#ac-results .full a { color: var(--muted); font-family: var(--sans); font-size: var(--text-xs); }
#ac-results .full b { color: var(--accent); font-weight: 620; }

#ac-results .scope-header {
  padding: var(--space-3) var(--space-5);
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-1);
  background: var(--accent-soft);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --------------------------------------------------------- results page */

.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 0 var(--space-10);
  max-width: 48rem;
}

.search-main-row {
  display: flex;
  gap: var(--space-4);
  width: 100%;
}

.search-main-row input[type="search"] {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}

.search-main-row input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.search-main-row input[type="search"].has-scope {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.search-main-row button {
  padding: var(--space-4) 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--panel);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.search-main-row button:hover { filter: brightness(1.1); }

.search-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--muted);
}

.search-filters-row .filter-label {
  font-weight: 600;
  color: var(--ink);
}

.search-filters-row select.scope-select {
  flex: 1;
  max-width: 18rem;
  min-width: 9rem;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

.search-filters-row input.scope-input {
  width: 9rem;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

.search-filters-row select:focus,
.search-filters-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.search-filters-row .clear-scope {
  color: var(--muted);
  text-decoration: underline;
}
.search-filters-row .clear-scope:hover { color: var(--accent); }

/* The unit picker's `<select>`s are built one level at a time by JS and
   inserted into this wrapper; `contents` puts them straight into the flex
   row's layout, same as the title select beside them. */
.search-filters-row .unit-scope-picker { display: contents; }

.active-scope {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--muted);
  margin-bottom: var(--space-10);
}
.active-scope strong {
  color: var(--accent);
}

.scope-search-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--accent);
  margin-bottom: 1.2rem;
  text-decoration: none;
}
.scope-search-link:hover {
  text-decoration: underline;
}

.search-help, .search-count {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--muted);
  margin: 0 0 var(--space-11);
}
.search-help code {
  font-size: .92em;
  padding: 0 .25em;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.results { list-style: none; margin: 0; padding: 0; }
.results li { margin: 0 0 var(--space-10); }

.results .hit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-7);
  align-items: baseline;
  padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
  text-decoration: none;
}
.results .hit:hover { background: var(--accent-soft); }
.results .cite { color: var(--accent); font-weight: 620; white-space: nowrap; }
.results .heading { color: var(--muted); font-size: .94rem; }

/* The quote runs to the edge of the measure and is cut by the snippet rather
   than by a line count, so it wants no clamping of its own. */
.results .quote {
  margin: var(--space-2) 0 0;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.4;
}

/* The matched terms.  A tint rather than a highlighter: a result page can carry
   forty of these, and the yellow a browser draws by default turns the page into
   a stack of stripes with the text underneath them.

   Spread by a box-shadow rather than by padding, because the terms of a phrase
   are marked one word at a time.  Padding pushes the words apart and "projected
   disposable income" comes out as three chips with gaps between them, instead of
   the phrase it is; a shadow paints past the edges without moving anything, so
   adjacent marks close over the space between them. */
.results mark {
  background: var(--accent-soft);
  box-shadow: 0 0 0 .14em var(--accent-soft);
  color: inherit;
  font-weight: 620;
}

/* ----------------------------------------------------------------- pager

   The page links under a listing.  Set in the sans, like every other piece of
   furniture on the page, and separated from the last result by a rule so that
   it reads as the end of the list rather than as another entry in it.  A step
   with nowhere to go is left in place and dimmed instead of removed, because a
   row whose ends move as you page through it is a row you have to re-find. */
.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-7);
  margin: var(--space-11) 0 var(--space-8);
  padding-top: var(--space-9);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-sm);
}

.pager-step { color: var(--accent); text-decoration: none; white-space: nowrap; }
.pager-step:hover { text-decoration: underline; }
.pager-step.pager-off { color: var(--muted); opacity: .5; }

.pager-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.pager-numbers li { margin: 0; }

.pager-number {
  display: block;
  min-width: 1.9rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--accent);
  text-align: center;
  text-decoration: none;
}
.pager-number:hover { background: var(--accent-soft); }

.pager-gap {
  display: block;
  padding: var(--space-2) var(--space-1);
  color: var(--muted);
}

.pager-number.pager-current {
  border-color: var(--rule);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 620;
}