/* =========================================================================
   yrkessvenska.css — delat lager för mall 19–24 (yrkessvenska/språkkravet)
   Bygger PÅ diploma.css (variabler --dip-*, --bg, --surface, --text osv).
   Ladda alltid diploma.css FÖRE denna fil.

   Regler (BYGGSPEC-19-24.md §1):
   - Aldrig gult/guld/amber. Rätt = turkos (#63c9a8), fel = hallonröd (#df516e).
   - Bara Mollen. Inga emojis — all grafik är inline-SVG (se ys-ui.js: YS.ikon).
   - Kontrast: .ys-alt.is-fel har ALDRIG vit text på hallonröd botten — hallon
     används bara som kant/ikon, texten förblir mörk på ljus botten
     (mörk-på-hallon ger bara ~3.7:1, under AA för normal text).
   - .ys-lyssnarpanel är mörk (#2b2551) och all text i den ligger på
     --dip-offwhite (#f8f7fb) eller en ljus lavendel (#c9c5e6) — ALDRIG
     --dip-blue/--dip-lila som textfärg på den mörka botten (för lågt).
   - Responsivt 360–1200 px, bas 900×600 (typisk LMS-iframe).
   ========================================================================= */

:root {
  /* Mörkpanel-texttoner — separata från diploma.css :root eftersom de bara
     får användas MOT den mörka panelbakgrunden, aldrig mot --bg (ljus). */
  --ys-panel-bg: #2b2551;
  --ys-panel-text: #f8f7fb;
  --ys-panel-text-muted: #c9c5e6;
}

/* -------------------------------------------------------------------------
   Grundläggande tillgänglighet: skip-länk, sr-only, hidden, fokusring
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.ys-skip {
  position: absolute;
  left: 0.6rem; top: -60px;
  background: var(--dip-morklila);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 100;
  transition: top 0.15s ease;
}
.ys-skip:focus {
  top: 0.6rem;
  outline: 3px solid var(--dip-turkos);
  outline-offset: 2px;
}

/* Synlig, konsekvent fokusmarkering på alla interaktiva ys-element */
.ys-kort:focus-visible,
.ys-fortsatt:focus-visible,
.ys-tillbaka:focus-visible,
.ys-lyssna:focus-visible,
.ys-alt:focus-visible,
.ys-spela-in:focus-visible,
.ys-resultat__btn:focus-visible,
.ys-hastighet__seg:focus-visible,
.ys-topp__hjalp:focus-visible,
.ys-forsattsblad__knapp:focus-visible,
.ys-handlingsrad__primar:focus-visible,
.ys-handlingsrad__sekundar:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--dip-morklila);
  outline-offset: 3px;
}
.ys-lyssnarpanel :focus-visible {
  outline-color: var(--ys-panel-text);
}

/* Diploma-generell nedtonad primärknapp (jfr mall 27) — här: handlingsradens
   "Nästa" innan momentet är klart. Kombineras alltid med disabled, men
   .dip-btn:disabled räcker inte ensam (för svag visuell skillnad mot den
   normala knappen), så denna klass ger en tydligare, kontursbaserad stil. */
.dip-btn--dampad {
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border);
  box-shadow: none;
}

/* =========================================================================
   .ys-start — startsida
   ========================================================================= */
.ys-start {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 2.2rem;
  text-align: center;
}
/* Kickern ligger som en egen rad OVANFÖR h1 (§7.3), inte inuti den. */
.ys-start > .dip-kicker {
  display: block;
  margin: 0 0 0.3rem;
}
.ys-start h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin: 0.3rem 0 0.5rem;
}
.ys-intro {
  font-size: 1.15rem;
  color: var(--text-strong);
  max-width: 46ch;
  margin: 0 auto 1.6rem;
  /* "max en rad" enligt spec — vi tillåter radbrytning på mycket smala
     skärmar men designas för en rad på 360 px och uppåt. */
  overflow-wrap: break-word;
}

/* Kort-grid med kort-korten (tema/övning). Fasta brytpunkter (§7.3) så
   sex kort alltid syns utan scroll vid 900×600: 3 kolumner från 700 px,
   2 under 700, 1 under 420. */
