/* --- 1. GRUNDLÄGGANDE RESET & BODY --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

/* NYTT: Tvinga fram scroll-spåret på HTML-nivå för att låsa mittenläget på PC */
html {
    overflow-y: scroll;
    width: 100%;
    /* iPhone förstorar texten när telefonen vrids till liggande (Profilerarens helskärm såg
       inzoomad ut, Klas 2026-11-02). 100 % stänger av det; nypzoom påverkas inte. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

body { 
    background-color: #111; 
    color: var(--oled-color); 
    font-family: 'Lexend', sans-serif;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; 
    /* Vi behåller denna som backup */
    overflow-y: scroll; 
}

/* Light Mode & Teman */
:root { 
    /* TYPSKALAN (dansk testare 2026-10-18: ett sextiotal olika storlekar). Sex steg.
       Steg 1 (2026-10-19) var en REN OMSKRIVNING: varden som redan var ett steg fick variabeln,
       ovriga star kvar med en markering om vart de ska (kommentaren fs:sm osv), sa inget
       andrades pa skarmen. Steg 2 flyttade en grupp i taget - KLART samma dag: nu ar varje
       storlek ett steg, fs:fast eller fs:em, och nya storlekar skrivs som var(--fs-*).
       fs:fast = med flit utanfor skalan (ikoner, Live/OLED, ordbilden, 16 px-falten som hindrar
       iOS-zoom, clamp, utskrift). fs:em = relativ till foraldern, foljer med av sig sjalv.
       fontscale_check ser till att ingen ny storlek smiter in utan markering. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-base: 1rem;
    --fs-md: 1.15rem;
    --fs-lg: 1.5rem;
    --fs-xl: 2.2rem;
    --oled-color: #e0e0e0; 
    --oled-bg: #000000; 
    /* FÖRVALET ÄR HALM sedan 2026-10-15 (Klas: "det är så snyggt"), med salvia som sekundärfärg (blågrön 2026-10-20, salvia igen samma kväll) -
       samma par som setAccent sätter. Var salvia samma dag, och limegrön #8CC63F + orange före det.
       Gäller bara den som inte valt själv. */
    --accent-color: #EBD67C;
    --accent-secondary: #9DB86E;   /* salvia - blågrön prövades 2026-10-20 och backades samma kväll, se setAccent */
    --text-main: #ffffff;    /* För citat och stark text */
    --text-dim: #bbbbbb;     /* För den gråa brödtexten */

    /* ACCENT SOM TEXT. --accent-color är samma gröna i båda temana, vilket funkar för en
       ram eller en knapp men INTE för text: på ljus botten hamnar #8CC63F på 1,1 i kontrast
       och är i praktiken osynlig. Klas såg det i pitchkalkylatorn. De här två är därför
       avsedda för TEXT och mörknar i ljust läge. Mätt mot panelen: 9,4 respektive 4,5. */
    /* ACCENTEN SOM TEXT. Vardena matas in av setAccent() - ett per tema - sa temavaxlingen
       stannar har i CSS medan JS bara levererar talen. Reservvardena galler innan nagon
       valt accent och om JS inte hunnit kora.
       Accenten gar namligen inte att anvanda som text rakt av pa ljus botten: cyan mater
       1,54 mot vitt. setAccent morknar den tills den klarar 4,5. */
    /* I MORKT LAGE duger den rena accenten som text - den ar ljus mot en mork botten,
       vilken av de fem man an valjer. Vi behover alltsa ingen JS-berakning har, och da kan
       den inte heller utebli: satts --accent-color men inte textvarianten - till exempel
       for att ui.js ligger kvar i cachen medan style.css ar ny - blev texten gron medan
       resten av appen var lila. Klas sag precis det. Nu foljer den accenten direkt.
       Bara LJUST lage behover ett raknat varde, for dar duger accenten inte som text. */
    --accent-text: var(--accent-color);
    /* Sekundärfärgen som text/tunn kant: rakt av i mörkt läge, mörknad i ljust (setAccent). */
    --accent-secondary-ink: var(--accent-secondary);
    --accent-tint: var(--accent-tint-raw, rgba(235, 214, 124, 0.10));

    /* STATUSFARGER FOLJER INTE ACCENTEN. Gront betyder att det ar ratt, inte att appen ar
       gron - valjer nagon rott som accent och vi malar om framgangsbudskapet rott har vi
       vant pa innebörden i stallet for att gora appen personlig. */
    --ok-text: #8CC63F;
    --warn-text: #ffcc00;
    /* INFO ar ocksa en BETYDELSE, inte krom. Ett "i" som foljde accenten blev ROTT nar
       Klas korde rod accent, och ett rott i laser man som ett fel - inte som hjalp.
       Blatt och inte gront eller gult, som han foreslog: gront betyder redan "det ar bra"
       och gult "var forsiktig", sa bada hade gjort en befintlig farg tvetydig. Blatt ar
       infokonventionen och den enda i paletten som inte var upptagen. Nu sager de tre
       var sin sak: gront det gick bra, gult se upp, blatt har ar en forklaring.
       Matt: 5,88 mot morkt kort. */
    --info-text: #5b9bd5;
    --err-text: #ff6b6b;   /* fel: 6,3 mot #1a1a1a. #ff4444 i ljust lage gav 3,4 */
    /* Glyfen NAR KNAPPEN AR FYLLD. #111 mot den ljusa blan ger 6,38, men samma svarta
       mot ljust lages morkare bla bara 3,41 - alltsa maste aven den vara temaberoende. */
    --info-glyph: #111111;
    /* Panelen bakom kalkylatorns schema, och dess linjer. rgba(0,0,0,.25) ar en mork-lage-
       tanke: pa vitt blir den #bfbfbf och slass med all text ovanpa. */
    --calc-panel: rgba(0, 0, 0, 0.25);
    --calc-line: #444444;
    /* Formelrutan i lektionerna. Den var #111 rakt av - en terminal-svart platta, vilket
       ar precis ratt pa morkt underlag och en tung klump pa ljust. Klas sag det i
       cellrakningens sista steg. Morkt lage ar oforandrat. */
    --code-panel: #111111;
    --code-line: #444444;
}

body.light-mode {
    --oled-bg: #ffffff;    
    --oled-color: #111111; 
    --text-main: #111111;    /* Blir nästan svart i ljust läge */
    --text-dim: #555555;     /* Blir mörkgrå i ljust läge */
    --accent-text: var(--accent-text-light, #946217);   /* accentSomText(halm) - honung, inte oliv */
    --accent-secondary-ink: var(--accent-secondary-text-light, #617244);   /* accentSomText(salvia) */
    --accent-tint: var(--accent-tint-raw, rgba(235, 214, 124, 0.10));
    --ok-text: #4a7718;      /* fast gron aven i ljust lage - status, inte varumarke */
    --info-text: #2f6ba8;    /* morkare bla mot vitt: 5,54. Den ljusa gav 2,96. */
    --err-text: #c62828;     /* fel mot vitt: 5,6 */
    --info-glyph: #ffffff;   /* vitt pa den morkare blan: 5,54. Svart hade gett 3,41. */
    --warn-text: #8a6100;    /* mörkare bärnsten: 5,1 (mot #ffcc00 som ger 1,4). Anvands
                                pa normal textstorlek, sa 4,5 ar ratt krav - inte 3,0. */
    --calc-panel: rgba(0, 0, 0, 0.04);
    --calc-line: #dcdcdc;
    /* Ljus panel med en aning gront i, sa den hor ihop med accenten utan att bli sjuklig.
       Ramen ligger pa 1,87 mot panelen - samma tyngd som #444 mot #111 har i morkt lage
       (1,94), sa rutan ramar in sig lika mycket i bada temana. */
    --code-panel: #eef1e9;
    --code-line: #aab5a0;
    background-color: #f0f0f0; 
}

/* FORMELRUTAN i Academy-lektionerna. Lag forut som inline-stil i i18n.js, upprepad en
   gang per sprak - alltsa fem stallen att halla i takt, och de var temablinda. Texten gar
   pa --accent-text (inte --accent-color): den grona ar samma i bada temana, vilket funkar
   pa svart men ger 1,1 pa ljust. Mott i ljust lage: 4,7. */
.ym-formula {
    background: var(--code-panel);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed var(--code-line);
    margin-top: 15px;
    font-family: monospace;
    font-size: var(--fs-base);
    color: var(--accent-text);
}

/* YTOR SOM AR MORKA I BADA LAGENA.
   -----------------------------------------------------------------------------------
   Nastan hela appen skriver om sina morka ytor i ljust lage - jastkorten, modalerna,
   labbstegen, sokrutan, det guidade passets ark. Fyra gor det inte, och de ar avsiktligt
   morka aven pa ljust tema:

       .intro-modal-content   #1a1a1a      .profiler-style-info   #0d170d
       #demo-tour-tooltip     #1c2b18      .lab-card              #1a1a1a

   Deras BRODTEXT ar redan ratt - de satter sin egen ljusa farg (#eee / #f1f1f1) i stallet
   for att arva --text-main, sa de har aldrig varit trasiga. Det som behovs har galler bara
   ACCENTEN: --accent-text morknar till #4a7718 i ljust lage, vilket ar precis ratt pa vit
   botten men ger 3,28 pa #1a1a1a - under kravet. Har inne satts den darfor tillbaka till
   den lysande grona, och allt inuti arver det.

   Det ar vad som gor att --accent-text kan anvandas RAKT IGENOM appen utan undantag:
   den morknar dar botten ar ljus och forblir ljus dar botten ar mork. */
body.light-mode .intro-modal-content,
body.light-mode #demo-tour-tooltip,
body.light-mode .profiler-style-info,
body.light-mode .lab-card {
    --accent-text: var(--accent-color);   /* mork yta - accenten duger som text har */
    --ok-text: #8CC63F;
    --warn-text: #ffcc00;
    --info-text: #5b9bd5;
    --err-text: #ff6b6b;   /* fel: 6,3 mot #1a1a1a. #ff4444 i ljust lage gav 3,4 */
}

body.light-mode .oled-screen {
    border-color: #ddd; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

body.light-mode .separator-line { 
    border-top: 3px solid #cccccc; 
}
body.light-mode .btn-primary { border: 1px solid #ccc; }

/* =========================================
   --- PITCH CALCULATOR: LIGHT MODE ---
   ========================================= */

/* Huvudrutan */
body.light-mode .ym-modal-content {
    background-color: #ffffff;
    color: #111111;
    /* Vi behåller den snygga gröna kanten, men gör skuggan ljusare! */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); 
}

/* Texter och Rubriker */
body.light-mode .ym-modal-content h3,
body.light-mode .ym-modal-content h4,
body.light-mode .ym-modal-content p,
body.light-mode .lab-description {
    color: #111111;
}

/* Stäng-krysset */
body.light-mode .ym-close-btn {
    color: #888;
}
body.light-mode .ym-close-btn::before {
    border-color: #ddd;
}
body.light-mode .ym-close-btn:hover {
    color: var(--accent-text);
}

/* Inmatningsfält och Dropdowns */
body.light-mode .ym-input-group label {
    color: #666;
    font-weight: 700;
}

body.light-mode .ym-input-group input,
body.light-mode .ym-select {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    color: #111111;
}

body.light-mode .ym-input-group input:focus,
body.light-mode .ym-select:focus {
    border-color: var(--accent-color);
    background-color: #ffffff;
    box-shadow: 0 0 8px var(--accent-tint, rgba(235, 214, 124, 0.2));
}

/* Streckad linje för undermenyn (Yeast Bank) */
body.light-mode .sub-options-container {
    border-top-color: #ddd;
}

/* --- 2. CONTAINERS & AUTH --- */
#login-container, #claim-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    width: 100%;
    min-height: 80vh; 
}

/* INLOGGNINGSRUTAN (2026-10-21, designomgangen): samma kort som kalkylatorn - accentkant,
   12 px horn - och farger ur temat. Den var svart med en vit 3 px-ram och hade sex
   hardkodade graa, och i ljust lage gjorde en gammal regel ('.auth-box button') ALLA
   knappar vita, ocksa huvudknappen som ska vara accentfargad. */
.auth-box {
    background-color: #1a1a1a;
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 30px;
    text-align: center;
    width: 90%;
    max-width: 350px;
    box-sizing: border-box;
    color: var(--text-main);
}
body.light-mode .auth-box { background-color: #ffffff; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.auth-box h1 { color: var(--text-main); }
.auth-rubrik { font-size: var(--fs-base); font-weight: 800; margin: 0 0 16px; color: var(--text-main); }
.auth-ingress { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-dim); margin: -6px 0 14px; }
.auth-lank { color: var(--accent-text); cursor: pointer; }
.auth-lank-dim { color: var(--text-dim); cursor: pointer; }
.auth-skiljare {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
    color: var(--text-dim); font-size: var(--fs-xs);
}
.auth-skiljare::before, .auth-skiljare::after { content: ''; flex: 1; height: 1px; background: var(--calc-line); }
/* De tva andrahandsvagarna (lanken och Google): ram i textens gra, sa de syns i bada temana
   men inte tavlar med huvudknappen. */
.auth-box .btn-secondary {
    display: block; width: 100%; margin-bottom: 10px;
    border: 1px solid var(--text-dim); color: var(--text-main); background: transparent;
}
.auth-box .btn-secondary:hover { border-color: var(--accent-text); color: var(--text-main); background: var(--accent-tint); }
.auth-msg { font-size: var(--fs-xs); line-height: 1.5; margin: 10px 0 0; color: var(--err-text); }
.auth-msg.auth-ok { color: var(--ok-text); }
.auth-msg[hidden] { display: none; }
.auth-integritet { margin: 16px 0 0; font-size: var(--fs-xs); color: var(--text-dim); }
.auth-integritet span { cursor: pointer; text-decoration: underline; }
.auth-sent-text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-main); margin: 0 0 16px; }
/* Adressen bryts efter @ (wbr i auth.js) och annars bara om en del inte ryms - inte mitt i "yahoo" (Klas 2026-11-02). */
.auth-sent-text strong { color: var(--accent-text); overflow-wrap: anywhere; }
.valkomst { max-width: 420px; line-height: 1.6; }
.valkomst h3 { margin-top: 0; color: var(--text-main); }
.valkomst p { color: var(--text-main); }
.valkomst strong { color: var(--accent-text); word-break: break-all; }
.valkomst .valkomst-dim { color: var(--text-dim); font-size: var(--fs-sm); }

/* --- 3. VYER & SEKTIONER (FIXEN FÖR PC-HOPP) --- */
section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto !important; /* Tvingar sektionen till mitten av skärmen */
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: block; /* Ändrat från flex för att rubriker ska ligga fast till vänster */
    box-sizing: border-box;
}

.oled-screen { 
    width: 100%; 
    max-width: 450px; 
    background-color: var(--oled-bg); 
    border: 3px solid #333; 
    border-radius: 8px; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    /* Centrerar själva OLED-skärmen inuti den 800px breda sektionen */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}

.main-display {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: -75px; 
    z-index: 2;
}

.left-col { 
    width: 45%; 
    display: flex; 
    justify-content: center; 
    position: relative; 
    margin-top: -55px; 
}

.right-col { 
    width: 50%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    text-align: right;
    padding-bottom: 75px !important; 
}

/* --- 4. DAMEJEANG & TEMPERATUR --- */
.carboy-wrapper { 
    position: relative; 
    width: 230px; 
    height: 230px; 
}

.carboy-svg { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

/* -- SIFFRORNAS INSIDA -- */
.beer-temp {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto Mono', monospace;
    font-size: 1.4rem; /* fs:fast */ 
    letter-spacing: normal; 
    z-index: 10;
    
    /* Ny variabel för insidan! Om den saknas används vätskans färg */
    color: var(--beer-inner, #111111) !important; 
    transition: color 0.4s ease;
}

/* -- SIFFRORNAS KONTUR -- */
.beer-temp::after {
    content: attr(data-text); 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    pointer-events: none;
    
    color: transparent !important; 
    
    /* Ny variabel för konturen! */
    -webkit-text-stroke: 1px var(--beer-stroke, var(--oled-color)) !important;
    transition: -webkit-text-stroke-color 0.4s ease;
}

/* left: 150 lade "Air:" kant i kant med kolvens buk i datorvyn (Klas 2026-10-13). Mobilen
   har egen placering langre ner (left: 110 + skalning) och hade redan luft. */
.air-floating {
    position: absolute;
    top: 135px; 
    left: 162px; 
    font-size: 0.85rem; /* fs:fast */
    font-weight: 600;
    opacity: 0.6;
    white-space: nowrap;
    z-index: 10;
}

/* --- 5. KOMPONENTER --- */
.separator-line { 
    border: none; 
    border-top: 3px solid var(--oled-color); 
    position: relative; 
    z-index: 1; 
    margin: 0; 
}

/* STAMNAMNET I LIVE = enhetens inverterade ruta: firmwaren fyller en rektangel och skriver
   stamnamnet i svart i den (cpp_source_code, drawBox(53, 0, 75, 14)). Var en VIT platta, som
   ingen annanstans i appen (dansk testare). Provat 2026-10-18: ram i accenten - enhetligt men
   kopplingen till ladan forsvann. NU: samma fyllda platta, i accentfargen med #111 ovanpa,
   som appens fyllda knappar (lagst 5,5 over alla fem accenter). Ytterstorleken ofarandrad. */
.highlight-box { 
    background-color: var(--accent-color);
    color: #111;
    font-size: 1.4rem; /* fs:fast */ 
    font-weight: 800; 
    padding: 4px 12px; 
    margin-bottom: 12px; 
    display: inline-block;
    white-space: nowrap; 
}

.action-status { 
    font-size: 1.8rem; /* fs:fast */ 
    font-weight: 800;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- 6. PROGRESS & CHART --- */
.progress-section { 
    text-align: left; 
    padding: 35px 5px 0 5px; 
}

.progress-bar-bg { 
    width: 100%; 
    height: 7px; 
    border: 1px solid #444; 
    border-radius: 10px; 
    overflow: hidden; 
    background: rgba(255,255,255,0.05); 
    margin-bottom: 20px;
}

/* LIVE: HALM = OLET, SEKUNDARFARGEN (salvia) = PROCESSEN (Klas 2026-10-20: "lite val bara halmgult"). Stamplattan,
   enhetsnamnet och kurvan ar olet och star kvar i halm; forloppet, fasrutan med tid och mal och
   Dela-knappen i sekundarfargen. Ett medvetet undantag fran "krom = accent" - bara i Live. */
.progress-fill-anim { 
    height: 100%; 
    background-color: var(--accent-secondary-ink); 
    transition: width 1s ease-in-out; 
    box-shadow: 0 0 10px var(--accent-secondary-ink);
    margin-bottom: 20px;
}

.progress-widget { margin-bottom: 25px; }
#profile-val { margin-bottom: 2px !important; }

/* --- UPPDATERAD SUMMARY-BOX --- */
.phase-info {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px !important; /* Ger jämn luft runt om */
    border-left: 4px solid var(--accent-color);
}
#view-dashboard .phase-info { border-left-color: var(--accent-secondary-ink); }   /* Live, se progress-fill-anim */

/* Light mode-anpassning för boxen */
body.light-mode .phase-info {
    background-color: #ffffff;
    border-color: #ddd;
}

.summary-header {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--accent-text);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* Light mode-linjer */
body.light-mode .summary-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.summary-row:last-child {
    border-bottom: none; /* Ingen linje efter sista raden */
}





/* Om skärmen är riktigt smal, minska texten pyttelite till. 360 -> 400 i brytpunktsstädningen
   (Klas 2026-10-19): tre steg 400/600/768, inga egna. */
@media (max-width: 400px) {
    .summary-row .label, 
    .summary-row .value {
        font-size: var(--fs-xs);
    }
}

/* Standard (Dark Mode) */
.chart-section {
    background: #111;
    border: 1px solid #333;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Rubrik-rad för temp-historiken: titel till vänster, 24h/Allt-växel till höger.
   flex-wrap gör att växeln hoppar ner UNDER titeln på smala skärmar istället för
   att spilla ut över kortets högerkant (titeln är ett enda långt ord som inte
   kan krympa/brytas). På desktop får allt plats på en rad som förr. */
.chart-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.chart-range-toggle {
    display: inline-flex;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: auto;  /* håller växeln högerställd även när den radbryter till egen rad */
}

.chart-range-toggle button {
    background: transparent;
    border: none;
    color: #888;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.chart-range-toggle button.active {
    background: var(--accent-color);
    color: #111;
}

body.light-mode .chart-range-toggle { border-color: #ccc; }
body.light-mode .chart-range-toggle button { color: #666; }

/* --- 1. DASHBOARD GRAFEN (Kompakt och fast) --- */
#view-dashboard .chart-container {
    height: 150px !important; /* Styr höjden här */
    min-height: 150px !important;
    max-height: 150px !important;
    width: 100%;
    position: relative;
    overflow: hidden !important;
}

/* Hjälp-hint som visas över temp-grafen när 24h-fönstret är tomt för en KLAR jäsning
   (display togglas mellan none/flex av updateChart). Texten ligger i en <span> med
   max-width så längre språk (t.ex. svenska) bryts till två rader och håller sig centrerat
   inne i grafen istället för att nå ut till vänsterkanten. */
#chart-empty-hint {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    /* Extra vänster-padding ≈ y-axelns bredd, så texten centreras över själva kurvytan
       och inte glider in över y-axel-siffrorna till vänster. */
    padding: 0 12px 0 44px;
    box-sizing: border-box;
    pointer-events: none;
}
#chart-empty-hint span {
    max-width: 240px;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.45;
    color: #888;
    overflow-wrap: break-word;
}

#view-dashboard canvas#beer-chart {
    height: 150px !important;
    max-height: 150px !important;
}

/* --- 2. THE PROFILER GRAFEN (Stor och scrollbar med sticky Y-axel) --- */
#view-lab .chart-container {
    height: 300px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Y-axel sidebar: sticky till vänster, rullar inte med */
#lab-yaxis-sidebar {
    width: 75px;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    z-index: 1;
}

#lab-chart-yaxis {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Scrollbart område: tar upp resterande bredd */
#chart-scroll-area {
    flex: 1;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Inre scroll-innehåll: minsta bredd tvingar fram scrollen */
#chart-inner {
    min-width: 545px;
    height: 100%;
    position: relative;
}

canvas#beer-chart {
    max-width: 100% !important;
    display: block;
}

/* --- 7. BIBLIOTEK & KNAPPAR --- */
/* Rubrikraden bar nu tre saker (rubrik, i och turknapp) och maste fa radbryta pa mobil. */
.library-header > div:first-child { flex-wrap: wrap; row-gap: 10px; }

/* RUBRIKEN BRYTS SIST. Pa spanska delade sig "Biblioteca de Levaduras" pa tva rader medan
   turknappen satt kvar bredvid - fel sak gav vika. Flexens forvalda minsta storlek ar
   min-content, alltsa det langsta ORDET, sa rubriken kramas ihop innan knappen flyttar sig.
   max-content later rubriken behalla sin enradiga bredd, och max-width: 100% ar utvagen for
   den skarm dar inte ens rubriken ensam far plats - da far den bryta igen. */
/* INSTALLNINGAR MED I SAMMA REGEL. Rubrikerna i Bibliotek, Labbet och Profileraren delar
   omslagsklassen .library-header och krympte darfor tillsammans; Installningar ligger
   utanfor den och blev ensam kvar pa 24 px. Klas: "for att fa consistency." */
.library-header h2,
#view-settings h2 {
    min-width: max-content;
    max-width: 100%;
    /* RUBRIKEN KRYMPER SA ATT i:et RYMS BREDVID. "Bibliothèque de levures" ar 294 px och
       "Biblioteca de Levaduras" 302 px vid 24 px teckenstorlek - plus 15 px luft och en
       30 px cirkel blir det mer an raden har (330 px vid 390, 300 vid 360). vw-talet ar
       satt efter det BREDASTE spraket vid den SMALASTE vanliga skarmen, inte efter
       svenskan som alltid fatt plats. Over 769 px tar den vanliga rubrikstorleken over. */
    font-size: clamp(1.15rem, 5.1vw, 1.5rem); /* fs:fast */
}

@media (min-width: 769px) {
    .library-header h2,
    #view-settings h2 { font-size: var(--fs-lg); }
}

.library-header { 
    width: 100%; 
    text-align: left; 
    margin-bottom: 20px; 
    
    /* NYTT: Trycker ner rubrikerna 20px så de linjerar exakt med Settings på mobilen! */
    padding-top: 20px; 
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    
    box-sizing: border-box; /* Ser till att paddingen inte gör headern bredare än 100% */
}

.yeast-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 8px; 
    padding: 15px; 
    width: 100%;
}

/* ========================================= */
/* --- ACADEMY SECTION HEADER --- */
.academy-section-header {
    grid-column: 1 / -1;
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-dim);
    padding: 18px 0 6px;
    border-top: 1px solid #222;
    margin-top: 6px;
}
.academy-section-header:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* --- OG ADVISORY CARD --- */
.og-advisory-card {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    /* Samma bredd som sammanfattningen och grafen ovanför (Klas 2026-10-19: rutan och
       knappen satt 20 px indragna och bröt kortets kanter). */
    margin: 0 0 20px;
}

.lab-save-wrapper {
    margin: 20px 0;
}

/* OG-faltet. Stilen stod inline i index.html med svart bakgrund i BADA temana - i ljust lage
   en svart ruta mitt i det ljusa kortet (Klas 2026-10-13). Nu som Profilerarens ovriga falt. */
.og-input {
    /* 1 rem behover 125 px for "t.ex. 1.065"; krymper hellre an att trycka ut tyskans langa
       etikett "STAMMWÜRZE (OPTIONAL)" pa en smal telefon. */
    flex: 0 1 125px;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    background: var(--calc-panel);
    border: 1px solid var(--calc-line);
    color: var(--text-main);
    padding: 0 10px;
    border-radius: 8px;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-base);
    outline: none;
}
.og-input:focus { border-color: var(--accent-color); }
/* Faltet och dess pilar. .og-input fyller rutan; pilarna ligger inne i dess hogra kant. */
.og-falt {
    position: relative;
    display: flex;
    flex: 0 1 125px;
    min-width: 0;
}
.og-falt .og-input {
    flex: 1 1 auto;
    width: 100%;
    padding-right: 28px;
}
.og-pilar {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    width: 22px;
    display: flex;
    flex-direction: column;
}
.og-pilar button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    touch-action: manipulation;
}
.og-pilar button:hover { color: var(--accent-text); background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
.og-enhet { flex-shrink: 0; }

.og-tip-text {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
}

/* --- YEAST CARDS (NY, REN DESIGN) --- */
/* ========================================= */

/* Standard (Dark Mode) */
.yeast-card {
    background: #1a1a1a; /* Mörk bakgrund (eller white om du kör light-mode som standard) */
    border: 3px solid #333; /* 3px i vila = samma som .selected → ingen layout-hopp vid markering */
    border-radius: 8px;
    padding: 10px 15px; /* Mycket mindre luft inuti (topp/botten 10px, sidor 15px) */
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Namn överst, format-etikett under */
    gap: 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50px; /* Sänkt från 80px till en nättare standardhöjd */
}

/* Göm stjärnan permanent! */
.favorite-star {
    display: none !important;
}

/* Hover-effekt på dator */
.yeast-card:hover {
    border-color: #666;
}

/* När kortet är VALT (Dark Mode) */
/* När kortet är valt (Behåll den snygga ramen!) */
.yeast-card.selected {
    border: 3px solid var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important; 
    transform: scale(0.98);
}

/* FILTERKNAPPARNA i biblioteket (library.js, YEAST_FILTERS). Aktiv = accentfyllning med
   #111 ovanpa (lagst 5,5 over alla fem accenter, se mini-enheten). Pa mobil tva rader,
   se nedan - Klas: panelen far inte ta stor plats i mobilvyn. */
.yeast-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* Lika mycket luft over och under knapparna: 12 px fran sokfaltet, 12 px ner till
       Lista/Karta. Forut 12 over men 2 + 4 under, sa knapparna klistrade mot vaxlaren. */
    margin: 12px 0;
}
.yeast-chip {
    flex: 0 0 auto;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.yeast-chip .n { margin-left: 5px; font-weight: 600; opacity: 0.6; }
.yeast-chip:hover:not(:disabled) { border-color: var(--accent-color); color: var(--text-main); }
.yeast-chip.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #111;
}
.yeast-chip.active .n { opacity: 0.75; }
.yeast-chip:disabled { opacity: 0.35; cursor: default; }
.yeast-empty {
    grid-column: 1 / -1;
    padding: 24px 4px;
    color: var(--text-dim);
    font-size: var(--fs-base);
}
.yeast-empty a { color: var(--accent-text); font-weight: 700; cursor: pointer; }
.yeast-filter-sep {
    flex: 0 0 1px;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: color-mix(in srgb, var(--text-dim) 30%, transparent);
}
/* "Flockning" framfor Lag/Medel/Hog: utan den ar "Lag" bland Ale och Lager obegripligt. */
.yeast-filter-label {
    align-self: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}
/* Etiketten och dess knappar som en enhet i den flodande raden. */
.yeast-filter-grupp {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    flex: 0 0 auto;
}
/* LISTA/KARTA + SORTERING i en rad. stretch ger valjaren exakt vaxlarens hojd - forr var
   den en hogre formularruta med egen ram och webblasarens pil (Klas 2026-10-27). */
.lib-view-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px 12px;
    margin: 0 0 12px;
}
.lib-view-row .lib-view-toggle { margin: 0; }
.yeast-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
}
/* Samma sprak som .lib-view-btn: Lexend fet, accentram, transparent - fylld nar aktiv.
   RUTAN bar utseendet och TEXTEN syns; sjalva valjaren ligger osynlig ovanpa. Pekskarmens
   16 px-regel for select (se ZOOM UTAN SPARR) gjorde annars texten storre an knapparnas. */
.yeast-sort-box {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    min-height: 30px;
    max-width: 62vw;
    padding: 0 30px 0 12px;
    border: 1px solid var(--accent-text);
    border-radius: 8px;
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: var(--fs-xs);
}
.yeast-sort-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yeast-sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    border: 0;
    cursor: pointer;
}
/* Fokusringen bara med mus/tangentbord. Chrome raknar ett tryck i en select som
   :focus-visible, sa pa telefonen stod ringen kvar som en tjock dubbelram (Klas 2026-10-27). */
@media (pointer: fine) {
    .yeast-sort-box:has(.yeast-sort-select:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
}
/* ORDNINGEN: sorteringen forst, Lista/Karta SIST - narmast listan den vaxlar (Klas
   2026-10-27). På mobil var sin rad, sa vaxlaren star langst ner. */
.lib-view-row .yeast-sort { order: -1; }
.lib-view-row.kartlage .yeast-sort { display: none; }
/* Dator: samma rad, men vaxlaren i hogerkanten - bredvid varandra sag de ut som en grupp. */
@media (min-width: 601px) {
    .lib-view-row .lib-view-toggle { margin-left: auto; }
}
@media (max-width: 600px) {
    .lib-view-row { flex-direction: column; align-items: flex-start; }
    .lib-view-row .yeast-sort { align-self: flex-start; }
}
/* Pilen ritad i currentColor, sa den foljer temat och den fyllda varianten. */
.yeast-sort-box::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.yeast-sort-box.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #111;
}
/* Listan som fälls ut: egen bakgrund, annars arver den genomskinligt eller accentfyllt. */
.yeast-sort-select option { background: var(--map-panel); color: var(--text-main); font-weight: 600; }
/* Vardet listan sorteras pa, pa varje kort - annars syns inte varfor ordningen blev sa. */
.yeast-sortvarde { color: var(--accent-text); font-weight: 700; }
/* MOBIL: knapparna FLODAR, inte en svepbar rad. Appen byter flik nar man sveper i sidled,
   sa en svepbar rad krockade med flikbytet (Klas, 2026-10-09).
   Forut var avdelaren ett tvingat radbyte: format pa forsta raden, typ pa andra. Men typ-
   raden har fem knappar och rymdes inte, sa "Sour & wild" hamnade ensam pa en tredje rad
   medan formatraden var halvtom (Klas 2026-10-13). Nu ar avdelaren ett lodratt streck som
   pa dator, och knapparna fyller tva jamna rader. Lite tatare knappar an pa dator. */
@media (max-width: 768px) {
    .yeast-filters { gap: 6px 5px; }
    .yeast-filter-sep { margin: 0 2px; }
    .yeast-chip { padding: 5px 10px; font-size: var(--fs-xs); }
    .yeast-chip .n { margin-left: 4px; }
    /* Siffrorna doljs nar inget ar sokt eller filtrerat: de ar da bara totaler och sager
       inget, men tar ~100 px, sa "Sour & wild" fick en egen tredje rad (Klas 2026-10-13).
       Sa fort man soker eller valjer ett filter kommer de tillbaka. */
    .yeast-filters.utan-urval .yeast-chip .n { display: none; }
}

/* INGRESSEN i Biblioteket och Profileraren: en mening om vad man gor har, i samma ton som
   Kokslabbets rad. Bara pa dator - pa mobil tar den for mycket plats overst i biblioteket,
   och dar oppnas i-rutan i stallet nar man kommer via landningssidan (oppnaIntroMobil). */
.tool-lead {
    color: var(--text-dim);
    line-height: 1.5;
    margin: 4px 0 14px;
    max-width: 560px;
}
@media (max-width: 768px) {
    .tool-lead { display: none; }
    .info-tips { display: none; }
}
/* i-rutan pa dator: det ingressen redan sager doljs, sa rutan bara bar det nya. */
@media (min-width: 769px) {
    .lead-dup { display: none; }
}
.info-tips { margin: 0 0 10px; }
.info-tips ul { margin: 6px 0 0; padding-left: 18px; }
.info-tips li { margin-bottom: 6px; line-height: 1.45; }

/* RENSA i sokfaltet (✕ till hoger). Faltet far plats for knappen sa texten inte gar in under. */
.yeast-search-wrap { position: relative; margin-top: 15px; }
.yeast-search-wrap #yeast-search { margin-top: 0; padding-right: 48px; }
.yeast-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.yeast-search-clear:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-dim) 15%, transparent); }
.yeast-search-clear:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
.yeast-search-clear[hidden] { display: none; }

/* MINI-ENHETEN i kortets horn: "lagg den har pa min YeastMaster" (library.js). Kortet
   sjalvt oppnar stamsidan; valet bor har. Ej vald = kontur med +, vald = fylld med bock.

   FYLLNING OCH KONTUR DELAR PA JOBBET. Accentfyllningen syns inte mot vitt i ljust lage
   (cyan mater 1,54), sa kroppen far en kontur i textfargen som bar formen i bada temana.
   Bocken ar #111 mot accenten: lagst 5,5 over alla fem accenter (rod och lila). */
.yeast-card {
    padding-left: 38px;
    padding-right: 38px;   /* lika pa bada sidor, sa namnet star kvar i mitten */
}
.yeast-pick {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 32px;
    height: 32px;
    padding: 5px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.yeast-pick svg { display: block; width: 22px; height: 22px; }
/* TURENS STEG 1 pekar på plusknappen: den på första kortet pulserar (app-tour.js sätter
   klassen). En ring som växer och tonar ut - knappen själv står still. */
@keyframes yeast-pick-puls {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 75%, transparent); }
    70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-color) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
body.tour-puls-plus .yeast-card.tur-forsta .yeast-pick {
    color: var(--accent-text);
    animation: yeast-pick-puls 1.5s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    body.tour-puls-plus .yeast-card.tur-forsta .yeast-pick { animation: none; outline: 2px solid var(--accent-color); }
}
.yeast-pick .yp-body { stroke: currentColor; fill: transparent; }
.yeast-pick .yp-plus,
.yeast-pick .yp-screen { stroke: currentColor; }
.yeast-pick .yp-check { stroke: #111; display: none; }
.yeast-pick:hover { color: var(--accent-text); }
.yeast-pick.is-picked .yp-body { fill: var(--accent-color); stroke: var(--text-main); }
.yeast-pick.is-picked .yp-plus { display: none; }
.yeast-pick.is-picked .yp-screen { stroke: #111; }
.yeast-pick.is-picked .yp-check { display: inline; }

/* Raknaren och synkfaltet betyder bara nagot for den som har en enhet (auth.js satter
   body.has-device). Mini-enheten pa korten syns for alla - den ar ett skyltfonster. */
body:not(.has-device) .device-only { display: none !important; }
body.has-device .no-device-only { display: none !important; }

/* Forklaringsraden under Kylmarginal i Profilerarens sammanfattning (profiler.js). */
.summary-hint {
    margin: 4px 0 2px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-dim);
}

.pick-info-content h3 { color: var(--accent-text); margin-bottom: 8px; }
.pick-info-content .lab-description { margin-bottom: 20px; }
/* --- SÖKRUTAN I BIBLIOTEKET --- */
#yeast-search {
    width: 100%;
    padding: 14px 20px;
    margin-top: 15px;
    font-size: var(--fs-md);
    background-color: #0a0a0a;
    color: #fff;
    border: 2px solid #333;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

/* När man klickar i rutan för att skriva */
#yeast-search:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
    outline: none;
}

/* Light mode-stöd för sökrutan */
.light-mode #yeast-search {
    background-color: #fff;
    color: #111;
    border-color: #ccc;
}

