/* ══════════════════════════════════════════════════════════════════════════
   loop-search.css — the skin for the site's search face.

   One surface, one token vocabulary (design/tokens.css):
     .loopsearch__*   — the results panel mounted on search.html

   NOTE (S30.0144): the header search box (.nav-search + the wordmark placement)
   MOVED to shell.css. The box is chrome — it sits in the shared header on every
   page — so its styling must load site-wide via shell.css, not only on the 2/70
   pages that link THIS file. Leaving it here rendered the box centered/unstyled
   everywhere else (root cause: load-scope, not margin). Only the results panel
   remains here; it is search.html-specific and correctly page-scoped.

   Design law followed from the rest of the site:
   - Persimmon is the scarce Signal — used ONLY on focus/hover/active, never as
     fill. Everything at rest is ink / muted / faint on paper, hairline borders.
   - The results list mirrors the .threads idiom: hairline-separated rows, a
     mono muted label register, Fraunces for the primary line, Spectral for the
     supporting line, going persimmon on hover.
   - Type: Fraunces (display), Spectral (body), Spline Sans Mono (labels).
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   THE RESULTS PANEL  ·  .loopsearch and its parts
   Mounted into #loop-search on search.html. Structure (built by
   corpus-search-panel.js):

     .loopsearch
      ├─ .loopsearch__head            (persistent input row)
      │   └─ .loopsearch__input
      └─ .loopsearch__results         (repainted each keystroke)
          ├─ .loopsearch__browse-title    (empty-state header)
          ├─ .loopsearch__section         (one per coverage band)
          │   ├─ .loopsearch__coverage    (band header: deep / standard / core)
          │   └─ a.loopsearch__hit
          │       ├─ .loopsearch__hit-label
          │       └─ .loopsearch__hit-sub
          └─ .loopsearch__msg (--browse | --empty)
   ═══════════════════════════════════════════════════════════════════════════ */

.loopsearch {
  display: block;
  margin-top: var(--gap-wide);
}

/* ── the persistent input row ── */
.loopsearch__head {
  margin-bottom: var(--gap-section);
}

.loopsearch__input {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  border: var(--stroke-hairline) solid var(--hairline);
  border-radius: var(--radius-artifact);
  width: 100%;
  padding: 0.7rem 1rem;
  transition: border-color var(--motion-nav) var(--ease),
              box-shadow var(--motion-nav) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.loopsearch__input::placeholder {
  color: var(--faint);
  opacity: 1;
}

.loopsearch__input:focus {
  outline: none;
  border-color: var(--persimmon);
  box-shadow: 0 0 0 1px var(--persimmon);
}

.loopsearch__input::-webkit-search-decoration,
.loopsearch__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── the results region ── */
.loopsearch__results {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

/* The empty-state browse header — "Browse the corpus". Mono label register so
   it reads as machine/section chrome, not a content headline. */
.loopsearch__browse-title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ── a coverage section (deep / standard / core / optional) ── */
.loopsearch__section {
  display: flex;
  flex-direction: column;
}

/* The band header — mono muted label, hairline underline the width of the
   section, echoing the .threads ordinal register (muted, never persimmon:
   repeated band labels can't each be the Signal). */
.loopsearch__coverage {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--gap-tight);
  border-bottom: var(--stroke-hairline) solid var(--hairline);
  margin-bottom: var(--gap);
}

/* ── a single hit — the .threads .thread row idiom ── */
.loopsearch__hit {
  display: block;
  text-decoration: none;        /* the global a{} default; affordance is per-part below */
  color: inherit;
  padding: var(--gap) 0;
  border-top: var(--stroke-hairline) solid var(--hairline);
  transition: background var(--motion-nav) var(--ease);
}

/* First hit in a section sits directly under the coverage rule — no doubled
   border. */
.loopsearch__section .loopsearch__hit:first-of-type {
  border-top: none;
}

.loopsearch__hit:hover,
.loopsearch__hit:focus-visible {
  outline: none;
  /* A faint warm wash on hover — the ground tone, used nowhere else on this
     page, so the row lifts without spending the persimmon ration. */
  background: var(--ground);
}

/* The label — Fraunces display, the primary line (like .thread-hook). Goes
   persimmon on row hover: this is the one earned Signal per interaction. */
.loopsearch__hit-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-display);
  color: var(--ink);
  transition: color var(--motion-nav) var(--ease);
}

.loopsearch__hit:hover .loopsearch__hit-label,
.loopsearch__hit:focus-visible .loopsearch__hit-label {
  color: var(--persimmon);
}

/* The description — Spectral body, muted, the supporting line (like
   .thread-framing but muted, since it's secondary to the label). */
.loopsearch__hit-sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--muted);
  margin-top: var(--gap-tight);
}

/* ── messages: empty result / empty corpus ── */
.loopsearch__msg {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--faint);
  padding: var(--gap-wide) 0;
  margin: 0;
}