.ys-kort-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  text-align: left;
}
@media (min-width: 700px) {
  .ys-kort-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .ys-kort-grid { grid-template-columns: 1fr; }
}
.ys-kort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  font-family: inherit;
  color: var(--text-strong);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.ys-kort:hover { transform: translateY(-3px); border-color: var(--accent); }
.ys-kort:disabled { opacity: 0.55; cursor: default; transform: none; }
.ys-kort__ikon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.ys-kort__ikon svg { width: 40px; height: 40px; }
.ys-kort__titel { font-weight: 800; font-size: 1.05rem; }
.ys-kort__undertext {
  font-size: 0.88rem;
  /* Mörkare än --text-muted: --text-muted mot --dip-lavendel (kortets
     valda bakgrund) ger bara 4,16:1 och underkänns — se SPEC.md. */
  color: #524f61;
}
.ys-kort__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
/* Turkos text mot vit/lavendel botten klarar inte 4,5:1 (bara ~1.6-4.1:1) —
   texten hålls mörk, bock-ikonen får turkosfärgen separat via currentColor
   satt bara på svg:en (påverkar inte textens färg). */
.ys-kort__status.is-klar { color: var(--text-strong); font-weight: 800; }
.ys-kort__status.is-klar svg { color: var(--dip-turkos); }
.ys-kort__status svg { width: 16px; height: 16px; flex-shrink: 0; }
.ys-kort.is-vald { border-color: var(--accent); background: var(--surface-alt); }

.ys-fortsatt {
  display: block;
  margin: 0.6rem auto 1.4rem; /* luft mot korten under */
}

/* Karta: "Ord · Mening · Tal · På jobbet" med aktuellt steg markerat */
.ys-karta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 1.4rem 0 0.4rem;
}
.ys-karta__steg { display: inline-flex; align-items: center; gap: 0.5rem; }
.ys-karta__steg:not(:last-child)::after {
  content: '·';
  margin-left: 0.7rem;
  color: var(--border);
}
.ys-karta__steg.is-aktuell { color: var(--accent); }

.ys-atervbruk {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}
.ys-atervbruk-ikoner {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.ys-atervbruk-ikoner svg { width: 28px; height: 28px; }

/* =========================================================================
   .ys-fot — startsidans sidfot (§7.3): loggan, .ys-karta och .ys-preview
   flyttas hit. .ys-preview visas ALDRIG i toppraden längre, bara här.
   ========================================================================= */
.ys-fot {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.ys-fot .ys-karta { margin: 0; }
.ys-fot .ys-preview {
  position: static;
  transform: none;
  display: inline-block;
}

/* =========================================================================
   .ys-topp — topprad i övningsvyer
   ========================================================================= */
.ys-topp {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.2rem 0 1.1rem;
  position: relative;
}
.ys-tillbaka {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-strong);
  cursor: pointer;
  padding: 0.4em 0.3em;
  border-radius: var(--radius);
}
.ys-tillbaka:hover { color: var(--accent); }
.ys-tillbaka svg { width: 20px; height: 20px; }

.ys-topp__mitt {
  flex: 1 1 auto;
  min-width: 0;
}
.ys-raknare {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-strong);
  margin-bottom: 0.3rem;
}

