/* recommendations — result bar (count + per-page + view toggle) and pagination.
 * Per-page matches the Figma "Small Dropdown": surface-2 fill, 4px radius. */

.rec-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}
.rec-resultbar-count {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
}
.rec-resultbar-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* Per-page — Figma "Input / Small Dropdown". A custom single-select listbox
 * (native <select> can't style the option-row hover or rotate the chevron on
 * open). Closed field: surface-2 fill, text-primary label, symbol-default
 * chevron, 4px radius. Hover fills surface-hover; open keeps that fill, adds a
 * strong 1px border, and flips the chevron to symbol-strong + 180°. */
.rec-perpage { position: relative; }
.rec-perpage-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  height: 32px;
  padding-inline: var(--spacing-12);
  border: var(--stroke-weight-1) solid transparent;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  white-space: nowrap;
}
.rec-perpage-field:hover { background-color: var(--background-hover); }
.rec-perpage.is-open .rec-perpage-field {
  background-color: var(--background-hover);
  border-color: var(--border-strong);
}
.rec-perpage-chevron {
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--symbol-default);
  transition: transform 120ms ease, color 120ms ease;
}
.rec-perpage.is-open .rec-perpage-chevron {
  transform: rotate(180deg);
  color: var(--symbol-strong);
}

/* Open menu — surface-2 panel, 1px surface-hover border, 8px pad, 8px gap.
   Hidden by default; shown only when the container carries `is-open` (a base
   `display: flex` here would beat the gem's `.hidden` utility on source order). */
.rec-perpage-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-4));
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 100%;
  padding: var(--spacing-8);
  border: var(--stroke-weight-1) solid var(--border-default);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  list-style: none;
}
.rec-perpage.is-open .rec-perpage-menu { display: flex; }
.rec-perpage-option {
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--spacing-16);
  border-radius: var(--corner-radius-xs);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  white-space: nowrap;
  cursor: pointer;
}
.rec-perpage-option:hover { background-color: var(--background-hover); }

/* View toggle — Figma "Toggle": 64×32 surface-2 container, 2px pad, 4px gap.
   Each button is a 28×28 pill (2px radius). Inactive icon is symbol-default;
   hover fills surface-hover with symbol-hover; active fills base (the darkest
   surface) with symbol-strong. */
.rec-view-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  gap: var(--spacing-4);
  padding: var(--spacing-2);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
}
.rec-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--corner-radius-xxs);
  color: var(--symbol-default);
}
.rec-view-btn svg { width: 20px; height: 20px; }
.rec-view-btn:hover {
  background-color: var(--background-hover);
  color: var(--symbol-hover);
}
.rec-view-btn.is-active {
  background-color: var(--background-base);
  color: var(--symbol-strong);
}

/* ---- Pagination ---- */
.rec-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-16);
}
.rec-page-link {
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-12);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-14);
}
.rec-page-link:hover { background-color: var(--background-hover); }
.rec-page-status {
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
}