/* ITPlugg v19.33 – runda 2: navigation, quiz-/flashcardkänsla, lektions-
   markering. Additivt CSS-lager. Inga befintliga regler skrivs över –
   bara nya, väl avgränsade klasser. */

/* ===== 0. Designtoken (dogfoodas i det här och v19.32:s lager; ändrar
   inte en enda befintlig regel i den äldre, stora stilmallen – det hade
   varit en riktig omdesign-risk snarare än en förädling) ===== */
:root{
  --v19x-radius-sm:10px;
  --v19x-radius-md:14px;
  --v19x-radius-lg:18px;
  --v19x-radius-pill:999px;
  --v19x-shadow-sm:0 1px 3px rgba(0,0,0,.10);
  --v19x-shadow-md:0 6px 18px rgba(0,0,0,.14);
  --v19x-transition-fast:150ms ease;
  --v19x-transition-base:200ms ease;
}

/* ===== 1. Navigation: luft mellan naturliga kluster i flikraden =====
   Öva (Quiz) | Lär dig (Flashcards, Lexikon, Skriv, Studieplan) | Labbar | Verktyg
   Rent visuellt – ändrar varken DOM-ordning, roller eller klickbeteende. */
nav[role="tablist"][data-v1933-grouped]{row-gap:8px}
nav[role="tablist"][data-v1933-grouped] #tabFlash{margin-left:10px}
nav[role="tablist"][data-v1933-grouped] #tabLabs{margin-left:10px}
nav[role="tablist"][data-v1933-grouped] #tabTools{margin-left:10px}
@media(max-width:640px){
  nav[role="tablist"][data-v1933-grouped] #tabFlash,
  nav[role="tablist"][data-v1933-grouped] #tabLabs,
  nav[role="tablist"][data-v1933-grouped] #tabTools{margin-left:0}
}

/* ===== 2. Quiz: tunn, tydlig progressbar ovanför "Fråga X/Y · N rätt" ===== */
.v1933-quiz-bar{width:100%;height:5px;border-radius:var(--v19x-radius-pill);background:var(--line);overflow:hidden;margin-bottom:9px}
.v1933-quiz-bar i{display:block;height:100%;width:0%;background:var(--teal);border-radius:inherit;transition:width var(--v19x-transition-base)}

/* Mjukare färgövergång när ett svar markeras rätt/fel (kompletterar befintlig
   transform/filter-transition på .opt utan att ändra logiken bakom den). */
.opt{transition:transform .12s,filter .12s,border-color var(--v19x-transition-base),background-color var(--v19x-transition-base)}

/* ===== 3. Flashcards: kort, tydlig pulsfeedback vid bedömning ===== */
@keyframes v1933Pulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.v1933-pulse{animation:v1933Pulse 220ms ease}
@keyframes v1933CardSettle{
  0%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-3px) rotate(-0.6deg)}
  100%{transform:translateY(0) rotate(0)}
}
.v1933-card-out .fi{animation:v1933CardSettle 220ms ease}
@media(prefers-reduced-motion:reduce),(prefers-reduced-motion){
  .v1933-pulse,.v1933-card-out .fi{animation:none}
}

/* ===== 4. Lektionslistor: tydlig "Nästa"-markering ===== */
.v1933-next-badge{display:inline-block;margin-left:8px;font:800 9px var(--m);letter-spacing:.06em;text-transform:uppercase;color:#062028;background:var(--amber);border-radius:var(--v19x-radius-pill);padding:2px 8px;vertical-align:middle}
.prog-lesson:has(.v1933-next-badge){border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}

/* ===== 5. Övrig hierarki-/skuggpolish (additiv, samma tokens som v19.32) ===== */
.v1932-recommended{box-shadow:var(--v19x-shadow-sm)}
.v1932-stat:hover,.v1932-activity-item:hover{box-shadow:var(--v19x-shadow-sm)}