.ys-poang {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Förhandsvisningsmärke — sedan §7.3 visas den BARA i sidfoten (.ys-fot
   gör den static igen), aldrig i toppraden ovanpå räknaren. */
.ys-preview {
  position: absolute;
  top: -0.3rem; right: 0;
  transform: translateY(-100%);
  background: var(--dip-lavendel);
  color: var(--dip-morklila);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.25em 0.8em;
  white-space: nowrap;
}

/* "Så gör du"-knappen i toppraden — öppnar försättsbladet igen (§7.1/§7.4).
   Toppraden innehåller bara: tillbaka, räknare+progress, poängchip, denna. */
.ys-topp__hjalp {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 2px solid var(--border);
  color: var(--text-strong);
  border-radius: var(--radius-pill);
  padding: 0.4em 0.9em;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.ys-topp__hjalp:hover { border-color: var(--accent); color: var(--accent); }
.ys-topp__hjalp svg { width: 18px; height: 18px; }
.ys-lyssnarpanel .ys-topp__hjalp {
  border-color: rgba(248, 247, 251, 0.4);
  color: var(--ys-panel-text);
}

/* Startsidans topprad (§7.3): bara "Så gör du" till höger, inget annat. */
.ys-topp--start {
  justify-content: flex-end;
}

/* =========================================================================
   .ys-lyssna — lyssna-knapp (rund, stor/liten)
   ========================================================================= */
.ys-lyssna-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.ys-lyssna {
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background: var(--dip-blue) /* aldrig temafärg: vit ikon kräver mörk botten */;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ys-lyssna:hover { transform: translateY(-2px); }
.ys-lyssna:active { transform: translateY(0); }
.ys-lyssna:disabled { opacity: 0.5; cursor: default; transform: none; }

.ys-lyssna--stor {
  width: 88px; height: 88px; /* stor men inte enorm (Anton 2026-09-03) */
}
.ys-lyssna--stor svg { width: 36px; height: 36px; }
.ys-lyssna--liten {
  width: 44px; height: 44px;
}
.ys-lyssna--liten svg { width: 22px; height: 22px; }

.ys-lyssna__text {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-strong);
}

/* Pulsande ring medan ljudet spelas — av vid reduced motion */
.ys-lyssna.is-playing { animation: ys-puls 1.1s ease-in-out infinite; }
@keyframes ys-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 84, 179, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(79, 84, 179, 0); }
}
.ys-lyssnarpanel .ys-lyssna.is-playing {
  animation: ys-puls-panel 1.1s ease-in-out infinite;
}
@keyframes ys-puls-panel {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 247, 251, 0.28); }
  50% { box-shadow: 0 0 0 14px rgba(248, 247, 251, 0); }
}

/* =========================================================================
   .ys-sag-efter — "Säg efter"
   ========================================================================= */
.ys-sag-efter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 70px;
  justify-content: center;
}
.ys-sag-efter__prickar {
  display: flex;
  gap: 0.5rem;
}
.ys-sag-efter__prick {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 2px solid var(--border);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ys-sag-efter__prick.is-lit {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
.ys-sag-efter__text {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--accent);
}
.ys-spela-in {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-alt);
  color: var(--text-strong);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5em 1.1em;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.ys-spela-in:hover { background: var(--border); }
.ys-spela-in svg { width: 18px; height: 18px; }
.ys-spela-in.is-recording {
  background: var(--dip-hallon);
  color: #fff;
}

/* =========================================================================
   .ys-alt — svarsalternativ (--bild, --text, --rad)
   ========================================================================= */
.ys-alt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}
.ys-alt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.ys-alt:disabled { cursor: default; }
.ys-alt__ikon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: none; /* visas bara i is-ratt/is-fel */
}
.ys-alt__ikon svg { width: 20px; height: 20px; }

/* Variant: bild (kort, mittställd bild/svg ovanför ord) */
.ys-alt--bild {
  flex-direction: column;
  text-align: center;
  padding: 0.9rem;
  gap: 0.5rem;
}
.ys-alt--bild .ys-alt__bild svg { width: 100%; height: auto; max-width: 100px; display: block; }
.ys-alt--bild .ys-alt__ikon { position: absolute; top: 0.5rem; right: 0.5rem; }

/* Variant: enkel text-knapp */
.ys-alt--text { justify-content: center; text-align: center; }

/* Variant: rad (t.ex. en tabellrad man klickar på) */
.ys-alt--rad {
  justify-content: space-between;
  font-weight: 600;
}

/* Rätt: turkos bakgrund, MÖRK text (aldrig ljus text på turkos heller —
   den ligger också nära gränsen), bock-ikon. */
.ys-alt.is-ratt {
  border-color: var(--dip-turkos);
  background: var(--dip-turkos);
  color: var(--dip-morklila);
}
.ys-alt.is-ratt .ys-alt__ikon { display: flex; align-items: center; justify-content: center; color: var(--dip-morklila); }

