/*
 * Fysiklabbet — Laborans-tema (pappersljust katalog).
 *
 * Används av nya katalogsidan (index.html). Existerande simuleringar
 * fortsätter att använda styles.css (mörkt tema). När fas 2 startar och
 * navigationen ska spridas till simuleringssidor kan vi inkludera detta
 * stylesheet TILLSAMMANS med styles.css för att få Laborans-navbar ovan
 * den befintliga mörka simuleringsytan.
 *
 * Källa för designen: design/exempel/Fliksystem Laborans.html
 */

:root {
    /* Färgpalett — pappersljust katalog */
    --lab-bg:          #f3eee4;  /* pappersgul bakgrund */
    --lab-bg-raised:   #ebe4d4;  /* upphöjda paneler, fliksystem */
    --lab-bg-panel:    #ffffff;  /* vita kort, aktiva paneler */
    --lab-ink:         #0f1620;  /* primär text */
    --lab-ink-soft:    #3f4a5c;  /* sekundär text */
    --lab-ink-muted:   #69655c;  /* mono-etiketter, breadcrumb */
    --lab-line:        rgba(15, 22, 32, 0.12);  /* tunna linjer */
    --lab-line-strong: rgba(15, 22, 32, 0.28);  /* tydliga linjer, flikkanter */
    --lab-accent:      #c8324a;  /* primär accent (italic, aktiva markeringar) */
    --lab-accent-dark: #ae243a;  /* accent mot rosa botten (utvecklingsbannern) */
    --lab-accent-soft: rgba(200, 50, 74, 0.10);
    --lab-accent-2:    #1c3d6b;  /* djupblå sekundär */

    /* Klippluft UNDER block-formler (.katex-display). KaTeX ritar bråkens
       nämnare en bit NEDANFÖR .katex egen ruta, samtidigt som
       .katex-display klipper i höjdled (overflow: hidden, och
       overflow-y: hidden på de rutor som scrollar i sidled). Utan luft
       kapas nämnaren: "a" i g(x)/a fick underdelen avhuggen i
       sammanfattningsrutan i ma3c-3.1 (rapporterat 2026-08-29). Paddingen
       vidgar klippytan; marginalreglerna för .katex-display drar tillbaka
       lika mycket med calc(), så att luften under formeln blir densamma
       som förr — ändrar du den ena måste du ändra den andra. Uppåt behövs
       ingen luft: KaTeX reserverar alltid gott om plats ovanför bläcket.
       Kontrolleras av .claude/verify-formelklipp.js. */
    --katex-luft-botten: 0.5em;

    /* Teckensnitt */
    --lab-font-sans:    "DM Sans", "Söhne", -apple-system, system-ui, sans-serif;
    --lab-font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;
    --lab-font-display: "Instrument Serif", "Fraunces", "Times New Roman", serif;
}

/* Bas — endast aktivt när body har .laborans-klassen så att vi inte
   påverkar simuleringssidor som råkar inkludera denna fil. */

body.laborans {
    margin: 0;
    padding: 0;
    background: var(--lab-bg);
    color: var(--lab-ink);
    font-family: var(--lab-font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.laborans *,
body.laborans *::before,
body.laborans *::after {
    box-sizing: border-box;
}

/* Kapitelflikarna (.lab-tab-3) och avsnittsraderna (.lab-section-item) i
   katalogen är <a href="katalog.html?id=…"> sedan 2026-08-08 — riktiga
   länkar, så att sökrobotar (och "öppna i ny flik") når avsnitten. De var
   <button> förut och måste se ut EXAKT likadant, vilket kräver två saker
   av reglerna här:

   1. De ska ärva typsnittet precis som knappar gör. Utan det slår
      .lab-tab-3 { font-size: 14px } plötsligt igenom — den regeln har
      aldrig gällt för knapparna, eftersom `body.laborans button` väger
      tyngre — och flikraden krymper från 16 px till 14 px och byter
      radbrytning.
   2. De ska INTE fångas av color: inherit nedan. Den väger tyngre än
      .lab-tab-3/.lab-section-item och skulle annars slå ut både grundfärg,
      hover och .active. Därför undantas de i selektorn.

   Selektorerna skrivs `a.lab-tab-3` och INTE `body.laborans .lab-tab-3`.
   Vikten måste ligga på exakt samma nivå som knappregeln hade (en klass +
   ett element): tyngre än .lab-tab-3, men lättare än .lab-tab-3.active.
   Skrivs den tyngre nollställer `font: inherit` även font-weight: 600 på
   den aktiva fliken — den blir 10 px smalare, hela flikraden får plats på
   en rad i stället för två, och allt under hoppar upp 40 px. */
body.laborans button,
a.lab-tab-3,
a.lab-section-item {
    font: inherit;
}

/* .lab-btn undantas av samma skäl: en knapp ska se likadan ut oavsett om den
   är ett <button> eller ett <a>. Utan undantaget vann color: inherit över
   .lab-btn-primary { color: #fff }, så länk-knapparna ("Nivå 1 →" på
   startsidan) fick mörk bläcktext på den accentröda bottnen medan
   knapp-elementen i katalogen hade vit text — samma klass, två utseenden. */
/* .artikel-lank undantas eftersom en länk MITT I brödtexten måste synas som
   en länk. Regeln här är tyngre (0,4,2) än allt rimligt en artikelsida kan
   skriva, så utan undantaget blir en inlagd länk osynlig svart text — man
   ser aldrig att den går att klicka på. */
body.laborans a:not(.lab-tab-3):not(.lab-section-item):not(.lab-btn):not(.artikel-lank) {
    color: inherit;
    text-decoration: none;
}

/* Länk i brödtext (nyhetsartiklar, teori) — till exempel från en nyhet till
   det räkneexempel i katalogen som nyheten handlar om. Heldragen accentlinje,
   så att den skiljs från ordlistans .begrepp-lank, som är prickad och bara
   visar en förklaringsruta. */
.artikel-lank {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--lab-accent);
}

.artikel-lank:hover,
.artikel-lank:focus-visible {
    color: var(--lab-accent);
    background: var(--lab-accent-soft);
    outline: none;
}

/* Header-/navigationslänkar får ALDRIG vara understrukna — även på sidor
   utan body.laborans och utan Tailwind-preflight (t.ex. body.lab-sim-
   wrappers som fysik2-konisk-pendel.html). Utan denna reset visar
   webbläsaren sin standardunderstrykning i toppmenyn. */
.lab-topbar a,
.lab-header a,
.lab-nav a,
.lab-logo {
    text-decoration: none;
}

/* Topp-band (mono small caps) */

.lab-topbar {
    background: var(--lab-ink);
    color: var(--lab-bg);
    padding: 8px 0;
}

.lab-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
    display: flex;
    justify-content: space-between;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
}

/* Logotyp-rad (under topp-bandet) */

.lab-header {
    border-bottom: 2px solid var(--lab-ink);
}

.lab-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.lab-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--lab-ink);
    cursor: pointer;
}

.lab-logo-text {
    font-family: var(--lab-font-display);
    font-size: 26px;
    letter-spacing: -0.01em;
}

.lab-nav {
    display: flex;
    gap: 28px;
    font-size: 13px;
}

.lab-nav a {
    color: var(--lab-ink);
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
    white-space: nowrap; /* radbryt aldrig mitt i en länk ("Nationella prov") */
}

.lab-nav a:hover,
.lab-nav a.active {
    border-bottom-color: var(--lab-accent);
}

/* Dropdown i huvudnavigationen ("Ämnen") — öppnas på hover och
   tangentbordsfokus (:focus-within), ingen JS behövs. */

.lab-nav-dd {
    position: relative;
}

.lab-nav-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 4px 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--lab-ink);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.lab-nav-dd-caret {
    transition: transform 0.15s ease;
}

.lab-nav-dd:hover .lab-nav-dd-trigger,
.lab-nav-dd:focus-within .lab-nav-dd-trigger {
    border-bottom-color: var(--lab-accent);
}

.lab-nav-dd:hover .lab-nav-dd-caret,
.lab-nav-dd:focus-within .lab-nav-dd-caret {
    transform: rotate(180deg);
}

.lab-nav-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 190px;
    padding: 6px 0;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    box-shadow: 0 12px 28px rgba(15, 22, 32, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}

/* Osynlig brygga över glappet mellan trigger och meny så hovern hålls kvar */
.lab-nav-dd-menu::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    height: 9px;
}

.lab-nav-dd:hover .lab-nav-dd-menu,
.lab-nav-dd:focus-within .lab-nav-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Tvingad stängning efter att ett ämne valts.
   På touch fastnar :hover kvar på dropdownen efter ett tryck, och ämnes-
   länkarna pekar på samma sida (katalog.html#fy2) — ingen omladdning som
   annars stängt menyn. Resultatet blev att menyn låg kvar och skymde
   innehållet bakom. Klassen sätts vid klick på en ämneslänk och tas bort
   igen vid nästa tryck (eller när pekaren lämnar), så hover-beteendet på
   dator är oförändrat. Måste stå EFTER :hover/:focus-within-reglerna ovan
   — de har samma specificitet, så källordningen avgör. */
.lab-nav-dd.lab-nav-dd-stangd .lab-nav-dd-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px);
}

.lab-nav-dd.lab-nav-dd-stangd .lab-nav-dd-caret {
    transform: none;
}

.lab-nav-dd.lab-nav-dd-stangd .lab-nav-dd-trigger {
    border-bottom-color: transparent;
}

.lab-nav .lab-nav-dd-menu a {
    display: block;
    padding: 9px 16px;
    border-bottom: none;
    white-space: nowrap;
}

.lab-nav .lab-nav-dd-menu a:hover {
    background: var(--lab-bg-raised);
    border-bottom-color: transparent;
}

/* Undermenyer i Ämnes-dropdownen: Fysik / Matematik / Matematik – fortsättning
   som grupprubriker, med nivåvalen i en utfällbar undermeny till höger.
   Öppnas på hover och tangentbordsfokus, precis som huvuddropdownen —
   på touch öppnar ett tryck på grupprubriken (hover-emulering). På smal
   skärm släpps undermenyns min-width (se media-blocket längre ned) så
   att den ryms innanför skärmkanten. */

.lab-nav-dd-grupp {
    position: relative;
}

.lab-nav-dd-grupp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--lab-ink);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.lab-nav-dd-grupp-caret {
    flex-shrink: 0;
    opacity: 0.55;
}

.lab-nav-dd-grupp:hover > .lab-nav-dd-grupp-trigger,
.lab-nav-dd-grupp:focus-within > .lab-nav-dd-grupp-trigger {
    background: var(--lab-bg-raised);
}

