/* ============================================================
   NETINT Research — Search Results (README §2)
   Base layer (.nr-page) + ResultRow (.nr-result) come from cards.css.
   ============================================================ */

/* ── search band ── */
.nr-srch-band { background: var(--mist); border-bottom: 1px solid var(--line); margin-bottom: 50px; }
.nr-srch-band .wrap { padding-top: 26px; padding-bottom: 26px; }
.nr-srch-box {
  display: flex; align-items: center; max-width: 820px; margin: 0 auto; height: 56px;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px;
  box-shadow: var(--shadow-1); padding: 0 0 0 20px; /* no right pad: the submit fills the right end */
}
.nr-srch-box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56,196,235,.16), var(--shadow-1); }
.nr-srch-box__ico { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.nr-srch-box__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 400 16.5px var(--sans); padding: 0 12px; color: var(--ink); }
/* Same theme-proofing as the hero input: the site theme's <input> border can't show inside the pill. */
.nr-srch-box input.nr-srch-box__input,
.nr-srch-box input.nr-srch-box__input:focus,
.nr-srch-box input.nr-srch-box__input:hover {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.nr-srch-box__btn { flex-shrink: 0; align-self: stretch; box-sizing: border-box; border-radius: 0 999px 999px 0; padding: 0 26px; font-size: 15px; font-weight: 600; cursor: pointer; } /* fills the right end: squared left, rounded right */
/* Pink-filled by default; flip to outlined-pink on hover. Theme-proofed like the hero submit. */
.nr-srch-box .nr-srch-box__btn {
  background: var(--red) !important; color: #fff !important;
  border: 1.5px solid var(--red) !important;
  border-radius: 0 999px 999px 0 !important; /* theme forces square corners otherwise */
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nr-srch-box .nr-srch-box__btn:hover,
.nr-srch-box .nr-srch-box__btn:focus-visible {
  background: #fff !important; color: var(--red) !important; border-color: var(--red) !important;
}

/* ── two-column body ── */
/* flex (not grid) so an empty/hidden rail lets results take full width — no reserved 248px track */
.nr-srch-body { padding-top: 28px; padding-bottom: 64px; display: flex; gap: 40px; align-items: flex-start; }
/* max-height + overflow-y: pin the rail to the viewport so a tall facet list scrolls
   inside its own column instead of forcing a full-page scroll. padding-right + margin-right
   keep the scrollbar clear of the checkboxes. Scrollbar only shows when facets overflow. */
.nr-srch-rail { width: 248px; flex-shrink: 0; position: sticky; top: 88px; max-height: calc(100vh - 88px - 24px); overflow-y: auto; padding-right: 10px; margin-right: -10px; overscroll-behavior: contain; scrollbar-width: thin; }
.nr-srch-rail::-webkit-scrollbar { width: 8px; }
.nr-srch-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.nr-srch-rail::-webkit-scrollbar-track { background: transparent; }
.nr-srch-rail:empty { display: none; }
.nr-srch-main { flex: 1 1 auto; min-width: 0; }
.nr-srch-rail__head { margin-bottom: 16px; }
.nr-srch-rail__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }

.nr-facet { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.nr-facet__head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.nr-facet__row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 7px 0; min-height: 32px; } /* min-height: comfortable pointer target without bloating the rail */
.nr-facet__row.is-zero { opacity: .4; }
.nr-facet__row input { accent-color: var(--cyan-deep); width: 16px; height: 16px; cursor: pointer; }
.nr-facet__name { flex: 1; font-size: 13.5px; color: var(--ink-2); }
.nr-facet__row input:checked + .nr-facet__name { color: var(--navy); font-weight: 600; }
.nr-facet__count { font-size: 12px; color: var(--faint); }

/* ── results head: count + sort tabs ── */
.nr-srch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nr-srch-count { font-size: 15px; color: var(--ink-2); }
.nr-srch-count strong { color: var(--navy); }
.nr-srch-q { color: var(--navy); font-weight: 600; }
.nr-srch-sorts { display: flex; gap: 8px; }
.nr-srch-sort { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink-2); }
.nr-srch-sort.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }

/* ── active facet pills ── */
.nr-srch-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.nr-srch-pills:empty { display: none; }
.nr-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 8px 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid var(--cyan-deep); background: var(--cyan-mist); color: var(--cyan-deep); }

/* ── results list ── */
.nr-srch-results { display: flex; flex-direction: column; gap: 20px; min-height: 120px; }
.nr-srch-results.is-loading { opacity: .5; transition: opacity .15s var(--ease); }
.nr-srch-results mark, .nr-result mark { background: rgba(56,196,235,.28); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Category chips on result rows — hidden on the search page by request (2026-07-16).
   Presentation only: the taxonomy behind them is untouched and still drives the Filters rail and the
   sorting. SS360 reads those values by crawling each ARTICLE's hidden .nr-dp block (nr_fe_dp_block,
   article.php) and hands the facets back as filterOptions — it never reads these chips, so hiding
   them cannot affect what is indexed, filtered or sorted.
   Scoped to .nr-srch on purpose: the same .nr-card__tags markup carries the tags on the blog index,
   the author archives and the related rail, which must keep them. (The /research/<format>/ listing
   is hosted on this same Page but renders .nr-page WITHOUT .nr-srch, so it is unaffected too.)
   To bring them back, delete this rule — search.js still renders the chips. */
.nr-srch .nr-card__tags { display: none; }

/* ── empty / error ── */
.nr-srch-empty { text-align: center; padding: 60px 20px; background: var(--mist); border-radius: var(--rad-lg); }
.nr-srch-empty__ico { width: 60px; height: 60px; border-radius: 999px; background: #fff; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: var(--shadow-1); color: var(--muted); }
.nr-srch-empty h3 { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--navy); }
.nr-srch-empty p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Filter drawer toggle — HIDDEN by default / on desktop. !important + raised specificity
   (.nr-srch-body .nr-srch-filterbtn) because the site theme's <button> styling otherwise forces it
   visible (that was the desktop leak). The mobile media query below re-shows it with even higher
   specificity + !important so it wins only there. */
.nr-srch-body .nr-srch-filterbtn { display: none !important; }

/* ── responsive (README: 720–1080 rail → top DRAWER, <720 stack) ── */
@media (max-width: 1080px) {
  .nr-srch-body { flex-direction: column; }
  .nr-srch-rail { position: static; width: auto; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
  /* Drawer: rail collapses behind the "Filters" button and opens on click. appearance:none + the
     !important colours neutralise the theme's button chrome (red border/hover) on this control. */
  .nr-srch-body.has-filters .nr-srch-filterbtn {
    display: inline-flex !important; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 16px; margin-bottom: 12px;
    background: #fff !important; border: 1px solid var(--line-2) !important; border-radius: var(--rad);
    font: 600 14px var(--sans); color: var(--ink) !important; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .nr-srch-body .nr-srch-filterbtn:hover,
  .nr-srch-body .nr-srch-filterbtn:focus-visible {
    background: var(--mist) !important; color: var(--ink) !important; border-color: var(--line-2) !important;
  }
  .nr-srch-filterbtn .nr-ico { color: var(--muted); transition: transform .2s var(--ease); }
  .nr-srch-filterbtn[aria-expanded="true"] .nr-ico { transform: rotate(180deg); }
  .nr-srch-rail:not(:empty) { display: none; } /* collapsed by default at this breakpoint */
  .nr-srch-body.is-filters-open .nr-srch-rail:not(:empty) {
    display: block; border: 1px solid var(--line); border-radius: var(--rad); padding: 16px 18px; margin-bottom: 8px;
  }
  .nr-facet:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .nr-srch-filterbtn .nr-ico { transition: none; }
}
@media (max-width: 720px) {
  .nr-srch-band .wrap { padding-top: 18px; padding-bottom: 18px; }
}