/* HoloInvestor · kortsiden i retning 8 «Snur hvis» (body[data-page="card"]).
   Lenkes bare fra card.html, rett etter style.css. Tre spørsmål under hverandre; komponentene
   (svaret, lappene, søylene, aksen, miniatyrene, neste steg) har stilen sin i components.css
   og charts.css. Her står bare lufta rundt dem og det bare kortsiden har. Bare tokens, radius 0,
   ingen skygge, ingen farge som bærer retning. */

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

/* ===== Båndet: lenka tilbake til settet har 44 px klikkflate uten å flytte linja ===== */
body[data-page="card"] .kort-krysslenke {
  display: inline-block; padding-block: 13px; margin-block: -13px;
  text-decoration: underline 1px; text-underline-offset: 3px;
}
body[data-page="card"] .baand .kort-krysslenke { text-decoration-color: var(--papir-paa-oliven-2); }
body[data-page="card"] #trade-quick .kort-krysslenke { color: var(--blekk); text-decoration-color: var(--oliven); }

/* ===== 1 · kortet er helten: under 1100 px står det mellom båndet og svaret (U7) ===== */
body[data-page="card"] .kort-kortblokk { display: flex; justify-content: flex-start; }
@media (min-width: 1100px) { body[data-page="card"] .kort-kortblokk { justify-content: flex-end; } }
@media (max-width: 1099px) { body[data-page="card"] .kort-rad { gap: var(--lin3); } }

/* utgavevalget (B): tabell med én rad per utgave; navnet er knappen, og den valgte har aria-pressed */
body[data-page="card"] .kort-utgaver { display: grid; gap: var(--lin2); margin-bottom: var(--lin3); }
body[data-page="card"] .kort-utgaver[hidden] { display: none; }
body[data-page="card"] .kort-utgaver-tabell { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
body[data-page="card"] .kort-utgaver-tabell caption { text-align: left; font-size: 0.9rem; opacity: 0.85; padding-bottom: var(--lin2); }
body[data-page="card"] .kort-utgaver-tabell th,
body[data-page="card"] .kort-utgaver-tabell td { text-align: left; padding: 6px 8px; vertical-align: top; }
body[data-page="card"] .kort-utgave {
  min-height: 44px; min-width: 44px; padding: 8px 10px; border-radius: var(--r-1); border: 1px solid currentColor;
  background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
body[data-page="card"] .kort-utgave[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
body[data-page="card"] .kort-utgave-note { margin: 0; font-size: 0.9rem; }

/* gradvelgeren: familie, så trinn; første kontroll i svarspalten */
body[data-page="card"] .kort-velger { display: grid; gap: var(--lin2); margin-bottom: var(--lin3); }
@media (min-width: 1100px) { body[data-page="card"] .kort-velger { margin-bottom: var(--lin4); } }
body[data-page="card"] .kort-velger-etikett,
body[data-page="card"] .kort-etikett,
body[data-page="card"] .kort-grunn-tittel {
  font: 600 13px/20px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); margin: 0;
}
body[data-page="card"] .kort-velger-rad { display: flex; flex-wrap: wrap; gap: 6px; max-width: var(--kolonne); }

/* linjene under svaret: W2, likviditet og merknader */
body[data-page="card"] .kort-note { font: 400 14px/22px var(--f-tall); color: var(--blekk-2); margin: var(--lin2) 0 0; max-width: 62ch; }
body[data-page="card"] .kort-note a { color: var(--blekk); text-decoration: underline 1px; text-decoration-color: var(--oliven); text-underline-offset: 3px; }
body[data-page="card"] .kort-w2 { font: 400 14px/22px var(--f-tall); color: var(--blekk); margin: var(--lin3) 0 0; max-width: 54ch; }
body[data-page="card"] .kort-w2-dato { display: inline-block; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
/* sluttilstanden til ny-observasjon: streken står, uten bevegelse */
body[data-page="card"] .kort-w2-dato--ny { border-bottom: 3px solid var(--oliven); }
/* ny-observasjon spiller på høyst fire rader i begrunnelsen (O46): resten har streken, uten bevegelse */
body[data-page="card"] .rad-ny--staar::after { animation: none; }

/* ===== begrunnelsen ===== */
body[data-page="card"] .kort-grunn > * + * { margin-top: var(--lin3); }
body[data-page="card"] .kort-grunn-tittel { line-height: 28px; margin-top: var(--lin4); }
body[data-page="card"] .kort-grunn-tittel:first-child { margin-top: 0; }
body[data-page="card"] .kort-grunn .grunn-fakta { max-width: var(--kolonne); }
body[data-page="card"] .kort-flere { margin-top: var(--lin2); }
body[data-page="card"] .kort-flere summary,
body[data-page="card"] .card-about summary {
  font: 400 15px/24px var(--f-tall); color: var(--blekk-2); padding: 10px 0; cursor: pointer;
}
body[data-page="card"] .kort-flere[open] summary,
body[data-page="card"] .card-about[open] summary { color: var(--blekk); }

/* ===== observasjonene bak tallet: utsnittet og språket, så aksen ===== */
body[data-page="card"] .kort-obs { margin-top: var(--lin4); padding-bottom: var(--lin4); }
body[data-page="card"] .kort-verktoy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lin2) var(--lin3); margin-top: var(--lin2); }
/* språkvelgerens omslag er bare et skjul/vis-håndtak: barna ligger rett i flex-raden */
body[data-page="card"] .kort-hist-lang:not([hidden]) { display: contents; }
body[data-page="card"] .kort-felt { width: auto; max-width: 100%; }
body[data-page="card"] .kort-sjekk {
  display: inline-flex; align-items: center; gap: var(--lin2); min-height: 44px; margin: 0;
  font: 400 15px/24px var(--f-tall); color: var(--blekk); cursor: pointer;
}
body[data-page="card"] .kort-sjekk input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--blekk); }

