/* Studieguiden och ämnesguiden — Tentaguiden+.
 *
 * DEN HÄR FILEN ÄR KÄLLAN. Den genererades en gång ur labbsidornas style-block
 * när vyerna flyttade in i sajten 2026-08-20, men portskriptet är pensionerat:
 * ändringar görs här och inte i något bygge.
 *
 * Genererad ur labb/dashboard.html och labb/interaktiv-amnesguide.html när
 * vyerna flyttades in i sajten 2026-08-20. Sidorna var egna dokument med egen
 * header, egna designtoken och egen mörkerhantering. Under sajtens header ska
 * de i stället följa sajtens tema, som har fyra paletter och styrs av
 * data-theme-mode på html-elementet.
 *
 * Därför är :root och prefers-color-scheme borta ur båda. --ink och --hairline
 * är alias mot sajtens --text och --surface-2, och resten av deras egna token
 * ligger kvar på wrappern.
 *
 * Allt är scopat under .sg-dash respektive .sg-guide. De två sidorna delar 26
 * klassnamn med olika innehåll — .karta-rubrik, .wrap, h1 och tolv till — och
 * hade skrivit över varandra utan wrapper. Keyframes är omdöpta av samma skäl:
 * båda hade en knapp-puls, med olika värden.
 */

.sg-dash, .sg-guide {
  --ink: var(--text);
  --hairline: var(--surface-2);
  --r: 20px;
  --r-sm: 12px;
  --r-full: 999px;
  --t: .18s cubic-bezier(.2,.7,.2,1);
  --niva1: #FFE9A3;
  --niva2: #FFD12E;
  --niva3: #93E06C;
  --niva4: #5FC63C;
  --niva5: #34A812;
  --niva-ink: #3d2f00;
  --kan: #93E06C;
  --kan-ink: #143d00;
  --repeterar: #FFD12E;
  --repeterar-ink: #4a3600;
  --premium: #ffdd00;
  --steg0: #8FDD68;
  --steg0-ink: #143d00;
  --steg1: #74D14A;
  --steg1-ink: #0d2b00;
  --steg2: #5BC132;
  --steg2-ink: #0a2408;
  --steg3: #45A821;
  --steg3-ink: #08200a;
}

/* ── Studieguiden ───────────────────────────────────────────── */
.sg-dash * { box-sizing: border-box; }
.sg-dash {
    margin: 0;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg); color: var(--ink);
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }
/* Sajtens avsändare, även här. Samma resonemang som i
     interaktiv-amnesguide.html: utan header läser den betalda vyn som en annan
     sajt. Hela navet går inte att låna hit, men det som saknades var inte
     funktionerna utan avsändaren. */
.sg-dash .tg-nav {
    position: sticky; top: 0; z-index: 200;
    height: 60px; padding: 0 28px;
    background: var(--bg); border-bottom: 1px solid var(--hairline);
  }
.sg-dash .tg-nav-inner {
    max-width: 1000px; height: 100%; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
  }
.sg-dash .tg-nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none;
    transition: color var(--t);
  }
@media (hover: hover) {
.sg-dash .tg-nav-logo:hover { color: var(--muted); }
}
.sg-dash .tg-nav-logo:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sg-dash .tg-nav-plus {
    margin-left: auto; font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--muted);
  }
.sg-dash .tg-nav-plus b { color: var(--ink); font-weight: 800; }
.sg-dash .wrap { max-width: 1000px; margin: 0 auto; padding: 0 28px 120px; }
.sg-dash .proto {
    background: var(--ink); color: var(--bg);
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    padding: 9px 28px; text-align: center;
  }
/* ── Rubrik ─────────────────────────────────────────────── */
.sg-dash header { padding: 56px 0 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.sg-dash .tillbaka {
    color: inherit; text-decoration: none;
    transition: color var(--t);
  }
@media (hover: hover) {
.sg-dash .tillbaka:hover { color: var(--ink); }
}
.sg-dash .eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
  }
/* Avdelaren är ett tecken och inte en ram: raden ska läsas som en väg,
     Tentaguiden och sedan Studieguiden. */
.sg-dash .eyebrow-plats::before { content: '·'; margin: 0 8px; opacity: .6; }
.sg-dash .eyebrow-plats { color: var(--text); }
.sg-dash h1 { margin: 0; font-size: clamp(32px, 5.4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.sg-dash .rubrikrad { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.sg-dash .anvandare { display: flex; align-items: baseline; gap: 10px; }
/* display: flex vinner över hidden-attributet. Utan den här raden står en
     tom medlemsbricka bredvid rubriken för alla som inte är inloggade. */
.sg-dash .anvandare[hidden] { display: none; }
.sg-dash .anv-namn { font-size: 15px; color: var(--muted); }
.sg-dash .anv-namn b { color: var(--ink); font-weight: 600; }
/* Medlems-ID:t ska gå att läsa upp över ett bord — därför versaler och
     siffror, aldrig gemener. */
.sg-dash .anv-id {
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
    padding: 5px 11px; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--muted);
  }
/* .premium-brickan och .stjarna togs bort tillsammans med märket i headern.
     .tg-plus står kvar: plustecknet skrivs fortfarande ut i löptext. */
.sg-dash .tg-plus { color: #77C143; }
/* ── Inställningar ──────────────────────────────────────── */
.sg-dash .instal { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.sg-dash .instal-text { font-size: 13px; color: var(--muted); }
.sg-dash .vippa {
    position: relative; width: 42px; height: 25px; flex-shrink: 0;
    border-radius: var(--r-full); border: none; cursor: pointer;
    background: var(--surface-2); padding: 0;
    transition: background var(--t);
  }
.sg-dash .vippa::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--bg); transition: transform var(--t);
  }
.sg-dash .vippa[aria-pressed="true"] { background: var(--ink); }
.sg-dash .vippa[aria-pressed="true"]::after { transform: translateX(17px); }
.sg-dash .vippa:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
/* ── Påståendet ─────────────────────────────────────────── */
/* Vyn öppnar med en sats om vad materialet visat sig göra, inte med hur
     stort det är. Nämnaren står i samma mening som siffran. Utan den blir
     påståendet ett löfte om nästa tenta, vilket det inte är. */
.sg-dash .pastaende {
    margin-top: 34px;
    font-size: clamp(19px, 2.5vw, 25px); line-height: 1.4;
    letter-spacing: -0.02em; max-width: 30ch; font-weight: 600;
  }
.sg-dash .pastaende b { font-weight: 800; }
.sg-dash .pastaende-golv {
    margin-top: 14px; font-size: 14px; line-height: 1.55;
    color: var(--muted); max-width: 54ch; font-weight: 400; letter-spacing: 0;
  }
/* Större än sektionshjälpen under: det här är det första man behöver veta,
     inte en fotnot till rubriken. */
.sg-dash .bruksanvisning {
    margin-top: 40px; max-width: 58ch;
    font-size: 17px; line-height: 1.55; color: var(--muted);
    text-wrap: pretty;
  }
.sg-dash .bruksanvisning:empty { display: none; }
.sg-dash .bruksanvisning b { color: var(--ink); font-weight: 600; }
/* Öppningssatsen är den siffra som möter en först och den som väger tyngst.
     Lugnt läge döljer den tillsammans med resten av talen. */
body[data-lugnt="1"] .sg-dash .pastaende, body[data-lugnt="1"] .sg-dash .pastaende-golv { display: none; }
/* ── Liggaren över nivå 1 ───────────────────────────────── */
/* ── Områden ────────────────────────────────────────────── */
/* Strimman: hela terminen på en rad, där varje områdes bredd är dess andel
     av posterna. Den tunna baren per område säger hur långt man kommit men
     inte hur mycket området väger, så dermatologins 123 poster såg lika stora
     ut som handkirurgins 50. Här syns bådadera på en gång.
     Höjden är avsiktligt tjock: strimman ska läsas på håll, inte studeras. */
.sg-dash .strimma {
    margin-top: 18px; padding: 20px 22px 18px;
    background: var(--surface); border-radius: var(--r);
  }
/* Förhandsvisningen och kurser utan frekvenser ritar aldrig strimman. Utan
     den här raden står en tom grå platta kvar där den skulle ha suttit. */
.sg-dash .strimma:empty { display: none; }
/* flex-start, inte flex-end: namnen får gå på två rader, och bottenjustering
     hade då förskjutit staplarna i höjdled mot varandra. */
.sg-dash .strimma-stapel { display: flex; gap: 5px; align-items: flex-start; }
/* Golvet på 56 px per område betyder att sexton områden kräver 971 px medan
   innehållsytan är 900. Områdena kan då inte krympa mer, och raden rann ut
   ur den grå plattan: T1 och T6 hade sista området hängande utanför kanten.
   Rullning i stället, samma lösning som på smal skärm. Klassen sätts av
   ritaStrimma när innehållet faktiskt är bredare än ytan, så att de terminer
   som får plats inte får en toning i kanten utan anledning. */
.sg-dash .strimma-stapel { overflow-x: auto; scrollbar-width: none; }
.sg-dash .strimma-stapel::-webkit-scrollbar { display: none; }
.sg-dash .strimma-stapel.rullar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
.sg-dash .strimma-block {
    display: flex; flex-direction: column; gap: 8px;
    /* Bredden är områdets andel av terminen. Utan det ser 123 poster och 50
       poster lika stora ut, vilket är den enda siffra strimman ska bära. */
    flex: var(--andel, .1) 1 0;
    /* Minimibredden binder bara för terminens minsta områden. Utan den kläms
       de under 45 px, och då blir namnet en trepunktsavkortning på fyra
       tecken. Proportionerna offras något i svansen för att etiketten ska
       gå att läsa, vilket är det strimman finns till för. */
    min-width: 56px;
    background: none; border: 0; padding: 0; font: inherit; text-align: left;
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
.sg-dash .strimma-spar {
    height: 30px; border-radius: var(--r-sm); background: var(--surface-2);
    overflow: hidden; position: relative;
    transition: transform var(--t);
  }
@media (hover: hover) {
.sg-dash .strimma-block:hover .strimma-spar { transform: translateY(-2px); }
}
.sg-dash .strimma-block:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }
.sg-dash .strimma-spar span {
    position: absolute; top: 0; bottom: 0; left: 0; display: block;
    transition: width .55s cubic-bezier(.2,.7,.2,1);
  }
/* Påbörjat ritas först, klart ovanpå, så delarna adderas visuellt utan att
     behöva räknas ihop i två koordinater. */
.sg-dash .strimma-del { background: var(--repeterar); z-index: 0; }
.sg-dash .strimma-klar { background: var(--kan); z-index: 1; }
/* Tre rader i stället för avkortning, med svensk avstavning. "Bild- och
     funktionsmedicin" på ett 56 px brett segment blir annars "Bild…", vilket
     inte identifierar något. Tre rader räcker för terminens längsta namn. */
.sg-dash .strimma-namn {
    font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--muted);
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
    transition: color var(--t);
  }
@media (hover: hover) {
.sg-dash .strimma-block:hover .strimma-namn { color: var(--ink); }
}
.sg-dash .strimma-fot {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--surface-2);
    font-size: 13.5px; color: var(--muted);
  }