.lab-nav-dd-undermeny {
    position: absolute;
    top: -7px; /* 6px meny-padding + 1px kant → första nivåraden linjerar med grupprubriken */
    left: 100%;
    min-width: 120px;
    padding: 6px 0;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    box-shadow: 0 12px 28px rgba(15, 22, 32, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Osynlig brygga över glappet grupprubrik → undermeny så hovern hålls kvar */
.lab-nav-dd-undermeny::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9px;
    width: 9px;
}

.lab-nav-dd-grupp:hover > .lab-nav-dd-undermeny,
.lab-nav-dd-grupp:focus-within > .lab-nav-dd-undermeny {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Breadcrumb (mono) */

.lab-breadcrumb {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 56px 4px;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.14em;
}

.lab-breadcrumb-sep {
    margin: 0 8px;
    color: var(--lab-ink-soft);
}

.lab-breadcrumb-current {
    color: var(--lab-ink);
}

.lab-breadcrumb-tail {
    color: var(--lab-accent);
}

/* Hero (display-rubrik) */

.lab-hero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 56px 24px;
}

.lab-hero-title {
    font-family: var(--lab-font-display);
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
}

.lab-hero-title em {
    font-style: italic;
    color: var(--lab-accent);
}

.lab-hero-lead {
    font-size: 15px;
    color: var(--lab-ink-soft);
    margin-top: 12px;
    max-width: 620px;
    line-height: 1.55;
}

/* Mono-etikett ("NIVÅ 1", "KAPITEL", "AVSNITT" etc.) */

.lab-mono-label {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Knappar */

/* Husets knapp — KANTIG (ingen border-radius). Gäller både <button> och
   <a class="lab-btn">; de undantas från color: inherit högst upp i filen och
   måste därför sätta sin egen textfärg och stryka understrykningen här. */
.lab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    color: var(--lab-ink);
    padding: 12px 22px;
    font-size: 14px;
    font-family: var(--lab-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.lab-btn:hover {
    background: var(--lab-bg-raised);
}

.lab-btn-primary {
    background: var(--lab-accent);
    color: #fff;
    border-color: var(--lab-accent);
    font-weight: 600;
}

.lab-btn-primary:hover {
    background: #b22a3f;
    border-color: #b22a3f;
}

.lab-btn-quiet {
    border-color: var(--lab-line);
    color: var(--lab-ink-soft);
    padding: 12px 16px;
    font-size: 13px;
}

/* Footer */

.lab-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 56px 48px;
    border-top: 1px solid var(--lab-line);
    color: var(--lab-ink-muted);
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

/* Responsiv padding på smala skärmar */

@media (max-width: 720px) {
    .lab-topbar-inner,
    .lab-header-inner,
    .lab-breadcrumb,
    .lab-hero,
    .lab-footer {
        padding-left: 24px;
        padding-right: 24px;
    }

    .lab-hero-title {
        font-size: 44px;
    }

    .lab-nav {
        flex-wrap: wrap;
        gap: 4px 18px;
        font-size: 12px;
    }

    .lab-topbar-inner {
        font-size: 11px;
        gap: 12px;
    }
}

/* Mobil: header staplas — loggan överst, nav-länkarna radbryts under.
   Utan detta radbryts .lab-nav aldrig (nowrap-länkar) och HELA sidan får
   horisontell overflow på smala skärmar. */
@media (max-width: 560px) {
    .lab-topbar-inner {
        letter-spacing: 0.12em;
    }

    .lab-topbar-inner span {
        white-space: normal;
    }

    .lab-header-inner {
        padding-top: 14px;
        padding-bottom: 12px;
        row-gap: 10px;
    }

    .lab-logo-text {
        font-size: 22px;
    }

    .lab-nav {
        width: 100%;
        gap: 2px 14px;
    }

    /* Dropdown-menyn är centrerad under sin trigger — nära vänsterkanten
       klipps den utanför skärmen. Vänsterjustera den på mobil. */
    .lab-nav-dd-menu {
        left: 0;
        transform: translateX(0) translateY(-4px);
    }

    .lab-nav-dd:hover .lab-nav-dd-menu,
    .lab-nav-dd:focus-within .lab-nav-dd-menu {
        transform: translateX(0) translateY(0);
    }

    .lab-nav-dd.lab-nav-dd-stangd .lab-nav-dd-menu {
        transform: translateX(0) translateY(-4px);
    }

    /* Undermenyerna fälls ut åt höger även på smal skärm — ett tryck på en
       grupprubrik öppnar dess nivåer (touch hover-emulerar). min-width
       släpps så att den smala nivålistan ryms innanför skärmkanten. */
    .lab-nav-dd-undermeny {
        min-width: 0;
    }
}

/* Riktigt smala skärmar (~320 px): låt undermenyn överlappa gruppradens
   högerkant något i stället för att klippas av skärmkanten. */
@media (max-width: 340px) {
    .lab-nav-dd-undermeny {
        left: calc(100% - 36px);
    }
}

/* =========================================================
   Sektioner och delade komponenter
   ========================================================= */

.lab-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lab-section {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 56px;
}

@media (max-width: 720px) {
    .lab-section { padding: 0 24px; }
}

/* Välkomst-hero (startsidan) */

.lab-welcome {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 56px 32px;
    width: 100%;
}

.lab-welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 22px;
    padding: 7px 14px 7px 12px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 999px;
    background: var(--lab-bg-panel);
    max-width: 100%;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.lab-welcome-eyebrow:hover {
    border-color: var(--lab-accent);
    box-shadow: 0 4px 16px rgba(15, 22, 32, 0.07);
    transform: translateY(-1px);
}
.lab-welcome-eyebrow .we-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lab-accent);
}
.lab-welcome-eyebrow .we-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--lab-accent);
    box-shadow: 0 0 0 0 var(--lab-accent);
    animation: we-pulse 2s ease-out infinite;
}
@keyframes we-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 50, 74, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(200, 50, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 50, 74, 0); }
}
.lab-welcome-eyebrow .we-title {
    font-size: 13px;
    color: var(--lab-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.lab-welcome-eyebrow:hover .we-title { color: var(--lab-ink); }
.lab-welcome-eyebrow .we-arrow {
    flex-shrink: 0;
    font-family: var(--lab-font-mono);
    color: var(--lab-ink-muted);
}
@media (prefers-reduced-motion: reduce) {
    .lab-welcome-eyebrow .we-dot { animation: none; }
}

.lab-welcome-title {
    font-family: var(--lab-font-display);
    font-size: 88px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}

.lab-welcome-title em {
    font-style: italic;
    color: var(--lab-accent);
}

.lab-welcome-lead {
    font-size: 18px;
    color: var(--lab-ink-soft);
    margin-top: 18px;
    max-width: 640px;
    line-height: 1.55;
}

/* Kursväljaren i heron: ett ämne per grupp — serifrubrik ovanpå en tunn
   linjal med ett kort accentstreck, nivåknapparna i rad under. Ersatte
   den platta raden med sju likadana knappar när Matematik nivå 1b kom
   till (2026-08-14) — ämnesrubriken bär ämnesnamnet så att knapparna
   kan vara korta ("Nivå 1b" i stället för "Matematik nivå 1b"). */
.lab-welcome-courses {
    margin-top: 30px;
    display: flex;
    gap: 20px 40px;
    flex-wrap: wrap;
}

.lab-course-group {
    min-width: 0;
}

.lab-course-subject {
    display: block;
    font-family: var(--lab-font-display);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--lab-ink);
    padding-bottom: 9px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--lab-line-strong);
    position: relative;
}

.lab-course-subject::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 2px;
    background: var(--lab-accent);
}

.lab-course-levels {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Flera nivårader i samma ämnesgrupp = olika spår (b-spåret, c-spåret …)
   som separeras i höjdled. */
.lab-course-levels + .lab-course-levels {
    margin-top: 8px;
}

.lab-course-levels .lab-btn {
    padding: 9px 16px;
    font-size: 13.5px;
}

/* Hero-logotypen till höger om texten. mix-blend-mode: multiply låter
   bildens egen pappersvita bakgrund smälta in i sidbakgrunden utan skarv. */
.lab-welcome-inner {
    display: flex;
    align-items: center;
    gap: 48px;
}
.lab-welcome-text { flex: 1 1 auto; min-width: 0; }
.lab-welcome-art {
    flex: 0 1 400px;
    min-width: 0;
}
.lab-welcome-art img,
.lab-welcome-art svg {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 960px) {
    .lab-welcome-art { display: none; }
}

@media (max-width: 720px) {
    .lab-welcome { padding: 40px 24px 24px; }
    .lab-welcome-title { font-size: 52px; }
}

/* Katalogsidans pageheader */

.lab-katalog-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 56px 24px;
    width: 100%;
}

.lab-katalog-title {
    font-family: var(--lab-font-display);
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
}

.lab-katalog-lead {
    font-size: 15px;
    color: var(--lab-ink-soft);
    margin-top: 12px;
    max-width: 620px;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .lab-katalog-header { padding: 8px 24px 20px; }
    .lab-katalog-title { font-size: 44px; }
}

/* Söksektion */

.lab-search {
    margin: 8px auto 0;
    position: relative;
}

/* Sökfältet placerat i lab-header-inner (mellan logo och nav).
   Tar inte centrerad margin — flexar mellan loggan och nav-länkarna. */
.lab-search--in-header {
    flex: 1 1 320px;
    max-width: 520px;
    margin: 0;
}

@media (max-width: 768px) {
    .lab-search--in-header {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
    }
}

.lab-search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    padding: 0 14px;
    transition: border-color 0.15s ease;
}

.lab-search-input-wrap:focus-within {
    border-color: var(--lab-accent);
}

.lab-search-icon {
    font-family: var(--lab-font-mono);
    color: var(--lab-ink-muted);
    font-size: 14px;
    margin-right: 10px;
}

.lab-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 0;
    font-size: 15px;
    font-family: var(--lab-font-sans);
    color: var(--lab-ink);
    outline: none;
}

.lab-search-input::placeholder {
    color: var(--lab-ink-muted);
    font-family: var(--lab-font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.lab-search-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--lab-ink-muted);
    padding: 4px 8px;
}

.lab-search-clear:hover { color: var(--lab-accent); }

.lab-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    max-height: 480px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}

.lab-search-results.visible { display: block; }

.lab-search-result {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lab-line);
    cursor: pointer;
    align-items: baseline;
    transition: background 0.1s ease;
}

.lab-search-result:last-child { border-bottom: none; }

.lab-search-result.active,
.lab-search-result:hover { background: var(--lab-bg-raised); }

.lab-search-result-icon { font-size: 22px; }

.lab-search-result-title {
    font-family: var(--lab-font-display);
    font-size: 18px;
    color: var(--lab-ink);
    font-weight: 500;
    letter-spacing: -0.005em;
}

.lab-search-result-kind {
    display: inline-block;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lab-ink-muted);
    background: var(--lab-bg);
    border: 1px solid var(--lab-line);
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.lab-search-result-desc {
    font-size: 13px;
    color: var(--lab-ink-soft);
    margin-top: 2px;
    line-height: 1.45;
}

.lab-search-result-meta {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.14em;
    text-align: right;
}

.lab-search-empty {
    padding: 16px 18px;
    color: var(--lab-ink-muted);
    font-size: 14px;
}

/* Senaste uppdateringar */

.lab-updates {
    margin: 56px auto 0;
}

.lab-updates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lab-line-strong);
    margin-bottom: 0;
}

.lab-updates-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lab-updates-nav {
    display: flex;
    gap: 6px;
}

.lab-updates-arrow {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lab-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--lab-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, opacity 0.15s ease;
}

.lab-updates-arrow:hover:not(:disabled) {
    background: var(--lab-ink);
    color: var(--lab-bg);
    border-color: var(--lab-ink);
}

.lab-updates-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Enradig "karusell": nyheterna ligger på EN rad och bläddras i sidled
   med pilarna. Scrollbaren döljs; pilarna styr bläddringen. */
.lab-updates-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* äldre Edge */
    border-bottom: 1px solid var(--lab-line);
}

.lab-updates-viewport::-webkit-scrollbar { display: none; }

.lab-updates-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.lab-update-item {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 18px 22px 18px 0;
    border-right: 1px solid var(--lab-line);
}

/* Items efter första: lägg på vänster-padding så texten andas från
   den vertikala avskiljarlinjen. Första item:n alignerar då fortfarande
   med rubriken "SENASTE UPPDATERINGAR" ovanför. */
.lab-update-item + .lab-update-item {
    padding-left: 22px;
}

.lab-update-item:last-child { border-right: none; }

.lab-update-item time {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.14em;
}

