/* HoloInvestor · strategilista i retning 8 «Snur hvis» (body[data-page="strategies"]).
   Lenkes bare fra strategies.html, rett etter style.css. Komponentene (svaret, kandidatraden, filteret,
   neste steg) har stilen sin i components.css; her står lista per natt og lufta rundt (proto-8/strategier.css).
   Bare tokens, radius 0, ingen skygge og ingen farge som bærer retning. */

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

/* overskriftene over kandidaten og lista, som på settsiden */
body[data-page="strategies"] .strategier-tittel {
  font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); margin: 0;
}

/* kandidaten ved siden av svaret: kandidatlinja og raden */
body[data-page="strategies"] .strategier-kand { min-width: 0; }
body[data-page="strategies"] .strategier-linje {
  font: 400 14px/22px var(--f-tall); color: var(--blekk); margin: var(--lin1) 0 var(--lin2); max-width: 56ch;
  font-variant-numeric: lining-nums tabular-nums;
}
body[data-page="strategies"] .kandrad .grunn-fakta { margin-top: var(--lin2); }

/* lista per natt: filteret, gruppene og radene; ingen nye hårstreker utover radenes (Mal B) */
body[data-page="strategies"] .strategier-liste { position: relative; }
body[data-page="strategies"] .strategier-liste .velger { margin-top: var(--lin3); }
body[data-page="strategies"] .strategier-gruppe { margin-top: var(--lin4); }
body[data-page="strategies"] .strategier-natt { font: 600 15px/24px var(--f-tall); margin: 0; }
body[data-page="strategies"] .strategier-rader { list-style: none; margin: var(--lin2) 0 0; padding: 0; border-top: 1px solid var(--linje); }
body[data-page="strategies"] .strategier-rad { padding: var(--lin2) 0 var(--lin3); border-bottom: 1px solid var(--linje); }
body[data-page="strategies"] .strategier-navn { margin: 0; font: inherit; }
body[data-page="strategies"] .strategier-lenke {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--blekk);
  font: 500 20px/26px var(--f-svar); text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--oliven);
}
body[data-page="strategies"] .strategier-lenke:focus-visible { outline: 3px solid var(--oliven); outline-offset: 2px; }
body[data-page="strategies"] .strategier-merke,
body[data-page="strategies"] .strategier-tall,
body[data-page="strategies"] .strategier-aapen {
  font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: 0; max-width: 62ch; font-variant-numeric: lining-nums tabular-nums;
}
body[data-page="strategies"] .strategier-sum { font: 400 16px/26px var(--f-svar); margin: 6px 0 0; max-width: 62ch; }
body[data-page="strategies"] .strategier-tall { margin-top: 6px; }
body[data-page="strategies"] .strategier-aapen { color: var(--blekk); font-weight: 600; margin-top: 6px; }
@media (min-width: 900px) {
  body[data-page="strategies"] .strategier-rad {
    display: grid; grid-template-columns: var(--kolonne) minmax(0, 1fr); column-gap: var(--renne); align-items: start;
  }
  body[data-page="strategies"] .strategier-rad > :not(.strategier-navn):not(.strategier-merke) { grid-column: 2; }
  body[data-page="strategies"] .strategier-merke { grid-column: 1; }
  body[data-page="strategies"] .strategier-sum { grid-row: 1; margin-top: 9px; }
}

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