.logout-btn, #btn-logout { 
    display: block; 
    margin: 30px auto; 
    opacity: 0.6; 
    background: #111; 
    border: 1px solid #444; 
    color: #fff; 
    padding: 8px 20px; 
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.logout-btn:hover { opacity: 1; border-color: var(--accent-color); }

/* --- 8. NAVIGATION (GLOBALA REGLER) --- */
.main-nav {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    z-index: 2000;
}

.nav-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

/* Stil för Ikonerna */
.nav-icon {
    width: 28px;        
    height: 28px;
    fill: #8f8f8f;      /* 6,5:1 mot menyns svart - #555 var 2,7 (dansk testare 2026-10-18) */
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 0px transparent);
}

.nav-item.active .nav-icon {
    fill: var(--accent-color); 
    filter: drop-shadow(0 0 8px var(--accent-color)); 
    transform: scale(1.1); 
}

/* Stil för Texten (gömd som standard) */
.nav-text {
    display: none; 
    font-size: 1.1rem; /* fs:fast */   /* menyn: se PLATTOR nedan, inmatt - utanfor typskalan */
    font-weight: 600;
    color: #8f8f8f;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.nav-item.active .nav-text {
    color: var(--accent-text);
    /* Vald flik syns pa mer an fargen: ett streck under. */
    text-decoration: underline;
    text-decoration-thickness: 1px;   /* var 2 px - tunnare (Klas 2026-10-20) */
    text-underline-offset: 7px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); /* Lätt glöd på texten */
}

/* Ändrad hover-regel: Blir bara grå om den INTE redan är aktiv */
.nav-item:not(.active):hover .nav-icon, 
.nav-item:not(.active):hover .nav-text { 
    color: #ddd; 
    fill: #ddd; 
}

/* För säkerhets skull: Tvinga den aktiva ikonen att alltid vara i accentfärg */
.nav-item.active .nav-icon {
    fill: var(--accent-color) !important;
    filter: drop-shadow(0 0 8px var(--accent-color)); 
    transform: scale(1.1); 
}

/* ========================================= */
/* --- 10. PC-VAKTPOST (BRED SKÄRM) --- */
/* ========================================= */
@media (min-width: 601px) {
    /* Mobil-share-knappen döljs på PC */
    #share-fermentation-row-mobile { display: none !important; }

    /* Ta bort paddingen till vänster och ge plats i toppen istället */
    body { 
        padding-left: 15px !important; 
        padding-top: 100px !important; /* Ger plats åt top-menyn */
    }
    
    .main-nav {
        left: 0;          
        top: 0;            
        right: 0;
        width: 100%;         
        height: 70px; 
        bottom: auto;        
        padding: 0 40px;     
        border-bottom: 1px solid #222; /* Streck under menyn */
        border-radius: 0; 
        flex-direction: row; /* Horisontell meny */
        justify-content: center;
        gap: 50px; /* Avstånd mellan orden */
        transform: none;
    }

    .nav-item {
        width: auto;
        height: 100%;
        padding: 0 10px;
    }

    /* MAGIN: Göm ikonen, visa texten! */
    .nav-icon { display: none !important; }
    .nav-text { display: block !important; }

    .main-display {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    .right-col {
        margin-top: -40px !important; /* Lyfter upp hela högersidan! */
    }

    .progress-section {
        padding-top: 45px !important; /* Standard är 40px, här tvingar vi ner den på PC */
    }
    
    #lab-chart {
        width: 100% !important;
        height: 100% !important;
    }
}

/* PLATTOR: SAMMA TOPPMENY, MEN I EN STORLEK SOM RYMS.
   Textmenyn slår på redan vid 601 px, och i 1,1 rem med 50 px mellanrum behöver de sex
   orden 1034 px (svenska; tyska 1020). En iPad i porträtt har 744-820 px, så första och
   sista ordet låg UTANFÖR skärmen - "HEM" och "INSTÄLLNINGAR" var avskurna, mätt i den
   riktiga appen.
   Talen är valda mot det BREDASTE språket och mätta på alla fem: svenska behöver 662 px
   av 744 med de här värdena, engelska 544. Menyraden är kvar på 70 px höjd, så
   träffytan för ett finger ändras inte - det är bara typografin som krymper. */
@media (min-width: 601px) and (max-width: 1100px) {
    .main-nav {
        gap: 20px;
        padding: 0 16px;
    }
    .nav-item { padding: 0 6px; }
    .nav-text {
        font-size: 0.9rem; /* fs:fast */   /* menyn ar inmatt mot 744 px - utanfor typskalan */
        letter-spacing: 0.4px;
    }
}

/* EN SPALT FOR ALLA VYER (Klas 2026-10-18, efter dansk testare: "fyra appar som delar meny").
   Labbet och Biblioteket hade 1060 px fran 1100 px skarm, for tre kortkolumner pa liggande
   iPad. Men da stack innehallet ut langt utanfor menyn at bada hall. Nu galler standard-
   spalten (section, 800 px) overallt - pa dator utan sidomarginal (se regeln "Justera
   sektionen" langre ner), sa innehallet ar 800 px, ungefar lika brett som menyn.
   Profileraren var forlagan: innehallet star UNDER menyn. Jastkorten blir anda tre i bredd
   (3 x 250 + 2 x 8 = 766 <= 800), Akademins kort tva. */

/* ========================================= */
/* --- 11. MOBIL-VAKTPOST (SMAL SKÄRM) --- */
/* ========================================= */
@media (max-width: 600px) {
    /* Desktop-share-raden döljs på mobil (ersätts av knappen inne i kortet) */
    #share-fermentation-row { display: none !important; }

    body { 
        padding-left: 10px !important; 
        padding-right: 10px !important;
        /* 22 px: alla flikar (aven Live och startsidan) borjar har sedan rubrikluften togs bort -
           10 px blev for tatt mot statusraden (Klas 2026-10-27). */
        padding-top: 22px !important;
        /* ÄNDRAD: Sänkt från 80px till 65px för att matcha den smalare menyn */
        /* + hemlinjen pa iPhones utan hemknapp, som flikraden nedan (0 pa SE) */
        padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important;
    }

   .main-nav {
        bottom: 0; left: 0; right: 0; top: auto;
        /* ÄNDRAD: Sänkt från 70px till 55px (eller det du tycker ser bäst ut) */
        /* HEMLINJEN (viewport-fit=cover, 2026-11-02): raden vaxer med remsan och ikonerna star
           kvar i de 55 px ovanfor - padding-bottom nedan. 0 pa telefoner med hemknapp. */
        height: calc(55px + env(safe-area-inset-bottom));
        width: 100%;
        border-radius: 0;
        flex-direction: row;
        gap: 10px;
        justify-content: space-around;
        border-top: 1px solid #222;
        border-right: none;
        transform: none;
        padding: 0 0 env(safe-area-inset-bottom);
    } 
    
/* ========================================= */
    /* MAXA BREDD OCH SYMMETRISKA AVSTÅND I LAB  */
    /* ========================================= */
    
    /* 1. Input-fälten ovanför grafen */
    #view-lab #profile-inputs {
        margin: 15px 0 !important; /* 15px avstånd uppåt och nedåt, 0 på sidorna */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Själva graf-rutan */
    #view-lab .chart-section {
        margin: 0 0 15px 0 !important; /* 0 uppåt (vi har redan 15px från fälten ovanför), 15px nedåt */
        width: 100% !important;
        padding: 15px 10px !important; /* Minskar luften inuti lådan så själva linjen får mer plats */
        box-sizing: border-box !important;
    }

    /* 3. Sammanfattningen och knapparna under grafen */
    #view-lab #profile-summary,
    #view-lab .lab-actions,
    #view-lab .og-advisory-card,
    #view-lab .lab-save-wrapper {
        margin: 0 0 15px 0 !important; /* Exakt 15px avstånd nedåt */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Tvinga fram 2 kolumner för jästbiblioteket på mobil */
    .yeast-grid {
        /* minmax(0, 1fr) är magin som förhindrar att kolumnen spränger skärmen */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 8px !important;
        padding: 10px 0 !important; /* Tar bort sido-luft så det linjerar perfekt med rubriken */
    }

    /* JASTKORTEN SOM RADER PA MOBIL (Klas 2026-10-19). Formatetiketten blev en rubrik, och
       da holl inte det centrerade kortet med mini-enheten som ett lager i nedre hornet: forst
       stod namnet hogt med ett hal under, sedan blev korten hoga och knappen krockade anda
       med langa namn ("sadar"). Nu ett rutnat: namnet VANSTERSTALLT bredvid typkanten,
       mini-enheten i en egen kolumn till hoger, centrerad i hojd - den kan aldrig hamna pa
       namnet, och kortet ar bara sa hogt som namnet kraver. Andra raden (en egen profils
       grundstam) under namnet i samma kolumn. Datorn behaller det centrerade kortet. */
  .yeast-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 4px;
        align-items: center;
        align-content: center;     /* ett namn pa EN rad ska sta i mitten, inte uppe */
        justify-items: start;
        text-align: left;
        padding: 10px 2px 10px 12px !important;
        min-height: 56px !important;
    }
    .yeast-card h3 { grid-column: 1; grid-row: 1; margin: 0; }
    .yeast-meta { grid-column: 1; grid-row: 2; padding: 0; justify-content: flex-start; }
    .yeast-meta:empty { display: none; }
    .yeast-pick { position: static; grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; padding: 5px; }
    /* Utan andra rad bara forsta raden - annars far den tomma raden hojd och namnet hamnar uppe. */
    .yeast-card:has(> .yeast-meta:empty) .yeast-pick { grid-row: 1; }
    .yeast-pick svg { width: 22px; height: 22px; }

    /* Minska texten och tillåt radbrytning om namnet är för långt */
.yeast-card h3 {
        font-size: var(--fs-sm) !important;
        white-space: normal;
        word-break: break-word;
    }
    /* Produktkoder (BE-134, W-34/70) bryts inte inuti - library.js hallIhopKoder. */
    .yeast-card h3 .namn-hel { white-space: nowrap; }

    /* Se till att stjärnan aldrig trycks ihop och blir oval */
    .favorite-star {
        flex-shrink: 0;
    }

    .oled-screen {
        width: 100% !important;
        max-width: 380px !important; 
        padding: 12px !important;
    }

    .carboy-wrapper {
        transform: scale(1.15) !important; 
        transform-origin: center left !important;
        margin-left: -5px !important;
    }
    
    .main-display { margin-bottom: -75px !important; }

    .action-status { 
        font-size: 1.1rem !important; /* fs:fast */ 
        gap: 4px !important;
        margin-top:-5px !important;
        transform: translate(-10px) !important;
    }

    /* left i PROCENT av kolvens ruta, inte 110 px: rutan krymper med vansterspalten (flex),
       sa pa en bredare telefon (412-430 px, och datorns telefon 380 px) blev kolven storre
       och hamnade under texten. Bukens hogerkant ligger pa 80 % av rutan (svg:n, r 30 kring 50). */
    .air-floating {
        top: 135px !important;
        left: 86% !important;
        font-size: 0.65rem !important; /* fs:fast */
    }

    .highlight-box {
        font-size: 1.1rem !important; /* fs:fast */ 
        padding: 3px 8px !important;
        margin-bottom: 5px !important;
    }

    .right-col {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        padding-bottom: 60px !important;
    }
   /* --- TEMPERATUR-TEXTEN PÅ MOBIL --- */
    .beer-temp { 
        font-size: 1.0rem !important; /* fs:fast */ /* Här styr du textstorleken på mobilen! */
        top: 58% !important;          /* Här styr du höjden på mobilen! */
        width: 100% !important; 
        text-align: center !important; 
    }

    .beer-temp::after {
        /* Gör konturen lite tunnare på mobilen så det inte grötar ihop sig */
        -webkit-text-stroke: 0.8px var(--beer-stroke, var(--oled-color)) !important; 
    } 
    
}

@keyframes blinker { 
    50% { opacity: 0; } 
}

.blink-active {
    animation: blinker 1s step-start infinite !important;
}

/* Pulsen utgar fran FULL styrka. Forut gick den 0,7 -> 0,25 och var alltsa aldrig helt
   synlig; i ljust lage sag "RAMPAR" blekt ut mot vitt trots ratt textfarg (Moa 2026-10-13). */
@keyframes rampPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.ramping-label {
    font-size: 0.9em; /* fs:em */
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-text);
    animation: rampPulse 2.2s ease-in-out infinite;
    white-space: nowrap;
}
.ramp-long { display: none; }
@media (min-width: 769px) {
    .ramp-short { display: none; }
    .ramp-long { display: inline; }
}

/* --- THE ARCANE LAB --- */

/* ========================================== */
/* --- THE ARCANE LAB (Academy Grid & Cards)  --- */
/* ========================================== */

.academy-grid {
    display: grid;
    grid-template-columns: 1fr; /* En kolumn på mobil */
    gap: 15px;
    width: 100%;
}

@media (min-width: 601px) {
    .academy-grid {
        grid-template-columns: 1fr 1fr; /* Två kolumner på PC */
    }
}

.academy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.light-mode .academy-card {
    background: #ffffff;
    border-color: #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.academy-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

body.light-mode .academy-card:hover {
    background: #f9f9f9;
}

.academy-card-icon {
    font-size: 2rem; /* fs:fast */
    line-height: 1;
    flex-shrink: 0;
}

/* Ritade ikoner i Academy-korten. Emoji ar bekvamt men inte alltid trafffsakert - en
   forkultur star i en E-kolv, och det finns ingen emoji for det (den narmaste, alembic,
   ar en destillationsapparat). En SVG ar dessutom temasaker: konturen gar pa currentColor
   och foljer kortets textfarg. 1em gor att den far exakt samma storlek som emojierna
   bredvid, sa korten kan bytas ett i taget utan att raden hoppar. */
.academy-card-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Samma ikon dyker upp i "Se även"-foten under ett protokoll, och där står den INLINE
   bredvid text. Utan en storlek blir en svg 300×150 px. Kortregeln ovan är mer specifik
   och vinner där, så den här gäller bara de inline-lägena. */
.ym-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
}

.academy-card-content {
    flex: 1;
    min-width: 0;
}

.academy-card-content h4 {
    margin: 0 0 5px 0;
    color: var(--text-main);
    font-size: var(--fs-md);
    font-weight: 800;
    /* Låt bindestrecks-avstavning (hyphens) sköta radbrytningen så långa ord
       som "Fermentation" bryts snyggt med bindestreck ("Fermenta-tion") istället
       för mitt i ordet utan tecken. overflow-wrap är bara ett skyddsnät för ord
       helt utan giltiga avstavningspunkter. Kräver rätt lang på <html> (sätts per språk). */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.academy-card-content p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.academy-card-arrow {
    font-size: 1.5rem; /* fs:fast */
    color: #666;
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
}

.academy-card:hover .academy-card-arrow {
    transform: translateX(5px);
    color: var(--accent-text);
}

/* Relaterat-raden under en lektion: etikett + chips på rad (desktop). */
.academy-related {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed #333;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Kökslabbet-raden ligger direkt ovanför "Relaterat" och behöver inte en egen
   avdelande linje — två streckade linjer i rad blir en stege. Den första raden bär
   linjen, den andra får bara luft. */
.academy-related.academy-bench + .academy-related {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

/* Mobil: stapla chipsen knapp-för-knapp under rubriken istället för att de
   ska radbrytas illa bredvid varandra. Desktop lämnas orört. */
@media (max-width: 600px) {
    .academy-related {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* INGRESSEN ("Varfor ...?") ar en <details>. Tva stycken prosa ovanfor wizarden ar
   lagom pa en bred skarm men mastigt pa en telefon, dar de trycker ner sjalva
   lektionen under vikningen. Den ar darfor OPPEN pa desktop och hopfalld pa mobil -
   samma innehall, olika utgangslage, och alltid ett klick fran att fallas ihop igen.
   Innehallet ligger i DOM:en oavsett, sa de statiska guidesidorna indexeras som forut. */
.academy-lead {
    margin: 0 0 26px;
    max-width: 62ch;
}

/* Summary ar en RAD med ingressknappen och (pa mobil) materialknappen bredvid. Sjalva
   knappens utseende ligger pa .academy-lead-pill. */
.academy-lead > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.academy-lead--bara-lista { display: flex; }
.academy-lead-pill {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 7px 14px;
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    color: var(--accent-text);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Webkits egen triangel maste bort separat - list-style ensamt racker inte dar. */
.academy-lead > summary::-webkit-details-marker { display: none; }

/* Pilen ritas med CSS-kanter, inte som ett tecken. Forsta versionen anvande
   content: "\25be", men den backslash-sekvensen las som en OKTAL escape pa vagen
   in i filen och blev styrtecknet 0x15 - pa skarmen stod det bokstavligen "be".
   En triangel av kanter har inga escaper som kan tolkas fel, och behover ingen
   teckenkodning for att bli ratt. */
.academy-lead-pill::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.18s ease;
}

.academy-lead[open] .academy-lead-pill::after { transform: rotate(180deg); }

.academy-lead-pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

.academy-lead-body {
    color: var(--text-dim);
    font-size: var(--fs-base);
    line-height: 1.65;
    padding: 14px 2px 0;
}

.lab-controls {
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lab-step {
    background: #1a1a1a;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.step-title {
    font-weight: 800;
    color: var(--accent-text);
    font-size: var(--fs-base);
    letter-spacing: 0.5px;
    min-width: 130px;
}

.step-inputs {
    display: flex;
    gap: 15px;
    flex: 1;
    justify-content: flex-end;
}

.step-inputs label {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-xs);
    color: #888;
    font-weight: 600;
}

.step-inputs input {
    background: #000;
    border: 1px solid #444;
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    width: 75px;
  font-family: 'Lexend', sans-serif;
    font-weight: 600;
    text-align: center;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.step-inputs input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
    outline: none;
}

.step-inputs input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#lab-json-out {
    background: #0a0a0a;
    padding: 20px;
    border-radius: 10px;
    color: #a6e22e; /* Ljusgrön kod-färg */
    overflow-x: auto;
    font-size: var(--fs-sm);
    border: 1px solid #333;
    font-family: monospace;
    line-height: 1.5;
}


/* Calc Styling */
.calc-container {
    background: #111;
    margin: 20px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #222;
}
/* --- UPPDATERAD KALKYLATOR FÖR MOBIL --- */

.calc-inputs {
    display: flex;
    flex-wrap: wrap; /* Låter fälten hoppa ner på ny rad om det behövs */
    gap: 15px;
    margin-bottom: 25px;
}

.input-group {
    flex: 1 1 140px; /* Säger: Försök vara 140px bred, men väx om det finns plats */
    min-width: 0;   /* Förhindrar att flex-items trycker ut boxen */
}

.calc-results {
    display: flex;
    gap: 10px;
}

.res-card {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrerar innehållet vertikalt */
    min-height: 100px;       /* Tvingar dem att vara lika höga */
}

/* Specifik mobiljustering */
@media (max-width: 400px) {
    .input-group label {
        font-size: var(--fs-xs); /* Pyttelite mindre etiketter */
    }
    .input-group input, .input-group select {
        padding: 10px 5px; /* Mindre luft inuti svarta rutorna */
        font-size: var(--fs-base);
    }
    .res-val {
        font-size: var(--fs-md); /* Gör siffran lite mindre så den inte krockar med % */
    }
}

/* =========================================
   --- MOBIL-MARKERING AV KLICKBARA SEKTIONER ---
   ========================================= */
@media (max-width: 768px) {
    /* Vi siktar direkt på de klickbara korten istället för lösa textstycken! */
    .hardware-card,
    .academy-card {
        /* Skapar den snygga accent-linjen till vänster */
        border-left: 3px solid var(--accent-color) !important;
        
        /* Rakare hörn just på vänstersidan gör att linjen ser ut som en markör */
        border-top-left-radius: 2px !important;
        border-bottom-left-radius: 2px !important;
        
        /* Tvingar in innehållet lite så det inte krockar med linjen */
        padding-left: 15px !important; 
        
        /* Valfritt: En extremt svag glöd bakom hela rutan för att visa att den är klickbar */
        background: rgba(255, 255, 255, 0.02) !important;
    }
}

.res-card.accent { border-left-color: var(--accent-color); }
.res-label { display: block; font-size: var(--fs-xs); color: #888; font-weight: 800; margin-bottom: 5px;}
.res-val { display: block; font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.res-unit { font-size: var(--fs-xs); opacity: 0.5; }

.warning-box {
    margin-top: 20px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid #ff4444;
    color: #ff4444;
    padding: 10px;
    border-radius: 8px;
    font-size: var(--fs-xs);
    text-align: center;
}

/* --- LIGHT MODE JUSTERINGAR FÖR NYA MODULER --- */

/* -- BÖRJAN: NYA REGLER FÖR YEAST-CARDS I LIGHT MODE -- */
/* --- YEAST CARDS I LIGHT MODE --- */

/* Tvinga fram vit bakgrund på alla kort */
body.light-mode .yeast-card {
    background: #ffffff;
    border: 3px solid #eee; /* 3px matchar .selected → inget layout-hopp i ljust läge heller */
    color: #111111; /* Svart text */
}

/* Tvinga texten att bli svart */
body.light-mode .yeast-card h3 {
    color: #111111 !important;
}

/* Hover-effekt (när man drar musen över) */
body.light-mode .yeast-card:hover {
    border-color: #ccc;
}

/* Markerade kort */
body.light-mode .yeast-card.selected {
    border: 3px solid var(--accent-color) !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

/* Stjärnan (Omarkerad) */
body.light-mode .yeast-card .favorite-star {
    color: #ccc !important; 
}

/* Stjärnan (Markerad) */
body.light-mode .yeast-card.selected .favorite-star {
    color: var(--accent-text) !important; 
}
/* -- SLUT: NYA REGLER FÖR YEAST-CARDS I LIGHT MODE -- */

/* -- DAMEJEANGENS FÄRG (Styrs nu av JS-variabeln --beer-color) -- */

/* För att JS fortfarande ska kunna hitta färgen */
#beer-color-stop {
    stop-color: var(--beer-color, #e8992e);
}

.beer-liquid {
    transition: fill 0.4s ease; /* Mjukt färgbyte när vi byter ölsort */
}

.light-mode .yeast-card.selected {
    border-color: var(--accent-color) !important;
    background: #f9f9f9 !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

.light-mode .yeast-card h3 {
    color: #333;
}

.light-mode .calc-container {
    background: #fdfdfd;
    border-color: #ddd;
}

.light-mode .input-group label {
    color: #666;
}

.light-mode .input-group input, 
.light-mode .input-group select {
    background: #fff;
    border-color: #ccc;
    color: #222;
}

.light-mode .res-card {
    background: #f5f5f5;
    border-left-color: #ccc;
}

.light-mode .res-val {
    color: #111;
}

.light-mode .res-unit, .light-mode .res-label {
    color: #666;
}

/* Arcane Lab inputs i ljust läge */
.light-mode .lab-step {
    background: #fff;
    border-color: #ddd;
}

.light-mode .step-inputs input {
    background: #f9f9f9;
    border-color: #ccc;
    color: #222;
}

/* --- THE PROFILER - LIGHT MODE JUSTERINGAR --- */

/* Light Mode */
body.light-mode .chart-section {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
}

/* Texten "PROFILE BUILDER" */
.chart-section div[style*="color: #888"] {
    color: var(--oled-color) !important; /* Denna följer nu temat automatiskt */
}

/* Placeholder-texten ("Pick a base yeast...") */
body.light-mode #chart-placeholder {
    color: #999 !important;
}

/* Inmatningsfälten (Namn och Jäst) */
body.light-mode .step-inputs input, 
body.light-mode .input-group input, 
body.light-mode .input-group select,
body.light-mode #yeast-search {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #ccc !important;
}

/* Sammanfattningsboxen under grafen */
body.light-mode .phase-info,
body.light-mode #profile-summary {
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

/* Text i labels och sammanfattning */
body.light-mode .step-inputs label,
body.light-mode .input-group label,
body.light-mode .res-label {
    color: #666 !important;
}

/* Om du använder en mörk ruta för JSON-output eller liknande */
body.light-mode #lab-json-out {
    background: #f4f4f4 !important;
    color: #222 !important;
    border-color: #ccc !important;
}

/* Denna regel ser till att statusen (t.ex. COLD CRASH) blir mörk i Light Mode */
body.light-mode #status-text {
    color: #111111 !important;
}

/* Du kan även passa på att snygga till raden för "Days since start" om den känns blek */
body.light-mode .day-row, 
body.light-mode .phase-row {
    color: #333 !important;
}

/* --- ACTIVE DEVICE TEXT COLOR --- */
/* Standard (Dark Mode) */
#setting-active-device {
    color: #ffffff;
}

/* När man öppnar rullistan (alternativen inuti) */
#setting-active-device option {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Light Mode Overrides */
body.light-mode #setting-active-device {
    color: #111111; /* Blir mörk text mot ljus bakgrund */
}

body.light-mode #setting-active-device option {
    background-color: #ffffff;
    color: #111111;
}

/* Språkväljare (dropdown) i Settings — ersatte de gamla EN/SV/DE/FR-knapparna */
.lang-select {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-sm);
    cursor: pointer;
    min-width: 130px;
}
.lang-select option {
    background-color: #1a1a1a;
    color: #ffffff;
}
body.light-mode .lang-select {
    background-color: #ffffff;
    color: #111111;
}
body.light-mode .lang-select option {
    background-color: #ffffff;
    color: #111111;
}

/* Privacy Policy i light mode: rubrikerna har inline color:#fff (osynligt mot ljus
   bakgrund) och brödtexten är ljusgrå. Tvinga mörk text. Länkar (accentfärg) lämnas. */
body.light-mode #view-privacy h2,
body.light-mode #view-privacy h3 {
    color: #111111 !important;
}
body.light-mode #view-privacy div,
body.light-mode #view-privacy p,
body.light-mode #view-privacy ul,
body.light-mode #view-privacy li {
    color: #333333 !important;
}

body.light-mode #setting-mac-display {
    color: #666666 !important;
}

/* Inloggningsrutans ljusa lage star nu vid .auth-box (2026-10-21). Kvar: */
/* 5. Se till att hela inloggnings-containern har rätt bakgrund */
body.light-mode #login-container, 
body.light-mode #claim-container {
    background-color: transparent; /* Låter bodyns ljusgrå färg lysa igenom */
}

/* SCROLL-LÅSET BAKOM EN MODAL. Stod på fyra ställen i den här filen med nästan samma
   innehåll — den union de tillsammans utgjorde står nu här, en gång.
   overscroll-behavior är inte pynt: utan den studsar en iPhone förbi låset och rullar
   sidan bakom. Sätts av lasBakgrund() i ui.js, som alla modaler nu går igenom. */
html.modal-open, body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: 100% !important;
}

/* --- YEAST INFO MODAL: DEN DEFINITIVA FIXEN --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: none; /* JS växlar denna till 'flex' */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh; /* Hindrar att rutan åker utanför skärmen */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: modalFadeIn 0.3s ease-out;
    margin: 0;
}

.modal-body {
    padding: 20px;
    overflow-y: auto; /* Gör texten scrollbar inuti kortet */
    color: #ddd;
    line-height: 1.6;
    font-size: var(--fs-base);
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- LAB: BAKGRUNDS-BIBLIOTEKARIE --- */
.academy-grid { position: relative; z-index: 10; }

/* HEROBLOCKETS SCEN. Har satt en vinkande emoji-hand i 10 rem pa 12 % opacitet - ren
   platshallare. Nu star The Yeast Librarian dar i stallet.

   Markupen ar TOM; switchLabPanel fyller den ur protocolFigures. Klistrade jag in svg:n
   i index.html skulle figuren finnas i tva kopior, och den som genereras av figures.py
   skulle tyst glida ifran den som star i markupen.

   SCENEN AR EN BAKGRUND, inte ett foremal i blocket. Klas: "nu ar jag mer nojd med mobil
   vy an pc-vy - kan vi gora samma dar, ta bort ringen och lata scenen smalta ihop med
   bakgrunden?" Ja - och det gor koden enklare pa kopet: bakgrundsbehandlingen blir
   GRUNDREGELN och mobilvyn justerar bara talen, i stallet for tva olika uppsattningar.

   Vagen hit gick over tre inramningar (tunn ram, sprojsat fonster, rund karm) och lika
   manga placeringar. Det som loste det var att sluta rama in bilden och i stallet lata
   den TONA UT: en mask som ar full styrka i nedre hogra hornet, dar ingen text ligger,
   och som slocknar mot ovre vanster dar rubriken star. Da satts styrkan av hornet i
   stallet for av det svagaste stallet.

   RINGEN AR DOLD har. Karmen ar --text-main, alltsa vit i morkt lage - bakom vit text
   ater den kontrasten. Och en bakgrund behover ingen ram: det var ramen som gjorde
   scenen till en upphangd tavla fran borjan. */
.academy-hero-scen:empty { display: none; }

.academy-hero-scen {
    position: absolute;
    right: -4%;
    bottom: -8%;
    width: 42%;
    max-width: 330px;
    opacity: 0.58;
    z-index: 0;

    /* Rutan sjalv tar inte emot klick, men det MALADE i svg:n gor det pa dator - da kan
       man klicka pa scenen for att spela om den, och cirkelns genomskinliga horn slapper
       igenom till heroblockets egen lankning. Bubblingen paverkas inte av
       pointer-events; den stanger bara av traffytan. */
    pointer-events: none;

    -webkit-mask-image: radial-gradient(circle at 100% 100%,
        #000 0%, #000 42%, rgba(0,0,0,0.35) 66%, transparent 84%);
    mask-image: radial-gradient(circle at 100% 100%,
        #000 0%, #000 42%, rgba(0,0,0,0.35) 66%, transparent 84%);
}

.academy-hero-scen svg { pointer-events: auto; cursor: pointer; }
.academy-hero-scen svg .yl-karm { display: none; }

/* Ljust lage tal mer: dar ar texten mork och scenen ljus, sa de drar at samma hall.
   I morkt lage lyfter scenens ljusa ytor bakgrunden mot den vita texten. */
body.light-mode .academy-hero-scen { opacity: 0.76; }

.academy-hero-innehall {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rubrikens och knappens matt bodde som INLINE-stilar i markupen, och en inline-stil gar
   inte att overskriva fran en mediefraga. De flyttades hit sa mobilvyn kan skriva om dem. */
.academy-hero-innehall h2 { font-size: var(--fs-xl); }

/* SELEKTORN BORJAR MED .academy-hero MED FLIT, och det ar inte kosmetik.
   
   Rad ~2121 star "TOTAL KNAPP-REMAKE (Sist i filen)" med selektorn
   'body .btn-primary, ..., body.light-mode .btn-primary' och kommentaren "vi lagger till
   body och body.light-mode for att skriva over allt gammalt skrap". Den satter width:
   100%, padding och border-radius.
   
   'body.light-mode .btn-primary' ar (0,2,1). En regel pa '.academy-hero-innehall
   .btn-primary' ar (0,2,0) och FORLORAR - men bara i LJUST lage, for den morka varianten
   av remaken ar 'body .btn-primary' (0,1,1) som forlorar mot (0,2,0).
   
   Det var darfor knappen betedde sig olika i de tva temana: i morkt blev den rund, i ljust
   stod den kvar bred med sin text OCH fick min pil ovanpa. Tidigare vann de har vardena
   for att de lag som INLINE-stil i markupen; nar jag flyttade dem till css:en for att
   mobilvyn skulle kunna skriva om dem, forlorade de striden i ljust lage.
   
   Tre klasser ger (0,3,0) och slar bada varianterna, i bada temana. */
.academy-hero .academy-hero-innehall .btn-primary {
    width: auto;
    padding: 10px 25px;
    border-radius: 8px;
}

/* MOBILVYN. Samma behandling som pa dator - scenen ar redan en bakgrund i grundregeln -
   bara andra tal: storre (66 % mot 42 %, for spalten ar smalare), langre ner i hornet,
   och utan klick.

   OKLICKBAR HAR, till skillnad fran pa dator: pa mobil ligger scenen UNDER texten, och ett
   klick pa den ytan ska oppna lektionen som resten av kortet - inte spela om.

   STORLEKEN SATTER OCKSA LAMPANS HOJD. Scenen ar forankrad i nedre hogra hornet, sa en
   mindre scen har sin OVERKANT langre ner medan banken stannar kvar i hornet. Det ar den
   ENDA spaken som sanker lampan utan att skjuta ut banken ur bilden - en flytt nedat tar
   hogen med sig ut ur kortet igen.

   66 -> 60 %. Nar overhanget minskade for att fa in platthogen foljde lampan med uppat,
   och Klas sag den ga in i styckets sista rad: "lampan hamnade for hogt." Halva atgarden
   ligger har, halva i figuren (YL_SKARM_Y sanktes 64 -> 74). Ingen av dem racker ensam:
   rummet har bara ett dussin enheter mellan skarmen och skapens overkant, och en scen som
   krymps hela vagen ner till lampans gamla hojd tappar en femtedel av sin storlek. */
@media (max-width: 768px) {
    /* OVERHANGET MATS I SCENENS EGEN HOJD, inte i heroblockets.

       'bottom: -12%' ar tolv procent av det BLOCK scenen ligger i, alltsa av heroblockets
       hojd - och den hojden satts av hur rubriken och stycket bryter. Pa Klas telefon blev
       det femtiotva pixlar, vilket ar en fjardedel av scenen: kapet gick rakt genom den
       vaxande platthogen. Klas: "den vaxande platthogen ar liiite utom bild."

       En translateY i procent raknas mot ELEMENTETS EGEN hojd, sa overhanget blir samma
       andel av bilden hur hog heron an ar. Det gor ocksa talet sprakoberoende: tyskan
       bryter rubriken pa tre rader dar svenskan tar tva, och med den gamla skrivningen
       flyttade det scenen.

       TIO PROCENT ar rakenskapen ur figuren: under hogens nederkant ligger 46 av 300
       enheter tom bank (YL_TOM_BANK i figures.py, minst 15 %). Tio procent far hanga ut,
       och da ligger hogen kvar innanfor med marginal. hero_check laser bada talen och
       kraver att det har ar mindre. */
    .academy-hero-scen {
        right: -7%;
        bottom: 0;
        transform: translateY(10%);
        width: 60%;
        max-width: none;
        opacity: 0.62;
    }
    .academy-hero-scen svg { pointer-events: none; cursor: default; }
    body.light-mode .academy-hero-scen { opacity: 0.78; }

    /* Chippet nagra snapp ner, sa hornet far luft uppat. En inline-span tar inte
       marginal - den maste bli inline-block forst. */
    .academy-hero-innehall > span:first-child {
        display: inline-block;
        margin-top: 12px;
    }

    /* KNAPPEN BLIR EN RUND IKON. Klas ville byta den breda skylten mot nagot mindre som
       signalerar "tryck har", i accentfarg sa den balanserar mot BORJA HAR. Det tar
       samtidigt bort en UPPREPNING: "BORJA HAR" och "KOM IGANG" ar samma instruktion.
    
       Rund, for att rimma med scenen bakom - cirkeln ar det som far den att lasa som en
       knapp och inte som en till skylt. 52 px ar over de 44 som kravs for en traffyta.
    
       TEXTEN LIGGER KVAR, dold med font-size: 0 och inte display: none: skarmlasare laser
       den fortfarande, sa knappen heter "Kom igang" for den som inte ser pilen - pa alla
       fem sprak, utan att nagot behover oversattas pa nytt. */
    .academy-hero .academy-hero-innehall .btn-primary {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        font-size: 0; /* fs:fast */

        /* NOLLAD BOKSTAVSSPARR, och det ar inte kosmetik. En dold textnod ar anda ett
           FLEXBARN. Med font-size 0 blir tecknen nollbreda - men body.light-mode
           .btn-primary satter letter-spacing: 2px, och en spärr i PIXLAR overlever
           font-size 0. Elva tecken holl da 22 px bredd, och justify-content: center
           centrerade "textnod + pil" tillsammans: pilen hamnade omkring 11 px for langt
           at hoger i ljust lage. Klas sag det. */
        letter-spacing: 0;
        word-spacing: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .academy-hero .academy-hero-innehall .btn-primary::after {
        content: '➔';
        font-size: 1.5rem; /* fs:fast */
        line-height: 1;
    }
}

.academy-librarian-bg {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -35%);
    width: 100%;
    max-width: 550px;
    pointer-events: none;
    opacity: 0.15;
    z-index: -1;
}

.academy-librarian-bg img { width: 100%; height: auto; object-fit: contain; }

/* Extra knappar för labbet */
/* TAND info-knapp. Klassen sattes redan av vaxlarna som TILLSTANDSMARKOR (den ar det
   enda som inte andras nar fargen gor det) - nu bar den ocksa utseendet, sa ett tillstand
   inte behover skrivas som inline-stil pa fyra stallen. */
.info-circle-btn.info-open,
.info-icon.info-open {
    background: var(--info-text);
    color: var(--info-glyph);
}

.info-circle-btn {
    background: color-mix(in srgb, var(--info-text) 15%, transparent);
    border: 1px solid var(--info-text);
    color: var(--info-text);
    border-radius: 50%;
    /* 30 px, inte 26. En besokare missade i:et helt pa PC - dar ar ytan bred och cirkeln
       liten i forhallande till den. Maten star numera BARA har: Biblioteket och
       Profileraren hade samma knapp med matten inskrivna som inline-stil, alltsa tre
       kopior som skulle andras i takt. Livevyns knapp ar den trangaste platsen - den
       sitter i oled-kortets ovankant - sa andras talet ska den kontrolleras dar. */
    width: 30px; height: 30px;
    flex-shrink: 0; /* Förblir en perfekt cirkel även när titeln bredvid är lång (t.ex. franska) */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: bold;
    font-family: 'Lexend', sans-serif;
    font-size: 0.95rem; /* fs:fast */
    line-height: 1;
    /* EN PIXEL NER. Klas sag att glyfen inte stod mitt i cirkeln, och det stammer: matt i
       appen ligger blackets mittpunkt pa 14,0 px medan cirkelns mitt ar 15,0. Lexends "i"
       har prick men inget underhang (ascent 13, descent 0), sa flexens centrering - som
       centrerar RADBOXEN, inte blacket - lamnar den hogt. Paddingen ar dubbel mot felet:
       med border-box krymper innehallsytan uppifran, sa mitten flyttas halva vagen. */
    padding: 2px 0 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}



.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #333;
}

.modal-header h2 {
    margin: 0;
    color: var(--accent-color, #00e5ff);
    font-size: var(--fs-lg);
}

.close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 2rem; /* fs:fast */
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
    overflow-y: auto; /* Gör texten skrollbar om den är lång */
    color: #ddd;
    line-height: 1.6;
    font-size: var(--fs-base);
}

.modal-body h3 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: var(--fs-md);
}

.modal-body p {
    margin-bottom: 15px;
}

.modal-body ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.modal-body li {
    margin-bottom: 5px;
}

/* --- THE YEAST LIBRARIAN ILLUSTRATION (TRANSPARENT PNG) --- */

.librarian-illustration {
    display: block;
    max-width: 100%;
    width: 200px;
    height: auto;
    margin: 0 auto 25px auto;
    /* Ingen border-radius eller bakgrund behövs nu, bilden smälter in av sig själv! */
}

/* --- LOGIK FÖR TEMAVÄXLING (HÅLL DENNA KVAR) --- */

/* 1. Standard (Dark Mode - default) */
.lib-light { display: none !important; }
.lib-dark { display: block !important; }

/* 2. Light Mode (När 'body' har klassen .light-mode) */
body.light-mode .lib-dark { display: none !important; }
body.light-mode .lib-light { display: block !important; }


/* --- THE ARCANE LAB PROFILER STYLES --- */

/* Sekundär knapp (för Add Dry Hops) */
.btn-secondary {
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: 'Lexend', sans-serif;
}

.btn-secondary:hover {
    border-color: #888;
    color: #fff;
    background-color: rgba(255,255,255,0.05);
}

/* Aktiv stil för knappen när linjen är synlig */
.btn-secondary.active {
    background-color: rgba(0, 229, 255, 0.1);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

/* Tvinga fram en "drag-hand" när man hovrar över graf-canvasen */
#lab-chart {
    cursor: default; 
}

/* --- EGNA PROFILER (i Biblioteket) --- SEKUNDÄRFÄRGEN sedan 2026-10-15 (Klas). Förr inskrivet
   lila (#b142ff), som valdes mot limegrön accent och drog åt ett annat håll mot halm. Nu samma
   regel som "Från grunden" i Profileraren: det du gjort själv har sekundärfärgen (halm -> salvia,
   cyan -> lila osv.). Rubriken i --accent-secondary-ink: rak i mörkt läge, mörknad i ljust
   (setAccent/accentSomText). theme_check mäter alla sekundärfärger mot kortet. */
/* RAMEN DÄMPAD (Klas 2026-10-22): ram, stjärna, versaler och kurva sa alla "din profil", och tre
   klart gula ramar tog över sektionen. Kurvan bär nu skillnaden; ramen är en blandning med den
   vanliga kortkanten och lyser upp först vid hover/markering. Bredden är kvar (3 px, inget hopp). */
.yeast-card.custom-profile {
    border-color: color-mix(in srgb, var(--accent-secondary) 45%, #333);
    background: color-mix(in srgb, var(--accent-secondary) 6%, transparent);
}

/* NAMNET SOM KATALOGENS (Klas 2026-10-19, danska testaren: "egen grön färg och spärrade
   versaler som inte finns någon annanstans"). Förr namnet i sekundärfärgen, vikt 800 och 1 px
   spärr - ovanpå ramen och tonen var färgen på tre ställen. Nu bär bara ★ den, som stjärnan i
   jästkortets "Dina profiler". Versalerna står kvar: det är namnet på enhetens skärm. */
.egen-stjarna { color: var(--accent-secondary-ink); }

/* När man drar musen över, eller stjärnmarkerar den */
.yeast-card.custom-profile:hover,
.yeast-card.custom-profile.selected {
    background: color-mix(in srgb, var(--accent-secondary) 15%, transparent) !important;
    border-color: var(--accent-secondary) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-secondary) 30%, transparent);
}

/* KURVAN SOM VATTENMÄRKE (Klas 2026-10-22, library.js egenKurva): profilens egen temperaturkurva
   längs kortets nederkant. isolation ger kortet en egen stapelordning, så z-index -1 lägger
   kurvan OVANPÅ kortets botten men UNDER namnet. Ingen overflow:hidden på kortet - då klipps
   ta-bort-krysset (top/left -10px); kurvan klipps i sin egen ruta i stället. */
.yeast-card.custom-profile { isolation: isolate; }
.egen-kurva {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 72%;
    z-index: -1;
    pointer-events: none;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}
.egen-kurva polyline {
    fill: none;
    stroke: var(--accent-secondary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.38;
}
.egen-kurva polygon { fill: var(--accent-secondary); opacity: 0.10; stroke: none; }
.light-mode .egen-kurva polyline { stroke: var(--accent-secondary-ink); opacity: 0.4; }

/* Ljust läge: kanten i den mörknade varianten, så den syns mot vitt även med halm. */
.light-mode .yeast-card.custom-profile {
    background: color-mix(in srgb, var(--accent-secondary) 8%, #ffffff);
    border-color: color-mix(in srgb, var(--accent-secondary-ink) 45%, #eee);
}

/* --- DELETE BUTTON FOR CUSTOM PROFILES --- */
.delete-custom-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 24px;
    height: 24px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* fs:fast */
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    z-index: 100; /* Se till att den ligger ovanpå allt annat på kortet */
    transition: all 0.2s ease;
    border: 2px solid #000; /* Gör den extra tydlig mot bakgrunden */
}

/* Gör krysset lite större och argare när man hovrar på PC */
.delete-custom-btn:hover {
    transform: scale(1.2);
    background: #ff0000;
}

/* VIKTIGT: Se till att kortet fattar att krysset ska sitta fast i dess hörn */
.yeast-card {
    position: relative; /* Detta krävs för att 'absolute' positionering på krysset ska fungera */
}

/* --- 15. TOTAL KNAPP-REMAKE (Sist i filen) --- */

/* Vi lägger till 'body' och 'body.light-mode' för att skriva över allt gammalt skräp */
/* HUVUDKNAPPARNA ÄR ACCENTFÄRGADE i båda temana (Klas 2026-10-15). Förr vita: i ljust läge vitt
   på en nästan vit sida (#f0f0f0), och Spara/Synka hade fått egna regler för att bli accent - så
   huvudknapparna såg olika ut från sida till sida. Nu EN regel. Svart text bär på alla sju
   accenterna (theme_check). */
body .btn-primary,
body .sync-button,
body #btn-save-profile,
body.light-mode .btn-primary {
    width: 100%;
    background: var(--accent-color);
    color: #111;
    border: 2px solid var(--accent-color);
    padding: 16px 20px;
    border-radius: 12px;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 15px color-mix(in srgb, var(--accent-color) 25%, transparent);
    margin-top: 10px;
    outline: none;
    display: block;
}

/* Specifik stil för Sync-knappen (Cyan-aktig glow) */
body .sync-button {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Hover-effekter för alla knappar */
body .btn-primary:hover,
body .sync-button:hover,
body #btn-save-profile:hover {
    background: #000;
    color: var(--accent-text);
    transform: translateY(-3px);
    box-shadow: 0 0 25px color-mix(in srgb, var(--accent-color) 40%, transparent);
    border-color: var(--accent-color);
}
/* Ljust läge: accenttexten är mörknad där och syns inte på svart - knappen behåller sin färg
   och mörknar lite i stället (filter-regeln under LIGHT MODE FIX: KNAPPAR & HOVER). */
body.light-mode .btn-primary:hover,
body.light-mode .sync-button:hover,
body.light-mode #btn-save-profile:hover {
    background: var(--accent-color);
    color: #111;
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* RAMKNAPPEN (.btn-ram): en huvudknapp med bara ram, där två fyllda accentknappar stod för nära
   varandra (Klas 2026-10-15). Sedan 2026-10-18 är det VÄNTELISTANS "Notify me" som har ram och
   "Start here" som är fylld - den gratis vägen in är sidans primära handling, inte en produkt
   som ännu inte finns (dansk testare, formgivare). Ram och text i
   --accent-text: accenten i mörkt läge, mörknad i ljust (en halmgul ram syns inte mot vitt). */
body .btn-primary.btn-ram,
body.light-mode .btn-primary.btn-ram {
    background: transparent;
    color: var(--accent-text);
    border-color: var(--accent-text);
    box-shadow: none;
}
body .btn-primary.btn-ram:hover,
body.light-mode .btn-primary.btn-ram:hover {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-text);
    border-color: var(--accent-text);
    box-shadow: none;
    filter: none;
}

/* Hover för just Sync-knappen */
body .sync-button:hover {
    color: var(--accent-text);
    border-color: var(--accent-color);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5);
}

/* --- 16. SWIPE ANIMATIONER (Uppgraderad med Scale) --- */
@keyframes slideInFromRight {
    0% { 
        transform: translateX(80px) scale(0.96); /* Startar lite längre bort och är 4% mindre */
        opacity: 0; 
    }
    100% { 
        transform: translateX(0) scale(1); /* Landar i originalstorlek */
        opacity: 1; 
    }
}

@keyframes slideInFromLeft {
    0% { 
        transform: translateX(-80px) scale(0.96); 
        opacity: 0; 
    }
    100% { 
        transform: translateX(0) scale(1); 
        opacity: 1; 
    }
}

.slide-in-right {
    animation: slideInFromRight 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
    transform-origin: top center;
}

.slide-in-left {
    animation: slideInFromLeft 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
    transform-origin: top center;
}

/* ========================================= */
/* --- TVINGA RULLISTAN KLICKBAR PÅ PC --- */
/* ========================================= */
#view-lab #profile-inputs {
    position: relative !important;
    z-index: 500 !important; /* Tvingar hela input-raden att ligga överst */
    pointer-events: auto !important;
}

