/* GENERERAD FIL – redigera inte här. Källan är src/styles/*.css (en fil per
   område, laddas i nummerordning). Bygg om: npm run build:css (#570). */

/* ── src/styles/01-grund.css ── */
/* ==========================================================================
   Pluggporten – gemensam design
   Barnvänlig (åk 4): stora knappar, tydlig typografi, glada färger.
   ========================================================================== */

:root {
  --bla: #2f80ed;
  --bla-mork: #1b5fc0;
  --gron: #27ae60;
  --gron-mork: #1e8e4e;
  --gul: #f2c94c;
  --orange: #f2994a;
  --rod: #eb5757;
  --lila: #9b51e0;
  --rosa: #ff6b9d;
  --ljus: #f4f9ff;
  --panel: #ffffff;
  --text: #22314a;
  --text-svag: #64748b;
  --skugga: 0 6px 0 rgba(0, 0, 0, 0.12);
  --skugga-mjuk: 0 8px 24px rgba(31, 45, 74, 0.12);
  --radie: 18px;
  --font: "Baloo 2", "Segoe UI Rounded", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  /* --- Z-lager (våningsordningen), se docs/DESIGNSYSTEM.md ------------------
     Centraliserad staplingsordning så överlapp-buggfamiljen slutar uppstå.
     Värdena är exakt de som låg utspridda i filen förut – ordningen (vad som
     ligger över vad) är alltså OFÖRÄNDRAD. Två grupper:

     1) Scenens våningsordning – lokala staplingskontexter inuti .varld-stage /
        .varld-lager (spelvyn: rum, hus, by). Låga tal, jämförs bara med
        syskon i samma scen.
     2) App-ram – sidnivåns fixed/sticky-chrome (meny, nav, toast, modal).
        Höga tal, ligger ovanpå allt scen-innehåll. */

  /* 1) Scen (lokalt i spelvyn) */
  --z-scen-markor: 2;   /* små brickor i scenen: omrade-du, trädgårdens markörer */
  --z-by-lov: 1050;     /* byns säsongslöv: över hus+dekor, under namnskyltarna (#732) */
  --z-by-skylt: 1100;   /* byns namnskylt, by-du, by-last-ikon/-bubbla: över alla hus+dekor (deras z = markpunkt-y·10 ≤ 1000) */
  --z-scen-drag: 5;     /* möbel som just dras (room-item.dragging) */
  --z-scen-objekt: 6;   /* objekt/dörrar/rumslista på scenen (rum-dorr, rum-lista) */
  --z-bubbla: 6;        /* pratbubblor & tooltips (kc-bubbla) */
  --z-scen-hint: 8;     /* hint-remsa nederst i scenen (hus-hint) */
  --z-scen-ui: 12;      /* scenens overlay-kontrollskikt (varld-ui) */
  --z-panel: 14;        /* flytande scen-paneler (varld-petpanel) */
  --z-meny: 16;         /* popover-menyer i scenen (varld-verktyg-meny, varld-klass-stats) */

  /* 2) App-ram (sidnivå) */
  --z-flik-nav: 20;     /* sticky lärar-flikband (teacher-nav) */
  --z-sido-overlay: 25; /* scrim bakom off-canvas-menyn (sidebar-overlay) */
  --z-sidomeny: 30;     /* sidomenyn/sidebar */
  --z-hamburger: 40;    /* hamburger-knappen (mobil) */
  --z-toast: 50;        /* flash/toast (flash-box) */
  --z-modal: 1000;      /* modaler (cx-modal-overlay) */
}

* {
  box-sizing: border-box;
}

/* Robust göm-regel: hidden-attributet ska ALLTID dölja elementet, även när
   komponenten sätter display:flex/inline-flex/grid. Utan !important vinner en
   författar-regel som `.varld-knapp{display:inline-flex}` över webbläsarens
   svaga UA-regel `[hidden]{display:none}` och elementet blir kvar synligt –
   det var källan till hela överlapp/spök-element-buggfamiljen (t.ex.
   `.varld-knapp[hidden]` "🔭 Andra byar" som hängde kvar). Se
   docs/DESIGNSYSTEM.md. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  /* Brödtext i Baloo 2 500 – lagom rund men läsbar för längre texter. */
  font-weight: 500;
  color: var(--text);
  background: linear-gradient(160deg, #eaf3ff 0%, #f6ecff 60%, #fff6ec 100%);
  min-height: 100vh;
  font-size: 18px;
  line-height: 1.5;
}


/* ── src/styles/02-layout-meny.css ── */
/* --- Layout: bestående sidomeny + innehållsyta ---------------------------- */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* Innehållsytan (#app) ligger till höger om menyn och behåller sin läsbara
   maxbredd, centrerad i den kvarvarande ytan. */
.container {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Sidomenyn (aside) – dold som standard; visas när body har .med-sidomeny
   (dvs inloggad elev på en elevsida). Se ui.js renderTopbar(). */
.sidebar {
  display: none;
  flex-direction: column;
  gap: 18px;
  width: 264px;
  flex-shrink: 0;
  align-self: stretch;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px 18px 24px;
  /* Mjuk himmelsgradient som knyter menyn till scenens himmel (issue #373) så
     den fasta navigationen känns som en del av världen. */
  background: linear-gradient(180deg, #e9f4ff 0%, #dcebff 55%, #eef6ff 100%);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(31, 45, 74, 0.14);
  z-index: var(--z-sidomeny);
}

body.med-sidomeny .sidebar {
  display: flex;
}

/* Brand/hem-länk högst upp i menyn. */
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--bla-mork);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  padding: 4px 6px;
  text-align: left;
}

.sidebar .brand .logo {
  font-size: 1.7rem;
}
/* Loggan är en mini-port i inline-SVG (index.html, #338) – 1em följer
   font-storleken ovan; block-läget tar bort baslinje-glappet. */
.sidebar .brand .logo svg {
  display: block;
}

.sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}

.sido-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}

/* --- Profilruta överst i menyn (#701) ---------------------------------------
   En rad: avatar i vit cirkel + namn/"Min profil ›"; under den stjärnor och
   mynt som två vita piller. Mått ur preview/preview-plugga-design-forslag.html. */
.sido-karaktar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(160deg, #eaf3ff 0%, #dcebff 100%);
  border-radius: 18px;
  padding: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(47, 128, 237, 0.1);
}

.sido-profil-rad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sido-figur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(47, 128, 237, 0.18);
  font-size: 2.6rem;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sido-figur:hover {
  transform: translateY(-3px) scale(1.06) rotate(-3deg);
}

.sido-namn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 44px; /* klickyta */
  line-height: 1.1;
  text-decoration: none;
}

.sido-namn b {
  font-size: 1.25rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.sido-namn span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bla-mork);
}

.sido-namn:hover span {
  text-decoration: underline;
}

.sido-namn:focus-visible,
.sido-figur:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* Stjärnor + mynt: två lika breda vita piller. */
.sido-valuta {
  display: flex;
  gap: 6px;
}

.sido-valuta span {
  flex: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  box-shadow: 0 2px 0 rgba(31, 45, 74, 0.08);
}

/* --- Fokusläget (#436): skylt ovanför navlänkarna när klassen är låst --- */
.sido-fokus {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, #fff4d6 0%, #ffe6a8 100%);
  border: 2px solid #f2c14e;
  color: #5a3d00;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;
}

.sido-fokus-ikon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sido-fokus-text small {
  display: block;
  font-weight: 600;
  opacity: 0.8;
}

.sido-fokus:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* --- Live-rutan (#701): rosa som .big-card.rosa, bara när Live är synlig --- */
.sido-live {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ff9ebb, var(--rosa));
  color: #fff;
  text-decoration: none;
  box-shadow: var(--skugga);
  font-weight: 800;
}

.sido-live-ikon {
  font-size: 1.5rem;
}

.sido-live-text small {
  display: block;
  font-weight: 700;
  opacity: 0.92;
  font-size: 0.8rem;
}

@keyframes sido-live-puls {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.12); }
}

.sido-live-prick {
  margin-left: auto;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
  animation: sido-live-puls 1.6s ease-in-out infinite;
}

/* Eleven står på Live-sidan: ljus ram runt rutan. */
.sido-live.aktiv {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), var(--skugga);
}

.sido-live:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* --- Navlänkar: tre lägen (vila / hover / aktiv) + ikon-studs --- */
.sido-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Grupprubrik (#701) – bara grupper med rubrik och synliga länkar ritar den. */
.sido-grupp {
  margin: 6px 0 2px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8aa3;
}

@keyframes ikon-studs {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.25) rotate(-8deg); }
  70%  { transform: scale(0.95) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.sido-nav-lank {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px; /* klickyta även i de täta lägena nedan */
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #22314a;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  background: transparent;
  box-shadow: none;
  transition: background 220ms ease, box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), color 220ms ease;
}

/* Vila-ikon centrerad i sin ruta (blir en vit bricka i aktivt läge). */
.sido-nav-ikon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.35rem;
  border-radius: 10px;
  transition: background 220ms ease;
}

/* Hover (ej aktiv): mjuk lyft + gradient-glid, ikonen studsar en gång. */
.sido-nav-lank:not(.aktiv):hover {
  background: linear-gradient(160deg, #eaf3ff 0%, #ddefff 100%);
  transform: translateX(4px);
  box-shadow: 0 3px 10px rgba(47, 128, 237, 0.14);
}

.sido-nav-lank:not(.aktiv):hover .sido-nav-ikon {
  animation: ikon-studs 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sido-nav-lank:active {
  transform: scale(0.97);
}

.sido-nav-lank:not(.aktiv):hover:active {
  transform: translateX(4px) scale(0.97);
}

.sido-nav-lank:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* Aktiv: samma känsla som .big-card.bla + vit ikon-bricka och glödpunkt. */
.sido-nav-lank.aktiv {
  background: linear-gradient(160deg, #56ccf2, #2f80ed);
  color: #fff;
  box-shadow: 0 6px 14px rgba(47, 128, 237, 0.38);
}

.sido-nav-lank.aktiv .sido-nav-ikon {
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.22);
}

.sido-nav-lank.aktiv::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* --- Fot: diskret Logga ut-textknapp längst ner (#701) ---
   Rymms inte allt (lågt fönster, fokus + Live + alla moduler) scrollar menyn;
   sticky håller då Logga ut synlig längst ner i stället för under kanten. */
.sido-fot {
  margin-top: auto;
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
  padding-top: 6px;
  background: linear-gradient(180deg, rgba(238, 246, 255, 0), #eef6ff 40%);
}

.sido-logga-ut {
  background: none;
  border: 0;
  font: 700 0.95rem var(--font);
  color: var(--text-svag);
  cursor: pointer;
  padding: 6px 10px;
  min-height: 44px; /* klickyta */
  border-radius: 10px;
}

.sido-logga-ut:hover {
  color: var(--text);
  text-decoration: underline;
}

.sido-logga-ut:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* --- Valuta-chips: mynt (guld) + stjärnor (sky), enhetlig pill-form ---------
   Coins-chip delas av sidomeny, hjälte och shop. Stjärn-chip är samma form/
   storlek men med en mjuk himmelston så den gyllene stjärnan poppar (som mot
   himlen på grind-bågen) och de två valutorna hålls isär (issue #373). */
.coins,
.stars {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
}

.coins {
  background: linear-gradient(160deg, #f9dd7e, #f2c94c);
  color: #7a5c00;
  box-shadow: 0 3px 0 #d9ac1f;
}

.stars {
  background: linear-gradient(160deg, #eaf3ff, #cfe4ff);
  color: #2f5aa8;
  box-shadow: 0 3px 0 #a9c9ef;
}

.coin-svg,
.star-svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Respektera reduced-motion: stäng av sidomenyns hover-/studsanimationer. */
@media (prefers-reduced-motion: reduce) {
  .sido-figur,
  .sido-nav-lank,
  .sido-nav-ikon {
    transition: none;
  }
  .sido-live-prick {
    animation: none;
  }
  .sido-figur:hover,
  .sido-nav-lank:not(.aktiv):hover,
  .sido-nav-lank:active,
  .sido-nav-lank:not(.aktiv):hover:active {
    transform: none;
  }
  .sido-nav-lank:not(.aktiv):hover .sido-nav-ikon {
    animation: none;
  }
}

/* --- Kort skärm (skol-laptop, issue #429) ----------------------------------
   Sidomenyn ska rymmas UTAN egen scroll. Luftiga måtten ovan behövs ~575px;
   på kortare fönster tightas spacing i två steg. Höga skärmar är orörda. */
@media (max-height: 800px) {
  .sidebar {
    gap: 8px;
    padding: 14px 14px 16px;
  }
  .sidebar .brand {
    font-size: 1.2rem;
    padding: 2px 6px;
  }
  .sidebar-body,
  .sido-inner {
    gap: 8px;
  }
  .sido-karaktar {
    gap: 8px;
    padding: 10px 12px;
  }
  .sido-figur {
    width: 56px;
    height: 56px;
    font-size: 2.3rem;
  }
  .sido-nav-lank {
    padding: 9px 14px;
  }
  .sido-nav-lank.aktiv .sido-nav-ikon {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* Riktigt kort fönster: mindre avatarcirkel, tätare profilruta och lägre
   navlänkar – allt ryms ned till ~430px fönsterhöjd. */
@media (max-height: 600px) {
  .sido-karaktar {
    gap: 6px;
    padding: 6px 10px;
  }
  .sido-figur {
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
  .sido-valuta span {
    padding-block: 2px;
  }
  .sido-live {
    padding-block: 6px;
  }
  .sido-nav-lank {
    padding: 7px 14px;
  }
}

/* --- Hamburger + overlay (mobil) --- */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-hamburger);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--skugga-mjuk);
  color: var(--bla-mork);
  font-size: 1.6rem;
  cursor: pointer;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 45, 74, 0.45);
  z-index: var(--z-sido-overlay);
}

/* På mobil: menyn blir en off-canvas-låda som fälls ut med hamburgern. */
@media (max-width: 820px) {
  body.med-sidomeny .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.med-sidomeny .container {
    padding-top: 72px; /* ge plats åt den fasta hamburgerknappen */
  }

  body.med-sidomeny .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    max-height: none;
    height: 100%;
    width: min(80vw, 300px);
    border-radius: 0; /* flush mot skärmkanten som off-canvas-låda */
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }

  body.med-sidomeny.sidomeny-oppen .sidebar {
    transform: translateX(0);
  }

  body.med-sidomeny.sidomeny-oppen .sidebar-overlay {
    display: block;
  }
}

.center {
  text-align: center;
}


/* ── src/styles/03-komponenter.css ── */
/* --- Kort och paneler ------------------------------------------------------ */

.panel {
  background: var(--panel);
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 28px;
  margin: 0 auto 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.big-card {
  border: none;
  border-radius: var(--radie);
  padding: 28px 20px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--skugga);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  font-family: var(--font);
}

.big-card:hover {
  transform: translateY(-3px);
}

.big-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.big-card .emoji {
  font-size: 3.2rem;
  display: block;
  margin-bottom: 10px;
}

/* .title och .sub på var sin rad i alla kort (spanar är annars inline, #703). */
.big-card .title {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
}

.big-card .sub {
  display: block;
  font-size: 0.95rem;
  opacity: 0.92;
  margin-top: 4px;
}

.big-card.bla { background: linear-gradient(160deg, #56ccf2, var(--bla)); }
.big-card.gron { background: linear-gradient(160deg, #6fcf97, var(--gron)); }
.big-card.lila { background: linear-gradient(160deg, #bb6bd9, var(--lila)); }
.big-card.orange { background: linear-gradient(160deg, #f2c94c, var(--orange)); }
.big-card.rosa { background: linear-gradient(160deg, #ff9ebb, var(--rosa)); }

/* Låst övning: förkravet (läsförståelse) är inte klarat ännu (issue #155).
   Dämpad, ej klickbar, med en tydlig "gör läsförståelsen först"-etikett. */
.big-card:disabled { cursor: not-allowed; }
.big-card.locked {
  filter: grayscale(0.55) brightness(0.97);
  opacity: 0.72;
}
.big-card.locked:hover { transform: none; }
.big-card .card-lock {
  display: block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
}
.big-card .card-stars {
  display: block;
  margin-top: 10px;
  font-size: 1.2rem;
  letter-spacing: 2px;
  opacity: 0.85;
}
.big-card .card-stars.won { opacity: 1; }
/* Ämnesläsning (#672): diskret läst-rad i stället för stjärnor. */
.big-card .card-rad {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.92;
}

/* Tydlig hint ovanför övningskorten när läsförståelse-förkravet inte är klart. */
.prereq-note {
  background: #fff6e5;
  border: 3px solid #f2c94c;
  color: #6b4e00;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Knappar --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.15rem;
  border: none;
  border-radius: 14px;
  padding: 14px 26px;
  cursor: pointer;
  color: #fff;
  background: var(--bla);
  box-shadow: 0 5px 0 var(--bla-mork);
  transition: transform 0.06s ease;
}

.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bla-mork); }

.btn.gron { background: var(--gron); box-shadow: 0 5px 0 var(--gron-mork); }
.btn.stor { font-size: 1.3rem; padding: 18px 34px; width: 100%; }
.btn.ghost {
  background: #eef4ff;
  color: var(--bla-mork);
  box-shadow: 0 4px 0 #cdddf5;
}

/* --- Formulär -------------------------------------------------------------- */

.field {
  margin-bottom: 18px;
  text-align: left;
}

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.field input {
  width: 100%;
  font-family: var(--font);
  font-size: 1.2rem;
  padding: 14px 16px;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  background: #fbfdff;
}

.field input:focus {
  outline: none;
  border-color: var(--bla);
}

/* --- Meddelanden ----------------------------------------------------------- */

.msg {
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.msg.error {
  background: #ffe6e6;
  color: #b3261e;
  border: 2px solid #ffbdbd;
}

.msg.ok {
  background: #e5f8ec;
  color: #1e7a45;
  border: 2px solid #b6ebc9;
}

/* Icke-blockerande anmärkning (t.ex. okänd frågekategori, #467). */
.msg.warn {
  background: #fff6db;
  color: #7a5a00;
  border: 2px solid #f5dd92;
}

.hint {
  color: var(--text-svag);
  font-size: 0.95rem;
}

h1 { font-size: 2rem; margin: 0 0 8px; }
h2 { font-size: 1.5rem; margin: 0 0 12px; }

.avatar-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 8px 0 20px;
}

.avatar-opt {
  font-size: 2.6rem;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid transparent;
  background: #eef4ff;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.08s ease, border-color 0.08s ease;
}

.avatar-opt:hover {
  transform: translateY(-3px);
}

.avatar-opt.selected {
  border-color: var(--gron);
  background: #e5f8ec;
  transform: translateY(-2px);
}

/* Köpbara avatarer som eleven inte äger (#694): låsta, gråade. */
.avatar-last-hint { margin: 0; }
.avatar-pick-last .avatar-opt { opacity: 0.5; filter: grayscale(0.7); cursor: not-allowed; }
.avatar-pick-last .avatar-opt:hover { transform: none; }

/* Stor förhandsvisning av vald avatar. */
.preview {
  font-size: 5rem;
  line-height: 1;
  margin: 6px 0 12px;
}

/* Fristående karaktärs-SVG:er (avatarval, preview) skalar med font-size. */
.preview svg,
.avatar-opt svg {
  width: 1em;
  height: 1.2em;
  vertical-align: middle;
}

/* --- Sidhuvud: inloggad elev ---------------------------------------------- */

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  background: #eef4ff;
  color: var(--bla-mork);
  font-family: var(--font);
  font-weight: 800;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
}

.avatar-chip .avatar-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.avatar-chip .avatar-namn {
  font-size: 1rem;
}

.btn.liten {
  font-size: 0.95rem;
  padding: 9px 16px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.btn.ghost.liten {
  box-shadow: 0 4px 0 #cdddf5;
}

/* --- Kom-ihåg-mig ---------------------------------------------------------- */

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 18px;
  cursor: pointer;
}

.check input {
  width: 22px;
  height: 22px;
  accent-color: var(--gron);
  cursor: pointer;
}

/* --- Startsida-hero + platshållare ---------------------------------------- */

.hero-avatar {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 4px;
}

.hero .coins {
  font-size: 1rem;
}

.big-emoji {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 8px;
}

/* --- Profil: statistik ----------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.stat-card {
  border-radius: var(--radie);
  padding: 20px 16px;
  text-align: center;
  color: #fff;
  box-shadow: var(--skugga);
}

.stat-card.gul { background: linear-gradient(160deg, #f6d666, var(--gul)); color: #7a5c00; }
.stat-card.gron { background: linear-gradient(160deg, #6fcf97, var(--gron)); }
.stat-card.bla { background: linear-gradient(160deg, #56ccf2, var(--bla)); }
.stat-card.lila { background: linear-gradient(160deg, #bb6bd9, var(--lila)); }

.stat-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

.stat-tal {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 4px 0 2px;
}

.stat-etikett {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.95;
}

.spinner {
  text-align: center;
  color: var(--text-svag);
  padding: 40px;
  font-size: 1.1rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--bla-mork);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}


/* ── src/styles/04-larare-bas.css ── */
/* ==========================================================================
   Lärarsidan (teacher.js)
   ========================================================================== */

/* Länkar i lärarvyer (data-hash-navigering) ska se ut som länkar. */
.teacher-page .hint a,
.empty-state-text a {
  color: var(--bla-mork);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- Flik-navigation (sticky) --------------------------------------------- */

.teacher-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-flik-nav);
  /* Blöd ut till innehållsytans kanter så bandet täcker hela bredden. */
  margin: -24px -20px 22px;
  padding: 14px 20px;
  background: rgba(247, 250, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31, 45, 74, 0.07);
}

.teacher-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tnav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(31, 45, 74, 0.08);
  border: 2px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
    color 0.12s ease, border-color 0.12s ease;
}

.tnav:hover {
  transform: translateY(-2px);
  border-color: #d7e3f7;
  box-shadow: 0 5px 12px rgba(31, 45, 74, 0.13);
}

.tnav.active {
  background: linear-gradient(160deg, #56ccf2, var(--bla));
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 128, 237, 0.35);
}

.tnav.active:hover {
  border-color: transparent;
  transform: translateY(-2px);
}

.tnav.logout {
  margin-left: auto;
  background: #fff0f0;
  color: #b3261e;
  box-shadow: 0 2px 6px rgba(179, 38, 30, 0.12);
}

.tnav.logout:hover { border-color: #ffd0d0; }

/* Mobil: låt flikarna scrolla i en snygg rad i stället för att brytas. */
@media (max-width: 560px) {
  .teacher-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .teacher-nav-inner::-webkit-scrollbar { display: none; }
  .tnav { flex: 0 0 auto; }
  .tnav.logout { margin-left: 4px; }
}

/* --- Diskret sidtitel på undersidor --------------------------------------- */
/* Översikts-hubben (hero + genvägskort) och det stora hjälte-sidhuvudet med
   brödsmula/ingress är borttagna (issue #304) – toppnaven orienterar. Kvar är
   bara en diskret sidtitel. */

.teacher-head-slim {
  margin: 4px 2px 14px;
}

.teacher-page-title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--text);
}

.subhead { font-size: 1.15rem; margin: 0 0 12px; }

/* --- Vänligt tomtillstånd ------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 32px 22px;
  border: 2px dashed #d7e3f7;
  border-radius: var(--radie);
  background: linear-gradient(160deg, #fbfdff, #f2f8ff);
}

.empty-state-icon {
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.empty-state-title { margin: 0 0 6px; font-size: 1.2rem; color: var(--text); }

.empty-state-text {
  margin: 0 auto 16px;
  max-width: 44ch;
  color: var(--text-svag);
  font-size: 0.95rem;
}

/* --- Lärarspärr (gate) ---------------------------------------------------- */

.gate-panel { max-width: 460px; }
.gate-icon { font-size: 3.2rem; line-height: 1; display: block; margin-bottom: 4px; }


/* ── src/styles/05-larare-mork.css ── */
/* ==========================================================================
   Lärarsidan – moget MÖRKT designspråk (issue #363, epic #362)
   --------------------------------------------------------------------------
   ALL styling här är scopad under lärar-roten `.teacher-dark` (som sätts på
   lärarsidans yttersta container, .teacher-page.teacher-dark). Inget läcker
   till elevvyerna – elevsidan använder aldrig .teacher-dark. Detta är FÖRSTA
   biten (dashboard + toppnav + gate) och sätter designspråket som resten av
   lärarvyerna ärver genom att lägga till .teacher-dark på sin rot.

   Delade komponentklasser (.panel, .btn, .field, .msg, tabeller …) omdefinieras
   BARA inuti `.teacher-dark …` – deras globala (ljusa) definitioner på elev-
   sidan är orörda.
   ========================================================================== */

/* Mörk arbetsyta bakom hela lärarsidan (bara när en .teacher-dark finns i DOM).
   Ger den lugna "arbetsyta"-känslan i stället för elevsidans ljusa gradient. */
body:has(.teacher-dark) {
  background: #0b0f14;
}
body:has(.teacher-dark) .container {
  max-width: 1000px;
}
/* Route-baserad mörk bakgrund (sätts av app.js router). Kvarstår mellan flik-
   byten – till skillnad från :has(.teacher-dark) som slutar matcha när vyn byts
   ut och gör att elevsidans ljusa gradient blänker till vitt. Elevsidan (utan
   klassen) behåller sin ljusa bakgrund. */
body.larare-lage {
  background: #0b0f14;
}
body.larare-lage .container {
  max-width: 1000px;
}

.teacher-dark {
  /* Scopade tokens – enda accenten är elevsidans varumärkesgröna (röd tråd). */
  --t-bg: #0f1419;
  --t-surface: #161d26;
  --t-surface-2: #1b232e;
  --t-raised: #202a36;
  --t-border: rgba(255, 255, 255, 0.09);
  --t-border-strong: rgba(255, 255, 255, 0.16);
  --t-text: #e7edf3;
  --t-muted: #93a2b3;
  --t-accent: #2ec16e;
  --t-accent-strong: #27ae60;
  --t-accent-soft: rgba(46, 193, 110, 0.14);
  --t-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

  color: var(--t-text);
}

/* Linje-ikoner ärver textfärg och sitter snyggt på baslinjen. */
.teacher-dark .t-icon,
.tnav .t-icon,
.teacher-page-ic .t-icon {
  display: inline-block;
  vertical-align: -0.16em;
  flex: none;
}

/* --- Toppnav -------------------------------------------------------------- */
.teacher-dark .teacher-nav {
  margin: -24px -20px 26px;
  padding: 14px 22px;
  background: rgba(14, 19, 25, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--t-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.teacher-dark .teacher-nav-inner {
  gap: 6px;
}

.teacher-dark .teacher-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 10px;
  color: var(--t-text);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.teacher-dark .teacher-nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border: 1px solid rgba(46, 193, 110, 0.28);
}
.teacher-dark .teacher-nav-wordmark {
  font-size: 1.02rem;
}
.teacher-dark .teacher-nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.teacher-dark .tnav {
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--t-muted);
  font-weight: 600;
  font-size: 0.96rem;
  box-shadow: none;
  border: 1px solid transparent;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.teacher-dark .tnav:hover {
  transform: none;
  color: var(--t-text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--t-border);
  box-shadow: none;
}
.teacher-dark .tnav.active {
  color: #eafff2;
  background: var(--t-accent-soft);
  border-color: rgba(46, 193, 110, 0.4);
  box-shadow: none;
}
.teacher-dark .tnav.active .tnav-ic {
  color: var(--t-accent);
}
.teacher-dark .tnav.active:hover {
  transform: none;
  border-color: rgba(46, 193, 110, 0.55);
}
.teacher-dark .tnav.logout {
  margin-left: auto;
  background: transparent;
  color: var(--t-muted);
  box-shadow: none;
}
.teacher-dark .tnav.logout:hover {
  color: #ff9b9b;
  background: rgba(235, 87, 87, 0.1);
  border-color: rgba(235, 87, 87, 0.32);
}

/* Kompaktare nav på små skärmar: göm ordmärket, låt flikarna scrolla. */
@media (max-width: 640px) {
  .teacher-dark .teacher-nav-wordmark { display: none; }
  .teacher-dark .teacher-nav-tabs { margin-left: 2px; }
}
@media (max-width: 460px) {
  .teacher-dark .tnav .tnav-txt { display: none; }
  .teacher-dark .tnav { padding: 9px 11px; }
  .teacher-dark .tnav.logout .tnav-txt { display: none; }
}

/* --- Sidtitel ------------------------------------------------------------- */
.teacher-dark .teacher-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t-text);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.teacher-dark .teacher-page-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border: 1px solid rgba(46, 193, 110, 0.24);
}

/* --- Paneler -------------------------------------------------------------- */
.teacher-dark .panel {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  box-shadow: var(--t-shadow);
  padding: 24px;
}
.teacher-dark .subpanel {
  background: var(--t-surface-2);
  border: 1px solid var(--t-border);
  border-radius: 12px;
}
.teacher-dark .subhead {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--t-text);
  font-weight: 700;
}
.teacher-dark .subhead .t-icon { color: var(--t-accent); }
.teacher-dark h1,
.teacher-dark h2,
.teacher-dark h3 { color: var(--t-text); }
.teacher-dark .hint { color: var(--t-muted); }

/* Länkar i lärarvyer – accentgrön i stället för elevsidans blå. */
.teacher-dark .hint a,
.teacher-dark .empty-state-text a {
  color: var(--t-accent);
}

/* --- Formulär ------------------------------------------------------------- */
.teacher-dark .field label,
.teacher-dark label {
  color: var(--t-text);
}
.teacher-dark .field input,
.teacher-dark input[type="text"],
.teacher-dark input[type="password"],
.teacher-dark input[type="number"],
.teacher-dark input[type="search"],
.teacher-dark input:not([type]),
.teacher-dark select,
.teacher-dark textarea,
.teacher-dark .new-class #new-name,
.teacher-dark .new-class #new-count,
.teacher-dark .cell {
  background: var(--t-surface-2);
  border: 1.5px solid var(--t-border-strong);
  border-radius: 10px;
  color: var(--t-text);
}
.teacher-dark .field input::placeholder,
.teacher-dark input::placeholder,
.teacher-dark textarea::placeholder {
  color: #66748a;
}
.teacher-dark .field input:focus,
.teacher-dark input:focus,
.teacher-dark select:focus,
.teacher-dark textarea:focus,
.teacher-dark .new-class #new-name:focus,
.teacher-dark .new-class #new-count:focus,
.teacher-dark .cell:focus {
  outline: none;
  border-color: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-accent-soft);
}

/* --- Meddelanden ---------------------------------------------------------- */
.teacher-dark .msg.error {
  background: rgba(235, 87, 87, 0.12);
  color: #ff9d9d;
  border: 1px solid rgba(235, 87, 87, 0.35);
}
.teacher-dark .msg.ok {
  background: var(--t-accent-soft);
  color: #7ee0a6;
  border: 1px solid rgba(46, 193, 110, 0.35);
}
.teacher-dark .msg.warn {
  background: rgba(242, 201, 76, 0.12);
  color: #f5d77a;
  border: 1px solid rgba(242, 201, 76, 0.35);
}
.teacher-dark .err-inline { color: #ff9d9d; }

/* --- Knappar -------------------------------------------------------------- */
/* Primär = accentgrön (enda accenten). Platt, mogen skugga i st f 3D-kant. */
.teacher-dark .btn {
  font-weight: 700;
  font-size: 1.02rem;
  border-radius: 11px;
  padding: 12px 20px;
  color: #08130c;
  background: var(--t-accent);
  box-shadow: 0 2px 10px rgba(46, 193, 110, 0.25);
}
.teacher-dark .btn:hover { filter: brightness(1.06); }
.teacher-dark .btn:active { transform: translateY(1px); box-shadow: 0 1px 5px rgba(46, 193, 110, 0.25); }
.teacher-dark .btn.gron {
  background: var(--t-accent);
  box-shadow: 0 2px 10px rgba(46, 193, 110, 0.25);
}
.teacher-dark .btn.stor { border-radius: 12px; }

/* Sekundär "ghost" = diskret upphöjd yta med ljus text (inte blå). */
.teacher-dark .btn.ghost {
  background: var(--t-raised);
  color: var(--t-text);
  border: 1px solid var(--t-border-strong);
  box-shadow: none;
}
.teacher-dark .btn.ghost:hover {
  background: #27333f;
  border-color: rgba(46, 193, 110, 0.4);
}
.teacher-dark .btn.small {
  font-size: 0.9rem;
  padding: 8px 13px;
  border-radius: 9px;
  box-shadow: none;
}
.teacher-dark .btn.small .t-icon { color: var(--t-muted); }
.teacher-dark .btn.small:hover .t-icon { color: var(--t-accent); }
.teacher-dark .btn.danger {
  background: rgba(235, 87, 87, 0.12);
  color: #ff9d9d;
  border: 1px solid rgba(235, 87, 87, 0.3);
  box-shadow: none;
}
.teacher-dark .btn.danger:hover { background: rgba(235, 87, 87, 0.2); }
.teacher-dark .btn.danger .t-icon { color: #ff9d9d; }
.teacher-dark .btn.copied {
  background: var(--t-accent);
  color: #08130c;
  box-shadow: none;
}

/* --- Klasskort ------------------------------------------------------------ */
.teacher-dark .class-name { color: var(--t-text); }
.teacher-dark .class-emoji {
  display: inline-flex;
  align-items: center;
  color: var(--t-accent);
}
.teacher-dark .class-count {
  color: var(--t-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--t-border);
}
.teacher-dark .class-members,
.teacher-dark .class-assign,
.teacher-dark .class-modes,
.teacher-dark .class-stats {
  border-top: 1px solid var(--t-border);
}

/* --- Tomtillstånd --------------------------------------------------------- */
.teacher-dark .empty-state {
  border: 1.5px dashed var(--t-border-strong);
  background: var(--t-surface-2);
}
.teacher-dark .empty-state-icon { color: var(--t-accent); }
.teacher-dark .empty-state-title { color: var(--t-text); }
.teacher-dark .empty-state-text { color: var(--t-muted); }

/* --- Lärarspärr (gate) ---------------------------------------------------- */
.teacher-dark .back-link { color: var(--t-muted); }
.teacher-dark .back-link:hover { color: var(--t-text); }
.teacher-dark .gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 6px;
  border-radius: 16px;
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border: 1px solid rgba(46, 193, 110, 0.28);
}

/* Generella tabeller i lärar-expanders – håll dem läsbara i mörkt läge.
   (Djupare komponent-polish per vy hör till respektive följd-issue i epicen.) */
.teacher-dark table { color: var(--t-text); }
.teacher-dark th { color: var(--t-muted); }
.teacher-dark td,
.teacher-dark th {
  border-color: var(--t-border) !important;
}


/* ── src/styles/06-larare-mork-vyer.css ── */
/* ==========================================================================
   Lärarsidan – MÖRK design utrullad till ALLA lärarvyer (issue #367, epic #362)
   --------------------------------------------------------------------------
   #363 satte designspråket (tokens/bas-komponenter under `.teacher-dark`) men
   bara på dashboard + toppnav + klasslistan. Här rullas det ut till resten:
   Innehållsstudion (bibliotek + kompositör + läs/AI-editorer), klass-vyerna
   (områdesval, lägen, statistik-tabell + elevmodal) och login-korten.

   ALLT nedan är scopat under `.teacher-dark …` → elevsidan är orörd. Vyer som
   låg på <body> (elev-modalen, login-korten) har fått `.teacher-dark` PÅ sin
   egen overlay i JS, så samma scope når dem. Vi ÅTERANVÄNDER #363:s tokens
   (--t-surface/-2, --t-raised, --t-border, --t-text, --t-muted, --t-accent…).
   ========================================================================== */

/* --- KONTRAST-BUGG (prio 1): Områden-valet + alla ljusa "kort"-ytor -------
   Områdesval (renderClassAssignments) ritar .member-row-kryssrutor med vit
   bakgrund och .assign-subject-rubriker – på den mörka sidan blev de vita öar
   där texten drunknade. Gör dem till mörka upphöjda ytor med ljus text. */
.teacher-dark .member-row,
.teacher-dark .member-manage-row,
.teacher-dark .area-row,
.teacher-dark .acct-editor {
  background: var(--t-surface-2);
  border-color: var(--t-border-strong);
  color: var(--t-text);
}
.teacher-dark .member-row:hover {
  border-color: var(--t-accent);
}
.teacher-dark .member-name,
.teacher-dark .assign-subject { color: var(--t-text); }
.teacher-dark .member-row input,
.teacher-dark input[type="checkbox"],
.teacher-dark input[type="radio"] { accent-color: var(--t-accent); }

/* --- Bibliotek (Innehållsstudion) – kort + tabell har sitt block vid #441/#453 nedan */

/* Badges (typ/årskurs) – diskreta accent-chips i stället för ljusa öar. */
.teacher-dark .badge,
.teacher-dark .type-badge {
  background: var(--t-accent-soft);
  color: #a9ecc6;
}
.teacher-dark .grade-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--t-muted);
}

/* Ämnesflikar: understruken flikrad – se studiokortets block vid #453 nedan. */

/* --- Fokuserad kompositör (overlay) -------------------------------------- */
.teacher-dark .studio-composer {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.teacher-dark .composer-title { color: var(--t-text); }
.teacher-dark .composer-sub { color: var(--t-muted); }
.teacher-dark .composer-icon { color: var(--t-accent); }

/* Metod-växeln (guidat / material). */
.teacher-dark .method-switch { background: var(--t-surface-2); }
.teacher-dark .method-tab { color: var(--t-muted); }
.teacher-dark .method-tab.active {
  background: var(--t-raised);
  color: #eafff2;
  box-shadow: none;
}
/* Innehållstyp-flikar. */
.teacher-dark .ctype-tab {
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-strong);
  color: var(--t-text);
}
.teacher-dark .ctype-tab.active {
  background: var(--t-accent-soft);
  border-color: rgba(46, 193, 110, 0.4);
  color: #eafff2;
}

/* Emoji-väljaren (områdets symbol – emojin är INNEHÅLL, bara chromet mörknar). */
.teacher-dark .emoji-choice {
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-strong);
}
.teacher-dark .emoji-choice:hover { border-color: var(--t-accent); }
.teacher-dark .emoji-choice.active {
  background: var(--t-accent-soft);
  border-color: var(--t-accent);
  box-shadow: 0 0 0 1px var(--t-accent);
}
.teacher-dark .emoji-preview { background: var(--t-surface-2); }

.teacher-dark .composer-callout { background: var(--t-accent-soft); }
.teacher-dark .composer-callout .hint { color: #a9ecc6; }

/* --- Läs/AI-editorer & granska-vy ---------------------------------------- */
.teacher-dark .rv-passage { background: var(--t-surface-2); }
.teacher-dark .rv-expl { background: rgba(242, 201, 76, 0.12); }
.teacher-dark .rv-imgflag { background: rgba(255, 255, 255, 0.08); }
.teacher-dark .rv-arrow { color: var(--t-accent); }
.teacher-dark .rv-opt.correct { color: #7ee0a6; }
.teacher-dark .area-merge,
.teacher-dark .area-review { border-left-color: rgba(46, 193, 110, 0.4); }
.teacher-dark .btn.small.active { box-shadow: inset 0 0 0 2px var(--t-accent); }

/* --- Statustext, kod, felrutor ------------------------------------------- */
.teacher-dark .ok-inline,
.teacher-dark .gc-ok { color: #7ee0a6; }
.teacher-dark .err-inline,
.teacher-dark .gc-err,
.teacher-dark .ae-err { color: #ff9d9d; }
.teacher-dark .mm-main .mm-username,
.teacher-dark .lc-hint { color: var(--t-muted); }
.teacher-dark code { background: rgba(255, 255, 255, 0.08); color: #a9ecc6; }

/* --- Kontoskapande / medlemshanterare ------------------------------------ */
.teacher-dark .mm-add { border-color: var(--t-border-strong); }
.teacher-dark .mm-add[open] > summary { border-bottom-color: var(--t-border); }
.teacher-dark .cred-panel {
  background: rgba(242, 201, 76, 0.1);
  border-color: rgba(242, 201, 76, 0.4);
}
.teacher-dark .tbl th { color: var(--t-muted); border-bottom-color: var(--t-border); }
.teacher-dark .tbl .cell {
  background: var(--t-surface-2);
  border: 1.5px solid var(--t-border-strong);
  color: var(--t-text);
}
.teacher-dark .tbl .cell:focus { border-color: var(--t-accent); }
.teacher-dark .acct-tbl .ae-invalid .cell { border-color: #ff9d9d; }

/* --- Statistik-tabell (klass) -------------------------------------------- */
.teacher-dark .class-tbl .cx-corner,
.teacher-dark .class-tbl .cx-name { background: var(--t-surface); }
.teacher-dark .class-tbl .cx-corner { background: var(--t-surface-2); }
.teacher-dark .class-tbl tbody tr:nth-child(even) td,
.teacher-dark .class-tbl tbody tr:nth-child(even) .cx-name { background: rgba(255, 255, 255, 0.03); }
.teacher-dark .class-tbl .cx-head-name,
.teacher-dark .class-tbl .cx-slash,
.teacher-dark .class-tbl .cx-empty,
.teacher-dark .class-tbl .cx-total-stars { color: var(--t-muted); }
.teacher-dark .class-tbl .cx { border-left-color: var(--t-border); }
.teacher-dark .class-tbl .cx-stars,
.teacher-dark .class-tbl .cx-total-pct { color: var(--t-text); }
.teacher-dark .class-tbl .cx-bar,
.teacher-dark .class-tbl .cx-total { border-left-color: var(--t-border); }
.teacher-dark .class-tbl .cx-bar { background: rgba(255, 255, 255, 0.1); }
/* Nivåfärger som halvgenomskinliga toner så de läser mot mörk botten. */
.teacher-dark .class-tbl .cx.hog { background: rgba(46, 193, 110, 0.16); }
.teacher-dark .class-tbl .cx.mellan { background: rgba(242, 153, 74, 0.16); }
.teacher-dark .class-tbl .cx.lag { background: rgba(235, 87, 87, 0.16); }
.teacher-dark .class-tbl .cx-total.hog { color: #7ee0a6; }
.teacher-dark .class-tbl .cx-total.mellan { color: #f2b06a; }
.teacher-dark .class-tbl .cx-total.lag { color: #ff9d9d; }
.teacher-dark .class-tbl .cx-total.tom { color: var(--t-muted); }
.teacher-dark .class-tbl tr.cx-row:hover td,
.teacher-dark .class-tbl tr.cx-row:hover .cx-name,
.teacher-dark .class-tbl tr.cx-row:focus-visible td,
.teacher-dark .class-tbl tr.cx-row:focus-visible .cx-name { background: var(--t-accent-soft); }
.teacher-dark .class-tbl .cx-row-more { color: var(--t-accent); }
.teacher-dark .cx-legend { color: var(--t-muted); }
.teacher-dark .cx-legend-tip { color: var(--t-accent); }
.teacher-dark .cx-dot.tom { background: rgba(255, 255, 255, 0.12); }

/* --- Elev-modal (per-elev-fördjupning) ----------------------------------- */
.teacher-dark .cx-modal {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.teacher-dark .cx-modal-close { background: var(--t-raised); color: var(--t-muted); }
.teacher-dark .cx-modal-close:hover { background: #27333f; color: var(--t-text); }
.teacher-dark .cx-modal-sub,
.teacher-dark .cx-stat-of,
.teacher-dark .cx-stat-lbl,
.teacher-dark .cx-chip-lbl,
.teacher-dark .cx-subject-block h4 { color: var(--t-muted); }
.teacher-dark .cx-stat { background: var(--t-surface-2); }
.teacher-dark .cx-stat-num { color: var(--t-text); }
.teacher-dark .cx-area-stars,
.teacher-dark .cx-mode-val { color: var(--t-text); }
.teacher-dark .cx-area-row { border-top-color: var(--t-border); }
.teacher-dark .cx-area-bar,
.teacher-dark .cx-detail-total-bar { background: rgba(255, 255, 255, 0.1); }
.teacher-dark .cx-mode { background: var(--t-surface-2); }
.teacher-dark .cx-mode.tom .cx-mode-val { color: var(--t-muted); }
.teacher-dark .cx-chip.weak { background: rgba(235, 87, 87, 0.16); color: #ff9d9d; }
.teacher-dark .cx-chip.not { background: rgba(255, 255, 255, 0.06); color: var(--t-muted); }

/* --- Statistik-flikar + Läsresan-lärarvy (issue #402) ----------------------
   Klasskortets Statistik-panel har flikarna Ämnen | Läsresan. Läsresans tabell
   (teacher-lasresan.js) och elevdetalj (teacher-lasresan-elev.js) använder
   prefixet lrt- (lr- hör till elevens lasresan.css). */
.teacher-dark .stats-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 14px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border);
  border-radius: 12px;
}
.teacher-dark .stats-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.teacher-dark .stats-tab:hover { color: var(--t-text); background: rgba(255, 255, 255, 0.05); }
.teacher-dark .stats-tab.active { background: var(--t-accent-soft); color: var(--t-accent); }
.teacher-dark .stats-tab:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }

.teacher-dark .lrt-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.teacher-dark .lrt-title { margin: 0; }
.teacher-dark .lrt-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--t-muted);
  font-size: 0.88rem;
}
.teacher-dark .lrt-summary b { color: var(--t-text); }

.teacher-dark .lrt-tbl { min-width: 720px; }
.teacher-dark .lrt-tbl th,
.teacher-dark .lrt-tbl td { padding: 8px 8px; border-bottom: 1px solid var(--t-border); }
.teacher-dark .lrt-tbl td,
.teacher-dark .lrt-tbl .lrt-name { font-size: 0.95rem; }
.teacher-dark .lrt-num { text-align: right; font-variant-numeric: tabular-nums; }
.teacher-dark .lrt-th { padding: 4px 2px; white-space: nowrap; }
.teacher-dark .lrt-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.teacher-dark .lrt-th.lrt-num .lrt-sort { justify-content: flex-end; }
.teacher-dark .lrt-sort:hover { color: var(--t-text); background: rgba(255, 255, 255, 0.05); }
.teacher-dark .lrt-sort:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -2px; }
.teacher-dark .lrt-th.active .lrt-sort { color: var(--t-accent); }
.teacher-dark .lrt-arrow { font-size: 0.7rem; opacity: 0.55; }
.teacher-dark .lrt-th.active .lrt-arrow { opacity: 1; }

.teacher-dark .lrt-row { cursor: pointer; }
.teacher-dark .lrt-row:nth-child(even) th,
.teacher-dark .lrt-row:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.teacher-dark .lrt-row:hover th,
.teacher-dark .lrt-row:hover td,
.teacher-dark .lrt-row:focus-visible th,
.teacher-dark .lrt-row:focus-visible td { background: var(--t-accent-soft); }
.teacher-dark .lrt-row:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -2px; }
.teacher-dark .lrt-tbl .lrt-name { font-weight: 600; color: var(--t-text); white-space: nowrap; text-align: left; }
.teacher-dark .lrt-name .cx-avatar { margin-right: 6px; }
.teacher-dark .lrt-badge {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--t-muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.teacher-dark .lrt-not-started td { color: var(--t-muted); }
.teacher-dark .lrt-dash { color: var(--t-muted); }
.teacher-dark .lrt-of { color: var(--t-muted); font-weight: 500; font-size: 0.85em; }
.teacher-dark .lrt-pct { font-weight: 700; }
.teacher-dark .lrt-pct.hog { color: #7ee0a6; }
.teacher-dark .lrt-pct.mellan { color: #f2b06a; }
.teacher-dark .lrt-pct.lag { color: #ff9d9d; }
.teacher-dark .lrt-lvl {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(86, 156, 255, 0.16);
  color: #a9cbff;
  font-weight: 700;
}
.teacher-dark .lrt-lvl.start { background: rgba(255, 255, 255, 0.06); color: var(--t-muted); }
.teacher-dark .lrt-world { white-space: nowrap; }
.teacher-dark .lrt-legend { margin-top: 10px; flex-wrap: wrap; }

/* Elevdetalj (modal) */
.teacher-dark .lrt-stat-grid .cx-stat-num { font-size: 1.35rem; }
.teacher-dark .lrt-stat-world .cx-stat-num { font-size: 1.1rem; }
.teacher-dark .lrt-stat-level { background: rgba(86, 156, 255, 0.12); }
.teacher-dark .lrt-stat-level .cx-stat-num { color: #a9cbff; }
.teacher-dark .lrt-stat-grid .lrt-pct.hog .cx-stat-num { color: #7ee0a6; }
.teacher-dark .lrt-stat-grid .lrt-pct.mellan .cx-stat-num { color: #f2b06a; }
.teacher-dark .lrt-stat-grid .lrt-pct.lag .cx-stat-num { color: #ff9d9d; }
.teacher-dark .lrt-pips { display: flex; justify-content: center; gap: 3px; margin-top: 6px; }
.teacher-dark .lrt-pip { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.teacher-dark .lrt-pip.on { background: #6aa8ff; }
.teacher-dark .lrt-hidden-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--t-muted);
  font-size: 0.8rem;
}
.teacher-dark .lrt-cats { display: grid; gap: 12px; }
.teacher-dark .lrt-cat-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 0.92rem;
}
.teacher-dark .lrt-cat-name { color: var(--t-text); font-weight: 600; }
.teacher-dark .lrt-cat-val b { color: var(--t-text); }
.teacher-dark .lrt-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.teacher-dark .lrt-bar > span { display: block; height: 100%; border-radius: 999px; }
.teacher-dark .lrt-cat.hog .lrt-bar > span { background: #2ec16e; }
.teacher-dark .lrt-cat.mellan .lrt-bar > span { background: #f2994a; }
.teacher-dark .lrt-cat.lag .lrt-bar > span { background: #eb5757; }
.teacher-dark .lrt-cat.hog .lrt-cat-val b { color: #7ee0a6; }
.teacher-dark .lrt-cat.mellan .lrt-cat-val b { color: #f2b06a; }
.teacher-dark .lrt-cat.lag .lrt-cat-val b { color: #ff9d9d; }
.teacher-dark .lrt-att-tbl { min-width: 480px; }
.teacher-dark .lrt-att-tbl th,
.teacher-dark .lrt-att-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--t-border); }
.teacher-dark .lrt-att-tbl td { font-size: 0.9rem; }
.teacher-dark .lrt-att-title { color: var(--t-text); font-weight: 600; }
.teacher-dark .lrt-date { white-space: nowrap; color: var(--t-muted); }
.teacher-dark .lrt-empty { margin: 4px 0; }

/* --- Läsresan-nivåstyrning (issue #506) ------------------------------------
   teacher-lasresan-niva.js: korten "Ändra klassens startnivå" / "Ändra nivå för
   hela klassen" ovanför Läsresan-tabellen, bekräftelsedialogen och "Ändra nivå"
   i elevdetaljen. Prefix lrn-. */
.teacher-dark .lrn-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin: 6px 0 14px;
}
.teacher-dark .lrn-card {
  padding: 12px 14px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border);
  border-radius: 12px;
}
.teacher-dark .lrn-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-size: 0.98rem;
  color: var(--t-text);
}
.teacher-dark .lrn-card-title .t-icon { color: var(--t-accent); }
.teacher-dark .lrn-what { margin: 0 0 8px; color: var(--t-muted); font-size: 0.86rem; line-height: 1.4; }
.teacher-dark .lrn-what b { color: var(--t-text); font-weight: 600; }
.teacher-dark .lrn-now { margin: 0 0 8px; font-size: 0.9rem; }
.teacher-dark .lrn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.teacher-dark .lrn-row label { color: var(--t-muted); font-size: 0.86rem; font-weight: 600; }
.teacher-dark .lrn-row select { padding: 6px 10px; font: inherit; font-size: 0.9rem; max-width: 220px; }
.teacher-dark .lrn-msg:not(:empty) { margin-top: 10px; }
.teacher-dark .lrn-msg .msg { margin: 0; font-size: 0.88rem; }
.teacher-dark .lrn-pending-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(242, 201, 76, 0.14);
  color: #f5d77a;
  font-size: 0.78rem;
  font-weight: 700;
}
.teacher-dark .lrn-student .lrn-status { margin: 0 0 8px; }
.teacher-dark .lrt-lvl.lrn-has-pending { background: rgba(242, 201, 76, 0.16); color: #f5d77a; white-space: nowrap; }
.teacher-dark .lrn-confirm-box { max-width: 480px; }
.teacher-dark .lrn-confirm-title { margin: 0 0 12px; font-size: 1.15rem; color: var(--t-text); }
.teacher-dark .lrn-facts { display: grid; gap: 6px; margin: 0 0 12px; }
.teacher-dark .lrn-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--t-surface-2);
  border-radius: 9px;
}
.teacher-dark .lrn-facts dt { color: var(--t-muted); }
.teacher-dark .lrn-facts dd { margin: 0; font-weight: 700; color: var(--t-text); }
.teacher-dark .lrn-confirm-body { margin: 0 0 14px; color: var(--t-muted); font-size: 0.9rem; line-height: 1.45; }
.teacher-dark .lrn-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* --- Statistik → Per område (issue #446) ---------------------------------
   Klasstabell per ämne/område (teacher-plugga.js) + djupdykning per kategori
   (teacher-plugga-elev.js). Bygger på lrt-klasserna ovan; prefix pp-. */
.teacher-dark .pp-pickers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.teacher-dark .pp-pickers .field { flex: 1 1 220px; max-width: 320px; margin-bottom: 8px; }
.teacher-dark .pp-teacher .lrt-summary { margin: 4px 0 10px; }
.teacher-dark .pp-sum-cat { white-space: nowrap; }
.teacher-dark .pp-sum-cat.hog b { color: #7ee0a6; }
.teacher-dark .pp-sum-cat.mellan b { color: #f2b06a; }
.teacher-dark .pp-sum-cat.lag b { color: #ff9d9d; }
.teacher-dark .pp-tbl { min-width: 680px; }
.teacher-dark .pp-stars { white-space: nowrap; }
.teacher-dark .pp-cats-head { text-align: center; white-space: nowrap; }
.teacher-dark .pp-cats-lbl {
  display: block;
  color: var(--t-muted);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.teacher-dark .pp-cats-cell { text-align: center; }
.teacher-dark .pp-minibars { display: inline-flex; align-items: flex-end; gap: 5px; height: 24px; vertical-align: middle; }
.teacher-dark .pp-minibars.head { height: auto; }
.teacher-dark .pp-minibars.none { align-items: center; }
.teacher-dark .pp-minibar,
.teacher-dark .pp-minibar-head { width: 14px; text-align: center; font-size: 0.72rem; line-height: 1; }
.teacher-dark .pp-minibar {
  display: flex;
  align-items: flex-end;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.teacher-dark .pp-minibar > span { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.teacher-dark .pp-minibar.hog > span { background: #2ec16e; }
.teacher-dark .pp-minibar.mellan > span { background: #f2994a; }
.teacher-dark .pp-minibar.lag > span { background: #eb5757; }
.teacher-dark .pp-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--t-muted);
  font-size: 0.86rem;
}
.teacher-dark .pp-note .t-icon { flex: none; margin-top: 2px; }
.teacher-dark .pp-cat-src { margin: 10px 0 0; font-size: 0.85rem; }
.teacher-dark .pp-callout {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border-left: 3px solid #eb5757;
  background: rgba(235, 87, 87, 0.1);
  color: var(--t-text);
  font-size: 0.92rem;
}
.teacher-dark .pp-callout.mellan { border-left-color: #f2994a; background: rgba(242, 153, 74, 0.1); }
.teacher-dark .pp-callout.hog { border-left-color: #2ec16e; background: rgba(46, 193, 110, 0.1); }
.teacher-dark .pp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 1px;
}
.teacher-dark .pp-badge.weak { background: rgba(235, 87, 87, 0.18); color: #ff9d9d; }
.teacher-dark .pp-badge.strong { background: rgba(46, 193, 110, 0.16); color: #7ee0a6; }
.teacher-dark .lrt-cat.pp-weakest {
  margin: -6px;
  padding: 6px;
  border-radius: 10px;
  outline: 1px dashed rgba(235, 87, 87, 0.45);
}
.teacher-dark .pp-starrow { color: #f2c94c; letter-spacing: 1px; white-space: nowrap; }
.teacher-dark .pp-starrow .off { color: rgba(255, 255, 255, 0.15); }

/* --- Login-korten (utskriftsvänliga) -------------------------------------
   Overlayen + verktygsraden mörknar; SJÄLVA korten hålls vita med mörk text –
   de är fysiska utdelningskort som ska skrivas ut på papper (print-vänligt),
   inte en "ljus ö" i UI:t. @media print nedan är oförändrad. */
.teacher-dark.login-cards-overlay { background: var(--t-bg); }
.teacher-dark .lc-title { color: var(--t-text); }


/* --- Ämnesläsning i lärarstatistiken (issue #674) -------------------------
   Källfiltret Alla / Läsresan / Ämnesläsning i Läsresan-fliken
   (teacher-lasresan.js) + sektionen "📖 Ämnesläsning" i Per område
   (teacher-amneslasning.js, bygger på lrt-/pp-klasserna ovan). */
.teacher-dark .lrt-srcs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  background: var(--t-surface-2);
}
.teacher-dark .lrt-src {
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.teacher-dark .lrt-src:hover { color: var(--t-text); }
.teacher-dark .lrt-src.active { background: var(--t-accent); color: #fff; }
.teacher-dark .lrt-src:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .lrt-att-src { font-size: 0.85em; }
.teacher-dark .am-teacher { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--t-border); }
.teacher-dark .am-title { display: flex; gap: 6px; align-items: center; margin: 0 0 4px; }
.teacher-dark .am-teacher .lrt-summary { margin: 4px 0 10px; }
.teacher-dark .am-tbl { min-width: 600px; }

/* ── src/styles/07-larare-listor.css ── */
/* --- Paneler och layout ---------------------------------------------------- */

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}

.subpanel {
  background: #f6faff;
  border: 2px solid #e2ecfb;
  border-radius: 14px;
  padding: 18px;
  margin: 12px 0 4px;
}

/* --- Knappvarianter -------------------------------------------------------- */

.btn.small {
  font-size: 0.95rem;
  padding: 9px 16px;
  border-radius: 12px;
  box-shadow: 0 3px 0 #cdddf5;
}

.btn.danger {
  background: #fdecec;
  color: #b3261e;
  box-shadow: 0 4px 0 #f3c4c4;
}

.btn.copied {
  background: var(--gron);
  color: #fff;
  box-shadow: 0 4px 0 var(--gron-mork);
}

.file-btn { position: relative; overflow: hidden; }

/* --- Formulärkontroller ---------------------------------------------------- */

.select {
  font-family: var(--font);
  font-size: 1.1rem;
  padding: 12px 14px;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text);
  cursor: pointer;
}

.select:focus { outline: none; border-color: var(--bla); }

.json-input {
  width: 100%;
  min-height: 260px;
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 14px 16px;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text);
  resize: vertical;
}

.json-input:focus { outline: none; border-color: var(--bla); }

/* --- Lista med arbetsområden ---------------------------------------------- */

.area-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.area-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.area-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #e2ecfb;
  border-radius: 14px;
  background: #fbfdff;
}

/* Inline-formuläret "Lägg till nytt innehåll" som fälls ut under en områdesrad. */
.area-merge {
  margin-left: 14px;
  border-left: 3px solid #cfe0f7;
  padding-left: 12px;
}
.area-merge .subpanel { margin: 0; }

/* Read-only "granska"-vy som fälls ut under en områdesrad (issue #66). */
.area-review {
  margin-left: 14px;
  border-left: 3px solid #cfe0f7;
  padding-left: 12px;
}
.area-review .subpanel { margin: 0; }
.btn.small.active { box-shadow: inset 0 0 0 2px var(--bla); }

.rv-panel { display: flex; flex-direction: column; gap: 18px; }
.rv-section { display: flex; flex-direction: column; gap: 8px; }
.rv-h { margin: 0; font-size: 1.05rem; }
.rv-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }

.rv-q-text { font-weight: 700; margin-bottom: 4px; }
.rv-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-opt { display: flex; gap: 6px; align-items: baseline; }
.rv-opt.correct { font-weight: 700; color: var(--gron-mork, #1e7a3a); }
.rv-mark { flex: none; }

.rv-passage, .rv-expl {
  background: #f0f6ff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
}
.rv-expl { background: #fff7e6; }
.rv-tag { font-weight: 700; margin-right: 4px; }

.rv-pairs { padding-left: 0; list-style: none; }
.rv-pair { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rv-term { font-weight: 700; }
.rv-arrow { color: var(--bla-mork); flex: none; }
.rv-imgflag {
  display: inline-block;
  font-size: 0.8rem;
  background: #eef4ff;
  border-radius: 8px;
  padding: 1px 6px;
}

.rv-text-title { font-weight: 700; margin-bottom: 4px; }

.area-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.area-emoji { font-size: 1.9rem; }

.area-name { font-weight: 800; }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bla-mork);
  background: #eef4ff;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}

.error-list {
  margin: 6px 0 0;
  padding-left: 20px;
}

.error-list li { margin-bottom: 3px; }

code {
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  background: #eef4ff;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* --- AI-prompter ----------------------------------------------------------- */

.code-block {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  background: #f6faff;
  border: 2px solid #e2ecfb;
  border-radius: 14px;
  padding: 16px;
  max-height: 340px;
  overflow: auto;
  margin: 0;
}

/* --- Elevkontotabell ------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.tbl th {
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-svag);
  padding: 8px 8px;
  border-bottom: 2px solid #e2ecfb;
}

.tbl td {
  padding: 6px 8px;
  vertical-align: middle;
}

.tbl .cell {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 10px 12px;
  border: 2px solid #d7e3f7;
  border-radius: 10px;
  background: #fbfdff;
}

.tbl .cell:focus { outline: none; border-color: var(--bla); }

.tbl .avatar-sel {
  font-size: 1.2rem;
  padding: 8px 10px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.btn-row.center {
  justify-content: center;
}


/* ── src/styles/08-avatar-klader.css ── */
/* --- Avatar med kläder (SVG-karaktär + SVG-klädsel per slot) --------------- */

/* Figuren är en inline SVG i viewBox 100×120; containern är 1em × 1.2em så
   allt fortfarande skalar med font-size och samma markup funkar litet
   (sidhuvud) som stort (hjältebild). Klädseln läggs i slot-boxar satta i %
   av containern – de träffar det gemensamma ankargriddet (se art-style.js)
   som alla karaktärer ritas på, så en hatt sitter rätt på alla figurer. */
.avatar-figure {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1.2em;
  line-height: 1;
  vertical-align: -0.2em;
}

.avatar-figure .af-base {
  position: absolute;
  inset: 0;
}

.avatar-figure .af-base svg,
.avatar-figure .af-wear svg {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-figure .af-wear {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  /* emoji-fallback (om en klädsak saknar SVG-konst) */
  font-size: 0.4em;
  text-align: center;
}

/* Slot-boxar i % av containern (100 bred × 120 hög i viewBox-mått):
   hatt sjunker mot hjässan (y≈14), ansikte över ögonen (y=34),
   hals hänger från kraglinjen (y≈58), hand vid höger tass (79,77).
   rygg (manteln) hänger från axel-/halslinjen och ritas BAKOM figuren
   (af-rygg-spannet ligger före af-base i DOM, se avatarMarkup). */
.af-wear.af-hatt { top: -6%; left: 50%; width: 62%; height: 26%; transform: translateX(-50%); }
.af-wear.af-ansikte { top: 21%; left: 50%; width: 50%; height: 16%; transform: translateX(-50%); }
.af-wear.af-hals { top: 44%; left: 50%; width: 46%; height: 22%; transform: translateX(-50%); }
.af-wear.af-hand { top: 26%; left: 65%; width: 32%; height: 46%; }
.af-wear.af-rygg { top: 28%; left: 50%; width: 68%; height: 54%; transform: translateX(-50%); }

/* Ansiktssaker som hör hemma på över-läppen istället för ögonlinjen (mustasch):
   sätts av avatarMarkup via af-anchor-mun när wearablen har anchor:"mun". Flyttar
   ner ansikts-boxen så saken landar på mun-ankaret (y≈46) på alla figurer, som
   följer samma normaliserade ansiktsmodell (se art-style.js / art-wearables-ansikte.js). */
.af-wear.af-ansikte.af-anchor-mun { top: 31%; }


/* ── src/styles/09-butik.css ── */
/* --- Shop ------------------------------------------------------------------ */

.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.shop-saldo {
  text-align: center;
  font-weight: 700;
  color: var(--text-svag);
  font-size: 0.85rem;
  white-space: nowrap;
}

.shop-saldo .coins {
  padding: 8px 16px 8px 12px;
  font-size: 1.15rem;
  margin-top: 4px;
}

/* --- Shop-flikar (kategori-tabbar) ---------------------------------------- */
/* Klibbig flikrad högst upp i katalogen: en flik per kategori som har varor.
   Aktiv flik markerad; endast den aktiva kategorins varor visas under raden. */
.shop-tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-flik-nav);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 6px;
  background: rgba(247, 250, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.shop-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(31, 45, 74, 0.08);
  border: 2px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
    color 0.12s ease, border-color 0.12s ease;
}

.shop-tab:hover {
  transform: translateY(-2px);
  border-color: #d7e3f7;
  box-shadow: 0 5px 12px rgba(31, 45, 74, 0.13);
}

.shop-tab.active {
  background: linear-gradient(160deg, #56ccf2, var(--bla));
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 128, 237, 0.35);
}

.shop-tab.active:hover {
  border-color: transparent;
  transform: translateY(-2px);
}

.shop-tab-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

/* Mobil: låt flikarna scrolla i en rad i stället för att brytas i flera rader. */
@media (max-width: 560px) {
  .shop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shop-tabs::-webkit-scrollbar { display: none; }
  .shop-tab { flex: 0 0 auto; }
}

.shop-cat {
  margin-bottom: 22px;
}

.shop-cat h2 {
  margin: 6px 0 12px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

/* Baksidan-flikens underrubriker (#358): sektioner i samma scrollande flik. */
.shop-underrubrik {
  margin: 22px 0 10px;
  font-size: 1.1rem;
}

.shop-underrubrik:first-of-type {
  margin-top: 4px;
}

/* Baksidans klickbara sub-flikar (#364): en rad chips inne i Baksidan-panelen –
   klickas i stället för att scrolla. Håller sig i linje med huvudflikarna men är
   nedtonade (sekundärnivå) och wrappar/scrollar snyggt på liten skärm. */
.shop-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 16px;
}

.shop-subtab {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: #eef3fb;
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease,
    border-color 0.12s ease, box-shadow 0.12s ease;
}

.shop-subtab:hover {
  transform: translateY(-1px);
  border-color: #d7e3f7;
}

.shop-subtab.active {
  background: linear-gradient(160deg, #56ccf2, var(--bla));
  color: #fff;
  box-shadow: 0 3px 9px rgba(47, 128, 237, 0.3);
}

/* Mobil: låt sub-flikarna scrolla i en rad i stället för att spränga layouten. */
@media (max-width: 560px) {
  .shop-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shop-subtabs::-webkit-scrollbar { display: none; }
  .shop-subtab { flex: 0 0 auto; }
}

.shop-card {
  background: var(--panel);
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 3px solid transparent;
}

.shop-card.is-owned {
  border-color: #b6ebc9;
  background: #f3fcf6;
}

.shop-emoji {
  font-size: 2.8rem;
  line-height: 1;
}

/* Shop-/lådsaker ritas som SVG och skalar med font-size. */
.shop-emoji svg,
.tray-emoji svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
}

/* Kategori-ikon i rubriken (SVG i stället för emoji). */
.cat-ico {
  display: inline-block;
  vertical-align: -0.22em;
}
.cat-ico svg {
  width: 1.35em;
  height: 1.35em;
}

.shop-namn {
  font-weight: 700;
  font-size: 0.98rem;
}

.buy-btn {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: #fff;
  background: var(--gron);
  box-shadow: 0 4px 0 var(--gron-mork);
  transition: transform 0.06s ease;
  margin-top: 4px;
  width: 100%;
  /* Text + pris-chip sitter på samma rad, centrerade. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pris-chip på köp-knappen (ersätter den gamla separata prisraden). */
.buy-pris {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: #7a5c00;
  background: var(--gul);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.9rem;
}
/* "Har inte råd": priset syns men tonas ned. */
.buy-btn.nej .buy-pris { opacity: 0.6; }

.buy-btn:hover:not(:disabled) { filter: brightness(1.03); }
.buy-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--gron-mork); }

.buy-btn.kopt {
  background: #e5f8ec;
  color: #1e7a45;
  box-shadow: 0 4px 0 #b6ebc9;
  cursor: default;
}

.buy-btn.nej {
  background: #eef1f6;
  color: #94a3b8;
  box-shadow: 0 4px 0 #dbe2ec;
  cursor: not-allowed;
}


/* ── src/styles/10-rum.css ── */
/* --- Mitt rum -------------------------------------------------------------- */

.room-stage {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: var(--radie);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--skugga-mjuk);
  /* Rum enligt designfacit: vägg + panelband upptill i elevens palettfärger
     (--rum-wall/--rum-wall2 sätts av Mitt rum, default = persika-paletten);
     plankgolvet (#C9996B, ritas som SVG i .room-bg) täcker nedersta 38 %
     och färgas ALDRIG om. Ljus takrand & mörkare panelfot räknas fram ur
     palettfärgen med color-mix. */
  --rum-wall: #ffe9cc;
  --rum-wall2: #fbd9a6;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--rum-wall) 72%, #fff) 0%,
      var(--rum-wall) 36%, var(--rum-wall) 49.3%,
      rgba(59, 51, 80, 0.25) 49.3%, rgba(59, 51, 80, 0.25) 50%,
      var(--rum-wall2) 50%,
      color-mix(in srgb, var(--rum-wall2) 88%, #8a6242) 62%, #c9996b 62%);
  touch-action: none;
}

/* Bakgrundslagret (plankgolv + fönster) – under sakerna, tar inga pekare. */
.room-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-bg .room-floor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 38%;
  display: block;
}

/* Fönstret är numera ett interaktivt rums-objekt (flyttbart/raderbart) och
   ritas som en .room-item, inte i bakgrunden. Storleken hålls oförändrad
   (klamp mot scenbredden) och skalas INTE med --rum-skala. */
.room-window-item {
  width: clamp(120px, 24%, 190px);
  font-size: 0;
}

.room-window-item .rw-svg {
  display: block;
  width: 100%;
  pointer-events: none;
}

.room-window-item .rw-svg svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Spökgardinen (#785) ska täcka ett fönster, och fönstret har golvet 120 px
   (clamp ovan) medan vanliga saker skalas med scenbredden – på mobil blev
   gardinen då bara ~70 px. Samma klamp-kurva som fönstret, +5 % marginal;
   desktop (200 px) = w 8 i hw-art-inne.js. Höjd ur viewBox 76:88. */
.room-item[data-id^="hw-spokgardin"] .ri-emoji {
  width: clamp(126px, 25.5cqw, 200px) !important;
  height: auto !important;
  aspect-ratio: 76 / 88;
}

/* --- Palettväljaren (Måla om – delas av Mitt rum & hus-vyn) ---------------- */

.palett-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.palett-knapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 3px solid #e3d9f2;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.palett-knapp:hover {
  transform: translateY(-2px);
}

.palett-knapp.vald {
  border-color: var(--lila, #7c5cd6);
  box-shadow: 0 4px 0 rgba(124, 92, 214, 0.25);
}

.palett-farger {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #3b3350;
}

.palett-farger span {
  width: 22px;
  height: 26px;
  display: block;
}

.palett-namn {
  font-size: 0.85rem;
  font-weight: 700;
  color: #3b3350;
}

/* Husskal-väljaren ("Nytt hus") – samma knapp-look som paletten, men varje
   ruta visar en liten förhandsvisning av husets exteriör (färgas av paletten). */
.hus-skal-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hus-skal-knapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 3px solid #e3d9f2;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.hus-skal-knapp:hover {
  transform: translateY(-2px);
}

.hus-skal-knapp.vald {
  border-color: var(--lila, #7c5cd6);
  box-shadow: 0 4px 0 rgba(124, 92, 214, 0.25);
}

.hus-skal-bild {
  width: 76px;
  height: 68px;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(#e8f6fd, #d7efe0);
  border: 2px solid #3b3350;
}

.hus-skal-bild svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hus-skal-namn {
  font-size: 0.85rem;
  font-weight: 700;
  color: #3b3350;
}

/* Moln som driver förbi i fönstret – ren transform-animation (låg CPU). */
.rum-moln {
  animation: rum-moln-driva var(--t, 40s) linear infinite;
  will-change: transform;
}

@keyframes rum-moln-driva {
  from { transform: translateX(-70px); }
  to { transform: translateX(290px); }
}

@media (prefers-reduced-motion: reduce) {
  .rum-moln { animation: none; }
}

.room-empty {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5b6b86;
  font-weight: 700;
  text-align: center;
  width: 80%;
}

/* ---------------------------------------------------------------------------
   Rums-växlaren (flerrums-huset, issue #34): dörrar inne på väggarna + en liten
   rumslista högst upp. Ligger ovanpå rummets innehåll (z-index) men under
   overlay-panelerna. Delas av eget rum (.varld-lager.room-stage) och
   klasskamratens läs-vy (.room-stage.readonly).
   --------------------------------------------------------------------------- */
.rum-lista {
  position: absolute;
  /* Sitter under scenens topp-rad (.varld-ui-topp: "Mitt rum 🛏️" + knappar,
     ~46 px hög) i stället för i samma topp-zon – annars ritas pill-raden ovanpå
     titeln och de överlappar. På mobil är topp-raden lägre (ikon-knappar), så
     samma offset ger fortfarande luft. */
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 4px;
  z-index: var(--z-scen-objekt);
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--o, #3b3350);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(59, 51, 80, 0.18);
  max-width: 94%;
  overflow-x: auto;
}
.rum-flik {
  border: 0;
  background: transparent;
  color: #4a4066;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
}
.rum-flik:hover { background: rgba(59, 51, 80, 0.1); }
.rum-flik.aktiv {
  background: #f7c948;
  color: #3b3350;
  box-shadow: inset 0 0 0 2px #3b3350;
}

.rum-dorrar { pointer-events: none; }
/* Dörren sitter på VÄGGEN (inte på golvet framför spelaren, issue #59): läget
   sätts som centrum-koordinater inline (left/top %) av växlaren och centreras
   med translate(-50%,-50%). Den är flyttbar (drag) → cursor:grab + touch-action
   avstängd så pekdraget inte skrollar sidan. */
.rum-dorr {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: var(--z-scen-objekt);
  pointer-events: auto;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  cursor: grab;
  padding: 0;
  filter: drop-shadow(0 2px 3px rgba(59, 51, 80, 0.28));
}
.rum-dorr.dragging { cursor: grabbing; }
/* display:flex ovan skulle förr slå ut hidden – nu täcks det av den globala
   [hidden]{display:none!important}-regeln högst upp, så dörren döljs i
   första/sista rummet utan en egen override. */
.rum-dorr-svg { width: clamp(48px, 13cqw, 90px); display: block; }
.rum-dorr-svg svg { width: 100%; height: auto; display: block; }
.rum-dorr-nr {
  font-weight: 800;
  font-size: 0.72rem;
  color: #3b3350;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #3b3350;
  border-radius: 999px;
  padding: 0 7px;
  white-space: nowrap;
}
.rum-dorr:hover .rum-dorr-svg { transform: translateY(-2px); }
/* Ett djur som dras över en dörr (#698): dörren lyser – släpp = flytta dit. */
.rum-dorr.dorr-mal { filter: drop-shadow(0 0 8px rgba(255, 196, 64, 0.95)); }
.rum-dorr.dorr-mal .rum-dorr-svg { transform: translateY(-2px) scale(1.08); }
.rum-dorr-svg { transition: transform 0.12s ease; }
@media (prefers-reduced-motion: reduce) {
  .rum-dorr-svg { transition: none; }
}

.room-item {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  font-size: 2.6rem;
  line-height: 1;
  user-select: none;
  touch-action: none;
}

.room-item .ri-emoji {
  display: block;
  pointer-events: none;
  width: 3.6rem;
  height: 3.6rem;
}

/* Placerad sak: SVG fyller sin ruta och skalar snyggt (behåller proportioner). */
.room-item .ri-emoji svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.room-item.dragging {
  cursor: grabbing;
  z-index: var(--z-scen-drag);
}

.room-item.selected {
  outline: 3px dashed var(--lila);
  outline-offset: 4px;
  border-radius: 10px;
}

.ri-remove {
  position: absolute;
  top: -14px;
  right: -14px;
  border: none;
  background: var(--rod);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.room-item.selected .ri-remove {
  display: block;
}


/* --- ⟳ Rotera / ↔ Vänd (#699) ------------------------------------------------
   Spegelvänd sak: bara bilden vänds (inte 🗑️ eller nodens translate). */
.room-item .ri-emoji.spegel,
.garden-item .gi-bild.spegel {
  transform: scaleX(-1);
}

/* Knapparna vid den markerade saken – egen nod i scenen (rum-promenad-golv.js
   sakVerktygHtml), ovanför saken på golvet (.upp) och under den på väggen.
   Stora runda knappar (48 px) som går att träffa på Chromebook och surfplatta. */
.sak-verktyg {
  position: absolute;
  transform: translate(-50%, 22px);
  display: flex;
  gap: 10px;
  z-index: var(--z-scen-drag);
  pointer-events: auto;
}
.sak-verktyg.upp {
  transform: translate(-50%, calc(-100% - 22px));
}
.sak-verktyg-knapp {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--lila);
  background: #fff;
  color: #3b3350;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(59, 51, 80, 0.25);
  touch-action: manipulation;
}
.sak-verktyg-knapp:hover,
.sak-verktyg-knapp:focus-visible {
  background: #f3ecff;
}
.sak-verktyg-knapp:active {
  transform: scale(0.94);
}
/* Under en drag följer knapparna inte med – dölj dem tills saken släppts. */
.room-stage:has(.room-item.dragging) .sak-verktyg,
.tradgard-lager:has(.garden-item.dragging) .sak-verktyg {
  visibility: hidden;
}

/* ── src/styles/11-tradgard.css ── */
/* --- Trädgården: köpta utomhussaker placerade i ute-scenen (issue #132) -----
   Lagret ligger OVANPÅ husScen-SVG:n i #ute-lager. pointer-events:none så klick
   på huset/gräset går vidare till scenen; varje sak slår på pointer-events själv.
   container-type:inline-size → sakernas cqw-storlek mäts mot scenens bredd (samma
   idé som .varld-lager.room-stage), och --gard-koeff/--gard-cap sätter skalan. */
.tradgard-lager {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: inline-size;
  --gard-koeff: 2.4;
  --gard-cap: 34px;
}

.garden-item {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  line-height: 1;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  z-index: var(--z-scen-markor);
}

.garden-item .gi-bild {
  display: block;
  pointer-events: none;
}

.garden-item .gi-bild svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Mjuk markskugga så sakerna sitter fast i gräset, inte svävar. */
  filter: drop-shadow(0 3px 2px rgba(59, 51, 80, 0.18));
}

.garden-item.dragging {
  cursor: grabbing;
  z-index: var(--z-scen-drag);
}

.garden-item.selected {
  outline: 3px dashed var(--lila);
  outline-offset: 4px;
  border-radius: 10px;
}

.garden-item .gi-remove {
  position: absolute;
  top: -14px;
  right: -14px;
  border: none;
  background: var(--rod);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.garden-item.selected .gi-remove {
  display: block;
}

.room-tray,
.wear-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tray-item,
.wear-item {
  font-family: var(--font);
  cursor: pointer;
  background: #eef4ff;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  transition: transform 0.08s ease;
}

.tray-item:hover,
.wear-item:hover {
  transform: translateY(-3px);
}

.tray-emoji {
  font-size: 2rem;
  line-height: 1;
}

.tray-namn {
  font-size: 0.85rem;
  font-weight: 700;
}

/* "Mina djur"-lådan: mystery-djurens sprite-rigg är höjd-driven (aspect-ratio),
   så thumbnailen behöver en fast-höjd-ruta för att inte kollapsa. Procedurella
   SVG-djur skalar redan via .tray-emoji svg. */
.tray-pet-sprite {
  display: inline-block;
  height: 2.6rem;
  vertical-align: middle;
}

/* Bondgårdsdjurens placerings-rader i "Mina djur" (#330): konst + namn + tre
   platsval (Rummet/Hagen/Ladan). Aktivt val är ifylld knapp (disabled), övriga
   ghost. Raden spänner hela lådans bredd (bryter flex-flödet av tray-kort). */
.djurtray-farm-hint { flex-basis: 100%; margin: 6px 0 0; }
.djurtray-farm-rad {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef4ff;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  padding: 8px 14px;
}
.djurtray-farm-rad .tray-emoji svg { width: 2.2rem; height: 2.2rem; display: block; }
.djurtray-farm-val {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wear-item .wear-state {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--bla-mork);
}

.wear-item.on {
  border-color: var(--gron);
  background: #e5f8ec;
}

.wear-item.on .wear-state {
  color: var(--gron-mork);
}


/* ── src/styles/12-flash.css ── */
/* --- Flash / toast --------------------------------------------------------- */

.flash-box {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.flash {
  background: var(--gron);
  color: #fff;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--skugga-mjuk);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
}

.flash.show {
  opacity: 1;
  transform: translateY(0);
}

.flash.error {
  background: var(--rod);
}


/* ── src/styles/13-larare-klassoversikt.css ── */
/* --- Klassöversikt (lärarsidan, #/larare/klass) ---------------------------- */

.class-tbl {
  min-width: 720px;
  font-size: 0.92rem;
}

/* Elevkolumnen fastnålad till vänster så namnet syns när man scrollar i sidled.
   OBS: z-index 1/2 här är en avsiktligt LOKAL stapling inuti den skrollbara
   tabellen (fastnålad cell vs. hörn) – den rör inte scenens/appens våningsordning
   och lämnas därför som literaler i stället för globala --z-tokens. */
.class-tbl .cx-corner,
.class-tbl .cx-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
}

.class-tbl thead th {
  vertical-align: bottom;
  text-align: center;
}

.class-tbl .cx-corner {
  z-index: 2;
  background: #f6faff;
}

.class-tbl .cx-head {
  min-width: 84px;
  max-width: 120px;
}

.class-tbl .cx-head-emoji {
  display: block;
  font-size: 1.2rem;
}

.class-tbl .cx-head-name {
  display: block;
  font-size: 0.8rem;
  color: var(--text-svag);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.class-tbl .cx-total-head {
  min-width: 74px;
  text-align: center;
}

.class-tbl tbody tr:nth-child(even) td,
.class-tbl tbody tr:nth-child(even) .cx-name {
  background: #f9fbff;
}

.class-tbl .cx-name {
  font-weight: 700;
  white-space: nowrap;
  padding-right: 14px;
}

.class-tbl .cx-avatar {
  font-size: 1.2rem;
  margin-right: 6px;
}

.class-tbl .cx {
  text-align: center;
  border-left: 1px solid #eef2f9;
}

.class-tbl .cx-stars {
  display: block;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--bla-mork);
  white-space: nowrap;
}

.class-tbl .cx-slash {
  color: var(--text-svag);
  font-weight: 600;
}

.class-tbl .cx-bar {
  display: block;
  height: 6px;
  margin: 4px auto 0;
  width: 80%;
  background: #e2ecfb;
  border-radius: 999px;
  overflow: hidden;
}

.class-tbl .cx-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gron);
}

.class-tbl .cx-empty {
  color: var(--text-svag);
  font-size: 0.8rem;
  font-style: italic;
}

/* Nivåfärger (bakgrundston + stapel). */
.class-tbl .cx.hog { background: #eafaf0; }
.class-tbl .cx.mellan { background: #fff7e6; }
.class-tbl .cx.lag { background: #fdecef; }
.class-tbl .cx.hog .cx-bar-fill { background: var(--gron); }
.class-tbl .cx.mellan .cx-bar-fill { background: var(--orange); }
.class-tbl .cx.lag .cx-bar-fill { background: var(--rosa); }

.class-tbl .cx-total {
  text-align: center;
  font-weight: 800;
  border-left: 2px solid #e2ecfb;
}

.class-tbl .cx-total-pct {
  display: block;
  font-size: 1.05rem;
}

.class-tbl .cx-total-stars {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-svag);
}

.class-tbl .cx-total.hog { color: var(--gron-mork); }
.class-tbl .cx-total.mellan { color: #b9770f; }
.class-tbl .cx-total.lag { color: #c0396a; }
.class-tbl .cx-total.tom { color: var(--text-svag); }

.cx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-svag);
}

.cx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cx-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.cx-dot.hog { background: #8fe0ab; }
.cx-dot.mellan { background: #f6c777; }
.cx-dot.lag { background: #f4a0b8; }
.cx-dot.tom { background: #e2ecfb; }

.cx-legend-tip {
  margin-left: auto;
  color: var(--bla-mork);
  font-weight: 600;
}

/* Klickbara elevrader → fördjupad statistik. */
.class-tbl tr.cx-row {
  cursor: pointer;
}
.class-tbl tr.cx-row:hover td,
.class-tbl tr.cx-row:hover .cx-name,
.class-tbl tr.cx-row:focus-visible td,
.class-tbl tr.cx-row:focus-visible .cx-name {
  background: #eaf3ff;
}
.class-tbl tr.cx-row:focus-visible {
  outline: 2px solid var(--bla);
  outline-offset: -2px;
}
.class-tbl .cx-row-more {
  float: right;
  color: var(--bla);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.12s;
}
.class-tbl tr.cx-row:hover .cx-row-more,
.class-tbl tr.cx-row:focus-visible .cx-row-more {
  opacity: 1;
}

/* --- Per-elev-fördjupning (modal, lärarsidan) ------------------------------ */

.cx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(20, 30, 50, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px;
  overflow-y: auto;
  animation: cx-fade 0.14s ease;
}

@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }

.cx-modal {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 720px;
  padding: 22px 24px 26px;
  box-shadow: 0 18px 50px rgba(20, 30, 50, 0.28);
  margin: auto 0;
}

.cx-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: #f0f4fb;
  color: var(--text-svag);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.cx-modal-close:hover { background: #e2ecfb; color: var(--bla-mork); }

.cx-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-right: 32px;
}
.cx-modal-avatar { font-size: 2.6rem; }
.cx-modal-name { margin: 0; font-size: 1.5rem; }
.cx-modal-sub { margin: 2px 0 0; color: var(--text-svag); font-size: 0.85rem; }

/* Nyckeltalskort */
.cx-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cx-stat {
  background: #f6faff;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}
.cx-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bla-mork);
  line-height: 1.1;
}
.cx-stat-num.cx-stat-when { font-size: 1.05rem; }
.cx-stat-of { color: var(--text-svag); font-weight: 600; font-size: 0.9rem; }
.cx-stat-lbl {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--text-svag);
  line-height: 1.2;
}

.cx-detail-total {
  margin: 14px 0 4px;
}
.cx-detail-total-bar {
  height: 10px;
  background: #e2ecfb;
  border-radius: 999px;
  overflow: hidden;
}
.cx-detail-total-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gron);
}
.cx-detail-total.mellan .cx-detail-total-bar > span { background: var(--orange); }
.cx-detail-total.lag .cx-detail-total-bar > span { background: var(--rosa); }
.cx-detail-total.tom .cx-detail-total-bar > span { background: #cfdcef; }

.cx-detail-sec { margin-top: 20px; }
.cx-detail-sec h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.cx-chip-lbl {
  margin: 8px 0 6px;
  font-size: 0.8rem;
  color: var(--text-svag);
  font-weight: 600;
}
.cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.cx-chip-emoji { font-size: 0.95rem; }
.cx-chip.weak { background: #fdecef; color: #c0396a; }
.cx-chip.not { background: #eef2f9; color: var(--text-svag); }
.cx-chip b { font-weight: 800; }

.cx-subject-block { margin-bottom: 16px; }
.cx-subject-block h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--text-svag);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cx-area-row {
  padding: 8px 0;
  border-top: 1px solid #eef2f9;
}
.cx-area-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cx-area-name { font-weight: 700; }
.cx-area-emoji { margin-right: 6px; }
.cx-area-stars {
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--bla-mork);
}
.cx-area-bar {
  height: 6px;
  background: #e2ecfb;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0;
}
.cx-area-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gron);
}
.cx-area-bar.mellan > span { background: var(--orange); }
.cx-area-bar.lag > span { background: var(--rosa); }
.cx-area-bar.tom > span { background: transparent; }

.cx-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-mode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: #f6faff;
}
.cx-mode.tom { opacity: 0.55; }
.cx-mode-val { font-weight: 800; color: var(--bla-mork); }
.cx-mode.tom .cx-mode-val { color: var(--text-svag); }

@media (max-width: 560px) {
  .cx-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cx-modal { padding: 20px 16px 22px; border-radius: 16px; }
}


/* ── src/styles/14-utveckling.css ── */
/* --- Utveckling (karaktärs-evolution, #/elev/utveckling) ------------------- */

.evo-hero {
  font-size: 5.5rem;
}

.evo-stegrad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 6px;
}

.evo-steg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
}

.evo-steg-prick {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  background: #e2ecfb;
  color: var(--bla-mork);
}

.evo-steg.klar .evo-steg-prick,
.evo-steg.nu .evo-steg-prick {
  background: var(--gron);
  color: #fff;
}

.evo-steg.nu .evo-steg-prick {
  box-shadow: 0 0 0 4px #b9ecc9;
}

.evo-steg-text {
  font-weight: 800;
  font-size: 0.85rem;
}

.evo-steg-krav {
  font-size: 0.78rem;
  color: #7c88a6;
  font-weight: 700;
}

.evo-pil {
  font-size: 1.3rem;
  color: #b9c6e0;
  font-weight: 800;
}

.evo-status {
  font-size: 1.05rem;
  margin-top: 8px;
}

/* Nivå + XP-mätare på utvecklingssidan */
.evo-niva-rad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}

.evo-niva-badge {
  background: #eef4ff;
  color: #3a5bbf;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 1.1rem;
}

.evo-niva-xp {
  color: #7c88a6;
  font-weight: 700;
}

.evo-xp-bar {
  height: 16px;
  background: #eaf0fb;
  border-radius: 999px;
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto 6px;
}

.evo-xp-fyll {
  height: 100%;
  background: linear-gradient(90deg, #6fa8ff, #3a5bbf);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Grenvalskorten (sista steget) */
.evo-gren-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
}

.evo-gren {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 18px;
  border: 4px solid transparent;
  background: #eef4ff;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.08s ease, border-color 0.08s ease;
}

.evo-gren:hover {
  transform: translateY(-3px);
}

.evo-gren.selected {
  border-color: var(--gron);
  background: #e5f8ec;
}

.evo-gren-bild {
  font-size: 4.2rem;
  line-height: 1;
}

.evo-gren-bild svg {
  width: 1em;
  height: 1.2em;
}

.evo-gren-namn {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--bla-mork);
}

.evo-gren-desc {
  font-size: 0.88rem;
  color: #5d6a89;
  font-weight: 600;
}
/* --- Klasskamratens rum (läs-endast) ------------------------------------- */
.klasskamrat-figur {
  font-size: 4.2rem;
  line-height: 1;
  margin-bottom: 6px;
}

/* Läs-läge: rummets saker är inte flyttbara/valbara – bara att titta på. */
.room-stage.readonly .room-item.readonly {
  cursor: default;
}

/* Låst hus: kamratens läs-vy visar detta i stället för rummet (#33). */
.klasskamrat-last {
  padding: 32px 24px;
}
.klasskamrat-last-ikon {
  font-size: 4.6rem;
  line-height: 1;
  margin-bottom: 8px;
}


/* ── src/styles/15-larare-klasshantering.css ── */
/* ==========================================================================
   Klasshantering (#/larare/klasser) – teacher-classes.js
   Additivt tillägg (håll separat för enkel rebase).
   ========================================================================== */

.new-class {
  margin-top: 14px;
  align-items: center;
}

.new-class #new-name {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid #dbe6f5;
  border-radius: 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
}

.new-class #new-name:focus {
  outline: none;
  border-color: var(--bla);
}

.class-card {
  margin-top: 14px;
}

.class-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.class-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.class-emoji {
  font-size: 1.4rem;
}

.class-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}

.class-count {
  font-size: 0.82rem;
  color: var(--text-svag);
  background: #eef4fd;
  padding: 2px 10px;
  border-radius: 999px;
}

.class-members,
.class-assign {
  margin-top: 14px;
  border-top: 2px dashed #e2ecfb;
  padding-top: 14px;
}

.assign-group {
  margin-bottom: 12px;
}

.assign-subject {
  font-weight: 700;
  margin-bottom: 6px;
}

.assign-result {
  margin-left: 4px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid #e6eefa;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}

.member-row:hover {
  border-color: var(--bla);
}

.member-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--gron);
}

.member-avatar {
  font-size: 1.2rem;
}

.member-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Övningstyper-kryssrutor (Fix område): etikett + kort hjälptext på två rader,
   så återanvänder vi .member-row/.member-name men släpper ellips-klippningen. */
#ex-types .member-row {
  align-items: flex-start;
}
#ex-types .member-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
#ex-types .member-name .hint {
  font-weight: 400;
}

.ok-inline {
  color: var(--gron-mork);
  font-weight: 600;
}

.err-inline {
  color: var(--rod);
  font-weight: 600;
}


/* ── src/styles/16-husdjur-sida.css ── */
/* --- Mitt husdjur (#/elev/husdjur) – ägg, varelse och tillväxt ------------ */
.pet-figur { margin: 14px auto; }
.pet-figur svg { width: 100%; height: 100%; display: block; }
.pet-agg { width: 150px; height: 150px; }
/* Varelsen växer i 3 steg – sista steget rätt stort. */
.pet-stage-1 { width: 110px; height: 110px; }
.pet-stage-2 { width: 175px; height: 175px; }
.pet-stage-3 { width: 270px; height: 270px; max-width: 80vw; }
.pet-wiggle { animation: pet-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes pet-wiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-4deg); }
  90% { transform: rotate(4deg); }
  94% { transform: rotate(-2deg); }
}
.pet-pop { animation: pet-pop 0.6s ease-out; }
@keyframes pet-pop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.pet-nedrakning { font-size: 1.25rem; font-weight: 700; }
.pet-steg { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.pet-steg-chip {
  padding: 6px 14px; border-radius: 14px; background: var(--ljus);
  border: 2px solid rgba(0, 0, 0, 0.08); font-weight: 700; line-height: 1.15;
}
.pet-steg-chip small { font-weight: 600; opacity: 0.7; }
.pet-steg-chip.aktiv { background: var(--gul); border-color: rgba(0, 0, 0, 0.15); }
.pet-steg-chip.klar { background: #d9f4e4; }


/* ── src/styles/17-larare-klasser-konton.css ── */
/* Lärare: "Ge coins" i elevlistan */
.give-coins-cell { vertical-align: middle; }
.give-coins .gc-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.give-coins .gc-amount { width: 64px; text-align: center; }
.give-coins .gc-flash { margin-top: 6px; font-size: 0.9rem; min-height: 1.1em; }
.give-coins .gc-ok { color: #1e7a45; font-weight: 700; }
.give-coins .gc-err { color: #b3261e; font-weight: 700; }

/* ==========================================================================
   Klasser & elevkonton (#/larare/klasser) – enad sida: kontoskapande +
   medlemshantering (teacher-classes.js / teacher-class-accounts.js).
   ========================================================================== */

/* Antal-fältet i "Skapa ny klass"-formuläret. */
.new-class #new-count {
  flex: 0 0 96px;
  width: 96px;
  padding: 10px 12px;
  border: 2px solid #dbe6f5;
  border-radius: 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.new-class #new-count:focus { outline: none; border-color: var(--bla); }

/* Panel med genererade inloggningsuppgifter (visas en gång vid skapande). */
.cred-panel {
  margin-top: 12px;
  border: 2px solid #f2d98a;
  background: #fffaef;
  border-radius: 14px;
  padding: 12px 14px;
}
.mm-creds:empty { display: none; }
.mm-creds .cred-panel { margin-top: 0; margin-bottom: 14px; }
.cred-warn { font-weight: 600; margin-bottom: 10px; line-height: 1.35; }
.cred-tbl td.cred-user,
.cred-tbl td.cred-pass {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
}

/* Medlemshanteraren under "Elever" på ett klasskort. */
.subhead.sm { font-size: 1rem; margin: 4px 0 10px; }
.member-manage { display: flex; flex-direction: column; gap: 12px; }
.mm-list { display: flex; flex-direction: column; gap: 10px; }

.member-manage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  border: 2px solid #e6eefa;
  border-radius: 12px;
  background: #fff;
}
.mm-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-main .mm-namn { width: 150px; }
.mm-main .mm-username { width: 120px; color: var(--text-svag); }
.mm-save-flash { font-size: 0.88rem; min-height: 1.1em; }
.mm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* Utfällbara paneler: skapa nya konton / lägg till befintliga. */
.mm-add {
  border: 2px dashed #e2ecfb;
  border-radius: 12px;
  padding: 4px 12px;
}
.mm-add > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 2px;
  list-style: none;
}
.mm-add > summary::-webkit-details-marker { display: none; }
.mm-add[open] > summary { border-bottom: 2px dashed #e2ecfb; margin-bottom: 10px; }
.mm-add-body { padding-bottom: 10px; }
.mm-add-body .mm-count { width: 80px; text-align: center; }
.mm-create-flash, .mm-link-flash { font-size: 0.9rem; }


/* ── src/styles/18-varld.css ── */
/* ============================================================================
   Husvärlden (#/elev/hus + #/elev/rum) – EN spelscen med kamerazoom-nivåer
   ============================================================================
   Scenen (.varld-stage) täcker större delen av innehållsytan och innehåller
   fullstora LAGER (.varld-lager) – ett per zoomnivå (ute/rummet, senare byn).
   Kameran (varld-kamera.js) sätter transform/transform-origin/opacity inline;
   timing & easing (samma som gamla .gar-in-zoomen: 900 ms, cubic-bezier,
   origin mot fönstret) ligger här. Sidomenyn påverkas inte – bara #app-ytan
   breddas i världsläget (body.varld-lage sätts av routern). */

body.varld-lage .container {
  max-width: 1440px;
}

.varld-stage {
  position: relative;
  width: 100%;
  /* Höjden fyller innehållsytan minus header/marginaler. 100dvh (inte 100vh)
     räknar bort mobilens dynamiska webbläsar-chrome, så scenen inte hamnar
     under adressfältet. vh-raden är en fallback för mycket gamla motorer.
     OBS: på DESKTOP (>700px) blir scenen kant-i-kant (se @media längre ner) men
     scen-BOXEN (.varld-lager) hålls kvar i den här storleken så objekten aldrig
     zoomas – bara mer övertecknad himmel/mark visas runt om (issue #373). */
  height: clamp(420px, calc(100vh - 150px), 900px);
  height: clamp(420px, calc(100dvh - 150px), 900px);
  border-radius: var(--radie);
  overflow: hidden;
  box-shadow: var(--skugga-mjuk);
  background: #bde3f5;
  margin-bottom: 16px;
  /* Avatarens storlek i scen-koordinater (px i ute-SVG:ns viewBox). En
     framtida by-nivå sätter ett mindre värde på sina hus-kopior. */
  --varld-avatar-font: 120px;
}

/* KANT-I-KANT IMMERSIV VÄRLD på DESKTOP (issue #373, > 700px) ----------------
   Scenen fyller HELA ytan till höger om sidomenyn – ingen läsbar maxbredd, ingen
   lavendel-marginal, ingen kortram. VIKTIGT: objekten (hus/avatar/UFO/sol/
   minihus/djur) behåller EXAKT sin gamla storlek. Det löser vi genom att hålla
   scen-lagren (.varld-lager) kvar i den GAMLA scen-boxens mått, centrerade i det
   nu full-bleed:ade staget. Ute-scenernas övertecknade himmel/gräs (svg
   overflow:visible) svämmar då ut BORTOM lagret och fyller den extra ytan → man
   ser MER himmel/mark runt om i stället för förstorade objekt. Kameran (inline
   transform på lagren) är opåverkad. Rummet undantas (kaklet/väggen ska fylla
   ut kant-i-kant och möblerna är redan cap:ade i storlek → ingen zoom där).
   Brytpunkten är 820px = exakt där sidomenyn fortfarande är FAST (över 820) i
   stället för off-canvas. Under 820px (off-canvas-meny + hamburger = "mobil"/
   surfplatta) rörs scenen INTE – den ser ut precis som förr, och den fasta
   hamburgern krockar aldrig med scenens topp-kontroller. */
@media (min-width: 821px) {
  body.varld-lage .container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .varld-stage {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* Scen-boxen = gamla scen-måtten, centrerad i staget (margin:auto + inset:0).
     Ute-svg:n fyller lagret (100 %) → objekten får sin gamla skala; översikts-
     overlays (gårdsdjur, odling, minihus) sitter kvar i % av samma box → allt
     linjerar exakt som förr. Rummet (.room-stage) undantas och fyller staget. */
  .varld-lager:not(.room-stage) {
    inset: 0;
    width: min(calc(100% - 40px), 1400px);
    height: clamp(420px, calc(100dvh - 150px), 900px);
    margin: auto;
  }

  /* By-/skol-scenerna ritar marken med preserveAspectRatio="none" (fyller BARA
     scen-boxen, ingen överteckning). För att slippa en synlig söm (grön yta OVAN
     scenens himmelsrand) förankras deras box i TOPPEN: himmelsranden hamnar då
     högst upp och den extra ytan under/vid sidorna fylls av samma gräsgröna som
     staget-botten. Ute-nivåerna (hus/gård…) fylls i stället av svg:ns
     övertecknade natur och förblir vertikalt centrerade. */
  .varld-lager.varld-by,
  .varld-lager.varld-skola {
    margin-top: 0;
    margin-bottom: auto;
  }
  .varld-stage[data-niva="by"],
  .varld-stage[data-niva="skola"],
  .varld-stage[data-niva="grannby"] {
    background: #a8da8f;
  }
}

.varld-lager {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.55s ease 0.25s;
  will-change: transform, opacity;
}
.varld-lager.varld-dold { visibility: hidden; }
.varld-lager.varld-utan-anim { transition: none !important; }

/* Ute-scenen ritas med preserveAspectRatio="xMidYMid meet" så att hus + avatar
   + all natur ALLTID får plats (inget beskärs på korta/breda eller smala/höga
   skärmar). overflow:visible låter den övertecknade himlen/gräset (ritade långt
   utanför viewBoxen) fylla ut letterbox-ytan i stället för att lämna tomma
   kanter – .varld-stage (overflow:hidden) klipper det mot scenramen. */
.varld-ute svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Elevens avatar framför huset (foreignObject i ute-SVG:n → skalar med scenen).
   Botten-justerad (flex-end) och fyller foreignObject:ens höjd, så fötterna
   står kvar på marklinjen (foreignObject-botten) medan extrautrymmet hamnar
   OVANFÖR huvudet – där ger det plats åt hattar/kepsar utan att de klipps. */
.varld-avatar {
  font-size: var(--varld-avatar-font, 120px);
  line-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.varld-avatar .avatar-figure { vertical-align: top; }

/* Rummets lager återanvänder .room-stage-utseendet (väggfärger m.m.) men
   fyller hela scenen i stället för att vara ett eget block. */
.varld-lager.room-stage {
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  /* KOHERENT SKALNING: rummet ska se ut som SAMMA rum i olika storlek på alla
     bredder – möbler, djur OCH deras inbördes avstånd (procent-positioner) ska
     krympa/växa TILLSAMMANS. Tidigare var storleken fast (rem × --rum-skala med
     en fast desktop/mobil-breakpoint) medan positionerna var i procent → på en
     smal scen blev sakerna ~samma pixelstorlek men avstånden få pixlar, så allt
     "klumpades mot mitten".
     Lösning: scenen är en container (container-type: inline-size) och saker mäts
     i en "rums-enhet" som följer scenBREDDEN kontinuerligt
     (1cqw = 1 % av scenbredden). Därmed upptar varje sak SAMMA andel av scenen
     vid varje bredd → ingen ihopklumpning, ingen fast breakpoint.
     Capen (--rum-cap) håller stora desktop-scener på samma pixelstorlek som förr
     (gamla --rum-skala:1.55 ≈ 24.8px), så laptop/desktop ser likadant ut.

     EN "rums-enhet" (motsvarar gamla 1rem × skala) räknas fram som
       min(var(--rum-koeff) * 1cqw, var(--rum-cap))
     OBS: cqw MÅSTE skrivas direkt där måttet används (i .room-item/.room-pet-
     reglerna nedan och i de inline-satta storlekarna i varld-rum*.js) – en
     container-enhet som bärs via en egen var() (t.ex. --rum-enhet: 2.5cqw)
     resolvas mot fel container (deklarations-elementets, dvs viewporten) i
     Chromium. Därför bär vi bara de ENHETSLÖSA rattarna i variabler och
     multiplicerar med 1cqw på plats. */
  container-type: inline-size;
  --rum-koeff: 2.5; /* rums-enheter per 1 % scenbredd (1cqw) */
  --rum-cap: 25px;  /* tak per enhet → desktop = gamla fasta storleken */
}

#husgrupp, #kompis-husgrupp { cursor: pointer; transform-origin: 50% 75%; transition: transform 0.25s; outline: none; }
#husgrupp:hover, #husgrupp:focus-visible,
#kompis-husgrupp:hover, #kompis-husgrupp:focus-visible { transform: scale(1.02) rotate(-0.6deg); }

/* Klasskylten vid gårdskanten – klick zoomar ut till klassbyn. */
#klasskylt {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 85%;
  transition: transform 0.25s;
  outline: none;
}
#klasskylt:hover, #klasskylt:focus-visible { transform: scale(1.05) rotate(-1.2deg); }

/* Nav-skyltarna nere till VÄNSTER (by → "Andra byar", skola → "Min by"): samma
   trä-skylt (navSkyltSvg → skyltMarkup) och klick-som-zoom-känsla som gårdskylten
   ovan, men som overlay-UI i .varld-ui (position:absolute mot scenen). Speglar
   gårdskyltens placering: nere till vänster. Ligger i scenens overlay-skikt
   (.varld-ui = --z-scen-ui), egen z-index behövs inte. */
.varld-navskylt {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: clamp(96px, 16vw, 150px);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 90%;
  transition: transform 0.25s;
  outline: none;
  /* Liten skugga/lyft så skylten läser som ett klickbart objekt mot scenen. */
  filter: drop-shadow(2px 3px 0 rgba(59, 51, 80, 0.18));
}
.varld-navskylt:hover, .varld-navskylt:focus-visible { transform: scale(1.05) rotate(-1.2deg); }
.varld-navskylt:active { transform: scale(0.98) rotate(-1.2deg); }
.varld-navskylt .navskylt-svg { display: block; width: 100%; height: auto; }
/* "Till gården"-skylten (hus-nivån, #328) speglas till HÖGRA hörnet så den
   inte krockar med gårdskylten/grusgången som redan bor nere till vänster. */
.varld-navskylt.hoger { left: auto; right: 12px; }
/* "Andra byar" (#483): by-layouten håller hörnet fritt från hus (BY_SKYLT i
   varld-by.js = 22 % × 22 % nere till vänster). Skylten kapas så den alltid
   ryms där: bredd ≤ 22 % − 12 px, och höjden (0,65 × bredd) + 12 px ≤ 22 % av
   den lägsta scenhöjden 420 px → bredd ≤ 124 px. */
#by-skylt { width: min(clamp(96px, 16vw, 124px), calc(22% - 12px)); }

/* --- Gårds-grenen (#328): baksidan/gården + laggårdens interiör ------------
   Båda lagren delar .varld-ute:s svg-regel (fullstor + overflow:visible så de
   övertecknade himlarna/väggarna fyller letterbox-ytan). Bakgrundsfärgerna
   matchar scenernas gräs/trä så inget blått blinkar fram under kamerazoomen. */
.varld-gard { background: #a8da8f; }
.varld-laggard { background: #b0805a; }

/* --- Bondgårdsdjuren (#330): häst/ko/gris i hagen & laggården ---------------
   Overlay-lager ovanpå scen-SVG:n (samma mönster som .tradgard-lager):
   pointer-events:none så klick (t.ex. laggårdsdörren) går vidare till scenen;
   container-type → djurens cqw-storlek mäts mot lagrets bredd. Noderna delar
   .room-item/.room-pet-klasserna så promenad-CSS:en (gång-guppet + spegling)
   följer med gratis; storleken sätts inline mot --fdjur-koeff/--fdjur-cap. */
.gard-djur-lager {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: inline-size;
  /* #336: rejält större djur i hagen/ladan (+~55 %) så sidoprofilerna läses
     på håll – rummets djurstorlek (itemSize) påverkas INTE av de här. */
  --fdjur-koeff: 3.1;
  --fdjur-cap: 47px;
}
/* Klick på djuret öppnar foder-panelen (#332) – lagret är pointer-events:none,
   så själva djur-noderna måste slå på pekar-händelser igen. */
.gard-djur-lager .gard-djur { cursor: pointer; pointer-events: auto; }
/* Hagens staket-FRAMKANT (#345): eget lager EFTER djur-lagret i DOM → främre
   slanan ritas ovanpå djuren, så de ser ut att stå INNANFÖR gärdsgården.
   SVG:n delar viewBox/preserveAspectRatio med scen-SVG:n och fyller lagret
   (.varld-ute svg-regeln) → koordinaterna linjerar exakt. pointer-events:none
   så klick på djuren (foder-panelen, #332) går rakt igenom. */
.gard-forgrund { position: absolute; inset: 0; pointer-events: none; }
.gard-djur-lager .gard-djur .rp-namn { cursor: pointer; }
/* #371: i HAGEN (.har-forgrund – lagret som har ett staket ovanpå djuren) sitter
   djurets namnskylt OVANFÖR huvudet, absolut placerad ur nodens flöde. Under
   fötterna hamnar den annars nere vid gärdsgårds-lagret (.gard-forgrund ligger
   ovanpå djuren) och döljs delvis bakom en slana/stolpe. Ovanför huvudet är den
   fri från staketet → alltid HELT synlig. Ladan (utan forgrund) och rummets
   .room-pet .rp-namn är oförändrade. */
.gard-djur-lager.har-forgrund .gard-djur .rp-namn {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin: 0 0 3px;
}

/* Mood-minen (glad/nöjd/less ur trivseln, #330): liten bricka uppe till höger
   på djur-noden – i rummet OCH i hagen/ladan (samma markup i båda). */
.room-pet .fdjur-mood {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  width: 1.05rem;
  height: 1.05rem;
  pointer-events: none;
}
.room-pet .fdjur-mood svg { display: block; width: 100%; height: 100%; }

/* --- Matning & daglig gåva (#332) ------------------------------------------ */
/* 🎁-badgen: dagens gåva väntar (trivsel ≥ 60, inte hämtad idag) – uppe till
   vänster (mood-minen bor till höger), med ett litet uppmärksamhets-gupp. */
.room-pet .fdjur-gava {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  font-size: 0.85rem;
  pointer-events: none;
  animation: fdjur-gava-gupp 1.6s ease-in-out infinite;
}
@keyframes fdjur-gava-gupp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) scale(1.08); }
}

/* Hjärt-puffen vid matning: samma stigande/tonande bana som klapp-hjärtana
   (pet-rygg-fx-keyframes), tre stycken med inline-fördröjning/spridning. */
.foder-hjarta {
  position: absolute;
  left: 50%;
  top: -4px;
  pointer-events: none;
  font-size: 1.05rem;
  opacity: 0;
  animation: pet-rygg-fx 1.1s ease-out both;
}

/* Foder-sektionen (gårds-panelen + rummets namn-panel): trivsel-rad med
   mood-min i radhöjd; gröd-knapparna återbrukar .room-tray/.tray-item,
   favoritgrödan får en mjuk markering. */
.foder-trivsel-rad { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0.2rem; }
.foder-mood { width: 1.2rem; height: 1.2rem; flex: none; }
.foder-mood svg { display: block; width: 100%; height: 100%; }
.foder-tray .tray-item.foder-fav { outline: 2px solid var(--gron, #2e7d32); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .room-pet .fdjur-gava,
  .foder-hjarta { animation: none; }
}

/* Laggårdens dörr – klick går in i interiören (samma känsla som #husgrupp). */
#laggard-dorr {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 85%;
  transition: transform 0.25s;
  outline: none;
}
#laggard-dorr:hover, #laggard-dorr:focus-visible { transform: scale(1.04); }

/* Odlingsbäddens slots (#329) – klickbara grödor/tomrutor i gårds-scenen.
   OBS: transform bär POSITIONEN (translate i scen-koordinater), så hover får
   inte skriva över den – lyft i stället grödan en aning via translate-tillägg. */
.odling-slot { cursor: pointer; outline: none; }
.odling-slot:hover > *:not(rect), .odling-slot:focus-visible > *:not(rect) { transform: translateY(-2px); }
/* Skördeklar gröda pulserar mjukt så den syns på håll. */
.odling-klar { animation: odling-klar-puls 1.6s ease-in-out infinite; }
@keyframes odling-klar-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
@media (prefers-reduced-motion: reduce) {
  .odling-klar { animation: none; }
}

/* ── src/styles/19-varld-by.css ── */
/* --- Klassbyn (by-nivån): hus längs en slingrande väg med dekor ------------ */
.varld-by { background: #a8da8f; }

/* Stämningsdekor (träd/granar/buskar/lyktstolpar, art-by-dekor.js): egna små
   SVG:er ankrade med bottenmitten på sin markpunkt (left/top i % av lagret,
   inline från varld-by-scen.js). Aldrig klickbara – klick ska alltid nå
   husen/tomterna bakom. */
.by-dekor {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.by-dekor > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.by-mark,
.omrade-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Låter gräs/himmel/väg som ritas UTANFÖR viewBoxen (0–100) svämma ut och fylla
     det full-bleed:ade staget sömlöst på desktop (#373). Staget klipper (overflow
     hidden) mot skärmkanten. På mobil ligger allt ändå inom scen-boxen. */
  overflow: visible;
}

/* En tomt = ett minihus + elevens avatar (husMini) med namnskylt under.
   left/top/width/height sätts inline av varld-by-scen.js utifrån byLayout
   (procent av lagret – samma koordinater som kamerans fokuspunkter).
   #732: tomten är ingen staplingskontext (ingen z-index/transform). Huset
   staplas efter sin markpunkt (--by-z, inline), medan skylt/"Du!"/🔒/bubbla
   ligger på --z-by-skylt över ALLA hus och all dekor i byn, så nästa rads tak
   aldrig täcker namnet ovanför. */
.by-tomt {
  position: absolute;
  cursor: pointer;
  outline: none;
}
.by-tomt > svg {
  position: relative;
  z-index: var(--by-z, auto);
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease;
  transform-origin: 50% 90%;
}
.by-tomt:hover > svg,
.by-tomt:focus-visible > svg { transform: scale(1.06); }
.by-tomt:focus-visible { outline: 3px solid var(--lila, #7c5cd6); outline-offset: 4px; border-radius: 12px; }

.by-namn {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 150%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 999px;
  padding: 1px 10px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #3b3350;
  z-index: var(--z-by-skylt);
}
.by-tomt.du .by-namn {
  background: var(--gron, #34a853);
  border-color: rgba(59, 51, 80, 0.55);
  color: #fff;
}
/* Smal by (mobil, smal laptop): cellerna blir smalare än namnen → grannskyltar
   krockade i sidled (#732). Mindre skylt, och varannan tomts skylt (.udda, varje
   udda kolumn) hänger ett skylt-steg lägre så varje skylt får ~2 cellers bredd. */
.varld-by,
.varld-grannby { container-type: inline-size; }
@container (max-width: 760px) {
  .by-namn {
    max-width: 190%;
    padding: 0 6px;
    border-width: 1.5px;
    font-size: max(0.56rem, 1.6cqw);
    line-height: 1.35;
  }
  .by-tomt.udda .by-namn { top: calc(100% + 1.35em + 2px); }
}

.by-du {
  position: absolute;
  top: -4px;
  left: 72%;
  background: var(--gron, #34a853);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: var(--skugga);
  transform: rotate(6deg);
  z-index: var(--z-by-skylt);
  pointer-events: none;
}

/* Låst kompis-hus: en liten hänglås-bricka på huset + huset tonas lätt så det
   syns att man inte kommer in just nu (klick öppnar .by-last-bubbla i stället). */
.by-tomt.last > svg { filter: grayscale(0.35) brightness(0.97); }
.by-last-ikon {
  position: absolute;
  top: -2px;
  left: 68%;
  font-size: 0.95rem;
  z-index: var(--z-by-skylt);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* Vänlig pratbubbla ovanför ett låst hus (visas i byn, ingen navigering). Hänger
   ovanför tomt-noden och pekar ned mot huset; tonar in/ut via .show. */
.by-last-bubbla {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: #fff;
  color: #3b3350;
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: var(--skugga-mjuk);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: calc(var(--z-by-skylt) + 1);
  pointer-events: none;
}
.by-last-bubbla::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 0 rgba(59, 51, 80, 0.35));
}
.by-last-bubbla.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .by-last-bubbla { transition-duration: 0.01s; }
}

/* --- Klasscentret i byn (#480, klasscenter/kc-by.js) ----------------------- */
/* Rutan placeras av by-layouten (left = mitten, top = överkant, procent av
   lagret) och bottnar på samma marklinje som radens hus. Byggnaden ritas utan
   ambient (kc-by.js animera:false, #374); bara HTML-boxar transformeras. */
.by-klasscenter {
  position: absolute;
  transform: translateX(-50%);
  cursor: pointer;
  outline: none;
}
.by-klasscenter > svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease;
  transform-origin: 50% 94%;
}
.by-klasscenter:hover > svg,
.by-klasscenter:focus-visible > svg { transform: scale(1.04); }
.by-klasscenter:focus-visible { outline: 3px solid var(--lila, #7c5cd6); outline-offset: 4px; border-radius: 12px; }
.by-klasscenter.kc-nyniva > svg { animation: kc-nyniva 0.6s ease-out; }
@keyframes kc-nyniva { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Mätaren: diskret pill ovanför byggnaden (samma stil som .by-namn). Klick går
   igenom till byggnaden. Dold tills hovring/tangentbordsfokus (#484) – bara
   opacity/transform (kompositerbart, ingen layout, #374). Hovringen gäller bara
   enheter som KAN hovra: pekskärmar får "fastnad" :hover efter tryck, där tar
   bubblan över (kc-by.js medMatare). */
.kc-matare-plats {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, 6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.by-klasscenter:focus-visible .kc-matare-plats { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .by-klasscenter:hover .kc-matare-plats { opacity: 1; transform: translate(-50%, 0); }
}
.kc-matare {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 9.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 12px;
  padding: 3px 10px 4px;
  color: #3b3350;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: var(--skugga-mjuk);
}
.kc-matare-titel { font-size: 0.78rem; font-weight: 800; }
.kc-matare-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(59, 51, 80, 0.15);
  overflow: hidden;
}
.kc-matare-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--gron, #34a853); }
.kc-matare.max .kc-matare-bar > i { background: linear-gradient(90deg, #8fd3ff, #c99bff, #ffd36b); }

/* Placeholder-bubblan vid klick (rummet byggs i epic 2) – .by-last-bubbla-familjen. */
.kc-bubbla {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 6px);
  max-width: 18rem;
  background: #fff;
  color: #3b3350;
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.8rem;
  text-align: center;
  box-shadow: var(--skugga-mjuk);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: var(--z-bubbla);
  pointer-events: none;
}
.kc-bubbla.show { opacity: 1; transform: translate(-50%, 0); }
/* Bubblan ersätter mätaren medan den visas (samma plats ovanför byggnaden). */
.by-klasscenter.kc-bubbla-oppen .kc-matare-plats { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .kc-bubbla, .kc-matare-plats, .by-klasscenter > svg { transition-duration: 0.01s; }
  .by-klasscenter.kc-nyniva > svg { animation: none; }
}

/* --- Klasspoäng: stjärn-toggle uppe till höger (#klass-toggle-wrap) --------- */
/* Kompakt ✨-knapp i by-scenens högra hörn som fäller ut/in klassens stats-
   skylt; default infälld så byn inte skyms. Wrappen är ankaret (position:
   relative) som skylten hänger under, i samma anda som verktygs-rullgardinen. */
.varld-klass-toggle { position: relative; display: flex; justify-content: flex-end; }
/* (hidden döljs nu av den globala [hidden]-regeln trots display:flex ovan) */

/* Själva ✨-knappen ärver .varld-knapp; en gul touch + siffra gör den till en
   tydlig "klasspoäng"-pill. */
.varld-klass-stjarna {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.varld-klass-stjarna .ks-toggle-tal { font-weight: 800; }
.varld-klass-stjarna[aria-expanded="true"] {
  background: #fff6d9;
  border-color: #ffb703;
}

/* Utfällbar "byskylt": klassens gemensamma nivå + positiva totaler. Absolut
   under ✨-knappen (höger-ankrad), samma popover-känsla som verktygsmenyn. */
.varld-klass-stats {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-meny);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: min(360px, 80vw);
  padding: 8px 16px;
  background: #fff;
  border: 3px solid #3b3350;
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(59, 51, 80, 0.18);
  text-align: center;
  animation: verktyg-meny-in 0.12s ease;
}
/* (hidden döljs nu av den globala [hidden]-regeln trots display:flex ovan) */
.varld-klass-stats .ks-rubrik {
  font-weight: 800;
  font-size: 0.92rem;
  color: #3b3350;
}
.varld-klass-stats .ks-niva {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.varld-klass-stats .ks-niva-badge {
  flex: 0 0 auto;
  background: var(--lila, #7c5cd6);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.varld-klass-stats .ks-bar {
  flex: 1 1 auto;
  height: 12px;
  min-width: 70px;
  background: #ece7f6;
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 999px;
  overflow: hidden;
}
.varld-klass-stats .ks-bar-fyll {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd34d, #ffb703);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.varld-klass-stats .ks-rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.varld-klass-stats .ks-stat {
  font-weight: 700;
  font-size: 0.8rem;
  color: #3b3350;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .varld-klass-stats .ks-bar-fyll { transition: none; }
}
@media (max-width: 700px) {
  /* Tightare utfälld skylt på smala skärmar; den hänger fortsatt under ✨-knappen. */
  .varld-klass-stats { padding: 6px 12px; }
  .varld-klass-stats .ks-rubrik { font-size: 0.85rem; }
  /* Övriga knappar visar bara ikon på mobil, men ✨-siffran är hela poängen med
     togglen → behåll talet synligt. */
  .varld-klass-stjarna .ks-toggle-tal { display: inline; }
}

/* På by-nivån göms rums-/husverktygen (Måla om gäller det egna huset). */
.varld-stage[data-niva="by"] .varld-knapp.bara-rum,
.varld-stage[data-niva="by"] .varld-knapp.rum-och-hus,
.varld-stage[data-niva="by"] .varld-knapp[data-panel="palett"],
.varld-stage[data-niva="by"] .varld-knapp[data-panel="hus"] { display: none; }

/* På en KAMRATS hus (läs-vy) – och en ANNAN klass elevs hus (grannbyhus, #114) –
   göms alla scen-kontroller helt: man kan bara titta in i deras rum eller gå
   tillbaka. */
.varld-stage[data-niva="kompishus"] .varld-verktyg,
.varld-stage[data-niva="grannbyhus"] .varld-verktyg { display: none; }

/* På skol-/grannby-nivån (andra klassers byar) göms rums-/husverktygen – här
   tittar man bara på byar, inget att måla om eller pyssla med. */
.varld-stage[data-niva="skola"] .varld-verktyg,
.varld-stage[data-niva="grannby"] .varld-verktyg { display: none; }

/* --- Skol-nivån (områdesöversikt): en klass-by per klass ------------------- */
.varld-skola { background: #a8da8f; }
/* .omrade-mark delar layout + overflow:visible med .by-mark (definierat ovan). */

/* En klass-by-enhet: generisk by-silhuett + en namnskylt. left/top/width/height
   sätts inline av varld-omrade.js (procent av lagret – samma koordinater som
   kamerans fokuspunkter). */
.omrade-by {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  outline: none;
}
.omrade-by-hus {
  width: 100%;
  height: 76%;
  transition: transform 0.2s ease;
  transform-origin: 50% 90%;
}
.omrade-by:hover .omrade-by-hus,
.omrade-by:focus-visible .omrade-by-hus { transform: scale(1.06); }
.omrade-by:focus-visible {
  outline: 3px solid var(--lila, #7c5cd6);
  outline-offset: 4px;
  border-radius: 12px;
}
.omrade-by-hus > svg { width: 100%; height: 100%; display: block; }

.omrade-by-namn {
  margin-top: 2px;
  max-width: 150%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(59, 51, 80, 0.55);
  border-radius: 999px;
  padding: 1px 10px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #3b3350;
}
.omrade-by-namn b { color: var(--lila, #7c5cd6); }
.omrade-by.du .omrade-by-namn {
  background: var(--gron, #34a853);
  border-color: rgba(59, 51, 80, 0.55);
  color: #fff;
}
.omrade-by.du .omrade-by-namn b { color: #fff; }

/* --- Grannby-nivån (läs-vy av en annan klass by) -------------------------- */
/* Grannbyn ritas numera IDENTISKT med den egna klassbyn (#114): samma
   mountByScen → samma globala .by-mark/.by-tomt/.by-namn-stilar gäller här. Bara
   lagrets bakgrund behövs som egen regel. Grannby-hus-lagret (en annan klass
   elevs exteriör, läs-vy) ärver .varld-kompis-lagrets stilar. */
.varld-grannby { background: #a8da8f; }


/* ── src/styles/20-varld-ui.css ── */
/* --- Overlay-UI i spelvyn (integrerade scen-kontroller) -------------------- */
/* Själva overlay-skiktet släpper igenom pekare; bara knappar/paneler fångar. */
.varld-ui {
  position: absolute;
  inset: 0;
  z-index: var(--z-scen-ui);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px;
  pointer-events: none;
}

.varld-ui-topp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* På smala bredder får raden wrappa så knappar aldrig trängs/klipps. */
  flex-wrap: wrap;
}

.varld-titel {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #3b3350;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Verktygsraden är nu en enda rullgardin: bara triggern ligger inline, menyn
   fälls ut absolut under den (position: relative är ankaret). Samma UI på alla
   bredder – renast och mest konsekvent, och löser mobilträngseln direkt. */
.varld-verktyg { position: relative; display: flex; justify-content: flex-end; }

.varld-verktyg-trigger[aria-expanded="true"] {
  background: #efe7ff;
  border-color: var(--lila, #7c5cd6);
}

/* Popover-menyn ärver .varld-panel-känslan (vit, mörk kant, rundat, skugga) så
   den ser ut som en del av husvärlden. */
.varld-verktyg-meny {
  pointer-events: auto;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-meny);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  max-width: min(240px, 80vw);
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 2.5px solid #3b3350;
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(59, 51, 80, 0.18);
  animation: verktyg-meny-in 0.12s ease;
}
/* (display:flex ovan slog förr ut hidden – nu täcks det av den globala
   [hidden]{display:none!important}-regeln, så menyn startar stängd och JS:ens
   .hidden-växling fungerar utan en egen override.) */
@keyframes verktyg-meny-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Verktygsknapparna blir vänsterställda menyrader inne i menyn (behåller sina
   klasser/id:n – bara utseendet ändras här). */
.varld-verktyg-meny .varld-knapp {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: none;
  background: transparent;
}
.varld-verktyg-meny .varld-knapp:hover {
  transform: none;
  background: #f3eefe;
}
.varld-verktyg-meny .varld-knapp:active { transform: translateY(1px); box-shadow: none; }
.varld-verktyg-meny .varld-knapp.aktiv {
  background: #efe7ff;
  border-color: var(--lila, #7c5cd6);
}
/* Etiketterna ska ALLTID synas i menyn (även på mobil där de annars göms). */
.varld-verktyg-meny .varld-knapp span { display: inline; }

.varld-knapp {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 2.5px solid #3b3350;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #3b3350;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(59, 51, 80, 0.18);
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.12s ease;
}
.varld-knapp:hover { transform: translateY(-1px); }
.varld-knapp:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(59, 51, 80, 0.18); }
.varld-knapp.aktiv { background: #efe7ff; border-color: var(--lila, #7c5cd6); }
/* display:inline-flex ovan slår ut UA:s [hidden]-regel (samma specificitet, men
   författar-CSS vinner över UA-lagret) för .varld-knapp. Det täcks av den globala
   [hidden]{display:none!important}-regeln högst upp, så en knapp med hidden=true
   verkligen döljs. (Historiskt bet detta "🔭 Andra byar", numera en skylt.) */

/* Möbler & Mysterymat finns bara inne i rummet. Kläder (👗) visas även i
   ute-vyn (rum-och-hus) så avataren framför huset kan bytas om på plats. */
.varld-stage[data-niva="hus"] .varld-knapp.bara-rum { display: none; }

/* Trädgården (🌳) finns bara UTE runt huset → dölj knappen inne i rummet
   (bara-hus, motsvarigheten till bara-rum). På by-/kompis-/skolnivåerna är hela
   verktygsmenyn redan dold, så en hus-vs-rum-regel räcker. */
.varld-stage[data-niva="rum"] .varld-knapp.bara-hus { display: none; }

/* Flytande verktygspanel (Måla om / Möbler / Kläder) under knappraden. */
.varld-panel {
  position: relative;
  pointer-events: auto;
  margin-top: 10px;
  width: min(440px, 100%);
  max-height: min(52vh, 420px);
  max-height: min(52dvh, 420px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 2.5px solid #3b3350;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 4px 4px 0 rgba(59, 51, 80, 0.18);
}
.varld-panel h3 { margin: 0 0 6px; padding-right: 34px; }
.varld-panel .hint { margin-top: 0; }

/* ✕-knapp uppe till höger i varje panel – stänger panelen direkt. Ärver samma
   runda, diskreta look som modalens stängknapp (.cx-modal-close). */
.varld-panel-stang {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: #f0f4fb;
  color: var(--text-svag);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.varld-panel-stang:hover { background: #e2ecfb; color: var(--bla-mork); }

/* Husdjurspanelen som overlay nere i scenen (matning/namn/nedräkning). */
.varld-petpanel {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(480px, 94%);
  max-height: 62%;
  overflow-y: auto;
  z-index: var(--z-panel);
}
.varld-petpanel:empty { pointer-events: none; }
.varld-petpanel .rum-pet-panel {
  margin: 0;
  border: 2.5px solid #3b3350;
  background: rgba(255, 255, 255, 0.97);
}

@media (max-width: 700px) {
  /* Mobil är AVSIKTLIGT oförändrad mot originalet (issue #373): kant-i-kant-
     tilläggen gäller bara desktop (>700px). Scenen behåller sin gamla höjd så
     inget blir större eller luftigare än förr. */
  .varld-stage {
    height: clamp(380px, calc(100vh - 120px), 700px);
    height: clamp(380px, calc(100dvh - 120px), 700px);
  }
  /* RUMMET på mobil: scenen delas med ute-vyn, som fyller hela höjden (bra –
     rör vi inte). Men rummet ritar vägg + golv som FYLLER scenen, så på den
     smala telefonen (~360px bred × ~600–700px hög) blev rums-scenen extremt
     PORTRÄTT (aspect ~0.50 mot desktops ~1.75): en jättehög vägg, en tunn
     golv-remsa där alla möbler/djur trängdes högst upp, och ett stort tomt
     golv längst ner. Golv/vägg är procentbaserade så proportionen var i sig
     "rätt", men den höga/smala aspekten gjorde rummet oanvändbart.
     Fix: cap:a BARA rums-scenens höjd (data-niva="rum") mot bredden så aspekten
     blir rums-lik (~0.77) – vägg och golv får normala proportioner och möbler/
     djur sprids över golvet i stället för att klumpa ihop sig. Ute-vyn (andra
     nivåer) behåller full höjd. min() väljer den lägre av den vanliga
     höjd-clampen och 116 % av viewport-bredden, så vi aldrig blir högre än
     tillgängligt utrymme på korta skärmar. Desktop/laptop (> 700px) oförändrat. */
  .varld-stage[data-niva="rum"] {
    height: min(clamp(380px, calc(100vh - 120px), 700px), 116vw);
    height: min(clamp(380px, calc(100dvh - 120px), 700px), 116vw);
  }
  .varld-knapp span { display: none; } /* bara ikoner på små skärmar */
  #ut-btn span { display: inline; }      /* utom ut-knappen: säger vart den leder (#697) */
  .varld-knapp { padding: 6px 11px; }  /* tightare så alla ikoner ryms på raden */
  .varld-titel { font-size: 0.95rem; }
  .varld-ui { padding: 8px; }          /* mer plats åt scenen/knappraden */
  .varld-panel { width: 100%; }        /* panelerna fyller bredden på mobil */

  /* Rums-sakernas storlek behöver INTE längre en egen mobil-skala: --rum-enhet
     följer nu scenbredden kontinuerligt (se .varld-lager.room-stage), så möbler,
     djur och avstånd skalar ihop vid varje bredd. Höjd-capen ovan bevaras dock –
     den håller golv/vägg-aspekten rums-lik på den smala telefonen. */
}

/* Den flytande världs-hinten (.hus-hint / #hint) är borttagen (#114) – scenen är
   tydlig nog utan den nedre info-remsan. */

/* Ambient: drivande moln, roterande solstrålar, skorstensrök */
.hus-moln { animation: hus-driva var(--t, 50s) linear infinite; }
@keyframes hus-driva { from { transform: translateX(-260px); } to { transform: translateX(1220px); } }
.hus-solstralar { transform-origin: 110px 86px; animation: hus-snurra 70s linear infinite; }
@keyframes hus-snurra { to { transform: rotate(360deg); } }
.hus-rok { animation: hus-puffa 4s ease-in infinite; opacity: 0; }
.hus-rok.r2 { animation-delay: 1.3s; }
.hus-rok.r3 { animation-delay: 2.6s; }
@keyframes hus-puffa {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(14px, -46px) scale(1.5); }
}

/* Klasscentret ambient (#478, art-klasscenter*.js): eld som fladdrar, fana som
   vajar, glitter, svävande kristaller, antennljus. Bara transform/opacity på
   ett fåtal grupper (kompositerbart, pausas av zoom-pausen precis som .hus-rok);
   röken återanvänder .hus-rok. Av med prefers-reduced-motion nedan. */
.kc-flamma, .kc-fana, .kc-glitter { transform-box: fill-box; }
.kc-flamma { transform-origin: 50% 100%; animation: kc-fladdra 0.9s ease-in-out infinite alternate; }
@keyframes kc-fladdra { from { transform: scale(1, 1); } to { transform: scale(0.94, 1.08); } }
.kc-fana { transform-origin: 0 50%; animation: kc-vaja 2.2s ease-in-out infinite alternate; }
@keyframes kc-vaja { from { transform: skewY(-5deg); } to { transform: skewY(4deg) scaleX(0.92); } }
.kc-glitter { transform-origin: 50% 50%; animation: kc-glittra 2.6s ease-in-out infinite; }
.kc-glitter.d2, .kc-svava.d2 { animation-delay: -0.9s; }
.kc-glitter.d3 { animation-delay: -1.7s; }
@keyframes kc-glittra { 0%, 100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.kc-svava { animation: kc-svava 3.6s ease-in-out infinite alternate; }
@keyframes kc-svava { to { transform: translateY(-16px); } }
.kc-blink { animation: kc-blinka 1.6s steps(2, jump-none) infinite; }
@keyframes kc-blinka { from { opacity: 1; } to { opacity: 0.25; } }
/* Klasscentrum-föremålen (#487, art-klasscenter-inredning*.js): gungande krona/
   tofsar, fontänstråle + kaskader, fiskar och bubblor. Samma regel: EN grupp
   per rörelse, bara transform/opacity. */
.kc-pendel, .kc-vatten, .kc-fisk { transform-box: fill-box; }
.kc-pendel { transform-origin: 50% 0; animation: kc-pendla 3.2s ease-in-out infinite alternate; }
.kc-pendel.d2 { animation-delay: -1.6s; }
@keyframes kc-pendla { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.kc-vatten { transform-origin: 50% 100%; animation: kc-sprut 1.3s ease-in-out infinite alternate; }
@keyframes kc-sprut { to { transform: scale(0.96, 0.9); } }
.kc-kaskad { animation: kc-skimra 1.8s ease-in-out infinite alternate; }
@keyframes kc-skimra { from { opacity: 1; } to { opacity: 0.72; } }
.kc-fisk { animation: kc-simma 4.2s ease-in-out infinite alternate; }
.kc-fisk.d2 { animation-duration: 5.4s; animation-delay: -2s; }
.kc-fisk.d3 { animation-duration: 3.6s; animation-delay: -1s; }
@keyframes kc-simma { from { transform: translate(-10px, 2px); } to { transform: translate(10px, -3px); } }
.kc-bubbla { animation: kc-bubbla 2.8s ease-in infinite; }
.kc-bubbla.d2 { animation-delay: -1.4s; }
@keyframes kc-bubbla { 0% { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
/* Klasscentrets statistiktavla (#496, art-klasscenter-pokaler-mobler.js): "klicka
   mig"-affordans = glöd bakom ramen som andas + bricka som guppar. */
.kc-glod { animation: kc-glod 2.4s ease-in-out infinite alternate; }
@keyframes kc-glod { from { opacity: 0.25; } to { opacity: 1; } }
.kc-guppa { animation: kc-guppa 1.8s ease-in-out infinite alternate; }
@keyframes kc-guppa { from { transform: translateY(0); } to { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .hus-moln, .hus-solstralar, .hus-rok,
  .kc-flamma, .kc-fana, .kc-glitter, .kc-svava, .kc-blink,
  .kc-pendel, .kc-vatten, .kc-kaskad, .kc-fisk, .kc-bubbla, .kc-glod, .kc-guppa { animation: none; }
  .varld-lager, #husgrupp, #kompis-husgrupp, #klasskylt, #laggard-dorr, .by-tomt > svg, .omrade-by-hus { transition-duration: 0.01s; }
}


/* ── src/styles/21-husdjur-rum.css ── */
/* --- Husdjur i Mitt rum ----------------------------------------------------- */
/* Äpplen på golvet (matning): ett litet emoji-äpple centrerat på sin procent-
   position. Inga pekhändelser (djuren äter dem – man drar dem inte), och de är
   inga .room-item så promenad-AI:n räknar dem inte som hinder. Ligger under
   husdjuren i DOM-ordningen så djuret syns ovanpå när det gnager. */
/* Placera-läge för Mysterymat: hela scenen får hårkors-pekare så det är tydligt
   att nästa klick lägger ut mat på golvet (knappen markeras via .aktiv). */
.room-stage.mat-placering,
.room-stage.mat-placering .room-item,
.room-stage.mat-placering .room-item * {
  cursor: crosshair;
}

/* I mat-läget går utlagd mat att PLOCKA UPP (#347): bara då får matbitarna
   pekhändelser (annars pointer-events: none, se .room-apple nedan) och en
   egen pekare så det syns att de är klickbara. */
.room-stage.mat-placering .room-apple {
  pointer-events: auto;
  cursor: pointer;
}

.room-apple {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  animation: apple-pop 0.32s ease-out;
}
/* Äpplet skalar med scenbredden i husvärldens rum (som möbler/djur). */
.varld-lager.room-stage .room-apple { font-size: calc(1.5 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); }
@keyframes apple-pop {
  from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .room-apple { animation: none; }
}

/* Matnings-mätare i husdjurspanelen: fylls med antal uppätna äpplen i steget. */
.pet-matbar {
  position: relative;
  height: 22px;
  border-radius: 11px;
  background: #f3ead9;
  border: 2px solid #e2cfa8;
  overflow: hidden;
  margin: 6px auto 2px;
  max-width: 240px;
}
.pet-matbar-fyll {
  height: 100%;
  background: linear-gradient(90deg, #8fd18a, #5fbf62);
  transition: width 0.4s ease;
}
.pet-matbar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #3b3350;
}

/* Antal-rad på förbrukningsvaror (äpplen) i shoppen. */
.shop-antal {
  font-size: 0.8rem;
  color: #5b6b86;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Husdjuren ritas i rumsscenen med samma .room-item-pipeline som sakerna, men
   med storlek per tillväxtsteg och en liten namnskylt under figuren. */

/* BAS-storlek (fasta rem) – används av den lilla READ-ONLY kompis-vyn
   (.room-stage utan container). I husvärldens rum skalas de om nedan. */
.room-pet .ri-emoji { width: 3.2rem; height: 3.2rem; }
.room-pet.pet-vuxen-2 .ri-emoji { width: 4.4rem; height: 4.4rem; }
.room-pet.pet-vuxen-3 .ri-emoji { width: 5.8rem; height: 5.8rem; }

/* Ägget i rummet: lite mindre + vaggar lugnt (samma keyframes som pet-sidan hade). */
.room-pet.pet-agg-i-rum .ri-emoji {
  width: 2.9rem;
  height: 2.9rem;
  animation: pet-wiggle 3.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}

/* Husvärldens rum: husdjuren skalas med scenBREDDEN precis som möblerna, så de
   håller proportionerna och krymper/växer med scenen (se .varld-lager.room-stage).
   1cqw skrivs direkt här (Chromium resolvar cqw fel via en egen var). Faktisk
   bredd/höjd (calc, inte transform) → drag-clampen följer med. */
.varld-lager.room-stage .room-pet .ri-emoji { width: calc(3.2 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); height: calc(3.2 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); }
.varld-lager.room-stage .room-pet.pet-vuxen-2 .ri-emoji { width: calc(4.4 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); height: calc(4.4 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); }
.varld-lager.room-stage .room-pet.pet-vuxen-3 .ri-emoji { width: calc(5.8 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); height: calc(5.8 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); }
.varld-lager.room-stage .room-pet.pet-agg-i-rum .ri-emoji { width: calc(2.9 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); height: calc(2.9 * min(var(--rum-koeff, 2.5) * 1cqw, var(--rum-cap, 25px))); }

.room-pet .rp-namn {
  display: block;
  margin-top: 2px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #3c4a63;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 1px 6px;
  pointer-events: none;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-pet .rp-namn.rp-agg { color: #8a6d3b; }

/* Namn-etiketten som döpnings-/panel-affordans: klickbar (till skillnad från den
   generella pointer-events:none-etiketten). Öppnar inline-namnfältet/panelen –
   samma för mystery-djur och vanliga djur. rp-namn-edit visar dessutom en liten
   ✏️-hint (BARA innan djuret döpts); rp-namn-tap är samma klickbara etikett utan
   den permanenta pennan (för ett redan namngivet djur). */
.room-pet .rp-namn.rp-namn-edit,
.room-pet .rp-namn.rp-namn-tap {
  pointer-events: auto;
  cursor: pointer;
}
.room-pet .rp-namn.rp-namn-edit::after {
  content: " ✏️";
  font-size: 0.82em;
  opacity: 0.5;
}
.room-pet .rp-namn.rp-namn-edit:hover,
.room-pet .rp-namn.rp-namn-tap:hover {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.room-pet .rp-namn.rp-namn-edit:hover::after { opacity: 0.9; }

/* Promenad-AI (rum-promenad.js): mjukt tassande medan djuret går, och figuren
   speglas när det går åt vänster. Klasserna sätts/tas bort av rAF-loopen. */
.room-pet.promenerar .ri-emoji {
  animation: pet-tassa 0.55s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.room-pet.vand-vanster .ri-emoji svg { transform: scaleX(-1); }

@keyframes pet-tassa {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-7%) rotate(1.2deg); }
}

/* Klick-lek: djuret lägger sig på rygg, sprattlar och reser sig igen.
   Tajming från design-facit: 700 ms flip + 2600 ms sprattel + 550 ms upp
   (totalt 3,85 s → flip klar vid ~18 %, sprattel till ~86 %). */
.room-pet.pet-rygg .ri-emoji {
  animation: pet-rygg 3.85s ease-in-out both;
  transform-origin: 50% 62%;
}

@keyframes pet-rygg {
  0% { transform: rotate(0); }
  11% { transform: rotate(178deg); }   /* liten studs över… */
  18% { transform: rotate(157deg); }   /* …och landar på rygg */
  30% { transform: rotate(166deg); }
  42% { transform: rotate(149deg); }   /* sprattel fram och tillbaka */
  54% { transform: rotate(166deg); }
  66% { transform: rotate(149deg); }
  78% { transform: rotate(163deg); }
  86% { transform: rotate(157deg); }
  100% { transform: rotate(0); }       /* reser sig */
}

/* Hjärtan som bubblar upp medan djuret ligger och sprattlar. */
.pet-rygg-fx {
  position: absolute;
  left: 50%;
  top: -4px;
  pointer-events: none;
  font-size: 1.05rem;
  opacity: 0;
  animation: pet-rygg-fx 1.28s ease-out 3;
}

@keyframes pet-rygg-fx {
  0% { opacity: 0; transform: translate(-50%, 2px) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1.35); }
}

/* Klick-klapp för de vanliga (fast-storleks-)djuren: ett kort glädjeskutt i
   stället för rygg-lek (de lägger sig inte på rygg). Gullig, ~0,9 s, med
   hjärtan – i samma anda som petBellyFlop men utan vändningen. */
.room-pet.pet-klapp .ri-emoji {
  animation: pet-klapp 0.9s ease-in-out both;
  transform-origin: 50% 100%;
}

@keyframes pet-klapp {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.12, 0.88); }   /* laddar – trycks ihop */
  45% { transform: translateY(-22%) scale(0.92, 1.1); } /* studsar upp, sträcks */
  62% { transform: translateY(0) scale(1.06, 0.96); }   /* landar mjukt */
  80% { transform: translateY(-7%) scale(1, 1); }        /* liten extrastuds */
  100% { transform: translateY(0) scale(1, 1); }
}

/* Hjärtan vid klick-klappen (en kort puff, till skillnad från rygg-lekens 3). */
.pet-klapp-fx {
  position: absolute;
  left: 50%;
  top: -4px;
  pointer-events: none;
  font-size: 1.05rem;
  opacity: 0;
  animation: pet-rygg-fx 0.9s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .room-pet.promenerar .ri-emoji { animation: none; }
  .room-pet.pet-rygg .ri-emoji,
  .room-pet.pet-rygg .ri-emoji:has(.pet-sprite),
  .room-pet.pet-klapp .ri-emoji,
  .pet-rygg-fx,
  .pet-klapp-fx,
  .room-pet.pet-agg-i-rum .ri-emoji {
    animation: none;
  }
}

/* --- Sprite-riggade husdjur (art-pet-sprites.js) ---------------------------- */
/* Figuren monteras av 6 absolut positionerade bilddelar i en procent-rigg
   (referensyta 340×360). Positioner/storlekar sätts inline per art & steg;
   här bor rotationspunkter och animationer. Samma yttre klasser som SVG-djuren
   (.promenerar, .pet-rygg, .vand-vanster) styr vilka del-animationer som går. */

.pet-sprite {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 340 / 360;
  margin: 0 auto;
  pointer-events: none;
}

.pet-sprite .ps-del {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pet-sprite .ps-del img {
  display: block;
  width: 100%;
  height: auto;
}

/* Självmätande rigg: medan delarnas PNG-mått läses (art-pet-sprites.js) saknar
   delarna position – håll dem dolda och tona in dem på plats när måtten finns,
   så det aldrig syns någon layout-"pop". Containern har fast aspect-ratio, så
   den yttre ytan är stabil redan innan delarna målas. */
.pet-sprite .ps-del { transition: opacity 0.28s ease; }
.pet-sprite.ps-laddar .ps-del { opacity: 0; }

/* Rotationspunkter (designdoket): nacke 50 %/80 %, kropp 50 %/92 %,
   höft = fotens topp 50 %/10 %. De här arternas armar hänger lodrätt
   (tassen nedåt), så axeln sitter i armens topp – inte i inre änden. */
.pet-sprite .ps-huvud { transform-origin: 50% 80%; }
.pet-sprite .ps-kropp { transform-origin: 50% 92%; }
.pet-sprite .ps-arm-v,
.pet-sprite .ps-arm-h { transform-origin: 50% 12%; }
.pet-sprite .ps-fot-v,
.pet-sprite .ps-fot-h { transform-origin: 50% 10%; }

/* Viloläge: armarna hänger med en lätt utåtvinkel. */
.pet-sprite .ps-arm-v { transform: rotate(-6deg); }
.pet-sprite .ps-arm-h { transform: rotate(6deg); }

/* Spegling när djuret går åt vänster (hela riggen – delarna följer med). */
.room-pet.vand-vanster .ri-emoji .pet-sprite { transform: scaleX(-1); }

/* Ingen blinkning: ögonen är inbakade i 00-head.png och sitter olika per art
   och steg (Fjärlis två ögon, Flammis slutform ett öga), så en ren ögon-enda
   blink går inte att göra snyggt för alla arter/steg. En helhuvud-squash såg
   inte bra ut → blinken är slopad (hellre ingen blink än att huvudet studsar). */

/* Vila: kroppen andas lugnt, huvudet tittar runt, armarna svajar. */
.room-pet .pet-sprite .ps-kropp { animation: ps-andas 3.4s ease-in-out infinite; }
@keyframes ps-andas {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.025); }
}

.room-pet .pet-sprite .ps-huvud { animation: ps-funder 4.6s ease-in-out infinite; }
@keyframes ps-funder {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-3deg); }
  60% { transform: rotate(2.4deg); }
}

.room-pet .pet-sprite .ps-arm-v { animation: ps-svaj-v 3.4s ease-in-out infinite; }
@keyframes ps-svaj-v {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(-11deg); }
}

.room-pet .pet-sprite .ps-arm-h { animation: ps-svaj-h 3.4s ease-in-out infinite; }
@keyframes ps-svaj-h {
  0%, 100% { transform: rotate(6deg); }
  50% { transform: rotate(11deg); }
}

/* Gång (promenad-AI:ns .promenerar): bensteg + armpendling i motfas + huvudnick.
   Kroppsgunget sköter pet-tassa på .ri-emoji (samma som SVG-djuren). */
.room-pet.promenerar .pet-sprite .ps-fot-v { animation: ps-steg 0.5s ease-in-out infinite; }
.room-pet.promenerar .pet-sprite .ps-fot-h { animation: ps-steg 0.5s ease-in-out infinite -0.25s; }
@keyframes ps-steg {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-14deg); }
}

.room-pet.promenerar .pet-sprite .ps-arm-v { animation: ps-sving-v 0.5s ease-in-out infinite; }
@keyframes ps-sving-v {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(6deg); }
}

.room-pet.promenerar .pet-sprite .ps-arm-h { animation: ps-sving-h 0.5s ease-in-out infinite; }
@keyframes ps-sving-h {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-6deg); }
}

.room-pet.promenerar .pet-sprite .ps-huvud { animation: ps-nick 0.5s ease-in-out infinite; }
@keyframes ps-nick {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50% { transform: translateY(2.5%) rotate(1.6deg); }
}

/* På rygg (klick-leken): SVG-djurens 157°-rotation läser inte som "ligger på
   rygg" för sprite-riggen (den ser mest tiltad ut). Sprite-riggen rullar i
   stället HELA vägen över till mage upp (~180°) så det tydligt syns att djuret
   ligger på rygg, vaggar där, och reser sig igen. Högre specificitet än den
   generella .ri-emoji-regeln (via :has) → vinner för sprite-arter. */
.room-pet.pet-rygg .ri-emoji:has(.pet-sprite) {
  animation: pet-rygg-sprite 3.85s ease-in-out both;
  transform-origin: 50% 68%;
}

@keyframes pet-rygg-sprite {
  0% { transform: rotate(0); }
  14% { transform: rotate(192deg); }   /* rullar över kanten… */
  20% { transform: rotate(180deg); }   /* …och landar på rygg, mage upp */
  32% { transform: rotate(171deg); }
  44% { transform: rotate(189deg); }   /* vaggar fram och tillbaka på ryggen */
  56% { transform: rotate(171deg); }
  68% { transform: rotate(187deg); }
  80% { transform: rotate(177deg); }
  88% { transform: rotate(180deg); }
  100% { transform: rotate(0); }        /* reser sig igen */
}

/* Ben och armar sprattlar dessutom i motfas (designdoket: 0,32 s / 0,4 s)
   medan djuret ligger på rygg. */
.room-pet.pet-rygg .pet-sprite .ps-fot-v { animation: ps-sprattel-fot 0.32s ease-in-out infinite; }
.room-pet.pet-rygg .pet-sprite .ps-fot-h { animation: ps-sprattel-fot 0.32s ease-in-out infinite -0.16s; }
@keyframes ps-sprattel-fot {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-16deg); }
}

.room-pet.pet-rygg .pet-sprite .ps-arm-v { animation: ps-sprattel-arm-v 0.4s ease-in-out infinite; }
@keyframes ps-sprattel-arm-v {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(8deg); }
}

.room-pet.pet-rygg .pet-sprite .ps-arm-h { animation: ps-sprattel-arm-h 0.4s ease-in-out infinite -0.2s; }
@keyframes ps-sprattel-arm-h {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-8deg); }
}

/* Humör-partikel (💤/❤️/🍎) – svävar stilla vid huvudet. */
.pet-sprite .ps-humor {
  position: absolute;
  top: -4%;
  right: -12%;
  font-size: 0.95rem;
  line-height: 1;
  animation: ps-humor-svav 2.4s ease-in-out infinite;
}

@keyframes ps-humor-svav {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14%); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-sprite .ps-del,
  .pet-sprite .ps-del img,
  .pet-sprite .ps-humor {
    animation: none !important;
  }
  .pet-sprite .ps-del { transition: none; }
}

/* Husdjurspanelen under rumsscenen. */
.rum-pet-panel { margin-bottom: 20px; }

.pet-namn-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.pet-namn-input {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  width: 220px;
  max-width: 70vw;
}

.pet-namn-input:focus { outline: none; border-color: var(--lila); }


/* ── src/styles/22-larare-inloggning.css ── */
/* ==========================================================================
   Redigerbar kontotabell (förslag före skapande) – teacher-login-cards.js
   ========================================================================== */
.acct-editor {
  margin-top: 12px;
  border: 2px solid #e6eefa;
  background: #fbfdff;
  border-radius: 14px;
  padding: 12px 14px;
}
.new-editor:empty,
.mm-editor:empty { display: none; }
.acct-editor-head .subhead.sm { margin-top: 0; }
.acct-editor-tools { margin: 4px 0 10px; }
.acct-tbl td { vertical-align: top; }
.acct-tbl .cell { width: 100%; min-width: 110px; }
.acct-tbl .ae-gen { padding: 6px 8px; }
.acct-tbl .ae-invalid .cell { border-color: var(--rod); }
.ae-err-row td { padding-top: 0; border-top: none; }
.ae-err { color: var(--rod); font-size: 0.85rem; font-weight: 600; }
.acct-editor-actions { margin-top: 12px; align-items: center; }
.acct-editor-actions .ae-flash { font-size: 0.9rem; min-height: 1.1em; }

/* ==========================================================================
   Inloggningskort – utskriftsvänlig A4-vy (teacher-login-print.js)
   Skärm: kort i rutnät. Utskrift: 2 × 4 kort per A4 med streckade klipplinjer.
   ========================================================================== */
.login-cards-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: #eef3fb;
  overflow: auto;
  padding: 20px clamp(16px, 4vw, 40px) 40px;
}
.lc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.lc-title { margin: 0; font-size: 1.25rem; }
.lc-hint { color: var(--text-svag); margin: 0 0 16px; }

.login-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
/* Korten är fysiska utdelningskort: alltid ljusa, även i lärarens mörka tema. */
.login-card {
  border: 2px dashed #b9c9e6;
  border-radius: 14px;
  background: #fff;
  color: #1f2a44;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.login-card .lc-head { display: flex; align-items: center; gap: 8px; }
.login-card .lc-logo { font-size: 1.7rem; line-height: 0; }
.login-card .lc-app { font-weight: 800; font-size: 1.05rem; color: #3b3350; letter-spacing: 0.2px; }
.login-card .lc-class {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: #5a6c96;
  background: #eef3fb;
  border-radius: 999px;
  padding: 2px 10px;
}
.login-card .lc-name { font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.login-card .lc-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eef2f8;
  padding-top: 7px;
}
.login-card .lc-label { color: #5b6b82; font-size: 0.9rem; }
.login-card .lc-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}
.login-card .lc-blank {
  flex: 1;
  max-width: 60%;
  border-bottom: 1.5px solid #1f2a44;
  min-height: 1.2em;
}
.login-card .lc-url {
  margin-top: 3px;
  text-align: center;
  font-size: 1rem;
  color: #3b3350;
  background: #fff8e1;
  border: 1px solid #f7c948;
  border-radius: 10px;
  padding: 5px 8px;
}
.login-card .lc-url b { font-size: 1.2rem; letter-spacing: 0.3px; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  /* Dölj all app-chrome; visa bara korten. */
  body > *:not(.login-cards-overlay) { display: none !important; }
  .login-cards-overlay,
  .teacher-dark.login-cards-overlay {
    position: static;
    padding: 0;
    background: #fff;
    overflow: visible;
  }
  .lc-toolbar,
  .lc-hint { display: none !important; }
  /* 2 kolumner × 4 rader = 8 kort per sida; delade streckade kanter = klipplinjer. */
  .login-cards-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .login-card {
    box-sizing: border-box;
    height: 69mm;
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px dashed #888;
    border-radius: 0;
    margin: 0;
    padding: 6mm 7mm;
    justify-content: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   Lärarsidan: Redigera inloggning (teacher-login-edit.js) + välj elever för
   inloggningskort (teacher-login-print.js). Bygger på .cx-modal + .teacher-dark.
   ========================================================================== */
.mm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mm-head .subhead.sm { margin: 0; }
.le-modal .cx-modal,
.lp-modal .cx-modal { max-width: 560px; }
.le-current {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--t-surface-2, #f6faff);
  border: 1px solid var(--t-border, #e6eefa);
  margin-bottom: 16px;
}
.le-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.le-lbl { min-width: 110px; color: var(--t-muted, var(--text-svag)); font-size: 0.9rem; }
.le-cur-pass { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.le-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.1rem;
}
.le-unknown { color: #f5c26b; font-weight: 600; }
.le-form { display: flex; flex-direction: column; gap: 12px; }
.le-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; color: var(--t-muted, var(--text-svag)); }
.le-field .cell { box-sizing: border-box; height: 40px; padding: 0 12px; font-size: 1rem; max-width: 100%; }
.le-pass-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.le-pass-row .cell { flex: 1 1 200px; }
.le-note { margin: 0; }
.le-actions { gap: 8px; }
.le-msg .msg { margin: 0; }

.lp-tools { gap: 6px; margin: 4px 0 10px; }
.lp-list {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--t-border, #e6eefa);
  border-radius: 12px;
}
.lp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--t-border, #eef2f8);
}
.lp-row:last-child { border-bottom: none; }
.lp-row input { width: 18px; height: 18px; accent-color: var(--t-accent, var(--gron)); }
.lp-avatar { font-size: 1.3rem; }
.lp-name { font-weight: 600; }
.lp-user { color: var(--t-muted, var(--text-svag)); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; }
.lp-state { margin-left: auto; font-size: 0.8rem; color: var(--t-muted, var(--text-svag)); white-space: nowrap; }
.lp-state[data-state="known"] { color: #7ee0a6; }
.lp-state[data-state="unknown"] { color: #f5c26b; }
.lp-actions { margin-top: 14px; gap: 10px; }


/* ── src/styles/23-mysterybox.css ── */
/* ============================================================================
   Mysterybox – kategori-hint i shoppen + öppnings-/reveal-modal
   (pages-shop.js, pages-shop-mystery.js)
   ========================================================================== */
.shop-cat-hint {
  margin: -2px 0 10px;
  max-width: 640px;
}

/* Overlay-backdrop (samma känsla som cx-modal-overlay). */
.mb-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(20, 30, 50, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  animation: cx-fade 0.14s ease;
}

.mb-modal {
  position: relative;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 24px;
  box-shadow: 0 18px 50px rgba(20, 30, 50, 0.3);
  text-align: center;
}

.mb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
  justify-content: center;
}

/* Presentboxen som skakar och sedan poppar bort. */
.mb-box {
  width: 150px;
  height: 150px;
}
.mb-box svg { width: 100%; height: 100%; }
.mb-box.shake { animation: mb-shake 0.5s ease-in-out infinite; transform-origin: 50% 80%; }
.mb-box.burst { animation: mb-burst 0.35s ease forwards; }

@keyframes mb-shake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-7deg) translateY(-3px); }
  40% { transform: rotate(6deg) translateY(0); }
  60% { transform: rotate(-5deg) translateY(-2px); }
  80% { transform: rotate(4deg) translateY(0); }
}
@keyframes mb-burst {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* Reveal-kortet (saken som vunnits). */
.mb-reveal { animation: mb-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes mb-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.mb-rarity {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar, #7FC7E8);
}

.mb-card {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 20px;
  border: 4px solid var(--rar, #7FC7E8);
  background: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--rar, #7FC7E8) 40%, transparent);
}
.mb-art { width: 78%; height: 78%; display: flex; align-items: center; justify-content: center; }
.mb-art svg { width: 100%; height: 100%; }
.mb-art .mb-hus { width: 100%; height: 100%; }
.mb-art .mb-hus svg { width: 100%; height: 100%; }

.mb-name { margin: 12px 0 4px; font-size: 1.3rem; font-weight: 800; color: var(--bla-mork); }
.mb-got { margin: 0 0 16px; color: var(--text-svag); font-size: 0.92rem; }
.mb-ok { min-width: 130px; }


/* ── src/styles/24-innehallsstudion.css ── */
/* ==========================================================================
   Innehållsstudion (lärarsidan #/larare/innehall) – issue #303
   Bibliotek (kort + ämnesflikar) + fokuserad kompositör (overlay). Lugn ton,
   teal-accent (per godkänd mockup). Återanvänder appens paneler/knappar/fält.
   ========================================================================== */
.studio {
  --teal: #0e9c92;
  --teal-mork: #0a7c74;
  --teal-ljus: #e6f6f4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Verktygsrad: ämnesflikar + åtgärder */
.studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.studio-subject-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.subject-tab {
  border: 2px solid #e2ecfb;
  background: #fbfdff;
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.subject-tab:hover { border-color: var(--teal); }
.subject-tab.active {
  background: var(--teal-ljus);
  border-color: var(--teal);
  color: var(--teal-mork);
}
.studio-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.studio-lib-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 4px;
  color: var(--text-svag);
}

/* Biblioteks-korten (lärartabellen ersatte dem i #441). Elevsidans
   områdesknappar heter .omrade-kort sedan #702 – .area-card här gav dem
   kolumnlayout och ram ovanpå .big-card. */
.area-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.area-card-wrap { display: flex; flex-direction: column; gap: 8px; }
.area-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 2px solid #e2ecfb;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--skugga-mjuk);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.area-card:hover { transform: translateY(-2px); border-color: var(--teal); }
.area-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.area-card-top { display: flex; align-items: flex-start; gap: 12px; }
.area-card-emoji { font-size: 2rem; line-height: 1; }
.area-card-meta { flex: 1; min-width: 0; }
.area-card-name { font-weight: 800; font-size: 1.08rem; color: var(--text); }
.area-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.area-card .type-badge { background: var(--teal-ljus); color: var(--teal-mork); }
.area-card-count { color: var(--text-svag); font-size: 0.9rem; font-weight: 600; }
.area-card-actions { flex-wrap: wrap; gap: 6px; }
/* Åtgärdsknapparna ska inte "öppna kortet" – de stoppar klicket i JS. */
.area-card-actions .btn { pointer-events: auto; }

/* Innehållsstudion som ETT kort (issue #453, Elias koncept; tabellen från #441):
   sidhuvud → understruken ämnesflikrad → verktygsrad → tabell i egen inramad
   behållare. Samma mörka tema/tokens – bara strukturen är ny. Bara lärarsidan. */
.teacher-dark .studio-card {
  background: var(--t-raised);
  border: 1px solid var(--t-border);
  border-radius: 18px;
  box-shadow: var(--t-shadow);
  padding: 22px 24px 24px;
}
.teacher-dark .studio-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.teacher-dark .studio-head .teacher-page-ic { width: 44px; height: 44px; border-radius: 12px; }
.teacher-dark .studio-head-txt { min-width: 0; }
.teacher-dark .studio-title { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--t-text); }
.teacher-dark .studio-sub { margin: 3px 0 0; font-size: 0.92rem; color: var(--t-muted); }

/* Ämnesflikar: understruken flikrad med färgprick; "+ Nytt ämne" streckad sist. */
.teacher-dark .studio-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  border-bottom: 1px solid var(--t-border);
}
.teacher-dark .studio-subject-tabs { display: flex; flex-wrap: wrap; gap: 0 22px; }
.teacher-dark .subject-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 10px 2px 11px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--t-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.teacher-dark .subject-tab:hover { background: none; color: var(--t-text); }
.teacher-dark .subject-tab.active { background: none; color: var(--t-accent); border-bottom-color: var(--t-accent); }
.teacher-dark .subject-tab:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 4px; }
.teacher-dark .subject-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.teacher-dark .studio-new-subject {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0;
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--t-border-strong);
  border-radius: 8px;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.teacher-dark .studio-new-subject:hover { color: var(--t-accent); border-color: var(--t-accent); }
.teacher-dark .studio-new-subject:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark #new-subject-form:not(:empty) { margin-top: 14px; }

/* Verktygsrad: Visa årskurs till vänster, "+ Skapa nytt område" till höger. */
.teacher-dark .studio-lib-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  color: var(--t-muted);
}
.teacher-dark .studio-grade-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.teacher-dark .studio-lib-controls #create-new { padding: 9px 18px; font-size: 1rem; }
.teacher-dark .studio-grade-filter .select { padding: 7px 12px; font-size: 0.92rem; border-width: 1px; border-radius: 10px; min-width: 150px; }

/* Tabellen i egen rundad, inramad behållare; scrollar horisontellt vid behov. */
.teacher-dark .area-table-scroll {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 14px;
}
.teacher-dark .area-tbl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.teacher-dark .area-tbl thead { background: var(--t-surface-2); }
.teacher-dark .area-tbl th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--t-border);
  white-space: nowrap;
}
.teacher-dark .area-tbl th.sorted { color: var(--t-text); }
.teacher-dark .area-tbl td { padding: 16px; vertical-align: middle; border-bottom: 1px solid var(--t-border); }
.teacher-dark .area-tbl tbody tr:last-child > td { border-bottom: 0; }
.teacher-dark .area-tbl .th-sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
}
.teacher-dark .area-tbl .th-sort:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .area-tbl .sort-ind { font-size: 0.62rem; opacity: 0.35; }
.teacher-dark .area-tbl th.sorted .sort-ind { opacity: 0.9; color: var(--t-accent); }
.teacher-dark .area-tbl-row { cursor: pointer; transition: background 0.12s; }
.teacher-dark .area-tbl-row:hover td { background: rgba(255, 255, 255, 0.025); }
.teacher-dark .area-tbl-row:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -2px; }
.teacher-dark .area-tbl-name { font-weight: 700; white-space: nowrap; color: var(--t-text); }
.teacher-dark .area-tbl-emoji { font-size: 1.25rem; margin-right: 10px; vertical-align: -2px; }
.teacher-dark .area-tbl-grade { white-space: nowrap; color: var(--t-text); }
.teacher-dark .area-tbl-count { color: var(--t-muted); font-size: 0.86rem; }
.teacher-dark .area-tbl-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.teacher-dark .area-tbl-badges .type-badge {
  background: transparent;
  border: 1px solid rgba(46, 193, 110, 0.5);
  border-radius: 6px;
  padding: 2px 8px;
  color: #7fe0a8;
  font-size: 0.76rem;
  font-weight: 600;
}
.teacher-dark .area-tbl th.area-tbl-actions-h { text-align: right; }
.teacher-dark .area-tbl-actions { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }
/* Åtgärder: rena ikonknappar utan boxad bakgrund, hover-ton. */
.teacher-dark .area-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--t-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.teacher-dark .area-act:hover { background: rgba(255, 255, 255, 0.07); color: var(--t-text); }
.teacher-dark .area-act:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.teacher-dark .area-act.active { background: var(--t-accent-soft); color: var(--t-accent); }
.teacher-dark .area-act.danger { color: #c48f8f; }
.teacher-dark .area-act.danger:hover { background: rgba(235, 87, 87, 0.12); color: #ff9d9d; }
.teacher-dark .area-expand-row > td { padding: 4px 16px 16px; background: var(--t-surface-2); }

/* Lägg till-panelen (#453): AI-prompt för mer innehåll överst. */
.teacher-dark .merge-ai {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--t-border);
}
.teacher-dark .merge-ai-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.teacher-dark .merge-wish {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--t-muted);
}
.teacher-dark .merge-wish { min-width: 0; }
.teacher-dark .merge-wish input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; font: inherit; font-size: 0.95rem; }
.teacher-dark .merge-copy { flex: none; max-width: 100%; white-space: normal; text-align: left; }
.teacher-dark .merge-instr { margin: 10px 0 0; font-size: 0.9rem; color: var(--t-text); }

/* Smal skärm (#449 F4, stil #453): varje rad blir ett litet kort i två kolumner –
   namn | årskurs, innehåll över hela bredden, omfattning | åtgärder – så Åtgärder
   syns utan sidscroll. Sorteringsrubrikerna (Område/Årskurs) står kvar. */
@media (max-width: 640px) {
  .teacher-dark .studio-card { padding: 16px 14px 18px; border-radius: 16px; }
  .teacher-dark .studio-head { margin-bottom: 12px; }
  .teacher-dark .studio-title { font-size: 1.2rem; }
  .teacher-dark .studio-lib-controls #create-new { flex: 1 1 auto; justify-content: center; }
  .teacher-dark .area-tbl,
  .teacher-dark .area-tbl thead,
  .teacher-dark .area-tbl tbody { display: block; min-width: 0; }
  .teacher-dark .area-tbl thead tr { display: flex; gap: 4px; border-bottom: 1px solid var(--t-border); }
  .teacher-dark .area-tbl thead th { border-bottom: 0; padding: 10px 12px; }
  .teacher-dark .area-tbl thead th:nth-child(n + 3) { display: none; }
  .teacher-dark .area-tbl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--t-border);
  }
  .teacher-dark .area-tbl tbody tr:last-child { border-bottom: 0; }
  .teacher-dark .area-tbl-row:hover { background: rgba(255, 255, 255, 0.025); }
  .teacher-dark .area-tbl-row > td { border-bottom: 0; padding: 4px 12px; }
  .teacher-dark .area-tbl-row > td:nth-child(-n + 2) { padding-top: 12px; }
  .teacher-dark .area-tbl-row > td:nth-child(n + 4) { padding-bottom: 10px; align-self: center; }
  .teacher-dark .area-tbl-row > td:nth-child(3) { grid-column: 1 / -1; }
  .teacher-dark .area-tbl-name { white-space: normal; }
  .teacher-dark .area-tbl-grade { text-align: right; color: var(--t-muted); font-size: 0.88rem; }
  .teacher-dark .area-expand-row:not([hidden]),
  .teacher-dark .area-expand-row > td { display: block; }
  .teacher-dark .area-expand-row > td { padding: 4px 10px 14px; }
  .teacher-dark .merge-ai-row > * { flex: 1 1 100%; }
  .teacher-dark .merge-copy { justify-content: center; }
}

/* ---- Fokuserad kompositör (overlay) ------------------------------------- */
body.composer-open { overflow: hidden; }
.studio-composer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(20, 30, 50, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px;
  overflow-y: auto;
  animation: cx-fade 0.14s ease;
}
.studio-composer {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 760px;
  padding: 22px 24px 26px;
  box-shadow: 0 18px 50px rgba(20, 30, 50, 0.28);
  margin: auto 0;
}
.composer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 32px;
}
.composer-icon { font-size: 2rem; }
.composer-title { margin: 0; font-size: 1.4rem; color: var(--text); }
.composer-sub { margin: 2px 0 0; color: var(--text-svag); font-size: 0.9rem; }
.composer-basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Emoji-väljare för områdets symbol (issue #307) – spänner över båda kolumnerna */
.composer-emoji-field { grid-column: 1 / -1; }
.emoji-picker { display: flex; flex-direction: column; gap: 8px; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}
.emoji-choice {
  border: 2px solid #e2ecfb;
  background: #fbfdff;
  border-radius: 10px;
  padding: 6px 0;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-choice:hover { border-color: var(--teal); }
.emoji-choice.active { background: var(--teal-ljus); border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.emoji-custom { align-items: center; gap: 8px; }
.emoji-preview {
  font-size: 1.6rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f4fb;
  border-radius: 10px;
}
.emoji-input { max-width: 160px; }

/* Metod-växeln (guidat / material) – jämbördiga flikar */
.method-switch {
  display: flex;
  gap: 6px;
  background: #f0f4fb;
  border-radius: 12px;
  padding: 4px;
  margin: 16px 0;
}
.method-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-svag);
  padding: 10px 8px;
  border-radius: 9px;
  cursor: pointer;
}
.method-tab.active {
  background: #fff;
  color: var(--teal-mork);
  box-shadow: 0 2px 6px rgba(20, 30, 50, 0.12);
}

/* Innehållstyp-växeln inne i "guidat" */
.ctype-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ctype-tab {
  border: 2px solid #e2ecfb;
  background: #fbfdff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ctype-tab.active { background: var(--teal-ljus); border-color: var(--teal); color: var(--teal-mork); }

.composer-callout {
  background: var(--teal-ljus);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
}
.composer-callout .hint { color: var(--teal-mork); }

.composer-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.composer-result { margin-top: 12px; }
.composer-result:empty { margin-top: 0; }

@media (max-width: 560px) {
  .composer-basics { grid-template-columns: 1fr; }
  .studio-toolbar { align-items: stretch; }
  .studio-composer { padding: 18px 16px 22px; }
}


/* ── src/styles/25-porten.css ── */
/* ==========================================================================
   Porten – elev-inloggningen (issue #338)
   ==========================================================================
   Grind-scenen (art-port.js, dynamiskt laddad) är sidans framdörr och fyller
   HELA viewporten kant till kant (lead-beslut: färgad helskärm – ingen
   centrerad ruta, ingen rundad ram). SVG:n ritas med "meet" och tecknar
   himmel/gräs/staket långt utanför viewBoxen (samma övertecknings-knep som
   .varld-ute), så alla kanter fylls oavsett skärmformat. Den kompakta
   login-skylten centreras ovanpå, i portens öppning. Fallback (art-modulen
   kunde inte laddas): skylten i en vanlig .panel. */

.port-scen {
  position: fixed;
  inset: 0;
  /* Över sidans statiska chrome (header) men under toast/modal. */
  z-index: var(--z-scen-ui);
  overflow: hidden;
  background: #bde3f5;
  /* size-container: login-skylten positioneras i cqw/cqh, dvs. relativt
     SVG-scenens meet-skala (se .port-login nedan). */
  container-type: size;
}

.port-scen > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Login-skylten: kompakt panel i portens öppning strax under skylten, i
   scenens platta trä-stil (kräm + konturlinje) så den hör ihop med grinden.
   Toppformeln: SVG:n ritas med preserveAspectRatio "meet" och viewBox
   960×600, så skalan = min(bredd/960, höjd/600) och viewBox-mitten (y=300)
   ligger i containermitten. Skyltens nederkant (y=238 i art-port.js) hamnar
   då 62·skala px över mitten = min(6.46cqw, 10.33cqh). Yttre min() lyfter
   panelen på låga skärmar så den alltid ryms; max() stoppar den vid kanten. */
.port-login {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30%; /* fallback för motorer utan container-query-enheter */
  top: max(8px, min(calc(50cqh - min(6.46cqw, 10.33cqh) + 10px), calc(100cqh - 310px)));
  width: min(300px, calc(100% - 32px));
  background: #FFF3DC; /* kräm ur stilguiden (art-style.js) */
  border: 3px solid #3B3350; /* konturfärgen */
  border-radius: 14px;
  box-shadow: var(--skugga);
  padding: 12px 14px 10px;
}

/* Fälten är etikett-lösa (placeholder + aria-label) för att hålla skylten
   liten – trä-bruna kanter i stället för standardblått. */
.port-login form > input {
  width: 100%;
  font-family: var(--font);
  font-size: 1.05rem;
  padding: 10px 12px;
  border: 2.5px solid #B0805A;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
}
.port-login form > input:focus {
  outline: none;
  border-color: var(--bla);
}
.port-login .check {
  margin: 2px 0 10px;
  gap: 8px;
  font-size: 0.9rem;
}
.port-login .check input {
  width: 18px;
  height: 18px;
}
.port-login .btn.stor {
  width: 100%;
  font-size: 1.1rem;
  padding: 12px 20px;
}
.port-login .msg {
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
/* Fallback-panelen när grind-scenen inte kunde laddas: vanlig panel-stil. */
.port-fallback {
  max-width: 420px;
  margin-top: 24px;
}
.port-fallback .port-login {
  position: static;
  transform: none;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

/* Diskret direktlänk till lärarens egen inloggning (#/larare). I scenen
   ligger den nere i högra hörnet; i fallback-vyn som vanlig rad under. */
.port-larare-rad {
  text-align: right;
  margin: 0 4px 20px;
}
.port-scen .port-larare-rad {
  position: absolute;
  right: 16px;
  bottom: 10px;
  margin: 0;
}
.port-larare-lank {
  color: #3B3350;
  opacity: 0.7;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.port-larare-lank:hover {
  opacity: 1;
  color: var(--bla-mork);
  text-decoration: underline;
}

/* Grindhalvorna är separata animerbara element (förberedelse för öppnings-
   animationen i #339): var sitt gångjärn i ytterkanten mot stolpen.
   transform-box:fill-box gör transform-origin lokal till respektive halva,
   så en framtida animation bara behöver sätta t.ex. transform: scaleX(0.05)
   eller en rotation per halva. */
.port-halva {
  transform-box: fill-box;
}
#port-halva-vanster { transform-origin: left center; }
#port-halva-hoger { transform-origin: right center; }

/* --------------------------------------------------------------------------
   Inloggnings-övergången (issue #339): porten öppnas + zoom in i världen.
   port-overgang.js flyttar scenens <svg> till det här fixerade overlayt
   (exakt över scenens gamla ruta – numera hela viewporten, se .port-scen)
   och sätter sedan .port-oppnad (grindhalvorna svänger upp) och .port-zoom
   (kameran dyker in genom öppningen och tonar ut, medan världen redan ritas
   under). Duration/easing på zoomen = världskamerans (.varld-lager, 0.9s =
   KAMERA_MS) så det känns som samma kamera. Ingen border-radius: porten är
   helskärm utan ram (lead-beslut #338), så overlayt ska vara det med. */
.port-overgang {
  position: fixed;
  z-index: 3000; /* över allt annat – men pointer-events:none stör aldrig */
  overflow: hidden;
  background: #bde3f5;
  pointer-events: none;
}
.port-overgang > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* samma överteckning som i .port-scen */
  transition:
    transform 0.9s cubic-bezier(0.55, 0, 0.2, 1),
    opacity 0.4s ease 0.6s;
  will-change: transform, opacity;
}
.port-overgang.port-zoom > svg {
  transform: scale(6.5);
  opacity: 0;
}
/* Grindhalvorna svänger upp mot sina gångjärn (ytterkanterna, origin ovan).
   Transitionen scopas till overlayt så halvorna aldrig animerar på login-
   sidan i vila. Utan perspektiv läses scaleX-kollapsen som att halvorna
   svänger ifrån betraktaren – rätt känsla till låg kostnad. */
.port-overgang .port-halva {
  transition: transform 0.5s cubic-bezier(0.6, 0.05, 0.55, 0.4);
}
.port-overgang.port-oppnad #port-halva-vanster,
.port-overgang.port-oppnad #port-halva-hoger {
  transform: scaleX(0.07);
}
/* Reduced motion: port-overgang.js startar aldrig övergången då – men om
   overlayt ändå skulle finnas (inställningen ändras mitt i) göms det helt. */
@media (prefers-reduced-motion: reduce) {
  .port-overgang { display: none !important; }
}


/* ── src/styles/26-larare-revamp.css ── */
/* ==========================================================================
   === Revamp #440 – Klassvyn Master-Detail + lärarskal (epic #438) ===
   --------------------------------------------------------------------------
   #/larare/klasser: smal klasslista (master) + EN klass inställningar (detalj)
   med sektionsflikar ur CLASS_SECTIONS (teacher-classes-*.js). Allt scopat
   under .teacher-dark / body.larare-lage – elevsidan är orörd (X-04).
   X-03: lärarrotens maxbredd ändras HÄR och bara här; #441 ärver den.
   ========================================================================== */
body.larare-lage .container,
body:has(.teacher-dark) .container {
  max-width: min(1280px, 96vw);
}

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

.teacher-dark .cls-md {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* .panel har margin: 0 auto – auto-marginaler krymper grid-celler till innehållet. */
.teacher-dark .cls-md > .panel { margin: 0; }

/* --- Master (vänsterlistan) ---------------------------------------------- */
.teacher-dark .cls-master {
  position: sticky;
  top: 86px; /* under den sticky toppnaven */
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.teacher-dark .cls-master-head {
  padding: 2px 8px 0;
}
.teacher-dark .cls-master-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.teacher-dark .cls-new {
  justify-content: flex-start;
  width: 100%;
  border-style: dashed;
}
.teacher-dark .cls-new.active {
  color: #eafff2;
  background: var(--t-accent-soft);
  border-color: rgba(46, 193, 110, 0.45);
}
.teacher-dark .cls-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.teacher-dark .cls-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 10px 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.teacher-dark .cls-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--t-border);
}
.teacher-dark .cls-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--t-accent-soft);
  border-color: var(--t-accent);
}
.teacher-dark .cls-item.active {
  background: var(--t-accent-soft);
  border-color: rgba(46, 193, 110, 0.45);
  color: #eafff2;
}
.teacher-dark .cls-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--t-accent);
}
.teacher-dark .cls-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-dark .cls-item-lock {
  display: inline-flex;
  color: #f2c94c;
}
.teacher-dark .cls-item-count {
  flex: none;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--t-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--t-border);
}
.teacher-dark .cls-item.active .cls-item-count {
  color: var(--t-accent);
  border-color: rgba(46, 193, 110, 0.35);
}
.teacher-dark .cls-empty {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  font-size: 0.9rem;
  color: var(--t-muted);
}
.teacher-dark .cls-empty b { color: var(--t-text); }
.teacher-dark .cls-picker-wrap { display: none; }

/* --- Detalj --------------------------------------------------------------- */
.teacher-dark .cls-detail {
  min-width: 0;
  padding: 22px 24px 26px;
}
.teacher-dark .cls-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.teacher-dark .cls-detail-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.teacher-dark .cls-detail-name {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--t-text);
  overflow-wrap: anywhere;
}
.teacher-dark .cls-detail-count {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.teacher-dark .cls-flash:empty { display: none; }
.teacher-dark .cls-flash { margin-top: 12px; }

.teacher-dark .cls-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 0;
  border-bottom: 1px solid var(--t-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.teacher-dark .cls-tabs::-webkit-scrollbar { display: none; }
.teacher-dark .cls-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 10px 14px 11px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.teacher-dark .cls-tab:hover { color: var(--t-text); }
.teacher-dark .cls-tab:focus-visible {
  outline: none;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 0 0 2px var(--t-accent-soft);
}
.teacher-dark .cls-tab.active {
  color: #eafff2;
  border-bottom-color: var(--t-accent);
}
.teacher-dark .cls-tab.active .t-icon { color: var(--t-accent); }

.teacher-dark .cls-section {
  padding-top: 20px;
  min-height: 160px;
}
.teacher-dark .cls-block + .cls-block {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--t-border);
}
.teacher-dark .cls-detail-empty {
  padding: 30px 8px;
  text-align: center;
}

/* --- Skapa en ny klass (detaljytans "ny"-läge, D-4) ----------------------- */
.teacher-dark .cls-create .new-class {
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.teacher-dark .cls-create-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--t-muted);
}
/* #453: .new-class #new-name/#new-count har flex-basis 220px/96px (gamla radlayouten);
   i den kolumn-riktade labeln blev det HÖJD (220/96 px). Nollställ flexen (id-
   specificitet krävs för att slå de gamla reglerna) och ge
   normal inputhöjd, och knappen samma höjd så den ligger i linje med fälten. */
.teacher-dark .cls-create-field #new-name,
.teacher-dark .cls-create-field #new-count { flex: none; box-sizing: border-box; height: 44px; padding: 0 12px; }
.teacher-dark .cls-create .new-class .btn { height: 44px; padding-block: 0; }
.teacher-dark .cls-create-field #new-name { min-width: 220px; }
.teacher-dark .cls-create-field #new-count { width: 110px; }
.teacher-dark .cls-create #new-msg { margin-top: 14px; }
/* #453: övriga fält i detaljytan i samma normala storlek – medlemsradernas
   namn/användarnamn, coins-fältet och "antal konton" hade webbläsarens 19 px
   (.cell stylas bara inuti .tbl), och appens .select (56 px) stack ut mot
   knapparna (40–42 px). Kontotabellens .tbl .cell rörs inte. */
.teacher-dark .cls-detail .mm-namn,
.teacher-dark .cls-detail .mm-username,
.teacher-dark .cls-detail .gc-amount,
.teacher-dark .cls-detail .mm-count {
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.92rem;
}
.teacher-dark .cls-detail .select {
  padding: 8px 12px;
  font-size: 0.95rem;
  border-width: 1.5px;
  border-radius: 10px;
}

/* --- Smal skärm: master blir en <select> överst --------------------------- */
@media (max-width: 760px) {
  .teacher-dark .cls-md {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .teacher-dark .cls-master {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px;
  }
  .teacher-dark .cls-master-head,
  .teacher-dark .cls-list,
  .teacher-dark .cls-new { display: none; }
  .teacher-dark .cls-picker-wrap {
    display: block;
    flex: 1 1 auto;
  }
  .teacher-dark .cls-picker {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-weight: 600;
  }
  .teacher-dark .cls-detail { padding: 16px 14px 20px; }
  .teacher-dark .cls-detail-name { font-size: 1.25rem; }
  .teacher-dark .cls-create-field,
  .teacher-dark .cls-create-field #new-name { min-width: 0; width: 100%; }
}


/* ── src/styles/27-larare-wizard.css ── */
/* === Revamp #442 – "Skapa nytt område"-wizarden (4 steg) ==================
   Modal med fast huvud (titel + klickbar stegindikator) och fast fot
   (Föregående / Nästa / Spara); bara stegets innehåll scrollar, så allt ryms på
   1366×768. Allt scopat under .teacher-dark (lärarsidan, X-04). */
.teacher-dark .wz-overlay { align-items: center; padding: 16px 14px; background: rgba(4, 7, 11, 0.72); }
.teacher-dark .wz-dialog {
  max-width: 960px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.teacher-dark .wz-head {
  padding: 18px 56px 12px 24px;
  border-bottom: 1px solid var(--t-border);
}
.teacher-dark .wz-titles { margin-bottom: 12px; }
.teacher-dark .wz-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.teacher-dark .wz-stepbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--t-border-strong);
  background: var(--t-surface-2);
  color: var(--t-muted);
  font: 700 0.9rem/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}
.teacher-dark .wz-stepbtn:hover { border-color: var(--t-accent); color: var(--t-text); }
.teacher-dark .wz-stepnr {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--t-raised);
  color: var(--t-text);
}
.teacher-dark .wz-stepbtn.done .wz-stepnr { background: var(--t-accent-soft); color: #7ee0a6; }
.teacher-dark .wz-stepbtn.active {
  background: var(--t-accent-soft);
  border-color: var(--t-accent);
  color: #eafff2;
}
.teacher-dark .wz-stepbtn.active .wz-stepnr { background: var(--t-accent); color: #08130c; }

.teacher-dark .wz-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px;
  color-scheme: dark;
  scrollbar-color: var(--t-border-strong) transparent;
}
.teacher-dark .wz-step-title { margin: 0 0 10px; font-size: 1.15rem; color: var(--t-text); }
.teacher-dark .wz-sub { display: block; font-weight: 700; color: var(--t-text); margin-bottom: 6px; }
.teacher-dark .wz-basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.teacher-dark .wz-name { font-size: 1.1rem; }

/* Steg 2: stora klickbara typkort (grön kant + bock när valt). */
.teacher-dark .wz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.teacher-dark .wz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 140px;
  padding: 16px;
  border-radius: 14px;
  border: 2px solid var(--t-border-strong);
  background: var(--t-surface-2);
  color: var(--t-text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.teacher-dark .wz-card:hover { border-color: rgba(46, 193, 110, 0.55); }
.teacher-dark .wz-card:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .wz-card-emoji { font-size: 2rem; line-height: 1; }
.teacher-dark .wz-card-title { font-weight: 800; font-size: 1.05rem; }
.teacher-dark .wz-card-hint { color: var(--t-muted); font-size: 0.88rem; line-height: 1.35; }
.teacher-dark .wz-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: var(--t-accent);
  color: #08130c;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.teacher-dark .wz-card.selected {
  border-color: var(--t-accent);
  background: var(--t-accent-soft);
  box-shadow: 0 0 0 1px var(--t-accent);
}
.teacher-dark .wz-card.selected .wz-card-check { opacity: 1; transform: none; }
.teacher-dark .wz-onskemal { width: 100%; resize: vertical; font-family: var(--font); }

/* Steg 3: AI-verkstaden – stor kopiera-knapp och stor materialruta. */
.teacher-dark .wz-prompt {
  background: var(--t-accent-soft);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.teacher-dark .wz-copy { width: 100%; font-size: 1.15rem; padding: 16px 20px; }
.teacher-dark .wz-instr { margin: 10px 0 0; color: #a9ecc6; }
.teacher-dark .wz-bildpar { margin: 8px 0 0; }
.teacher-dark .wz-generator {
  border: 1px solid var(--t-border-strong);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
}
/* Räknegeneratorn (#470): kompakta kryss-chips för räknesätt + ett block per
   ikryssat räknesätt med varianter och inställningar. */
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-chips .gen-chip { padding: 5px 10px; gap: 6px; border-radius: 999px; }
.gen-chips .gen-chip input { width: 16px; height: 16px; margin: 0; }
.gen-chips .gen-chip .member-name { font-weight: 600; font-size: 0.92rem; }
.gen-chip:has(input:checked) { border-color: var(--gron); }
.teacher-dark .gen-chip:has(input:checked) { border-color: var(--t-accent); background: var(--t-accent-soft); }
.gen-blocks { display: grid; gap: 10px; margin-top: 10px; }
.gen-block {
  border: 1px solid var(--t-border-strong, #e6eefa);
  border-radius: 12px;
  padding: 8px 12px 10px;
  margin: 0;
  min-width: 0;
}
.gen-block legend { font-weight: 700; padding: 0 6px; }
.gen-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.gen-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.gen-inline .select { width: auto; padding: 5px 8px; }
.gen-warn { margin: 6px 0 0; font-size: 0.88rem; color: #e8a33d; }
.teacher-dark .wz-material-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.teacher-dark .wz-material-head .wz-sub { margin: 0; }
.teacher-dark .wz-material-head .btn { padding: 8px 13px; font-size: 0.9rem; }
.teacher-dark .wz-json { width: 100%; min-height: 34vh; resize: vertical; }
.teacher-dark .wz-check-row { margin-top: 12px; }
.teacher-dark .wz-result { margin-top: 10px; }
.teacher-dark .wz-back3 { margin-top: 10px; }

/* Osparat-varningen (ersätter stäng tills läraren väljer). */
.teacher-dark .wz-leave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(242, 201, 76, 0.12);
  border-top: 1px solid rgba(242, 201, 76, 0.4);
  color: var(--t-text);
  font-weight: 700;
}
.teacher-dark .wz-leave .btn { padding: 8px 14px; font-size: 0.92rem; }

.teacher-dark .wz-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--t-border);
  background: var(--t-surface);
}
.teacher-dark .wz-pos { flex: 1; text-align: center; color: var(--t-muted); font-size: 0.9rem; }
.teacher-dark .wz-foot .btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.teacher-dark .wz-save { font-size: 1.15rem; padding: 14px 30px; }

@media (max-width: 700px) {
  .teacher-dark .wz-stepper { grid-template-columns: repeat(4, auto); }
  .teacher-dark .wz-steplabel { display: none; }
  .teacher-dark .wz-basics { grid-template-columns: 1fr; }
  .teacher-dark .wz-head,
  .teacher-dark .wz-body,
  .teacher-dark .wz-foot { padding-left: 16px; padding-right: 16px; }
  .teacher-dark .wz-pos { display: none; }
}

/* ---- Utfällda underrader per område (issue #454) ------------------------
   Klick på en rad i Innehållsstudions tabell fäller ut frågor/par/texter som
   kompakta listrader med Redigera/Ta bort + inline-formulär. Vårt designspråk:
   mörka ytor, linje-ikoner, accentgrön som enda accent. */
.teacher-dark .area-tbl-row.expanded > td { background: rgba(46, 193, 110, 0.05); border-bottom-color: transparent; }
.teacher-dark .area-tbl-row.expanded .area-tbl-name { color: var(--t-accent); }
.teacher-dark .area-items { padding-top: 10px; }
.teacher-dark .ai-panel { display: flex; flex-direction: column; gap: 18px; outline: none; }
.teacher-dark .ai-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0; font-size: 0.92rem; }
.teacher-dark .ai-generator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 14px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  color: var(--t-text);
}
.teacher-dark .ai-generator .t-icon { color: var(--t-accent); }
.teacher-dark .ai-section { display: flex; flex-direction: column; gap: 8px; }
.teacher-dark .ai-count {
  min-width: 22px;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--t-text);
  font-size: 0.78rem;
  text-align: center;
}
.teacher-dark .ai-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  overflow: hidden;
}
.teacher-dark .ai-item + .ai-item { border-top: 1px solid var(--t-border); }
.teacher-dark .ai-view { display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px 10px 14px; }
.teacher-dark .ai-view:hover { background: rgba(255, 255, 255, 0.025); }
.teacher-dark .ai-nr { flex: none; min-width: 18px; padding-top: 1px; color: var(--t-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.teacher-dark .ai-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.teacher-dark .ai-text { color: var(--t-text); font-weight: 600; overflow-wrap: anywhere; }
.teacher-dark .ai-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--t-muted); font-size: 0.86rem; }
.teacher-dark .ai-excerpt { display: block; overflow-wrap: anywhere; }
.teacher-dark .ai-answer { display: inline-flex; align-items: center; gap: 5px; color: #7ee0a6; font-weight: 600; }
.teacher-dark .ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--t-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.teacher-dark .ai-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.teacher-dark .ai-term,
.teacher-dark .ai-def { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.teacher-dark .ai-def { font-weight: 400; color: var(--t-text); }
.teacher-dark .ai-arrow { color: var(--t-accent); }
.teacher-dark .ai-acts { flex: none; display: flex; gap: 2px; }
.teacher-dark .ai-slot { padding: 12px 14px 14px; background: rgba(46, 193, 110, 0.04); }
.teacher-dark .ai-item.editing,
.teacher-dark .ai-item.confirming { box-shadow: inset 3px 0 0 var(--t-accent); }
.teacher-dark .ai-item.confirming { box-shadow: inset 3px 0 0 #eb5757; }
.teacher-dark .ai-empty { margin: 0; color: var(--t-muted); font-size: 0.9rem; }
.teacher-dark .ai-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px dashed var(--t-border-strong);
  border-radius: 8px;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.teacher-dark .ai-add:hover { color: var(--t-accent); border-color: var(--t-accent); }
.teacher-dark .ai-add:focus-visible,
.teacher-dark .ai-panel .area-act:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .ai-add-slot {
  padding: 12px 14px 14px;
  background: var(--t-surface);
  border: 1px solid rgba(46, 193, 110, 0.4);
  border-radius: 10px;
}

/* ---- Flikar + scroll i underraden (issue #455) ---------------------------
   Understruken flikrad som ämnesflikarna (#453) med antal-badge; varje flik har
   sin lista i en egen scrollyta, "+ Lägg till …" ligger under den (alltid synlig). */
.teacher-dark .ai-tabs { display: flex; flex-direction: column; gap: 12px; }
.teacher-dark .ai-tabs-row {
  display: flex;
  align-items: center;
  gap: 4px 18px;
  border-bottom: 1px solid var(--t-border);
}
.teacher-dark .ai-tablist { display: flex; flex-wrap: wrap; gap: 0 22px; min-width: 0; }
.teacher-dark .ai-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 8px 2px 9px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.teacher-dark .ai-tab:hover { color: var(--t-text); }
.teacher-dark .ai-tab.active { color: var(--t-accent); border-bottom-color: var(--t-accent); }
.teacher-dark .ai-tab.active .ai-count { background: rgba(46, 193, 110, 0.16); color: var(--t-accent); }
.teacher-dark .ai-tab:focus-visible,
.teacher-dark .ai-tab-add:focus-visible,
.teacher-dark .ai-scroll:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 4px; }
.teacher-dark .ai-tab-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0;
  padding: 3px 10px;
  background: transparent;
  border: 1px dashed var(--t-border-strong);
  border-radius: 999px;
  color: var(--t-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.teacher-dark .ai-tab-add:hover { color: var(--t-accent); border-color: var(--t-accent); }
.teacher-dark .ai-tabpanel:focus-visible { outline: none; }
.teacher-dark .ai-tabnote { margin: 0; color: var(--t-muted); font-size: 0.88rem; }
.teacher-dark .ai-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--t-border-strong) transparent;
}
.teacher-dark .ai-scroll > .ai-list { flex: none; }

/* Inline-formulär (fråga/par/text) */
.teacher-dark .ai-form { display: flex; flex-direction: column; gap: 12px; }
.teacher-dark .ai-form-title { font-weight: 700; color: var(--t-text); }
.teacher-dark .ai-form-grid { display: flex; flex-direction: column; gap: 12px; }
.teacher-dark .ai-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.teacher-dark .ai-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.teacher-dark .ai-field > label,
.teacher-dark .ai-field > legend { font-size: 0.85rem; font-weight: 600; color: var(--t-muted); padding: 0; margin-bottom: 5px; }
.teacher-dark .ai-field input[type="text"],
.teacher-dark .ai-field textarea,
.teacher-dark .ai-field select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 0.95rem;
  border-width: 1px;
  resize: vertical;
}
.teacher-dark .ai-req { color: var(--t-accent); }
.teacher-dark .ai-hint { color: var(--t-muted); font-size: 0.8rem; font-weight: 400; }
.teacher-dark .ai-opts { gap: 7px; }
.teacher-dark .ai-opt { display: flex; align-items: center; gap: 8px; }
.teacher-dark .ai-opt input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--t-accent); cursor: pointer; }
.teacher-dark .ai-opt-nr { flex: none; width: 14px; color: var(--t-muted); font-size: 0.82rem; cursor: pointer; }
.teacher-dark .ai-opt input[type="text"] { flex: 1; }
.teacher-dark .ai-opt:has(input[type="radio"]:checked) input[type="text"] { border-color: rgba(46, 193, 110, 0.6); }
.teacher-dark .ai-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher-dark .ai-form-actions .ai-save .t-icon { color: inherit; }
.teacher-dark .ai-form-errors:empty { display: none; }
.teacher-dark .ai-form-errors .msg { margin: 0; padding: 10px 12px; font-size: 0.9rem; }
.teacher-dark .ai-form-errors .error-list { margin: 6px 0 0; padding-left: 20px; }

/* Ta bort – tvåstegsbekräftelse inne i sidan */
.teacher-dark .ai-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.teacher-dark .ai-confirm-q { font-weight: 700; color: var(--t-text); }
.teacher-dark .ai-warn {
  flex-basis: 100%;
  order: 3;
  padding: 7px 10px;
  background: rgba(242, 201, 76, 0.12);
  border: 1px solid rgba(242, 201, 76, 0.4);
  border-radius: 8px;
  color: #f2d27a;
  font-size: 0.88rem;
}
.teacher-dark .ai-confirm-acts { display: flex; gap: 8px; }
.teacher-dark .ai-confirm-yes { background: #eb5757; color: #fff; }
.teacher-dark .btn.small.ai-confirm-yes .t-icon { color: #fff; }
.teacher-dark .ai-confirm .ai-form-errors { flex-basis: 100%; order: 4; }

@media (max-width: 640px) {
  .teacher-dark .ai-view { padding: 10px 6px 10px 10px; gap: 8px; }
  .teacher-dark .ai-slot,
  .teacher-dark .ai-add-slot { padding: 10px; }
  .teacher-dark .ai-form-2col { grid-template-columns: 1fr; }
  .teacher-dark .ai-form-actions .btn { flex: 1 1 auto; justify-content: center; }
  .teacher-dark .ai-add { align-self: stretch; justify-content: center; }
  /* Flikraden scrollar i sidled i stället för att bryta; lägre scrollyta. */
  .teacher-dark .ai-tabs-row { overflow-x: auto; scrollbar-width: none; }
  .teacher-dark .ai-tablist { flex-wrap: nowrap; gap: 0 18px; }
  .teacher-dark .ai-scroll { max-height: min(55vh, 420px); }
}

/* ── src/styles/28-larare-tidsjakt.css ── */
/* ---- Tidsjakten i lärarflödet (issue #598, epic #595) --------------------
   Minitidslinje (spann + en prick per händelse), granskning av händelserna före
   sparande, spann-redigeraren i underradens Tidsjakten-flik och antalsväljaren
   i wizarden / "Lägg till innehåll". Mörka lärardesignen: accentgrön som enda
   accent, röd bara för händelser utanför spannet. */
.teacher-dark .tl-mini { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 8px; }
.teacher-dark .tl-mini-track {
  position: relative;
  height: 6px;
  margin: 6px 0 2px;
  background: var(--t-border-strong);
  border-radius: 999px;
}
.teacher-dark .tl-mini-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  transform: translateY(-50%);
  background: var(--t-accent);
  border: 2px solid var(--t-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(46, 193, 110, 0.4);
}
.teacher-dark .tl-mini-dot.out { background: #eb5757; box-shadow: 0 0 0 1px rgba(235, 87, 87, 0.5); }
.teacher-dark .tl-mini-ticks { position: relative; height: 22px; }
.teacher-dark .tl-mini-tick {
  position: absolute;
  top: 0;
  height: 6px;
  border-left: 1px solid var(--t-muted);
}
.teacher-dark .tl-mini-tick > span {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  color: var(--t-muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.teacher-dark .tl-mini-cap { color: var(--t-text); font-size: 0.84rem; font-weight: 600; }
.teacher-dark .tl-mini-auto { color: var(--t-muted); font-weight: 400; }

.teacher-dark .tl-review {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
}
.teacher-dark .tl-review-h { margin: 0 0 4px; color: var(--t-text); font-size: 1rem; }
.teacher-dark .tl-rv-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; }
.teacher-dark .tl-rv-item { display: flex; gap: 14px; padding: 10px 0; }
.teacher-dark .tl-rv-item + .tl-rv-item { border-top: 1px solid var(--t-border); }
.teacher-dark .tl-rv-year {
  flex: none;
  min-width: 64px;
  color: #7ee0a6;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.teacher-dark .tl-rv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.teacher-dark .tl-rv-event { color: var(--t-text); font-weight: 700; }
.teacher-dark .tl-rv-q { color: var(--t-text); }
.teacher-dark .tl-rv-desc { color: var(--t-muted); font-size: 0.88rem; overflow-wrap: anywhere; }

.teacher-dark .ai-span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
}
.teacher-dark .ai-span-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.teacher-dark .ai-span-label { color: var(--t-text); font-weight: 700; margin-right: 4px; }
.teacher-dark .ai-span label { display: inline-flex; align-items: center; gap: 6px; color: var(--t-muted); font-size: 0.88rem; }
.teacher-dark .ai-span input[type="number"],
.teacher-dark .ai-field-year input { width: 7.5em; font-variant-numeric: tabular-nums; }
.teacher-dark .ai-span-preview .tl-mini { padding: 10px 4px 2px; }
.teacher-dark .ai-span .ai-hint { margin: 0; color: var(--t-muted); font-size: 0.8rem; }

.teacher-dark .wz-tl-count { margin-top: 14px; max-width: 420px; }
.teacher-dark .merge-tl-count select { min-width: 8em; }

/* ── src/styles/29-larare-amneslasning.css ── */
/* ---- Ämnesläsning i lärarflödet (issue #673) -----------------------------
   Underradens flik "📖 Ämnesläsning" (lista per nivå + redigering), panelen
   "Skapa ämnestexter" (beställ → klistra in → förhandsgranska per nivå → spara)
   och förhandsgranskningen i Läsresans läsvy (modal, ljus som elevens vy).
   Mörka lärardesignen: accentgrön, gult = varning, rött = fel. */
.teacher-dark .amn-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.teacher-dark .amn-top .ai-tabnote { margin: 0; }
.teacher-dark .amn-create-slot:not([hidden]) {
  padding: 14px 16px;
  background: var(--t-raised);
  border: 1px solid var(--t-border-strong);
  border-radius: 12px;
}
.teacher-dark .amn-gaps:empty { display: none; }
.teacher-dark .amn-gap-msg { margin: 0; padding: 8px 12px; }
.teacher-dark .amn-gap-msg .error-list { margin: 0; padding-left: 4px; list-style: none; }
.teacher-dark .amn-group + .amn-group { margin-top: 6px; }
.teacher-dark .amn-level-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  color: var(--t-text);
  font-size: 0.95rem;
}
.teacher-dark .amn-level-n {
  padding: 1px 8px;
  color: var(--t-muted);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 999px;
}
.teacher-dark .amn-level-n.none { color: #f2c94c; border-color: rgba(242, 201, 76, 0.45); }

/* Redigeringsformuläret: frågeblock */
.teacher-dark .amn-sub { color: var(--t-muted); font-size: 0.85rem; font-weight: 600; }
.teacher-dark .amn-qs { display: flex; flex-direction: column; gap: 10px; }
.teacher-dark .amn-q {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
}
.teacher-dark .amn-q legend { padding: 0 4px; color: var(--t-text); font-weight: 700; font-size: 0.88rem; }
.teacher-dark .amn-q .ai-field { gap: 6px; }
.teacher-dark .amn-q-del { position: absolute; top: 6px; right: 6px; }
.teacher-dark .amn-q .ai-opt-nr { width: 16px; font-weight: 700; }

/* Panelen "Skapa ämnestexter" */
.teacher-dark .amn-create { display: flex; flex-direction: column; gap: 10px; }
.teacher-dark .amn-create-h { margin: 0; color: var(--t-text); font-size: 1.05rem; }
.teacher-dark .amn-step { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--t-text); font-weight: 700; }
.teacher-dark .amn-step-nr {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #0f1419;
  font-size: 0.8rem;
  background: var(--t-accent);
  border-radius: 50%;
}
.teacher-dark .amn-create-grid { display: grid; grid-template-columns: 200px 1fr; gap: 10px 14px; }
.teacher-dark .amn-material { grid-column: 1 / -1; }
.teacher-dark .amn-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.teacher-dark .amn-field > span:first-child { color: var(--t-muted); font-size: 0.85rem; font-weight: 600; }
.teacher-dark .amn-field input,
.teacher-dark .amn-field textarea,
.teacher-dark .amn-field select { box-sizing: border-box; width: 100%; padding: 9px 11px; font: inherit; font-size: 0.95rem; }
.teacher-dark .amn-total { color: var(--t-muted); font-size: 0.8rem; }
.teacher-dark .amn-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.teacher-dark .amn-copy-row .hint { margin: 0; }
.teacher-dark .amn-paste { min-height: 120px; }
.teacher-dark .amn-check-row { margin: 0; }
.teacher-dark .amn-result:empty,
.teacher-dark .amn-save-msg:empty { display: none; }
.teacher-dark .amn-result { display: flex; flex-direction: column; gap: 10px; }
.teacher-dark .amn-result > .msg { margin: 0; }
.teacher-dark .amn-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.teacher-dark .amn-level {
  min-width: 0;
  padding: 10px 12px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 10px;
}
.teacher-dark .amn-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.teacher-dark .amn-empty { margin: 0; color: #f2c94c; font-size: 0.88rem; }
.teacher-dark .amn-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  background: var(--t-raised);
  border: 1px solid var(--t-border);
  border-left: 3px solid var(--t-accent);
  border-radius: 8px;
}
.teacher-dark .amn-item.bad { border-left-color: #eb5757; }
.teacher-dark .amn-item.off { opacity: 0.55; border-left-color: var(--t-border-strong); }
.teacher-dark .amn-item.off .amn-item-title { text-decoration: line-through; }
.teacher-dark .amn-item-title { color: var(--t-text); font-weight: 700; overflow-wrap: anywhere; }
.teacher-dark .amn-item-meta { color: var(--t-muted); font-size: 0.8rem; }
.teacher-dark .amn-notes { margin: 2px 0 0; padding-left: 18px; font-size: 0.8rem; }
.teacher-dark .amn-notes .bad { color: #ff8a8a; }
.teacher-dark .amn-notes .warn { color: #f2c94c; }
.teacher-dark .amn-item-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.teacher-dark .amn-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 1px;
  border-radius: 999px;
}
.teacher-dark .amn-badge.ok { color: #7ee0a6; background: var(--t-accent-soft); }
.teacher-dark .amn-badge.warn { color: #f2c94c; background: rgba(242, 201, 76, 0.12); }
.teacher-dark .amn-badge.bad { color: #ff8a8a; background: rgba(235, 87, 87, 0.14); }
.teacher-dark .amn-badge.off { color: var(--t-muted); background: var(--t-surface); }
.teacher-dark .amn-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.teacher-dark .amn-save-row[hidden] { display: none; }
.teacher-dark .amn-save-row .hint { margin: 0; }
@media (max-width: 720px) {
  .teacher-dark .amn-create-grid { grid-template-columns: 1fr; }
}

/* Förhandsgranskningen: Läsresans läsvy i en ljus modal (som eleven ser den). */
.amn-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 12, 18, 0.72);
}
.amn-preview-box {
  --lr-ovan: 160px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 14px 18px 18px;
  background: #eef4fb;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.amn-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.amn-preview-tag { color: #3a4a63; font-size: 0.9rem; font-weight: 700; }
.amn-preview-close {
  flex: none;
  width: 38px;
  height: 38px;
  font-size: 1.5rem;
  line-height: 1;
  color: #22314a;
  background: #fff;
  border: 1px solid #d5e0ee;
  border-radius: 50%;
  cursor: pointer;
}
.amn-preview-close:focus-visible { outline: 3px solid #4c9bff; outline-offset: 2px; }
.amn-preview-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  color: #1d5e37;
  background: #e3f7ea;
  border-radius: 12px;
}
.amn-preview-done[hidden] { display: none; }

/* ── src/styles/30-larare-roller.css ── */
/* ==========================================================================
   Lärarsidan: ny struktur + synlighet efter roll (#679)
   Huvuddelar i toppnaven + underrad för aktiv del (profilmenyn: 42-larare-meny.css),
   Översikt/Hem (#/larare/hem) och "Skapat av …" i materiallistan.
   Allt scopat under .teacher-dark (mörk stil, linje-ikoner).
   ========================================================================== */

.teacher-dark .teacher-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--t-border);
}
.teacher-dark .tsub {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--t-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.teacher-dark .tsub:hover { color: var(--t-text); background: rgba(255, 255, 255, 0.05); }
.teacher-dark .tsub.active {
  color: #eafff2;
  border-color: rgba(46, 193, 110, 0.4);
  background: rgba(46, 193, 110, 0.08);
}
.teacher-dark .tsub.active .tnav-ic { color: var(--t-accent); }

/* Lite tätare flikar så att raden (med profilmenyn) får plats på en vanlig
   laptopskärm. Under 900 px fälls toppmenyn ihop till ☰ (42-larare-meny.css). */
@media (min-width: 901px) and (max-width: 1320px) {
  .teacher-dark .teacher-nav-tabs { gap: 3px; }
  .teacher-dark .tnav { padding: 9px 10px; gap: 7px; }
}

/* --- Översikt -------------------------------------------------------------- */
.teacher-dark .ov-block { margin-bottom: 18px; }
.teacher-dark .ov-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.teacher-dark .ov-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.teacher-dark .ov-class {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--t-border);
  background: rgba(255, 255, 255, 0.03);
}
.teacher-dark .ov-class-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.teacher-dark .ov-class-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-text);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.teacher-dark .ov-class-name:hover { color: var(--t-accent); }
.teacher-dark .ov-lock { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; color: var(--t-muted); font-size: 0.86rem; }
.teacher-dark .ov-lock.on { color: #f2c94c; }
.teacher-dark .ov-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.teacher-dark .ov-quick .btn { padding: 6px 10px; gap: 6px; }
.teacher-dark .ov-live-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.teacher-dark .ov-live-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--t-border);
}
.teacher-dark .ov-live-item .hint { margin-left: 8px; }

/* --- Material: "Skapat av …" ------------------------------------------------ */
.teacher-dark .area-tbl-name-txt { display: inline-flex; flex-direction: column; vertical-align: middle; }
.teacher-dark .area-tbl-owner { color: var(--t-muted); font-weight: 500; font-size: 0.8rem; }
.teacher-dark .area-tbl-row.readonly { cursor: default; }
.teacher-dark .area-act.area-act-txt { width: auto; gap: 6px; padding: 0 10px; font-weight: 600; font-size: 0.84rem; }

/* ── src/styles/31-plugga.css ── */
/* --- Plugga-sidorna (#702–#704): rubrik, sektionsrubriker, kompakta kort ---
   Facit: preview/preview-plugga-design-forslag.html (blocket "FÖRSLAGET").
   Bygger på .big-card (03-komponenter.css) – samma gradienter, skugga, radie. */

/* Sidrubrik direkt på bakgrunden (ingen vit panel). */
.pl-huvud {
  margin: 4px 0 18px;
}
.pl-huvud h1 {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1.1;
}
.pl-huvud p {
  margin: 2px 0 0;
  color: var(--text-svag);
  font-weight: 600;
}

.sektion-rubrik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0 0 12px;
}
.sektion-rubrik h2 {
  margin: 0;
  font-size: 1.5rem;
}
.sektion-rubrik span {
  color: var(--text-svag);
  font-weight: 600;
}

/* Rutnätet: 3 kolumner i innehållsytans fulla bredd (880px), 2 när ytan är
   smalare (surfplatta, liten laptop med sidomeny), 1 på mobil. Styrs av den
   faktiska bredden i stället för fönstret, så sidomenyn räknas in. */
.kompakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.kompakt-grid > .hint {
  grid-column: 1 / -1;
}

/* Kompakt, liggande kort: emoji-ruta till vänster, text till höger. */
.big-card.kompakt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 18px;
  min-height: 92px;
}
.big-card.kompakt .emoji {
  font-size: 2.3rem;
  margin: 0;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-card.kompakt .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.big-card.kompakt .title {
  font-size: 1.2rem;
  line-height: 1.15;
  /* Långa områdesnamn bryts på flera rader – aldrig utanför kortet. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.big-card.kompakt .sub {
  margin-top: 1px;
  font-size: 0.88rem;
  line-height: 1.25;
}
.big-card.kompakt .amne {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  overflow-wrap: break-word;
}
.big-card.kompakt .card-stars {
  margin-top: 4px;
  font-size: 1.05rem;
}

/* Framstegsraden: tunn stapel + "★ X av Y". */
.big-card.kompakt .framsteg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.big-card.kompakt .stapel {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.big-card.kompakt .stapel i {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 999px;
}

/* "Ny!"-märket: vitt piller i hörnet, lite snett. */
.big-card .nymarke {
  position: absolute;
  top: -9px;
  right: 12px;
  background: #fff;
  color: var(--orange);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 1px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  transform: rotate(4deg);
}

/* --- Områdessidan (#703): rubrikrad, "Fortsätt här", äventyrskort --- */

/* Rubrikrad utan panel: ← Plugga, emoji, titel + beskrivning, stjärnpiller. */
.omr-huvud {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
.omr-huvud .omr-tillbaka {
  flex-shrink: 0;
  min-height: 44px;
}
.omr-huvud .emoji {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}
.omr-huvud .txt {
  flex: 1;
  min-width: 0;
}
.omr-huvud h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}
.omr-huvud p {
  margin: 0;
  color: var(--text-svag);
  font-weight: 600;
  overflow-wrap: break-word;
}
.omr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--skugga-mjuk);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* Mobil/smal surfplatta: knappen och pillret överst, emojin och titeln under. */
@media (max-width: 700px) {
  .omr-huvud {
    display: grid;
    /* 3 kolumner: knappen spänner 1–2 så att kolumn 1 bara blir emojins bredd. */
    grid-template-columns: auto 1fr auto;
    gap: 12px 12px;
  }
  .omr-huvud .omr-tillbaka {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
  }
  .omr-huvud .omr-pill {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .omr-huvud .emoji {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    font-size: 2.5rem;
  }
  .omr-huvud .txt {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .omr-huvud h1 {
    font-size: 1.6rem;
  }
}

/* Statusraderna i kompakta övningskort: tätare än i de stora korten. */
.big-card.kompakt .card-lock {
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.25;
}
.big-card.kompakt .card-rad {
  margin-top: 4px;
  font-size: 0.85rem;
}

/* "Fortsätt här" (spec §3.3): vit ram + gul ring och ett gult piller. */
.big-card.fortsatt-har {
  outline: 4px solid #fff;
  box-shadow: 0 0 0 7px var(--gul), var(--skugga);
}
.big-card.fortsatt-har .nymarke {
  color: #9a6b00;
  background: var(--gul);
}

/* Äventyrskort: bild kant i kant överst, namn + text och stjärnor under. */
.big-card.adv-liten {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  /* Kortets bredd styr bildens höjd (cqi) – se .scen nedan. */
  container-type: inline-size;
}
/* Bilden (320×140, xMidYMid slice) visar alltid hela bredden; höjden kapas.
   78 px i tre kolumner (facit). Bredare kort (2 kolumner, 1 kolumn på
   surfplatta/mobil) får en högre remsa, högst 120 px, så att samma del av
   bilden (y≈35–105) syns och motivet inte zoomas in för mycket. */
.adv-liten .scen {
  display: block;
  width: 100%;
  height: 78px;
  height: clamp(78px, 25cqi, 120px);
  flex-shrink: 0;
}
.adv-liten .scen svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Reservläget (tema utan scen): färgad yta med temats emoji i mitten. */
.adv-liten .scen-reserv {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.22);
}
.adv-liten .adv-rad {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
}
.adv-liten .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.adv-liten .title {
  font-size: 1.2rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.adv-liten .sub {
  margin-top: 1px;
  font-size: 0.85rem;
  line-height: 1.25;
}
.adv-liten .card-stars {
  margin: 0;
  flex-shrink: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}
/* Kortet klipper (overflow: hidden) – pillret sitter därför innanför kanten. */
.adv-liten .nymarke {
  top: 8px;
  z-index: 1;
}

/* ── src/styles/32-sasong.css ── */
/* ==========================================================================
   Säsonger i världen + inloggningen (#691, epic #689)
   ==========================================================================
   <html data-sasong="host" data-halloween="1" data-lov="1"> sätts av
   season-world.js (saknas = sommar = exakt som i dag). Färgerna kommer som
   --sz-*-variabler (paletten i season-config.js, inskriven av season-world.js
   i <style id="sz-palett">) och SVG-konsten läser dem via sz() i art-style.js.
   Här bor bara synlighet, lövens/fladdermössens rörelse och temabakgrunder. */

/* Säsongsdekor som ritas i konsten men bara syns i rätt läge. */
.sz-bara-host,
.sz-bara-halloween { display: none; }
html[data-sasong="host"] .sz-bara-host,
html[data-halloween] .sz-bara-halloween { display: inline; }
html[data-halloween] .sz-dolj-halloween { display: none; }

/* By-/skolnivåns stage-bakgrund (gräset under scen-boxen, 18-varld.css). */
@media (min-width: 821px) {
  .varld-stage[data-niva="by"],
  .varld-stage[data-niva="skola"],
  .varld-stage[data-niva="grannby"] {
    background: var(--sz-hill, #a8da8f);
  }
}
/* Port-övergångens overlay (port-overgang.js) visar samma scen – samma
   bakgrund, annars blinkar sommarblått i kanterna under zoomen (#727). */
.port-scen,
.port-overgang { background: var(--sz-port-bg, #bde3f5); }

/* --- Fallande löv ---------------------------------------------------------
   Högst 16 löv, BARA transform + opacity (kompositorn, ingen layout och
   ingen JS per bildruta). EN animation per löv (fall + svaj + snurr i samma
   transform) = ett kompositorlager per löv. pointer-events:none → hindrar
   aldrig klick. */
.sz-lager {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.sz-lov-lager, .sz-fladder-lager { display: none; }
html[data-lov] .sz-lov-lager,
html[data-halloween] .sz-fladder-lager { display: block; }

.sz-lov {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--w, 22px);
  height: var(--w, 22px);
  animation: sz-falla var(--d, 14s) ease-in-out var(--del, 0s) infinite;
}
.sz-lov svg, .sz-fladder svg { display: block; width: 100%; height: 100%; }
@keyframes sz-falla {
  0% { transform: translate3d(0, 0, 0) rotate(-20deg); opacity: 0; }
  8% { opacity: 1; }
  25% { transform: translate3d(calc(var(--drift, 40px) * 0.25 + 18px), calc(var(--h, 100vh) * 0.25), 0) rotate(45deg); }
  50% { transform: translate3d(calc(var(--drift, 40px) * 0.5 - 18px), calc(var(--h, 100vh) * 0.5 + 20px), 0) rotate(-30deg); }
  75% { transform: translate3d(calc(var(--drift, 40px) * 0.75 + 18px), calc(var(--h, 100vh) * 0.75 + 40px), 0) rotate(60deg); }
  90% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 40px), calc(var(--h, 100vh) + 80px), 0) rotate(10deg); opacity: 0; }
}

/* Fladdermöss (bara inloggningen under Halloween): flyger förbi uppe i
   kvällshimlen, långsamt, med mjuk vingflaxning (scaleY). */
.sz-fladder {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--w, 54px);
  height: calc(var(--w, 54px) * 0.625);
  animation: sz-flyga var(--d, 22s) linear var(--del, 0s) infinite;
  will-change: transform;
}
.sz-fladder > i {
  display: block;
  width: 100%;
  height: 100%;
  animation: sz-flaxa 0.45s ease-in-out infinite alternate;
}
@keyframes sz-flyga {
  0% { transform: translate3d(-80px, 0, 0); }
  50% { transform: translate3d(50vw, -24px, 0); }
  100% { transform: translate3d(calc(100vw + 80px), 6px, 0); }
}
@keyframes sz-flaxa {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.72); }
}

/* Pausa i dold flik (season-world.js sätter .sz-paus) … */
html.sz-paus .sz-lov,
html.sz-paus .sz-fladder,
html.sz-paus .sz-fladder > i { animation-play-state: paused; }
/* … och inne i rummet/laggården (rummet följer inte säsongen, §1.3). */
.varld-stage[data-niva="rum"] .sz-lager,
.varld-stage[data-niva="laggard"] .sz-lager { display: none; }
/* Av vid reducerad rörelse – ingen rörelse alls, inga stillastående löv. */
@media (prefers-reduced-motion: reduce) {
  .sz-lager { display: none !important; }
}

/* Löven ligger ovanpå scenlagren men under scenens knappar (.varld-ui) och,
   på inloggningen, under login-skylten (som ritas efter lagret). */
.varld-stage .sz-lager { z-index: calc(var(--z-scen-ui) - 1); }
/* Byarna (#732): scenens löv döljs och byns egna löv (inne i by-lagret) faller
   mellan husen och namnskyltarna, så inget löv täcker ett namn. Lagret sträcker
   sig ut över hela det kant-i-kant-breddade staget (som klipper). */
.varld-stage[data-niva="by"] > .sz-lager-wrap > .sz-lager,
.varld-stage[data-niva="grannby"] > .sz-lager-wrap > .sz-lager { display: none; }
.varld-lager .sz-lager {
  z-index: var(--z-by-lov);
  inset: 0 -50vw -50vh;
}

/* På inloggningen läggs lagret direkt efter port-SVG:n i DOM:en (före
   login-skylten), så skylten alltid ritas ovanpå löv och fladdermöss. */
/* Port-övergången flyttar med lagret in i overlayt (port-overgang.js), så
   löv och fladdermöss fortsätter genom zoomen och tonar ut i samma takt
   som scenen – världen under har sina egna löv (#727). */
.port-overgang .sz-lager { transition: opacity 0.4s ease 0.6s; }
.port-overgang.port-zoom .sz-lager { opacity: 0; }

/* --- Lärarspärren (#/larare) ----------------------------------------------
   Panelen är OFÖRÄNDRAD (samma kontrast). Temat = bakgrunden + dekor i
   hörnen runt panelen, bakom den (aldrig ovanpå text). */
html[data-sasong="host"] body:has(.sz-gate),
html[data-halloween] body:has(.sz-gate) {
  background: linear-gradient(180deg, var(--sz-gate-bg2, #0f1419), var(--sz-gate-bg, #0f1419)) fixed;
}
.sz-gate-dekor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: sz-tona-in 0.4s ease-out both;
}
.sz-gate-dekor .sz-gate-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sz-gate > * { position: relative; z-index: 1; }
.sz-gate > .sz-gate-dekor { position: fixed; z-index: 0; }
@keyframes sz-tona-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* "Lärare →"-länken på porten ligger direkt på marken: i höst/Halloween får
   den en kräm-pastill så kontrasten aldrig sjunker (WCAG AA) på mörkt gräs. */
html[data-sasong] .port-scen .port-larare-lank,
html[data-halloween] .port-scen .port-larare-lank {
  opacity: 1;
  background: #FFF3DC;
  border: 2px solid #3B3350;
  border-radius: 999px;
  padding: 3px 10px;
}

/* Halloween-djuret på inloggningen vinkar: armen (hwd-flax-h, 33-halloween.css)
   får ett större, snabbare vink – bara transform. */
.sz-vinkdjur .hwd-flax-h { animation: sz-vinka 1.3s ease-in-out infinite; }
@keyframes sz-vinka {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-32deg); }
  60% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sz-vinkdjur .hwd-flax-h { animation: none; }
}

/* ── src/styles/33-halloween.css ── */
/* Halloween-samlingen (#692, epic #689): små stämningsanimationer i konsten
   (src/halloween/hw-art-*.js). Bara transform/opacity, få element per sak,
   av vid prefers-reduced-motion. Klassen sitter på ett <g> i SVG:n. */
.hw-glod, .hw-flamma, .hw-bubbla, .hw-glimt { transform-box: fill-box; }
.hw-glod { animation: hw-glod 2.8s ease-in-out infinite alternate; }
@keyframes hw-glod { from { opacity: 0.45; } to { opacity: 1; } }
.hw-flamma { transform-origin: 50% 100%; animation: hw-flamma 0.9s ease-in-out infinite alternate; }
@keyframes hw-flamma { from { transform: scale(1, 1); } to { transform: scale(0.9, 1.08); } }
.hw-bubbla { animation: hw-bubbla 2.4s ease-in infinite; }
.hw-bubbla.d2 { animation-delay: -0.8s; }
.hw-bubbla.d3 { animation-delay: -1.6s; }
@keyframes hw-bubbla { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
.hw-glimt { animation: hw-glimt 1.9s ease-in-out infinite alternate; }
@keyframes hw-glimt { from { opacity: 0.25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hw-glod, .hw-flamma, .hw-bubbla, .hw-glimt { animation: none; }
}

/* Halloween-djuren (#695, src/halloween/hw-djur*.js): andas, svävar, studsar,
   flaxar, viftar, tuggar och går – bara transform, få element per djur, av vid
   prefers-reduced-motion. Fötterna rör sig bara när djuret promenerar
   (.promenerar sätts av rum-promenad.js). */
.hwd-andas, .hwd-svav, .hwd-studs, .hwd-flax-v, .hwd-flax-h, .hwd-svans, .hwd-mums, .hwd-fot-v, .hwd-fot-h { transform-box: fill-box; }
.hwd-andas { transform-origin: 50% 100%; animation: hwd-andas 3.2s ease-in-out infinite; }
@keyframes hwd-andas { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.97); } }
.hwd-svav { animation: hwd-svav 3s ease-in-out infinite; }
@keyframes hwd-svav { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.hwd-studs { transform-origin: 50% 100%; animation: hwd-studs 1.8s ease-in-out infinite; }
@keyframes hwd-studs { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.06, 0.93); } 70% { transform: scale(0.97, 1.04); } }
.hwd-flax-v { transform-origin: 100% 40%; animation: hwd-flax-v 2.6s ease-in-out infinite; }
.hwd-flax-h { transform-origin: 0% 40%; animation: hwd-flax-h 2.6s ease-in-out infinite; }
@keyframes hwd-flax-v { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes hwd-flax-h { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
.hwd-svans { transform-origin: 0% 100%; animation: hwd-svans 1.6s ease-in-out infinite alternate; }
@keyframes hwd-svans { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.hwd-mums { transform-origin: 50% 50%; animation: hwd-mums 0.35s ease-in-out infinite alternate; }
@keyframes hwd-mums { from { transform: scale(1, 1); } to { transform: scale(1.1, 0.55); } }
.promenerar .hwd-fot-v { animation: hwd-steg 0.55s ease-in-out infinite; }
.promenerar .hwd-fot-h { animation: hwd-steg 0.55s ease-in-out infinite -0.275s; }
.promenerar .hwd-flax-v, .promenerar .hwd-flax-h { animation-duration: 0.5s; }
@keyframes hwd-steg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .hwd-andas, .hwd-svav, .hwd-studs, .hwd-flax-v, .hwd-flax-h, .hwd-svans, .hwd-mums,
  .promenerar .hwd-fot-v, .promenerar .hwd-fot-h { animation: none; }
}

/* ── src/styles/34-kostymer.css ── */
/* --- Halloween-kostymer (#693, epic #689) ----------------------------------- */

/* avatarMarkup (avatars.js) ritar kostymerna (af-kostym) året runt (#799) –
   bara butiken är säsongsbunden, det eleven äger kan alltid bäras. */

/* Fladdermusvingarna (anchor "vingar"): hela figurens bredd, från hjässan –
   rygg-boxen i 08-avatar-klader.css är för smal för att vingarna ska synas. */
.af-wear.af-rygg.af-anchor-vingar { top: 14%; width: 100%; height: 56%; }

/* ── src/styles/35-schack.css ── */
/* ==========================================================================
   Schack (#775): brädet, pjäserna, spelarraderna, statusraden och draglistan.
   Komponenten ligger i src/schack/schack-bradet.js (laddas bara via import()).
   Rutor: ljus sand + dämpad grön. Markeringar: gul ton (vald/senaste draget),
   prick/ring (möjliga drag), röd glöd (kung i schack). Se docs/SCHACK.md.
   ========================================================================== */

.schack {
  --schack-ljus: #f2e4c4;
  --schack-mork: #8daf7e;
  --schack-kontur: #3b3350;
  --schack-gul: rgba(247, 201, 72, 0.5);
  --schack-gul-stark: rgba(247, 201, 72, 0.78);
  --schack-prick: rgba(59, 51, 80, 0.3);
  /* Brädet följer skärmen men blir aldrig mindre än 320 px (spec §2.1). */
  --schack-storlek: max(320px, min(100%, 640px, calc(100svh - 250px)));
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  min-width: 320px;
}

.schack > * { width: var(--schack-storlek); max-width: none; }

/* --- Spelarraderna ------------------------------------------------------- */

.schack-spelare {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 10px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e3e9f2;
}
.schack-spelare.pa-tur { border-color: var(--gul); box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
.schack-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #eef4ff;
}
.schack-avatar > * { max-width: 100%; max-height: 100%; }
.schack-avatar-standard { width: 34px; height: 34px; display: block; }
.schack-spelare-text { display: grid; min-width: 0; line-height: 1.2; }
.schack-spelare-namn { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schack-tur {
  display: inline-block;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gul);
  color: #5a4300;
  font-size: 0.75rem;
  vertical-align: 2px;
}
.schack-tagna { display: flex; flex-wrap: wrap; align-items: center; min-height: 20px; }
.schack-tagna .schack-pjas { width: 20px; height: 20px; margin-right: -5px; }
.schack-fordel { margin-left: 9px; font-size: 0.85rem; font-weight: 800; color: var(--text-svag); }

/* --- Brädet --------------------------------------------------------------- */

.schack-ram {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--schack-kontur), var(--skugga-mjuk);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.schack-bradet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 10px;
  overflow: hidden;
  container-type: inline-size;
}
.schack-rad { display: contents; }
.schack-ruta { position: relative; background: var(--schack-ljus); outline: none; }
.schack-ruta.mork { background: var(--schack-mork); }
.schack-bradet.interaktiv .schack-ruta.kan-valjas,
.schack-bradet.interaktiv .schack-ruta.mal,
.schack-bradet.interaktiv .schack-ruta.mal-tar { cursor: pointer; }

/* Markeringar som platt ton under pjäsen. */
.schack-ruta::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.schack-ruta.senast::before { background: var(--schack-gul); }
.schack-ruta.vald::before { background: var(--schack-gul-stark); }
.schack-ruta.i-schack::before {
  background: radial-gradient(circle, rgba(235, 64, 64, 1) 0%, rgba(235, 64, 64, 0.75) 42%, rgba(235, 64, 64, 0) 80%);
}
.schack-ruta.over::before { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.85); }
.schack-ruta:focus-visible::before { box-shadow: inset 0 0 0 4px var(--schack-kontur), inset 0 0 0 7px #fff; }

/* Möjliga drag: prick på tom ruta, ring där en pjäs kan tas. */
.schack-ruta.mal::after,
.schack-ruta.mal-tar::after { content: ""; position: absolute; pointer-events: none; }
.schack-ruta.mal::after { inset: 36%; border-radius: 50%; background: var(--schack-prick); }
.schack-ruta.mal-tar::after { inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 1.1cqi var(--schack-prick); }

.schack-pjasplats { position: absolute; inset: 0; display: block; }
.schack-pjasplats .schack-pjas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.schack-ruta.glider { z-index: 2; }
.schack-ruta.dras .schack-pjas { opacity: 0.3; }
.schack-ruta.vantar .schack-pjas { opacity: 0.55; }

/* Guiden (#790): stjärnor att samla och rätt/fel-svar på en ruta. */
.schack-stjarna { position: absolute; inset: 16%; display: block; pointer-events: none; }
.schack-stjarna[hidden] { display: none; }
.schack-stjarna svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(59, 51, 80, 0.3)); }
.schack-ruta.ratt::before { background: rgba(76, 175, 80, 0.55); box-shadow: inset 0 0 0 4px #2e7d32; }
.schack-ruta.fel::before { background: rgba(235, 64, 64, 0.35); box-shadow: inset 0 0 0 4px #c62828; }
/* Pusslen (#791): Tips markerar pjäsen som ska flyttas med en pulserande orange ring. */
.schack-ruta.tips::before { background: rgba(255, 159, 67, 0.4); box-shadow: inset 0 0 0 5px #e8710a; animation: schack-tips 1.2s ease-in-out infinite alternate; }
@keyframes schack-tips { from { box-shadow: inset 0 0 0 3px #e8710a; } to { box-shadow: inset 0 0 0 7px #e8710a; } }
@media (prefers-reduced-motion: reduce) { .schack-ruta.tips::before { animation: none; } }

/* Koordinaterna i kanten (i rutorna, i den andra rutfärgen). */
.schack-koord-rad,
.schack-koord-fil {
  position: absolute;
  font-size: max(10px, 2.1cqi);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  color: var(--schack-mork);
}
.schack-ruta.mork .schack-koord-rad,
.schack-ruta.mork .schack-koord-fil { color: var(--schack-ljus); }
.schack-koord-rad { top: 3px; left: 4px; }
.schack-koord-fil { bottom: 2px; right: 4px; }

.schack-pilar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.schack-pil line { stroke: rgba(242, 153, 74, 0.85); }
.schack-pil path { fill: rgba(242, 153, 74, 0.85); stroke: rgba(242, 153, 74, 0.85); }

.schack-spoke {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(31, 45, 74, 0.25));
}
.schack-spoke .schack-pjas { width: 112%; height: 112%; margin: -6%; display: block; }

/* --- Förvandlingsväljaren och slutrutan (ovanpå brädet) ------------------- */

.schack-forvandling,
.schack-slut {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(34, 49, 74, 0.45);
  z-index: 3;
}
.schack-forvandling-rubrik {
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}
.schack-forvandling-val { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.schack-forvandling-knapp {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 80px;
  padding: 6px 2px;
  border: 3px solid #d5deea;
  border-radius: 14px;
  background: #fff;
  font: 700 0.8rem var(--font);
  color: var(--text);
  cursor: pointer;
}
.schack-forvandling-knapp .schack-pjas { width: 52px; height: 52px; }
.schack-forvandling-knapp.forvald { border-color: var(--gul); background: #fff8df; }
.schack-forvandling-knapp:hover,
.schack-forvandling-knapp:focus-visible { border-color: var(--schack-kontur); outline: none; }

.schack-slut-kort {
  max-width: 92%;
  padding: 16px 20px;
  border-radius: var(--radie);
  background: #fff;
  text-align: center;
  box-shadow: var(--skugga-mjuk);
}
.schack-slut-rubrik { margin: 0; font-size: 1.45rem; line-height: 1.25; }
.schack-slut-orsak { margin: 6px 0 0; color: var(--text-svag); }
.schack-slut-knappar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.schack-slut-kort.schack-ton-vinst { border: 4px solid var(--gul); }
.schack-slut-kort.schack-ton-forlust { border: 4px solid #d5deea; }
.schack-slut-kort.schack-ton-remi { border: 4px solid var(--schack-mork); }

/* --- Statusraden och draglistan ------------------------------------------ */

.schack-status {
  margin: 0;
  padding: 8px 14px;
  border-radius: 14px;
  background: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
}
.schack-status-orsak { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text-svag); }
.schack-status-orsak:empty { display: none; }
.schack-status.schack-ton-schack { background: #fde8e8; color: #a32222; }
.schack-status.schack-ton-vinst { background: #fff6d6; }
.schack-status.schack-ton-remi { background: #eef5ea; }

.schack-drag { display: grid; justify-items: start; gap: 6px; }
.schack-draglista {
  margin: 0;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  word-spacing: 2px;
  line-height: 1.6;
  max-height: 9.6em; /* sex rader – långa partier skrollar i stället för att trycka ned sidan */
  overflow-y: auto;
}
.schack-draglista span { white-space: nowrap; }

/* ── src/styles/36-schack-sida.css ── */
/* ==========================================================================
   Schack – elevens sida (#776): startsidans kort, pågående parti, nivå- och
   färgväljaren samt partiet mot datorn (bräde + hjälppanel med Ångra, Tips,
   Varna mig, Ge upp). Brädet självt stylas i 35-schack.css. Se docs/SCHACK.md.
   ========================================================================== */

.schack-rot { min-width: 0; }
.schack-sida { display: grid; gap: 14px; }
.schack-rubrik { margin: 0; font-size: 2rem; line-height: 1.15; }
.schack-underrubrik { margin: 6px 0 0; font-size: 1.2rem; }
.schack-intro { margin: -6px 0 0; }
.schack-tillbaka { justify-self: start; }

/* --- Startsidan: de fyra stora korten ------------------------------------- */

.schack-kort-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.schack-kort { display: grid; justify-items: center; gap: 2px; min-height: 190px; align-content: center; }
.schack-kort-ikon { display: flex; justify-content: center; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(31, 45, 74, 0.25)); }
.schack-kort-ikon .schack-pjas { width: 72px; height: 72px; }
.schack-kort-ikon .schack-pjas + .schack-pjas { margin-left: -22px; }
.schack-kort.snart { opacity: 0.62; cursor: default; filter: saturate(0.6); }
.schack-kort.snart:hover { transform: none; }
.schack-kort.snart:active { transform: none; box-shadow: var(--skugga); }

/* Pågående parti överst på startsidan. */
.schack-pagaende {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 3px solid var(--gul);
}
.schack-pagaende-pjas .schack-pjas { width: 44px; height: 44px; display: block; }
.schack-pagaende-text { display: grid; flex: 1 1 200px; line-height: 1.25; }
.schack-pagaende-text small { color: var(--text-svag); font-weight: 600; }
.schack-pagaende .btn { margin-left: auto; }

/* --- Nivå- och färgväljaren ---------------------------------------------- */

.schack-notis {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff8df;
  border: 2px solid var(--gul);
  font-weight: 600;
}
.schack-notis .btn { margin-left: 6px; vertical-align: middle; }
.schack-nivaer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.schack-niva,
.schack-farg {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 10px;
  border: 3px solid #d5deea;
  border-radius: 16px;
  background: #fff;
  font: 700 1rem var(--font);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.schack-niva b { font-size: 1.15rem; }
.schack-niva small { font-weight: 600; color: var(--text-svag); line-height: 1.3; }
.schack-niva-pjas .schack-pjas { width: 56px; height: 56px; display: block; }
.schack-niva:hover,
.schack-farg:hover { transform: translateY(-2px); border-color: #b8c7dd; }
.schack-niva.vald,
.schack-farg.vald { border-color: var(--gul); background: #fff8df; box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
.schack-niva:focus-visible,
.schack-farg:focus-visible { outline: 3px solid var(--bla); outline-offset: 2px; }
.schack-farger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px; }
.schack-farg .schack-pjas { width: 40px; height: 40px; }
.schack-farg .schack-pjas + .schack-pjas { margin-left: -12px; }
.schack-starta { max-width: 480px; }

/* --- Partiet mot datorn: brädet + panelen -------------------------------- */

.schack-parti {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(240px, 300px);
  gap: 18px;
  align-items: start;
}
@media (max-width: 820px) {
  .schack-parti { grid-template-columns: minmax(0, 1fr); }
  /* Under 360 px räcker inte sidans marginal till ett 320 px-bräde (§2.1): brädet
     går då ut i marginalen, centrerat, i stället för att sidan skrollar i sidled (#777). */
  .schack-parti-brade { margin-inline: min(0px, (100% - 320px) / 2); }
}
.schack-panel { display: grid; gap: 10px; min-width: 0; }
.schack-panel-niva {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e3e9f2;
  line-height: 1.25;
}
.schack-panel-niva > span:last-child { display: grid; }
.schack-panel-niva small { color: var(--text-svag); font-weight: 600; }
.schack-panel-pjas .schack-pjas { width: 40px; height: 40px; display: block; }
.schack-dator-avatar .schack-pjas { width: 34px; height: 34px; display: block; }

.schack-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.schack-knappar .btn { margin: 0; }
.schack-knappar .btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.schack-varna-val {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e3e9f2;
  font-weight: 700;
  cursor: pointer;
}
.schack-varna-val input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.schack-varna-val span { display: grid; line-height: 1.25; }
.schack-varna-val small { color: var(--text-svag); font-weight: 600; }
.schack-tips-text { margin: 0; min-height: 1.4em; font-weight: 700; color: #8a5a00; }
.schack-tips-text:empty { display: none; }

/* Rutorna på sidan (aldrig confirm()): varningen och "ge upp"-frågan. */
.schack-fraga {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff8df;
  border: 3px solid var(--gul);
}
.schack-fraga-text { margin: 0; font-weight: 800; line-height: 1.3; }
.schack-fraga-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.schack-fraga-knappar .btn { margin: 0; }
.schack-geupp-ruta { background: #fdeeee; border-color: #e07777; }

/* Smal skärm (mobil, stående surfplatta): panelen ligger UNDER brädet och rutan
   skulle hamna utanför synfältet medan brädet är låst (F1). Då visas den som ett
   fast överlägg nederst i fönstret – synlig utan att skrolla – och en mörk slöja
   läggs över resten så att det är tydligt att rutan ska besvaras. */
@media (max-width: 820px) {
  .schack-parti-varnar::before,
  .schack-parti-fragar::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-toast, 900) - 1);
    background: rgba(34, 49, 74, 0.35);
  }
  .schack-fraga:not([hidden]) {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: var(--z-toast, 900);
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--skugga-mjuk);
  }
}

@media (prefers-reduced-motion: reduce) {
  .schack-niva, .schack-farg, .schack-niva:hover, .schack-farg:hover { transition: none; transform: none; }
}

/* ── src/styles/37-schack-kompis.css ── */
/* ==========================================================================
   Schack mot en kompis (#780): lobbyn (väntar-kort, klockval, klasslistan,
   pågående partier, topplistan), rutan för inkommande utmaningar och partiet
   (klockorna i spelarraderna, §7.3-texterna, remi). Brädet och partiets
   grundlayout kommer från 35-schack.css och 36-schack-sida.css. Se docs/SCHACK.md.
   ========================================================================== */

/* --- Inkommande utmaning (startsidan, lobbyn, partiet mot datorn) -------- */

.schack-utmaning-yta { display: grid; gap: 10px; margin-bottom: 14px; }
.schack-utmaning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border-radius: var(--radie);
  background: #fff8df;
  border: 3px solid var(--gul);
  box-shadow: var(--skugga-mjuk);
}
.schack-utmaning-pjas .schack-pjas { width: 44px; height: 44px; display: block; }
.schack-utmaning-text { flex: 1 1 200px; margin: 0; font-size: 1.1rem; line-height: 1.3; }
.schack-utmaning-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.schack-utmaning-knappar .btn { margin: 0; }

/* --- Lobbyn --------------------------------------------------------------- */

.schack-lobby-del { display: grid; gap: 10px; min-width: 0; }
.schack-lobby-fel {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fdeeee;
  border: 2px solid #e07777;
  color: #8a1f1f;
  font-weight: 700;
}
.schack-lobby-tom { margin: 0; }
.schack-lobby-not { margin: 0; }
.schack-lobby-ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border-radius: var(--radie);
  background: #fff;
  border: 2px solid #e3e9f2;
}
.schack-lobby-ruta .btn { margin: 0; }
.schack-lobby-ruta-text { display: grid; flex: 1 1 220px; line-height: 1.3; min-width: 0; }
.schack-lobby-ruta-text small { color: var(--text-svag); font-weight: 600; }
.schack-lobby-vantar-du,
.schack-lobby-utmanat { border: 3px solid var(--gul); background: #fff8df; }
.schack-lobby-puls .schack-pjas { width: 40px; height: 40px; display: block; animation: schack-puls 1.6s ease-in-out infinite; }
@keyframes schack-puls { 50% { transform: translateY(-4px) scale(1.06); } }

.schack-klockval { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.schack-klockval-knapp {
  padding: 8px 14px;
  border: 3px solid #d5deea;
  border-radius: 999px;
  background: #fff;
  font: 700 1rem var(--font);
  color: var(--text);
  cursor: pointer;
}
.schack-klockval-knapp.vald { border-color: var(--gul); background: #fff8df; box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
.schack-klockval-knapp:focus-visible { outline: 3px solid var(--bla); outline-offset: 2px; }

.schack-lobby-kort,
.schack-lobby-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.schack-lobby-kort { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.schack-vantar-kort,
.schack-kompis-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #e3e9f2;
  min-width: 0;
}
.schack-vantar-kort { border-color: #b9e3c8; background: #f2fbf5; }
.schack-vantar-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.schack-vantar-kort .btn,
.schack-kompis-rad .btn { margin: 0 0 0 auto; flex: 0 0 auto; }
.schack-avatar.liten { width: 32px; height: 32px; }
.schack-kompis-namn { display: grid; min-width: 0; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.schack-kompis-namn small { color: var(--text-svag); font-weight: 600; }
.schack-kompis-rad .btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.schack-lobby-ruta .btn:disabled,
.schack-vantar-kort .btn:disabled,
.schack-utmaning .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.schack-pagaende-lista li { padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid #e3e9f2; }
.schack-pagaende-lista small { color: var(--text-svag); font-weight: 600; }

/* Topplistan (§8). Smal skärm: tabellen skrollar i sin egen ruta, aldrig sidan. */
.schack-topplista-skal { overflow-x: auto; border-radius: 16px; border: 2px solid #e3e9f2; background: #fff; }
.schack-topplista { width: 100%; border-collapse: collapse; font-size: 1rem; }
.schack-topplista th,
.schack-topplista td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #edf1f7; }
.schack-topplista th { font-size: 0.85rem; color: var(--text-svag); }
.schack-topplista td:first-child,
.schack-topplista th:first-child { width: 2.5em; text-align: center; font-weight: 800; }
.schack-topplista tr:last-child td { border-bottom: 0; }
.schack-topplista tr.egen td { background: #fff3c4; }
.schack-topplista-namn { font-weight: 700; overflow-wrap: anywhere; }
.schack-topplista-namn small { color: var(--text-svag); }
.schack-topplista abbr { text-decoration: none; }
/* #816: elevens egen rad under topp 5 (samma gula som den egna raden i listan). */
.schack-topplista-du { margin: 8px 0 0; padding: 8px 12px; border-radius: 14px; background: #fff3c4; border: 2px solid #f3e2a0; font-weight: 600; }

/* --- Partiet mot en kompis -------------------------------------------------- */

.schack-spelare-extra { margin-left: auto; flex: 0 0 auto; }
.schack-spelare-extra:empty { display: none; }
.schack-klocka {
  display: inline-block;
  min-width: 4.4em;
  padding: 3px 10px;
  border-radius: 10px;
  background: #eef2f8;
  color: var(--text);
  font: 800 1.2rem/1.3 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.schack-klocka.aktiv { background: var(--text); color: #fff; }
.schack-klocka.lite { color: #a32222; }
.schack-klocka.aktiv.lite { background: #c43c3c; color: #fff; }

/* Verktygsraden ovanför brädet: kroken för t.ex. helskärmsknappen (#783). Tom = dold. */
.schack-parti-verktyg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 640px; margin: 0 auto 8px; }
.schack-parti-verktyg:empty { display: none; }
.schack-parti-verktyg .btn { margin: 0; }
.schack-kompis-lage:empty { display: none; }
.schack-kompis-lage { max-width: 640px; margin: 10px auto 0; }
/* F6: bred skärm (brädet + panelen sida vid sida) – lägesraden står överst i panelen, bredvid
   brädet, så "Kräv vinsten" syns utan att skrolla (1366×768). Smal skärm: under brädet. */
.schack-kompis-lage-panel { margin: 0; }
.schack-kompis-lage-panel .schack-kompis-krav p { flex-basis: 100%; }
@media (min-width: 821px) { .schack-kompis-lage-under { display: none; } }
@media (max-width: 820px) { .schack-kompis-lage-panel { display: none; } }
.schack-kompis-krav,
.schack-kompis-varning {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.schack-kompis-krav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #e9f8ef; border: 3px solid var(--gron); }
.schack-kompis-krav p { margin: 0; flex: 1 1 200px; }
.schack-kompis-krav .btn { margin: 0; }
.schack-kompis-varning { background: #fff8df; border: 3px solid var(--gul); }
.schack-kompis-remi-vantar { margin: 0; font-weight: 700; color: var(--text-svag); }
.schack-kompis-meddelande { color: #a32222; }
.schack-kompis-meddelande.info { color: var(--text); }
.schack-kompis-saknas { display: grid; gap: 10px; justify-items: start; }
.schack-kompis-saknas p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .schack-lobby-puls .schack-pjas { animation: none; }
}

/* ── src/styles/38-schack-helskarm.css ── */
/* ==========================================================================
   Schack i helskärm (#783). monteraHelskarm (src/schack/schack-helskarm.js)
   sätter .schack-helskarm-pa på behållaren medan den visas i helskärm. Då
   skalas brädet efter skärmen så att brädet, spelarraderna (klockorna),
   statusraden och panelens knappar ryms: bredvid varandra i liggande, under
   varandra i stående. Höjden som ryms bestäms av --hs-extra (allt utom
   brädet i brädkolumnen = summan av --hs-basis, --hs-verktyg, --hs-slutrad
   och --hs-lage), bredden av --hs-panel (panelen i liggande).
   Behållaren är .schack-rot (mot datorn) eller själva partivyn (mot en kompis).
   ========================================================================== */

.schack-helskarm-knapp { display: inline-flex; align-items: center; gap: 6px; }
.schack-helskarm-knapp svg { flex: 0 0 auto; width: 1.1em; height: 1.1em; }

.schack-helskarm-pa {
  --hs-pad: 10px;
  --hs-golv: 160px; /* minsta brädstorlek (brädet skrollar hellre än blir mindre) */
  --hs-hojd: 100vh;
  --hs-basis: 180px; /* två spelarrader, statusrad och mellanrum; draglistan döljs i helskärm */
  --hs-verktyg: 0px; /* verktygsraden med helskärmsknappen ovanför brädet (kompisvyn) */
  --hs-slutrad: 0px; /* statusraden får två rader vid slut */
  --hs-lage: 0px; /* §7.3-raden / "Kräv vinsten" under brädet (kompisvyn, stående) */
  --hs-extra: calc(var(--hs-basis) + var(--hs-verktyg) + var(--hs-slutrad) + var(--hs-lage));
  --hs-panel: 320px; /* panelens bredd + mellanrummet, liggande */
  --hs-panel-hojd: 158px; /* panelen under brädet, stående */
  box-sizing: border-box;
  overflow: auto;
  padding: var(--hs-pad);
  background: linear-gradient(160deg, #eaf3ff 0%, #f6ecff 60%, #fff6ec 100%);
  display: grid;
  place-items: center;
}
/* Slutorsaken står i slutrutan på brädet – statusraden visar bara resultatet (högst två rader). */
.schack-helskarm-pa .schack-status-orsak { display: none; }
.schack-helskarm-pa:has(.schack-slut:not([hidden])) { --hs-slutrad: 22px; }
.schack-helskarm-pa:has(.schack-parti-verktyg:not(:empty)) { --hs-verktyg: 46px; }
.schack-parti-verktyg { padding-inline: 10px; box-sizing: border-box; } /* luft mot kanten (320 px) */
.schack-helskarm-pa .schack-parti-verktyg { margin-bottom: 6px; }
/* Kompisvyn: lägesraden står i panelen (liggande) eller under brädet (stående), aldrig båda. */
.schack-helskarm-pa .schack-kompis-lage-under { display: none; }
.schack-helskarm-pa .schack-kompis-lage-panel:not(:empty) { display: block; }
@supports (height: 100dvh) {
  .schack-helskarm-pa { --hs-hojd: 100dvh; }
}

/* Liggande: brädet till vänster, panelen till höger. */
.schack-helskarm-pa .schack {
  --schack-storlek: max(var(--hs-golv), min(100vw - 2 * var(--hs-pad) - var(--hs-panel), var(--hs-hojd) - 2 * var(--hs-pad) - var(--hs-extra)));
  min-width: 0;
}
:is(.schack-helskarm-pa .schack-parti, .schack-helskarm-pa.schack-parti) {
  width: 100%;
  grid-template-columns: max-content minmax(240px, 300px);
  justify-content: center;
  align-items: center;
}
.schack-helskarm-pa .schack-parti-brade { margin-inline: 0; }

/* Stående: brädet över panelen, så brett som skärmen tillåter. */
@media (orientation: portrait), (max-width: 600px) and (min-height: 521px) {
  .schack-helskarm-pa .schack {
    --schack-storlek: max(var(--hs-golv), min(100vw - 2 * var(--hs-pad), var(--hs-hojd) - 2 * var(--hs-pad) - var(--hs-extra) - var(--hs-panel-hojd)));
  }
  :is(.schack-helskarm-pa .schack-parti, .schack-helskarm-pa.schack-parti) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .schack-helskarm-pa .schack > :not(.schack-ram) { width: max(var(--schack-storlek), min(100%, 300px)); } /* spelarrader/status får plats även vid litet bräde */
  .schack-helskarm-pa .schack-panel { width: min(100%, 520px); gap: 8px; }
  .schack-helskarm-pa .schack-panel-niva,
  .schack-helskarm-pa .schack-tillbaka,
  .schack-helskarm-pa .schack-varna-val small { display: none; } /* motståndarens namn står i spelarraden */
  .schack-helskarm-pa .schack-varna-val { padding: 6px 12px; }
  .schack-helskarm-pa:is(.schack-kompis, :has(.schack-kompis)) { --hs-panel-hojd: 84px; } /* bara Föreslå remi / Ge upp */
  .schack-helskarm-pa .schack-kompis-lage-panel:not(:empty) { display: none; }
  .schack-helskarm-pa .schack-kompis-lage-under:not(:empty) { display: block; margin-top: 6px; }
  .schack-helskarm-pa:has(.schack-kompis-lage-under:not(:empty)) { --hs-lage: 104px; --hs-golv: 110px; }
  .schack-helskarm-pa .schack-kompis-krav { flex-wrap: nowrap; padding: 6px 10px; gap: 8px; }
  .schack-helskarm-pa .schack-kompis-krav p { flex: 1 1 auto; font-size: 0.95rem; }
  .schack-helskarm-pa .schack-kompis-varning { padding: 6px 10px; font-size: 0.95rem; }
}

/* Draglistan får inte plats vid sidan av ett helskärmsbräde; den finns utanför helskärm. */
.schack-helskarm-pa .schack-drag { display: none; }

/* Låg skärm (mobil liggande, även smal): alltid sida vid sida, brädet skalas efter höjden. */
@media (max-height: 520px) {
  .schack-helskarm-pa, .schack-helskarm-pa:has(.schack-slut:not([hidden])) { --hs-basis: 124px; --hs-slutrad: 0px; --hs-pad: 6px; --hs-panel: 250px; }
  /* Verktygsraden ligger i hörnet ovanför panelen i stället för ovanför brädet – brädet behåller höjden. */
  .schack-helskarm-pa:has(.schack-parti-verktyg:not(:empty)) { --hs-verktyg: 0px; }
  .schack-helskarm-pa .schack-parti-verktyg { position: absolute; top: var(--hs-pad); right: var(--hs-pad); z-index: 2; margin: 0; padding: 0; max-width: none; }
  :is(.schack-helskarm-pa .schack-parti, .schack-helskarm-pa.schack-parti) { grid-template-columns: max-content minmax(200px, 240px); gap: 10px; }
  .schack-helskarm-pa .schack-status { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .schack-helskarm-pa .schack { --schack-storlek: max(150px, min(100vw - 2 * var(--hs-pad) - var(--hs-panel), var(--hs-hojd) - 2 * var(--hs-pad) - var(--hs-extra))); }
  .schack-helskarm-pa .schack { gap: 4px; }
  .schack-helskarm-pa .schack-panel { gap: 6px; }
  .schack-helskarm-pa .schack-panel-niva small,
  .schack-helskarm-pa .schack-varna-val small,
  .schack-helskarm-pa .schack-tillbaka { display: none; }
  .schack-helskarm-pa .schack-panel-niva,
  .schack-helskarm-pa .schack-varna-val { padding: 6px 12px; }
  .schack-helskarm-pa .schack-spelare { min-height: 34px; padding: 2px 8px; }
  .schack-helskarm-pa .schack-avatar { width: 28px; height: 28px; }
  .schack-helskarm-pa .schack-spelare-text { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
  .schack-helskarm-pa .schack-tagna { min-height: 0; }
  .schack-helskarm-pa .schack-klocka { min-width: 3.6em; padding: 1px 6px; font-size: 1rem; }
  .schack-helskarm-pa .schack-status { padding: 4px 10px; font-size: 1rem; }
}

/* Slutrutan ovanpå ett litet bräde (låg eller smal skärm): kompakt kort, knapparna i rad,
   och aldrig högre än brädet – innehållet skrollar i kortet om det ändå inte ryms. */
.schack-helskarm-pa .schack-ram { container-type: inline-size; }
@container (max-width: 420px) {
  .schack-helskarm-pa .schack-slut, .schack-helskarm-pa .schack-forvandling { padding: 6px; }
  .schack-helskarm-pa .schack-slut-kort {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 8px 10px;
    border-width: 3px;
  }
  .schack-helskarm-pa .schack-slut-rubrik { font-size: 1.05rem; line-height: 1.2; }
  .schack-helskarm-pa .schack-slut-orsak { margin-top: 2px; font-size: 0.85rem; }
  .schack-helskarm-pa .schack-slut-knappar { flex-wrap: nowrap; gap: 6px; margin-top: 6px; }
  .schack-helskarm-pa .schack-slut-knappar .btn { flex: 1 1 0; min-width: 0; margin: 0; padding: 6px 8px; font-size: 0.85rem; }
}
@container (max-width: 260px) {
  .schack-helskarm-pa .schack-slut-orsak { font-size: 0.75rem; line-height: 1.2; }
  .schack-helskarm-pa .schack-slut-rubrik { font-size: 0.95rem; }
  .schack-helskarm-pa .schack-slut-knappar { flex-wrap: wrap; }
  .schack-helskarm-pa .schack-slut-knappar .btn { flex: 1 1 42%; padding: 5px 4px; font-size: 0.8rem; }
}

/* Bekräftelserutorna (Ge upp, remi, varning) ligger som överlägg nederst i helskärm, även på bred skärm:
   i panelen skulle de göra sidan högre än skärmen (11 px skroll vid 844×390). */
.schack-helskarm-pa .schack-fraga:not([hidden]) {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: var(--z-toast, 900);
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--skugga-mjuk);
}
:is(.schack-helskarm-pa .schack-parti-varnar, .schack-helskarm-pa .schack-parti-fragar, .schack-helskarm-pa.schack-parti-varnar, .schack-helskarm-pa.schack-parti-fragar)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast, 900) - 1);
  background: rgba(34, 49, 74, 0.35);
}

/* ==========================================================================
   Lektioner och pussel i helskärm (#794). Behållaren är .schack-rot; här finns inga spelarrader eller
   draglista, bara brädet + statusraden (--lp-under) och panelen. Rubrikraden (Tillbaka, rubrik, ikon) döljs
   – Esc lämnar helskärmen. Liggande: brädet till vänster, panelen (och lektionens intro) till höger.
   Stående eller smalt: allt under varandra, introt dolt. Egna variabler (--lp-*) så att reglerna ovan
   för partierna (--hs-basis m.m.) inte behöver ändras.
   ========================================================================== */
.schack-helskarm-pa:has(.schack-lektion-brade, .schack-pussel-brade) { --lp-under: 90px; --lp-panel: 340px; --lp-panel-hojd: 230px; }
.schack-helskarm-pa :is(.schack-lektion, .schack-pussel) > :is(.schack-tillbaka, .schack-rubrik, .schack-lektion-huvud),
.schack-helskarm-pa .schack-lektion-parti > .schack-lektion-intro { display: none; }
.schack-helskarm-pa :is(.schack-lektion:not(.schack-lektion-parti), .schack-pussel) {
  grid-template-columns: max-content minmax(240px, 300px);
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 14px 18px;
  margin-bottom: 0; /* sidans negativa bottenmarginal (39/40) förskjuter centreringen */
}
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-intro { grid-column: 2; grid-row: 1; align-self: end; }
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-klar { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-yta:not([hidden]) { display: contents; }
.schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-brade { grid-column: 1; grid-row: 1 / span 2; margin-inline: 0; }
.schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-panel { grid-column: 2; grid-row: 2; align-self: start; }
.schack-helskarm-pa .schack-pussel > .schack-pussel-yta { display: contents; }
.schack-helskarm-pa .schack-pussel-yta > .schack-pussel-brade { grid-column: 1; grid-row: 1; margin-inline: 0; }
.schack-helskarm-pa .schack-pussel-yta > .schack-pussel-panel { grid-column: 2; grid-row: 1; }
.schack-helskarm-pa .schack-pussel-uppgift { display: block; } /* statusraden på ett litet bräde säger inte alltid samma sak */
.schack-helskarm-pa :is(.schack-lektion-brade, .schack-pussel-brade).schack {
  --schack-storlek: max(150px, min(100vw - 2 * var(--hs-pad) - var(--lp-panel), var(--hs-hojd) - 2 * var(--hs-pad) - var(--lp-under)));
  min-width: 0;
}
.schack-helskarm-pa .schack-pussel-kalla { display: none; }

/* Stående eller smalt: brädet över panelen, så brett som skärmen tillåter. */
@media (orientation: portrait), (max-width: 600px) and (min-height: 521px) {
  .schack-helskarm-pa :is(.schack-lektion:not(.schack-lektion-parti), .schack-pussel) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-intro { display: none; }
  .schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-brade,
  .schack-helskarm-pa .schack-pussel-yta > .schack-pussel-brade { grid-column: 1; grid-row: 1; }
  .schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-panel,
  .schack-helskarm-pa .schack-pussel-yta > .schack-pussel-panel { grid-column: 1; grid-row: 2; width: min(100%, 520px); }
  .schack-helskarm-pa :is(.schack-lektion-brade, .schack-pussel-brade).schack {
    --schack-storlek: max(150px, min(100vw - 2 * var(--hs-pad), var(--hs-hojd) - 2 * var(--hs-pad) - var(--lp-under) - var(--lp-panel-hojd)));
  }
  .schack-helskarm-pa .schack-pussel-uppgift { display: none; }
}

/* Låg skärm (mobil liggande): alltid sida vid sida, kompaktare panel. */
@media (max-height: 520px) {
  .schack-helskarm-pa:has(.schack-lektion-brade, .schack-pussel-brade) { --lp-under: 56px; --lp-panel: 270px; }
  .schack-helskarm-pa :is(.schack-lektion:not(.schack-lektion-parti), .schack-pussel) { grid-template-columns: max-content minmax(200px, 250px); gap: 8px 12px; }
  .schack-helskarm-pa :is(.schack-lektion-brade, .schack-pussel-brade).schack { --schack-storlek: max(150px, min(100vw - 2 * var(--hs-pad) - var(--lp-panel), var(--hs-hojd) - 2 * var(--hs-pad) - var(--lp-under))); }
  .schack-helskarm-pa .schack-lektion-panel, .schack-helskarm-pa .schack-pussel-panel { gap: 6px; }
  .schack-helskarm-pa .schack-lektion-intro { display: none; }
  /* Sida vid sida också i ett stående men lågt fönster: placeringen sätts om här (ordningen vinner över stående-blocket). */
  .schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-brade,
  .schack-helskarm-pa .schack-pussel-yta > .schack-pussel-brade { grid-column: 1; grid-row: 1 / span 2; }
  .schack-helskarm-pa .schack-lektion-yta:not([hidden]) > .schack-lektion-panel,
  .schack-helskarm-pa .schack-pussel-yta > .schack-pussel-panel { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; }
  .schack-helskarm-pa .schack-pussel-uppgift { display: none; }
  .schack-helskarm-pa :is(.schack-lektion-brade, .schack-pussel-brade).schack .schack-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; }
}

/* Resultatrutan (lektionen klar) i helskärm: en smal kolumn i stället för brädets max-content-kolumn,
   annars blir introt en enda lång rad och rutan skrollar i sidled (#794). */
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti):has(> .schack-lektion-klar:not([hidden])) { grid-template-columns: minmax(0, 560px); }
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti):has(> .schack-lektion-klar:not([hidden])) > .schack-lektion-intro { grid-column: 1; grid-row: 1; align-self: auto; }
.schack-helskarm-pa .schack-lektion:not(.schack-lektion-parti):has(> .schack-lektion-klar:not([hidden])) > .schack-lektion-klar { grid-column: 1; grid-row: 2; }

/* Panelen hoppar inte i höjdled när svarsrutan fylls (Tips, rätt/fel): platsen är reserverad medan den är tom. */
.schack-helskarm-pa :is(.schack-lektion-svar, .schack-pussel-svar) { min-height: calc(2.6em + 20px); box-sizing: border-box; } /* två rader, så att en kortare text inte heller flyttar panelen */
.schack-helskarm-pa :is(.schack-lektion-svar, .schack-pussel-svar):empty { display: block; visibility: hidden; }

/* ── src/styles/39-schack-guide.css ── */
/* ==========================================================================
   Schack – guiden "Lär dig schack" (#790): översikten med de 12 lektionerna,
   lektionen (bräde + uppgiftspanel) och resultatrutan. Stjärnorna på brädet
   och rätt/fel-rutorna stylas med brädet i 35-schack.css. Se docs/SCHACK.md §15.
   ========================================================================== */

.schack-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Stjärnorna ------------------------------------------------------------ */

.schack-stjarnrad { display: inline-flex; gap: 2px; align-items: center; }
.schack-gstjarna { display: block; flex: 0 0 auto; }
.schack-gstjarna path { fill: #e3e9f2; stroke: #b8c7dd; }
.schack-gstjarna.fylld path { fill: #f2c94c; stroke: #3b3350; }

/* --- Översikten ------------------------------------------------------------ */

.schack-guide-summa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
}
.schack-lektion-lista {
  display: grid;
  /* 300 px: namnet får alltid plats bredvid stjärnorna (F1 – vid 4 kolumner krockade "Specialdragen"). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.schack-lektion-kort {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 3px solid #d5deea;
  border-radius: 16px;
  background: #fff;
  font: 700 1.05rem var(--font);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.schack-lektion-kort:hover { transform: translateY(-2px); border-color: #b8c7dd; }
.schack-lektion-kort:focus-visible { outline: 3px solid var(--bla); outline-offset: 2px; }
.schack-lektion-kort.klar { background: #fffbea; border-color: #f2d98a; }
.schack-lektion-kort.nasta { border-color: var(--gul); box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
.schack-lektion-nr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #efe7fb;
  color: #5b3f8c;
  font-weight: 800;
}
.schack-lektion-kort.klar .schack-lektion-nr { background: #f2c94c; color: #3b3350; }
.schack-lektion-ikon .schack-pjas { width: 40px; height: 40px; display: block; }
.schack-lektion-namn { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.schack-lektion-namn small { font-size: 0.85rem; color: #8a5a00; }

/* --- Lektionen ------------------------------------------------------------- */

.schack-lektion-huvud { display: flex; align-items: center; gap: 12px; }
.schack-lektion-huvud .schack-lektion-ikon .schack-pjas { width: 56px; height: 56px; }
.schack-lektion-av { margin: 0; font-weight: 700; color: var(--text-svag); }
.schack-lektion-intro {
  margin: 0;
  max-width: 70ch;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e3e9f2;
  line-height: 1.45;
}
.schack-lektion-yta {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(240px, 300px);
  gap: 18px;
  align-items: start;
}
.schack-lektion-yta[hidden],
.schack-lektion-klar[hidden] { display: none; }
.schack-lektion-parti .schack-lektion-yta { display: block; }
/* Lektion 12: guidens resultatruta räcker – brädets slutruta skulle ge två "Spela igen" (F3). */
.schack-lektion-parti .schack-slut { display: none; }
/* Lektionsbrädet har inga spelare och ingen draglista – bara brädet och statusraden. */
.schack-lektion-brade .schack-spelare,
.schack-lektion-brade .schack-drag { display: none; }
.schack-lektion-fragor .schack-bradet .schack-ruta { cursor: pointer; }
.schack-lektion-panel { display: grid; gap: 10px; min-width: 0; }
.schack-lektion-panel p { margin: 0; }
.schack-lektion-steg { font-weight: 700; color: var(--text-svag); }
.schack-lektion-steg:empty,
.schack-lektion-svar:empty { display: none; }
.schack-lektion-text { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.schack-lektion-raknare { font-weight: 700; }
.schack-lektion-svar {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff8df;
  border: 2px solid var(--gul);
  font-weight: 700;
  line-height: 1.3;
}
.schack-lektion-panel .btn[hidden] { display: none; }

/* Höjden (#794, F5): brädet följer fönstrets höjd. Över brädet ligger 24 px sidmarginal, Tillbaka-knappen och
   rubrikraden (≈ 158 px), under det statusraden (upp till två rader, ≈ 77 px) och en marginal – därför 100svh - 248 px.
   Golvet 320 px (spec §2.1) gäller alltid; på en lägre skärm skrollar sidan hellre än att brädet blir mindre. */
.schack-lektion-brade.schack { --schack-storlek: max(320px, min(100%, 640px, calc(100svh - 248px))); }
/* Sidans 60 px bottenmarginal (.container) räknas inte in i höjden – annars skrollar sidan 48 px trots att allt syns. */
.schack-lektion:not(.schack-lektion-parti) { margin-bottom: -48px; }

/* Bred skärm (två kolumner): intro-rutan står i panelens kolumn, inte som en rad över brädet – annars tar den
   90 px av höjden som brädet behöver (Chromebook 1366×768 med webbläsarens egen list: ≈ 657 px synligt). */
@media (min-width: 821px) {
  .schack-lektion:not(.schack-lektion-parti) {
    grid-template-columns: minmax(320px, 1fr) minmax(240px, 300px);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .schack-lektion:not(.schack-lektion-parti) > .schack-tillbaka { grid-column: 1; grid-row: 1; }
  .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-huvud { grid-column: 1 / -1; grid-row: 2; }
  .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-intro { grid-column: 2; grid-row: 3; max-width: none; }
  .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-klar { grid-column: 1 / -1; grid-row: 4; }
  .schack-lektion:not(.schack-lektion-parti):has(> .schack-lektion-klar:not([hidden])) > .schack-lektion-intro { grid-column: 1 / -1; }
  /* Brädet och panelen blir celler i sidans rutnät (brädet över tre rader, panelen under introt). */
  .schack-lektion:not(.schack-lektion-parti) > .schack-lektion-yta:not([hidden]) { display: contents; }
  .schack-lektion-yta:not([hidden]) > .schack-lektion-brade { grid-column: 1; grid-row: 3 / span 3; }
  .schack-lektion-yta:not([hidden]) > .schack-lektion-panel { grid-column: 2; grid-row: 4; }
}

@media (max-width: 820px) {
  .schack-lektion-yta { grid-template-columns: minmax(0, 1fr); }
  /* Som partiet (#777): under 360 px går brädet ut i sidans marginal i stället för att sidan skrollar i sidled. */
  .schack-lektion-brade { margin-inline: min(0px, (100% - 320px) / 2); }
}

/* --- Resultatrutan --------------------------------------------------------- */

.schack-lektion-klar {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  max-width: 640px;
  padding: 18px 16px;
  border: 3px solid var(--gul);
  text-align: center;
}
.schack-lektion-klar-rubrik { margin: 0; font-size: 1.6rem; }
.schack-lektion-klar-text { margin: 0; max-width: 46ch; font-weight: 600; line-height: 1.4; }
.schack-lektion-klar .schack-knappar { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .schack-lektion-kort, .schack-lektion-kort:hover { transition: none; transform: none; }
}

/* ── src/styles/40-schack-pussel.css ── */
/* ==========================================================================
   Schack – pusslen "Matt i ett/två drag" (#791): valet med framstegen och
   pusselvyn (bräde + panel). Tipsringen på brädet stylas med brädet i
   35-schack.css. Se docs/SCHACK.md §16.
   ========================================================================== */

/* --- Valet: två stora kort med framstegen ---------------------------------- */

.schack-pussel-sorter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.schack-pussel-sort { min-height: 230px; }
.schack-pussel-framsteg {
  display: grid;
  gap: 4px;
  width: min(100%, 220px);
  margin-top: 10px;
}
.schack-pussel-stapel {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.schack-pussel-stapel > span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.schack-pussel-antal { font-weight: 800; }
.schack-pussel-nasta { font-size: 0.9rem; font-weight: 700; opacity: 0.92; }

/* --- Ett pussel -------------------------------------------------------------- */

.schack-pussel-yta {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(240px, 300px);
  gap: 18px;
  align-items: start;
}
/* Pusselbrädet har inga spelare och ingen draglista – bara brädet och statusraden. */
.schack-pussel-brade .schack-spelare,
.schack-pussel-brade .schack-drag { display: none; }
/* Slutrutan skulle täcka matten – "Snyggt! Schack matt!" står i statusraden och panelen. */
.schack-pussel-brade .schack-slut { display: none; }
/* Höjden (#794, F5): över brädet 24 px sidmarginal, Tillbaka-knappen och rubriken (≈ 131 px), under det statusraden
   (upp till två rader, ≈ 77 px) och en marginal. Golvet 320 px (spec §2.1) gäller alltid. */
.schack-pussel-brade.schack { --schack-storlek: max(320px, min(100%, 640px, calc(100svh - 232px))); }
/* Sidans 60 px bottenmarginal (.container) räknas inte in i höjden – annars skrollar sidan 48 px trots att allt syns. */
.schack-pussel { margin-bottom: -48px; }
.schack-pussel-panel { display: grid; gap: 10px; min-width: 0; }
.schack-pussel-panel p { margin: 0; }
.schack-pussel-nr { font-weight: 700; color: var(--text-svag); }
.schack-pussel-uppgift { font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.schack-pussel-svar:empty { display: none; }
.schack-pussel-svar {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff8df;
  border: 2px solid var(--gul);
  font-weight: 700;
  line-height: 1.3;
}
.schack-pussel-panel .btn[hidden] { display: none; }
.schack-pussel-bladdra { padding-top: 4px; border-top: 2px dashed #e3e9f2; }
.schack-pussel-kalla { font-size: 0.85rem; color: var(--text-svag); }

@media (max-width: 820px) {
  .schack-pussel-yta { grid-template-columns: minmax(0, 1fr); }
  /* Statusraden direkt ovanför säger redan "Vit drar och gör matt …" – inte två gånger (F3). */
  .schack-pussel-uppgift { display: none; }
  /* Som partiet (#777): under 360 px går brädet ut i sidans marginal i stället för att sidan skrollar i sidled. */
  .schack-pussel-brade { margin-inline: min(0px, (100% - 320px) / 2); }
}

/* ── src/styles/41-schack-mynt.css ── */
/* ==========================================================================
   Schackets pluggmynt (#798): belöningen på nivåkorten, myntraden i panelen,
   svaret i slutrutan, pokalen för Damen (lugn och kort), lektionernas och
   pusslens bockar. Myntikonen är coinIcon() (.coin-svg) via withCoinIcon.
   ========================================================================== */

.schack-niva-mynt {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #8a5a00;
  line-height: 1.3;
}
.schack-niva-mynt.slagen { color: #2f7d4f; }
.schack-mynt-hjalp { margin: 8px 0 0; }
.schack-niva-mynt .coin-svg,
.schack-mynt-rad .coin-svg,
.schack-mynt-svar .coin-svg,
.schack-lektion-mynt .coin-svg,
.schack-lektion-mynt-svar .coin-svg,
.schack-pussel-mynt .coin-svg,
.schack-intro .coin-svg { vertical-align: -0.15em; }

/* Panelen mot datorn */
.schack-mynt-rad { margin: 0; font-weight: 800; color: #8a5a00; }
.schack-mynt-rad small { display: block; font-weight: 600; color: var(--text-svag); margin-top: 2px; }
.schack-mynt-rad:empty { display: none; }

/* Slutrutan */
.schack-slut-extra { margin-top: 10px; }
.schack-mynt-svar { margin: 0; font-weight: 800; color: #8a5a00; }
.schack-mynt-svar small { display: block; font-weight: 600; color: var(--text-svag); }
.schack-mynt-svar.ny { font-size: 1.1rem; }
.schack-pokal-ny { display: block; width: 84px; height: 118px; margin: 0 auto 6px; }
.schack-pokal-ny svg { width: 100%; height: 100%; display: block; }
.schack-pokal-ny { animation: schack-pokal-in 700ms ease-out both; }
@keyframes schack-pokal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* Guiden: lektionskortens mynt (bock när de är betalda) */
.schack-lektion-kort { grid-template-columns: auto auto 1fr auto auto; }
.schack-lektion-mynt {
  font-size: 0.85rem;
  font-weight: 800;
  color: #8a5a00;
  white-space: nowrap;
}
.schack-lektion-mynt.betald { color: #2f7d4f; }
.schack-lektion-mynt-svar { margin: 4px 0 0; font-weight: 800; color: #8a5a00; }
.schack-lektion-mynt-svar:empty, .schack-pussel-mynt:empty { display: none; }
.schack-lektion-mynt-svar.ny, .schack-pussel-mynt.ny { font-size: 1.1rem; }

/* Pusslen */
.schack-pussel-mynt { margin: 0; font-weight: 800; color: #2f7d4f; }
.schack-pussel-mynt.ny { color: #8a5a00; }

@media (max-width: 420px) {
  .schack-lektion-kort { gap: 6px; padding-inline: 8px; }
  .schack-lektion-mynt { font-size: 0.78rem; }
  .schack-lektion-kort .schack-gstjarna { width: 17px; height: 17px; }
  .schack-lektion-kort .schack-lektion-ikon .schack-pjas { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .schack-pokal-ny { animation: none; }
}
html.reduce-motion .schack-pokal-ny { animation: none; }

/* ── src/styles/42-larare-meny.css ── */
/* ==========================================================================
   Lärarsidans toppmeny (#803, epic #802 DEL 1.2/1.4): profilmenyn (kontots
   namn ▾ → Inloggad som …, Hjälp och guide, Admin, Logga ut) och ☰ som fäller
   ihop huvudvalen på smala skärmar. Mörk stil som resten av lärarsidan.
   ========================================================================== */

.teacher-dark .tprof {
  position: relative;
  margin-left: auto;
}
.teacher-dark .tprof-knapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}
.teacher-dark .tprof-knapp:hover,
.teacher-dark .tprof-knapp[aria-expanded="true"] { border-color: var(--t-border-strong); }
.teacher-dark .tprof-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--t-accent-strong);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.teacher-dark .tprof-namn {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.teacher-dark .tprof-meny {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: calc(var(--z-flik-nav) + 1);
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--t-border-strong);
  background: var(--t-surface-2);
  box-shadow: var(--t-shadow);
}
.teacher-dark .tprof-meny[hidden] { display: none; }
.teacher-dark .tprof-who {
  display: block;
  padding: 6px 12px 6px;
  color: var(--t-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.teacher-dark .tprof-val {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--t-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.teacher-dark .tprof-val:hover,
.teacher-dark .tprof-val:focus-visible { background: rgba(255, 255, 255, 0.06); }
.teacher-dark .tprof-val[data-logout]:hover { color: #ff9b9b; }

/* ☰ syns bara på smala skärmar. */
.teacher-dark .tnav-burger {
  display: none;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 900px) {
  /* Ingen sidscroll i bandet längre – menyn fälls ut under raden i stället. */
  .teacher-dark .teacher-nav-inner {
    flex-wrap: wrap;
    overflow: visible;
  }
  .teacher-dark .tnav-burger {
    display: inline-flex;
    border-color: var(--t-border);
    color: var(--t-text);
  }
  .teacher-dark .tnav-burger .tnav-txt { display: inline; }
  .teacher-dark .teacher-nav-tabs { display: none; }
  .teacher-dark .teacher-nav.meny-oppen .teacher-nav-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 10;
    flex-basis: 100%;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--t-border);
  }
  .teacher-dark .teacher-nav.meny-oppen .tnav { padding: 11px 14px; }
  .teacher-dark .teacher-nav.meny-oppen .tnav .tnav-txt { display: inline; }
}
@media (max-width: 460px) {
  .teacher-dark .tprof-namn { max-width: 10ch; }
}

/* Hjälp och guide (#/larare/hjalp) – platshållare tills sub-issue F. */
.teacher-dark .hjalp-lista {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.teacher-dark .hjalp-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--t-surface-2);
  font-weight: 700;
}

/* ── src/styles/43-larare-mina-klasser.css ── */
/* ==========================================================================
   === Mina klasser #804 (epic #802 §3.1–3.3) ===
   --------------------------------------------------------------------------
   Klassväljaren (knappar / sök + rullgardin), fyra flikar med undertext,
   statistikens "· av"-flikar och Vad eleverna ser i tre numrerade steg.
   Samma mörka tema och gröna accent som resten av lärarsidan. Allt scopat
   under .teacher-dark – inga horisontella scrollbars ner till 320 px.
   ========================================================================== */
.teacher-dark.mk-page { min-width: 0; }
.teacher-dark .mk-lead {
  margin: 0 0 12px;
  color: var(--t-muted);
}

/* --- Klassväljaren --------------------------------------------------------- */
.teacher-dark .mk-klassval {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}
.teacher-dark .mk-klassknapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--t-border-strong);
  border-radius: 12px;
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.teacher-dark .mk-klassknapp:hover { border-color: var(--t-accent); }
.teacher-dark .mk-klassknapp:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .mk-klassknapp[aria-pressed="true"] {
  background: var(--t-accent-soft);
  border-color: var(--t-accent);
  color: #eafff2;
}
.teacher-dark .mk-las { display: inline-flex; color: var(--t-muted); }
.teacher-dark .mk-klassval-sok .mk-sok,
.teacher-dark .mk-klassval-sok .mk-sok-val { flex: 1 1 220px; min-width: 0; }
.teacher-dark .mk-sok-falt,
.teacher-dark .mk-klass-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid var(--t-border-strong);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
}

/* --- Vald klass + flikarna ----------------------------------------------- */
.teacher-dark .mk-klass {
  margin: 0;
  min-width: 0;
  padding: 20px 24px 24px;
}
.teacher-dark .mk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.teacher-dark .mk-namn {
  margin: 0;
  font-size: 1.5rem;
  color: var(--t-text);
  overflow-wrap: anywhere;
}
.teacher-dark .mk-antal { padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; }
.teacher-dark .mk-flikar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 0;
  border-bottom: 1px solid var(--t-border);
}
.teacher-dark .mk-flik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 14px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.teacher-dark .mk-flik small { font-weight: 500; font-size: 0.75rem; color: var(--t-muted); opacity: 0.85; }
.teacher-dark .mk-flik:hover { color: var(--t-text); }
.teacher-dark .mk-flik:focus-visible { outline: none; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 2px var(--t-accent-soft); }
.teacher-dark .mk-flik.active { color: #eafff2; border-bottom-color: var(--t-accent); }
.teacher-dark .mk-innehall { padding-top: 18px; min-height: 160px; min-width: 0; }
.teacher-dark .mk-block .subhead { margin-top: 0; }

/* Statistikens underflikar radbryts i stället för att skjuta ut sidan (9+ flikar). */
.teacher-dark.mk-page .stats-tabs { display: flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
/* Rullgardiner och fält i flikarna (t.ex. Fokuslägets målväljare) får inte bli
   bredare än skärmen – långa områdesnamn i <option> drog ut sidan på mobil. */
.teacher-dark .mk-innehall select,
.teacher-dark .mk-innehall input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; min-width: 0; box-sizing: border-box; }
.teacher-dark .mk-innehall label,
.teacher-dark .mk-innehall .field { max-width: 100%; min-width: 0; }
/* Nivåkorten i Läsresan/Ekvationsresan (minmax 300 px) får plats vid 320 px. */
.teacher-dark .mk-innehall .lrn-panel { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.teacher-dark .stats-tab.av { opacity: 0.6; }
.teacher-dark .stats-tab.av.active { opacity: 1; }
.teacher-dark .stats-av { font-weight: 500; }
.teacher-dark .stats-av-notis { margin: 0 0 14px; }
.teacher-dark .stats-av-lank { color: var(--t-accent); font-weight: 700; }

/* --- Vad eleverna ser: tre numrerade steg ------------------------------- */
.teacher-dark .mk-ser { display: flex; flex-direction: column; gap: 22px; }
.teacher-dark .mk-ser-intro { margin: 0; color: var(--t-muted); }
.teacher-dark .mk-steg + .mk-steg { padding-top: 20px; border-top: 1px solid var(--t-border); }
.teacher-dark .mk-steg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.teacher-dark summary.mk-steg-head { cursor: pointer; list-style: none; }
.teacher-dark summary.mk-steg-head::-webkit-details-marker { display: none; }
.teacher-dark summary.mk-steg-head::after { content: "▸"; color: var(--t-muted); }
.teacher-dark details[open] > summary.mk-steg-head::after { content: "▾"; }
.teacher-dark .mk-steg-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--t-accent);
  background: var(--t-accent-soft);
  color: var(--t-accent);
  font-weight: 800;
}
.teacher-dark .mk-steg-titel { margin: 0; font-size: 1.12rem; color: var(--t-text); flex: 1 1 200px; min-width: 0; }
.teacher-dark .mk-steg-hjalp { margin: 8px 0 10px; }
.teacher-dark .mk-sparat:empty { display: none; }
.teacher-dark .mk-sparat {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.teacher-dark .mk-sparat.ok { color: var(--t-accent); background: var(--t-accent-soft); }
.teacher-dark .mk-sparat.andrat { color: #f5c26b; background: rgba(245, 194, 107, 0.12); }
.teacher-dark .mk-sparat.fel { color: #ff8a80; background: rgba(255, 138, 128, 0.12); }

/* Hela områdesnamnen (inga "Svensk His…"): bredare rutor och radbrytning. */
.teacher-dark .mk-ser .member-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.teacher-dark .mk-ser .member-row { align-items: flex-start; min-width: 0; }
.teacher-dark .mk-ser .member-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* --- Smal skärm (mobil 320–760 px) ---------------------------------------- */
@media (max-width: 760px) {
  .teacher-dark .mk-klass { padding: 14px 12px 18px; }
  .teacher-dark .mk-namn { font-size: 1.25rem; }
  .teacher-dark .mk-flikar { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0; gap: 6px; }
  .teacher-dark .mk-flik {
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    overflow-wrap: anywhere;
  }
  .teacher-dark .mk-flik.active { border-color: var(--t-accent); background: var(--t-accent-soft); }
  .teacher-dark .mk-klassknapp { padding: 8px 12px; min-height: 40px; }
}

/* ── src/styles/44-larare-material.css ── */
/* ==========================================================================
   Lärarsidan: Material med underflikar (#806, epic #802 DEL 4)
   Flikraden, raden om var klassinställningarna finns och testlägesbannern.
   Allt scopat under .teacher-dark; själva vyerna (materialtabellen, Bråkresan,
   Hitta rätt!) har sina egna stilar och är oförändrade.
   ========================================================================== */

.teacher-dark .mat-flikar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 5px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.teacher-dark .mat-flik {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  color: var(--t-muted);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.teacher-dark .mat-flik:hover { color: var(--t-text); background: var(--t-raised); }
.teacher-dark .mat-flik.active { color: var(--t-text); background: var(--t-accent-soft); }
.teacher-dark .mat-flik.active .t-icon { color: var(--t-accent); }

/* De flyttade vyerna har en egen .teacher-page-rot: ingen dubbel luft inuti ytan. */
.teacher-dark .mat-host > .teacher-page { padding: 0; margin: 0; }

.teacher-dark .mat-testbanner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--t-border-strong);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-muted);
  font-size: 0.92rem;
}
.teacher-dark .mat-testbanner .t-icon { flex: none; color: var(--t-accent); }

.teacher-dark .mat-ekv-val { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.teacher-dark .mat-ekv-val select { width: auto; max-width: 100%; }
.teacher-dark .mat-info h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.teacher-dark .mat-info p { max-width: 70ch; }
.teacher-dark .mat-niva-tabell { width: 100%; max-width: 420px; }
.teacher-dark .mat-niva-tabell th,
.teacher-dark .mat-niva-tabell td { text-align: left; padding: 6px 10px; }

@media (max-width: 600px) {
  .teacher-dark .mat-flikar { width: 100%; }
  .teacher-dark .mat-flik { padding: 8px 11px; }
}

/* Schackvyerna är elevens (ljusa) och ärver annars lärarsidans ljusa text: lägg dem på en ljus yta. */
.teacher-dark .mat-schack .schack-rot {
  background: var(--ljus);
  color: var(--text);
  border-radius: 16px;
  padding: 16px;
}
.teacher-dark .mat-schack .schack-rot label { color: var(--text); }
.teacher-dark .mat-schack .schack-rot :is(h1, h2, h3, .schack-notis) { color: var(--text); }
/* "‹ Till Schack" på nivåvalet går till samma sida i provläget – dold där (i partiet leder den tillbaka till nivåvalet). */
.teacher-dark .mat-schack .schack-sida > .schack-tillbaka { display: none; }

/* ── src/styles/45-larare-elever-admin.css ── */
/* ==========================================================================
   === Elever-fliken + Admin-sidan #805 (epic #802 §3.4–3.5) ===
   --------------------------------------------------------------------------
   Kompakt elevtabell (en rad per elev, menyn ⋯, panel/bekräftelse under
   raden) och Admin-sidans stora kort. Samma mörka tema, gröna accent och
   linjeikoner som resten av lärarsidan; allt scopat under .teacher-dark.
   Ner till 320 px utan horisontell scroll: raden radbryts till två rader.
   ========================================================================== */

/* --- Verktygsraden: knappar för hela klassen + sök ------------------------ */
.teacher-dark .et { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.teacher-dark .et-verktyg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.teacher-dark .et-knappar { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.teacher-dark .et-knappar .btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--t-accent); }
.teacher-dark .et-sok { flex: 0 1 260px; min-width: 0; }
.teacher-dark .et-sok-falt {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border: 1.5px solid var(--t-border-strong);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
}
.teacher-dark .et-sok-falt:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.teacher-dark .et-fot { margin: 0; }
.teacher-dark .et-fot[hidden],
.teacher-dark .et-besked:empty { display: none; }

/* --- Tabellen ------------------------------------------------------------- */
.teacher-dark .et-tabell {
  border: 1px solid var(--t-border);
  border-radius: 12px;
  background: var(--t-surface-2);
  min-width: 0;
}
.teacher-dark .et-rad {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) 48px;
  align-items: center;
  gap: 6px 12px;
  padding: 7px 12px;
  min-width: 0;
}
.teacher-dark .et-admin .et-rad { grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(90px, 0.8fr) 48px; }
.teacher-dark .et-huvud {
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--t-border);
  color: var(--t-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.teacher-dark .et-elev + .et-elev { border-top: 1px solid var(--t-border); }
.teacher-dark .et-elev:hover > .et-rad,
.teacher-dark .et-elev.meny-oppen > .et-rad { background: rgba(255, 255, 255, 0.025); }
.teacher-dark .et-namn { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--t-text); }
.teacher-dark .et-ava { flex: none; font-size: 1.2rem; line-height: 1; }
.teacher-dark .et-namn-txt,
.teacher-dark .et-anv { overflow-wrap: anywhere; min-width: 0; }
.teacher-dark .et-anv { color: var(--t-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; }
.teacher-dark .et-lbl { display: none; color: var(--t-muted); font-family: inherit; font-size: 0.8rem; font-weight: 600; }
.teacher-dark .et-los,
.teacher-dark .et-mynt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.teacher-dark .et-varde { min-width: 0; max-width: 100%; }
.teacher-dark .et-visa { padding: 4px 10px; }
.teacher-dark .et-visat { font-weight: 700; color: var(--t-text); }
.teacher-dark .et-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; color: #eafff2; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.teacher-dark .et-okant { color: var(--t-muted); font-style: italic; }
.teacher-dark .et-satt-nytt { padding: 3px 8px; }
.teacher-dark .et-ingen { margin: 8px 0 0; }

/* --- Menyn ⋯ -------------------------------------------------------------- */
.teacher-dark .et-mer { position: relative; display: flex; justify-content: flex-end; }
.teacher-dark .et-meny-knapp { min-width: 38px; justify-content: center; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.teacher-dark .et-meny-knapp[aria-expanded="true"] { border-color: var(--t-accent); color: var(--t-accent); }
.teacher-dark .et-meny {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--t-border-strong);
  border-radius: 12px;
  background: var(--t-raised);
  box-shadow: var(--t-shadow);
}
.teacher-dark .et-meny[hidden] { display: none; }
.teacher-dark .et-menyval {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.teacher-dark .et-menyval .t-icon { color: var(--t-muted); flex: none; }
.teacher-dark .et-menyval:hover,
.teacher-dark .et-menyval:focus-visible { outline: none; background: var(--t-accent-soft); }
.teacher-dark .et-menyval.danger { color: #ff9d9d; }
.teacher-dark .et-menyval.danger .t-icon { color: #ff9d9d; }
.teacher-dark .et-menyval.danger:hover,
.teacher-dark .et-menyval.danger:focus-visible { background: rgba(235, 87, 87, 0.16); }
.teacher-dark .et-menyval[data-val="ur"] { margin-top: 4px; border-top: 1px solid var(--t-border); border-radius: 0 0 8px 8px; padding-top: 11px; }

/* --- Paneler under raden / överst + bekräftelserutan ------------------------ */
.teacher-dark .et-panel { padding: 0 12px 12px; }
.teacher-dark .et-panel[hidden],
.teacher-dark .et-klasspanel[hidden] { display: none; }
.teacher-dark .et-panelram,
.teacher-dark .et-klasspanel {
  border: 1px solid var(--t-border-strong);
  border-radius: 12px;
  background: var(--t-surface);
}
.teacher-dark .et-klasspanel > .et-panelram { border: 0; }
.teacher-dark .et-panelhuvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--t-border);
  color: var(--t-text);
}
.teacher-dark .et-panelkropp { padding: 12px 14px 14px; min-width: 0; }
.teacher-dark .et-panelkropp .hint:first-child { margin-top: 0; }
.teacher-dark .et-namnruta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.teacher-dark .et-namnruta .mm-namn { flex: 1 1 180px; min-width: 0; }
.teacher-dark .et-lagg-till { display: flex; flex-direction: column; gap: 10px; }
.teacher-dark .et-mynt-bekrafta:empty { display: none; }
.teacher-dark .et-mynt-bekrafta { margin-top: 10px; }
.teacher-dark .et-bekrafta {
  padding: 12px 14px;
  border: 1px solid var(--t-border-strong);
  border-left: 4px solid var(--t-accent);
  border-radius: 10px;
  background: var(--t-surface);
}
.teacher-dark .et-bekrafta.farlig { border-left-color: #eb5757; background: rgba(235, 87, 87, 0.07); }
.teacher-dark .et-bekrafta-text { margin: 0 0 10px; color: var(--t-text); overflow-wrap: anywhere; }

/* --- Admin-sidan: stora kort ---------------------------------------------- */
.teacher-dark .adm-kort {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.teacher-dark .adm-kortet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--t-border-strong);
  border-radius: 14px;
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.teacher-dark .adm-kortet:hover { border-color: var(--t-accent); }
.teacher-dark .adm-kortet:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.teacher-dark .adm-kortet.active { border-color: var(--t-accent); background: var(--t-accent-soft); }
.teacher-dark .adm-kort-ikon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--t-accent-soft);
  color: var(--t-accent);
}
.teacher-dark .adm-kort-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.teacher-dark .adm-kort-text b { font-size: 1.08rem; }
.teacher-dark .adm-kort-text span { color: var(--t-muted); font-size: 0.88rem; }
.teacher-dark .adm-panel { margin: 0; min-width: 0; padding: 18px 22px 22px; }
.teacher-dark .adm-panel[hidden] { display: none; }
.teacher-dark .adm-verktyg .subhead { margin-top: 0; }
.teacher-dark .adm-innehall { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.teacher-dark .adm-klassrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border: 1px solid var(--t-border);
  border-radius: 10px;
  background: var(--t-surface-2);
  min-width: 0;
}
.teacher-dark .adm-klassnamn { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.teacher-dark .adm-klassnamn input { box-sizing: border-box; width: 100%; max-width: 320px; }
.teacher-dark .adm-bekrafta { margin-top: 6px; }
.teacher-dark .adm-bekrafta[hidden] { display: none; }
.teacher-dark .adm-besked:empty { display: none; }

/* --- Smal skärm: raden blir två rader (namn + ⋯ överst) -------------------- */
@media (max-width: 640px) {
  .teacher-dark .et-sok { flex: 1 1 100%; }
  .teacher-dark .et-huvud { display: none; }
  .teacher-dark .et-rad,
  .teacher-dark .et-admin .et-rad {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "namn mer" "anv anv" "los los" "mynt mynt";
    gap: 4px 8px;
    padding: 10px 12px;
  }
  .teacher-dark .et-namn { grid-area: namn; }
  .teacher-dark .et-mer { grid-area: mer; }
  .teacher-dark .et-anv { grid-area: anv; }
  .teacher-dark .et-los { grid-area: los; }
  .teacher-dark .et-mynt { grid-area: mynt; }
  .teacher-dark .et-lbl { display: inline; }
  .teacher-dark .et-panel { padding: 0 8px 10px; }
  .teacher-dark .adm-panel { padding: 14px 12px 18px; }
}

/* ── src/styles/46-larare-hem.css ── */
/* ==========================================================================
   === Hem #807 (epic #802 DEL 2 + §1.3 + DEL 5) ===
   --------------------------------------------------------------------------
   Lärarsidans Hem (Kom igång, Att göra, Snabbval, Mina klasser), det gula
   märket på Prov i toppmenyn och rutan "Att rätta" på Mina prov. Samma mörka
   tema och gröna accent som resten av lärarsidan; gult = väntar på läraren.
   Allt scopat under .teacher-dark – ingen sidscroll ner till 320 px.
   ========================================================================== */

/* --- Märket "Prov 18" ------------------------------------------------------ */
.teacher-dark .tnav-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 999px;
  background: #f2c94c;
  color: #1d1a10;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

/* --- Sidan ------------------------------------------------------------------ */
.teacher-dark.hem-page { min-width: 0; }
.teacher-dark .hem-lead { margin: 0 0 14px; color: var(--t-muted); }
.teacher-dark .hem-block { margin: 0 0 18px; min-width: 0; }
.teacher-dark .hem-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.teacher-dark .hem-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 18px;
  align-items: start;
}

/* --- Kom igång ------------------------------------------------------------- */
.teacher-dark .hem-kom { margin: 0 0 18px; border-color: rgba(46, 193, 110, 0.35); }
.teacher-dark .hem-kom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.teacher-dark .hem-kom-head .hem-h { margin: 0; }
.teacher-dark .hem-steg { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.teacher-dark .hem-steg li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.teacher-dark .hem-steg li.klar .hem-steg-txt { color: var(--t-muted); text-decoration: line-through; }
.teacher-dark .hem-steg-txt { flex: 1 1 180px; min-width: 0; }
.teacher-dark .hem-bock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--t-border-strong);
}
.teacher-dark .hem-steg li.klar .hem-bock { background: var(--t-accent-strong); border-color: var(--t-accent-strong); color: #fff; }

/* --- Att göra ---------------------------------------------------------------- */
.teacher-dark .hem-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.teacher-dark .hem-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--t-border);
  background: rgba(255, 255, 255, 0.03);
  flex-wrap: wrap;
}
.teacher-dark .hem-rad-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--t-accent-soft);
  color: var(--t-accent);
}
.teacher-dark .hem-rad-ic.gul { background: rgba(242, 201, 76, 0.14); color: #f2c94c; }
.teacher-dark .hem-rad-ic.bla { background: rgba(86, 156, 235, 0.16); color: #8fbdf2; }
.teacher-dark .hem-rad-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.teacher-dark .hem-rad-txt .hint { margin: 0; }
.teacher-dark .hem-rad .btn { margin-left: auto; }
.teacher-dark .hem-tom { margin: 0; padding: 12px 0; color: var(--t-muted); font-weight: 600; }
.teacher-dark .hem-fel { flex-basis: 100%; margin: 4px 0 0; }

/* --- Snabbval ------------------------------------------------------------------ */
.teacher-dark .hem-snabb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.teacher-dark .hem-snabbval {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--t-border-strong);
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.teacher-dark .hem-snabbval:hover { border-color: rgba(46, 193, 110, 0.55); background: var(--t-accent-soft); }
.teacher-dark .hem-snabb-ic { grid-row: span 2; color: var(--t-accent); }
.teacher-dark .hem-snabbval .hint { margin: 0; font-size: 0.84rem; }

/* --- Mina klasser ----------------------------------------------------------------- */
.teacher-dark .hem-klasser-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.teacher-dark .hem-klasser-head .hem-h { margin: 0; }
.teacher-dark .hem-dolda .hint { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.teacher-dark .hem-kort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.teacher-dark .hem-kort {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--t-border-strong);
  background: var(--t-surface);
  min-width: 0;
}
.teacher-dark .hem-kort.dold { opacity: 0.6; border-style: dashed; }
.teacher-dark .hem-kort-oppna {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--t-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.teacher-dark .hem-kort-oppna:hover .hem-kort-namn { color: var(--t-accent); }
.teacher-dark .hem-kort-oppna .hint { margin: 0; }
.teacher-dark .hem-kort-oppna .hint b { color: var(--t-text); }
.teacher-dark .hem-kort-namn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 1.2rem; font-weight: 800; }
.teacher-dark .hem-kort-namn small { color: var(--t-muted); font-size: 0.84rem; font-weight: 600; }
.teacher-dark .hem-stapel { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.teacher-dark .hem-stapel i { display: block; height: 100%; border-radius: inherit; background: var(--t-accent); }
.teacher-dark .hem-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.teacher-dark .hem-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--t-muted);
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.teacher-dark .hem-chip.fokus { background: rgba(242, 201, 76, 0.14); color: #f2c94c; }
.teacher-dark .hem-dolj { align-self: flex-start; margin: 0 14px 12px; }

/* --- Prov → Mina prov: "Att rätta" överst (DEL 5) ------------------------------- */
.teacher-dark .provl-att-ratta:empty { display: none; }
.teacher-dark .hem-att-ratta { margin: 0 0 18px; }

/* ── src/styles/47-larare-hjalp.css ── */
/* ==========================================================================
   === Lärarsidan: hjälptexter och Hjälp och guide (#808, epic #802 DEL 8) ===
   --------------------------------------------------------------------------
   Hopfällbar hjälpruta överst i varje Mina klasser-flik och Material-underflik
   (teacher-hjalptext.js) samt guidesidan #/larare/hjalp (teacher-hjalp.js).
   Samma mörka lärartema; allt scopat under .teacher-dark.
   ========================================================================== */
.teacher-dark .hj-ruta {
  margin: 0 0 14px;
  max-width: 78ch;
  border: 1px solid var(--t-border);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-muted);
  font-size: 0.92rem;
}
.teacher-dark .hj-ruta summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: var(--t-text);
}
.teacher-dark .hj-ruta summary::-webkit-details-marker { display: none; }
.teacher-dark .hj-ruta summary .t-icon { flex: none; color: var(--t-accent); }
.teacher-dark .hj-ruta .hj-visa { margin-left: auto; color: var(--t-muted); font-weight: 600; font-size: 0.85rem; }
.teacher-dark .hj-ruta .hj-visa::before { content: "Dölj"; }
.teacher-dark .hj-ruta:not([open]) .hj-visa::before { content: "Visa"; }
.teacher-dark .hj-ruta summary:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 10px; }
.teacher-dark .hj-ruta .hj-text { margin: 0; padding: 0 12px 10px 36px; line-height: 1.5; }
.teacher-dark .hj-ruta a,
.teacher-dark .hj-guide a { color: var(--t-accent); font-weight: 650; text-decoration: none; cursor: pointer; }
.teacher-dark .hj-ruta a:hover,
.teacher-dark .hj-guide a:hover { text-decoration: underline; }

/* --- Hjälp och guide -------------------------------------------------------- */
.teacher-dark .hj-sida { max-width: 860px; }
.teacher-dark .hj-lead { margin: 0 0 14px; color: var(--t-muted); }
.teacher-dark .hj-innehall { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.teacher-dark .hj-innehall a {
  padding: 6px 12px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  color: var(--t-text);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}
.teacher-dark .hj-innehall a:hover { background: var(--t-raised); }
.teacher-dark .hj-guide { margin: 0 0 14px; scroll-margin-top: 80px; }
.teacher-dark .hj-guide h2 { margin: 0 0 4px; font-size: 1.15rem; }
.teacher-dark .hj-guide .hj-kort { margin: 0 0 10px; color: var(--t-muted); font-size: 0.92rem; }
.teacher-dark .hj-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: steg; }
.teacher-dark .hj-steg li {
  counter-increment: steg;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.teacher-dark .hj-steg li::before {
  content: counter(steg);
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--t-accent-soft);
  color: var(--t-text);
  font-weight: 800;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.teacher-dark .hj-steg .hj-admin {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--t-border-strong);
  color: var(--t-muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .teacher-dark .hj-ruta .hj-text { padding-left: 12px; }
}