.lab-update-item h3 {
    font-family: var(--lab-font-display);
    font-size: 18px;
    font-weight: 500;
    margin: 6px 0 4px;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.lab-update-item h3 a {
    color: var(--lab-ink);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.lab-update-item h3 a:hover { border-bottom-color: var(--lab-accent); }

.lab-update-item p {
    font-size: 13px;
    color: var(--lab-ink-soft);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 980px) {
    .lab-update-item { flex-basis: 50%; }
}

@media (max-width: 560px) {
    .lab-update-item { flex-basis: 100%; }
}

/* Katalog-fliksystem (4 nivåer) */

.lab-catalog {
    margin: 24px auto 80px;
}

.lab-tabs-1 {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: -1px;
    position: relative;
    z-index: 4;
}

.lab-tab-1 {
    background: var(--lab-bg-raised);
    color: var(--lab-ink-soft);
    border: 1px solid var(--lab-line-strong);
    padding: 14px 28px;
    font-size: 15px;
    font-family: var(--lab-font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    position: relative;
    top: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lab-tab-1.active {
    background: var(--lab-bg-panel);
    color: var(--lab-ink);
    border-bottom-color: var(--lab-bg-panel);
}

.lab-tab-1-num {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.14em;
}

.lab-tabs-1-tail {
    flex: 1;
    border-bottom: 1px solid var(--lab-line-strong);
    margin-bottom: 0;
}

.lab-level-2 {
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line);
    padding: 22px 28px 0;
    position: relative;
    z-index: 3;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 1px 2px rgba(15, 22, 32, 0.03);
}

.lab-tabs-2 {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lab-tab-2 {
    background: transparent;
    color: var(--lab-ink-soft);
    border: 1px solid var(--lab-line);
    padding: 9px 20px;
    font-size: 14px;
    font-family: var(--lab-font-sans);
    cursor: pointer;
    border-radius: 999px;
    letter-spacing: -0.005em;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.lab-tab-2:hover {
    background: var(--lab-bg);
    color: var(--lab-ink);
    border-color: var(--lab-line-strong);
}

.lab-tab-2.active {
    background: var(--lab-ink);
    color: var(--lab-bg-panel);
    border-color: var(--lab-ink);
    font-weight: 600;
}

.lab-level-3 {
    background: var(--lab-bg);
    padding: 22px 28px 0;
    border: 1px solid var(--lab-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 22, 32, 0.03);
}

/* "Starta" — genväg högst upp på kursöversikten (visas bara när inget
   kapitel är valt) som tar eleven raka vägen in i första kapitlet. Själva
   knappen är husets vanliga .lab-btn .lab-btn-primary (kantig, accentröd) —
   här sätts bara raden den ligger på. */
.lab-start-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 22px;
}

/* På smal skärm hamnar mono-etiketten på egen rad direkt ovanför
   KAPITEL-etiketten — två mono-rader på raken blir rörigt. Knappen ensam
   räcker; kapitellistan står ändå direkt under. */
@media (max-width: 600px) {
    .lab-start-row .lab-mono-label { display: none; }
    .lab-start-row { margin-bottom: 18px; }
}

.lab-tabs-3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0;
    row-gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--lab-line);
}

/* Kapitelflikarna är <a href="katalog.html?id=…"> — riktiga länkar, så att
   sökrobotar (och "öppna i ny flik") når avsnitten. De ska se ut exakt som
   knapparna de ersatte: ingen understrykning, ingen länkfärg. */
.lab-tab-3 {
    background: transparent;
    text-decoration: none;
    color: var(--lab-ink-soft);
    border: none;
    padding: 4px 14px;
    font-size: 14px;
    font-family: var(--lab-font-sans);
    cursor: pointer;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
    transition: color 0.15s ease;
    line-height: 1.5;
}

.lab-tab-3:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 30%;
    bottom: 30%;
    width: 1px;
    background: var(--lab-line);
    pointer-events: none;
}

.lab-tab-3:hover { color: var(--lab-ink); }

.lab-tab-3.active {
    color: var(--lab-accent);
    font-weight: 600;
}

.lab-tab-3-num {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
}

.lab-tab-3.active .lab-tab-3-num { color: var(--lab-accent); }

.lab-level-4 {
    display: grid;
    /* minmax(0, 1fr) i stället för 1fr (= minmax(auto, 1fr)): utan detta kan
       ett brett innehåll i avsnittsspalten (t.ex. en lång displayformel som
       inte bryts) tvinga spalten bredare än viewporten. På mobil delar
       avsnittslistan (aside) samma spalt → listan sträcks ut och sidan får
       en horisontell scroll. minmax(0, …) låter i stället det breda
       innehållet spilla/scrolla inuti sin egen ruta. */
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    min-height: 460px;
}

@media (max-width: 820px) {
    .lab-level-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Kursintro: ersätter normal 2-kolumns-layout med en full-bredd vy som
   visas när course är vald men inget chapter ännu. */
.lab-level-4-intro {
    grid-template-columns: 1fr;
    min-height: 0;
}

.lab-course-intro {
    padding: 32px 36px 40px;
}

@media (max-width: 540px) {
    .lab-course-intro { padding: 24px 18px 28px; }
}

.lab-course-intro-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lab-line);
    margin-bottom: 28px;
}

.lab-course-intro-title {
    font-family: var(--lab-font-display);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--lab-ink);
    margin: 0 0 12px;
}

.lab-course-intro-tagline {
    font-family: var(--lab-font-display);
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--lab-ink-soft);
    margin: 0 0 24px;
    line-height: 1.35;
}

.lab-course-intro-text {
    color: var(--lab-ink-soft);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: 68ch;
}

.lab-course-intro-bullets {
    list-style: none;
    padding: 0;
    margin: 18px 0 28px;
    display: grid;
    gap: 8px;
}

.lab-course-intro-bullets li {
    position: relative;
    padding-left: 22px;
    color: var(--lab-ink);
    font-size: 15px;
    line-height: 1.5;
    max-width: 68ch;
}

.lab-course-intro-bullets li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--lab-accent);
    font-family: var(--lab-font-mono);
}

.lab-course-intro-chapters {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--lab-line);
}

.lab-course-chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.lab-course-chapter-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    padding: 16px 18px 14px;
    background: var(--lab-bg);
    border: 1px solid var(--lab-line);
    color: var(--lab-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}

.lab-course-chapter-card:hover {
    border-color: var(--lab-ink);
    transform: translateY(-1px);
}

.lab-course-chapter-num {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--lab-ink-muted);
}

.lab-course-chapter-card:hover .lab-course-chapter-num {
    color: var(--lab-accent);
}

.lab-course-chapter-title {
    font-family: var(--lab-font-display);
    font-size: 19px;
    line-height: 1.2;
    color: var(--lab-ink);
}

.lab-course-chapter-meta {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--lab-ink-muted);
    align-self: end;
    padding-top: 8px;
}

.lab-sections-aside {
    border-right: 1px solid var(--lab-line-strong);
    padding: 24px 0;
    min-width: 0;
}

@media (max-width: 820px) {
    .lab-sections-aside {
        border-right: none;
        border-bottom: 1px solid var(--lab-line-strong);
    }
}

/* Avsnittsraderna är <a href="katalog.html?id=…"> av samma skäl som
   .lab-tab-3 ovan — och ska likaså se ut precis som knapparna gjorde. */
.lab-section-item {
    width: 100%;
    min-width: 0;
    text-align: left;
    background: transparent;
    text-decoration: none;
    color: var(--lab-ink);
    border: none;
    border-top: 1px solid var(--lab-line);
    padding: 14px 18px 14px 4px;
    cursor: pointer;
    display: grid;
    /* Titelspalten som minmax(0, 1fr) så en lång avsnittstitel wrappar i
       stället för att tvinga knappen (och hela listan) bredare än scenen. */
    grid-template-columns: 48px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: baseline;
}

.lab-section-item.active {
    background: var(--lab-ink);
    color: var(--lab-bg);
}

.lab-section-item-num {
    font-family: var(--lab-font-mono);
    font-size: 13px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.04em;
}

.lab-section-item.active .lab-section-item-num { color: var(--lab-accent); }

.lab-section-item-title { font-size: 14px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.lab-section-item.active .lab-section-item-title { font-weight: 600; }

.lab-section-item-arrow {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    color: var(--lab-ink-muted);
}

/* Fotnot under avsnittslistan: * efter numret = fördjupningsavsnitt */
.lab-sections-fotnot {
    margin-top: 10px;
    padding-left: 4px;
    font-family: var(--lab-font-mono);
    font-size: 12px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.02em;
}

.lab-section-item.active .lab-section-item-arrow { color: var(--lab-accent); }

.lab-sections-aside-foot { border-top: 1px solid var(--lab-line); }

.lab-section-content {
    padding: 32px 36px 36px;
    min-width: 0;
}

@media (max-width: 540px) {
    .lab-section-content { padding: 24px 18px; }
}

.lab-section-content-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 16px;
}

.lab-section-title {
    font-family: var(--lab-font-display);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 4px 0 8px;
}

.lab-section-title-num {
    color: var(--lab-accent);
    font-style: italic;
    margin-right: 10px;
}

@media (max-width: 540px) {
    .lab-section-title { font-size: 38px; }
}

.lab-section-lead {
    font-size: 16px;
    color: var(--lab-ink-soft);
    line-height: 1.6;
    margin: 12px 0 28px;
    max-width: 560px;
}

.lab-section-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

@media (max-width: 720px) {
    .lab-section-cards { grid-template-columns: 1fr; }
}

.lab-card {
    border: 1px solid var(--lab-line-strong);
    padding: 16px;
    background: var(--lab-bg-raised);
    text-align: left;
    color: inherit;
    display: block;
}

button.lab-card { font: inherit; cursor: pointer; }

.lab-card-clickable {
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lab-card-clickable:hover {
    background: var(--lab-bg-panel);
    border-color: var(--lab-ink);
}

.lab-card-clickable:active { transform: translateY(1px); }

.lab-card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

button.lab-card-disabled { pointer-events: none; }

/* Aktiv flik — Teori när man är på teori-vyn */
.lab-card-active {
    background: var(--lab-ink);
    color: var(--lab-bg);
    border-color: var(--lab-ink);
    cursor: default;
}

.lab-card-active .lab-card-tag {
    color: rgba(243, 238, 228, 0.55);
}

.lab-card-active .lab-card-meta {
    color: rgba(243, 238, 228, 0.7);
}

/* Smal navigeringsrad mellan flikkort och teorin */
.lab-teori-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lab-line);
}

/* Bionisk läsning — fetmarkerad ordbörjan i teoritexten.
   Spannen finns alltid i DOM:en; .bionic-on tänder fetstilen. */
.lab-bionic { font-weight: inherit; }
.bionic-on .lab-bionic { font-weight: 700; }

/* Egen rad för bionic-toggeln: under avskiljarlinjen (lab-teori-nav har
   border-bottom), ovanför teorirubriken. Negativ topp-marginal drar upp
   den nära linjen. */
.lab-bionic-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: -8px 0 14px;
}

/* Teorins första element (oftast rubriken) ska inte ha någon extra
   topp-marginal — annars blir luckan ner från bionic-toggeln för stor. */
.lab-article-body-inline > :first-child { margin-top: 0; }

/* Toggle-knapp (switch) för bionisk läsning */
.lab-bionic-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    border-radius: 999px;
    padding: 5px 13px 5px 7px;
    cursor: pointer;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--lab-ink-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lab-bionic-toggle b { font-weight: 700; color: inherit; }
.lab-bionic-toggle .lab-bionic-knob {
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: var(--lab-line-strong);
    position: relative;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}
.lab-bionic-toggle .lab-bionic-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lab-bg-panel);
    transition: transform 0.15s ease;
}
.lab-bionic-toggle:hover { color: var(--lab-ink); }
.lab-bionic-toggle.is-on { color: var(--lab-ink); border-color: var(--lab-ink); }
.lab-bionic-toggle.is-on .lab-bionic-knob { background: var(--lab-accent); }
.lab-bionic-toggle.is-on .lab-bionic-knob::after { transform: translateX(14px); }

/* Dyslexivänligt typsnitt (OpenDyslexic) på teoritexten. KaTeX-elementen
   har egna font-family-deklarationer och ärver därför INTE detta — formler
   och matematik ser likadana ut. Rubriker (h2/h3) har eget display-typsnitt
   och måste därför skrivas över explicit. */
.lab-article-body-inline.dyslexia-on,
.lab-article-body-inline.dyslexia-on h1,
.lab-article-body-inline.dyslexia-on h2,
.lab-article-body-inline.dyslexia-on h3,
.lab-article-body-inline.dyslexia-on h4 {
    font-family: 'OpenDyslexic', 'Poppins', system-ui, sans-serif;
}
.lab-article-body-inline.dyslexia-on { letter-spacing: 0.01em; }

/* Toggle-etikett i OpenDyslexic som liten förhandsvisning av typsnittet */
.lab-dys-label { font-family: 'OpenDyslexic', 'Poppins', sans-serif; }

.lab-card-tag {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    color: var(--lab-ink-muted);
    letter-spacing: 0.14em;
    margin-bottom: 10px;
}

.lab-card-title {
    font-family: var(--lab-font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.lab-card-meta {
    font-size: 13px;
    color: var(--lab-ink-soft);
}

.lab-section-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lab-section-actions-spacer { flex: 1; }

/* Teori-läget inom katalogen */
.lab-teori-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lab-line);
}

