/* /saved page chrome — search + sort + load-more + end + empty cells.

   These rules previously lived in components/recipes-index.css when
   /recipes shared the same idiom. Slice C PR1 took /recipes to the
   masonry-Explore shape and made /saved the sole consumer of this
   uniform-grid + htmx-chrome vocabulary. Moving to a single-purpose
   file (this one) avoids the "recipes-index.css owns saved-only
   classes" cognitive lie.

   The class names keep the `recipes-` prefix because the shared
   .recipes-grid base class lives in recipes-index.css and the chrome
   visually sits above that grid. A future slice that renames /saved
   classes to .saved__* would also rename here.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {
  /* ==============================================
     SEARCH + SORT CHROME
     Single <form> wrapping search input + sort dropdown. htmx fires
     hx-get on input change (debounced) or select change; server
     returns a fragment that replaces the grid contents. The sort
     dropdown hides via the sibling selector below when the search
     input has content.
     ============================================== */

  .recipes-index__chrome {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-left: auto;
    flex-wrap: wrap;
  }

  .recipes-index__search-label {
    /* Visually hidden — placeholder + icon convey purpose. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .recipes-index__search-input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface);
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-width: 14rem;
  }

  .recipes-index__search-input:hover {
    border-color: var(--md-border);
  }

  .recipes-index__search-input:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: var(--focus-ring);
  }

  .recipes-index__search-input::placeholder {
    color: var(--md-on-surface-variant);
  }

  /* Hide the sort dropdown while the search input has user-entered
     content. Sibling-selector approach (vs. template branch) means
     hide/show is reactive to the input's actual state, including
     during htmx-driven search where the form chrome isn't re-rendered.
     :placeholder-shown is widely supported (Edge 79+, Safari 9+, FF 51+);
     when no value is present, the placeholder shows and sort stays
     visible. ~ is the general sibling combinator. */
  .recipes-index__search-input:not(:placeholder-shown) ~ .recipes-index__sort-label,
  .recipes-index__search-input:not(:placeholder-shown) ~ .recipes-index__sort-select {
    display: none;
  }

  .recipes-index__sort-label {
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .recipes-index__sort-select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface);
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  .recipes-index__sort-select:hover {
    border-color: var(--md-border);
  }

  .recipes-index__sort-select:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: var(--focus-ring);
  }

  /* ==============================================
     LOAD-MORE + END-OF-LIST CELLS
     <li> children of .recipes-grid; grid-column: 1 / -1 spans the
     full row regardless of column count so the button or end message
     centers below the last batch.
     ============================================== */

  .recipes-grid__load-more,
  .recipes-grid__end {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-6) 0;
    list-style: none;
  }

  .recipes-grid__load-more-btn {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--md-on-surface);
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-border);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: background var(--motion-spring-fast-effects-duration)
                var(--motion-spring-fast-effects),
                border-color var(--motion-spring-fast-effects-duration)
                var(--motion-spring-fast-effects),
                transform var(--motion-spring-fast-spatial-duration)
                var(--motion-spring-fast-spatial);
  }

  .recipes-grid__load-more-btn:hover {
    background: var(--md-surface-container);
    border-color: var(--md-on-surface-variant);
  }

  .recipes-grid__load-more-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .recipes-grid__load-more-btn:active {
    transform: scale(0.98);
  }

  .recipes-grid__end-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ==============================================
     EMPTY-STATE CELL
     <li> inside .recipes-grid (full-row span via grid-column: 1 / -1)
     so it's visible on htmx fragment responses that swap the grid
     contents. Used by /saved + the recipe_grid_batch partial.
     ============================================== */

  .recipes-grid__empty-cell {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-section) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    list-style: none;
  }

  .recipes-grid__empty-heading {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 500;
    margin: 0;
  }

  .recipes-grid__empty-body {
    color: var(--md-on-surface-variant);
    max-width: 36ch;
    margin: 0;
  }

  .recipes-grid__empty-cta {
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-radius: var(--radius-pill);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--motion-spring-fast-effects-duration)
                var(--motion-spring-fast-effects),
                transform var(--motion-spring-fast-spatial-duration)
                var(--motion-spring-fast-spatial);
  }

  /* Empty-state CTA uses .state-layer (globals.css) for hover overlay
     per Slice B Drift (g); see paste-form.css for the foreground-overlay
     rationale on white-on-tomato surfaces. */
  .recipes-grid__empty-cta.state-layer::after {
    background: var(--md-on-surface);
  }

  .recipes-grid__empty-cta:active {
    transform: scale(0.98);
  }

  .recipes-grid__empty-cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}