/* Lysbilder for KI på papir. Bare systemskrifter, ingen eksterne ressurser. */
:root {
  --bakgrunn: #fbfaf7;
  --tekst: #141414;
  --dempet: #5c5c5c;
  --aksent: #1f4e79;
  --flate: #ece8df;
  --strek: #141414;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #222; overflow: hidden; }
body { font-family: "Inter", "DejaVu Sans", "Helvetica", "Arial", sans-serif; color: var(--tekst); }

.lysbilde {
  position: fixed; left: 50%; top: 50%;
  width: 1600px; height: 900px;
  background: var(--bakgrunn);
  padding: 90px 120px 80px;
  display: none; flex-direction: column;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
}
.lysbilde.aktiv { display: flex; }
.lysbilde h1 { font-size: 84px; line-height: 1.05; margin: 0 0 32px; letter-spacing: -1px; }
.lysbilde h2 { font-size: 64px; line-height: 1.1; margin: 0 0 40px; letter-spacing: -0.5px; }
.lysbilde p, .lysbilde li { font-size: 40px; line-height: 1.35; margin: 0 0 22px; }
.lysbilde ol, .lysbilde ul { padding-left: 1.2em; margin: 0; }
.lysbilde .stor { font-size: 56px; line-height: 1.25; font-weight: 600; }
.lysbilde .dempet { color: var(--dempet); }
.lysbilde .etikett { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--aksent); margin-bottom: 28px; }
.lysbilde .tid { font-size: 28px; color: var(--dempet); margin-top: auto; }
.lysbilde.tittel { justify-content: center; }
.lysbilde.tittel h1 { font-size: 110px; }
.lysbilde.tittel .undertittel { font-size: 44px; color: var(--dempet); }
.lysbilde.sporsmal { justify-content: center; }
.lysbilde.sporsmal .stor { font-size: 72px; }

.bunn { position: absolute; left: 120px; right: 120px; bottom: 34px; display: flex; justify-content: space-between; font-size: 22px; color: var(--dempet); }

/* Innsignal, algoritme, resultat */
.kjede { display: flex; align-items: stretch; gap: 0; margin: 20px 0 50px; }
.kjede .ledd { flex: 1; border: 4px solid var(--strek); border-radius: 18px; padding: 28px 30px; background: #fff; }
.kjede .ledd b { display: block; font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: var(--aksent); margin-bottom: 12px; }
.kjede .ledd span { font-size: 40px; line-height: 1.25; }
.kjede .ledd.ukjent { background: var(--flate); border-style: dashed; text-align: center; }
.kjede .ledd.ukjent span { font-size: 72px; font-weight: 700; }
.kjede .pil { width: 80px; display: flex; align-items: center; justify-content: center; font-size: 60px; }

/* To eller tre kolonner */
.kolonner { display: grid; gap: 40px; margin-top: 10px; }
.kolonner.to { grid-template-columns: 1fr 1fr; }
.kolonner.tre { grid-template-columns: 1fr 1fr 1fr; }
.kolonner > div { border: 4px solid var(--strek); border-radius: 18px; padding: 30px 34px; background: #fff; }
.kolonner > div.stiplet { border-style: dashed; }
.kolonner h3 { font-size: 40px; margin: 0 0 16px; }
.kolonner p { font-size: 32px; }

/* Kubens seks sider */
.kube { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kube div { border: 3px dashed var(--strek); border-radius: 12px; padding: 22px 26px; background: #fff; }
.kube b { display: block; font-size: 34px; margin-bottom: 8px; }
.kube span { font-size: 28px; color: var(--dempet); line-height: 1.3; }

/* Lærernotater vises i et eget felt under lysbildet, ikke oppå det. */
.notat { display: none; }
.notatfelt { display: none; }
body.vis-notater .notatfelt {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 30vh;
  overflow-y: auto; background: #fff8d6; border-top: 3px solid #c9a400; color: #141414;
  padding: 14px 24px; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.45;
}
.notatfelt .tom { color: #777; }

.hjelp { position: fixed; right: 12px; top: 8px; margin: 0; color: #aaa; font: 13px sans-serif; }

@media print {
  @page { size: 1600px 900px; margin: 0; }
  html, body { background: none; height: auto; overflow: visible; }
  .lysbilde { position: relative; left: auto; top: auto !important; display: flex !important; transform: none !important; page-break-after: always; break-after: page; }
  .notat, .notatfelt, .hjelp { display: none !important; }
}