/* Inline-variant — smalare än fristående avsnittssidan eftersom sidopanelen
   redan tar plats. Lite stramare typografi. */
.lab-article-body-inline {
    font-size: 16px;
    line-height: 1.65;
    max-width: 680px;
}

.lab-article-body-inline h2 {
    font-family: var(--lab-font-display);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    margin: 32px 0 14px;
}

.lab-article-body-inline h3 {
    font-family: var(--lab-font-display);
    font-weight: 500;
    font-size: 20px;
    margin: 24px 0 10px;
}

.lab-article-body-inline p { margin: 0 0 16px; }
.lab-article-body-inline ul,
.lab-article-body-inline ol { margin: 0 0 16px; padding-left: 24px; }
.lab-article-body-inline li { margin-bottom: 4px; }
.lab-article-body-inline strong { font-weight: 600; }
.lab-article-body-inline em { font-style: italic; }
.lab-article-body-inline a {
    color: var(--lab-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tabeller i teori-text — pappersgul ton, vitt reserveras för exempel */
.lab-article-body table,
.lab-article-body-inline table {
    border-collapse: collapse;
    margin: 18px 0 24px;
    width: auto;
    min-width: 60%;
    background: var(--lab-bg-raised);
    border: 1px solid var(--lab-line-strong);
    font-size: 0.95em;
}

.lab-article-body th,
.lab-article-body td,
.lab-article-body-inline th,
.lab-article-body-inline td {
    border: 1px solid var(--lab-line);
    padding: 8px 14px;
    text-align: left;
    vertical-align: top;
}

.lab-article-body th,
.lab-article-body-inline th {
    background: #ddd2bd;
    font-weight: 600;
    border-bottom: 1px solid var(--lab-line-strong);
}

/* Tabeller inuti blockrutor — låt bakgrundsfärgen från rutan skina igenom */
.lab-block table {
    background: transparent;
    margin: 14px 0;
}

.lab-block th {
    background: rgba(15, 22, 32, 0.07);
}

/* ── Breda tabeller: scrolla i sidled inuti en egen ruta ────────────────
   En värdetabell eller ett teckenschema kan ha 6–8 kolumner, och KaTeX-
   celler ($x$, $f'(x)$) bryter aldrig rad. På mobil blir tabellen då
   bredare än textspalten — och eftersom .lab-article-body/.lab-block har
   overflow-x: hidden KLIPPTES de yttre kolumnerna bort helt (7-kolumners-
   tabellen i fy1-9.3 visade två kolumner på en 390 px-skärm; resten gick
   inte att nå). Renderarna i katalog.html/avsnitt.html/np.html lindar
   därför varje markdown-tabell i .lab-tabell, som scrollar i sig själv i
   stället för att klippas — samma lösning som .katex-display redan
   använder för breda displayformler. Sidan får aldrig vågrät scroll. */
/* position: relative är inte kosmetik: KaTeX lägger en dold .katex-mathml
   med position: absolute i varje formelcell, och en absolut positionerad
   ättling klipps bara av en scroll-ruta som själv är positionerad. Utan
   detta rymde spannen ut ur rutan och gav hela sidan vågrät skroll på en
   telefon (76 px i fy2-1.2, 2026-09-17). */
.lab-tabell {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    margin: 18px 0 24px;
}

.lab-block .lab-tabell {
    margin: 14px 0;
}

/* Marginalen hör hemma på wrappern — ligger den kvar på tabellen också
   dubbleras avståndet till omgivande text. Tabellen får däremot vara
   bredare än rutan; det är hela poängen med att rutan scrollar. */
.lab-tabell > table {
    margin: 0;
    max-width: none;
}

/* Mobil: tätare celler, så att fler tabeller ryms helt utan att behöva
   scrollas — och en smal, synlig scrollbar under dem som ändå måste. */
@media (max-width: 560px) {
    .lab-article-body th,
    .lab-article-body td,
    .lab-article-body-inline th,
    .lab-article-body-inline td {
        padding: 6px 9px;
    }

    .lab-article-body table,
    .lab-article-body-inline table {
        font-size: 0.88em;
        min-width: 0;
    }

    .lab-tabell {
        margin: 14px 0 18px;
        padding-bottom: 2px;
    }

    /* I en blockruta får scroll-rutan gå ända ut i rutans kant (rutans
       vågräta padding blir scroll-rutans egen padding i stället). Det ger
       tabellen ~20 % mer bredd på en telefon, och den klipps synligt mot
       rutans ram — vilket i sig visar att den fortsätter åt höger. */
    .lab-block .lab-tabell {
        margin-left: -22px;
        margin-right: -22px;
        padding-left: 22px;
        padding-right: 22px;
        /* max-width: 100% ovan skulle annars äta upp de negativa
           marginalerna och rutan bli lika smal som förut. */
        max-width: none;
    }

    .lab-tabell::-webkit-scrollbar {
        height: 5px;
    }

    .lab-tabell::-webkit-scrollbar-thumb {
        background: rgba(15, 22, 32, 0.28);
        border-radius: 3px;
    }
}

/* Matematik-placeholder */

.lab-placeholder {
    text-align: center;
    padding: 80px 24px;
    color: var(--lab-ink-soft);
}

.lab-placeholder-title {
    font-family: var(--lab-font-display);
    font-size: 32px;
    font-weight: 400;
    font-style: italic;
    color: var(--lab-ink);
    margin-bottom: 12px;
}

.lab-placeholder-text {
    font-size: 15px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}

/* ===========================================================
   Avsnittssida (avsnitt.html) — teorigenomgång
   =========================================================== */

.lab-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 56px 80px;
}

.lab-article-meta {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--lab-ink-muted);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.lab-article-meta a {
    color: var(--lab-accent);
}

.lab-article-meta a:hover {
    text-decoration: underline;
}

.lab-article-title {
    font-family: var(--lab-font-display);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.lab-article-title-num {
    display: inline-block;
    font-family: var(--lab-font-mono);
    font-size: 16px;
    letter-spacing: 0.14em;
    color: var(--lab-ink-muted);
    margin-right: 14px;
    vertical-align: middle;
}

.lab-article-sub {
    font-family: var(--lab-font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--lab-ink-soft);
    margin: 0 0 28px;
}

.lab-article-sim {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border: 1px solid var(--lab-line-strong);
    background: var(--lab-bg-panel);
    margin-bottom: 36px;
}

.lab-article-sim-label {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--lab-ink-muted);
    text-transform: uppercase;
}

.lab-article-sim-spacer { flex: 1; }

.lab-article-sim a {
    display: inline-block;
    padding: 8px 18px;
    background: var(--lab-ink);
    color: var(--lab-bg);
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lab-article-sim a:hover {
    background: var(--lab-accent);
}

.lab-article-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--lab-ink);
}

.lab-article-body p {
    margin: 0 0 18px;
}

.lab-article-body h2 {
    font-family: var(--lab-font-display);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.01em;
    margin: 40px 0 16px;
}

.lab-article-body h3 {
    font-family: var(--lab-font-display);
    font-weight: 500;
    font-size: 22px;
    margin: 28px 0 10px;
}

.lab-article-body strong { font-weight: 600; }
.lab-article-body em { font-style: italic; }

.lab-article-body ul,
.lab-article-body ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.lab-article-body li { margin-bottom: 6px; }

