/* ═══════════════════════════════════════════════════
   admin.css – Thevin v5.16
   Admin-specifika stilar.
   Kräver global.css inläst först.
   ═══════════════════════════════════════════════════ */

/* ── SIDEBAR ─────────────────────────────────────────────────────────────
   HELA menyn skrollar, inte bara en del av den. Det är ett uttryckligt val
   2026-10-16, efter ett försök åt andra hållet:

   Ett tag låg menyraderna i en egen skrollbar behållare med loggan låst i
   topp och botten-blocket låst nere. Det lät rimligt men blev sämre i
   praktiken — botten-blocket tog då garanterad plats, menyn i mitten fick
   mindre utrymme än förut, och de sidor man använder mest hamnade bakom en
   skrollning direkt. Hellre att allt skrollar sällan än att hälften skrollar
   alltid. Bygg inte tillbaka den konstruktionen.

   Höjden är i stället vunnen i mellanrummen (se nav-btn och sb-divider
   nedan), så att allt normalt ryms utan skrollning alls. Skrollningen är en
   säkerhetsventil för utfälld adminmeny, inte vardag.

   overflow-x stannar hidden — det är den som döljer texten när menyn är
   infälld till 48px. x:hidden + y:auto är en giltig kombination. */
.sidebar {
  width:48px; background:var(--surface);
  border-right:1px solid var(--border); flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  overflow-x:hidden; overflow-y:auto;
  transition:width 0.22s cubic-bezier(0.4,0,0.2,1); z-index:100;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar       { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar.expanded { width:220px; }

.sb-expand-btn {
  position:absolute; top:50%; right:-10px; transform:translateY(-50%);
  width:20px; height:36px; background:var(--surface);
  border:1px solid var(--border); border-radius:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:101; transition:all 0.15s;
}
.sb-expand-btn:hover { background:var(--surface2); border-color:var(--accent); }
.sb-expand-btn svg { width:10px; height:10px; color:var(--muted2); transition:transform 0.22s; }
.sidebar.expanded .sb-expand-btn svg { transform:rotate(180deg); }

.sb-logo {
  padding:10px 0 8px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden; min-height:56px;
}
.sb-logo-img-full { width:140px; max-width:140px; border-radius:0; display:none; flex-shrink:0; }
.sb-logo-img-mini { width:28px; height:28px; object-fit:cover; object-position:left center; border-radius:0; display:block; flex-shrink:0; }
.sidebar.expanded .sb-logo-img-full { display:block; }
.sidebar.expanded .sb-logo-img-mini { display:none; }

.sb-section {
  padding:16px 0 4px 14px; font-size:var(--t-meta); letter-spacing:2px; color:var(--muted);
  text-transform:uppercase; font-weight:600; white-space:nowrap; overflow:hidden;
  opacity:0; transition:opacity 0.15s;
}
.sidebar.expanded .sb-section { opacity:1; }

/* padding 8px, inte 10px. Fyra pixlar per rad gånger tolv synliga rader är
   48px, och det var ungefär så mycket som fattades för att versionsraden
   skulle rymmas längst ned. Osynlig ändring, stor effekt. Höj inte tillbaka
   utan att räkna om höjden. 2026-10-16. */
.nav-btn {
  display:flex; align-items:center; width:100%; padding:8px 0 8px 14px;
  background:none; border:none; color:var(--muted2); font-family:'Sora',sans-serif;
  font-size:var(--t-liten); cursor:pointer; text-align:left; transition:all 0.15s;
  white-space:nowrap; overflow:hidden; position:relative;
}
.nav-btn:hover  { color:var(--text); background:var(--surface2); }
.nav-btn.active { color:var(--accent); background:var(--accent-dim); font-weight:600; }
.nav-btn svg    { width:16px; height:16px; flex-shrink:0; }
.nav-btn span   { margin-left:10px; opacity:0; transition:opacity 0.15s; }
.sidebar.expanded .nav-btn span { opacity:1; }

.sb-divider { border:none; border-top:1px solid var(--border); margin:4px 0; }

/* margin-top:auto trycker ner blocket när menyn har plats över, och blir av
   sig själv 0 när innehållet svämmar över — då flyter det med i skrollningen
   i stället, vilket är det beteende som önskats. Låg tidigare som inline-style
   i admin.html; flyttad hit 2026-10-16.
   flex-shrink:0 — blocket får aldrig klämmas ihop när menyn är full. */
.sb-bottom-btns { display:flex; flex-direction:column; gap:2px; padding:4px 0; border-top:1px solid var(--border); flex-shrink:0; margin-top:auto; }
.sb-icon-btn {
  display:flex; align-items:center; width:100%; padding:8px 0 8px 14px;
  background:none; border:none; color:var(--muted2); font-family:'Sora',sans-serif;
  font-size:var(--t-liten); cursor:pointer; transition:all 0.15s; white-space:nowrap; overflow:hidden;
}
.sb-icon-btn:hover  { color:var(--text); background:var(--surface2); }
.sb-icon-btn svg    { width:15px; height:15px; flex-shrink:0; }
.sb-icon-btn span   { margin-left:10px; opacity:0; transition:opacity 0.15s; }
.sidebar.expanded .sb-icon-btn span { opacity:1; }

.sb-user      { padding:2px 0 4px; overflow:hidden; flex-shrink:0; }
.sb-user-info { display:flex; flex-direction:column; gap:1px; opacity:0; transition:opacity 0.15s; white-space:nowrap; padding:4px 14px; }
.sidebar.expanded .sb-user-info { opacity:1; }
.sb-user-name { font-size:var(--t-liten); font-weight:600; color:var(--text); }
.sb-user-role { font-size:var(--t-meta); color:var(--muted2); }

.sb-vers-btn {
  padding:4px 0 4px 14px; background:none; border:none;
  color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
  cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden;
  letter-spacing:0.5px; display:block; width:100%; opacity:0; transition:opacity 0.15s;
}
.sidebar.expanded .sb-vers-btn { opacity:1; }
.sb-vers-btn:hover { color:var(--text); }

/* ── MAIN LAYOUT ── */
body        { display:flex; }
.main       { flex:1; overflow-y:auto; min-height:100vh; }
.page       { display:none; padding:36px 40px; animation:fadeIn 0.25s ease; }
.page.active { display:block; }

/* ── QUIZ OVERVIEW ── */
.subject-group  { margin-bottom:2px; }
.subject-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; background:var(--surface);
  border:none; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background 0.1s; user-select:none;
}
.subject-header:hover { background:var(--surface2); }
.subject-header-left  { display:flex; align-items:center; gap:8px; }
.subject-name   { font-size:var(--t-meta); font-weight:600; color:var(--muted2); letter-spacing:1.5px; text-transform:uppercase; }
.subject-count  { font-size:var(--t-meta); color:var(--muted); }
.subject-chevron { width:11px; height:11px; color:var(--muted); transition:transform 0.2s; flex-shrink:0; }
.subject-chevron.open   { transform:rotate(180deg); }
.subject-quizzes        { display:none; }
.subject-quizzes.open   { display:block; }

.subfolder-group  { border-bottom:1px solid var(--border); }
.subfolder-header {
  display:flex; align-items:center; gap:6px; padding:6px 14px 6px 28px;
  cursor:pointer; transition:background 0.1s; background:var(--surface);
}
.subfolder-header:hover { background:var(--surface2); }
.subfolder-name   { font-size:var(--t-meta); color:var(--muted2); font-weight:600; flex:1; }
.subfolder-count  { font-size:var(--t-meta); color:var(--muted); }
.subfolder-chevron { width:10px; height:10px; color:var(--muted); transition:transform 0.2s; flex-shrink:0; }
.subfolder-quizzes      { display:none; }
.subfolder-quizzes.open { display:block; }

.quiz-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 8px 28px; background:var(--surface);
  border:none; border-bottom:1px solid var(--border);
  transition:background 0.1s; cursor:pointer;
}
.quiz-row.quiz-row-sub  { padding-left:42px; }
/* ── Skrivfrågor mot flervalsfrågor ───────────────────────────
   Bara etikettens text är färgad. Raden är sig lik i övrigt: en
   färgad kant och en bakgrundston på varje rad blev för mycket när
   BÅDA typerna märktes - listan skrek i två färger i stället för att
   skilja dem åt.

   var(--warn) och var(--accent) i stället för fasta hexvärden: båda
   har en mörkare variant i det ljusa temat, så texten är läsbar mot
   vitt utan att bli grumlig mot mörkt. */
.quiz-typmarke {
  display:inline-block; font-size:var(--t-meta); font-weight:700;
  margin-right:7px; letter-spacing:0.3px;
}
.quiz-typmarke-skriv   { color:var(--warn); }
.quiz-typmarke-flerval { color:var(--accent); }
/* Läsuppdragets quiz: byggt av elevernas val, körs i Kahoot-läge. Egen
   färg så att det inte läses som ett skrivhäfte. */
.quiz-typmarke-lasuppdrag { color:var(--correct); }

/* ── Dra för att ändra ordning inom mappen ────────────────────
   Handtaget, inte hela raden: raden har onclick som öppnar quizet,
   och en rad som är både klickbar och dragbar ger öppnade quiz när
   man bara menade att flytta. */
.quiz-draghandtag {
  display:flex; align-items:center; justify-content:center;
  width:18px; flex-shrink:0; cursor:grab;
  color:var(--muted2); opacity:0; transition:opacity 0.12s;
  margin-left:-6px;
}
.quiz-row:hover .quiz-draghandtag { opacity:0.65; }
.quiz-draghandtag:hover           { opacity:1 !important; color:var(--text); }
.quiz-draghandtag:active          { cursor:grabbing; }

.quiz-row.quiz-row-dras { opacity:0.4; }

/* Linjen visar var raden hamnar om man släpper nu. Den ritas med
   box-shadow och inte med border, så att raden inte hoppar en pixel. */