/* Fel: hallonröd KANT + kryss-ikon. Bakgrunden förblir ljus och texten
   MÖRK — aldrig vit text på hallonröd botten (kontrasten räcker inte). */
.ys-alt.is-fel {
  border-color: var(--dip-hallon);
  background: var(--surface);
  color: var(--text-strong);
}
.ys-alt.is-fel .ys-alt__ikon { display: flex; align-items: center; justify-content: center; color: var(--dip-hallon); }

.ys-alt-grid.answered .ys-alt:not(.is-ratt):not(.is-fel) { opacity: 0.55; }

.ys-alt-grid {
  display: grid;
  gap: 0.8rem;
}
.ys-alt-grid--bild { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ys-alt-grid--rad { grid-template-columns: 1fr; }

/* =========================================================================
   .ys-feedback — role=status, ikon + hel mening + liten lyssna-knapp
   ========================================================================= */
.ys-feedback {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.02rem;
  margin-top: 1rem;
}
.ys-feedback__ikon { flex-shrink: 0; width: 26px; height: 26px; }
.ys-feedback__ikon svg { width: 26px; height: 26px; }
.ys-feedback__text { flex: 1 1 auto; }
.ys-feedback--ratt {
  background: rgba(99, 201, 168, 0.18);
  color: var(--dip-morklila);
}
.ys-feedback--ratt .ys-feedback__ikon { color: #2f8c6d; }
.ys-feedback--fel {
  background: rgba(223, 81, 110, 0.14);
  color: var(--text-strong);
}
.ys-feedback--fel .ys-feedback__ikon { color: var(--dip-hallon); }

/* =========================================================================
   .ys-regel — regel/tips-ruta. ALDRIG gul. Lavendel + blå kant.
   ========================================================================= */
.ys-regel {
  background: var(--dip-lavendel);
  border-left: 5px solid var(--dip-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  color: var(--dip-morklila);
  font-size: 0.98rem;
  margin-top: 0.9rem;
}
.ys-regel__titel {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: var(--dip-blue);
  margin-bottom: 0.3rem;
}

/* =========================================================================
   .ys-resultat — resultatvy utan procent
   ========================================================================= */
.ys-resultat {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.4rem 1rem 2rem;
}
.ys-resultat__marke { width: 92px; height: 92px; margin: 0 auto 0.9rem; }
.ys-resultat__marke svg { width: 100%; height: 100%; }
.ys-resultat__stor {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 0.4rem;
}
.ys-resultat__hjalp {
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}
.ys-resultat__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  margin-bottom: 1.6rem;
}
.ys-resultat__rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  box-shadow: var(--shadow);
}
.ys-resultat__rad-namn { font-weight: 700; color: var(--text-strong); }
.ys-resultat__rad-varde {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.ys-resultat__rad-varde svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Turkos och hallon som TEXTFÄRG mot vit botten klarar inte 4,5:1
   (~2.0:1 resp. ~3.8:1) — texten hålls mörk, ikonen (bock/kryss) får
   accentfärgen separat via currentColor satt bara på svg:en. --dip-blue
   klarar kontrasten fint som text (~6,5:1) och behåller därför sin färg. */
.ys-resultat__rad-varde.is-full { color: var(--text-strong); }
.ys-resultat__rad-varde.is-full svg { color: var(--dip-turkos); }
.ys-resultat__rad-varde.is-delvis { color: var(--dip-blue); }
.ys-resultat__rad-varde.is-ingen { color: var(--text-strong); }
.ys-resultat__rad-varde.is-ingen svg { color: var(--dip-hallon); }

.ys-resultat__knappar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* Rad "Fler ämnen att öva: 4" i stället för separata "Inte gjord"-rader
   för allt som inte påbörjats (§7.5). */
.ys-resultat__fler {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin: -0.8rem 0 1.6rem;
}

/* =========================================================================
   .ys-lyssnarpanel — mörk panel (mall 22 övningsläge 2, mall 24)
   ========================================================================= */
.ys-lyssnarpanel {
  background: var(--ys-panel-bg);
  color: var(--ys-panel-text);
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.ys-lyssnarpanel .dip-kicker { color: var(--ys-panel-text-muted); }
.ys-lyssnarpanel h2, .ys-lyssnarpanel h1 { color: var(--ys-panel-text); }
.ys-lyssnarpanel p,
.ys-lyssnarpanel .ys-lyssna__text,
.ys-lyssnarpanel__hint {
  color: var(--ys-panel-text-muted);
}
.ys-lyssnarpanel .ys-lyssna--stor {
  margin: 0.6rem auto 0.8rem;
  background: var(--dip-lila);
}
.ys-lyssnarpanel .ys-lyssna__text { color: var(--ys-panel-text); font-weight: 700; }

.ys-lyssnarpanel__antal {
  font-size: 0.85rem;
  color: var(--ys-panel-text-muted);
  margin-top: -0.4rem;
}

/* Hastighetsväxel — liten segmenterad kontroll (0,8x / 1x), §7.4: alltid
   DIREKT under den stora lyssna-knappen, inte i toppraden. Två knappar
   .ys-hastighet__seg i en gemensam .ys-hastighet-ram; den aktiva segmentet
   får .is-aktiv. */
.ys-hastighet {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 0.2rem;
  gap: 0.15rem;
  margin-top: 0.6rem;
}
.ys-hastighet__seg {
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-strong);
  padding: 0.4em 0.95em;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.ys-hastighet__seg:hover { background: rgba(43, 37, 81, 0.06); }
.ys-hastighet__seg.is-aktiv { background: var(--accent); color: #fff; }

/* Samma kontroll inne i den mörka lyssnarpanelen (mall 22/24) — se till att
   både ram och text klarar 4,5:1 mot den mörka botten. */
.ys-lyssnarpanel .ys-hastighet {
  background: rgba(248, 247, 251, 0.12);
}
.ys-lyssnarpanel .ys-hastighet__seg {
  color: var(--ys-panel-text-muted);
}
.ys-lyssnarpanel .ys-hastighet__seg:hover { background: rgba(248, 247, 251, 0.12); }
/* --dip-lila mot den ljusa panel-texten gav bara ~3,4:1 — --dip-blue klarar
   samma text bekvämt (>6:1), se kommentaren vid .ys-lyssnarpanel ovan. */
.ys-lyssnarpanel .ys-hastighet__seg.is-aktiv { background: var(--dip-blue); color: var(--ys-panel-text); }

/* =========================================================================
   .ys-forsattsblad — försättsblad som ersätter YS.demo (§7.1). Egen vy,
   centrerad, ska rymmas i 900×600 UTAN scroll: kompakta mått och gap.
   ========================================================================= */
.ys-forsattsblad {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1rem 1.4rem;
}
.ys-forsattsblad__inner {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.ys-forsattsblad__titel {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  margin: 0;
  text-align: center;
}
.ys-forsattsblad__mal {
  font-size: 1.2rem;
  color: var(--text-strong);
  max-width: 44ch;
  margin: 0;
  text-align: center;
}

/* Stegen som en lodrät lista: nummer, ikon, text i rad. Lättare att läsa
   än tre kolumner och ger plats för större text. */
.ys-forsattsblad__steg {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  max-width: 480px;
  margin: 0.2rem 0;
}
.ys-steg {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  text-align: left;
}
.ys-steg__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dip-blue);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.ys-steg__ikon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dip-morklila);
  flex-shrink: 0;
}
.ys-steg__ikon svg { width: 26px; height: 26px; }
.ys-steg__text {
  font-size: 1.05rem;
  color: var(--text-strong);
  line-height: 1.35;
}
.ys-forsattsblad__lyssna {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.ys-forsattsblad__lyssna-ikon { display: inline-flex; }
.ys-forsattsblad__lyssna-ikon svg { width: 22px; height: 22px; }
.ys-forsattsblad__lyssna.is-playing { background: var(--dip-blue); color: #fff; }
.ys-forsattsblad__knapp {
  min-width: 240px;
  margin-top: 0.2rem;
}
[dir="rtl"] .ys-steg { text-align: right; }

/* Litet gränssnitt (900×600): något tätare men samma textstorlek. */
@media (max-height: 660px) {
  .ys-forsattsblad { padding: 0.6rem 1rem 0.8rem; }
  .ys-forsattsblad__inner { gap: 0.55rem; }
  .ys-forsattsblad__steg { gap: 0.45rem; }
  .ys-steg { padding: 0.45rem 0.8rem; }
  .ys-forsattsblad__titel { font-size: clamp(1.4rem, 4vw, 1.7rem); }
  .ys-forsattsblad__mal { font-size: 1.1rem; }
}

/* =========================================================================
   .ys-hint — liten lavendelbubbla med pil, intill ett riktigt element (§7.2)
   ========================================================================= */
.ys-hint {
  position: fixed;
  z-index: 150;
  max-width: 200px;
  background: var(--dip-lavendel);
  color: var(--dip-morklila);
  border-radius: var(--radius);
  padding: 0.5em 0.85em;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.4em;
  pointer-events: none;
}
.ys-hint__pil {
  position: absolute;
  width: 13px; height: 13px;
  background: var(--dip-lavendel);
  transform: rotate(45deg);
  left: 50%;
  margin-left: -6.5px;
}
.ys-hint--over .ys-hint__pil { bottom: -6.5px; }
.ys-hint--under .ys-hint__pil { top: -6.5px; }
[dir="rtl"] .ys-hint { direction: rtl; }

/* =========================================================================
   .ys-handlingsrad — fast handlingsrad längst ned i övningsvyer (§7.4):
   sticky bottom inom .view, vit botten, tunn övre kant. Primärknappen
   ligger alltid till höger (till vänster i RTL) oavsett om sekundär-
   knappen är dold, och är alltid synlig — även `disabled` (dampad).
   ========================================================================= */
.ys-handlingsrad {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.75rem; /* följer innehållet i stället för att alltid ligga längst ned (Anton 2026-09-03) */
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.8rem 1rem;
}
.ys-handlingsrad__primar {
  margin-left: auto;
  min-width: 130px;
  white-space: nowrap;
}
[dir="rtl"] .ys-handlingsrad__primar { margin-left: 0; margin-right: auto; }

/* Aldrig stapling under 375 px — krymp text/padding i stället. */
@media (max-width: 375px) {
  .ys-handlingsrad { padding: 0.6rem 0.7rem; gap: 0.5rem; }
  .ys-handlingsrad__primar,
  .ys-handlingsrad__sekundar {
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.65em 1.1em;
  }
}

/* =========================================================================
   .ys-klocka — "Klockan och dagen" (§9.3, klockan.js). Egen vy per kort/
   fråga, byggd av Klockan.visa(). Återanvänder .ys-raknare, .ys-lyssna,
   .ys-alt-grid/.ys-alt, .ys-resultat__marke/.ys-resultat__stor och
   YS.handlingsrad från resten av lagret ovan.
   ========================================================================= */
.ys-klocka {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 0;
}
.ys-klocka__titel {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  margin: 0 0 0.5rem;
  text-align: center;
}
.ys-klocka__kort {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}
.ys-klocka__urtavla { line-height: 0; }
.ys-klocka__urtavla svg { display: block; }

/* Digital tid: alltid vänster-till-höger, även i RTL-språk — siffror ska
   inte spegla riktning. */
.ys-klocka__digital {
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  color: var(--dip-morklila);
  direction: ltr;
  unicode-bidi: isolate;
}

.ys-klocka__text {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-strong);
}

.ys-klocka__dagsdel {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dip-morklila);
  background: var(--dip-lavendel);
  border-radius: 50%;
  flex-shrink: 0;
}
.ys-klocka__dagsdel svg { width: 38px; height: 38px; }

.ys-klocka__ova .ys-lyssna-wrap { margin: 0 auto 1rem; }
.ys-klocka__resultat { text-align: center; }

/* Litet gränssnitt / smala skärmar: krymp korten, aldrig sidledsscroll. */
@media (max-width: 480px) {
  .ys-klocka { padding: 0.7rem 0.8rem 0; }
  .ys-klocka__kort { padding: 0.6rem; gap: 0.5rem; }
  .ys-klocka__digital { font-size: 1.7rem; }
  .ys-klocka__dagsdel { width: 60px; height: 60px; }
  .ys-klocka__dagsdel svg { width: 32px; height: 32px; }
}
@media (max-height: 660px) {
  .ys-klocka__kort { padding: 0.5rem; gap: 0.45rem; }
}

/* =========================================================================
   Tabeller med sidledsscroll (mall 21 m.fl.)
   ========================================================================= */
.ys-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: var(--radius);
}
.ys-scroll-x table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
}
.ys-scroll-x th, .ys-scroll-x td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.95rem;
}
.ys-scroll-x th { font-weight: 800; color: var(--heading); }