.lab-article-body a {
    color: var(--lab-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Innehållsblock — färgade rutor som matchar PDF-genomgångarna */

.lab-block {
    margin: 22px 0;
    padding: 18px 22px;
    border-radius: 4px;
    border: 1px solid;
}

/* Direktlänk till en enskild ruta (katalog.html?id=…&block=…): kort
   markering av rutan man landade i, så att det syns var på sidan man
   hamnade. Tonar bort av sig själv — ingen bestående färgändring. */
.lab-block.block-mal,
details.lab-forklaring.block-mal,
.lab-video.block-mal {
    animation: block-mal-puls 2.6s ease-out 1;
}

@keyframes block-mal-puls {
    0%, 55% { box-shadow: 0 0 0 4px var(--lab-accent-soft); }
    100%    { box-shadow: 0 0 0 4px rgba(200, 50, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lab-block.block-mal,
    .lab-video.block-mal { animation: none; }
}

/* KaTeX behåller ALLTID sitt eget skiftläge, även inuti versalsatta
   rubriker (.lab-block-title, härledningarnas summary, etiketter i
   visualiseringarna). En matematisk beteckning betyder olika saker i
   gemen och versal: f(x) versaliserat blir F(X), alltså den primitiva
   funktionen. Se "Funktionsnamn och variabler ..." i CLAUDE.md.
   RÖR INTE regeln — utan den blir varje formel i en rubrik fel. */
.katex { text-transform: none; }

/* KaTeX i en versalsatt rubrik (.lab-block-title, härledningarnas och
   förklaringarnas summary) sätts STÖRRE än rubrikens teckenstorlek.
   Rubriken är 11 px monospace i vikt 600 med versaler, och KaTeX ärver
   bara 11,55 px i normal vikt: mot de tunga versalerna blev "v_y = 0" en
   liten och tunn formel (påpekat 2026-09-22). Vid 1,4 em blir siffrornas
   och parentesernas höjd densamma som versalernas kaphöjd, så formeln
   läses som en del av rubriken. Rubrikens letter-spacing ska inte
   sprida isär formelns tecken. Se "Formler i rubriker" i CLAUDE.md.
   Selektorn med .lab-article-body finns för specificiteten: regeln
   .lab-article-body .katex { font-size: 1.05em } längre ned väger lika
   tungt som .lab-block-title .katex och står senare, så utan den vann
   1,05 em tyst. */
.lab-block-title .katex,
.lab-article-body .lab-block-title .katex,
.formel-harledning > summary .katex {
    font-size: 1.4em;
    letter-spacing: normal;
}

.lab-block-title {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}

.lab-block p:last-child { margin-bottom: 0; }
.lab-block ul:last-child,
.lab-block ol:last-child { margin-bottom: 0; }

/* Formel — grön */
.lab-block-formel {
    background: #e8efdc;
    border-color: #b9c89a;
}
.lab-block-formel .lab-block-title { color: #4a6a1f; }

/* Tips — grön (samma som formel) */
.lab-block-tips {
    background: #e8efdc;
    border-color: #b9c89a;
}
.lab-block-tips .lab-block-title { color: #4a6a1f; }

/* Demo — persika */
.lab-block-demo {
    background: #f7e4cf;
    border-color: #d8b48a;
}
.lab-block-demo .lab-block-title { color: #8a4a18; }

/* Härledning — persika (samma som demo). Md-filerna skriver "::: härledning"
   (med ä → klassen lab-block-härledning), så båda stavningarna måste träffas. */
.lab-block-harledning,
.lab-block-härledning {
    background: #f7e4cf;
    border-color: #d8b48a;
}
.lab-block-harledning .lab-block-title,
.lab-block-härledning .lab-block-title { color: #8a4a18; }

/* Härledning som hopfällbar dropdown i formelrutan (nästlat ::: härledning
   inuti ::: formel). Renderas som <details> med en "Härledning"-rad längst
   ned i den gröna rutan; expanderad visas härledningen persika-färgad.
   Negativa marginaler = formelrutans padding (18px 22px) så remsan går
   kant i kant med rutan. */
.lab-block-formel > details.formel-harledning {
    margin: 18px -22px -18px;
    background: #f7e4cf;
    border-top: 1px solid #d8b48a;
    border-radius: 0 0 3px 3px;
}
.formel-harledning > summary {
    /* OBS: ingen flex/gap här — bionisk läsning styckar "Härledning" i
       spans, och som flex-items får de då mellanrum ("HÄRL EDNING"). */
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 10px 22px;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8a4a18;
    user-select: none;
}
.formel-harledning > summary::-webkit-details-marker { display: none; }
.formel-harledning > summary:focus-visible {
    outline: 2px solid #8a4a18;
    outline-offset: -2px;
}
.formel-harledning .fh-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    margin-bottom: 2px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}
.formel-harledning[open] .fh-chevron {
    margin-bottom: -2px;
    transform: rotate(225deg);
}
.formel-harledning-body { padding: 2px 22px 16px; }
.formel-harledning-body > :last-child { margin-bottom: 0; }

/* Fristående ::: förklaring — samma dropdown som härledningen i formel-
   rutan, men som en egen ruta i flödet: persika med kant, som en hopfälld
   lab-block. Summary-raden är rutans enda synliga innehåll när den är
   stängd, därför lite högre än remsan i formelrutan. */
details.lab-forklaring {
    margin: 22px 0;
    background: #f7e4cf;
    border: 1px solid #d8b48a;
    border-radius: 4px;
}
details.lab-forklaring > summary { padding: 13px 22px; }
details.lab-forklaring[open] > summary { border-bottom: 1px solid #e6cdb0; }
details.lab-forklaring > .formel-harledning-body { padding-top: 12px; }

/* Kuriosa — persika (samma som demo) */
.lab-block-kuriosa {
    background: #f7e4cf;
    border-color: #d8b48a;
}
.lab-block-kuriosa .lab-block-title { color: #8a4a18; }

/* Fördjupning — blå. Ett längre, inspirerande sidospår som går bortom
   kursens kärna (t.ex. födelsedagsparadoxen i ma1c-5.8). Egen färg så att
   rutan utmärker sig från formel/tips-grönt och kuriosa-persika.
   Md-filerna skriver "::: fördjupning" (med ö → klassen
   lab-block-fördjupning), så båda stavningarna måste träffas. */
.lab-block-fordjupning,
.lab-block-fördjupning {
    background: #e3ebf4;
    border-color: #a9c1d8;
}
.lab-block-fordjupning .lab-block-title,
.lab-block-fördjupning .lab-block-title { color: #2b5a8c; }

/* Exempel — vit/grå */
.lab-block-exempel {
    background: var(--lab-bg-panel);
    border-color: var(--lab-line-strong);
}
.lab-block-exempel .lab-block-title { color: var(--lab-ink); }

/* Sammanfattning — genomgångens viktigaste innehåll i punktform, sist i
   varje genomgång. En yttre ruta med små kort (nästlade ::: sampunkt) i
   ett responsivt rutnät. I presentationsläget blir HELA rutan en enda
   "slide" som breddas ut över duken och vid behov krymps i teckenstorlek
   tills allt ryms på en skärm — se .lab-pres-reglerna längre ned samt
   fitSammanfattning() i katalog.html. */
.lab-block-sammanfattning {
    background: var(--lab-bg-panel);
    border-color: var(--lab-line-strong);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.lab-block-sammanfattning > .lab-block-title {
    grid-column: 1 / -1;
    color: var(--lab-ink);
    margin-bottom: 0;
}
.lab-block-sammanfattning > p { grid-column: 1 / -1; margin: 0; }
.lab-block-sammanfattning .lab-block-sampunkt {
    margin: 0;
    padding: 12px 14px 10px;
    background: var(--lab-bg);
    border-color: var(--lab-line);
    font-size: 0.88em;
    line-height: 1.55;
}
.lab-block-sammanfattning .lab-block-sampunkt > .lab-block-title {
    font-size: 0.72em;
    color: var(--lab-accent-2);
    margin-bottom: 6px;
}
.lab-block-sampunkt p { margin: 0 0 8px; }
.lab-block-sampunkt ul,
.lab-block-sampunkt ol { margin: 0 0 6px; padding-left: 18px; }
.lab-block-sampunkt li { margin-bottom: 4px; }
.lab-block-sampunkt li:last-child { margin-bottom: 0; }
.lab-block-sampunkt .katex-display {
    margin: 6px 0 max(0px, calc(8px - var(--katex-luft-botten)));
}
@media (max-width: 600px) {
    .lab-block-sammanfattning { grid-template-columns: 1fr; }
}

/* Bild — streckad ram, platshållare */
.lab-block-bild {
    background: rgba(15, 22, 32, 0.03);
    border-style: dashed;
    border-color: var(--lab-line-strong);
    text-align: center;
    font-style: italic;
    color: var(--lab-ink-soft);
    padding: 28px 22px;
}

.lab-block-bild img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.lab-block-bild em {
    font-size: 13px;
    color: var(--lab-ink-muted);
}

/* Enhetskoll: inbjudan till kapitlets avslutande quiz. Solid papperskort
   (INTE lab-block-bilds streckade platshållarstil/kursiv text) med en
   riktig primärknapp, så det känns som en inbjudan snarare än en olöst
   platshållare (se fysik-enhetskoll.html). */
.lab-block-enhetskoll {
    background: var(--lab-bg-panel);
    border-color: var(--lab-line-strong);
}
.lab-block-enhetskoll .lab-block-title {
    color: var(--lab-ink);
}

/* Figur — riktig konstruerad SVG-figur (ersätter platshållartexten).
   Ingen streckad ram: figuren står direkt på pappret med ink-färg
   (currentColor) så den ärver temat. */
.lab-block-figur {
    border: none;
    background: transparent;
    padding: 14px 8px;
    text-align: center;
    color: var(--lab-ink);
}
.lab-block-figur > svg,
.lab-block-figur p > svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* marked lindar <svg> i en <p>, och .lab-block-figur p är kursiv (bildtext-
   stil) → SVG-texten ÄRVER kursiv stil (font-style är en ärvd egenskap).
   Tvinga upright så att mätetal och enheter i figurer INTE blir kursiva.
   Variabler kursiveras alltid explicit med <tspan font-style="italic">
   (presentationsattribut på <text>/<tspan> vinner över detta ärvda värde). */
.lab-block-figur svg { font-style: normal; }
.lab-block-figur .lab-block-title {
    color: var(--lab-ink-soft);
    margin-bottom: 14px;
}
/* Kort bildtext under figuren. */
.lab-block-figur .lab-figur-cap,
.lab-block-figur p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lab-ink-muted);
    font-style: italic;
    margin: 12px auto 0;
    max-width: 46ch;
}
/* ⚠️ marked lindar <svg> i ett <p>, så bildtextens max-width: 46ch träffade
   även SJÄLVA FIGUREN och kapade varje figur till 405 px — en 540 px bred
   figur krympte då till 0,75× och dess 12 px-etiketter renderades som 9 px
   ("alldeles för smått", påpekat 2026-08-20). Paragrafen som bär figuren
   undantas därför från både bredd- och textreglerna; figurens egen
   width/height styr storleken (se "Figurernas storlek" i CLAUDE.md).
   RÖR INTE detta undantag utan att mäta figurbredderna i webbläsaren. */
.lab-block-figur p:has(> svg) {
    max-width: none;
    margin-top: 0;
}

/* ── Interaktiv grafritare (::: graf → graf.js) ──────────────────────
   Ett kort med KaTeX-etikett, SVG-koordinatsystem och glidare/sifferfält
   som ritar om grafen live. Byggs av window.FYSIKGRAF.mountAll(). */
.lab-graf { margin: 22px 0; }

/* ── Handskriven lösning (::: handskrift → handskrift.js) ────────────
   Rutat ark där en blyertspenna skriver lösningen steg för steg.
   Byggs av window.HANDSKRIFT.mountAll(); widgeten har egen intern CSS. */
.lab-handskrift { margin: 22px 0; }

/* ── Minisimulering (::: minisim → minisim.js) ───────────────────────
   Liten inbäddad interaktiv demo (t.ex. tomtebloss i fy2-1.4). Byggs av
   window.FYSIKMINISIM.mountAll(); widgeten har egen intern CSS. */
.lab-minisim { margin: 18px 0 6px; }

/* En minisimulering inne i en blockruta (t.ex. ::: fördjupning) får gå ända
   ut i rutans kant på en telefon — samma grepp som .lab-tabell använder.
   Utan det äter rutans vågräta padding 44 px av en scen som ändå bara har
   ~250 px att ta av, och etiketterna i scenen krymper med den. */
@media (max-width: 560px) {
    .lab-block .lab-minisim {
        margin-left: -22px;
        margin-right: -22px;
    }
}

/* ── Videoklipp (::: video) ──────────────────────────────────────────
   Inbäddat fritt filmmaterial (archive.org/youtube-nocookie) med titel-
   och källrad under. HTML:en byggs av buildVideoEmbed() i katalog.html/
   avsnitt.html. Ramen får sitt bildförhållande via inline aspect-ratio
   (16:9 standard, 4:3 för äldre filmmaterial). */
.lab-video { margin: 22px 0; }
.lab-video .lab-video-ram {
    position: relative; width: 100%;
    background: #0f1620; /* mörk yta bakom spelaren medan den laddar */
    border: 1px solid var(--lab-line-strong); border-radius: 6px;
    overflow: hidden;
}
.lab-video .lab-video-ram iframe,
.lab-video .lab-video-ram video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; display: block; object-fit: contain;
}
.lab-video figcaption {
    display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.lab-video .lab-video-titel {
    font-size: 14.5px; line-height: 1.5; color: var(--lab-ink);
    font-style: normal;
}
.lab-video .lab-video-kalla {
    font-family: var(--lab-font-mono); font-size: 11px;
    letter-spacing: 0.03em; color: var(--lab-ink-muted);
    font-style: normal;
}
.lab-video .lab-video-kalla a {
    color: var(--lab-accent); text-decoration: underline;
    text-underline-offset: 2px;
}
/* Länk-variant när materialet inte går att bädda in */
.lab-video-lank {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; border: 1px solid var(--lab-line-strong);
    border-radius: 6px; background: var(--lab-bg-panel);
}

/* Textlösning (::: textlosning) — den vanliga textvarianten av en
   handskriven lösning. Renderas som lös brödtext, inte som en blockruta;
   handskrift.js växlar synligheten ("Med penna"/"Som text"). */
.lab-block-textlosning {
    border: none;
    padding: 0;
    background: transparent;
}
.lab-graf-card {
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    border-radius: 4px;
    padding: 16px 18px 14px;
}
.lab-graf-title {
    font-family: var(--lab-font-display);
    font-size: 22px;
    color: var(--lab-ink);
    text-align: center;
    margin-bottom: 6px;
}
.lab-graf-scene {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
}
.lab-graf-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Variabler kursiveras explicit i SVG; håll övrig text upprätt. */
    font-style: normal;
    cursor: grab;
    /* Panorering/pinch sköts av widgeten — inte sidscroll på scenytan */
    touch-action: none;
}
.lab-graf-svg.is-panning { cursor: grabbing; }
/* Zoomknappar uppe till höger på scenen */
.lab-graf-zoom {
    position: absolute;
    top: 6px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lab-graf-zbtn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lab-line-strong);
    border-radius: 4px;
    background: var(--lab-bg-panel);
    color: var(--lab-ink-soft);
    font-family: var(--lab-font-mono);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.lab-graf-zbtn:hover {
    background: var(--lab-bg-raised);
    color: var(--lab-ink);
}
/* Live-ekvation med aktuella värden — blå som kurvan, så eleven ser
   att det är just den ritade linjens ekvation. */
.lab-graf-eq {
    text-align: center;
    margin-top: 2px;
    color: #2563c9;
    font-size: 18px;
    min-height: 28px;
}
.lab-graf-eq .katex { font-size: 1.12em; }
.lab-graf-controls {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.lab-graf-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lab-graf-lbl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lab-graf-lbl > em {
    font-family: var(--lab-font-display);
    font-style: italic;
    font-size: 19px;
    color: var(--lab-accent);
    min-width: 1.4em;
    text-align: center;
    flex-shrink: 0;
}
.lab-graf-slider {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    /* Fylls med accentgradient upp till tummen via inline-style (graf.js) */
    background: var(--lab-line-strong);
    outline: none;
    cursor: pointer;
}
.lab-graf-slider:focus-visible {
    outline: 2px solid var(--lab-accent);
    outline-offset: 4px;
}
.lab-graf-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lab-accent);
    border: 2px solid var(--lab-bg-panel);
    box-shadow: 0 1px 3px rgba(15, 22, 32, 0.3);
    cursor: pointer;
}
.lab-graf-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lab-accent);
    border: 2px solid var(--lab-bg-panel);
    box-shadow: 0 1px 3px rgba(15, 22, 32, 0.3);
    cursor: pointer;
}
.lab-graf-num {
    width: 72px;
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 4px;
    background: var(--lab-bg);
    color: var(--lab-ink);
    font-family: var(--lab-font-mono);
    font-size: 13px;
    text-align: right;
}
.lab-graf-num:focus {
    outline: none;
    border-color: var(--lab-accent);
}
/* Footer under reglagen: kryssruta (trappsteget) till vänster, Återställ
   till höger */
.lab-graf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 460px;
    margin: 10px auto 0;
}
.lab-graf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--lab-ink-soft);
    cursor: pointer;
}
.lab-graf-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--lab-accent);
    cursor: pointer;
}
.lab-graf-reset {
    margin-left: auto;
    padding: 5px 14px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 4px;
    background: var(--lab-bg-raised);
    color: var(--lab-ink-soft);
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.lab-graf-reset:hover {
    background: var(--lab-accent);
    border-color: var(--lab-accent);
    color: #fff;
}
.lab-graf-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.lab-graf-chip {
    font-family: var(--lab-font-mono);
    font-size: 13px;
    color: var(--lab-ink-soft);
    background: var(--lab-bg-raised);
    border: 1px solid var(--lab-line);
    border-radius: 999px;
    padding: 3px 12px;
}
.lab-graf-chip > em {
    font-family: var(--lab-font-display);
    font-style: italic;
    color: var(--lab-accent);
    font-size: 15px;
}

/* ── Visualiseringar (interaktiva "aha-maskiner", data/visualiseringar/) ──
   Återanvänder graf-widgetens klasser (lab-graf-card/-scene/-slider m.fl.)
   och lägger bara till det steg-baserade skalet. */
.lab-vis-host { margin-top: 18px; }
.lab-vis-error {
    font-size: 14px;
    color: var(--lab-accent);
    text-align: center;
}
.lab-vis .lab-graf-scene { max-width: 560px; }
.lab-vis-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 12px;
}
.lab-vis-step {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    color: var(--lab-ink-soft);
    cursor: pointer;
}
.lab-vis-step:hover {
    background: var(--lab-bg-raised);
    color: var(--lab-ink);
}
.lab-vis-step.active {
    background: var(--lab-ink);
    color: var(--lab-bg-panel);
    border-color: var(--lab-ink);
}
.lab-vis-instr {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lab-ink-soft);
    text-align: center;
    max-width: 62ch;
    margin: 0 auto 12px;
}
.lab-vis-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 8px 0 2px;
    font-size: 13px;
    color: var(--lab-ink-soft);
}
.lab-vis-legend .swatch {
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 3px solid currentColor;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.lab-vis-formel {
    /* Flex med "safe center": centrerad när formeln ryms, scrollbar från
       vänster (inte klippt i båda kanter) när den är bredare än kortet. */
    display: flex;
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 16px;
    margin-top: 8px;
    min-height: 24px;
    padding-bottom: 2px;
}
.lab-vis-note {
    text-align: center;
    font-size: 13.5px;
    color: var(--lab-accent);
    margin-top: 6px;
    min-height: 18px;
}
.lab-vis-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.lab-vis-actions .lab-btn {
    padding: 9px 18px;
    font-size: 13.5px;
}

/* ── Visualisering: fullskärm ─────────────────────────────────────────
   Fullskärmsknapp uppe till vänster på värd-diven (samma kanoniska ikon
   som simuleringarnas .fs-btn) + pappersljust fullskärmsläge där kortet
   centreras stort. */
.lab-vis-host { position: relative; }
.lab-vis-fsbtn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--lab-line-strong);
    background: var(--lab-bg-panel);
    color: var(--lab-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 22, 32, 0.10);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.lab-vis-fsbtn:hover {
    border-color: var(--lab-ink);
    transform: scale(1.05);
}
.lab-vis-host:fullscreen {
    background: var(--lab-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px clamp(16px, 4vw, 48px) 48px;
}
.lab-vis-host:fullscreen .lab-vis-mount,
.lab-vis-host:fullscreen .lab-vis-error {
    max-width: 1080px;
    margin: 0 auto;
}
/* Äldre WebKit-prefix (Safari) */
.lab-vis-host:-webkit-full-screen {
    background: var(--lab-bg);
    overflow-y: auto;
    padding: 26px clamp(16px, 4vw, 48px) 48px;
}

/* ── Visualisering i presentationsläget ───────────────────────────────
   Ett eget lager ovanpå presentationen (öppnas från nedre listen).
   Presentationen är redan i fullskärm → lagret är stort och rent;
   den inre fullskärmsknappen göms därför här. */
.lab-pres-vis {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: var(--lab-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px clamp(16px, 4vw, 48px) 56px;
    cursor: auto;
}
.lab-pres-vis-head {
    max-width: 1080px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.lab-pres-vis-body {
    max-width: 1080px;
    margin: 0 auto;
}
.lab-pres-vis .lab-vis-host { margin-top: 0; }
.lab-pres-vis .lab-vis-fsbtn { display: none; }
.lab-pres-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lab-pres-visbtn {
    color: var(--lab-accent);
    border-color: var(--lab-accent);
}
.lab-pres-visbtn:hover {
    color: #fff;
    background: var(--lab-accent);
    border-color: var(--lab-accent);
}

/* ── Formelrutans layout (variabellista bredvid eller under formeln) ──
   Byggs av buildFormelLayouts(); fitFormel() växlar till .is-stacked när
   formel + lista inte får plats bredvid varandra. */
.formel-layout {
    display: flex;
    align-items: center;
    gap: 28px;
}
.formel-cell { flex: 0 0 auto; max-width: 100%; }
/* I sida-vid-sida-läge ska cellen anta formelns naturliga bredd (inte
   begränsas av KaTeX max-width:100% / overflow:hidden). I stacklat läge
   gäller standardbeteendet så breda formler kan skalas/klippas som vanligt. */
.formel-layout:not(.is-stacked) .formel-cell .katex-display {
    max-width: none;
    overflow: visible;
}
.formel-rule {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: var(--lab-line-strong);
}
.formel-layout .vardef-stack {
    flex: 0 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.formel-layout .vardef-stack li { margin: 0; line-height: 1.55; }
.formel-layout:not(.is-stacked) .vardef-stack li { white-space: nowrap; }

/* Prosaförklaring (när variablerna förklaras i en mening i stället för en
   punktlista) — tar resterande bredd och radbryter normalt. */
.formel-layout .vardef-prose { flex: 1 1 auto; min-width: 0; margin: 0; }

/* Variabelsymbolen (allt före "=") i KaTeX-typsnittet så att listans t.ex.
   M, λ, Δt matchar formelns. Texten efter "=" behåller brödtypsnittet.
   Färdig KaTeX i symbolen behåller sina egna fontar (mer specifikt).

   KURSIVERINGEN KOMMER FRÅN KÄLLAN, inte härifrån. Regeln hade förut
   font-style: italic + KaTeX_Math på hela symbolen, vilket lutade ALLT före
   "=" — även det som inte är en variabel: sifferindex (*m*₁ fick kursiv
   etta), operatorn Δ i Δ*t*, mätetal och enheter (1 J) och prosarader som
   råkar innehålla ett likhetstecken. Variabler kursiveras i stället
   explicit i md-filen (*m*, *α*, *λ*), som typografireglerna kräver.

   Därför två skikt: symbolen sätts UPPRÄTT i KaTeX_Main (samma raka former
   som formelns siffror, Δ och parenteser), och <em> — variabeln — får
   KaTeX_Math, matematikkursiven. KaTeX_Math finns BARA i kursiv skärning,
   så den får aldrig sättas på hela symbolen: då ritas även index och Δ med
   den kursiva filen hur än font-style står. Se "Index och annat som inte är
   en variabel" i CLAUDE.md. */
.vardef-stack .vardef-sym {
    font-family: 'KaTeX_Main', 'Cambria Math', serif;
}
.vardef-stack .vardef-sym em {
    font-family: 'KaTeX_Math', 'KaTeX_Main', 'Cambria Math', serif;
    font-style: italic;
}

/* Fallback: lista under formeln med horisontell avskiljare */
.formel-layout.is-stacked { display: block; }
.formel-layout.is-stacked .formel-rule {
    width: auto;
    height: 1px;
    align-self: auto;
    margin: 14px 0;
}

/* KaTeX-styling — matcha kroppstexten */
.lab-article-body .katex-display {
    /* Samma luft till brödtexten som förr (14 px marginal + 2 px padding).
       Klippluften under formeln räknas bort ur undermarginalen så att
       avståndet inte växer; max() håller marginalen positiv även vid stor
       teckenstorlek. */
    margin: 14px 0 max(2px, calc(16px - var(--katex-luft-botten))) !important;
    /* Vänsterställ block-formler istället för KaTeX:s default centrerade.
       Underlättar läsning: ögat behöver inte söka runt på en ny horisontell
       position för varje formel. Liten indrag (~1.5em) skiljer formeln
       visuellt från kroppstexten. */
    text-align: left !important;
    /* En bred displayformel scrollar i sidled inuti sin egen ruta i stället
       för att spilla ut och skapa horisontell scroll på hela sidan (viktigt
       på mobil, där avsnittsspalten annars sträcks ut). */
    overflow-x: auto;
    overflow-y: hidden;
}
.lab-article-body .katex-display > .katex {
    text-align: left;
    padding-left: 1.5em;
}

.lab-article-body .katex {
    font-size: 1.05em;
}

/* Förhindra radbrytning inom inline-math. KaTeX renderar varje formel som
   flera <span>-element, och webbläsaren får annars bryta mitt i en formel
   (t.ex. mellan "g =" och "9,82 N/kg"). Math-blocket flyttas i sin helhet
   till nästa rad om det inte får plats. .katex-display (block-math) ska
   inte påverkas. */
.katex {
    white-space: nowrap;
}
/* Öppningsparentes + efterföljande inline-formel limmas ihop (sätts i
   restoreMath) så att "(" aldrig blir ensam kvar i radslutet. */
.math-paren {
    white-space: nowrap;
}
/* Deluppgiftens bokstav + dess uppgift ("f) $3x^2 = 17,97$") limmas ihop
   (sätts i restoreMath) — en inline-formel är ett atomärt inline-block, och
   webbläsaren får bryta raden mellan bokstaven och rutan trots hårt
   mellanslag. Bokstaven får ALDRIG bli ensam kvar i radslutet. */
.delupp-bokstav {
    white-space: nowrap;
}
/* Variabel + bindestreck + efterled ("$x$-termen", "<em>pq</em>-formeln")
   limmas ihop (sätts i restoreMath) — annars kan raden brytas efter
   bindestrecket eller mellan variabeln och bindestrecket. */
.var-compound {
    white-space: nowrap;
}

/* Anmärkning intill en formel (wrapFormelAnm i katalog.html/avsnitt.html):
   formeln och parentes-stycket efter den läggs på samma rad; på smal skärm
   radbryts raden och anmärkningen hamnar under formeln. */
.formel-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.2em;
    row-gap: 0;
}
.formel-rad > p:first-child { flex: 0 1 auto; min-width: 0; margin: 0; }
.formel-rad > p.formel-anm {
    flex: 1 1 11em;
    margin: 0 0 0.6em;
    font-size: 0.92em;
    line-height: 1.35;
    opacity: 0.85;
}
.katex-display .katex {
    white-space: normal;
}

/* Långa formler skalas ned så de håller sig inom rammen istället för att
   sidoscrolla. JS sätter transform/scale på .katex efter rendering — vi
   måste därför tillåta att den skalade visuella höjden ligger under
   layout-höjden, samt klippa eventuell residual-bredd. */
.katex-display {
    max-width: 100%;
    overflow: hidden;
    /* Luft för KaTeX överhäng nedåt — se --katex-luft-botten överst i
       filen. Rutan klipper i höjdled, så utan paddingen kapas nämnaren. */
    padding: 2px 0 var(--katex-luft-botten);
}

.lab-block,
.lab-article-body,
.lab-article-body-inline {
    overflow-x: hidden;
}

/* Deluppgifter (a-, b-, c-uppgifter) i exempel — radas upp i en två-
   kolumners-tabell så att c) ligger rakt under a) och d) under b). På
   smala skärmar (och när texten är för lång för 2 kolumner) staplas de
   under varandra. Spacingen ska vara stram mellan deluppgifterna men
   ett tydligt gap före lösningen som följer. */
.lab-deluppgifter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 4px;
    margin: 0 0 18px;
}

.lab-deluppgifter > p {
    margin: 0;
}

@media (max-width: 640px) {
    .lab-deluppgifter {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
}

/* Tillbaka-länk */
.lab-article-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--lab-ink-soft);
    text-transform: uppercase;
    margin-bottom: 28px;
}

.lab-article-back:hover { color: var(--lab-accent); }

/* Saknat avsnitt */
.lab-article-missing {
    text-align: center;
    padding: 80px 24px;
    color: var(--lab-ink-soft);
}

.lab-article-missing-title {
    font-family: var(--lab-font-display);
    font-size: 36px;
    font-style: italic;
    color: var(--lab-ink);
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .lab-article { padding: 24px 20px 56px; }
    .lab-article-title { font-size: 40px; }
    .lab-article-sub { font-size: 18px; }
    .lab-article-body { font-size: 16px; }
}

/* === Om-sidan och kontakt-sidan ===================================== */

.lab-about-hero {
    border-bottom: 1px solid var(--lab-line-strong);
    padding: 36px 0 32px;
    margin-bottom: 0;
}

.lab-about-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 36px;
}

