/* ── Frog Fitness designlager ────────────────────────────────────────────────
   Laddas EFTER site.css och injiceras av scripts/build-website.mjs, så en ny
   leverans av site.css inte raderar det.

   Innehåller tre saker: layouten för startsidans nya sektioner, riktiga
   enhetsmockuper i stället för platta rektanglar, och återhållsam rörelse.
   Inga nya färger eller storlekar: allt kommer från tokens i site.css.

   Röd är accent, inte huvudfärg. Den används på fyra ställen: strecket före
   etiketten, ordet i hjälterubriken, understreck i menyn vid hover och en
   enda pill i PT-raden. Röda linjer under stora rubriker är medvetet borta,
   de blev för många. */

/* ── Typografi: samma nivå, samma storlek genom hela sajten ────────────────── */
.tri-item h3,.story h3,.feature-copy h3{font-size:var(--h3);letter-spacing:-.03em;line-height:1.16;margin:0 0 8px}
.tri-item p,.story p{font-size:var(--small);color:var(--ink-600);line-height:1.6;margin:0}
.download-copy p,.stripe p,.feature-copy p{font-size:var(--body)}
.section-head{align-items:flex-end}
.section-head .lead{margin-top:12px}

/* ── Rött, återhållet ──────────────────────────────────────────────────────
   Behåll: streck före etiketten. Ta bort: linjer under rubriker, röda
   punkter i listor och röda bockar (de läste som fel, inte som accent). */