.sg-dash .strimma-fot b { color: var(--ink); font-weight: 700; }
body[data-lugnt="1"] .sg-dash .strimma-fot { display: none; }
@media (prefers-reduced-motion: reduce) {
.sg-dash .strimma-spar span { transition: none; }
@media (hover: hover) { .sg-dash .strimma-block:hover .strimma-spar { transform: none; } }
}
/* Under 640 px ryms inte elva områden bredvid varandra. Radbrytning vore
     enklare men förstör det strimman visar: bredderna går bara att jämföra
     inom en rad, och sista raden hade fått ett ensamt segment i full bredd.
     Den rullar i sidled i stället, med proportionerna intakta.
     Masken visar att det fortsätter utanför kanten. */
@media (max-width: 640px) {
/* Pilen är dekoration; att hela kortet är en länk syns ändå. På 375 px tar
       den plats som antalet behöver. */
.sg-dash .omrade-pil { display: none; }
/* Namnet och antalet låg på en rad med space-between, och antalet har
       white-space: nowrap. Ett långt områdesnamn tryckte därför ut
       "0 av 97 diagnoser" utanför kortets högerkant. De får bryta till två
       rader i stället. */
.sg-dash .omrade-topp {
      padding-right: 0; flex-wrap: wrap; gap: 2px 12px;
      align-items: baseline;
    }
.sg-dash .omrade-tal { white-space: normal; }
.sg-dash .strimma { padding: 16px 0 14px 16px; }
/* Rullning och dold rullningslist ärvs numera från basregeln. Masken satt
       här ovillkorligt och lade en toning i kanten även på de terminer som
       fick plats; den styrs nu av .rullar tillsammans med desktop. */
.sg-dash .strimma-stapel { flex-wrap: nowrap; padding-right: 16px; }
/* Bredden räknas ur andelen mot en tänkt totalbredd, eftersom flex-grow
       inte har något överskott att fördela i en rullande stapel. Golvet på
       62 px gäller fortfarande för de minsta områdena. */
.sg-dash .strimma-block {
      flex: 0 0 auto;
      width: max(62px, calc(var(--andel, .1) * 760px));
    }
.sg-dash .strimma-fot { margin-right: 16px; }
}
.sg-dash .omraden { margin-top: 18px; display: grid; gap: 6px; }
/* Området är en länk till ämnessidan. Diagnoslistan bodde här tidigare och
     gjorde terminen omöjlig att överblicka: ett block med 123 diagnoser blev
     flera meter att rulla förbi. */
.sg-dash .omrade {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: start; column-gap: 15px; position: relative;
    padding: 17px 18px; border-radius: var(--r-sm);
    background: var(--bg); border: 1px solid var(--hairline);
    text-decoration: none; color: inherit;
    transition: background var(--t), border-color var(--t);
  }
@media (hover: hover) {
.sg-dash .omrade:hover { background: var(--surface); border-color: var(--surface-2); }
}
.sg-dash .omrade:focus-visible { outline: 2.5px solid var(--ink); outline-offset: -2px; }
/* Ikonen hör till området och går igen på diagnoserna inne i det. */
.sg-dash .omrade-ikon {
    grid-row: 1 / span 3;
    width: 28px; height: 28px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); transition: color var(--t);
  }
@media (hover: hover) {
.sg-dash .omrade:hover .omrade-ikon { color: var(--ink); }
}
.sg-dash .omrade-ikon .tg-ikon { width: 24px; height: 24px; display: block; }
.sg-dash .omrade-topp {
    grid-column: 2 / span 2;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; margin-bottom: 9px;
    /* Plats för pilen, som ligger absolut i kortets hörn. Utan detta lade sig
       antalet under den. */
    padding-right: 26px;
  }
/* Områdesnamnet är kortets rubrik och ska läsas före linstexten under. På
     15 px försvann det bredvid ett stycke på 13,5. */