@media (max-width: 540px) {
    .lab-about-hero { padding: 24px 0 22px; }
    .lab-about-hero-inner { padding: 0 18px; }
}

.lab-about-mono {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--lab-ink-muted);
    margin-bottom: 18px;
    display: block;
}

.lab-about-title {
    font-family: var(--lab-font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--lab-ink);
    margin: 0 0 14px;
}

.lab-about-title em {
    font-style: italic;
    color: var(--lab-accent);
}

.lab-about-tagline {
    font-family: var(--lab-font-display);
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--lab-ink-soft);
    margin: 0;
    max-width: 64ch;
    line-height: 1.4;
}

.lab-about-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 36px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

@media (max-width: 540px) {
    .lab-about-body { padding: 24px 18px 40px; }
}

.lab-about-block {
    padding: 28px 0;
    border-top: 1px solid var(--lab-line);
}

.lab-about-block:first-child {
    border-top: none;
    padding-top: 8px;
}

.lab-about-block h2 {
    font-family: var(--lab-font-display);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 400;
    color: var(--lab-ink);
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.lab-about-block p {
    color: var(--lab-ink);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 14px;
    max-width: 68ch;
}

.lab-about-block p:last-child {
    margin-bottom: 0;
}

.lab-about-block strong {
    color: var(--lab-ink);
    font-weight: 600;
}

.lab-about-block em {
    font-style: italic;
    color: var(--lab-accent);
}

.lab-pullquote {
    font-family: var(--lab-font-display);
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.35;
    color: var(--lab-ink);
    margin: 0;
    padding: 18px 0 22px 28px;
    border-left: 3px solid var(--lab-accent);
    max-width: 64ch;
}

.lab-award {
    background: var(--lab-bg-raised);
    border-left: 3px solid var(--lab-accent-2);
    padding: 20px 24px;
    margin: 18px 0 4px;
}

.lab-award p {
    color: var(--lab-ink-soft);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 12px;
}

.lab-award p:last-child { margin-bottom: 0; }

/* === Kontakt-formulär =============================================== */

.lab-form {
    margin-top: 12px;
    max-width: 560px;
}

.lab-form-group {
    margin-bottom: 18px;
}

.lab-form-group label {
    display: block;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--lab-ink-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lab-input,
.lab-textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    color: var(--lab-ink);
    font-family: var(--lab-font-sans);
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    transition: border-color 120ms ease, background 120ms ease;
}

.lab-input:focus,
.lab-textarea:focus {
    outline: none;
    border-color: var(--lab-ink);
    background: #fff;
}

.lab-input::placeholder,
.lab-textarea::placeholder {
    color: var(--lab-ink-muted);
}

.lab-textarea {
    min-height: 150px;
    resize: vertical;
}

.lab-submit {
    appearance: none;
    background: var(--lab-ink);
    color: var(--lab-bg);
    border: 1px solid var(--lab-ink);
    padding: 12px 24px;
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.lab-submit:hover {
    background: var(--lab-accent);
    border-color: var(--lab-accent);
    color: #fff;
}

.lab-form-success {
    display: none;
    padding: 24px;
    border: 1px solid var(--lab-line-strong);
    background: var(--lab-bg-raised);
    margin-top: 16px;
    max-width: 560px;
}

.lab-form-success h3 {
    font-family: var(--lab-font-display);
    font-size: 22px;
    color: var(--lab-ink);
    margin: 0 0 8px;
}

.lab-form-success p {
    color: var(--lab-ink-soft);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* === Fysikaliska begrepp med tooltip ============================
   Markdown-syntax [[term|förklaring]] expanderas i build.js till
   <span class="lab-term" data-tip="...">term</span>. JS i
   katalog.html/avsnitt.html visar en flytande tooltip vid muspekaren. */

.lab-term {
    text-decoration: underline dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--lab-accent);
    cursor: help;
    color: inherit;
    transition: background 0.12s ease;
    padding: 0 1px;
    border-radius: 2px;
}

.lab-term:hover {
    background: rgba(200, 50, 74, 0.08);
}

/* Understrykning i löptext (<u>) lyfter fram en avgörande förutsättning,
   till exempel "konstant fart" i cirkulär rörelse. Ingår ett begrepp i
   frasen släcks dess streckade understrykning, så att uttrycket får EN
   sammanhängande linje under sig i stället för två parallella streck. */
body.laborans u {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

body.laborans u .lab-term {
    text-decoration: none;
}

.lab-term-tooltip {
    position: fixed;
    background: var(--lab-ink);
    color: var(--lab-bg-panel);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--lab-font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 320px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 6px 24px rgba(15, 22, 32, 0.28);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.lab-term-tooltip.visible { opacity: 1; }

/* Kapitel-intro (visas innan ett avsnitt har valts) */
.lab-chapter-intro {
    padding: 8px 0;
}

.lab-chapter-intro-text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--lab-ink-soft);
    margin: 8px 0 28px;
    max-width: 64ch;
}

.lab-chapter-intro-hint {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lab-ink-muted);
    margin: 0;
}

/* === Övningar ============================================== */

.lab-ovningar {
    margin: 40px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--lab-line);
}

