/* JÄRN — en ljus hälsoapp i Revoluts klass: nästan vit grund, rent vita
   kort på hårstreck (inga skuggor), nästan svart text, EN accent, grönt
   bara där något är positivt (framsteg, klart, trend), blått för vatten,
   rött bara för varning. Inget gult eller orange någonsin (husets
   järnregel). TokenNAMNEN behålls från tidigare eror så komponentreglerna
   står kvar:
     --lyft   accenten (knappar, aktiv flik, ringen, kurvor)
     --lyftbg accentens tonade platta (piller, snabbknappar)
     --stal   accentens mörka syster (länkar, ordination, målstreck)
     --ok     positivt (protein, klart, gjord dag, trend)
     --framsteg mätvärden på väg mot ett mål: ringen, kcal-stapeln, kurvorna
     --bla    vatten
   --lyft-rgb och --framsteg-rgb är samma färger som "r,g,b" för rgba(). */

/* PALETTEN. Tre varianter, alla kompletta: A "bla", B "smaragd", C "mono".
   Den som gäller ligger i bara :root (tokens ska aldrig bara finnas i ett
   media- eller attributblock) och är just nu C. Byt genom att sätta
   data-palett="bla" eller "smaragd" på <html> i index.html — eller kopiera
   det blockets värden in i :root. */
:root{
  --grund:#f4f5f7; --panel:#ffffff; --panel2:#eef0f3; --lina:#e4e7ec;
  --text:#111318; --dov:#6b7280;
  --lyft:#111318; --lyft-rgb:17,19,24; --lyftbg:#ecedf0; --stal:#3b3f47;
  --ok:#12a15e; --okbg:#e3f5ec; --okram:#b7e4cc;
  --framsteg:#12a15e; --framsteg-rgb:18,161,94;
  --bla:#2278cf; --blabg:#e4f0fb;
  --fail:#d6453d; --failbg:#fdeceb;
  --skugga:none;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --sans:-apple-system,system-ui,sans-serif;
  /* ETT HÖRNREGISTER: kortet, det som ligger inne i kortet, knappen. */
  --r-kort:20px; --r-inre:12px; --r-pill:999px;
}
/* A. Revolut-blå accent. Grönt bara som positivt. Vattnet ett snäpp
   ljusare blått så det inte läser som ännu en accent. */
html[data-palett="bla"]{
  --grund:#f4f5f7; --panel:#ffffff; --panel2:#eef0f3; --lina:#e4e7ec;
  --text:#111318; --dov:#6b7280;
  --lyft:#0666eb; --lyft-rgb:6,102,235; --lyftbg:#e7f0fe; --stal:#0a4eb5;
  --ok:#12a15e; --okbg:#e3f5ec; --okram:#b7e4cc;
  --framsteg:#0666eb; --framsteg-rgb:6,102,235;
  --bla:#36a3f5; --blabg:#e6f3fe;
  --fail:#d6453d; --failbg:#fdeceb;
}
/* B. Djup smaragd. Samma släkt som förr men mörkare och dovare; det
   positiva är en ljusare grön så framsteg skiljer sig från knappen. */
html[data-palett="smaragd"]{
  --grund:#f4f5f4; --panel:#ffffff; --panel2:#eef1ef; --lina:#e3e7e4;
  --text:#0f1512; --dov:#6a7570;
  --lyft:#0e7c5b; --lyft-rgb:14,124,91; --lyftbg:#e3f2eb; --stal:#0a5a42;
  --ok:#17a362; --okbg:#e2f5ea; --okram:#b5dfcb;
  --framsteg:#0e7c5b; --framsteg-rgb:14,124,91;
  --bla:#2278cf; --blabg:#e4f0fb;
  --fail:#d6453d; --failbg:#fdeceb;
}
/* C. Monokrom. Nästan svart accent på det man GÖR (knappar, piller, aktiv
   flik); grönt på det som MÄTS mot ett mål (ringen, staplarna, kurvorna)
   och på allt positivt; blått för vatten. */
html[data-palett="mono"]{
  --grund:#f4f5f7; --panel:#ffffff; --panel2:#eef0f3; --lina:#e4e7ec;
  --text:#111318; --dov:#6b7280;
  --lyft:#111318; --lyft-rgb:17,19,24; --lyftbg:#ecedf0; --stal:#3b3f47;
  --ok:#12a15e; --okbg:#e3f5ec; --okram:#b7e4cc;
  --framsteg:#12a15e; --framsteg-rgb:18,161,94;
  --bla:#2278cf; --blabg:#e4f0fb;
  --fail:#d6453d; --failbg:#fdeceb;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
/* Ingen zoom: dubbeltryck på stegknapparna förstorade appen mitt i en
   inmatning. touch-action:manipulation dödar dubbeltryckszoomen i roten;
   viewporten stänger nypzoomen. Filips uttryckliga beslut för egna appen. */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
/* SKALAN. Allt låg ett snäpp för stort: brödtext 16, kortrubrik 17,
   hjältetal 58, knappar 54 — en presentation, inte en app i handen.
   Riktmärket är Revolut/Apple Fitness på en iPhone: brödtext 15,
   sekundärt 13, kortrubrik 16, hjältetal 46, knappar 48, kortpadding
   14–16, avstånd 10. Fälten är kvar på 16 px: under det zoomar iOS. */
body{background:var(--grund);color:var(--text);
  font:15px/1.45 var(--sans);
  /* INGEN TEXTMARKERING. Appen trycks och hålls in — långtryck på ett set,
     på en matrad, på en knapp. Utan den här regeln svarar iOS med att
     markera texten och visa förstoringsglaset, och det känns som att man
     råkat hamna i ett dokument mitt i ett pass. Fälten där man faktiskt
     skriver får tillbaka markeringen längre ner. */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
/* Det man skriver i ska förstås gå att markera och rätta. */
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;
  -webkit-touch-callout:default}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
input{font:inherit;font-size:16px;color:var(--text);background:var(--panel2);
  border:1px solid var(--lina);border-radius:var(--r-inre);padding:11px 12px;
  width:100%}
input:focus{outline:none;border-color:var(--stal)}
.lank{color:var(--stal);font-size:13px;font-weight:600;
  text-decoration:none;padding:4px}
.lank:active{opacity:.5}
.chip:active{transform:scale(.94)}
.flikar button:active{transform:scale(.92)}
.matrad:active{background:var(--panel2)}
.vikt:active{background:var(--lina)}
.lank,.chip,.flikar button,.matrad,.vikt{transition:transform .08s,
  background .12s,opacity .12s}
.dov{color:var(--dov);font-size:13px}
/* TOMMA LÄGEN. "Inget loggat i dag." stod som en grå rad högst upp i ett
   niohundra pixlar högt hål. Ett tomt läge ska säga vad man gör härnäst och
   se ut som en plats som väntar på innehåll — inte som en sida som inte
   laddat klart. Strecket är samma hårstreck som raderna under kommer att
   få, alltså står tomrummet i listans egen form. */
.tomt{border:1px dashed var(--lina);border-radius:var(--r-inre);
  padding:22px 16px;text-align:center;color:var(--dov);font-size:13.5px;
  line-height:1.5;margin-top:4px}
.tomt b{display:block;color:var(--text);font-weight:600;font-size:14.5px;
  margin-bottom:3px}
.mitt{text-align:center;margin-top:8px}
/* Ledtexterna: gesterna (håll kvar, tryck på raden) syns inte av sig
   själva — en rad i viloton berättar, utan att ropa. */
.ledtext{color:var(--dov);font-size:12px;line-height:1.45;margin:-4px 2px 12px}
#matlista+.ledtext{margin:10px 2px 0;text-align:center}

/* ---- skalet ---- */
/* TOPPEN ÄR ETT ÖGONBRYN, INTE EN LOGGA. Ordmärket JÄRN är borta (Filip):
   raden bär bara dagens datum i viloton, som Apple Fitness sätter datumet
   ovanför skärmens rubrik. Raden är fast överst i #app-kolumnen och tar
   safe-area-inset-top; vyerna under behöver därför ingen egen. */
.topp{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 2px;padding-top:calc(14px + env(safe-area-inset-top));
  max-width:560px;width:100%;margin:0 auto;min-height:44px}
.topp-profil{width:34px;height:34px;border-radius:50%;background:var(--panel);
  border:1px solid var(--lina);display:flex;align-items:center;
  justify-content:center;color:var(--text);margin-right:-4px}
.topp-profil svg{width:18px;height:18px;fill:currentColor}
/* MONO BARA PÅ TAL. Titeln, datumet, övningsnamnen, flikarna och rubrikerna
   låg alla i monospace, och en app där allt är mono läser som en terminal —
   inte som ett verktyg man vill hålla i. Mono är nu reserverat för det som
   ska gå att jämföra i kolumn: vikter, reps, kalorier, klockslag. Allt som
   är ett NAMN sätts i systemets egen sans, som är den enda font en
   iOS-app kan sätta utan att först ladda ner något. */
.topp h1{display:none}
/* Datumet är ett namn på en dag, inte ett mätvärde: sans, inte mono. */
.topp span{color:var(--text);font:600 14px/1.2 var(--sans);letter-spacing:-.01em}

/* Dagen byts med svep över kalorirutan på Hem (se .hjalte), inte med pilar. */
/* BAKÅT-LÄGET — LÅST OCH GRÅTT. Filips andra vända: ingen ruta som ropar.
   Dagen ser låst ut: toppen grå i stället för accent, innehållet en aning
   dämpat, ett litet lås vid datumet. Ändringar går fortfarande — men varje
   dagsbunden skrivning frågar först, med datumet i frågan (bekraftaArk).
   Allt som bara hör till NUET är fortfarande borta. */
.bakat .topp{background:color-mix(in srgb,var(--text) 6%,var(--grund))}
/* Inget filter, ingen opacitet: det läste som suddigt. Grått = färgval, inte dis. */
.bakat .kort{border-color:color-mix(in srgb,var(--text) 14%,var(--lina))}
.halsning.last h2{color:var(--dov)}
.halsning.last p{display:flex;align-items:center;gap:6px}
.lasikon{display:inline-block;width:10px;height:12px;position:relative;
  border:1.6px solid currentColor;border-radius:2px;margin-top:3px;
  box-sizing:border-box}
.lasikon::before{content:"";position:absolute;left:1px;right:1px;top:-7px;
  height:7px;border:1.6px solid currentColor;border-bottom:0;
  border-radius:5px 5px 0 0}
.bakat .coachteaser,.bakat .karaktar,.bakat .notiskort,.bakat .vagkort,
.bakat #fokus-oppna,.bakat #pass-starta{display:none}
/* Läsvyn av ett gammalt pass: samma kort, ingen tryckyta. */
.ovning.lasvy{opacity:.92}
.ovning.lasvy .vikt{background:var(--panel2);color:var(--dov)}
.ark.bekrafta h2{margin-bottom:6px}

/* Står man på en annan dag ska det inte gå att missa. */
.topp span.annan-dag{color:var(--dov)}
.topp span.annan-dag::before{content:"";display:inline-block;width:8px;height:10px;
  margin:0 7px 0 0;vertical-align:-1px;border:1.5px solid currentColor;border-radius:2px;
  box-sizing:border-box;position:relative;top:1px}

/* SVEPET (Filip 2026-09-18: "som Spotifys låtbyte — hålla och dra").
   De fem vyerna ligger i EN rad som är ett vågrätt snäppspår: fingret
   drar raden, iOS ger fjädring, fart och snäpp till närmaste vy när man
   släpper. Ingen egen gestkod — webbläsarens egen rullning är det som
   känns rätt, och den vet redan hur den skiljer lodrätt från vågrätt.
   Varje vy rullar lodrätt för sig och behåller sitt läge mellan byten.
   Dokumentet självt rullar aldrig: appen är en kolumn på exakt skärmens
   höjd — huvudet överst, spåret fyller resten, fliksraden ligger fast. */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;
  overflow:hidden}
