/* =========================================================================
   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);
}

/* Mittzonen är <main> med tabindex -1 för hopplänken; ingen ram när den får fokus. */
.vy-mitt:focus { outline: none; }

.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;
}

.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-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". */
/* Den lilla lyssnaknappen (kan-mål, resultatsidans listor) är diskret:
   vit med tunn kant och blå ikon. Den lila fyllningen stack ut för mycket.
   (Anton 2026-09-24) */
.lyssna-knapp--liten {
  width: 40px; height: 40px; flex: none;
  background: #fff; color: var(--dip-blue);
  border: 2px solid var(--dip-lavendel);
}
.lyssna-knapp--liten:hover { border-color: var(--dip-blue); background: #f5f3ff; }
.lyssna-knapp--liten.is-playing { background: var(--dip-blue); color: #fff; border-color: var(--dip-blue); }
.lyssna-knapp--liten svg { width: 20px; height: 20px; }
.lyssna-knapp.is-playing { box-shadow: 0 0 0 5px rgba(79, 84, 179, 0.28); }
@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;
}

/* -------------------------------------------------------------------------
   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;
}

/* Textläge: när ljudet är avstängt visas repliken som text i stället. */

/* -------------------------------------------------------------------------
   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 ligger i mittzonen, direkt under svarsalternativen. */
.vy-mitt > .foljd { width: 100%; margin-top: 0.9rem; text-align: left; }
.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. */

/* 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-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; }

/* 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; }

/* 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 .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;
}
/* Tipset: utan etikett, mindre och grått under en tunn linje, så att det
   syns att raden inte är själva betydelsen. (Granskningen, Anton 2026-10-19) */
.flipkort__tips {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--dip-lavendel);
  font-size: calc(0.95rem * var(--yt-textskala));
  line-height: 1.5;
  font-weight: 500;
  color: #5e5a72;
}
.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; }
/* Knappen under ordkortet (granskningen 2026-10-19). */
.flipkort-vandknapp { display: inline-flex; align-items: center; gap: 0.45rem; align-self: center; margin: 0.2rem auto 0; min-height: 44px; }
.flipkort-vandknapp__ikon { display: inline-flex; }
.flipkort-vandknapp__ikon svg { width: 20px; height: 20px; }
/* Påminnelsen när man trycker på Nästa innan kortet är vänt. */
.flipkort-paminnelse { margin: 0.3rem auto 0; padding: 0.45rem 0.9rem; border-radius: 12px; background: #fdf1dc; border: 2px solid #f0b85a; color: var(--text-strong); font-weight: 700; font-size: calc(0.98rem * var(--yt-textskala)); text-align: center; max-width: 26rem; }
@keyframes ys-vandpuls { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 84, 179, 0.45); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(79, 84, 179, 0); } }
.flipkort-vandknapp.ar-puls { animation: ys-vandpuls 0.75s ease-in-out 2; }
/* Dialog efter ett fel svar: det andra svaret pulserar (granskningen 2026-10-19). */
@keyframes ys-andrapuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0.45); border-color: var(--modulfarg, var(--dip-blue)); } 50% { box-shadow: 0 0 0 9px rgba(79, 84, 179, 0); } }
.ys-alt.ar-andra-puls { border-color: var(--modulfarg, var(--dip-blue)); animation: ys-andrapuls 0.9s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .ys-alt.ar-andra-puls { animation: none; } }
@media (prefers-reduced-motion: reduce) { .flipkort-vandknapp.ar-puls { animation: none; outline: 3px solid var(--dip-blue); } }
.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; }

/* Ordkort med bild. Sidorna ligger absolut, så kortets höjd måste sättas:
   bildytan plus fältet med ordet. Bildytan krymper på låga skärmar så att
   knapparna under kortet syns utan att man scrollar. (Anton 2026-09-23) */
.flipkort--bild {
  /* Höjden följer också bredden: en 16:9-bild i ett smalt mobilkort är
     inte högre än ungefär halva bredden, resten blev bara tom yta. */
  --ordkort-bild: clamp(6rem, min(calc(100vh - 36rem), 42vw), 13rem);
  --yt-kort-hojd: calc(var(--ordkort-bild) + 6.6rem);
}
/* Ramen får inte krympa i mittzonens flex: då klipper dess overflow av
   kortets underkant på låga skärmar. */
.flipkort-ram { flex-shrink: 0; }
.flipkort--bild .flipkort__fram {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  overflow: hidden;
}
.flipkort__bild {
  display: block;
  width: 100%;
  height: var(--ordkort-bild);
  /* Ett långt ord som bryts på två rader tar sin plats från bilden, inte
     från kortets underkant. */
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  background: #fff;
  padding: 0.5rem 1rem 0.25rem;
  box-sizing: border-box;
  /* Vitt mot den ljusa sidbakgrunden flyter ihop utan en kant. */
  border: 2px solid var(--dip-lavendel);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.flipkort__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flipkort__symbol svg { height: 78%; width: auto; }
.flipkort__band {
  flex: none;
  min-height: 5.6rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 1rem;
}
.flipkort--bild .flipkort__fram .flipkort__ord {
  font-size: calc(1.7rem * var(--yt-textskala));
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: normal;
}
@media (max-width: 30rem) {
  .flipkort--bild .flipkort__fram .flipkort__ord { font-size: calc(1.4rem * var(--yt-textskala)); }
}

/* ---- 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);
}
@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) --------------------- */

/* 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-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. */

/* -------------------------------------------------------------------------
   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__tips { display: block; font-size: calc(0.92rem * var(--yt-textskala)); color: #6b6880; line-height: 1.5; margin-top: 2px; }
.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; }
/* Missat i snabbtestet eller markerat Öva mer (granskningen 2026-10-19). */
.ordlista__status.is-ova { background: #fff1d1; color: #855700; white-space: nowrap; }
.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__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));
  /* #8580a3 gav kontrasten 3,7:1 mot vitt; kravet är 4,5:1. (Anton 2026-10-05) */
  color: #6b6690;
  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; }

}

@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; }
}

/* -------------------------------------------------------------------------
   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; }
/* På en vanlig laptopskärm (runt 900 px hög) hamnade "Nästa modul" halvt
   bakom den klistrade foten och såg avklippt ut. Tätare rader gör att hela
   modulen får plats. (Anton 2026-09-23) */
@media (max-height: 1000px) and (min-width: 561px) {
  .tl-rad { padding-top: 0.62rem; padding-bottom: 0.62rem; }
  .tl-slut { padding-top: 0.7rem; }
  .ys-tidslinje .ys-fot { padding: 0.35rem 0 0.45rem; }
}
.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__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__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: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;
}

/* 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;
}

/* ---- kategorispåret: startknappen och avdelaren ---- */

/* -------------------------------------------------------------------------
   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(5rem, 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: 1fr 1.1fr;
  align-items: center;
  gap: 2.5rem;
  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); }
/* Ett långt ord får inte göra sidan bredare än mobilen: det klipps i
   sidled, och app.js krymper rubriken tills ordet får plats
   (passaLangaOrd). (Anton 2026-10-19) */
.ss-rubrik { overflow-x: clip; overflow-wrap: normal; }
/* Textkolumnen får inte växa med rubrikens längsta ord: då blev hela
   startsidan 439 px bred på en 375 px mobil (modul 14). */
.ss-hero__text { min-width: 0; }
.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; }

/* Höjden följer bredden, så att överlappet mellan bilderna blir detsamma
   på alla skärmar. */
.ss-kollage { position: relative; aspect-ratio: 1 / 1; }
.ss-kollage__bild {
  --vrid: 0deg;
  position: absolute;
  margin: 0;
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(43, 37, 81, 0.16);
  transform: rotate(var(--vrid));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s ease;
}
.ss-kollage__bild img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* Tre lika stora bilder i sicksack som överlappar varandra lite i
   hörnen. Mittenbildens etikett står till höger, annars hamnar den under
   bild 3. (Anton 2026-09-23) */
.ss-kollage__bild--1 { --vrid: -2.5deg; width: 64%; left: 0; top: 0; z-index: 1; }
.ss-kollage__bild--2 { --vrid: 2deg; width: 64%; right: 0; top: 30%; z-index: 2; }
.ss-kollage__bild--3 { --vrid: -1.5deg; width: 64%; left: 3%; bottom: 0; z-index: 3; }
.ss-kollage .ss-kollage__bild--2 figcaption { left: auto; right: 18px; }
/* Musen över en bild: den rätar upp sig, lyfter och lägger sig överst.
   Bara med mus (inte vid tryck på pekskärm) och inte för den som bett
   om mindre rörelse. (Anton 2026-09-23) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ss-kollage__bild:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.04);
    box-shadow: 0 28px 60px rgba(43, 37, 81, 0.24);
    z-index: 5;
  }
}
.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 { max-width: 34rem; }
}
@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; }
}

/* -------------------------------------------------------------------------
   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-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;
}

/* -------------------------------------------------------------------------
   Rättelser efter feedback 2026-09-23.
   ------------------------------------------------------------------------- */