/* Övningsblad-vyn (kortet "Övningsblad" i katalogen): en lista med
   utskriftsklara blad, ett per rad, med titel, nivå och två länkknappar.
   På smal skärm staplas knapparna under texten. */
.lab-ovningsblad {
    margin: 40px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--lab-line);
}
.lab-ovningsblad-intro {
    max-width: 62ch;
    color: var(--lab-ink-soft);
    margin: 0 0 18px;
}
.lab-ovningsblad-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lab-ovningsblad-rad {
    display: flex;
    gap: 18px 24px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--lab-line);
}
.lab-ovningsblad-rad:last-child { border-bottom: 1px solid var(--lab-line); }
.lab-ovningsblad-text { flex: 1 1 320px; min-width: 0; }
.lab-ovningsblad-titel {
    font-family: var(--lab-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.lab-ovningsblad-meta {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lab-ink-muted);
    margin: 4px 0 6px;
}
.lab-ovningsblad-niva { text-transform: uppercase; }
.lab-ovningsblad-besk {
    font-size: 14px;
    color: var(--lab-ink-soft);
    max-width: 60ch;
}
.lab-ovningsblad-lankar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.lab-ovningar-heading {
    font-family: var(--lab-font-display);
    font-size: 1.6rem;
    color: var(--lab-ink);
    margin: 0 0 18px;
    font-weight: 500;
}

.lab-ovningar-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.lab-ovningar-filter-btn {
    background: var(--lab-bg);
    color: var(--lab-ink);
    border: 1px solid var(--lab-line);
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--lab-font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lab-ovningar-filter-btn:hover:not(:disabled):not(.active) {
    border-color: var(--lab-ink);
}

.lab-ovningar-filter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lab-ovningar-filter-btn.active {
    background: var(--lab-ink);
    color: var(--lab-bg);
    border-color: var(--lab-ink);
}

.lab-ovningar-filter-btn-level-1.active { background: #4a8757; border-color: #4a8757; }
.lab-ovningar-filter-btn-level-2.active { background: #a85a1a; border-color: #a85a1a; }
.lab-ovningar-filter-btn-level-3.active { background: var(--lab-accent); border-color: var(--lab-accent); }

.lab-ovningar-filter-count {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.lab-ovning {
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line);
    border-left: 4px solid var(--lab-line-strong);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 18px;
}

.lab-ovning-level-1 { border-left-color: #4a8757; }   /* dämpad grön (E) */
.lab-ovning-level-2 { border-left-color: #a85a1a; }   /* dämpad ockra (C) */
.lab-ovning-level-3 { border-left-color: var(--lab-accent); } /* accent-röd (A) */

.lab-ovning-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.lab-ovning-question {
    color: var(--lab-ink);
    line-height: 1.6;
    margin-bottom: 16px;
}

.lab-ovning-question p:last-child { margin-bottom: 0; }

/* Flervalsfrågor */
.lab-ovning-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 12px;
}

.lab-ovning-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--lab-bg);
    border: 1px solid var(--lab-line);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.lab-ovning-choice:hover { background: var(--lab-bg-panel); }

.lab-ovning-choice input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--lab-ink);
    flex-shrink: 0;
}

.lab-ovning-choice-marker {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--lab-ink-soft);
    flex-shrink: 0;
    min-width: 18px;
}

.lab-ovning-choice-text {
    flex: 1;
    color: var(--lab-ink);
    line-height: 1.55;
}

.lab-ovning-choice-text p { margin: 0; }

.lab-ovning-choice.is-selected {
    border-color: var(--lab-line-strong);
    background: var(--lab-bg-panel);
}

.lab-ovning-choice.is-correct {
    border-color: #4a8757;
    background: rgba(74, 135, 87, 0.08);
    box-shadow: 0 0 0 1px #4a8757;
}

.lab-ovning-choice.is-wrong {
    border-color: var(--lab-accent);
    background: rgba(180, 60, 60, 0.06);
    box-shadow: 0 0 0 1px var(--lab-accent);
}

.lab-ovning-choice.is-reveal {
    border-color: #4a8757;
    background: rgba(74, 135, 87, 0.05);
    border-style: dashed;
}

.lab-ovning-choice.is-reveal .lab-ovning-choice-marker { color: #4a8757; }

.lab-ovning-answer-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 16px 0 12px;
}

.lab-ovning-answer-label {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lab-ink-muted);
}

