/* #413: search rows + live suggestions, shared by the signed-in Search tab (app/search) and the logged-out homepage.
   One component (src/app-search.js), one stylesheet. Monochrome theme tokens only. */
.st-results .sr-card { border-bottom: 1px solid var(--bd); }
.st-results .sr-card:last-child { border-bottom: 0; }
.sr-link { display: flex; gap: 12px; align-items: flex-start; padding: 14px 4px; min-height: 44px; color: var(--fg); text-decoration: none; }
.sr-link:active { background: var(--card); }
.sr-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-weight: 700; font-size: 18px; }
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-body { display: grid; gap: 1px; min-width: 0; }
.sr-display { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-name-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sr-name { color: var(--mut); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-desc { font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-indexed { color: var(--text-2, var(--mut)); font-size: 12px; margin-top: 2px; }
.sr-indexed[hidden] { display: none !important; }
.st-results .sr-card:has(.sr-link[href]) { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.st-skel { height: 72px; border-radius: 12px; background: var(--card); margin: 0 0 8px; position: relative; overflow: hidden; }
.st-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 12%, transparent), transparent); animation: st-shimmer 1.2s infinite; }
@keyframes st-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .st-skel::after { animation: none; content: none; } }
.st-empty { list-style: none; margin: 16px 0; padding: 0; }
.st-empty-title { margin: 0 0 12px; font-size: var(--fs-16); font-weight: 600; }
.st-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.st-empty-actions .btn, .st-empty-actions a { min-height: 44px; }
.st-empty-next { justify-self: start; min-height: 44px; margin: 0 4px; text-decoration: none; display: inline-flex; align-items: center; }
[hidden].st-empty-next { display: none; }
.st-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: 6px; border: 1px solid var(--bd); border-radius: 20px; background: var(--bg); }
.st-sug-btn { display: flex; gap: 8px; align-items: baseline; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; align-items: center; }
.st-sug-btn:hover, .st-sug-btn:focus-visible { background: var(--card); outline: none; }
.st-sug-name { color: var(--mut); font-size: 14px; overflow-wrap: anywhere; }
.st-sug-dn { font-weight: 600; }
.st-sug-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
/* Test-name badge on a row; homepage hosts (adopted form / list). */
.sr-head { display: flex; gap: 6px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.sr-badge { font-size: 11px; color: var(--mut); border: 1px solid var(--bd); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.st-form-host { position: relative; }
ol.st-results { gap: 0; }
div.sr-link { cursor: default; }
/* #5 (spec #486): signed-in empty query (Recent, Following, Explore), empty result, Try again, pager, card checkmark. */
.st-home { display: grid; gap: 14px; margin-top: 4px; }
.st-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px; }
.st-section-title { font-size: 14px; font-weight: 700; margin: 0; }
.st-section-list { list-style: none; margin: 0; padding: 0; display: grid; }
.st-section-list .sr-card { border-bottom: 1px solid var(--bd); }
.st-section-list .sr-card:last-child { border-bottom: 0; }
.sr-compact { display: flex; align-items: center; }
.sr-compact .sr-link { flex: 1; min-width: 0; padding: 8px 4px; }
.sr-compact .sr-avatar { width: 36px; height: 36px; }
.sr-compact .sr-desc { -webkit-line-clamp: 1; margin-top: 1px; }
.st-link-btn, .st-remove { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; border-radius: 999px; }
.st-remove { text-decoration: none; font-size: 20px; color: var(--mut); flex: none; }
.st-link-btn:focus-visible, .st-remove:focus-visible, .st-retry:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.st-retry { justify-self: start; min-height: 44px; padding: 0 18px; border-radius: 999px; margin: 0 4px; }
.st-home-hint { margin: 0 4px; }
.st-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-pager .btn { min-height: 44px; border-radius: 999px; padding: 0 16px; }
.st-pager .btn[disabled] { opacity: .5; }
.st-pageinfo { color: var(--mut); font-size: 14px; }
.sr-check { display: inline-flex; align-self: center; color: var(--check); }
.sr-check svg { display: block; width: 16px; height: 16px; }
.sr-check .pb-tick { stroke: var(--on-check); }
[hidden].st-retry, [hidden].st-home, [hidden].st-pager { display: none; }
.st-status.empty, .st-status.loading, .st-status.error {
  padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--bd); background: var(--card);
}
.st-status.empty, .st-status.loading { color: var(--mut); }
.st-status.error { color: var(--danger-text); border-color: currentColor; }
@media (max-width: 420px) {
  .st-results .sr-card, .st-section-list .sr-card { min-width: 0; }
  .sr-link { padding-left: 0; padding-right: 0; }
  .sr-display, .sr-name { white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; }
  .sr-head { flex-wrap: wrap; }
}