/* HoloInvestor · sidestil for body[data-page="index"], retning 8 «Snur hvis».
   Lenkes bare fra index.html, rett etter style.css. Komponentene (båndet, svaret, lappene, kortramma,
   miniatyrene, albumet, aksen og neste steg) står i components.css og charts.css; her står bare
   forsidens egen rytme. Sidetypen er «kort» (U7): kortramma står over svaret under 1100 px.
   Brytepunktene er 768 og 1100 px (tokens.css). Bare tokens, ingen radius, ingen flate på svaret. */

/* ===== Kortet er helten: ramma i spalte 2 legger seg mot høyre kant, og kortene som ligner følger den ===== */
body[data-page="index"] .kortblokk { display: flex; }
@media (min-width: 1100px) {
  body[data-page="index"] .kortblokk { justify-content: flex-end; }
  body[data-page="index"] .grunnblokk { justify-self: end; width: 100%; max-width: var(--kort-b); }
}

/* ===== Under svaret: likviditeten med kilde, så observasjonsaksen ===== */
body[data-page="index"] .hjem-likviditet { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: var(--lin3) 0 0; max-width: 56ch; }
body[data-page="index"] .hjem-akse { margin-top: var(--lin4); }
/* W2: datoen på den nye lappen, punktumet og «ny» står sammen */
body[data-page="index"] .hjem-ny { white-space: nowrap; }

/* ===== Bolktitler og merknader ===== */
body[data-page="index"] .hjem-tittel,
body[data-page="index"] .spm-tittel {
  font: 600 13px/28px var(--f-tall); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blekk-2); margin: 0 0 var(--lin2);
}
body[data-page="index"] .hjem-note { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: var(--lin3) 0 0; max-width: 56ch; }
/* Prisbevegelsene (25.10): en rad per kort, med krysslenken og prosenten. Lenken har minst 44 px klikkflate. */
body[data-page="index"] .hjem-liste { list-style: none; margin: var(--lin1) 0 0; padding: 0; max-width: 56ch; font: 400 15px/22px var(--f-tall); }
body[data-page="index"] .hjem-liste li { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--lin2); min-height: 44px; }
body[data-page="index"] .hjem-liste .krysslenke { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== Spørsmålsradene: sløyfen som spørsmål. Spørsmålet til venstre i svarets spalte, svaret til høyre ===== */
body[data-page="index"] .spm { padding-bottom: var(--lin4); }
body[data-page="index"] .spm-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linje); }
body[data-page="index"] .spm-rad { display: grid; gap: var(--lin3); padding: var(--lin4) 0; border-bottom: 1px solid var(--linje); }
@media (min-width: 1100px) {
  body[data-page="index"] .spm-rad { grid-template-columns: var(--kolonne) minmax(0, 1fr); column-gap: var(--renne); align-items: start; }
}
body[data-page="index"] .spm-hode { min-width: 0; }
body[data-page="index"] .spm-svarside { min-width: 0; }
/* Stegets navn i sløyfen, i ord: ingen nummerindeks (Mal B) */
body[data-page="index"] .spm-steg,
body[data-page="index"] .spm-logg-tittel {
  font: 600 12px/20px var(--f-tall); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blekk-2); margin: 0;
}
body[data-page="index"] .spm-sp { font: italic 400 22px/28px var(--f-svar); letter-spacing: 0; margin: var(--lin1) 0 0; max-width: 24ch; }
/* Spørsmålet er lenka videre, med 44 px klikkflate uten at linja flytter seg */
body[data-page="index"] .spm-sp a {
  display: inline-block; padding: var(--lin2) 0; margin: calc(-1 * var(--lin2)) 0;
  color: var(--blekk); text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--oliven);
}
body[data-page="index"] .spm-sp a:hover { text-decoration-thickness: 3px; }
body[data-page="index"] .spm-svar { font: 400 18px/28px var(--f-svar); color: var(--blekk); margin: 0; max-width: 56ch; }
body[data-page="index"] .spm-svar b { font-weight: 600; }
body[data-page="index"] .spm-kilde { font: 400 13px/20px var(--f-tall); color: var(--blekk-2); margin: var(--lin1) 0 0; max-width: 64ch; }
body[data-page="index"] .spm-svarside .snur { margin-top: var(--lin3); }
body[data-page="index"] .spm-svarside .album { margin-top: var(--lin3); }
/* Kandidatene (O49): radene fra components.css, med mini-s i stedet for mini-m i første spalte */
body[data-page="index"] .spm-svarside .kandliste { margin-top: var(--lin3); max-width: var(--kolonne); }
body[data-page="index"] .spm-svarside .kandrad--kort { grid-template-columns: var(--mini-s) minmax(0, 1fr); }
/* Kortene du har åpnet (O35): miniatyrene under kilden. Spørsmålet får fokus når lista er tømt. */
body[data-page="index"] .spm-svarside .mini-rad { margin-top: var(--lin3); }
body[data-page="index"] .spm-sp:focus-visible { outline: 3px solid var(--oliven); outline-offset: 2px; }
body[data-page="index"] .spm-knapper { display: flex; flex-wrap: wrap; gap: var(--lin2); margin: var(--lin3) 0 0; }
/* Natten (O25): begrunnelsen og nattloggen under svaret, i svarets spalte */
body[data-page="index"] .spm-svarside .grunn-fakta { margin-top: var(--lin3); max-width: var(--kolonne); }
body[data-page="index"] .spm-logg { margin-top: var(--lin4); max-width: var(--kolonne); }
/* De nyeste settene (O27): navnet med logoen som krysslenke, linja under; resten i <details> */
body[data-page="index"] .spm-sett { margin: var(--lin3) 0 0; padding: 0; list-style: none; max-width: var(--kolonne); }
body[data-page="index"] .spm-sett > li { padding: var(--lin2) 0; }
body[data-page="index"] .spm-sett .krysslenke { font: 500 15px/18px var(--f-tall); }
body[data-page="index"] .spm-sett .spm-kilde { margin-top: var(--lin1); }
body[data-page="index"] .spm-mer { margin-top: var(--lin2); max-width: var(--kolonne); }
body[data-page="index"] .spm-mer summary { font: 400 14px/24px var(--f-tall); min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--blekk-2); }

/* Søket står i Oppdag-raden: feltet og knappen på én linje, 44 px høye */
body[data-page="index"] .spm-sok { display: flex; gap: var(--lin2); margin: 0 0 var(--lin3); max-width: 480px; }
body[data-page="index"] .spm-sok .felt { flex: 1 1 auto; min-width: 0; max-width: none; }
body[data-page="index"] .spm-sok .knapp { flex: 0 0 auto; }

/* ===== Neste steg står rett i <main> (signatur-struktur), så streken over følger innholdsspalten ===== */
body[data-page="index"] main > .neste {
  margin: var(--lin4) max(var(--marg), calc((100% - 1200px) / 2 + var(--marg))) var(--lin5);
}