/* Pakstoor :: pks-help-search.css :: v1.0-000002 :: 2026-10-23 */
/*
  Copyright (c) 2026 Pakstoor (Pty) Ltd. All rights reserved.
  Help & FAQ Centre search results (owner review list 2, item 4, 2026-10-22): a compact ranked list right under the search
  box, above Quick Help (js/pks-help.js builds it). Uses the colour tokens of css/pks-help.css (.hc scope), so dark and
  light mode follow the page. Brand Pack v1.0: orange #F47A20 is a fill, focus and selection colour; orange TEXT on light
  surfaces is #B5520F. All motion respects prefers-reduced-motion.
*/
.hcr { margin: 14px 0 6px; }
.hcr[hidden] { display: none !important; }
.hcr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.hcr-head[hidden] { display: none; }
.hcr-title { margin: 0; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hc-brand-text); }
.hcr-openall, .hcr-more, .hcr-clear { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--hc-line); background: transparent; color: var(--hc-ink); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; }
.hcr-openall:hover, .hcr-more:hover { border-color: var(--hc-brand); }
.hcr-clear { background: var(--hc-brand); border-color: var(--hc-brand); color: #141414; }
.hcr-clear:hover { background: var(--pk-brand-hover, #FF8A3D); }
.hcr-openall:focus-visible, .hcr-more:focus-visible, .hcr-clear:focus-visible { outline: 2px solid var(--hc-brand); outline-offset: 2px; }
.hcr-clear:focus-visible { outline-color: var(--hc-ink); }
.hcr-note { margin: 0 0 10px; font-size: 14px; color: var(--hc-muted); }
.hcr-note[hidden] { display: none; }

.hc .hcr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc .hcr-item { margin: 0; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-surface); transition: border-color 160ms ease; }
.hc .hcr-item.is-open { border-color: rgba(244, 122, 32, .55); }
.hcr-btn { width: 100%; display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 12px;
  background: transparent; color: var(--hc-ink); font: inherit; text-align: left; cursor: pointer; }
.hcr-btn:hover .hcr-q { text-decoration: underline; text-decoration-color: rgba(244, 122, 32, .6); text-underline-offset: 4px; }
.hcr-btn:focus-visible { outline: 2px solid var(--hc-brand); outline-offset: -2px; }
.hcr-main { flex: 1 1 auto; min-width: 0; display: block; }
.hcr-q { display: block; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--hc-ink); }
.hcr-meta { display: block; margin-top: 3px; }
.hcr-cat { display: inline-block; margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--hc-brand-text); }
.hcr-prev { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.5;
  color: var(--hc-muted); }
.hcr-item.is-open .hcr-prev { display: none; }
.hcr-chev { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hc-brand-wash); color: var(--hc-brand-text); transition: transform 200ms ease; }
.hcr-chev svg { width: 15px; height: 15px; }
.hcr-item.is-open .hcr-chev { transform: rotate(180deg); }
.hcr-a[hidden] { display: none; }
.hc .hcr-a .hc-a-inner { padding: 0 14px 12px; }
.hc mark.hcr-hit { background: rgba(244, 122, 32, .24); color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-theme="light"] .hc mark.hcr-hit { background: rgba(244, 122, 32, .20); color: #141414; }
.hcr-more { margin-top: 10px; }
.hcr-more[hidden] { display: none; }

/* no results: one message, a Clear search action; the topic chips above come back as suggestions */
.hcr-empty { padding: 16px 18px; border: 1px dashed var(--hc-line); border-radius: var(--hc-radius, 14px); color: var(--hc-muted); font-size: 15px; line-height: 1.6; }
.hcr-empty[hidden] { display: none; }
.hcr-empty-title { margin: 0 0 4px; font-size: 16px; font-weight: 650; color: var(--hc-ink); overflow-wrap: anywhere; }
.hcr-empty-hint { margin: 0 0 12px; }
.hcr-empty a { color: var(--hc-brand-text); text-underline-offset: 3px; }
html:not(#pkb) .hc .hcr-empty a { color: var(--hc-brand-text) !important; }

/* while a search shows results the topic chips step aside; they return as suggestions when nothing matches */
.hc.is-searching:not(.is-nomatch) .hc-search-hints { display: none; }
/* the status line is the screen-reader announcement; when nothing matches the visible message says the same */
.hc.is-nomatch .hc-search-status { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the clear (x) button sits at the end of the text box, not under the Search button that js/pks-help.js adds to the row */
.hc-search-row .hc-search-clear { position: relative; right: auto; flex: 0 0 38px; margin-left: -46px; }
.hc .hc-noresults { display: none !important; }

@media (max-width: 600px) {
  .hcr-btn { padding: 12px 12px; gap: 10px; }
  .hcr-q { font-size: 15.5px; }
  .hcr-prev { -webkit-line-clamp: 3; }
  .hc .hcr-a .hc-a-inner { padding: 0 12px 12px; }
  .hcr-openall { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hcr-chev, .hcr-item { transition: none !important; }
}

/* 2026-10-23 QA: on phones the Search button and the 48px kept for the hidden clear button cut the placeholder
   ("Try: passkey, refu"); the field takes the full row and the Search button sits under it. */
@media (max-width: 480px) {
  .hc-search-row { flex-wrap: wrap; row-gap: 8px; }
  .hc-search-row .hc-search-input { flex: 1 0 100%; padding-right: 12px; }
  .hc-search-row:has(.hc-search-clear:not([hidden])) .hc-search-input { padding-right: 48px; }
  .hc-search-row .hc-search-go { width: 100%; }
}