/* HoloInvestor · verktøysiden i retning 8 «Snur hvis» (body[data-page="tools"]).
   Lenkes bare fra tools.html, rett etter style.css. Komponentene (båndet, svaret, faktalista og neste steg) har
   stilen sin i components.css; her står spørsmålsradene gruppe for gruppe, som spørsmålslista på forsiden
   (proto-8/verktoy.css). Ingen nummerindeks og ingen Premium-merke (Mal B). Bare tokens, radius 0, ingen skygge. */

body[data-page="tools"] main:focus { outline: none; }

/* overskriftene over sideblokka og gruppene, som på strategilista */
body[data-page="tools"] .verktoy-tittel {
  font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); margin: 0 0 var(--lin2);
}
body[data-page="tools"] .verktoy-side { min-width: 0; }
body[data-page="tools"] .verktoy-side > * + * { margin-top: var(--lin3); }

/* hopp til en gruppe: lenker i en rad, hver med 44 px klikkflate */
body[data-page="tools"] .verktoy-hopp { display: flex; flex-wrap: wrap; gap: 0 var(--lin3); }
body[data-page="tools"] .verktoy-hopp .krysslenke {
  display: inline-flex; align-items: center; min-height: 44px; font: 400 15px/20px var(--f-tall);
}

/* gruppene og spørsmålsradene: spørsmålet til venstre i svarets spalte, verktøyet til høyre fra 1100 px */
body[data-page="tools"] .verktoy-grunn { min-width: 0; }
body[data-page="tools"] .verktoy-gruppe { margin-top: var(--lin5); scroll-margin-top: var(--lin4); }
body[data-page="tools"] .verktoy-gruppe:first-child { margin-top: 0; }
body[data-page="tools"] .verktoy-gruppe:focus { outline: none; }
body[data-page="tools"] .verktoy-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linje); }
body[data-page="tools"] .verktoy-rad { display: grid; gap: var(--lin2); padding: var(--lin3) 0; border-bottom: 1px solid var(--linje); }
@media (min-width: 1100px) {
  body[data-page="tools"] .verktoy-rad { grid-template-columns: var(--kolonne) minmax(0, 1fr); column-gap: var(--renne); align-items: start; }
}
body[data-page="tools"] .verktoy-sp { font: italic 400 20px/26px var(--f-svar); letter-spacing: 0; margin: 0; max-width: 30ch; }
body[data-page="tools"] .verktoy-sp .krysslenke { color: var(--blekk); }
body[data-page="tools"] .verktoy-svar { min-width: 0; }
body[data-page="tools"] .verktoy-navn { font: 600 15px/24px var(--f-tall); margin: 0; }
body[data-page="tools"] .verktoy-besk { font: 400 17px/26px var(--f-svar); color: var(--blekk); margin: var(--lin1) 0 0; max-width: 56ch; }
body[data-page="tools"] .verktoy-kilde { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: var(--lin1) 0 0; max-width: 64ch; }

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