/* Kunskapskoll — plattformens stil. Färger och typografi är familjens
   (samma variabler som hej.maurer.nu), utbyggda till ett litet system:
   avståndsskala, typskala, rätt/fel, kort, brödsmulor, knappar.
   Inget kapitel får egna färger eller komponenter — de läggs till här eller
   inte alls. Mobil först; från 52rem får kapitlet en sidokolumn och korten
   ligger två i bredd. Det är hela skillnaden. */

:root {
  --bg: #fbfaf8;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --accent: #2d5f4f;
  --accent-fg: #ffffff;
  --ratt: #2e7d32;
  --ratt-bg: #e6f2e7;
  --fel: #b3261e;
  --fel-bg: #f9e7e5;
  --yta: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --kant: color-mix(in srgb, var(--fg) 12%, transparent);
  --kant-stark: color-mix(in srgb, var(--fg) 28%, transparent);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --radie: 10px;
  --lasbredd: 40rem;
  --sidbredd: 64rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #ececec;
    --muted: #9a9a9a;
    --accent: #7fbfa8;
    --accent-fg: #0f1a16;
    --ratt: #7fd18b;
    --ratt-bg: #1a2a1d;
    --fel: #ff8a80;
    --fel-bg: #2e1a18;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* vinner över .knapp m.fl. som sätter display */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main {
  flex: 1;
  width: 100%;
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s7);
}
a { color: var(--accent); text-underline-offset: .15em; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--s4); }
code {
  padding: .15em .4em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: .9em;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- sidhuvud och brödsmulor ---------- */
.sidhuvud {
  border-bottom: 1px solid var(--kant);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.brodsmulor {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  font-size: .95rem;
}
.brodsmulor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.brodsmulor li { white-space: nowrap; }
.brodsmulor li + li::before { content: "›"; color: var(--muted); margin-right: var(--s2); }
.brodsmulor a { text-decoration: none; padding: var(--s1) 0; display: inline-block; }
.brodsmulor a:hover { text-decoration: underline; }
.brodsmulor [aria-current] { color: var(--fg); font-weight: 600; }

.sidfot {
  border-top: 1px solid var(--kant);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
  padding: var(--s5) var(--s4);
}
.sidfot p { margin: 0; }

/* ---------- gemensamt ---------- */
.sidrubrik { margin: var(--s5) 0 var(--s6); }
.sidrubrik h1 { margin-bottom: var(--s2); }
.etikett {
  margin: 0 0 var(--s2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.beskrivning, .ingress { color: var(--muted); font-size: 1.1rem; max-width: var(--lasbredd); }
.ingress { color: var(--fg); }
.tomt { color: var(--muted); }

.knapp {
  display: inline-block;
  min-height: 44px;
  padding: var(--s2) var(--s5);
  border: 2px solid var(--accent);
  border-radius: var(--radie);
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
}
.knapp:hover { filter: brightness(1.08); }
.knapp-sekundar { background: transparent; color: var(--accent); }
.handling { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s4) 0; }
.upp-till { margin-top: var(--s6); }
.upp-till a { text-decoration: none; }
.upp-till a:hover { text-decoration: underline; }

/* ---------- Karta: korten ---------- */
.kort-lista { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.kort {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--yta);
  color: var(--fg);
  text-decoration: none;
  min-height: 44px;
  transition: border-color .15s;
}
.kort:hover { border-color: var(--accent); }
.kort-rad { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.kort-typ { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kort-resultat { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.kort-resultat.klarat, .basta.klarat { color: var(--ratt); }
.kort-resultat.forsokt, .basta.forsokt { color: var(--muted); }
.kort-titel { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.kort-beskrivning { color: var(--muted); }
.kort-omfang { margin-top: var(--s2); font-size: .9rem; color: var(--muted); }
.kort[data-typ="kapitel"] .kort-typ { color: var(--accent); }

/* ---------- Kapitel ---------- */
.kapitel .basta { font-weight: 600; }
.kapitel-layout { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.avsnitt-lista {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--yta);
  align-self: start;
}
.avsnitt-lista h2 { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.avsnitt-lista ol { margin: 0; padding-left: 1.4em; }
.avsnitt-lista li { padding: var(--s1) 0; }
.avsnitt-lista a { text-decoration: none; }
.avsnitt-lista a:hover { text-decoration: underline; }

.text { max-width: var(--lasbredd); min-width: 0; }
.text h2 { margin: var(--s6) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--kant); scroll-margin-top: 4rem; }
.text h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.text h3 { margin: var(--s5) 0 var(--s2); }
.text .upp { font-size: .8rem; font-weight: 400; text-decoration: none; margin-left: var(--s2); vertical-align: middle; }
.text ul, .text ol { padding-left: 1.4em; margin: 0 0 var(--s4); }
.text li { margin-bottom: var(--s1); }
.text table { border-collapse: collapse; margin: 0 0 var(--s4); }
.text th, .text td { border: 1px solid var(--kant); padding: var(--s2) var(--s4); text-align: left; }
.text th { background: var(--yta); font-weight: 600; }
.text .katex-display { margin: var(--s4) 0; overflow-x: auto; overflow-y: hidden; padding: var(--s1) 0; }
.text strong { font-weight: 650; }

.kalla {
  margin: var(--s6) 0 var(--s4);
  padding: var(--s4) var(--s5);
  border-left: 4px solid var(--accent);
  background: var(--yta);
  border-radius: 0 var(--radie) var(--radie) 0;
  max-width: var(--lasbredd);
  font-size: .95rem;
}
.kalla h2 { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.kalla-etikett { font-weight: 600; margin-bottom: var(--s1); }
.kalla-omrade { color: var(--muted); margin-bottom: var(--s2); }
.kalla ul { margin: 0 0 var(--s3); padding-left: 1.2em; }
.kalla .fotnot { margin: 0; color: var(--muted); font-size: .85rem; }

.grannar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.grannar a {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
}
.grannar a:hover { border-color: var(--accent); }
.grannar a small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.grannar a[rel="next"] { text-align: right; }

/* ---------- Quiz ---------- */
.quiz { max-width: var(--lasbredd); }
.forlopp { display: flex; flex-direction: column; gap: var(--s2); color: var(--muted); font-size: .95rem; }
.forlopp progress { width: 100%; height: 6px; accent-color: var(--accent); border: 0; }
.fraga-text { font-size: 1.4rem; margin-bottom: var(--s5); }
.alternativ { display: grid; gap: var(--s3); }
.alt {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--kant-stark);
  border-radius: var(--radie);
  background: var(--yta);
  color: var(--fg);
  font: inherit;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
}
.alt:hover:not(:disabled) { border-color: var(--accent); }
.alt:disabled { cursor: default; opacity: .75; }
.alt.ratt { border-color: var(--ratt); background: var(--ratt-bg); opacity: 1; }
.alt.fel { border-color: var(--fel); background: var(--fel-bg); opacity: 1; }
.alt.valt { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent); }
.aterkoppling {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border-radius: var(--radie);
  border-left: 4px solid var(--ratt);
  background: var(--ratt-bg);
}
.aterkoppling.ar-fel { border-left-color: var(--fel); background: var(--fel-bg); }
.aterkoppling .utfall { font-weight: 600; margin-bottom: var(--s2); }
.aterkoppling.ar-ratt .forklaring { color: var(--muted); }
.aterkoppling .las-om { margin: 0; }
.aterkoppling.ar-ratt .las-om { display: none; }
.summering h2 { font-size: 1.8rem; margin: var(--s6) 0 var(--s3); }
.resultat-stort { font-size: 1.4rem; font-weight: 600; }
.resultat-stort .ratt-antal { font-size: 2.4rem; color: var(--accent); }
.omdome { font-size: 1.1rem; }
.summering .basta { color: var(--muted); }

/* ---------- PC ---------- */
@media (min-width: 52rem) {
  main { padding: var(--s5) var(--s6) var(--s7); }
  .brodsmulor { padding: var(--s3) var(--s6); }
  .kort-lista { grid-template-columns: 1fr 1fr; }
  .kapitel-layout { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
  .avsnitt-lista { position: sticky; top: 4rem; }
  .text .upp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}