.quiz-row.quiz-drop-over  { box-shadow:inset 0 2px 0 0 var(--accent); }
.quiz-row.quiz-drop-under { box-shadow:inset 0 -2px 0 0 var(--accent); }
.quiz-row:hover         { background:var(--surface2); }
.quiz-row-left  { display:flex; align-items:center; gap:10px; min-width:0; }
.quiz-name      { font-size:var(--t-liten); font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quiz-meta      { font-size:var(--t-meta); color:var(--muted); margin-top:1px; }
.quiz-row-right { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:12px; }

/* ── Senast utdelad ──────────────────────────────────
   Egen kolumn i stället för ännu en bit i .quiz-meta. Med hundra quiz i
   listan är det just att datumen står under varandra som gör dem läsbara;
   inklistrade efter "10 frågor" hade de hamnat på olika ställen beroende
   på hur långt quiznamnet är.

   margin-left:auto trycker kolumnen mot knapparna. .quiz-row har
   justify-content:space-between, men en auto-marginal äter upp det fria
   utrymmet först - annars hade datumet hamnat mitt i raden.

   Tomt för ett quiz som aldrig delats ut. Ett streck eller "aldrig" på
   varannan rad blir brus i en lista man skannar. */
.quiz-utdelad {
  font-size:var(--t-meta); color:var(--muted); white-space:nowrap;
  margin-left:auto; padding-left:12px; flex-shrink:0;
  text-align:right; min-width:64px;
}
/* På smal skärm får namnet plats före datumet. */
@media (max-width: 680px) { .quiz-utdelad { display:none; } }

/* ── SESSIONER ── */
.session-active {
  border:1px solid var(--border); border-bottom:none; background:var(--surface);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-left:2px solid var(--correct);
}
.session-active:last-child      { border-bottom:1px solid var(--border); }
.session-active-left            { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.session-active-dot             { width:6px; height:6px; border-radius:50%; background:var(--correct); flex-shrink:0; animation:pulse 2s infinite; }
.session-active-info            { min-width:0; }
.session-active-namn            { font-size:var(--t-liten); font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-active-meta            { font-size:var(--t-meta); color:var(--muted2); margin-top:1px; }
.session-active-actions         { display:flex; gap:6px; flex-shrink:0; align-items:center; }
.session-active-box             { accent-color:var(--accent); width:16px; height:16px; margin-left:8px; flex-shrink:0; }

/* ── RUMSKODEN ───────────────────────────────────────────────────────────
   Klassen fanns i sessioner.js men hade ingen regel i någon css-fil, så
   koden ritades som vanlig brödtext mitt i raden. Den är det läraren läser
   upp för klassen och klistrar in i Classroom — den ska se ut som en kod
   och gå att få tag i utan att skrivas av.

   user-select:all gör att ett klick markerar hela koden. Klicket kopierar
   den dessutom, men utan https eller utan tillåtelse finns inget urklipp,
   och då är markeringen kvar som väg ut. */
.rumskod {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-liten);
  letter-spacing:1px; color:var(--muted2);
  background:var(--surface2); border:1px solid var(--border);
  padding:2px 8px; flex-shrink:0; cursor:pointer; user-select:all;
  transition:color 0.12s, border-color 0.12s;
}
.rumskod:hover { color:var(--text); border-color:var(--accent); }
/* I resultatkortet står koden först i en tät rad och behöver fast bredd så
   att quiznamnen hamnar i linje. */
.rumskod-liten { min-width:66px; text-align:center; }

/* ── MÄRKEN PÅ EN SESSION ────────────────────────────────────────────────
   Läge, dolt facit och frågetyp är tre upplysningar som gäller samtidigt
   och aldrig ersätter varandra. Samma märken på den aktiva raden i
   Sessioner och på kortet i Resultat — det är samma sorts session, och den
   som går mellan vyerna ska inte behöva läsa om från början.

   Klasser i stället för style-attribut, inga egna färgvärden, ingen
   hörnradie och ingen text under 12px. */
.session-marke {
  display:inline-block; margin-left:8px; padding:1px 6px;
  font-size:var(--t-meta); font-weight:600; letter-spacing:0.3px;
  white-space:nowrap; vertical-align:baseline;
}
.session-marke-prov   { background:var(--warn-dim);    color:var(--warn); }
.session-marke-kahoot { background:var(--accent-dim);  color:var(--accent); }
.session-marke-ai     { background:var(--accent-dim);  color:var(--accent); }
.session-marke-las    { background:var(--correct-dim); color:var(--correct); }
/* Test, dolt facit och arkiverad är upplysningar, inte skärpningar. De ska
   gå att läsa men inte dra blicken från provmärket. */
.session-marke-test   { background:var(--surface2); color:var(--muted2); }
.session-marke-dolt   { background:var(--surface2); color:var(--muted2); font-weight:500; }
.session-marke-ark    { background:var(--surface2); color:var(--muted);  font-weight:500; }

/* Frågetypen använder quizlistans märke, så att ett skrivhäfte ser likadant
   ut i Quiz, Sessioner och Resultat. Blandat är nytt: både flervalsfrågor
   och skrivfrågor i samma quiz. */
.quiz-typmarke-blandat { color:var(--muted2); }
/* Dokument: ett Word-dokument eleven skriver i. Räknat ur fraggor ser
   det ut som skrivfrågor, men för läraren är det en hel sida med
   luckor och inte en rad frågor.
   SAMMA FÄRG som flerval och skrivfrågor, inte en egen. Märkena i
   quizlistan är en familj och ORDET bär skillnaden; en tredje färg
   gjorde listan brokig utan att säga något nytt. Stod tidigare på en
   variabel som ingen hade definierat och syntes därför svart.
   2026-10-24. */
.quiz-typmarke-dokument { color:var(--accent); }
/* Matchning: samma familj och samma skäl som Dokument ovan — ordet bär
   skillnaden, inte färgen. 2026-10-30. */
.quiz-typmarke-matchning { color:var(--accent); }
.session-active-namn .quiz-typmarke,
.rk-namn .quiz-typmarke { margin-left:8px; margin-right:0; }

.klass-chevron.open { transform:rotate(180deg); }
.klass-elever       { display:none; }
.klass-elever.open  { display:block; }

/* ── DELA QUIZ MODAL ── */
.dela-modal   { max-width:480px; }
.larare-lista { display:flex; flex-direction:column; gap:8px; margin:16px 0; max-height:260px; overflow-y:auto; }
.larare-rad   {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--surface2); border:1px solid var(--border); transition:border-color 0.15s;
}
.larare-rad:hover     { border-color:var(--accent); }
.larare-rad-namn      { font-size:var(--t-liten); font-weight:600; }

/* ── INKOMMANDE QUIZ ── */
.inkommande-quiz-notis  { border:1px solid var(--accent); background:var(--accent-dim); padding:16px 20px; margin-bottom:16px; }
.inkommande-quiz-titel  { font-size:var(--t-liten); letter-spacing:2px; color:var(--accent); text-transform:uppercase; font-weight:600; margin-bottom:10px; }
.inkommande-quiz-rad    { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--border); }
.inkommande-quiz-rad:last-child { border-bottom:none; padding-bottom:0; }
.inkommande-quiz-info   { font-size:var(--t-liten); }
.inkommande-quiz-info strong { font-weight:600; color:var(--text); }
.inkommande-quiz-info span   { color:var(--muted2); font-size:var(--t-liten); }
.inkommande-quiz-actions     { display:flex; gap:8px; flex-shrink:0; align-items:center; }
/* Kapitelvalet på en delad slide (slide-dela.js). */
.inkommande-slide-kapitel    { display:flex; gap:6px; align-items:center; font-size:var(--t-meta); color:var(--muted2); white-space:nowrap; }
.inkommande-slide-kapitel select { max-width:240px; }

/* ── Hopfälld banderoll ───────────────────────────────────────
   Rutan får inte försvinna så länge något väntar på import – en
   lärare som bara tittar i dag ska kunna importera i morgon. Men
   sex rader överst på Quiz-sidan varje dag är för mycket, så den
   går att fälla ihop till en rad. Läget sparas per lärare, och
   quiz-dela.js fäller ut den av sig själv när något nytt kommit. */
.inkommande-quiz-hopfalld {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 20px;
}
.inkommande-quiz-hopfalld .inkommande-quiz-titel { margin-bottom:0; }

.inkommande-quiz-huvud {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:6px;
}
.inkommande-quiz-huvud .inkommande-quiz-titel { margin-bottom:0; }

/* Kryssrutan ligger i samma label som texten, så hela raden är
   klickbar. Utan flex hamnar rutan på baslinjen och texten hoppar. */
.inkommande-quiz-info {
  display:flex; align-items:center; gap:8px;
  cursor:pointer; min-width:0;
}
.inkommande-quiz-info input[type="checkbox"] {
  width:15px; height:15px; flex-shrink:0; cursor:pointer;
  accent-color:var(--accent); margin:0;
}
.inkommande-quiz-alla {
  display:flex; align-items:center; gap:6px;
  font-size:var(--t-liten); color:var(--muted2); cursor:pointer; user-select:none;
}
.inkommande-quiz-alla input[type="checkbox"] {
  width:15px; height:15px; cursor:pointer; accent-color:var(--accent); margin:0;
}

/* En tyst tom ruta ser likadan ut som "inget väntar". Den skillnaden
   ska synas. */
.inkommande-quiz-fel {
  border-color:var(--wrong); background:var(--surface2);
  color:var(--wrong); font-size:var(--t-liten);
}

/* ── SKAPA QUIZ ── */
.skapa-quiz-steg        { background:var(--surface); border:1px solid var(--border); padding:24px; margin-bottom:12px; }
.skapa-quiz-steg-titel  { font-size:var(--t-meta); letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:16px; }
.fraga-builder          { background:var(--surface2); border:1px solid var(--border); padding:16px; margin-bottom:8px; position:relative; width:100%; box-sizing:border-box; overflow:hidden; }
.fraga-builder-nr       { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); color:var(--accent); letter-spacing:1px; margin-bottom:8px; }
.fraga-ta-bort          { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:var(--t-h3); line-height:1; transition:color 0.15s; }
.fraga-ta-bort:hover    { color:var(--wrong); }

/* ── QUIZ DETALJ ── */
.quiz-detalj-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.quiz-detalj-back   { display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); padding:7px 14px; color:var(--muted2); font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer; transition:all 0.15s; flex-shrink:0; }
.quiz-detalj-back:hover  { color:var(--text); border-color:var(--muted); }
.quiz-detalj-back svg    { width:14px; height:14px; }
.quiz-detalj-titel  { font-size:var(--t-h2); font-weight:700; }
.quiz-detalj-meta   { font-size:var(--t-liten); color:var(--muted2); margin-top:2px; }

.fraga-kort         { background:var(--surface); border:1px solid var(--border); padding:16px 18px; margin-bottom:8px; transition:border-color 0.15s; }
.fraga-kort:hover   { border-color:var(--muted); }
.fraga-kort-top     { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fraga-kort-nr      { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); color:var(--accent); letter-spacing:1px; margin-bottom:6px; }
.fraga-kort-text    { font-size:var(--t-brod); font-weight:600; line-height:1.5; flex:1; }
.fraga-kort-actions { display:flex; gap:6px; flex-shrink:0; }
.fraga-alts         { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.fraga-alt          { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--surface2); font-size:var(--t-liten); border:1px solid var(--border); }
.fraga-alt.ratt     { border-color:var(--correct); background:var(--correct-dim); }
.fraga-alt-label    { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:var(--t-meta); width:20px; height:20px; background:var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fraga-alt.ratt .fraga-alt-label { background:var(--correct); color:var(--on-correct); }
.edit-fraga-modal   { max-width:560px; max-height:90vh; overflow-y:auto; }
.edit-modal         { max-width:400px; }

/* ── KOLLAPSIBARA SEKTIONER ── */
.collapsible-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--surface2); border:1px solid var(--border); cursor:pointer; user-select:none; transition:border-color 0.15s; margin-bottom:4px; }
.collapsible-header:hover        { border-color:var(--muted); }
.collapsible-header.open         { border-bottom-color:transparent; margin-bottom:0; }
.collapsible-title               { font-size:var(--t-liten); font-weight:600; color:var(--text); display:flex; align-items:center; gap:10px; }
.collapsible-title svg           { width:15px; height:15px; color:var(--accent); }
.collapsible-chevron             { width:14px; height:14px; color:var(--muted); transition:transform 0.2s; flex-shrink:0; }
.collapsible-chevron.open        { transform:rotate(180deg); }
.collapsible-body                { display:none; background:var(--surface); border:1px solid var(--border); border-top:none; padding:20px; margin-bottom:8px; }
.collapsible-body.open           { display:block; }

/* ── QUIZ TREE ── */
.tree-subject               { margin-bottom:2px; }
.tree-subject-header        { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--surface); cursor:pointer; border:1px solid var(--border); border-bottom:none; }
.tree-subject-header:last-child { border-bottom:1px solid var(--border); }
.tree-subject-name          { font-weight:500; font-size:var(--t-liten); }
.tree-subject-meta          { font-size:var(--t-meta); color:var(--muted2); }
.tree-quizzes               { padding:0; display:none; }
.tree-quizzes.open          { display:block; }
.tree-quiz-item             { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 8px 28px; border:1px solid var(--border); border-top:none; background:var(--surface); }
.tree-quiz-name             { font-size:var(--t-liten); }
.tree-quiz-actions          { display:flex; gap:6px; }

/* ── RESULTATKORT ── */
.resultat-kort              { border:1px solid var(--border); margin-bottom:4px; background:var(--surface); }
.resultat-kort-rad          { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; transition:background 0.15s; }
.resultat-kort-rad:hover    { background:var(--surface2); }
.resultat-kort-body         { border-top:1px solid var(--border); background:var(--bg); }
/* Raden satt ihop av style-attribut per element. Klasser i stället: korten
   och de aktiva sessionsraderna ska gå att ändra på ett ställe. */
