/* HoloInvestor · utforsksiden i retning 8 «Snur hvis» (body[data-page="browse"]).
   Lenkes bare fra browse.html, rett etter style.css. Komponentene (svaret, filterarket, miniatyrene, sidebla,
   neste steg) har stilen sin i components.css; her står fanene i båndet, årgangene og lufta rundt dem. Bare
   tokens, radius 0, ingen skygge og ingen nye hårstreker (§ 22 Mal B: browse står på 3). */

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

/* Fanene i båndet: lenkeformen på båndet (papirfargene med understrek), og fanen du står på står uten understrek
   i vekt 600. Ingen strek og ingen flate: 3 px --oliven har en lukket liste (§ 9a), og fanene står på --oliven. */
.utf-faner { display: flex; flex-wrap: wrap; gap: 0 var(--lin4); margin: 0; }
.utf-fane {
  min-height: 44px; padding: 0; border: 0; border-radius: var(--r-0); background: none; cursor: pointer;
  color: var(--papir-paa-oliven); font: 400 15px/24px var(--f-tall);
  text-decoration: underline 1px var(--papir-paa-oliven-2); text-underline-offset: 4px;
}
.utf-fane:hover { text-decoration-thickness: 3px; }
.utf-fane[aria-selected='true'] { font-weight: 600; text-decoration: none; cursor: default; }

/* overskriftene over sideblokka og listene, som på settsiden */
.utf-tittel { margin: 0; font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); }
.utf-side { min-width: 0; }
.utf-side .grunn-fakta { margin-top: var(--lin2); }
.utf-liste { padding-top: var(--lin4); }
/* Ved 1100 px har raden ingen luft under båndet (kortet står i første skjerm på kortsidene); her står svaret
   først, og det får luft, som søkefeltet i proto-8/sok.css. */
@media (min-width: 1100px) {
  body[data-page="browse"] .rad > .svarblokk,
  body[data-page="browse"] .rad > .sideblokk { padding-top: var(--lin3); }
}

/* Årgangene (O27, § 16 browse; cards.js setYearList): året i margen, settene fra året ved siden av.
   Klassene er prototypens (proto-8/utforsk.css). */
.utf-aargang { border-top: 1px solid var(--linje); padding-top: var(--lin3); margin-top: var(--lin3); }
.utf-aar { margin: 0; font: 500 28px/1.1 var(--f-svar); }
.utf-aar-n { margin: 2px 0 0; font: 400 13px/20px var(--f-tall); color: var(--blekk-2); }
.utf-rader { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr)); gap: var(--lin2) var(--lin4); margin: var(--lin2) 0 0; padding: 0; list-style: none; }
.utf-rad { min-width: 0; }
.utf-meta { margin: 2px 0 0; font: 400 13px/19px var(--f-tall); color: var(--blekk-2); }
@media (min-width: 900px) {
  .utf-aargang { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--lin4); align-items: start; }
  .utf-rader { margin-top: 0; }
}

/* Kortene: sidens egne valg (type og likviditet) står i arket ved siden av hverandre, og miniatyrene i rutenett */
.utf-ekstra { display: grid; gap: var(--lin3) var(--lin4); }
.utf-ekstra .felt { max-width: 100%; }
@media (min-width: 600px) { .utf-ekstra { grid-template-columns: repeat(2, minmax(0, max-content)); } }
.utf-liste .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. */
.utf-liste .mini-rad--m .mini { width: 100%; }
.utf-liste .mini-rad--m .mini-boks, .utf-liste .mini-rad--m .tilstand { max-width: var(--mini-m); }

/* neste steg står i spaltebredden, som på kortsiden */
.utf-neste {
  width: calc(100% - 2 * var(--marg)); max-width: calc(1200px - 2 * var(--marg));
  margin-left: auto; margin-right: auto; margin-bottom: var(--lin5);
}