#custom-base-yeast {
    position: relative !important;
    z-index: 501 !important; /* Tvingar själva rullistan ännu ett snäpp upp */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Animation för landningssidan */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade {
    opacity: 0; /* Startar osynlig */
    animation: fadeUp 0.8s ease-out forwards;
}

/* Bakåt till en vy: ingen ny intoning (ui.js showView, franBakat). */
.utan-intoning .animate-fade,
.utan-intoning.animate-fade {
    animation: none !important;
    opacity: 1 !important;
}

/* Tidsfördröjning för olika element */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.8s; }

/* --- SETTINGS NY DESIGN --- */
.settings-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

body.light-mode .settings-group {
    background: #fff;
    border-color: #eee;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #222;
}

.settings-row:last-child { border-bottom: none; }

body.light-mode .settings-row { border-bottom-color: #eee; }
/* Accentfärgen i mobilen: rubriken på en egen rad och alla sju prickarna i ett band under
   (Klas 2026-10-15). Bredvid rubriken bröts de i två rader. */
@media (max-width: 600px) {
    .settings-row-accent { flex-direction: column; align-items: flex-start; gap: 12px; }
    .settings-row-accent .color-picker { justify-content: flex-start; }
}

/* INSTALLERA APPEN (Klas 2026-10-29). Raden syns bara dar den kan gora nagot: med Chromes
   installationshandelse, eller pa iPhone/iPad dar knappen visar Safaris tva steg. */
.settings-install-desc {
    font-size: var(--fs-sm);
    color: var(--text-dim, #888);
    margin: 0;
    line-height: 1.4;
    padding: 15px 20px 0;
}
.settings-install-ios {
    padding: 0 20px 15px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-main);
}
.settings-install-ios ol { margin: 0 0 8px; padding-left: 1.3em; }
.settings-install-ios li { margin-bottom: 6px; }
.settings-install-ios p { margin: 0; color: var(--text-dim, #888); }

.settings-label {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-main);
}

/* Accentfärg-prickarna */
.color-picker {
    display: flex;
    gap: 12px;
    /* Sju prickar sedan 2026-10-15: bryts hellre än att gå utanför en smal telefon. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-dot:hover { transform: scale(1.2); }
.color-dot.active {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

body.light-mode .color-dot.active { border-color: #000; }

/* Kompakt Theme-switch */
.theme-toggle-compact {
    display: flex;
    background: #111;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #333;
}

body.light-mode .theme-toggle-compact { background: #eee; border-color: #ccc; }

.theme-btn-small {
    padding: 6px 12px;
    font-size: var(--fs-xs);
    font-weight: 800;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #666;
    cursor: pointer;
    text-transform: uppercase;
}

.theme-btn-small.active {
    background: var(--accent-color);
    color: #000;
}

/* ========================================== */
/* KRAFTFULL VÄNSTERJUSTERING PÅ PC (769px+)  */
/* ========================================== */
@media (min-width: 769px) {
    /* 1. Justera sektionen så att rubriken hamnar längst till vänster i 800px-boxen */
    section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 2. Flytta headern så den linjerar med resten (valfritt, men ger renast look) */
    .library-header {
        padding-left: 0 !important;
    }

    /* 3. Nollställ vänster-padding på gridet så korten nuddar samma osynliga linje som rubriken */
    .yeast-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-start !important; /* Tvingar korten att börja ritas från vänster */
        display: grid !important;
    }

    /* 4. Sökfältet och grafen ska också krama vänsterkanten */
    #yeast-search,
    .chart-section,
    #chart-placeholder {
        margin-left: 0 !important;
        width: 100% !important; /* Se till att de fyller hela sektionens bredd */
        max-width: 100% !important;
    }
    #profile-inputs {  /* <--- Denna rad är ny! */
    margin-left: 0 !important;
    margin-right: 0 !important; /* Säkerställ att den sträcker sig hela vägen */
    width: 100% !important; 
    max-width: 100% !important;
}

    /* 5. Om du vill ha lite luft från skärmkanten på PC (eftersom vi nollställde sektionen) */
    body {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ========================================= */
/* --- RUBRIKER MED INFO-IKON (FLEXBOX)  --- */
/* ========================================= */
.header-with-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* Detta styr exakt hur nära ikonen ligger sista bokstaven! */
    margin-bottom: 20px; /* Behåller luft ner till innehållet under */
}

.info-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0; /* Förblir en perfekt cirkel även när titeln bredvid är lång (t.ex. franska) */
    fill: var(--info-text);    /* info, inte accent - se --info-text i :root */
    color: var(--info-text);   /* Backup om du använder text/font-ikoner */
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Finjustering ifall ikonen har inbyggd osynlig luft */
    margin-top: -2px; 
}

.info-icon:hover {
    filter: drop-shadow(0 0 8px var(--info-text));
    transform: scale(1.1);
}

/* Ingen egen ljust-lage-regel behovs: --info-text har ett varde per tema, sa ikonen
   morknar av sig sjalv. Har stod en TOM regel med en lapp om att man kunde andra fargen
   har - alltsa en plats att gora fel pa, utan nagon plats att gora ratt pa. */

/* ========================================== */
/* --- INFO BOXES (PROFILER & LIBRARY)    --- */
/* ========================================== */
#library-info-box,
#profiler-info-box {
    /* Den svaga bakgrundstonen (5 % färgstyrka) */
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
    
    /* Den solida kanten till vänster, i accentfärgen */
    border-left: 4px solid var(--accent-color);
    
    /* Luft inuti boxen så texten andas */
    padding: 15px;
    
    /* Lite avstånd från rubriken ovanför */
    margin-top: 15px;
    
    /* Mjukt rundade hörn på högersidan (vänstersidan är platt mot kanten) */
    border-radius: 0 8px 8px 0;
    
    /* Finjustering av texten inuti boxen */
    font-size: var(--fs-base);
    line-height: 1.6;
}

#academy-info-box {
    background-color: var(--accent-tint); 
    border-left: 4px solid var(--accent-color);
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 15px;
    margin-top: 10px;
    font-size: var(--fs-base);
    line-height: 1.5;
}

body.light-mode #library-info-box,
body.light-mode #profiler-info-box,
body.light-mode #academy-info-box {
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent); 
    color: #111;
}

body.light-mode #library-info-box,
body.light-mode #profiler-info-box,
body.light-mode #academy-info-box {
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent); 
    color: #111;
}

/* Light Mode: Vi gör bakgrunden LITE starkare (10%) i ljust läge för att den ska synas bra mot det vita */
body.light-mode #library-info-box,
body.light-mode #profiler-info-box {
    background-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

/* ========================================== */
/* --- YEAST ACADEMY (HERO & CARDS)       --- */
/* ========================================== */

/* Hero Container (Standard för mobil: Staplad) */
.academy-hero {
    display: flex;
    flex-direction: column-reverse; /* Tvingar bilden att hamna överst på mobil! */
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.academy-hero-text {
    text-align: center;
}

/* Bilden krymper lite på mobilen så den inte tar över */
.academy-hero-image .librarian-illustration {
    width: 180px;
    margin: 0 auto;
}

/* --- Academy Grid (Korten) --- */
.academy-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 30px 20px;
}

/* Själva Kurs-korten */
.academy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.academy-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.academy-card-icon {
    font-size: 2rem; /* fs:fast */
    flex-shrink: 0;
}

.academy-card-content {
    flex: 1;
    min-width: 0;
}

.academy-card-content h4 {
    margin: 0 0 5px 0;
    color: var(--text-main);
    font-size: var(--fs-md);
    font-weight: 800;
    /* Låt bindestrecks-avstavning (hyphens) sköta radbrytningen så långa ord
       som "Fermentation" bryts snyggt med bindestreck ("Fermenta-tion") istället
       för mitt i ordet utan tecken. overflow-wrap är bara ett skyddsnät för ord
       helt utan giltiga avstavningspunkter. Kräver rätt lang på <html> (sätts per språk). */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.academy-card-content p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.academy-card-arrow {
    color: var(--accent-text);
    font-size: 1.5rem; /* fs:fast */
    font-weight: bold;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.academy-card:hover .academy-card-arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* --- LIGHT MODE SUPPORT FÖR KORTEN --- */
body.light-mode .academy-card {
    background: #ffffff;
    border-color: #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.light-mode .academy-card:hover {
    border-color: var(--accent-color);
    background: #fdfdfd;
}


/* ========================================== */
/* --- ACADEMY: PC LAYOUT (Bred Skärm)    --- */
/* ========================================== */
@media (min-width: 769px) {
    /* På PC lägger vi dem bredvid varandra! */
    .academy-hero {
        flex-direction: row; /* Text vänster, Bild höger */
        justify-content: space-between;
        align-items: center;
        padding: 40px 20px;
    }

    .academy-hero-text {
        text-align: left; /* Vänsterställ texten på PC */
        flex: 1; /* Låt texten ta upp den plats den behöver */
        padding-right: 40px; /* Ge lite luft mellan text och bild */
    }

    /* Gör bilden lite större på PC */
    .academy-hero-image .librarian-illustration {
        width: 250px;
        margin: 0; /* Tar bort centreringen */
    }

    /* Gör om listan till ett 2-kolumns rutnät på PC! */
    .academy-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

/* ========================================== */
/* --- ACADEMY: LEKTIONS-DESIGN (INSIDAN) --- */
/* ========================================== */

.back-btn-academy {
    background: transparent;
    border: none;
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: var(--fs-base);
    cursor: pointer;
    padding: 0;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.back-btn-academy:hover {
    transform: translateX(-5px); /* Studsar lite snyggt till vänster när man hovrar */
}

/* Utrustningslådan */
.module-ingredients {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
}

.module-ingredients ul {
    list-style: none; /* Tar bort tråkiga standard-prickar */
    padding: 0;
    margin: 0;
}

.module-ingredients li {
    color: var(--text-dim);
    margin-bottom: 10px;
    font-size: var(--fs-base);
    border-bottom: 1px dashed #333;
    padding-bottom: 10px;
}

.module-ingredients li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.module-ingredients strong {
    color: var(--text-main);
}

/* Steg-för-steg listan */
.step-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* De runda, snygga numren */
.step-number {
    background: var(--accent-color);
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 0.9rem; /* fs:fast */
    flex-shrink: 0;
    margin-top: 2px;
}

.step-text {
    color: var(--text-dim);
    line-height: 1.6;
    font-size: var(--fs-base);
}

.step-text strong {
    color: var(--text-main);
    display: block;
    margin-bottom: 3px;
}

/* Pro-Tip Rutan (Samma känsla som info-boxarna) */
.module-protip {
    background-color: var(--accent-tint); 
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 40px;
    margin-bottom: 40px;
    color: var(--text-main);
    font-size: var(--fs-base);
    line-height: 1.6;
}

/* Light Mode Support */
body.light-mode .module-ingredients {
    background: #ffffff;
    border-color: #ddd;
}
body.light-mode .module-ingredients li { border-bottom-color: #eee; }
body.light-mode .module-protip {
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: #111;
}

/* ========================================== */
/* --- LAB TABS (PILL DESIGN)             --- */
/* ========================================== */

.lab-tabs {
    display: flex;
    gap: 15px; /* Samma avstånd som i 'Profiler' */
    margin-top: 15px;
    margin-bottom: 25px;
}

.lab-tab-pill {
    /* Bas-designen (Dämpad färg när den INTE är aktiv) */
    background: transparent;
    border: 1px solid #444; /* Lite mörkare grå för den inaktiva kanten */
    color: #888; /* Dämpad grå färg */
    padding: 10px 20px; /* Snygg 'Pill'-storlek */
    border-radius: 30px; /* Gör den helt rund */
    font-size: var(--fs-xs); /* Samma som i 'Profiler' */
    font-weight: 800; /* Tjock, fet text för att matcha stilen */
    cursor: pointer;
    text-transform: uppercase; /* Alltid stora bokstäver */
    letter-spacing: 1px; /* Lite luft mellan bokstäverna */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover-effekt för PC */
.lab-tab-pill:hover {
    border-color: #666;
    color: #aaa;
}

/* AKTIV TABB (accentfärgad) */
.lab-tab-pill.active {
    border-color: var(--accent-color); /* Kanten följer accenten */
    color: var(--accent-text); /* Accentfärgad text */
    background: color-mix(in srgb, var(--accent-color) 5%, transparent); /* En extremt svag bakgrundston */
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 15%, transparent); /* En mjuk glöd */
}

/* Light mode support */
body.light-mode .lab-tab-pill {
    border-color: #ccc;
    color: #666;
}

body.light-mode .lab-tab-pill.active {
    background: #fdfdfd;
    border-color: var(--accent-color);
    color: var(--accent-text);
}

/* ========================================== */
/* --- SVÄVANDE INFO-RUTOR (OVERLAYS) --- */
/* ========================================== */

.floating-info-box {
    position: absolute !important;
    top: 100% !important;      /* Placerar rutan precis under rubriken/knappen */
    left: 0 !important;
    z-index: 9999 !important;  /* Tvingar den över grafer, kort och Bibliotekarier */
    
    /* premium, glas-liknande mörkgrön design */
    background-color: color-mix(in srgb, var(--accent-color) 8%, rgba(6, 6, 6, 0.98)) !important; /* Mycket mörk tint av accenten */
    backdrop-filter: blur(10px) !important;              /* Frostad glaseffekt */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important; /* Tung, snygg skugga */
    
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent) !important; /* Subtil ram */
    border-left: 4px solid var(--accent-color) !important;            /* Accentkant */
    border-radius: 12px !important;                       /* Lite mjukare hörn */
    padding: 20px !important;
    
    /* Textstyling för premium-känslan */
    font-size: var(--fs-base) !important;
    line-height: 1.6 !important;
    margin-top: 15px !important; 
    color: rgba(255, 255, 255, 0.9) !important; /* Nästan vit text */
    
    /* PC-bredd */
    width: 450px !important; 
}

/* Anpassning för mobiler */
@media (max-width: 600px) {
    .floating-info-box {
        width: 300px !important; /* Smalare så den ryms på små skärmar */
    }
}

/* Light mode-stöd */
body.light-mode .floating-info-box {
    background-color: color-mix(in srgb, var(--accent-color) 10%, rgba(255, 255, 255, 0.98)) !important; /* Ljus, krämfärgad ton av accenten */
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent) !important;
    border-left-color: var(--accent-color) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    color: #222 !important;
}

/* ========================================== */
/* --- LAB: BAKGRUNDS-BIBLIOTEKARIE --- */
/* ========================================== */

/* Gör griden till containern för absolut positionering */
.academy-grid {
    position: relative !important;
    z-index: 10 !important; /* Grundnivå för innehållet i denna grid */
}

/* Containern för bakgrundsbilden */
.academy-librarian-bg {
    position: absolute !important;
    /* FAST AVSTAND FRAN TOPPEN, inte procent av rutnatet.
       Hon satt pa top:60% av .academy-grid - och det rutnatet innehaller ALLA lektionskort.
       Hennes lage berodde alltsa pa hur manga lektioner som finns och hur langa texterna ar
       i det aktiva spraket: 550 px ner pa PC men 968 px pa mobil, och tre nya lektioner
       flyttar henne 70 px respektive 209 px langre ner. Hon "hangde med nedat" for att hon
       var uppmatt i innehall.
       Centrerad hade halverat driften men inte tagit bort den. Ett fast tal gor laget
       identiskt oavsett antal kort och sprak. */
    top: 180px !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    
    width: 100% !important;  
    max-width: 550px !important; /* Spärr så hon inte blir extremt massiv på stora skärmar */
    height: auto !important;
    
    pointer-events: none !important; /* Klicka IGENOM bilden */
    opacity: 0.15 !important;        /* "Ghosted" effekt */
    
    z-index: -1 !important;          /* Tryck bilden BAKOM korten */
}

/* Skala själva bilderna inuti containern */
.academy-librarian-bg img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* Säkerställer att bilden skalar snyggt */
}

/* Valfritt: Lite lägre opacitet i light mode för bättre textkontrast */
body.light-mode .academy-librarian-bg {
    opacity: 0.1 !important;
}

/* Säkerställ att korten/knapparna sitter stadigt framför */
.academy-card {
    position: relative !important;
    z-index: 20 !important; /* Högre z-index än bakgrundsbilden */
    background-color: var(--card-bg) !important; /* Säkerställ att korten har en solid bakgrund */
}

/* ========================================== */
/* --- MOBILANPASSNING FÖR LABBET (NY) --- */
/* ========================================== */

@media (max-width: 768px) {
    /* 1. TVÅ KOLUMNER PÅ MOBIL */
    .academy-grid {
        display: grid !important;
        /* minmax(0, 1fr) är magin som tvingar in dem exakt 50/50 utan att spränga skärmen */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 10px !important; /* Lite tajtare avstånd på mobil */
    }

    /* 2. KRYMP KORTEN OCH TEXTEN FÖR ATT FÅ PLATS */
    .academy-card {
        padding: 12px 10px !important; /* Mindre luft inuti */
        gap: 8px !important; 
        align-items: flex-start !important; /* Tryck upp ikonen till toppen */
    }

    .academy-card-icon {
        font-size: 1.4rem !important; /* fs:fast */ /* Mindre ikon */
        margin-top: 2px;
    }

    .academy-card-content h4 {
        font-size: var(--fs-sm) !important; /* Mindre rubrik */
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    /* Klipp av beskrivningen snyggt efter 2 rader med "..." */
    .academy-card-content p {
        font-size: var(--fs-xs) !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Max 2 rader på mobil */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Göm pilen helt på mobilen för att spara värdefull plats */
    .academy-card-arrow {
        display: none !important; 
    }

    /* 3. VATTENSTÄMPELN (BIBLIOTEKARIEN) */
    /* Vi tvingar henne att vara ett stort spöke bakom korten, precis som på PC */
    .academy-librarian-bg {
        position: absolute !important;
        /* Samma skal som pa PC - se kommentaren dar. Pa mobil ar rutnatet nastan dubbelt
           sa hogt, sa procenten slog varst har: 968 px ner i listan. */
        top: 220px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 110% !important; /* Låt henne blöda ut lite utanför kanterna för max effekt */
        max-width: none !important; 
        height: auto !important;
        opacity: 0.1 !important; /* Mycket subtil (10%) så texten går att läsa */
        z-index: -1 !important; 
        pointer-events: none !important;
        display: block !important;
    }
}

/* --- MOBILANPASSNING (Skärmar upp till 768px bredd) --- */
@media (max-width: 768px) {
    /* 1. "i"-knappen i demoläget.
       INGEN transform här: den gamla `translate(-10px,-10px)` var intrimmad för när
       knappen låg absolutpositionerad på en procentsats. Nu ligger den i flödet
       (flexraden .device-name-display.with-demo-info) och en knuff uppåt sköt in den
       i kortets ram — men bara på mobil, vilket gjorde felet svårt att hitta.
       `position: relative` MÅSTE vara kvar: klickytan nedan (::after) är absolut och
       ankras till knappen. Utan den spänner den över hela kortet och slukar tryck. */
    #start-demo-btn {
        position: relative;
        z-index: 100 !important; /* Tvingar knappen att ligga över alla andra osynliga rutor */
        cursor: pointer;
    }

    /* Skapa en osynlig sköld runt knappen som gör klickytan 20 pixlar större på alla håll, 
   utan att knappen faktiskt ser större ut! Detta är magi för mobilskärmar. */
#start-demo-btn::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    z-index: 101;
}

/* Gör demo-skylten lite nättare på mobila skärmar */
    #demo-tour-tooltip {
        padding: 6px 12px;
        max-width: 180px; /* Tvingar den att inte bli för bred */
    }
    #demo-tour-text {
        font-size: var(--fs-sm); /* Krymper texten lite så den får plats */
    }

}

/* ========================================= */
/* --- INTERAKTIVT KUPIGT ÖLGLAS (HOME) --- */
/* ========================================= */
.glass-container {
    width: 80px;
    height: 105px;
    flex-shrink: 0; /* Glaset får aldrig krympas av flexbox när titeln är lång (t.ex. franska "LEVURE") */
    cursor: pointer;
    position: relative;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.1s ease;
}

.glass-container:active { transform: scale(0.95) translateY(2px); }

/* Ölfärgen delas med kolven i Live: samma variabel, samma val (OLSTILAR i ui.js). */
.glass-container { color: var(--beer-color, #e8992e); }
.glass-container:focus-visible,
.carboy-wrapper:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; border-radius: 8px; }
.carboy-wrapper:focus:not(:focus-visible) { outline: none; }

/* "SKAL!" nar glaset ar tomt. Tonar upp ovanfor glaset under pausen fore pafyllningen.
   Pausen ar slumpad (0,25-5 s), sa animationen ar kort nog att hinnas med i den kortaste. */
.glass-cheers {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    font: 800 var(--fs-base) 'Lexend', sans-serif;
    color: var(--text-main);
    white-space: nowrap;
    pointer-events: none;
    animation: glassCheers 1.5s ease-out forwards;
}
@keyframes glassCheers {
    0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.85); }
    20%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    70%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -22px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .glass-cheers { animation: glassCheersStill 1.5s linear forwards; }
    @keyframes glassCheersStill { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* STORA GLASET (storglas.js): hela skarmen, bara en canvas. Bakgrunden ritas i canvasen,
 * sa rutan sjalv ar genomskinlig och kan tona upp. touch-action: none - sidan ska varken
 * skrolla eller zooma under glaset. */
#storglas {
    position: fixed;
    inset: 0;
    z-index: 10050;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
#storglas canvas { display: block; width: 100%; height: 100%; }
#storglas .storglas-skal {
    position: absolute;
    left: 50%;
    top: 12%;
    font: 800 2.6rem 'Lexend', sans-serif; /* fs:fast */
    color: var(--text-main);
    white-space: nowrap;
    pointer-events: none;
    animation: glassCheers 1.5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
    #storglas .storglas-skal { animation: glassCheersStill 1.5s linear forwards; }
}
/* SERVITÖRSPROVET (storglas.js). Knappen längst ner, räknaren upptill, resultatet i mitten.
 * Accentfyllning med #111, som filterknapparna; kortet på panelfärgen så det tål båda temana. */
#storglas .storglas-spel-knapp {
    position: absolute;
    left: 50%;
    bottom: max(4%, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: var(--accent-color);
    color: #111;
    font: 700 var(--fs-base) 'Lexend', sans-serif;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
#storglas .storglas-spel-glas { width: 1.05em; height: 1.55em; flex: none; }
/* SLÅ PÅ LUTNING (storglas.js lovBygg, bara iPhone innan sensorn mäter). Överst, så den inte
 * krockar med "Bär det!" nere; ram i stället för fyllning - den är ett steg före, inte spelet. */
#storglas .storglas-lov-knapp {
    position: absolute;
    left: 50%;
    top: max(5%, env(safe-area-inset-top));
    transform: translateX(-50%);
    padding: 10px 20px;
    border: 2px solid var(--accent-color);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--accent-text);
    font: 700 var(--fs-base) 'Lexend', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
body.light-mode #storglas .storglas-lov-knapp { background: rgba(255, 255, 255, 0.85); }
#storglas .storglas-hud {
    position: absolute;
    left: 0; right: 0;
    top: max(4%, env(safe-area-inset-top));
    text-align: center;
    color: var(--text-main);
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
#storglas .storglas-hud-tal { font: 800 var(--fs-xl) 'Lexend', sans-serif; }
#storglas .storglas-hud-rad { font: 600 var(--fs-base) 'Lexend', sans-serif; opacity: 0.85; margin-top: 4px; }
#storglas .storglas-kort {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(84vw, 340px);
    padding: 22px 20px 18px;
    border-radius: 16px;
    background: #1a1a1a;   /* som .ym-modal-content - --calc-panel är halvgenomskinlig, ölet lyste igenom */
    border: 1px solid var(--calc-line);
    color: var(--text-main);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.light-mode #storglas .storglas-kort { background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
#storglas .storglas-kort-pct { font: 800 3rem 'Lexend', sans-serif; /* fs:fast */ color: var(--accent-text); line-height: 1.1; }
#storglas .storglas-kort-rad { margin-top: 6px; font: 500 var(--fs-base) 'Lexend', sans-serif; }
#storglas .storglas-kort-niva { margin-top: 10px; font: 700 var(--fs-md) 'Lexend', sans-serif; }
#storglas .storglas-kort-knappar { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
#storglas .storglas-kort-knappar button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-text);
    font: 700 var(--fs-base) 'Lexend', sans-serif;
    cursor: pointer;
}
#storglas .storglas-kort-knappar button[data-spel="igen"] { background: var(--accent-color); color: #111; }

/* Glasets outline */
.glass-outline {
    stroke: rgba(255,255,255,0.25);
    transition: stroke 0.3s ease;
}
body.light-mode .glass-outline { stroke: rgba(0,0,0,0.3); }

/* --- ANIMATIONS-LOGIK --- */
#interactive-beer-glass .beer-liquid {
    fill: currentColor;
    transition: color 0.3s ease; 
}

.liquid-group {
    /* Ändra till 100px så att det alltid startar tomt/i botten! */
    transform: translateY(100px); 
    
    /* Vi kan ta bort 'transition' raden helt, 
       eftersom vi numera använder renodlade @keyframes-animationer för allt! */
}

