/* =========================================================================
   demo.css — bara det som INTE redan finns i diploma.css/yrkessvenska.css.

   Allt här kommer ur docs/designlardomar-duolingo.md. Varje block är märkt
   med vilken lärdom det är.
   ========================================================================= */

/* =========================================================================
   DESIGNREGLAGE — allt som brukar behöva justeras ligger här, på ett ställe.

   Öppna kursen med ?design så får du en panel där de här värdena går att
   dra i live, med en knapp som kopierar tillbaka blocket hit. Du behöver
   alltså inte vänta på en ombyggnad för att prova ett annat avstånd.
   ========================================================================= */
:root {
  --yt-innehall-bredd: 44rem;   /* maxbredd på mittspalten */
  --yt-sidmarginal: 1.5rem;     /* luft mot skärmkanten */
  --yt-gap-innehall: 2rem;      /* lodrät luft mellan block i mitten */
  --yt-gap-alt: 1rem;           /* mellan svarsalternativen */
  --yt-gap-handling: 1.5rem;    /* mellan knapparna i handlingsraden */
  --yt-lyssna-storlek: 96px;    /* lyssnaknappens diameter */
  --yt-kort-hojd: 13rem;        /* ordkortets höjd */
}

/* =========================================================================
   Skärmindelning enligt Duolingo: innehållet mitt på skärmen, knapparna
   längst ned. Handlingsraden är alltid sista flexbarnet i .view, och
   .vy-mitt växer och centrerar det man ska göra.
   ========================================================================= */
.app { min-height: 100%; }

/* Höjden mäts mot fönstret, inte mot föräldrakedjan: .app är
   innehållsstyrd, och min-height: 100% mot den ger en höjd som växer med
   innehållet i stället för att hålla sig till skärmen. dvh följer med när
   mobilens adressfält glider upp och ned. */
.view {
  display: flex;
  flex-direction: column;
  /* height, inte min-height: vyn ska vara exakt en skärm hög. Med enbart
     min-height växer den förbi skärmen så fort innehållet är stort, och då
     får mittzonen aldrig något tryck att krympa och scrolla. */
  height: 100vh;
  height: 100dvh;
  padding-left: var(--yt-sidmarginal);
  padding-right: var(--yt-sidmarginal);
}

.vy-mitt {
  flex: 1 1 auto;
  /* min-height: 0 krävs för att ett flexbarn ska få bli mindre än sitt
     innehåll. Utan den växer mittzonen förbi skärmen och trycker ned
     handlingsraden ur bild. Med den scrollar mitten i stället, medan
     toppraden och knappraden står stilla. */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* safe: blir innehållet högre än mittzonen läggs det överkant i stället
     för att flöda ut åt båda hållen. Med vanlig center klipptes toppen av
     och gick inte att scrolla fram — syntes först på 650 px höga skärmar
     när dialogen fick bild. (Anton 2026-09-23) */
  justify-content: safe center;
  gap: var(--yt-gap-innehall);
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  margin: 0 auto;
  padding: var(--yt-gap-innehall) 0;
}

/* Startsidan har mer innehåll än övningsvyerna och ska rymmas utan scroll
   vid 900x600 (SPEC.md). Den får därför en stramare mittzon. */
.ys-start .vy-mitt { gap: 1.1rem; padding: 0.5rem 0; }
.ys-start .ys-fot { margin-top: 0.9rem; }

/* Handlingsraden spänner över hela bredden men knapparna följer mittspalten,
   så att "Nästa" hamnar i linje med innehållet ovanför. */
.view > .ys-handlingsrad {
  /* yrkessvenska.css ger raden margin-top för att den ska följa innehållet.
     Här är den fastnitad i botten, så marginalen bara skjuter vyn förbi
     skärmkanten. */
  margin-top: 0;
  margin-left: calc(var(--yt-sidmarginal) * -1);
  margin-right: calc(var(--yt-sidmarginal) * -1);
  gap: var(--yt-gap-handling);
  padding-left: max(var(--yt-sidmarginal), calc((100% - var(--yt-innehall-bredd)) / 2));
  padding-right: max(var(--yt-sidmarginal), calc((100% - var(--yt-innehall-bredd)) / 2));
}

/* Feedbackremsan hör till bottenzonen, direkt ovanför knapparna. */
.view > .ys-feedback {
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  margin: 0 auto;
}

/* Svarsalternativen får sin luft från reglaget. */
.ys-alt-grid { gap: var(--yt-gap-alt); }

/* -------------------------------------------------------------------------
   §7b — klickbara ord i en mening.
   Ordet är en riktig <button>: mus, pekskärm, tangentbord och skärmläsare
   fungerar med samma kod. Prickad understrykning gör att man ser att ordet
   går att trycka på utan att det behövs en hjälpruta.
   ------------------------------------------------------------------------- */