.sg-dash .omrade-namn { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
.sg-dash .omrade-tal { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sg-dash .omrade-spar {
    grid-column: 2 / span 2;
    position: relative; height: 6px; border-radius: 999px;
    background: var(--surface-2); overflow: hidden;
  }
.sg-dash .omrade-spar span {
    position: absolute; top: 0; bottom: 0; left: 0;
    transition: width .45s cubic-bezier(.2,.7,.2,1);
  }
/* Den påbörjade delen ritas först och den klara ovanpå, så staplarna
     adderas visuellt utan att behöva räknas ihop i två koordinater. */
.sg-dash .omrade-del { background: var(--repeterar); z-index: 0; }
.sg-dash .omrade-klar { background: var(--kan); z-index: 1; }
/* Linsen svarar på frågan som annars ställs för varje diagnos i området:
     ur vilken synvinkel prövas de här? Ingen färgad list och ingen ram, den
     ska läsas som en ingress. */
.sg-dash .omrade-lins {
    grid-column: 2 / span 2;
    margin: 11px 0 0; max-width: 76ch;
    font-size: 13.5px; line-height: 1.55; color: var(--muted);
    text-wrap: pretty;
  }
.sg-dash .omrade-pil {
    position: absolute; right: 16px; top: 17px;
    color: var(--muted); font-size: 15px;
    transition: transform var(--t), color var(--t);
  }
@media (hover: hover) {
.sg-dash .omrade:hover .omrade-pil { transform: translateX(3px); color: var(--ink); }
}
body[data-lugnt="1"] .sg-dash .omrade-tal { display: none; }
@media (prefers-reduced-motion: reduce) {
.sg-dash .omrade-spar span, .sg-dash .omrade-pil { transition: none; }
}
.sg-dash .liggare { margin-top: 18px; }
.sg-dash .liggare-rad {
    display: grid; grid-template-columns: 1fr auto auto auto;
    align-items: baseline; gap: 10px 20px;
    padding: 14px 4px; border-bottom: 1px solid var(--hairline);
    text-decoration: none; color: inherit;
    transition: background var(--t);
  }
@media (hover: hover) {
.sg-dash a.liggare-rad:hover { background: var(--surface); }
}
.sg-dash a.liggare-rad:focus-visible { outline: 2.5px solid var(--ink); outline-offset: -2px; border-radius: var(--r-sm); }
.sg-dash .liggare-namn { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sg-dash .liggare-namn::after {
    content: '→'; color: var(--muted); margin-left: 8px;
    display: inline-block; transition: transform var(--t), color var(--t);
  }
@media (hover: hover) {
.sg-dash a.liggare-rad:hover .liggare-namn::after { transform: translateX(3px); color: var(--ink); }
}
.sg-dash .liggare-tal { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sg-dash .liggare-tal b { color: var(--ink); font-weight: 700; }
.sg-dash .liggare-andel { font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 6ch; text-align: right; }
body[data-lugnt="1"] .sg-dash .liggare-andel { display: none; }
.sg-dash .liggare-tom { font-size: 13px; color: var(--muted); grid-column: 1 / -1; max-width: 66ch; }
/* Nivålistans stilar togs bort 2026-08-20 tillsammans med blocket.
     .niva-regel står kvar: räknesättet nedanför använder den för sina
     förklaringsrader. */
.sg-dash .niva-regel { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 68ch; }
.sg-dash .niva-regel + .niva-regel { margin-top: 10px; }
/* ── Så är siffrorna räknade ────────────────────────────── */
.sg-dash .raknat-tabell { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.sg-dash .raknat-tabell th, .sg-dash .raknat-tabell td {
    text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
  }
.sg-dash .raknat-tabell th { color: var(--muted); font-weight: 600; font-size: 12px; }
.sg-dash .raknat-tabell th:first-child, .sg-dash .raknat-tabell td:first-child { text-align: left; }
.sg-dash .raknat-tabell tr[data-utesluten="1"] td { color: var(--muted); }
.sg-dash .raknat-rull { overflow-x: auto; }
/* Kolumnrubriken "I kärnan" förutsätter att man vet vad kärnan är. Frågetecknet
     fäller ut definitionen på plats i stället för att skicka läsaren tillbaka
     till nivåavsnittet. */
.sg-dash .hjalp {
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
    width: 17px; height: 17px; padding: 0; margin-left: 5px;
    border: none; border-radius: var(--r-full); cursor: pointer;
    background: var(--surface-2); color: var(--muted);
    vertical-align: middle;
    transition: background var(--t), color var(--t);
  }
@media (hover: hover) {
.sg-dash .hjalp:hover { background: var(--ink); color: var(--bg); }
}
.sg-dash .hjalp[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.sg-dash .hjalp:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.sg-dash .hjalp-text[hidden] { display: none; }
.sg-dash .hjalp-text { margin-top: 14px; }
/* ── Sektioner ──────────────────────────────────────────── */
.sg-dash .sektion { margin-top: 60px; }
.sg-dash .sektion-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sg-dash h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; }
.sg-dash .sektion-hjalp { font-size: 13px; color: var(--muted); }
/* ── Terminskartan ──────────────────────────────────────── */
/* Kartan är hög. Låg detaljrutan kvar i botten fick man peka på en ruta högst
     upp utan att se vad man pekade på. Nu glider den till just under det block
     man är i. Skalet finns för att kartans innehåll ritas om, och utrymmet
     nedtill är reserverat så rutan aldrig lägger sig över det som följer. */
.sg-dash .karta-skal { position: relative; padding-bottom: 88px; }
.sg-dash .karta { margin-top: 22px; }
.sg-dash .karta-block { margin-bottom: 22px; }
.sg-dash .karta-rubrik { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.sg-dash .karta-namn { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.sg-dash .karta-siffra { font-size: 12px; color: var(--muted); }
/* Låst läge: statistiken saknas, listan finns kvar. */
.sg-dash .premium-last {
    background: var(--surface); border-radius: var(--r-sm);
    padding: 14px 16px; margin: 0 0 18px; font-size: 13.5px;
  }
.sg-dash .premium-last p { margin: 0; }
/* Förhandsvisning: vad terminen innehåller, inte innehållet. Sektioner som
     kräver den köpta listan döljs helt i stället för att stå tomma. */
body[data-premium="forhand"] .sg-dash .karta-detalj, body[data-premium="forhand"] .sg-dash .fall, body[data-premium="forhand"] .sg-dash #sek-statistik { display: none; }
/* Förhandsläget: den som öppnat en delad länk utan att äga terminen.
   Erbjudandet står först, uppräkningen av innehållet under. Tidigare mötte den
   besökaren en förklaring av sållningsregeln och en tom rubrik som hette
   Områden — rätt text för en ägare, fel för någon som undrar vad det här är. */
.sg-dash .forhand-cta {
  margin: 40px 0 8px; padding: 28px 30px;
  border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--surface);
}
.sg-dash .forhand-pris {
  margin: 10px 0 0; font-size: 14px; color: var(--muted);
}
.sg-dash .forhand-cta-rad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 20px;
}
.sg-dash .forhand-cta-knapp {
  font-size: 14px; font-weight: 700; text-decoration: none;
  padding: 12px 22px; border-radius: var(--r-full);
  background: var(--ink); color: var(--bg);
  transition: opacity var(--t);
}
@media (hover: hover) { .sg-dash .forhand-cta-knapp:hover { opacity: .84; } }
.sg-dash .forhand-cta-las {
  font-size: 14px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t);
}
@media (hover: hover) {
  .sg-dash .forhand-cta-las:hover { color: var(--ink); border-bottom-color: var(--ink); }
}
.sg-dash .forhand-cta-knapp:focus-visible, .sg-dash .forhand-cta-las:focus-visible {
  outline: 2.5px solid var(--ink); outline-offset: 3px;
}
/* Den låsta studieguiden.
 *
 * Tidigare låg terminens innehåll här suddat, med ett lås som svävade över.
 * Det var både rörigt och oärligt: suddningen satt i stilmallen medan
 * innehållet låg kvar i den fritt hämtbara filen. Posterna är borta ur datan
 * nu, och sidan visar det den ska visa — omfattningen. Ingen mask behövs för
 * något som inte skickas. */
.sg-dash .forhand-lista { margin-top: 52px; }

.sg-dash .forhand-ingress {
  margin: 6px 0 20px; font-size: 14px; color: var(--muted); max-width: 56ch;
}
.sg-dash .forhand-block-lista { margin: 0; padding: 0; list-style: none; }

.sg-dash .forhand-rubrik {
  margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
}
/* Fotnoten talar om progress som den här besökaren inte har. */
body[data-premium="forhand"] .sg-dash #fot-delning { display: none; }

.sg-dash .forhand-besked {
    background: var(--surface); border-radius: var(--r-sm);
    padding: 15px 17px; margin-bottom: 18px; font-size: 14px;
  }
.sg-dash .forhand-besked p { margin: 0; }
.sg-dash .forhand-block {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.sg-dash .forhand-block:last-child { border-bottom: none; }
.sg-dash .forhand-namn { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sg-dash .forhand-antal {
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-lugnt="1"] .sg-dash .karta-siffra { display: none; }
.sg-dash .celler { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-dash .cell {
    width: 22px; height: 22px; border-radius: 5px; padding: 0;
    border: 1px solid var(--hairline); background: var(--surface);
    cursor: pointer; transition: transform var(--t), background var(--t), border-color var(--t);
  }
@media (hover: hover) {
.sg-dash .cell:hover { transform: scale(1.25); border-color: var(--ink); z-index: 2; position: relative; }
}
.sg-dash .cell:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.sg-dash .cell:active { transform: scale(.92); }
.sg-dash .cell.raknad { animation: sgd-cell-puls .32s cubic-bezier(.2,.7,.2,1); }
@keyframes sgd-cell-puls {
    0% { transform: scale(1.25); }
    45% { transform: scale(1.5); }
    100% { transform: scale(1.25); }
  }
@media (prefers-reduced-motion: reduce) {
.sg-dash .cell, .sg-dash .cell:active { transition: none; }
@media (hover: hover) { .sg-dash .cell:hover { transition: none; } }
.sg-dash .cell.raknad { animation: none; }
}
/* Heatmap: en repetition per klick, mättnaden växer med antalet. Skalan
     mättas vid fem — därefter räknas klicken men rutan blir inte mörkare. */
.sg-dash .cell[data-rep="1"] { background: var(--niva1); border-color: transparent; }
.sg-dash .cell[data-rep="2"] { background: var(--niva2); border-color: transparent; }
.sg-dash .cell[data-rep="3"] { background: var(--niva3); border-color: transparent; }
.sg-dash .cell[data-rep="4"] { background: var(--niva4); border-color: transparent; }
.sg-dash .cell[data-rep="5"] { background: var(--niva5); border-color: transparent; }
/* Förfallen enligt repetitionsintervallet — ring runt rutan, inte ny färg. */
.sg-dash .karta-detalj {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 15px 18px; min-height: 64px; box-sizing: border-box;
    border-radius: var(--r-sm); background: var(--surface);
    display: flex; align-items: center;
    font-size: 14px; z-index: 4;
    /* Rutan svävar över kartan medan den glider. Utan detta fångar den klicken
       på rutorna under sig. Den är ren avläsning och behöver inga pekare. */
    pointer-events: none;
    transition: top .34s cubic-bezier(.22,.61,.36,1);
  }
/* Innehållet byts medan rutan glider. Utan den här korsningen hoppar texten
     till nästa diagnos innan rutan hunnit fram. */
.sg-dash .karta-detalj > * { animation: sgd-detalj-in .22s cubic-bezier(.2,.7,.2,1); }
@keyframes sgd-detalj-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
.sg-dash .karta-detalj { transition: none; }
.sg-dash .karta-detalj > * { animation: none; }
}
.sg-dash .karta-detalj .tom { color: var(--muted); }
.sg-dash .karta-detalj .meta { color: var(--muted); font-size: 13px; }
/* Rutan har fast höjd i vila men växer när fokusraden finns. Två rader
     räcker för att se vad posten gäller; resten står i områdeslistan. */
.sg-dash .karta-detalj .detalj-fokus {
    margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
body[data-lugnt="1"] .sg-dash .karta-detalj .frekvens { display: none; }
/* ── Hopfällbar sektion ─────────────────────────────────── */
.sg-dash .fall { margin-top: 52px; }
.sg-dash .fall-knapp {
    width: 100%; display: flex; align-items: baseline; gap: 12px;
    background: none; border: none; padding: 0 0 12px;
    border-bottom: 1px solid var(--hairline);
    font: inherit; color: inherit; cursor: pointer; text-align: left;
  }
.sg-dash .fall-knapp:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.sg-dash .fall-titel { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sg-dash .fall-antal { font-size: 13px; color: var(--muted); }
.sg-dash .fall-pil {
    margin-left: auto; color: var(--muted); font-size: 13px;
    transition: transform var(--t);
  }
.sg-dash .fall-knapp[aria-expanded="true"] .fall-pil { transform: rotate(180deg); }
.sg-dash .fall-innehall { display: none; padding-top: 18px; }
.sg-dash .fall-knapp[aria-expanded="true"] + .fall-innehall { display: block; }
.sg-dash .fot {
    margin-top: 76px; padding-top: 26px; border-top: 1px solid var(--hairline);
    font-size: 12.5px; color: var(--muted); line-height: 1.65;
  }
.sg-dash .fot p { margin: 0 0 10px; }
.sg-dash .fot a { color: var(--ink); }
/* ── Rörelse ────────────────────────────────────────────── */
@keyframes sgd-stig { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sg-dash header { animation: sgd-stig .5s cubic-bezier(.2,.7,.2,1) .04s both; }
.sg-dash .pastaende { animation: sgd-stig .55s cubic-bezier(.2,.7,.2,1) .14s both; }
.sg-dash .avslojas { opacity: 0; transform: translateY(16px); }
.sg-dash .avslojas.inne {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  }
@media (prefers-reduced-motion: reduce) {
.sg-dash * { animation: none !important; transition: none !important; }
.sg-dash .avslojas { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
.sg-dash .wrap { padding: 0 18px 90px; }
.sg-dash header { padding: 36px 0 6px; }
.sg-dash .pastaende { max-width: none; }
/* Namnet får hela bredden. Frekvens och knapp delar raden under, annars
       hamnar siffran mitt emot en rubrik som brutits på tre rader. */
.sg-dash .liggare-rad { grid-template-columns: 1fr auto; }
.sg-dash .liggare-namn { grid-column: 1 / -1; }
.sg-dash .liggare-andel { text-align: left; }
}
.sg-dash .ta-topp {display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 18px}
.sg-dash .ta-tal {border:1px solid var(--hairline, #e6e6e6);border-radius:12px;padding:12px 14px;
    font-size:12px;color:var(--dis, #888);line-height:1.4}
.sg-dash .ta-tal span {display:block;font-size:22px;font-weight:800;color:var(--ink, #0a0a0a);
    font-variant-numeric:tabular-nums;margin-bottom:2px}
.sg-dash .ta-rubrik {font-size:15px;font-weight:800;margin:20px 0 10px}
.sg-dash .ta-graf {border:1px solid var(--surface-2);border-radius:var(--r);
    padding:14px 14px 8px;overflow:hidden}
.sg-dash .ta-graf svg {width:100%;height:auto;display:block}
.sg-dash .ta-graf-not {font-size:12px;color:var(--muted);margin:2px 0 10px}
.sg-dash .ta-kort-rad {display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sg-dash .ta-kort {display:block;border:1px solid var(--hairline, #e6e6e6);border-radius:12px;
    padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .2s ease}
@media (hover: hover) {
.sg-dash .ta-kort:hover {border-color:var(--ink, #0a0a0a)}
}
.sg-dash .ta-kort-topp {display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sg-dash .ta-kort-termin {font-size:13px;font-weight:800}
.sg-dash .ta-kort-pct {font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
/* Andelen på en tenta med för få bedömda frågor. Talet står kvar, men i
     samma vikt som fottexten som säger vad det bygger på — annars läses tre
     rätt av tre som ett resultat i klass med sextio av sextiotvå. */
.sg-dash .ta-kort-pct-tunn {font-weight:600;color:var(--muted)}
.sg-dash .ta-stapel {display:flex;height:8px;border-radius:999px;overflow:hidden;margin:9px 0 7px;
    background:var(--hairline, #eee)}
.sg-dash .ta-stapel i {display:block;height:100%}
.sg-dash .ta-ratt {background:var(--klar, #DCFEBC)}
.sg-dash .ta-delvis {background:var(--pagang, #F4E3B2)}
.sg-dash .ta-fel {background:#EFC7BD}
.sg-dash .ta-kort-fot {font-size:11.5px;color:var(--dis, #888);line-height:1.45}
.sg-dash .analys-summering {font-size:14.5px;line-height:1.55;margin:0 0 14px}
.sg-dash .analys-tom {font-size:14px;color:var(--dis, #888);line-height:1.5}
.sg-dash .analys-lista {list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-dash .analys-rad {border:1px solid var(--hairline, #e6e6e6);border-radius:12px;padding:12px 14px}
.sg-dash .analys-rad-huvud {display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.sg-dash .analys-rad-block {font-size:12px;color:var(--dis, #888);white-space:nowrap}
.sg-dash .analys-rad-fot {display:flex;justify-content:space-between;align-items:center;gap:10px;
    margin-top:6px;font-size:12.5px;color:var(--dis, #888)}
/* Färgen måste sättas. Regeln ritade ramen i currentColor utan att bestämma
   vad den var, så länken ärvde webbläsarens standardfärger — blå obesökt och
   lila besökt. Två identiska knappar fick alltså olika färg beroende på vilka
   quiz man råkat öppna tidigare. */
.sg-dash .analys-trana {color:var(--ink);font-weight:700;text-decoration:none;
    border:1px solid currentColor;
    border-radius:999px;padding:3px 12px;transition:opacity .2s ease}
@media (hover: hover) {
.sg-dash .analys-trana:hover {opacity:.7}
}
.sg-dash .analys-metod {font-size:12px;color:var(--dis, #888);margin-top:12px;line-height:1.5}

/* ── Ämnesguiden ────────────────────────────────────────────── */
.sg-guide * { box-sizing: border-box; }
.sg-guide {
    margin: 0;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg); color: var(--ink);
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }
.sg-guide a { color: inherit; }
/* Sajtens avsändare, även här.
     Studieguiden och ämnesguiden är egna sidor och inte vyer i appen, och utan
     header läser de som en annan sajt: man har betalat för något som känns som
     att man lämnat Tentaguiden, fast man inte har gjort det. Hela navet går
     inte att låna hit — sökningen, språkstödet och inloggningsmenyn bor i
     app.js — men det som saknades var inte funktionerna utan avsändaren. */
.sg-guide .tg-nav {
    position: sticky; top: 0; z-index: 200;
    height: 60px; padding: 0 24px;
    background: var(--bg); border-bottom: 1px solid var(--hairline);
  }
.sg-guide .tg-nav-inner {
    max-width: 940px; height: 100%; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
  }
.sg-guide .tg-nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none;
    transition: color var(--t);
  }
@media (hover: hover) {
.sg-guide .tg-nav-logo:hover { color: var(--muted); }
}
.sg-guide .tg-nav-logo:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sg-guide .tg-nav-plus {
    margin-left: auto; font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--muted);
  }
.sg-guide .tg-nav-plus b { color: var(--ink); font-weight: 800; }
.sg-guide .wrap { max-width: 940px; margin: 0 auto; padding: 0 24px 120px; }
/* ── Prototypremsa ──────────────────────────────────────── */
.sg-guide .proto {
    background: var(--ink); color: var(--bg);
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    padding: 9px 24px; text-align: center;
  }
/* ── Rubrikblock ────────────────────────────────────────── */
.sg-guide header { padding: 64px 0 40px; }
.sg-guide .eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 18px;
  }
.sg-guide h1 {
    margin: 0; font-size: clamp(34px, 6vw, 52px); font-weight: 800;
    letter-spacing: -0.035em; line-height: 1.04;
  }
/* Samma ikon som ämnet har i terminsöversikten, så man ser att man kommit
     till rätt ställe. Den står över rubriken och inte bredvid: rubriken går
     över två rader och en ikon i marginalen hade hamnat mitt i ingenting. */
.sg-guide .rubrik-ikon {
    display: block; margin-bottom: 14px;
    color: var(--muted);
  }
.sg-guide .rubrik-ikon .tg-ikon { width: 34px; height: 34px; display: block; }
/* ── Sammanfattning ─────────────────────────────────────── */
.sg-guide .summering {
    margin-top: 40px; padding: 26px;
    background: var(--surface); border-radius: var(--r);
    display: grid; gap: 26px; grid-template-columns: 1fr auto;
    align-items: center;
  }
/* display: grid vinner annars över hidden-attributet. */
.sg-guide .summering[hidden] { display: none; }
.sg-guide .summering[data-vantar="1"] .sum-tal, .sg-guide .summering[data-vantar="1"] .sum-etikett, .sg-guide .summering[data-vantar="1"] .sum-matare, .sg-guide .summering[data-vantar="1"] .nollstall { display: none; }
.sg-guide .summering:not([data-vantar="1"]) .sum-skelett { display: none; }
.sg-guide .sum-tal { display: flex; align-items: baseline; gap: 10px; }
.sg-guide .sum-stor { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.sg-guide .sum-av { font-size: 15px; color: var(--muted); font-weight: 500; }
.sg-guide .sum-etikett { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.sg-guide .sum-matare {
    margin-top: 16px; height: 8px; border-radius: var(--r-full);
    background: var(--surface-2); overflow: hidden; display: flex;
  }
.sg-guide .sum-matare span { display: block; height: 100%; transition: width .5s cubic-bezier(.2,.7,.2,1); }
/* Samma skala som knapparna och bubblorna: genomgånget är den ljusare tonen,
     repeterat den mörkare. Gult betydde "pågår" i den gamla tvålägesmodellen
     och har ingen motsvarighet i stegen. */
.sg-guide .sum-kan { background: var(--steg0); }
.sg-guide .sum-repeterar { background: var(--steg2); }
.sg-guide .nollstall {
    background: none; border: 1px solid var(--hairline); color: var(--muted);
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 9px 15px; border-radius: var(--r-full); cursor: pointer;
    transition: color var(--t), border-color var(--t);
  }
@media (hover: hover) {
.sg-guide .nollstall:hover { color: var(--ink); border-color: var(--ink); }
}
/* ── Filter ─────────────────────────────────────────────── */
.sg-guide .filter {
    position: sticky; top: 0; z-index: 20;
    margin-top: 36px; padding: 14px 0;
    background: var(--bg);
    display: flex; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--hairline);
  }
.sg-guide .filter button {
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 9px 15px; border-radius: var(--r-full);
    background: var(--surface); color: var(--muted);
    border: none; cursor: pointer;
    transition: background var(--t), color var(--t);
  }
@media (hover: hover) {
.sg-guide .filter button:hover { color: var(--ink); }
}
.sg-guide .filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.sg-guide .filter button:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
/* ── Blockets påstående ─────────────────────────────────── */
/* Samma sats som terminsöversikten öppnar med, men för blocket. Nämnaren
     står i meningen. */
.sg-guide .blocksats {
    margin: 20px 0 0; max-width: 40ch;
    font-size: clamp(17px, 2vw, 21px); line-height: 1.45;
    letter-spacing: -0.015em; font-weight: 600;
  }
.sg-guide .blocksats b { font-weight: 800; }
.sg-guide .blockgolv {
    margin: 12px 0 0; max-width: 56ch;
    font-size: 14px; line-height: 1.6; color: var(--muted);
  }
/* ── Nivåsektioner ──────────────────────────────────────── */
.sg-guide .niva-sektion { margin-top: 52px; }
.sg-guide .niva-topp {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
  }
.sg-guide .niva-namn { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sg-guide .niva-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sg-guide .niva-forklaring {
    margin-top: 12px; font-size: 13.5px; line-height: 1.6;
    color: var(--muted); max-width: 68ch;
  }
.sg-guide .niva-tom { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 62ch; }
/* ── Kursens egen märkning ──────────────────────────────── */
.sg-guide .markning-kolumner {
    margin-top: 18px; display: grid; gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
.sg-guide .markning-rubrik {
    font-size: 11px; font-weight: 800; letter-spacing: .11em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
  }
.sg-guide .markning-lista { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.sg-guide .markning-lista li { margin-bottom: 7px; }
/* Kursens ämnesguide, renderad ur markdown. Läsbredd före full bredd: en
     löpande text över 940 pixlar tappar raden. */
.sg-guide .amnesguide-text { max-width: 62ch; font-size: 14.5px; line-height: 1.7; }
.sg-guide .amnesguide-text h3 {
    margin: 26px 0 8px; font-size: 15.5px; font-weight: 700;
    letter-spacing: -0.01em;
  }
.sg-guide .amnesguide-text h3:first-child { margin-top: 0; }
.sg-guide .amnesguide-text h4, .sg-guide .amnesguide-text h5 {
    margin: 18px 0 6px; font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  }
.sg-guide .amnesguide-text p { margin: 0 0 12px; }
.sg-guide .amnesguide-text ul, .sg-guide .amnesguide-text ol { margin: 0 0 12px; padding-left: 20px; }
.sg-guide .amnesguide-text li { margin-bottom: 5px; }
.sg-guide .amnesguide-text li > ul, .sg-guide .amnesguide-text li > ol { margin: 5px 0 0; }
.sg-guide .amnesguide-text strong { font-weight: 700; }

/* Lärandemålen och de praktiska färdigheterna är saker man kan bocka av, inte
   text att läsa. Punkten byts därför mot en ruta. Översikten och tentatipsen
   står kvar som löpande text; de är inget man blir klar med. */
.sg-guide .amnesguide-text li.mal-post { list-style: none; margin-left: -20px; margin-bottom: 1px; }
.sg-guide .mal-etikett {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 5px 8px 5px 6px; margin-left: -6px; border-radius: 8px;
  cursor: pointer; transition: background var(--t), color var(--t);
}
@media (hover: hover) { .sg-guide .mal-etikett:hover { background: var(--surface); } }
.sg-guide .mal-ruta {
  flex-shrink: 0; width: 17px; height: 17px; margin: 3px 0 0;
  accent-color: var(--steg2); cursor: pointer;
}
/* Avbockat tonas ned i stället för att strykas över. Målen är hela meningar,
   och en genomstruken mening går inte att läsa om när man vill kontrollera vad
   man kryssat i. */
.sg-guide .mal-ruta:checked + span { color: var(--muted); }
.sg-guide .mal-ruta:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
/* ── Diagnosrad ─────────────────────────────────────────── */
/* Varje diagnos är ett kort. Raderna avgränsades tidigare bara av en
     hårstrecksram nedtill, och när fokustexten kom till blev det omöjligt att
     se var en diagnos slutade och nästa började. */
.sg-guide .lista-kort { display: grid; gap: 8px; margin-top: 14px; }
.sg-guide .rad {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 10px 18px;
    padding: 16px 18px; border-radius: var(--r-sm);
    background: var(--bg); border: 1px solid var(--hairline);
    transition: background var(--t), border-color var(--t);
  }
@media (hover: hover) {
.sg-guide .rad:hover { background: var(--surface); border-color: var(--surface-2); }
}
.sg-guide .rad-mitt { flex: 1 1 250px; min-width: 0; }
.sg-guide .rad-namn { font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; }
.sg-guide .rad-under { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sg-guide .rad[data-lage="kan"] .rad-namn { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
/* Signaturen: en markering per tenta, ifylld där diagnosen förekom.
     Visar inte bara hur ofta utan när — en diagnos som återkommer varje
     termin ser annorlunda ut än en som kom tre gånger i en gammal tenta. */
.sg-guide .spar { display: flex; gap: 3px; align-items: flex-end; height: 26px; flex: 0 1 auto; }
.sg-guide .spar i {
    display: block; width: 5px; border-radius: 2px; flex: 0 1 5px; min-width: 2px;
    background: var(--surface-2); height: 7px;
    transition: height var(--t), background var(--t);
  }
.sg-guide .spar[data-tat="1"] { gap: 1px; }
.sg-guide .spar[data-tat="1"] i { width: 3px; flex-basis: 3px; border-radius: 1.5px; }
.sg-guide .spar i[data-traff="1"] { background: var(--ink); }
@media (hover: hover) {
.sg-guide .rad:hover .spar i[data-traff="1"] { background: var(--ink); }
}
/* Två knappar, för två olika saker. Den gamla enda knappen räknade
     repetitioner och lät andra klicket tyst betyda "kan", vilket gjorde det
     omöjligt att säga "jag har läst det här en gång" utan att också påstå att
     det sitter. */
/* Två knappar till vänster om diagnosen, inte till höger om den.
     De satt tidigare sist på raden som två avlånga piller med texten
     "EJ GENOMGÅNGEN" och "REPETERAT 0 GÅNGER". Två rader versal småtext bredvid
     varandra läses inte som knappar, och den viktigaste handlingen i hela vyn
     såg ut som en etikett. Nu är de kvadratiska, står först, och bär en ikon.
     Rubriken ersätter ikonen vid hovring, så att vad de gör går att få veta
     utan att klicka. */
.sg-guide .knappar { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.sg-guide .lagesknapp, .sg-guide .repknapp {
    position: relative; width: 56px; height: 56px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm); border: 1px solid var(--hairline);
    background: none; color: var(--muted); cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
  }
.sg-guide .knapp-ikon { display: flex; align-items: center; gap: 3px; transition: opacity var(--t); }
.sg-guide .knapp-ikon svg { display: block; }
/* Antalet repetitioner. Siffran bär information och står därför kvar. */
.sg-guide .knapp-antal { font: inherit; font-size: 12px; font-weight: 800; line-height: 1; }
.sg-guide .knapp-rubrik {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; text-align: center; padding: 0 4px;
    font: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; opacity: 0; transition: opacity var(--t);
    pointer-events: none;
  }
@media (hover: hover) {
.sg-guide .lagesknapp:hover, .sg-guide .repknapp:hover { border-color: currentColor; }
.sg-guide .lagesknapp:hover .knapp-ikon, .sg-guide .repknapp:hover .knapp-ikon { opacity: 0; }
.sg-guide .lagesknapp:hover .knapp-rubrik, .sg-guide .repknapp:hover .knapp-rubrik { opacity: 1; }
}
/* Tangentbordet ska se samma sak som pekaren. */
.sg-guide .lagesknapp:focus-visible .knapp-ikon, .sg-guide .repknapp:focus-visible .knapp-ikon { opacity: 0; }
.sg-guide .lagesknapp:focus-visible .knapp-rubrik, .sg-guide .repknapp:focus-visible .knapp-rubrik { opacity: 1; }
.sg-guide .lagesknapp:focus-visible, .sg-guide .repknapp:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
/* Samma skala på knappen som på bubblan: genomgången är svagt grön, varje
     repetition mörknar. Ett steg, inte två system. */
.sg-guide .lagesknapp[aria-pressed="true"], .sg-guide .repknapp[data-steg="0"] { background: var(--steg0); color: var(--steg0-ink); border-color: transparent; }
.sg-guide .repknapp[data-steg="1"] { background: var(--steg1); color: var(--steg1-ink); border-color: transparent; }
.sg-guide .repknapp[data-steg="2"] { background: var(--steg2); color: var(--steg2-ink); border-color: transparent; }
.sg-guide .repknapp[data-steg="3"] { background: var(--steg3); color: var(--steg3-ink); border-color: transparent; }
.sg-guide .lagesknapp.raknad, .sg-guide .repknapp.raknad { animation: sgg-knapp-puls .3s cubic-bezier(.2,.7,.2,1); }
@keyframes sgg-knapp-puls { 0% { transform: scale(1); } 42% { transform: scale(1.09); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.sg-guide .lagesknapp.raknad, .sg-guide .repknapp.raknad { animation: none; }
}
/* Fokustexten: vad man ska kunna om just den här diagnosen i det här
     området. Klipps till tre rader; hela texten fälls ut med ett klick. */
/* Egen rad över hela bredden. Låg den i mittkolumnen kläms den till en
     fjärdedel av raden, eftersom spåret, knapparna och länken tar resten, och
     varje text blev nio rader hög. */
.sg-guide .rad-fokus {
    flex-basis: 100%;
    margin-top: 2px; max-width: 84ch;
    font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty;
  }
.sg-guide .rad-fokus[data-klippt="1"] {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
.sg-guide .rad-mer {
    grid-column: 1 / -1; grid-row: 3; justify-self: start;
    margin-top: 3px; padding: 0;
    font: inherit; font-size: 12px; font-weight: 700;
    background: none; border: 0; color: var(--ink); cursor: pointer;
    border-bottom: 1px solid var(--hairline);
    transition: border-color var(--t);
  }
@media (hover: hover) {
.sg-guide .rad-mer:hover { border-bottom-color: var(--ink); }
}
.sg-guide .rad-mer:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.sg-guide .rad-lank {
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; white-space: nowrap;
    padding: 7px 12px; border-radius: var(--r-full);
    transition: color var(--t), background var(--t);
  }
@media (hover: hover) {
.sg-guide .rad-lank:hover { color: var(--ink); background: var(--surface-2); }
}
.sg-guide .aldrig { font-size: 12.5px; color: var(--muted); font-style: italic; }
/* Varje rad är ett eget grid, så sista kolumnen får fast bredd — annars
     hoppar lägesknappen i sidled mellan rader med olika lång länktext.
     Bredden måste rymma pillens padding, annars klipps bakgrunden. */
.sg-guide .rad-lank, .sg-guide .aldrig {
    display: flex; align-items: center; justify-content: flex-end;
    width: 124px; text-align: right;
  }
/* ── Tentakarta ─────────────────────────────────────────── */
.sg-guide .karta-sektion { margin-top: 40px; }
.sg-guide .karta-topp {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  }
.sg-guide .karta-rubrik { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sg-guide .karta-hjalp { font-size: 13px; color: var(--muted); }
.sg-guide .bubbelkarta {
    position: relative; width: 100%;
    background: var(--surface); border-radius: var(--r);
    overflow: hidden;
  }
.sg-guide .bubbla {
    position: absolute; border-radius: 50%; padding: 0; border: none;
    background: var(--surface-2); color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.1; overflow: hidden;
    transition: transform var(--t), background var(--t), box-shadow var(--t);
  }
@media (hover: hover) {
.sg-guide .bubbla:hover { transform: scale(1.06); z-index: 3; }
}
.sg-guide .bubbla:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; z-index: 3; }
.sg-guide .bubbla[data-niva="1"] { background: var(--steg0); color: var(--steg0-ink); }
.sg-guide .bubbla[data-niva="2"] { background: var(--steg1); color: var(--steg1-ink); }
.sg-guide .bubbla[data-niva="3"] { background: var(--steg2); color: var(--steg2-ink); }
.sg-guide .bubbla[data-niva="4"] { background: var(--steg3); color: var(--steg3-ink); }
.sg-guide .bubbla span {
    /* Utan maxbredd blir spannet bredare än cirkeln och texten klipps i
       båda kanterna i stället för att brytas. */
    max-width: 86%; padding: 0 2px;
    font-weight: 650; letter-spacing: -0.015em;
    overflow-wrap: anywhere; hyphens: auto;
  }
.sg-guide .karta-detalj {
    margin-top: 14px; min-height: 42px; font-size: 14px;
  }
.sg-guide .karta-detalj .tom { color: var(--muted); }
.sg-guide .karta-detalj .meta { color: var(--muted); font-size: 13px; }
.sg-guide .blocklins {
    margin: 14px 0 0; max-width: 74ch;
    font-size: 14.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty;
  }
.sg-guide .karta-detalj .detalj-fokus {
    margin-top: 6px; max-width: 74ch;
    font-size: 13px; line-height: 1.5; color: var(--ink); text-wrap: pretty;
  }
@media (prefers-reduced-motion: reduce) {
@media (hover: hover) { .sg-guide .bubbla:hover { transform: none; } }
}
/* ── Hopfällbar sektion ─────────────────────────────────── */
.sg-guide .fall { margin-top: 52px; }
.sg-guide .fall-knapp {
    width: 100%; display: flex; align-items: baseline; gap: 12px;
    background: none; border: none; padding: 0 0 12px;
    border-bottom: 1px solid var(--hairline);
    font: inherit; color: inherit; cursor: pointer; text-align: left;
  }
.sg-guide .fall-knapp:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.sg-guide .fall-titel { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sg-guide .fall-antal { font-size: 13px; color: var(--muted); }
.sg-guide .fall-pil {
    margin-left: auto; color: var(--muted); font-size: 13px;
    transition: transform var(--t);
  }
.sg-guide .fall-knapp[aria-expanded="true"] .fall-pil { transform: rotate(180deg); }
.sg-guide .fall-innehall { display: none; padding-top: 18px; }
.sg-guide .fall-knapp[aria-expanded="true"] + .fall-innehall { display: block; }
/* ── Låst grupp ─────────────────────────────────────────── */
.sg-guide .last {
    margin-top: 52px; padding: 34px 30px;
    border: 1px solid var(--hairline); border-radius: var(--r);
    text-align: center;
  }
.sg-guide .premium-brickan {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 13px; border-radius: var(--r-full);
    background: var(--surface); color: var(--ink); margin-bottom: 16px;
  }
.sg-guide .stjarna { width: 14px; height: 14px; color: var(--premium); flex-shrink: 0; }
.sg-guide .last-rubrik { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.sg-guide .last-text { margin: 10px auto 0; max-width: 46ch; font-size: 14px; color: var(--muted); line-height: 1.6; }
.sg-guide .last-lista {
    margin: 22px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  }
.sg-guide .last-lista li {
    font-size: 12.5px; padding: 6px 13px; border-radius: var(--r-full);
    background: var(--surface); color: var(--muted);
  }
.sg-guide .last-knapp {
    margin-top: 24px; display: inline-block;
    font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 13px 24px; border-radius: var(--r-full);
    background: var(--ink); color: var(--bg);
    border: none; cursor: pointer; font-family: inherit;
    transition: opacity var(--t);
  }
@media (hover: hover) {
.sg-guide .last-knapp:hover { opacity: .82; }
}
/* ── Fotnot ─────────────────────────────────────────────── */
.sg-guide .fot {
    margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--hairline);
    font-size: 12.5px; color: var(--muted); line-height: 1.65;
  }
.sg-guide .fot p { margin: 0 0 10px; }
/* ── Rörelse ────────────────────────────────────────────── */
.sg-guide .avslojas { opacity: 0; transform: translateY(16px); }
.sg-guide .avslojas.inne {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  }
@keyframes sgg-stig { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sg-guide header .eyebrow { animation: sgg-stig .5s cubic-bezier(.2,.7,.2,1) .05s both; }
.sg-guide header h1 { animation: sgg-stig .55s cubic-bezier(.2,.7,.2,1) .12s both; }
.sg-guide header .blocksats { animation: sgg-stig .55s cubic-bezier(.2,.7,.2,1) .2s both; }
.sg-guide header .blockgolv { animation: sgg-stig .55s cubic-bezier(.2,.7,.2,1) .26s both; }
.sg-guide .summering { animation: sgg-stig .6s cubic-bezier(.2,.7,.2,1) .34s both; }
@media (prefers-reduced-motion: reduce) {
.sg-guide * { animation: none !important; transition: none !important; }
.sg-guide .avslojas { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
.sg-guide .wrap { padding: 0 18px 90px; }
.sg-guide header { padding: 44px 0 30px; }
.sg-guide .summering { grid-template-columns: 1fr; gap: 20px; }
.sg-guide .blocksats { max-width: none; }
.sg-guide .rad { gap: 12px 14px; padding: 16px 14px; }
.sg-guide .rad-mitt { flex-basis: 100%; }
.sg-guide .spar { height: 20px; }
.sg-guide .rad-lank, .sg-guide .aldrig { width: auto; text-align: left; }
.sg-guide .filter { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.sg-guide .filter button { white-space: nowrap; flex: 0 0 auto; }
}

/* ── Klickytor på pekskärm ──────────────────────────────────────────────
   Samma genomgång som i index.html: allt som stod under 40 px i någon led
   på 360, 390 eller 430 px. Utseendet är oförändrat på exakta pekdon. */
@media (pointer: coarse) {
  .sg-dash .tillbaka, .sg-guide .tillbaka {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  /* Vippan ritar sitt eget mått; träffytan läggs runt om så att raden
     inte växer med den. */
  .sg-dash .vippa { position: relative; }
  .sg-dash .vippa::before {
    content: ''; position: absolute;
    top: -9px; right: -9px; bottom: -9px; left: -9px;
  }
  .sg-guide .nollstall { min-height: 42px; }
  .sg-guide .rad-lank { min-height: 38px; display: inline-flex; align-items: center; }
  .sg-guide .rad-mer { min-height: 36px; padding: 8px 0; }
}


/* ── SYSKONGUIDEN ───────────────────────────────────────────
   Termin 3 är två kurser med var sin studieguide. Länken står under rubriken
   och leder till den andra halvan. Kant i stället för skugga, som resten. */
.sg-syskon { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.sg-syskon[hidden] { display: none; }
.sg-syskon-lank {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--surface-2, #e6e6e6);
  background: var(--bg, #fff); color: var(--text, #0a0a0a);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: border-color .2s ease;
}
@media (hover: hover) { .sg-syskon-lank:hover { border-color: var(--text, #0a0a0a); } }
.sg-syskon-lank:focus-visible { outline: 2px solid var(--text, #0a0a0a); outline-offset: 2px; }

/* ── Önskemål och felrapporter ─────────────────────────────
   Rutan ligger i båda vyernas sidfot och modalen på body, utanför vyerna, så
   den behöver sina egna token i stället för att ärva .sg-dash/.sg-guide.
   Ingen skugga och ingen färgad list: djup markeras med hårlinjer, som i
   resten av guiden. */
.sgf-inbjudan {
  --hairline: var(--surface-2);
  --r-sm: 12px;
  --r-full: 999px;
  --t: .18s cubic-bezier(.2,.7,.2,1);
  margin-top: 64px; padding: 22px 24px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.sgf-inbjudan-rubrik {
  margin: 0 0 6px; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
}
.sgf-inbjudan-text {
  margin: 0; font-size: 13.5px; line-height: 1.6;
  color: var(--muted); max-width: 52ch;
}
.sgf-knapp {
  flex: none; font: inherit; font-size: 13px; font-weight: 700;
  padding: 11px 20px; border-radius: var(--r-full); cursor: pointer;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  transition: opacity var(--t);
}
.sgf-knapp:hover { opacity: .82; }
.sgf-knapp:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.sgf-overlay {
  --hairline: var(--surface-2);
  --r: 18px;
  --r-full: 999px;
  --t: .18s cubic-bezier(.2,.7,.2,1);
  /* Samma lager som sajtens övriga modaler (.feedback-overlay ligger på 3200).
     120 lade rutan under onboardingöverlägget på 3000, alltså under ett annat
     modalt lager i stället för över sidan. */
  position: fixed; inset: 0; z-index: 3200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 10, 10, 0.45);
  opacity: 0; transition: opacity var(--t);
  overflow-y: auto;
}
.sgf-overlay.sgf-inne { opacity: 1; }
.sgf-ruta {
  position: relative; width: 100%; max-width: 520px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 30px 30px 26px; margin: auto;
  transform: translateY(10px); transition: transform var(--t);
}
.sgf-overlay.sgf-inne .sgf-ruta { transform: none; }
.sgf-stang {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--muted); padding: 4px 8px;
  transition: color var(--t);
}
.sgf-stang:hover { color: var(--text); }
.sgf-titel { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sgf-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sgf-amnen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sgf-amne {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-full); cursor: pointer;
  background: none; border: 1px solid var(--hairline); color: var(--muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.sgf-amne:hover { color: var(--text); border-color: var(--text); }
.sgf-amne[aria-checked="true"] {
  background: var(--text); border-color: var(--text); color: var(--bg);
}
.sgf-amne-hjalp { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); }
.sgf-etikett {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.sgf-valfri { font-weight: 500; letter-spacing: 0; text-transform: none; }
.sgf-text, .sgf-falt {
  width: 100%; font: inherit; font-size: 14.5px; line-height: 1.6;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--text); resize: vertical;
}
.sgf-text:focus, .sgf-falt:focus { outline: none; border-color: var(--text); }
.sgf-raknare { min-height: 18px; margin: 6px 0 16px; font-size: 12px; color: var(--muted); }
.sgf-falt { margin-bottom: 4px; }
.sgf-fel { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: #b23c17; }
.sgf-fel:empty { margin: 0; }
.sgf-knappar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sgf-avbryt {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--r-full); cursor: pointer;
  background: none; border: 1px solid var(--hairline); color: var(--muted);
  transition: color var(--t), border-color var(--t);
}
.sgf-avbryt:hover { color: var(--text); border-color: var(--text); }
.sgf-skicka {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 11px 22px; border-radius: var(--r-full); cursor: pointer;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  transition: opacity var(--t);
}
.sgf-skicka:hover { opacity: .82; }
.sgf-skicka[disabled] { opacity: .5; cursor: default; }
.sgf-klart-text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; }
.sgf-klart { display: flex; flex-direction: column; align-items: flex-start; }

@media (max-width: 560px) {
  .sgf-inbjudan { flex-direction: column; align-items: flex-start; }
  .sgf-ruta { padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sgf-overlay, .sgf-ruta { transition: none; }
}