/* 1. Tömning (Tvingad hastighet med keyframes!) */
.glass-container.anim-drain .liquid-group {
    animation: drainGlassDown 2.0s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes drainGlassDown {
    0%   { transform: translateY(0); }
    100% { transform: translateY(100px); }
}

/* Påfyllning (OBS: All delay styrs nu från JavaScriptet, precis som vi bestämde!) */
.glass-container.anim-fill .liquid-group {
    animation: fillGlassUpPosition 2.0s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@keyframes fillGlassUpPosition {
    0%   { transform: translateY(100px); }
    80%  { transform: translateY(0); }
    85%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* --- ORDBILDEN: SOUL OF BEER, där U:et är glaset (Klas 2026-10-18) --- */
.yeast-title {
    /* 5,4rem: ordbilden ar 6,95em bred = ca 600 px, samma som textspalten under, sa
       ordbilden slutar dar styckena slutar (Klas 2026-10-18: storre rubrik, storre glas).
       Var 4,4rem. Mobil styrs av clamp() i 600-blocket nedan. */
    font-size: 5.4rem; /* fs:fast */
    color: var(--text-main);
    /* 700, inte 800 (Klas 2026-10-18: glaset kandes for tjockt - ett snapp latttare for
       bade bokstaverna och glaset). Vikten 700 maste finnas i fontlanken i index.html,
       annars ritar webblasaren 800 i tysthet. */
    font-weight: 700;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.01em;
    white-space: nowrap;
    font-family: 'Lexend', sans-serif;
}
.yeast-title .ordbild-of { font-weight: 300; margin: 0 0.24em; }   /* 300 maste finnas i fontlanken (index.html) - saknades till 2026-10-19, sa skarmen visade 400 */
.yeast-subtitle {
    font-size: var(--fs-lg);
    font-weight: 300;
    margin: 0.55em 0 0 2px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    font-family: 'Lexend', sans-serif;
}
/* JÄSTEN SYNS. Ordbilden säger öl, så undertiteln får säga vad sidan handlar om: ordet för
   jäst i accentfärg (Klas 2026-10-18). --accent-text, eftersom ordet är 16,8 px på mobil
   och då måste klara 4,5 även i ljust läge. */
.yeast-subtitle strong {
    color: var(--accent-text);
    font-weight: 600;
}
/* GLASET SOM U. Allt i em, så det följer rubrikens storlek på alla skärmar. Kupan (y 5-93 i
   ritningen, konturen inräknad) = Lexends versalhöjd 0,70em, alltså 1 enhet = 0,00795em:
   rutan 100x120 blir 0,795 x 0,955em. Kupans botten (y 93) ska stå på baslinjen, och under
   den finns 27 enheter = 0,215em - så mycket hänger foten ner. Inline-block utan text har
   sin baslinje i underkanten, därför vertical-align (rubriken är inte flex). Sidorna: 11
   tomma enheter (0,0875em) vid kupan, ett litet bokstavsmellanrum (0,03em) lämnas kvar.
   storglas.js läser rutan med getBoundingClientRect och min(b/100, h/120) - samma skala. */
#interactive-beer-glass {
    display: inline-block;
    width: 0.795em;
    height: 0.955em;
    vertical-align: -0.215em;
    margin: 0 -0.058em;
}
/* Konturen i textens färg. TUNN: 4,5 (Klas 2026-10-18: "ser ut som pepparkaka med
   frosting" vid 9). Med tunn kant är det ölet som bär U-formen, och glaset ser ut som
   glas. Var 11 vid vikten 800, 9 vid 700. */
#interactive-beer-glass .glass-outline,
body.light-mode #interactive-beer-glass .glass-outline {
    stroke: var(--text-main);
    stroke-width: 4.5;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Nyp isär glaset öppnar stora glaset (storglas.js). Sidan går att zooma, men ett nyp som
   BÖRJAR i rubrikraden ska aldrig zooma den - skroll är kvar. */
.home-title-section {
    touch-action: pan-x pan-y;
    /* Stod forut inline i index.html. Ingressen under (.soul-tagline) har -12px i topp och
       raknar med de har 40px - utan dem kroktes undertiteln och ingressen (Klas 2026-10-18). */
    margin: 20px 0 40px;
}
/* TRYCKYTAN storre an glaset. Pa mobil ar U:et ca 32 x 38 px, under fingrets 44. Ytan
   vaxer 0,15em at sidorna och 0,1em upp och ner (44 x 46 px vid 40 px rubrik) - den
   gar en aning in over O och L, vilket ar ofarligt: bokstaverna gor ingenting. */
#interactive-beer-glass::after {
    content: "";
    position: absolute;
    inset: -0.1em -0.15em;
}

/* ========================================= */
/* --- RESPONSIVA JUSTERINGAR (MOBIL) --- */
/* ========================================= */
@media (max-width: 600px) {
    /* Mindre rubrik på mobil → dra in avståndet ner till första stycket så det inte gapar */
    .home-title-section { gap: 15px !important; margin-bottom: 24px !important; }

    /* Ordbilden är ungefär 6,8em bred och står på en rad: 11vw ger 270 px på en 360 px
       telefon, med sidans 20 px marginaler kvar. Glaset följer med eftersom det mäts i em. */
    .yeast-title {
        font-size: clamp(2rem, 11vw, 4.2rem) !important; /* fs:fast */
    }
    /* STORRE OCH FASTARE I MOBILEN (Klas 2026-10-25: "for smatt for de flestas ogon"). Den var
       lika stor som ingressen (16 px) men i 300 och gra, och sag darfor MINDRE ut. Nu ett steg
       storre och 400; den gra fargen star kvar och haller balansen mot den vita ingressen. */
    .yeast-subtitle {
        font-size: var(--fs-md) !important;
        font-weight: 400;
        text-wrap: balance;   /* spanskan (39 tecken) kan bryta pa smala telefoner - da i tva lika halvor */
    }
}

/* ========================================= */
/* --- DEMO TOUR / ONBOARDING (LIVE VIEW) -- */
/* ========================================= */

/* --- TOUR OVERLAY (NY, ENHETLIG STIL) --- */
.tour-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* En jämn, mörk, halvgenomskinlig bakgrund över hela skärmen */
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: 9999;
    display: none;
    cursor: pointer;
}

.tour-tooltip {
    position: absolute; 
    z-index: 9002; 
    display: none;
    background-color: rgba(10, 30, 10, 0.95);
    border: 1px solid var(--accent-color);
    border-left: 4px solid var(--accent-color);
    color: #fff; 
    padding: 12px 20px; 
    border-radius: 8px;
    font-size: var(--fs-base); 
    font-weight: 800; 
    font-family: 'Lexend', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    pointer-events: none; /* Klick går rakt igenom rutan till overlayen */
    text-align: center; 
    white-space: nowrap;
}

/* Den lilla pilen som pekar UPPÅT mot elementet */
.tour-arrow {
    position: absolute; 
    top: -10px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--accent-color);
}

/* Enkel highlight-ram runt elementet (ingen spotlight) */
.tour-highlight {
    position: absolute;
    /* Enkel ram för enhetlighet, kan skippas om du vill */
    /* border: 2px solid rgba(255, 255, 255, 0.1); */ 
    border-radius: 12px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8); /* Fyller hela skärmen utom elementet */
}

/* Cool inhopp-animation varje gång rutan byter plats */
@keyframes popIn {
    0%   { opacity: 0; transform: translate(-50%, 15px) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --- LIVE INTRO MODAL --- */
.intro-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-modal-content {
    background-color: #1a1a1a; /* Samma mörka färg som dina andra boxar */
    color: #eee;
    padding: 30px;
    border-radius: 8px; /* Lite kantigare för att matcha */
    border: 2px solid #32cd32; /* DEN VIKTIGA GRÖNA KANTEN! */
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* Se till att rubriken är YeastMaster-grön */
.intro-modal-content h2 {
    color: #32cd32 !important; 
    margin-top: 0;
}

.intro-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    gap: 15px;
}

/* Återanvänd dina befintliga knapp-stilar om du har, annars är dessa snygga: */
.intro-modal-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px; /* fs:fast */
    font-weight: bold;
    cursor: pointer;
}

.btn-cancel {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
}

.btn-primary {
    background-color: #32cd32; /* Grön knapp för Continue */
    color: #111;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
}

/* --- DEMO SKYLTS CSS (TYDLIG OCH POPPANDE) --- */
#demo-tour-tooltip {
    position: absolute;
    background-color: #1c2b18; /* Fyllig, mörkgrön bakgrund istället för grå */
    border: 2px solid #8bc34a; /* Lysande YeastMaster-grön kant */
    border-radius: 8px;
    padding: 10px 18px;
    width: max-content; /* Låter bredden anpassa sig efter texten */
    max-width: 250px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.6);
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

/* Pilen på skylten */
#demo-tour-tooltip::after {
    content: '';
    position: absolute;
    top: -10px;
    left: var(--arrow-left, 50%); /* Använder JS-värdet, faller tillbaka på 50% */
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #8bc34a transparent;
}

/* Vänd pilen nedåt när tooltipen är ovanför elementet */
#demo-tour-tooltip.tooltip-flipped::after {
    top: auto;
    bottom: -10px;
    border-width: 10px 10px 0 10px;
    border-color: #8bc34a transparent transparent transparent;
}

/* Texten inuti skylten */
#demo-tour-text {
    color: #ffffff; /* Ren vit text gör att det poppar och blir lättläst! */
    font-size: 15px; /* fs:fast */
    margin: 0;
    font-weight: bold;
    text-align: center;
}

/* US-gallon efter satsstorlekar i texterna: bara i gallonlage (setVolumeUnit) */
.gal-hint { display: none; }
body.vol-gal .gal-hint { display: inline; }

/* Diastaticus-varningen i stamrutan (yeastSTA1 i library.js) */
.sta1-warning {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--warn-text);
    background: color-mix(in srgb, var(--warn-text) 10%, transparent);
    border-radius: 6px;
    font-size: var(--fs-base);
    line-height: 1.5;
}
.sta1-warning strong { color: var(--warn-text); }

/* Namngransen (8 tecken) - syns bara nar man nar den, se profiler.js */
.profile-name-limit {
    margin: -14px 0 14px;
    font-size: var(--fs-xs);
    color: var(--text-dim);
}

/* --- PROFILERARENS STARTPROFILER (testarrunda 3) ---
   Stammens profiler som knappar under stamvalet; knapparna ar bibliotekets .yeast-chip
   (samma aktiva lage, bada temana). Radbryts pa smal skarm i stallet for att rulla. */
.lab-profile-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: -8px 0 16px;
}
/* "Från grunden" bland profilknapparna: streckad kant, och stammens profiler i en egen grupp
   (Klas 2026-10-15). Luften sitter i MELLANRUMMET mellan gruppen och knappen (column-gap), inte
   som marginal på knappen: en marginal följde med när knappen bröts till en ny rad i mobilen och
   stod då indragen. Ett mellanrum finns bara mellan saker på samma rad. */
.lab-profile-chips { column-gap: 16px; }
.lab-chip-grupp { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.lab-profile-chips .lab-chip-grund:not(.active) { border-style: dashed; }
/* ...i SEKUNDÄRFÄRGEN (Klas 2026-10-15): en annan kategori än stammens profiler, och färgen
   följer det valda temat (salvia -> halm, cyan -> lila osv.). Kant och text i --accent-secondary-ink
   (mörknad i ljust läge, annars försvinner halm mot vitt); vald = fylld med sekundärfärgen. */
.lab-profile-chips .lab-chip-grund { border-color: var(--accent-secondary-ink); color: var(--accent-secondary-ink); }
.lab-profile-chips .lab-chip-grund:hover { border-color: var(--accent-secondary-ink); color: var(--accent-secondary-ink); background: color-mix(in srgb, var(--accent-secondary) 12%, transparent); }
.lab-profile-chips .lab-chip-grund.active { background: var(--accent-secondary); border-color: var(--accent-secondary); color: #111; }
/* Faserna (labVaxlaFas), högerställda direkt ovanför grafen: ✓ = på, + = av och går att
   lägga till. Lika små som rubrikradens knappar, så de hör till grafen och inte till sidan. */
.lab-fas-rad { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; margin: 0 0 4px; }
/* "Faser:" före knapparna (profiler.js) - dämpad, samma storlek som knapptexten. */
.lab-fas-etikett { font-size: 0.7rem; /* fs:fast */ font-weight: 600; color: var(--text-dim); margin-right: 2px; }
.lab-fas-rad .yeast-chip { font-size: 0.7rem; /* fs:fast */ padding: 3px 10px; }
/* Händelserna (torrhumling, ta ur humlen, tappa om) direkt under grafen - samma storlek som
   fasknapparna ovanför. Färgen när de är på sätts av labRitaHandelseknappar (händelsens egen). */
.lab-handelse-rad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 14px; }
.lab-handelse-rad .yeast-chip { font-size: 0.7rem; /* fs:fast */ padding: 3px 10px; }
/* MOBIL: ett snäpp mindre, så alla tre ryms på EN rad (Klas 2026-10-15). 0,62 rem blev för
   smått; med kortare etiketter (Tappa om, Soutirage, Trasiego, Hopfen raus) ryms 0,68 rem.
   Uppmätt med alla tre påslagna i 310 px: es 249, en 252, fr 276, sv 279, de 302 px - grafkortet
   har ~320 px. Radbrytningen står kvar som skyddsnät för de smalaste telefonerna. */
@media (max-width: 768px) {
    .lab-handelse-rad { gap: 5px; }
    .lab-handelse-rad .yeast-chip { font-size: 0.68rem; /* fs:fast */ padding: 3px 8px; }
}
/* Dämpad (en av stammens profiler): mindre och grå, påslagen fas utan accentfyllning - en
   fotnot, inte ett val man måste göra. Full stil bara i "Från grunden". */
.lab-fas-rad.dampad .yeast-chip { font-size: 0.65rem; /* fs:fast */ padding: 2px 8px; opacity: 0.75; }
.lab-fas-rad.dampad .yeast-chip.active {
    background: transparent;
    border-color: color-mix(in srgb, var(--text-dim) 40%, transparent);
    color: var(--text-dim);
}
.lab-fas-rad.dampad .yeast-chip:hover { opacity: 1; }
/* Liggande mobilhelskärm: höjden (~360 px) behövs till kurvan. */
@media (max-height: 500px) { .is-fullscreen .lab-fas-rad { display: none !important; } }

/* --- TURBUBBLANS FOT (bada turerna, testarrunda 3) ---
   Stegraknare, X och Nasta/Klar. Bubblan ar alltid mork (aven i ljust tema), sa vit text
   och --accent-text (som ljust tema satter om for #demo-tour-tooltip) fungerar i bada.
   Nasta ar en KONTUR i accentfargen, inte en fylld knapp: det finns ingen variabel for
   text PA accentfargen, och anvandaren valjer accenten sjalv. */
.tour-body {
    font-weight: 700;
}
.tour-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: var(--fs-xs);
}
.tour-count {
    margin-right: auto;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.tour-x,
.tour-next {
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.2;
}
.tour-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem; /* fs:fast */
    padding: 6px 8px;
}
.tour-x:hover { color: #fff; }
.tour-next {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 800;
    padding: 6px 12px;
    white-space: nowrap;
}
.tour-next:hover { background: color-mix(in srgb, var(--accent-color) 20%, transparent); }
/* ← och → (✓ i sista steget): lika breda rutor, så pilarna står still mellan stegen.
   INTE .tour-arrow: det namnet är bubblans lilla pekartrekant (absolut, ovanför bubblan),
   och knapparna ärvde den - de hamnade som ett litet ↔ ovanför rutan (Klas 2026-10-15). */
.tour-nav {
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.2;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    font-size: var(--fs-base);
    font-weight: 800;
    min-width: 40px;
    padding: 4px 10px;
}
.tour-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-color) 20%, transparent); }
.tour-nav:disabled { opacity: 0.3; cursor: default; }

/* --- INFO BOX (PROFILER STIL) --- */
.profiler-style-info {
    position: absolute; /* Svävar över innehållet under */
    margin-top: 10px; /* Avstånd från "i"-knappen */
    z-index: 100;
    
    background-color: #0d170d; /* Riktigt mörkgrön bakgrund */
    border-left: 5px solid #8bc34a; /* Den klassiska gröna vänsterkanten */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    
    padding: 20px;
    width: 90%;
    max-width: 450px;
    color: #f1f1f1;
    font-size: var(--fs-sm);
    line-height: 1.6;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    text-align: left; /* Vänsterställd text som på bilden */
}

.profiler-style-info p {
    margin-top: 0;
    margin-bottom: 10px;
}

.info-box-buttons {
    display: flex;
    justify-content: flex-start; /* Knappar till vänster för att följa texten */
    gap: 20px;
    margin-top: 15px;
}

.text-btn {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: var(--fs-sm);
    font-weight: bold;
    cursor: pointer;
    padding: 0;
}

.text-btn:hover {
    color: #fff;
    text-decoration: underline;
}

.action-btn {
    color: #8bc34a; /* Grön text för Continue */
}
.action-btn:hover {
    color: #a2db5c;
}

/* ========================================== */
/* --- ACADEMY WIZARD (STEP-BY-STEP) --- */
/* ========================================== */


/* Animationsklass för varje steg */
.wizard-step {
    display: none;
    width: 100%;
    animation: fadeUp 0.4s ease-out forwards;
}

.wizard-step.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ikonen (eller din framtida bild) */
/* EMBLEM: ritad ikon i stallet for emoji, i Borja Har. Tar emojins plats i layouten men
   styrs av BREDD - en SVG bryr sig inte om font-size. INGEN drop-shadow: gloden lagger sig
   runt varje enskilt streck och grumlar linjekonsten, precis som pa .wizard-fig.
   `color` satter currentColor, sa konturerna vander med temat utan temalogik. */
.wizard-emblem {
    width: 5.4rem;
    margin: 0 auto 20px;
    color: var(--text-main);
}
.wizard-emblem svg { display: block; width: 100%; height: auto; }

/* SKUMKRONAN I LJUST LAGE.
   Skummet ar fyllt #fdfbf5 utan kontur. Mot den nastan svarta kortbotten i morkt lage ar
   det ratt - fyllningen ar sin egen kontur dar. I ljust lage ar botten #fff (modalen) och
   #f0f0f0 (guide-sidan), alltsa 1,03 respektive 1,09 mot skummet: kronan blir osynlig och
   glaset ser ut att sakna topp. Klas sag det pa Borja Har, kort 3.

   Strecket far en FAST farg och inte currentColor: currentColor ar #111 har och skulle
   dra till sig mer an huvudkonturen. #8a8175 ligger pa 3,8 mot vitt och 3,4 mot #f0f0f0 -
   over kravet 3,0 for grafik - och 0,6 mot huvudkonturens 1,1 haller det underordnat, sa
   det last som en skumlinje och inte som en andra kontur.

   Bara i ljust lage: i morkt vore det en ljus ram runt en ljus form mot svart, dvs brus. */
body.light-mode .wizard-emblem .krona {
    stroke: #8a8175;
    stroke-width: 0.36; /* 0.6 x EMBLEM_STRECK i academy-data.js */
    stroke-linecap: round;
}
/* Bred variant: emblem som ar en RAD och inte en ikon. Bredden satts efter motivet,
   annars styr ikonmattet och raden trycks ihop till ett band. */
.wizard-emblem--bred { width: 15.5rem; max-width: 90%; }

.wizard-icon {
    font-size: 4.5rem; /* fs:fast */
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--accent-color) 30%, transparent)); /* Svag glöd */
}

/* Figur i stället för emoji-ikon (agar-lektionens steg 3 och 4). Samma plats i
   layouten, men en SVG behöver bredd och inte teckenstorlek — och INGEN drop-shadow:
   den lägger en grön glöd runt varje streck i strykmönstret. */
.wizard-fig {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 20px;
}
.wizard-fig svg { display: block; width: 100%; height: auto; }

/* ↺ Spela om. Diskret tills man vill ha den — figuren är huvudsaken.
   Ligger UNDER figuren, inte ovanpå den: absolutpositionerad i nedre högra hörnet
   hamnade den mitt på brännaren i strykanimationen (som är bredare och har brännaren
   till höger), medan samma hörn är tomt i kolonivalet. Utanför bilden kan den inte
   krocka med någon figur — inte heller en framtida. */
.wizard-fig-replay {
    display: block;
    margin: 6px 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-dim);
    font-size: var(--fs-base);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wizard-fig-replay:hover { background: rgba(255, 255, 255, 0.12); }
body.light-mode .wizard-fig-replay {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Utrustningsraderna: peka pa ett foremal i texten sa lyser det upp i bilden, och
   tvartom. Fjorton nya ord pa fyra sidor ar mangder att lara sig utan bild bredvid.

   Markeringen ar i forsta hand att de ANDRA tonas ned. En glod pa ett foremal som ar
   30 px hogt syns knappt, medan bortfallet runt omkring syns omedelbart - och det
   fungerar lika bra i ljust som morkt lage, vilket en glodfarg inte gor. */
/* GLODEN FAR RITA UTANFOR RUTAN. En svg klipper vid sin viewport som standard, och
   drop-shadow(0 0 5px) nar ungefar 7,5 enheter utanfor formen - den skars da av rakt av,
   och den raka kanten laser man som att FOREMALET ar avklippt. Klas sag det pa mikroskopet
   tva ganger.

   Rutan reserverar plats for LYFTET (se GEAR_VB0 i figures.py) men inte for glorian, och
   det ar ratt fordelning: formen ar innehall och maste rymmas, glorian ar dekor. Att kopa
   7,5 enheter permanent tomrum i alla fyra hyllorna for en halo vore att betala fel pris. */
.wizard-fig .gear-row { overflow: visible; }

.wizard-fig .gear-item { transition: opacity 0.18s ease; }
.wizard-fig .gear-lift {
    /* fill-box: origo i foremalets egen nedre kant, sa det vaxer uppat fran hyllan
       i stallet for att glida ivag mot bildens mitt. */
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.wizard-fig.gear-lit .gear-item { opacity: 0.25; }
.wizard-fig.gear-lit .gear-item.lit { opacity: 1; }
.wizard-fig .gear-item.lit .gear-lift {
    transform: scale(1.15);
    filter: drop-shadow(0 0 5px var(--accent-color));
}

/* Prickad understrykning = "det har ordet gor nagot". Utan den provar ingen att peka. */
.wizard-step strong[data-gear] {
    color: var(--text-main);
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent-color);
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}
.wizard-step strong[data-gear].lit { color: var(--accent-text); }

.wizard-step h3 {
    color: var(--accent-text);
    font-size: var(--fs-lg);
    margin-bottom: 15px;
    font-weight: 800;
}

.wizard-step p {
    /* Steget ar en flexkolumn med align-items: center. Utan stretch krymper ett stycke
       som ryms pa EN rad till sin egen bredd och hamnar mitt i kortet, medan langre
       stycken fyller bredden - sa ett kort andrastycke sag indraget ut (Klas, 2026-10-16). */
    align-self: stretch;
    color: var(--text-dim);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin-bottom: 30px;
}



.wizard-btn {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Lexend', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-btn.primary {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}

.wizard-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Klick-effekt för mobiler (och datorer) när knappen trycks ner */
.wizard-btn:active:not(:disabled) {
    transform: scale(0.95);
    opacity: 0.8;
}

/* --- MAGIN: Hover-effekter BARA för enheter med muspekare --- */
@media (hover: hover) {
    /* Tillbaka-knappen blir snyggt mörkgrå */
    .wizard-btn:hover:not(:disabled):not(.primary) {
        background: #333;
        border-color: #666;
    }

    /* Next-knappen behåller sin färg, men lyfter och lyser upp lite! */
    .wizard-btn.primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color) 40%, transparent);
        filter: brightness(1.1); 
    }
}

/* STEGPILARNA OVERST: ‹ prickar ›. Prickarnas egna regler (langre ner) satter bredd 100 %
   och marginal med !important, sa har behovs samma kraft inne i raden. */
.wizard-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}
.ym-academy-content .wizard-topbar .wizard-dots {
    flex: 1 1 auto;
    width: auto !important;
    margin-bottom: 0 !important;
}
.wizard-arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
    background: transparent;
    color: var(--text-main);
    font-size: 1.3rem; /* fs:fast */
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
}
.wizard-arrow:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-text); }
.wizard-arrow:disabled { opacity: 0.25; cursor: default; }

/* Framstegsmätaren (Prickarna) */
.wizard-dots {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.wizard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    transition: all 0.3s ease;
}

.wizard-dot.active {
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-color);
    transform: scale(1.3);
}

/* Light mode support */
body.light-mode .wizard-btn { background: #eee; color: #111; border-color: #ccc; }
body.light-mode .wizard-btn.primary { background: var(--accent-color); border-color: var(--accent-color); }
body.light-mode .wizard-dot { background: #ccc; }
body.light-mode .wizard-dot.active { background: var(--accent-color); }

/* ========================================== */
/* --- WIZARD LAYOUT & CHECKLISTA --- */
/* ========================================== */

/* 1. Själva rutnätet */


/* 2. Vänster kolumn (Sidomenyn) */




/* 3. Den försvunna checklistan! (Fixar prickarna) */
.wizard-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wizard-checklist li {
    color: #555; 
    padding: 8px 0;
    border-bottom: 1px dashed #222;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.wizard-checklist li:last-child { 
    border-bottom: none; 
}

.wizard-checklist li::before {
    content: '○'; 
    margin-right: 10px;
    font-size: 1.2rem; /* fs:fast */
    opacity: 0.5;
}

.wizard-checklist li.active-item {
    color: #fff;
    transform: translateX(5px);
}

.wizard-checklist li.active-item::before {
    content: '●'; 
    color: var(--accent-text);
    opacity: 1;
    text-shadow: 0 0 8px var(--accent-color);
}

/* 4. Höger kolumn (Fixar smalheten!) */


/* 5. Mobilanpassning */
@media (max-width: 768px) {
  
    
 
    
 
}

/* Light mode support */
body.light-mode .wizard-sidebar, body.light-mode .wizard-container { background: #fff; border-color: #ddd; }
body.light-mode .wizard-checklist li { border-bottom-color: #eee; color: #aaa; }
body.light-mode .wizard-checklist li.active-item { color: #111; }

/* --- PITCH CALCULATOR KORT --- */
.lab-card {
    background-color: #1a1a1a; /* Mörk bakgrund */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: #f1f1f1;
}

.lab-description {
    font-size: 0.9em; /* fs:em */
    color: #aaa;
    margin-bottom: 15px;
}

/* Grid för knapparna (2x2 på stora skärmar, 1x4 på mobiler om det behövs) */
.calc-btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* YeastMaster Standardknapp */
.ym-btn-outline {
    /* Foljer vald accent. Var hardkodad gron, sa kallknapparna behöll grona ramar aven
       nar anvandaren valt cyan - och den aktiva knappen, som redan folide accenten, sag da
       ut att tillhora en annan uppsattning. */
    background-color: var(--accent-tint);
    border: 2px solid var(--accent-color);
    color: var(--accent-text);
    padding: 14px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em; /* fs:em */
    font-weight: bold;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
}

.ym-btn-outline:hover {
    background-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* TURKNAPPEN STAR FRAMME, inte inuti info-rutan. Forr lag den INUTI det man skulle hitta
   forst: man maste trycka pa i:et for att fa veta att turen fanns.

   REGELN MASTE STA EFTER .ym-btn-outline. Forsta forsoket lag hogre upp i filen bland
   info-knapparna - samma specificitet, tidigare rad, alltsa forlorade den helt: knappen
   korde vidare med 1em text och 14 px padding och blev ett block under rubriken som tog
   over hela mobilvyn. Klas: "den ar pa tok for stor... monstruos."

   EN RAD, INTE TVA. En tvaradig knapp laser som en ruta och drar MER uppmarksamhet an en
   liten pill - och turen ska vara ett erbjudande, inte sidans huvudsak. */
.tour-btn {
    border-width: 1px;
    border-color: var(--accent-color);
    color: var(--accent-text);
    /* Mindre text sa hela meningen ryms bredvid rubriken. Ett ensamt "TOUR" sa inte vad
       knappen gor - Klas: "signalerar inte tillrackligt tydligt vad som menas." */
    font-size: var(--fs-xs);
    letter-spacing: 0.3px;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    width: auto;
    align-self: center;
}

/* VAR KNAPPEN BOR: PC i rubrikraden, MOBIL inuti info-rutan.
   Historik vard att minnas: knappen lag forst INUTI info-rutan overallt, och da fick den
   som inte tryckte pa i:et aldrig veta att turen fanns (en besokare missade just det).
   Den lyftes ut - men pa mobil blev raden trang i alla fem sprak, och pa spanska brots
   rubriken i tva rader. Klas valde da: kvar i rubrikraden pa PC, tillbaka in i rutan pa
   mobil. Tva knappar i markupen, en per vy; app-tour.js binder pa KLASS sa bada far liv. */
.tour-mobil { display: inline-block; width: 100%; margin-top: 14px; }
.tour-pc { display: none; }

@media (min-width: 769px) {
    .tour-mobil { display: none; }
    .tour-pc { display: inline-block; }
}

@media (min-width: 769px) {
    /* PC: hela meningen, och langst ut till hoger pa rubrikraden - den konkurrerar da
       inte med rubriken om uppmarksamheten men star ando framme. */
    .tour-btn {
        font-size: var(--fs-xs);
        padding: 7px 14px;
        margin-left: auto;
    }
    .tour-lang { display: inline; }
    .tour-kort { display: none; }
}

/* Aktivt läge (Klickad knapp) */
.ym-btn-outline.active {
    background-color: var(--accent-color);
    color: #111111; /* Mörk text på ljus accentbakgrund */
    box-shadow: 0 0 10px var(--accent-tint);
}

/* Sub-menyn för Yeast Bank */
.sub-options-container {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #444;
    animation: fadeIn 0.3s ease-in-out;
}

.sub-options-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--accent-text);
    font-size: 0.95em; /* fs:em */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animation för när undermenyn dyker upp */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- MODAL (POPUP) FÖR KÄLKYLATOR --- */
.ym-modal {
    position: fixed;
    z-index: 2500; /* Över .main-nav (2000) så nav-baren inte klipper modalens överkant */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    
    /* MAGIN: Centrera i sidled, men starta från toppen! */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ändrat från center! Tvingar rutan att växa nedåt. */
    
    /* Skapar garanterad luft mot skärmens överkant och underkant */
    padding-top: 8vh; 
    padding-bottom: 2vh; 
}

.ym-modal-content {
    background-color: #1a1a1a;
    border: 1px solid var(--accent-color); 
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    padding: 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: slideIn 0.3s ease-out;
    
    /* Maxhöjden räknas nu ut så att den får plats perfekt inom paddingen */
    max-height: 85vh; 
    overflow-y: auto; 
    
    font-size: 16px; /* fs:fast */ 
    box-sizing: border-box;
    overflow-x: hidden; 
    font-family: 'Lexend', sans-serif; 
}

/* STANGKRYSSET i en LIST overst i rutan (Klas 2026-10-28, iPhone: "krysset ar i vagen for
   texten"). Forut flot en klistrig rund knapp over textens hogra horn nar man scrollade - det
   gick att mildra (in i marginalen 2026-10-21) men inte losa. Nu ar spannet sjalvt en list
   tvars over rutan med rutans egen bakgrund (inherit), klistrig overst: texten glider in UNDER
   listen. Bara den runda knappen (::before) tar emot tryck - listen sjalv ar genomslapplig.
   Marginalerna drar ut listen over rutans padding (25 px, 18/15 px pa mobil nedan). */
.ym-close-btn {
    --kryss-pad-y: 25px;
    --kryss-pad-x: 25px;
    color: #aaa;
    position: sticky;
    top: calc(-1 * var(--kryss-pad-y));
    display: block;
    height: 42px;
    margin: calc(-1 * var(--kryss-pad-y)) calc(-1 * var(--kryss-pad-x)) 6px;
    background: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    font-size: 0; /* fs:fast */     /* &times;-glyfen sitter snett i typsnittet; krysset ritas nedan */
    pointer-events: none;
    z-index: 10;
}

/* Knappen: en ring med krysset ritat som tva streck i currentColor, geometriskt centrerade */
.ym-close-btn::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: inherit;
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.25px), currentColor 0 calc(50% + 1.25px), transparent 0),
        linear-gradient(-45deg, transparent calc(50% - 1.25px), currentColor 0 calc(50% + 1.25px), transparent 0);
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.ym-close-btn:hover {
    color: var(--accent-text);
}

@keyframes slideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- CALCULATOR INPUTS --- */
.ym-input-group {
    display: flex;
    flex-direction: column;
}

/* FALTEN LINJERAS genom att ETIKETTERNA far samma hojd.
   Tva grupper bredvid varandra far samma hojd av rutnatet, men etiketterna ar olika langa:
   "BATCHVOLYM (LITER)" ryms pa en rad medan "ORIGINAL GRAVITY (SG)" bryter till tva pa
   mobil, och da borjade det andra faltet en radhojd langre ner.

   Forsta forsoket lat etiketten VAXA (flex: 1 1 auto) sa falten trycktes till botten. Det
   loste raden hogst upp, men gick sonder sa fort en grupp fick ett tredje barn: aldershinten
   under tillverkningsdatumet. Da hamnade datumfaltet ovanfor hinten medan grannens falt lag
   kvar i botten - Klas sag det i PC-vyn. Det ar inte BOTTEN som ska linjera, det ar FALTEN.

   Tva rader pa etiketten racker for alla fem sprak. Regeln ar scopad till kalkylatorn, sa
   ensamma falt i andra formular inte far en tom rad under sin rubrik. */
/* SAMMA HOJD OCH SAMMA BREDD pa faltrutorna.
   Tva saker gjorde dem olika. BREDDEN: rutnatsceller har min-width: auto, sa ett
   input[type=date] - som har en egen inre minsta bredd for datumvaljaren - kunde trycka
   isar de tva 1fr-kolumnerna sa att datumrutan blev bredare an sifferrutan. min-width: 0
   later kolumnen krympa till sin andel, vilket ar vad 1fr 1fr lovar.
   HOJDEN: ett datumfalt renderas hogre an ett sifferfalt eftersom valjarikonen har en egen
   naturlig hojd. Utan ett uttalat tal blir raden darfor ojamn i alla webblasare utom den
   man rakar testa i. 42 px ligger nara den naturliga hojden (10+10 px inre marginal, 2 px
   ram, ~19 px text) och gor alla tre - siffra, datum och rullgardin - exakt lika. */
#pitch-calc-modal .ym-input-group {
    min-width: 0;
}
#pitch-calc-modal .ym-input-group input,
#pitch-calc-modal .ym-select {
    height: 42px;
    min-width: 0;
}

/* Rubriken hade 5 px under sig - lagom nar en beskrivningsrad foljde. Nu kommer forsta
   faltet direkt, och da behovs samma luft som mellan ovriga grupper. */
#pitch-calc-modal h3 {
    margin-bottom: 18px;
}

#pitch-calc-modal .ym-input-group label {
    line-height: 1.2;
    min-height: 2.4em;
}

/* VERKTYGEN (alkohol, kolsyrning, refraktometer, cellraknare): falten trycks till BOTTEN.
   Pitchkalkylatorns recept - tva raders etikett - racker inte har: "WARMEST TEMP AFTER
   FERMENTATION" bryter pa TRE rader pa mobil, och da hamnade grannfaltet hogre upp (Klas
   2026-10-13). Rutnatet ger tva grupper bredvid varandra samma hojd, och margin-top: auto
   lagger faltet i gruppens botten - hur manga rader etiketten an tar.
   Det som gick sonder i pitchkalkylatorn var en TREDJE del under faltet (aldershinten).
   Har har varje grupp exakt etikett + falt, och calcwire_check vaktar att det forblir sa. */
[id^="tool-"].ym-modal .ym-input-group { min-width: 0; }
[id^="tool-"].ym-modal .ym-input-group > input,
[id^="tool-"].ym-modal .ym-input-group > select { margin-top: auto; }

.ym-input-group label {
    font-size: 0.85em; /* fs:em */
    color: #aaa;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ym-input-group input,
.ym-select {
    background-color: #222;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1em; /* fs:em */
    transition: border-color 0.2s;
}

.ym-input-group input:focus,
.ym-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Utfallbara forklaringsrutor i kalkylatorn (slurry-densiteten "?"). Samma panel som
   schemat anvander, sa de tva rutorna i samma modal ser likadana ut. */
.ym-info-box {
    margin-top: 12px;
    background: var(--calc-panel);
    border: 1px dashed var(--calc-line);
    color: var(--text-dim);
    padding: 15px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.ym-btn-primary {
    background-color: var(--accent-color);
    color: #111;
    border: none;
    padding: 12px 20px;
    font-size: 1em; /* fs:em */
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ym-btn-primary:hover {
    background-color: var(--accent-color);
    filter: brightness(0.9);
}

/* =========================================
   --- MODAL TYPOGRAPHY & LAYOUT FIX ---
   ========================================= */

/* Lås grundstorleken i rutan och ta bort sidscroll */

/* Minska rubrikerna inuti rutan */
.ym-modal-content h3 {
    font-size: var(--fs-lg);
    margin-top: 0;
    margin-bottom: 5px;
}

.ym-modal-content h4 {
    font-size: var(--fs-md);
}

/* Smidigare beskrivningstexter */
.ym-modal-content p, 
.ym-modal-content .lab-description {
    font-size: var(--fs-base);
    font-weight: normal;
}

/* Gör etiketterna (Batch size etc) tunnare och snyggare */
.ym-input-group label {
    font-size: var(--fs-xs);
    font-weight: 600; /* Halvfet istället för extremt fet */
    letter-spacing: 0.5px;
    color: #aaa;
    font-family: inherit;
}

/* Håll inmatningsfälten inom ramarna */
.ym-input-group input,
.ym-select {
    font-size: var(--fs-base);
    font-weight: normal;
    box-sizing: border-box; /* Det här hindrar dem från att trycka ut rutan i sidled */
    width: 100%;
}

/* =========================================
   --- PITCH CALCULATOR: LIGHT MODE FIX 2.0 ---
   ========================================= */

/* 1. Lådorna för jästpaketen (Hittar rutor som innehåller inmatningsfält) */
/* BARA pitchkalkylatorn. Utan avgransning traffade regeln varje div med inline-stil i ALLA
   modaler: verktygens tvakolumnsrader och triangeltestets hela upplagg blev gra rutor med
   accentkant och etiketterna kant i kant (Klas 2026-10-13). */
body.light-mode #pitch-calc-modal .ym-modal-content div[style]:has(.ym-input-group) {
    background-color: #f1f1f1 !important;
    border: 1px solid #ccc !important;
    /* Vi ser till att den snygga kanten till vänster överlever - i accentfärgen. */
    border-left: 4px solid var(--accent-color) !important; 
}

/* Etiketterna ovanför inmatningen ("Cells in pack", "Mfg date") */
body.light-mode #pitch-calc-modal .ym-modal-content div[style]:has(.ym-input-group) label {
    color: #555 !important;
}

/* ======================================================= */
/* --- THE ARCANE LAB: WIZARD LAYOUT (THE FINAL FIX) --- */
/* ======================================================= */

/* 1. PC VY (Över 600px) - Använder Grid för tvingad sida-vid-sida */

.wizard-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    align-items: stretch !important;
    gap: 30px !important;
    width: 100% !important;
}