/* ===== 2 og 3 · knappene, skjemaet og varslene ===== */
body[data-page="card"] .kort-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lin2); margin: var(--lin3) 0 0; }
body[data-page="card"] .kort-knapper .kort-etikett { margin-right: var(--lin1); }
body[data-page="card"] .kort-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--lin3); margin-top: var(--lin3); }
body[data-page="card"] .kort-skjema > div { display: grid; gap: var(--lin1); }
body[data-page="card"] .kort-skjema .felt { max-width: 220px; }
body[data-page="card"] .kort-melding:empty { display: none; }
/* varslet (§ 9a, § 13): faktarader med hårstrek, som .grunn-fakta; ordene står også i navnet til gradbrikka */
body[data-page="card"] .kort-varsler { list-style: none; margin: var(--lin3) 0 0; padding: 0; border-top: 1px solid var(--linje); }
body[data-page="card"] .kort-varsel { font: 400 15px/24px var(--f-tall); padding: 9px 0; border-bottom: 1px solid var(--linje); }
body[data-page="card"] .grunn-fakta + .kort-varsler { margin-top: 0; border-top: 0; }

/* ===== det som står rundt kortet: spørsmålsrader med hårstrek over ===== */
body[data-page="card"] .kort-mer { padding-top: var(--lin4); }
body[data-page="card"] .kort-seksjon { border-top: 1px solid var(--linje); padding: var(--lin3) 0 var(--lin4); }
body[data-page="card"] .kort-sp { font: italic 400 22px/28px var(--f-svar); letter-spacing: 0; margin: 0 0 var(--lin2); max-width: 32ch; }
body[data-page="card"] .kort-seksjon > .kort-note:first-of-type { margin-top: 0; }
body[data-page="card"] .kort-seksjon .tabell-rull { margin-top: var(--lin3); }
body[data-page="card"] .kort-seksjon .mini-rad { margin-top: var(--lin3); }
body[data-page="card"] .kort-liste { list-style: none; margin: var(--lin3) 0 0; padding: 0; border-top: 1px solid var(--linje); }
body[data-page="card"] .kort-liste li { padding: 10px 0; border-bottom: 1px solid var(--linje); font: 400 15px/24px var(--f-tall); }
body[data-page="card"] .kort-liste a,
body[data-page="card"] .grunn-tabell a {
  color: var(--blekk); text-decoration: underline 1px; text-decoration-color: var(--oliven); text-underline-offset: 3px;
}
body[data-page="card"] .kort-liste a { display: inline-block; padding-block: 10px; margin-block: -10px; }
body[data-page="card"] .kort-avvik { font: 600 12px/18px var(--f-tall); color: var(--blekk-2); border: 1px solid var(--linje); padding: 0 var(--lin1); white-space: nowrap; }

/* «Om kortet»: kortets egne data (TCGGO), lukket som standard */
body[data-page="card"] .card-about { border-top: 1px solid var(--linje); margin-top: var(--lin3); padding-bottom: var(--lin3); }
body[data-page="card"] .card-about .grunn-fakta { margin-top: var(--lin2); max-width: var(--kolonne); }
body[data-page="card"] .kort-trekk { margin: var(--lin2) 0 0; max-width: 62ch; }
body[data-page="card"] .kort-trekk dt { font: 600 15px/24px var(--f-tall); margin-top: var(--lin2); }
body[data-page="card"] .kort-trekk dd { font: 400 17px/28px var(--f-svar); color: var(--blekk-2); margin: 0; }
body[data-page="card"] .kort-flavor { font: italic 400 17px/28px var(--f-svar); color: var(--blekk-2); max-width: 56ch; margin: var(--lin1) 0 0; }
body[data-page="card"] .kort-effekt { max-width: 56ch; margin: var(--lin1) 0 0; }

/* ===== neste steg står i spaltebredden, med streken bare over innholdet ===== */
body[data-page="card"] .kort-neste {
  width: calc(100% - 2 * var(--marg)); max-width: calc(1200px - 2 * var(--marg));
  margin-left: auto; margin-right: auto; margin-bottom: var(--lin5);
}

/* ===== lysboksen: kortet stort på papiret, lukkes med ordet «Lukk» ===== */
body[data-page="card"] .lightbox {
  border: 1px solid var(--linje); background: var(--papir); color: var(--blekk); padding: var(--lin3);
  max-width: calc(100vw - 2 * var(--marg)); max-height: calc(100vh - 2 * var(--marg));
}
body[data-page="card"] .lightbox::backdrop { background: var(--papir); }
body[data-page="card"] .lightbox img {
  display: block; width: auto; height: auto; max-width: min(88vw, 640px); max-height: 78vh;
  margin-top: var(--lin3); border-radius: var(--r-0); cursor: zoom-out;
}
body[data-page="card"] .lightbox-close {
  position: static; display: flex; width: fit-content; height: auto; margin-left: auto; border-radius: var(--r-0); font: 600 15px/1 var(--f-tall);
}

/* kildefoten under aksen (O26): nettene prisjobbene kjørte, i spaltebredden */
body[data-page="card"] .kort-natt { margin-top: var(--lin4); max-width: var(--kolonne); }