.topp{flex:none}
.vyer{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.vyer::-webkit-scrollbar{display:none}
.vy{flex:0 0 100%;width:100%;min-height:0;overflow-y:auto;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:none;
  padding:6px max(16px,calc((100% - 560px)/2))
    calc(84px + env(safe-area-inset-bottom))}
.vy::-webkit-scrollbar{display:none}

.flikar{position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;
  padding:5px 10px calc(5px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);border-top:1px solid var(--lina)}
.flikar button{display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--dov);font-size:10.5px;font-weight:500;min-width:56px;
  min-height:44px;padding:3px 0;border-radius:var(--r-inre)}
.flikar svg{width:22px;height:22px;fill:currentColor}
.flikar button.vald{color:var(--lyft);font-weight:600}

/* ---- passet ---- */
.pass-topp{display:flex;justify-content:space-between;align-items:baseline;
  margin:6px 2px 12px}
/* Passets namn är ett NAMN och inte en avläsning — ur monon, in i sansen,
   och ett snäpp större: det är skärmens enda rubrik och får väga som en. */
/* SKÄRMRUBRIKEN är samma grad på alla flikar: Hem, Pass och Rutin bar tre
   olika (28/34/19) för samma sak. */
.pass-topp b{font:800 26px/1 var(--sans);letter-spacing:-.025em}
.pass-topp span{color:var(--dov);font-size:13px}
/* PÅGÅR skrek i versal mono. Nu en lugn bricka med en puls i — status ska
   märkas i ögonvrån, inte ropa. */
.pagar{color:var(--ok);font:600 12px var(--sans);
  background:var(--okbg);border:1px solid var(--okram);
  border-radius:var(--r-pill);padding:5px 11px 5px 9px;white-space:nowrap}
.pagar::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px;
  animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pagar::before{animation:none}}

/* KORTETS RYTM. Fjorton pixlar runt om och tio mellan korten gav samma
   avstånd mellan allt: miniatyr, namn, ordination och setrad låg som fyra
   likvärdiga saker i stället för som en rubrik med data under och en
   handling sist. Luften är nu graderad — tätt inom gruppen, glest mellan
   grupperna — och korten står längre isär än deras inre delar. */
.ovning{background:var(--panel);
  border:1px solid var(--lina);border-radius:var(--r-kort);padding:12px 14px 13px;
  margin-bottom:10px;transition:border-color .2s,background .2s}
.ovning-huvud{display:flex;gap:13px;align-items:flex-start}
.ovning.klar-hel{border-color:var(--okram)}
/* MINIATYRERNA ÄR VÄNDA IN I RUMMET.
   Bibliotekets bilder är streckteckningar: svarta linjer och en röd
   muskelmarkering på VIT botten. Lagda som de är blir de nio lysande vita
   rutor ner för en nästan svart skärm — ögat landar på rutan och inte på
   övningen, och appen läser som en mörk mall med stockbilder inklistrade.
   Det var det enskilt största felet i formspråket.

   invert(1) vänder luminansen: vit botten blir svart, svarta linjer blir
   vita. hue-rotate(180deg) tar tillbaka kulören som inverteringen kastade om,
   så muskelmarkeringen förblir RÖD och inte cyan. Kvar blir en vit
   linjeteckning på husets egen svärta — född i rummet i stället för pålagd.
   Ingen platta, ingen ram: teckningen ligger direkt mot kortet. */
/* I ljusa rummet behövs ingen invertering: bibliotekets teckningar ÄR
   svarta linjer på vitt och smälter rakt in i det vita kortet. */