.wizard-sidebar {
    width: 100% !important;
    margin: 0 !important;
}

.wizard-container {
    width: 100% !important;
    min-width: 0 !important; /* Spärr mot explosioner */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.wizard-controls {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.wizard-dots {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.wizard-step {
    flex: 1 !important;
    width: 100% !important;
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.wizard-step.active {
    display: flex !important;
}

/* MOBIL-VY (Samma gräns som resten av din app) */
@media (max-width: 600px) {
    .wizard-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* 2. MOBIL VY - Matchar nu EXAKT din apps egna 600px-gräns! */
@media (max-width: 600px) {
    /* CHIP-RADEN ar borttagen 2026-10-16. Den var till for materiallistorna, som pa mobil
       nu gomms och nas via en knapp (se .academy-need-btn). Kvar pa mobil var bara de
       statiska sidornas snabbfakta, och dar sag brickorna ut som knappar (Klas). Listan
       far darfor samma rena utseende som pa datorn: prick, text, tunn avdelare. */
}

/* ========================================== */
/* --- YEAST MODAL: HARDWARE PROFILES     --- */
/* ========================================== */

/* Knappen stylad som helt vanlig text! */
.hw-profile-btn {
    background: transparent;
    border: none;
    padding: 6px 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-base);
    display: flex;
    justify-content: flex-start; /* Håller ihop texten till vänster */
    align-items: center;
    gap: 8px; /* Skapar ett naturligt mellanslag mellan namnet och tempen */
    margin-bottom: 2px;
    transition: all 0.2s ease;
}

.hw-profile-btn strong {
    color: #ffffff !important; 
    font-weight: 800;
    transition: color 0.2s ease;
}

.hw-profile-btn span {
    color: #888;
    font-size: 0.85em; /* fs:em */
}

/* Hover-effekt: Texten blir grön för att visa att den går att klicka på */
.hw-profile-btn:hover strong {
    color: var(--accent-text) !important;
}

/* När profilen är utfälld/aktiv */
.hw-profile-btn.active strong {
    color: var(--accent-text) !important;
}

/* Själva utfällbara rutan (Profile Summary) */
.hw-profile-summary {
    display: none; 
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #333;
    
    /* ÄNDRAD: Nu använder kanten den sekundära färgen! */
    border-left: 4px solid var(--accent-secondary); 
    
    border-radius: 8px; 
    padding: 15px 20px;
    margin-bottom: 15px;
    margin-top: 5px; 
    animation: slideDown 0.2s ease-out;
}

/* När JS lägger till klassen .open, visas den */
.hw-profile-summary.open {
    display: block;
}

/* Rubriken inne i rutan */
.hw-profile-summary .summary-header {
    font-size: var(--fs-xs);
    font-weight: 800;
    
    /* ÄNDRAD: Nu använder rubriken den sekundära färgen! */
    color: var(--accent-secondary); 
    
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Raderna i rullgardinen */
.hw-profile-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hw-profile-summary .summary-row:last-child {
    border-bottom: none; 
}

.hw-profile-summary .summary-row .label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--oled-color);
}

.hw-profile-summary .summary-row .value {
    font-family: 'Roboto Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--oled-color);
    text-align: right;
}

/* Enkel animation för när den fälls ut */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Light mode support */
body.light-mode .hw-profile-btn strong { color: #111111 !important; }
body.light-mode .hw-profile-btn:hover strong, 
body.light-mode .hw-profile-btn.active strong { color: var(--accent-text); }
body.light-mode .hw-profile-summary { background: #f9f9f9; border-color: #ccc; }
body.light-mode .hw-profile-summary .summary-row { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

/* ========================================== */
/* --- MOBILFIX FÖR HARDWARE PROFILES     --- */
/* ========================================== */
@media (max-width: 600px) {
    /* 1. Minska luften inuti hela modal-rutan för att ge innehållet max bredd */
    .ym-close-btn { --kryss-pad-y: 18px; --kryss-pad-x: 15px; }   /* samma som paddingen nedan */
    .ym-modal-content {
        padding: 18px 15px !important;
    }

    /* 2. Minska luften inuti dragspelsmenyn (summary-boxen) */
    .hw-profile-summary {
        padding: 12px 10px !important;
        border-left-width: 3px !important; /* Lite smalare accent-linje */
    }

    /* 3. Krymp texten lite grann så den slipper fula radbrytningar */
    .hw-profile-summary .summary-row .label,
    .hw-profile-summary .summary-row .value {
        font-size: var(--fs-xs) !important; /* Krymper från 0.85rem */
    }

    /* 4. Anpassa storleken på själva klick-texten ("Traditional Lager (Starts @ 11.0°C)") */
    .hw-profile-btn {
        font-size: var(--fs-sm) !important;
        padding: 8px 0 !important; /* Lite mer tryckzon på mobilen för fingret */
    }
    
    .hw-profile-btn span {
        font-size: var(--fs-xs) !important;
    }
}

/* ======================================================= */
/* --- RESCUE MISSION: FIX FÖR JÄSTPAKET I KALKYLATORN --- */
/* ======================================================= */

/* 1. Själva containern för jästpaketet (den med grön kant) */
.yeast-package-box {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-left: 4px solid var(--accent-color); /* Den magiska kanten - foljer accenten */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    
    /* MOBIL FIRST: Stapla elementen snyggt i en kolumn */
    display: grid;
    /* TVA KOLUMNER aven pa mobil: falten spanner over bada, men sista raden delas av
       aldersraden och krysset. Med en enda kolumn hamnade krysset pa en EGEN rad med tom
       yta bredvid sig - Klas sag det i mobilvyn. */
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: end; /* Tvingar allt (inklusive knappen) att linjera i botten */
}

/* 2. DATOR VY (När skärmen är bredare än 600px) */
/* INGEN MEDIA QUERY HAR - och det ar poangen.
   Har lag tidigare en @media (min-width: 600px) som gav forpackningsrutan tre kolumner
   "pa PC". Men rutan bor i en modal med max-width: 500px, sa den ar ALDRIG bredare an
   omkring 450 px. Fragan "ar fonstret brett?" har ingenting med den har ladans bredd att
   gora, och att blanda ihop dem kostade fyra felriktade rattelser: Klas kor appen i dess
   egen telefonram pa en 1866 px bred skarm, sa media-fragan slog till medan det SAG ut som
   mobil. Foten fick display: contents, kryssets PC-placering vaknade, och alla mina
   mobilfixar var osynliga.
   En layout for alla bredder ar bade enklare och sannare: falten staplade, aldersraden och
   krysset i en flexrad under dem. */


/* 3. Tvinga input-grupperna inuti att ta upp exakt sin ruta */
.yeast-package-box .ym-input-group {
    grid-column: 1 / -1;      /* falten spanner bada kolumnerna */
    width: 100% !important;
    margin: 0 !important; 
    display: flex;
    flex-direction: column;
}

/* KRYSSET: litet och tyst, i linje med falten.
   Det var en fylld gra platta i inputfaltens hojd - lika tung som "+ Lagg till fler paket",
   fast det ar den knappen man faktiskt vill att folk trycker pa. En destruktiv handling ska
   vara tystare an den konstruktiva, och en stor yta ar dessutom en storre traffyta for just
   det man minst vill rora av misstag. Nu en konturknapp pa 34 px som fargas rod forst nar
   man ar pa vag att anvanda den.
   align-items: end pa rutan bottenlinjerar raden, sa krysset star i linje med faltens
   underkant utan att behova nagon egen hojd. */
.yeast-package-box button {
    /* Samma hojd som faltrutorna, och kvadratiskt - da linjerar den bade i underkant
       (align-items: end) och i hojd, i stallet for att sitta som en mindre bricka bredvid. */
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    color: var(--text-dim);
    /* Egen ramfarg, inte --calc-line: den ar 1,30 mot forpackningsrutans ljusa botten och
       forsvinner darmed nastan helt. En konturknapp maste ha en kant man ser, annars ar den
       bara ett tecken som svavar. 2,0 respektive 2,1 - synlig, men fortfarande tyst. */
    border: 1px solid #b3b3b3;
    border-radius: 8px;
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    margin: 0 !important;
    justify-self: end;
    /* UTPEKAD plats i stallet for att flyta med i DOM-ordningen. Da kan inget som star
       fore - aldersraden till exempel - knuffa ner den till en egen rad. */
}

body:not(.light-mode) .yeast-package-box button {
    border-color: #4f4f4f;
}

.yeast-package-box button:hover {
    color: #ff6b6b;
    border-color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.08);
}

/* Rubrik over kallvaljaren. Den ar en RAD i formularet som alla andra falt, sa den behover
   samma etikett - annars ser knapparna ut att sitta losryckta. */
.ym-calc-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Aldern under tillverkningsdatumet. Viabiliteten sjunker med tiden, och det ar hela
   poangen med faltet - men ett datum tvingar anvandaren att rakna sjalv.
   grid-column: 1 / -1 ger den en EGEN rad over hela forpackningsrutan. Utan det klams den
   in i en kolumn och radbryts, och den skulle dessutom kunna pavarka kolumnhojderna. */
/* FOTEN i en forpackningsruta: aldersraden till vanster, krysset till hoger, pa samma rad.
   En FLEXRAD och inte tva rutnatsceller. Tre forsok att fa rutnatet att placera dem bredvid
   varandra gav samma resultat - krysset hamnade pa en egen rad - och en layout man inte kan
   resonera sig till ar inte vard ett fjarde forsok. I en flexrad ar ordningen sjalvklar.
   Krysset skjuts hoger med margin-left: auto i stallet for space-between, sa det star till
   hoger aven nar aldersraden ar tom (den doljs da av :empty-regeln). */
.pack-foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pack-foot .remove-pack-btn { margin-left: auto; }

.calc-age-hint {
    /* RADEN PEKAS UT, inte overlats at automatiken.
       Pa mobil har rutan tva kolumner och tva faltgrupper som spanner bada - alltsa rad 1
       och 2. Aldersraden och krysset ska dela RAD 3: hinten i kolumn ett, krysset i kolumn
       tva. Att bara ange kolumn racker inte i praktiken; krysset hamnade anda pa en egen
       rad, tva forsok i rad. Ett fast radnummer ar entydigt, och antalet faltgrupper i en
       forpackningsruta ar fast (cellmangd + datum), sa talet kan inte glida.
       PC-regeln langre upp ger hinten hela bredden i rad 2, for dar star krysset i rad 1
       bredvid falten. */
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-top: 5px;
    line-height: 1.3;
}
.calc-age-hint:empty { display: none; }

/* TRE PA EN RAD NAR DET FINNS PLATS.
   Klas layout pa PC: cellmangd | tillverkningsdatum | kryss, tre jamnhoga rutor pa samma
   rad med krysset langst ut till hoger. Den vill han ha kvar - jag tog bort den en gang med
   motiveringen att rutan "aldrig ar bredare an 450 px", och det var fel pa en konkret punkt:
   modalen ar width: 90% med max-width: 500px, sa pa en 360 px-telefon ar ladan ~294 px och
   da ryms inte tre kolumner. Fonstrets bredd ar alltsa ett rimligt matt pa ladans.

   BLOCKET LIGGER SIST med flit. Basreglerna (.yeast-package-box .ym-input-group) har SAMMA
   specificitet, sa den som star sist vinner - lag det tidigare i filen skulle falten stapla
   sig aven har och krysset hamna ensamt. */
@media (min-width: 601px) {
    .yeast-package-box {
        grid-template-columns: 1fr 1fr auto;
    }
    /* Falten aterfar var sin kolumn i stallet for att spanna bada. */
    .yeast-package-box .ym-input-group { grid-column: auto; }
    /* display: contents loser upp foten, sa hinten och krysset blir rutnatsbarn igen och
       kan placeras var for sig. */
    .yeast-package-box .pack-foot      { display: contents; }
    .yeast-package-box .calc-age-hint  { grid-column: 1 / -1; grid-row: 2; }
    .yeast-package-box button          { grid-column: 3; grid-row: 1; }
}

/* LAGG-TILL-KNAPPEN. Den ar en SEKUNDAR handling: den ska synas, men aldrig konkurrera
   med resultatet. Darav streckad ram i stallet for fylld yta, i samma sprak som
   formelrutan i lektionerna. Fargerna gar pa --accent-text och --calc-line sa den foljer
   temat: 8,51 i kontrast mot den morka modalen och 5,33 mot den ljusa.

   OBS: den har regeln har forsvunnit en gang forut, nar en omskrivning av kryss-knappen
   ovanfor spande over hela stycket mellan tva kommentarsmarkorer och svalde det som lag
   emellan. Ligger den kvar utan regel far knappen webblasarens standardutseende - en liten
   gra systemknapp - och det syns direkt. */
.ym-btn-add {
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px dashed var(--calc-line);
    border-radius: 8px;
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ym-btn-add:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-tint);
}
.ym-btn-add:active { transform: translateY(1px); }

/* 5. Light Mode Support för paketen */
body.light-mode .yeast-package-box {
    background-color: #f9f9f9;
    border-color: #ddd;
}

/* ======================================================= */
/* --- THE ARCANE LAB: DEN NYA SKOTTSÄKRA LAYOUTEN --- */
/* ======================================================= */

/* 1. Vi använder Grid för att tvinga rutorna på plats, förankrat till vänster! */
.ym-academy-layout {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    align-items: stretch !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Vänstra listan */
/* Rubriken over snabbfakta/materiallistan ("Key facts", "Du behover:").
   Den hade INGEN egen regel, och den globala nollstallningen * { margin: 0 } gor da att
   den star direkt pa forsta punkten - listan har i sin tur margin: 0. Pa PC dolde
   punkternas egna 8 px det nastan; pa mobil, dar punkterna ar brickor med synlig ram,
   syntes krocken direkt. Klas sag det pa Viabilitet vs Vitalitet.
   Galler bade de statiska sidorna och de data-drivna lektionerna - samma sidebar. */
.ym-academy-sidebar h4 {
    margin-bottom: 10px;
}

.ym-academy-sidebar {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 3. Högra huvudrutan */
.ym-academy-content {
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 4. Fixa så att knapparna håller sig på plats i botten */
.ym-academy-content .wizard-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.ym-academy-content .wizard-btn {
    height: auto !important;
    min-height: 45px !important;
    margin: 0 !important;
}

/* 5. Mobilvy */
@media (max-width: 768px) {
    .ym-academy-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .ym-academy-sidebar,
    .ym-academy-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* INNEHALLSFORTECKNINGEN BORT PA MOBIL, materiallistorna kvar.
       Gransen ar 768 och inte 600 med flit: det ar HAR layouten slutar vara tva kolumner
       och sidebaren blir ett block OVANFOR innehallet. Da konkurrerar en oversikt med
       stegprickarna som sager samma sak, och man far skrolla forbi den for att komma at
       det man kom for. Materiallistorna behaller sin plats - de sager nagot stegen inte
       sager - och far chip-raden vid 600 px i stallet.
       Vilka listor som ar oversikter avgors i academy-data.js (checklistIsOutline). */
    .ym-academy-sidebar.is-outline {
        display: none;
    }

    /* MATERIALLISTAN PA MOBIL (Klas, 2026-10-16): sidopanelen gomms - listan ar sekundar
       och tog hela forsta skarmen ovanfor animationen. Den nas i stallet via ikonknappen
       till hoger om ingressknappen, som visar hela listan i .academy-need-panel. */
    .ym-academy-sidebar.mobil-dold {
        display: none;
    }
    .academy-lead .academy-need-btn {
        display: inline-flex;
    }

}

/* Materialknappen och -listan (mobil). Knappen ar gomd tills mediefragan ovan visar den;
   panelen visas bara nar knappen oppnat den, och aldrig pa datorn. */
.academy-need-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.academy-need-btn svg { width: 18px; height: 18px; }
.academy-need-btn.is-open { background: rgba(255, 255, 255, 0.14); }
.academy-need-panel {
    margin: -12px 0 22px;
    padding: 14px 16px;
    border: 1px solid #333;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
.academy-need-panel[hidden] { display: none; }
@media (min-width: 769px) {
    .academy-need-panel { display: none; }
}
.academy-need-panel h4 { margin: 0 0 8px; }
/* En stilren lista: inga ringar eller prickar, bara tunna avdelare. */
.academy-need-panel ul { list-style: none; margin: 0; padding: 0; }
.academy-need-panel li {
    padding: 8px 0;
    color: var(--text-main);
    font-size: var(--fs-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.academy-need-panel li:last-child { border-bottom: none; }
body.light-mode .academy-need-panel { border-color: #ddd; background: rgba(0, 0, 0, 0.02); }
body.light-mode .academy-need-panel li { border-bottom-color: #eee; }

.add-new-device-btn:hover {
    border-color: var(--accent-color) !important;
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent) !important; /* Valfritt: ger en supersvag bakgrundsglöd */
}

/* HUSJASTEN SOM ETT VANLIGT KATALOGKORT (Klas 2026-10-20): ingen egen ram eller bottenton.
   Avsnittsrubriken "Dina profiler och husjaster" racker som skillnad, och sorten syns i
   typranden till vanster precis som pa katalogkorten. Fore detta: sekundarfargad 3 px-ram
   med 6-8 % ton och randen flyttad ovanpa ramen. Ikonen bar skillnaden mot profilerna. */

/* Husjastens ikon (window.HOUSE_STRAIN_ICON i library.js) star inline i rubriken, i stallet
   for den gamla emojin. Utan storlek blir en svg 300x150 px. Lite storre an texten: korttitlarna
   ar 0.85rem i mobilen och motivet har fina detaljer. 1.25em -> 1.8em (Klas 2026-10-19: for liten
   bredvid namnet); vertical-align haller blommans mitt i hojd med gemenerna. */
.house-strain-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    vertical-align: -0.55em;
    flex-shrink: 0;
}

/* =========================================
   LIGHT MODE FIX: KNAPPAR & HOVER (PROFILER)
   ========================================= */

/* 1. Gör knappen marginellt mörkare på PC när man drar musen över (istället för att bli vit) */
body.light-mode button:hover,
body.light-mode .btn-primary:hover,
body.light-mode .btn-secondary:hover {
    filter: brightness(0.9);
}

/* 2. Gör knappen ytterligare lite mörkare precis när man klickar på den */
body.light-mode button:active,
body.light-mode .btn-primary:active,
body.light-mode .btn-secondary:active {
    filter: brightness(0.8);
}

/* 3. MOBIL-FIXEN: Stäng av "hover" helt på skärmar med touch, så de inte fastnar i vitt/grått */
@media (hover: none) {
    body.light-mode button:hover,
    body.light-mode .btn-primary:hover,
    body.light-mode .btn-secondary:hover {
        filter: none; 
    }
    
    /* Behåll bara "klick"-effekten för touchskärmar */
    body.light-mode button:active,
    body.light-mode .btn-primary:active,
    body.light-mode .btn-secondary:active {
        filter: brightness(0.8);
    }
}

/* =========================================
   KLICKBARA KORT (THE HARDWARE UNIT)
   ========================================= */

.hardware-card {
    cursor: pointer;
    transition: background 0.2s ease;
    /* Ingen border eller fast bakgrundsfärg här, så den smälter in */
}

/* En extremt subtil highlight när man hovrar över hela rutan */
.hardware-card:hover {
    background: rgba(128, 128, 128, 0.05); 
    border-radius: 8px;
}

.animated-arrow {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* När man hovrar över rutan, flytta pilen 6px till höger och tänd den med accentfärgen */
.hardware-card:hover .animated-arrow {
    transform: translateX(6px);
    color: var(--accent-text) !important;
}

/* =========================================
   HARDWARE FEATURE CARDS (DARK & LIGHT)
   ========================================= */

/* Dark Mode (Standard) */
.hw-feature-card {
    background: rgba(255, 255, 255, 0.03); /* Mjuk, lite lyxigare mörk bakgrund */
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.hw-feature-text {
    color: var(--text-dim);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.hw-image-box {
    width: 100%;
    height: 150px;
    background: #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #444;
    color: #666;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--fs-sm);
}

/* Light Mode Overrides */
body.light-mode .hw-feature-card {
    background: #ffffff;
    border-color: #ddd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Mjuk och snygg skugga */
}

body.light-mode .hw-image-box {
    background: #f8fafc;
    border-color: #ccc;
    color: #888;
}

/* =========================================
   LIGHT MODE: MAIN NAVIGATION BAR
   ========================================= */

body.light-mode .main-nav {
    /* Ljus, nästan helt vit bakgrund med lite frostat glas-effekt */
    background: rgba(255, 255, 255, 0.95);
    border-color: #ddd; /* Ändrar den mörka linjen till en ljusgrå */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* En mjuk, lyxig skugga under menyn */
}

/* Gör de inaktiva länkarna (gråa) lite mörkare så de syns bra mot det vita */
body.light-mode .nav-text,
body.light-mode .nav-icon {
    color: #666;   /* 5,7:1 mot vitt - #888 var 3,5 */
    fill: #666;
}

/* När man hovrar över inaktiva länkar i ljust läge (blir mörkgrå istället för ljusgrå) */
body.light-mode .nav-item:not(.active):hover .nav-text,
body.light-mode .nav-item:not(.active):hover .nav-icon {
    color: #222;
    fill: #222;
}

/* Fixar textskuggan på den aktiva accentfärgen så den inte ser smutsig ut mot det vita */
body.light-mode .nav-item.active .nav-text {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* =========================================
   --- LIGHT MODE FIX: JÄST- OCH CUSTOM-MODALER ---
   ========================================= */

body.light-mode .modal-content {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body.light-mode .modal-header {
    border-bottom-color: #eee;
}

body.light-mode .modal-body {
    color: #444; /* Gör standardtexten mörkgrå och läsvänlig */
}

body.light-mode .modal-body h3,
body.light-mode .modal-body strong {
    color: #111; /* Gör underrubriker och fetstil nästan svarta */
}

body.light-mode .close-btn {
    color: #888;
}

body.light-mode .close-btn:hover {
    color: #111;
}

/* Eventuella streckade linjer inuti modalen */
body.light-mode .modal-body hr {
    border-color: #eee;
}

/* =========================================
   --- LIGHT MODE FIX: LÄSBAR TEXT I MODALEN ---
   ========================================= */

/* Gör all standardtext mörkgrå i Light Mode, 
   MEN skydda våra snygga gröna och orangea larmfärger! */
body.light-mode .modal-body p:not([style*="8CC63F"]):not([style*="F2994A"]):not([style*="--accent"]),
body.light-mode .modal-body div:not([style*="8CC63F"]):not([style*="F2994A"]):not([style*="--accent"]),
body.light-mode .modal-body span:not([style*="8CC63F"]):not([style*="F2994A"]):not([style*="--accent"]),
body.light-mode .modal-body i,
body.light-mode .modal-body em {
    color: #333333 !important;
}

/* Gör fet text ännu mörkare (nästan svart) för extra bra kontrast */
body.light-mode .modal-body strong:not([style*="8CC63F"]):not([style*="F2994A"]):not([style*="--accent"]),
body.light-mode .modal-body b:not([style*="8CC63F"]):not([style*="F2994A"]):not([style*="--accent"]) {
    color: #111111 !important;
}
/* Tvingar även alla rubriknivåer inne i modalen att bli mörka i Light Mode */
body.light-mode .modal-body h1,
body.light-mode .modal-body h2,
body.light-mode .modal-body h3,
body.light-mode .modal-body h4,
body.light-mode .modal-body h5,
body.light-mode .modal-body h6 {
    color: #111111 !important;
}
    

/* =========================================
   --- NUCLEAR LIGHT MODE FIX: RUBRIKER ---
   ========================================= */

/* Denna regel letar upp rubrik-liknande text och tvingar den att bli mörk,
   även om det finns inline-styles som försöker göra den ljusgrå. */
body.light-mode .modal-body strong,
body.light-mode .modal-body b,
body.light-mode .modal-body h1,
body.light-mode .modal-body h2,
body.light-mode .modal-body h3,
body.light-mode .modal-body h4,
body.light-mode .modal-body h5 {
    color: #111111 !important;
    opacity: 1 !important;
}

/* Fixar specifikt de där "underrubrikerna" som ofta är lite gråare */
body.light-mode .modal-body .yeast-master-profile-header, 
body.light-mode .modal-body [style*="color: #aaa"],
body.light-mode .modal-body [style*="color: #888"],
body.light-mode .modal-body [style*="color: #ccc"] {
    color: #222222 !important;
}

/* Men vi måste fortfarande rädda våra Action Markers (gröna och orangea) 
   så att de INTE blir svarta! */
body.light-mode .modal-body [style*="8CC63F"], 
body.light-mode .modal-body [style*="--accent"],
body.light-mode .modal-body [style*="F2994A"] {
    color: inherit !important; /* Låter ursprungsfärgen vinna här */
}

/* --- TOGGLE SWITCH (PUSH NOTIFICATIONS) --- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px; /* Lite slimmare för att passa dina andra rader */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333; /* Snygg mörkgrå i avstängt läge */
  transition: .4s;
  border-radius: 34px;
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .slider {
  /* Använder din dynamiska app-färg! */
  background-color: var(--accent-color); 
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(24px);
}

/* --- FIX FÖR LÅNGA TEXTER I PROFILE SUMMARY --- */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start !important; /* Håller texterna i ovankant när de radbryts */
    gap: 15px !important; /* Den magiska krockkudden! Hindrar texterna från att nudda varandra */
}

.summary-row .label {
    flex-shrink: 0 !important; /* Tvingar vänsteretiketten (t.ex. "Cold Crash") att behålla sin bredd så den inte krossas */
}

.summary-row .value {
    text-align: right;
    flex-grow: 1; /* Låter den långa texten ta upp den plats som är kvar... */
    word-break: break-word; /* ...och tvingar den att radbryta snyggt på högersidan! */
    line-height: 1.4; /* Gör radavståndet lite luftigare när det blir två rader */
    text-wrap: balance; /* tva lika langa rader i stallet for ett ensamt "7,5" - se summaryIhop i profiler.js */
}

/* Standard (Dark mode) */
.ym-input-field {
    width: 100%;
    background: #000; 
    border: 1px solid #333; 
    color: #fff; 
    padding: 12px; 
    border-radius: 8px;
}

/* När light-mode är på */
.light-mode .ym-input-field {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #333333 !important;
}

.settings-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    background: rgba(0,0,0,0.15); /* Gör den utfällda zonen subtilt mörkare */
}

.settings-details.open {
    max-height: 200px; /* Tillräckligt högt för att rymma de tre raderna */
}

/* Light mode justering för den utfällda bakgrunden */
body.light-mode .settings-details {
    background: rgba(0,0,0,0.02);
}

/* Standardfärg (Dark mode) */
#setting-active-device {
    color: #ffffff;
}

/* Anpassning för Light mode */
body.light-mode #setting-active-device {
    color: #111111; /* En snygg, mörk färg som matchar resten av din light mode-text */
}

/* Bonus: Fixa så att även alternativen inuti rullistan har rätt bakgrund i light mode */
body.light-mode #setting-active-device option {
    background-color: #ffffff;
    color: #111111;
}
body:not(.light-mode) #setting-active-device option {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* =========================================
   LIGHT MODE FIX: LAB NOTES TEXTAREA
   ========================================= */

body.light-mode .modal-body textarea,
body.light-mode .modal-body input[type="text"],
body.light-mode .modal-body input[type="number"] {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #ccc !important;
}

/* Specifikt för LAB NOTES-rutan */
body.light-mode #modal-lab-notes,
body.light-mode [id*="lab-notes"],
body.light-mode [class*="lab-notes"] {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #ccc !important;
}

/* Dela-knappen i Live View: utöka det KLICKBARA området osynligt så den blir
   lättare att pricka, utan att själva pillerformen ser större ut. */
#btn-share-fermentation {
    position: relative;
}
#btn-share-fermentation::before {
    content: "";
    position: absolute;
    top: -14px;
    bottom: -14px;
    left: -18px;
    right: -10px;
    /* osynligt, men fångar tryck runt knappen */
}

/* ==========================================================================
   SPLASH-SKÄRM — visas medan Firebase-auth löser sig, göms av hideSplash().
   ========================================================================== */
#app-splash {
    font-family: 'Lexend', sans-serif;
    transition: opacity 0.4s ease;
}
#app-splash.hidden {
    opacity: 0;
    pointer-events: none;
}
#app-splash-logo {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    animation: splashPulse 1.4s ease-in-out infinite;
}
/* Splashen foljer temat. theme-boot.js satter light-mode pa body innan splashen ritas. */
body.light-mode { --splash-bg: #f0f0f0; }
body.light-mode #app-splash-name { color: #111; }
#app-splash-name {
    color: #fff;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 1px;
}
#app-splash-dots {
    display: flex;
    gap: 6px;
}
#app-splash-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color, #f39c12);
    animation: splashDot 1s infinite ease-in-out both;
}
#app-splash-dots span:nth-child(1) { animation-delay: -0.32s; }
#app-splash-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes splashPulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.07); opacity: 1; }
}
@keyframes splashDot {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ============================================================ */
/* --- KÖKSLABBET: segment-växel + protokoll-läsvy + utskrift --- */
/* ============================================================ */

/* Segment-växel överst i Lab-fliken. Samma visuella språk som 24h/Allt-toggeln. */
.lab-segment {
    display: inline-flex;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}
.lab-segment button {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.lab-segment button.active {
    background: var(--accent-color);
    color: #111;
}
/* Tre knappar sedan Verktyg kom till: pa smal skarm far de dela pa bredden i stallet for
   att skjuta ut "Laboratorio casero | Herramientas" utanfor kanten. Nar xs-steget lyfte texten
   0,72 -> 0,75 rem brots "Laboratorio casero" pa tva rader (Klas 2026-10-19). Uppmatt i Chrome
   (Lexend 700, 12 px): de tre spanska etiketterna = 280 px med 0,5 px spatiering, 261 utan.
   Segmentet ar ~300 px pa en 360-telefon, sa 280 + 2x6 px x3 + kant = 318 brot fortfarande.
   Utan spatiering och 4 px sidmarginal: 261 + 24 + 2 = 287. */
@media (max-width: 768px) {
    .lab-segment { display: flex; }
    /* sm-steget sedan 2026-10-20 (Klas: for sma): spanskan forkortad till "Lab casero", och da
       ryms alla fem sprak pa en rad i 0,85 rem pa en 360-telefon (uppmatt i Chrome). I 1 rem
       bryts spanskan anda - "Herramientas" ar ocksa lang. */
    .lab-segment button { flex: 1 1 auto; padding: 8px 4px; font-size: var(--fs-sm); letter-spacing: 0; }
}
/* DATOR: storre (Klas 2026-10-19: "for sma"). Det ar Labbets huvudnavigering, inte ett filter -
   med 24h/Allt-togglens matt (0,75 rem, ~30 px) var etiketterna mindre an korttexten under.
   Nu base-steget och ~40 px hojd. Mobilen ovan ar orord: dar ar bredden inmatt mot spanskan. */
@media (min-width: 769px) {
    .lab-segment button { font-size: var(--fs-base); padding: 10px 24px; }
}
body.light-mode .lab-segment { border-color: #ccc; }
body.light-mode .lab-segment button { color: #666; }
/* Den aktiva knappen behaller sin morka text aven i ljust lage. Raden ovan vager tyngre an
   .lab-segment button.active (en klass mer pa body), sa "Akademin" blev #666 pa accenten -
   gra pa rott, 2,2:1 (Klas sag det 2026-10-13). */
body.light-mode .lab-segment button.active { color: #111; }

/* "PROTOKOLL"-badge i protokollkortens titel */
.protocol-badge {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
}

/* Actions-rad i läsvyn (bakåt + skriv ut) */
.protocol-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.protocol-print-btn {
    background: var(--accent-color);
    color: #111;
    border: none;
    border-radius: 8px;
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 9px 18px;
    cursor: pointer;
}

/* Själva protokoll-dokumentet */
.protocol-doc { max-width: 720px; }
.protocol-title {
    color: var(--text-main);
    font-size: var(--fs-xl);
    font-weight: 900;
    letter-spacing: -1px;
    margin: 0 0 12px;
}
.protocol-intro {
    color: var(--text-dim);
    line-height: 1.6;
    font-size: var(--fs-base);
    margin-bottom: 24px;
}
.protocol-intro p { margin: 0; }

.protocol-materials {
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 30px;
}
.protocol-materials h3 {
    margin: 0 0 12px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-text);
}
.protocol-materials ul {
    margin: 0;
    padding-left: 18px;
    columns: 2;
    column-gap: 30px;
}
.protocol-materials li {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: var(--fs-base);
    break-inside: avoid;
}

.protocol-section { margin-bottom: 34px; }
.protocol-section h3 {
    color: var(--text-main);
    font-size: var(--fs-md);
    font-weight: 800;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}
/* Luft ovanför varje rubrik utom den första. Måste vara PADDING, inte margin:
   en marginal här (eller på sista notisrutan) kollapsar ihop med avsnittets
   margin-bottom och ger ingen extra luft alls — vilket gjorde att nästa rubrik
   klistrade fast i en avslutande tips-/varningsruta. */
.protocol-section + .protocol-section h3 { padding-top: 14px; }
.protocol-steps { margin: 0; padding-left: 22px; }
.protocol-steps li {
    color: var(--text-dim);
    line-height: 1.65;
    font-size: var(--fs-base);
    margin-bottom: 10px;
}
.protocol-steps li strong { color: var(--text-main); }

.protocol-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 14px 0 0;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-dim);
}
.protocol-note-icon { flex-shrink: 0; }

/* IKONSETET (ersatter emojis, dansk testare 2026-10-18). En ikon = <i class=ico-namn></i>,
   utan citattecken runt klassen sa den kan sta i vilken strang som helst - aven i
   oversattningarna, som ar inramade med bade " och '. SVG:n ar en MASK och fargen ar
   currentColor, sa ikonen tar textens farg: gul i en varning, gron i ett ok-besked, och
   bada temana pa kopet. Ritade pa 24-ruta med streck 1,8 - kortikonernas 1,1 forsvinner
   i 16 px. Ritningarna (och en forhandsvisning) gors om med ett skript; andra inte
   data-URI:erna for hand. print-color-adjust: en mask fylls med bakgrundsfarg, och den
   tar webblasaren annars bort vid utskrift - protokollens tipsrutor skrivs ut. */
[class^="ico-"], [class*=" ico-"] {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    margin-right: 0.3em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.protocol-note-icon [class^="ico-"] { margin-right: 0; vertical-align: -0.25em; }
.origin-map-link [class^="ico-"] { margin: 0 0 0 0.1em; }
/* Slurryns tathet: samma burk - glesa prickar, tata prickar, fylld (celler per mL). */
.ico-varn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 L21.2 19.8 H2.8 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 9.6 V13.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='12' cy='16.9' r='1.15' fill='%23000'/%3E%3C/svg%3E"); }
.ico-ok { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M7.6 12.4 L10.6 15.4 L16.6 9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-nara { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none' stroke-dasharray='3.2 2.2'/%3E%3Cpath d='M7.6 12.4 L10.6 15.4 L16.6 9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-ring { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-vag { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 V20 M8 20 H16 M4.5 7 H19.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M4.5 7 L2 13.5 M4.5 7 L7 13.5 M19.5 7 L17 13.5 M19.5 7 L22 13.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M1.6 13.5 Q4.5 17 7.4 13.5 Z M16.6 13.5 Q19.5 17 22.4 13.5 Z' fill='%23000'/%3E%3C/svg%3E"); }
.ico-tips { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 V15 Q5.6 12.9 5.6 9.4 A6.4 6.4 0 0 1 18.4 9.4 Q18.4 12.9 14.8 15 V16.6 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M9.6 19.4 H14.4 M10.6 21.8 H13.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-tunn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.6 V18.2 Q5 21 7.8 21 H16.2 Q19 21 19 18.2 V4.6 M3.8 4.6 H20.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='9' cy='12.4' r='1.15' fill='%23000'/%3E%3Ccircle cx='14.6' cy='11.6' r='1.15' fill='%23000'/%3E%3Ccircle cx='11.8' cy='16.6' r='1.15' fill='%23000'/%3E%3Ccircle cx='15.6' cy='18' r='1.15' fill='%23000'/%3E%3C/svg%3E"); }
.ico-mellan { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.6 V18.2 Q5 21 7.8 21 H16.2 Q19 21 19 18.2 V4.6 M3.8 4.6 H20.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='8.7' cy='11.6' r='1.15' fill='%23000'/%3E%3Ccircle cx='12' cy='11.6' r='1.15' fill='%23000'/%3E%3Ccircle cx='15.3' cy='11.6' r='1.15' fill='%23000'/%3E%3Ccircle cx='8.7' cy='14.9' r='1.15' fill='%23000'/%3E%3Ccircle cx='12' cy='14.9' r='1.15' fill='%23000'/%3E%3Ccircle cx='15.3' cy='14.9' r='1.15' fill='%23000'/%3E%3Ccircle cx='8.7' cy='18.2' r='1.15' fill='%23000'/%3E%3Ccircle cx='12' cy='18.2' r='1.15' fill='%23000'/%3E%3Ccircle cx='15.3' cy='18.2' r='1.15' fill='%23000'/%3E%3C/svg%3E"); }
.ico-tjock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.6 V18.2 Q5 21 7.8 21 H16.2 Q19 21 19 18.2 V4.6 M3.8 4.6 H20.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M7.4 9.6 H16.6 V17.6 Q16.6 18.8 15.4 18.8 H8.6 Q7.4 18.8 7.4 17.6 Z' fill='%23000'/%3E%3C/svg%3E"); }
.ico-bugg { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14' rx='5.2' ry='6.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='12' cy='5.6' r='2.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 7.8 V20.4 M6.8 11 L3.4 9.2 M6.8 14.4 H3 M7.2 17.8 L3.8 20 M17.2 11 L20.6 9.2 M17.2 14.4 H21 M16.8 17.8 L20.2 20 M10.6 4 L9 2.4 M13.4 4 L15 2.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-korg { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.4 6.8 H19.6 M9.8 6.8 V4.4 H14.2 V6.8 M6.2 6.8 L7.2 20.4 H16.8 L17.8 6.8 M10 10.4 V17 M14 10.4 V17' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-lank { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 13.8 L13.8 10.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M11.2 7.4 L12.6 6 A3.8 3.8 0 0 1 18 11.4 L16.6 12.8 M12.8 16.6 L11.4 18 A3.8 3.8 0 0 1 6 12.6 L7.4 11.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-skriv { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9 V3.6 H17 V9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Crect x='3.4' y='9' width='17.2' height='8' rx='1.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M7 14.2 H17 V20.6 H7 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='17.4' cy='11.8' r='0.9' fill='%23000'/%3E%3C/svg%3E"); }
.ico-plats { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4 C12 21.4 5.2 14.4 5.2 9.6 A6.8 6.8 0 0 1 18.8 9.6 C18.8 14.4 12 21.4 12 21.4 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='12' cy='9.6' r='2.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-penna { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 4.4 L19.6 8.4 L8.6 19.4 L3.6 20.4 L4.6 15.4 Z M13.4 6.6 L17.4 10.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-karta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.2 L9 3.6 L15 6.2 L21 3.6 V17.8 L15 20.4 L9 17.8 L3 20.4 Z M9 3.6 V17.8 M15 6.2 V20.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-klocka { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13.6' r='7.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 13.6 V9.4 M9.8 2.6 H14.2 M12 2.6 V6 M18.2 6.4 L19.8 4.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
/* Spelens ljudval (memory, Klas 2026-10-22): hogtalare med vagor / med kryss. */
.ico-ljud { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.4 H7.6 L12.4 5.4 V18.6 L7.6 14.6 H4 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M15.6 9.2 Q17.4 12 15.6 14.8 M18.4 6.6 Q22 12 18.4 17.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-tyst { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.4 H7.6 L12.4 5.4 V18.6 L7.6 14.6 H4 Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M15.8 9.6 L20.6 14.4 M20.6 9.6 L15.8 14.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-dela { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 9.4 H6.8 Q5.4 9.4 5.4 10.8 V19.6 Q5.4 21 6.8 21 H17.2 Q18.6 21 18.6 19.6 V10.8 Q18.6 9.4 17.2 9.4 H15.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 14.6 V3 M8.6 6.4 L12 3 L15.4 6.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.ico-hemskarm { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.6' y='3.6' width='16.8' height='16.8' rx='3.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 8 V16 M8 12 H16' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.protocol-note.tip {
    background: rgba(243, 156, 18, 0.10);
    border-left: 4px solid #f39c12;
}
.protocol-note.safety {
    background: rgba(231, 76, 60, 0.10);
    border-left: 4px solid #e74c3c;
}
.protocol-note strong { color: var(--text-main); }

/* Dela-knappen i DEMOLÄGET: syns som skyltfönster (visa att funktionen finns) men kan
   inte skapa någon länk — dämpad så den inte lovar mer än den håller. Modalen förklarar.
   Klassen sätts/tas bort i dashboard.js (renderDemoDashboard resp. updateDashboard).
   !important krävs: knapparna har border/color som INLINE-stil i index.html, och inline
   vinner över stilmallen oavsett selektorstyrka. */
#btn-share-fermentation.share-btn-demo,
#btn-share-fermentation-mobile.share-btn-demo {
    border-color: #4a4a4a !important;
    color: #888 !important;
}

/* Demoläget: raden med "DEMOLÄGE" + i-knappen. Knappen är 26 px hög i en textrad
   på ~12 px — som inline-element sköt den upp över radens överkant och hamnade i
   kortets ram. Som FLEXRAD växer raden i stället till knappens höjd och allt
   ligger kvar innanför. Klassen sätts/tas bort i dashboard.js. */
.device-name-display.with-demo-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========================================= */
/* --- GUIDAT PASS (kör-läge vid bänken) --- */
/* Läses på en telefon som ligger på bänken: stor text, stora tryckytor, inget
   som kräver precision med kladdiga fingrar. */
/* ========================================= */
.protocol-guided-btn {
    display: block;
    width: 100%;
    margin: 0 0 22px;
    padding: 14px;
    background: var(--accent-color);
    border: none;
    border-radius: 10px;
    color: #111;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: var(--fs-base);
    cursor: pointer;
}

#guided-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100003;          /* över protokollvyn och navigeringen */
    background: rgba(0,0,0,0.88);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.guided-sheet {
    background: #151515;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    font-family: 'Lexend', sans-serif;
    color: var(--text-main);
}
.guided-narrow { max-width: 380px; text-align: center; }
.guided-sheet h2 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 800; }
.guided-dim { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 14px; }
.guided-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guided-x {
    background: none; border: none; color: #888; font-size: 1.3rem; /* fs:fast */ cursor: pointer;
    padding: 4px 8px; line-height: 1;
}
.guided-label {
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px;
    color: var(--text-dim); text-transform: uppercase; margin: 16px 0 8px;
}
.guided-seg { display: flex; gap: 8px; }
.guided-seg button {
    flex: 1; padding: 12px 8px; border-radius: 10px; cursor: pointer;
    background: #1f1f1f; border: 1px solid #3a3a3a; color: var(--text-dim);
    font-family: 'Lexend', sans-serif; font-weight: 700; font-size: var(--fs-sm);
}
.guided-seg button.active { background: color-mix(in srgb, var(--accent-color) 15%, transparent); border-color: var(--accent-color); color: var(--accent-text); }
.guided-search {
    width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px;
    background: #0e0e0e; border: 1px solid #333; color: var(--text-main);
    font-family: 'Lexend', sans-serif; font-size: var(--fs-base); outline: none;
}
.guided-list { max-height: 38vh; overflow-y: auto; margin-top: 10px; border-top: 1px solid #262626; }
.guided-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 6px; border-bottom: 1px solid #222; cursor: pointer;
    font-size: var(--fs-base);
}
.guided-row.on { color: var(--accent-text); }
.guided-row input { width: 20px; height: 20px; accent-color: var(--accent-color); flex-shrink: 0; }
.guided-row-name { flex: 1; }
.guided-badge { color: var(--accent-text); font-size: var(--fs-xs); }
/* Ordningsnumret i stamväljaren: passet körs i den ordning man bockar av, och siffran är
   det enda som visar den ordningen INNAN passet startar. Fast bredd så raderna linjerar
   oavsett om numret är ett- eller tvåsiffrigt. */
/* TIMER-STEG. Samma ruta fore och efter start, sa kortet inte hoppar i hojd nar man
   trycker. Siffrorna ar stora med flit: de ska ga att lasa fran andra sidan bordet, med
   telefonen liggande. */
.guided-timer { margin: 18px 0 6px; }
.guided-timer-btn {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    border-radius: 10px;
    padding: 12px 20px;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: var(--fs-xs);
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.guided-timer-min {
    font-weight: 600;
    font-size: var(--fs-xs);
    opacity: 0.75;
}
.guided-timer-siffror {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 2.6rem; /* fs:fast */
    letter-spacing: 1px;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;   /* siffrorna far inte vandra i sidled vid nedrakning */
}
/* Nar tiden ar ute byter siffrorna till besked-gronan, inte accenten: det ar ett besked,
   inte krom. Se accent_check. */
.guided-timer-siffror.klar { color: var(--ok-text); }
/* Taggen i snabblagets lista: "15 min" efter ett steg som ar vantan. */
.guided-timer-tagg {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 800;
    white-space: nowrap;
}

/* SNABBLAGET: kryssrutan i valjaren och stegen som lista pa stamkortet. Den som kan
   passet utantill vill inte lotsas - bara veta vilken stam som star pa tur. */
.guided-snabb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    font-size: var(--fs-sm);
    color: var(--text-dim);
    cursor: pointer;
}
.guided-snabb input { width: 18px; height: 18px; accent-color: var(--accent-color); flex-shrink: 0; }
.guided-snabb-rubrik { margin-top: 18px; }
.guided-snabb-steg {
    text-align: left;
    margin: 6px 0 4px;
    padding-left: 22px;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-dim);
}
.guided-snabb-steg li { margin-bottom: 8px; }

.guided-order {
    min-width: 1.5rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-align: center;
    flex-shrink: 0;
}
/* Slutkortets text står ensam på skärmen utan stamnamn ovanför - lite mer luft upptill så
   den inte klistrar sig i förloppsstapeln. */
.guided-end-text { margin-top: 26px; }
.guided-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #262626;
}
.guided-foot .guided-dim { margin: 0; }
.guided-primary {
    background: var(--accent-color); border: none; color: #111; cursor: pointer;
    padding: 13px 20px; border-radius: 10px;
    font-family: 'Lexend', sans-serif; font-weight: 800; font-size: var(--fs-base);
}
.guided-ghost {
    background: none; border: 1px solid #3a3a3a; color: var(--text-dim); cursor: pointer;
    padding: 11px 16px; border-radius: 10px;
    font-family: 'Lexend', sans-serif; font-weight: 700; font-size: var(--fs-sm);
}
.guided-ghost[disabled] { opacity: 0.35; cursor: default; }

/* --- Körvyn --- */
.guided-run { text-align: center; }
.guided-count { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); letter-spacing: 1px; }
.guided-bar { height: 4px; background: #262626; border-radius: 2px; overflow: hidden; margin: 10px 0 24px; }
.guided-bar div { height: 100%; background: var(--accent-color); transition: width 0.25s ease; }
.guided-strain {
    font-size: clamp(1.8rem, 8vw, 2.6rem); /* fs:fast */
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 4px;
    word-break: break-word;   /* långa stamnamn får bryta hellre än att svämma över */
}
.guided-sub { margin-bottom: 20px; }
.guided-steps {
    text-align: left; margin: 0 auto 24px; padding-left: 22px; max-width: 380px;
    color: var(--text-dim); font-size: var(--fs-base); line-height: 1.7;
}
.guided-steps li { margin-bottom: 8px; }
.guided-steps strong { color: var(--text-main); }

/* Ett steg per kort: texten får vara stor — den läses på en armlängds avstånd
   med händerna upptagna, ofta i ögonvrån. */
.guided-card-text {
    margin: 0 auto 16px; max-width: 420px;
    font-size: var(--fs-base); line-height: 1.6; color: var(--text-dim);
}
.guided-card-text strong { color: var(--text-main); }
.guided-fig { position: relative; margin-bottom: 18px; }
/* Lågan lever hela tiden — en helt stilla låga ser ut som en bugg. Ren CSS så den
   flimrar även när JS-koreografin står still mellan uppspelningarna. */
.burner-flame {
    transform-origin: 352px 206px;
    animation: burner-flicker 1.6s ease-in-out infinite;
}
@keyframes burner-flicker {
    0%, 100% { transform: scaleY(1) scaleX(1);      opacity: 1; }
    30%      { transform: scaleY(1.07) scaleX(0.96); opacity: 0.92; }
    55%      { transform: scaleY(0.95) scaleX(1.03); opacity: 1; }
    80%      { transform: scaleY(1.04) scaleX(0.98); opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
    .burner-flame { animation: none; }
}
/* Under figuren, inte ovanpå den: brännaren står i nedre högra hörnet av SVG:n
   och krockade med en absolut placerad knapp. */
.guided-replay {
    display: block; margin: 4px auto 0;
    background: none; border: 1px solid #3a3a3a; color: var(--text-dim);
    padding: 6px 14px; border-radius: 20px; cursor: pointer;
    font-family: 'Lexend', sans-serif; font-size: var(--fs-xs); font-weight: 700;
}
.guided-hyg {
    text-align: left; margin: 0 0 22px; padding-left: 22px;
    color: var(--text-dim); font-size: var(--fs-base); line-height: 1.6;
}
.guided-hyg li { margin-bottom: 10px; }
.guided-hyg strong { color: var(--text-main); }
.guided-big { width: 100%; padding: 18px; font-size: var(--fs-base); }
.guided-foot-run { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
.guided-done { font-size: 3rem; /* fs:fast */ color: var(--accent-text); line-height: 1; margin-bottom: 10px; }

body.light-mode .guided-sheet { background: #fff; border-color: #ddd; }
body.light-mode .guided-search { background: #f6f6f6; border-color: #ddd; }
body.light-mode .guided-seg button { background: #f2f2f2; border-color: #ddd; }
body.light-mode .guided-row { border-bottom-color: #eee; }
body.light-mode .guided-list { border-top-color: #eee; }

/* "Se även"-fot: navigering vidare till besläktade protokoll. Döljs i utskriften via
   .protocol-hide-print — på papper är länkar bara brus. */
.protocol-seealso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2a;
    font-size: var(--fs-base);
}
.protocol-seealso strong { color: var(--text-dim); font-weight: 600; }
.protocol-seealso a { color: var(--accent-text); cursor: pointer; font-weight: bold; }
/* Nästa steg: EN tydlig väg vidare, ovanför den lågmälda Se även-foten. */
.protocol-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 24px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
}
.protocol-next strong { color: var(--text-dim); font-weight: 600; }
.protocol-next a { color: var(--accent-text); cursor: pointer; font-weight: bold; font-size: var(--fs-base); }

body.light-mode .protocol-materials { background: rgba(0,0,0,0.03); border-color: #e0e0e0; }
body.light-mode .protocol-section h3 { border-bottom-color: #e0e0e0; }
body.light-mode .protocol-seealso { border-top-color: #e0e0e0; }

/* --- UTSKRIFT: skriv bara ut protokollet, bläck-vänligt --- */
@media print {
    @page { margin: 14mm; }

    /* Höjd/overflow måste släppas fria, annars klipps dokumentet vid en skärmhöjd. */
    html, body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body * { visibility: hidden !important; }
    #protocol-view, #protocol-view * { visibility: visible !important; }

    /* Allt annat i Lab-vyn kollapsas HELT (display:none) — visibility:hidden behåller
       elementets yta och sköt tidigare ner protokollet, vilket var skälet till att det
       positionerades absolut. */
    #view-librarian > *:not(#protocol-view) { display: none !important; }

    #protocol-view {
        /* position:static, INTE absolute: ett absolut positionerat element står utanför
           sidflödet och pagineras då inte — allt utom första sidan föll bort ("1/1" i
           utskriftsvyn). I normalflödet bryts protokollet över så många sidor det behöver. */
        position: static !important;
        width: 100%;
        padding: 0 !important;
        background: #fff !important;
    }
    .protocol-hide-print, .main-nav { display: none !important; }
    /* Svart text på vitt papper */
    #protocol-view, #protocol-view h2, #protocol-view h3,
    #protocol-view li, #protocol-view p, #protocol-view span,
    #protocol-view em, #protocol-view strong {
        color: #000 !important;
    }
    .protocol-materials { background: #f4f4f4 !important; border: 1px solid #bbb !important; }
    .protocol-materials h3, .protocol-section h3 { color: #000 !important; border-color: #bbb !important; }
    .protocol-note.tip { background: #fff8e8 !important; border-left: 4px solid #b8860b !important; }
    .protocol-note.safety { background: #fdecea !important; border-left: 4px solid #c0392b !important; }
    .protocol-title { font-size: 22pt; /* fs:fast */ }

    /* Var sidbrytningen får hamna: aldrig mitt i ett steg eller en ruta, och aldrig
       direkt efter en rubrik (då blir rubriken ensam kvar sist på sidan). */
    .protocol-note,
    .protocol-steps li,
    .protocol-materials { break-inside: avoid; page-break-inside: avoid; }
    .protocol-section h3 { break-after: avoid; page-break-after: avoid; }
    .protocol-section { break-inside: auto; page-break-inside: auto; }
}

/* --- CELLRAKNAREN I PITCHKALKYLATORN ---------------------------------------------
   En OPTION ovanfor de tva Measured-falten: den raknar om rutor i mikroskopet till
   celler/mL och viabilitet och FYLLER I falten. Darfor hopfalld fran start - den som
   redan har sina tal ska inte behova bladdra forbi den.

   Samma formsprak som lektionernas ingress (.academy-lead): en chip-formad summary med
   en pil ritad av CSS-kanter. Pilen ar INTE ett tecken - content: "\25be" las en gang
   som en oktal escape och blev ett styrtecken pa skarmen. Kanter har inga escaper. */
.calc-count-helper {
    margin-bottom: 15px;
}

.calc-count-helper > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 6px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    color: var(--accent-text);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.calc-count-helper > summary::-webkit-details-marker { display: none; }

.calc-count-helper > summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.18s ease;
}

.calc-count-helper[open] > summary::after { transform: rotate(180deg); }
.calc-count-helper > summary:hover { background: rgba(255, 255, 255, 0.1); }

/* PITCHKALKYLATORNS UNDERSKOTT (Klas 2026-11-01): knappar i stallet for alternativ A/B,
   forkulturen som rader under paketen, och forklaringarna stangda bakom ett ▸. */
.calc-gap-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.calc-gap-btns .ym-btn-outline { flex: 1 1 140px; }

.calc-why {
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.calc-why > summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent-text);
    font-weight: 700;
}
.calc-why > summary::-webkit-details-marker { display: none; }
.calc-why > summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    transition: transform 0.18s ease;
}
.calc-why[open] > summary::before { transform: rotate(90deg); }
.calc-why > div {
    margin-top: 6px;
    padding-left: 1em;
    line-height: 1.5;
}

.calc-into {
    margin: 8px 0 6px;
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.calc-starter {
    border-left: 2px solid var(--accent-color);
    padding-left: 10px;
}
.calc-starter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--text-main);
}
.calc-starter-head span {
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.calc-starter-x {
    margin-left: auto;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}
.calc-starter-x:hover { color: var(--text-main); }
.calc-step-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-main);
}
.calc-step-note {
    margin: 2px 0;
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--text-dim);
}

/* Tva kolumner: de fyra falten hor ihop parvis - levande/doda ar avlasningen,
   rutor/spadning ar hur den gjordes. */
.calc-count-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

/* Ett falt per rad nar det blir trangt: etiketterna ar hela fraser
   ("Raknade mellanrutor (av 25)"), inte ord. 420 -> 600 i brytpunktsstadningen: 400 hade gett
   telefoner pa 412-430 px tva kolumner med de langa etiketterna - en kolumn fungerar pa alla telefoner. */
@media (max-width: 600px) {
    .calc-count-grid { grid-template-columns: 1fr; }
}

.calc-count-readout {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.03);
    font-size: var(--fs-sm);
    line-height: 1.35;
}

body.light-mode .calc-count-readout { background: rgba(0, 0, 0, 0.03); }

/* Spadningen: tre knappar + Annan, over hela rutnatets bredd (knapparna behover plats).
   Faltet syns bara under Annan; det ar anda det som bar talet. */
.spad-grupp { grid-column: 1 / -1; }
.spad-val {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.spad-val button {
    background-color: var(--accent-tint);
    border: 2px solid var(--accent-color);
    color: var(--accent-text);
    padding: 10px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: bold;
}
.spad-val button.active {
    background-color: var(--accent-color);
    color: #111;
}
.spad-annan { display: none; margin-top: 8px; }
.spad-annan.visas { display: block; }
.spad-ledtrad {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

/* Om-sidornas rubrikikoner (Hardvaran, Molnappen, Jastbiblioteket och deras kort). Samma
   formsprak som Academy-korten: konturen pa --oled-color och inte pa rubrikens accentfarg,
   sa foremalet laser som ett foremal och inte som en del av texten. Inline och inte flex,
   sa en rubrik som bryter ("Labbet, Akademin & Kokslabbet") bryter som text. */
.about-ico {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.28em;
    margin-right: 0.35em;
    color: var(--oled-color);
}

/* VÄGEN VIDARE I DEN DELADE VYN (#shared-cta). Visas bara när man öppnat en ?share-länk,
   alltså för nagon som kanske aldrig sett appen: en rad om vad hon tittar pa och en knapp
   till startsidan. Dampad med flit - jasningen ar det man kom for, det har ar en dorr
   bredvid den, inte en skylt framfor den. */
#shared-cta {
    max-width: 420px;
    margin: 28px auto 40px;
    padding: 20px 16px 0;
    border-top: 1px solid #333;
    text-align: center;
}
#shared-cta-lead {
    margin: 0 0 14px;
    color: var(--text-dim, #888);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
#shared-cta-btn {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: var(--fs-xs);
    letter-spacing: 0.5px;
    text-decoration: none;
}
#shared-cta-btn:hover { background: color-mix(in srgb, var(--accent-color) 22%, transparent); }
body.light-mode #shared-cta { border-top-color: #ddd; }
/* Listen längst ner i den delade vyn: alltid synlig, en rad. Bakgrunden är sidans egen
   (--oled-bg), inte accentfärgen - jäsningen är fortfarande det man kom för. */
#shared-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--oled-bg, #050505);
    border-top: 1px solid var(--accent-color);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-dim, #888);
}
#shared-cta-bar-btn { color: var(--accent-text); font-weight: 800; text-decoration: none; white-space: nowrap; }

/* "⏱ 14,0 d över plan" fäller ut en förklaring (ägaren; tittaren ser inte märket alls). */
#plan-divergence .plan-info-i { font-weight: 400; opacity: 0.8; margin-left: 4px; }
.plan-info {
    margin-top: 8px; padding: 10px 12px; border-radius: 8px;
    border-left: 3px solid var(--accent-secondary);
    background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
    font-size: var(--fs-xs); line-height: 1.5; font-weight: 400; color: var(--text-main, #ddd);
}
/* Vagen vidare nar profilen ar slut (dashboard.js, plan_carb_link): kolsyrningsverktyget. */
.plan-info-lank { display: inline-block; margin-top: 6px; color: var(--accent-text); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ==========================================================================
   FRAMSIDAN: VERKTYGEN, ENHETEN, VAGEN IN
   ==========================================================================
   Ombyggd 2026-10-09 infor den tysta lanseringen: verktygen forst, enheten sist med sin
   status utskriven (se kommentaren i index.html). Tidigare var blocket BARA PC och mobilen
   fick ett litet "Vad ar YeastMaster?"-kort - Klas: "For mobil blir det for mkt text." Nu
   visas samma kort pa bada, men pa mobil utan beskrivning: rubrik + pil racker for att
   hitta in, och det ar verktygen besokaren ska se forst. */
.soul-tagline {
    margin: -12px 0 28px;
    color: var(--text-main);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.5;
}
.soul-block {
    margin-top: 44px;
}
.soul-block h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -1px;
    font-size: var(--fs-lg);
    color: var(--text-main);
    margin: 0 0 14px;
}
.soul-badge {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 1px;
}
/* BESKED, INTE KROM: "under utveckling" ar en status, sa den far statusfargen och inte
   accenten (jfr accentsvepet). Barnsten = "inte an", utan att lata som ett fel. */
.soul-badge.soul-badge-dev {
    background: color-mix(in srgb, var(--warn-text) 14%, transparent);
    border-color: var(--warn-text);
    color: var(--warn-text);
}
.soul-lead {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: var(--fs-base);
    margin: 0 0 20px;
}
.soul-card {
    padding: 16px 20px;
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.soul-card h3 {
    color: var(--text-main);
    margin: 0 0 5px 0;
    font-size: var(--fs-md);
    font-weight: 800;
}
.soul-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-base);
    line-height: 1.5;
}
.soul-card .animated-arrow {
    color: var(--text-dim);
    font-size: 1.5rem; /* fs:fast */
    font-weight: bold;
    margin-left: 15px;
}

/* Efter verktygen (EXPLORE) och fore YeastMaster-blocket sedan 2026-10-18 (Klas). Samma
   luft ovanfor som mellan blocken (.soul-block har 44/50 px). */
#soul-start {
    margin-top: 44px;
}
.soul-start-prompt {
    margin: 0 0 20px;
    font-size: var(--fs-base);
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.soul-login-line {
    margin: 18px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-dim);
}
.soul-login-line a {
    color: var(--accent-text);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* VANTELISTAN under enhetskorten. Faltet och knappen pa en rad som bryter till tva pa
   smal skarm. Klart-meddelandet ar ett besked, inte krom: --ok-text. Felraden ar "se upp",
   inte "trasigt": --warn-text (det finns ingen felfarg i paletten). */
.soul-waitlist {
    margin: 22px 0 0;
    padding: 18px 20px;
    border: 1px dashed color-mix(in srgb, var(--warn-text) 55%, transparent);
    border-radius: 12px;
}
/* Passar din kyl? Bilden och texten bredvid varandra; när raden inte räcker (telefon)
   bryts texten under bilden av sig själv, utan brytpunkt. */
.soul-fits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 18px;
}
.soul-fits-fig {
    flex: 0 0 auto;
    width: 150px;
    height: auto;
    color: var(--text-main);
}
.soul-fits-text {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-dim);
}
.soul-fits-text strong { color: var(--text-main); }
/* Länken får brytas: på engelska ("How to build your fermentation chamber →") är den bredare än
   rutan, och med nowrap sköt den hela stycket utanför den streckade ramen (Klas telefon). */
.soul-fits-text a { color: var(--accent-text); cursor: pointer; font-weight: 700; }
.soul-waitlist-lead {
    margin: 0 0 12px;
    color: var(--text-main);
    font-weight: 700;
}
/* hidden-attributet maste vinna over display:flex nedan, annars doljs raden aldrig. */
.soul-waitlist [hidden] { display: none !important; }
.soul-waitlist-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.soul-waitlist-row input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: var(--fs-base);
}
.soul-waitlist-row input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-color);
}
.soul-waitlist-row .btn-primary {
    flex: 0 0 auto;
    padding: 12px 20px;
}
.soul-waitlist-row .btn-primary:disabled { opacity: 0.6; cursor: default; }
/* Honungsfallan: utanfor skarmen i stallet for display:none - en del botar hoppar over
   falt som ar uttryckligen dolda. */
.soul-waitlist-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.soul-waitlist-fine {
    margin: 10px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-dim);
}
.soul-waitlist-error {
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    color: var(--warn-text);
}
.soul-waitlist-done {
    margin: 0;
    font-weight: 700;
    color: var(--ok-text);
}

@media (max-width: 768px) {
    /* Pa mobil krymper JAST-rubriken men meningen inte, och i fet 1,2 rem blev den fyra rader
       som vagde lika tungt som rubriken - en andra rubrik i stallet for en ingress (Klas
       2026-10-09). Mindre och lattare: tre rader, fortfarande ljusare an brodtexten. */
    .soul-tagline { font-size: var(--fs-base); font-weight: 500; }
    .soul-card p { display: none; }
    .soul-card h3 { margin: 0; font-size: var(--fs-base); }
    .soul-card { padding: 14px 16px; }
    .soul-block h2 { font-size: var(--fs-lg); }
}

@media (min-width: 769px) {
    /* HEM I SAMMA SPALT SOM ALLA VYER (Klas 2026-10-18). Var en centrerad 608 px-spalt, vald
       for att linjera med Profilerarens innerkant - men nu delar alla vyer standardspalten
       (800 px innehall pa dator), och Hem foljer med: rubriken star vid menyns vanstra kant
       som overallt annars. Korten (verktygen, YeastMaster, vantelistan) fyller spalten. De
       LOPANDE STYCKENA halls till 600 px - ingressen inline i index.html, blockens
       .soul-lead har - sa raderna inte blir langre an man orkar lasa. */
    .soul-block {
        margin-top: 50px;
    }
    .soul-block .soul-lead {
        max-width: 600px;
    }
}

/* LANKRUTAN: en mjuk accenttonad ruta, inte en knapp som ropar. Bar forut turen pa Om-sidan
   om Jastbiblioteket (pensionerad 2026-10-13); nu "Prova Live i demolaget" pa Live-sidan. */
.tour-link-btn {
    display: block;
    width: 100%;
    margin: 6px 0 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    border-radius: 12px;
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.tour-link-btn:hover { background: color-mix(in srgb, var(--accent-color) 16%, transparent); }
.cloud-wl-link { color: var(--accent-text); font-weight: 700; cursor: pointer; line-height: 1.5; }
/* Hardvarusidans lank fran ordet "jaskap" till lektionen Bygg ditt jaskap. Prickad
   understrykning: den sitter mitt i en mening och ska synas som lank utan att skrika. */
.hw-chamber-link, .lesson-link { color: var(--accent-text); font-weight: 700; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.info-link { display: block; width: fit-content; margin-top: 10px; color: var(--accent-text); font-weight: 700; cursor: pointer; }

/* DENSITETSKORTET (gravity.js). Samma bredd och botten som OLED-kortet ovanför, så de
   läses som ett par. Bara tokens - inga fasta färger - så det tål båda temana; rådets
   ram är status (ok/varning/info), inte krom, och följer därför inte accenten. */
.gravity-card {
    width: 100%;
    max-width: 450px;
    margin: 16px auto 0;
    box-sizing: border-box;
    background-color: var(--oled-bg);
    color: var(--oled-color);
    border: 3px solid #333;
    border-radius: 8px;
    padding: 14px 20px;
}
body.light-mode .gravity-card { border-color: #ddd; }
/* Rubrikraden är knappen som fäller ut kortet. Ihopfällt syns bara den. */
.gravity-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.gravity-title {
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-dim);
}
.gravity-summary {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gravity-summary-warn { color: var(--warn-text); }
.gravity-chevron {
    color: var(--text-dim);
    font-size: 1.1rem; /* fs:fast */
    line-height: 1;
    transition: transform 0.2s ease;
}
.gravity-card.open .gravity-chevron { transform: rotate(90deg); }
.gravity-body { display: none; padding-top: 12px; }
.gravity-card.open .gravity-body { display: block; }
.gravity-inputs, .gravity-add {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}
.gravity-inputs label, .gravity-add label {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-xs);
    color: var(--text-dim);
}
.gravity-card input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--calc-line);
    border-radius: 6px;
    background: var(--calc-panel);
    color: var(--text-main);
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-base);
}
.gravity-add button {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.gravity-error {
    color: var(--warn-text);
    font-size: var(--fs-xs);
    margin: -4px 0 10px;
}
.gravity-stats {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-bottom: 8px;
}
.gravity-advice {
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-main);
    padding: 10px 12px;
    border-left: 3px solid var(--info-text);
    background: var(--calc-panel);
    border-radius: 0 6px 6px 0;
    margin-bottom: 10px;
}
.gravity-advice.gravity-ok   { border-left-color: var(--ok-text); }
.gravity-advice.gravity-warn { border-left-color: var(--warn-text); }
/* Demolägets markering: samma dämpade ton som synkraden "DEMODATA". */
.gravity-demo-note {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-dim);
    font-style: italic;
    margin: 10px 0 0;
}
.gravity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}
.gravity-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid var(--calc-line);
    font-size: var(--fs-sm);
}
.gravity-list li:first-child { border-top: none; }
.gravity-day { color: var(--text-dim); min-width: 64px; }
.gravity-sg { flex: 1; font-variant-numeric: tabular-nums; font-weight: 700; }
.gravity-empty { color: var(--text-dim); }
.gravity-del {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem; /* fs:fast */
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

/* ===== URSPRUNGSKARTAN (yeastmap.js) =====
   Fylld nal = kant bryggeri, streckad ring = bara landet kant. Formen bar skillnaden,
   inte fargen. Kartbilderna inverteras i morkt lage sa kartan inte lyser vit.
   --map-panel ar FAST: --calc-panel ar genomskinlig och lat kartan lysa igenom popupen. */
:root { --map-panel: #1d1d1d; }
body.light-mode { --map-panel: #ffffff; }
.lib-view-toggle {
    display: inline-flex;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 12px;
}
.lib-view-btn {
    background: transparent;
    color: var(--accent-text);
    border: none;
    padding: 7px 18px;
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: var(--fs-xs);
    cursor: pointer;
}
/* Mork text pa accenten, som .lab-segment: vit pa halmgult var 1,4:1 (Klas 2026-10-19).
   Ramen i --accent-text sa den syns mot den ljusa sidan; i morkt lage ar det samma halmgula. */
.lib-view-btn.active {
    background: var(--accent-color);
    color: #111;
}
.lib-view-toggle { border-color: var(--accent-text); }
.yeast-map-wrap {
    position: relative;
    margin-bottom: 10px;
}
.yeast-map {
    height: 60vh;
    min-height: 320px;
    border-radius: 12px;
    border: 1px solid var(--calc-line);
    overflow: hidden;
    background: var(--calc-panel);
    z-index: 0;
}
body:not(.light-mode) .yeast-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}
/* Skarvar mellan kartbitarna (rutnätslinjer tvärs över kartan, belgisk testare + Klas
   2026-10-13). TVÅ saker måste till samtidigt:
   1. Leaflet 1.9 sätter mix-blend-mode: plus-lighter på bitarna - där två bitar möts ADDERAS
      färgerna. Det är Leaflets eget halvbra skarvskydd, men varje överlapp blir en LJUS linje
      (och en MÖRK i mörkt läge, där filtret ovan vänder färgerna). Därför normal blandning.
   2. Bitarna 2 px större än rutnätet, så nästa bit täcker springan. Lägena ligger kvar på
      256-rutnätet. 0,5 och 1 px räckte inte: under 100 % zoom (Klas kör 90 %) och vid 110 %
      är en css-pixel mindre än en skärmpixel.
   Uppmätt i Chrome 0,5-3x mot en grå testkarta på röd botten (springa = rött, överlapp =
   ljusare): 256.5/257 med plus-lighter gav linjer i ALLA skalor, 258 + normal i ingen.
   OBS: en svart testkarta ser inte överlappen - svart plus svart är svart. */
.yeast-map .leaflet-tile-container img.leaflet-tile {
    width: 258px !important;
    height: 258px !important;
    mix-blend-mode: normal !important;
}
.yeast-map-empty {
    position: absolute;
    background: var(--map-panel);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-main);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    z-index: 500;
    text-align: center;
    max-width: 80%;
}
.yeast-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--accent-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Siffran ar MORK, som texten pa accentknapparna: vitt gav 1,5-3,4 mot de fem accenterna
   (cyan 1,54), #111 ger 5,5-12,3. */
.yeast-pin span {
    transform: rotate(45deg);
    color: #111;
    font: 700 0.8rem 'Lexend', sans-serif; /* fs:fast */
}
.yeast-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px dashed var(--accent-color);
    background: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yeast-ring span {
    color: #222;
    font: 700 0.8rem 'Lexend', sans-serif; /* fs:fast */
}
/* Ljus karta: den streckade ringen i cyan smalte in i det ljusbla havet (Moa 2026-10-13).
   En vit kant utanfor strecken skiljer den fran havet, som nalens vita kant redan gor.
   Bara i ljust lage - pa den morka kartan syns accenten sjalv, och en vit ring blev tung. */
body.light-mode .yeast-ring:not(.yeast-ring--legend) {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.yeast-pin--legend, .yeast-ring--legend {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.yeast-pin--legend { width: 12px; height: 12px; border-width: 1px; }
.yeast-ring--legend { width: 14px; height: 14px; border-width: 2px; background: transparent; box-sizing: border-box; }
/* Regionen: en FYLLD yta med heldragen kant - landet ar en ihalig streckad ring. Fyllt mot
   tomt syns i alla storlekar och for fargblinda; prickat mot streckat gick inte att skilja at
   (Klas 2026-10-13). Och det sager ratt sak: en region gar att peka ut, ett land ar "nagonstans". */
.yeast-ring--region {
    width: 28px; height: 28px;
    border-style: solid; border-width: 2px;
    /* Ogenomskinlig: samma utseende ovanpa ljus och mork karta, och siffran ar mork pa ljust. */
    background: color-mix(in srgb, var(--accent-color) 45%, #fff);
}
.yeast-ring--region.yeast-ring--legend { width: 12px; height: 12px; margin-left: 1px; margin-right: 9px; border-width: 1.5px; background: color-mix(in srgb, var(--accent-color) 45%, #fff); }
.yeast-map-legend {
    background: var(--map-panel);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 8px;
    font: 600 var(--fs-xs) 'Lexend', sans-serif;
    line-height: 1.9;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.yeast-map-legend-flag { color: var(--text-dim); }
/* JASTLABBEN (yeastmap.js, YEAST_LABS): en FYRKANT med kolv - nalarna ar droppar och ringar,
   sa formen skiljer dem at aven for fargblinda. Mork yta och vit kant: syns pa den ljusa
   kartan (ytan) och pa den inverterade morka (kanten), oberoende av accenten. */
.yeast-lab {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #2a2a2a;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yeast-lab svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yeast-lab--legend {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-width: 1px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 8px;
    box-shadow: none;
}
.yeast-lab--legend svg { width: 9px; height: 9px; stroke-width: 2.5; }
.yeast-map-labs-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--map-panel);
    color: var(--text-main);
    border: 1px solid var(--calc-line);
    border-radius: 8px;
    padding: 6px 10px;
    font: 600 var(--fs-xs) 'Lexend', sans-serif;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.yeast-map-labs-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yeast-map-labs-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #111;
}
@media (pointer: fine) {
    .yeast-map-labs-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
}
.yeast-map .leaflet-popup-content-wrapper,
.yeast-map .leaflet-popup-tip {
    background: var(--map-panel);
    color: var(--text-main);
}
.yeast-map-pop { font-family: 'Lexend', sans-serif; min-width: 170px; }
.yeast-map-pop strong { font-size: var(--fs-base); }
.yeast-map-place { color: var(--text-dim); font-size: var(--fs-xs); margin-top: 2px; }
.yeast-map-label { color: var(--text-dim); font-size: var(--fs-xs); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.yeast-map-strain {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-top: 1px solid var(--calc-line);
    color: var(--accent-text);
    font: 600 var(--fs-sm) 'Lexend', sans-serif;
    padding: 7px 0;
    cursor: pointer;
}
.origin-map-link {
    color: var(--accent-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* ⚑ bredvid bryggeriet: kopplingen ar gissad (yeastmap.js, strainOriginUncertain). */
.origin-uncertain {
    color: var(--text-dim);
    font-size: 0.85em; /* fs:em */
    white-space: nowrap;
}
/* Under flockning/forjasning/tolerans (profiler.js): talen ar tillverkarens, i deras vort. */
.spec-note {
    display: inline-block;
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 0.85em; /* fs:em */
    font-style: italic;
}
/* Tillverkarvardena som tre rutor (profiler.js, openYeastModal). Allt ar span, for
   blocket ligger inne i kortets <p> - en div dar stanger stycket. Noten syns forst nar
   i:et ar tryckt (.note-open). */
.spec-block { display: block; margin-top: 10px; }
.spec-block .spec-note { display: none; }
.spec-block.note-open .spec-note { display: block; margin-top: 8px; }
.spec-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    align-items: stretch;
}
.spec-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 8px;
    background: var(--calc-panel);
    border: 1px solid var(--calc-line);
    border-radius: 8px;
    min-width: 0;
}
.spec-k {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.spec-v {
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
}
.spec-meter { display: flex; gap: 3px; margin-top: 2px; }
.spec-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1px solid var(--accent-text);
    box-sizing: border-box;
}
.spec-dot.on { background: var(--accent-text); }
.spec-info-btn {
    align-self: start;
    width: 22px; height: 22px;
    padding: 1px 0 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--info-text);
    background: color-mix(in srgb, var(--info-text) 15%, transparent);
    color: var(--info-text);
    font-family: 'Lexend', sans-serif;
    font-weight: bold;
    font-size: var(--fs-xs);
    line-height: 1;
    cursor: pointer;
}
.spec-info-btn.info-open { background: var(--info-text); color: var(--info-glyph); }
/* Mobil: en ruta ar ~90 px. Versaler med sparrning rymde inte ens FLOCKNING (Klas telefon
   2026-10-27: "FLOCKNI/NG"). Gemener, ingen sparrning, mindre luft - och de langa orden
   har &shy; i i18n, sa de bryts vid ett bindestreck i stallet for mitt i en stavelse. */
/* Flaggan (Koln) far en egen rad i rutan: "⚑ uncertain" ar bredare an en mobilruta. */
.spec-v .origin-uncertain { display: block; white-space: normal; }
/* i:ets egen kolumn tog ~27 px fran tre rutor pa 273 px. Pa mobil blir den en bricka i
   radens hogra hörn, och tredje etiketten haller undan sa brickan aldrig tacker text.
   Matt i alla fem sprak (Moyenne, Medium-high, Schein-barer) - se spec_check. */
@media (max-width: 600px) {
    .spec-block { position: relative; }
    .spec-tiles { gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spec-tile { padding: 6px; }
    .spec-k { text-transform: none; letter-spacing: 0; }
    .spec-tile:nth-child(3) .spec-k { padding-right: 10px; }
    .spec-info-btn { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; }
}

/* TRIANGELTEST (tools.js). Glasknapparna ar stora - de trycks pa av en provare med ett glas
   i andra handen. Vald = accentfyllning med #111, samma regel som filterknapparna. */
.tri-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 0.9rem; /* fs:fast */
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-text);
    cursor: pointer;
}
.tri-btn-main { background: var(--accent-color); color: #111; }
.tri-btn:disabled { opacity: 0.4; cursor: default; }
.tri-glasses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tri-glass {
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-lg);
    font-weight: 800;
    padding: 18px 0;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--text-dim) 45%, transparent);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
}
.tri-glass.active { background: var(--accent-color); border-color: var(--accent-color); color: #111; }
.tri-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tri-chip {
    font-family: 'Lexend', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
}
.tri-chip.active { background: var(--accent-color); border-color: var(--accent-color); color: #111; }

/* Triangeltestets delning (tools.js): bild och lank. */
.tri-share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Knappar som radbryts i en smal ruta: gap, annars ligger den andra kloss an mot den första. */
.tri-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Överst i upplägget: vad ett triangeltest är, och - från en lektion - var man kom ifrån. */
.tri-intro { color: var(--text-dim); font-size: var(--fs-base); line-height: 1.5; margin: 0 0 16px; }
.tri-context {
    border-left: 3px solid var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 14px;
}
.tri-context p { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.5; }
.tri-context-back { color: var(--accent-text); font-weight: 700; font-size: var(--fs-base); cursor: pointer; }
/* Hällningslistan: tabellen och figuren BREDVID varandra. Figuren krymper (ner till 180 px)
   hellre än att radbrytas - med fast bredd och flex-wrap hamnade den under tabellen så fort
   rutan blev några pixlar för smal. Bara i mobilen läggs den under. */
#tool-tri-modal .ym-modal-content.tri-bred { max-width: 660px; }
.tri-pour-wrap { display: flex; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.tri-pour-wrap > div:first-child { flex: 0 0 auto; }
/* Smala mellanrum kring "=" (U+202F i tools.js): "545 = A" med vanliga mellanslag gjorde att
   spanskans/franskans lista gick ut over hogerkanten pa telefonen nar texten blev 1 rem (Klas). */
.tri-pour-vem { color: var(--text-dim); padding: 4px 10px 4px 0; white-space: nowrap; }
.tri-pour-kod { padding: 4px 8px; white-space: nowrap; }
/* Figuren hör till TOPPEN av listan, inte till mitten: med 35 provare centrerades den
   mot en lång tabell och hamnade långt ner. Sticky = den följer med när man skrollar. */
.tri-pour-figwrap { flex: 1 1 300px; min-width: 180px; max-width: 300px; align-self: flex-start; position: sticky; top: 0; }
.tri-pour-fig { display: block; width: 100%; height: auto; }
/* Modalens bakgrund - den svavande figurens tontoning maste sluta i exakt den. */
.tri-pour-figwrap { --tri-yta: #1a1a1a; }
body.light-mode .tri-pour-figwrap { --tri-yta: #ffffff; }
/* Under GLASEN, inte under hela figuren: glasen ligger i x 14-138 av ritytans 186
   (tools.js, TRI_FIG_GX), resten är flaskans luft till höger. Mittglaset står i x 76 = 40,9 %,
   så en ruta från 0 till 81,7 % har sin mitt där och ger tyskans längre text plats på en rad. */
.tri-pour-caption { margin: 4px 0 0; width: 81.7%; text-align: center; font-size: var(--fs-xs); color: var(--text-dim); }
@media (max-width: 600px) {
    .tri-pour-wrap { flex-wrap: wrap; margin-bottom: 0; }
    /* Figuren SVAVAR nederst i rutan ovanpa listan (Klas 2026-10-19): med manga provare syntes
       den forut forst efter skroll. sticky bottom = den ligger kvar nederst tills man skrollat
       ner och landar da pa sin plats under sista raden - med fa provare hander inget.
       Rutan ar hel bredd sa tontoningen tacker raderna bakom; innehallet ar 200 px i mitten
       (sidpaddingen), sa bildtextens 81,7 % fortfarande raknas mot figuren.
       bottom -18 + padding 18: sticky raknar fran modalens inre kant (18 px pa mobil), annars
       skymtar raderna i en glipa under glasen. */
    .tri-pour-figwrap {
        flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; box-sizing: border-box;
        margin: 0; padding: 32px calc(50% - 100px) 18px;
        position: sticky; top: auto; bottom: -18px;
        background: linear-gradient(to bottom, transparent, var(--tri-yta) 32px);
    }
    /* Tabellens ruta far krympa till rutans bredd - med flex 0 0 auto vaxte den med tabellen och
       overflow-x fick aldrig verka, sa sista kolumnen klipptes av i stallet for att skrolla. */
    .tri-pour-wrap > div:first-child { flex: 1 1 100%; min-width: 0; }
    .tri-pour-vem { padding-right: 6px; }
    .tri-pour-kod { padding: 4px; }
    /* "Dégustateur 12" ar for langt - franskan blev 308 px mot ~292 och skrollade. Bara numret
       pa mobil; ingressen sager redan "par dégustateur" (Klas 2026-10-19). */
    html:lang(fr) .tri-pour-ord { display: none; }
}
.tri-share-msg { min-height: 1.2em; margin-top: 8px; color: var(--ok-text); font-size: var(--fs-sm); font-weight: 600; }
/* Avsandaren i den delade vyn (tools.js triAvsandare): en tunn linje ovanfor, dampad text. */
.tri-from { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--calc-line); color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.tri-from strong { color: var(--text-main); }
.tri-from a { color: var(--accent-text); font-weight: 700; white-space: nowrap; text-decoration: none; }
.tri-from a:hover { text-decoration: underline; }
/* MINA TESTER under upplägget: en rad per sparat test, nyast först. Datumet ovanför ett sparat resultat. */
.tri-saved { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--calc-line); }
.tri-saved[hidden] { display: none; }
.tri-saved h4 { font: 800 var(--fs-xs) 'Lexend', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin: 0 0 4px; }
.tri-saved-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    width: 100%; padding: 11px 2px; text-align: left; cursor: pointer;
    background: transparent; border: 0; border-bottom: 1px solid var(--calc-line);
    color: var(--text-main); font-family: inherit; font-size: var(--fs-base);
}
.tri-saved-row:last-child { border-bottom: 0; }
.tri-saved-row:hover .tri-saved-name { color: var(--accent-text); }
.tri-saved-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.tri-saved-meta { color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap; }
.tri-saved-date { color: var(--text-dim); font-size: var(--fs-sm); margin: 10px 0 0; }
.tri-shared-tag {
    display: inline-block;
    font: 800 var(--fs-xs) 'Lexend', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-text);
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    padding: 3px 10px;
}

/* SMAKKORT (prototyp, tasting.js). Bara temavariabler - kortet ska tala med bada lagena. */
.smak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.smak-grid .ym-input-group { min-width: 0; }
#tasting-modal .ym-input-group input { min-width: 0; }
.smak-meta { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; }
.smak-sektion {
    margin: 22px 0 10px;
    font: 800 var(--fs-xs) 'Lexend', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.smak-del { padding: 10px 0; border-bottom: 1px solid var(--calc-line); }
.smak-del-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.smak-del p { margin: 6px 0 0; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; }
.smak-range { width: 100%; margin: 8px 0; accent-color: var(--accent-color); }
#tasting-modal textarea {
    width: 100%;
    box-sizing: border-box;
    font: 0.9rem 'Lexend', sans-serif;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--calc-line);
    background: var(--calc-panel);
    color: var(--text-main);
    resize: vertical;
}
.smak-total { margin: 16px 0 4px; font-weight: 700; }
.smak-total span { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-text); }
.smak-total small { margin-left: 8px; color: var(--text-dim); font-weight: 600; }
.smak-fel-info {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--warn-text);
    background: var(--calc-panel);
    border-radius: 0 8px 8px 0;
}
.smak-fel-info p { margin: 4px 0 0; color: var(--text-dim); line-height: 1.5; font-size: var(--fs-base); }
.smak-fel-info a { display: inline-block; margin-top: 6px; color: var(--accent-text); font-weight: 700; cursor: pointer; font-size: var(--fs-base); }
.smak-ol { border: 1px solid var(--calc-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.smak-ol-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.smak-score { text-align: right; flex-shrink: 0; }
.smak-score span { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); line-height: 1; }
.smak-score small { color: var(--text-dim); font-size: var(--fs-xs); }
.smak-rad {
    display: flex; justify-content: space-between; width: 100%;
    padding: 8px 0; border: none; border-top: 1px solid var(--calc-line);
    background: none; color: var(--text-main); font: 0.9rem 'Lexend', sans-serif; cursor: pointer; text-align: left;
}
.smak-rad small { color: var(--text-dim); margin-left: 6px; }
.smak-msg { min-height: 1.2em; margin-top: 10px; color: var(--warn-text); font-weight: 600; font-size: var(--fs-base); }
.smak-del-btn { border-color: var(--warn-text); color: var(--warn-text); }

/* VILDJASTENS PLATS: kartan i husjastformularet och den gula nalen (yeastmap.js). */
.hs-map-sec { margin: 0 0 20px; }
.hs-map-label { font-size: 0.85em; /* fs:em */ color: var(--text-dim); margin-bottom: 6px; }
.hs-map { height: 200px; border-radius: 8px; border: 1px solid var(--calc-line); background: var(--map-panel); }
.hs-map-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.hs-map-row .tri-btn[hidden] { display: none; }
.hs-map-note { margin: 6px 0 0; color: var(--text-dim); font-size: 0.8em; /* fs:em */ line-height: 1.5; }
.yeast-pin--house { background: var(--accent-secondary); } /* som husjastkortet - inte varningsgult */

/* HUSJASTFORMULARET: falten i linje och lika hoga. "ORIGIN / SOURCE" bryts pa tva rader i
   mobilen medan "CAPTURE DATE" ryms pa en, och datumfaltet ar dessutom hogre an textfaltet
   (valjarikonen). Samma grepp som verktygen: faltet i gruppens botten, och en uttalad hojd.
   Varje grupp ar etikett + falt, sa det haller (Klas 2026-10-13). */
#add-strain-modal .ym-input-group { min-width: 0; }
#add-strain-modal .ym-input-group > input { margin-top: auto; height: 46px; box-sizing: border-box; min-width: 0; }
/* Anteckningsfaltet: textarea arver inte typsnittet (blev fast bredd) och hade svart botten
   till skillnad fran falten ovanfor. */
#add-strain-modal textarea.ym-input-field {
    font-family: inherit;
    font-size: 1em; /* fs:em */
    background: #222;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
}

/* HUSJASTFORMULARETS VAL (library.js, hsValjChip): samma knappar som triangeltestet. */
.hs-label { font-size: 0.85em; /* fs:em */ color: var(--text-dim); margin-bottom: 6px; }
.hs-sec { margin-bottom: 15px; }
.hs-sec[hidden], #add-strain-modal .hs-map-sec[hidden] { display: none; }
/* Typ-knapparna bar kortets ikon (library.js, HOUSE_STRAIN_ICONS) som teckenforklaring. Lagre
   padding upptill/nertill sa knappen inte blir hogre an de andra chipsen for ikonens skull. */
#hs-type .tri-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 7px; }
#hs-type .house-strain-icon { width: 1.6em; height: 1.6em; vertical-align: 0; }
.hs-props { margin: 0 0 20px; padding: 14px; border: 1px dashed var(--calc-line); border-radius: 10px; }
.hs-props-title { font-weight: 800; margin-bottom: 4px; }

/* SOKRUTANS PLATSHALLARE i mobilen: "Search (e.g. 'WLP', 'IPA', 'Stout')..." klipptes vid
   'Stout' (Klas 2026-10-14). Bara platshallaren krymper - texten man skriver star kvar pa
   1.1rem, for under 16 px zoomar iPhone in hela sidan nar faltet far fokus. */
@media (max-width: 768px) {
    .yeast-search-wrap #yeast-search { padding-left: 14px; padding-right: 42px; }
    #yeast-search::placeholder { font-size: var(--fs-sm); }
}

/* Kartlaget doljer listan (yeastmap.js, setLibraryView). Id + klass + !important vinner over
   datorns ".yeast-grid { display: grid !important }". */
#yeast-grid.lib-grid-dold { display: none !important; }

/* SMAKKORTENS BORD (tasting.js): korten sida vid sida, och raderna fylls pa nedat. */
.smak-bord { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.smak-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 14px 10px 12px; border: 1px solid var(--calc-line); border-radius: 12px;
    background: var(--calc-panel); color: var(--text-main); cursor: pointer;
    font-family: 'Lexend', sans-serif; transition: transform 0.15s ease, border-color 0.15s ease;
}
.smak-tile:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.smak-tile .smak-glas { color: var(--text-main); margin-bottom: 4px; }
.smak-tile-namn { font-weight: 800; font-size: var(--fs-base); line-height: 1.25; }
.smak-tile-meta { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.3; }
.smak-tile-poang { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); line-height: 1.1; margin-top: 4px; }
.smak-tile-poang small { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 600; }
/* TATT BORD i mobilen (tasting.js smakRita): fem kort eller fler -> tre per rad, mindre glas och
   text. Under fem star de tva och tva som forut. */
@media (max-width: 600px) {
    .smak-bord--tat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .smak-bord--tat .smak-tile { padding: 10px 4px 8px; gap: 2px; border-radius: 10px; }
    .smak-bord--tat .smak-glas { width: 32px; height: 38px; margin-bottom: 2px; }
    .smak-bord--tat .smak-tile-namn { font-size: var(--fs-sm); overflow-wrap: anywhere; }
    .smak-bord--tat .smak-tile-poang { font-size: var(--fs-md); margin-top: 2px; }
}
.smak-kort-huvud { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.smak-kort-huvud .smak-glas { color: var(--text-main); flex-shrink: 0; margin-right: 34px; }
/* Smakkortens bord far samma bredd som sajtens spalt (800 px innehall pa dator, samma for
   alla vyer sedan 2026-10-18). 800 + 2 x 25 px inre luft = 850. Var 1004, efter den gamla
   1060-spalten i Biblioteket/Labbet. */
#tasting-modal .ym-modal-content.smak-bred { max-width: 850px; }
/* Ett parkerat spel som tas fram igen efter Bakat glider inte in en gang till (tasting.js smakHamtaParkerat). */
#tasting-modal .ym-modal-content.smak-atertagen { animation: none; }

/* Jastkortets rad "Dina smakkort med den har stammen" (tasting.js, smakKortForStam). */
.smak-lib { margin-top: 18px; }
.smak-lib-rad { display: flex; flex-direction: column; gap: 6px; }
.smak-lib-kort {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 8px 12px; border: 1px solid var(--calc-line); border-radius: 10px;
    background: var(--calc-panel); color: var(--text-main); cursor: pointer; font-family: 'Lexend', sans-serif;
}
.smak-lib-kort:hover { border-color: var(--accent-color); }
.smak-lib-kort .smak-glas { color: var(--text-main); flex-shrink: 0; }
.smak-lib-kort > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.smak-lib-kort small { color: var(--text-dim); font-size: var(--fs-xs); }
.smak-lib-poang { font-size: var(--fs-md); font-weight: 800; color: var(--accent-text); }

/* Smakkort utan konto: raden om att korten bara finns i webbläsaren (tasting.js). */
.smak-lokalt {
    margin: -6px 0 16px; padding: 10px 12px; border-left: 3px solid var(--warn-text);
    background: var(--calc-panel); border-radius: 0 8px 8px 0; color: var(--text-dim); font-size: var(--fs-base); line-height: 1.5;
}
/* Ingen nowrap: lanktexten ar en hel mening och svamde over i smal modal (Klas 2026-10-18).
   Pilen binds i stallet till sista ordet i tasting.js. */
.smak-lokalt a { color: var(--accent-text); font-weight: 700; cursor: pointer; }

/* BJCP-termen bredvid bismakens vardagsnamn (tasting.js, smakBismakNamn). */
.smak-bjcp { font-weight: 600; opacity: 0.65; margin-left: 4px; font-size: 0.85em; /* fs:em */ }
.tri-chip.active .smak-bjcp { opacity: 0.75; }

/* SPELET ALE ELLER LAGER (games.js). Kortet dras at sidan; typfargerna (ale orange, lager bla)
   ar samma som typkanten i biblioteket och syns forst NAR man svarat. Text i typfarg undviks:
   fargerna ar matta mot kortets botten, inte mot sidan i ljust tema. */
.sw-topp { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-right: 48px; /* rutans ✕ */ }
.sw-topp strong { font-size: var(--fs-lg); color: var(--accent-text); }
.sw-tid { height: 6px; border-radius: 3px; background: var(--calc-line); overflow: hidden; margin: 10px 0 0; }
.sw-tid div { height: 100%; width: 100%; background: var(--accent-color); }
.sw-bana { position: relative; height: 230px; margin: 14px 0; padding-top: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Etiketterna i banans OVRE horn: mitt pa sidorna lag de under kortet i en smal telefon. */
.sw-sida {
    position: absolute; top: 0;
    font-weight: 800; font-size: var(--fs-sm); color: var(--text-main); opacity: 0.35;
    border-bottom: 3px solid var(--typ-farg); padding-bottom: 2px;
}
.sw-sida-v { left: 4px; }
.sw-sida-h { right: 4px; }
.sw-kort {
    position: relative; z-index: 1;
    width: min(62%, 260px); min-height: 150px; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    border: 2px solid var(--calc-line); border-radius: 14px;
    background: linear-gradient(var(--calc-panel), var(--calc-panel)), #1a1a1a;
    color: var(--text-main); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
body.light-mode .sw-kort { background: #fff; }
.sw-kort strong { font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.sw-kort small { color: var(--text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.sw-kort.sw-visad { border-color: var(--typ-farg); box-shadow: inset 6px 0 0 var(--typ-farg); }
.sw-kort.sw-ut { opacity: 0; }
.sw-kort.sw-in { animation: sw-in 0.16s ease-out; }
.sw-kort.sw-fel { animation: sw-skak 0.4s ease-in-out; }
@keyframes sw-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sw-skak { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .sw-kort.sw-in, .sw-kort.sw-fel { animation: none; } }
.sw-knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw-knapp { border-color: var(--typ-farg); color: var(--text-main); padding: 14px 10px; }
.sw-facit { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--calc-line); box-shadow: inset 4px 0 0 var(--typ-farg); }
.sw-facit p { margin: 6px 0 0; line-height: 1.5; }

/* SPELSIDAN (games.js, spelVisaSida): en ruta per spel. Last = grattonad, med hur manga
   smakkort som fattas. */
.spel-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.spel-ruta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
    padding: 14px 16px; border: 1px solid var(--calc-line); border-radius: 12px;
    background: var(--calc-panel); color: var(--text-main); cursor: pointer; font-family: 'Lexend', sans-serif;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.spel-ruta:hover:not(:disabled) { border-color: var(--accent-color); transform: translateY(-2px); }
.spel-ruta strong { font-size: var(--fs-md); }
.spel-ruta span { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.4; }
.spel-ruta small { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; margin-top: 2px; }
.spel-ruta:disabled { cursor: default; opacity: 0.55; }
.spel-ruta:disabled small { color: var(--text-dim); }
/* MOBILEN: samma rutnat med motiv som i datorn, tre per rad (Klas 2026-10-24, forut tva), men BARA
   bild och namn (Klas 2026-10-22). Beskrivningen dols - introt som visas nar spelet oppnas sager samma sak.
   Vid 360 px ar en ruta ~100 px bred: namnen ar fs-sm, och ord over ~11 tecken behover ett mjukt
   bindestreck i i18n.js (Bismaks-, Blind-) - hyphens:auto fungerar inte pa mobilen. */
.spel-motiv { display: block; color: var(--text-main); flex-shrink: 0; }
.spel-ruta:disabled .spel-motiv { filter: grayscale(1); }
@media (max-width: 768px) {
    .spel-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .spel-ruta { align-items: center; text-align: center; padding: 10px 4px 8px; gap: 2px; border-radius: 10px; }
    .spel-ruta > span { display: none; }
    .spel-ruta strong { font-size: var(--fs-sm); line-height: 1.2; overflow-wrap: break-word; }
    .spel-ruta small { line-height: 1.25; }
    .spel-motiv { width: 100%; max-width: 96px; height: auto; margin-bottom: 2px; }
}
/* DATORN: kvadratiska kort, tre per rad, med motivet overst (Klas 2026-10-20). Rutan far
   kartotekets bredd (smak-bred, 850 px) sa den inte byter storlek mellan kartoteket och Spel. */
@media (min-width: 769px) {
    .spel-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; container-type: inline-size; }
    .spel-ruta { min-height: calc((100cqw - 28px) / 3); align-items: center; justify-content: flex-start; text-align: center; padding: 26px 16px 18px; gap: 6px; }
    /* KVADRATEN AR ETT GOLV: min-height = kolumnens bredd (100cqw = listans bredd, minus tva mellanrum,
       delat pa tre). Ett kort vars text inte ryms vaxer, och raden drar de andra till samma hojd.
       Inte aspect-ratio: med strackt hojd raknade den fram BREDDEN ur hojden och korten overlappade
       vid 800 px - och fast hojd klippte texten. */   /* uppifran: rubrikerna i linje aven nar en beskrivning ar langre */
    .spel-motiv { margin-bottom: 10px; }
}

/* GLASBORDET (games.js, bordDuka): kolumnerna och glasens storlek satts i skriptet sa att
   alla glas ryms utan rullning. Glasen ar knappar utan ram. */
.rx-bord { display: grid; gap: 8px; justify-content: center; margin-top: 16px; touch-action: manipulation; }
/* CAP ON FOAM (games.js). Scenen tar hand om svepet sjalv: touch-action none, annars skrollar
   ett svep nedat sidan (eller laddar om den) i stallet for att dra ner spaken. */
.cf-arena { touch-action: none; }   /* hela spelytan: svepet kan borja var som helst, se spelCfStarta */
.cf-scen { max-width: 240px; margin: 8px auto 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
/* Mobilen: storre flaska (Klas 2026-10-25) - scenen ar lagre dar (cfHojd). MEN aldrig hogre an
   skarmen rymmer: raden under ("Svep nedat nar skummet nar ...") klipptes av pa en telefon. Bredden
   foljer darfor ocksa hojden - scenen ar 200 x 336, sa bredd = hojd x 0,595, och 280 px gar till
   rubrik, flaskraden, raden under och rutans kanter. dvh foljer adressfaltet; vh ar reserv. */
@media (pointer: coarse) {
    .cf-scen { max-width: min(290px, calc((100vh - 280px) * 0.595)); }
    @supports (height: 100dvh) {
        .cf-scen { max-width: min(290px, calc((100dvh - 280px) * 0.595)); }
    }
}
.cf-svg { display: block; width: 100%; height: auto; color: var(--text-main); overflow: visible; }
.cf-pack { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.cf-pack i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text-dim) 55%, transparent); }
.cf-pack i.cf-bra { background: var(--ok-text); border-color: var(--ok-text); }
.cf-pack i.cf-mitt { background: var(--warn-text); border-color: var(--warn-text); }
.cf-pack i.cf-fel { background: #e5534b; border-color: #e5534b; }
.cf-status { min-height: 3em; margin: 8px 0 0; text-align: center; font-weight: 700; line-height: 1.5; }
/* TRASKEDEN (datorn) och HANDEN (mobilen) i stallet for ordet Knacka (Klas 2026-10-25), se cfSked
   och cfHand i games.js. Bada slar RAKT UNDERIFRAN mot plattan under flaskan. Skeden vrids kring
   skaftets ande (188, 346): i vila 18 grader ner, i slaget rak upp mot botten. Var 2,6:e sekund
   vinkar den lite, sa man ser att den gar att klicka pa. Handen (handflatan upp) kommer underifran,
   slar som en high five, HALLER kvar och gar - och borjar om tills knacket kommer. */
.cf-sked { transform-box: view-box; transform-origin: 188px 346px; transform: rotate(-18deg); transition: transform 0.3s ease-out; cursor: pointer; outline: none; }
.cf-sked.cf-sked-vink { animation: cf-sked-vink 2.6s ease-in-out infinite; }
.cf-sked.cf-sked-slag { transform: rotate(0deg); transition: transform 0.08s ease-in; }
.cf-sked.cf-sked-klar { cursor: default; }
.cf-sked:focus-visible .cf-skal { stroke: var(--accent-color); stroke-width: 2.5; }
@keyframes cf-sked-vink { 0%, 70%, 100% { transform: rotate(-18deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(-18deg); } }
.cf-hand { animation: cf-hand 3.4s ease-in-out infinite; }
.cf-hand.cf-hand-borta { display: none; }
@keyframes cf-hand {
    0% { opacity: 0; transform: translate(6px, 36px); }
    18% { opacity: 1; transform: translate(3px, 18px); }
    30%, 46% { opacity: 1; transform: translate(0, 0); }
    60% { opacity: 1; transform: translate(3px, 18px); }
    76%, 100% { opacity: 0; transform: translate(6px, 36px); }
}
@media (prefers-reduced-motion: reduce) {
    .cf-sked.cf-sked-vink, .cf-hand { animation: none; }
    .cf-sked, .cf-sked.cf-sked-slag { transition: none; }
    .cf-hand { transform: translate(0, 4px); }
}
.cf-sensor { margin: 4px 0 0; text-align: center; line-height: 1.5; }
.cf-sensor[hidden] { display: none; }
/* UTSTRYKNINGEN (games.js, us*): plattan ritas i en canvas med fasta farger (agar, jast), som
   Raknekammarens ljusa synfalt - samma i bada temana. Fingret stryker, sa sidan far inte rulla dar. */
.us-platta { display: flex; justify-content: center; margin-top: 10px; }
.us-platta canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.us-status { min-height: 1.5em; margin: 8px 0 0; text-align: center; font-weight: 700; line-height: 1.5; }
.us-verktyg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.us-verktyg[hidden] { display: none; }
.us-flamma { display: inline-flex; align-items: center; gap: 6px; }
.us-flamma-ikon { width: 10px; height: 14px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: linear-gradient(#ffd166, #e8590c); }
#us-ogla.us-het { color: var(--warn-text); font-weight: 700; }
/* JASSKAPET (games.js, sk*): grafen ritas i en canvas med fasta farger pa ljus botten, som Raknekammarens
   synfalt. Pluggknapparna ar av/pa-knappar; den som ar pa far accentramen. */
.sk-matare { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.sk-matt { display: inline-flex; align-items: center; gap: 6px; }
.sk-matt i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sk-graf { display: flex; justify-content: center; margin-top: 8px; }
.sk-graf canvas { display: block; border: 1px solid var(--calc-line); border-radius: 10px; }
.sk-knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 6px auto 0; }
.sk-knappar[hidden] { display: none; }
.sk-plugg { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; touch-action: manipulation; }
.sk-plugg.sk-pa { border-color: var(--accent-color); box-shadow: inset 0 0 0 2px var(--accent-color); font-weight: 700; }
/* SKIKTEN (games.js, tv*): burken och flaskan i en svg med fasta farger pa ljus botten. Fingret
   lutar burken, sa sidan far inte rulla dar. */
.tv-stam { margin: 4px 0 0; text-align: center; }
.tv-scen { max-width: 420px; margin: 8px auto 0; }
.tv-scen svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.tv-klocka { margin: 6px 0 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-lista { margin: 10px 0 0; padding-left: 20px; line-height: 1.7; }
/* LEKTION -> SPEL (Klas 2026-10-24: "battre om det stack ut mer ... en knapp som pulserar eller med
   knappram som skiftar i farg"). Ramen vandrar mellan temats tva accenter, sa den foljer det accentval
   anvandaren gjort, och en mjuk ring pulserar ut. Stilla for den som bett om mindre rorelse. */
.lesson-ova {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 24px;
    border: 2px solid var(--accent-color); border-radius: 999px; background: var(--accent-tint);
    color: var(--text-main); font-size: var(--fs-base); font-weight: 800; cursor: pointer; text-decoration: none;
    animation: lesson-ova-ram 3s ease-in-out infinite, lesson-ova-puls 2.4s ease-out infinite;
}
.lesson-ova:hover { background: color-mix(in srgb, var(--accent-color) 22%, transparent); }
@keyframes lesson-ova-ram { 0%, 100% { border-color: var(--accent-color); } 50% { border-color: var(--accent-secondary); } }
@keyframes lesson-ova-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-color) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .lesson-ova { animation: none; } }
/* RAKNEKAMMAREN (games.js, Neubauer). Synfaltet ar alltid ljust som i ett mikroskop, sa
   cellernas och ringarnas farger ar fasta (NB_* i games.js). Faltet tar knacken sjalvt;
   touch-action manipulation sa att sidan fortfarande gar att rulla. */
.nb-under { margin: 2px 0 0; }
.nb-kort { width: min(70%, 240px); min-height: 0; padding: 0; overflow: hidden; }
/* SVARET SYNS PA KORTET (Klas 2026-10-24: "bara texten under racker inte"): hela ramen blir gron
   eller rod, tjock nog att se i ogonvran, och symbolen ar ett marke med vit text - en vit eller
   gron bock direkt pa det ljusa synfaltet syntes inte. Fel skakar dessutom kortet (sw-fel). */
.nb-kort { border-width: 3px; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.nb-kort.sy-ratt { border-color: var(--ok-text); box-shadow: 0 0 0 4px var(--ok-text); }
.nb-kort.sy-fel { border-color: #e5534b; box-shadow: 0 0 0 4px #e5534b; }
.nb-kort .wd-symbol { top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--fs-md); line-height: 1; }
.nb-kort.sy-ratt .wd-symbol { background: #3d7a0a; }
.nb-kort.sy-fel .wd-symbol { background: #c62828; }
.nb-svg { display: block; width: 100%; height: auto; }
.nb-falt { max-width: 360px; margin: 10px auto 0; border: 1px solid var(--calc-line); border-radius: 12px; overflow: hidden;
    touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.nb-klocka { margin: 6px 0 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.nb-klocka.nb-sent { color: #e5534b; }
.nb-rakning { margin: 8px 0 0; text-align: center; font-weight: 700; }
.nb-pennor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 10px auto 0; }
.nb-penna { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; }
/* Ringen pa knappen star pa synfaltets farg, som markeringen i faltet - lila och teal syns inte mot mork botten. */
.nb-penna i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: #f3f1e7; box-shadow: inset 0 0 0 3px var(--nb-penna); }
.nb-penna.nb-vald { border-color: var(--accent-color); box-shadow: inset 0 0 0 2px var(--accent-color); }
.nb-teckenforklaring { font-size: var(--fs-sm); }
.nb-svar { font-variant-numeric: tabular-nums; }
.bord-glas {
    padding: 0; border: none; background: none; color: var(--text-main); cursor: pointer;
    border-radius: 10px; line-height: 0; -webkit-tap-highlight-color: transparent;
}
.bord-glas .smak-glas { pointer-events: none; }
/* Ljust tema morkar varje knapp under musen (filter: brightness, "LIGHT MODE FIX" langre upp).
   Pa glasen andrar det olets farg - och fargen betyder nagot. Den ror inte glasen. */
body.light-mode .bord-glas:hover, body.light-mode .bord-glas:active { filter: none; }
.bord-aktiv { box-shadow: 0 0 0 3px var(--accent-color); }
.bord-fel { box-shadow: 0 0 0 3px #e5534b; animation: sw-skak 0.4s ease-in-out; }   /* fast rod: 4,7 mot morkt kort, 3,7 mot vitt - --warn-text ar gul i morkt, for nara halm */
@media (prefers-reduced-motion: reduce) { .bord-fel { animation: none; } }
/* SPELSIDANS AVDELNINGAR: Bryggkunskap och Med dina smakkort. */
.spel-avd { margin-top: 18px; }
.spel-avd + .spel-lista { margin-top: 10px; }
.spel-last { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px 0 12px; }
.spel-last p { margin: 0; flex: 1 1 240px; color: var(--text-dim); line-height: 1.45; }
/* BISMAKSDETEKTIVEN (games.js, bd*): fragan, tre svar, och facit med Akademilanken. Svaren
   ateranvander Gissa olets ratt/fel-rutor (wd-ratt/wd-fel), med symbolen i hornet. */
.bd-fraga-rubrik { margin: 16px 0 8px; font-weight: 700; color: var(--text-main); }
.bd-citat { margin: 0; padding: 12px 14px; border-left: 4px solid var(--accent-color); border-radius: 0 10px 10px 0;
    background: var(--calc-panel); color: var(--text-main); line-height: 1.5; }
.bd-bismak { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--text-main); }
.bd-svarslista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bd-svar { position: relative; text-align: left; padding: 12px 34px 12px 14px; border: 2px solid var(--calc-line); border-radius: 10px;
    background: var(--calc-panel); color: var(--text-main); font-family: 'Lexend', sans-serif; font-size: var(--fs-base); line-height: 1.4; cursor: pointer; }
.bd-svar:hover:not(:disabled) { border-color: var(--accent-color); }
.bd-svar:disabled { cursor: default; }
.bd-svar .wd-symbol { top: 10px; right: 12px; }
.bd-svar.wd-ratt .wd-symbol { color: var(--ok-text); }
.bd-svar.bd-valt-fel { border-color: #e5534b; }   /* fast rod som fel glas i Reaktion */
.bd-svar.bd-valt-fel .wd-symbol { color: #e5534b; }
.bd-facit { margin-top: 14px; }
/* SYRE (games.js, sy*): svepbanan fran Ale eller lager med langre text pa kortet. Van =
   ok-farg, fiende = fast rod (som fel glas). Efter svaret star kortet kvar med ✓/✗ i hornet. */
.sy-van { --typ-farg: var(--ok-text); }
.sy-fiende { --typ-farg: #e5534b; }
.sy-bana { height: auto; min-height: 220px; padding: 28px 0 8px; }
.sy-kort { width: min(84%, 320px); min-height: 150px; font-size: var(--fs-base); font-weight: 700; line-height: 1.45; }
.sy-kort .wd-symbol { top: 8px; right: 10px; }
.sy-kort.sy-ratt { border-color: var(--ok-text); }
.sy-kort.sy-ratt .wd-symbol { color: var(--ok-text); }
.sy-kort.sy-fel { border-color: #e5534b; }
.sy-kort.sy-fel .wd-symbol { color: #e5534b; }
/* SAMMA STAM (games.js, gp*): kort som vands. Baksidan ett fragetecken, framsidan stammens
   namn. Ett hittat par far ok-ramen och en ✓; utan rorelse vid prefers-reduced-motion. */
.gp-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
@media (min-width: 769px) { .gp-bord { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gp-kort { position: relative; min-height: 78px; padding: 8px 6px; border: 2px solid var(--calc-line); border-radius: 10px;
    background: var(--calc-panel); color: var(--text-main); font-family: 'Lexend', sans-serif; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center; transition: transform 0.25s ease, border-color 0.15s ease; }
.gp-kort:hover:not(:disabled) { border-color: var(--accent-color); }
.gp-bak { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); }
.gp-fram { display: none; font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.gp-kort.gp-vand { transform: rotateY(180deg); }
.gp-kort.gp-vand > span { transform: rotateY(180deg); }
.gp-kort.gp-vand .gp-bak { display: none; }
.gp-kort.gp-vand .gp-fram { display: block; }
.gp-kort.gp-hittad { border-color: var(--ok-text); background: color-mix(in srgb, var(--ok-text) 14%, transparent); cursor: default; }
.gp-kort.gp-hittad::after { content: '✓'; position: absolute; top: 4px; left: 8px; color: var(--ok-text); font-weight: 800; transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .gp-kort, .gp-kort.gp-vand, .gp-kort.gp-vand > span, .gp-kort.gp-hittad::after { transition: none; transform: none; } }
/* Oppna kort: namnen syns direkt, utan vandning. Valt kort = accentram; fel par blinkar rott. */
.gp-oppen .gp-bak { display: none; }
.gp-oppen .gp-fram { display: block; }
.gp-oppen .gp-kort.gp-hittad::after { transform: none; }
.gp-kort.gp-vald { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-color); }
.gp-kort.gp-miss { border-color: #e5534b; animation: sw-skak 0.4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .gp-kort.gp-miss { animation: none; } }
body.light-mode .gp-kort:hover, body.light-mode .gp-kort:active { filter: none; }
.gp-lista { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; color: var(--text-main); }
/* PAR (games.js, pa*): memory med dina smakkort. Framsidan = glaset i stilens farg + olets namn.
   Fyra kolumner i mobilen (12 = 4 x 3, 24 = 4 x 6), sex for 24 i datorn. Ett hittat par lyser i
   spelarens farg och forsvinner sedan men behaller sin plats, sa bordet inte flyttar sig.
   Tva spelare: ramen runt bordet och spelarens ruta i hens farg - ink-varianterna, som morknar
   i ljust lage (den rena halmen syns knappt mot vitt). Turen star ocksa i text (#pa-tur). */
.pa-bord { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px auto 0; max-width: 440px;
    padding: 6px; border: 3px solid transparent; border-radius: 14px; transition: border-color 0.2s ease; }
@media (min-width: 769px) {
    .pa-bord.pa-stor { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 620px; }
}
.pa-arena[data-tur="1"] .pa-bord { border-color: var(--accent-text); }
.pa-arena[data-tur="2"] .pa-bord { border-color: var(--accent-secondary-ink); }
.pa-kort { position: relative; aspect-ratio: 4 / 5; padding: 4px; border: 2px solid var(--calc-line); border-radius: 10px;
    background: var(--calc-panel); color: var(--text-main); font-family: 'Lexend', sans-serif; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0;
    transition: transform 0.25s ease, border-color 0.15s ease, opacity 0.35s ease; }
.pa-kort:hover:not(:disabled) { border-color: var(--accent-color); }
.pa-bak { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); }
.pa-fram { display: none; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; }
.pa-fram .smak-glas { width: 44%; height: auto; flex: none; }
.pa-namn { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-kort.pa-vand { transform: rotateY(180deg); }
.pa-kort.pa-vand > span { transform: rotateY(180deg); }
.pa-kort.pa-vand .pa-bak { display: none; }
.pa-kort.pa-vand .pa-fram { display: flex; }
.pa-kort.pa-hittad { cursor: default; }
.pa-kort.pa-av1 { border-color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-text); }
.pa-kort.pa-av2 { border-color: var(--accent-secondary-ink); box-shadow: 0 0 0 2px var(--accent-secondary-ink); }
.pa-kort.pa-borta { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
@media (prefers-reduced-motion: reduce) { .pa-kort, .pa-kort.pa-vand, .pa-kort.pa-vand > span, .pa-bord { transition: none; transform: none; } }
body.light-mode .pa-kort:hover, body.light-mode .pa-kort:active { filter: none; }
.pa-stallning { display: flex; gap: 8px; }
.pa-spelare { flex: 1; padding: 6px 10px; border: 2px solid var(--calc-line); border-radius: 10px; font-size: var(--fs-sm); color: var(--text-dim); }
.pa-spelare strong { color: var(--text-main); }
.pa-s1.pa-aktiv { border-color: var(--accent-text); color: var(--text-main); background: color-mix(in srgb, var(--accent-color) 16%, transparent); }
.pa-s2.pa-aktiv { border-color: var(--accent-secondary-ink); color: var(--text-main); background: color-mix(in srgb, var(--accent-secondary) 16%, transparent); }
.pa-tur { margin: 6px 0 0; font-weight: 700; min-height: 1.3em; }
/* GISSA OLET (games.js, wd*): en gata - ledtradarna i en numrerad lista, de dolda streckade.
   wd-symbol/wd-ratt/wd-fel nedan delas av Bismaksdetektiven och Syre (ratt/fel-rutor). */
.wd-ledtradar { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wd-ledtrad { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--calc-line); border-radius: 10px; background: var(--calc-panel); }
.wd-ledtrad small { color: var(--text-dim); font-size: var(--fs-xs); }
.wd-ledtrad span { font-weight: 700; color: var(--text-main); line-height: 1.4; overflow-wrap: break-word; }
.wd-ledtrad.wd-dold { border-style: dashed; background: none; }
.wd-ledtrad.wd-dold span { color: var(--text-dim); }
.wd-ledtrad.wd-sen { opacity: 0.6; }   /* ledtradar man inte behovde - visas efterat */
.wd-vard { margin: 12px 0 0; font-weight: 700; color: var(--accent-text); }
.wd-ol.wd-ol-fel { opacity: 0.3; text-decoration: line-through; }
.wd-rad-namn { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-main); }
.wd-rad-namn .smak-glas { flex-shrink: 0; }
.wd-symbol { position: absolute; top: 4px; right: 6px; font-style: normal; font-weight: 800; font-size: var(--fs-sm); }
.wd-ratt { border-color: var(--ok-text); background: color-mix(in srgb, var(--ok-text) 14%, transparent); }
.wd-ratt .wd-symbol { color: var(--ok-text); }
.wd-fel .wd-symbol { color: var(--text-dim); }
.wd-val { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wd-ol { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--calc-line);
    border-radius: 10px; background: var(--calc-panel); color: var(--text-main); cursor: pointer; font-family: 'Lexend', sans-serif; }
.wd-ol span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
.wd-ol:hover:not(:disabled) { border-color: var(--accent-color); }
.wd-ol:disabled { opacity: 0.3; cursor: default; }
body.light-mode .wd-ol:hover, body.light-mode .wd-ol:active { filter: none; }   /* olets farg, se .bord-glas */
/* BLINDPROVNINGEN: anteckningarna i en ram, sa det syns var kortet slutar och gissningen borjar. */
.bp-blind { margin-top: 14px; padding: 4px 14px 12px; border: 1px solid var(--calc-line); border-radius: 12px; background: var(--calc-panel); }
.bp-blind .smak-del:last-of-type { border-bottom: none; }
.bp-blind .tri-chip { cursor: default; }
.bp-tal { font-size: var(--fs-lg); color: var(--accent-text); }
.bp-facit { margin-top: 16px; }
.bp-plus { color: var(--accent-text); }
/* Memory: "Titta ..." / "Din tur: 2 av 5" ovanfor bordet. Fast hojd, sa bordet inte hoppar. */
.mm-status { margin: 12px 0 0; min-height: 1.5em; text-align: center; font-weight: 700; color: var(--text-main); }

/* SÖK STAM i Profileraren (profiler.js, basSok*). Listan ligger över innehållet under. */
.bas-sok { position: relative; margin: -10px 0 18px; }
#bas-sok-falt {
    width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--calc-line); background: var(--calc-panel); color: var(--text-main);
    font-family: 'Lexend', sans-serif; font-size: 16px; /* fs:fast */   /* 16 px: iPhone zoomar inte in */
}
#bas-sok-falt:focus { outline: none; border-color: var(--accent-color); }
.bas-sok-lista {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: 320px; overflow-y: auto;
    background: var(--map-panel); border: 1px solid var(--calc-line); border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); padding: 4px;
}
.bas-sok-lista[hidden] { display: none; }
.bas-sok-rad {
    display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; border-radius: 6px;
    background: transparent; color: var(--text-main); font: 600 var(--fs-base) 'Lexend', sans-serif; cursor: pointer;
}
.bas-sok-rad:hover, .bas-sok-rad.markerad { background: color-mix(in srgb, var(--accent-color) 18%, transparent); }
.bas-sok-via { color: var(--text-dim); font-weight: 500; }
.bas-sok-brett { color: var(--text-dim); font-style: italic; font-weight: 500; }
.bas-sok-tom { padding: 9px 10px; color: var(--text-dim); font-size: var(--fs-base); }

/* Sök stam: etiketten "· samma stam / · liknande" och raden "Vald via ..." (profiler.js). */
.bas-sok-typ { color: var(--text-dim); font-weight: 500; font-size: 0.85em; /* fs:em */ }
.bas-sok-info { margin-top: 6px; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.4; }
.bas-sok-info[hidden] { display: none; }

/* Kartans popup: motsvarigheterna under varje kort (yeastmap.js, stamKnappar). */
.yeast-map-also { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.35; margin: -2px 0 6px; }
.yeast-map-also-label { display: block; }

/* Profilerarens sökfält och namnfält i mobilen: platshållaren lika liten som bibliotekets, så att
   "Search strain (e.g. 002, Conan, brett)" får plats. Texten man skriver står kvar på 16 px. */
@media (max-width: 768px) {
    #bas-sok-falt::placeholder,
    .lab-namn-falt::placeholder { font-size: var(--fs-sm); }
}

/* BÖRJA OM i Profilerarens rubrikrad (bredvid FULLSCREEN). Dämpad - det är inget man ska
   råka trycka på - och bara ↺ i mobilen, där raden annars blir för trång. */
.lab-reset-btn {
    background: transparent; border: 1px solid var(--calc-line); color: var(--text-dim);
    padding: 4px 10px; border-radius: 6px; font-family: 'Lexend'; font-weight: 600; font-size: var(--fs-xs); cursor: pointer;
}
.lab-reset-btn:hover { border-color: var(--accent-color); color: var(--text-main); }
/* LUFT MELLAN IKON OCH ORD (Klas 2026-10-19: "↺BÖRJA OM" i helskärm). Mellanslaget i
   markeringen räckte inte - ↺ ritas med en reservfont med smal bredd och mellanslaget blev
   nästan noll. Ett fast mellanrum i stället; i mobilen är ordet dolt och gap:en försvinner. */
.lab-reset-btn, #btn-fullscreen { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* MOBIL: bara ikoner, två lika stora rutor, och rubriken på EN rad (Klas 2026-10-15). Med
   "⤢ FULLSCREEN" i text bröts både rubriken och knappen i två rader på ~320 px. Ordet står
   kvar i title/aria-label. "✖ CLOSE" i helskärm saknar span:en och syns som förut. */
@media (max-width: 768px) {
    .lab-reset-text, #btn-fullscreen .lab-fs-text { display: none; }
    .lab-reset-btn, #btn-fullscreen:has(.lab-fs-text) {
        font-size: 0.95rem !important; /* fs:fast */ padding: 0 !important;
        width: 34px; height: 30px; line-height: 28px; text-align: center;
    }
    #lab-builder-title { white-space: nowrap; }
}

/* PROFILERAREN I MOBILEN NÄR EN STAM ÄR VALD (profiler.js): sökfältet göms till förmån för
   en kompakt rad, och profilknapparna fälls ihop till "Profil: X ▾". På dator: som förut. */
.bas-kompakt, .lab-chips-toggle { display: none; }
@media (max-width: 768px) {
    #view-lab.stam-vald #bas-sok:not(.oppen) { display: none; }
    #view-lab.stam-vald .bas-kompakt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: -10px 0 12px; }
    #view-lab.stam-vald .bas-sok-info { display: none; }
    .bas-kompakt-byt { background: none; border: none; padding: 0; color: var(--accent-text); font: 700 var(--fs-sm) 'Lexend', sans-serif; cursor: pointer; }
    .bas-kompakt-via { color: var(--text-dim); font-size: var(--fs-xs); }
    .lab-chips-toggle {
        display: block; background: none; border: none; padding: 4px 0; color: var(--text-main);
        font: 600 var(--fs-base) 'Lexend', sans-serif; cursor: pointer; width: 100%; text-align: left;
    }
    #lab-profile-chips:not(.oppen) .yeast-chip,
    #lab-profile-chips:not(.oppen) .lab-chip-grupp { display: none; }
    #lab-profile-chips { flex-wrap: wrap; }
}

/* SKAKA MED MUSEN (ui.js, musSkakning): kolven och glaset vickar till som om någon tog tag i
   dem. Vridpunkten nere vid foten, som när man skakar något man håller i. */
.skakas { animation: skakas 0.55s ease-in-out; transform-origin: 50% 90%; }
@keyframes skakas {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-5deg); }
    40% { transform: rotate(4deg); }
    60% { transform: rotate(-3deg); }
    80% { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .skakas { animation: none; } }

/* ÖVERSIKT I SIDAN, REDIGERING I HELSKÄRM (mobil, profiler.js labOversikt). Utanför helskärm
   får grafen sin rutas bredd - hela kurvan syns, inget svep - i stället för de 545 px som
   tvingade fram en horisontell rullning. Ett tryck på grafen, eller knappen nedan, öppnar
   helskärmen där man drar i punkterna. !important: #chart-inner har min-width inline. */
.lab-redigera { display: none; }
@media (max-width: 768px) {
    .chart-section:not(.is-fullscreen) #chart-inner { min-width: 100% !important; }
    .chart-section:not(.is-fullscreen) #lab-chart { cursor: pointer; }
    /* ⤢ i rubrikraden gör samma sak som "Redigera i helskärm" - i översikten bara den ena
       (Klas 2026-10-15). I helskärm är samma knapp CLOSE och står kvar. */
    .chart-section:not(.is-fullscreen) #btn-fullscreen { display: none; }
    /* Översikten behöver ingen precision på höjden: 300 -> 200 px, så sammanfattningen kommer
       upp ovanför kanten. !important: .chart-container har höjden inline. */
    .chart-section:not(.is-fullscreen) .chart-container { height: 200px !important; }
    /* Innan en stam är vald står platshållaren (text + två pilar) i rutan: 250 px och kortare
       pilar (99 -> 64 px), annars korsade pilarna den tre rader långa texten (Klas 2026-10-15). */
    #view-lab:not(.stam-vald) .chart-section:not(.is-fullscreen) .chart-container { height: 250px !important; }
    #chart-placeholder svg { height: 64px; width: 21px; }
    /* KONTROLLERNA FINNS BARA I HELSKÄRM i mobilen (Klas 2026-10-15): sidan är en ren översikt.
       Faserna och händelserna slås av/på från helskärmens verktygsfält (fs-toggle-*);
       sammanfattningen under grafen visar vad som är valt. */
    #lab-fas-rad, #lab-handelse-rad { display: none !important; }
    /* Y-axelns spalt utan rubrik: 75 -> 44 px (36 klippte siffrorna), "Dagar" centreras därefter. */
    .chart-section:not(.is-fullscreen) #lab-yaxis-sidebar { width: 44px !important; }
    .chart-section:not(.is-fullscreen) #lab-days-label { padding-left: 44px !important; }
    .lab-redigera {
        /* VANSTERSTALLD under rubriken (Klas 2026-10-20): allt annat i vyn star mot vanster-
           kanten, och centrerad svavade knappen fritt mellan rubriken och grafen. */
        display: block; margin: 0 0 4px; padding: 6px 14px;
        /* FYLLD sedan 2026-10-18 (Klas): som ram med gul text sag den ut som en etikett, och pa
           mobilen ar redigering vyns huvudhandling - kurvan andras bara harifran. #111 pa
           accenten, som de andra fyllda knapparna (lagst 5,5 over alla fem accenter). */
        background: var(--accent-color); border: 1px solid var(--accent-color); border-radius: 16px;
        color: #111; font: 800 var(--fs-sm) 'Lexend', sans-serif; cursor: pointer;
        padding: 8px 18px;
    }
    /* Bara när en stam är vald (Klas 2026-10-15): annars fanns inget att redigera, och
       platshållarens pilar - som pekar upp mot namn och stam - pekade på knappen i stället.
       Rubrikraden (↺ ⤢) göms på samma sätt innan stamvalet. */
    #view-lab:not(.stam-vald) .lab-redigera { display: none; }
}

/* Faserna i helskärmens verktygsfält (Vila, Krasch): text i en knapp lika hög som ikonerna.
   På = fylld med accenten, som fasknapparna i sidan; ingen glöd (den hör till händelserna). */
.fs-action-btn.fs-fas-btn { width: auto; padding: 0 12px; font: 700 var(--fs-xs) 'Lexend', sans-serif; white-space: nowrap; }
.fs-action-btn.fs-fas-btn.active { background: var(--accent-color); border-color: var(--accent-color); color: #111; box-shadow: none; }

/* Byt stam: tva motriktade pilar i stallet for forstoringsglas-emojin (Klas, 2026-10-17) -
   knappen BYTER stam, den soker inte. Ritad i appens eget formsprak och farg fran texten. */
.bas-kompakt-byt { display: inline-flex; align-items: center; gap: 6px; }
.bas-kompakt-byt .byt-ikon { width: 1.05em; height: 1.05em; flex: none; }

/* KONTOPAMINNELSEN i biblioteket och statusraden i Installningar (library.js ritaKontoTips).
   Lugn, i kortstil - aldrig en popup. */
.konto-tips {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.konto-tips[hidden], .konto-status[hidden] { display: none; }
.konto-tips p { margin: 0 0 10px; color: var(--text-main); font-size: var(--fs-sm); line-height: 1.5; }
.konto-tips-knappar { display: flex; gap: 10px; flex-wrap: wrap; }
.konto-tips-cta {
    background: var(--accent-color); color: #111; border: none; border-radius: 8px;
    padding: 7px 14px; font: 700 var(--fs-sm) 'Lexend', sans-serif; cursor: pointer;
}
.konto-tips-sen {
    background: none; color: var(--text-dim); border: 1px solid #444; border-radius: 8px;
    padding: 7px 14px; font: 600 var(--fs-sm) 'Lexend', sans-serif; cursor: pointer;
}
body.light-mode .konto-tips { background: rgba(0, 0, 0, 0.02); }
body.light-mode .konto-tips-sen { border-color: #ccc; }
.konto-status {
    margin: 0 0 22px; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-dim);
}
.konto-status #konto-status-lista { display: block; color: var(--text-main); }
.konto-status a { color: var(--accent-text); font-weight: 700; cursor: pointer; }

/* ZOOM UTAN SPÄRR (2026-10-18). Viewporten hade maximum-scale=1 + user-scalable=no, som
   blockerade nyp-zoom - ett tillgänglighetsfel (dansk testare). Spärren gjorde också en sak
   till: iPhone zoomar in sidan när man trycker i ett fält med text under 16 px, och det
   hindrade maximum-scale. Utan den måste fälten vara minst 16 px på pekskärm. :not() lyfter
   specificiteten över klassreglerna (.og-input 0,8rem, .input-group 0,9rem, .lang-select);
   readonly-fält (delningslänken) får ingen tangentbordszoom och behåller sin storlek. */
@media (pointer: coarse) {
    input:not([readonly]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select:not([multiple]),
    textarea:not([readonly]) {
        font-size: max(16px, 1em); /* fs:fast */
    }
}

/* TYPKANTEN PA JASTKORTEN (library.js, yeastTyp; Klas 2026-10-18 efter dansk testare).
   En tunn rand langs vansterkanten INUTI kortet - ramen ar redan upptagen av vald (accent),
   egen profil (sekundarfarg) och husjast (gul). Farger per tema, alla minst 4,0 mot kortets
   botten (#1a1a1a / #fff), over gransen 3,0 for grafik. Typknapparna ovanfor bar samma
   farg som prick och ar teckenforklaringen. */
:root {
    --typ-ale: #e8992e; --typ-lager: #5ea4e8; --typ-kveik: #e86a45;
    --typ-wheat: #e9cc6a; --typ-sour: #7fbf5f;
}
body.light-mode {
    --typ-ale: #b56a0c; --typ-lager: #2f74c0; --typ-kveik: #c4441c;
    --typ-wheat: #9a7b0c; --typ-sour: #4a8531;
}
.typ-ale { --typ-farg: var(--typ-ale); }
.typ-lager { --typ-farg: var(--typ-lager); }
.typ-kveik { --typ-farg: var(--typ-kveik); }
.typ-wheat { --typ-farg: var(--typ-wheat); }
.typ-sour { --typ-farg: var(--typ-sour); }
.yeast-card[class*="typ-"]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 5px 0 0 5px;
    background: var(--typ-farg);
}
.typ-prick {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--typ-farg);
    margin-right: 6px;
    vertical-align: 1px;
}
/* Kortets andra rad: idag bara en egen profils grundstam. Formatet (torr/flytande) stod har
   som etikett till 2026-10-19 och ar nu en rubrik i katalogen. (Temperaturintervallet stod har en dag men kapades - korten blev for hoga, Klas 2026-10-19.) */
.yeast-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
}

/* AVSNITTSRUBRIKERNA i biblioteket (library.js): "Dina profiler och husjaster" overst och
   "Alla stammar" fore katalogen. Syns bara nar man har nagot eget sparat. Over hela
   rutnatets bredd, i samma stil som Akademins grupprubriker men mindre. */
.yeast-avsnitt {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.yeast-avsnitt:first-child { margin-top: 0; }

/* "Dina profiler med den har stammen" i jastkortet (profiler.js, egnaProfilerForStam). Samma
   rad som smakkorten; stjarnan i den egna profilens sekundarfarg, som kortet i biblioteket. */
.egen-profil-stjarna {
    font-size: 1.3rem; /* fs:fast */
    color: var(--accent-secondary-ink);
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}

/* Egna profilers grundstam pa kortets andra rad (library.js). Som temperaturen, men FAR
   brytas: "Mangrove Jack's M44" ar langre an ett intervall, och med nowrap tryckte den sig
   in under mini-enheten pa mobil (Klas 2026-10-18). */
.yeast-meta { max-width: 100%; box-sizing: border-box; }
.yeast-bas {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Den nysparade profilen blinkar en gang nar biblioteket skrollar fram till den (profiler.js). */
@keyframes nysparad-puls {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-secondary) 55%, transparent); }
}
.yeast-card.nysparad { animation: nysparad-puls 0.9s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
    .yeast-card.nysparad { animation: none; outline: 2px solid var(--accent-secondary); }
}

/* Mobil: rubrikerna upp till samma niva som Live-rutan (10 px under kroppens kant). Forut
   hade flikarna 20 px och startsidan 50 px extra luft overst (Klas 2026-10-27, iPhone + Android). */
@media (max-width: 768px) {
    .library-header { padding-top: 0; }
    #view-settings, #view-soul { padding-top: 0 !important; }
    .home-title-section { margin-top: 0; }
}

/* LIVE SOM TELEFON pa dator (Klas 2026-10-19, efter danska testarens andra genomgang: "ett
   telefonstort kort mitt pa en bred skarm ser glomt ut - lat det MEDVETET se ut som en
   enhetsdisplay"). Forsta forsoket var en jamntjock kapsling runt 450 px-rutan - den lastes
   som en SURFPLATTA (Klas). En telefon = smalare (380 px, samma som mobilens kort), stora
   runda horn, tunna sidokanter, on upptill och en sidoknapp. .live-phone ar ett omslag i
   index.html; under 769 px har det inga regler alls och mobilen ar ororda.
   Dela-raden och densitetskortet foljer telefonens yttre bredd, 380 (border-box). */
@media (min-width: 769px) {
    .live-phone {
        position: relative;
        max-width: 380px;
        margin: 18px auto 0;
        padding: 40px 12px 30px;
        background: var(--phone-body, #1c1c1c);
        border: 1px solid var(--phone-edge, #3a3a3a);
        border-radius: 48px;
        transition: background-color 0.45s ease, border-color 0.45s ease;
        box-shadow: 0 24px 48px 6px rgba(0, 0, 0, 0.55);
    }
    /* On: kameran upptill, i kanten ovanfor skarmen - aldrig over innehallet. */
    .live-phone::before {
        content: '';
        position: absolute; top: 13px; left: 50%;
        width: 84px; height: 18px; margin-left: -42px;
        background: #000; border-radius: 9px;
    }
    /* Sidoknappen. */
    .live-phone::after {
        content: '';
        position: absolute; right: -4px; top: 130px;
        width: 3px; height: 64px;
        background: var(--phone-edge, #3a3a3a); border-radius: 0 2px 2px 0;
        transition: background-color 0.45s ease;
    }
    /* TELEFONENS FINISH (paskagg, Klas 2026-10-19): klick pa RAMEN (inte skarmen) byter till
       nasta kulor, valet sparas (ui.js, telefonFinish). Morka, dampade kulorer som anknyter till
       accenterna utan att VARA dem - en accentfargad ram slukade stamplattan, och en ljus ram flot
       ihop med den ljusgra sidan. Alla raknade: kroppen >= 13 mot #f0f0f0, kanten >= grafitens
       1,66 mot #111. Kanten bar ocksa sidoknappen. */
    .live-phone[data-finish="midnatt"] { --phone-body: #18233a; --phone-edge: #33476b; }
    .live-phone[data-finish="lila"]    { --phone-body: #2a1d3d; --phone-edge: #4f3a6e; }
    .live-phone[data-finish="salvia"]  { --phone-body: #1c2b22; --phone-edge: #3b5646; }
    .live-phone[data-finish="brons"]   { --phone-body: #33251a; --phone-edge: #6b5036; }
    .live-phone .oled-screen {
        max-width: none;
        border: none;
        border-radius: 26px;
    }
    /* INNEHALLET SOM PA MOBILEN. Telefonen ar 380 px - samma som mobilens kort - men utan
       detta galde datorns layout inuti (Klas: synkraden krockade med stamrutan, Luft-texten
       hamnade langt ut till hoger). Kopia av max-width: 600-blockets Live-regler, plus
       nollning av min-width: 601-blockets lyft av hogerspalten (margin-top -40) och
       progressens 45 px. Andras mobilens regler maste de andras HAR ocksa. */
    .live-phone .oled-screen { padding: 12px; }
    /* Kolven UTAN mobilens scale(1.15) (Klas samma kvall: "har damejeangen blivit storre?").
       Mobilen forstorar den for att fylla en smal skarm; har var den lagom redan. */
    .live-phone .carboy-wrapper { transform: none; margin-left: -5px; }
    .live-phone .action-status { font-size: 1.1rem; /* fs:fast */ gap: 4px; margin-top: -5px; transform: translate(-10px); }
    .live-phone .air-floating { top: 135px; left: 86%; font-size: 0.65rem; /* fs:fast */ }
    .live-phone .highlight-box { font-size: 1.1rem; /* fs:fast */ padding: 3px 8px; margin-bottom: 5px; }
    .live-phone .right-col { margin-top: 0 !important; padding-bottom: 60px !important; }
    .live-phone .progress-section { padding-top: 35px !important; }
    .live-phone .beer-temp { font-size: 1rem !important; /* fs:fast */ top: 58% !important; width: 100%; text-align: center; }
    .live-phone .beer-temp::after { -webkit-text-stroke: 0.8px var(--beer-stroke, var(--oled-color)) !important; }
    /* SHARE INNE I TELEFONEN, som pa mobilen (Klas samma kvall): mobilknappen i skarmens ovre
       hogra hörn i stallet for den losa raden ovanfor. dashboard.js visar/doljer bada med inline
       display, sa regeln galler bara nar JS sagt ja - :not() laser av det, och vager tyngre an
       601-blockets id-regel som doljer mobilknappen pa storre skarmar. */
    #share-fermentation-row { display: none !important; }
    .live-phone #share-fermentation-row-mobile:not([style*="display: none"]) { display: flex !important; }
    .gravity-card { max-width: 380px; }
    /* Ljust lage: telefonen ar MORK aven har, bara skarmen ar ljus. En ljusgra kapsling pa den
       ljusgra sidan flot ihop (Klas 2026-10-19) - och de flesta telefoner ar svarta. */
    body.light-mode .live-phone {
        box-shadow: 0 24px 48px 6px rgba(0, 0, 0, 0.18);
    }
    body.light-mode .live-phone .oled-screen { box-shadow: none; }
}

/* PROFILERARENS FALT OCH ETIKETTER (Klas 2026-10-19, danska testarens andra genomgang:
   "sma versaler, tunnare an resten"). Etiketterna stod inline med #888 i vikt 800 - morkare
   och tatare an kalkylatorernas - och namn/stam-falten var 0,75 rem i VERSALER i morkt lage
   men 1 rem i ljust (en egen ljuslagesregel med !important, 48 mot 45 px). Nu: etiketten som
   .ym-input-group label, falten som sokfaltet bredvid (samma ram, botten, hojd och storlek i
   bada temana). NAMNET skrivs fortfarande i versaler - enhetens skarm visar det sa - men
   platshallaren "t.ex. JUICEBMB" ar vanlig text. Stamlistan i stammens eget skiftlage. */
.ym-label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #aaa;
}
body.light-mode .ym-label { color: #666; }
.ym-label-rad { display: inline; margin: 0; white-space: nowrap; }
.lab-field {
    width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--calc-line); background-color: var(--calc-panel); color: var(--text-main);
    font-family: 'Lexend', sans-serif; font-size: var(--fs-base); font-weight: 400; outline: none;
}
.lab-field:focus { border-color: var(--accent-color); }
.lab-namn-falt { text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.lab-namn-falt::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-dim); opacity: 0.8; }
.lab-stam-lista {
    -webkit-appearance: none; appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 20px;
}
.lab-stam-lista option { background-color: var(--map-panel); color: var(--text-main); }

/* VAD SAKNAS? (games.js, vs*): bordet ar ett svg med Kokslabbets foremal (fasta farger, samma
   som i lektionen, och lika laddbara mot bada temana). Morkret ar en svart ruta ovanpa bordet.
   Det ratta svaret ar gront (streckat om du missade det), ditt felval fast rott. */
.vs-status { margin: 10px 0 6px; font-weight: 700; color: var(--text-main); min-height: 1.4em; }
.vs-tid-spar { height: 4px; border-radius: 2px; background: var(--calc-line); overflow: hidden; }
.vs-tid { height: 100%; background: var(--accent-color); transform-origin: left center; transform: scaleX(0); }
.vs-bordyta { position: relative; margin-top: 10px; border: 2px solid var(--calc-line); border-radius: 12px; background: var(--calc-panel); overflow: hidden; }
.vs-bord { display: block; width: 100%; height: auto; max-height: 62vh; margin: 0 auto; }
.vs-sak { transition: opacity 0.35s ease; }
.vs-sak.vs-borta { opacity: 0; transition: none; }   /* forsvinner i morkret, utan toning */
.vs-arena { padding-bottom: 16px; }   /* Nasta runda lag mot rutans underkant i telefonen */
.vs-ring { fill: none; stroke: none; stroke-width: 3; }
.vs-ring.vs-ratt { stroke: var(--ok-text); }
.vs-ring.vs-missad { stroke: var(--ok-text); stroke-dasharray: 7 5; }
.vs-morker { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.vs-morker.pa { opacity: 1; }
.vs-valen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 601px) { .vs-valen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vs-valen[hidden] { display: none; }   /* annars vinner display: grid, och brickan avslojar svaret medan bordet visas */
.vs-val { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 26px 8px 8px; border: 2px solid var(--calc-line); border-radius: 10px;
    background: var(--calc-panel); color: var(--text-main); font-family: 'Lexend', sans-serif; font-size: var(--fs-sm); line-height: 1.3; text-align: left; cursor: pointer; }
.vs-val:hover:not(:disabled) { border-color: var(--accent-color); }
.vs-val:disabled { cursor: default; }
body.light-mode .vs-val:hover, body.light-mode .vs-val:active { filter: none; }   /* LIGHT MODE FIX far inte farga om foremalen */
.vs-ikon { width: 40px; height: 40px; flex-shrink: 0; }
/* Langa namn (Inokuleringsogla, Trockenmalzextrakt) spillde over knappen i telefonen (Klas
   2026-10-21). I mobilen star ikonen OVANFOR namnet, sa namnet far hela knappens bredd, och
   orden bryts vid de mjuka bindestrecken i i18n. break-word (inte anywhere: den krymper
   knappens minsta bredd och bryter "Spritlam-pa") ar sparren om ett ord anda inte ryms. */
.vs-val span { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 600px) {
    .vs-val { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 8px 8px; text-align: center; }
    .vs-ikon { width: 34px; height: 34px; }
}
.vs-val .wd-symbol { top: 6px; right: 8px; }
.vs-val.bd-valt-fel { border-color: #e5534b; }   /* fast rod som i Bismaksdetektiven */
.vs-val.bd-valt-fel .wd-symbol { color: #e5534b; }
/* RATT OL I RATT GLAS (games.js, ws*): glasen ar knappar med ett svg. Konturen i currentColor,
   olen i fasta farger med stilens tva bokstaver (fargblinda, porter/stout). Valt glas lyfts;
   ett glas dit det inte gar att halla skakar. Statusraden ateranvander .vs-status. */
.ws-bord { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; margin-top: 14px; padding: 18px 4px 6px; touch-action: manipulation; }
.ws-glas { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
    color: var(--text-main); font-family: 'Lexend', sans-serif; cursor: pointer; transition: transform 0.18s ease-out; }
body.light-mode .ws-glas:hover, body.light-mode .ws-glas:active { filter: none; }   /* LIGHT MODE FIX far inte farga om olen */
.ws-glas { width: 66px; }
.ws-glas svg { display: block; overflow: visible; width: 60px; height: auto; }
@media (min-width: 769px) { .ws-glas { width: 84px; } .ws-glas svg { width: 78px; } }   /* i datorn var glasen sma som tandstickor */
.ws-glas.ws-haller { z-index: 5; }
/* Ledtraden: malglaset blinkar i accentfargen (kallglaset ar redan lyft). Last lage: beskedet. */
.ws-glas.ws-tips { color: var(--accent-color); animation: ws-blink 0.9s ease-in-out infinite; }
@keyframes ws-blink { 50% { transform: translateY(-5px); opacity: 0.6; } }
.ws-besked { margin-top: 10px; font-weight: 700; color: var(--text-main); }
.ws-strale { position: absolute; z-index: 4; border-radius: 3px; transform-origin: center top; pointer-events: none; }
.ws-glas small { min-height: 2.4em; font-size: var(--fs-xs); line-height: 1.2; text-align: center; color: var(--ok-text); font-weight: 700; }
.ws-glas.ws-valt { transform: translateY(-14px); color: var(--accent-color); }
.ws-glas.ws-fardigt { color: var(--ok-text); }
.ws-glas.ws-nej { animation: sw-skak 0.4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .ws-glas { transition: none; } .ws-glas.ws-nej, .ws-glas.ws-tips { animation: none; } }
.ws-knappar { justify-content: center; }
.ws-arena { padding-bottom: 16px; }
.ws-skala { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-skala li { display: flex; align-items: center; gap: 10px; }
.ws-skala i { width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--calc-line); flex-shrink: 0; }
.ws-skala span { margin-left: auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* BAKÅTKNAPPEN I HEMSKÄRMSAPPEN (ui.js, bara iPhone/iPad öppnad från hemskärmen). En remsa
   överst är ALLTID reserverad i det läget, även när knappen är dold - annars hoppar sidan
   varje gång knappen kommer och går. Knappen ligger över rutorna (z-index), så den backar
   ur dem också. */
/* Ingen remsa overst: knappen visas bara i det stora glaset, som tacker hela skarmen (ui.js). */
.ym-bakat {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: calc(env(safe-area-inset-left, 0px) + 6px);
    z-index: 100010;   /* over allt, aven rutan pa 100003 - knappen ska alltid na ut */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--calc-line);
    background: var(--map-panel);
    color: var(--text-main);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.ym-bakat svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ym-bakat--dold { visibility: hidden; }

/* COOKIE-RUTAN ligger langst ner (stil inline i index.html): fri fran hemlinjen, se viewport-fit. */
#cookie-consent { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }