/* ==========================================================================
   SEARCH — the box in the topbar, its dropdown, and the results page
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .srch-.

   The dropdown is a floating layer but it is NOT glass: it lives inside the
   topbar, which is itself a backdrop-filter element, and a browser blurs only
   what is inside the nearest such ancestor — so the page beneath would show
   through unblurred, behind rows of text. An opaque surface reads; a see-through
   one does not. The results page is content, so its cards are opaque too.

   Contents
     1  The box in the topbar
     2  The dropdown panel
     3  Rows, groups and notes
     4  The box on a phone
     5  The results page
     6  Accessibility fallbacks
   ========================================================================== */


/* ==========================================================================
   1 · THE BOX IN THE TOPBAR
   ========================================================================== */

.srch-box {
  position: relative;
  flex: 0 1 auto;
  inline-size: clamp(12rem, 24vw, 21rem);
  min-inline-size: 0;
}

.srch-box__form {
  position: relative;
  display: block;
  margin: 0;
}

.srch-box__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* A capsule, like the segmented control beside it: a tint at rest, the field's own surface when it has focus. */
.srch-box__input {
  inline-size: 100%;
  block-size: var(--control-height-md);
  padding-block: 0;
  padding-inline: 2.5rem;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-fill);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.srch-box__input::placeholder { color: var(--color-placeholder); }
.srch-box__input:hover { background: var(--color-fill-hover); }

.srch-box__input:focus {
  background: var(--color-field);
  border-color: var(--color-primary-border);
}

/* The browser's own clear button stays (it clears and keeps focus without any script); it only needs room. */
.srch-box__input::-webkit-search-cancel-button { margin-inline-start: var(--space-1); cursor: pointer; }

/* The "/" hint: a key cap that says how to get here. It goes away once the box is in use. */
.srch-box__kbd {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-start: 50%;
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  font: inherit;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25rem;
  text-align: center;
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  transform: translateY(-50%);
  pointer-events: none;
}

.srch-box:focus-within .srch-box__kbd,
.srch-box.has-value .srch-box__kbd { display: none; }

@media (pointer: coarse) {
  .srch-box__kbd { display: none; }
}

/* Livewire shows this only while a search is in flight, and only after a short delay. */
.srch-box__busy {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}


/* ==========================================================================
   2 · THE DROPDOWN PANEL
   --------------------------------------------------------------------------
   Shown while the box has focus, and the panel takes focus when it is pressed
   (it has tabindex="-1"), so pressing its padding or its scrollbar does not
   close it before the click lands. Escape closes it (.is-closed).
   ========================================================================== */

.srch-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  display: none;
  inline-size: min(30rem, calc(100vw - 2 * var(--page-padding)));
  max-block-size: min(70vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  outline: none;
  transform-origin: top;
  animation: apple-menu-in var(--duration-base) var(--ease-standard);
}

.srch-box:focus-within .srch-panel { display: block; }
.srch-box.is-closed .srch-panel { display: none; }


/* ==========================================================================
   3 · ROWS, GROUPS AND NOTES
   ========================================================================== */

.srch-group + .srch-group { margin-block-start: var(--space-2); }

.srch-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2) var(--space-1);
  padding-inline: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* One result, one "show all" and the last "see all results" are all rows of the same shape. */
.srch-hit,
.srch-more,
.srch-all {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.srch-hit:hover,
.srch-more:hover,
.srch-all:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface-hover);
}

/* The highlighted option. Never colour alone: a ring and a bar as well, so it survives high contrast. */
.srch-hit.is-active,
.srch-more.is-active,
.srch-all.is-active {
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
  border-inline-start: 3px solid var(--color-primary);
}

.srch-hit__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-circle);
}

.srch-hit__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.srch-hit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  min-inline-size: 0;
}

