/*
 * M1 Forms library (D-13, M-06, S-03): a search-first page.
 *   .forms-search  the 66px search field (52px on phones), group pills and the match count
 *   .forms-group   a subcategory petal + "2 forms" over a .list.forms-list of .forms-row capsules
 */
@layer pages {
  .forms-search {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
  }

  .forms-search__field {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 66px;
    padding: 0 10px 0 26px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    cursor: text;
  }
  .forms-search__field:focus-within { box-shadow: var(--ring); }

  .forms-search__icon {
    display: flex;
    flex: none;
    font-size: 22px;
  }

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

  .forms-search__clear {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
  }
  .forms-search__clear:hover { background: var(--color-neutral-300); color: var(--color-text); }

  .forms-search__filters {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .forms-search__count {
    margin-left: auto;
    color: var(--color-neutral-700);
    font-size: 13.5px;
    white-space: nowrap;
  }

  .forms-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .forms-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 4px;
  }

  .forms-group__title { margin: 0; line-height: 1.5; letter-spacing: 0; }

  .forms-group__count {
    color: var(--color-neutral-700);
    font-size: 13px;
  }

  .forms-list {
    --list-cols: 52px minmax(0, 2.4fr) 170px 150px 80px 150px;
    --list-cols-mobile: minmax(0, 1fr) auto;
  }

  .forms-row { min-height: 66px; }
  .forms-row:target { box-shadow: var(--ring); }
  .forms-row .btn--sm { height: 40px; }

  .forms-row__title { line-height: 1.3; }

  .forms-row__type {
    color: var(--color-neutral-700);
    font: 700 11.5px var(--font-mono);
  }

  .forms-row__download {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color-input-border);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 18px;
  }
  .forms-row__download:hover { background: var(--color-btn-hover); color: var(--color-text); }

  @media (max-width: 1199px) {
    .forms-list { --list-cols: 48px minmax(0, 2fr) 150px 140px 64px 150px; }
  }

  @media (max-width: 1023px) {
    .forms-list { --list-cols: 48px minmax(0, 1fr) 150px 64px 150px; }
    .forms-row > .nowrap { display: none !important; }
  }

  /* Phones (M-06) */
  @media (max-width: 767px) {
    /* 14px between the search, the pills and every row, across groups too (.main uses 16px). */
    .main:has(> .forms-search) { gap: 14px; }

    .forms-head { display: none; }

    .forms-search { gap: 14px; }
    .forms-search__field {
      gap: 10px;
      height: 52px;
      padding: 0 8px 0 18px;
    }
    .forms-search__icon { font-size: 19px; }
    .forms-search__input { font-size: 16px; }
    .forms-search__clear { position: relative; width: 36px; height: 36px; font-size: 15px; }
    .forms-search__clear::before { content: ""; position: absolute; inset: -4px; } /* 44px hit target */

    .forms-search__filters .pill-filters { flex-wrap: wrap; overflow: visible; }
    .forms-search__count { display: none; }

    .forms-group { gap: 14px; }
    .forms-group__head { display: none; }
    .forms-list { gap: 14px; }

    .forms-row {
      min-height: 64px;
      padding: 10px 16px;
    }
    .forms-row .list-row__main { gap: 3px; }
  }
}