/* Synlig scrollhint på mobil: diskret skugga i högerkant + text */
.ys-scroll-x__hint {
  display: none;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
  padding: 0.2rem 0.2rem 0;
}
@media (max-width: 600px) {
  .ys-scroll-x__hint { display: block; }
  .ys-scroll-x {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
      linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to right, rgba(43,37,81,0.12), rgba(255,255,255,0) 12px),
      linear-gradient(to left, rgba(43,37,81,0.12), rgba(255,255,255,0) 12px) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* =========================================================================
   RTL — speglar pil, kanter, indrag
   ========================================================================= */
[dir="rtl"] .ys-tillbaka svg { transform: scaleX(-1); }
[dir="rtl"] .ys-karta__steg:not(:last-child)::after { margin-left: 0; margin-right: 0.7rem; }
[dir="rtl"] .ys-regel { border-left: none; border-right: 5px solid var(--dip-blue); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .dip-callout { border-left: none; border-right: 5px solid var(--dip-blue); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .ys-alt--rad { flex-direction: row-reverse; }
[dir="rtl"] .ys-alt--bild .ys-alt__ikon { right: auto; left: 0.5rem; }
[dir="rtl"] .ys-alt { text-align: right; }
[dir="rtl"] .ys-preview { right: auto; left: 0; }
[dir="rtl"] .ys-resultat__lista { text-align: right; }
[dir="rtl"] .ys-resultat__rad { flex-direction: row-reverse; }
[dir="rtl"] .ys-scroll-x th, [dir="rtl"] .ys-scroll-x td { text-align: right; }
[dir="rtl"] .ys-scroll-x__hint { text-align: left; }

/* =========================================================================
   Responsivt 360–1200 px, bas 900×600 (LMS-iframe)
   ========================================================================= */
@media (max-width: 480px) {
  .ys-start { padding: 1.1rem 0.8rem 1.6rem; }
  .ys-topp { padding-bottom: 0.8rem; flex-wrap: wrap; }
  .ys-lyssna--stor { width: 100px; height: 100px; }
  .ys-lyssna--stor svg { width: 38px; height: 38px; }
  .ys-alt-grid--bild { grid-template-columns: repeat(2, 1fr); }
  .ys-lyssnarpanel { padding: 1.3rem 1rem; }
}

/* Basdesign för typiska LMS-iframear (~900×600) — begränsa vertikal luft */
@media (max-height: 660px) and (min-width: 481px) {
  .ys-start { padding: 0.8rem 1rem 1.2rem; }
  .ys-topp { padding-bottom: 0.7rem; }
  .ys-lyssna--stor { width: 96px; height: 96px; }
  .ys-lyssna--stor svg { width: 36px; height: 36px; }
  .ys-kort-grid { gap: 0.6rem; }
}

@media (min-width: 1000px) {
  .ys-start, .ys-resultat { max-width: 780px; }
}

/* =========================================================================
   Reducerad rörelse
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .ys-lyssna.is-playing { animation: none; box-shadow: var(--shadow); }
  .ys-kort:hover, .ys-alt:hover { transform: none; }
}

/* Sista innehållet före handlingsraden får luft så det inte hamnar under den (2026-09-03) */
.ys-lyssnarpanel { margin-bottom: 0.75rem; }
.ys-feedback, .ys-regel { scroll-margin-bottom: 96px; }

/* Ordbilder (genererade illustrationer) */
.ord-bild { display: inline-block; border-radius: 14px; object-fit: contain; background: #fff; max-width: 100%; height: auto; }

/* Klockan: lärvyn som en klickbar lista (Anton 2026-09-04) */
.ys-klocka__intro { text-align: center; margin: 0 0 0.6rem; color: var(--text-strong); font-size: 1.05rem; }
.ys-klocka__listrubrik { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dip-morklila); margin: 0.6rem 0 0.4rem; text-align: center; }
.ys-klocka__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0 auto 0.4rem; width: 100%; max-width: 860px; }
.ys-klocka__listkort {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.7rem 0.5rem 0.6rem; min-height: 44px;
  background: var(--surface, #fff); color: var(--text-strong);
  border: 2px solid var(--dip-lavendel); border-radius: 14px;
  font: inherit; cursor: pointer; text-align: center;
}
.ys-klocka__listkort:hover { border-color: var(--dip-blue); }
.ys-klocka__listkort:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }
.ys-klocka__listkort.is-lyssnad { background: var(--dip-lavendel); }
.ys-klocka__listkort.is-playing { border-color: var(--dip-blue); box-shadow: 0 0 0 3px rgba(79, 84, 179, 0.25); }
.ys-klocka__listur { line-height: 0; }
.ys-klocka__listur svg { display: block; }
.ys-klocka__listdigital { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--dip-morklila); direction: ltr; unicode-bidi: isolate; }
.ys-klocka__listtext { font-weight: 700; font-size: 1rem; }
.ys-klocka__dagsdel--liten { width: 56px; height: 56px; }
.ys-klocka__dagsdel--liten svg { width: 30px; height: 30px; }
.ys-klocka__lar .ys-handlingsrad { margin-top: 0.75rem; }
@media (max-width: 480px) { .ys-klocka__lista { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } }

/* Avsluta-knapp på resultatsidan (2026-09-04) */
.ys-avsluta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 1rem auto 0.5rem; }
.ys-avsluta__text { margin: 0; max-width: 46ch; text-align: center; font-size: 0.95rem; color: var(--text-strong); }

