/* HoloInvestor · søkesiden i retning 8 «Snur hvis» (body[data-page="search"]).
   Lenkes bare fra search.html, rett etter style.css. Søkefeltet står øverst i svarspalten, som gradvelgeren på
   kortsiden (proto-8/sok.css); komponentene (svaret, filterarket, miniatyrene, sidebla, neste steg) har stilen
   sin i components.css. Her står bare lufta rundt dem. Bare tokens, radius 0, ingen skygge og ingen nye
   hårstreker (§ 22 Mal B). */

body[data-page="search"] [hidden] { display: none !important; }
body[data-page="search"] main:focus { outline: none; }

/* skjemaet: feltet og knappen på én linje, hintet og feilen under */
body[data-page="search"] .sok-skjema { display: grid; gap: 6px; margin: 0 0 var(--lin4); }
body[data-page="search"] .sok-linje { display: flex; flex-wrap: wrap; gap: var(--lin2); align-items: stretch; }
body[data-page="search"] .sok-felt { flex: 1 1 200px; min-width: 0; max-width: none; }
body[data-page="search"] .sok-linje .knapp { flex: 0 0 auto; }
body[data-page="search"] .sok-skjema .felt-hint,
body[data-page="search"] .sok-skjema .felt-feil { margin: 0; }

/* overskriftene over sideblokka og treffene, som på settsiden */
body[data-page="search"] .sok-tittel {
  font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); margin: 0;
}
body[data-page="search"] .sok-side { min-width: 0; }
body[data-page="search"] .sok-side .grunn-fakta { margin-top: var(--lin2); }

/* treffene: filterarket, statuslinja og miniatyrene i rutenett (proto-8/sok.css) */
body[data-page="search"] .sok-treff { padding-top: var(--lin4); }
body[data-page="search"] .sok-treff .mini-rad--m {
  margin-top: var(--lin3); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--lin4) var(--lin3);
}
/* Teksten under bildet får cellens bredde, så «1 100,00 USD» ikke brytes inne i valutaen; bildet står i mini-m. */
body[data-page="search"] .sok-treff .mini-rad--m .mini { width: 100%; }
body[data-page="search"] .sok-treff .mini-rad--m .mini-boks,
body[data-page="search"] .sok-treff .mini-rad--m .tilstand { max-width: var(--mini-m); }

/* illustratørene som passer søkeordet, over korttreffene: samme liste som på illustratørsiden (artists.css .art-liste) */
body[data-page="search"] .sok-artister {
  display: grid; gap: 0; margin: var(--lin3) 0 var(--lin4); padding: 0; list-style: none; border-top: 1px solid var(--linje);
}
body[data-page="search"] .sok-artister li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--lin1) var(--lin3);
  padding: 9px 0; border-bottom: 1px solid var(--linje); min-width: 0;
}
body[data-page="search"] .sok-artist-antall {
  font: 400 15px/24px var(--f-tall); color: var(--blekk-2); font-variant-numeric: lining-nums tabular-nums;
}
body[data-page="search"] .sok-artister-alle { margin: 0 0 var(--lin4); }
@media (min-width: 720px) {
  body[data-page="search"] .sok-artister { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lin4); }
}

/* neste steg står i spaltebredden, som på kortsiden */
body[data-page="search"] .sok-neste {
  width: calc(100% - 2 * var(--marg)); max-width: calc(1200px - 2 * var(--marg));
  margin-left: auto; margin-right: auto; margin-bottom: var(--lin5);
}

/* Ved 1100 px har raden ingen luft under båndet; her står skjemaet først, og det får luft (proto-8/sok.css). */
@media (min-width: 1100px) {
  body[data-page="search"] .sok-skjema,
  body[data-page="search"] .sok-side { padding-top: var(--lin3); }
}