.rk-namn    { flex:1; min-width:0; font-size:var(--t-liten); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-datum   { font-size:var(--t-meta); color:var(--muted2); flex-shrink:0; }
.rk-chevron { width:14px; height:14px; color:var(--muted); flex-shrink:0; transition:transform 0.2s; }
.rk-box     { accent-color:var(--accent); width:14px; height:14px; flex-shrink:0; cursor:pointer; margin-left:4px; }

/* Notisraden i ett öppnat resultatkort. Samma form som Kahoot- och
   provrutorna, men i neutral ton: den säger var svaren finns, den varnar
   inte. */
.resultat-notis       { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                        background:var(--surface2); border:1px solid var(--border);
                        padding:10px 14px; margin-bottom:12px; }
.resultat-notis-titel { font-size:var(--t-meta); letter-spacing:1.2px; text-transform:uppercase;
                        color:var(--muted2); font-weight:600; }
.resultat-notis-text  { font-size:var(--t-liten); color:var(--muted2); flex:1; min-width:180px; }
.resultat-aktioner    { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; }

/* ── MODAL – VERSIONSINFO ── */
.modal-success { background:var(--correct-dim); border:1px solid var(--correct); padding:20px; margin:20px 0; }

/* ── RESPONSIV ── */
@media(max-width:700px) {
  .sidebar          { width:44px; }
  .sidebar.expanded { width:200px; }
  .page             { padding:20px; }
}

/* ── UTFORSKARE ── */
.utfork-wrap              { display:flex; width:100%; height:100%; min-height:0; }

.utfork-sidebar           { width:240px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.utfork-sidebar-top       { padding:10px; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:4px; flex-shrink:0; }
.utfork-trad              { flex:1; overflow-y:auto; padding:6px 0; }

.utfork-main              { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.utfork-main-top          { padding:14px 20px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.utfork-breadcrumb        { font-size:var(--t-meta); color:var(--muted); letter-spacing:0.5px; margin-bottom:2px; }
.utfork-rubrik            { font-size:var(--t-h3); font-weight:700; color:var(--text); }
.utfork-content           { flex:1; overflow-y:auto; padding:14px 20px; }

.utfork-actionbar         { display:none; position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--accent); padding:10px 20px; align-items:center; gap:10px; box-shadow:0 -2px 8px rgba(0,0,0,.08); }
.utfork-actionbar.synlig  { display:flex; }
.utfork-actionbar-label   { font-size:var(--t-liten); color:var(--muted2); flex:1; }

.utfork-ny-knappar        { display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.utfork-filter-rad        { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); }

.utfork-filter-btn        { padding:4px 10px; font-size:var(--t-meta); font-weight:600; border:1px solid var(--border); background:var(--surface2); color:var(--muted2); cursor:pointer; font-family:'Sora',sans-serif; transition:all 0.12s; }
.utfork-filter-btn:hover  { border-color:var(--muted); color:var(--text); }
.utfork-filter-btn.aktiv  { background:var(--text); color:var(--surface); border-color:var(--text); }

.utfork-mapp              { display:flex; align-items:center; gap:6px; padding:7px 10px; cursor:pointer; font-size:var(--t-liten); font-weight:600; color:var(--text); transition:background 0.1s; }
.utfork-mapp:hover        { background:var(--surface2); }
.utfork-mapp.vald         { background:var(--accent-dim); color:var(--accent); }
.utfork-mapp-ikon         { color:var(--muted); font-size:var(--t-meta); }

.utfork-undermapp         { display:flex; align-items:center; gap:6px; padding:5px 10px 5px 22px; cursor:pointer; font-size:var(--t-liten); color:var(--muted2); transition:background 0.1s; }
.utfork-undermapp:hover   { background:var(--surface2); }
.utfork-undermapp.vald    { background:var(--accent-dim); color:var(--accent); }
.utfork-undermapp-ikon    { color:var(--muted); font-size:var(--t-meta); }
.utfork-trad-badges       { display:flex; gap:3px; margin-left:auto; flex-shrink:0; }

/* .typ-badge hade ingen basregel alls — hela dess utseende kom från
   pastellreglerna i admin.htmls style-block. När de ströks 2026-10-16 blev
   badgen oformaterad text, så den delar bas med .utfork-badge här. */
.utfork-badge,
.typ-badge                { font-size:var(--t-meta); padding:1px 5px; font-weight:600; border:1px solid var(--border); background:var(--surface2); color:var(--muted); letter-spacing:0.3px; text-transform:uppercase; display:inline-block; }

/* ── Materialtyp-färger – gäller hela sajten ──────────────────────────────
   Badgen är neutral och kategorin står i ORDET. Färgen är en vänsterkant,
   ett stöd för ögat när man skummar en lista, aldrig enda bäraren.
   Variablerna ligger i global.css.

   Här låg tidigare tolv fasta pastellvärden ur Tailwinds standardpalett.
   De var ljusa oavsett tema och lyste som fläckar i mörkt läge. 2026-10-15. */
.utfork-badge-quiz,  .utfork-typ-badge.utfork-badge-quiz,  .typ-badge-quiz,
.typ-badge[data-typ="quiz"]        { border-left:3px solid var(--kat-quiz); }
.utfork-badge-text,  .utfork-typ-badge.utfork-badge-text,  .typ-badge-text,
.typ-badge[data-typ="text"]        { border-left:3px solid var(--kat-text); }
.utfork-badge-slide, .utfork-typ-badge.utfork-badge-slide, .typ-badge-slide,
.typ-badge[data-typ="slide"]       { border-left:3px solid var(--kat-slide); }
.utfork-badge-ai,    .utfork-typ-badge.utfork-badge-ai,    .typ-badge-ai,
.typ-badge[data-typ="ai_session"]  { border-left:3px solid var(--kat-ai); }
.utfork-badge-prompt,.utfork-typ-badge.utfork-badge-prompt,.typ-badge-prompt
                                   { border-left:3px solid var(--kat-prompt); }
.utfork-badge-podd,  .utfork-typ-badge.utfork-badge-podd,  .typ-badge-podd,
.typ-badge[data-typ="podd"]        { border-left:3px solid var(--kat-podd); }

/* Sidebar tooltip när infälld */
.sidebar:not(.expanded) .nav-btn { position:relative; }
.sidebar:not(.expanded) .nav-btn::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  background: var(--text); color: var(--surface);
  font-size: var(--t-meta); font-weight: 500;
  white-space: nowrap; padding: 4px 8px;
  pointer-events: none; opacity: 0;
  transition: opacity .15s; z-index: 200;
  font-family: 'Sora', sans-serif;
}
.sidebar:not(.expanded) .nav-btn:hover::after { opacity: 1; }

/* Ikonknapp tooltip – gäller alla knappar med title-attribut i utforskaren */
.utfork-ikon-knapp { position: relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; }
.utfork-ikon-knapp[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  font-size: var(--t-meta); white-space: nowrap;
  padding: 3px 7px; pointer-events: none;
  opacity: 0; transition: opacity .15s; z-index: 100;
  font-family: 'Sora', sans-serif; font-weight: 500;
}
.utfork-ikon-knapp[title]:hover::after { opacity: 1; }

.utfork-markera-rad       { display:flex; align-items:center; gap:8px; padding:6px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--border); }
.utfork-markera-label     { font-size:var(--t-liten); color:var(--muted2); display:flex; align-items:center; gap:6px; cursor:pointer; }
.utfork-markera-antal     { font-size:var(--t-liten); color:var(--accent); margin-left:auto; }

.utfork-kort              { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface); border:1px solid var(--border); margin-bottom:4px; transition:border-color 0.1s; }
.utfork-kort:hover        { border-color:var(--muted); }
.utfork-kort.markerad     { border-color:var(--accent); background:var(--accent-dim); }

