/* Search page (search.html): search bar, results, popular tags */
@layer pages {
  .search-main { padding-block: 1rem 3rem; @media (width >= 640px) { padding-block-start: 1.5rem; } }
  .search-head { padding-block: .5rem 1.25rem; }

  /* Input group: text field with the submit button docked inside */
  .search-bar {
    --r: 1rem;
    display: flex;
    align-items: center;
    block-size: 2.25rem;
    padding-inline-end: .125rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--r) - 2px);
    background: var(--background);
    box-shadow: 0 1px 2px 0 oklch(0% 0 0 / .05);
    transition: box-shadow .15s var(--ease), border-color .15s;
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { background: color-mix(in oklch, var(--input) 30%, transparent); }
    }
    :root[data-theme="dark"] & { background: color-mix(in oklch, var(--input) 30%, transparent); }

    &:has(input:focus-visible) { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }

    & input {
      flex: 1;
      min-inline-size: 0;
      block-size: 100%;
      padding-inline: .75rem;
      font-size: .875rem;
      outline: none;
      &::placeholder { color: var(--muted-foreground); }
      &::-webkit-search-cancel-button { display: none; }
    }
    & button {
      display: inline-flex;
      align-items: center;
      gap: .375rem;
      block-size: 2rem;
      padding-inline: .625rem;
      border-radius: calc(var(--r) - 4px);
      background: var(--primary);
      color: var(--primary-foreground);
      font-size: .875rem;
      font-weight: 500;
      transition: background-color .15s, opacity .15s;
      &:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
      &:disabled { opacity: .5; pointer-events: none; }
    }
  }

  .search-head .chips { margin-block: .625rem 0; }

  .result-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-block-size: 1.25rem;
    margin-block-start: .5rem;
    font-size: .875rem;
    color: var(--muted-foreground);

    & .summary { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & strong { font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
    & a {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      flex-shrink: 0;
      font-weight: 500;
      color: var(--foreground);
      text-underline-offset: 4px;
      &:hover { text-decoration: underline; }
    }
  }

  .results { display: flex; flex-direction: column; gap: .25rem; }

  .popular {
    & h2 { margin-block-end: .75rem; font-size: .875rem; font-weight: 500; }
    & .wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
  }
}