.lab-ovning-input-col {
    width: 280px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.lab-ovning-fx-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.lab-ovning-fx-anchor {
    position: relative;
    display: inline-block;
}

.lab-ovning-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lab-ovning-answer-input {
    flex: 1;
    width: 100%;
    padding: 8px 44px 8px 14px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 6px;
    font-family: var(--lab-font-sans);
    font-size: 15px;
    color: var(--lab-ink);
    background: var(--lab-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lab-ovning-answer-input:focus {
    border-color: var(--lab-accent);
}

.lab-ovning-answer-input.is-correct {
    border-color: #4a8757;
    box-shadow: 0 0 0 1px #4a8757;
}

.lab-ovning-answer-input.is-wrong {
    border-color: var(--lab-accent);
    box-shadow: 0 0 0 1px var(--lab-accent);
}

.lab-ovning-unit {
    position: absolute;
    right: 14px;
    color: var(--lab-ink-muted);
    font-family: var(--lab-font-sans);
    font-size: 14px;
    pointer-events: none;
}

.lab-ovning-fx-btn {
    background: var(--lab-bg-panel);
    color: var(--lab-ink-muted);
    border: 1px solid var(--lab-line);
    border-radius: 4px;
    padding: 2px 10px;
    font-family: var(--lab-font-serif, Georgia, serif);
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lab-ovning-fx-btn:hover,
.lab-ovning-fx-btn.active {
    color: var(--lab-ink);
    border-color: var(--lab-ink);
}

.lab-ovning-fx-popover {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 0;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(15, 22, 32, 0.15);
    z-index: 30;
    min-width: 340px;
}

.lab-ovning-fx-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(46px, auto));
    gap: 4px;
}

.lab-ovning-fx-popover button {
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--lab-font-sans);
    font-size: 14px;
    color: var(--lab-ink);
    white-space: nowrap;
}

.lab-ovning-fx-popover button:hover {
    background: var(--lab-bg);
    border-color: var(--lab-line);
}


.lab-ovning-feedback {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 600;
    flex-basis: 100%;
    margin-top: -4px;
}

.lab-ovning-feedback.is-correct { color: #4a8757; }
.lab-ovning-feedback.is-wrong { color: var(--lab-accent); }

/* ── Exit ticket (kort förhör per avsnitt) ─────────────────────── */
.lab-exit {
    margin-top: 8px;
}

.lab-exit-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.lab-exit-progress {
    height: 3px;
    background: var(--lab-line);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.lab-exit-progress > div {
    height: 100%;
    background: var(--lab-accent);
    transition: width 0.25s ease;
}

/* Alternativen är <button> (inte <label> som i övningarna) —
   nollställ knapp-utseendet så de ser ut som övningarnas val. */
.lab-exit-choice {
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--lab-ink);
}

.lab-exit-choice:disabled { cursor: default; }
.lab-exit-choice.is-locked:not(.is-correct):not(.is-wrong):not(.is-reveal) {
    opacity: 0.55;
}
.lab-exit-choice.is-locked:hover { background: var(--lab-bg); }
.lab-exit-choice.is-correct:hover { background: rgba(74, 135, 87, 0.08); }
.lab-exit-choice.is-wrong:hover { background: rgba(180, 60, 60, 0.06); }
.lab-exit-choice.is-reveal:hover { background: rgba(74, 135, 87, 0.05); }

.lab-exit-why {
    margin: -2px 0 6px;
    padding: 10px 16px 12px;
    border-radius: 6px;
    border: 1px solid var(--lab-line);
    background: var(--lab-bg-panel);
}

.lab-exit-why.is-wrong { border-left: 3px solid var(--lab-accent); }
.lab-exit-why.is-right { border-left: 3px solid #4a8757; }

.lab-exit-why-tag {
    display: block;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lab-exit-why.is-wrong .lab-exit-why-tag { color: var(--lab-accent); }
.lab-exit-why.is-right .lab-exit-why-tag { color: #4a8757; }

.lab-exit-why-text {
    color: var(--lab-ink);
    line-height: 1.55;
    font-size: 15px;
}

.lab-exit-why-text p { margin: 0; }

.lab-exit-result {
    padding: 28px 24px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 8px;
    background: var(--lab-bg-panel);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.lab-exit-score {
    font-family: var(--lab-font-serif, Georgia, serif);
    font-size: 40px;
    line-height: 1.1;
    color: var(--lab-ink);
}

.lab-exit-verdict {
    color: var(--lab-ink-soft);
    line-height: 1.55;
    margin: 0 0 6px;
}

.lab-ovning-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.lab-ovning-answer-only {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--lab-bg);
    border: 1px solid var(--lab-line-strong);
    border-left: 4px solid var(--lab-accent);
    border-radius: 6px;
}

.lab-ovning-answer-only p:last-child { margin-bottom: 0; }

.lab-ovning-solution {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--lab-line);
}

/* === Presentationsläge (teori som bildspel) ========================== */

/* Launch-knapp i teori-verktygsraden — högerställd pill i mono-stil */
.lab-pres-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--lab-ink-soft);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lab-pres-launch:hover {
    color: var(--lab-ink);
    border-color: var(--lab-ink);
    background: var(--lab-bg-raised);
}

/* Scenen: fullskärmsoverlay i papperston med egen scroll */
.lab-pres {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--lab-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    user-select: text;
}

/* Göm muspekaren tillsammans med kontrollisten (som i bildspel) */
.lab-pres:not(.chrome-on) { cursor: none; }

/* Tunn progresslinje längst upp */
.lab-pres-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(15, 22, 32, 0.08);
    z-index: 9010;
}

.lab-pres-progress > div {
    height: 100%;
    background: var(--lab-accent);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Innehållskolumn. Stor bottenpadding så sista stegen kan centreras. */
.lab-pres-stage {
    max-width: 880px;
    margin: 0 auto;
    padding: 7vh 48px 44vh;
}

/* Titelbild → kompakt rubrik. Samma element morfar mellan lägena. */
.lab-pres-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-height: 16vh;
    transition: min-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-pres.at-title .lab-pres-title { min-height: 80vh; }

.lab-pres-title h1 {
    font-family: var(--lab-font-display);
    font-weight: 400;
    margin: 0;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--lab-ink);
    font-size: clamp(30px, 3.6vw, 46px);
    transition: font-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-pres.at-title .lab-pres-title h1 { font-size: clamp(54px, 7.5vw, 104px); }

.lab-pres-rule {
    width: 64px;
    height: 3px;
    background: var(--lab-accent);
}

.lab-pres-hint {
    font-family: var(--lab-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lab-ink-muted);
    margin-top: 22px;
    max-height: 40px;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.5s ease, margin-top 0.5s ease;
}

.lab-pres:not(.at-title) .lab-pres-hint {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
}

.lab-pres-hint kbd {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    border: 1px solid var(--lab-line-strong);
    border-radius: 4px;
    padding: 1px 6px;
    background: var(--lab-bg-panel);
}

/* Brödtexten — uppskalad för projektor. --pres-skala sätts av
   textstorleks-glidaren i kontrollisten (katalog.html) så att läraren kan
   anpassa storleken efter klassrummet; allt inuti (KaTeX inräknat) är
   em-baserat och följer med. Sammanfattnings-sliden berörs inte — dess
   storlek sätts inline av fitSammanfattning(). */
.lab-pres .lab-pres-body {
    font-size: calc(20px * var(--pres-skala, 1));
    line-height: 1.7;
}

.lab-pres .lab-pres-body h2 { font-size: calc(36px * var(--pres-skala, 1)); }
.lab-pres .lab-pres-body h3 { font-size: calc(22px * var(--pres-skala, 1)); }

/* Sammanfattningen i presentationsläget: EN slide som ska rymmas på en
   skärm (liggande datorläge). Rutan bryter ut ur textspalten och tar
   nästan hela dukens bredd; korten lägger sig i kolumner. Ryms den ändå
   inte i höjdled krymper fitSammanfattning() i katalog.html
   teckenstorleken stegvis via inline font-size på rutan — allt inuti
   (även KaTeX) är em-baserat och följer med. Centreringen görs med
   margin-left (INTE transform — entré-animationen labPresIn animerar
   transform och skulle ge ett sidledshopp). */
.lab-pres { overflow-x: hidden; }
.lab-pres .lab-pres-body { overflow-x: visible; }
.lab-pres .lab-block-sammanfattning {
    width: min(94vw, 1560px);
    margin-left: calc((100% - min(94vw, 1560px)) / 2);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    font-size: 17px;
    line-height: 1.55;
    gap: 14px;
}
@media (max-width: 600px) {
    .lab-pres .lab-block-sammanfattning { grid-template-columns: 1fr; }
}

/* Dölj allt tills stegen är uppbyggda (undviker blink av hela texten) */
.lab-pres:not(.is-ready) .lab-pres-body { visibility: hidden; }

/* Stegvisning: ej framklickade element är dolda */
.lab-pres-body > .pres-skip { display: none; }
.lab-pres-body > .pres-item:not(.is-on) { display: none; }
.lab-pres-body > .pres-block:not(.is-on) { display: none; }
.lab-pres-body .pres-block > .pres-sub:not(.is-on) { display: none; }

/* Tidigare steg dimmas så fokus ligger på det aktuella */
.lab-pres-body .pres-item,
.lab-pres-body .pres-block,
.lab-pres-body .pres-sub {
    transition: opacity 0.5s ease;
}

.lab-pres-body > .pres-item.is-on:not(.is-current),
.lab-pres-body > .pres-block.is-on:not(.is-current) {
    opacity: 0.38;
}

/* Inom den aktuella exempel-rutan dimmas redan visade rader lätt */
.lab-pres-body .pres-block.is-current > .pres-sub.is-on:not(.is-current) {
    opacity: 0.5;
}

/* Entré: nytt steg glider in mjukt underifrån */
@keyframes labPresIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.lab-pres-body .pres-item.is-current,
.lab-pres-body .pres-sub.is-current,
.lab-pres-body .pres-block.is-current {
    animation: labPresIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nedre kontrollist — glas över papperet, auto-göms vid inaktivitet */
.lab-pres-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 22px;
    background: rgba(243, 238, 228, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--lab-line);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.lab-pres:not(.chrome-on) .lab-pres-bar {
    transform: translateY(100%);
    opacity: 0;
}

.lab-pres-counter { min-width: 120px; }

.lab-pres-bar-btns {
    display: flex;
    gap: 10px;
}

.lab-pres-bar-btns button {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    color: var(--lab-ink);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.lab-pres-bar-btns button:hover:not(:disabled) {
    background: var(--lab-bg-raised);
    border-color: var(--lab-ink);
}

.lab-pres-bar-btns button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Textstorleks-glidaren i kontrollisten: litet A — glidare — stort A */
.lab-pres-textsize {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lab-ink-soft);
    font-family: var(--lab-font-display);
}

.lab-pres-textsize .ts-min { font-size: 12px; line-height: 1; }
.lab-pres-textsize .ts-max { font-size: 19px; line-height: 1; }

.lab-pres-textsize input[type="range"] {
    width: 110px;
    accent-color: var(--lab-ink);
    cursor: pointer;
}

/* Kryssrutan "Pennlösning i helskärm" i kontrollisten (PresentationMode) */
.lab-pres-pennfs {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lab-ink-soft);
    white-space: nowrap;
    user-select: none;
}
.lab-pres-pennfs:hover { color: var(--lab-ink); }
.lab-pres-pennfs input {
    accent-color: var(--lab-ink);
    cursor: pointer;
    margin: 0;
}

.lab-pres-exit {
    border: 1px solid var(--lab-line-strong);
    background: transparent;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lab-ink-soft);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lab-pres-exit:hover {
    color: var(--lab-ink);
    border-color: var(--lab-ink);
    background: var(--lab-bg-raised);
}

.lab-pres-empty {
    font-style: italic;
    color: var(--lab-ink-soft);
}

@media (max-width: 720px) {
    .lab-pres-stage { padding: 6vh 22px 40vh; }
    .lab-pres-counter { min-width: 0; }
    .lab-pres-launch { margin-left: 0; }
    /* Trång list på mobil: kortare glidare i stället för att trängas bort */
    .lab-pres-textsize input[type="range"] { width: 64px; }
    /* Helskärm för pennarket är ett klassrumsverktyg — på en telefon
       finns varken plats för etiketten eller ett behov av valet. */
    .lab-pres-pennfs { display: none; }
}

/* Under presentation: göm feedback-lampan (ligger annars över kontrollisten) */
body.lab-pres-active #fb-feedback-widget { display: none; }

/* =========================================================
   Begreppsordlista — inline-länkar och förhandsvisning
   (begrepp-lank.js + data/begrepp.js, se begrepp.html)
   ========================================================= */

/* Ett svårt ord i löptexten som finns förklarat i ordlistan. Markeras
   diskret med en prickad understrykning — inte som en vanlig länk, så att
   den inte konkurrerar med artikelns riktiga källänkar. */
.begrepp-lank {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--lab-accent);
    cursor: help;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.begrepp-lank:hover,
.begrepp-lank:focus-visible {
    color: var(--lab-accent);
    background: var(--lab-accent-soft);
    border-bottom-style: solid;
    outline: none;
}

/* Förhandsvisning vid hovring/fokus. pointer-events: none — rutan får
   aldrig fånga en klickning eller lägga sig i vägen för texten. */
.begrepp-popover {
    position: fixed;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: min(320px, calc(100vw - 24px));
    padding: 13px 15px 14px;
    background: var(--lab-bg-panel);
    border: 1px solid var(--lab-line-strong);
    border-radius: 5px;
    box-shadow: 0 14px 32px rgba(15, 22, 32, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
    pointer-events: none;
}

.begrepp-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.begrepp-popover-label {
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lab-accent);
}

.begrepp-popover-term {
    font-family: var(--lab-font-display);
    font-size: 21px;
    line-height: 1.1;
    color: var(--lab-ink);
}

.begrepp-popover-kort {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lab-ink-soft);
}

.begrepp-popover-more {
    margin-top: 3px;
    font-family: var(--lab-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--lab-ink-muted);
}