/* ==================================================================
   Hellstens Tid — utseende

   Prototypens CSS, oförändrad från och med paletten till och med
   brytpunkten för större skärmar. Utseendet är designbeslutat och
   genomgånget i sex iterationer — ändra ingenting här utan att fråga.

   Tillägg för fas 1 ligger sist under egen rubrik, så att det alltid
   går att se vad som är prototyp och vad som är nytt.

   VIKTIGT OM --sk: varje font-size skrivs calc(Npx * var(--sk,1)) MED
   fallback. En calc() med odefinierad variabel är ogiltig och fäller
   hela deklarationen tyst — det bet oss redan en gång i prototypen, då
   samtliga textstorlekar föll tillbaka på 16 px utan att något syntes
   gå sönder. tester/css.test.js vaktar numera att varje använd variabel
   också är deklarerad.
   ================================================================== */

/* ---------- Manrope ----------
   Egen kopia i stället för Google Fonts. Appen ska starta i en källare
   utan täckning, och en typsnittshämtning över nätet vid varje start är
   både en väntan och ett beroende vi inte behöver. Variabel vikt
   400–800, bara delmängderna latin och latin-ext — latin-ext bär de
   polska tecknen (ł ą ę ś ż ź ć ń), latin de svenska (å ä ö).
   Manrope är licensierat under SIL Open Font License 1.1. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==================================================================
   Palett. Mörkt är standard. Ljust läge använder profilens beige
   (#F4F1EB) med linjefärg #DED8CC. Guld är INTE läsbart som text mot
   beige — därför två guldvariabler: --accent för linjer och dekor,
   --accent-txt för text (mörkare i ljust läge, kontrast 5,4:1).

   Två färger är justerade mot prototypen efter mätning, eftersom de
   låg under kravet på 4,5:1:
     --rod i mörkt läge  #C77B6B → #D89485  (4,07 → 5,34:1 mot ytan)
     kassans fotrad      #8A847A → #6B655C  (3,71 → 5,77:1 mot vitt)
   Kontrasten mäts av tester/utseende.test.js. Ändra inte tillbaka.
   ================================================================== */
:root{
  --bg:#221F1F; --topp:#221F1F; --yta:#31302D; --yta2:#3A3835;
  --text:#F4F1EB; --dim:#A8A199; --linje:#474441;
  --accent:#BFB096; --accent-txt:#BFB096; --accent-svag:#A08F6F;
  --prim-bg:#BFB096; --prim-txt:#221F1F;
  --gron:#7FA37F; --rod:#D89485; --gul:#C9A96A;
  --skugga:none;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --sk:1;              /* textskala: 1 normal · 1.14 stor · 1.3 störst */
}
html[data-tema="ljus"]{
  --bg:#F4F1EB; --topp:#F4F1EB; --yta:#FFFFFF; --yta2:#EDE8DE;
  --text:#221F1F; --dim:#6B655C; --linje:#DED8CC;
  --accent:#8C7B5A; --accent-txt:#6F6042; --accent-svag:#8C7B5A;
  --prim-bg:#221F1F; --prim-txt:#F4F1EB;
  --gron:#456B45; --rod:#A8503C; --gul:#7E6018;
  --skugga:0 1px 2px rgba(34,31,31,.06);
}
html[data-text="stor"]{--sk:1.14}
html[data-text="storst"]{--sk:1.3}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:calc(17px * var(--sk,1));line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(80px + var(--safe-b));
  overscroll-behavior-y:contain;
}
button,select,input,textarea{font-family:var(--font);font-size:calc(17px * var(--sk,1));color:var(--text)}
button{cursor:pointer;border:none;background:none;color:inherit}
.nr{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Topp ---------- */
.topp{position:sticky;top:0;z-index:40;background:var(--topp);
  border-bottom:1px solid var(--linje);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px}
.topp-rad{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wordmark{font-size:calc(13px * var(--sk,1));letter-spacing:.22em;font-weight:700;color:var(--accent-txt);white-space:nowrap}
.wordmark span{color:var(--dim);font-weight:400}
.topp-hoger{display:flex;align-items:center;gap:6px}
.temaknapp{width:46px;height:44px;flex:0 0 auto;border-radius:9px;border:1px solid var(--linje);
  display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--sk,1));
  color:var(--accent-txt);font-weight:700}
