/*
 * Search box (components/_search_box):
 *   header  460px x 46px surface pill with a "Title / Filename ▾" mode select (D-06, D-18) that is
 *           as wide as the chosen mode ("Full text" ~86px); the admin header variant is 420px with
 *           no mode (A-01). In the header row (.app-header, a size container) the width follows
 *           the row: the design width when there is room, never under 220px (layout/shell.css).
 *   hero    58px field with a gold Search button and the Title / Filename | Full text segmented
 *           control + hint underneath (D-05).
 */
@layer components {
  .search {
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 460px;
    max-width: 100%;
    height: 46px;
    padding: 0 6px 0 18px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
  }
  .search--admin { width: 420px; }
  .search:focus-within { box-shadow: var(--ring); }

  .search__icon {
    display: flex;
    flex: none;
    font-size: 18px;
    color: var(--color-neutral-800);
  }

  .search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
  }
  .search__input::placeholder { color: var(--color-neutral-700); opacity: 1; }
  .search__input:not(:placeholder-shown) { font-weight: 600; }
  .search__input:focus { outline: none; }
  .search__input::-webkit-search-cancel-button { display: none; }

  .search__mode {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
  }
  .search__mode select {
    field-sizing: content;
    height: 100%;
    padding: 0 29px 0 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
  }
  .search__mode select:focus-visible { outline: none; box-shadow: var(--ring); }
  .search__mode .icon {
    position: absolute;
    right: 12px;
    font-size: 13px;
    pointer-events: none;
  }
  /* A header search squeezed under 280px (tablet, beside breadcrumbs) keeps the field and drops the
     mode pill; the chosen mode is still submitted, and the results page has the mode toggle. */
  @container (max-width: 279px) {
    .search__mode { display: none; }
  }

  /* In the header row: room for the breadcrumbs and the Site pill / user block first. */
  .app-header .search {
    flex: none;
    width: clamp(220px, 100cqw - var(--header-end-room) - var(--header-crumbs-room), 460px);
  }
  .app-header .search--admin { width: clamp(220px, 100cqw - var(--header-end-room) - var(--header-crumbs-room), 420px); }
  .app-header:not(:has(> .crumbs)) .search { width: clamp(220px, 100cqw - var(--header-end-room), 460px); }
  .app-header:not(:has(> .crumbs)) .search--admin { width: clamp(220px, 100cqw - var(--header-end-room), 420px); }

  /* Hero (Home) */
  .search-hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .search--hero {
    width: 100%;
    height: 58px;
    gap: 12px;
    padding: 0 8px 0 22px;
  }
  .search--hero .search__icon { font-size: 20px; }
  .search--hero .search__input { font-size: 15.5px; }
  .search--hero .btn { height: 42px; }

  .search-hero__modes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-left: 8px;
  }
  .search-hero__hint {
    font-size: 12.5px;
    color: var(--color-neutral-700);
  }

  @media (max-width: 1199px) {
    .search { width: 380px; }
    .search--hero { width: 100%; }
  }

  @media (max-width: 1023px) {
    .search { width: 340px; }
    .search--hero { width: 100%; }
  }

  @media (max-width: 767px) {
    .search,
    .search--admin { width: 100%; height: 48px; }
    .search--hero { height: 52px; padding-left: 18px; }
    .search--hero .btn { height: 40px; padding: 0 16px; }
  }
}