/* Egna stilar för kursintroduktionen i Samhällskunskap nivå 1a1. Den
   gemensamma layouten ligger i ../presentation.css.

   Bildspråket: kursen är en karta. De tre innehållsdelarna är stationer med
   var sin färg (--c1 inflytande, --c2 ekonomi, --c3 individer), och
   metoderna är den röda ringlinjen (--accent) som går mellan dem. Fallet
   Elias står i mitten. Samma färger återkommer i veckan, i nyheterna och i
   före och efter. Bara temats variabler används. */

.ki-c1 {
  --k: var(--c1);
}
.ki-c2 {
  --k: var(--c2);
}
.ki-c3 {
  --k: var(--c3);
}
.ki-cm {
  --k: var(--accent);
}

/* ---------- Ingång och rubriker ---------- */

.hero__title.ki-hero-title {
  font-size: clamp(3rem, 1rem + 6.4vw, 8.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
  hyphens: manual;
}
.section-title.ki-titel-kort {
  font-size: clamp(2rem, 1rem + 2.6vw, 4.2rem);
  margin-bottom: clamp(0.6rem, 2vh, 1.4rem);
}
.ki-titel-kort + .lead {
  margin-bottom: 0;
}

/* ---------- Kartan ---------- */

.ki-karta .diagram__svg {
  max-height: 60vh;
}
.ki-krit .diagram__svg {
  max-height: 50vh;
}
.ki-stationstakt .ki-karta .diagram__svg {
  max-height: 56vh;
}
.ki-linje {
  fill: none;
  stroke: var(--k);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ki-loop {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linejoin: round;
}
.ki-hpl {
  fill: var(--card);
  stroke: var(--k);
  stroke-width: 4;
}
.ki-station {
  fill: var(--card);
  stroke: var(--k);
  stroke-width: 7;
}
.ki-station--1 {
  stroke: var(--c1);
}
.ki-station--2 {
  stroke: var(--c2);
}
.ki-station--3 {
  stroke: var(--c3);
}
.diagram__svg .ki-stn-namn {
  fill: var(--k);
  font-size: 27px;
  font-weight: 800;
}
.diagram__svg .ki-stn-under {
  fill: var(--ink-2);
  font-size: 17px;
}
.diagram__svg .ki-hpl-text {
  fill: var(--ink);
  font-size: 19px;
}
.ki-omr {
  transition: opacity 0.6s var(--ease);
}
.ki-karta--fokus-1 .ki-omr:not(.ki-omr--1),
.ki-karta--fokus-2 .ki-omr:not(.ki-omr--2),
.ki-karta--fokus-3 .ki-omr:not(.ki-omr--3) {
  opacity: 0.2;
}
.ki-karta--fokus-4 .ki-omr:not(.ki-omr--4) {
  opacity: 0.35;
}
.ki-lank {
  cursor: pointer;
}
.ki-lank:hover .ki-hpl,
.ki-lank:focus-visible .ki-hpl {
  fill: var(--k);
}
.ki-lank:hover .ki-hpl-text,
.ki-lank:focus-visible .ki-hpl-text {
  fill: var(--k);
  text-decoration: underline;
}
.ki-lank:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Elias och ikonerna ---------- */

.ki-person {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ki-person--stor {
  stroke-width: 5;
}
.ki-bricka {
  fill: var(--accent);
}
.ki-ikon {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ki-ikon--stor {
  stroke-width: 4;
}
.ki-ikon--k {
  stroke: var(--k);
  stroke-width: 4;
}
.ki-kort-fyll {
  fill: var(--card);
}
.ki-fyll {
  fill: var(--k);
}
.ki-bar {
  fill: var(--k);
}
.ki-bar--netto {
  fill: var(--ink-3);
}
.ki-venn {
  fill: var(--k);
  fill-opacity: 0.28;
  stroke: var(--k);
  stroke-width: 4;
}
.ki-lupp {
  fill: var(--card);
  fill-opacity: 0.7;
  stroke: var(--accent);
  stroke-width: 5;
}
.ki-lins {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 7;
}
.ki-skaft {
  fill: none;
  stroke: var(--ink);
  stroke-width: 16;
  stroke-linecap: round;
}
.ki-skaft--liten {
  stroke: var(--accent);
  stroke-width: 8;
}
.ki-glas {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

.diagram__svg .ki-dag {
  fill: var(--k);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .ki-kort-rubrik {
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .ki-stor {
  font-size: 26px;
}
.diagram__svg .ki-kort-text {
  fill: var(--ink-2);
  font-size: 18px;
}
.diagram__svg .ki-fore {
  font-style: italic;
  font-size: 17px;
}
.diagram__svg .ki-efter {
  fill: var(--k);
  font-size: 17px;
  font-weight: 800;
}
.diagram__svg .ki-omr-text {
  fill: var(--k);
  font-size: 17px;
  font-weight: 700;
}
.ki-band {
  fill: var(--accent-soft);
}
.diagram__svg .ki-band-text {
  fill: var(--accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.diagram__svg .ki-namn {
  font-family: var(--f-display);
  font-size: 58px;
  font-weight: 600;
}
.diagram__svg .ki-stor-muted {
  font-size: 24px;
}
.ki-chip {
  fill: var(--card);
  stroke: var(--k);
  stroke-width: 3;
}
.diagram__svg .ki-chip-text {
  fill: var(--k);
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .ki-lins-namn {
  font-size: 24px;
  font-weight: 800;
}
.diagram__svg .ki-fraga {
  font-family: var(--f-display);
  font-size: 25px;
  font-style: italic;
}
.diagram__svg .ki-liten {
  font-size: 15px;
}
.diagram__svg .ki-exempel {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 21px;
  font-style: italic;
}

/* ---------- Nivåer och kriterier ---------- */

.diagram__svg .ki-niva {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 650;
}
.diagram__svg .ki-tecken {
  fill: var(--ink-2);
  font-size: 40px;
  font-weight: 300;
}
.ki-rad {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
}
.diagram__svg .ki-rad-text {
  font-size: 20px;
}
.ki-betyg {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
}
.ki-betyg--A {
  fill: var(--accent);
  stroke: var(--accent);
}
.ki-betyg--mellan {
  stroke: var(--ink-3);
  stroke-dasharray: 4 4;
}
.diagram__svg .ki-betyg-text {
  font-size: 30px;
  font-weight: 800;
}
.ki-betyg--A + .ki-betyg-text {
  fill: var(--card);
}
.diagram__svg .ki-betyg-text--liten {
  fill: var(--ink-2);
  font-size: 19px;
}
.ki-cell {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}
.ki-cell--C {
  fill: var(--accent-soft);
}
.ki-cell--A {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .ki-cell-text {
  font-size: 21px;
  font-weight: 700;
}
.diagram__svg .ki-cell-text--liten {
  fill: var(--accent);
  font-size: 18px;
}

/* ---------- Resonemangen ---------- */

.ki-res {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.ki-svar {
  margin: 0;
  padding: clamp(1rem, 2.5vh, 1.6rem) clamp(1.1rem, 2vw, 1.8rem);
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 0.8rem + 1.5vw, 2.5rem);
  line-height: 1.28;
  text-wrap: pretty;
}
.ki-svar p {
  margin: 0;
}
.ki-svar--lang {
  font-size: clamp(1.15rem, 0.7rem + 1.05vw, 1.85rem);
}
.ki-svar--kort {
  font-size: clamp(1.1rem, 0.7rem + 0.95vw, 1.7rem);
  box-shadow: none;
}
.ki-m {
  background: transparent;
  color: inherit;
  border-radius: 3px;
  transition:
    background-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.ki-res:has(.ki-tag--1.is-shown) .ki-m--1,
.ki-res:has(.ki-tag--2.is-shown) .ki-m--2,
.ki-res:has(.ki-tag--3.is-shown) .ki-m--3 {
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.ki-taggar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: clamp(0.8rem, 2.5vh, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.ki-tag {
  padding: 0.35em 0.95em;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent);
  font-family: var(--f-ui);
  font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.35rem);
  font-weight: 700;
}
.ki-trappa .diagram__svg {
  max-height: 46vh;
}
.ki-trapp {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.ki-trapp--klar {
  fill: var(--paper-2);
  stroke: var(--ink-3);
}
.ki-trapp--nu {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 4;
}
.ki-trapp--sen {
  fill: none;
  stroke-dasharray: 6 6;
}
.diagram__svg .ki-trapp-bokstav {
  fill: var(--ink-2);
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 650;
}
.diagram__svg .ki-trapp-bokstav--nu {
  fill: var(--accent);
}
.diagram__svg .ki-trapp-namn {
  fill: var(--ink-2);
  font-size: 18px;
  font-weight: 700;
}
.quiz .claim.ki-svar-claim {
  font-size: clamp(1.5rem, 0.8rem + 1.8vw, 2.9rem);
  line-height: 1.2;
}

/* ---------- Klippet och slutsatserna ---------- */

.ki-tva {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.ki-klipp .diagram__svg {
  max-height: 64vh;
}
.ki-skarm {
  fill: var(--paper-2);
}
.ki-reklam {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.diagram__svg .ki-reklam-text {
  fill: var(--accent);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.diagram__svg .ki-citat {
  font-family: var(--f-display);
  font-size: 23px;
  font-weight: 600;
}
.ki-slutlista {
  display: grid;
  gap: clamp(0.6rem, 1.8vh, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ki-slutkort {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
.ki-slutniva {
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.ki-slutsteg rect {
  transition:
    fill 0.6s var(--ease),
    stroke 0.6s var(--ease);
}
.ki-slut:has(.ki-slutkort--1.is-shown) .ki-slutsteg--1 rect,
.ki-slut:has(.ki-slutkort--2.is-shown) .ki-slutsteg--2 rect,
.ki-slut:has(.ki-slutkort--3.is-shown) .ki-slutsteg--3 rect {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 4;
}
.ki-slut:has(.ki-slutkort--1.is-shown) .ki-slutsteg--1 .ki-trapp-bokstav,
.ki-slut:has(.ki-slutkort--2.is-shown) .ki-slutsteg--2 .ki-trapp-bokstav,
.ki-slut:has(.ki-slutkort--3.is-shown) .ki-slutsteg--3 .ki-trapp-bokstav {
  fill: var(--accent);
}

/* ---------- Läs mer ---------- */

.more-dialog__body ul {
  margin: 0 0 0.9em;
  padding-left: 1.3em;
}

/* ---------- Lägre och smalare skärmar ---------- */

@media (max-height: 820px) {
  .ki-karta .diagram__svg,
  .ki-stationstakt .ki-karta .diagram__svg {
    max-height: 52vh;
  }
  .ki-trappa .diagram__svg {
    max-height: 40vh;
  }
}

@media (max-width: 760px) {
  .ki-res,
  .ki-tva {
    grid-template-columns: 1fr;
  }
  .ki-slutkort {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .ki-trappa .diagram__svg {
    max-height: 30vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ki-omr,
  .ki-m,
  .ki-slutsteg rect {
    transition: none;
  }
}