.mening {
  font-size: 1.25rem;
  line-height: 2.1;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.mening__fast { white-space: pre-wrap; }

.ys-ord {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.1em 0.12em;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
/* Bara ord med en förklaring får prickad understrykning. Övriga ord går
   också att trycka på (man hör dem), men utan att lova en betydelse. */
.ys-ord--forklarat {
  text-decoration: underline dotted var(--dip-blue);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 2px;
}
.ys-ord:focus-visible {
  outline: 3px solid var(--dip-morklila);
  outline-offset: 2px;
}
.ys-ord.is-playing,
.ys-ord.is-aktiv { background: var(--dip-lavendel); }

/* Hovring är ren bonus och bara på riktiga pekdon. Utan den här grinden
   får pekskärmar det klassiska dubbeltrycksproblemet: första trycket
   utlöser hover-läget, andra trycket aktiverar. */
@media (hover: hover) and (pointer: fine) {
  .ys-ord:hover { background: var(--dip-lavendel); }
}

/* Ordrutan: betydelsen, precis under ordet. */
.ordruta {
  position: fixed;
  z-index: 60;
  max-width: 22rem;
  background: var(--dip-morklila);
  color: #f8f7fb;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(43, 37, 81, 0.35);
}
.ordruta__ord { display: block; font-weight: 800; margin-bottom: 0.15rem; }
.ordruta__pil {
  position: absolute;
  top: -6px;
  width: 12px; height: 12px;
  background: var(--dip-morklila);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   §3 — två lyssnaknappar bredvid varandra i stället för en hastighetsväxel.
   Stor = vanlig fart, liten med sköldpadda = långsammare.
   ------------------------------------------------------------------------- */
.lyssna-rad {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--yt-gap-handling);
}
.lyssna-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.lyssna-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--dip-blue);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lyssna-knapp:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.lyssna-knapp--stor { width: var(--yt-lyssna-storlek); height: var(--yt-lyssna-storlek); }
.lyssna-knapp--stor svg { width: 42%; height: 42%; }
/* Liten variant används fortfarande på resultatsidans "Öva de här igen". */
.lyssna-knapp--liten { width: 54px; height: 54px; background: var(--dip-lila); }
.lyssna-knapp--liten svg { width: 26px; height: 26px; }
.lyssna-knapp.is-playing { box-shadow: 0 0 0 5px rgba(79, 84, 179, 0.28); }
.lyssna-etikett {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #524f61;
}
@media (prefers-reduced-motion: reduce) {
  .lyssna-knapp:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   §2 — rättningen färgar även primärknappen, så resultatet syns på håll.
   ------------------------------------------------------------------------- */
/* Mörkade varianter av profilens turkos och hallon. Nödvändigt: knappen har
   VIT text, och mot --dip-turkos (#63c9a8) blir kvoten 2,0:1 och mot
   --dip-hallon (#df516e) 3,8:1 — båda under WCAG AA:s 4,5:1. Uppmätt
   2026-09-18: #26755a ger 5,56:1 och #c73a58 ger 5,03:1.
   Ändra INTE tillbaka till palettens hex här; palettfärgerna används som de
   ska på ytor med mörk text (se .ys-alt.is-ratt / .is-fel). */
.ys-handlingsrad__primar.ar-ratt { background: #26755a; }
.ys-handlingsrad__primar.ar-fel { background: #c73a58; }

/* Feedbackremsan ligger direkt ovanför handlingsraden, aldrig som modal,
   och innehållet står kvar så man kan jämföra med sitt svar. */
.ys-feedback__rubrik { display: block; font-weight: 800; }
.ys-feedback__rad { display: block; font-weight: 400; font-size: 0.97rem; margin-top: 0.15rem; }

/* -------------------------------------------------------------------------
   §1 och §7 — numrerade svarsalternativ med tangentbordsgenväg,
   och en enda tydlig ingång på startsidan.
   ------------------------------------------------------------------------- */
.ys-alt__nr {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
  border-radius: 7px;
  font-size: 0.85rem; font-weight: 800;
  color: var(--dip-blue);
}
.ys-alt.is-ratt .ys-alt__nr,
.ys-alt.is-fel .ys-alt__nr { opacity: 0.35; }

/* Valt men ännu inte rättat: tydligt markerat, men i neutral färg så att
   det inte kan förväxlas med rätt eller fel. */
.ys-alt.is-vald {
  border-color: var(--dip-blue);
  background: var(--dip-lavendel);
}
.ys-alt.is-vald .ys-alt__nr {
  background: var(--dip-blue);
  border-color: var(--dip-blue);
  color: #fff;
}

.ys-kort--primar {
  border-color: var(--dip-blue);
  box-shadow: 0 8px 22px rgba(79, 84, 179, 0.22);
}
.ys-kort--primar .ys-kort__titel { color: var(--dip-blue); }
.ys-kort__markor {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dip-blue);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.35rem;
}
.ys-kort--dampat { opacity: 0.72; }

/* -------------------------------------------------------------------------
   Ordkortet. OBS fällan ur SPEC.md: CSS-transform ignoreras på
   display:inline. Kortet och dess innerdel måste vara block.
   ------------------------------------------------------------------------- */
.flipkort {
  display: block;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  margin: 0 auto;
  min-height: var(--yt-kort-hojd);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  font: inherit;
}
.flipkort__inner {
  display: block;
  position: relative;
  width: 100%;
  min-height: var(--yt-kort-hojd);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  transform-style: preserve-3d;
}
.flipkort.ar-vand .flipkort__inner { transform: rotateY(180deg); }
.flipkort__sida {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.6rem;
  border-radius: 18px;
  backface-visibility: hidden;
  text-align: center;
}
.flipkort__fram {
  background: linear-gradient(135deg, var(--dip-morklila), var(--dip-blue));
  color: #fff;
}
.flipkort__fram .flipkort__ord { font-size: 1.9rem; font-weight: 800; }
.flipkort__bak {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  color: var(--text-strong);
  font-size: 1.05rem;
  line-height: 1.6;
}
.flipkort__vandtips { font-size: 0.85rem; opacity: 0.8; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .flipkort__inner { transition: none; }
}

/* -------------------------------------------------------------------------
   §5 — utvägar. "Kan inte lyssna nu" är en vanlig länkknapp i
   handlingsraden, formulerad neutralt, aldrig som ett misslyckande.
   ------------------------------------------------------------------------- */
.utvag {
  display: block;
  margin: 0.2rem auto 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-muted, #5c5468);
  text-decoration: underline;
  cursor: pointer;
}
.utvag:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

/* Textläge: när ljudet är avstängt visas repliken som text i stället. */
.textlage {
  background: var(--surface-alt, #f1eefc);
  border-left: 4px solid var(--dip-blue);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   Dialogens repliker och resultatsidan.
   ------------------------------------------------------------------------- */
.situation {
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-strong);
}
.foljd {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--dip-lavendel);
  font-size: 1rem;
  line-height: 1.55;
}
/* Följden hör till bottenzonen, som feedbackremsan. */
.view > .foljd {
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  margin: 0 auto 0.6rem;
}
.missade { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.missade li {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 12px; padding: 0.6rem 0.8rem; text-align: left;
}
.missade__text { flex: 1 1 auto; font-weight: 700; }

/* Saknas i yrkessvenska.css: loggans storlek i sidfoten och alternativens
   textyta (som ska ta plats så att siffran och bocken hamnar i kanterna). */
.ys-fot__logo { height: 26px; width: auto; display: block; }
.ys-alt__text { flex: 1 1 auto; }

/* Platshållarnotisen om talsyntes. Tas bort när mp3-filerna finns. */
.platshallare {
  font-size: 0.82rem;
  color: var(--text-muted, #5c5468);
  text-align: center;
  margin: 0.4rem 0 0;
}

/* Resultatmärket ärver ingen färg från yrkessvenska.css — utan detta ritas
   SVG:n svart (currentColor mot body-färgen). */
.ys-resultat__marke { color: var(--dip-blue); }
.ys-resultat__marke.ar-klar { color: var(--dip-turkos); }

/* =========================================================================
   De fyra nya övningstyperna. Samma tre zoner och samma handlingsrad som
   de tre första — bara mittzonen skiljer.
   ========================================================================= */

/* ---- Lucktext ---------------------------------------------------------- */
.lucka {
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
}
.lucka__mening {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2.1;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}
.lucka__plats {
  display: inline-block;
  min-width: 7rem;
  border-bottom: 3px solid var(--dip-blue);
  margin: 0 0.25rem;
  vertical-align: baseline;
}
.lucka__plats.ar-ifylld {
  border-bottom-color: #26755a;
  color: #26755a;
  font-weight: 800;
}

/* ---- Flervalsval ------------------------------------------------------- */
.fraga {
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 800;
  text-align: center;
  color: var(--text-strong);
}

/* Etikett framför ett dialogsvar, t.ex. "skriftligt utkast" i modul 3,
   där svaret är en journaltext och inte en replik. */
.ys-alt__etikett {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #524f61;
  margin-bottom: 0.2rem;
}

/* ---- Sortering --------------------------------------------------------- */
.sortering__lista {
  list-style: none;
  counter-reset: steg;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.sortering__plats {
  counter-increment: steg;
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
}
.sortering__plats::before {
  content: counter(steg);
  flex-shrink: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--dip-lavendel);
  color: var(--dip-blue);
  font-weight: 800;
  font-size: 0.95rem;
}
.sortering__tom {
  flex-grow: 1;
  min-height: 46px;
  border: 3px dashed var(--border);
  border-radius: 12px;
}
.sortering__bricka {
  flex-grow: 1;
  min-height: 46px;
  text-align: left;
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}
.sortering__bricka:hover:not(:disabled) { border-color: var(--dip-blue); }
.sortering__bricka:disabled { cursor: default; }
.sortering__brickor {
  display: grid;
  gap: 0.5rem;
}
.sortering__lista.ar-ratt .sortering__bricka { border-color: #3f9d80; background: rgba(99, 201, 168, 0.22); }
.sortering__lista.ar-ratt .sortering__plats::before { background: #63c9a8; color: #16302a; }
.sortering__lista.ar-facit .sortering__bricka { border-color: var(--dip-blue); background: var(--dip-lavendel); }

/* ---- Matchning --------------------------------------------------------- */
.matchning {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.9rem;
}
.matchning__kol { display: grid; gap: 0.5rem; align-content: start; }
.matchning__ord,
.matchning__betydelse {
  min-height: 48px;
  text-align: left;
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-strong);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.matchning__ord { font-weight: 800; }
.matchning__ord:hover:not(:disabled),
.matchning__betydelse:hover:not(:disabled) { border-color: var(--dip-blue); }
.matchning__ord.is-vald {
  border-color: var(--dip-blue);
  background: var(--dip-lavendel);
}
.matchning__ord.ar-klar,
.matchning__betydelse.ar-klar {
  border-color: #3f9d80;
  background: rgba(99, 201, 168, 0.22);
  cursor: default;
}
.matchning__betydelse.ar-fel { border-color: var(--dip-hallon); }

@media (max-width: 620px) {
  .matchning { grid-template-columns: minmax(0, 1fr); }
  .matchning__kol:first-child { display: flex; flex-wrap: wrap; }
  .matchning__ord { flex: 0 1 auto; }
}

/* Sju moment ryms inte i kortformatet från tre-delars-versionen. Den här
   varianten är tätare: mindre ikon, kortare rader, samma information.
   Mätt 2026-09-21: 7 kort i 3 kolumner ryms utan scroll vid 900x600. */
.ys-kort-grid--delar { gap: 0.6rem; }
.ys-kort-grid--delar .ys-kort { padding: 0.65rem 0.8rem; gap: 0.15rem; border-width: 2px; }
.ys-kort-grid--delar .ys-kort__ikon { width: 26px; height: 26px; }
.ys-kort-grid--delar .ys-kort__ikon svg { width: 26px; height: 26px; }
.ys-kort-grid--delar .ys-kort__titel { font-size: 0.98rem; line-height: 1.25; }
.ys-kort-grid--delar .ys-kort__undertext { font-size: 0.8rem; }
.ys-kort-grid--delar .ys-kort__status { font-size: 0.78rem; }
.ys-kort-grid--delar .ys-kort__status svg { width: 13px; height: 13px; }
.ys-kort-grid--delar .ys-kort__markor { font-size: 0.65rem; padding: 0.1rem 0.45rem; margin-bottom: 0.1rem; }
.ys-start .vy-mitt { gap: 0.7rem; }
.ys-start h1 { font-size: 1.7rem; }
.ys-start .vy-mitt { padding: 0.25rem 0; }
.ys-start .ys-fot { margin-top: 0.6rem; padding-top: 0.6rem; gap: 0.25rem; }
.ys-start .ys-fot__logo { height: 22px; }
.ys-start .platshallare { margin: 0.25rem 0 0.4rem; font-size: 0.75rem; }
/* Sista finjusteringen för att sju kort + rubrik + sidfot ska rymmas. */
.ys-start h1 { font-size: 1.45rem; }
.ys-start .ys-intro { font-size: 0.95rem; }
.ys-start .vy-mitt { gap: 0.5rem; }
.ys-kort-grid--delar { gap: 0.5rem; }
.ys-kort-grid--delar .ys-kort { padding: 0.55rem 0.75rem; }
.ys-start .platshallare { font-size: 0.7rem; margin: 0.15rem 0 0.25rem; }
/* Platshållarnotisen om talsyntes är tillfälligt ställningsmaterial och ska
   inte tränga undan innehållet. Den läggs utanför flödet tills riktigt
   ljud finns, då den tas bort helt. */
.ys-start { position: relative; }
.ys-start .platshallare {
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  margin: 0;
}
.ys-start .ys-fot { padding-bottom: 0.9rem; }
.ys-start .ys-fot { padding-bottom: 0.45rem; }
.ys-start .ys-fot__logo { height: 20px; }
/* Sorteringen har dubbelt så många rader som andra övningar (platser +
   brickor), så raderna är lägre och luften mellan de två blocken mindre. */
.ovning .sortering__lista { gap: 0.4rem; }
.ovning .sortering__brickor { gap: 0.4rem; }
.sortering__tom, .sortering__bricka { min-height: 40px; }
.sortering__bricka { padding: 0.45rem 0.8rem; font-size: 0.93rem; }
.sortering__plats::before { width: 30px; font-size: 0.88rem; }
.ovning .vy-mitt { gap: 1.1rem; }

/* =========================================================================
   OMGÅNG 2 — Antons genomgång 2026-09-21
   ========================================================================= */

/* Genomgående större text. Skalan ligger som reglage så den går att dra i
   med ?design utan att röra varje regel. */
:root { --yt-textskala: 1.12; }

.ys-alt { font-size: calc(1.02rem * var(--yt-textskala)); }
.ys-alt__nr { width: 30px; height: 30px; font-size: calc(0.85rem * var(--yt-textskala)); }
.ys-intro { font-size: calc(1rem * var(--yt-textskala)); }
.ys-feedback { font-size: calc(1.02rem * var(--yt-textskala)); }
.ys-feedback__rad { font-size: calc(0.97rem * var(--yt-textskala)); }
.mening, .lucka__mening { font-size: calc(1.25rem * var(--yt-textskala)); }
.fraga { font-size: calc(1.3rem * var(--yt-textskala)); }
.situation { font-size: calc(1.08rem * var(--yt-textskala)); }
.foljd { font-size: calc(1rem * var(--yt-textskala)); }
.sortering__bricka { font-size: calc(0.95rem * var(--yt-textskala)); }
.matchning__ord, .matchning__betydelse { font-size: calc(0.97rem * var(--yt-textskala)); }
.ys-handlingsrad .dip-btn { font-size: calc(1rem * var(--yt-textskala)); }
.missade__text { font-size: calc(1rem * var(--yt-textskala)); }

/* ---- Ordkortet -------------------------------------------------------- */
/* Baksidan var för liten och exemplet satt ihop med förklaringen. */
.flipkort__forklaring {
  display: block;
  font-size: calc(1.25rem * var(--yt-textskala));
  line-height: 1.5;
  font-weight: 600;
}
.flipkort__exempel {
  display: block;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--dip-lavendel);
  width: 100%;
}
.flipkort__exempeletikett {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dip-blue);
  margin-bottom: 0.25rem;
}
.flipkort__exempeltext {
  display: block;
  font-size: calc(1.08rem * var(--yt-textskala));
  line-height: 1.5;
  font-style: italic;
}
.flipkort__fram .flipkort__ord { font-size: calc(2rem * var(--yt-textskala)); }
.flipkort__vandikon { display: block; width: 26px; height: 26px; opacity: 0.85; }
.flipkort__vandikon svg { width: 26px; height: 26px; }
.flipkort__vandtips { font-size: 0.92rem; opacity: 0.85; }
.flipkort__uppmaning { font-weight: 700; color: var(--dip-blue); }

/* Blinket i underkanten när kortet vänder: den roterande innerdelen sticker
   ut ur sin ruta under animationen och utlöser en scrollbar i ett par
   bildrutor. Att klippa på kortet självt tog bort blinket men kapade
   samtidigt kortets kanter mitt i vändningen. Klipp därför på RAMEN, som
   har luft runt kortet — då hinner rotationen aldrig fram till klippkanten.
   (Anton 2026-09-22) */
.flipkort-ram {
  width: 100%;
  padding: 14px 16px;
  overflow: hidden;
  isolation: isolate;
}
.flipkort { isolation: isolate; }
.flipkort__inner { transform-style: preserve-3d; will-change: transform; }

/* ---- Lyssna och välj: repliken som pratbubbla -------------------------- */
.replik {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.replik__avsandare {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--dip-lavendel);
  color: var(--dip-blue);
  display: flex; align-items: center; justify-content: center;
}
.replik__avsandare svg { width: 30px; height: 30px; }
.replik__bubbla {
  flex-grow: 1;
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  border-radius: 18px 18px 18px 6px;
  padding: 0.9rem 1.1rem;
}
.replik__etikett {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #524f61;
  margin-bottom: 0.2rem;
}
.replik__text {
  margin: 0;
  font-size: calc(1.2rem * var(--yt-textskala));
  line-height: 1.9;
  font-weight: 700;
  color: var(--text-strong);
}
.replik__lyssna {
  flex-shrink: 0;
  width: calc(var(--yt-lyssna-storlek) * 0.72);
  height: calc(var(--yt-lyssna-storlek) * 0.72);
}
.replik__lyssna svg { width: 42%; height: 42%; }
@media (max-width: 620px) {
  .replik { flex-wrap: wrap; }
  .replik__bubbla { order: 3; flex-basis: 100%; }
}

/* ---- Sortering: två märkta zoner -------------------------------------- */
.sortering__zon { display: flex; flex-direction: column; gap: 0.45rem; }
.sortering__rubrik {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #524f61;
}
.sortering__rubrik--val {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(0.92rem * var(--yt-textskala));
  color: var(--dip-blue);
}
.sortering__pil { width: 18px; height: 18px; display: block; }
.sortering__pil svg { width: 18px; height: 18px; }
/* Nästa lediga plats markeras, så det syns var nästa steg hamnar. */
.sortering__tom.ar-nasta {
  border-color: var(--dip-blue);
  border-style: solid;
  background: rgba(79, 84, 179, 0.07);
}

/* ---- Modulöversikten (flera moduler i samma paket) --------------------- */
.ys-kort-grid--moduler { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ys-modulkort { padding: 0.9rem 1rem; gap: 0.3rem; }
.ys-modulkort .ys-kort__ikon { width: 34px; height: 34px; }
.ys-modulkort .ys-kort__ikon svg { width: 34px; height: 34px; }
.ys-modulkort .ys-kort__titel { font-size: calc(1.02rem * var(--yt-textskala)); line-height: 1.3; }
.ys-modulkort .ys-kort__undertext { font-size: 0.85rem; }
.ys-modulkort .ys-kort__status { font-size: 0.82rem; }
.ys-start--moduler h1 { font-size: 1.7rem; }
.ys-start--moduler .vy-mitt { gap: 0.8rem; }
@media (max-width: 700px) {
  .ys-kort-grid--moduler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .ys-kort-grid--moduler { grid-template-columns: minmax(0, 1fr); }
}
/* Korten ärvde centrerad text från vyn — rubriker som bryts på två rader
   såg då mittställda ut mot vänsterställd ikon och status. */
.ys-kort { text-align: left; }
.ys-modulkort { padding: 0.75rem 0.85rem; gap: 0.25rem; }
.ys-start--moduler .vy-mitt { gap: 0.6rem; }
/* .ys-topp--start är i yrkessvenska.css högerställd, eftersom den där bara
   bar "Så gör du". Nu bär den en tillbaka-pil, och den hör hemma till vänster. */
.ys-start .ys-topp--start { justify-content: flex-start; }

/* -------------------------------------------------------------------------
   Tillägg 2026-09-22 (Antons genomgång)
   ------------------------------------------------------------------------- */

/* Högtalaren ska SYNAS spela. Statisk ring räckte inte — det gick inte att
   se om ljudet var igång, särskilt inte under den nya fördröjningen innan
   klippet startar. Pulsen börjar direkt vid klick. */
@keyframes ys-puls {
  0%   { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(79, 84, 179, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0); }
}
@keyframes ys-talare-vipp {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.lyssna-knapp.is-playing,
.ys-forsattsblad__lyssna.is-playing {
  animation: ys-puls 1.1s ease-out infinite;
}
.lyssna-knapp.is-playing svg,
.ys-forsattsblad__lyssna.is-playing svg,
.ys-forsattsblad__lyssna.is-playing .ys-forsattsblad__lyssna-ikon svg {
  animation: ys-talare-vipp 1.1s ease-in-out infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .lyssna-knapp.is-playing,
  .ys-forsattsblad__lyssna.is-playing,
  .lyssna-knapp.is-playing svg,
  .ys-forsattsblad__lyssna.is-playing svg {
    animation: none;
    box-shadow: 0 0 0 5px rgba(79, 84, 179, 0.28);
  }
}

/* Ringen runt lyssnaknappen i pratbubblan låg tätt mot mittzonens högerkant
   och kapades av dess overflow. Luften här ger skuggan plats. */
.replik { padding-right: 14px; }

/* Rätt ordning: situationen först, annars sorterar man lösryckta meningar. */
.sortering__situation {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-self: stretch;
  background: var(--dip-lavendel);
  border-radius: 14px;
  padding: 0.8rem 1.1rem;
}
.sortering__situation-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dip-blue);
}
.sortering__situation-rubrik {
  font-size: calc(1.25rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.25;
}
.sortering__situation-text {
  font-size: calc(0.95rem * var(--yt-textskala));
  color: #524f61;
  line-height: 1.5;
}

/* Påbörjad del i modulöversikten. */
.ys-kort__status.is-pabörjad { color: var(--dip-blue); font-weight: 700; }

/* -------------------------------------------------------------------------
   Svarsalternativ: ingen hoppande text när facit visas
   -------------------------------------------------------------------------
   yrkessvenska.css döljer bock/kryss-ikonen med display: none och sätter
   display: flex först när svaret rättats. Då dyker ett 20 px-element plus
   0.8 rem gap upp till höger, och eftersom .ys-alt--text centrerar sitt
   innehåll knuffas texten åt vänster i samma ögonblick — bara på det
   alternativ man valt, så det ser ut som att raden glider ur led.

   Lösningen är att platsen alltid är tagen: ikonen finns men är osynlig,
   och texten centreras mot knappen i stället för mot sina grannar. Då är
   layouten exakt densamma före och efter rättning. (Anton 2026-09-22)
   ------------------------------------------------------------------------- */
.ys-alt--text .ys-alt__ikon,
.ys-alt.is-ratt .ys-alt__ikon,
.ys-alt.is-fel .ys-alt__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ys-alt--text .ys-alt__ikon { visibility: hidden; }
.ys-alt--text.is-ratt .ys-alt__ikon,
.ys-alt--text.is-fel .ys-alt__ikon { visibility: visible; }

/* Texten centreras mot KNAPPEN, inte mot utrymmet mellan nummer och ikon.
   Nummer och ikon lyfts ur flödet, så texten står stilla oavsett om ikonen
   syns eller inte, och oavsett hur bred sifferbrickan är. */
.ys-alt--text { position: relative; justify-content: center; }
.ys-alt--text .ys-alt__nr {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
}
.ys-alt--text .ys-alt__ikon {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
}
.ys-alt--text .ys-alt__text {
  flex: 0 1 auto;
  text-align: center;
  padding: 0 2.6rem;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   Ordtipset — pratbubbla som pekar på ett riktigt ord i meningen.
   Ramen ligger i flödet och tar sin plats, så inget hoppar när den ritas;
   bara pilen flyttas i sidled av JS. (Anton 2026-09-22)
   ------------------------------------------------------------------------- */
.ordtips {
  position: absolute;
  left: 0;
  right: 0;
  padding-top: 9px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.ordtips.ar-borta { opacity: 0; }
/* Mittzonen är ramens referens; utan detta hamnar bubblan mot sidan. */
.vy-mitt { position: relative; }
.ordtips__pil {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0; height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--dip-blue);
}
.ordtips__bubbla {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--dip-blue);
  color: #fff;
  border-radius: 12px;
  padding: 0.34rem 0.8rem;
  font-size: calc(0.87rem * var(--yt-textskala));
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
  text-align: left;
}
.ordtips__ikon {
  display: inline-flex;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.ordtips__ikon svg { width: 18px; height: 18px; }

/* Ordet bubblan pekar på: markerat, men inte skrikigt. */
.ys-ord--tips {
  background: var(--dip-lavendel);
  box-shadow: 0 0 0 2px var(--dip-lavendel);
  border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .ys-ord--tips { animation: ys-tipspuls 2.4s ease-in-out 3; }
}
@keyframes ys-tipspuls {
  0%, 100% { box-shadow: 0 0 0 2px var(--dip-lavendel); }
  50%      { box-shadow: 0 0 0 5px var(--dip-lavendel); }
}

/* -------------------------------------------------------------------------
   "Börja om" — bara i fristående läge (förhandsvisning och monter).
   I ett skarpt LMS äger LMS:et framstegen och knappen visas inte.
   ------------------------------------------------------------------------- */
.ys-borja-om {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b6880;
  cursor: pointer;
  border-radius: 8px;
}
.ys-borja-om svg { width: 15px; height: 15px; }
.ys-borja-om:hover { color: var(--dip-blue); background: var(--dip-lavendel); }
.ys-borja-om:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

.ys-bekrafta {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(43, 37, 81, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.ys-bekrafta__ruta {
  background: var(--surface);
  border-radius: 18px;
  padding: 1.6rem 1.7rem 1.4rem;
  max-width: 26rem;
  width: 100%;
  box-shadow: 0 18px 50px rgba(43, 37, 81, 0.35);
}
.ys-bekrafta__fraga {
  margin: 0 0 0.4rem;
  font-size: calc(1.2rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.3;
}
.ys-bekrafta__text {
  margin: 0 0 1.2rem;
  font-size: calc(0.95rem * var(--yt-textskala));
  color: #524f61;
  line-height: 1.55;
}
.ys-bekrafta__rad {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ys-bekrafta__ja { background: #c73a58; }
.ys-bekrafta__ja:hover { background: #b02f4b; }

/* Spåret (variant R) togs bort 2026-09-23; kategorispåret är kursens enda
   översikt. Ordlistan nedan används fortfarande. */

/* ---- ordlistan ---- */
.ys-ordlista .vy-mitt { justify-content: flex-start; gap: 0.7rem; }
.ordlista__rubrik { margin: 0; font-size: calc(1.5rem * var(--yt-textskala)); }
.ordlista__intro { margin: 0; font-size: calc(1.02rem * var(--yt-textskala)); color: #524f61; line-height: 1.55; }
.ordlista { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0.45rem; }
.ordlista__rad {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-left: 5px solid var(--modulfarg, var(--dip-blue));
  border-radius: 0 12px 12px 0;
  padding: 0.6rem 0.9rem;
}
.ordlista__lyssna {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--modulfarg, var(--dip-blue));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ordlista__lyssna svg { width: 19px; height: 19px; }
.ordlista__lyssna:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.ordlista__text { flex-grow: 1; min-width: 0; }
.ordlista__ord { display: block; font-size: calc(1.15rem * var(--yt-textskala)); font-weight: 800; color: var(--text-strong); }
.ordlista__forklaring { display: block; font-size: calc(0.98rem * var(--yt-textskala)); color: #524f61; line-height: 1.5; margin-top: 1px; }
.ordlista__exempel { display: block; font-size: calc(0.95rem * var(--yt-textskala)); color: #6b6880; font-style: italic; margin-top: 3px; }
.ordlista__status {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6880;
  background: #f1eefc;
  border-radius: 999px;
  padding: 3px 9px;
}
.ordlista__status.is-kan { background: #d9f2e9; color: #1f6b52; }
.ys-topp__plats { flex-shrink: 0; width: 88px; }

/* NYTT ORD-etiketten på ordkortet, och modulprickan i toppraden. */
.nytt-ord {
  margin: 0 auto -0.4rem;
  align-self: center;
  display: inline-flex;
  align-items: center;
  background: var(--modulfarg, var(--dip-blue));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 11px;
}
.ys-raknare { display: inline-flex; align-items: center; gap: 0.4rem; }
.ys-raknare__prick {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--modulfarg, var(--dip-blue));
  display: block;
  flex-shrink: 0;
}
.dip-progress__bar { background: var(--modulfarg, var(--dip-blue)); }

/* =========================================================================
   Tidslinjen — en modul som en lodrät linje, en rad per övning.
   Det är så en modul visas när man valt den i ett område.
   ========================================================================= */
.ys-tidslinje { padding-left: 0; padding-right: 0; }
.ys-tidslinje .vy-mitt {
  justify-content: flex-start;
  gap: 0;
  padding: 0.6rem var(--yt-sidmarginal) 1rem;
  max-width: 52rem;
}
.tl-topp {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem var(--yt-sidmarginal) 0.7rem;
  border-bottom: 2px solid var(--dip-lavendel);
  box-sizing: border-box;
}
.tl-topp__rubrik { margin: 0; font-size: calc(1.5rem * var(--yt-textskala)); font-weight: 800; }
.tl-topp__summa { flex-shrink: 0; text-align: right; }
.tl-topp__tal {
  display: block;
  font-size: calc(1.2rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--dip-blue);
}
.tl-topp__text { display: block; font-size: calc(0.8rem * var(--yt-textskala)); color: #6b6880; }

/* modulrubriken */
.tl-modul {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1.1rem 0 0.35rem;
}
.tl-modul__namn {
  font-size: calc(0.86rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.25;
}
.tl-modul__strec { flex-grow: 1; height: 2px; border-radius: 2px; display: block; min-width: 12px; }
.tl-modul__antal { flex-shrink: 0; font-size: calc(0.82rem * var(--yt-textskala)); font-weight: 800; }
.tl-modul__ordlista {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.2rem 0.3rem;
  font: inherit;
  font-size: calc(0.8rem * var(--yt-textskala));
  font-weight: 800;
  cursor: pointer;
  border-radius: 7px;
}
.tl-modul__ordlista svg { width: 15px; height: 15px; }
.tl-modul__ordlista:hover { background: var(--dip-lavendel); }
.tl-modul__ordlista:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

/* raden: nod på linjen + etikett. Inga kort, ingen målmening —
   ikonen bär vad övningen är, texten bara vad den heter. */
.tl-rad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 1rem 0.7rem;
  margin: 0;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.tl-rad:hover { background: rgba(79, 84, 179, 0.05); }
.tl-rad:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: -2px; }

.tl-linje {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  display: flex;
  justify-content: center;
}
/* Linjen dras genom hela raden, inklusive luften ovanför och under, så att
   noderna hänger ihop trots mellanrummet. */
.tl-linje::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  top: -2.2rem;
  bottom: -2.2rem;
  width: 3px;
  background: var(--dip-lavendel);
}
.tl-rad:first-of-type .tl-linje::before { top: 50%; }
.tl-nod {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  color: #a9a4c4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tl-nod svg { width: 26px; height: 26px; }
/* Den man ska börja på ska synas på håll: större, fylld, med ring. */
.tl-nod--nu {
  width: 72px; height: 72px;
  border-width: 4px;
  box-shadow: 0 0 0 7px rgba(79, 84, 179, 0.14);
}
.tl-nod--nu svg { width: 33px; height: 33px; }
.tl-nod--klar svg { width: 28px; height: 28px; }

.tl-etikett { flex-grow: 1; min-width: 0; }
.tl-etikett b {
  display: block;
  font-size: calc(1.05rem * var(--yt-textskala));
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}
.tl-etikett small {
  display: block;
  font-size: calc(0.85rem * var(--yt-textskala));
  color: #8580a3;
  margin-top: 2px;
}
.tl-rad--klar .tl-etikett b { color: #524f61; }
.tl-rad--nu { background: var(--surface); box-shadow: 0 6px 20px rgba(43, 37, 81, 0.09); }
.tl-rad--nu .tl-etikett b { font-size: calc(1.2rem * var(--yt-textskala)); }
.tl-rad--nu .tl-etikett small { font-size: calc(0.92rem * var(--yt-textskala)); }

.tl-chip {
  flex-shrink: 0;
  font-size: calc(0.78rem * var(--yt-textskala));
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
  background: #f1eefc;
  color: #4f54b3;
}
/* Ser ut som en knapp, är en span: hela raden är redan knappen och en
   knapp i en knapp är ogiltig HTML. */
.tl-start {
  flex-shrink: 0;
  color: #fff;
  font-size: calc(1rem * var(--yt-textskala));
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem 1.7rem;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(43, 37, 81, 0.2);
}

@media (max-width: 760px) {
  .tl-topp { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .tl-topp__summa { text-align: left; }
}

@media (max-width: 520px) {
  .tl-linje { width: 50px; }
  .tl-nod { width: 50px; height: 50px; }
  .tl-nod svg { width: 23px; height: 23px; }
  .tl-nod--nu { width: 62px; height: 62px; }
  .tl-nod--nu svg { width: 28px; height: 28px; }
  .tl-rad { gap: 0.7rem; padding: 0.8rem 0.2rem; }
  .tl-start { padding: 0.6rem 1.1rem; font-size: calc(0.9rem * var(--yt-textskala)); }
  .tl-modul { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
  .tl-modul__strec { display: none; }
  .tl-modul__ordlista { margin-left: auto; }
}
.tl-frihet {
  margin: 0.55rem 0 0;
  font-size: calc(0.86rem * var(--yt-textskala));
  color: #6b6880;
  text-align: center;
  width: 100%;
}

/* -------------------------------------------------------------------------
   Tidslinjen: rättningar 2026-09-22 (Antons genomgång)
   ------------------------------------------------------------------------- */

/* Skrollisten låg mitt på skärmen, vid mittspaltens kant, eftersom .vy-mitt
   var skrollaren. Här skrollar dokumentet i stället — som på en vanlig
   webbsida — så listen hamnar längst till höger i fönstret. Toppraden är
   klistrad så rubriken följer med ned. */
.ys-tidslinje {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.ys-tidslinje .vy-mitt {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.tl-topp {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #f8f7fb);
}

/* Det vita kortet på den aktiva raden slutade innanför nodens ring.
   Negativ marginal flyttar kortets kant utåt utan att innehållet rör sig,
   så noden står kvar exakt på linjen med de andra. */
.tl-rad--nu {
  margin-left: -0.55rem;
  margin-right: -0.55rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Linjen ska börja vid modulens första nod och sluta vid dess sista.
   Annars sticker den upp genom modulrubriken ovanför. */
.tl-rad--forst .tl-linje::before { top: 50%; }
.tl-rad--sist .tl-linje::before { bottom: 50%; }

/* Foten följer med i botten av tidslinjen. Med dokumentskroll hamnade den
   annars 3 600 px ned, och i montern måste "Börja om" gå att nå utan att
   rulla igenom hela kursen. */
.ys-tidslinje .ys-fot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 0.5rem 0 0.7rem;
  background: var(--bg, #f8f7fb);
  border-top: 1px solid var(--dip-lavendel);
  z-index: 9;
}

/* -------------------------------------------------------------------------
   Tidslinjen: en modul i taget + väg vidare
   ------------------------------------------------------------------------- */
.tl-topp__titel { flex-grow: 1; min-width: 0; }
.tl-topp__kicker {
  margin: 0 0 1px;
  font-size: calc(0.78rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tl-topp .ys-tillbaka { flex-shrink: 0; }

.tl-slut { width: 100%; padding: 1.4rem 0 0.4rem; display: flex; justify-content: center; }
.tl-nasta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  border: 3px solid var(--dip-lavendel);
  border-radius: 16px;
  padding: 0.9rem 1.4rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--dip-blue);
}
.tl-nasta:hover { box-shadow: 0 6px 18px rgba(43, 37, 81, 0.12); }
.tl-nasta:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.tl-nasta__text small {
  display: block;
  font-size: calc(0.78rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.tl-nasta__text b {
  display: block;
  font-size: calc(1.15rem * var(--yt-textskala));
  font-weight: 800;
  margin-top: 2px;
}
.tl-nasta__pil { display: inline-flex; width: 22px; height: 22px; transform: rotate(180deg); }
.tl-nasta__pil svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------------------
   Sektionsöversikten — alla moduler och hur långt man kommit
   ------------------------------------------------------------------------- */
.ys-moduler {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.ys-moduler .vy-mitt {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  justify-content: flex-start;
  gap: 1rem;
  max-width: 50rem;
  padding: 0.6rem 0 1.4rem;
}
.ys-moduler .tl-topp { padding-bottom: 1rem; }

.modkort {
  text-align: left;
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  box-sizing: border-box;
}
.modkort--aktiv { border-width: 3px; box-shadow: 0 8px 24px rgba(43, 37, 81, 0.1); }
.modkort__vanster { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.modkort__kicker {
  margin: 0 0 2px;
  font-size: calc(0.75rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modkort__titel {
  margin: 0 0 0.7rem;
  font-size: calc(1.3rem * var(--yt-textskala));
  font-weight: 800;
  line-height: 1.2;
}
.modkort__barrad { display: flex; align-items: center; gap: 0.7rem; }
.modkort__bar {
  flex-grow: 1;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.modkort__fyll { display: block; height: 12px; border-radius: 999px; }
.modkort__procent {
  flex-shrink: 0;
  font-size: calc(0.88rem * var(--yt-textskala));
  font-weight: 800;
}
.modkort__antal {
  margin: 0.45rem 0 0;
  font-size: calc(0.88rem * var(--yt-textskala));
  color: #6b6880;
}
.modkort__knapp {
  align-self: flex-start;
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font: inherit;
  font-size: calc(1rem * var(--yt-textskala));
  font-weight: 700;
  cursor: pointer;
  background: var(--dip-blue);
  color: #fff;
}
.modkort__knapp--tom { background: var(--surface); border: 2px solid; }
.modkort__knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

.modkort__hoger {
  flex-shrink: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.modkort__mal {
  margin: 0.55rem 0 0;
  font-size: calc(0.95rem * var(--yt-textskala));
  line-height: 1.5;
  color: #524f61;
}
.modkort__ikon {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modkort__ikon svg { width: 34px; height: 34px; }

@media (max-width: 720px) {
  .modkort { flex-direction: column; gap: 1rem; }
  .modkort__hoger { width: 100%; flex-direction: row-reverse; justify-content: flex-end; }
  .modkort__ikon { width: 54px; height: 54px; }
  .modkort__ikon svg { width: 27px; height: 27px; }
}


/* -------------------------------------------------------------------------
   Låsta moduler — samma kort som de riktiga, i grått.
   <div>, inte <button>: ingen tabbstopp och inget att klicka på. Hovring
   och skärmläsare får samma besked via title + aria-disabled.
   ------------------------------------------------------------------------- */
.modkort--last {
  background: rgba(255, 255, 255, 0.5);
  border-style: dashed;
  border-color: #dcd8ee;
  cursor: default;
}
.modkort--last .modkort__kicker,
.modkort--last .modkort__procent { color: #a9a4c4; }
.modkort--last .modkort__titel { color: #6b6880; }
.modkort--last .modkort__mal { color: #8580a3; }
.modkort--last .modkort__bar { background: #eae7f6; }
.modkort--last .modkort__fyll { width: 0; }
.modkort--last .modkort__ikon { background: #f0eef8; color: #b5b0cc; }
.modkort--last:hover { border-color: #c9c5e6; background: rgba(255, 255, 255, 0.8); }

.modkort__last {
  align-self: flex-start;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 2px solid #dcd8ee;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-size: calc(0.92rem * var(--yt-textskala));
  font-weight: 700;
  color: #8580a3;
}
.modkort__last svg { width: 17px; height: 17px; }
.modkort--last:hover .modkort__last { border-color: #b5b0cc; color: #6b6880; }


/* =========================================================================
   Kategorispåret — kursens översikt, försättsblad och välkomstsamtal
   ========================================================================= */
.ys-kategorier { height: auto; min-height: 100vh; min-height: 100dvh; }
.ys-kategorier .vy-mitt {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  justify-content: flex-start;
  gap: 1.1rem;
  max-width: 50rem;
  padding: 0.6rem 0 1.4rem;
}
.kat-intro {
  margin: 0;
  width: 100%;
  font-size: calc(1rem * var(--yt-textskala));
  color: #524f61;
  line-height: 1.55;
}
.kat-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  width: 100%;
}
.kat-kort {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.kat-kort:hover { transform: translateY(-2px); border-color: var(--katfarg); }
.kat-kort:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.kat-kort__ikon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--katfarg-ljus);
  color: var(--katfarg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.35rem;
}
.kat-kort__ikon svg { width: 24px; height: 24px; }
.kat-kort__namn {
  display: block;
  font-size: calc(1.12rem * var(--yt-textskala));
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}
.kat-kort__text {
  display: block;
  font-size: calc(0.9rem * var(--yt-textskala));
  color: #524f61;
  line-height: 1.5;
}
.kat-kort__antal {
  display: block;
  margin-top: 0.4rem;
  font-size: calc(0.8rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--katfarg);
}
/* Startknappen är sidans tyngdpunkt och behöver luft omkring sig för att
   läsas som ett eget val, inte som toppen på kortlistan. (Anton 2026-09-22) */
.kat-startrad {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.2rem 0 2.6rem;
}
.kat-start {
  border: 0;
  border-radius: 999px;
  padding: 1rem 3rem;
  font: inherit;
  font-size: calc(1.2rem * var(--yt-textskala));
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(43, 37, 81, 0.22);
}
.kat-start:disabled { background: #c9c5e6 !important; box-shadow: none; cursor: default; }
.kat-start:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }
.kat-under { margin: 0; font-size: calc(0.9rem * var(--yt-textskala)); color: #6b6880; }


@media (max-width: 620px) {
  .kat-start { width: 100%; padding: 1rem 1.5rem; }
}

/* ---- kategorispåret: startknappen och avdelaren ---- */
.kat-start { background: var(--dip-blue); }
.kat-avdelare {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.kat-avdelare i { flex-grow: 1; height: 1px; background: var(--dip-lavendel); display: block; }
.kat-avdelare span {
  font-size: calc(0.85rem * var(--yt-textskala));
  color: #8580a3;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Välkomstsamtalet — en sak i taget, mitt på skärmen.
   Texten tonar in, knappen kommer efteråt: man ska hinna läsa klart innan
   det finns något att trycka på. (Anton 2026-09-22)
   ------------------------------------------------------------------------- */
.ys-valkomst { position: relative; }
/* Exakt en skärm, innehållet mitt i den. */
.ys-valkomst { height: 100vh; height: 100dvh; }
/* Malin ska stå still mellan stegen. Med centrering flyttade hela gruppen
   sig så fort meningen fick en rad till eller knapparna var tre i stället
   för en. Nu börjar innehållet på en fast höjd, och meningen har en fast
   yta på fyra rader, så att porträttet och knapparna ligger på samma
   ställe i varje steg. (Anton 2026-09-23) */
.ys-valkomst .vy-mitt {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 34rem;
  padding: clamp(4.5rem, 14vh, 9rem) 0 3.5rem;
}
.valk-steg {
  position: absolute;
  top: 1.4rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.valk-steg__prick {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--dip-lavendel);
  display: block;
  transition: width 0.25s ease;
}
.valk-steg__prick.ar-nu { width: 26px; }

.valk-mening {
  margin: 0;
  font-size: calc(1.9rem * var(--yt-textskala));
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-strong);
  max-width: 26ch;
  /* Fyra rader reserverade, texten centrerad i ytan. */
  min-height: 5.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.valk-svar, .valk-fortsatt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.valk-svar.ar-inne, .valk-fortsatt.ar-inne {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.valk-svar__knapp {
  width: 100%;
  max-width: 22rem;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  font: inherit;
  font-size: calc(1.05rem * var(--yt-textskala));
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.valk-svar__knapp:hover { border-color: var(--modulfarg, var(--dip-blue)); transform: translateY(-2px); }
.valk-svar__knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

.valk-knapp-stor {
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 3rem;
  font: inherit;
  font-size: calc(1.15rem * var(--yt-textskala));
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(43, 37, 81, 0.2);
}
.valk-knapp-stor:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }

.valk-tillbaka {
  position: absolute;
  left: var(--yt-sidmarginal);
  bottom: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: calc(0.9rem * var(--yt-textskala));
  font-weight: 700;
  color: #8580a3;
  cursor: pointer;
  border-radius: 8px;
}
.valk-tillbaka svg { width: 15px; height: 15px; }
/* Till menyn: samma stil som Tillbaka, uppe till vänster i varje steg. */
.valk-meny {
  position: absolute;
  left: var(--yt-sidmarginal);
  top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: calc(0.9rem * var(--yt-textskala));
  font-weight: 700;
  color: #8580a3;
  cursor: pointer;
  border-radius: 8px;
  z-index: 1;
}
.valk-meny svg { width: 15px; height: 15px; }
.valk-meny:hover { color: var(--dip-blue); background: var(--dip-lavendel); }
.valk-meny:focus-visible, .valk-tillbaka:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.valk-tillbaka:hover { color: var(--dip-blue); background: var(--dip-lavendel); }

@media (prefers-reduced-motion: reduce) {
  .valk-svar, .valk-fortsatt { transition: none; }
  .valk-steg__prick { transition: none; }
  .valk-svar__knapp:hover { transform: none; }
}
@media (max-width: 620px) {
  .valk-mening { font-size: calc(1.5rem * var(--yt-textskala)); }
  /* Prickarna flyttas under menyknappen, annars krockar de. */
  .valk-steg { top: 3.4rem; }
  .valk-mening { min-height: 6.5em; }
  .ys-valkomst .vy-mitt { padding-top: 5.5rem; gap: 1.5rem; }
  .valk-knapp-stor { width: 100%; padding: 0.95rem 1.5rem; }
}

/* -------------------------------------------------------------------------
   Malin i välkomsten. Rund, med en ring som pulserar medan hon talar —
   samma signal som lyssnaknapparna använder, så tecknet betyder samma sak
   överallt i kursen. (Anton 2026-09-22)
   ------------------------------------------------------------------------- */
.valk-malin {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dip-lavendel);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--dip-lavendel);
  flex-shrink: 0;
}
.valk-malin__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.valk-malin.is-playing {
  animation: ys-malin-puls 1.4s ease-out infinite;
}
@keyframes ys-malin-puls {
  0%   { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--modulfarg, var(--dip-blue)); }
  70%  { box-shadow: 0 0 0 4px var(--surface), 0 0 0 16px rgba(79, 84, 179, 0); }
  100% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px rgba(79, 84, 179, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .valk-malin.is-playing {
    animation: none;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--modulfarg, var(--dip-blue));
  }
}
@media (max-width: 620px) {
  .valk-malin { width: 104px; height: 104px; }
}

/* -------------------------------------------------------------------------
   Scenbilder i Dialog och Rätt ordning.
   Bild och situation delar ruta: bilden visar var och när, texten vad.
   Bilderna är 16:9. I dialogen står bilden överst i rutan och meningen
   under; bredvid meningen blev den för liten på datorn. Höjden följer
   skärmhöjden: 42,5rem är vad resten av dialogen (lyssnaknapp, två svar,
   följden, top- och knapprad) behöver, så svaren inte trycks ut på en
   låg skärm. (Anton 2026-09-23)
   ------------------------------------------------------------------------- */
.scen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 0.8rem;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 14px;
  padding: 0.9rem 1.1rem 1rem;
  margin-bottom: 0.4rem;
}
/* Med en stor bild ovanför försvann meningen. Större, fetare och centrerad
   under bilden, med en tunn linje emellan, så att den läses som rutans
   rubrik och inte som en bildtext. (Anton 2026-09-23) */
.scen > .situation {
  border: 0;
  border-top: 2px solid var(--dip-lavendel);
  background: none;
  padding: 0.75rem 0 0;
  margin: 0;
  font-size: calc(1.3rem * var(--yt-textskala));
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.scen__bild {
  display: block;
  align-self: center;
  height: clamp(8rem, calc(100vh - 42.5rem), 22rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}
/* Rätt ordning har mer att göra på skärmen: bilden står kvar bredvid
   situationen, i samma lavendel som rutan hade förut. */
.scen--liten {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  background: var(--dip-lavendel);
  border: 0;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  margin-bottom: 0;
}
.scen--liten > .sortering__situation { flex: 1 1 auto; background: none; padding: 0; }
.scen--liten .scen__bild {
  flex: 0 0 auto;
  height: auto;
  width: clamp(8rem, 26vh, 14rem);
  background: #fff;
}
@media (max-width: 620px) {
  .scen { padding: 0.7rem; gap: 0.6rem; }
  .scen > .situation { font-size: calc(1.15rem * var(--yt-textskala)); padding-top: 0.6rem; }
  .scen__bild { width: 100%; height: auto; max-height: 24vh; }
  .scen--liten .scen__bild { width: clamp(5.5rem, 14vh, 7rem); max-height: none; }
}

/* =========================================================================
   Startsidan i kategorispåret — skiss A ("Kollage"), vald 2026-09-23.
   Stor rubrik och startknapp till vänster, tre scenbilder som lösa foton
   till höger, områdena som bildkort under. Sidan scrollar som en vanlig
   webbsida; foten med "Börja om" ligger sist. (Anton 2026-09-23)
   ========================================================================= */
/* yrkessvenska.css gör alla .ys-start högst 780 px breda och centrerar
   texten. Startsidan behöver hela bredden för två spalter. */
.view.ys-startsida {
  max-width: none;
  text-align: left;
  padding-top: 0;
}
.ys-startsida .vy-mitt {
  max-width: 1240px;
  gap: 0;
  padding: 0 1.5rem;
}
.ss-topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 0 0;
}
.ss-topp__logo { height: 24px; width: auto; display: block; }
.ss-topp__titel,
.ss-kicker {
  font-size: calc(0.78rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ss-topp__titel { color: #5c5876; text-align: right; }
.ss-kicker { color: var(--dip-blue); margin: 0; }

.ss-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 3rem;
  min-height: min(calc(100vh - 9rem), 720px);
  padding: 2rem 0 1rem;
}
.ys-startsida .ss-rubrik {
  font-size: clamp(2.5rem, 4.6vw, 4.3rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0.6rem 0 1.2rem;
}
.ss-rubrik em { font-style: normal; color: var(--dip-blue); }
.ss-ingress {
  font-size: calc(1.2rem * var(--yt-textskala));
  line-height: 1.55;
  color: #5c5876;
  max-width: 30rem;
  margin: 0 0 2rem;
}
.ss-start {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--dip-blue);
  color: #fff;
  font: inherit;
  font-size: calc(1.2rem * var(--yt-textskala));
  font-weight: 700;
  padding: 1.05rem 2.2rem 1.05rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(79, 84, 179, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ss-start:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(79, 84, 179, 0.38); }
.ss-start:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }
.ss-start svg { width: 26px; height: 26px; flex-shrink: 0; }
.ss-malin {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  color: #5c5876;
  font-size: calc(0.98rem * var(--yt-textskala));
  line-height: 1.4;
}
.ss-malin b { display: block; color: var(--text-strong); }
.ss-malin__bild {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--dip-lavendel);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dip-lavendel);
  flex-shrink: 0;
}
.ss-fakta { display: flex; gap: 1.6rem; margin-top: 2.2rem; }
.ss-fakta div { font-size: calc(0.9rem * var(--yt-textskala)); color: #5c5876; }
.ss-fakta strong { display: block; font-size: 1.6rem; color: var(--text-strong); font-weight: 800; line-height: 1.2; }

.ss-kollage { position: relative; height: min(540px, 62vh); }
.ss-kollage__bild {
  position: absolute;
  margin: 0;
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(43, 37, 81, 0.16);
}
.ss-kollage__bild img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ss-kollage__bild--1 { width: 64%; left: 0; top: 2%; transform: rotate(-3deg); z-index: 2; }
.ss-kollage__bild--2 { width: 56%; right: 0; top: 30%; transform: rotate(2.5deg); z-index: 3; }
.ss-kollage__bild--3 { width: 50%; left: 10%; bottom: 0; transform: rotate(-1deg); z-index: 1; }
.ss-kollage figcaption {
  position: absolute;
  left: 18px; bottom: 18px;
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-strong);
  box-shadow: 0 4px 12px rgba(43, 37, 81, 0.12);
}

.ss-nedat {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0.5rem 0 1.5rem;
  background: none;
  border: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  font: inherit;
  font-size: calc(0.9rem * var(--yt-textskala));
  font-weight: 600;
  color: #5c5876;
  cursor: pointer;
}
.ss-nedat i { font-style: normal; font-size: 1.2rem; animation: ss-gunga 1.8s ease-in-out infinite; }
.ss-nedat:hover { color: var(--dip-blue); }
.ss-nedat:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
@keyframes ss-gunga { 50% { transform: translateY(5px); } }

.ss-omraden { padding: 1rem 0 3.5rem; scroll-margin-top: 1rem; }
.ss-omraden__rubrik { font-size: 1.7rem; margin: 0 0 0.3rem; color: var(--text-strong); }
.ss-omraden__ingress { color: #5c5876; margin: 0 0 1.6rem; font-size: calc(1rem * var(--yt-textskala)); }
.ss-kort-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ss-kort {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 2px solid #ece9f8;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ss-kort:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(43, 37, 81, 0.12); border-color: var(--katfarg); }
.ss-kort:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }
.ss-kort__bild { display: block; aspect-ratio: 16 / 9; background: #fff; }
.ss-kort__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-kort__band { display: block; height: 6px; background: var(--katfarg); }
.ss-kort__inne { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem 1.2rem; }
.ss-kort__namn { font-size: calc(1.15rem * var(--yt-textskala)); font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.ss-kort__text { color: #5c5876; font-size: calc(0.92rem * var(--yt-textskala)); line-height: 1.45; }
.ss-kort__antal { font-weight: 800; font-size: calc(0.82rem * var(--yt-textskala)); color: var(--katfarg); margin-top: 0.3rem; }

@media (prefers-reduced-motion: reduce) {
  .ss-nedat i { animation: none; }
  .ss-start, .ss-kort { transition: none; }
  .ss-start:hover, .ss-kort:hover { transform: none; }
}
@media (max-width: 1000px) {
  .ss-kort-rad { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ss-hero { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding-top: 1.5rem; }
  .ss-kollage { height: 58vw; max-height: 420px; }
}
@media (max-width: 560px) {
  .ys-startsida .vy-mitt { padding: 0; }
  .ss-topp__titel { display: none; }
  .ss-start { width: 100%; justify-content: center; }
  .ss-kort-rad { grid-template-columns: 1fr; }
  .ss-kollage { height: 66vw; }
}

/* -------------------------------------------------------------------------
   Rekommenderat för dig — ur välkomstens svar — och framsteg per område.
   Rekommendationen ersätter startknappen när välkomsten är klar och bär
   modulens områdesfärg, så att den hänger ihop med kortet längre ned.
   (Anton 2026-09-23)
   ------------------------------------------------------------------------- */
.ss-rek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 30rem;
  background: #fff;
  border: 2px solid var(--katfarg-ljus);
  border-left: 6px solid var(--katfarg);
  border-radius: 18px;
  padding: 1.1rem 1.3rem 1.3rem;
  box-shadow: 0 12px 32px rgba(43, 37, 81, 0.1);
}
.ss-rek__etikett {
  font-size: calc(0.75rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--katfarg);
}
.ss-rek__titel { font-size: calc(1.35rem * var(--yt-textskala)); line-height: 1.25; color: var(--text-strong); }
.ss-rek__varfor { font-size: calc(0.95rem * var(--yt-textskala)); color: #5c5876; margin-bottom: 0.7rem; }
.ss-start--rek { background: var(--katfarg); box-shadow: 0 10px 24px rgba(43, 37, 81, 0.2); }
.ss-start--rek:hover { box-shadow: 0 14px 30px rgba(43, 37, 81, 0.26); }
.ss-lank {
  margin-top: 0.9rem;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font: inherit;
  font-size: calc(0.92rem * var(--yt-textskala));
  font-weight: 700;
  color: #5c5876;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ss-lank:hover { color: var(--dip-blue); }
.ss-lank:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; border-radius: 4px; }

/* Märket på områdets bild. */
.ss-kort__bild { position: relative; }
.ss-kort__rek {
  position: absolute;
  left: 10px; top: 10px;
  background: var(--katfarg);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(43, 37, 81, 0.2);
}

/* Framsteg per område. Stapeln trycks mot kortets nederkant, så att den
   hamnar på samma höjd på alla fyra korten. */
.ss-kort { height: 100%; }
.ss-kort__inne { flex: 1 1 auto; }
.ss-kort__framsteg { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 0.6rem; }
.ss-kort__bana { flex: 1 1 auto; height: 8px; border-radius: 999px; background: #eeebf8; overflow: hidden; }
.ss-kort__fyll { display: block; height: 100%; border-radius: 999px; background: var(--katfarg); }
.ss-kort__procent { font-size: calc(0.8rem * var(--yt-textskala)); font-weight: 800; color: var(--katfarg); white-space: nowrap; }

/* Märket på modulkortet i området och i modulens rubrik. */
.modkort__rek {
  align-self: flex-start;
  display: inline-block;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  margin: 0.1rem 0 0.2rem;
}
.tl-rek {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}