#textknapp{font-size:calc(16px * var(--sk,1));letter-spacing:-.03em}
@media (max-width:430px){ .wordmark{display:none} }
.sprak{display:flex;border:1px solid var(--linje);border-radius:9px;overflow:hidden}
.sprak button{padding:9px 10px;font-size:calc(13.5px * var(--sk,1));font-weight:700;letter-spacing:.06em;color:var(--dim)}
.sprak button.pa{background:var(--prim-bg);color:var(--prim-txt)}
.persondropp{background:var(--yta);border:1px solid var(--linje);border-radius:9px;
  padding:9px 8px;font-size:calc(14.5px * var(--sk,1));font-weight:600;max-width:34vw}

/* ---------- Vyer ---------- */
.vy{display:none;padding:16px}
.vy.pa{display:block}

/* ---------- Datumnavigering ---------- */
.datumnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pil{width:48px;height:48px;border-radius:11px;background:var(--yta);border:1px solid var(--linje);
  display:flex;align-items:center;justify-content:center;font-size:calc(20px * var(--sk,1));color:var(--accent-txt)}
.datumtitel{text-align:center;flex:1;min-width:0}
.datumtitel .d1{font-size:calc(19px * var(--sk,1));font-weight:700;letter-spacing:-.01em}
.datumtitel .d2{font-size:calc(13.5px * var(--sk,1));color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.idagknapp{display:block;margin:0 auto 16px;font-size:calc(13.5px * var(--sk,1));color:var(--accent-txt);
  letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;min-height:40px}

/* ---------- Sektionsrubrik ---------- */
.sekt{font-size:calc(13px * var(--sk,1));letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--accent)}
.sekt:first-of-type{margin-top:0}

/* ---------- Pass ---------- */
.passlista{display:flex;flex-direction:column;gap:8px}
.pass{display:flex;align-items:stretch;background:var(--yta);border-radius:12px;
  overflow:hidden;min-height:64px;text-align:left;width:100%;
  border:1px solid var(--linje);box-shadow:var(--skugga)}
