/* ═══════════════════════════════════════════════════════════════════════════ MOBILAPPEN – Dectorium under 768px ⚠️ DEN HÄR FILEN ÄGER MOBILEN. Hette tidigare `mobilmeny.css` och innehöll bara navigationen, men mobilen är inte "desktop med undantag" – den är en egen produkt som ska bli Android- och iOS-apparna. Resten av sajten är byggd för desktop, och mobilanpassningen har hittills gjorts genom att motbevisa desktopregler en i taget: 509 rader inline `@media` i nio sidor och **195 `!important`**. Varje mobilregel måste vinna över en desktopregel, därav mängden. Riktningen framåt: allt som rör mobilens utseende flyttas hit, vy för vy. Filen laddas sist av servern, så den vinner utan `!important`. När en vy flyttats in kan dess inline-`@media` och dess `!important` tas bort. Flyttat hittills: navigationen (app-bar, sidomeny, bottenmeny) och Hem. ── INNEHÅLL ────────────────────────────────────────────────────────────── 1. Mått och variabler 2. Bottenmenyn 3. App-baren och sidomenyn 4. Hem – chatten 5. Resultat – ringen, tidslinjen, fokusraderna ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ BOTTENMENYN – mobilens huvudnavigation Mobilversionen av Dectorium ÄR designen för Android- och iOS-apparna. Därför byggs den som en app: menyn ligger fast längst ner, innehållet i mitten, och man byter vy genom att trycka på en flik – inte genom att öppna en hamburgare och välja ur en lista. Fem flikar i flödesordning: det man gör dagligen först, det man ställer in sällan sist. Mittenplatsen är den mest framträdande i en femflikars meny och går därför till Resultat, inte till Profil. ⚠️ FINNS BARA PÅ MOBIL OCH BARA FÖR INLOGGADE. Desktop behåller sin ikonmeny i toppen. Utloggade ser den aldrig – på startsidan kan man vara utloggad och möts då av demon. ⚠️ BRYTPUNKTEN ÄR 768px – MÄTT, INTE VALD PÅ KÄNSLA. Regeln är: appläget tar över först när desktopmenyn inte längre får plats. Desktopmenyns minsta bredd, uppmätt med `max-content`: logga 123px Mitt konto + språkflagga 175px ikonraden + Logga ut 352px padding (15px 30px) 60px andrum mellan grupperna 48px ──────────────────────────────── SUMMA 758px 768px ger alltså 10px marginal – precis rätt gräns. ⚠️ Prövade 1366px (iPad Pro i landskap) och backade. Två skäl: mobilvyerna är ritade för ~390px och sträckte ut statistikrutor och kalenderdagar till orimliga mått på surfplatta, och 1366 fångar dessutom vanliga HD-laptops. Surfplatte- och laptopanvändare ska ha desktopvyn; vill man ha appkänslan på iPad laddar man ner appen. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Bottenmenyns höjd, på ett ställe. Måttet behövs av allt som ska sluta ovanför den – chattrutan, sidornas bottenutrymme – och stod tidigare upprepat som 62px på flera ställen. ⚠️ HÖJD 57 → 66 → 81px. Hem har inget eget `.mobilmeny` (den är dold där, ersatt av `.inputArea`) och fick tidigt en rejäl botten – 30px luft utöver gestfältet – för att inte kännas hoptryckt: "Med bara 12px hamnade fältet och ikonerna hoptryckta mot kanten." Den vanliga bottenmenyn på alla ANDRA sidor hade aldrig samma behandling – bara `env(safe-area-inset-bottom)`, noll extra på telefoner utan gestfält. Användaren pekade ut skillnaden och bad om samma lyft överallt. Första rättningen (66px) var för blygsam – bara halva vägen. Hems `.inputArea` är i verkligheten `1px kant + 10px topp-padding + 40px fältets höjd + 30px botten-padding = 81px` (uppmätt med `getBoundingClientRect()`), inte en uppskattning. 81px är alltså måttet som faktiskt gör bottenmenyn lika hög som förstasidans rad – inte ett nytt påhitt. En enda variabel styr både menyns egen höjd (`.mobilmeny-flik min-height` nedan) och allt annat som räknar mot den, så lyftet gäller Chattar/Resultat/Fokus/Profil/Konto på en gång. */ --mobilmeny-hojd: 81px; } .mobilmeny { display: none; } /* Genvägen till chatthistoriken hör till mobilens chattvy. På desktop finns kalenderknappen redan i toppmenyn. */ .chattar-genvag { display: none; } /* ⚠️ Kameraikonen döljs GLOBALT, inte bara i mediafrågan. Kamera/skicka-växlingen finns bara på mobil. Låg regeln inne i `@media (max-width: 768px)` visades båda ikonerna samtidigt på desktop – en pil och en kamera i samma knapp. */ .kamera-icon { display: none; } @media (max-width: 768px) { /* ⚠️ FÄLTET BAKOM ADRESSRADEN – FÄRGAS PÅ `html`, INTE PÅ MENYN. Ytan under bottenmenyn, bakom iOS Safaris adressrad, tillhör inte sidan. Den målas av `html`-elementets bakgrund. Inget barn kan sträcka sig in i den, hur stort det än görs. Tre försök gjordes innan det gick upp: ett `::after` under menyn, `padding-bottom: 140px`, och `padding-bottom: 100vh`. Inget av dem fyllde ytan på Hem och Chattar – och `100vh` gjorde dessutom skada på sidorna som fungerat, där vitt plötsligt syntes under menyn. Med rosa på `html` får ytan rätt färg på ALLA sidor samtidigt. `body` ligger kvar med sitt grå ovanpå och täcker sidans egen yta, så inget annat påverkas. Ingen uträkning, inget mått som kan bli fel på en telefon jag inte testat. */ /* ⚠️ VIT, inte rosa. `html`-bakgrunden färgar ocksÅ fältet ÖVERST – bakom klockan och batteriindikatorn. Med rosa här blev statusfältet rosa medan app-baren under var vit, vilket såg ut som ett misstag. Botten löses av `body`-regeln nedanför i stället, som bara gäller de två sidor som behöver den. */ html.inloggad { background: #fff; } /* ⚠️ HEM OCH CHATTAR BEHÖVER FÄRGEN PÅ `body`, INTE BARA PÅ `html`. iOS Safari tonar fältet bakom adressraden efter sidans egen bakgrund vid nederkanten. På sidor som scrollar når `body` kanten och rosan från `html` slår igenom – därför blev Resultat och Konto rätt. Hem och Chattar är låsta med `height: 100dvh` och har `#f5f5f5` på `body`. Den grå färgen ligger då närmast kanten och är det Safari läser. Bottenmenyn är `position: fixed` och räknas inte in, hur rosa den än är – vilket är varför tre försök att förlänga den nedåt inte gjorde någon skillnad. Ändringen syns knappt i sidan: `.container` täcker nästan hela ytan och `body::before` lägger sin korallglöd ovanpå. Det som ändras är tonen i kanterna, från grå till samma rosa som menyn. */ /* ⚠️ GRADIENT, INTE EN FÄRG – och skälet är inte estetiskt. iOS Safari tonar BÅDA kanterna efter sidans bakgrund: statusfältet (klocka, batteri) efter färgen högst upp, adressraden efter färgen längst ner. En enda rosa färg på `body` gav därför rosa statusfält också, vilket såg ut som ett misstag. Gradienten är vit hela vägen ner till bottenmenyns överkant och byter sedan tvärt. Övergången ligger alltså exakt bakom menyn och syns aldrig i sidan. Resultatet: vitt statusfält, rosa bakom adressraden. ⚠️ Måttet MÅSTE vara menyns höjd, inte ett ungefär. Först stod här 80px – 23px mer än menyn – och då stack en rosa remsa upp ovanför den. */ html.inloggad body[data-sida="index"], html.inloggad body[data-sida="calendar"] { background: linear-gradient( to bottom, #fff 0, #fff calc(100% - var(--mobilmeny-hojd)), #fff5f8 calc(100% - var(--mobilmeny-hojd)), #fff5f8 100% ); } html.inloggad .mobilmeny { display: flex; position: fixed; left: 0; right: 0; z-index: 2500; /* Innehållsytan är vit. Menyerna bär avgränsningen med en egen, svagt korallfärgad ton – samma grepp som appar använder i stället för kort och ramar. */ background: #fff5f8; border-top: 1px solid rgba(255, 77, 122, 0.16); /* ⚠️ MENYN STRÄCKER SIG INTE NEDÅT – SE `html`-REGELN OVANFÖR. Tre försök gjordes att fylla glappet genom att förlänga menyn: ett `::after` under den, sedan `padding-bottom: 140px`, sedan `100vh`. Alla misslyckades, och det sista försämrade dessutom de sidor som fungerade: på Resultat syntes plötsligt vitt under menyn. Orsaken är att ytan det gäller inte tillhör sidan. Det är fältet bakom iOS Safaris adressrad, och den målas av `html`-elementets bakgrund – inget barn kan sträcka sig in i den. Här står därför bara det menyn faktiskt behöver: plats för iPhones gestfält. `env()` är noll på allt annat. */ bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); /* Lyfter menyn från innehållet utan att rita en tung skugga. */ box-shadow: 0 -1px 14px -6px rgba(45, 45, 52, 0.28); } .mobilmeny-flik { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* 1px mindre än `--mobilmeny-hojd` – bordret ovanpå tar den sista pixeln, som förut (81 = 80 + 1). */ min-height: 80px; padding: 8px 2px 7px; color: #9a9aa2; text-decoration: none; font-family: inherit; background: none; border: none; cursor: pointer; /* Tar bort den grå blinkningen vid tryck på Android. */ -webkit-tap-highlight-color: transparent; transition: color 0.18s ease; } .mobilmeny-flik svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s cubic-bezier(0.22, 0.7, 0.3, 1); } .mobilmeny-etikett { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; /* Fem etiketter på 390px är trångt, och tyska "Ergebnisse" är långt. Hellre att ordet krymper något än att det bryts i två rader eller knuffar isär flikarna. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sidan man står på. Servern märker , så markeringen är rätt redan när sidan kommer – den hinner aldrig blinka fel som en JS-lösning gör. */ body[data-sida="index"] .mobilmeny-flik[data-flik="index"], body[data-sida="calendar"] .mobilmeny-flik[data-flik="calendar"], body[data-sida="dashboard"] .mobilmeny-flik[data-flik="dashboard"], body[data-sida="fokus"] .mobilmeny-flik[data-flik="fokus"], body[data-sida="profile"] .mobilmeny-flik[data-flik="profile"], /* Mitt konto har ingen egen flik – den nås från Profil och markerar därför Profil, så att man ser var man är i strukturen. */ body[data-sida="konto"] .mobilmeny-flik[data-flik="profile"] { color: #ff4d7a; } .mobilmeny-flik:active svg { transform: scale(0.88); } /* Tangentbordsnavigering syns, men ringen ska inte skära i menykanten. */ .mobilmeny-flik:focus-visible { outline: 2px solid #ff4d7a; outline-offset: -3px; border-radius: 12px; } /* Innehållet får inte hamna under menyn. Sätts på body i stället för på varje sidas behållare – sidorna har olika yttersta element (.dashboard-container, .profile-container, chattens helskärmsläge) och skulle annars behöva var sin regel. */ html.inloggad body { padding-bottom: calc(var(--mobilmeny-hojd) + env(safe-area-inset-bottom, 0px)) !important; } /* ⚠️ Chatten är undantaget: hela sidan är låst till helskärm med `position: fixed` på både html och body, så padding på body flyttar ingenting där. Chattrutan är i stället ett eget fixerat element som måste lyftas över menyn. `.container` sitter med `bottom: 20px` i chattens egen CSS. Menyn är 62px, alltså 82px totalt – annars hamnar skrivfältet och raden om att AI:n kan ha fel bakom flikarna. Selektorn är låst till `[data-sida]` eftersom `.container` är ett generiskt klassnamn som finns på fler sidor. */ html.inloggad body[data-sida="index"] { padding-bottom: 0 !important; } /* ── CHATTEN KANT I KANT ────────────────────────────────────────────── Appmönstret: samtalet flyter direkt på den vita ytan mellan de två menyerna, som i Messenger eller WhatsApp. Ingen vit ruta som svävar på en bakgrund, ingen radie, ingen skugga. Chatten har inga "kort" som de andra sidorna – den har EN ruta, `.container`, som håller samtalet, skrivfältet och disclaimern. Att ta bort dess kortutseende är därför hela ombyggnaden av sidan. ⚠️ `var(--tangentbord)` MÅSTE vara kvar i `bottom`. app.js sätter variabeln när iOS fäller upp tangentbordet, eftersom `position: fixed` räknar mot layout-viewporten, som INTE krymper då. En tidigare version av den här regeln skrev över `bottom` utan variabeln och tog därmed tyst bort hela tangentbordsfixen – skrivfältet hamnade bakom tangentbordet igen. Alla tre termerna behövs: menyn, gestfältet och tangentbordet. */ /* ⚠️ INGEN BOTTENMENY PÅ CHATTSIDAN. Där ska bara samtalet, skrivfältet och de två knapparna synas – navigationen flyttar in i hamburgaren, som på chattsidan bär allt. Skälet är att chatten är den vy man stannar längst i; flikarna under konkurrerade med samtalet. Gäller BARA `index`. Chattlistan (`calendar`) behåller sin bottenmeny – där bläddrar man mellan datum, man chattar inte. */ html.inloggad body[data-sida="index"] .mobilmeny { display: none; } /* ── Medan tangentbordet är uppe ────────────────────────────────────── app.js mäter hur långt den synliga viewporten glidit ned inuti layout-viewporten (`--vy-offset`) och skjuter de fixerade elementen lika mycket. Utan det försvann app-baren ur bild så fort man började skriva – den satt kvar på layout-viewportens `top: 0`, ovanför den yta telefonen faktiskt visade. Målet är WhatsApps beteende: rubriken kvar överst, samtalet synligt, skrivfältet direkt ovanför tangentbordet. */ html.inloggad body[data-sida="index"] .appbar { top: var(--vy-offset, 0px); } /* Utrymmet under fältet ska bara vara luft när tangentbordet är NERE. Med tangentbordet uppe ligger fältet mot tangentbordets kant, precis som i WhatsApp – de 30px hade annars blivit ett glapp. */ html.tangentbord-uppe.inloggad body[data-sida="index"] .inputArea { padding-bottom: 10px; } html.inloggad body[data-sida="index"] .container { top: calc(60px + var(--vy-offset, 0px)); /* ⚠️ HÖJD, INTE `bottom` – DET ÄR DEN FLEXIBLA VARIANTEN. `--vv-height` är `visualViewport.height`, satt av app.js. Den är webbläsarens egen sanning om hur mycket som syns just nu, mätt av just den enheten – inte ett tal vi räknat fram. Fungerar likadant oavsett skärmstorlek eller tangentbordshöjd, på telefon och iPad. Flexlayouten gör resten: `#chatBox` (flex: 1, från style.css) fyller det utrymme som blir kvar när skrivfältet tagit sitt, så fältet hamnar garanterat vid nedre kanten av det synliga området. `100dvh` är reservläget för webbläsare utan visualViewport-stöd – samma reservmönster som redan används i style.css. */ height: calc(var(--vv-height, 100dvh) - 60px - env(safe-area-inset-bottom, 0px)); left: 0; right: 0; width: 100%; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: #fff; } /* Meddelandelistan bar en egen 2px-ram och radie – ett kort inuti kortet. Padding flyttas hit från `.container`, så texten får luft trots att ytan går kant i kant. */ html.inloggad body[data-sida="index"] #chatBox { border: none; border-radius: 0; padding: 16px 15px; margin-bottom: 0; } /* ↩️ Samtalet börjar HÖGST UPP. Prövade att trycka ner meddelandena mot skrivfältet med `margin-top: auto` – vanligt i chattappar – men användaren ville ha dem uppifrån: samtalet ska läsas uppifrån och ned från början. Regeln är borttagen; `#chatBox` behåller sitt normala flöde. */ /* ── Skrivfältet ────────────────────────────────────────────────────── ⚠️ input.css motiverar ett VITT fält med att det ska "smälta in i chattfönstret". Det stämde när chatten låg i en vit ruta på grå bakgrund. Nu går ytan kant i kant och är vit överallt – ett vitt fält på vitt syns inte, och raden såg därför oformad ut. Fältet får produktens egen gråa fältbotten (#f4f5f7, samma som Profil, Fokus och auth-sidorna) och kapselform. Korallringen vid fokus är hämtad från samma ställe. */ /* ↩️ STRECKET ÄR ÅTERSTÄLLT TILL KAPSEL. Prövade ett understruket fält i grafit med skugga – användarens förslag, och ett vanligt mönster – men det blev inte bra i praktiken: på en yta där allt annat redan är ramlöst blev en ensam linje mest en rest, och fältet tappade sin form. ── Det verkliga problemet var ett annat ────────────────────────────── Användaren satte fingret på det: fältet och bottenmenyn såg inte ut att höra ihop. Orsaken var att de tillhörde olika färgvärldar – ett neutralt grått fält svävande på vit yta, mot en rosatonad meny med egen kant. Två system som råkade ligga intill varandra. Nu bildar de ETT block: inmatningsraden får menyns ton och dess toppkant, och fältet blir vitt mot den. Avgränsningen mot chatten sker där blocket börjar, inte runt fältet. Menyns egen toppkant tas bort – annars hade två linjer legat 50px isär. */ /* ⚠️ EN regel för `.inputArea`, inte tre. Under omgångarna hade det vuxit fram tre separata regler för samma element – en per gång något justerades – som konkurrerade om padding. Samlat här. */ html.inloggad body[data-sida="index"] .inputArea { background: #fff5f8; border-top: 1px solid rgba(255, 77, 122, 0.16); /* ⚠️ REJÄL BOTTEN – MÄTT MOT WHATSAPP. Chattsidan saknar bottenmeny, så inmatningsraden är skärmens sista element. Med bara 12px hamnade fältet och ikonerna hoptryckta mot kanten. Uppmätt på en WhatsApp-skärmdump (923px visad = 393 CSS-px): ~98px under fältet, varav ~34 är iPhones gestfält – alltså ungefär 30px verklig luft. Samma mått här, plus `env()` som lägger till gestfältet på de telefoner som har ett. */ padding: 10px 12px calc(30px + env(safe-area-inset-bottom, 0px)); gap: 9px; align-items: center; } /* Vitt fält mot den rosa bottnen – tvärtom mot förut, där fältet var grått mot vitt. Kontrasten hamnar där den gör nytta. */ html.inloggad body[data-sida="index"] .input-wrapper { background: #fff; border: 1px solid rgba(255, 77, 122, 0.18); border-radius: 20px; min-height: 40px; box-shadow: 0 1px 2px rgba(45, 45, 52, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html.inloggad body[data-sida="index"] .input-wrapper:focus-within { border-color: #ff4d7a; box-shadow: 0 0 0 3px rgba(255, 77, 122, 0.12); } html.inloggad body[data-sida="index"] .input-wrapper #userInput { padding: 9px 38px 9px 15px; font-size: 16px; background: transparent; } /* ── Genvägen till chatthistoriken ──────────────────────────────────── Chattsidan är den enda vyn utan bottenmeny. Utan den här ikonen hade historiken bara gått att nå via hamburgaren – två tryck i stället för ett, i den vy man använder mest. Formen speglar skicka-knappen: samma 40px cirkel, samma plats i raden fast på andra sidan. Men vikten är omvänd – ljus yta och tunn ikon mot skicka-knappens fyllda grafit. Två cirklar med samma tyngd hade sett ut som ett par knappar med jämbördiga uppgifter. */ html.inloggad body[data-sida="index"] .chattar-genvag { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(255, 77, 122, 0.18); color: #8a8a92; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } html.inloggad body[data-sida="index"] .chattar-genvag svg { width: 20px; height: 20px; } html.inloggad body[data-sida="index"] .chattar-genvag:active { transform: scale(0.92); color: #ff4d7a; border-color: #ff4d7a; } /* Plus stannar till HÖGER, intill skicka-knappen – den delen av förslaget fungerade. Den är avsiktligt diskret medan skicka är en fylld cirkel: två knappar bredvid varandra med samma vikt läses som ett par, och då tvekar man vilken som skickar. */ html.inloggad body[data-sida="index"] .plus-btn { left: auto; right: 3px; width: 32px; height: 32px; border-radius: 50%; color: #9a9aa2; } html.inloggad body[data-sida="index"] .plus-btn svg { width: 19px; height: 19px; stroke-width: 2; } /* Rund, för att möta fältets kapselform, och lika hög som fältet. Grafitgradienten är oförändrad – den är varumärkets, bara formen och måttet följde med. */ html.inloggad body[data-sida="index"] #sendBtn { width: 40px; height: 40px; /* ⚠️ `min-height` måste med. input.css sätter BÅDE `height: 48px` och `min-height: 48px`; enbart `height` här räckte inte – knappen blev 40 bred och 48 hög. */ min-height: 40px; border-radius: 50%; /* ⚠️ SKUGGAN, INTE STORLEKEN, GJORDE KNAPPEN FÖR STOR. Knappen och Chattar-genvägen är båda exakt 40×40 – uppmätt. Men input.css ger skicka-knappen `0 4px 12px`, en tolv pixlar suddig gloria som sträcker sig utanför cirkeln. Tillsammans med den fyllda mörka ytan läses den som ~52px bredvid den ljusa genvägen. Dämpad till en nätt lyftning i stället. Att krympa knappen hade varit fel botemedel – måtten var redan rätt. */ box-shadow: 0 2px 5px -1px rgba(45, 45, 52, 0.32); } /* ── Kamera ⇄ Skicka ────────────────────────────────────────────────── Båda ikonerna ligger i markupen; klassen `.ar-kamera` på knappen avgör vilken som visas. Att växla synlighet i stället för att byta ut SVG:n gör bytet omedelbart – ingen omritning, ingen blink. `.ar-kamera` sätts av `vaxlaSkickaknapp()` i app.js och är den enda sanningen om läget: CSS läser den, och JS läser den när knappen klickas. De kan därför inte hamna i otakt. */ html.inloggad body[data-sida="index"] #sendBtn.ar-kamera .kamera-icon { display: block; width: 21px; height: 21px; } html.inloggad body[data-sida="index"] #sendBtn.ar-kamera .send-icon { display: none; } /* ⚠️ I KAMERALÄGE SER KNAPPEN UT SOM GENVÄGEN TILL VÄNSTER, INTE SOM SKICKA-KNAPPEN. Kameran är en sekundär åtgärd, precis som chattgenvägen – båda leder någon annanstans. Skicka är den primära och den enda som ska bära den fyllda grafiten. Med kameran i grafit såg raden ut att ha två jämbördiga huvudknappar med ett fält emellan. Samma yta, kant och ikonfärg som `.chattar-genvag`, så de två ramar in fältet symmetriskt. När något skrivs tas klassen bort och knappen återgår till grafitgradienten – övergången tonas av `transition`. */ html.inloggad body[data-sida="index"] #sendBtn { transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; } html.inloggad body[data-sida="index"] #sendBtn.ar-kamera { background: #fff; border: 1px solid rgba(255, 77, 122, 0.18); color: #8a8a92; box-shadow: none; } html.inloggad body[data-sida="index"] #sendBtn.ar-kamera:active { color: #ff4d7a; border-color: #ff4d7a; transform: scale(0.92); } html.inloggad body[data-sida="index"] #sendBtn .send-icon { width: 18px; height: 18px; } /* ⚠️ BORTTAGEN PÅ MOBIL, INTE FÖRMINSKAD. "Generativ AI kan göra misstag" är en upplysning som hör hemma i policyn, inte i chattfönstret. På en telefonskärm konkurrerade den med samtalet och tryckte upp skrivfältet. 🔜 Texten ska in i hälsopolicyn – står som öppen punkt i loggen. */ html.inloggad body[data-sida="index"] .ai-disclaimer { display: none; } /* Papperskorgen hör till meddelandet ovanför – tätt under, inte svävande mitt emellan två meddelanden. */ html.inloggad body[data-sida="index"] .delete-message-btn { width: 26px; height: 26px; margin-top: -8px; margin-bottom: 6px; } @media (prefers-reduced-motion: reduce) { .mobilmeny-flik svg, .mobilmeny-flik { transition: none; } .mobilmeny-flik:active svg { transform: none; } } } /* ═══════════════════════════════════════════════════════════════════════════ RESULTAT (dashboard.html) – ringen, tidslinjen, fokusraderna Sidan är byggd för desktop: fyra likvärdiga statistikrutor i ett rutnät, ett rutnät på fem kolumner för varje näringsämne. Ingetdera får plats på en telefon utan att bli en tät tabell – och det är precis vad appmönstret ska bort ifrån. Tre grepp, samma tanke som Hem: inget flyter som ett kort på en grå yta. 1. FRAMGÅNGSGRADEN FÅR EN RING, INTE EN RUTA. Den är sidans enda procent- tal och den man vill se först – en ring läses direkt, en siffra i en ruta bland tre andra rutor konkurrerar om blicken. 2. DE ÖVRIGA TRE TALEN BLIR EN PLATT RAD under ringen, skilda av tunna linjer i stället för varsin ruta – som fotknapparna i iOS Hälsa. 3. FOKUSRADERNA LÄGGS OM FRÅN RUTNÄT TILL RADER: namn och procent på en rad, en stapel i full bredd under, de små siffrorna sist. Samma mönster för både översikten och en enskild dags näringsämnen, fast med olika antal småsiffror – `grid-template-areas` placerar dem oavsett vilket. ⚠️ RINGEN RITAS MED `conic-gradient` + `mask`, INTE MED SVG. En andra osynlig ruta (`.ring-track`) läggs bakom siffran med en cirkulär gradient som fylls upp till `--ringpct`, satt av JS (`updateStats()` i dashboard.js – klassen kan inte räkna ut procenten själv ur textinnehållet). `mask` gröper ur mitten så bara en ring blir kvar; en andra, mindre cirkel ovanpå hade krävt ett tredje lager. ── VERSION 2 – EFTER ANVÄNDARENS DOM ──────────────────────────────────── Första versionen (ren vit yta + tunna gråa linjer) var i praktiken bara "korten fast utan skugga" – tekniskt kortfri, men lika livlös som originalet. *"Det här var inte alls snyggt! Du har tagit den enklaste vägen."* Tre saker byggdes om från grunden i stället för att bara justera mått: 1. Sidan har fått ATMOSFÄR – en mjuk korallton bakom ringen i stället för ett kritvitt fält (samma princip som `frontend-design`-riktlinjernas "Backgrounds & Visual Details": gradient, inte platt färg). 2. Ringen är tjockare, större och har en FÄRGVERKAN i sig (ljus till mörk korall runt bågen, som Apple Watchs aktivitetsringar) plus en mjuk glöd – i stället för ett tunt enfärgat streck. 3. De tre talen har fått VARSIN IKON. Utan dem var raden bara tre siffror med linjer emellan; med dem läser blicken direkt vad varje tal betyder, och raden får en visuell rytm linjerna ensamma inte gav. ═══════════════════════════════════════════════════════════════════════════ */ .ring-track, .stat-ikon, .mobil-avdelare { display: none; } @media (max-width: 768px) { /* ── Ytan ───────────────────────────────────────────────────────────── Vit hela vägen, samma princip som Hem. `!important` krävs mot dashboard.html:s egen `body { background: #f5f5f5 }`. */ html.inloggad body[data-sida="dashboard"] { background: #fff !important; } html.inloggad body[data-sida="dashboard"] .dashboard-container { width: 100%; max-width: none; margin: 0; padding: 84px 20px 32px; } /* ── Ring, statistikrad och rubrik bort ────────────────────────────── Version 2 byggde en hero-sektion runt ringen (gradientglöd, ikoner på de tre talen). Användaren jämförde med tidslinjen och fokusraderna under – *"Du skulle kunna skippa allt ovanför det jag visade"* – och ville hellre gå rakt på kalendern. Ringen (och `--ringpct` som `dashboard.js` sätter) ligger kvar orörd i koden ifall den behövs igen; den är bara dold här. `:has()` träffar just den kortet med `.stats-grid` utan att behöva ändra HTML:en. */ html.inloggad body[data-sida="dashboard"] .kicker, html.inloggad body[data-sida="dashboard"] .sid-ingress, html.inloggad body[data-sida="dashboard"] .dashboard-card:has(.stats-grid) { display: none; } /* ── Korten bort ────────────────────────────────────────────────────── De tre sektionerna (statistik, tidslinje, fokus) är inte längre egna rutor – bara luft mellan dem. En hårfin linje hade läst som ännu en kortkant; ren whitespace är det som faktiskt skiljer "kort" från "flöde". */ html.inloggad body[data-sida="dashboard"] .dashboard-card { background: none; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 46px; } /* Tidslinjen får ingen egen marginal – avdelaren under bär hela mellanrummet till Resultat i stället, se `.mobil-avdelare` nedan. */ html.inloggad body[data-sida="dashboard"] .dashboard-card.tidslinje-kort { margin-bottom: 0; } /* ── Avdelaren mellan tidslinjen och Resultat ──────────────────────── Användarens referens: LinkedIns tjocka gutter mellan två inlägg i flödet, färgad med sidans egen bakgrund i stället för en tunn linje. "Rosa bakgrundsfärgen" är `#fff5f8` – samma ton som botten- och inmatningsmenyn använder överallt annars på mobilen. Bryter ut ur `.dashboard-container`s 20px sidopadding med negativ marginal så fältet går kant i kant, som menyerna gör. ⚠️ Ett mellansteg lade till en gradient + ett litet korallstreck i mitten. Återställt till den enkla plana rutan på användarens uttryckliga begäran – *"Ändra tillbaka allt du gjorde nyss"*. ⚠️ Satt ojämnt: `margin: 0 -20px 30px` gav 0px luft upp mot datumknapparna men 30px ner mot "Resultat" – avdelaren låg alltså klistrad mot kalendern, inte centrerad mellan de två. Nu 20px på båda sidor. Höjden halverad två gånger på användarens begäran: 18px → 9px → 4.5px. */ html.inloggad body[data-sida="dashboard"] .mobil-avdelare { display: block; height: 4.5px; margin: 20px -20px; background: #fff5f8; } /* ── 1: Ringen ──────────────────────────────────────────────────────── `.stat-box--ring` äger RADEN (full bredd, satt av `.stats-grid` nedan – `flex: 0 0 100%` slår igenom på bredden). Själva cirkeln får därför sin egen fasta storlek på `.ring-track`, centrerad i raden med `left/top 50% + translate`, i stället för att storlekssättas på `.stat-box--ring` självt. ⚠️ FÖRSTA VERSIONEN BLEV EN OVAL, INTE EN CIRKEL. `.stat-box--ring` hade både en fast bredd OCH `flex: 0 0 100%` – på huvudaxeln (bredden, i en rad-flexbox) vinner `flex-basis` alltid över `width`, så boxen blev lika bred som hela raden men bara lika hög som den fasta höjden. `.ring-track`s `inset: 0` följde med och sträcktes till en oval. Lösningen är att INTE storlekssätta den yttre boxen alls – bara den fasta cirkeln inuti den. */ html.inloggad body[data-sida="dashboard"] .stat-box--ring { position: relative; min-height: 208px; margin: 10px 0 10px; display: grid; place-items: center; padding: 0; background: none; border: none; box-shadow: none; } html.inloggad body[data-sida="dashboard"] .stat-box--ring::before { display: none; } /* Ringen sveper från ljus till mörk korall över den fyllda bågen – samma två toner som `--korall-ljus`/`--korall` någon annanstans på sajten, bara applicerade som en cirkulär gradient i stället för en platt yta. `from -90deg` startar sveepet klockan tolv, som Apple Watchs aktivitetsringar, i stället för standardens klockan tre. */ html.inloggad body[data-sida="dashboard"] .ring-track { display: block; position: absolute; top: 50%; left: 50%; width: 196px; height: 196px; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient( from -90deg, var(--korall-ljus) 0%, var(--korall) var(--ringpct, 0%), #f7e3ea var(--ringpct, 0%), #f7e3ea 100% ); /* Gröper ur mitten – 20px ringtjocklek på en 196px yta, tjockare än första försökets 15px/172px så ringen får riktig kroppslig vikt. */ mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 20px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 20px)); /* Mjuk glöd i korall under ringen – den ska kännas som att den lyfter från den varma bakgrunden, inte ligga platt på den. */ box-shadow: 0 14px 32px -14px rgba(255, 77, 122, 0.55); transition: background 0.6s cubic-bezier(0.22, 0.7, 0.3, 1); } html.inloggad body[data-sida="dashboard"] .stat-box--ring .stat-number { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 3px; } html.inloggad body[data-sida="dashboard"] .stat-box--ring .stat-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9a7a83; } /* ── De tre platta talen ────────────────────────────────────────────── `.stats-grid` läggs om till en enda rad under ringen. Ringrutan får `order: -1` och en egen radbredd på 100 %, så den bryter till sin egen rad oavsett var i HTML:en den står (den är tredje av fyra – mellan "Mål uppnådda" och "Streak"). De tre kvarvarande behåller sin inbördes DOM-ordning eftersom bara ringen får ett explicit `order`. */ html.inloggad body[data-sida="dashboard"] .stats-grid { display: flex; flex-wrap: wrap; gap: 0; } html.inloggad body[data-sida="dashboard"] .stat-box--ring { order: -1; flex: 0 0 100%; } html.inloggad body[data-sida="dashboard"] .stat-box:not(.stat-box--ring) { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; background: none; border: none; box-shadow: none; border-radius: 0; padding: 8px 4px 2px; } html.inloggad body[data-sida="dashboard"] .stat-box:not(.stat-box--ring)::before { display: none; } /* Ikonen ovanför siffran – det som skiljer den här versionen från "tre tal med linjer emellan". Färgad korall men lite dämpad (0.8 opacitet) så den ligger på samma visuella nivå som etiketten, inte konkurrerar med ringens fyllda korall. */ html.inloggad body[data-sida="dashboard"] .stat-ikon { display: block; width: 21px; height: 21px; color: var(--korall); opacity: 0.82; margin-bottom: 7px; } /* Linjen mellan de tre – inte runt dem. `nth-child(1)` är "Dagar loggade", alltid sidans FÖRSTA barn i DOM:en oavsett flex-ordning, så den ensam saknar en linje till vänster. */ html.inloggad body[data-sida="dashboard"] .stat-box:not(.stat-box--ring) { border-left: 1px solid rgba(255, 77, 122, 0.13); } html.inloggad body[data-sida="dashboard"] .stat-box:nth-child(1) { border-left: none; } html.inloggad body[data-sida="dashboard"] .stat-box:not(.stat-box--ring) .stat-number { font-size: 22px; } html.inloggad body[data-sida="dashboard"] .stat-box:not(.stat-box--ring) .stat-label { font-size: 11.5px; } /* ── 2: Tidslinjen ──────────────────────────────────────────────────── Rutnätet i sig behåller sin form – färgade rutor är redan appspråk, samma idé som ett bidragsdiagram. Bara kortet runt det försvinner. */ html.inloggad body[data-sida="dashboard"] .timeline-header { align-items: center; gap: 14px; margin-bottom: 4px; } html.inloggad body[data-sida="dashboard"] .timeline { grid-template-columns: repeat(7, 1fr); gap: 5px; } html.inloggad body[data-sida="dashboard"] .timeline-day { padding: 8px 4px; font-size: 14px; } /* Desktopens neutrala rutor är blågråa (#eceef1 → #dfe2e6) – en kall ton som inte hör hemma bredvid en varm korallring. Samma tre tillstånd (ingen data, väntande, ofullständig) får i stället en ton ur korallfamiljen, mörk nog för kontrast men ljus nog att inte tävla med .success/.failed. */ html.inloggad body[data-sida="dashboard"] .timeline-day.no-data, html.inloggad body[data-sida="dashboard"] .timeline-day.pending, html.inloggad body[data-sida="dashboard"] .timeline-day.incomplete { background: linear-gradient(180deg, #f6eef1, #ede0e4); border-color: rgba(74, 74, 74, 0.07); color: #7d6b71; } html.inloggad body[data-sida="dashboard"] .timeline-day.no-data:hover, html.inloggad body[data-sida="dashboard"] .timeline-day.pending:hover { background: linear-gradient(180deg, #f9f2f4, #f1e5e9); } /* ⚠️ MARKERAT LÄGE – ANVÄNDAREN VILLE INTE HA MÖRKGRÅTT. Desktopens `.no-data.selected`/`.incomplete.selected` tvingar `#4a4a4a` med `!important`. `.pending.selected` (dagens datum) har av någon anledning ALDRIG haft `!important` där – därför visade dagens ruta redan den varma tonen ovan medan gamla loggade dagar utan data blev svarta så fort man klickade på dem. Samma varma ton för alla tre nu, som dagens ruta redan hade. Kanten och förstoringen (`transform: scale(1.30)` från desktopreglerna) är kvar orörda – det är fortfarande tydligt att rutan är vald, bara inte mörkgrått. */ html.inloggad body[data-sida="dashboard"] .timeline-day.no-data.selected, html.inloggad body[data-sida="dashboard"] .timeline-day.pending.selected, html.inloggad body[data-sida="dashboard"] .timeline-day.incomplete.selected { background: linear-gradient(180deg, #f6eef1, #ede0e4) !important; color: #7d6b71 !important; border-color: rgba(74, 74, 74, 0.16); } /* ── 3: Fokusraderna ────────────────────────────────────────────────── Två varianter delar `.focus-item`: sammanfattningen (`.focus-item` utan extraklass, alltid fyra barn i fast ordning: uppnått, totalt, stapel, framgång%) och en enskild dags näringsämnen (`.nutrient-row`, fem barn: namn, mål, uppnått, stapel, procent). `grid-template-areas` placerar barnen efter NAMN, inte efter var de råkar stå i HTML:en – ordningen i markupen (satt av dashboard.js) kan därför lämnas orörd. Båda varianterna landar i samma layout: namn och procent på en rad, stapeln i full bredd under, småsiffrorna sist. */ html.inloggad body[data-sida="dashboard"] .focus-breakdown { margin-top: 6px; } /* En accentkant i stället för en ram runt hela raden – nog för att raden ska bära en signalfärg, inte nog för att läsas som ett kort. Sammanfattningens rader har ingen lyckad/missad-klass (dess stapel är alltid jade – "hur ofta lyckades jag", inget att missa) och får därför jade som fast ton. Näringsraderna vet om dagen lyckades eller inte via samma klass som redan färgar stapeln och procenten – `:has()` läser av barnets klass utan att JS behöver sätta en klass på raden själv också. */ html.inloggad body[data-sida="dashboard"] .focus-item { background: none; border: none; border-left: 3px solid #00b894; border-bottom: 1px solid rgba(74, 74, 74, 0.08); border-radius: 3px 0 0 3px; padding: 16px 2px 16px 14px; margin-bottom: 0; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row:has(.progress-fill.missad) { border-left-color: var(--korall); } html.inloggad body[data-sida="dashboard"] .focus-item:first-child { padding-top: 0; } html.inloggad body[data-sida="dashboard"] .focus-item:last-child { border-bottom: none; } /* Sammanfattningen: .focus-item-stats packas upp med `display: contents` så dess fyra barn kan placeras var för sig i förälderns rutnät. ⚠️ UPPNÅTT OCH TOTALT LÅG FÖRST I SAMMA GRIDYTA, ÅTSKILDA MED `margin-left`. Två gridobjekt i samma namngivna yta läggs rakt ovanpå varandra – marginalen flyttade bara det andra talets TEXT, inte dess gridplacering, så siffrorna klipptes in i varandra så fort "Uppnått" var bredare än marginalen. Lösningen är egna kolumner åt var sitt tal (kol 1 och kol 2), inte samma yta med ett hopp mellan. */ html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "namn namn procent" "stapel stapel stapel" "smatal1 smatal2 ."; row-gap: 9px; column-gap: 16px; align-items: center; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-name { grid-area: namn; font-size: 15.5px; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats { display: contents; } /* Barn 1–2 = Uppnått/Totalt, barn 3 = stapeln, barn 4 = Framgång%. Fast ordning, satt av updateFocusBreakdown() i dashboard.js. */ html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(1), html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(2) { display: inline-flex; align-items: baseline; gap: 5px; justify-self: start; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(1) { grid-area: smatal1; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(2) { grid-area: smatal2; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(3) { grid-area: stapel; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(4) { grid-area: procent; justify-self: end; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(4) .focus-stat-number { font-size: 20px; color: var(--korall); } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-item-stats > *:nth-child(4) .focus-stat-label { display: none; } /* Näringsämnen för en enskild dag: fem raka barn, ingen wrapper. Samma princip som ovan – Mål och Uppnått får varsin kolumn. */ html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row { grid-template-columns: auto auto 1fr; grid-template-areas: "namn namn procent" "stapel stapel stapel" "mal uppn ."; row-gap: 9px; column-gap: 16px; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-name { grid-area: namn; font-size: 15.5px; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-cell:nth-child(2), html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-cell:nth-child(3) { display: inline-flex; align-items: baseline; gap: 5px; text-align: left; justify-self: start; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-cell:nth-child(2) { grid-area: mal; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-cell:nth-child(3) { grid-area: uppn; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .progress-bar { grid-area: stapel; } html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row > .nutrient-percent { grid-area: procent; justify-self: end; font-size: 20px; } /* Småsiffrornas etiketter ("MÅL", "UPPNÅTT") stod under sitt tal på desktop; här ligger de bredvid i stället, så raden inte blir tre nivåer hög. */ html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-stat, html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row .nutrient-cell { min-width: 0; text-align: left; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-stat-number, html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row .nutrient-value { font-size: 14px; } html.inloggad body[data-sida="dashboard"] .focus-item:not(.nutrient-row) .focus-stat-label, html.inloggad body[data-sida="dashboard"] .focus-item.nutrient-row .nutrient-label { margin-top: 0; font-size: 10.5px; } /* Stapeln fyller sin rad i stället för desktopens fasta 150px. */ html.inloggad body[data-sida="dashboard"] .focus-item .progress-bar { width: 100%; } html.inloggad body[data-sida="dashboard"] .focus-item .progress-fill { max-width: none; } } /* ═══════════════════════════════════════════════════════════════════════════ APP-BAREN OCH SIDOMENYN Mönstret är Facebooks och LinkedIns: loggan står kvar i toppen, en hamburgare öppnar en sidomeny som glider in, och bottenmenyn bär den dagliga navigationen. De två menyerna konkurrerar inte – sidomenyn får BARA det som bottenmenyn saknar (Mitt konto, Kontakt, Vilka är vi?, Logga ut). ⚠️ APP-BAREN ÄR VIT, inte ljusrosa som bottenmenyn. `logga.png` har vit ogenomskinlig botten – 0 av 27 537 pixlar är genomskinliga. På en färgad bar hade loggan fått en synlig vit rektangel omkring sig. Avgränsningen görs därför med en hårfin linje i stället för med färg. Görs loggan genomskinlig någon gång kan baren tonas. Höjden är exakt 60px – samma som `.top-menu` har på mobil i mobile.css. Sidornas avstånd till toppen är räknat för det måttet, så ingenting hoppar när baren tar över. ═══════════════════════════════════════════════════════════════════════════ */ .appbar, .sidomeny, .sidomeny-tacke { display: none; } @media (max-width: 768px) { /* Den gamla toppmenyn lämnar plats. Den är `position: fixed` och tar därför ingen plats i flödet – att dölja den skapar inget tomrum. */ html.inloggad .top-menu { display: none !important; } html.inloggad .appbar { display: flex; align-items: center; /* ⚠️ Nästan noll, inte 12px. Hamburgaren har en 42px träffyta runt en 19px ikon, alltså 11px osynlig luft på var sida. Med 12px gap ovanpå det blev det synliga avståndet till loggan 22px – dubbelt mot Facebooks ~13px, och loggan såg bortkopplad ut. Träffytan behålls för tummen; det är mellanrummet som krymper. */ gap: 1px; position: fixed; top: 0; left: 0; right: 0; height: 60px; /* 1px till vänster: träffytan är 44px runt en 19px ikon, så de återstående 12,25px per sida gör hela marginalen. Ikonen hamnar då 13,25px från skärmkanten – Facebook ligger på ~13. */ padding: 0 6px 0 1px; z-index: 2400; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(45, 45, 52, 0.07); } /* ── Hamburgaren ──────────────────────────────────────────────────── */ .appbar-meny { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none; border-radius: 12px; color: #4a4a4a; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease; } .appbar-meny svg { /* 26px ger 19px synlig bredd med den nya pathen – samma som Facebook. 22px gav 14,7px, vilket läste som en mindre och tätare ikon. */ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .appbar-meny:active { background: rgba(255, 77, 122, 0.1); } /* ── Loggan ─────────────────────────────────────────────────────────── 22px i stället för 25px: hamburgaren och språkknappen tar plats i kanterna, och loggan ska sitta lugnt mellan dem – inte dominera. */ .appbar-logga { flex: none; display: flex; align-items: center; text-decoration: none; } .appbar-logga img { height: 22px; width: auto; display: block; } /* Skjuter språkknappen till högerkanten. */ .appbar-fyllnad { flex: 1; } /* ── Språket ────────────────────────────────────────────────────────── Flaggan ritas som SVG av `flaggaSvg()` i sprak.js – flaggemoji visas som bokstavspar på Windows och duger inte. */ .appbar-sprak { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease; } .appbar-sprak:active { background: rgba(255, 77, 122, 0.1); } /* ⚠️ Rektangulär, inte rund. Flaggorna ritas i 3:2 (viewBox 60×40), så en cirkel klipper bort kanterna på dem – och det svenska korset hamnar fel i förhållande till dukens mitt. ── Kanten ──────────────────────────────────────────────────────────── Den grå 1px-ramen som satt här förut löste ett verkligt problem men syntes för mycket: **Finlands flagga är vit med blått kors och Danmarks har vita fält**, så utan någon kant flyter de ut i den vita app-baren och ser trasiga ut. Sveriges är blå ända ut och behövde den aldrig – därför såg ramen bara ut som en grå inramning där. Lösningen är en skugga i stället för en linje: flaggan LYFTER från ytan och får en kant av ljuset, inte av en ritad ram. Kvar finns bara en halvpixel kontur, som räcker för Finland utan att synas på Sverige. 0.5px renderas som en subpixel på telefonskärmar – mjukare än 1px kan bli. */ .appbar-sprak .flagga { /* Större än desktopens 24×16: på mobil är flaggan enda kvarvarande statusvisning i toppen, och tummen ska hitta den. */ width: 29px; height: 19.5px; display: block; border-radius: 4px; box-shadow: 0 1.5px 4px -1px rgba(45, 45, 52, 0.3), 0 0 0 0.5px rgba(45, 45, 52, 0.09); } /* ── Sidomenyn ──────────────────────────────────────────────────────── Glider in från vänster, samma sida som hamburgaren. 82% bredd så att en remsa av sidan syns kvar – det visar att menyn ligger OVANPÅ och går att stänga, i stället för att kännas som en ny sida. */ html.inloggad .sidomeny { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 82%; max-width: 340px; z-index: 3200; background: #fff; box-shadow: 2px 0 28px -8px rgba(45, 45, 52, 0.4); transform: translateX(-102%); transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); } html.inloggad .sidomeny.oppen { transform: translateX(0); } html.inloggad .sidomeny-tacke { display: block; position: fixed; inset: 0; z-index: 3100; background: rgba(28, 28, 34, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } html.inloggad .sidomeny-tacke.oppen { opacity: 1; pointer-events: auto; } /* Namnet överst, som i Facebooks meny. Dectorium har ingen profilbild – initialen i en korallcirkel gör samma jobb utan att kräva en. */ .sidomeny-topp { display: flex; align-items: center; gap: 13px; padding: 22px 20px 18px; border-bottom: 1px solid #f0f0f3; } .sidomeny-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #ff6b90, #ff4d7a); color: #fff; font-size: 18px; font-weight: 700; text-transform: uppercase; } .sidomeny-namn { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; color: #3a3a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidomeny-rad { display: flex; align-items: center; gap: 15px; padding: 15px 20px; font-size: 15.5px; font-weight: 500; color: #3a3a3a; text-decoration: none; background: none; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.16s ease; } .sidomeny-rad:active { background: #fdf3f6; } .sidomeny-rad svg { width: 21px; height: 21px; flex: none; fill: none; stroke: #ff4d7a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sidomeny-avdelare { height: 1px; margin: 8px 20px; background: #f0f0f3; border: none; } /* Logga ut hamnar sist och i grafit, inte korall: det är en utgång, ingen genväg, och ska inte konkurrera med raderna ovanför. */ .sidomeny-rad.utgang svg { stroke: #8a8a92; } .sidomeny-rad.utgang { color: #6d6d75; } @media (prefers-reduced-motion: reduce) { html.inloggad .sidomeny, html.inloggad .sidomeny-tacke { transition: none; } } }