.dark .eyebrow,.stripe .eyebrow{color:#8fe0b4}

.trust-row span::before{color:var(--green-600)}
.trust-row .count{color:var(--ink-900);font-weight:800;font-variant-numeric:tabular-nums}
.trust-row .count::before{content:none}

/* Menyn markerar med ett tunt rött understreck vid hover. */
.navlinks>a{position:relative}
.navlinks>a::before{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--red-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.navlinks>a:hover::before,.navlinks>a.active::before{transform:scaleX(1)}
.btn:focus-visible{outline:3px solid var(--red-500);outline-offset:2px}

/* Loggan större utan att headern växer. */
.header.scrolled .brand img{transition:height .3s cubic-bezier(.2,.7,.2,1)}

/* ── Enhetsmockup ──────────────────────────────────────────────────────────
   Ramen byggs av lager i stället för en kantlinje: metallisk kant med ljus
   uppe och mörk nere, sidoknappar tecknade i kanten, dynamic island över
   skärmen och en glasreflex snett över. Skärmen får egen radie innanför. */
.phone,.phone-shot{
  position:relative;border:0;padding:10px;border-radius:46px;
  transform-style:preserve-3d;
  background:
    /* volymknappar till vänster, strömknapp till höger */
    linear-gradient(#7d8781,#39423c) left -1px top 23% / 3px 30px no-repeat,
    linear-gradient(#7d8781,#39423c) left -1px top 33% / 3px 30px no-repeat,
    linear-gradient(#7d8781,#39423c) right -1px top 29% / 3px 46px no-repeat,
    /* ljuskant längs överkanten */
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 16%),
    /* själva ramen */
    linear-gradient(158deg,#5d665f 0%,#1b211d 21%,#0b0f0d 51%,#232a25 79%,#515a53 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 2px rgba(0,0,0,.6) inset,
    0 40px 70px -26px rgba(5,26,18,.55),
    0 16px 30px -16px rgba(5,26,18,.4);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.phone img,.phone-shot img{display:block;width:100%;border-radius:37px;background:#0b0f0d}

/* Sidan av telefonen: en identisk platta en bit bakåt i djupled. När enheten
   vrids sticker den ut längs ena kanten och blir till en synlig kortsida, så
   telefonen läser som ett föremål med tjocklek i stället för en bild med
   perspektiv. Det är skillnaden mot en vanlig rundad rektangel. */
.phone::before,.phone-shot::before{
  content:"";position:absolute;inset:0;border-radius:46px;z-index:-1;
  transform:translateZ(-13px);
  background:linear-gradient(100deg,#39423c,#0a0d0b 38%,#121714 62%,#2e3630);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
/* Skärmens glas: dynamic island överst och en ljusstrimma snett över. */
.phone::after,.phone-shot::after{
  content:"";position:absolute;inset:10px;border-radius:37px;pointer-events:none;z-index:3;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='34'><rect width='120' height='34' rx='17' fill='%23070a09'/></svg>") top 10px center / 29% auto no-repeat,
    linear-gradient(126deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 24%,transparent 46%);
}

/* ── Laptopram ─────────────────────────────────────────────────────────────
   Portalen är en webbprodukt, så den ska sitta i en skärm och inte sväva som
   en lös bild. Ramen är tunn upptill och i sidorna, tjockare under skärmen,
   plus en fot som sticker ut i underkant. */
.laptop{
  position:relative;padding:10px 10px 16px;border-radius:14px 14px 8px 8px;
  background:linear-gradient(168deg,#4b544d,#1a201c 34%,#101512 70%,#333a35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 40px 70px -28px rgba(5,26,18,.5),
    0 16px 30px -18px rgba(5,26,18,.35);
}
.laptop img{display:block;width:100%;border-radius:6px;background:#fff}
/* Foten. Bredare än skärmen och med en urtagning i mitten, som på en riktig. */
.laptop::after{
  content:"";position:absolute;left:-6.5%;right:-6.5%;bottom:-11px;height:11px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#3d453f,#171c19);
  box-shadow:0 8px 18px -8px rgba(5,26,18,.45);
}
.laptop::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-11px;width:15%;height:5px;border-radius:0 0 6px 6px;
  background:#0c100e;z-index:2;
}

/* Portalbilder: ram och djup, men ingen enhetsdekor. Laptopramen har sin egen
   yta och ska inte få den generella kanten ovanpå. */
.portal-crop,.pt-visual,.screen-clean{
  border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-md);
}
.portal-shot:not(.laptop){
  border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-md);
}

/* Beskärning: visa UI:t större i stället för hela webbläsarfönstret. */
.shot-zoom{overflow:hidden}
.shot-zoom img{width:132%;max-width:none;transform:translate(-13%,-4%)}
.connected-visual .portal-crop img{width:128%;max-width:none;transform:translate(-11%,-5%)}

/* ── Riktiga enhetsmockuper ────────────────────────────────────────────────
   Telefonerna är Marcus egna Canva-exporter med skärmen redan inmonterad,
   rastrerade till PNG med genomskinlig bakgrund. De behöver varken ram,
   skugga eller perspektiv från CSS: allt det ligger redan i bilden.
   Därför ingen .phone-styling på dem, bara storlek och placering. */
.device{display:block;width:100%;height:auto}

/* app.html hade telefonerna i .phone-ramen fran site.css. Mockuperna har egen
   ram, sa omslaget far bara satta bredd. .small halls kvar som storleksklass. */
.device-wrap{border:0;background:none;box-shadow:none;padding:0;border-radius:0;width:230px}
.device-wrap.small{width:196px;transform:translateY(20px)}
.device-wrap img{display:block;width:100%;border-radius:0;background:none}
.phone-pair{gap:26px;padding:10px}

/* ── A. Hjälte ─────────────────────────────────────────────────────────────
   Mobilen överlappar webbplattformen för djup. Ingen glow, ingen chip-pill. */
.hero{padding:56px 0 58px;background:var(--surface)}
.hero::after{display:none}
.hero-grid{grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
/* --h1 i stället för --display: annars bryts "All in one place." till tre rader
   i den smalare textspalten, vilket ser hackigt ut. */
.hero h1{font-size:var(--h1);margin:14px 0 18px}
.hero-copy p{max-width:520px}
.product-stage{position:relative;min-height:0;perspective:1700px;perspective-origin:62% 44%}
.stage-glow,.product-chip{display:none}
/* Portalen får ingen fejkad laptopram. Den är en rektangel, och en ritad ram
   runt en rektangel tillför inget utom risken att se billig ut. Rundade hörn
   och en djup skugga räcker, samma grepp som Linear och Stripe använder. */
.portal-shot{
  position:relative;right:auto;top:auto;width:86%;margin-left:auto;z-index:1;
  border-radius:14px;overflow:hidden;
  box-shadow:0 44px 80px -34px rgba(5,26,18,.42),0 0 0 1px rgba(16,32,51,.07);
}
.portal-shot img{display:block;width:100%}
/* Mockupen har egen skugga, så den behöver bara placeras. Bilden är lite
   bredare än telefonen i den, därav 26 % i stället för 22. */
.hero-device{position:absolute;left:-2%;bottom:-34px;width:26%;z-index:2}
.trust-row{gap:20px;margin-top:24px}

/* ── B. En sammankopplad plattform ──────────────────────────────────────────
   Gymfotot ligger bakom en mörk grön överlagring. Överlagringen är själva
   bakgrunden i gradienten, så texten behåller sin kontrast även om bilden
   byts ut eller inte laddas. */
.stripe{
  padding:56px 0;
  background:
    linear-gradient(120deg,rgba(5,43,33,.94),rgba(7,60,45,.88) 58%,rgba(10,77,57,.9)),
    var(--green-950) url("/assets/img/photos/gym-dark.jpg") center/cover no-repeat;
}
.stripe::after{display:none}
.stripe-grid{grid-template-columns:.84fr 1.16fr;gap:48px;align-items:center}
.connected-visual{position:relative;perspective:1600px;perspective-origin:60% 45%}
/* Laptopmockupen har egen ram och skugga, sa den behover bara bredd. Telefonen
   overlappar nedre vanstra hornet, samma grepp som i hjaltesektionen. */
.connected-laptop{width:94%;margin-left:auto}
.connected-device{position:absolute;left:-1%;bottom:-6px;width:23%;z-index:2}

/* ── C. Tre områden ───────────────────────────────────────────────────────── */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.tri-item{text-align:left}
.tri-item .device{width:100%;max-width:300px;margin:0 auto var(--space-4)}
.tri-item h3{margin-top:0}

/* ── D. Digital PT ──────────────────────────────────────────────────────────
   Samma behandling som stripe: fotot bakom en mörk grön överlagring som ligger
   i gradienten, så texten behåller kontrast oavsett vad bilden gör. */
/* Inzoomad på mitten: bilden har väggtext i båda kanterna, och den läses
   igenom överlagringen och drar blicken. Mitten är bara golv och ställningar. */
.section.dark{
  background:
    linear-gradient(105deg,rgba(7,60,45,.95),rgba(5,43,33,.9) 55%,rgba(7,60,45,.93)),
    var(--green-900) url("/assets/img/photos/training-wide.jpg") 46% 50%/205% no-repeat;
}
.solo-phone{display:flex;justify-content:center}
.solo-phone .device{width:min(330px,84%)}
.dark .feature-copy li{color:#cbdad4}
.dark .feature-copy li::before{background:var(--green-2,#20b765)}

/* ── E. PT-ytan ───────────────────────────────────────────────────────────── */
.pt-showcase{grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center}
/* Laptopmockupen har egen ram och skugga. Tidigare lag har en beskuren
   skarmbild dar hogerkanten klipptes av mitt i klientlistan. */
.pt-laptop{width:100%}
.feature-pill:nth-child(4){background:var(--red-100);color:var(--red-500);border-color:#f1cfc5}

/* PT-sidans hjälte: mindre luft och portalbilden med direkt i första vyn. */
.pt-hero{padding:48px 0 44px}
.pt-hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center}
.pt-hero h1{font-size:var(--h1);line-height:1.02;letter-spacing:-.045em;margin:12px 0 16px}
.pt-hero p{font-size:var(--body);color:var(--ink-600);max-width:520px;margin:0}
.pt-hero .hero-actions{margin-top:24px}

/* ── F. Övningsbiblioteket på startsidan ──────────────────────────────────── */
.home-exercises{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--space-4)}
.exercise-card{transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease,border-color .24s ease}
.exercise-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#c9d6d0}

/* ── G. Redaktionellt ─────────────────────────────────────────────────────── */
/* Fyra lika stora kort pa samma rad. Tidigare var ett kort dubbelt sa stort
   och de ovriga hamnade pa olika hojd, vilket gjorde raden svar att lasa av.
   Hela kortet ar en lank, inte bara rubriken. */
.editorial-grid{grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.story{border-top:2px solid var(--border);padding-top:14px}
.story:hover{border-top-color:var(--green-600)}
.story-link{display:block;color:inherit}
.story .thumb{border-radius:var(--radius-md);margin-bottom:14px;aspect-ratio:16/10;overflow:hidden;background:var(--surface-mint)}
.story .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.story:hover .thumb img{transform:scale(1.03)}
.story h3{font-size:20px;line-height:1.25}
.story-link:hover h3{color:var(--green-600)}

/* Bildplats för riktiga foton. Utan fil syns en lugn grön ton i stället för
   en trasig bild, så designen håller tills fotona finns på plats. */
.photo-slot{
  background:linear-gradient(150deg,var(--surface-mint),#dceee4);
  border-radius:var(--radius-md);overflow:hidden;
}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Fotobehandling ────────────────────────────────────────────────────────
   Det som avslöjar en AI-bild är inte motivet utan ytan: den är för ren, för
   jämn och för mättad. Riktiga foton har korn, lite brus i skuggorna och en
   färgton från kameran.

   Två grepp, båda i CSS så originalfilerna är orörda:
   1. Lätt avmättnad och en aning mer kontrast, så bilden känns graderad
      snarare än genererad.
   2. Ett fint korn ovanpå, genererat med SVG-turbulens (inga extra filer).
      Kornet bryter den perfekta ytan och är det enskilt effektivaste knepet.

   Effekten ska vara omärklig var för sig. Ser man den är den för stark. */
.story .thumb,.photo-frame{position:relative;isolation:isolate}
.story .thumb img,.photo-frame img{filter:saturate(.88) contrast(1.05) brightness(.98)}
.story .thumb::after,.photo-frame::after,.stripe::before,.section.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:140px 140px;
  opacity:.16;mix-blend-mode:overlay;
}
/* Kornet över hela sektionen för de mörka ytorna, innehållet ligger över. */
.stripe,.section.dark{position:relative;isolation:isolate}
.stripe>*,.section.dark>*{position:relative;z-index:2}

/* Breda fotoband: beskurna hårt så de läser som en bild i en publikation och
   inte som ett stock-foto på full höjd. */
.photo-frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-mint)}
.photo-frame img{width:100%;display:block}
.pt-band{aspect-ratio:21/9}
.pt-band img{height:100%;object-fit:cover;object-position:center 38%}
.library-band{aspect-ratio:24/9;margin:22px 0 4px}
.library-band img{height:100%;object-fit:cover;object-position:center 34%}

/* ── Artikel- och nyhetssidor (CMS) ─────────────────────────────────────────
   Läsbredd framför full sidbredd: en artikel ska läsa som en text, inte som
   en produktsida. Runt 68 tecken per rad. */
.article-wrap{max-width:760px}
.article-meta{font-size:var(--small);color:var(--ink-600);font-weight:700;margin:0 0 14px}
.article-hero{aspect-ratio:16/9}
.article-hero img{height:100%;object-fit:cover}
.article-body{font-size:var(--body);line-height:1.75;color:var(--ink-700)}
.article-body h2{font-size:var(--h3);letter-spacing:-.025em;line-height:1.2;margin:34px 0 12px;color:var(--ink-900)}
.article-body h3{font-size:20px;margin:26px 0 10px;color:var(--ink-900)}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;display:grid;gap:8px}
.article-body a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--red-500)}
.article-body blockquote{
  margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--red-500);
  font-size:20px;line-height:1.55;color:var(--ink-900);
}
.article-body code{background:var(--surface-soft);padding:2px 6px;border-radius:6px;font-size:.92em}
.story h3 a{color:inherit}
.story h3 a:hover{color:var(--green-600)}
.info-card h3 a{color:inherit}
.info-card h3 a:hover{color:var(--green-600)}

/* ── H. Nedladdning ───────────────────────────────────────────────────────── */
.cta{padding:var(--space-7) 0}
/* Telefonen till vanster, texten till hoger. Mockupen lutar med skarmen mot
   hoger, sa den vander sig mot innehallet i stallet for bort fran det. */
.download-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.download-copy h2{margin:10px 0 14px}
.download-copy .store-badges{margin-top:22px}
.download-copy .text-link{display:inline-block;margin-top:18px}
.download-phone{display:flex;justify-content:flex-start}
.download-phone .device{width:min(300px,76%)}

/* ── Rörelse ───────────────────────────────────────────────────────────────
   Liten och fysisk: 8 till 16 px glidning, stegvis intoning och hover.
   --py sätts av frog.js och ligger först i transformen så rotationen är kvar. */
/* Ingen rotation längre. Mockuperna är fotograferade enheter med sin egen
   form och skugga, och att vrida dem i CSS skulle snedvrida bilden i stället
   för att skapa djup. Kvar är bara den lilla glidningen vid scroll. */
html.motion-ready .hero-device,
html.motion-ready .connected-device,
html.motion-ready .portal-shot,
html.motion-ready .connected-laptop,
html.motion-ready .pt-visual,
html.motion-ready .screen-clean,
html.motion-ready .tri-item .device,
html.motion-ready .solo-phone .device,
html.motion-ready .download-phone .device{
  transform:translate3d(0,var(--py,0px),0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
html.motion-ready .tri-item .device:hover,
html.motion-ready .solo-phone .device:hover,
html.motion-ready .download-phone .device:hover,
html.motion-ready .hero-device:hover,
html.motion-ready .portal-shot:hover,
html.motion-ready .pt-visual:hover{
  transform:translate3d(0,var(--py,0px),0) translateY(-5px);
}

html.motion-ready [data-stagger]>*{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}
html.motion-ready [data-stagger].in>*{opacity:1;transform:none}

.header{transition:box-shadow .3s ease,background .3s ease}
.header.scrolled{box-shadow:0 6px 22px rgba(16,32,51,.07);background:rgba(255,255,255,.97)}
.header.scrolled .nav{height:64px}
.nav{transition:height .3s cubic-bezier(.2,.7,.2,1)}
/* Google Play-brickan har inbyggd luft i PNG:en, darfor de negativa marginalerna
   i site.css. Bieffekten ar att flexlayouten raknar bort samma pixlar fran
   bildens egen bredd, sa brickan blir ihoptryckt ~11 procent och bryter mot
   Googles egna riktlinjer. Explicit bredd ur filens verkliga forhallande
   (646x250) haller proportionen, och max-width:none behovs for att sajtens
   globala img-regel annars klipper bredden till lankens smalare ruta. */
.store-badge.google img{width:183.5px;max-width:none;flex:0 0 auto}
@media(max-width:640px){.store-badge.google img{width:160px}}
.store-badge{transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.store-badge:hover{transform:translateY(-2px)}

/* ── Tätare rytm ──────────────────────────────────────────────────────────── */
.section{padding:var(--space-7) 0}
.section.tight{padding:var(--space-6) 0}
.feature-line{padding:12px 0;gap:48px}

@media(max-width:1000px){
  .hero-grid,.stripe-grid,.pt-showcase,.download-grid,.pt-hero-grid{grid-template-columns:1fr}
  .tri-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .tri-item .phone{max-width:240px}
  .home-exercises{grid-template-columns:repeat(2,1fr)}
  .editorial-grid{grid-template-columns:repeat(2,1fr)}
  .portal-shot{width:100%;margin:0}
  .hero-device{position:relative;left:auto;bottom:auto;width:52%;margin:-64px auto 0;display:block}
  .connected-laptop{width:100%;margin:0}
  .connected-device{position:relative;left:auto;bottom:auto;width:46%;margin:-40px auto 0;display:block}
  .download-phone{justify-content:center}
  .brand img{height:46px}
  /* I en kolumn blir 3D bara stökigt. */
  html.motion-ready .phone,html.motion-ready .phone-shot,
  html.motion-ready .portal-shot,html.motion-ready .connected-visual .portal-crop{transform:none}
}


/* ---- Typografi ----------------------------------------------------------
   Rubrikerna gick pa webblasarens standardvikt 700. Den vikten laser som
   sportig och generisk: det ar den alla traningsappar anvander. Vikt 500 med
   tight teckenavstand laser lugnt och redaktionellt i stallet, och ar vad
   sajter som kanns dyra faktiskt gor. Jamforelsen som utloste andringen:
   nutraware.com kor 500 rakt igenom.

   Bara de STORA rubrikerna gar ner till 500. Kortrubriker under 30px blir
   tunna och sladdriga i 500 och far ligga kvar pa 600. */
.hero h1,.pt-hero h1,.page-hero h1,.section h2,.stripe h2,.cta h2,
.feature-copy h3,.download-copy h2{font-weight:500}
.hero h1 .accent{font-weight:inherit}
.section h3,.story h3,.tri-item h3,.info-card h3,.ex-card h2,
.article-body h2,.article-body h3,.ex-main h2{font-weight:600}

/* Brodtexten var 18px. 20px later mer sjalvsakert och ar lattare att lasa pa
   en 27-tumsskarm, med nagot tightare radavstand sa styckena inte glesnar. */
:root{--body:20px}
.hero p,.stripe p,.feature-copy p,.pt-hero p,.lead{line-height:1.45}

/* ---- Hjalten ------------------------------------------------------------
   Fem knappar ovanfor vikningen betyder att ingen av dem ar knappen. Kvar ar
   butiksbrickorna (ett val) och webbplattformen (ett andra). Demon och
   PT-sidan lag redan i menyn, i sidfoten och i sina egna avsnitt langre ner,
   sa ingenting blev oatkomligt. */
.hero .hero-actions{margin-top:18px}

/* ---- Anatomisk figur ----------------------------------------------------
   Samma path-data som portalens BodyMap och appens muskelkarta, laddad ur
   src/lib/bodyData.ts vid bygget. Primar muskel i fullt gront, sekundara i
   ljusare. Vyn ritas bara nar den har nagot markerat. */
.bodymap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end;max-width:470px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 22px 16px;margin:18px 0 0}
.bodymap.one{grid-template-columns:minmax(0,215px);max-width:260px}
.bodymap-fig{margin:0;text-align:center}
.bodymap-fig svg{display:block;width:100%;height:auto}
.bodymap-fig figcaption{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-600)}
.bodymap-key{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;
  font-size:12.5px;font-weight:700;color:var(--ink-700)}
.bodymap-key span{display:inline-flex;align-items:center;gap:6px}
.bodymap-key i{width:11px;height:11px;border-radius:3px;flex:none}

/* ---- Sprakvaxlare -------------------------------------------------------
   Sajten finns pa svenska under /sv/ och pa engelska pa roten. Vaxlaren pekar
   pa motsvarande sida, inte pa startsidan. */
.lang-switch{display:inline-flex;align-items:center;gap:1px;padding:2px;border:1px solid var(--border);border-radius:999px;background:#fff;margin-right:4px}
.lang-pick{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-600);transition:background .18s ease,color .18s ease}
.lang-pick:hover{color:var(--ink-900);background:#f1f5f0}
.lang-pick.active{background:var(--ink-900);color:#fff}
@media(max-width:900px){.lang-switch{margin-right:2px}}

/* ---- Ovningssidan ------------------------------------------------------
   Instruktionerna lag tidigare over hela wrappen (1240px), alltsa rader pa
   nastan 200 tecken: bade svarlasta och orsaken till att sidan kandes tom.
   Uppdelningen foljer StrengthLog: en innehallsspalt runt 700px och en
   smalare sidospalt, med rorlig bild hogst upp dar blicken landar. */
.ex-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}
.ex-main{max-width:720px;font-size:17px}
.ex-main h2{margin:34px 0 12px;font-size:26px;letter-spacing:-.02em}
.ex-main>*:first-child{margin-top:0}
.ex-main ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.ex-main ol li{padding-left:4px}
.ex-cta{margin-top:30px}
.ex-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}

/* preload="none" gor att webblasaren inte kanner videons matt forran nagon
   trycker play, sa rutan far sin plats av oss i stallet: utan aspect-ratio
   kollapsar spelaren till en remsa och sidan hoppar nar filmen startar. */
.ex-video{margin:0 0 34px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#0B1620}
.ex-video figcaption{padding:11px 15px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#cfe6da;background:#0B1620}
.ex-video video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#0B1620}
/* Med preload="none" ar rutan tom tills nagon trycker play. Markeringen ar rent
   dekorativ (pointer-events:none), sa webblasarens egna kontroller nas anda och
   videon fungerar utan JS. frog.js doljer den nar filmen borjar. */
.ex-video{position:relative}
.ex-video-cue{position:absolute;inset:44px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;color:#cfe6da;font-size:13px;font-weight:750;transition:opacity .3s ease}
.ex-video.playing .ex-video-cue{opacity:0}
.ex-video-cue span.dot{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.ex-video-cue span.dot::before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}

.ex-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}
.ex-card h2{font-size:17px;margin:0 0 13px;letter-spacing:-.015em}
.ex-facts dl{margin:0;display:flex;flex-direction:column}
.ex-facts dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0}
.ex-facts dl>div+div{border-top:1px solid var(--border)}
.ex-facts dt{font-size:13px;color:var(--ink-600);font-weight:700;flex:0 0 auto}
.ex-facts dd{margin:0;font-size:14px;font-weight:750;text-align:right}
.ex-related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ex-related-list li+li{border-top:1px solid var(--border)}
.ex-related-list a{display:flex;flex-direction:column;gap:2px;padding:11px 0;transition:padding-left .18s ease}
.ex-related-list a:hover{padding-left:6px}
.ex-related-list strong{font-size:15px;font-weight:750;letter-spacing:-.01em}
.ex-related-list span{font-size:12.5px;color:var(--ink-600)}
.ex-card .text-link{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:800}
.ex-more .section-head{margin-bottom:22px}

/* Rullgardinerna ska se ut som fritextfaltet, inte som systemets egna. */
.exercise-toolbar select.field{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6B7C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.exercise-toolbar select.field:focus{border-color:#9ec7b1;box-shadow:0 0 0 3px rgba(11,143,89,.12)}
.exercise-empty{color:var(--ink-600);padding:28px 0}

/* Filtret foljer med nedat pa sma skarmar. Biblioteket ar 405 kort langt, och
   utan det maste besokaren rulla hela vagen upp igen bara for att byta
   muskelgrupp. Headern ar sticky pa top:0, sa raden lagger sig precis under
   den och korten rullar under bada tva: samma oskarpa som headern, annars
   syns texten passera igenom.
   Bara under 860px. Pa skrivbordet ryms filtret och de forsta raderna i samma
   vy anda, och en fast rad dar hade bara atit hojd. */
@media(max-width:860px){
  .exercise-toolbar{
    position:sticky;
    top:73px;                 /* .nav ar 74px hog, en pixel in under kanten */
    z-index:20;               /* under headern (50), over korten */
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-content:start;
    margin:18px 0 4px;
    /* .wrap lamnar 20px rannsten. Utan att ata upp den syns korten glida
       forbi i kanterna bredvid den fasta raden. */
    margin-inline:-20px;
    padding:11px 20px 9px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  /* .field har min-width:230px, vilket spranger ett rutnat pa en telefon. */
  .exercise-toolbar .field{min-width:0}
  .exercise-toolbar #exercise-search{grid-column:1/-1}
  .exercise-toolbar .field{padding:10px 12px;font-size:14px}
  .exercise-toolbar select.field{background-position:right 11px center}
  /* Traffraknaren ar aterkoppling, inte ett falt: med ram och vit botten tog
     den en tredjedel av den fasta radens hojd. */
  .exercise-toolbar>div.field{
    grid-column:1/-1;
    border:0;background:none;padding:1px 0 0;
    font-size:12.5px;font-weight:650;color:var(--ink-600);
  }
  .exercise-toolbar>div.field strong{color:var(--ink-900)}
}

@media(max-width:680px){
  /* .nav ar 66px har, och .wrap lamnar 12px. */
  .exercise-toolbar{top:65px;margin-inline:-12px;padding-inline:12px}
}

/* Utan JS finns ingen anledning att lasa fast en rad som inte kan filtrera.
   frog.js satter motion-ready pa <html> sa fort skriptet kor. */
html:not(.motion-ready) .exercise-toolbar{position:static}

@media(max-width:1080px){
  .ex-layout{grid-template-columns:1fr;gap:30px}
  .ex-side{position:static;max-width:720px}
  .ex-main{max-width:none}
}

@media(max-width:680px){
  .home-exercises,.editorial-grid{grid-template-columns:1fr}
  .phone,.phone-shot{border-radius:38px;padding:8px}
  .phone img,.phone-shot img{border-radius:31px}
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready .phone,html.motion-ready .phone-shot,
  html.motion-ready .portal-shot,html.motion-ready .pt-visual,
  html.motion-ready .connected-visual .portal-crop{transform:none!important}
  html.motion-ready [data-stagger]>*{opacity:1!important;transform:none!important}
}

/* ---- Undermenyn ---------------------------------------------------------
   Den gamla var en vit ruta som bara gick att klicka fram: den satt en bit
   vid sidan av ordet man klickade pa, hade ingen forbindelse upp till menyn
   och innehollet var tre nakna lankar. Den har oppnar pa hover, pekar pa sin
   egen rubrik med en spets, och varje rad sager vad den leder till.

   <details> behalls som stomme, sa menyn fungerar med klick aven utan JS.
   frog.js lagger till hover, Escape och klick utanfor. */
.nav-dropdown>summary{display:inline-flex;align-items:center;gap:6px;position:relative}
.nav-dropdown>summary::after{
  content:"";width:9px;height:9px;margin:0 0 2px 0;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;border-radius:0 0 2px 0;opacity:.5;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .22s ease;
}
.nav-dropdown[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px);opacity:.9}
.nav-dropdown[open]>summary{color:var(--green-600)}
/* Samma roda understreck som de vanliga menyvalen far pa hover. */
.nav-dropdown>summary::before{
  content:"";position:absolute;left:0;right:15px;bottom:2px;height:2px;
  background:var(--red-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.nav-dropdown:hover>summary::before,.nav-dropdown[open]>summary::before,
.nav-dropdown>summary.active::before{transform:scaleX(1)}
/* Star man pa en sida inne i undermenyn ska rubriken visa det, precis som de
   vanliga menyvalen gor. */
.nav-dropdown>summary.active{color:var(--green-600)}
.nav-dropdown-menu a.active{background:var(--surface-mint);color:var(--green-900)}
.nav-dropdown-menu a.active small{color:var(--green-700)}
.nav-dropdown-menu a.active::after{opacity:1}

/* Osynlig brygga over glappet mellan menyraden och panelen, annars stangs
   menyn i det ogonblick musen lamnar ordet och ar pa vag ner. */
.nav-dropdown[open]::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

.nav-dropdown-menu{
  top:calc(100% + 12px);left:-18px;min-width:318px;padding:9px;
  border-radius:16px;border-color:#e4ebe7;
  box-shadow:0 22px 48px -18px rgba(14,45,34,.28),0 2px 8px rgba(14,45,34,.06);
  animation:navmenu .2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes navmenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Spetsen som binder ihop panelen med rubriken den hor till. */
.nav-dropdown-menu::before{
  content:"";position:absolute;top:-6px;left:30px;width:12px;height:12px;
  background:var(--surface);border-left:1px solid #e4ebe7;border-top:1px solid #e4ebe7;
  transform:rotate(45deg);border-radius:3px 0 0 0;
}
.nav-dropdown-menu a{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
  padding:11px 13px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--ink-900);
  transition:background .16s ease,color .16s ease;
}
.nav-dropdown-menu a small{
  grid-column:1;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink-600);
}
.nav-dropdown-menu a::after{
  content:"";grid-column:2;grid-row:1/span 2;width:7px;height:7px;
  border-right:2px solid var(--green-600);border-top:2px solid var(--green-600);
  transform:rotate(45deg);opacity:0;transition:opacity .16s ease,transform .16s ease;
}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:var(--surface-mint);color:var(--green-900)}
.nav-dropdown-menu a:hover::after,.nav-dropdown-menu a:focus-visible::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
.nav-dropdown-menu a:hover small{color:var(--green-700)}

@media(max-width:860px){
  .nav-dropdown[open]::after{display:none}
  .nav-dropdown-menu{min-width:0;animation:none;border-radius:12px;box-shadow:none;padding:2px}
  .nav-dropdown-menu::before{display:none}
  .nav-dropdown>summary::before{display:none}
}

/* ---- Kalorikalkylatorn --------------------------------------------------
   Formularet till vanster, resultatet klistrat till hoger: andrar man ett
   falt ska man se talet rora sig utan att scrolla. Under 1000px gar det till
   en kolumn och resultatet hamnar overst, dar det ar det man kom for. */
.calc-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:34px;align-items:start}
.calc-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.calc-block{border:0;padding:0;margin:0 0 26px}
.calc-block+.calc-block{border-top:1px solid var(--border);padding-top:22px}
.calc-legend{padding:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);margin-bottom:14px}
.calc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px}
.calc-field{position:relative;display:flex;flex-direction:column;gap:6px}
/* display:flex slar [hidden] pa lika specificitet, sa det doljda enhetsfaltet
   syntes anda och sidan visade tva langdfalt. */
.calc-field[hidden]{display:none}
.calc-field-full{margin-top:14px}
.calc-label{font-size:13.5px;font-weight:750;color:var(--ink-700)}
.calc-optional{font-weight:600;color:var(--ink-600);font-size:12px}
/* .field i site.css har min-width:230px, vilket spranger varje rutnat har. */
.calc-panel .field{min-width:0;width:100%;padding:11px 13px;font-size:15px;font-weight:650}
.calc-panel input.field{padding-right:46px}
.calc-unit{position:absolute;right:13px;bottom:12px;font-size:12.5px;font-weight:750;color:var(--ink-600);pointer-events:none}
.calc-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.calc-split .calc-unit{position:static;align-self:center;margin-left:-38px;width:0}
.calc-split input.field{padding-right:34px}
.calc-hint{font-size:12.5px;line-height:1.5;color:var(--ink-600);margin:10px 0 0}
.calc-panel select.field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6B7C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}

.calc-seg{display:inline-flex;padding:3px;gap:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);margin-bottom:12px}
.calc-seg-wide{display:grid;grid-template-columns:1fr 1fr;width:100%}
.calc-seg input{position:absolute;opacity:0;width:1px;height:1px}
.calc-seg label{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:750;color:var(--ink-600);cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.calc-seg label:hover{color:var(--ink-900)}
.calc-seg input:checked+label{background:#fff;color:var(--green-900);box-shadow:0 1px 3px rgba(14,45,34,.14)}
.calc-seg input:focus-visible+label{outline:3px solid var(--red-500);outline-offset:2px}

.calc-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:700;color:var(--ink-700);margin-top:16px;cursor:pointer}
.calc-check input{width:19px;height:19px;margin:0;accent-color:var(--green-600);flex:none}
.calc-advanced{border-top:1px solid var(--border);padding-top:16px}
.calc-advanced>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;color:var(--green-600);display:inline-flex;align-items:center;gap:7px}
.calc-advanced>summary::-webkit-details-marker{display:none}
.calc-advanced>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.calc-advanced[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.calc-advanced-body{padding-top:6px}
#calc-reset{margin-top:20px}

/* ---- Resultatpanelen ---------------------------------------------------- */
.calc-out{position:sticky;top:96px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#fbfdfc);padding:26px;box-shadow:var(--shadow-md)}
.calc-outtop{padding-bottom:18px;border-bottom:1px solid var(--border)}
.calc-big{margin:8px 0 4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.calc-big strong{font-size:clamp(44px,5vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--green-900)}
.calc-big span{font-size:15px;font-weight:750;color:var(--ink-600)}
.calc-goalline{margin:0;font-size:14px;font-weight:750;color:var(--red-500)}

.calc-bar{display:flex;height:11px;border-radius:999px;overflow:hidden;margin:20px 0 14px;background:var(--surface-soft)}
.calc-bar span{height:100%;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.calc-seg-bmr{background:var(--green-900)}
.calc-seg-neat{background:var(--green-600)}
.calc-seg-eat{background:var(--red-500)}
.calc-seg-tef{background:#9ec7b1}
.calc-key{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;font-size:12.5px;color:var(--ink-600);font-weight:650}
.calc-key li{display:flex;align-items:center;gap:7px}
.calc-key i{width:10px;height:10px;border-radius:3px;flex:none}
.calc-key b{margin-left:auto;color:var(--ink-900);font-variant-numeric:tabular-nums}

.calc-stats{margin:0;display:flex;flex-direction:column}
.calc-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0}
.calc-stats>div+div{border-top:1px solid var(--border)}
.calc-stats dt{font-size:13.5px;color:var(--ink-600);font-weight:700}
.calc-stats dt small{display:block;font-size:11.5px;font-weight:600;color:#8c98a6;margin-top:1px}
.calc-stats dd{margin:0;font-size:15px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-stats dd small{font-weight:650;color:var(--ink-600);font-size:12.5px}
.calc-stats-tight>div{padding:8px 0}

.calc-macrohead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 12px}
.calc-macrohead h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.calc-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.calc-macro{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:13px 12px;display:flex;flex-direction:column;gap:2px}
.calc-macro-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green-600)}
.calc-macro strong{font-size:21px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-macro-sub{font-size:11.5px;color:var(--ink-600);font-weight:650;line-height:1.35}

.calc-flags{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.calc-flag{margin:0;padding:12px 14px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;border-left:3px solid}
.calc-flag-bad{background:var(--red-100);border-color:var(--red-500);color:#6b2d1a}
.calc-flag-warn{background:#FFF8ED;border-color:#D98324;color:#6a4715}
.calc-flag-info{background:var(--surface-mint);border-color:var(--green-600);color:var(--green-900)}
.calc-cta{width:100%;margin-top:18px}
.calc-note{font-size:12px;color:var(--ink-600);margin:12px 0 0;text-align:center}

/* ---- Metod, formler och referenser -------------------------------------- */
.calc-formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.calc-formulas .info-card h3{font-size:19px;margin:0 0 10px}
.calc-formulas .info-card p{font-size:14.5px;line-height:1.55}
.calc-eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px !important;line-height:1.7 !important;
  background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;margin:0 0 12px;color:var(--ink-900) !important;overflow-x:auto}
.calc-refs{margin:22px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-700);line-height:1.55}
.calc-refs li{padding-left:4px}
.calc-refs a{font-weight:750;color:var(--green-600)}
.calc-refs a:hover{color:var(--red-500)}
.calc-refs em{color:var(--ink-900)}

@media(max-width:1000px){
  .calc-grid{grid-template-columns:1fr;gap:24px}
  /* I en kolumn ligger formularet forst: talet i resultatrutan ar bara
     standardvarden tills nagon fyllt i sina egna, och da ar det vilseledande
     som det forsta man moter. */
  .calc-out{position:static}
  .calc-formulas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .calc-panel{padding:20px 18px 18px}
  .calc-out{padding:20px 18px}
  .calc-formulas{grid-template-columns:1fr}
  .calc-macros{grid-template-columns:1fr}
  .calc-macro{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
  .calc-macro-label{width:100%}
  .calc-key{grid-template-columns:1fr}
}

/* ---- Undermenyn: bred panel (forslag B) ---------------------------------
   Utforska samlar traning, verktyg och nyheter i en panel med tva kolumner
   och en ruta som visar hur stort ovningsbiblioteket faktiskt ar. Skalet ar
   utrymme: menyraden blir fyra ord, alltsa kort nog att tala svenska utan att
   brytas, och panelen har plats for nasta verktyg utan att raden vaxer.

   Siffran i rutan kommer ur Firestore vid bygget, inte ur en konstant som
   nagon glommer att uppdatera. */
.nav-dropdown-menu.wide{
  left:-18px;min-width:722px;padding:20px;
  display:grid;grid-template-columns:1fr 1fr 244px;gap:22px;
}
/* Osynlig remsa over hela panelens bredd. Utan den stangs menyn sa fort musen
   lamnar sjalva ordet pa vag ner mot hogra kolumnen. */
.nav-dropdown-menu::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-col{display:flex;flex-direction:column;min-width:0}
.nav-col h4{
  margin:0 0 6px;padding:0 13px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-600);
}
.nav-dropdown-menu a.nav-promo{
  /* .nav-dropdown-menu a satter align-items:center, vilket i en flexkolumn
     centrerar texten i sidled. Rutan ska vara vansterstalld som resten. */
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  border-radius:12px;padding:18px;color:#fff;
  background:linear-gradient(150deg,var(--green-900),#0A4D39);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;
}
.nav-dropdown-menu a.nav-promo::after{content:none}
.nav-dropdown-menu a.nav-promo:hover{
  background:linear-gradient(150deg,var(--green-900),#0A4D39);
  transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(7,60,45,.8);
}
.nav-promo b{font-size:31px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.nav-promo span{font-size:12.5px;line-height:1.4;color:#c7ddd3;font-weight:500}
.nav-promo em{font-style:normal;font-size:12.5px;font-weight:800;color:#8fe0b4;margin-top:4px}

/* Support som tyst lank bredvid knapparna. Den ar en funktion, inte ett amne,
   och hor darfor inte hemma bland de andra rubrikerna. */
.nav-quiet{
  font-size:13.5px;font-weight:700;color:var(--ink-600);padding:10px 2px;
  white-space:nowrap;transition:color .18s ease;
}
.nav-quiet:hover{color:var(--green-600)}

/* Logga in och Ladda ner appen, men bara i mobilmenyn. De var bortdolda under
   860 px respektive 680 px, alltsa fanns ingen av dem pa en telefon. */
.nav-cta,.nav-mobile{display:none}
.navlinks>a.nav-cta::before{content:none}

/* Loggan var 58 px i en rad pa 74 px, alltsa 8 px luft. Det ar den trangseln
   som laser som rorig aven nar rubrikerna ar fa. */
.brand img{height:50px}
.header.scrolled .brand img{height:44px}

/* Mellan mobilbrytpunkten och en liten laptop far panelen inte plats bredvid
   sitt eget ord. Da spanner den i stallet hela raden. Headern har
   backdrop-filter och ar darmed containing block for fixed, sa matten raknas
   fran headern och inte fran fonstret. */
@media(min-width:861px) and (max-width:1140px){
  .nav-dropdown-menu.wide{
    position:fixed;left:20px;right:20px;top:78px;min-width:0;width:auto;
    grid-template-columns:1fr 1fr;
  }
  .header.scrolled .nav-dropdown-menu.wide{top:68px}
  .nav-dropdown-menu.wide::before{display:none}
  .nav-dropdown-menu a.nav-promo{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
  .nav-promo span{flex:1 1 260px}
}

@media(max-width:860px){
  /* Support flyttar fran knappraden in i menyn, i stallet for att forsvinna. */
  .nav-quiet{display:none}
  .nav-mobile{display:block}
  .nav-dropdown-menu.wide{min-width:0;grid-template-columns:1fr;padding:6px 8px 10px;gap:12px}
  .nav-col h4{padding:0 12px}
  .nav-dropdown-menu a.nav-promo{display:none}
  .nav-dropdown-menu::after{display:none}
  .nav-cta{
    display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:10px;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    font-size:14px;font-weight:800;color:var(--ink-900);
  }
  .nav-cta+.nav-cta{margin-top:8px}
  .nav-cta.primary{background:var(--green-600);border-color:var(--green-600);color:#fff}
}