:root{--bg:#F4F8F5;--card:#fff;--tx:#0A0A0A;--mu:#3A3A36;--li:#5C5C56;--ac:#5BA882;--al:#EBF5F0;--ah:#2D6B4A;--bl:#5A8FB5;--bll:#E4F0FB;--bh:#2A4F6E;--re:#B04830;--rl:#FDECEA;--wa:#9A6A00;--wl:#FBF5EA;--bo:#C5D8EB;--r:12px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background-color:#fff;color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}

nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid #D0E3F5;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:700;letter-spacing:.01em;text-decoration:none;color:inherit}
.logo .i-dot{position:relative;display:inline-block}
.logo .i-dot::after{content:'';position:absolute;top:.25em;left:50%;transform:translateX(-50%);width:.2em;height:.2em;background:#6BA3D0;border-radius:50%}
.nav-login{font-size:.83rem;font-weight:600;color:var(--bh);text-decoration:none;background:#fff;border:1.5px solid #B8D4EC;padding:7px 18px;border-radius:20px;transition:all .18s;white-space:nowrap}
.nav-login:hover{background:var(--bll);border-color:var(--bl)}@media(max-width:560px){.nav-login{display:none}}

/* IA Modal */
.ia-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:500;align-items:center;justify-content:center;padding:20px}
.ia-overlay.open{display:flex}
.ia-modal{background:var(--card);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;border:1.5px solid var(--bo)}
.ia-modal.ia-modal-wide{max-width:680px}
.ia-head{padding:22px 24px 16px;border-bottom:1px solid var(--bo);display:flex;justify-content:space-between;align-items:flex-start}
.ia-head-left h3{font-family:'Inter',sans-serif;font-size:1.2rem;margin-bottom:4px}
.ia-head-left p{font-size:.82rem;color:var(--mu);line-height:1.4}
.ia-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--li);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;margin-top:-2px}
.ia-close:hover{background:var(--bg);color:var(--tx)}
.ia-perks{display:flex;flex-direction:column;gap:6px;padding:14px 24px;border-bottom:1px solid var(--bo);background:var(--al)}
.ia-perk{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ah);font-weight:600}
.ia-perk::before{content:'✓';font-weight:800}
.ia-body{padding:20px 24px 24px}
.ia-for{font-size:.84rem;color:var(--mu);margin-bottom:18px}
.ia-for strong{color:var(--tx)}
.ia-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0}
.ia-field{margin-bottom:12px}
.ia-field label{display:block;font-size:.72rem;font-weight:700;color:var(--li);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.ia-field input,.ia-field select,.ia-field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--bo);border-radius:8px;font-family:inherit;font-size:.92rem;color:var(--tx);background:var(--bg);transition:border-color .2s;outline:none}
.ia-field input:focus,.ia-field select:focus,.ia-field textarea:focus{border-color:var(--ac)}
.ia-field textarea{resize:vertical;min-height:80px}
.ia-gdpr{display:flex;align-items:flex-start;gap:10px;margin:16px 0}
.ia-gdpr input[type=checkbox]{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--ac)}
.ia-gdpr label{font-size:.78rem;color:var(--mu);line-height:1.5}
.ia-submit{width:100%;padding:14px;background:var(--ac);color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;transition:background .2s}
.ia-submit:hover{background:#4d9970}
.ia-submit:disabled{background:var(--li);cursor:not-allowed}
.ia-success{text-align:center;padding:44px 28px;background:var(--al);border:1.5px solid #A8D8BC;border-radius:14px;margin:2px 0}
.ia-success .ia-check{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:#1A5C34;display:flex;align-items:center;justify-content:center;animation:iaCheckPop .5s cubic-bezier(.34,1.56,.64,1) both}
.ia-success .ia-check::before{content:'';width:25px;height:13px;border-left:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(-45deg) translateY(-2px) scale(0);animation:iaCheckDraw .35s .35s cubic-bezier(.65,0,.35,1) forwards}
.ia-success h4{font-family:'Inter',sans-serif;font-size:1.4rem;margin-bottom:10px;color:#1A5C34}
.ia-success p{color:var(--mu);font-size:.92rem;line-height:1.6}
@keyframes iaCheckPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes iaCheckDraw{to{transform:rotate(-45deg) translateY(-2px) scale(1)}}
.ia-error{display:none;align-items:flex-start;gap:9px;background:var(--rl);border:1.5px solid #f0b8ae;border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.85rem;color:var(--re);line-height:1.5}
.ia-error.show{display:flex;animation:iaErrorIn .25s ease both}
.ia-error svg{flex-shrink:0;margin-top:1px}
@keyframes iaErrorIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ia-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bh);color:#fff;border:none;border-radius:9px;padding:11px 20px;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:opacity .15s;text-decoration:none}
.ia-btn:hover{opacity:.88}
.ia-elig-warn{background:var(--rl);border:1.5px solid #f0b8ae;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.ia-elig-warn-title{font-size:.85rem;font-weight:700;color:#8A2010;margin-bottom:4px}
.ia-elig-warn-text{font-size:.82rem;color:var(--re);line-height:1.5;margin-bottom:10px}
.ia-elig-check{display:flex;flex-direction:column;gap:8px}
.ia-elig-item{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--tx);cursor:pointer}
.ia-elig-item input[type=checkbox]{accent-color:var(--ac);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.ia-elig-ok{background:var(--al);border:1.5px solid #A8D8BC;border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:.85rem;font-weight:700;color:#1A5C34}
/* Motivation questions */
.motiv-block{margin-bottom:18px;padding:16px;border:1.5px solid var(--bo);border-radius:12px;background:var(--bg)}
.motiv-block-title{font-size:.78rem;font-weight:700;color:var(--li);margin-bottom:12px}
.motiv-options{display:flex;flex-direction:column;gap:6px}
.motiv-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--bo);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;font-size:.86rem;color:var(--tx)}
.motiv-opt:hover{border-color:var(--bl);background:var(--bll)}
.motiv-opt input[type=radio]{accent-color:var(--bl);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.motiv-opt.selected{border-color:var(--bl);background:var(--bll)}
.motiv-thanks{font-size:.78rem;color:var(--mu);margin-top:8px;display:none}
.motiv-progress{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.motiv-progress-bar{flex:1;height:4px;border-radius:2px;background:var(--bo);overflow:hidden}
.motiv-progress-fill{height:100%;background:var(--bl);border-radius:2px;transition:width .25s}
.motiv-progress-label{font-size:.72rem;color:var(--li);font-weight:600;white-space:nowrap}
.motiv-back{background:none;border:none;padding:0;color:var(--li);font-size:.78rem;font-weight:600;cursor:pointer;margin-top:10px;display:inline-flex;align-items:center;gap:4px}
.motiv-back:hover{color:var(--tx)}
.motiv-required{font-size:.78rem;color:#8A2010;margin-top:-8px;margin-bottom:18px;display:none}

.detail-page{max-width:760px;margin:0 auto;padding:80px 24px 100px}

/* Breddning ("breakout") för kortraderna (.yrkes-grid, "Om du gillade
   denna"-karusellen). Brödtext ska stanna vid .detail-pages 760px för
   läsbarheten, men kortraderna känns trånga vid samma bredd - se
   .sibling-scroll-wrap-wide-kommentaren i buildSimilarProgramsHtml()
   (js/utbildning-detalj.js) för varför bara DESSA två sektioner breddas
   och inte t.ex. sibling-scroll-wrap-pillren för "Finns även i".
   Gated bakom min-width:960px så .detail-page garanterat redan står vid
   sin fasta 760px (slutat skala fluidt) och breddningen aldrig knuffar
   innehåll utanför viewporten på smalare skärmar. 124px = (960px mål-
   bredd − 712px innehållsbredd i .detail-page, dvs 760−24−24 padding)/2,
   så kortraden hamnar centrerad kring samma mittpunkt som texten ovanför. */
@media(min-width:960px){
  .yrkes-grid,
  .sibling-scroll-wrap-wide{
    width:960px;
    margin-left:-124px;
    margin-right:-124px;
  }
}

.back-btn{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--mu);background:var(--card);border:1.5px solid var(--bo);border-radius:8px;padding:8px 16px;cursor:pointer;transition:all .18s;margin-bottom:22px;text-decoration:none}
.back-btn:hover{border-color:var(--ac);color:var(--ac)}

/* Hero */
.dhero{background:var(--card);border:1.5px solid #D0E3F5;border-radius:16px;margin-bottom:16px;overflow:hidden}
.dhero-hero-img{width:100%;height:220px;object-fit:cover;display:block}
.dhero-body{padding:22px 22px 20px}
.dhero-label{font-size:.65rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--bl);margin-bottom:8px}
.dhero-top{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.dhero-top-row{display:flex;align-items:center;gap:14px}
.dhero-id-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dhero-logo{width:48px;height:48px;border-radius:10px;border:1.5px solid #D0E3F5;object-fit:contain;background:#fff;flex-shrink:0;padding:4px}
.dhero-logo-placeholder{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:1.1rem;border:none}
.dhero-name{font-family:'Inter',sans-serif;font-size:1.7rem;font-weight:800;line-height:1.15;letter-spacing:-.04em;margin:0;flex:1;min-width:0}
.dhero-fav-btn{background:none;border:none;cursor:pointer;padding:6px;margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .15s,transform .15s;align-self:flex-start}
.dhero-fav-btn:hover{background:var(--bg);transform:scale(1.06)}
.dhero-fav-btn svg{width:26px;height:26px;stroke:var(--re);fill:none;stroke-width:2.2;transition:fill .15s}
.dhero-fav-btn.is-fav svg{fill:var(--re)}
.dhero-school{font-size:.88rem;font-weight:500;color:var(--mu)}
.dhero-contact-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:2px}
.dhero-contact-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mu)}
.dhero-meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dhero-meta-row span{font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:20px;background:var(--bg);color:var(--mu)}
/* Start countdown */
/* Ansökningsstatus i hero (js/ansokan-status.js). Ersätter den gamla
   rubriken "Nästa ansökan", som visade startdatum och inte hade något med
   ansökan att göra. Tonen kommer ur status.ton: grön = går att söka nu,
   gul = deadline inom 14 dagar, röd = inställd, neutral = stängd/okänd. */
.ansokan-block{margin-top:14px;padding:10px 13px;border-radius:10px;border:1.5px solid var(--bo);background:var(--bg2, #F7F9FB)}
.ansokan-block--gron{border-color:rgba(32,178,100,.35);background:rgba(32,178,100,.09)}
.ansokan-block--gul{border-color:rgba(214,158,46,.4);background:rgba(214,158,46,.1)}
.ansokan-block--rod{border-color:rgba(200,70,50,.35);background:rgba(200,70,50,.08)}
.ansokan-rubrik{font-size:.85rem;font-weight:800;color:var(--tx);margin-bottom:3px}
.ansokan-detalj{font-size:.8rem;line-height:1.55;color:var(--mu)}
.ansokan-lank{display:inline-block;margin-top:7px;font-size:.8rem;font-weight:700;color:var(--ah);text-decoration:none}
.ansokan-lank:hover{text-decoration:underline}
.next-app-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);margin-bottom:6px}
.start-countdown{display:flex;flex-direction:column;gap:4px}
.start-cd-card{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.start-cd-days{font-size:1.15rem;font-weight:800;color:var(--tx);letter-spacing:-.02em}
.start-cd-label{font-size:.88rem;font-weight:600;color:var(--tx)}
.start-cd-date{font-size:.82rem;font-weight:500;color:var(--li)}
.start-cd-date::before{content:"· "}
.start-cd-card.started .start-cd-days{font-size:1.05rem}
.mode-campus{background:#EBF5F0;color:#2D6B4A}
.mode-distance{background:#E4F0FB;color:#2A4F6E}
.mode-hybrid{background:#EDE7F5;color:#5A3E8E}
/* Admission row — bleeds to the card edges so the chart gets full width */
.admission-row{margin:18px -22px 0;padding:18px 22px 0;border-top:1px solid var(--bo)}
.admission-row .cutoff-scores{display:flex;flex-wrap:wrap;gap:16px}
.admission-row .cutoff-scores span{display:flex;align-items:baseline;gap:8px}
.admission-row .cutoff-scores strong{font-size:2.6rem;font-weight:800;color:var(--tx);line-height:1;letter-spacing:-1px}
.admission-row .cutoff-sep{display:none}
/* Action buttons row */
.action-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--bo)}
.action-btn-ia,.action-btn-school,.action-btn-antagning{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:var(--ac);color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background .2s;white-space:nowrap}
.action-btn-ia:hover,.action-btn-school:hover,.action-btn-antagning:hover{background:var(--ah)}
/* keep legacy .dhero-tags for JS compat */
.dhero-tags{display:none}

/* Section heading */
.sec-h{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em;margin:24px 0 10px;display:flex;align-items:center;gap:10px}
.sec-n{width:26px;height:26px;border-radius:50%;background:var(--bl);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;font-family:'Inter',sans-serif;flex-shrink:0}
/* "Du kan jobba som"/"Fortbildning..." och "Om du gillade denna kanske du
   gillar:" hade en liten sifferbricka respektive hjärtikon i .sec-n, som
   sifferordningen i övriga sektioner (se yrkesSectionNum/videreSectionNum
   i js/utbildning-detalj.js - siffrorna räknas fortfarande, syns bara inte
   här) resp. ett löst tematiskt hjärta. Ingen .sec-n renderas alls för
   dessa två rubriker längre - i stället centrerad, större rubriktext. */
.sec-h-feature{justify-content:center;font-size:1.35rem;text-align:center}
.req-help-btn{height:22px;padding:0 8px;border-radius:20px;border:1.5px solid var(--bl);background:none;color:var(--bl);font-size:.68rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1;white-space:nowrap}
.req-help-btn:hover{background:var(--bl);color:#fff}
.req-collapsible{display:none}
.req-collapsible.open{display:block}

/* Block */
.block{background:var(--card);border:1.5px solid #D0E3F5;border-radius:12px;padding:20px 18px;margin-bottom:14px}
/* Kortkaruseller (yrkeskort/utbildningskort) har redan egen visuell ram
   (bild, skugga, avrundade hörn) - en extra .block-ram runt hela raden
   blev bara dubbel inramning, tas bort men behåller radavstånd/rubrikflöde. */
.block.block-flush{background:transparent;border:none;border-radius:0;padding:0}

/* Requirements raw text */
.req-text{font-size:.84rem;color:var(--mu);line-height:1.75;white-space:pre-wrap;word-break:break-word}
.req-none{font-size:.84rem;color:var(--li);font-style:italic}

/* Form */
.check-group{display:grid;gap:10px;margin-bottom:18px}
.check-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--bo);border-radius:10px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.check-item:hover{border-color:var(--ac);background:#f0faf5}
.check-item input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--ac);cursor:pointer}
.check-item.checked{border-color:var(--ac);background:var(--al)}
.check-label{font-size:.88rem;font-weight:600;color:var(--tx);line-height:1.4}
.check-sub{font-size:.75rem;color:var(--li);margin-top:2px}

/* Kurs med flera vägar ("1b" ELLER "1a1"+"1a2" ihop) - varje väg är en egen
   kolumn sida vid sida istället för en enda ruta med hela kombinationen. */
.check-group-wrap{display:flex;align-items:stretch;gap:8px}
.check-group-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.check-item-sub{padding:10px 12px}
.check-and-divider{font-size:.72rem;font-weight:700;color:var(--li);text-align:center;text-transform:uppercase;letter-spacing:.5px;padding:1px 0}
.check-or-label{flex-shrink:0;align-self:center;font-size:.72rem;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.5px;padding:0 2px}
@media (max-width:480px){
  .check-group-wrap{flex-direction:column}
  .check-or-label{padding:2px 0}
}

.gymnasieexamen-item{border-color:var(--bo);background:#f8fcf9}
.gymnasieexamen-item.checked{border-color:#2D6B4A;background:#EBF5F0}

.other-req-box{background:var(--wl);border:1.5px solid #e0d0a0;border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:.84rem;color:var(--wa);line-height:1.65}
.other-req-box strong{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}

.check-btn{width:100%;background:var(--bl);color:#fff;border:none;border-radius:10px;padding:14px 20px;font-family:inherit;font-size:.98rem;font-weight:700;cursor:pointer;transition:opacity .18s,transform .15s;margin-top:4px}
/* Alternativ behörighetsväg. Reell kompetens låg tidigare som en kryssruta
   direkt under "Gymnasieexamen" och lästes då som ännu ett krav, trots att
   den i anordnarnas kravtext är ett av alternativen i "du är behörig om du
   uppfyller något av följande". Den är därför ingen kryssruta längre, utan
   en egen väg med ett tydligt "eller" emellan. */
/* Ligger som ett eget rutnätsobjekt inuti .check-group, mellan examensrutan
   och de särskilda förkunskaperna. */
.reell-alt{margin:2px 0 6px}
.reell-alt-or{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;color:var(--li);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.reell-alt-or::before,.reell-alt-or::after{content:'';flex:1;height:1px;background:var(--bo)}
.reell-alt-btn{width:100%;background:var(--card);color:var(--bh);border:1.5px solid var(--bl);border-radius:10px;padding:13px 18px;font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;text-align:center;line-height:1.45}
.reell-alt-btn:hover{background:var(--bll)}
.reell-alt-sub{font-size:.8rem;color:var(--mu);line-height:1.6;margin-top:8px;text-align:center}

.check-btn:hover{opacity:.9;transform:translateY(-1px)}
.check-btn:active{transform:none}

/* Result boxes */
.result-box{border-radius:14px;padding:22px 20px;margin-top:20px;display:none}
.result-box.show{display:block;animation:fadeUp .3s ease}
.result-icon{font-size:2rem;margin-bottom:10px}
.result-title{font-family:'Inter',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.result-body{font-size:.88rem;line-height:1.7}

.result-ok{background:#EBF5F0;border:2px solid #A8D8BC}
.result-ok .result-title{color:#1A5C34}
.result-ok .result-body{color:#2D6B4A}

.result-fail{background:var(--rl);border:2px solid #f0b8ae}
.result-fail .result-title{color:#8A2010}
.result-fail .result-body{color:var(--re)}

.result-reell{background:var(--bll);border:2px solid #9DC4E0}
.result-reell .result-title{color:#163860}
.result-reell .result-body{color:var(--bh)}

.missing-list{margin:10px 0;padding-left:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.missing-list li{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;width:100%}
.missing-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--re);flex-shrink:0}
.missing-chip{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:var(--card);border:1.5px solid var(--bo);border-radius:8px;color:var(--bh);font-size:.85rem;font-weight:700;text-decoration:none;transition:all .15s;cursor:pointer;flex:1;min-width:180px;text-align:center}
.missing-chip:hover{background:#d0e5f7;border-color:var(--bl)}
.missing-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--re);flex-shrink:0}
.missing-chip::after{content:'→';font-size:.75rem;margin-left:2px;color:var(--bl)}

.result-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.result-link{display:inline-block;padding:10px 20px;border-radius:8px;font-size:.85rem;font-weight:700;text-decoration:none;transition:opacity .15s}
.result-link:hover{opacity:.85}
.link-primary{background:var(--ac);color:#fff}
.link-secondary{background:var(--card);color:var(--mu);border:1.5px solid var(--bo)}
.link-blue{background:var(--bl);color:#fff}
.link-plan{background:var(--ac);color:#fff;font-size:.92rem;padding:13px 22px;border-radius:10px;width:100%;text-align:center;box-sizing:border-box}

/* Website link */
.hero-website-btn{display:inline-block;padding:9px 18px;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--bh);text-decoration:none;border:1.5px solid var(--bo);background:#fff;transition:border-color .15s,background .15s;white-space:nowrap}
.hero-website-btn:hover{border-color:var(--bl);background:var(--bll)}
.better-school-cta{display:block;background:#2A4F6E;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 18px);border-radius:16px;padding:28px 28px;text-decoration:none;margin-top:4px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.better-school-cta::before{content:'';position:absolute;top:-40%;right:-10%;width:280px;height:280px;background:radial-gradient(ellipse,rgba(91,168,130,.18) 0%,transparent 70%);pointer-events:none}
.better-school-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.22)}
.better-school-cta-left{position:relative;z-index:1}
.better-school-cta-label{font-size:.66rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.better-school-cta-title{font-size:1.2rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.02em;margin-bottom:8px}
.better-school-cta-sub{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:18px}
.better-school-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#2A4F6E;padding:11px 22px;border-radius:9px;font-size:.9rem;font-weight:800;transition:transform .15s,box-shadow .15s}
.better-school-cta:hover .better-school-cta-btn{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.better-school-cta-chips{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.better-school-cta-chip{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:4px}
.better-school-cta-right{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.bsc-school-pill{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:8px 14px;backdrop-filter:blur(4px)}
.bsc-school-pill-name{font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap}
.bsc-school-pill-meta{font-size:.68rem;color:rgba(255,255,255,.5);margin-top:1px}
@media(max-width:560px){.better-school-cta{grid-template-columns:1fr}.better-school-cta-right{display:none}}

/* Loading — min-height håller undan footern (och allt annat under sidan)
   från viewporten redan från första målningen. Utan detta var spinnerns
   riktiga höjd bara ett par hundra px, så footern hamnade synlig direkt
   under den — och flyttade sig sedan långt utanför viewporten så fort
   den riktiga (mycket längre) sidan skrevs in, vilket CLS-mätningen
   räknade som en stor oväntad layoutförskjutning. Se motsvarande
   kommentarer i js/utbildning-detalj.js (init()) om samma bakomliggande
   orsak för coursesHtml/siblings/admissionHistory. */
.loading-state{text-align:center;padding:80px 24px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
.spinner{width:36px;height:36px;border:3px solid var(--bo);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
.loading-state p{color:var(--mu);font-size:.9rem}

/* Error */
.error-state{text-align:center;padding:60px 24px;background:var(--card);border:2px solid var(--bo);border-radius:16px}
.error-state p{color:var(--mu);font-size:.9rem;line-height:1.6}
.error-state a{color:var(--ac);font-weight:600}

/* No parsed data */
.no-parsed{background:var(--wl);border:1.5px solid #ddc87a;border-radius:10px;padding:16px;font-size:.86rem;color:var(--wa);line-height:1.65;margin-bottom:14px}

/* Cutoff scores */
.cutoff-block{margin-top:12px;padding:10px 14px;background:transparent;border:none;border-radius:10px;padding-left:0;padding-right:0}
.open-admission-badge{display:inline-flex;align-items:center;margin-top:10px;padding:5px 12px;background:rgba(32,178,100,.12);border:1.5px solid rgba(32,178,100,.3);border-radius:20px;font-size:.72rem;font-weight:700;color:#1a9e62;letter-spacing:.03em}
.cutoff-label-row{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.cutoff-label{font-size:.75rem;font-weight:700;color:var(--mu)}
.cutoff-info-btn{width:14px;height:14px;border-radius:50%;background:#C8DEF5;border:none;color:#5A7A9A;font-size:.6rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;flex-shrink:0;transition:background .15s}
.cutoff-info-btn:hover{background:#a8c8e8}
.cutoff-explain{font-size:.75rem;color:#5A7A9A;line-height:1.6;margin-bottom:8px;display:none;padding:6px 8px;background:#E6F1FC;border-radius:6px}
.cutoff-explain.open{display:block}
.cutoff-explain b{color:#3a5f80}
.cutoff-scores{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cutoff-scores span{font-size:.88rem;color:var(--mu)}
.cutoff-scores strong{font-size:1.4rem;font-weight:800;color:var(--tx);margin-right:2px}
.cutoff-sep{color:#aaa;font-size:.8rem;margin:0 2px}

/* Admission trend (yh_admission_score_history) */
.trend-toggle{display:flex;gap:4px;margin-bottom:8px}
.trend-toggle-btn{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;border:1.5px solid var(--bo);background:#fff;color:var(--mu);cursor:pointer;transition:all .15s}
.trend-toggle-btn.active{background:var(--al);border-color:var(--ac);color:var(--ah)}
.trend-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.trend-chip{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;border:1.5px solid var(--bo);background:#fff;color:var(--mu);cursor:pointer;transition:all .15s}
.trend-chip.active{background:var(--bll);border-color:var(--bl);color:var(--bh)}
.trend-bignum{font-size:1.9rem;font-weight:800;color:var(--tx);line-height:1.1}
.trend-eligible{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--ah);vertical-align:middle;margin-left:2px}
.trend-ineligible{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--re);vertical-align:middle;margin-left:2px}
.trend-bignum-label{font-size:.72rem;color:var(--mu);margin-bottom:8px}
.trend-svg-wrap{position:relative}
.trend-svg-wrap svg{width:100%;height:auto;display:block}
.trend-hit{cursor:pointer}
.trend-tooltip{display:none;position:absolute;transform:translate(-50%,calc(-100% - 6px));background:var(--tx);color:#fff;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5}
.trend-years{display:flex;justify-content:space-between;font-size:.68rem;color:var(--li);margin-top:2px}
.trend-prelim-note{font-size:.72rem;color:var(--wa);background:var(--wl);border:1px solid #ecd9a3;border-radius:8px;padding:6px 10px;margin-top:8px}
.trend-analysis{font-size:.82rem;line-height:1.55;color:var(--mu);background:var(--al);border:1px solid var(--bo);border-radius:10px;padding:12px 14px;margin-top:12px}

/* Liknande utbildningar - samma .edu-card/.edu-grid som /utbildningar
   (css/utbildningar-page.css, redan laddad på den här sidan) så korten blir
   exakt lika stora/likadana, men i en horisontell scroll-rad istället för
   grid-wrap eftersom listan kan bli lång. Behåller klassen "edu-grid" (utan
   "list-mode") så .edu-grid:not(.list-mode) .card-body/.card-aside
   {display:contents}-reglerna i utbildningar-page.css fortfarande gäller -
   annars faller kortets interna bild/text-lager isär.*/
.edu-grid.scroll-row{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.edu-grid.scroll-row::-webkit-scrollbar{display:none}
.edu-grid.scroll-row .edu-card{flex:0 0 320px}

/* "Du kan jobba som" - yrkeskort. Klonade EXAKT (samma pixelvärden, inte
   bara löst "liknande" som .career-grid i css/meritrakare.css blev - den
   ändrade bildhöjd och typsnittsstorlekar på vägen) från .edu-card/
   .card-img/.card-info/.card-name/.card-sal i yrken.html, så korten är
   exakt lika stora oavsett var de visas. Egna klassnamn (yrkes-card* i
   stället för edu-card/card-*) eftersom css/utbildningar-page.css redan är
   laddad på den här sidan och äger .edu-card/.card-name för "Liknande
   utbildningar" ovan - att återanvända samma klassnamn hade låtit de
   reglerna krocka med varandra.*/
.yrkes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.yrkes-card{background:#fff;border:1px solid var(--bo);border-radius:14px;transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit}
.yrkes-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.10);transform:translateY(-2px)}
.yrkes-card-img{width:100%;height:150px;background-size:cover;background-position:center;background-color:var(--bg);flex-shrink:0;position:relative}
.yrkes-card-info{height:132px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.yrkes-card-name{font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;line-height:1.3;color:var(--tx);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.yrkes-card-sal{font-size:.9rem;font-weight:700;color:var(--tx);margin-top:auto}
@media(max-width:700px){.yrkes-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
@media(max-width:560px){.yrkes-grid{grid-template-columns:1fr}}

/* Info pills */
.info-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.pill-green{background:#EBF5F0;color:#2D6B4A}
.pill-blue{background:#E4F0FB;color:#2A4F6E}
.pill-red{background:var(--rl);color:var(--re)}
.pill-grey{background:var(--bg);color:var(--mu)}
.pill-yellow{background:var(--wl);color:var(--wa)}


/* Description */
.desc-block{background:var(--card);border:1.5px solid #D0E3F5;border-radius:12px;padding:26px 24px;margin-bottom:14px}
.desc-text{font-family:'DM Sans',sans-serif;font-size:1rem;color:#2a2a26;line-height:1.8;word-break:break-word}
.desc-text.clamped{max-height:160px;overflow:hidden;position:relative}
.desc-text.clamped::after{content:'';position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(transparent,var(--card))}
.desc-text .desc-lead{font-size:1.07rem;font-weight:500;color:#111;line-height:1.75;margin-bottom:1em}
.desc-text p{margin-bottom:.85em}
.desc-text p:last-child{margin-bottom:0}
.desc-text ul,.desc-text ol{padding-left:1.4em;margin:.5em 0 .9em}
.desc-text li{margin-bottom:.4em;line-height:1.65}
.desc-text strong{color:var(--tx);font-weight:700}
.desc-toggle{background:none;border:none;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--ac);cursor:pointer;margin-top:12px;padding:0;text-decoration:underline;display:block}

/* Contact row */
.contact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--bo)}
.contact-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--bh);text-decoration:none;transition:color .15s}
.contact-link:hover{color:var(--ac)}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.dhero-cover{display:none}

@media(max-width:600px){
  .detail-page{padding:74px 16px 100px}
  .dhero-name{font-size:1.45rem}
  .dhero-hero-img{height:160px}
  .dhero-body{padding:16px 16px 18px}
  .admission-row{margin:18px -16px 0;padding:18px 16px 0}
  .dhero-bottom{grid-template-columns:1fr;gap:14px}
  .admission-col .cutoff-scores strong{font-size:2.1rem}
  .result-actions{flex-direction:column}
  .website-block{flex-direction:column;align-items:flex-start}
}

/* Intresseanmälan sticky bar + slide-in panel */
#bkStickyBar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-top:1.5px solid var(--bo);box-shadow:0 -4px 24px rgba(0,0,0,.07);padding:14px 24px;transform:translateY(100%);transition:transform .3s ease}
#bkStickyBar.show{display:block;transform:translateY(0)}
.bk-sb-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.bk-sb-txt b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--tx)}
.bk-sb-txt span{font-size:.78rem;color:var(--mu)}
.bk-sb-btn{background:var(--ac);color:#fff;border:none;border-radius:8px;font-family:inherit;font-weight:700;font-size:.92rem;padding:12px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;flex-shrink:0}
.bk-sb-btn:hover{background:var(--ah);transform:translateY(-1px);box-shadow:0 4px 16px rgba(91,168,130,.32)}
.bk-pass-banner{display:flex;gap:12px;align-items:center;background:var(--al);border-radius:var(--r);padding:13px 15px;margin-bottom:18px}
.bk-pass-icon{width:38px;height:38px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-pass-title{font-size:.98rem;font-weight:700}
.bk-pass-sub{font-size:.8rem;color:var(--mu);line-height:1.4}
.bk-btn-green{width:100%;border:none;border-radius:var(--r);font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;padding:14px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,transform .15s;background:var(--ac);color:#fff;margin-top:4px}
.bk-btn-green:hover{background:var(--ah);transform:translateY(-1px)}
.city-search-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;padding:9px 16px;background:var(--bg);border:1.5px solid var(--bo);border-radius:8px;text-decoration:none;color:var(--tx);font-size:.85rem;font-weight:600;transition:all .18s;white-space:nowrap;flex-shrink:0}
.city-search-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--al)}
.sibling-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sibling-scroll::-webkit-scrollbar{display:none}
.sibling-scroll-wrap{position:relative}
.sibling-scroll-wrap::before,.sibling-scroll-wrap::after{content:'';position:absolute;top:0;bottom:4px;width:48px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.sibling-scroll-wrap::before{left:0;background:linear-gradient(to left,transparent,rgba(20,20,20,.35))}
.sibling-scroll-wrap::after{right:0;background:linear-gradient(to right,transparent,rgba(20,20,20,.35))}
.sibling-scroll-wrap.can-scroll-right::after{opacity:1}
.sibling-scroll-wrap.can-scroll-left::before{opacity:1}
.sibling-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--bo);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;color:var(--mu);opacity:0;pointer-events:none;transition:opacity .2s,border-color .15s;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.sibling-arrow:hover{border-color:var(--ac);color:var(--ac)}
.sibling-arrow.arrow-left{left:4px}
.sibling-arrow.arrow-right{right:4px}
.can-scroll-left .sibling-arrow.arrow-left,.can-scroll-right .sibling-arrow.arrow-right{opacity:1;pointer-events:auto}

/* "Efter utbildningen" — SCB:s uppföljning av YH-examinerade, hämtad via
   vyn myh_yh_utfall_publik (se fetchUtfall i js/utbildning-detalj.js).
   Talen gäller utbildningsinriktningen i hela riket, aldrig den enskilda
   skolan — .utfall-kalla säger det, och den raden får inte tas bort. */
/* Skiljelinje MELLAN raderna, inte efter den sista: .utfall-kalla är också
   en div, så :last-of-type träffar den och inte sista .utfall-rad — det gav
   dubbel linje mot källradens border-top. */
.utfall-rad{display:flex;align-items:baseline;gap:14px;padding:11px 0}
.utfall-rad + .utfall-rad{border-top:1px solid var(--bll)}
.utfall-tal{font-size:1.5rem;font-weight:800;color:var(--ah);min-width:64px;flex-shrink:0;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.utfall-txt{font-size:.88rem;color:var(--mu);line-height:1.45}
.utfall-kalla{margin-top:14px;padding-top:12px;border-top:1px solid var(--bo);font-size:.72rem;color:var(--li);line-height:1.55}

/* ── Jobblaget i skolans lan ──────────────────────────────────────────────
   En rad i "Du kan jobba som"-sektionen, inte ett eget panelblock. Se
   js/regional-jobb-utbildning.mjs. */
.rjl-rad{margin:12px 16px 2px;padding-top:12px;border-top:1px solid var(--bo);font-size:.86rem;line-height:1.6}
.rjl-niva{display:inline-block;font-size:.75rem;font-weight:700;border-radius:20px;padding:3px 10px;margin-right:7px;white-space:nowrap;vertical-align:baseline}
.rjl-text{color:var(--tx)}
.rjl-lank{color:var(--ac);font-weight:600;text-decoration:none;white-space:nowrap}
.rjl-lank:hover{text-decoration:underline}
.rjl-kalla{display:block;font-size:.72rem;color:var(--li);line-height:1.5;margin-top:5px}