/* =========================================================================
   Luft runt lyssnaknappen och texterna (Anton 2026-09-04): allt låg för tätt,
   särskilt i Klockans övningsfrågor. Gäller alla vyer i lagret.
   ========================================================================= */
.ys-lyssna-wrap { gap: 0.7rem; margin: 1.1rem auto 1.5rem; }
.ys-klocka__ova .ys-raknare { margin-bottom: 0.7rem; }
.ys-klocka__ova .ys-klocka__text { margin: 0 0 0.4rem; font-size: 1.2rem; }
.ys-klocka__ova .ys-lyssna-wrap { margin: 0.9rem auto 1.7rem; }
.ys-klocka__ova .ys-alt-grid { gap: 1rem; margin-bottom: 0.6rem; }
.ys-klocka__lar .ys-klocka__intro { margin-bottom: 1rem; }
.ys-feedback, .ys-regel { margin-top: 1.2rem; }
/* Lyssnarpanelen (mall 24): mer luft mellan rubrik, hjälptext, knapp och räknare */
.ys-lyssnarpanel h1 { margin: 0.4rem 0 0.6rem; }
.ys-lyssnarpanel__hint { margin: 0 0 1.1rem; }
.ys-lyssnarpanel .ys-lyssna-wrap { margin: 0.4rem auto 0.6rem; }
.ys-lyssnarpanel .ys-lyssna--stor { margin: 0.4rem auto 0.4rem; }
.ys-lyssnarpanel__antal { margin-top: 0.4rem; }

/* Handlingsraden utan vit ruta (Anton 2026-09-04): knapparna ligger direkt på
   sidans bakgrund. En mjuk toning från bakgrundsfärgen gör att raden ändå
   går att läsa när den ligger fast över innehåll som scrollar under. */
.ys-handlingsrad {
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 65%, rgba(0, 0, 0, 0));
  border-top: none;
  padding: 1rem 0.5rem 0.9rem;
}