.utfork-typ-badge         { font-size:var(--t-meta); padding:2px 7px; font-weight:600; flex-shrink:0; border:1px solid var(--border); background:var(--surface2); color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; }
.utfork-kort-titel        { flex:1; font-size:var(--t-liten); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.utfork-kort-knappar      { display:flex; gap:4px; flex-shrink:0; }

.utfork-ikon-knapp        { padding:4px 8px; background:transparent; border:1px solid transparent; color:var(--muted2); cursor:pointer; font-size:var(--t-liten); font-family:'Sora',sans-serif; transition:all 0.12s; }
.utfork-ikon-knapp:hover  { background:var(--surface2); border-color:var(--border); color:var(--text); }
.utfork-ikon-fara:hover   { color:var(--wrong); border-color:var(--wrong); }

.utfork-tom               { padding:32px 0; text-align:center; font-size:var(--t-liten); color:var(--muted2); }

.utfork-modal-overlay         { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
.utfork-modal-overlay.open    { display:flex; }
.utfork-modal-box             { background:var(--surface); border:1px solid var(--border); padding:24px; max-width:440px; width:90%; max-height:80vh; overflow-y:auto; }
.utfork-modal-rubrik          { font-size:var(--t-h3); font-weight:700; margin-bottom:12px; }
.utfork-modal-text            { font-size:var(--t-liten); color:var(--muted2); margin-bottom:16px; }
.utfork-modal-knappar         { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.utfork-select                { width:100%; padding:8px 10px; font-size:var(--t-liten); border:1px solid var(--border); background:var(--surface2); font-family:'Sora',sans-serif; color:var(--text); }

/* ── Raderingsrutan för ämnen och mappar ────────────────────────
   Listan och varningen i rutan som quiz-mappar.js öppnar. Resten av det
   gamla .inst-blocket (verktygsraden och raderna på Inställningar) togs bort
   2026-09-18 när mapparna flyttade till Quiz – stilarna för dem finns nu
   längre ner, som .mapp-*. */
.inst-lista       { font-size:var(--t-liten); line-height:1.7; margin:6px 0 0; padding-left:18px; }
.inst-varning     { border-left:3px solid var(--danger,#c0392b); padding:8px 12px; margin-top:12px;
                    background:rgba(192,57,43,.08); font-size:var(--t-liten); line-height:1.55; }

/* ── NEDLADDNINGSMENY (dropdown.js) ── */
.dd { position:relative; display:inline-block; }
.dd-meny {
  display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:200;
  min-width:180px; background:var(--surface); border:1px solid var(--border);
  border-radius:0; box-shadow:0 6px 20px rgba(0,0,0,0.28); padding:4px 0;
}
.dd.oppen .dd-meny { display:block; }
.dd-rubrik {
  padding:7px 14px 3px; font-size:var(--t-meta); letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.dd-val {
  display:block; width:100%; text-align:left; padding:7px 14px;
  background:none; border:none; color:var(--text); font-family:'Sora', sans-serif;
  font-size:var(--t-liten); cursor:pointer; white-space:nowrap; transition:all 0.12s;
}
.dd-val:hover { background:var(--surface2); color:var(--accent); }
.dd-avdelare { border:none; border-top:1px solid var(--border); margin:4px 0; }
/* En avstängd menypost ska se avstängd ut, inte bara vägra svara. */
.dd-val[disabled]        { opacity:.38; cursor:default; }
.dd-val[disabled]:hover  { background:none; color:var(--text); }
.dd-val-fara             { color:var(--wrong); }
.dd-val-fara:hover       { color:var(--wrong); }
/* Ett menyval kan vara en länk i stället för en knapp — "Så hämtar du filen
   från Socrative" leder till en egen sida. .dd-val är skriven för <button>,
   och en <a> drar annars med sig webbläsarens understrykning. */
a.dd-val                 { text-decoration:none; }

/* ── ÄMNEN & UNDERMAPPAR I QUIZ (quiz-mappar.js, 2026-09-18) ────
   Kryssrutan sitter på ämnes- och mappraden i trädet. Verktygen ligger i
   menyn "Mappar" i sidhuvudet, inte som knappar på varje rad – raderna är
   ett femtiotal hos admin. */
.mapp-box {
  width:14px; height:14px; margin:0; flex:none; cursor:pointer;
  accent-color:var(--accent);
}
.subfolder-header .mapp-box { margin-left:2px; }
/* Menyknappen markerar att något är valt, så man inte tappar bort en
   markering bakom en hopfälld rad. */
.dd-knapp-aktiv { color:var(--accent); border-color:var(--accent); }
.mapp-bekrafta  { display:flex; gap:8px; align-items:center; margin:12px 0 4px; }
.mapp-bekrafta input { flex:1; }
/* Ett tomt ämne eller en tom mapp ska säga att den är tom, inte se trasig ut. */
.tom-mapp {
  padding:9px 14px 9px 42px; font-size:var(--t-liten); color:var(--muted);
  background:var(--surface); border-bottom:1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   SKAPA QUIZ – arbetsyta i två spalter (2026-09-15)
   Ersätter den enkolumnslayout där varje fält var lika
   brett som fönstret och frågelistan låg utanför skärmen.
   Inga nya färgvärden: allt är befintliga variabler.
   ═══════════════════════════════════════════════════ */

/* Sidhuvud: namn, placering, räknare och Spara på en rad.
   Räknaren och Spara quiz bröt förut ner på en egen rad så snart fälten
   blev breda, och sköt ner hela frågeytan. Nu är namnfältet det enda som
   ger efter: rullisterna behåller sin bredd och raden sin höjd. */
.sq-topp        { display:flex; align-items:flex-end; gap:12px; flex-wrap:nowrap;
                  padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.sq-falt        { display:flex; flex-direction:column; gap:4px; flex:0 0 auto; min-width:0; }
.sq-falt > label{ font-size:var(--t-meta); color:var(--muted2); letter-spacing:0.3px; white-space:nowrap; }
.sq-falt-namn   { flex:1 1 200px; max-width:360px; }
.sq-namnrad     { display:flex; align-items:center; gap:6px; }
.sq-namn-input  { width:100%; min-width:0; }
.sq-plats       { width:168px; }
.sq-topp .quiz-detalj-back { padding:7px 11px; }
.sq-toppslut    { margin-left:auto; display:flex; align-items:center; gap:12px; align-self:flex-end; flex:0 0 auto; }
/* Räknaren ligger på en rad i stället för två — den satte höjden på raden. */
.sq-rakn        { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.sq-rakn b      { font-size:var(--t-brod); font-weight:700; }
.sq-rakn span   { font-size:var(--t-meta); color:var(--muted); }
@media (max-width:1040px) {
  .sq-topp      { flex-wrap:wrap; }
  .sq-falt-namn { flex:1 1 240px; }
}

/* Metodflikar – understrykning i stället för fyra skärmbreda knappar */
.sq-flikrad     { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.sq-flik        { background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
                  padding:9px 14px; font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600;
                  color:var(--muted2); cursor:pointer; transition:all 0.15s; }
.sq-flik:hover  { color:var(--text); }
.sq-flik.aktiv  { color:var(--accent); border-bottom-color:var(--accent); }

/* Två spalter: redigerare till vänster, frågelistan till höger */
.sq-ytan        { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start; }
.sq-kort        { background:var(--surface); border:1px solid var(--border); padding:18px; max-width:640px; }
@media (max-width:1100px) {
  .sq-ytan      { grid-template-columns:1fr; }
  .sq-lista     { position:static; max-height:none; }
  .sq-kort      { max-width:none; }
}

/* Frågetyp som segmenterad kontroll – alla val syns samtidigt */
.sq-seg         { display:inline-flex; border:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
.sq-seg button  { background:var(--surface); border:none; border-right:1px solid var(--border);
                  padding:7px 13px; font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600;
                  color:var(--muted2); cursor:pointer; transition:all 0.15s; }
.sq-seg button:last-child { border-right:none; }
.sq-seg button:hover      { background:var(--surface2); color:var(--text); }
.sq-seg button.aktiv      { background:var(--accent); color:var(--on-accent); }

/* Alternativ som rader. Rätt svar markeras i raden, inte i en rullist. */
.sq-alt         { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.sq-alt .sq-mark{ width:17px; height:17px; flex-shrink:0; cursor:pointer; accent-color:var(--correct); margin:0; }
.sq-alt .sq-bok { width:19px; flex-shrink:0; font-family:'JetBrains Mono',monospace;
                  font-size:var(--t-liten); color:var(--muted); text-align:center; font-weight:600; }
.sq-alt input[type=text]      { flex:1; }
.sq-alt.ratt .sq-bok          { color:var(--correct); }
.sq-alt.ratt input[type=text] { border-color:var(--correct); background:var(--correct-dim); }
.sq-altbort     { background:none; border:none; color:var(--muted); cursor:pointer; font-size:var(--t-brod);
                  line-height:1; padding:2px 5px; flex-shrink:0; transition:color 0.15s; }
.sq-altbort:hover { color:var(--wrong); }
.sq-altplats    { width:25px; flex-shrink:0; }
.sq-altfot      { display:flex; align-items:center; justify-content:space-between;
                  gap:12px; margin-top:10px; flex-wrap:wrap; }
.sq-lagga       { background:none; border:1px dashed var(--border); color:var(--muted2);
                  padding:6px 12px; font-family:'Sora',sans-serif; font-size:var(--t-meta);
                  font-weight:600; cursor:pointer; transition:all 0.15s; }
.sq-lagga:hover { border-color:var(--accent); color:var(--accent); }
.sq-poang       { display:flex; align-items:center; gap:8px; }
.sq-poang label { font-size:var(--t-meta); color:var(--muted2); white-space:nowrap; margin:0; }
.sq-poang input { width:70px; }
.sq-hjalp       { font-size:var(--t-meta); color:var(--muted); margin-top:8px; line-height:1.55; }
/* flex-wrap sedan "Kopiera senaste frågan" blev en tredje knapp i raden –
   utan den trängs knapparna ut ur kortet på smal skärm. */
.sq-kortfot     { display:flex; justify-content:flex-end; gap:8px; margin-top:16px;
                  padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.sq-bildrad     { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Frågelistan – klistrad, så den syns medan man skriver */
.sq-lista       { position:sticky; top:18px; background:var(--surface); border:1px solid var(--border);
                  max-height:calc(100vh - 40px); display:flex; flex-direction:column; }
.sq-listtopp    { display:flex; align-items:center; justify-content:space-between;
                  padding:11px 14px; border-bottom:1px solid var(--border); }
.sq-listkropp   { overflow-y:auto; flex:1; }
.sq-rad         { border-bottom:1px solid var(--border); }
.sq-rad-topp    { display:flex; gap:10px; padding:10px 14px; cursor:pointer; transition:background 0.1s; }
.sq-rad-topp:hover { background:var(--surface2); }
.sq-rad.oppen .sq-rad-topp { background:var(--surface2); }
.sq-rad .sq-nr  { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); color:var(--accent);
                  flex-shrink:0; padding-top:2px; width:16px; }
.sq-rad .sq-txt { min-width:0; flex:1; }
.sq-rad .sq-frg { font-size:var(--t-liten); line-height:1.4; word-break:break-word; }
.sq-rad .sq-meta{ font-size:var(--t-meta); color:var(--muted); margin-top:3px; font-family:'JetBrains Mono',monospace; }
.sq-rad .sq-meta .r { color:var(--correct); }
.sq-rad .sq-bort{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:var(--t-brod);
                  line-height:1; transition:color 0.15s; flex-shrink:0; padding:0 4px; align-self:flex-start; }
.sq-rad .sq-bort:hover       { color:var(--wrong); }

/* Utfälld fråga: alla alternativ, det rätta grönt. Ett dragspel – en i taget är
   öppen, annars växer listan ur händerna vid tolv frågor. */
.sq-detalj      { padding:2px 14px 12px 40px; background:var(--surface2); }
.sq-dalt        { display:flex; gap:8px; padding:5px 8px; font-size:var(--t-liten); line-height:1.45;
                  border-left:2px solid transparent; }
.sq-dalt .sq-dbok { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); color:var(--muted);
                  font-weight:600; flex-shrink:0; width:14px; }
.sq-dalt.ratt   { background:var(--correct-dim); border-left-color:var(--correct); }
.sq-dalt.ratt .sq-dbok,
.sq-dalt.ratt span { color:var(--correct); font-weight:600; }
.sq-dtext       { font-size:var(--t-liten); line-height:1.5; color:var(--muted2); padding:4px 8px; }
.sq-dfot        { display:flex; justify-content:flex-end; margin-top:8px; }
.sq-listknapp   { background:none; border:none; color:var(--wrong); font-family:'Sora',sans-serif;
                  font-size:var(--t-meta); font-weight:600; cursor:pointer; padding:0; }
.sq-listknapp:hover { text-decoration:underline; }
.sq-tom         { padding:34px 18px; text-align:center; color:var(--muted); font-size:var(--t-liten); line-height:1.6; }
.sq-varning     { font-size:var(--t-meta); color:var(--wrong); font-weight:600; margin-top:3px; }

/* ── Förhandsgranskning av inklistrade textfrågor ────────────────
   Varje rad ar redigerbar och gar att ta bort. Radens falt speglar
   _sqTextImport i quiz-skapa.js - inget varde bor i DOM:en.
   En fraga far vara flerradig. Darfor ar textfaltet en textarea och raden
   toppjusterad - nummer, poang och kryss ska ligga kvar vid forsta raden. */
.sq-ti-rad      { display:flex; align-items:flex-start; gap:10px; padding:8px 12px;
                  border-bottom:1px solid var(--border); background:var(--surface); }
.sq-ti-nr       { font-size:var(--t-liten); color:var(--muted2); flex-shrink:0; min-width:22px;
                  padding-top:7px; }
.sq-ti-text     { flex:1; min-width:0; background:var(--surface2); border:1px solid var(--border);
                  color:var(--text); font-family:inherit; font-size:var(--t-liten); padding:5px 8px;
                  line-height:1.45; display:block; resize:vertical; overflow:hidden; }
.sq-ti-text:focus { outline:none; border-color:var(--accent); }
.sq-ti-etikett  { font-size:var(--t-meta); color:var(--muted2); white-space:nowrap; flex-shrink:0;
                  padding-top:8px; }
.sq-ti-poang    { width:52px; flex-shrink:0; text-align:center; background:var(--surface2);
                  border:1px solid var(--border); color:var(--text);
                  font-family:inherit; font-size:var(--t-liten); padding:5px 4px; }
.sq-ti-poang:focus { outline:none; border-color:var(--accent); }
.sq-ti-bort     { background:none; border:none; color:var(--muted2); cursor:pointer;
                  font-size:var(--t-brod); line-height:1; padding:6px; flex-shrink:0; }
.sq-ti-bort:hover { color:var(--wrong); }
.sq-ti-fot      { display:flex; align-items:center; justify-content:space-between; gap:12px;
                  flex-wrap:wrap; padding:9px 12px; background:var(--surface2);
                  font-size:var(--t-liten); color:var(--muted2); }

@media (max-width: 620px) {
  .sq-ti-rad    { flex-wrap:wrap; }
  .sq-ti-text   { flex:1 1 100%; order:1; }
  .sq-ti-nr     { order:0; }
  .sq-ti-etikett, .sq-ti-poang, .sq-ti-bort { order:2; }
}

/* ── Avveckla lärare ─────────────────────────────────────────────
   Modalen visar vad som finns innan valet gors, sa bekraftelsen ar
   pa riktiga siffror och inte pa en gissning. */
.av-modal        { display:none; position:fixed; inset:0; z-index:1000;
                   background:rgba(0,0,0,0.6); align-items:center; justify-content:center; }
.av-modal.oppen  { display:flex; }
.av-kort         { background:var(--surface); border:1px solid var(--border); border-radius:0;
                   padding:28px; width:100%; max-width:520px; margin:20px;
                   max-height:90vh; overflow-y:auto; }
.av-rubrik       { margin:0 0 6px; font-size:var(--t-h3); }
.av-ingress      { margin:0 0 16px; color:var(--muted2); font-size:var(--t-liten); }
.av-sammanfattning { margin-bottom:14px; border:1px solid var(--border); border-radius:0; overflow:hidden; }
.av-rad          { display:flex; justify-content:space-between; gap:12px;
                   padding:7px 12px; font-size:var(--t-liten); border-bottom:1px solid var(--border); }
.av-rad:last-child { border-bottom:0; }
.av-rad span:first-child { color:var(--muted2); }
.av-rad span:last-child  { font-weight:600; }
.av-rad.av-allvarlig span:last-child { color:var(--wrong); }
.av-not          { margin-bottom:18px; padding:10px 12px; font-size:var(--t-liten); line-height:1.5;
                   border-left:3px solid var(--accent); background:var(--surface2); color:var(--muted2); }
.av-knappar      { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.av-fara         { color:var(--wrong); border-color:var(--wrong); }

/* ── Hantera lärare ──────────────────────────────────────────────
   Listan kommer fran admin_larare_lista(), alltsa ur larare - inte
   ur larare_status, som saknade de aldsta kontona. */
.hl-rad      { display:flex; align-items:center; justify-content:space-between;
               gap:12px; flex-wrap:wrap; padding:11px 14px; border-bottom:1px solid var(--border); }
.hl-rad:last-child { border-bottom:0; }
.hl-namn     { font-size:var(--t-liten); font-weight:600; }
.hl-epost    { font-size:var(--t-liten); color:var(--muted2); }
.hl-datum    { font-size:var(--t-meta); color:var(--muted); }
.hl-knappar  { display:flex; gap:8px; }
.hl-hoger    { display:flex; align-items:center; gap:10px; }
.hl-radera   { color:var(--wrong); }
.hl-radera svg { width:15px; height:15px; }
.hl-du       { font-size:var(--t-meta); color:var(--muted); font-style:italic; padding:0 6px; }
/* Kryssrutan och rollmärket i Hantera lärare. Testlärare ska skilja sig från
   Lärare på avstånd — det är skillnaden mellan ett konto kollegorna ser och
   ett de inte ser. */
.hl-vanster  { display:flex; align-items:center; gap:12px; min-width:0; }
.hl-box      { width:15px; height:15px; margin:0; flex:none; cursor:pointer; accent-color:var(--accent); }
.badge-test  { background:var(--warn-dim); color:var(--warn); border:1px solid var(--warn); }
.hl-tom      { padding:20px 14px; color:var(--muted2); font-size:var(--t-liten); }

/* ── KAHOOT-LÄGE I STARTMODALEN ──────────────────────────────────────────
   Samma form som provlägets ruta, men i accentfärg i stället för varningsgult:
   Kahoot-läget är ett sätt att köra lektionen, inte en skärpning. Klasser i
   stället för style-attribut, så att rutan går att ändra på ett ställe. */
.kl-ruta      { background:var(--accent-dim); border:1px solid var(--accent); padding:14px 16px; }
.kl-rad       { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.kl-box       { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.kl-titel     { font-size:var(--t-liten); font-weight:600; color:var(--accent); }
.kl-hjalp     { font-size:var(--t-liten); color:var(--muted2); margin:6px 0 0 26px; line-height:1.6; }
/* Spärren när quizet har text- eller ritfrågor. Varningsgul, för det är ett
   besked om att valet inte finns – inte en inställning. */
.kl-sparr     { display:none; font-size:var(--t-liten); color:var(--warn); margin:8px 0 0 26px; line-height:1.6; }
.kl-sparr.pa  { display:block; }
.kl-info      { display:none; font-size:var(--t-liten); color:var(--muted2); margin:10px 0 0 26px; line-height:1.6; }
.kl-info.pa   { display:block; }
/* Dimning av en hel accordionsektion som ett annat läge har tagit över.
   Ersätter de style.opacity-rader uppdateraProvlageUI() satte direkt på
   elementen – samma effekt, en sanning. */
.acc-sek.overtagen { opacity:0.4; pointer-events:none; }

/* ── STARTA SESSION: FÄRG SOM INFORMATION ──────────────────────────────
   Accenten i startrutan betyder EN sak: sektionen avviker från dina sparade
   standardinställningar. Klassen sätts av uppdateraStartSammanfattning().

   Kahoot-rubriken var tidigare accentfärgad jämt, och Provläge hade orange
   satt som inline-style på knappen och pilen. Båda lyste alltså lika starkt
   när lägena var avstängda som när de var på, och då bar färgen ingen
   information alls. Sätt inte tillbaka en fast färg på en rubrik här.

   Pilen ärver inte färgen av sig själv — den har stroke:currentColor och
   måste få color satt på samma element. */
.acc-sek.avviker > .acc-sek-header,
.acc-sek.avviker > .acc-sek-header .acc-chevron,
.acc-mer.avviker > .acc-mer-rad,
.acc-mer.avviker > .acc-mer-rad .acc-chevron { color:var(--accent); }

/* ── STARTA SESSION: PLATT VÄRDELISTA ───────────────────────────────────
   De tre sektioner man rör ofta — Grundinställningar, Tid & poäng, Under
   lektionen — står alltid framme som en lista: etikett till vänster, värdet
   till höger, en inställning per rad. Ingen utfällning, inget klick, hela
   körningen synlig på en gång.

   Gjort helt i CSS på befintlig markup: varje inställning låg redan som
   label + select i en .form-group, så inga id:n eller hanterare behövde
   röras. .form-row var en kolumnindelning som inte längre behövs här.

   Sektionerna i "Fler inställningar" behåller sin utfällning — de rörs
   sällan och ska inte ta höjd. 2026-10-16. */
.acc-rubrik {
  font-family:'Sora', sans-serif; font-size:var(--t-meta); font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  padding:16px 0 6px;
}
.acc-sek.platt > .acc-sek-body { padding-bottom:4px; }
#starta-modal .acc-sek.platt .form-row   { display:block; margin-bottom:0; }
#starta-modal .acc-sek.platt .form-group {
  display:grid; grid-template-columns:1fr minmax(0,300px); align-items:center;
  gap:16px; padding:6px 0 6px 11px; margin-bottom:0; min-width:0;
  border-left:3px solid transparent;
}
#starta-modal .acc-sek.platt .form-group > label {
  font-size:var(--t-liten); color:var(--text); letter-spacing:0;
}
#starta-modal .acc-sek.platt .form-group > select,
#starta-modal .acc-sek.platt .form-group > input { width:100%; }

/* Smal skärm: etikett över fältet i stället för bredvid. */
@media (max-width:620px) {
  #starta-modal .acc-sek.platt .form-group { grid-template-columns:1fr; gap:4px; }
}

/* ── AVVIKER FRÅN STANDARD, PER INSTÄLLNING ─────────────────────────────
   Markeringen sitter på RADEN, inte på sektionen. Då pekar den ut exakt
   vilken inställning som skiljer sig, och den syns även när man tittar rakt
   på fältet. Tidigare färgades bara sektionsrubriken, och den signalen var
   för svag för att märkas — en grå versal etikett som blir ockra.

   Tjock vänsterkant är Thevins markör för "det här är utpekat"; samma grepp
   som på en vald rad i quizlistan. Sätts av markeraAvvikelser(). */
#starta-modal .form-group.avviker {
  border-left-color:var(--accent); background:var(--accent-dim);
}
#starta-modal .form-group.avviker > label { color:var(--accent); font-weight:600; }

/* ── FLER INSTÄLLNINGAR ─────────────────────────────────────────────────
   Behållare för AI & elevfeedback, Kahoot-läge och Provläge. Raden ser ut
   som en sektionsrubrik, för den beter sig som en. */
.acc-mer { border-top:1px solid var(--border); }
.acc-mer-rad {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:13px 0; cursor:pointer;
  font-family:'Sora', sans-serif; font-size:var(--t-meta); font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  text-align:left;
}
.acc-mer-rad:hover { color:var(--text); }
.acc-mer.closed .acc-mer-rad .acc-chevron { transform:rotate(-90deg); }
.acc-mer.closed .acc-mer-kropp { display:none; }
/* Sammanfattningen på själva raden döljs när den är utfälld — då står
   sektionerna där och säger samma sak. Men bara då. */
.acc-mer:not(.closed) > .acc-mer-rad > .acc-sum { display:none; }

/* ── STARTA SESSION: KNAPPRADEN ─────────────────────────────────────────
   Knapparna är så breda som sin text. "Starta session" hade flex:1 och
   spara-standard width:100%, så bihandlingen var den bredaste ytan i hela
   rutan. Inga breda knappar — regeln står i designsystemet.

   margin-right:auto på den tysta knappen skjuter handlingarna åt höger utan
   något utfyllnadselement emellan. 2026-10-16. */
.starta-knapprad       { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.starta-knapprad .btn-tyst { margin-right:auto; }

/* ── Duplicera quiz (quiz-kopiera.js) ──────────────────────────────
   Samma mått som flytta-modalen, men i klasser i stället för
   style-attribut. Inga inline-stilar i den nya markupen. */
.modal.kopiera-modal { max-width:460px; }
.kopiera-falt { margin-bottom:12px; }
.kopiera-falt-sist { margin-bottom:24px; }
.kopiera-knapp { flex:1; }
.kopiera-knapp:disabled { opacity:0.6; cursor:default; }

/* ── Kopiera markerade frågor (quiz-kopiera.js) ────────────────────
   Kryssrutan ligger bredvid redigeringspennan och papperskorgen i
   frågekortet; de två knapparna är oförändrade. */
.fraga-checkbox { width:15px; height:15px; flex-shrink:0; cursor:pointer;
                  accent-color:var(--accent); align-self:center; }
.fraga-header-hoger { display:flex; align-items:center; gap:10px; }
/* Menyn syns bara när något är ikryssat. id-selektorn vinner över
   .dd { display:inline-block; } utan !important. */
#fraga-valda-dd { display:none; }
#fraga-valda-dd.syns { display:inline-block; }
.fraga-valda-knapp { background:none; border:none; color:var(--accent);
                     font-family:'Sora',sans-serif; font-size:var(--t-liten);
                     font-weight:600; cursor:pointer; padding:0; }

.modal.kopfr-modal { max-width:520px; }
.kopfr-dold { display:none; }
.kopfr-lagen { display:flex; gap:8px; margin-bottom:16px; }
.kopfr-lage { flex:1; padding:8px 10px; border:1px solid var(--border);
              background:none; color:var(--muted); border-radius:0;
              font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600;
              cursor:pointer; }
.kopfr-lage:hover { color:var(--text); }
.kopfr-lage-vald { border-color:var(--accent); color:var(--accent); }

.kopfr-lista { max-height:240px; overflow-y:auto; border:1px solid var(--border);
               border-radius:0; margin-bottom:10px; }
.kopfr-rad { display:block; width:100%; text-align:left; background:none;
             border:none; border-bottom:1px solid var(--border); cursor:pointer;
             padding:9px 12px; font-family:'Sora',sans-serif; }
.kopfr-rad:last-child { border-bottom:none; }
.kopfr-rad:hover { background:var(--accent-dim); }
.kopfr-rad-vald { background:var(--accent-dim); box-shadow:inset 3px 0 0 var(--accent); }
.kopfr-rad-namn { display:block; font-size:var(--t-liten); color:var(--text); }
.kopfr-rad-meta { display:block; font-size:var(--t-meta); color:var(--muted2); margin-top:2px; }
.kopfr-etikett { display:block; font-size:var(--t-meta); color:var(--muted); margin-bottom:6px;
                 text-transform:uppercase; letter-spacing:0.5px; }
.kopfr-rad-dethar { font-size:var(--t-meta); color:var(--accent); letter-spacing:0.5px;
                    text-transform:uppercase; }
.kopfr-tom { padding:14px 12px; font-size:var(--t-liten); color:var(--muted2); line-height:1.5; }
.kopfr-not { font-size:var(--t-meta); color:var(--muted2); margin-bottom:20px;
             line-height:1.5; min-height:1px; }

/* ── LÄRARFÄRGER I BREVLÅDAN ──────────────────────────────────
   I en grupptråd skriver fyra personer i samma ruta och alla namn
   har hittills haft var(--accent). Färgen gör avsändaren läsbar på
   en halv sekund i stället för efter en läsning.

   SAMMA ÅTTA NAMN SOM amnen.farg, och samma princip: databasen bär
   valet (larare.farg), CSS bär utseendet. Två uppsättningar, för en
   ton som är läsbar mot mörkt blir grumlig mot vitt. :root-blocket
   här gäller mörkt läge, body.light det ljusa — som i amne-farg.css.

   Själva palettrutan återanvänder .amne-palett och .amne-palettval
   ur amne-farg.css. Prickarnas bakgrunder ligger redan där och är
   inte ämnesspecifika; att kopiera dem hit hade gett två sanningar
   om samma åtta färger. */

.brev-namn { font-size:var(--t-meta); font-weight:600; margin-bottom:3px; color:var(--accent); }

.brev-farg-bla     { color:#5b7fff; }
.brev-farg-turkos  { color:#1abcc4; }
.brev-farg-gron    { color:#2ecc71; }
.brev-farg-gul     { color:#f1c40f; }
.brev-farg-orange  { color:#e67e22; }
.brev-farg-rod     { color:#e74c3c; }
.brev-farg-lila    { color:#b07cc6; }
.brev-farg-grafit  { color:#8c94af; }

/* Ljust läge: mörkare varianter, annars lyser gult och grönt bort
   mot vitt. Samma hue, lägre ljushet. */
body.light .brev-farg-bla     { color:#3550cc; }
body.light .brev-farg-turkos  { color:#0f7f86; }
body.light .brev-farg-gron    { color:#1e8449; }
body.light .brev-farg-gul     { color:#8a6d0b; }
body.light .brev-farg-orange  { color:#b35309; }
body.light .brev-farg-rod     { color:#c0392b; }
body.light .brev-farg-lila    { color:#7d3c98; }
body.light .brev-farg-grafit  { color:#5d6376; }

/* Kanten på bubblan tar samma färg som namnet. currentColor skulle
   ha ärvt textfärgen i bubblan, inte avsändarens — därför en egen
   regel per färg. Bara i grupptrådar: i ett tvåpartssamtal säger
   vänster och höger redan vem som skrev. */
.brev-bubbla { border-left-width:3px; border-left-style:solid; }
.brev-bubbla.brev-farg-bla     { border-left-color:#5b7fff; }
.brev-bubbla.brev-farg-turkos  { border-left-color:#1abcc4; }
.brev-bubbla.brev-farg-gron    { border-left-color:#2ecc71; }
.brev-bubbla.brev-farg-gul     { border-left-color:#f1c40f; }
.brev-bubbla.brev-farg-orange  { border-left-color:#e67e22; }
.brev-bubbla.brev-farg-rod     { border-left-color:#e74c3c; }
.brev-bubbla.brev-farg-lila    { border-left-color:#b07cc6; }
.brev-bubbla.brev-farg-grafit  { border-left-color:#8c94af; }

/* Pricken på medlemschipsen i Grupper, och framför namnet i
   trådlistans förhandsrad. Ärver färgen, så ingen egen palett. */
.brev-prick {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:currentColor; flex-shrink:0; margin-right:6px;
  vertical-align:baseline;
}
.brev-prick-tom { background:none; border:1px solid var(--border); }

.brev-medlem {
  display:inline-flex; align-items:center;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:0; padding:4px 12px; font-size:var(--t-liten); color:var(--text);
}

/* ── SKÄRMBILD I ETT MEDDELANDE ───────────────────────────────
   Miniatyren är en knapp, inte en bild i en länk: klicket öppnar
   bilden i helskärm i samma vy. En ny flik hade krävt en signerad
   URL som överlever flikbytet, och de går ut. */
.brev-bild {
  display:block; margin-top:8px; max-width:100%; max-height:180px;
  border:1px solid var(--border); cursor:zoom-in; background:var(--surface);
}
.brev-bild-knapp { background:none; border:none; padding:0; display:block; }

.brev-bildlage {
  position:fixed; inset:0; z-index:1100; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,0.82); cursor:zoom-out;
}
.brev-bildlage img { max-width:100%; max-height:100%; object-fit:contain; }

/* Valda bilden innan den skickas. Namnet och storleken står kvar
   tills den är skickad eller bortvald — en tyst vald fil som ingen
   ser är precis så man skickar fel skärmdump. */
.brev-bildval {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0 0; font-size:var(--t-meta); color:var(--muted2);
}
.brev-bildval img {
  max-height:44px; max-width:72px; border:1px solid var(--border);
}

/* Namnet i trådlistans förhandsrad. Samma färg som inne i tråden, men
   på en rad som redan är klippt med ellipsis — därför inline och utan
   marginal, annars bryter den raden. */
.brev-namn-rad { display:inline; margin:0; font-size:var(--t-liten); }

/* Färgpricken i ett medlemschips är samma knapp som i ämnespaletten,
   nedskalad. Storleken står här i stället för en egen uppsättning
   bakgrunder i samma åtta färger. */
.brev-medlem .amne-palettval { width:12px; height:12px; margin-right:6px; }

/* Frågans bild i rättningen. Läraren ska se samma figur som eleven
   svarade på; utan den går en graffråga inte att bedöma. Vit botten
   med flit — figurerna är oftast svarta streck på genomskinligt. */
.ratt-fraga-bild { display:block; max-width:100%; max-height:260px; object-fit:contain;
                   border:1px solid var(--border); background:#fff; margin:0 0 8px; }


/* ══ FLYTTAT HIT FRÅN <style>-BLOCK I admin.html, 2026-10-16 ══════════════
   Två style-block på sammanlagt 6,6 kB låg inbäddade i admin.html, tvärtemot
   regeln om ingen stil i HTML. De är flyttade hit oförändrade i ordning, så
   kaskaden beter sig som förut — blocken låg efter <link>-taggarna och vann
   därför på källordning, och de ligger därför sist även här.

   Tre saker ändrades på vägen: tolv textstorlekar under 12px gick till
   tokens, hörnradierna nollades, och materialtyp-badgarnas pastellfärger
   ströks. Pastellerna var dubblerade från admin.css och VANN på källordning
   — det var därför de syntes kvar efter att de städats bort härifrån.
   ══════════════════════════════════════════════════════════════════════ */
.acc-sek { border-bottom: 1px solid var(--border); }
.acc-sek:last-child { border-bottom: none; }
.acc-sek-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 13px 0; cursor: pointer;
  font-family: 'Sora', sans-serif; font-size: var(--t-meta); font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
  text-align: left;
}
.acc-sek-header:hover { color: var(--text); }
.acc-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; color: var(--muted); }
.acc-sek.closed .acc-chevron { transform: rotate(-90deg); }
.acc-sek-body { padding-bottom: 16px; }
.acc-sek.closed .acc-sek-body { display: none; }

/* Sammanfattningen på en hopfälld rubrik: vad sektionen är inställd på, så
   man slipper öppna den för att se. Döljs när sektionen är öppen — då står
   svaret i fälten. Fylls av uppdateraStartSammanfattning() i quiz.js. */
.acc-sum {
  margin-left: auto; margin-right: 12px; font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--muted2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
.acc-sek:not(.closed) .acc-sum { display: none; }
.acc-sum-pa { color: var(--accent); }

/* En undergrupp inuti en sektion, t.ex. Bollen inuti Under lektionen. */
.acc-grupp { padding: 2px 0 14px; }
.acc-grupp:last-child { padding-bottom: 0; }
.acc-grupp-rubrik {
  font-size: var(--t-meta); font-weight: 600; color: var(--text);
  margin: 0 0 8px; letter-spacing: 0.3px;
}

/* Rutan skrollar inte längre i sin helhet: rubriken och knappraden står
   still och bara mitten rör sig. Förut hamnade "Starta session" under
   fönsterkanten så fort två sektioner var utfällda. */
.starta-modal-wide {
  max-width: 760px !important; width: 95vw !important; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.starta-kropp { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.starta-fot { flex: none; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); }
.bib-flik { padding: 8px 18px; font-size: var(--t-liten); font-family: 'Sora', sans-serif; font-weight: 600; border: none; border-bottom: 2px solid transparent; cursor: pointer; background: none; color: var(--muted2); transition: color 0.15s; }
.bib-flik.aktiv { color: var(--text); border-bottom-color: var(--accent); }
.bib-flik:hover { color: var(--text); }

/* ── Duplicera quiz: modalen (quiz-kopiera.js) ── */
#dub-modal-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);
  z-index:2000;align-items:center;justify-content:center;padding:16px;
}
#dub-modal-overlay.open { display:flex; }
#dub-modal {
  background:var(--surface);border:1px solid var(--border);
  width:100%;max-width:560px;max-height:90vh;
  display:flex;flex-direction:column;
}
.dub-header {
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;
}
.dub-header-info { flex:1; }
.dub-header-titel {
  font-size: var(--t-brod);font-weight:600;color:var(--text);margin:0 0 2px;
}
.dub-header-sub { font-size: var(--t-liten);color:var(--muted2); }
.dub-close-btn {
  background:none;border:none;font-size: var(--t-h2);cursor:pointer;
  color:var(--muted2);padding:0;line-height:1;margin-left:12px;flex-shrink:0;
}
.dub-body { padding:16px 18px;overflow-y:auto;flex:1; }
.dub-sek-label {
  font-size: var(--t-meta);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:8px;
}
/* .dub-kapitel-lista, .dub-kapitel-rad och .dub-amne-rubrik låg här till
   2026-10-29. De formade kapitelsteget i utdelningsmodalen, som är borta:
   elevens bibliotek grupperar på materialets egen plats i lärarens mappar,
   så kapitelvalet styrde ingenting. Reglerna är tagna bort i samma ändring
   i stället för att lämnas kvar och se ut att vara i bruk. Skälet står
   högst upp i dub-admin.js. */

/* Tom eller laddande lista i modalen. Fanns förut som ett inline-style på
   tre ställen i admin.html och i dub-admin.js. */
.dub-lista-tomt {
  padding:20px;text-align:center;
  font-size: var(--t-liten);color:var(--muted2);
}

/* ── STOPPRUTAN I UTDELNINGSMODALEN ──
   Materialet saknar ämne och går inte att dela ut (beslut 11 i
   "PROJEKT Elevbibliotek och struktur.md"), eller en läsning gick fel.
   Ingen färgad ruta och ingen ikon: rubriken säger vad, texten säger vad
   man gör, listan säger vilka. Det är ett läge i modalen, inte ett larm. */
.dub-stopp-titel {
  font-size: var(--t-h3);font-weight:600;color:var(--text);
  margin-bottom:8px;
}
.dub-stopp-text {
  font-size: var(--t-liten);color:var(--muted2);
  line-height:1.5;margin-bottom:16px;
}
.dub-stopp-lista {
  border:1px solid var(--border);max-height:240px;overflow-y:auto;
}
.dub-stopp-lista:empty { display:none; }
.dub-stopp-rad {
  display:flex;align-items:baseline;gap:12px;
  padding:8px 12px;border-bottom:1px solid var(--border);
}
.dub-stopp-rad:last-child { border-bottom:none; }
/* Typen i mono och versalt enligt designsystemets monoetiketter. Fast
   bredd så att namnen står i en lodrät linje — en lista man ska läsa av
   snabbt, inte en mening. */
.dub-stopp-typ {
  font-family:'JetBrains Mono',monospace;
  font-size: var(--t-meta);font-weight:600;
  letter-spacing:0.5px;text-transform:uppercase;
  color:var(--muted);
  flex:0 0 72px;
}
.dub-stopp-namn {
  font-size: var(--t-liten);color:var(--text);
}
.dub-mottagare-lista {
  border:1px solid var(--border);max-height:260px;overflow-y:auto;margin-bottom:16px;
}
.dub-klass-header {
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);
  background:var(--surface2);font-size: var(--t-liten);font-weight:600;
}
.dub-klass-header:last-child { border-bottom:none; }
.dub-klass-header:hover { background:var(--surface); }
.dub-elever-wrap { display:none;border-bottom:1px solid var(--border);padding:6px 12px 10px 36px; }
.dub-elever-wrap.open { display:block; }
.dub-elev-rad {
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size: var(--t-liten);
}
.dub-markera-knappar { display:flex;align-items:center;gap:6px;margin-bottom:6px; }
.dub-markera-btn {
  background:none;border:none;font-size: var(--t-liten);color:var(--muted2);
  cursor:pointer;padding:0;font-family:'Sora',sans-serif;text-decoration:underline;
}
.dub-markera-btn:hover { color:var(--text); }
.dub-footer {
  padding:14px 18px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;flex-shrink:0;
}
.dub-steg-info {
  font-size: var(--t-meta);color:var(--muted2);letter-spacing:0.5px;
  padding:0 18px 12px;flex-shrink:0;
}

/* ── FRÅGORNA I ETT QUIZ (fragor-modal.js) ───────────────────────
   Rutan läggs på body, utanför sidornas träd, och öppnas från både
   Sessioner och Resultat. Därför egna klasser och inget beroende på var
   den öppnades ifrån. */
.fm-bak {
  position:fixed; inset:0; z-index:9998; padding:16px;
  background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
}
.fm-kort {
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  width:100%; max-width:760px; max-height:88vh; overflow:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
}
/* Huvudet följer med när man rullar i en lång frågelista: Stäng och
   facitrutan ska aldrig kräva att man rullar tillbaka upp. */
.fm-huvud {
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--surface2); border-bottom:1px solid var(--border);
}
.fm-huvud h3      { margin:0; font-size:var(--t-h3); flex:1; min-width:140px; }
.fm-huvud-not     { font-size:var(--t-meta); color:var(--muted2); white-space:nowrap; }
.fm-facit         { display:flex; align-items:center; gap:6px; font-size:var(--t-meta);
                    color:var(--muted2); cursor:pointer; white-space:nowrap; }
.fm-facit input   { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.fm-stang         { font:inherit; font-size:var(--t-meta); font-weight:600; cursor:pointer;
                    padding:6px 14px; background:none; color:var(--text);
                    border:1px solid var(--border); }
.fm-stang:hover   { border-color:var(--accent); color:var(--accent); }

.fm-lista         { padding:4px 0; }
.fm-notis         { padding:18px; font-size:var(--t-liten); color:var(--muted2); }

.fm-fraga         { padding:14px 18px; border-bottom:1px solid var(--border); }
.fm-fraga:last-child { border-bottom:none; }
.fm-topp-rad      { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fm-nr            { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
                    font-weight:600; color:var(--muted); }
.fm-typ           { font-size:var(--t-meta); font-weight:600; color:var(--muted2);
                    letter-spacing:0.3px; }
.fm-max           { font-size:var(--t-meta); color:var(--muted); margin-left:auto; }
.fm-fragetext     { font-size:var(--t-liten); line-height:1.5; }
.fm-tom           { color:var(--muted); font-style:italic; }
.fm-bild          { display:block; max-width:100%; max-height:240px; margin-top:8px;
                    border:1px solid var(--border); }

.fm-alt           { list-style:none; margin:8px 0 0; padding:0; }
.fm-alt-post      { display:flex; align-items:baseline; gap:8px; padding:4px 0;
                    font-size:var(--t-liten); color:var(--muted2); }
.fm-alt-bok       { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
                    color:var(--muted); min-width:14px; }
.fm-alt-text      { flex:1; }
/* Rätt svar får rättfärgen, och bara när facit är påslaget. */
.fm-alt-ratt      { color:var(--text); }
.fm-alt-ratt .fm-alt-bok { color:var(--correct); font-weight:700; }
.fm-alt-markor    { font-size:var(--t-meta); font-weight:600; color:var(--correct);
                    background:var(--correct-dim); padding:1px 6px; white-space:nowrap; }

.fm-stod          { margin-top:8px; padding:8px 12px; background:var(--surface2);
                    border-left:2px solid var(--border);
                    font-size:var(--t-meta); color:var(--muted2); line-height:1.5;
                    white-space:pre-wrap; }
.fm-stod-rubrik   { display:block; letter-spacing:1.2px; text-transform:uppercase;
                    font-weight:600; color:var(--muted); margin-bottom:3px; }

/* Namnet som öppnar rutan. Ska se klickbart ut utan att bli en knapp —
   raden runt omkring har sin egen klickyta. */
.quiz-oppna       { background:none; border:none; padding:0; font:inherit; color:inherit;
                    text-align:left; cursor:pointer; max-width:100%;
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-oppna:hover { color:var(--accent); text-decoration:underline; }

/* ── PUBLICERA TILL ELEVERNA ─────────────────────────────────────────────
   Rutan högst upp i ett öppnat resultatkort. Den säger två saker som båda
   måste gå att läsa på en halv sekund: om eleverna ser resultatet, och var
   de i så fall ser det.

   Opublicerat är standardläget och ska se lugnt ut, inte som en varning —
   det är inget fel att ett resultat ligger kvar hos läraren. Publicerat får
   korrektfärgen, eftersom det är ett tillstånd man ska kunna upptäcka på
   avstånd när man letar efter det man råkat skicka ut. */
.publ-ruta      { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                  background:var(--surface2); border:1px solid var(--border);
                  padding:10px 14px; margin-bottom:12px; }
.publ-etikett   { font-size:var(--t-meta); letter-spacing:1.2px; text-transform:uppercase;
                  font-weight:600; color:var(--muted2); white-space:nowrap; }
.publ-text      { flex:1; min-width:200px; font-size:var(--t-liten); color:var(--muted2); }
.publ-pa        { background:var(--correct-dim); border-color:var(--correct); }
.publ-pa .publ-etikett { color:var(--correct); }
.publ-pa .publ-text    { color:var(--text); }

.session-marke-publ { background:var(--correct-dim); color:var(--correct); }

/* ── SOCRATIVE-IMPORT (quiz-socrative.js, 2026-10-29) ───────────────────
   Modalen under Quiz → Importera → Från Socrative. Läraren har en
   exportfil från bokmärket på socrative.html, och väljer här vad som ska in.

   Sedan 2026-10-30 gäller samma klasser även Kahoot-importen (kah-modal)
   och Flytta bilder till Thevin (bf-modal). Tre modaler som gör samma sorts
   sak ska se likadana ut; klassnamnen fick behålla sitt soc-prefix.

   Listan skrollar. Designsystemet avråder från en vy delad i fast och
   skrollande del, men en modal är undantaget det redan gör: en exportfil
   kan bära sextiosju quiz, och alternativet vore en sida som inte går att
   överblicka. Knappraden måste synas hela tiden — det är den som avslutar. */
.soc-modal      { max-width:640px; }

.soc-hjalp      { font-size:var(--t-liten); color:var(--muted2); line-height:1.5;
                  margin:0 0 12px; }
.soc-hjalp:last-child { margin-bottom:0; margin-top:12px; }
.soc-hjalp a    { color:var(--accent); }

#soc-fil, #kah-fil { font-size:var(--t-liten); color:var(--text); }

.soc-topp       { display:flex; align-items:baseline; justify-content:space-between;
                  gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.soc-fil        { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
                  color:var(--muted); word-break:break-all; }
.soc-antal      { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
                  color:var(--accent); font-weight:600; white-space:nowrap; }

.soc-knapprad   { display:flex; gap:8px; margin-bottom:12px; }

.soc-lista      { max-height:46vh; overflow-y:auto;
                  border:1px solid var(--border); background:var(--bg); }

/* Hela raden är klickbar, så den är en <label> runt kryssrutan. */
.soc-rad        { display:flex; align-items:flex-start; gap:12px;
                  padding:10px 14px; border-bottom:1px solid var(--border);
                  cursor:pointer; }
.soc-rad:last-child { border-bottom:none; }
.soc-rad:hover  { background:var(--surface2); }

.soc-box        { width:14px; height:14px; margin:3px 0 0; flex:none;
                  accent-color:var(--accent); cursor:pointer; }

.soc-mitt       { min-width:0; }
.soc-namn       { font-size:var(--t-liten); color:var(--text); font-weight:600;
                  line-height:1.5; }
.soc-meta       { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
                  color:var(--muted); margin-top:2px; }

/* Varningen stoppar ingenting — den talar om vad läraren bör veta innan hon
   trycker. Bärnsten, eftersom det är uppmärksamhet och inte ett fel. */
.soc-varning    { font-size:var(--t-meta); color:var(--warn); margin-top:4px;
                  line-height:1.5; }

.soc-status     { font-size:var(--t-liten); color:var(--muted2); line-height:1.5;
                  margin-top:12px; }

/* ── TOMT TILLSTÅND I QUIZLISTAN (quiz.js, 2026-10-29) ──────────────────
   .empty-state i global.css ger centrering, luft och dämpad text. Det som
   saknades var innehållet: rubrik, förklaring och en väg vidare. */
.tom-rubrik     { font-size:var(--t-h3); font-weight:600; color:var(--text);
                  margin-bottom:8px; line-height:1.25; }
.tom-text       { font-size:var(--t-liten); color:var(--muted2); line-height:1.5;
                  max-width:52ch; margin:0 auto; }
.tom-text strong { color:var(--text); font-weight:600; }
.tom-knappar    { display:flex; gap:8px; justify-content:center; margin-top:20px; }

/* ── FLYTTA ELEV (klasser.js, oppnaFlyttaElev) ─────────────────────────
   Adminrutan som flyttar en elev till en annan klass. 2026-10-30. */
.flytta-modal    { max-width:520px; }
.flytta-etikett  { display:block; font-size:var(--t-meta); letter-spacing:1px;
                   text-transform:uppercase; color:var(--muted2); margin:12px 0 4px; }
.flytta-info     { font-family:'JetBrains Mono', monospace; font-size:var(--t-liten);
                   color:var(--accent); margin:10px 0 0; }
.flytta-lista    { font-size:var(--t-liten); color:var(--muted2); line-height:1.5;
                   margin:12px 0 0; padding-left:18px; }
.flytta-krock    { border:1px solid var(--warn); padding:10px 12px; margin-top:12px;
                   font-size:var(--t-liten); color:var(--text); line-height:1.5; }
.flytta-krock p  { margin:0 0 8px; }
.flytta-krock p:last-child { margin-bottom:0; }

/* ── SLIDES OCH AI-SESSIONER I QUIZ-TRÄDET (quiz-material.js) ─────────
   Egen radklass, inte .quiz-row: quiz-ordning.js kopplar dragsortering på
   varje .quiz-row och skriver quiz.ordning för dem. Utseendet är quizradens.
   Etiketten hör till märkesfamiljen i quizlistan: samma färg, ordet bär
   skillnaden. 2026-10-30. */
.material-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 8px 28px; background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:background 120ms ease-out; cursor:pointer;
}
.material-row.material-row-sub { padding-left:42px; }
.material-row:hover            { background:var(--surface2); }
.material-ikon                 { width:14px; height:14px; }
.material-checkbox             { width:15px; height:15px; flex-shrink:0; cursor:pointer; accent-color:var(--accent); margin:0; }
.quiz-typmarke-slide,
.quiz-typmarke-ai_mall         { color:var(--accent); }

/* Texter och AI-lärare är ingredienser och delas inte ut härifrån. Raden
   säger att de finns och var de byggs. */
.material-ingrediens {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 14px 8px 42px; border-bottom:1px solid var(--border);
  font-size:var(--t-meta); color:var(--muted2);
}
.material-fel {
  border-left:3px solid var(--wrong); padding:8px 12px; margin:8px 0;
  font-size:var(--t-liten); color:var(--wrong-text);
}

/* Typfiltret under sökrutan. Valt läge markeras med accentkanten under
   ordet, inte med en fylld knapp: det är ett läge, inte en handling. */
.quiz-typfilter              { display:flex; gap:4px; margin:-8px 0 12px; flex-wrap:wrap; }
.quiz-typfilter-knapp {
  background:none; border:none; border-bottom:2px solid transparent;
  padding:4px 8px; font-family:inherit; font-size:var(--t-meta);
  color:var(--muted2); cursor:pointer; transition:color 120ms ease-out;
}
.quiz-typfilter-knapp:hover  { color:var(--text); }
.quiz-typfilter-knapp.aktiv  { color:var(--text); border-bottom-color:var(--accent); }
.quiz-typfilter-knapp:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Lägg till slide */
.ns-modal  { max-width:460px; }
.ns-falt   { margin-bottom:12px; }
.ns-fel    { min-height:1em; margin:4px 0 0; font-size:var(--t-liten); color:var(--wrong-text); }

/* ── FÄRDIGA AI-SESSIONER (ai-sessionsmall.js) ──────────────────────── */
.aim-lista     { margin-bottom:24px; }
.aim-rubrik {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  text-transform:uppercase; letter-spacing:1px; color:var(--muted);
  margin:0 0 8px;
}
.aim-rad {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; background:var(--surface);
  border:1px solid var(--border); border-top:none;
}
.aim-rubrik + .aim-rad { border-top:1px solid var(--border); }
.aim-rad-text  { min-width:0; }
.aim-namn      { font-size:var(--t-liten); font-weight:600; color:var(--text); }
.aim-meta      { font-size:var(--t-meta); color:var(--muted2); margin:2px 0 0; }
.aim-rad-knappar { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.aim-tom       { font-size:var(--t-liten); color:var(--muted2); margin:0; }
.aim-tomt      { border:1px solid var(--border); padding:16px; }
.aim-tomt-rubrik { font-size:var(--t-liten); font-weight:600; color:var(--text); margin-bottom:4px; }
.aim-fel       { font-size:var(--t-liten); color:var(--wrong-text); }
.aim-steg-rubrik { font-size:var(--t-h3); font-weight:600; color:var(--text); margin-bottom:12px; }
.aim-namnfalt  { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.aim-namnfalt label { font-size:var(--t-meta); color:var(--muted2); }
.material-ta-bort              { color:var(--wrong-text); }

/* ── TEXTER OCH FRÅGOR (ai-text-fragor.js) ──────────────────────────
   Textkortet i AI-biblioteket och frågelistan i textens ruta. Frågorna
   hör till texten och redigeras där; kortet visar bara antalet. 2026-10-31. */
.atf-kort {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--surface); border:1px solid var(--border);
  margin-bottom:4px; cursor:pointer; transition:background 120ms ease-out;
}
.atf-kort:hover        { background:var(--surface2); }
.atf-kort-text         { min-width:0; }
.atf-kort-titel        { font-size:var(--t-liten); font-weight:600; color:var(--text); }
.atf-kort-meta         { font-size:var(--t-meta); color:var(--muted2); margin-top:2px;
                         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.atf-kort-antal        { font-family:'JetBrains Mono', monospace; color:var(--text); margin-right:6px; }
.atf-kort-noll         { color:var(--accent-text); }
.atf-kort-knappar      { display:flex; align-items:center; gap:12px; flex-shrink:0; }

.atf                   { border-top:1px solid var(--border); padding-top:16px; margin:8px 0 20px; }
.atf-rubrik {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:8px;
}
.atf-antal             { color:var(--text); margin-left:4px; }
.atf-tom               { font-size:var(--t-liten); color:var(--muted2); margin:0 0 12px; }
.atf-fel {
  border-left:3px solid var(--wrong); padding:8px 12px;
  font-size:var(--t-liten); color:var(--wrong-text);
}
.atf-rad {
  display:flex; align-items:flex-start; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--border);
}
.atf-nummer {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  color:var(--muted); width:20px; padding-top:9px; flex-shrink:0; text-align:right;
}
.atf-falt              { flex:1; min-width:0; }
.atf-fraga             { width:100%; min-height:44px; resize:vertical; font-family:inherit; font-size:var(--t-liten); }
.atf-meta              { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px;
                         font-size:var(--t-meta); color:var(--muted2); }
.atf-kalla             { font-family:'JetBrains Mono', monospace; color:var(--muted); }
.atf-poang             { display:flex; align-items:center; gap:6px; }
.atf-poang input       { width:56px; min-height:28px; padding:2px 6px; font-family:'JetBrains Mono', monospace; }
.atf-bildknapp         { cursor:pointer; }
.atf-bildnamn          { color:var(--muted); }
.atf-ta-bort           { margin-top:6px; }
.atf-rad-bort          { align-items:center; justify-content:space-between; }
.atf-bort-text         { font-size:var(--t-meta); color:var(--muted); text-decoration:line-through;
                         min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atf-knappar           { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ── BYGGAREN: SÄTT IHOP / REDIGERA AI-SESSION (ai-sessionsmall.js) ──
   Stegraden är mono och versal, valt steg har accentkanten under sig.
   Inga numrerade cirklar: tre ord räcker för att säga var man är. */
.modal.aim-modal  { max-width:720px; max-height:90vh; overflow-y:auto; }
.aim-stegrad {
  display:flex; gap:16px; list-style:none; padding:0; margin:12px 0 8px;
  border-bottom:1px solid var(--border);
}
.aim-stegrad li {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  text-transform:uppercase; letter-spacing:1px; color:var(--muted);
  padding:0 0 8px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.aim-stegrad li.klar  { color:var(--muted2); }
.aim-stegrad li.aktiv { color:var(--text); border-bottom-color:var(--accent); }
.aim-innehall    { margin:12px 0 4px; }
.aim-hjalp       { font-size:var(--t-liten); color:var(--muted2); margin:0 0 12px; }

.aim-text        { border:1px solid var(--border); margin-bottom:4px; }
.aim-text.vald   { border-left:3px solid var(--accent); }
.aim-text-rad, .aim-fraga, .aim-prompt {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
}
.aim-text-rad    { padding:10px 12px; align-items:center; }
.aim-text-rad input, .aim-fraga input, .aim-prompt input { accent-color:var(--accent); margin:2px 0 0; flex-shrink:0; }
.aim-text-titel  { font-size:var(--t-liten); font-weight:600; color:var(--text); flex:1; min-width:0; }
.aim-text-antal  { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta); color:var(--muted2); flex-shrink:0; }
.aim-fragor      { border-top:1px solid var(--border); padding:4px 12px 8px 36px; }
.aim-fraga       { padding:6px 0; font-size:var(--t-liten); color:var(--text); line-height:1.5; }

.aim-prompt      { padding:10px 12px; border:1px solid var(--border); margin-bottom:4px; }
.aim-prompt.vald { border-left:3px solid var(--accent); }
.aim-prompt-text { display:flex; flex-direction:column; min-width:0; }
.aim-ny-prompt-knapp { margin-top:8px; }
.aim-ny-prompt   { border:1px solid var(--border); border-left:3px solid var(--accent); padding:12px; margin-top:8px; }
.aim-ny-prompt textarea { width:100%; resize:vertical; font-family:inherit; font-size:var(--t-liten); }
.aim-ny-prompt-knappar { display:flex; justify-content:flex-end; gap:12px; }

.aim-namnfalt input, .aim-namnfalt select { width:100%; }
.aim-sammanfattning { border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:6px;
                      font-size:var(--t-liten); color:var(--text); }
.aim-sammanfattning .aim-rubrik { display:inline-block; width:96px; margin:0; }
.aim-fot         { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.aim-fot-hoger   { display:flex; gap:8px; }
/* Frågetypsraden under Quiz: samma knappar, ett steg in och dämpad, så att
   den läses som en del av valet ovanför. 2026-10-31. */
.quiz-fragetypfilter          { margin-top:-8px; padding-left:12px; border-left:1px solid var(--border); }
.quiz-typfilter-antal         { font-family:'JetBrains Mono', monospace; color:var(--muted); margin-left:2px; }
.quiz-typfilter[hidden]       { display:none; }

/* ── LABBAR I SESSIONER (labb-larare.js) ───────────────────────────────
   Utdelade labbar, till att börja med elcentralen. Raden återanvänder
   .session-active. Panelen under den har en ruta per elev; segmentraden
   är designsystemets framstegsmönster, ett segment per övning. */
.labb-sessioner          { margin-top:24px; }
.labb-sessioner:empty    { display:none; }
.labb-rubrik {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  margin-bottom:8px;
}
.labb-rad                { border-left-color:var(--accent); }
.labb-rad-oppen          { background:var(--surface2); }
.labb-marke {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  letter-spacing:1px; text-transform:uppercase; color:var(--muted2);
  border:1px solid var(--border); padding:0 4px; margin-left:8px;
}
.labb-panel {
  border:1px solid var(--border); border-top:none; background:var(--surface);
  padding:16px; margin-bottom:8px;
}
.labb-laddar, .labb-hjalp { font-size:var(--t-meta); color:var(--muted2); }
.labb-fel                { font-size:var(--t-liten); color:var(--wrong-text, var(--wrong)); }
.labb-installning        { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.labb-etikett {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-right:4px;
}
.labb-val-aktiv          { border-left:3px solid var(--accent); color:var(--text); }
.labb-rutnat {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:8px;
}
.labb-ruta               { border:1px solid var(--border); background:var(--surface); }
.labb-ruta-vald          { grid-column:1 / -1; border-left:3px solid var(--accent); }
.labb-ruta-knapp {
  display:flex; flex-direction:column; gap:4px; width:100%; text-align:left;
  background:none; border:none; padding:12px; cursor:pointer; color:var(--text);
  font:inherit; transition:background 120ms ease-out;
}
.labb-ruta-knapp:hover   { background:var(--surface2); }
.labb-ruta-knapp:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.labb-ruta-namn          { font-size:var(--t-liten); font-weight:600; }
.labb-ruta-rad           { font-size:var(--t-meta); color:var(--muted2); }
.labb-ruta-meta          { font-size:var(--t-meta); color:var(--muted); }
.labb-tal                { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta); color:var(--text); }
.labb-segmentrad         { display:flex; gap:4px; }
.labb-segment            { flex:1; height:8px; background:var(--surface3); }
.labb-segment-klar       { background:var(--accent); }
.labb-ovningar           { list-style:none; margin:0; padding:0 12px 12px; }
.labb-ovning {
  display:flex; align-items:center; gap:12px; min-height:40px;
  border-top:1px solid var(--border); font-size:var(--t-liten);
}
.labb-ovning-namn        { flex:1; }
.labb-steg               { font-family:'JetBrains Mono', monospace; font-size:var(--t-meta); color:var(--muted2); }
.labb-status {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  letter-spacing:1px; text-transform:uppercase; color:var(--muted2); min-width:56px;
}
.labb-ovning-klar .labb-status { color:var(--correct-text, var(--correct)); }
.labb-ovning-last .labb-ovning-namn { color:var(--muted2); }
.labb-tomt b             { display:block; font-size:var(--t-liten); }
.labb-tomt p             { font-size:var(--t-meta); color:var(--muted2); margin:4px 0 0; }

/* Övningarna för hela utdelningen: en rad per övning med ordning, flytt och
   ett val i tre lägen. Det valda bär accentkanten (labb-val-aktiv) och ordet,
   inte bara färg. */
.labb-styr               { border-top:1px solid var(--border); padding-top:12px; margin-bottom:16px; }
.labb-styr-huvud         { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.labb-styr-extra         { margin-top:16px; }
.labb-styr-lista         { list-style:none; margin:0; padding:0; }
.labb-styr-rad {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:40px;
  border-top:1px solid var(--border); font-size:var(--t-liten); padding:4px 0;
}
.labb-styr-rad .labb-tal { min-width:20px; }
.labb-styr-krav          { display:block; font-size:var(--t-meta); color:var(--muted); }
.labb-styr-flytt,
.labb-styr-lage          { display:flex; gap:4px; }
.labb-segment-extra      { opacity:.75; }
.labb-segment-extra.labb-segment-klar { opacity:1; }
.labb-ovningar-rubrik {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta); letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); padding:16px 0 4px; border-top:1px solid var(--border);
}
.labb-ovning-vantar .labb-ovning-namn,
.labb-ovning-av .labb-ovning-namn { color:var(--muted2); }