/* The number is what a person came for, so it is the last thing to be cut: the chip goes under it before it shortens. */
.srch-hit__title {
  display: block;
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srch-hit__exact {
  margin-inline-start: var(--space-1);
  color: var(--color-success-fg);
  vertical-align: -0.125em;
}

.srch-hit__sub {
  display: block;
  overflow: hidden;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srch-hit__dot { margin-inline: var(--space-1); }

.srch-hit__badge { flex: 0 0 auto; margin-inline-start: auto; }

.srch-more,
.srch-all {
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.srch-more { min-block-size: 2.25rem; font-size: var(--font-size-xs); }

.srch-all {
  justify-content: flex-start;
  margin-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-hairline);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.srch-all > span { flex: 1 1 auto; }

@media (pointer: coarse) {
  .srch-more { min-block-size: var(--tap-target-min); }
}

/* A line of explanation inside the panel: too short, nothing found, slow down, a source that did not answer. */
.srch-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

.srch-note > .icon { flex: 0 0 auto; margin-block-start: 0.15em; }
.srch-note--warning { color: var(--color-warning-fg); }
.srch-note--info { color: var(--color-info-fg); }

.srch-note + .srch-note { border-block-start: 1px solid var(--color-hairline); }

/* What can be typed: shown under an empty box, and on an empty results page. */
.srch-hints__title {
  margin: 0;
  padding-block: var(--space-2) var(--space-1);
  padding-inline: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.srch-hints__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.srch-hints__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
}

.srch-hints__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.srch-hints__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.srch-hints__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   4 · THE BOX ON A PHONE
   --------------------------------------------------------------------------
   Under 600px the topbar has no room for a field. The box is the magnifier
   alone, as large as any other control; pressing it focuses the field, and the
   field then covers the whole topbar until focus leaves. No script: it is the
   same input, resized by :focus-within.
   ========================================================================== */

@media (max-width: 599px) {
  .srch-box {
    flex: 0 0 auto;
    inline-size: var(--tap-target-min);
  }

  .srch-box__input {
    padding-inline: 0;
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
  }

  .srch-box__input::placeholder { color: transparent; }

  /* Centred between both edges whichever way the page reads. */
  .srch-box__icon {
    inset-inline: 0;
    margin-inline: auto;
    color: var(--color-text-muted);
  }

  .srch-box__kbd { display: none; }

  .srch-box:focus-within {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    inline-size: auto;
    padding-inline: var(--space-3);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-hairline);
  }

  .srch-box:focus-within .srch-box__form { flex: 1 1 auto; }

  .srch-box:focus-within .srch-box__input {
    padding-inline: 2.5rem;
    color: var(--color-text);
    caret-color: auto;
    cursor: text;
    background: var(--color-fill);
  }

  .srch-box:focus-within .srch-box__input::placeholder { color: var(--color-placeholder); }

  .srch-box:focus-within .srch-box__icon {
    inset-inline: auto;
    inset-inline-start: var(--space-3);
    margin-inline: 0;
  }

  .srch-panel {
    inset-inline: var(--space-3);
    inline-size: auto;
    max-block-size: calc(100dvh - var(--topbar-height) - var(--space-4));
  }
}


/* ==========================================================================
   5 · THE RESULTS PAGE
   ========================================================================== */

/* Where to jump: one chip per source that found something. */
.srch-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.srch-jump__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.srch-jump__chip:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-fill-hover);
}

.srch-jump__count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

@media (pointer: coarse) {
  .srch-jump__chip { min-block-size: var(--tap-target-min); }
}

.srch-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
}

.srch-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.srch-section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
}

.srch-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.srch-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border-block-end: 1px solid var(--color-border-subtle);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.srch-rows > li:last-child .srch-row { border-block-end: 0; }

.srch-row:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-table-hover);
}

.srch-row__go {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
}

/* On the page a result has room: the details wrap instead of being cut off. */
.srch-row .srch-hit__title,
.srch-row .srch-hit__sub {
  white-space: normal;
}

.srch-hints__list--page {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-2);
}

.srch-hints__list--page .srch-hints__item { padding-inline: 0; }


/* ==========================================================================
   6 · ACCESSIBILITY FALLBACKS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .srch-panel { animation: none; }
  .srch-box__input,
  .srch-hit,
  .srch-more,
  .srch-all,
  .srch-row,
  .srch-jump__chip { transition: none; }
}

/* Windows high-contrast: the system palette wins, and the highlighted option still says so. */
@media (forced-colors: active) {
  .srch-panel { border: 1px solid CanvasText; }
  .srch-box__input { border: 1px solid ButtonText; }
  .srch-hit.is-active,
  .srch-more.is-active,
  .srch-all.is-active { outline: 2px solid Highlight; }
  .srch-hit__icon { border: 1px solid CanvasText; }
}

@media print {
  .srch-box { display: none; }
}