/* HoloInvestor · lærsiden i retning 8 «Snur hvis» (body[data-page="learn"]).
   Lenkes bare fra learn.html, rett etter style.css. Komponentene (båndet, svaret, lappestabelen, faktalista, tabellen,
   sjeldenhetsstripa og neste steg) har stilen sin i components.css; her står leddlista, trinnene og den løpende teksten
   (proto-8/laer.css). Forklaringen har ingen farge (O79): leddene skilles med 1 px linjer og ord, og ingen regel her
   bruker --oliven. Ingen nummerindeks (Mal B rad 5). Bare tokens, radius 0, ingen skygge. */

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

/* overskriftene i spaltene, som på verktøysiden */
body[data-page="learn"] .laer-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="learn"] .laer-luft { margin-top: var(--lin4); }
body[data-page="learn"] .laer-side, body[data-page="learn"] .laer-grunn { min-width: 0; }
body[data-page="learn"] .laer-grunn > * + * { margin-top: var(--lin4); }

/* løpende tekst i svarets skrift, smal spalte */
body[data-page="learn"] .laer-tekst { font: 400 17px/27px var(--f-svar); color: var(--blekk); max-width: 56ch; margin: var(--lin3) 0 0; }
body[data-page="learn"] .laer-note { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); max-width: 64ch; margin: var(--lin2) 0 0; }
body[data-page="learn"] .laer-liste { margin: var(--lin3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linje); max-width: 64ch; }
body[data-page="learn"] .laer-liste li { font: 400 15px/24px var(--f-tall); padding: 9px 0; border-bottom: 1px solid var(--linje); }
body[data-page="learn"] .laer-liste .krysslenke { white-space: nowrap; }

/* leddlista: ordet til venstre, verdien og forklaringen til høyre; under 420 px står de under hverandre */
body[data-page="learn"] .laer-ledd { margin: 0; border-top: 1px solid var(--linje); }
body[data-page="learn"] .laer-ledd > div {
  display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: var(--lin1) var(--lin3); padding: 12px 0; border-bottom: 1px solid var(--linje);
}
@media (max-width: 419px) {
  body[data-page="learn"] .laer-ledd > div { grid-template-columns: minmax(0, 1fr); }
}
body[data-page="learn"] .laer-ledd dt { font: 600 13px/24px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); }
body[data-page="learn"] .laer-ledd dd { margin: 0; min-width: 0; }
body[data-page="learn"] .laer-ledd-verdi { display: block; font: 500 18px/26px var(--f-svar); color: var(--blekk); overflow-wrap: anywhere; }
body[data-page="learn"] .laer-ledd-forkl { display: block; font: 400 14px/22px var(--f-tall); color: var(--blekk-2); margin-top: 2px; max-width: 56ch; }

/* faktalista med kilde i verdien: setningen står venstrestilt og brekker */
body[data-page="learn"] .laer-side .grunn-fakta dd { text-align: left; font-weight: 400; }

/* sjeldenhetstrinnene: strekene til venstre, navnet og antallet til høyre */
body[data-page="learn"] .laer-trinn { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linje); }
body[data-page="learn"] .laer-trinn-rad {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--lin3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linje);
}
body[data-page="learn"] .laer-trinn-rad .sj { margin-top: 0; }
body[data-page="learn"] .laer-trinn-navn { font: 500 17px/24px var(--f-svar); margin: 0; }
body[data-page="learn"] .laer-trinn-merk { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: 0; }

/* krysslenken til PSA-kalkulatoren under svaret, med 44 px klikkflate */
body[data-page="learn"] .laer-kalk { margin: var(--lin3) 0 0; }
body[data-page="learn"] .laer-kalk .krysslenke { display: inline-flex; align-items: center; min-height: 44px; font: 400 15px/20px var(--f-tall); }

/* «Vi vet ikke» om sjansen for 10 står i svarets spaltebredde */
body[data-page="learn"] .laer-vetikke { max-width: var(--kolonne); }

/* neste steg står i spaltebredden, som på verktøysiden */
body[data-page="learn"] 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);
}