.tumnagel{width:64px;height:64px;border-radius:var(--r-inre);object-fit:cover;
  background:#fff;flex:none;border:0}
.tumnagel.tom{background:var(--panel2)}
.tumnagel.liten{width:44px;height:44px;border-radius:10px}
.ovning-in{flex:1;min-width:0}
/* NAMNET KAPADES och det är ett fel, inte en layout: "Lutande hantelpress"
   blev "Lutande hant…" därför att knappen tog sin bredd först. Namnet bryter
   nu till två rader i stället, och knappen ligger i överkant så den står kvar
   på namnets första rad. Ingen övning i biblioteket har ett namn som behöver
   fler än två rader vid 390 px — mätt mot de längsta i grundrutinen. */
.ovning-topp{display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px}
.ovning-topp b{font-size:16px;font-weight:600;letter-spacing:-.012em;
  line-height:1.22;min-width:0}
.vikt{font:700 14px var(--mono);color:var(--text);white-space:nowrap;flex:none;
  background:var(--panel2);border:1px solid var(--lina);
  border-radius:var(--r-pill);padding:5px 10px;
  font-variant-numeric:tabular-nums}
/* SÄTT VIKT TOG NAMNETS PLATS. Knappen är bredare än vikten den ersätter,
   och eftersom namnet får det som blir över kapades "Lutande hantelpress"
   och "Triceps pushdown" till "Lutande han…" och "Triceps push…". Namnet är
   kortets viktigaste text och ska inte betala för en knapp. Ett plustecken
   säger samma sak på en fjärdedel av bredden. */
.vikt.saknas{color:var(--stal);background:var(--lyftbg);border-color:transparent;
  font-size:13px;padding:5px 12px}
.vikt.saknas::before{content:"+ ";opacity:.7}
/* Ordinationen är en mening med tal i, inte en avläsning: orden i sans,
   siffrorna tabulära så "3 set × 8 reps" står stilla mellan korten. */
.ordination{font:500 12.5px/1.4 var(--sans);color:var(--dov);margin:3px 0 0;
  font-variant-numeric:tabular-nums}
.ordination b{color:var(--stal);font-weight:700}
.ordination .spann{opacity:.75}
/* Förra gångens utfall. Samma tysta ton som rampen; bocken är den enda
   färgen, och den kommer bara när spannet faktiskt nåddes. */
.senast{font:500 12px/1.4 var(--sans);color:var(--dov);margin:4px 0 0;
  font-variant-numeric:tabular-nums}
.senast b{font-weight:700;color:var(--text)}
.senast.naddes{color:var(--ok)}
.senast.naddes b{color:var(--ok)}

/* Startknappen ligger SIST i listan, inte svävande. Filip 27/9: "jag gillar
   inte den som hoverar, bättre längst ner". Sticky-varianten provades och
   underkändes — man vill se hela passet innan man trycker igång. */

.ramp{font:500 12px var(--sans);color:var(--dov);margin:7px 0 0;
  border-left:2px solid var(--lina);padding-left:8px;
  font-variant-numeric:tabular-nums}
/* SETKNAPPARNA ÄR APPENS VIKTIGASTE TRYCKYTA — de trycks femton gånger per
   pass och ska kännas bäst av allt. De låg som tre likadana grå cirklar
   direkt under ordinationen, alltså som dekor. Nu: större yta, egen luft
   ovanför så raden läser som en handling och inte som en fortsättning på
   texten, och ett tydligt klart-läge. Nedtrycket är kort och djupt. */
/* Setraden ligger tvärs hela kortet och skiljs från ordinationen med ett
   hårstreck: allt ovanför är vad som gäller, allt nedanför är vad man gör. */
/* Måttet är räknat mot skärmen och inte mot känsla: varje pixel i kortet
   kostar en övning i vyn. 11/12 räcker för att strecket ska läsa som en skarv
   och håller tre hela kort plus nästa i bild på en 390×844-lur. */
.setrad{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:11px;
  border-top:1px solid var(--lina)}
.setknapp{width:48px;height:48px;border-radius:50%;background:var(--panel);
  border:1.5px solid var(--lina);font:600 15px var(--mono);color:var(--text);
  transition:transform .1s cubic-bezier(.2,.8,.2,1),background .18s,
             border-color .18s,color .18s}
.setknapp:active{transform:scale(.9)}
.setknapp.klar{background:var(--okbg);border-color:var(--okram);color:var(--ok)}

/* PILLER. Den stora knappen är appens enda helfärgade yta och ska läsa
   som en knapp på en meters håll: helrund, 54 px hög, ett snäpp mindre
   text än förut så den inte ropar. */
.stor-knapp{display:block;width:100%;min-height:48px;padding:13px 18px;
  border-radius:var(--r-pill);background:var(--lyft);color:#fff;
  font-weight:700;font-size:15.5px;letter-spacing:-.005em;
  margin-top:10px;transition:transform .08s,opacity .12s}
.stor-knapp:active{transform:scale(.98);opacity:.9}
.stor-knapp:disabled{opacity:.6}
@keyframes glid{from{transform:translateY(48px);opacity:.4}}
/* Ångra-knappen i ett ark. Dämpad röd, inte skrikig: den ska gå att hitta
   när man tryckt fel, inte locka till tryck när man inte har det. */
.stor-knapp.fara{background:transparent;color:var(--fail,#b3261e);
  border:1px solid var(--fail,#b3261e)}
.stor-knapp.lugn{background:var(--panel2);color:var(--text);
  border:1px solid var(--lina);box-shadow:none}
.resultat{margin-top:14px}
.resultat li{list-style:none;padding:8px 0;border-bottom:1px solid var(--lina);
  display:flex;justify-content:space-between;font:13.5px var(--sans);
  font-variant-numeric:tabular-nums}
.resultat li span:last-child{font-family:var(--mono);font-weight:600}
.dom-ok{color:var(--ok)} .dom-fail{color:var(--fail)}
.dom-still{color:var(--stal)} .dom-hoppat{color:var(--dov)}

/* ---- vilotimern ---- */
.vila{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(86px + env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--lina);border-radius:999px;padding:10px 18px;
  box-shadow:0 10px 28px rgba(0,0,0,.55)}
.vila{box-shadow:0 10px 28px rgba(17,19,24,.16)}
.vila b{font:700 22px/1 var(--mono);color:var(--text);min-width:2ch;
  text-align:right}
.vila span{color:var(--dov);font-size:13px}
.vila button{color:var(--dov);font-size:18px;padding:0 2px}

/* ---- tallriken ---- */
.mal{background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-kort);padding:16px 16px 14px;margin-bottom:10px}
.mal-rad{display:flex;justify-content:space-between;align-items:baseline;
  font:14px var(--sans)}
/* KVAR ÄR KORTETS ENDA STORA TAL. Enheten står bredvid i vilotonen så
   siffran får stå ensam — det är den man läser på en meters håll. */
.mal-tal{display:flex;align-items:baseline;gap:9px;min-width:0}
.mal-rad b{font:700 36px/1 var(--mono);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.mal-rad b.over{color:var(--fail)}
.mal-rad .enh{color:var(--dov);font-size:13.5px;font-weight:500}
/* Det ätna flyttar ner till en stödrad. Det är kontext, inte svar. */
.mal-under{color:var(--dov);font:12.5px var(--sans);margin:5px 0 10px;
  font-variant-numeric:tabular-nums}
.stapel{height:7px;border-radius:4px;background:var(--panel2);margin:9px 0 4px;
  overflow:hidden}
.stapel i{display:block;height:100%;background:var(--framsteg);border-radius:4px;
  transition:width .5s ease}
.stapel i.protein{background:var(--ok)}
.stapel i.over{background:var(--fail)}
.stapel-rubrik{display:flex;justify-content:space-between;
  font:500 12.5px var(--sans);color:var(--dov);margin-top:10px;
  font-variant-numeric:tabular-nums}
/* Makroraden: orden i sans, talen i mono — samma regel som överallt. */
.makro{display:flex;gap:16px;color:var(--dov);font:12.5px var(--sans);
  margin-top:10px}
.makro b{color:var(--text);font:600 12.5px var(--mono);
  font-variant-numeric:tabular-nums}
/* SKANNA-RADEN. Tre knappar i bredd blev tre jämnstora rutor, och den
   ovanligaste av dem ("Sök", som går ut på nätet och tar sekunder) stod
   mitt emellan de två man använder varje dag. Nu är raden två: Skanna för
   det nya, Skafferiet för det man redan ätit. Nätsökningen ligger som en
   länk under och som sista raden i skafferiets träfflista, alltså på den
   plats man är när huset inte kunde svara. */
.skanna{display:flex;gap:8px;margin-bottom:6px}
.skanna .stor-knapp{margin:0;padding:13px 12px;font-size:15px;
  white-space:nowrap;flex:1}
.sok-lank{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:44px;margin-bottom:6px;padding:4px}
/* RADEN ÄR ETT RUTNÄT OCH INTE EN FLEXRAD.
   Med flex flöt kcal-talet dit namnet slutade: korta namn gav en kolumn i
   mitten, långa sköt den åt höger, och den enda kolumn man faktiskt scannar
   efter stod aldrig i lod. Betygsbrickan låg dessutom före namnet, så rader
   utan betyg började längre till vänster än rader med — en ragged
   vänsterkant i en lista är ett fel, inte en stil.
   Nu: fast kolumn för brickan (reserverad även när den är tom), namnet får
   det som blir över, kcal högerställt i egen kolumn, kryss sist. Alla fyra
   står i lod hela listan igenom. */
.matrad{display:grid;grid-template-columns:22px minmax(0,1fr) auto 36px;
  align-items:start;gap:0 10px;padding:10px 0;
  border-bottom:1px solid var(--lina)}
.matrad-grad{padding-top:2px}
.matrad-namn b{font-weight:500;font-size:14.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.matrad small{color:var(--dov);display:block;font:12px var(--sans);
  margin-top:2px;font-variant-numeric:tabular-nums}
/* Talet högerställt i egen kolumn. Enheten stod under varje tal och blev tio
   "kcal" i rad under varandra — en upprepning av något kolumnen redan säger,
   och delrubriken ovanför har den dessutom. Tabulära siffror så 19 och 286
   ligger i lod. */
.matrad .kcal{font:600 16px/1 var(--mono);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:2px}
/* Krysset är destruktivt och ska inte väga lika mycket som innehållet —
   men tryckytan är 44 px hur litet tecknet än är. */
.bort{color:var(--dov);font-size:17px;opacity:.55;justify-self:end;
  width:44px;height:44px;margin:-10px -8px -10px -4px;display:flex;
  align-items:center;justify-content:center;border-radius:50%}
.bort:active{background:var(--panel2);opacity:1}
.betyg.mini{margin-right:0}

/* DAGENS FORM. ts finns per rad, alltså kostar grupperingen ingenting att
   räkna fram — och en platt tioradslista går inte att svara på "har jag
   loggat lunchen?" med. Tre block: morgon, dag, kväll. Rubriken bär delens
   summa, för det är den man jämför mellan dagar. */
/* Delrubrikerna i gemener som kortrubrikerna — spärrade versaler var
   loggens instrumentspråk och hör inte hemma i en matlista. */
.mat-del{margin-bottom:16px}
.mat-del h3{display:flex;justify-content:space-between;align-items:baseline;
  font:600 14.5px var(--sans);letter-spacing:-.01em;
  color:var(--text);padding-bottom:7px;border-bottom:1px solid var(--lina);
  margin-bottom:2px}
.mat-del h3 span{font:500 12.5px var(--mono);color:var(--dov);
  font-variant-numeric:tabular-nums}
.mat-del .matrad:last-child{border-bottom:0}

/* ---- skannern ---- */
/* Överst av allt: skannern kan öppnas ovanpå ett ark (tillskotten). */
.kamera-vy{position:fixed;inset:0;background:#000;z-index:70}
.kamera-vy video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.fonster{position:absolute;left:9%;right:9%;top:34%;height:24%;
  border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.62)}
.fonster .horn{position:absolute;width:26px;height:26px;
  border:3px solid #fff;transition:border-color .15s}
.fonster .h1{top:-2px;left:-2px;border-right:0;border-bottom:0;
  border-radius:14px 0 0 0}
.fonster .h2{top:-2px;right:-2px;border-left:0;border-bottom:0;
  border-radius:0 14px 0 0}
.fonster .h3{bottom:-2px;left:-2px;border-right:0;border-top:0;
  border-radius:0 0 0 14px}
.fonster .h4{bottom:-2px;right:-2px;border-left:0;border-top:0;
  border-radius:0 0 14px 0}
.fonster .linje{position:absolute;left:8%;right:8%;top:12%;height:2px;
  border-radius:1px;background:rgba(255,255,255,.85);
  box-shadow:0 0 12px rgba(255,255,255,.7);
  animation:svep 2.2s ease-in-out infinite}
@keyframes svep{0%,100%{top:12%}50%{top:86%}}
.fonster.traff .horn{border-color:var(--ok)}
.fonster.traff .linje{display:none}
.kamera-text{position:absolute;left:0;right:0;top:calc(34% + 24% + 22px);
  text-align:center;color:rgba(255,255,255,.85);font-size:15px;
  padding:0 28px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.kamera-knappar{position:absolute;left:0;right:0;
  bottom:calc(26px + env(safe-area-inset-bottom));display:flex;
  justify-content:center;gap:12px;padding:0 24px}
.kamera-knappar button{padding:14px 22px;border-radius:999px;
  background:rgba(28,31,36,.85);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-weight:600;font-size:15px}
.kamera-vy .stang{position:absolute;top:calc(14px + env(safe-area-inset-top));
  right:14px;background:rgba(28,31,36,.7);border-radius:50%;
  width:44px;height:44px;font-size:20px;color:#fff}

/* ---- arken ---- */
.ark{position:fixed;inset:auto 0 0 0;background:var(--panel);z-index:60;
  border-radius:24px 24px 0 0;animation:glid .28s cubic-bezier(.2,.8,.2,1);
  padding:12px 18px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--lina);max-height:84vh;overflow:auto;
  /* Den andra skuggan är en skärm: sidan bakom dämpas så arket läser som
     ett lager ovanpå appen och inte som ett kort som råkar ligga nederst. */
  box-shadow:0 -18px 48px rgba(17,19,24,.18),0 0 0 100vmax rgba(17,19,24,.36)}
.ark::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:var(--lina);margin:0 auto 14px}
.ark h2{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-bottom:2px}
.ark .marke{color:var(--dov);font-size:13px;margin-bottom:14px}
.ark.demo{text-align:center}
.ark.demo img{max-width:100%;border-radius:var(--r-inre);background:#e8eaee}
.mangd-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.chip{padding:9px 13px;border-radius:var(--r-pill);background:var(--panel2);
  border:1.5px solid var(--lina);font:600 13.5px var(--mono);color:var(--text);
  min-height:38px}
.chip.vald{border-color:var(--lyft);color:var(--stal);background:var(--lyftbg)}
.chip small{color:var(--dov);font-weight:400}
/* Arkets svar: talet man kontrollerar innan Logga. Låg som grå minitext i
   samma grad som etiketten ovanför — nu ett tal som väger, med makrona
   bredvid i vilotonen. Hårstrecket skiljer inmatningen från resultatet. */
.mangd-summa{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:14px 2px 16px;padding-top:13px;border-top:1px solid var(--lina)}
.mangd-summa b{font:700 25px/1 var(--mono);letter-spacing:-.02em;color:var(--text)}
.mangd-summa span{color:var(--dov);font:13px var(--mono)}
.mangd-summa i{flex:1 0 100%;font-style:normal;color:var(--dov);
  font:12.5px var(--mono);margin-top:2px}
.rad2{display:flex;gap:10px}
.rad2 label{flex:1;display:block;text-align:left;color:var(--dov);font-size:13px}
.rad2 input{margin-top:4px}
.sok-traff{padding:11px 0;border-bottom:1px solid var(--lina);width:100%;
  text-align:left;display:flex;align-items:center;gap:12px}
.sok-traff:active{background:var(--panel2)}
.sok-traff .betyg.mini{flex:none;margin:0}
.sok-traff>span{min-width:0}
.sok-traff small{color:var(--dov);display:block;font-size:12.5px;margin-top:1px}
.sok-traff{min-height:52px}
.sok-traff.bib img{width:46px;height:46px;border-radius:10px;object-fit:cover;
  background:#e8eaee;flex:none}
#bib-traffar{margin-top:10px;min-height:120px}

/* ---- formulärarket ---- */
.form-falt{display:flex;flex-direction:column;gap:14px;margin:10px 0 16px}
.form-falt label{color:var(--dov);font-size:13px;display:block}
/* Stegraden: −/+ i lyftets egna steg. Det vanligaste svaret på "vad blev
   det?" ligger ett skalsteg från förslaget — då ska svaret vara ett tryck,
   inte ett tangentbord. Fältet i mitten är kvar för de andra gångerna. */
.stegrad{display:flex;gap:10px;margin-top:5px}
.stegrad input{text-align:center;font:600 18px var(--mono);flex:1;min-width:0}
.stega{flex:none;width:50px;border-radius:var(--r-inre);background:var(--panel2);
  border:1px solid var(--lina);font:400 22px/1 var(--mono);color:var(--stal);
  transition:transform .08s}
.stega:active{transform:scale(.92);background:var(--lina)}

/* ---- matsöket ---- */
.ark.hog{min-height:62vh}
#mat-traffar{margin-top:12px;min-height:120px}
.sok-del{margin-bottom:14px}
.sok-del h3{font:600 13px var(--sans);color:var(--dov);padding-bottom:6px;
  border-bottom:1px solid var(--lina)}
.sok-del .dov{padding:10px 0}
.soker{animation:puls 1.2s ease-in-out infinite}

/* ---- rutinen ---- */
.rutin-dag{background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-kort);padding:14px 16px;margin-bottom:10px}
.rutin-topp{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:4px}
.rutin-topp h2{font:700 19px var(--sans);letter-spacing:-.02em}
.rutin-rad{display:flex;align-items:center;gap:11px;padding:8px 0;
  border-bottom:1px solid var(--lina)}
.rutin-rad .bort{margin:0 -8px 0 -4px}
.rutin-rad .lank{padding:10px 4px}
.rutin-rad:last-child{border-bottom:0}
.rutin-rad div{flex:1;min-width:0}
.rutin-rad b{font-size:14.5px;font-weight:600;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rutin-rad small{color:var(--dov);font:11.5px var(--mono)}

/* ---- betyg (Nutri-Score + NOVA) ---- */
.betygsrad{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.betyg{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;font:800 15px var(--mono);
  color:#101113}
.betyg.mini{width:20px;height:20px;border-radius:6px;font-size:11.5px;
  margin-right:7px;vertical-align:-4px}
.betyg.nA{background:#5aa963}.betyg.nB{background:#8fbc74}
.betyg.nC{background:#a8bdd0}.betyg.nD{background:#c08a72}
.betyg.nE{background:#d06a5a}
.nova-tagg{font:600 12px var(--mono);color:var(--dov);
  border:1px solid var(--lina);border-radius:999px;padding:5px 11px}
.nova-tagg.ultra{color:var(--fail);border-color:rgba(208,106,90,.4)}

/* ---- loggen: appens grammatik ---- */
/* Loggen talade ett annat språk än resten av appen: spärrade versaler i
   9,5 px, 5 px-hörn, löpnummer, prickade ledare — ett graverat instrument
   från den mörka eran, inklistrat i en ljus hälsoapp. Nu är loggen samma
   app som Hem: vita kort med 20 px-hörn, kortrubrik i 17 px gemener, ord i
   sans och tal i mono. Det som var etikett i versaler är nu en stödrad i
   13 px viloton. */
.gravyr{font:600 12.5px/1.4 var(--sans);color:var(--dov)}
.fotnot{font:12px/1.5 var(--sans);color:var(--dov);margin-top:8px}

/* ---- coachen & sjukgymnasten: utlåtandet ---- */
/* Samma kort som allt annat. Skylten är en kortrubrik med en pillknapp
   till höger; råden står som rader på hårstreck utan nummer — de är en
   lista, inte en ordningsföljd. */
.utlat{background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-kort);padding:14px 16px 12px;margin-bottom:10px}
.utlat-skylt{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:2px}
.utlat-namn{font:600 16px/1.25 var(--sans);letter-spacing:-.01em;
  color:var(--text)}
.utlat-skylt .lank,.utlat-skylt .pill{flex:none}
/* Pillknappen: den lilla handlingen i ett kortrubrik-hörn. */
.pill{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--lyftbg);color:var(--stal);font:600 12.5px var(--sans);
  white-space:nowrap;transition:transform .08s,opacity .12s}
.pill:active{transform:scale(.96)}
.pill:disabled{opacity:.6}
.pill.lugn{background:var(--panel2);color:var(--text)}
.utlat .tomt{margin-top:12px}
.utlat-meta{display:flex;align-items:center;justify-content:space-between;
  gap:10px;color:var(--dov);font-size:12.5px;line-height:1.4;
  font-variant-numeric:tabular-nums}
.utlat-meta b{color:var(--text);font-weight:600}
.utlat-meta .lank{padding:8px 0 8px 8px;flex:none}
.utlat-sum{font-size:15px;line-height:1.5;margin:12px 0 2px}
.utlat h4{font:600 12.5px/1.4 var(--sans);color:var(--stal);margin:18px 0 3px}
.utlat-lista{list-style:none;margin:0;padding:0}
.utlat-lista li{padding:9px 0;border-top:1px solid var(--lina);
  font-size:14px;line-height:1.5}
.utlat-lista li:first-child{border-top:0;padding-top:4px}
/* Klampade textblock: sjukgymnastens svar är en uppsats på fyra skärmar.
   Hopfällt visas första raderna, resten öppnas med ett tryck. */
.klamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.klamp.r3{-webkit-line-clamp:3}
.klamp.r5{-webkit-line-clamp:5}
/* Bytesraden: miniatyren till vänster, namn + skäl + knapp i textspalten.
   Knappen låg i högerkanten och tryckte ihop skälet till sju rader. */
.byte{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-top:1px solid var(--lina)}
h4+.byte,h4+.strukt{border-top:0;padding-top:4px}
.byte .tumnagel{width:44px;height:44px;border-radius:10px}
.byte-txt{flex:1;min-width:0}
.byte-txt b{display:block;font:600 14.5px/1.35 var(--sans)}
.byte-txt small{display:block;color:var(--dov);font-size:12.5px;
  line-height:1.45;margin-top:3px}
.byte-knapp{flex:none;min-height:34px;display:inline-flex;align-items:center;
  background:var(--lyftbg);border:0;border-radius:var(--r-pill);
  padding:0 15px;font:600 12.5px var(--sans);color:var(--stal);margin-top:8px}
.byte-knapp:disabled{opacity:.7}
.utlat-fot{margin-top:14px;padding-top:10px;border-top:1px solid var(--lina);
  font:12px/1.5 var(--sans);color:var(--dov)}

/* Riktningen + coachens dagsmål: Filip väljer vart, coachen räknar hur. */
.malforslag{border:1px solid var(--lina);background:var(--panel2);
  border-radius:var(--r-inre);padding:13px 14px;margin-top:6px}
.mf-rad{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mf-rad b{font:700 21px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--text)}
.mf-rad span{color:var(--dov);font-size:12px;margin-right:10px}
.malforslag small{display:block;color:var(--text);opacity:.75;
  font-size:12.5px;line-height:1.45;margin:8px 0 10px}
.malforslag .byte-knapp{background:var(--panel);width:100%;min-height:44px;
  justify-content:center}

/* AI-uppskattningens märkning — ärlighet i viloton, men synlig. */
.notis{color:var(--stal);font-size:12.5px;margin:-8px 0 12px}
.ai-tolk{border-bottom:0}

/* ---- närvaron ---- */
/* Tolv veckor i kolumn, veckodagar i rad. Varje dag är en rundad ruta:
   tom i panelgrått, pass i grönt, i dag med ram. Understrecken från förr
   läste som ett formulär. */
.narvaro{display:grid;grid-template-columns:16px repeat(12,1fr);gap:4px;
  margin-top:4px}
.nv-man{font:500 11px/14px var(--sans);color:var(--dov)}
.nv-vd{font:500 11px/14px var(--sans);color:var(--dov)}
.narvaro i{display:block;height:14px;border-radius:4px;background:var(--panel2)}
.narvaro i.aktiv{background:var(--ok)}
.narvaro i.framtid{background:transparent;
  box-shadow:inset 0 0 0 1px var(--lina)}
.narvaro i.idag{box-shadow:inset 0 0 0 2px var(--stal)}

/* ---- kostscore ---- */
.matare{display:flex;align-items:center;gap:16px}
.urtavla{width:92px;height:92px;flex:none}
.urtavla .rim{fill:none;stroke:#e1e7e0;stroke-width:1}
.urtavla .tick{stroke:#d5dcd3;stroke-width:1.6}
.urtavla .tick.lang{stroke:#c2ccc1;stroke-width:1.9}
.urtavla .tick.pa{stroke:var(--framsteg)}
.urtavla .tick.lang.pa{stroke:var(--framsteg)}
.urtavla-tal{fill:var(--text);font:700 27px var(--mono);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.matare-txt b{display:block;margin-top:6px;text-transform:capitalize;
  font:600 17px/1.25 var(--sans)}
.matare-txt .fotnot{display:block;margin-top:6px}
.sedel{margin-top:14px}
.sedel-rad{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:10px 0;border-top:1px solid var(--lina);
  font:14px/1.4 var(--sans);color:var(--dov)}
.sedel-rad u{display:none}
.sedel-rad b{font:600 15px/1 var(--mono);color:var(--text);
  font-variant-numeric:tabular-nums}
.mantab{margin-top:16px}
.mt-rad{display:grid;grid-template-columns:1fr 62px 46px;align-items:baseline;
  gap:8px;padding:9px 0;border-top:1px solid var(--lina)}
.mt-rad span{font:14px/1.3 var(--sans);text-transform:capitalize}
.mt-rad b{font:600 14px/1 var(--mono);text-align:right;
  font-variant-numeric:tabular-nums}
.mt-huvud{border-top:0;padding-bottom:0}
.mt-huvud span,.mt-huvud b{font:500 12.5px/1.4 var(--sans);color:var(--dov);
  text-transform:none}

.mf-satt{display:inline-block;margin-top:9px;
  font:600 12.5px/1 var(--sans);color:var(--ok)}
.strukt{padding:11px 0;border-top:1px solid var(--lina)}
.strukt b{display:block;font:600 14.5px/1.35 var(--sans)}
.strukt small{display:block;color:var(--dov);font-size:12.5px;
  line-height:1.45;margin-top:3px}
.strukt .mf-satt{margin-top:6px}
.strukt.stoppad b{color:var(--dov)}

/* ---- karaktären & spegeln ---- */
/* Rangen smids ur tonnaget. Kortet på Hem är ljust som allt annat;
   spegeln är mörk MED FLIT — ett ögonblick, inte ett tema. */
.karaktar{cursor:pointer}
.rang-rad{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:2px}
.rang{font:800 21px/1 var(--mono);letter-spacing:.13em}
.rang-nasta{font:500 12px/1.4 var(--sans);color:var(--dov);text-align:right;
  font-variant-numeric:tabular-nums}
.rangbana{height:8px;border-radius:99px;background:var(--panel2);
  margin:11px 0 12px;overflow:hidden}
.rangbana i{display:block;height:100%;border-radius:99px;
  background:var(--ok)}
.rang-text{font:600 14px/1.45 var(--sans)}

.spegel{position:fixed;inset:0;z-index:80;background:#0b110d;
  color:#f2f5f1;display:flex;align-items:center;justify-content:center;
  padding:28px;opacity:0;transition:opacity .25s;overflow-y:auto}
.spegel.pa{opacity:1}
.spegel-inre{max-width:420px;width:100%;transform:translateY(16px);
  transition:transform .3s ease}
.spegel.pa .spegel-inre{transform:none}
.spegel-etikett{font:600 10px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:#7d8f84}
.spegel h1{font:800 42px/1.05 var(--mono);letter-spacing:.09em;
  margin:12px 0 4px;color:#fff}
.spegel-nasta{font:600 12px/1.4 var(--sans);color:#7d8f84;
  margin:0 0 22px}
.spegel-rader{margin-top:18px}
.spegel-rader p{font:700 19px/1.4 var(--sans);margin:0 0 14px}
.spegel-rader p:nth-child(2){color:#57c68f}
.spegel-tal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  margin:26px 0;padding-top:18px;border-top:1px solid #1d2a22}
.spegel-tal b{display:block;font:700 22px/1 var(--mono);
  font-variant-numeric:tabular-nums}
.spegel-tal span{display:block;margin-top:6px;
  font:600 9px/1.45 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:#7d8f84}


/* ---- jag-kortet & widgets ---- */
/* Logg-sidan är ett jag-kort och sedan bara det man valt in. Diagrammen
   ritas av Chart.js i .diagram-behållaren — höjden MÅSTE sitta på
   föräldern, kanvasen fyller den. */
.jag-topp{display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start}
.jag-vikt{display:flex;align-items:baseline;gap:7px;margin-top:6px;
  flex-wrap:wrap}
.jag-vikt b{font:700 40px/1 var(--mono);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.jag-vikt span{font:600 13px/1 var(--sans);color:var(--dov)}
/* Trenden är en bricka: grön bakgrund, samma piller som status på Hem. */
.jag-vikt em{font:600 12px/1 var(--sans);font-style:normal;color:var(--ok);
  background:var(--okbg);border-radius:var(--r-pill);padding:5px 9px;
  margin-left:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.jag-spark{width:116px;height:54px;align-self:center;flex:none}
.jag-rad{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--lina)}
.jag-rad b{display:block;font:700 22px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.jag-rad span{display:block;margin-top:4px;font:500 12px/1.35 var(--sans);
  color:var(--dov)}
.diagram{position:relative;height:160px;margin-top:4px}
.wchips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 6px}
.wchips .chip{padding:6px 12px;font:600 12.5px var(--sans);min-height:34px}
.mer{display:block;margin:10px auto 0;min-height:44px}
#w-anpassa{margin-top:4px}
.w-rad{display:flex;justify-content:space-between;align-items:center;
  width:100%;padding:13px 2px;border-bottom:1px solid var(--lina);
  font-weight:600;text-align:left;min-height:52px}
.w-rad i{width:24px;height:24px;border-radius:50%;flex:none;
  border:1.5px solid var(--lina);background:var(--panel2)}
.w-rad.pa i{background:var(--ok);border-color:var(--ok)}
.w-rad.pa i::after{content:"";display:block;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
  margin:3px auto 0}

/* ---- rekordtavlan ---- */
/* Tyngsta setet per övning: namn med datumet under, vikt × reps i mono
   till höger. Rader på hårstreck, inga ledare. */
.pb-rad{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 0;border-top:1px solid var(--lina)}
.pb-rad:first-child{border-top:0;padding-top:4px}
.pb-rad u{display:none}
.pb-namn{font:600 14.5px/1.3 var(--sans);min-width:0}
.pb-namn time{display:block;font:12px/1.4 var(--sans);color:var(--dov);
  margin-top:1px}
.pb-rad b{font:700 15px/1 var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none}
.pb-rad b i{font-style:normal;font:500 12px var(--sans);color:var(--dov);
  margin:0 2px 0 3px}

/* ---- loggboken ---- */
/* Varje pass är en post: dag och datum, lyften som rader under. */
.lb-post{padding:12px 0 13px;border-top:1px solid var(--lina)}
.lb-post:first-child{border-top:0;padding-top:4px}
.lb-topp{display:flex;align-items:baseline;gap:10px}
.lb-nr{display:none}
.lb-topp b{font:600 14.5px/1.2 var(--sans)}
.lb-topp time{margin-left:auto;font:12.5px/1 var(--sans);color:var(--dov)}
.lb-lyft{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:7px 0 0;font:13.5px/1.3 var(--sans);color:var(--dov)}
.lb-lyft u{display:none}
.lb-lyft b{font:600 13.5px/1 var(--mono);color:var(--text);
  font-variant-numeric:tabular-nums}
.lb-lyft i{font-style:normal;font:500 11px var(--sans);color:var(--dov);
  margin-left:3px}

/* ---- lås ---- */
.las{max-width:400px;margin:0 auto;padding:14vh 24px 40px;text-align:center}
.las h1{font:700 26px/1 system-ui,sans-serif;letter-spacing:.3em;margin-bottom:14px}
.las p{color:var(--dov);margin-bottom:18px}
.las .fel{color:var(--fail);margin-top:10px;min-height:1.2em}
.pin-prickar{display:flex;justify-content:center;gap:18px;margin:26px 0 34px}
.pin-prickar i{width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--dov);transition:background .12s,border-color .12s}
.pin-prickar i.fylld{background:var(--stal);border-color:var(--stal)}
.pin-prickar.skakar{animation:skak .4s}
@keyframes skak{
  20%{transform:translateX(-9px)} 40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(4px)}}
.knappsats{display:grid;grid-template-columns:repeat(3,76px);gap:16px;
  justify-content:center}
.knappsats button{width:76px;height:76px;border-radius:50%;
  background:var(--panel);border:1px solid var(--lina);
  font:500 26px var(--mono);color:var(--text)}
.knappsats button:active{background:var(--panel2)}
.knappsats button[data-s="del"]{background:none;border:none;font-size:22px;
  color:var(--dov)}

/* ---- appens kortgrammatik + hem ---- */
/* Vita kort på ljus grund bärs av skuggan, inte av kanten. Kortrubriken
   är 17 px gemener på ALLA flikar — det är det enda rubrikregistret under
   skärmrubriken. */
.ovning,.mal,.rutin-dag,.kort,.utlat{box-shadow:var(--skugga)}
.kort{background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-kort);padding:14px 16px;margin-bottom:10px}
.kort-rubrik{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:8px;min-height:26px}
.kort-rubrik h3{font:600 16px/1.25 var(--sans);letter-spacing:-.012em}
.kort-rubrik .lank{padding:6px 0 6px 8px}
.kort-tal{font:700 16px var(--mono);font-variant-numeric:tabular-nums}
.kort-tal small{color:var(--dov);font:500 12px var(--sans)}
.kort-tal.bla{color:var(--bla)}
/* Statusbrickan: gemener. "PUSH" i spärrade versaler var det enda på Hem
   som ropade. */
.tagg{font:600 12px var(--sans);background:var(--panel2);
  border-radius:var(--r-pill);padding:4px 10px;color:var(--dov);
  white-space:nowrap}
.tagg.gron{background:var(--okbg);color:var(--ok)}

/* Hälsningen är en rad, inte en rubrik: hjältetalet under är sidans
   största sak och ska inte konkurrera med "God kväll". */
.halsning{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:4px 2px 14px}
.halsning h2{font:700 20px/1.2 var(--sans);letter-spacing:-.02em}
.halsning p{color:var(--dov);font-size:13px}

/* ---- hjälten på Hem ---- */
/* Saldot: kcal kvar som ett stort tal direkt på grunden, ringen som
   urtavla bredvid, proteinet som andra tal, resten i en metarad. */
/* Kalorirutan äger det vågräta svepet (dagbyte) — pan-y låter bara lodrät
   rullning nå webbläsaren, så flikkarusellen inte drar iväg på samma gest. */
.hjalte{padding:2px 4px 0}
/* DAGTOPPEN äger det vågräta svepet (dagbyte): hälsningen + kalorirutan.
   pan-y låter bara lodrät rullning nå webbläsaren, så flikkarusellen inte
   drar iväg på samma gest. */
.dagtopp{touch-action:pan-y}
/* HELA DAGEN GLIDER. Ett svep ska kännas som att man bläddrar en sida, inte
   som att en siffra byts. Bladet glider ut åt svepets håll och det nya in
   från motsatt håll. Kort och torrt — 180 ms — så det aldrig känns segt. */
.dagblad{transition:transform .18s ease-out,opacity .18s ease-out}
.dagblad.ut-vanster{transform:translateX(-44px);opacity:0}
.dagblad.ut-hoger{transform:translateX(44px);opacity:0}
.dagblad.in-vanster{transform:translateX(-44px);opacity:0;transition:none}
.dagblad.in-hoger{transform:translateX(44px);opacity:0;transition:none}
.svephint{margin:6px 0 0;text-align:center;font:500 11px/1 var(--sans);
  color:var(--dov);opacity:.55;letter-spacing:.02em}
.bakat .svephint{opacity:.8}
.jag-topp #logg-profil{display:inline-block;margin-top:6px}
.hjalte-rad{display:flex;align-items:center;justify-content:space-between;
  gap:16px}
.hjalte-tal{min-width:0}
.hjalte-tal b{display:block;font:800 46px/1 var(--mono);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.hjalte-tal b.over{color:var(--fail)}
.hjalte-tal span{display:block;margin-top:6px;font:600 15px/1.2 var(--sans)}
.hjalte-tal small{display:block;margin-top:2px;font:12.5px var(--sans);
  color:var(--dov);font-variant-numeric:tabular-nums}
.hjalte .hemring{width:78px;height:78px}
.hjalte .ring-spar,.hjalte .ring-varde{stroke-width:9}
.hjalte-prot{margin-top:16px}
.hjalte-meta{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:10px;
  font-size:12.5px;color:var(--dov)}
.hjalte-meta span{white-space:nowrap}
.hjalte-meta b{color:var(--text);font:600 12.5px var(--mono);
  font-variant-numeric:tabular-nums}
.hjalte-meta em{font:600 12px var(--sans);font-style:normal;color:var(--ok);
  margin-left:4px}

/* SNABBKNAPPARNA. Fyra runda knappar med etikett under, som Revoluts rad
   under saldot: de fyra saker man gör varje dag, ett tryck från start.
   Passet är den enda fyllda — dagens huvudsak. */
.snabb{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin:18px 0 18px}
.snabb button{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;font:600 11.5px/1.2 var(--sans);color:var(--text);
  text-align:center;min-width:0}
.snabb i{width:52px;height:52px;border-radius:50%;background:var(--panel);
  border:1px solid var(--lina);display:flex;align-items:center;
  justify-content:center;color:var(--text);transition:transform .08s,
  background .12s}
.snabb button:active i{transform:scale(.94);background:var(--panel2)}
.snabb svg{width:22px;height:22px;fill:currentColor}
.snabb .prim i{background:var(--lyft);border-color:var(--lyft);color:#fff}

/* Ringen är dagens svar: hur mycket kvar. Grönt tills målet, rött över. */
.ringkort{display:flex;align-items:center;gap:16px}
.hemring{width:132px;height:132px;flex:none;transform:rotate(-90deg)}
.hemring .ring-spar{fill:none;stroke:var(--panel2);stroke-width:10}
.hemring .ring-varde{fill:none;stroke:var(--framsteg);stroke-width:10;
  stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.hemring .ring-varde.over{stroke:var(--fail)}
.hemring text{transform:rotate(90deg);transform-origin:60px 60px}
.hemring .ring-stort{fill:var(--text);font:800 27px var(--mono);
  text-anchor:middle;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hemring .ring-litet{fill:var(--dov);font:600 10px var(--sans);
  text-anchor:middle}
.ringkort-sida{flex:1;min-width:0}
.minibar-rubrik{display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:0 8px;font-size:12.5px;color:var(--dov);margin-bottom:3px;font-weight:500}
.minibar-rubrik b{font:600 12.5px var(--mono);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
/* SE-storlek (320 px): ringen krymper så att spalten bredvid får plats
   för "122 / 138 g" på en rad i stället för att brytas mitt i talet. */
@media (max-width:359px){
  .ringkort{gap:12px}
  .hemring{width:110px;height:110px}
  .hemring .ring-stort{font-size:24px}
  .hjalte-tal b{font-size:40px}
  .hjalte .hemring{width:68px;height:68px}
  .snabb i{width:48px;height:48px}
  .snabb button{font-size:11px}
  .jag-vikt b{font-size:38px}
  .jag-spark{width:96px;height:52px}
  .jag-rad{gap:6px}
  .jag-rad b{font-size:22px}
  .jag-rad span{font-size:12px}
}
/* Två makron som var sitt obrytbart ord: bryter raden gör den det mellan
   dem, aldrig mitt i "77 g". */
.hem-makro{color:var(--dov);font-size:13px;margin-top:12px;line-height:1.6;
  display:flex;flex-wrap:wrap;gap:0 14px}
.hem-makro span{white-space:nowrap}
.hem-makro b{color:var(--text);font:600 13px var(--mono);
  font-variant-numeric:tabular-nums}
.ringkort-sida .lank{padding:10px 0 0;display:inline-block}

.passkort-ovn{color:var(--dov);font-size:13.5px;line-height:1.5;
  margin:-2px 0 4px}
/* Tryckbara kort (passet, coachen): hela ytan svarar, länken i botten är
   affordansen. */
.kort.tryck{cursor:pointer}
.kort.tryck:active{background:var(--panel2)}
.kort.tryck>.lank{display:inline-block;padding:4px 0 0}

.coachteaser p{font-size:14px;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:0}
.coachteaser:active{background:var(--panel2)}

/* ---- vattnet ---- */
/* Glasen delar på radens bredd i stället för att brytas till 11 + 1: ett
   ensamt glas på rad två läste som ett fel. */
.vattenkort .kort-rubrik{margin-bottom:8px}
.glasrad{display:flex;gap:4px;margin:2px 0 12px}
.glasrad svg{flex:1 1 0;min-width:0;max-width:22px;height:24px;fill:none}
.glasrad svg path{fill:var(--blabg);stroke:#bcd7f0;stroke-width:1.4}
.glasrad svg.full path{fill:var(--bla);stroke:var(--bla)}
.vatten-knappar{display:flex;gap:8px}
.vatten-knappar button{flex:1;background:var(--blabg);color:var(--bla);
  border-radius:var(--r-pill);min-height:44px;padding:10px 8px;
  font:600 14px var(--sans);transition:transform .08s}
.vatten-knappar button:active{transform:scale(.96)}
.vatten-knappar .angra{flex:0 0 52px;background:var(--panel2);
  color:var(--dov);font-size:18px}

/* ---- fokusläget ---- */
/* Skärmen ÄR övningen: stor teckning, namn, ordination, seten som stora
   tryckytor, vilan som skärmens enda stora tal när den räknar. */
.fokus{position:fixed;inset:0;z-index:45;background:var(--grund);
  display:flex;flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 20px
          calc(20px + env(safe-area-inset-bottom))}
.fokus-topp{display:flex;justify-content:space-between;align-items:center}
.fokus-stang{width:44px;height:44px;border-radius:50%;background:var(--panel);
  border:1px solid var(--lina);font-size:20px;color:var(--dov)}
.fokus-mitt{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:4px;min-height:0}
.fokus-bild{width:150px;height:150px;object-fit:cover;border-radius:var(--r-kort);
  background:#fff;border:1px solid var(--lina);margin-bottom:8px}
.fokus-namn{font:800 24px/1.15 var(--sans);letter-spacing:-.02em}
.fokus-ord{color:var(--dov);font-size:14.5px;margin-top:4px}
.fokus-ord b{color:var(--text);font:700 14.5px var(--mono)}
.fokus-mitt .ramp{border:0;padding:0;margin-top:8px}
.fokus-flytt{color:var(--stal);font-size:13px;line-height:1.5;
  margin-top:10px;max-width:260px}
.fokus-set{border:0;padding:0;margin-top:22px;justify-content:center;
  gap:14px}
.fokus-set .setknapp{width:60px;height:60px;font-size:18px;
  background:var(--panel)}
.fokus-set .setknapp.klar{background:var(--okbg)}
.fokus-fot{min-height:96px;display:flex;align-items:center;
  justify-content:center}
.fokus-vila{display:flex;align-items:baseline;gap:10px}
.fokus-vila b{font:800 52px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--text)}
.fokus-vila span{color:var(--dov);font-size:14px}
.fokus-vila .lank{margin-left:6px}
.fokus-nasta{color:var(--dov);font-size:14px}
.fokus-mitt .stor-knapp{max-width:320px;margin-top:18px}

/* ---- snabbvalen ---- */
.vanligt{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;
  margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vanligt::-webkit-scrollbar{display:none}
.vanligt-val{flex:none;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-inre);padding:9px 12px;max-width:160px;text-align:left}
.vanligt-val:active{background:var(--panel2)}
.vanligt-val .betyg.mini{margin:0 0 1px}
.vanligt-namn{font-size:13px;font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vanligt-val small{color:var(--dov);font:12px var(--sans);
  font-variant-numeric:tabular-nums}

/* ---- tillskotten: bocka av dagens, kortet delas mellan Hem och Mat ---- */
.tsk-rad{display:flex;align-items:center;gap:10px;width:100%;padding:9px 2px;
  min-height:46px;
  background:none;border:0;border-bottom:1px solid var(--lina);color:var(--text);
  font:inherit;text-align:left;cursor:pointer}
.tsk-rad:last-of-type{border-bottom:0}
.tsk-rad:active{background:var(--panel2)}
.tsk-bock{flex:0 0 24px;height:24px;border-radius:50%;
  border:2px solid var(--lina);display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;color:#fff;
  transition:background .12s,border-color .12s}
.tsk-rad.tagen .tsk-bock{background:var(--ok);border-color:var(--ok)}
.tsk-namn{flex:1;font-size:14px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsk-namn small{color:var(--dov);font-weight:500}
.tsk-rad.tagen .tsk-namn{color:var(--dov);font-weight:500}
.tsk-rad .tagg{flex:0 0 auto}
.tsk-tom{font-size:13px;color:var(--dov);margin:2px 0 6px;line-height:1.45}
.tillskottkort .tsk-hantera{display:block;margin-top:8px}
.tillskottkort .kort-tal.gron{color:var(--lyft)}
.tsk-hrad{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 2px;border-bottom:1px solid var(--lina);
  font-size:14px;font-weight:600}
.tsk-hrad small{color:var(--dov);font-weight:500}
.tsk-hrad em{font-style:normal;color:var(--dov);font-size:12px;
  margin-left:6px}
.tsk-bort{width:34px;height:34px;border-radius:50%;border:1px solid var(--lina);
  background:var(--panel2);color:var(--fail);font-size:18px;line-height:1;
  cursor:pointer}
.tsk-sjalv{display:block;margin:10px auto 2px}
.ark-notis{color:var(--dov);font-size:13px;line-height:1.5;margin:-8px 0 14px}
/* Notisvalen återanvänder tillskottsraden men PÅ ska läsa aktivt, inte
   överstruket som en tagen dos. */
.notisval.tagen .tsk-namn{color:var(--text);font-weight:600}
.notiskort .tsk-hantera{display:block;margin-top:4px}

/* ---- sjukgymnasten ---- */
textarea{font:inherit;font-size:16px;color:var(--text);background:var(--panel2);
  border:1px solid var(--lina);border-radius:var(--r-inre);padding:11px 12px;
  width:100%;resize:vertical;min-height:70px}
textarea:focus{outline:none;border-color:var(--stal)}
/* Frågan ligger EFTER senaste svaret: har man ett svar vill man läsa det,
   har man inget står formuläret ändå överst av sig självt. */
.fysio-fraga{margin-top:16px;padding-top:14px;border-top:1px solid var(--lina)}
.fysio-fraga .stor-knapp{margin-top:8px}
/* Flaggan är en varning, inte en uppsats: röd platta, fetstilt första
   raderna, resten öppnas med svaret. */
.fysio-flagga{background:var(--failbg);color:#8a2f1f;
  border-radius:var(--r-inre);padding:11px 13px;font-size:14px;
  line-height:1.45;margin:12px 0 0;font-weight:600}
.fysio-om{color:var(--dov);font-size:13px;line-height:1.45;margin:6px 0 0}
.fysio-ater{font-size:14.5px;line-height:1.5}
.fysio-tidigare{margin-top:12px;border-top:1px solid var(--lina);
  padding-top:10px}
.fysio-tidigare summary{color:var(--dov);font-size:13px;cursor:pointer;
  min-height:32px;display:flex;align-items:center}
.fysio-tidigare[open] summary{margin-bottom:8px}

/* ---------- veckan ----------
   Dagsstapeln säger om i dag är rätt. Veckokortet säger om VECKAN är rätt,
   vilket är det man faktiskt äter efter: en dag under och en över tar ut
   varandra. Strecket i stapeln är var stapeln ska stå när dagen är slut,
   alltså dagens egen dag inräknad: fyllningen vandrar mot strecket och ska
   nå det till kvällen.

   Kortet är medvetet TYSTARE än dagskortet. Två kort med var sitt stora
   "kcal kvar" tio centimeter isär läser som två svar på samma fråga, och
   veckans tal är dessutom det större av dem — då vinner fel tal. Saldot
   sätts i dagskortets näst största grad och resten står i brödstorlek. */
.vecka-kort { margin-top: 0; }
.vecka-topp { display: flex; justify-content: space-between; align-items: center; }
.vecka-dag { font-size: 13px; color: var(--dov); font-weight: 500; }
.vecka-tal { display: flex; align-items: baseline; gap: 7px; margin: 4px 0 2px; flex-wrap: wrap; }
.vecka-tal b { font: 700 22px/1 var(--mono); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
/* Ett minussaldo stod i vanlig textfärg: klassen fanns i märkningen men
   ingen regel bar den. Röd är samma röd som dagskortets överskott. */
.vecka-tal b.rod { color: var(--fail); }
.vecka-tal span { font-size: 13px; color: var(--dov); }
.vecka-plan { font-size: 13px; color: var(--dov); margin: 0 0 8px; }
.vecka-plan b { color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.vecka-stapel { position: relative; overflow: visible; }
/* Strecket kan hamna exakt vid fyllningens kant och läses då som stapelns
   ändknapp i stället för som ett mått. Den ljusa ramen skiljer dem åt. */
.vecka-stapel u {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--text); opacity: .5; border-radius: 1px;
  box-shadow: 0 0 0 1.5px var(--panel);
}
.vecka-fot {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 12.5px; color: var(--dov);
  font-variant-numeric: tabular-nums;
}
.vecka-not { margin-top: 6px; font-size: 12px; line-height: 1.4;
  color: var(--dov); opacity: .85; }

/* ---------- skafferiet ----------
   Raden hade kcal/100 g, och 330 g kvarg à 50 kcal är inte 50 kcal: varje
   rad krävde en huvudräkning för att bli ett svar. Nu står den mängd man
   senast tog och vad den mängden väger — samma tal som arket sedan öppnar
   med. Rutnätet är matlistans: bricka, namn, antal, allt i lod. */
.sokfalt { -webkit-appearance: none; appearance: none; margin: 2px 0 6px;
  font-size: 16px; }
.sokfalt::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Fast höjd i botten: utan den hoppade hela arket upp och ner för varje
   tangenttryckning, med Stäng-knappen vandrande under tummen. */
.skaff-lista { min-height: 240px; max-height: 52vh; overflow-y: auto;
  margin: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.skaff-lista .ark-notis { margin: 14px 2px; }
.skaff-rad {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center; gap: 0 10px; width: 100%; min-height: 52px;
  padding: 9px 2px; background: none; border: 0;
  border-bottom: 1px solid var(--lina);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.skaff-rad:last-of-type { border-bottom: 0; }
.skaff-rad:active { background: var(--panel2); }
.skaff-grad { display: flex; }
.skaff-namn { min-width: 0; }
.skaff-namn b { display: block; font-weight: 600; font-size: 15px;
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.skaff-namn small { display: block; color: var(--dov);
  font: 12.5px var(--sans); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.skaff-ggr {
  font-size: 11px; color: var(--dov); font-variant-numeric: tabular-nums;
  min-width: 26px; text-align: right;
}
/* Sista raden i träfflistan: samma fråga, ställd utanför huset. */
.skaff-vidare { display: block; width: 100%; min-height: 48px;
  margin-top: 10px; padding: 13px 14px; border-radius: var(--r-inre);
  background: var(--panel2); color: var(--stal); font-size: 14px;
  font-weight: 600; text-align: left; line-height: 1.35; }
.skaff-vidare:active { opacity: .6; }
/* Namnfält i formuläraket: stegraden är byggd för tal och centrerar dem i
   mono. Ett produktnamn ska stå vänsterställt i brödtext. */
.stegrad input[inputmode="text"] { text-align: left;
  font: 400 16px -apple-system, system-ui, sans-serif; }

/* Varifrån målen kommer. Tre lägen, tre toner: räknat ur egen data (grönt),
   startgissning (neutralt), saknar underlag (varning). Raden ska gå att
   sluta läsa när man vet — därför liten och dämpad, inte en banner. */
.mal-kalla { margin-top: 0; padding: 11px 14px; }
.mal-kalla b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.mal-kalla span { display: block; font-size: 12px; line-height: 1.45; color: var(--dov); }
.mal-kalla.adaptiv { border-left: 3px solid var(--lyft); }
.mal-kalla.formel { border-left: 3px solid var(--lina); }
.mal-kalla.saknas { border-left: 3px solid var(--fail); }
.mal-kalla.saknas b { color: var(--fail); }

/* ---- profilsidan: "det här är jag" ---- */
.sida{position:fixed;inset:0;z-index:55;background:var(--grund);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1);
  padding:0 0 calc(24px + env(safe-area-inset-bottom))}
.sida.pa{transform:none}
.sida-topp{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;
  padding:10px 10px 8px;padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(244,245,244,.92);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);font:600 15px/1 var(--sans)}
.sida-tillbaka{width:44px;height:44px;border-radius:50%;font-size:22px;
  display:flex;align-items:center;justify-content:center;color:var(--text)}
.sida-inre{padding:6px max(16px,calc((100% - 560px)/2)) 0}
.sida-inre .kort{margin-bottom:10px}
.rang-hero{text-align:center;padding:14px 8px 18px}
.rang-niva{display:inline-block;font:600 12px/1 var(--sans);color:var(--dov);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.rang-hero h1{font:800 34px/1 var(--mono);letter-spacing:.06em;margin:0 0 12px}
.rang-bana{height:8px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--lina);overflow:hidden;max-width:300px;margin:0 auto 8px}
.rang-bana i{display:block;height:100%;background:var(--ok);border-radius:4px;
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rang-hero p{color:var(--dov);font-size:13px;margin:0}
.rang-tal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 6px}
.rang-tal div{background:var(--panel);border:1px solid var(--lina);
  border-radius:var(--r-inre);padding:10px 4px}
.rang-tal b{display:block;font:700 20px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.rang-tal span{font:500 11px/1.2 var(--sans);color:var(--dov)}
.kropp-rad{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;margin:2px 0 8px}
.kropp-vikt b{font:700 34px/1 var(--mono);font-variant-numeric:tabular-nums}
.kropp-vikt b i{font:500 13px var(--sans);color:var(--dov);font-style:normal;margin-left:4px}
.kropp-vikt .tagg{margin-left:8px;vertical-align:middle}
.kropp-fakta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  font:500 13px/1.2 var(--sans);color:var(--dov);text-align:right}
.kropp-fakta b{color:var(--text);font:600 13px var(--mono)}
.pb-rad b em{font:500 12px var(--mono);color:var(--dov);font-style:normal;margin-left:8px}
.pb-rad b em.upp{color:var(--ok)}
.pb-rad b em.ner{color:var(--bla)}
.mal-rad{display:flex;align-items:baseline;gap:6px 8px;flex-wrap:wrap;margin-top:2px}
.mal-rad b{font:700 20px/1 var(--mono);font-variant-numeric:tabular-nums}
.mal-rad span{font:500 12px var(--sans);color:var(--dov);margin-right:8px}
.stege{margin-top:4px}
.stege-rad{display:grid;grid-template-columns:28px 1fr auto 20px;align-items:center;
  gap:8px;padding:9px 0;border-top:1px solid var(--lina);color:var(--dov)}
.stege-rad:first-child{border-top:0}
.stege-rad.tagen{color:var(--text)}
.stege-rad.nu .stege-namn{color:var(--lyft)}
.stege-niva{font:600 12px var(--mono);color:var(--dov)}
.stege-namn{font:700 13px var(--mono);letter-spacing:.05em}
.stege-krav{font:500 12px var(--mono);color:var(--dov)}
.stege-bock{font:700 14px var(--sans);color:var(--ok);text-align:right}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:12px 6px 10px;border-radius:var(--r-inre);border:1px solid var(--lina);
  background:var(--panel2)}
.badge-ikon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 15px var(--sans);background:var(--panel);
  border:1px solid var(--lina);color:var(--dov)}
.badge.tagen{background:var(--okbg);border-color:var(--okram)}
.badge.tagen .badge-ikon{background:var(--ok);border-color:var(--ok);color:#fff}
.badge b{font:600 12px/1.2 var(--sans)}
.badge small{font:500 11px/1.2 var(--sans);color:var(--dov)}
.badge.last b{color:var(--dov)}
@media (max-width:359px){.badge-grid{grid-template-columns:repeat(2,1fr)}
  .rang-hero h1{font-size:28px}.rang-tal b{font-size:17px}}

/* ---- rörelse bakom prefers-reduced-motion ---- */
/* Varje animation och övergång i appen, utan undantag. Nedtrycken på
   knapparna är svar på en gest och får vara kvar. */
@media (prefers-reduced-motion:reduce){
  .vy,.ark,.fonster .linje,.soker,.pin-prickar.skakar,.pagar::before{
    animation:none}
  .spegel,.spegel-inre,.stapel i,.hemring .ring-varde,.rangbana i,
  .tsk-bock,.pin-prickar i,.ovning,.sida,.rang-bana i{transition:none}
}

/* st-loggning: enhetsväxel bredvid mängdfältet, stegare för antal */
.mangd-rad{display:flex;gap:10px;align-items:flex-end}.mangd-rad label{flex:1}
.enhetsval{display:flex;border:1px solid var(--linje,rgba(255,255,255,.18));border-radius:var(--r-pill);overflow:hidden;flex:none}
.enhet{padding:10px 14px;border:0;background:none;color:inherit;font:inherit;opacity:.7}
.enhet.vald{background:var(--panel2);opacity:1;font-weight:600}
.antal-rad{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 10px}
.antal-rad[hidden]{display:none}
.stegare{width:52px;height:52px;border-radius:50%;border:1px solid var(--linje,rgba(255,255,255,.18));background:var(--panel2);color:inherit;font-size:26px;line-height:1}
.antal-tal{font-size:22px;min-width:110px;text-align:center}.antal-tal b{font-size:30px}.antal-tal small{display:block;font-size:13px;opacity:.7;margin-top:2px}

/* Veckan: betyget överst, målen som staplar under */
.veckokort .vbetyg{display:flex;gap:14px;align-items:flex-start;padding:10px 0 12px;border-bottom:1px solid var(--lina);margin-bottom:10px}
.vpoang{font-size:40px;line-height:1;font-variant-numeric:tabular-nums;min-width:64px}
.vbetyg.nojd .vpoang{color:var(--ok)}
.vdom-rubrik{font-size:12px;letter-spacing:.04em;opacity:.7;display:block;margin-bottom:4px}
.vbetyg p,.vdom{font-size:14px;line-height:1.5;margin:0}
.vmal{margin:8px 0}.vmal .stapel{margin:6px 0 0}.vmal.klart .stapel i{background:var(--ok)}
.vmal .stapel-rubrik span{font-size:14px}.vmal .stapel-rubrik b{font-variant-numeric:tabular-nums}
.hitta-val{display:flex;gap:14px;align-items:center;margin-top:6px}

/* Fyra veckor: kortet på Hem och arket */
.wrappedkort.ny{border-color:var(--framsteg)}
.wrapped{max-height:92vh;overflow-y:auto}
.wtopp{font:600 12px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.wrapped h3{font:600 14px/1.3 var(--sans);margin:18px 0 8px;opacity:.85}
.wrad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.wtal{background:var(--panel2);border-radius:10px;padding:12px 10px;display:grid;gap:2px}
.wtal b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}.wtal span{font-size:12px;opacity:.7}
.wtal small,.wl small{font-size:12px;opacity:.75}.upp{color:var(--ok)}.ner{color:var(--fail)}
.wl{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--lina)}
.wl b{font-variant-numeric:tabular-nums}.wl small{grid-column:1/-1}
.wrek{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);margin-left:6px}
.wstaplar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:150px;margin:8px 0 10px}
.wstapel{display:grid;grid-template-rows:1fr auto auto auto;height:100%;text-align:center;font-size:12px}
.wstapel i{display:block;align-self:end;background:var(--framsteg);border-radius:6px 6px 0 0;min-height:2px}
.wstapel b{font-size:13px;margin-top:4px}.wstapel span,.wstapel small{opacity:.7}
.wbetyg{display:flex;gap:10px}.wbetyg div{flex:1;background:var(--panel2);border-radius:10px;padding:10px;text-align:center}
.wbetyg b{display:block;font-size:24px;line-height:1}.wbetyg span{font-size:12px;opacity:.7}.wbetyg .nojd b{color:var(--ok)}
.signatur-rad{font:italic 500 13px/1 var(--sans);letter-spacing:.08em;opacity:.55;margin:-6px 0 22px}
.halsning .signatur-rad{margin:2px 0 0}
.veckosaldo{opacity:.7}
.kort.veckobudget{padding-bottom:6px}

/* Från coachen: rader som bockas, streak i toppen */
.crad{text-align:left;border:0;background:none;font:inherit;color:inherit;border-bottom:1px solid var(--lina)}
.crad-text{display:block;font-size:14px;line-height:1.4}.crad-text small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.crad.tagen .crad-text{opacity:.55;text-decoration:line-through}
.crad-streak{font-size:13px;color:var(--ok);margin:-2px 0 6px}

/* STÄMPELN. Rund, som en gammal bläckstämpel: tre ringar, texten runt
   kanten, namnet i mitten, lite skevt tryckt. Brusmasken äter kanterna så
   avtrycket ser tryckt ut, inte ritat. Inline-SVG så texten kan följa
   cirkeln; typsnitten ärvs från sidan. */
.stampel{display:block;width:112px;height:112px;margin:28px auto 10px;color:#3a3f47;opacity:.8;
  transform:rotate(-6deg);mix-blend-mode:multiply;overflow:visible;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.55'/></filter><rect width='100%25' height='100%25' fill='white' filter='url(%23n)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.55'/></filter><rect width='100%25' height='100%25' fill='white' filter='url(%23n)'/></svg>");
  -webkit-mask-size:112px 112px;mask-size:112px 112px}
.stampel-rand{font:700 10.5px var(--sans);letter-spacing:.2em;fill:currentColor}
.stampel-namn{font:800 30px var(--mono);letter-spacing:.2em;fill:currentColor}

/* Inloggningen */
.konto-form{text-align:left;margin-top:22px}
.konto-rubrik{font-weight:700;color:var(--text);font-size:18px;text-align:center}
.konto-etikett{display:block;font-size:13px;font-weight:600;color:var(--dov);margin:14px 0 6px}
.konto-form .stor-knapp{margin-top:6px}
.konto-byt{display:block;margin:16px auto 0}
.profil-ut{margin:28px 0 12px}

/* Onboarding */
.onboard{position:fixed;inset:0;z-index:50;background:var(--grund);overflow:auto}
.ob-inre{max-width:420px;margin:0 auto;padding:9vh 24px 40px}
.ob-inre h1{font-size:26px;font-weight:800;line-height:1.15;margin:18px 0 8px}
.ob-inre .dov{color:var(--dov);margin-bottom:18px}
.ob-prickar{display:flex;gap:6px}
.ob-prickar i{flex:1;height:4px;border-radius:2px;background:var(--lina)}
.ob-prickar i.pa{background:var(--lyft,#129a62)}
.ob-kropp{margin-bottom:6px}
.ob-val{display:grid;gap:10px}
.ob-alt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:15px 16px;
  border:1px solid var(--lina);border-radius:var(--r-inre,14px);background:var(--panel,#fff)}
.ob-alt b{font-size:16px}
.ob-alt span{font-size:13px;color:var(--dov)}
.ob-alt.vald{border-color:var(--lyft,#129a62);box-shadow:inset 0 0 0 1px var(--lyft,#129a62)}
.ob-inre .stor-knapp{margin-top:10px}
.ob-bak{display:block;margin:14px auto 0}
.ob-mal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 20px}
.ob-mal div{background:var(--panel,#fff);border-radius:var(--r-inre,14px);padding:16px 10px;text-align:center}
.ob-mal b{display:block;font-size:22px;font-weight:800}
.ob-mal span{font-size:13px;color:var(--dov)}
.fel{color:var(--fail,#b3261e);min-height:1.2em;margin:8px 0 0;font-size:14px}

.program-rad{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border-radius:var(--r-inre,14px);padding:14px 16px;margin-bottom:14px}
.program-rad small{display:block;font-size:12px}
.program-rad b{font-size:16px}
.program-alt{margin-bottom:8px}
.ob-program{display:flex;flex-direction:column;gap:2px;background:var(--panel);border-radius:var(--r-inre,14px);padding:14px 16px;margin-bottom:14px}
.ob-program small{font-size:12px}
.ob-program b{font-size:17px}
.ob-program span{font-size:13px;color:var(--dov)}

/* Löppass och bandets puls */
.kond-kort{padding:16px}
.kond-topp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.kond-topp b{font-size:17px}
.kond-om{margin:6px 0 10px;font-size:13px}
.kond-gjord{margin:8px 0;font-size:15px}
.kond-kort .stor-knapp{margin-top:8px}
.livepuls{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"tal enh" "tal status";column-gap:10px;align-items:end;
  background:var(--panel2);border-radius:var(--r-inre,14px);padding:12px 14px;margin:6px 0 4px;border-left:4px solid var(--lina)}
.lp-tal{grid-area:tal;font:800 40px/1 var(--mono,inherit);font-variant-numeric:tabular-nums}
.lp-enh{grid-area:enh;font-size:12px;color:var(--dov)}
.lp-status{grid-area:status;font-size:14px;font-weight:600}
.livepuls.i-zon{border-left-color:var(--lyft)}
.livepuls.over-zon{border-left-color:var(--fail)}
.livepuls.over-zon .lp-status{color:var(--fail)}
.livepuls.under-zon{border-left-color:var(--bla,#2f6fd6)}
/* Bandet: återhämtning, puls per set, passets belastning */
.band-kort{background:var(--panel);border-radius:var(--r-kort,20px);padding:16px 18px;margin:0 0 14px;border-left:5px solid var(--lina)}
.band-kort.lage-redo{border-left-color:var(--lyft)}
.band-kort.lage-lugnare{border-left-color:var(--bla)}
.band-kort.lage-vila{border-left-color:var(--fail)}
.band-topp small{display:block;font-size:12px;color:var(--dov);font-weight:600}
.band-topp b{font-size:19px;font-weight:800}
.band-tal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 8px}
.band-tal b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.band-tal span{font-size:12px;color:var(--dov)}
.band-kort p{font-size:14px;color:var(--dov);margin:4px 0 0}
.setpuls{font-size:12px;color:var(--dov);margin:6px 0 0}
.pass-puls{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin:12px 0}
.pass-puls div{background:var(--panel);border-radius:var(--r-inre,14px);padding:12px 8px;text-align:center}
.pass-puls b{display:block;font-size:20px;font-weight:800}
.pass-puls span{font-size:12px;color:var(--dov)}
.vila-puls{display:block;font-size:13px;font-weight:600;margin-top:2px}
.anpassning{background:var(--blabg,#eaf1fb);border-radius:var(--r-inre,14px);padding:12px 14px;margin:0 0 14px}
.anpassning.lage-vila{background:var(--failbg)}
.anpassning p{margin:0 0 4px;font-size:14px}