/* ============================================================
 * Satya v26 — Search / Discovery (/search) per-view styles
 * ============================================================
 * The v26 chrome auto-loads only  core → theme → button → v26/base.css.
 * This sheet is <link>ed from app/Views/v26/search/index.php (the accepted
 * per-view CSS pattern in this codebase version) for the handful of
 * structural primitives the unified search page needs that base.css
 * deliberately does not ship. TOKENS ONLY — every value below is
 * geometry/layout, never a raw color (the one #fff is a var() fallback,
 * the same convention .s-badge / .s-skip-link use in base.css), so
 * light/dark and every theme keep working by swapping :root.
 *
 * Justified exceptions (each genuinely absent from v26/base.css):
 *
 *  1. .srch-tabs / .srch-tab — a horizontal, scrollable tab bar with an
 *     active pill, a live count, and a "catalog link" variant marked as
 *     navigation OUT of search (arrow-out). base.css ships no tab
 *     primitive; .s-rail is scoped to the studio shell (vertical rail) and
 *     .s-chip is a static label with no 44px touch target or active state.
 *
 *  2. .srch-field / .srch-input — a prominent page-level search box (icon +
 *     large input). base.css .s-nav__search is chrome-scoped and narrow
 *     (24rem) — there is no page-hero search primitive.
 *
 *  3. .srch-avatar — sizing wrapper for renderAvatar(), whose <img> carries
 *     only Tailwind size utilities (w-8 h-8 …) that do NOT resolve without
 *     Tailwind. Mirrors the established .ps-avatar pattern in
 *     views/product-show.css. base.css ships no content-area avatar sizing.
 *
 *  4. .srch-clamp-2 / .srch-clamp-3 — multi-line text clamps for card titles
 *     and excerpts. base.css ships no line-clamp utility (dashboard.css
 *     carries its own for the same reason).
 *
 *  5. .srch-person / .srch-vcard — internal layout for the authored result
 *     cards (centered person tile; full-height vertical card with a pinned
 *     footer). .s-card is a bare surface with no internal composition.
 * ============================================================ */

/* 1 — Tab bar ─────────────────────────────────────────────── */
.srch-tabs {
  display: flex;
  gap: var(--s-space-2);
  overflow-x: auto;
  padding-bottom: var(--s-space-3);
  margin-bottom: var(--s-space-5);
  border-bottom: 1px solid var(--border-secondary);
  scrollbar-width: thin;
}
.srch-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
  min-height: var(--s-control-h);
  padding: 0 var(--s-space-4);
  border-radius: var(--radius-pill);
  font-size: var(--s-text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--s-transition), color var(--s-transition),
              border-color var(--s-transition);
}
.srch-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.srch-tab i { font-size: 1.125rem; }
.srch-tab.is-active {
  background: var(--brand-primary);
  color: var(--text-inverse, #fff);
}
.srch-tab__count { font-size: var(--s-text-xs); font-weight: 700; color: var(--text-tertiary); }
.srch-tab.is-active .srch-tab__count { color: inherit; opacity: 0.8; }

/* Catalog links: sibling-styled but visibly navigation OUT of search */
.srch-tab--link {
  background: transparent;
  border-color: var(--border-primary);
  color: var(--brand-primary);
}
.srch-tab--link:hover {
  background: var(--primary-50);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.srch-tab__arrow { font-size: 0.875rem !important; opacity: 0.7; }

/* 2 — Prominent search box ────────────────────────────────── */
.srch-searchrow { align-items: center; gap: var(--s-space-3); }
.srch-field { position: relative; flex: 1 1 22rem; min-width: 0; }
.srch-field__icon {
  position: absolute;
  left: var(--s-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
  font-size: 1.25rem;
  pointer-events: none;
}
.srch-input {
  min-height: 3.25rem;
  padding-left: 2.85rem;
  font-size: var(--s-text-lg);
  border-radius: var(--radius-pill);
}
.srch-filters { gap: var(--s-space-3); flex-wrap: wrap; }
.srch-filters .s-field { flex: 0 1 12rem; }

/* 3 — Avatar sizing wrappers (renderAvatar has no size without Tailwind) ── */
.srch-avatar { display: inline-block; flex-shrink: 0; line-height: 0; }
.srch-avatar img { display: block; border-radius: var(--radius-pill); object-fit: cover; }
.srch-avatar--sm img { width: 2rem; height: 2rem; }
.srch-avatar--xl img { width: 5rem; height: 5rem; }

/* 4 — Line clamps ─────────────────────────────────────────── */
.srch-clamp-2,
.srch-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srch-clamp-2 { -webkit-line-clamp: 2; }
.srch-clamp-3 { -webkit-line-clamp: 3; }

/* 5 — Authored result cards ───────────────────────────────── */
.srch-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-space-2);
  height: 100%;
}
.srch-person__name {
  font-size: var(--s-text-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.srch-person__role {
  font-size: var(--s-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.srch-vcard { display: flex; flex-direction: column; height: 100%; gap: var(--s-space-2); }
.srch-vcard__head { display: flex; align-items: center; gap: var(--s-space-2); flex-wrap: wrap; }
.srch-vcard__title {
  font-size: var(--s-text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.srch-vcard__foot {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  margin-top: auto;
  padding-top: var(--s-space-3);
  font-size: var(--s-text-xs);
  color: var(--text-tertiary);
}
.srch-vcard__foot-end { margin-left: auto; white-space: nowrap; }

/* Browse-link row inside the empty state (calm, centered) */
.srch-empty-links { justify-content: center; margin-top: var(--s-space-4); }