.pass:active{border-color:var(--accent)}
.pass .tid{flex:0 0 80px;background:var(--yta2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:8px 4px;font-variant-numeric:tabular-nums}
.pass .tid b{font-size:calc(16px * var(--sk,1));font-weight:700}
.pass .tid i{font-style:normal;font-size:calc(13px * var(--sk,1));color:var(--dim);margin:1px 0}
.pass .info{flex:1;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.pass .pnr{font-size:calc(16px * var(--sk,1));font-weight:700;letter-spacing:.03em;color:var(--accent-txt);font-variant-numeric:tabular-nums lining-nums}
.pass .kund{font-size:calc(14.5px * var(--sk,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pass .lang{font-size:calc(13.5px * var(--sk,1));color:var(--dim);margin-top:2px}
.pass.sekundar .pnr{color:var(--dim)}
.markplats{font-size:calc(13px * var(--sk,1));border:1px solid var(--linje);border-radius:5px;padding:1px 5px;color:var(--dim);margin-left:6px}

.tomt{border:1px dashed var(--linje);border-radius:12px;padding:22px 16px;text-align:center;
  color:var(--dim);font-size:calc(15px * var(--sk,1))}

/* ---------- Knappar ---------- */
.knapp{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;border-radius:12px;font-size:calc(16px * var(--sk,1));font-weight:700;
  background:var(--yta);border:1px solid var(--linje);color:var(--text);margin-top:8px}
.knapp.prim{background:var(--prim-bg);color:var(--prim-txt);border-color:var(--prim-bg)}
.knapp.tyst{background:none;color:var(--dim);min-height:48px;font-weight:600}
.knapp.fara{color:var(--rod);border-color:var(--rod);background:none}
.knapp.liten{min-height:44px;font-size:calc(14.5px * var(--sk,1))}
.knapprad{display:flex;gap:8px}
.knapprad .knapp{margin-top:8px}
.snabbrad{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{flex:1 1 auto;min-width:calc(50% - 4px);min-height:52px;border-radius:10px;
  background:var(--yta);border:1px solid var(--linje);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:6px 12px;text-align:left}
.chip b{font-size:calc(15px * var(--sk,1));font-weight:700;color:var(--accent-txt);letter-spacing:.03em;font-variant-numeric:tabular-nums lining-nums}
.chip span{font-size:calc(13px * var(--sk,1));color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------- Lunch ---------- */
.lunchbox{background:var(--yta);border:1px solid var(--linje);border-radius:12px;padding:14px;margin-top:8px;box-shadow:var(--skugga)}
.lunchrad{display:flex;align-items:center;gap:12px;min-height:48px}
.kryss{width:28px;height:28px;flex:0 0 28px;border-radius:7px;border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:calc(17px * var(--sk,1));font-weight:800;color:var(--prim-txt)}
.kryss.pa{background:var(--prim-bg);border-color:var(--prim-bg)}
.lunchrad label{flex:1;font-size:calc(16px * var(--sk,1))}
.minutval{display:flex;gap:6px;margin-top:12px}
.minutval button{flex:1;min-height:48px;border-radius:9px;background:var(--yta2);
  font-size:calc(15px * var(--sk,1));font-weight:700;color:var(--dim)}
.minutval button.pa{background:var(--prim-bg);color:var(--prim-txt)}
.lunchbox.av{opacity:.5}

/* ---------- Summering ---------- */
.summa{background:var(--yta);border-radius:12px;padding:16px;margin-top:8px;border:1px solid var(--linje);box-shadow:var(--skugga)}
.summa .stor{font-size:calc(34px * var(--sk,1));font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.summa .stor em{font-style:normal;font-size:calc(17px * var(--sk,1));font-weight:700;color:var(--dim);margin-left:4px}
.summa .brutto{font-size:calc(13.5px * var(--sk,1));color:var(--dim);margin-top:2px}
.summa .delrad{display:flex;justify-content:space-between;font-size:calc(14.5px * var(--sk,1));
  padding:8px 0;border-top:1px solid var(--linje);margin-top:10px}
.summa .delrad span:first-child{color:var(--accent-txt);font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.bil{font-size:calc(13.5px * var(--sk,1));color:var(--dim);margin-top:10px;padding-top:10px;border-top:1px solid var(--linje)}
.bil b{color:var(--text);font-weight:700}

/* ---------- Anteckning ---------- */
.antbox{background:var(--yta);border:1px solid var(--linje);border-radius:12px;padding:12px;margin-top:8px;box-shadow:var(--skugga)}
.antbox .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.antbox .hd b{font-size:calc(15px * var(--sk,1));color:var(--accent-txt);letter-spacing:.03em;font-variant-numeric:tabular-nums lining-nums}
.antbox .hd span{font-size:calc(13.5px * var(--sk,1));color:var(--dim)}
.momrad{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mom{border:1px solid var(--linje);border-radius:20px;padding:8px 12px;font-size:calc(14.5px * var(--sk,1));
  color:var(--dim);background:var(--yta2);min-height:44px;display:flex;align-items:center;gap:6px}
.mom .ml{font-size:calc(13.5px * var(--sk,1));font-weight:800;opacity:.9}
.mom.l1{border:2px solid var(--accent);color:var(--text);background:none;font-weight:600}
.mom.l2{background:var(--accent-txt);color:var(--bg);border-color:var(--accent-txt);font-weight:700}
.mom.l3{background:var(--prim-bg);color:var(--prim-txt);border-color:var(--prim-bg);font-weight:700}
.momlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:calc(13px * var(--sk,1));color:var(--dim);margin-bottom:10px}
.momlegend span{display:flex;align-items:center;gap:4px}
.momlegend b{font-weight:800;color:var(--accent-txt)}
.momgrupp{border:1px solid var(--linje);border-radius:11px;margin-bottom:8px;overflow:hidden;background:var(--yta)}
.momhd{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:48px;padding:8px 13px;text-align:left;font-size:calc(15px * var(--sk,1));font-weight:600;gap:8px}
.momhd .mc{font-size:calc(13px * var(--sk,1));color:var(--dim);font-weight:600;white-space:nowrap}
.momhd .mv{font-size:calc(13px * var(--sk,1));color:var(--accent-txt);font-weight:700}
.momkropp{padding:0 10px 10px;display:none}
.momkropp.pa{display:block}
.sumkort{background:var(--yta);border:1px solid var(--linje);border-radius:12px;
  padding:13px;margin-top:8px;box-shadow:var(--skugga)}
.sumkort .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sumkort .hd b{font-size:calc(16px * var(--sk,1));font-weight:700;color:var(--accent-txt);font-variant-numeric:tabular-nums lining-nums}
.sumkort .hd span{font-size:calc(13.5px * var(--sk,1));color:var(--dim);text-align:right}
.summom{font-size:calc(14.5px * var(--sk,1));margin-top:8px;line-height:1.55}
.summom i{font-style:normal;color:var(--accent-txt);font-weight:700}
.sumfri{font-size:calc(14.5px * var(--sk,1));color:var(--dim);margin-top:6px;line-height:1.5}
.sumtom{font-size:calc(14.5px * var(--sk,1));color:var(--gul);margin-top:6px}
.sumandra{font-size:calc(13.5px * var(--sk,1));color:var(--accent-txt);padding:10px 0 2px;min-height:40px;text-align:left;font-weight:600}
textarea{width:100%;background:var(--bg);border:1px solid var(--linje);border-radius:9px;
  color:var(--text);padding:11px;min-height:84px;resize:vertical;line-height:1.45}
textarea::placeholder{color:var(--dim);opacity:.8}
.raknare{font-size:calc(13px * var(--sk,1));color:var(--dim);text-align:right;margin-top:4px}
.raknare.nara{color:var(--gul)}
.igarknapp{font-size:calc(13.5px * var(--sk,1));color:var(--accent-txt);padding:10px 0;text-align:left;min-height:40px}

/* ---------- ÄTA ---------- */
.ataknapp{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;margin-top:10px;
  border:1px dashed var(--accent);border-radius:10px;padding:8px 12px;
  font-size:calc(14.5px * var(--sk,1));font-weight:600;color:var(--accent-txt)}
.atapost{background:var(--yta2);border-left:3px solid var(--gul);border-radius:8px;
  padding:10px 12px;margin-top:8px;font-size:calc(14.5px * var(--sk,1));text-align:left;width:100%}
.atapost b{display:block;font-size:calc(14.5px * var(--sk,1));font-weight:700}
.atapost span{display:block;font-size:calc(13.5px * var(--sk,1));color:var(--dim);margin-top:2px}

/* ---------- Ledig ---------- */
.ledigbanner{background:var(--yta2);border-left:3px solid var(--accent);border-radius:10px;
  padding:16px;font-size:calc(18px * var(--sk,1));font-weight:700;margin-bottom:8px}
.ledigbanner span{display:block;font-size:calc(14.5px * var(--sk,1));font-weight:400;color:var(--dim);margin-top:3px}

/* ---------- Varning ---------- */
.varning{border:1px solid var(--rod);border-left-width:3px;
  border-radius:8px;padding:11px 13px;font-size:calc(14.5px * var(--sk,1));margin-top:10px;color:var(--rod)}
.notis{border:1px solid var(--gul);border-left-width:3px;border-radius:8px;
  padding:11px 13px;font-size:calc(14.5px * var(--sk,1));margin-top:10px;color:var(--gul)}

/* ---------- Kalender ---------- */
.lagevaljare{display:flex;border:1px solid var(--linje);border-radius:10px;overflow:hidden;margin-bottom:14px}
.lagevaljare button{flex:1;min-height:46px;font-size:calc(15px * var(--sk,1));font-weight:700;color:var(--dim)}
.lagevaljare button.pa{background:var(--prim-bg);color:var(--prim-txt)}
.veckodag{display:flex;align-items:center;gap:12px;background:var(--yta);border:1px solid var(--linje);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;width:100%;text-align:left;min-height:66px;box-shadow:var(--skugga)}
.prick{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.prick.gron{background:var(--gron)} .prick.rod{background:var(--rod)}
.prick.gra{background:var(--linje)} .prick.guld{background:var(--accent)}
.veckodag .vd{flex:0 0 46px}
.veckodag .vd b{display:block;font-size:calc(17px * var(--sk,1));font-weight:700}
.veckodag .vd i{font-style:normal;font-size:calc(13px * var(--sk,1));color:var(--dim);text-transform:uppercase}
.veckodag .vinfo{flex:1;min-width:0}
.veckodag .vinfo b{font-size:calc(15px * var(--sk,1));font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.veckodag .vinfo span{display:block;font-size:calc(13.5px * var(--sk,1));color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.veckodag .vh{font-size:calc(18px * var(--sk,1));font-weight:700;font-variant-numeric:tabular-nums}
.veckosumma{background:var(--yta);border-radius:12px;padding:16px;margin-top:14px;border:1px solid var(--linje)}
.veckosumma .rad{display:flex;justify-content:space-between;padding:6px 0;font-size:calc(15px * var(--sk,1))}
.veckosumma .rad.tot{border-top:1px solid var(--linje);margin-top:6px;padding-top:12px;font-weight:700;font-size:calc(17px * var(--sk,1))}
.utantext{color:var(--gul)}
.godkantmark{display:inline-flex;align-items:center;gap:5px;font-size:calc(13.5px * var(--sk,1));color:var(--gron);font-weight:600}

/* Månad */
.mangrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.manhd{font-size:calc(12.5px * var(--sk,1));text-transform:uppercase;letter-spacing:.08em;color:var(--dim);text-align:center;padding-bottom:4px}
.mancell{aspect-ratio:1/1;border-radius:9px;background:var(--yta);border:1px solid var(--linje);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;min-height:44px}
.mancell.tom{background:none;border-color:transparent}
.mancell.sondag{opacity:.4}
.mancell.idag{border-color:var(--accent);border-width:2px}
.mancell b{font-size:calc(14.5px * var(--sk,1));font-weight:600;font-variant-numeric:tabular-nums}
.mancell i{font-style:normal;font-size:calc(12.5px * var(--sk,1));color:var(--dim);font-variant-numeric:tabular-nums}
.mancell.arbetad{background:var(--yta2)}
.mancell.arbetad b{color:var(--accent-txt)}
.mancell.ledig i{color:var(--accent-txt)}
.mancell.saknas b{color:var(--rod)}
.manfot{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:calc(13px * var(--sk,1));color:var(--dim)}
.manfot span{display:flex;align-items:center;gap:5px}

/* ---------- Kassa ---------- */
.kassahd{text-align:center;margin-bottom:20px}
.kassahd b{font-size:calc(13.5px * var(--sk,1));letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.kassakort{background:var(--yta);border-radius:14px;padding:20px 18px;margin-bottom:12px;
  border:1px solid var(--linje);width:100%;text-align:center;display:block;box-shadow:var(--skugga)}
.kassakort:active{border-color:var(--accent)}
.kassanr{font-size:calc(46px * var(--sk,1));font-weight:800;letter-spacing:.06em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums lining-nums;line-height:1.05}
.kassakund{font-size:calc(18px * var(--sk,1));font-weight:600;margin-top:8px}
.kassaadr{font-size:calc(14.5px * var(--sk,1));color:var(--dim);margin-top:3px}
.kassakopia{font-size:calc(13px * var(--sk,1));color:var(--accent-txt);letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.kassafot{font-size:calc(13.5px * var(--sk,1));color:var(--dim);text-align:center;margin-top:24px;line-height:1.6}

/* Kassa fullskärm — alltid ljus, oavsett tema */
.kassafull{position:fixed;inset:0;z-index:300;background:#FFFFFF;color:#221F1F;
  display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.kassafull.pa{display:flex}
.kassafull .kfetikett{font-size:calc(26px * var(--sk,1));font-weight:700;color:#221F1F;
  margin-bottom:12px;text-align:center;line-height:1.2}
.kassafull .kfnr{font-size:clamp(60px,20vw,136px);font-weight:800;letter-spacing:.05em;
  font-variant-numeric:tabular-nums lining-nums;line-height:1;color:#221F1F}
.kassafull .kfkund{font-size:calc(22px * var(--sk,1));font-weight:700;margin-top:20px;text-align:center}
.kassafull .kfadr{font-size:calc(16px * var(--sk,1));color:#5B564E;margin-top:6px;text-align:center}
.kassafull .kffot{position:absolute;bottom:calc(28px + var(--safe-b));left:0;right:0;
  text-align:center;font-size:calc(13.5px * var(--sk,1));color:#6B655C;padding:0 24px}
.kassafull .kfstang{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;
  width:52px;height:52px;border-radius:50%;border:1px solid #DED8CC;display:flex;
  align-items:center;justify-content:center;font-size:calc(22px * var(--sk,1));color:#221F1F}
.kassafull .kfljus{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);left:20px;
  font-size:calc(13.5px * var(--sk,1));color:#6B655C;max-width:60%}

/* ---------- Kö ---------- */
.ko{display:flex;align-items:center;gap:10px;border:1px solid var(--gul);
  border-radius:10px;padding:11px 13px;font-size:calc(14.5px * var(--sk,1));color:var(--gul);margin-bottom:14px}
.ko .pt{width:8px;height:8px;border-radius:50%;background:var(--gul);flex:0 0 8px}

/* ---------- Botten ---------- */
.botten{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--topp);
  border-top:1px solid var(--linje);display:flex;padding-bottom:var(--safe-b)}
.botten button{flex:1;padding:11px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:calc(13px * var(--sk,1));letter-spacing:.05em;text-transform:uppercase;color:var(--dim);font-weight:700;min-height:56px}
.botten button.pa{color:var(--accent-txt)}
.botten .ik{font-size:calc(19px * var(--sk,1));line-height:1}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);
  display:none;align-items:flex-end;justify-content:center}
.overlay.pa{display:flex}
.modal{background:var(--bg);width:100%;max-width:620px;border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + var(--safe-b));max-height:92vh;overflow-y:auto;
  border-top:2px solid var(--accent)}
.modal h3{margin:0 0 16px;font-size:calc(19px * var(--sk,1));font-weight:700;letter-spacing:-.01em}
.falt{margin-bottom:14px}
.falt label{display:block;font-size:calc(13px * var(--sk,1));letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.falt input,.falt select,.falt textarea{width:100%;background:var(--yta);border:1px solid var(--linje);
  border-radius:10px;padding:13px;min-height:52px}
.falt textarea{min-height:70px}
.tidpar{display:flex;gap:10px}
.tidpar .falt{flex:1}
.segment{display:flex;gap:6px}
.segment button{flex:1;min-height:52px;border-radius:10px;background:var(--yta);
  border:1px solid var(--linje);font-size:calc(15px * var(--sk,1));font-weight:600;color:var(--dim)}
.segment button.pa{background:var(--prim-bg);color:var(--prim-txt);border-color:var(--prim-bg)}
.modalfot{display:flex;gap:10px;margin-top:18px}
.modalfot .knapp{margin-top:0}
.delabox{border-top:1px solid var(--linje);margin-top:16px;padding-top:16px;display:none}
.delabox.pa{display:block}
.hint{font-size:calc(13.5px * var(--sk,1));color:var(--dim);margin-top:8px;line-height:1.5}

.toast{position:fixed;left:50%;bottom:calc(94px + var(--safe-b));transform:translateX(-50%);
  background:var(--prim-bg);color:var(--prim-txt);padding:12px 20px;border-radius:22px;
  font-size:calc(15px * var(--sk,1));font-weight:700;z-index:400;opacity:0;pointer-events:none;
  transition:opacity .2s;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis}
.toast.pa{opacity:1}

.protolabel{background:var(--yta2);border-radius:10px;padding:12px 14px;font-size:calc(13.5px * var(--sk,1));
  color:var(--dim);line-height:1.6;margin-top:26px}
.protolabel b{color:var(--accent-txt)}

/* ---------- Admin ---------- */
.adminflik{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.adminflik button{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:9px;
  border:1px solid var(--linje);background:var(--yta);font-size:calc(14.5px * var(--sk,1));font-weight:600;color:var(--dim);white-space:nowrap}
.adminflik button.pa{background:var(--prim-bg);color:var(--prim-txt);border-color:var(--prim-bg)}
.periodrad{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.periodrad .falt{flex:1;margin-bottom:0}
.snabbperiod{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.snabbperiod button{min-height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--linje);
  background:var(--yta);font-size:calc(13.5px * var(--sk,1));font-weight:600;color:var(--dim)}
.kort{background:var(--yta);border:1px solid var(--linje);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:var(--skugga)}
.kort .kh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kort .kh b{font-size:calc(16px * var(--sk,1));font-weight:700}
.kort .kh span{font-size:calc(14.5px * var(--sk,1));color:var(--dim);font-variant-numeric:tabular-nums}
.kort .kr{display:flex;justify-content:space-between;font-size:calc(14.5px * var(--sk,1));padding:5px 0;color:var(--dim)}
.kort .kr b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.statusprick{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.statusprick.aktiv{background:var(--gron)}
.statusprick.vilande{background:var(--gul)}
.statusprick.slut{background:var(--dim)}
.utdata{width:100%;min-height:300px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:calc(13.5px * var(--sk,1));line-height:1.55;white-space:pre;overflow-x:auto}
.tabellrad{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--linje);font-size:calc(15px * var(--sk,1))}
.tabellrad:last-child{border-bottom:none}
.tabellrad b{font-variant-numeric:tabular-nums;font-weight:700}
.stapel{height:6px;border-radius:3px;background:var(--accent);margin-top:5px}
.miniprojnr{font-variant-numeric:tabular-nums lining-nums;font-weight:700;color:var(--accent-txt)}

@media (min-width:760px){
  .vy{max-width:900px;margin:0 auto}
  body{padding-bottom:calc(88px + var(--safe-b))}
}

/* ==================================================================
   TILLÄGG FÖR FAS 1
   Allt nedanför den här raden är nytt mot prototypen. Samma idiom:
   variabler ur paletten, calc(Npx * var(--sk,1)) med fallback, minsta
   träffyta 48 x 48 px, ingen text under 12,5 px.
   ================================================================== */

/* ---------- Sparningskvitto ----------
   Alltid synlig, inte bara vid problem. Formuleringen är hela poängen:
   "Sparat i telefonen 14:32" — inte bara "Sparat". I fas 1 finns ingen
   server; dagen ligger enbart på den anställdes egen telefon tills han
   skickar veckan.
   I fas 2 blir detta ett textbyte, inte en ombyggnad. */
.kvitto{display:flex;align-items:center;gap:8px;margin-top:26px;padding:10px 12px;
  border:1px solid var(--linje);border-radius:9px;
  font-size:calc(13px * var(--sk,1));color:var(--dim);line-height:1.45}
.kvitto .pt{width:7px;height:7px;border-radius:50%;background:var(--gron);flex:0 0 7px}
.kvitto b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.kvitto.fel{border-color:var(--rod);color:var(--rod)}
.kvitto.fel .pt{background:var(--rod)}
.kvitto.fel b{color:var(--rod)}

/* ---------- Projektlistans ålder ----------
   Byter färg när listan är äldre än fjorton dagar. Har en dag ett
   nummer som inte finns i listan visas numret i klartext med varning,
   aldrig tomt — posten får aldrig tappas bort för att listan är gammal. */
.listrad{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:calc(13px * var(--sk,1));color:var(--dim)}
.listrad.gammal{color:var(--gul)}
.listrad.saknas{color:var(--rod)}
.okantnr{border:1px solid var(--gul);border-radius:5px;padding:1px 5px;
  font-size:calc(12.5px * var(--sk,1));color:var(--gul);margin-left:6px;white-space:nowrap}

/* ---------- Internmärkning i kassan ---------- */
.internmark{display:inline-block;border:1px solid var(--linje);border-radius:5px;
  padding:1px 7px;font-size:calc(12.5px * var(--sk,1));letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:10px}

/* ---------- Arket bakom ⋯ ----------
   Ligger i samma overlay som modalerna. Skicka veckan ligger INTE här
   — den står kvar synlig längst ned i veckovyn, eftersom hela
   måndagsrutinen hänger på den. */
.arkrad{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:56px;padding:12px 14px;margin-top:8px;border-radius:11px;
  background:var(--yta);border:1px solid var(--linje);box-shadow:var(--skugga)}
.arkrad .ik{font-size:calc(19px * var(--sk,1));color:var(--accent-txt);flex:0 0 26px;text-align:center}
.arkrad .tx{flex:1;min-width:0}
.arkrad .tx b{display:block;font-size:calc(15.5px * var(--sk,1));font-weight:600}
.arkrad .tx span{display:block;font-size:calc(13px * var(--sk,1));color:var(--dim);line-height:1.4}
.arkrad .val{font-size:calc(14.5px * var(--sk,1));color:var(--accent-txt);font-weight:700;white-space:nowrap}

/* ---------- Lagringsdiagnos ----------
   Gör skillnaden mellan hemskärmsapp och webbläsare avläsbar. Öppnar
   Patrik adressen i Safari i stället för via ikonen ser han på en rad
   att det är en annan, tom databas — inte att veckan är borta. */
.diagnos{background:var(--yta2);border-radius:10px;padding:12px 14px;margin-top:10px;
  font-size:calc(13px * var(--sk,1));color:var(--dim);line-height:1.6}
.diagnos .dr{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.diagnos .dr b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Inloggning ----------
   Skyddar mot att någon råkar öppna appen, inte mot någon som vill åt
   datan. Riktig enhetsregistrering kommer med Supabase i fas 2. */
.las{position:fixed;inset:0;z-index:500;background:var(--bg);color:var(--text);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px calc(24px + var(--safe-b));text-align:center}
.las.pa{display:flex}
.las .lasmark{font-size:calc(13px * var(--sk,1));letter-spacing:.22em;font-weight:700;
  color:var(--accent-txt);margin-bottom:28px}
.las h2{margin:0 0 8px;font-size:calc(21px * var(--sk,1));font-weight:700;letter-spacing:-.01em}
.las .lashjalp{font-size:calc(14.5px * var(--sk,1));color:var(--dim);max-width:22em;line-height:1.5;margin-bottom:22px}
.las .lasfel{font-size:calc(14.5px * var(--sk,1));color:var(--rod);min-height:22px;margin-bottom:6px}

.pinprickar{display:flex;gap:14px;justify-content:center;margin:10px 0 26px}
.pinprickar i{width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);
  background:none;display:block}
.pinprickar i.fylld{background:var(--prim-bg);border-color:var(--prim-bg)}

/* Egen knappsats i stället för tangentbordet: den flyttar inte layouten
   när den fälls ut, och träffytorna går att göra stora nog för
   arbetshandskar. */
.knappsats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:300px}
.knappsats button{min-height:62px;border-radius:12px;background:var(--yta);
  border:1px solid var(--linje);font-size:calc(24px * var(--sk,1));font-weight:600;
  color:var(--text);font-variant-numeric:tabular-nums}
.knappsats button.tom{background:none;border-color:transparent}
.knappsats button.tyst{font-size:calc(16px * var(--sk,1));font-weight:600;color:var(--dim)}

.personval{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.personval button{min-height:60px;border-radius:12px;background:var(--yta);
  border:1px solid var(--linje);font-size:calc(17px * var(--sk,1));font-weight:600;
  color:var(--text);padding:0 16px;text-align:left}
.personval button.pa{border-color:var(--accent);border-width:2px}

.glomt{margin-top:26px;font-size:calc(13.5px * var(--sk,1));color:var(--dim);
  min-height:48px;padding:12px 16px;border-radius:10px}
.glomt.laddar{color:var(--rod);border:1px solid var(--rod)}

/* ---------- Installationsanvisning ---------- */
.anvisning{font-size:calc(14.5px * var(--sk,1));line-height:1.6;color:var(--dim)}
.anvisning h4{margin:18px 0 6px;font-size:calc(14px * var(--sk,1));color:var(--text);
  letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.anvisning ol{margin:0;padding-left:20px}
.anvisning li{margin-bottom:5px}

/* ---------- Startskärm ----------
   Visas medan databasen öppnas, så att temat hinner sättas innan något
   ritas. Följer telefonens inställning tills det sparade valet lästs in. */
.startar{position:fixed;inset:0;z-index:600;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(13px * var(--sk,1));letter-spacing:.22em;font-weight:700;color:var(--accent-txt)}
.startar.klar{display:none}

/* ---------- Periodväljaren vid större text ----------
   Två datumfält sida vid sida svämmade över kanten med 40 px vid stor
   text och 83 px vid störst: ett input[type=date] har en egen minsta
   bredd, och ett flexbarn krymper inte under sitt innehåll så länge
   min-width är auto. Fälten får därför krympa, och lägga sig på var
   sin rad när de ändå inte får plats. Upptäckt genom att mäta
   scrollWidth i alla tre textstorlekarna, inte genom att titta. */
.periodrad{flex-wrap:wrap}
.periodrad .falt{flex:1 1 46%;min-width:0}
.periodrad .falt input{width:100%;min-width:0}