/* Lyssna och välj: repliken dold tills man svarat. */
.replik__text--dold { display: none; }
.replik__visa {
  align-self: flex-start;
  margin-top: 0.35rem;
  background: none;
  border: 0;
  padding: 0.2rem 0;
  font: inherit;
  font-size: calc(0.92rem * var(--yt-textskala));
  font-weight: 700;
  color: var(--dip-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.replik__visa:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; border-radius: 4px; }

/* Tipsbubblan ovanför ordet när den annars hade täckt ett svar. */
.ordtips--ovan { padding-top: 0; padding-bottom: 9px; }
.ordtips--ovan .ordtips__pil {
  top: auto;
  bottom: 0;
  border-bottom: 0;
  border-top: 9px solid var(--dip-blue);
}

/* Resultatsidan: rätt på första försöket, under huvudbeskedet. */
.ys-resultat__forsta {
  margin: 0.2rem 0 0.4rem;
  font-size: calc(1rem * var(--yt-textskala));
  color: #524f61;
}

/* Rätt ordning: långa rubriker ska radbrytas, inte skjuta ut åt höger.
   "(situation/bakgrund/…)" saknar mellanslag och bröts aldrig. */
.sortering__situation { min-width: 0; }
.sortering__situation-rubrik { overflow-wrap: anywhere; }

/* Övningarna börjar överkant i stället för att centreras. När beskedet
   "Bra gjort!"/"Nästan!" eller följden dök upp krympte mittzonen, och med
   centrering flyttade sig hela innehållet ca 40 px. Nu tar beskedet bara
   luft underifrån. */
.view.ovning .vy-mitt {
  justify-content: flex-start;
  padding-top: clamp(0.75rem, 5vh, 3rem);
}

/* =========================================================================
   Helhetsgranskningen 2026-09-23, design (punkt 22–26). (Anton 2026-09-23)
   ========================================================================= */

/* 22. Dator: knapparna står direkt under övningen i stället för längst ned
   på skärmen, med ett tomt fält emellan. Blir innehållet högre än skärmen
   krymper mittzonen och scrollar som förut. I mobilen ligger knapparna
   kvar i botten, där tummen når dem. */
@media (min-width: 1024px) {
  .view.ovning > .vy-mitt { flex: 0 1 auto; }
  .view.ovning > .ys-handlingsrad { margin-bottom: auto; }
  /* 57. Reserverad plats för återkopplingen, så att knapparna står stilla
     när "Bra gjort!" eller "Nästan!" dyker upp. */
  .view.ovning > .ys-feedback-plats { min-height: 6rem; }
  /* Resultatsidan följer samma princip: knappen direkt under innehållet. */
  .view.ys-resultat > .vy-mitt { flex: 0 1 auto; }
  .view.ys-resultat > .ys-handlingsrad { margin-bottom: auto; }
}
.ys-feedback-plats { width: 100%; max-width: var(--yt-innehall-bredd); margin: 0 auto; }
.ys-feedback-plats > .ys-feedback { margin-top: 0.6rem; }

/* 23. Mobil: knapptexterna bryts inte, och "Så gör du" blir en ikon i
   topraden i stället för att ta en egen rad. */
.ys-handlingsrad .dip-btn { white-space: nowrap; }
@media (max-width: 560px) {
  .ys-topp { flex-wrap: nowrap; }
  .ys-topp__hjalp { padding: 0.45rem; border-radius: 999px; }
  .ys-topp__hjalp span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ys-raknare { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; overflow: hidden; }
  .ys-raknare__prick { flex: none; }
  .ys-handlingsrad .dip-btn { padding-left: 1.05em; padding-right: 1.05em; }
}

/* 24. Välkomsten: större porträtt, repliken i en pratbubbla och mjuka
   former i profilfärgerna i bakgrunden. */
.ys-valkomst {
  background:
    radial-gradient(circle at 88% 12%, rgba(160, 104, 243, 0.14), rgba(160, 104, 243, 0) 34rem),
    radial-gradient(circle at 8% 92%, rgba(99, 201, 168, 0.14), rgba(99, 201, 168, 0) 30rem),
    var(--bg, #f8f7fb);
}
.ys-valkomst .vy-mitt { gap: 1.6rem; max-width: 38rem; }
.valk-malin { width: 168px; height: 168px; }
.valk-mening {
  position: relative;
  background: var(--surface, #fff);
  border-radius: 24px;
  padding: 1.1rem 1.6rem;
  box-shadow: 0 14px 40px rgba(43, 37, 81, 0.10);
  max-width: 30ch;
  font-size: calc(1.7rem * var(--yt-textskala));
}
.valk-mening::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 24px;
  height: 24px;
  background: var(--surface, #fff);
  border-radius: 5px;
  transform: translateX(-50%) rotate(45deg);
}
@media (max-width: 620px) {
  .valk-malin { width: 120px; height: 120px; }
  .valk-mening { font-size: calc(1.35rem * var(--yt-textskala)); padding: 0.9rem 1.1rem; }
}

/* 25. Områdessidan: korten två och två på stor skärm. */
/* Vyn ärver max 780 px från .ys-start i yrkessvenska.css; områdessidan
   får bli bredare så att två kort får plats bredvid varandra. */
.modkort--last .modkort__last { font-weight: 700; }

/* 26. Omgången i Para ihop står som en liten rad under rubriken. */
.ovning-omgang { margin-top: -0.6rem; text-align: center; color: #5c5876; font-size: 0.9rem; }

/* =========================================================================
   Andra granskningen 2026-09-24. (Anton 2026-09-24)
   ========================================================================= */

/* 60. "Så gör du" mitt i en övning: bladet ligger som ett lager ovanpå vyn. */
.ys-forsattsblad--lager {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--bg, #f8f7fb);
}

/* 65. Resultatsidan: liten väg tillbaka till modulen under huvudknappen. */
.ys-resultat__till {
  background: none;
  border: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: var(--dip-blue);
  text-decoration: underline;
  cursor: pointer;
  border-radius: 8px;
}
.ys-resultat__till:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

/* 89. Högkontrastläge: markeringar som bara byggde på färg får en kant. */
@media (forced-colors: active) {
  .matchning__ord.is-vald, .matchning__betydelse.is-vald { outline: 3px solid Highlight; outline-offset: 2px; }
  .matchning__ord.ar-klar, .matchning__betydelse.ar-klar { border-style: double; }
  .matchning__ord.ar-fel, .matchning__betydelse.ar-fel { border-style: dashed; }
  .sortering__lista.ar-ratt .sortering__rad { border-style: double; }
  .ys-alt.is-vald { outline: 3px solid Highlight; outline-offset: 2px; }
  .ss-kollage__bild, .modkort, .ss-kort { border: 1px solid CanvasText; }
}

/* 90. Utskrift: hela vyn på papperet, inte bara en skärm. */
@media print {
  .view { height: auto; }
  .vy-mitt { overflow: visible; }
  .ys-handlingsrad, .ys-topp__hjalp, .ys-fot, .ys-borja-om { display: none; }
}

/* 64. På mycket låga skärmar (LMS-ram, 900×650) döljs scenbilden i Dialog,
   annars hamnar det andra svaret under knapparna. Texten och ljudet bär
   situationen ändå. (Anton 2026-09-24) */
@media (max-height: 680px) and (min-width: 561px) {
  .scen__bild { display: none; }
  .lyssna-knapp--stor { width: 64px; height: 64px; }
}

/* =========================================================================
   Kan-mål, jobbuppgift, eftermått, dialogens andra försök och områdets
   huvud. (Anton 2026-09-24)
   ========================================================================= */


/* Kan-målen i tidslinjen */
.tl-mal {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid #ece9f8;
  border-left: 6px solid var(--katfarg, var(--dip-blue));
  border-radius: 16px;
  padding: 1rem 1.2rem 1.1rem;
  margin-bottom: 0.6rem;
  box-sizing: border-box;
}
.tl-mal__topp, .res-mal__topp { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.4rem; }
.tl-mal__rubrik, .res-mal__rubrik, .res-jobb__rubrik, .res-efter__fraga {
  margin: 0;
  font-size: calc(1.02rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
}
.tl-mal__lista { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: 0.25rem; font-size: calc(1rem * var(--yt-textskala)); color: var(--text-strong); }
.tl-mal__lista li::marker { color: var(--katfarg, var(--dip-blue)); }

/* Kvitto, jobbuppgift och eftermått på resultatsidan */
.res-mal, .res-jobb, .res-efter {
  width: 100%;
  max-width: 34rem;
  margin: 0.9rem auto 0;
  text-align: left;
  background: #fff;
  border: 2px solid #ece9f8;
  border-radius: 16px;
  padding: 1rem 1.2rem 1.1rem;
  box-sizing: border-box;
}
.res-mal__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.res-mal__lista li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: calc(1rem * var(--yt-textskala)); color: var(--text-strong); }
.res-mal__bock { display: inline-flex; width: 22px; height: 22px; flex: none; color: var(--dip-turkos, #63c9a8); }
.res-mal__bock svg { width: 22px; height: 22px; }
.res-jobb { border-left: 6px solid var(--dip-turkos, #63c9a8); }
.res-jobb__text { margin: 0.2rem 0 0.5rem; font-size: calc(1.05rem * var(--yt-textskala)); line-height: 1.55; color: var(--text-strong); }
.res-jobb__slut { margin: 0; font-weight: 700; color: #5c5876; font-size: 0.95rem; }
.res-efter__svar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.res-efter__knapp {
  flex: 1 1 8rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--dip-lavendel);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}
.res-efter__knapp:hover { border-color: var(--dip-blue); }
.res-efter__knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.res-efter__tack { margin: 0.5rem 0 0; font-weight: 700; color: var(--dip-blue); }

/* Startsidans rekommendationskort: första målet */

/* Dialog: uppmaningen att prova det andra svaret */
.foljd__prova { display: block; margin-top: 0.4rem; font-weight: 700; color: var(--dip-blue); }

/* =========================================================================
   Områdessidan, skiss A: färgfält och väg. (Anton 2026-09-24)
   ========================================================================= */
.view.ys-omrade { max-width: none; padding-left: 0; padding-right: 0; }
.ys-omrade .vy-mitt { max-width: none; padding: 0; gap: 0; }
.omr-topp {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 76rem; width: 100%; margin: 0 auto; padding: 0.6rem var(--yt-sidmarginal) 0;
}
.omr-topp__kurs { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #5c5876; }

.omr-falt {
  position: relative;
  width: 100%;
  margin-top: 0.8rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--katfarg-ljus) 55%, #fff) 0%, var(--katfarg-ljus) 60%, color-mix(in srgb, var(--katfarg-ljus) 40%, #fff) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, #fff)) {
  .omr-falt { background: var(--katfarg-ljus); }
}
.omr-falt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px;
  background: var(--bg, #f8f7fb);
  clip-path: ellipse(60% 100% at 50% 100%);
}
.omr-hero {
  position: relative; z-index: 1;
  max-width: 76rem; margin: 0 auto;
  padding: 2.4rem var(--yt-sidmarginal) 5rem;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 2rem; align-items: center;
}
.omr-hero--utan-bild { grid-template-columns: 1fr; }
.omr-hero__text { text-align: left; }
.omr-kicker { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--katfarg); }
.view.ys-omrade .omr-rubrik { margin: 0.4rem 0 0.8rem; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-strong); }
.omr-ingress { margin: 0 0 1.4rem; font-size: calc(1.1rem * var(--yt-textskala)); line-height: 1.55; color: #5c5876; max-width: 30rem; }
.omr-status { display: flex; align-items: center; gap: 1.1rem; }
.omr-ring {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--katfarg) 0 var(--procent, 0%), #fff var(--procent, 0%) 100%);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(43, 37, 81, 0.12);
}
.omr-ring b { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1rem; color: var(--katfarg); }
.omr-status__text { margin: 0; color: #5c5876; font-size: 0.95rem; line-height: 1.5; }
.omr-status__text strong { display: block; color: var(--text-strong); font-size: 1.05rem; }
.omr-bild { position: relative; }
.omr-bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain;
  background: #fff; border-radius: 22px; padding: 8px; box-sizing: border-box;
  box-shadow: 0 30px 70px rgba(43, 37, 81, 0.2);
  transform: rotate(1.5deg) translateY(1rem);
}
.omr-bild__etikett {
  position: absolute; left: -0.6rem; bottom: -0.2rem;
  background: #fff; border-radius: 999px; padding: 0.45rem 1rem;
  font-weight: 700; font-size: 0.9rem; color: var(--text-strong);
  box-shadow: 0 8px 20px rgba(43, 37, 81, 0.14);
}

.omr-vag { max-width: 76rem; width: 100%; margin: 0 auto; padding: 1.2rem var(--yt-sidmarginal) 3rem; text-align: left; }
.omr-vag__rubrik { margin: 0 0 1.6rem; font-size: 1.2rem; font-weight: 600; color: #5c5876; }
.omr-steg { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
.omr-steg--rad { grid-template-columns: repeat(4, 1fr); }
.omr-steg--rad::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 26px;
  border-top: 3px dashed #d9d4f2; z-index: 0;
}
.omr-modul {
  position: relative; z-index: 1;
  background: #fff; border: 2px solid #ece9f8; border-radius: 22px;
  padding: 0 1.2rem 1.3rem;
  display: flex; flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.omr-modul:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(43, 37, 81, 0.12); }
.omr-nod {
  width: 52px; height: 52px; border-radius: 50%; align-self: center;
  background: var(--katfarg); color: #fff; font-weight: 800; font-size: 1.15rem;
  display: grid; place-items: center;
  margin: -14px 0 0.9rem;
  box-shadow: 0 0 0 6px var(--bg, #f8f7fb);
}
.omr-modul--last .omr-nod { background: #d9d4f2; color: #7a76a0; }
.omr-thumb {
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--katfarg-ljus); margin-bottom: 0.9rem;
  display: grid; place-items: center; color: var(--katfarg);
}
.omr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omr-thumb svg { width: 34px; height: 34px; }
.omr-modul--last .omr-thumb { background: #f0eef8; color: #b5b0cc; }
.omr-rek { align-self: flex-start; margin-bottom: 0.4rem; background: var(--katfarg); }
.omr-modul__titel { margin: 0 0 0.35rem; font-size: calc(1.1rem * var(--yt-textskala)); line-height: 1.25; color: var(--text-strong); }
.omr-modul--last .omr-modul__titel { color: #6b6880; }
.omr-modul__rad { margin: 0 0 0.9rem; color: #5c5876; font-size: 0.9rem; line-height: 1.45; flex: 1 1 auto; }
.omr-bar { height: 6px; background: var(--katfarg-ljus); border-radius: 3px; overflow: hidden; margin-bottom: 0.9rem; }
.omr-bar i { display: block; height: 100%; background: var(--katfarg); border-radius: 3px; }
.omr-knapp {
  align-self: flex-start; border: 0; border-radius: 999px;
  background: var(--katfarg); color: #fff; font: inherit; font-weight: 700;
  padding: 0.65rem 1.3rem; cursor: pointer;
}
.omr-knapp:hover { filter: brightness(1.08); }
.omr-knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }
.omr-modul--last { border-style: dashed; background: #fbfaff; }
.omr-modul--last .modkort__last { align-self: flex-start; }
.ys-omrade .ys-fot { margin-top: 0; }

@media (max-width: 900px) {
  .omr-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-bottom: 4rem; }
  .omr-bild { order: -1; max-width: 26rem; }
  .omr-bild img { transform: none; }
  .omr-bild__etikett { display: none; }
  .omr-steg--rad { grid-template-columns: 1fr 1fr; }
  .omr-steg--rad::before { display: none; }
}
@media (max-width: 560px) {
  .omr-steg, .omr-steg--rad { grid-template-columns: 1fr; }
  .view.ys-omrade .omr-rubrik { font-size: 2rem; }
  .omr-topp__kurs { display: none; }
}

/* Rätt ordning: scenariot i situationsrutan. (Anton 2026-09-24) */
.sortering__scenario {
  display: block;
  margin: 0.5rem 0 0.6rem;
  font-size: calc(1.08rem * var(--yt-textskala));
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-strong);
}
.sortering__situation-text { display: block; }
.sortering__scenario + .sortering__situation-text { font-weight: 700; color: var(--dip-blue); }
.sortering__situation { position: relative; }
.sortering__situation:has(.sortering__lyssna) { padding-right: 3.6rem; }
.sortering__lyssna { position: absolute; top: 0.7rem; right: 0.7rem; }

/* =========================================================================
   Tillbakaknappen står på samma ställe i alla vyer: sidmarginalen från
   vänster och ungefär 0,4 rem från toppen, som i övningarna. Förut låg den
   på 24, 136 och 354 px beroende på vy. (Anton 2026-09-24)
   ========================================================================= */
.omr-topp { max-width: none; padding-top: 0.3rem; }
.view.ys-omrade { padding-top: 0; }
.view.ys-tidslinje { padding-top: 0; }
.ys-tidslinje .tl-topp {
  max-width: none;
  width: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.6rem;
}
.ys-tidslinje .tl-topp .tl-topp__titel { max-width: 40rem; }
.valk-meny { top: 0.45rem; }
.ys-ordlista .ys-topp, .view.ovning .ys-topp { padding-top: 0.3rem; }
.view.ys-tidslinje { max-width: none; }
.ys-tidslinje .tl-topp { align-items: flex-start; }
.ys-tidslinje .tl-topp .ys-tillbaka, .ys-tidslinje .tl-topp .tl-modul__ordlista { margin-top: 0.15rem; }

/* Dator: blir en övning högre än skärmen växer vyn och sidan scrollar
   som en vanlig webbsida, med knapparna klistrade i botten. Förut
   scrollade mittzonen inuti sig själv, och det syntes inte att det fanns
   mer under kanten, till exempel den fjärde brickan i Rätt ordning.
   (Anton 2026-09-24) */
@media (min-width: 1024px) {
  .view.ovning, .view.ys-resultat { height: auto; min-height: 100vh; min-height: 100dvh; }
  .view.ovning > .vy-mitt, .view.ys-resultat > .vy-mitt { overflow: visible; }
}
/* Modulens topprad över hela bredden: tillbaka till vänster, titeln mitt
   på sidan, Ordlistan längst till höger. */
.ys-tidslinje .tl-topp {
  display: grid;
  grid-template-columns: 1fr minmax(0, 40rem) 1fr;
  align-items: start;
  gap: 1rem;
}
.ys-tidslinje .tl-topp .ys-tillbaka { justify-self: start; }
.ys-tidslinje .tl-topp .tl-topp__titel { justify-self: center; text-align: center; max-width: 40rem; width: 100%; }
.ys-tidslinje .tl-topp .tl-modul__ordlista { justify-self: end; }
@media (max-width: 700px) {
  /* Två rader: knapparna överst, titeln under på egen rad. */
  .ys-tidslinje .tl-topp { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .ys-tidslinje .tl-topp .ys-tillbaka { grid-row: 1; grid-column: 1; }
  .ys-tidslinje .tl-topp .tl-modul__ordlista { grid-row: 1; grid-column: 2; }
  .ys-tidslinje .tl-topp .tl-topp__titel { grid-row: 2; grid-column: 1 / -1; justify-self: start; text-align: left; max-width: none; }
}

/* Modulens sidfot är inte längre klistrad: med kan-målen överst täckte
   den "Nästa modul" på en 900 px skärm. Sidan är kort nog att scrolla.
   (Anton 2026-09-24) */
.ys-tidslinje .ys-fot { position: static; }

/* Resultatsidan: "Nästa: {moment}" kan vara lång och sprack ut ur knappen
   på mobilen. Texten får brytas, och på smala skärmar staplas knapparna
   i full bredd med Nästa överst. (Anton 2026-09-24) */
/* På en rad som i övningarna; mobilen har kortare texter (app.js). Bara
   på de smalaste skärmarna får texten brytas. (Anton 2026-10-05) */
.view.ys-resultat > .ys-handlingsrad .dip-btn { white-space: nowrap; text-align: center; line-height: 1.25; }
@media (max-width: 359px) { .view.ys-resultat > .ys-handlingsrad .dip-btn { white-space: normal; } }
/* Bara på riktigt smala skärmar: annars står knapparna som i övningarna,
   bredvid varandra med huvudknappen till höger. (Anton 2026-10-05) */
@media (max-width: 359px) {
  .view.ys-resultat > .ys-handlingsrad { flex-direction: column-reverse; align-items: stretch; }
  .view.ys-resultat > .ys-handlingsrad .dip-btn { width: 100%; margin: 0; }
}

/* Rätt ordning på mobilen: bilden bredvid scenariot tryckte ihop texten
   till en smal spalt med ett par ord per rad, och stegen hamnade under
   skärmkanten. Under 600 px skippas bilden och texten får hela bredden.
   (Anton 2026-09-24) */
@media (max-width: 600px) {
  .scen--liten { padding: 0; gap: 0; }
  .scen--liten .scen__bild { display: none; }
  .scen--liten > .sortering__situation { padding: 0.8rem 1.1rem; }
  .scen--liten > .sortering__situation:has(.sortering__lyssna) { padding-right: 3.6rem; }
  .sortering__scenario { margin: 0.4rem 0 0.5rem; line-height: 1.45; }
  .sortering__scenario .ys-ord { padding-left: 0.04em; padding-right: 0.04em; }
}

/* Handlingsraden fick width: 100 % från yrkessvenska.css men sticker ut
   med negativa marginaler åt båda håll. Den växte bara åt vänster, så
   alla knappar stod en sidmarginal för långt till vänster: "Kontrollera"
   slutade 48 px före innehållets högerkant på mobilen. Bredden räknar nu
   med marginalerna. (Anton 2026-09-24) */
.view > .ys-handlingsrad { width: calc(100% + 2 * var(--yt-sidmarginal)); max-width: none; }
.view > .ys-handlingsrad {
  /* Procent i padding räknas mot vyns innehållsbredd, inte radens egen
     bredd, så radens två sidmarginaler läggs till här. Då hamnar knapparna
     exakt i linje med mittspalten även på datorn. */
  padding-left: max(var(--yt-sidmarginal), calc((100% + 2 * var(--yt-sidmarginal) - var(--yt-innehall-bredd)) / 2));
  padding-right: max(var(--yt-sidmarginal), calc((100% + 2 * var(--yt-sidmarginal) - var(--yt-innehall-bredd)) / 2));
}

/* Lyssnaknappen i rutans hörn, samma i alla övningar (se hornLyssna i
   app.js). Rutor med bara text får luft till höger så att knappen inte
   ligger över texten; i Dialog med bild sitter den över bildens hörn.
   (Anton 2026-09-24) */
.har-horn { position: relative; }
.lyssna-horn { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 44px; height: 44px; }
.lyssna-horn svg { width: 21px; height: 21px; }
.situation.har-horn, .replik__bubbla.har-horn { padding-right: 3.6rem; }
.replik__bubbla .lyssna-horn { top: 0.55rem; right: 0.55rem; }
/* Ordkort: högtalarna ligger i ett lager över kortet (ramens luft är
   14/16 px) som roterar som kortet. Baksidans knapp står till vänster i
   lagret: när lagret vänts 180° hamnar den till höger, och dess egen
   rotation vänder ikonen rätt igen. */
.flipkort-horn {
  position: absolute; top: 14px; bottom: 14px; left: 16px; right: 16px;
  max-width: var(--yt-innehall-bredd); margin: 0 auto;
  perspective: 1200px; pointer-events: none; z-index: 2;
}
.flipkort-horn__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.flipkort-horn.ar-vand .flipkort-horn__inner { transform: rotateY(180deg); }
.flipkort-horn__knapp { pointer-events: auto; backface-visibility: hidden; top: 0.6rem; right: 0.6rem; }
/* Baksidans knappar är vända med transform. Regeln måste vinna över
   "@media (hover: none) .lyssna-knapp:hover { transform: none }" längre
   ned, annars nollställs vändningen efter ett tryck på pekskärm: hovern
   ligger kvar, knappen vänder ryggen till och försvinner (granskningen,
   mobil, Anton 2026-10-19). Därav .flipkort-horn framför, och bara
   transform här: placeringen sätts längre ned (knapparna bredvid
   varandra). */
.flipkort-horn__knapp--bak,
.flipkort-horn__knapp--bak:hover { left: 0.6rem; right: auto; }
.flipkort-horn .flipkort-horn__knapp--bak,
.flipkort-horn .flipkort-horn__knapp--bak:hover,
.flipkort-horn .flipkort-horn__knapp--bak:active,
.flipkort-horn .flipkort-horn__knapp--bak:focus { transform: rotateY(180deg); }
.flipkort-horn__knapp[aria-hidden="true"] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .flipkort-horn__inner { transition: none; }
}

/* =========================================================================
   Navigeringsknapparna syns som knappar: vit yta, tunn lavendelkant och
   rundade hörn, i alla vyer. Förut var de bara text med en pil, och en
   testare hittade inte vägen till en annan övning. Avsluta uppe till
   höger i övningarna. (Anton 2026-09-29)
   ========================================================================= */
.ys-tillbaka, .valk-meny {
  background: #fff;
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  padding: 0.4em 0.95em 0.4em 0.65em;
  color: var(--text-strong);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ys-tillbaka:hover, .valk-meny:hover { border-color: var(--dip-blue); background: #f5f3ff; color: var(--text-strong); }
.ys-tillbaka__kort { display: none; }
.ys-topp__avsluta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-weight: 700; font-size: 0.95rem;
  color: var(--text-strong);
  background: #fff;
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  padding: 0.4em 0.95em 0.4em 0.7em;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ys-topp__avsluta:hover { border-color: var(--dip-blue); background: #f5f3ff; }
.ys-topp__avsluta svg { width: 16px; height: 16px; }
.ys-topp__avsluta:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
.ys-topp { gap: 0.6rem; }
@media (max-width: 560px) {
  .ys-tillbaka__lang { display: none; }
  .ys-tillbaka__kort { display: inline; }
  .ys-topp .ys-tillbaka { padding: 0.4em 0.75em 0.4em 0.5em; }
  .ys-topp__avsluta { padding: 0.5rem; }
  .ys-topp__avsluta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .ys-topp__avsluta { display: none; } }
/* Modul · övning · antal på en rad. Det som inte får plats tar app.js
   bort (passaRaknare): först modulens namn, sedan övningens.
   (Granskningen, Anton 2026-10-19) */
.ys-topp .ys-raknare { white-space: nowrap; }

/* =========================================================================
   Förslaget efter välkomsten. (Anton 2026-09-29)
   ========================================================================= */
.view.ys-forslag { justify-content: flex-start; }
.ys-forslag .vy-mitt { justify-content: flex-start; }
.forslag__meny { align-self: flex-start; margin: 0.4rem 0 0; }
.forslag {
  width: 100%; max-width: 36rem; margin: 1.5rem auto 2rem;
  background: var(--surface);
  border: 2px solid var(--katfarg-ljus);
  border-top: 8px solid var(--katfarg);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.5rem;
}
.forslag__kicker { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--katfarg); }
.view.ys-forslag .forslag__rubrik { margin: 0 0 1rem; font-size: calc(1.6rem * var(--yt-textskala)); line-height: 1.2; color: var(--text-strong); }
.forslag__knappar { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.forslag__borja { background: var(--katfarg); border-color: var(--katfarg); }
@media (max-width: 560px) {
  .forslag { padding: 1.2rem 1.1rem; margin-top: 1rem; }
  .forslag__knappar { flex-direction: column; }
  .forslag__knappar .dip-btn { width: 100%; }
}

/* =========================================================================
   Din plan: numrerad väg på förslagssidan och startsidan. (Anton 2026-09-29)
   ========================================================================= */
.forslag__omfang { margin: -0.5rem 0 1rem; color: #524f61; font-weight: 700; }
.forslag__start { margin: 0.2rem 0 1.3rem; color: var(--text-strong); font-size: 0.95rem; }
.plan { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0; }
.plan__steg { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem; padding: 0.55rem 0.6rem 0.9rem 0; cursor: pointer; border-radius: 12px; }
.plan__steg:hover .plan__titel { text-decoration: underline; }
.plan__steg:not(:last-child)::after { content: ''; position: absolute; left: calc(1.2rem - 1px); top: 2.9rem; bottom: -0.1rem; width: 2px; background: var(--dip-lavendel); }
.plan__nod { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: #fff; color: var(--stegfarg); border: 2px solid var(--stegfarg); }
.plan__nod svg { width: 1.1rem; height: 1.1rem; }
.plan__steg.ar-klar .plan__nod { background: var(--stegfarg); color: #fff; }
.plan__steg.ar-nasta .plan__nod { background: var(--stegfarg); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--stegfarg) 22%, transparent); }
.plan__text { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.15rem; }
.plan__titel { font-size: calc(1.1rem * var(--yt-textskala)); color: var(--text-strong); }
.plan__tagg { align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stegfarg); }
.plan__varfor { font-size: 0.95rem; line-height: 1.4; color: #524f61; }
.ss-rek--plan .ss-rek__omfang { display: block; margin: 0.1rem 0 0.8rem; color: #524f61; font-size: 0.9rem; font-weight: 700; }
.ss-rek__plan .plan__steg { padding-bottom: 0.6rem; }
.ss-rek__plan .plan__steg:not(:last-child)::after { top: 2.8rem; }
.ss-rek__plan .plan__varfor { font-size: 0.88rem; }
.ss-rek__klar { margin: 0.4rem 0 0; font-weight: 700; color: var(--text-strong); }

/* Rubriken får fokus när sidan öppnas (skärmläsare), men den är ingen knapp och ska inte få en fokusram. */
.forslag__rubrik:focus { outline: none; }

/* Planens streck går från mitten av en cirkel till mitten av nästa och
   ligger bakom cirklarna, så att vägen blir obruten. Förut började det inne
   i cirkeln och slutade en bit ovanför nästa. Cirkelns mitt ligger
   0,55 rem (stegets luft) + 1,2 rem (halva cirkeln) från stegets topp.
   (Anton 2026-09-29) */
.plan__nod { position: relative; z-index: 1; }
.plan__steg:not(:last-child)::after,
.ss-rek__plan .plan__steg:not(:last-child)::after {
  top: 1.75rem;
  bottom: -1.75rem;
  z-index: 0;
}

/* =========================================================================
   Avsluta i alla vyer, uppe till höger. (Anton 2026-09-29)
   ========================================================================= */
.avsluta-rad { display: flex; justify-content: flex-end; width: 100%; padding-top: 0.3rem; }
.ys-forsattsblad > .avsluta-rad { padding: 0.3rem var(--yt-sidmarginal) 0; }
.ys-tidslinje .tl-topp .tl-topp__hoger { justify-self: end; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.15rem; }
.ys-tidslinje .tl-topp .tl-topp__hoger .tl-modul__ordlista { margin-top: 0; }
@media (max-width: 700px) {
  .ys-tidslinje .tl-topp .tl-topp__hoger { grid-row: 1; grid-column: 2; }
}
.valk-avsluta { position: absolute; right: var(--yt-sidmarginal); top: 0.45rem; z-index: 2; }
/* Försättsbladet centrerar sitt innehåll på höjden, så raden med Avsluta
   läggs fast högst upp i stället för i flödet. Ordlistans mittfält växer
   inte, så knappen skjuts ut till högerkanten. */
.ys-forsattsblad:not(.ys-forsattsblad--lager) { position: relative; }
.ys-forsattsblad > .avsluta-rad { position: absolute; top: 0; left: 0; right: 0; padding: 0.35rem var(--yt-sidmarginal) 0; }
.ys-ordlista .ys-topp .ys-topp__avsluta { margin-left: auto; }

/* Fortsätt där du slutade, på startsidan. (Anton 2026-09-29) */
.ss-fortsatt {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; max-width: 30rem;
  margin: 0 0 1rem; padding: 0.85rem 1.1rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--text-strong);
  background: #fff; border: 2px solid var(--katfarg-ljus); border-left: 6px solid var(--katfarg); border-radius: 14px;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.ss-fortsatt:hover { border-color: var(--katfarg); }
.ss-fortsatt > svg { flex: none; width: 2.4rem; height: 2.4rem; padding: 0.6rem; border-radius: 50%; background: var(--katfarg); color: #fff; }
.ss-fortsatt__text { display: flex; flex-direction: column; gap: 0.1rem; }
.ss-fortsatt__text b { font-size: calc(1.05rem * var(--yt-textskala)); }
.ss-fortsatt__text span { font-size: 0.92rem; color: #524f61; }
.ss-fortsatt:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

/* =========================================================================
   Sköldpaddan: spelar samma klipp i 75 % takt (Tal.LANGSAM). Den ser ut
   som högtalaren bredvid, vit med tunn kant, så att högtalaren fortfarande
   är det första man ser. I rutornas hörn står den under högtalaren, så att
   texten inte behöver mer luft till höger. (Anton 2026-10-02)
   ========================================================================= */
.lyssna-sakta svg { width: 23px; height: 23px; }
.lyssna-horn--sakta { top: calc(0.7rem + 52px); }
.replik__bubbla .lyssna-horn--sakta { top: calc(0.55rem + 52px); }
/* Rutan måste rymma båda knapparna även när texten bara är en rad. */
.har-sakta { min-height: calc(1.4rem + 96px); }
.replik__bubbla .har-sakta { min-height: calc(1.1rem + 96px); }
.scen.har-sakta { min-height: 0; }
.foljd.har-horn { position: relative; padding-right: 3.6rem; }
.flipkort-horn__knapp--sakta { top: calc(0.6rem + 52px); }

/* Högtalare och sköldpadda bredvid varandra (resultatsidan), eller under
   varandra i ett hörn (Rätt ordning). */
.lyssna-par { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }
.lyssna-par--stapel { flex-direction: column; gap: 8px; }
.sortering__situation:has(.lyssna-par--stapel) { min-height: calc(1.4rem + 96px); }

/* Ordlistan: högtalaren är ifylld, sköldpaddan vit bredvid. */
.ordlista__lyssna--sakta {
  background: #fff;
  color: var(--modulfarg, var(--dip-blue));
  border: 2px solid var(--dip-lavendel);
}
.ordlista__lyssna--sakta:hover { border-color: var(--modulfarg, var(--dip-blue)); background: #f5f3ff; }
.ordlista__lyssna--sakta.is-playing { background: var(--modulfarg, var(--dip-blue)); color: #fff; }
.ordlista__lyssna--sakta svg { width: 21px; height: 21px; }

/* Ordrutan (tryck på ett ord i en mening): ordet och sköldpaddan på en rad. */
.ordruta__rad { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.15rem; }
.ordruta__rad .ordruta__ord { margin-bottom: 0; }
.ordruta__sakta {
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.ordruta__sakta:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.ordruta__sakta.is-playing { background: #fff; color: var(--dip-morklila); border-color: #fff; }
.ordruta__sakta svg { width: 20px; height: 20px; }

/* =========================================================================
   Modulpaketets startsida (visaModulstart i app.js). Bygger på kursens
   startsida (.ss-*); här bara det som skiljer. (Anton 2026-10-02)
   ========================================================================= */
.ss-malin--knapp {
  font: inherit;
  text-align: left;
  background: #fff;
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ss-malin--knapp:hover { border-color: var(--katfarg, var(--dip-blue)); background: #f5f3ff; }
.ss-malin--knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 3px; }
.ss-malin--knapp > span { display: block; }
.ys-modulstart .ss-start { box-shadow: 0 10px 28px rgba(43, 37, 81, 0.22); }
.ys-modulstart .ms-mal { max-width: var(--yt-innehall-bredd); margin: 0.5rem auto 1.5rem; }

/* "Hoppa över" i modulens välkomst: en diskret textknapp under Fortsätt,
   synlig från början. (Anton 2026-10-02) */
.valk-hoppa {
  margin-top: 0.9rem;
  font: inherit; font-weight: 700; font-size: calc(0.95rem * var(--yt-textskala));
  color: #5c5876;
  background: none; border: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.valk-hoppa:hover { color: var(--text-strong); background: rgba(255, 255, 255, 0.7); }
.valk-hoppa:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }

/* Modulens startsida: "Du lär dig att" och målen med bockar under
   rubriken, i stället för rutan från modulsidan. Samma storlek och färg
   som startsidans ingress, bockarna i områdets färg. (Anton 2026-10-02) */
.ms-lar { max-width: 30rem; margin: 0 0 2rem; }
.ms-lar__etikett {
  margin: 0 0 0.55rem;
  font-weight: 800;
  font-size: calc(0.85rem * var(--yt-textskala));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.ms-lar__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ms-lar__lista li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: calc(1.15rem * var(--yt-textskala));
  line-height: 1.45;
  color: #4a4660;
}
.ms-lar__bock {
  flex: none;
  width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%;
  background: var(--katfarg-ljus, var(--dip-lavendel));
  color: var(--katfarg, var(--dip-blue));
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-lar__bock svg { width: 15px; height: 15px; }

/* Rätt ordning: plats för ordtipset under scenariot, så att bubblan inte
   täcker uppmaningen. Försvinner med bubblan. (Stefans test, Anton 2026-10-05) */
.sortering__situation.har-ordtips .sortering__situation-text { margin-top: 46px; }

/* Ledtråd om att mittzonen går att scrolla: en tonad kant med en pil
   längst ned, bara när det finns mer under kanten. På mobil hamnade
   brickor, svar och alternativ under kanten utan att något visade det.
   Klassen sätts av scrolltips() i app.js. (Stefans test, Anton 2026-10-05) */
.vy-mitt::after {
  content: '';
  flex: 0 0 auto;
  position: sticky;
  bottom: calc(-1 * var(--yt-gap-innehall));
  height: 44px;
  margin-top: calc(-44px - var(--yt-gap-innehall));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='%234f54b3'/%3E%3Cpath d='M8.5 11.5 14 17l5.5-5.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom 6px / 28px 28px no-repeat,
    linear-gradient(to bottom, rgba(248, 247, 251, 0), var(--bg) 75%);
}
.view.ovning > .vy-mitt.kan-scrolla-ned::after,
.view.ys-valkomst > .vy-mitt.kan-scrolla-ned::after,
.view.ys-resultat > .vy-mitt.kan-scrolla-ned::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vy-mitt::after { transition: none; } }

/* Dialog på låga mobilskärmar: bilden tog halva skärmen, och bara det
   första svaret syntes (iPhone 13 med adressfält, 664 px synlig höjd).
   Bilden krymper i stället för att döljas, eftersom den bär situationen.
   (Stefans test, Anton 2026-10-05) */
@media (max-width: 620px) and (max-height: 760px) {
  .scen__bild { max-height: 17vh; }
}
@media (max-width: 620px) and (max-height: 600px) {
  .scen__bild { max-height: 13vh; }
}


/* Välkomsten på mobil. Fråga 3 har fem svar, och på en iPhone 13 med
   adressfält (664 px) hamnade två under kanten, med Tillbaka ovanpå
   svaren. Tillbaka ligger nu i flödet under mittzonen, prickarna står
   överst (menyknappen de flyttades undan för finns inte längre), och
   porträtt, pratbubbla och svar tar mindre plats på låga skärmar.
   (Stefans test, Anton 2026-10-05) */
@media (max-width: 620px) {
  .ys-valkomst .valk-steg { top: 1.25rem; }
  .ys-valkomst .vy-mitt { padding-top: 3.4rem; }
  .ys-valkomst > .valk-tillbaka {
    position: static;
    order: 99;
    align-self: flex-start;
    margin: 0.1rem 0 0.5rem;
  }
}
@media (max-width: 620px) and (max-height: 760px) {
  .ys-valkomst .vy-mitt { padding-top: 3rem; gap: 0.9rem; }
  .ys-valkomst .valk-malin { width: 84px; height: 84px; }
  .ys-valkomst .valk-mening { min-height: 0; font-size: calc(1.2rem * var(--yt-textskala)); padding: 0.75rem 1rem; }
  .ys-valkomst .valk-svar { gap: 0.5rem; }
  .ys-valkomst .valk-svar__knapp { padding: 0.65rem 1rem; }
}

/* Para ihop: fel betydelse syns tydligare än bara en röd kant. (Anton 2026-10-05) */
.matchning__betydelse.ar-fel { background: rgba(199, 58, 88, 0.08); }
.ys-feedback.ar-borta { opacity: 0; transition: opacity 0.25s; }
@media (prefers-reduced-motion: reduce) { .ys-feedback.ar-borta { transition: none; } }

/* Mittzonen scrollar, så det som ligger i den får aldrig krympa. På en
   låg mobilskärm krympte dialogens situationsruta när följden visades,
   texten hamnade utanför rutan och svaren gled in över bilden.
   (Anton 2026-10-05) */
/* Bara i övningarna och välkomsten, där mittzonen är byggd för att
   scrolla. På startsidorna ska innehållet få krympa som förut; där klipptes
   annars statistiken av mitt på datorskärmen. */
.view.ovning > .vy-mitt > *, .view.ys-valkomst > .vy-mitt > * { flex-shrink: 0; }

/* Ordkortets två sidor ligger i samma rutnätscell i stället för absolut
   ovanpå varandra. Då blir kortet lika högt som den högsta sidan, och en
   lång förklaring (t.ex. "brukare") rinner inte längre ut ur kortet.
   Den fasta höjden finns kvar som minsta höjd. (Anton 2026-10-05) */
.flipkort__inner { display: grid; }
.flipkort__sida { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; }

/* Ordkortets baksida på mobil: lite mindre text, och plats på båda sidor
   för högtalaren och sköldpaddan i hörnet. Förut gick långa förklaringar
   in under knapparna. (Anton 2026-10-05) */
@media (max-width: 620px) {
  .flipkort-ram.har-horn .flipkort__bak { padding-left: 3.1rem; padding-right: 3.1rem; }
  .flipkort__forklaring { font-size: calc(1.08rem * var(--yt-textskala)); }
  .flipkort__exempel { margin-top: 0.8rem; padding-top: 0.7rem; }
  .flipkort__exempeltext { font-size: calc(0.98rem * var(--yt-textskala)); }
}

/* Modulens startsida: strecket ovanför foten låg tätt under "7 övningar,
   39 ord, ca 40 minuter". (Anton 2026-10-05) */
.ys-modulstart .ss-hero { padding-bottom: 3.5rem; }

/* Tidslinjen: den aktiva noden är större än linjens spalt och har en ring,
   så texten bredvid kom för nära. (Anton 2026-10-05) */
.tl-rad--nu .tl-etikett { margin-left: 0.9rem; }
@media (max-width: 620px) {
  .tl-rad--nu .tl-etikett { margin-left: 0.7rem; }
}

/* Modulens topprad på dator: Startsidan, Ordlistan och Avsluta stod högst
   upp i raden. Nu ligger de mitt emellan sidans överkant och strecket,
   i höjd med titeln. På mobil står de på en egen rad som förut.
   (Anton 2026-10-05) */
@media (min-width: 701px) {
  .ys-tidslinje .tl-topp .ys-tillbaka,
  .ys-tidslinje .tl-topp .tl-topp__hoger { align-self: center; margin-top: 0.3rem; }
  /* margin-top väger upp att raden har mer luft under (0,6 rem) än över
     (0,3 rem), så att knapparna hamnar mitt mellan överkanten och strecket. */
}

/* ---- Framsteg i modulens lista med övningar (Anton 2026-10-05) ----------
   Överst: "2 av 7 övningar klara" och en stapel med en del per övning.
   Påbörjad övning: ringen runt noden och en stapel under texten fylls till
   så stor del som är gjord. Klar övning: "Klar" i modulens färg. */
.tl-framsteg {
  width: 100%;
  margin: 0.4rem 0 1.1rem;
  display: grid;
  gap: 0.5rem;
}
.tl-framsteg__text {
  text-align: left;
  margin: 0;
  font-size: calc(0.98rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
}
.tl-framsteg__rad { display: flex; gap: 6px; }
.tl-framsteg__del {
  flex: 1 1 0;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--modulfarg, var(--dip-blue)) calc(var(--andel, 0) * 100%),
    var(--dip-lavendel) 0);
}

.tl-stapel {
  display: block;
  width: min(100%, 14rem);
  height: 6px;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--modulfarg, var(--dip-blue)) calc(var(--andel, 0) * 100%),
    var(--dip-lavendel) 0);
}
.tl-etikett small.tl-etikett__klar { font-weight: 800; }

/* Ringen runt en påbörjad nod ersätter den vanliga ljusa ringen. */
.tl-nod--paborjad { box-shadow: none; }
.tl-nod--paborjad::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(var(--modulfarg, var(--dip-blue)) calc(var(--andel, 0) * 360deg), rgba(79, 84, 179, 0.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}

/* Påbörjad nod utan egen kant: ringen ligger tätt runt noden i stället
   för utanför en kant och en vit spalt. (Anton 2026-10-05) */
.tl-nod--paborjad { background: var(--surface); }
.tl-nod--paborjad::before { inset: -6px; }

/* ---- Resultatet efter en övning (Anton 2026-10-05) ---------------------
   Ett kort med ring, övningens namn, rubrik, siffror och modulens framsteg.
   Ringen visar hur stor del som satt på första försöket; alla rätt ger en
   grön ring med bock. De missade står i ett eget kort under. */
.res-kort {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(43, 37, 81, 0.10);
  padding: 2rem 1.6rem 1.4rem;
  border-top: 6px solid var(--modulfarg, var(--dip-blue));
}
.res-ring {
  --ringfarg: var(--modulfarg, var(--dip-blue));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ringfarg) calc(var(--andel, 0) * 360deg), var(--dip-lavendel) 0);
  margin-bottom: 0.4rem;
  animation: res-pop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
.res-ring.ar-alla { --ringfarg: #3f9d80; }
.res-ring__inre {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--ringfarg);
}
.res-ring__inre svg { width: 46px; height: 46px; }
/* Bara skala, ingen toning: står animationen still (bakgrundsflik) syns
   ringen ändå. */
@keyframes res-pop { from { transform: scale(0.85); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .res-ring { animation: none; } }

.res-kicker {
  margin: 0;
  font-size: calc(0.78rem * var(--yt-textskala));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--modulfarg, var(--dip-blue));
}
.res-rubrik {
  margin: 0;
  font-size: clamp(1.8rem, 4.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-strong);
}
.res-siffror {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0.5rem 0 0.2rem;
}
.res-siffra {
  min-width: 9.5rem;
  padding: 0.75rem 1.1rem;
  border-radius: 16px;
  background: var(--modulfarg-ljus, var(--dip-lavendel));
  display: grid;
  gap: 0.1rem;
}
.res-siffra b {
  font-size: calc(1.55rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.res-siffra span { font-size: calc(0.86rem * var(--yt-textskala)); color: #524f61; }
.res-text {
  margin: 0.2rem 0 0;
  max-width: 32ch;
  color: #524f61;
  font-size: calc(1rem * var(--yt-textskala));
  line-height: 1.5;
}
/* Efter "Avsluta modulen" (bara i LMS:et): ersätter knapparna i raden */
.ys-handlingsrad > .res-avslutat {
  margin: 0 auto;
  max-width: 42ch;
  color: #2c2a3a;
  font-size: calc(1rem * var(--yt-textskala));
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.res-kort .tl-framsteg {
  margin: 0.8rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--dip-lavendel);
}
.res-kort .ys-resultat__till { margin-top: 0.2rem; }

.res-missade {
  width: 100%;
  max-width: 34rem;
  margin: 1rem auto 0;
  text-align: left;
  background: var(--surface);
  border-radius: 20px;
  border: 2px solid var(--dip-lavendel);
  padding: 1.1rem 1.2rem 1.2rem;
}
.res-missade__rubrik {
  margin: 0 0 0.2rem;
  font-size: calc(1.05rem * var(--yt-textskala));
  font-weight: 800;
  color: var(--text-strong);
}
@media (max-width: 560px) {
  .res-kort { padding: 1.5rem 1.1rem 1.1rem; border-radius: 20px; }
  .res-ring { width: 100px; height: 100px; }
  .res-ring__inre { width: 78px; height: 78px; }
  .res-ring__inre svg { width: 38px; height: 38px; }
  .res-siffra { min-width: 0; flex: 1 1 8rem; }
}

/* Rätt ordning: brickan som förklaringen efter ett fel svar handlar om
   markeras en stund. (Stefans byggrapport, Anton 2026-10-05) */
.sortering__bricka.ar-forklarad {
  border-color: var(--dip-hallon);
  background: rgba(199, 58, 88, 0.08);
  transition: background-color 0.3s, border-color 0.3s;
}

/* Modulen är klar: knappen på modulens sida står bredvid "Nästa modul",
   och sidan har kortet överst och kan-målen under. (Anton 2026-10-05) */
.tl-slut { flex-wrap: wrap; gap: 0.75rem; }
.ys-modulklar .res-kort { margin-bottom: 0.5rem; }

/* Testverktyg: en flik vid vänsterkanten och en panel med genvägar.
   Syns bara utanför LMS:et och ska bort före leverans. (Anton 2026-10-05) */
.ys-test { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9000; font-size: 0.85rem; }
.ys-test__flik {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 0.7rem 0.35rem; border: 0; border-radius: 0 8px 8px 0;
  background: #2b2551; color: #fff; font: inherit; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; opacity: 0.55;
}
.ys-test__flik:hover, .ys-test__flik:focus-visible { opacity: 1; }
.ys-test__panel {
  position: absolute; left: 2.2rem; top: 50%; transform: translateY(-50%);
  width: 15.5rem; max-height: 86vh; overflow-y: auto;
  background: #fff; border: 2px solid #2b2551; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(43, 37, 81, 0.25); padding: 0.8rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.ys-test__panel[hidden] { display: none; }
.ys-test__rubrik { margin: 0 0 0.2rem; font-weight: 800; color: #2b2551; }
.ys-test__grupp { margin: 0.5rem 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6690; }
.ys-test__knapp {
  text-align: left; padding: 0.45rem 0.6rem; border: 1px solid #d9d5f2; border-radius: 8px;
  background: #f6f5fd; color: #2b2551; font: inherit; cursor: pointer;
}
.ys-test__knapp:hover, .ys-test__knapp:focus-visible { background: #e6e2fb; border-color: #4f54b3; }
.ys-test__not { margin: 0.5rem 0 0; font-size: 0.72rem; color: #6b6690; }

/* Resultatsidorna i samma ram som övningarna: full bredd, samma topprad
   och samma knapprad. Förut var de högst 560–780 px breda och centrerade,
   så att Avsluta och knapparna hoppade in mot mitten när övningen var
   slut. Innehållet står i mittspalten som i övningen. (Anton 2026-10-05) */
.view.ovning.ys-resultat {
  max-width: none;
  width: auto;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--yt-sidmarginal);
  padding-right: var(--yt-sidmarginal);
}

/* Plats för rullningslisten på alla sidor, så att sidan inte blir 15 px
   smalare och Avsluta flyttar sig när en sida är högre än skärmen.
   (Anton 2026-10-05) */
html { scrollbar-gutter: stable; }

/* Alla knappar har en kant på 2 px, osynlig när knappen inte har någon.
   Den nedtonade Kontrollera har en synlig kant och var därför 4 px högre
   än samma knapp när den blev aktiv, och högre än knapparna på
   resultatsidan. (Anton 2026-10-05) */
.dip-btn:not(.dip-btn--dampad):not(.dip-btn--secondary) { border: 2px solid transparent; }

/* Mobilen: raderna har 0,2 rem utfyllnad, men den aktiva raden fick
   1,25 rem (räknat för datorns 0,7 rem). Noden flyttade då 8 px åt höger,
   och dess linje syntes bredvid linjen ovanför och under som ett
   dubbelstreck. Utfyllnaden = radens egen + den negativa marginalen.
   (Anton 2026-10-05) */
@media (max-width: 520px) {
  .tl-rad--nu { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Modulens sida på mobilen: toppen har bara knapparna, som i övningarna
   där modulnamnet också är dolt på mobilen. Rubriken och området tog en
   tredjedel av skärmen i den klistrade toppen. Rubriken finns kvar för
   skärmläsare. (Anton 2026-10-05) */
@media (max-width: 700px) {
  .ys-tidslinje .tl-topp .tl-topp__titel {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0;
  }
  .ys-tidslinje .tl-topp { row-gap: 0; }
  /* Knapparna på samma höjd som i övningarnas topprad. */
  .ys-tidslinje .tl-topp .ys-tillbaka, .ys-tidslinje .tl-topp .tl-topp__hoger { margin-top: 0; }
}

/* Samma radavstånd i övningarnas huvudtext som i Dialogs situation.
   Fyll i ordet hade 2,1, frågan i Vad betyder det? 1,8 och repliken i
   Lyssna och välj 1,9, så meningarna såg glesa och olika ut.
   (Anton 2026-10-05) */
.lucka__mening, .fraga, .replik__text { line-height: 1.6; }
.lucka__plats { margin: 0 0.15rem; }

/* Orden i övningarnas texter är knappar med egen utfyllnad, så
   mellanrummen blev bredare än vanligt mellanslag. En liten negativ
   marginal tar bort det extra utan att minska ytan man trycker på.
   (Anton 2026-10-05) */
.ys-ord { margin: 0 -0.06em; }

/* "Alla moduler" på modulens startsida (bara på webben) är en länk med
   samma utseende som Tillbaka-knapparna. (Anton 2026-10-05) */
a.ys-tillbaka { text-decoration: none; }

/* Para ihop: rubriker över orden och betydelserna, en hjälptext som säger
   vilket steg eleven är på, ett tydligt valt ord, streckade betydelser när
   det är dags att välja en, och ordet med bock i betydelsen när paret är
   rätt. På mobilen var det oklart vad som var ord och vad som var
   betydelse, och vad man skulle trycka på. (Anton 2026-10-05) */
.matchning__steg {
  margin: 0 0 0.9rem; text-align: center; font-weight: 700;
  color: var(--dip-blue); min-height: 1.5em;
}
.matchning__rubrik { margin: 0 0 0.15rem; }
.matchning__kol--ord .matchning__rubrik { flex-basis: 100%; }
.matchning__ord.is-vald {
  background: var(--dip-blue); border-color: var(--dip-blue); color: #fff;
}
.matchning.har-valt .matchning__betydelse:not(.ar-klar) { border-style: dashed; border-color: var(--dip-blue); }
.matchning__par {
  display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.15rem;
  font-size: 0.82rem; font-weight: 800; color: #26755a;
}
.matchning__par svg { width: 15px; height: 15px; flex-shrink: 0; }
.matchning__ord.ar-klar { color: #26755a; }
@media (max-width: 620px) {
  .matchning__kol--betydelse { margin-top: 0.4rem; }
}

/* Länkarna under resultatkortet: Alla övningar och Gör om övningen, på
   en rad. (Anton 2026-10-05) */
.res-lankar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1rem; margin-top: 0.2rem; }

/* Pausen efter var tionde ordkort: snabbtest och sammanfattning.
   (Anton 2026-10-06) */

.ordpaus-ord__hjalp { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--text-muted); }
.ordpaus-ord__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ordpaus-ord__rad {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem; border: 2px solid var(--dip-lavendel); border-radius: 14px; background: var(--surface);
}
.ordpaus-ord__rad.ar-inte { border-color: #e7b8c3; background: rgba(199, 58, 88, 0.05); }
.ordpaus-ord__bild { display: block; width: 4rem; height: 2.25rem; object-fit: cover; border-radius: 6px; background: var(--dip-lavendel); }
.ordpaus-ord__ord { font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.ordpaus-ord__val { display: inline-flex; border: 2px solid var(--dip-lavendel); border-radius: 999px; overflow: hidden; }
.ordpaus-ord__knapp { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.35rem 0.75rem; min-height: 36px; border: 0; background: var(--surface); color: var(--text-strong); cursor: pointer; }
.ordpaus-ord__knapp[aria-pressed="true"] { background: #26755a; color: #fff; }
.ordpaus-ord__knapp--inte[aria-pressed="true"] { background: #c73a58; color: #fff; }
.ordpaus-ord__knapp:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: -3px; }
/* Mobilen: större bild till vänster, ordet och lyssnaknappen bredvid, och
   Kan och Öva mer som två lika breda knappar under. Förut blev bilden
   pytteliten. (Anton 2026-10-06) */
@media (max-width: 560px) {
  .ordpaus-ord__rad { grid-template-columns: 6.5rem minmax(0, 1fr) auto; row-gap: 0.5rem; padding: 0.5rem; }
  .ordpaus-ord__bild { width: 6.5rem; height: 3.66rem; border-radius: 8px; }
  .ordpaus-ord__ord { font-size: 1.02rem; }
  .ordpaus-ord__val { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .ordpaus-ord__knapp { min-height: 42px; font-size: 0.92rem; }
}

.ordpaus-ord__bild--symbol { display: flex; align-items: center; justify-content: center; color: var(--dip-blue); }
.ordpaus-ord__bild--symbol svg { width: 55%; height: 70%; }
.ordpaus-ord__bild--tom { background: transparent; }


/* Snabbtestet i pausen använder övningarnas egna delar (.fraga, .lucka,
   .ys-alt-grid, remsan). Här står bara det som är eget för testet.
   (Anton 2026-10-06) */
/* Ordet frågan gäller: knapp i meningen, i modulfärgen. */
.fraga .snabbtest__malord { color: var(--modulfarg, var(--dip-blue)); font-weight: 800; }
/* Hörfrågan: stor högtalare och sköldpaddan, mitt under frågan. */
.snabbtest__lyssna { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.2rem 0 1.2rem; }
.snabbtest__lyssna .lyssna-knapp--stor { --yt-lyssna-storlek: 76px; }
/* Lyssna på ordet, längst till höger i remsan. */
.ys-feedback .snabbtest__remsalyssna { margin-left: auto; flex-shrink: 0; align-self: center; }
/* Ja och Nej: två lika stora knappar sida vid sida, bara ordet mitt i.
   Ingen sifferruta (tangenterna 1 och 2 fungerar ändå). */
.ys-alt-grid.snabbtest__janej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snabbtest__janej .ys-alt { min-height: 64px; }
.snabbtest__janej .ys-alt__nr { display: none; }
.snabbtest__janej .ys-alt__text { padding: 0 2rem; font-size: calc(1.2rem * var(--yt-textskala)); font-weight: 800; }
.snabbtest__janej .ys-alt__ikon { right: 0.8rem; }
/* Ja/Nej-frågans påstående som ett vänt ordkort: ordet med högtalare,
   en streckad linje, "betyder" och förklaringen. Knapparna har tummar.
   Förslag 5, vald 2026-10-13. (Anton) */
.snabbtest-kort { width: 100%; max-width: 38rem; margin: 0 auto; background: var(--surface, #fff); border: 2px solid var(--dip-lavendel); border-radius: 18px; text-align: center; overflow: hidden; }
.snabbtest-kort__ord { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.1rem 1.2rem 1.4rem; }
.snabbtest-kort .snabbtest__malord.snabbtest-kort__malord { color: var(--modulfarg, var(--dip-blue)); font-weight: 800; font-size: calc(1.9rem * var(--yt-textskala)); line-height: 1.2; }
.snabbtest-kort__lyssna { flex: none; }
/* Långa ord ("journalanteckning") får inte tränga ut högtalaren på mobilen. */
/* Bryts aldrig mitt i ordet: app.js krymper ordet i stället (passaLangaOrd). */
.snabbtest-kort .snabbtest__malord.snabbtest-kort__malord { min-width: 0; overflow-wrap: normal; }
@media (max-width: 560px) {
  .snabbtest-kort .snabbtest__malord.snabbtest-kort__malord { font-size: calc(1.5rem * var(--yt-textskala)); }
  .snabbtest-kort__ord { padding-left: 0.8rem; padding-right: 0.8rem; }
}
.snabbtest-kort__baksida { position: relative; border-top: 2px dashed var(--dip-lavendel); padding: 1.9rem 1.2rem 1.2rem; }
/* Fraser har ingen etikett på linjen, så det behövs mindre luft. */
.snabbtest-kort__baksida--fras { padding-top: 1.2rem; }
/* "betyder" som en etikett mitt på den streckade linjen. (Anton 2026-10-13) */
.snabbtest-kort__betyder { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); margin: 0; padding: 0.15rem 0.9rem; border-radius: 999px; background: var(--dip-lavendel); color: var(--dip-morklila); font-size: calc(0.9rem * var(--yt-textskala)); font-weight: 800; white-space: nowrap; }
.snabbtest-kort__betydelse { margin: 0; font-size: calc(1.2rem * var(--yt-textskala)); font-weight: 700; line-height: 1.45; color: var(--text-strong); }
/* Frågetecknet på den plats som saknas, en streckad ruta. Efter svaret
   fylls det i med det rätta ordet eller den rätta förklaringen. */
.snabbtest-kort__tom { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0 0.6rem; border: 2px dashed var(--dip-lavendel); border-radius: 12px; color: var(--modulfarg, var(--dip-blue)); font-size: calc(1.5rem * var(--yt-textskala)); font-weight: 800; line-height: 1; }
/* Den tomma platsen med text i stället för frågetecken (granskningen 2026-10-19). */
.snabbtest-kort__tom--text { min-height: 2.8rem; padding: 0.3rem 1rem; color: var(--dip-morklila); background: #f6f4fd; font-size: calc(1rem * var(--yt-textskala)); font-weight: 700; line-height: 1.3; }
/* Det valda svaret på sin plats före Kontrollera: heldragen kant i
   modulens färg, ännu inte grönt. (Anton 2026-10-19) */
.snabbtest-kort__tom.ar-vald, .lucka__plats.ar-vald { border-style: solid; border-color: var(--modulfarg, var(--dip-blue)); background: var(--dip-lavendel); color: var(--text-strong); }
.snabbtest-kort__tom.ar-vald { font-size: inherit; line-height: 1.35; padding: 0.35rem 0.8rem; }
.snabbtest-kort__ord .snabbtest-kort__tom.ar-vald { color: var(--modulfarg, var(--dip-blue)); font-size: calc(1.6rem * var(--yt-textskala)); }
/* Frågan ovanför kortet: större och med luft till kortet. */
.ovning-uppmaning.ovning-uppmaning--ovan { margin: 0.2rem auto 0.4rem; font-size: calc(1.3rem * var(--yt-textskala)); }
.snabbtest-kort__tom.ar-ifylld { border-style: solid; border-color: #63c9a8; background: #e3f6ef; color: var(--text-strong); font-size: inherit; line-height: 1.35; padding: 0.35rem 0.8rem; }
.snabbtest-kort__ord .snabbtest-kort__tom.ar-ifylld { color: var(--modulfarg, var(--dip-blue)); font-size: calc(1.6rem * var(--yt-textskala)); }
.snabbtest__janej .ys-alt__text { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.snabbtest__tumme { display: inline-flex; flex: none; color: var(--modulfarg, var(--dip-blue)); }
.snabbtest__tumme svg { width: 24px; height: 24px; }
.snabbtest__tumme--ner svg { transform: scaleY(-1); }
/* Smala skärmar: knapparna under varandra, så att "Det stämmer inte"
   står på en rad. */
@media (max-width: 560px) {
  .ys-alt-grid.snabbtest__janej { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .snabbtest__janej .ys-alt { min-height: 56px; }
  .snabbtest__janej .ys-alt__text { padding: 0 2.6rem; white-space: nowrap; }
}


/* =========================================================================
   Designrunda för övningarna (Anton 2026-10-06). Samma mönster överallt:
   det man ska läsa eller höra först, sedan frågan direkt ovanför svaren,
   och samma knappar och samma rätt/fel-färger i alla övningar.
   ========================================================================= */

/* Frågan ovanför svaren: fet, centrerad, nära svaren den hör till. */
.ovning-uppmaning {
  margin: -0.35rem auto -0.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}

/* Långa svarsalternativ vänsterställs (se markeraLangaAlternativ). Siffran
   och bocken ligger kvar i kanterna. */
.ys-alt-grid--lang .ys-alt--text .ys-alt__text {
  flex: 1 1 auto;
  text-align: left;
  padding-left: 2.4rem;
}

/* Vad betyder det?: orden frågan gäller i modulfärgen. */
.fraga .fraga__citat { color: var(--modulfarg, var(--dip-blue)); }

/* Lyssna och välj: stor högtalare och sköldpaddan mitt under frågan,
   "Visa texten" under dem och repliken i en bubbla när den visas. */
.ovning-lyssna { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: -0.2rem 0 0; }
.ovning-lyssna .lyssna-knapp--stor { --yt-lyssna-storlek: 76px; }
.ovning-visatext { align-self: center; margin: -0.6rem 0 0; }
.ovning-replik {
  align-self: stretch;
  border-radius: 18px;
  text-align: center;
  margin-top: -0.4rem;
  /* Den gamla mobilregeln för .replik__bubbla (order: 3) flyttade den
     under svaren. */
  order: 0;
  flex-basis: auto;
}
.ovning-replik .replik__text { font-size: calc(1.15rem * var(--yt-textskala)); line-height: 1.8; }

/* Dialog: svaren som pratbubblor, med en spetsig nedre vänsterhörna. */
.ys-alt--replik { border-radius: 18px 18px 18px 6px; }
/* Följden i samma färger som återkopplingsremsan, med bock eller kryss. */
.foljd { display: flex; align-items: flex-start; gap: 0.7rem; }
.foljd__ikon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 0.1rem; }
.foljd__ikon svg { width: 24px; height: 24px; display: block; }
.foljd__text { flex: 1 1 auto; min-width: 0; }
.foljd--bra { background: rgba(99, 201, 168, 0.18); color: var(--dip-morklila); }
.foljd--bra .foljd__ikon { color: #2f8c6d; }
.foljd--kort { background: rgba(223, 81, 110, 0.14); color: var(--text-strong); }
.foljd--kort .foljd__ikon { color: var(--dip-hallon); }
.foljd--kort .foljd__prova { color: var(--text-strong); }

/* Para ihop och Rätt ordning: samma knappar som svarsalternativen i de
   andra övningarna (kant, hörn, vikt och lyft vid hovring). */
.matchning__ord,
.matchning__betydelse,
.sortering__bricka {
  border: 3px solid var(--border);
  border-radius: var(--radius);
  font-weight: 700;
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}
.matchning__ord { font-weight: 800; }
.matchning__ord:hover:not(:disabled),
.matchning__betydelse:hover:not(:disabled),
.sortering__bricka:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent, var(--dip-blue)); }
.matchning__ord.ar-klar,
.matchning__betydelse.ar-klar { border-color: #3f9d80; }
.sortering__tom { border-radius: var(--radius); }
.sortering__lista.ar-ratt .sortering__bricka { border-color: #3f9d80; }
.sortering__lista.ar-facit .sortering__bricka { border-color: var(--dip-blue); }
/* Para ihop: hjälptexten tätt under rubriken. */
.matchning__steg { margin-top: -0.6rem; }
/* Rätt ordning: rubriken i kortet behöver ingen etikett ovanför. */
.sortering__situation-rubrik { margin-bottom: 0.15rem; }

/* =========================================================================
   Skelettet (skisser 2026-10-06). Alla övningar byggs av samma delar:
   topprad, scenkort, frågerad, svar, återkopplingsremsa och knapprad.
   Allt som är lika ser likadant ut; det som skiljer blir tydligt just
   därför. Reglerna här ligger sist och går före äldre regler för samma
   delar. (granskning av modul 1, Anton 2026-10-06)
   ========================================================================= */

/* ---- Scenkortet: det eleven ska läsa eller lyssna på ------------------- */
.scenkort {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Hela bilden syns alltid (contain), med vitt på sidorna när kortet är
   bredare än bilden. Med cover beskars bilden lika mycket uppifrån som
   nedifrån på datorn, och huvudena kapades (granskningen, Anton
   2026-10-19, alternativ B med vitt). */
.scenkort__bild {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24vh;
  object-fit: contain;
  background: var(--surface, #fff);
  border-radius: 0;
}
.scenkort__text {
  padding: 0.8rem 1rem 0.9rem;
  font-size: calc(1.1rem * var(--yt-textskala));
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-strong);
  text-align: center;
}
/* Högtalaren och sköldpaddan i hörnet tar sin plats från texten. */
.scenkort.har-horn .scenkort__text { padding-right: 3.9rem; }
.scenkort.har-sakta { min-height: calc(1.4rem + 96px); }
.scenkort__rubrik {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--modulfarg, var(--dip-blue));
  font-weight: 800;
  margin-bottom: 2px;
  text-align: left;
}
/* Vad betyder det?: frasen stor och i modulfärg, som ordet på ordkortet. */
.scenkort__fras {
  margin: 0;
  min-height: 92px;
  display: grid;
  place-items: center;
  font-size: calc(1.5rem * var(--yt-textskala));
  font-weight: 800;
  line-height: 1.3;
  color: var(--modulfarg, var(--dip-blue));
  padding: 0.4rem 0;
}
/* Fyll i ordet: meningen i kortet utan egen ram. */
.scenkort .lucka { border: 0; background: none; padding: 0.2rem 0; }
.scenkort .lucka__mening { line-height: 1.65; }

/* ---- Frågeraden: en stil överallt ------------------------------------- */
.fraga, .ovning-uppmaning {
  /* Hela spaltens bredd: .ys-intro har en maxbredd på 46 tecken, och
     utan sidomarginaler hamnade rutan till vänster, så att den
     centrerade texten stod snett mot kortet. (Anton 2026-10-06) */
  width: 100%;
  max-width: none;
  margin: 0.1rem auto -0.2rem;
  font-size: calc(1.1rem * var(--yt-textskala));
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}

/* ---- Svaren: siffra till vänster, bock eller kryss till höger --------- */
.ys-alt__nr {
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: calc(0.95rem * var(--yt-textskala));
}
.ys-alt--text .ys-alt__nr { left: 0.7rem; }
.ys-alt--text .ys-alt__text { padding: 0 2.9rem; }
.ys-alt-grid--lang .ys-alt--text .ys-alt__text { padding-left: 2.9rem; }
/* Rätt: ljusgrön yta med grön kant, texten mörk. Fel: röd kant, ytan ljus.
   Bocken och krysset ligger i en fylld rund bricka, så att de syns även
   för den som inte ser skillnad på grönt och rött. */
.ys-alt.is-ratt { background: #e4f4ee; border-color: #63c9a8; color: var(--text-strong); }
.ys-alt.is-fel { border-color: #c73a58; }
.ys-alt.is-ratt .ys-alt__ikon, .ys-alt.is-fel .ys-alt__ikon {
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
}
.ys-alt.is-ratt .ys-alt__ikon { background: #2f8c6d; }
.ys-alt.is-fel .ys-alt__ikon { background: #c73a58; }
.ys-alt.is-ratt .ys-alt__ikon svg, .ys-alt.is-fel .ys-alt__ikon svg { width: 14px; height: 14px; }

/* ---- Luckan: en pille med frågetecken, grön när den är fylld ---------- */
.lucka__plats {
  display: inline-grid;
  place-items: center;
  min-width: 2.6em;
  height: 1.6em;
  padding: 0 0.5em;
  border: 2px dashed var(--modulfarg, var(--dip-blue));
  border-radius: 999px;
  background: var(--dip-lavendel);
  color: var(--modulfarg, var(--dip-blue));
  font-size: 0.95em;
  font-weight: 800;
  vertical-align: middle;
  margin: 0 0.15rem;
  transition: background 0.25s, border-color 0.25s;
}
.lucka__plats.ar-ifylld {
  border: 2px solid #63c9a8;
  background: #e4f4ee;
  color: #26755a;
}

/* ---- Lyssna och välj: allt i kortet, textrutan har sin storlek från början */
.lyssnakort { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.6rem 0 0; }
.lyssnakort .ovning-lyssna { margin: 0; }
.lyssnakort__ruta {
  width: 100%;
  min-height: 76px;
  border-radius: 16px;
  background: var(--dip-lavendel);
  display: grid;
  place-items: center;
  padding: 0.6rem 0.9rem;
  text-align: center;
  transition: background 0.2s;
}
.lyssnakort__ruta.ar-visad { background: var(--dip-offwhite); }
.lyssnakort__ruta .replik__text {
  font-size: calc(1.1rem * var(--yt-textskala));
  line-height: 1.4;
  font-weight: 600;
}
.lyssnakort__punkter { display: flex; gap: 6px; }
.lyssnakort__punkter i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--modulfarg, var(--dip-blue));
  opacity: 0.45;
  animation: ys-punkt 1.2s infinite;
}
.lyssnakort__punkter i:nth-child(2) { animation-delay: 0.2s; }
.lyssnakort__punkter i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ys-punkt { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .lyssnakort__punkter i { animation: none; opacity: 0.6; } }
.lyssnakort .ovning-visatext { margin: -0.2rem 0 0; }

/* ---- Knappen är alltid lila. Remsan bär domen. -------------------------
   En röd Nästa-knapp efter ett fel kändes som en tillsägelse, och grön
   sa samma sak som remsan en gång till. */
.ys-handlingsrad__primar.ar-ratt,
.ys-handlingsrad__primar.ar-fel { background: var(--modulfarg, var(--dip-blue)); }

/* ---- Dialog som rollspel (skisser 2026-10-06) --------------------------- */
/* Situationen i scenkortet: samma text som förut, utan egen ram. */
.scenkort .situation--kort { border: 0; background: none; padding: 0; margin: 0; font-size: calc(1.1rem * var(--yt-textskala)); line-height: 1.45; text-align: center; }
/* Svaren som pratbubblor från eleven, med "Du:" ovanför. */
.ys-alt--replik .ys-alt__etikett { color: var(--text-muted); margin-bottom: 0.1rem; }
/* Det svagare svaret: gult, inte rött. Utropstecken i brickan. */
.ys-alt.is-svag { border-color: #f0b85a; background: #fdf1dc; color: var(--text-strong); }
.ys-alt.is-svag .ys-alt__nr { opacity: 0.35; }
.ys-alt--text.is-svag .ys-alt__ikon { visibility: visible; }
.ys-alt.is-svag .ys-alt__ikon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #a05a00; color: #fff; font-weight: 800; font-size: 0.9rem;
}
.ys-feedback--svag { background: #fdf1dc; border-color: #f0b85a; color: var(--text-strong); }
.ys-feedback--svag .ys-feedback__ikon {
  display: inline-flex; align-items: center; justify-content: center;
  color: #a05a00; font-weight: 800; font-size: 1.2rem;
}
/* Malins bubbla: porträttet till vänster, bubblan med spets upp mot
   henne, grön efter det bättre svaret och gul efter det svagare. */
.foljd { background: none; padding: 0; gap: 0.6rem; align-items: flex-start; }
.foljd__avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: var(--shadow);
}
.foljd__bubbla {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid;
  border-radius: 6px 20px 20px 20px;
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: calc(1rem * var(--yt-textskala));
  line-height: 1.45;
  color: var(--text-strong);
}
.foljd__namn {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.foljd--bra .foljd__bubbla { background: #e4f4ee; border-color: #63c9a8; }
.foljd--svag .foljd__bubbla { background: #fdf1dc; border-color: #f0b85a; }
/* Fel, inte bara svagare (kortFel, granskningen 2026-10-19). */
.foljd--fel .foljd__bubbla { background: #fbe7e5; border-color: #e0868f; }
.foljd--fel .foljd__prova { color: var(--text-strong); }
.foljd--svag .foljd__prova { color: var(--text-strong); }
.foljd__bubbla.har-horn { padding-right: 3.6rem; }
.foljd__bubbla.har-sakta { min-height: calc(1.4rem + 96px); }
.foljd__bubbla .lyssna-horn { top: 0.5rem; right: 0.5rem; }
.foljd__bubbla .lyssna-horn--sakta { top: calc(0.5rem + 52px); }

/* ---- Rätt ordning som en lista (skisser 2026-10-06) -------------------- */
.scenkort--vanster .scenkort__text { text-align: left; }
.scenkort .sortering__scenario { margin: 0; }
.sortering__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
}
.sortering__rad { margin: 0; padding: 0; }
.sortering__steg {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: calc(1rem * var(--yt-textskala));
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 18px;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sortering__steg:disabled { cursor: default; }
/* Steget och, när ordningen är klar, förklaringen under i mindre text. */
.sortering__inne { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sortering__varfor {
  font-size: calc(0.9rem * var(--yt-textskala));
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted, #625d84);
  animation: ys-varfor-in 0.35s ease;
}
@keyframes ys-varfor-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sortering__varfor { animation: none; } }
.sortering__nr {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px dashed var(--dip-lavendel);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.sortering__steg.ar-satt { border-color: var(--modulfarg, var(--dip-blue)); }
.sortering__steg.ar-satt .sortering__nr { background: var(--modulfarg, var(--dip-blue)); border: 2px solid var(--modulfarg, var(--dip-blue)); }
.sortering__steg.ar-ratt,
.sortering__lista.ar-ratt .sortering__steg { border-color: #63c9a8; background: #e4f4ee; }
.sortering__steg.ar-ratt .sortering__nr,
.sortering__lista.ar-ratt .sortering__nr { background: #2f8c6d; border-color: #2f8c6d; }
.sortering__lista.ar-facit .sortering__steg { border-color: var(--modulfarg, var(--dip-blue)); background: var(--dip-lavendel); }
.sortering__steg.ar-forklarad { border-color: #f0b85a; background: #fdf1dc; }
.sortering__steg.ar-forklarad .sortering__nr { background: #a05a00; border-color: #a05a00; }
@media (hover: hover) and (pointer: fine) {
  .sortering__steg:hover:not(:disabled) { border-color: var(--modulfarg, var(--dip-blue)); }
}
.sortering__hint { margin: -0.3rem 0 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; min-height: 1.3em; }
@media (max-width: 620px) { .scenkort__bild { max-height: 20vh; } }

/* ---- Para ihop med fasta ordchips (skisser 2026-10-06) ------------------ */
.matchning__chips {
  position: sticky;
  top: -6px;
  z-index: 2;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  padding: 0.3rem 0 0.6rem;
}
.matchning__ord {
  font: inherit;
  font-size: calc(1rem * var(--yt-textskala));
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.matchning__ord.is-vald { background: var(--modulfarg, var(--dip-blue)); border-color: var(--modulfarg, var(--dip-blue)); color: #fff; }
.matchning__ord.ar-klar { display: none; }
.matchning__lista {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
}
.matchning__betydelse {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: calc(1rem * var(--yt-textskala));
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 18px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, padding 0.2s;
}
.matchning__lista.har-valt .matchning__betydelse:not(.ar-klar) { border-style: dashed; border-color: var(--modulfarg, var(--dip-blue)); }
.matchning__betydelse.ar-fel { border-style: solid; border-color: #c73a58; background: #fbe6ea; }
.matchning__betydelse.ar-klar {
  border-style: solid;
  border-color: #63c9a8;
  background: #e4f4ee;
  padding: 0.5rem 0.8rem;
  font-size: calc(0.95rem * var(--yt-textskala));
  cursor: default;
}
.matchning__par { display: inline-flex; align-items: center; gap: 0.3rem; color: #2f8c6d; font-weight: 800; white-space: nowrap; }
.matchning__par::after { content: '·'; color: var(--text-muted); margin-left: 0.2rem; }
@media (hover: hover) and (pointer: fine) {
  .matchning__ord:hover:not(:disabled), .matchning__betydelse:hover:not(:disabled):not(.ar-klar) { border-color: var(--modulfarg, var(--dip-blue)); transform: none; }
}

/* ---- Ordkortet (skisser 2026-10-06) ------------------------------------- */
/* Högtalaren och sköldpaddan i bandet under bilden, till höger, inte
   ovanpå bilden. Ordet står till vänster i bandet. */
.flipkort-ram.har-horn .flipkort--bild .flipkort__band {
  align-items: flex-start;
  text-align: left;
  padding-left: 1.2rem;
  padding-right: 7.2rem;
}
/* Högtalaren först, sköldpaddan ytterst till höger, på båda sidor. */
.flipkort-horn__knapp--fram { top: auto; bottom: 1.45rem; right: calc(0.9rem + 52px); }
.flipkort-horn__knapp--fram.flipkort-horn__knapp--sakta { bottom: 1.45rem; right: 0.9rem; }
.flipkort-horn__knapp--fram { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.flipkort-horn__knapp--fram:not(.flipkort-horn__knapp--sakta) { background: #fff; border-color: #fff; color: var(--dip-blue); }
/* Baksidan: ordet litet överst med knapparna bredvid, förklaringen stor,
   exemplet för sig i botten. */
.flipkort-ram.har-horn .flipkort__bak,
.flipkort__bak {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem 1.1rem;
}
.flipkort__bakord {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 7rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--modulfarg, var(--dip-blue));
  font-weight: 800;
}
.flipkort__forklaring { text-align: left; }
.flipkort__exempel { margin-top: auto; text-align: left; }
.flipkort-horn__knapp--bak,
.flipkort-horn__knapp--bak:hover { top: 0.75rem; left: calc(0.85rem + 52px); }
.flipkort-horn__knapp--bak.flipkort-horn__knapp--sakta { top: 0.75rem; left: 0.85rem; }
/* Prickarna under kortet: omgångens ord, den aktuella med ring. */
.flipkort-prickar { display: flex; justify-content: center; gap: 7px; margin-top: -0.2rem; }
.flipkort-prickar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dip-lavendel); }
.flipkort-prickar i.ar-gjord { background: var(--modulfarg, var(--dip-blue)); }
.flipkort-prickar i.ar-nu { background: var(--modulfarg, var(--dip-blue)); box-shadow: 0 0 0 3px var(--dip-lavendel); }

/* ---- Snabbtestets sammanfattning (skisser 2026-10-06) ------------------- */
/* Resultatet som en rad, inte ett kort som tar halva skärmen. */
.ordpaus-kvitto {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: var(--yt-innehall-bredd);
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 22px;
  padding: 0.7rem 0.9rem;
  flex-shrink: 0;
}
.res-ring--liten { width: 54px; height: 54px; margin: 0; flex-shrink: 0; animation: none; }
.res-ring--liten .res-ring__inre { width: 40px; height: 40px; }
.res-ring--liten .res-ring__inre svg { width: 20px; height: 20px; }
.ordpaus-kvitto__text { min-width: 0; }
.ordpaus-kvitto__rubrik { margin: 0; font-size: calc(1.15rem * var(--yt-textskala)); line-height: 1.25; color: var(--text-strong); }
.ordpaus-kvitto__rad { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.9rem; }
.ordpaus-hint { margin: -0.3rem 0 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; min-height: 1.3em; }
/* En rad per ord: bild, ord, högtalare och bocken Öva mer. */
.ordpaus-ord__lista { width: 100%; max-width: var(--yt-innehall-bredd); display: grid; gap: 0.5rem; }
.ordpaus-ord__rad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 18px;
  padding: 0.5rem 0.6rem 0.5rem 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.ordpaus-ord__rad.ar-markerad { border-color: var(--modulfarg, var(--dip-blue)); background: var(--dip-lavendel); }
.ordpaus-ord__rad .ordpaus-ord__bild { width: 3.6rem; height: 2.05rem; border-radius: 8px; flex-shrink: 0; }
.ordpaus-ord__rad.ar-markerad .ordpaus-ord__bild--symbol { background: var(--surface); }
.ordpaus-ord__rad .ordpaus-ord__ord { flex: 1 1 auto; min-width: 0; font-size: calc(1rem * var(--yt-textskala)); line-height: 1.25; }
.ordpaus-ord__missad { display: block; font-weight: 600; color: #a05a00; font-size: 0.74rem; }
.ordpaus-ord__rad .lyssna-knapp--liten { flex-shrink: 0; }
.ordpaus-ord__ova {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px 0 8px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface);
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ordpaus-ord__box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--modulfarg, var(--dip-blue));
  display: grid; place-items: center;
  color: #fff;
}
.ordpaus-ord__box svg { width: 12px; height: 12px; display: none; }
.ordpaus-ord__ova[aria-pressed="true"] { background: var(--modulfarg, var(--dip-blue)); border-color: var(--modulfarg, var(--dip-blue)); color: #fff; }
.ordpaus-ord__ova[aria-pressed="true"] .ordpaus-ord__box { background: #fff; border-color: #fff; color: var(--modulfarg, var(--dip-blue)); }
.ordpaus-ord__ova[aria-pressed="true"] .ordpaus-ord__box svg { display: block; }
.ordpaus-ord__ova:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
/* Siffran i knappen: hur många ord som ska övas. */
.ys-knappmarke {
  display: inline-grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--modulfarg, var(--dip-blue));
  font-size: 0.9rem;
  vertical-align: middle;
}

/* ---- Småfixar från granskningen 2026-10-06 ------------------------------ */
/* Siffrorna på resultatsidan radbryts aldrig ("10 av" / "10"). */
.res-siffra b { white-space: nowrap; }
/* På pekskärm ligger hover kvar efter ett tryck tills man trycker någon
   annanstans, så lyft och skuggor ska inte följa med dit. */
@media (hover: none) {
  .ys-alt:hover:not(:disabled),
  .lyssna-knapp:hover,
  .matchning__ord:hover:not(:disabled),
  .matchning__betydelse:hover:not(:disabled),
  .valk-svar__knapp:hover,
  .ss-start:hover,
  .ss-kort:hover,
  .omr-modul:hover { transform: none; box-shadow: none; }
  .tl-rad:hover { background: transparent; }
}

/* Toppradens runda knappar (Så gör du, Avsluta) och Övningar var 36 px
   höga på mobilen. 44 px är minsta tryckyta, samma som högtalarna.
   (Granskningen, Anton 2026-10-06) */
@media (max-width: 560px) {
  .ys-topp__hjalp,
  .ys-topp__avsluta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  }
  .ys-topp .ys-tillbaka { min-height: 44px; }
}

/* Para ihop: orden fastnade en bit under mittzonens överkant (zonen har
   luft upptill), och i glipan ovanför syntes betydelserna som scrollade
   förbi. Nu fastnar de ända uppe vid kanten: top är minus zonens luft
   (.view.ovning .vy-mitt). Skuggan syns bara när listan glider in under
   orden (ar-over-listan sätts i app.js). (Anton 2026-10-06) */
.view.ovning .matchning__chips {
  top: calc(-1 * clamp(0.75rem, 5vh, 3rem));
  transition: box-shadow 0.15s ease;
}
.view.ovning .matchning__chips.ar-over-listan { box-shadow: 0 10px 10px -10px rgba(43, 37, 81, 0.18); }

/* Symbolen i den runda brickan (bock, kryss, utropstecken) låg inte i
   mitten: app.js sätter style.display = 'block' på ikonen när svaret
   rättas, och det tog över flex-centreringen. (Anton 2026-10-06) */
.ys-alt.is-ratt .ys-alt__ikon,
.ys-alt.is-fel .ys-alt__ikon,
.ys-alt.is-svag .ys-alt__ikon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ys-alt__ikon svg { display: block; }
.ys-alt.is-svag .ys-alt__ikon span { display: block; line-height: 1; }

/* Tempo: talhastigheten i topraden bredvid Avsluta, i varje vy. Samma
   form som Avsluta; på mobilen bara ikonen. Menyn ligger i body med
   position: fixed under knappen. (Anton 2026-10-12) */
.ys-tempo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-weight: 700; font-size: 0.95rem;
  color: var(--text-strong);
  background: #fff;
  border: 2px solid var(--dip-lavendel);
  border-radius: 999px;
  padding: 0.4em 0.95em 0.4em 0.7em;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ys-tempo svg { width: 18px; height: 18px; }
.ys-tempo:hover, .ys-tempo.is-oppen { border-color: var(--dip-blue); background: #f5f3ff; }
.ys-tempo:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: 2px; }
/* På mobilen 44 px som Så gör du och Avsluta, och lite tätare rad så att
   räknaren "0 av 8" fortfarande får plats. */
@media (max-width: 560px) {
  .ys-tempo { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .ys-topp { gap: 0.35rem; }
  .ys-tempo__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .ys-tempo { display: none; } }

/* Platsen i de olika topraderna. */
.avsluta-rad { gap: 0.6rem; }
.valk-avsluta { display: flex; align-items: center; gap: 0.6rem; }
.ss-topp__titel { margin-left: auto; }
.omr-topp__kurs { flex: 1 1 auto; text-align: center; }
.ys-ordlista .ys-topp .ys-tempo { margin-left: auto; }
.ys-ordlista .ys-topp .ys-tempo + .ys-topp__avsluta { margin-left: 0; }

.ys-tempomeny {
  position: fixed;
  z-index: 1000;
  width: 15rem;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 2px solid var(--dip-lavendel);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(43, 37, 81, 0.18);
  padding: 0.85rem 0.6rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ys-tempomeny__rubrik { margin: 0 0.5rem; font-weight: 800; color: var(--text-strong); }
.ys-tempomeny__hjalp { margin: 0 0.5rem 0.35rem; font-size: 0.9rem; color: var(--text-muted); }
.ys-tempomeny__val {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 0; border-radius: 12px;
  background: transparent;
  font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}
.ys-tempomeny__val:hover { background: #f5f3ff; }
.ys-tempomeny__val:focus-visible { outline: 3px solid var(--dip-morklila); outline-offset: -3px; }
.ys-tempomeny__bock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--dip-lavendel);
  color: transparent;
}
.ys-tempomeny__bock svg { width: 14px; height: 14px; }
.ys-tempomeny__val[aria-pressed="true"] { background: #f5f3ff; color: var(--dip-morklila); font-weight: 800; }
.ys-tempomeny__val[aria-pressed="true"] .ys-tempomeny__bock { background: var(--dip-blue); border-color: var(--dip-blue); color: #fff; }

/* Med Tempo i övningarnas toprad blev det trångt för räknaren på mobilen:
   "38 av 39" behöver ca 72 px. Pricken framför räknaren utgår på mobilen,
   och på de smalaste skärmarna blir Övningar bara en pil (knappen har
   kvar sin aria-label). (Anton 2026-10-12) */
@media (max-width: 560px) {
  .ys-topp .ys-raknare__prick { display: none; }
}
@media (max-width: 380px) {
  .ys-topp .ys-tillbaka__kort { display: none; }
  .ys-topp .ys-tillbaka { justify-content: center; min-width: 44px; padding: 0.4em 0.6em; }
}

/* Tempotipsen: en pratbubbla under Tempo-knappen, och knappen lyser
   medan bubblan syns och när Malin berättar om den i välkomsten.
   (Anton 2026-10-13) */
.ys-tempotips {
  position: fixed;
  z-index: 1000;
  width: 17rem;
  max-width: calc(100vw - 24px);
  background: var(--dip-morklila);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(43, 37, 81, 0.25);
  padding: 0.75rem 0.95rem;
  animation: ys-tempotips-in 0.2s ease-out;
}
.ys-tempotips__pil {
  position: absolute; top: -7px;
  width: 16px; height: 16px;
  background: var(--dip-morklila);
  transform: rotate(45deg);
  border-radius: 3px;
}
.ys-tempotips__text { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; position: relative; }
.ys-tempotips__knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; position: relative; }
.ys-tempotips__ja, .ys-tempotips__nej {
  min-height: 44px; padding: 0 1rem;
  border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer;
}
.ys-tempotips__ja { background: #fff; color: var(--dip-morklila); border: 2px solid #fff; }
.ys-tempotips__nej { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.55); }
.ys-tempotips__ja:focus-visible, .ys-tempotips__nej:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes ys-tempotips-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@keyframes ys-tempo-lys {
  0%   { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(79, 84, 179, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0); }
}
.ys-tempo--tips, .ys-tempo--visa {
  border-color: var(--dip-blue);
  background: #f5f3ff;
  animation: ys-tempo-lys 1.3s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ys-tempotips { animation: none; }
  .ys-tempo--tips, .ys-tempo--visa { animation: none; box-shadow: 0 0 0 5px rgba(79, 84, 179, 0.28); }
}
/* I välkomsten är det gott om plats, och Malin säger "Tempo": ordet står
   kvar också på mobilen. */
@media (max-width: 560px) {
  .valk-avsluta .ys-tempo { width: auto; padding: 0 0.95em 0 0.7em; }
  .valk-avsluta .ys-tempo__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Välkomsten på mobilen: med Tempo i topraden krockade stegprickarna med
   knapparna. Prickarna står till vänster i knapparnas höjd, och Malin
   flyttas ned så att hon inte trycks upp mot dem. (Anton 2026-10-13) */
@media (max-width: 620px) {
  .ys-valkomst .valk-steg {
    top: calc(0.45rem + 18px);
    left: var(--yt-sidmarginal);
    right: auto;
    justify-content: flex-start;
  }
  .ys-valkomst .vy-mitt { padding-top: 5.6rem; }
}
@media (max-width: 620px) and (max-height: 760px) {
  .ys-valkomst .vy-mitt { padding-top: 5rem; }
}

/* Svaren på låga mobilskärmar: i Vad betyder det? syntes bara tre av fyra
   svar (360×640), och det fjärde låg under knappraden. Tätare svar, mindre
   luft runt frasen och frågan, samma läsbara text. (Modulgranskningen,
   modul 8, Anton 2026-10-19) */
@media (max-width: 620px) and (max-height: 760px) {
  :root { --yt-gap-alt: 0.55rem; }
  .ys-alt { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: calc(0.95rem * var(--yt-textskala)); line-height: 1.3; }
  .scenkort__fras { min-height: 0; padding: 0; font-size: calc(1.35rem * var(--yt-textskala)); }
  /* Frasen i Vad betyder det?: högtalaren och sköldpaddan bredvid varandra
     i stället för på höjden, som på ordkortet (sköldpaddan ytterst). */
  .scenkort--fras.har-sakta { min-height: calc(1rem + 44px); }
  /* minmax(0, 1fr): kolumnen får inte växa med ett långt ord, så att
     passaLangaOrd kan krympa frasen i stället för att den rinner in under
     högtalaren ("funktionsnedsättning", modul 14). */
  .scenkort--fras .scenkort__text { min-height: calc(1rem + 44px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .scenkort--fras.har-horn .scenkort__text { padding-right: calc(1.1rem + 96px); }
  .scenkort--fras .lyssna-horn { top: 0.5rem; right: calc(0.5rem + 52px); }
  .scenkort--fras .lyssna-horn--sakta { top: 0.5rem; right: 0.5rem; }
}

/* =========================================================================
   I LMS:et: plats för LMS:ets egen stängknapp (×), som i Diplomas LMS
   ligger uppe till höger ovanpå kursen. Det som står längst upp till höger
   flyttas in. Klassen ys-i-lms sätts av app.js bara i LMS:et, så webbdemot
   ser ut som förut. (Anton 2026-10-26)
   ========================================================================= */
.ys-i-lms { --lms-luft: 2.6rem; }
.ys-i-lms .ys-topp__avsluta,
.ys-i-lms .ss-topp > .ys-tempo:last-child,
.ys-i-lms .tl-topp__hoger > :last-child { margin-right: var(--lms-luft); }
@media (max-width: 560px) { .ys-i-lms { --lms-luft: 2.4rem; } }
/* På smal mobil tar luften för krysset räknarens plats ("0 av 40" kapades).
   Tillbakaknappen visar då bara pilen, som Tempo och Startsidan bara visar
   sina ikoner. Texten finns kvar för skärmläsare (aria-label). */
@media (max-width: 420px) {
  .ys-i-lms .ys-topp .ys-tillbaka { padding: 0.5rem; }
  .ys-i-lms .ys-topp .ys-tillbaka__kort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* I LMS:et: ingen reserverad plats för rullningslisten. Den syntes som en
   vit rand till höger, bredvid LMS:ets egen rullningslist. Sidans bakgrund
   sätts också på html, och en rullningslist som behövs (startsidan) får
   sidans färger. (Anton 2026-10-26) */
html { background: var(--bg); }
html.ys-i-lms { scrollbar-gutter: auto; scrollbar-color: var(--dip-lavendel) var(--dip-offwhite); }
/* Knapparna uppe till höger i höjd med LMS:ets kryss, vars mitt ligger
   ungefär 35 px från kursens överkant i Diplomas LMS (mätt i Antons
   skärmdumpar 2026-10-26). Varje vy har sin egen höjd från början, så
   förskjutningen är olika per vy. transform tar ingen höjd, så att
   övningarna inte börjar rulla på låga skärmar. */
.ys-i-lms .ys-topp,
.ys-i-lms .avsluta-rad { transform: translateY(0.7rem); }
.ys-i-lms .valk-avsluta { top: calc(0.45rem + 0.55rem); }
.ys-i-lms .ss-topp { padding-top: calc(1.6rem - 0.6rem); }
/* Modulsidans knappar ligger högre på smal skärm (egen rad i griden). */
@media (max-width: 700px) { .ys-i-lms .tl-topp__hoger { transform: translateY(0.5rem); } }

/* I LMS:et är Startsidan bara ett hus, en rund knapp. Texten finns kvar
   som aria-label och title (tips vid muspekaren). (Anton 2026-10-26) */
.ys-i-lms .ys-topp__avsluta { padding: 0.5rem; }
.ys-i-lms .ys-topp__avsluta svg { width: 18px; height: 18px; }
.ys-i-lms .ys-topp__avsluta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }