/* ========================================================================== LODD Designspråket for Nordiva, tegnet 25. september 2026 og brukt her for første gang fra bunnen av. De andre flatene får det som en overstyring over et arvet stilark; denne har ingen arv å rydde bort. Tre regler bærer hele filen: 1. SKALAER MED TRINN. Åtte skriftstørrelser, åtte lufttrinn, tre radiuser. Ingenting imellom. Det er repetisjonen som leses som presisjon, ikke verdiene i seg selv. 2. KANT I STEDET FOR SKYGGE. En hårstrek bærer strukturen. Skygge er forbeholdt det som faktisk flyter over noe annet. Har noe skygge, ligger det over noe. 3. LODDLINJA. Én loddrett hårstrek går gjennom hver skjerm på samme sted. Til venstre for den ligger margen med maskinelle verdier, til høyre ligger saken. Status er et lite segment som sitter PÅ linja, så en ren linje betyr at ingenting krever noe av deg. ========================================================================== */ /* Temaet står på roten i drift: tema.js setter data-tema på før stilarket lastes. At begge blokkene ALLTID også svarer på et vanlig element, er for at én side skal kunne vise begge temaer ved siden av hverandre (statisk/komponenter.html). Uten det måtte prøvesida ha hatt en kopi av hver farge, og en kopi av en farge er en farge som blir gammel. */ :root, [data-tema="lys"] { --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --t-1: 11px; --t-1-h: 16px; --t-2: 12px; --t-2-h: 18px; --t-3: 13px; --t-3-h: 20px; --t-4: 15px; --t-4-h: 22px; --t-5: 17px; --t-5-h: 26px; --t-6: 20px; --t-6-h: 26px; --t-7: 26px; --t-7-h: 32px; --t-8: 34px; --t-8-h: 40px; /* LUFTEN, OG HVA HVERT TRINN BETYR Åtte trinn er for mange å velge mellom hver gang. Derfor har hvert trinn en jobb, og jobben er det som avgjør, ikke tallet. Skrevet ned 27. september 2026, fordi det til da bare sto i hodet på den som tegnet forrige skjerm, og neste person gjettet. --s-1 2px inne i én ting. Streken, segmentet, avstanden mellom et tegn og tallet ved siden av. Aldri mellom to ting. --s-2 4px mellom to ord som hører sammen. Ikonet og teksten i en rad, innerlufta i en pille, to knapper som er ett valg. --s-3 8px mellom to linjer i den samme tingen. Etiketten og feltet, tittelen og underteksten, to knapper i en rad. --s-4 12px radens egen innerluft, og avstanden mellom to kolonner. --s-5 16px mellom to ting i den samme bolken, og sidelufta på telefon. --s-6 24px mellom to bolker inne i den samme seksjonen. --s-7 32px mellom to seksjoner, og spaltens egen sideluft. --s-8 48px pausen. Under den siste seksjonen, og i en skjerm man ser sjelden og gjør én ting på. TRE NIVÅER PÅ EN SKJERM, IKKE ÅTTE Innenfor en ting: --s-2 og --s-3. Mellom to ting: --s-5 og --s-6. Mellom to seksjoner: --s-7. Trenger en skjerm et fjerde nivå, er det som regel en seksjon for lite, ikke et lufttrinn for lite. DE TO STANDARDENE Mellom to RADER: ingen marg. Radene deler hårstrek og har --s-3 som sin egen innerluft over og under (.rad .inn). Luft mellom rader ville løst opp lista i frittstående kort, og da må øyet finne venstrekanten på nytt for hver linje. Mellom to SEKSJONER: --s-7 over seksjonshodet og --s-5 under det (.seksjon). Det ene tallet står i .seksjon og skal ikke gjentas per skjerm. */ --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px; /* VERSJON 2, RETNING B (30. september 2026, docs/helhet/spes-design-v2.md del 4). Radiusene gikk ett trinn opp og fikk et fjerde, fordi kortene og knappene skal se myke og trykkbare ut, som hos Shopify. Fortsatt bare fire, og vakta teller alt annet. */ --r-1: 3px; --r-2: 8px; --r-3: 12px; --r-4: 16px; /* BEVEGELSE. Alt i grensesnittet er under 300ms, og hver kurve har sin jobb. ease-in finnes ikke her: den starter langsomt, i nøyaktig det øyeblikket man ser etter om flata svarte i det hele tatt. --kurve noe kommer til syne eller endrer seg på stedet --kurve-mot noe flytter seg over skjermen, og skal ha litt fart med seg inn i målet --kurve-ut noe forsvinner. Ut skal alltid gå raskere enn inn: det som er på vei bort har man alt sluttet å se på. */ --tid-1: 90ms; --tid-2: 140ms; --tid-3: 180ms; /* De tre lange tidene er til det som må ses mens det skjer. --tid-4 er raden som glir til Ferdig og det som lander etter et dra: på 180ms leses en rad som flytter seg 300px som et blink, ikke som bevegelse. --tid-5 og --tid-6 er sidekickens landing og sving. */ --tid-4: 240ms; --tid-5: 900ms; --tid-6: 2400ms; --kurve: cubic-bezier(.2, 0, 0, 1); --kurve-mot: cubic-bezier(.32, .72, 0, 1); --kurve-ut: cubic-bezier(.4, 0, 1, 1); /* Margen er 72px bred, linja står på 72. Alt innhold starter 20px inn fra den. Tallet gjentas i hver skjerm, så det bor i ett token. */ --marg: 72px; /* Innrykket fra loddlinja til teksten. Ett tall, brukt overalt, så margen og innholdet flukter på hver eneste skjerm. */ --inn: 16px; /* Ruta fra høyre er like bred i hele skallet, så en detalj i Oppgaver og en i et system åpner seg likt (docs/helhet/spes-navigasjon.md 4.4). */ --rute-bredde: 480px; /* Løftet på det som dras. Ett tall, så lista og tavla løfter likt. */ --loft: scale(1.02); /* Bredden på en kolonne i tavla, og på framdriftsstreken i underoppgave-merket (docs/helhet/spes-oppgaver-v2.md 1.1). */ --kolonne-bredde: 280px; --framdrift-bredde: 40px; /* Høyden på selve topplinja, uten klokka og signalet på iPhone. På telefon legger chatten seg under den, og må kjenne tallet. */ --topplinje: 52px; /* Bredden på chatpanelet. Den kommer utenfra, fra hvor bredt det er dratt, og huskes i localStorage, så den kan ikke være et trinn i skalaen. Gulvet og taket holder den brukbar: smalere enn 320 blir en melding til ett ord per linje, bredere enn 560 spiser panelet skjermen det står ved siden av. */ --chat-bredde: 380px; --chat-bredde-minst: 320px; --chat-bredde-mest: 560px; /* Den smaleste spalten vi vil sitte igjen med når panelet står åpent. Den kommer utenfra, som de tre over: det er bredden på en telefon, ikke et trinn i skalaen. Den bor her og ikke i os.js, for det er den fjerde verdien i det samme regnestykket, og en av fire som bor et annet sted er den som blir glemt den dagen taket justeres. */ --innhold-minst: 375px; /* MENYEN. Én meny ytterst til venstre, 240 px, alltid. Fra 27. til 30. september 2026 sto delene til systemet i en egen spalte på 200 px ved siden av, og hovedmenyen krympet for å holde summen under en fjerdedel av skjermen. Theodor valgte 30. september å legge delene under systemet i hovedmenyen, som i Shopify, og da er det bare én meny å regne på: 240 av 1600 er 15 %, 240 av 1280 er 19 % (docs/helhet/spes-inndeling.md 1). --undermeny og --hovedmeny-minst er borte, og sjekk-skall.mjs stopper dem om de kommer tilbake. 240 i versjon 2: ikon, navn og tall skal stå på én linje uten klipp, også «Nye konsepter 12» (spes-design-v2.md 4). */ --hovedmeny: 240px; /* Streken under den valgte fanen i .faner (faner.js). Egen verdi fordi vakta stopper frie piksler, og fordi 2 er tykkere enn en hårstrek med vilje: den skal ses som et valg, ikke som en kant. */ --fane-strek: 2px; /* Høyden på ett punkt i menyen med mus (med finger er gulvet 44), og den ene størrelsen ikoner har i menyer, rader og knapper. */ --menypunkt: 36px; --ikon: 18px; /* Søkefeltet midt i topplinja, og skuffen menyen blir under 900 px. */ --sokefelt: 360px; --skuff: 280px; /* Kompisen i hjørnet (OS-et): knappen på 44, og bredden med navnet «Sidekick» ved siden av over 1200 px. Spalten holder like mye plass til høyre. */ --kompis: 44px; --tenker: 16px; --tenker-prikk: 4px; --kompis-bredde: 132px; /* h1 og etikettene i Geist. Serifen blir bare i hilsenen i Sidekick, og mono bare på tall (spes-design-v2.md 2, regel 2). */ --h1-font: var(--font-ui); --etikett-font: var(--font-ui); /* Bredden på vindusknappene i appen på Mac. Den kommer fra macOS, ikke fra skalaen vår, og kan ikke rundes til et trinn: treffer den ikke, ligger merket enten oppå en knapp eller for langt inne. */ --knapper-mac: 78px; /* Diagramsettet (spes-hjem-lager-v3.md 5.6). Mål som ikke er rytme, men geometri i en graf: høyden på en trend, tykkelsen på en strek, ringens mål. Samme i begge temaer. */ --diagram-h: 120px; --diagram-h-liten: 40px; --strek: 8px; --strek-tynn: 2px; --punkt: 6px; --ring: 112px; --ring-liten: 56px; --ring-tykk: 12px; --ring-tykk-liten: 6px; --rute: 14px; --rute-liten: 12px; --lok-celle: 150px; /* Nye konsepter, Annonser og Hva andre kjører (1. oktober 2026): bredden på gnistlinja i en annonserad, tallspalten til høyre, og den minste bredden på et referansekort før rutenettet bryter. */ --kon-gnist: 96px; --kon-belop: 96px; --kon-ref: 280px; /* Den minste bredden på en helseflis i Drift før rutenettet bryter. */ --drift-flis: 180px; --maaler-h: 10px; --maaler-punkt: 16px; --farge-merke: 10px; --setning-bredde: 360px; --marked-tall: 96px; /* Minste trykkflate med finger, som i Apples retningslinjer. */ --finger: 44px; /* Fyllene i diagrammene og varmekalenderens fire trinn er alfa av merkets blå, ikke nye farger. */ --diagram-fyll: rgb(var(--brand-rgb) / .08); --diagram-mottatt: rgb(var(--brand-rgb) / .18); --varme-1: rgb(var(--brand-rgb) / .12); --varme-2: rgb(var(--brand-rgb) / .3); --varme-3: rgb(var(--brand-rgb) / .55); --varme-4: rgb(var(--brand-rgb) / .85); --brand: #0E1B4D; --brand-rgb: 14 27 77; --brand-hover: #16265F; --brand-blekk: #FFFFFF; /* MERKET SOM TEKST, IKKE SOM FLATE. #0E1B4D er logoens blå, og den er riktig som fyll i en knapp: hvit tekst på den gir 16,4 i kontrast, og den leses som Nordiva. Som TEKST på papiret gir den 15,0, og da leses den ikke som blå lenger. Den leses som svart. Mørkt tema har ikke det problemet: der er merket #4C7DFF og gir 5,2 mot papiret, altså en farge man ser. Derfor et eget token for merket som tekst, satt til den lysheten som gir 5,2 mot det nye papiret, nøyaktig samme tall som mørkt tema. Da ser en lenke like blå ut i begge temaer. I mørkt tema er de to den samme fargen, fordi problemet ikke finnes der. */ --brand-tekst: #2B5CE0; /* NØYTRALENE LENER MOT MERKET, IKKE BORT FRA DET. Til 27. september 2026 var de lyse nøytralene varme: papiret, flatene og strekene trakk mot gult, mens blekket var marineblått. Mørkt tema var gjennomført blått, og de to temaene så ut som to ulike produkter med samme logo på. Om morgenen 27. september 2026 fikk nøytralene et blått anstrøk, etter ønske fra Theodor om at merkets farge skulle gå igjen også i lyst tema. Samme kveld så han det på skjermen og sa nei: «når det først skal være lyst kan det ikke være blått brukersnitt.» Han har rett, og det er verdt å skrive ned hvorfor, så ingen prøver igjen om et halvt år. Et anstrøk i et MØRKT tema leses som dybde. Det samme anstrøket i et lyst tema leses som at skjermen er feilkalibrert. Flaten er nesten hvit, og øyet bruker den som sin egen hvitreferanse: alt som ikke er nøytralt der, ser ut som en feil, ikke som et valg. Nå er hver nøytral EKSAKT nøytral, R lik G lik B. Verdien er snittet av de tre kanalene i den blå varianten, så lysheten og dermed kontrastene står der de sto. Merket er fortsatt blått, og det er der det hører hjemme: i knappen, i lenken, i det som er valgt. En farge som betyr noe når den brukes på det som handler, mister betydningen når den ligger i bakgrunnen også. --flate står på rent hvitt: den ER det som løfter seg fra papiret. */ /* Papiret gikk ett trinn ned 30. september 2026, så hvite kort løfter seg fra det (retning B). Verdiene i spesifikasjonen hadde et blått anstrøk (#F1F1F2, #5C5C63); her er de gjort EKSAKT nøytrale med samme lyshet, av grunnen som står over. */ --paper: #F1F1F1; --flate: #FFFFFF; --flate-2:#F4F4F4; --flate-3:#E6E6E6; --line: #E5E5E5; --line-2: #D9D9D9; --line-3: #C3C3C3; --ink: #1A1A1A; --ink-2: #3B3B3B; /* 6,0 mot papiret og 6,6 mot den hvite flaten. Den sto på #6B6B6B til 30. september 2026 og ga 4,6 mot menyens flate: over grensa, men blass (spes-design-v2.md 1.7). */ --ink-3: #5D5D5D; --gronn: #1B6B3A; --rod: #9B2226; --amber: #8A5B00; --violett:#5B3D8F; /* De svake er fyll bak et tall eller en pille, med den sterke som blekk. --brand-svak er det valgte: segmentet og ringen i en tom tilstand. */ --brand-svak: rgb(14 27 77 / .08); --amber-svak: #FBF1D9; --gronn-svak: #E3F1E8; --rod-svak: #F9E3E3; --relieff: inset 0 1px 0 rgb(255 255 255 / .70); /* DEN ENE SKYGGEN KORTENE DELER (retning B). 4 og 7 prosent sort, altså kantens jobb gjort mykere. I mørkt tema synes ikke skygge, og der er den en kant i stedet. Alt som faktisk flyter har fortsatt --over. */ --over-lett: 0 1px 0 rgb(0 0 0 / .04), 0 1px 3px rgb(0 0 0 / .07); --kort-strek: transparent; --over: 0 1px 2px rgb(14 27 77 / .08), 0 8px 24px rgb(14 27 77 / .12); /* Teppet bak et overlegg. Det er den samme mørke flaten i begge temaer, fordi det som ligger over skal løftes fram uansett, men fargen står i begge blokkene: en farge som bare finnes i den ene, blir borte den dagen den andre endres. */ --teppe: rgb(10 15 31 / .38); /* Håndtaket man drar i, når pekeren er på det. Merkefargen dempet, i begge temaer, så den leses mot både papir og mørk flate. */ --handtak: rgb(14 27 77 / .35); --fokus: 0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .38); /* Skjermen bak video og bilder er mørk i begge temaer. Et klipp skal bedømmes på sin egen eksponering, ikke på flaten rundt. */ --skjerm: #14161C; /* Personene i chatten, i samme rekkefølge som FARGER i functions/api/_felles.js. Avataren er initialene på denne fargen. 2 og 4 er mørkere siden 28. september 2026: med hvit bokstav ga de 3,78 og 3,67 i kontrast, under kravet 4,5. Samme tone, lavere lyshet, nå 4,63 og 4,64. Nettleserprøven i videoportalen fant det. */ --person-0: #0E1B4D; --person-1: #1F7A5A; --person-2: #A46717; --person-3: #6B4FC8; --person-4: #257DA1; --person-5: #C2457A; /* Chatten: sidefeltet i full visning, en festet melding, en omtale og meldingen det nettopp ble hoppet til. De varme er amber, dempet ned til en flate: noe er lagt fram for deg. */ /* Menyen har sin egen flate i versjon 2, ett trinn under papiret, så den leses som en ting for seg (retning B). Hover der er ett trinn til. */ --sidefelt: #EBEBEB; --sidefelt-hover: #E0E0E0; --festet: #FBF5E6; --omtale: rgb(14 27 77 / .08); --omtale-meg: #FCEFCB; --markert: #FCF0D2; /* Tekst og ikoner PÅ en mørk flate, som navnet og den dempede mikrofonen over et videobilde. Flaten er den samme i begge temaer, så fargen er det også, men den står i begge blokkene: en farge som bare finnes i den ene, blir borte den dagen den andre endres. */ --rod-paa-morkt: #F08A85; } :root[data-tema="mork"], [data-tema="mork"] { /* Merkets blå er lysere her, og trinnene må være tettere for å synes mot --flate (spes-hjem-lager-v3.md 5.4). */ --varme-1: rgb(var(--brand-rgb) / .18); --varme-2: rgb(var(--brand-rgb) / .38); --varme-3: rgb(var(--brand-rgb) / .62); --varme-4: rgb(var(--brand-rgb) / .95); --brand: #4C7DFF; --brand-rgb: 76 125 255; --brand-hover: #6A92FF; --brand-blekk: #0A0F1F; /* Se forklaringen i det lyse temaet: der er merket for mørkt til å leses som en farge når det er tekst. Her er det alt en farge man ser, så de to er den samme. */ --brand-tekst: #4C7DFF; --paper: #0A0F1F; --flate: #141B2E; --flate-2:#1A2238; --flate-3:#212B44; --line: #1F2739; --line-2: #2A3349; --line-3: #3A4560; --ink: #E9EEFB; --ink-2: #C3CBE0; --ink-3: #939CB5; --gronn: #5FD99B; --rod: #F08A85; --amber: #E8B75B; --violett:#B79BEC; --brand-svak: rgb(76 125 255 / .16); --amber-svak: #2C2410; --gronn-svak: #12301F; --rod-svak: #33181A; --relieff: inset 0 1px 0 rgb(255 255 255 / .045); --over-lett: 0 0 0 1px var(--line); --kort-strek: var(--line); --over: 0 1px 2px rgb(0 0 0 / .45), 0 8px 24px rgb(0 0 0 / .38); --teppe: rgb(10 15 31 / .38); --handtak: rgb(76 125 255 / .35); --fokus: 0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .45); --skjerm: #05091C; --person-0: #4C7DFF; --person-1: #3DB58A; --person-2: #D99A3E; --person-3: #9579E6; --person-4: #45AED6; --person-5: #DD6A9C; --sidefelt: #0D1326; --sidefelt-hover: #1A2238; --festet: #1E1A12; --omtale: rgb(76 125 255 / .16); --omtale-meg: #3A2F14; --markert: #33291A; --rod-paa-morkt: #F08A85; } /* «hidden» skal bety skjult. Standardregelen taper mot enhver annen display-regel, og da står det knapper på skjermen som ikke gjør noe. */ [hidden] { display: none !important; } * { box-sizing: border-box; } /* GRUNNLAGET PÅ TELEFON Fire ting som skiller en flate som kjennes installert fra en nettside i en nettleser, og som ingen legger merke til før de mangler: tap-highlight er den grå firkanten Safari og Chrome maler over alt man trykker på. Den følger ingen av våre radiuser og blinker i en farge vi ikke eier. Trykkflatene svarer selv, med :active. overscroll-behavior stopper at et drag nedover blir til nettleserens oppdatering av siden. Skallet ruller ikke selv (se .ramme), så et drag som ikke treffer en rullende flate skal ikke gjøre noe i det hele tatt. Hver egen rullende flate har contain, så rullingen ikke lekker ut i naboen når man når bunnen. user-select står IKKE her. Folk kopierer nøkkelnavn og økt-id fra radene, og et body uten tekstmerking tar det fra dem. Den står bare på selve trykkflatene, der et langt trykk ellers markerer teksten i en knapp i stedet for å trykke den. */ html { -webkit-text-size-adjust: 100%; height: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } body { margin: 0; min-height: 100%; overscroll-behavior: none; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-4); line-height: var(--t-4-h); -webkit-font-smoothing: antialiased; } :root[data-tema="mork"] body { background: radial-gradient(1100px 620px at 12% -8%, rgb(var(--brand-rgb) / .20), transparent 62%), radial-gradient(900px 520px at 92% 108%, rgb(var(--brand-rgb) / .11), transparent 60%), var(--paper); background-attachment: fixed; } h1, h2, h3 { margin: 0; font-weight: 600; } /* h1 i Geist 26/600 fra versjon 2: den leses bedre i en app enn 34 px serif over en liste. Serifen blir i hilsenen i Sidekick (spes-design-v2.md 5). */ h1 { font-family: var(--h1-font); font-weight: 600; font-size: var(--t-7); line-height: var(--t-7-h); letter-spacing: -.01em; } h2 { font-size: var(--t-7); line-height: var(--t-7-h); letter-spacing: -.01em; } h3 { font-size: var(--t-6); line-height: var(--t-6-h); letter-spacing: -.005em; } p { margin: 0 0 var(--s-4); } a { color: var(--brand-tekst); text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration: none; } } :focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-2); } /* En overskrift som får fokus fra koden, ved skjermbytte, skal ikke få ring. Fokuset er der for skjermleseren, som skal lese hvor man havnet, og ikke for øyet. Uten denne regelen tegnes en boks rundt «Oversikt» hver gang en del åpnes. Dempingen sto i kreatørpanelets bro.css til 27. september, men hører hjemme her, så hvert system som bytter skjerm får den. */ h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- tallene -------------------------------------------------------------- TO KLASSER, OG FORSKJELLEN MELLOM DEM Tabellsifre (tabular-nums) gir hvert siffer den samme bredden. Det er laget for KOLONNER: da står enerne over enerne nedover lista, og øyet kan sammenligne to rader uten å lese dem. Uten dem danser tallene sidelengs fra rad til rad. På ETT stort tall i en overskrift gjør de det motsatte. En ener som er like bred som en åtter får luft på hver side som ikke hører til, og rundt komma og tusenskille blir det hull. Tallet er det eneste på linja, så det er ingenting å stille det i lodd med, og da er det bare skadet. .tall-lodd i en kolonne eller en liste. Tabellsifre PÅ. .tall-stort ett tall, i overskriftsstørrelse. Tabellsifre AV. Grensen i praksis: over var(--t-3) er et tall som regel alene, og da er det .tall-stort. Alle sytten stedene Lodd ellers bruker tabular-nums er små maskinelle verdier i mono, og de er kolonner hver eneste en. */ .tall-lodd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .tall-stort { font-size: var(--t-8); line-height: var(--t-8-h); font-weight: 600; letter-spacing: -.01em; /* Det motsatte av tabular-nums, og satt med vilje og ikke utelatt: står det ingenting her, arver tallet tabellsifrene fra en .mono eller en .tall-lodd rundt seg, og da er feilen tilbake uten at noen ser hvor den kom fra. */ font-variant-numeric: normal; font-feature-settings: 'tnum' 0; } .etikett { /* Ord i Geist, tall i mono (spes-design-v2.md 2, regel 2). Etiketten sto i mono versaler på 11 px til 30. september 2026, og det var den som gjorde menyene tekniske og tunge. */ font-family: var(--etikett-font); font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; letter-spacing: .02em; color: var(--ink-3); margin: 0; } .svak { color: var(--ink-3); } .enhet { color: var(--ink-3); } /* --- knapper -------------------------------------------------------------- Ett primitiv, tre roller, to størrelser. Gulvet er 44px, fordi det er det en finger trenger. Tetthet hentes fra skrift og kanter, aldri fra å krympe trykkflater. SVARET PÅ ET TRYKK er scale(.97), ikke mindre. Den sto på .985 til 27. september 2026, og forskjellen mellom 1 og .985 er under en piksel på en knapp på 44: øyet ser den ikke, og da er det ingen tilbakemelding, bare en linje kode som later som. Under .98 må den være for å telle. Fargeskiftet er en overgang, trykket er det ikke: et trykk skal kjennes samtidig med fingeren. Derfor står transform utenfor transition-lista. */ .knapp { font: inherit; font-size: var(--t-4); font-weight: 600; min-height: 44px; padding: 0 var(--s-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); border: 1px solid var(--brand); border-radius: var(--r-2); background: var(--brand); color: var(--brand-blekk); cursor: pointer; text-decoration: none; touch-action: manipulation; user-select: none; transition: background var(--tid-1) var(--kurve), border-color var(--tid-1) var(--kurve); } @media (hover: hover) and (pointer: fine) { .knapp:hover { background: var(--brand-hover); border-color: var(--brand-hover); } } .knapp:active { transform: scale(.97); } .knapp[disabled] { opacity: .5; cursor: not-allowed; } .knapp[disabled]:active { transform: none; } .knapp.full { width: 100%; } .knapp.rolig { /* Hvit med den lette skyggen i stedet for kant, som hos Shopify (retning B). I mørkt tema er skyggen en kant. */ background: var(--flate); border-color: transparent; color: var(--ink); box-shadow: var(--over-lett); } @media (hover: hover) and (pointer: fine) { .knapp.rolig:hover { background: var(--flate-2); border-color: transparent; } } .knapp.naken { background: none; border-color: transparent; color: var(--ink-2); font-weight: 500; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .knapp.naken:hover { background: var(--flate-3); border-color: transparent; } } .knapp.liten { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-3); font-weight: 500; } .knapperad { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* TRYKKFLATENE touch-action: manipulation slår av dobbelttrykk-for-å-zoome på akkurat disse flatene. Uten den venter nettleseren 300ms på om trykket var det første av to, og et grensesnitt som svarer et tredjedels sekund for sent kjennes tregt uten at man klarer å si hvorfor. user-select: none står HER og ikke på body: et langt trykk på en knapp skal trykke den, ikke markere ordet inni. På radene og i teksten skal markering fortsatt virke, for der kopierer folk nøkkelnavn og økt-id. .chathandtak har touch-action: none like under, og den vinner: håndtaket drar en bredde, og da skal fingeren ikke rulle siden samtidig. */ button, [role="button"], summary { touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* En rad som er en lenke er også en trykkflate, men teksten i den skal kunne merkes og kopieres. Derfor bare touch-action her. */ a.rad, a.knapp { touch-action: manipulation; } /* Luften over en knapperad som følger et skjema. Sto som .luft-over, en klasse brukt ett sted: en luftklasse ved siden av en luftskala er et trinn til, og da er det ni. --s-5 er trinnet mellom to ting i den samme bolken, og det er nettopp det knapperaden er. */ .loggkort .knapperad { margin-top: var(--s-5); } /* --- felt ----------------------------------------------------------------- */ label { display: block; font-size: var(--t-3); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-3); } /* SEKSTEN PIKSLER, IKKE FEMTEN. iOS Safari zoomer inn på et felt med mindre skrift enn 16px, og zoomer ikke ut igjen når man er ferdig: brukeren blir sittende med en beskåret side. --t-5 er 17px og nærmeste trinn over grensen. Løsningen er ALDRI user-scalable=no, som tar fra folk muligheten til å forstørre. */ input[type=email], input[type=text], input[type=search], textarea, select { font: inherit; font-size: var(--t-5); width: 100%; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink); box-shadow: var(--relieff); } input:focus { outline: none; border-color: var(--brand-tekst); box-shadow: var(--fokus); } input::placeholder { color: var(--ink-3); } .kodefelt { font-family: var(--font-mono); font-size: 28px; letter-spacing: .3em; text-align: center; min-height: 56px; } .feilmelding { color: var(--rod); font-size: var(--t-3); line-height: var(--t-3-h); margin: var(--s-3) 0 0; } .feilmelding:empty { display: none; } /* En bekreftelse er ikke en feil. «Farge er informasjon» i CLAUDE.md: rødt skal bety at noe gikk galt, og «Lenken er kopiert.» gjør ikke det. Samme plass og samme størrelse, bare rolig farge. */ .bekreftelse { color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); margin: var(--s-3) 0 0; } .bekreftelse:empty { display: none; } /* --- innlogging ----------------------------------------------------------- Romsligere enn arbeidsflaten med vilje. Dette er en skjerm du ser sjelden, gjør én ting på, og ofte på telefon. */ .loggside { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-5); } .loggkort { width: 100%; max-width: 420px; padding: var(--s-8) var(--s-7) var(--s-7); background: var(--flate); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--over); } .loggkort h1 { font-size: var(--t-8); margin-bottom: var(--s-3); } .loggkort .etikett { margin-bottom: var(--s-5); } .loggkort .ingress { color: var(--ink-3); font-size: var(--t-4); margin-bottom: var(--s-6); } .loggkort .felt { margin-bottom: var(--s-5); } /* --- skallet -------------------------------------------------------------- */ /* SPALTEN RULLER, IKKE SIDEN. Skallet fyller vinduet og ruller aldri selv. Det er .innhold som har sin egen rulleposisjon, som hovedspalten i Slack og Linear, og chatpanelet ligger utenfor den. Grunnen står i en måling fra 26. september 2026: da HELE siden rullet, endret chatpanelet dokumenthøyden hver gang det ble åpnet eller lukket. På Rutiner falt høyden fra 1680 til 1134, nettleseren klemte rulleposisjonen fra 700 til 334, og raden man leste sto 366px lenger nede etter én runde av og på. Nå rikker ikke dokumenthøyden seg. */ .ramme { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .topplinje { /* 52 er høyden på selve linja. Lagt på Hjem-skjermen kommer klokka og signalet på iPhone oppå siden, så linja vokser med akkurat den høyden og skyver innholdet ned. Utenfor en telefon er verdien 0. */ height: calc(var(--topplinje) + env(safe-area-inset-top, 0px)); flex: 0 0 auto; padding: 0 var(--s-5); /* Ingen strek under i versjon 2: topplinja er samme flate som papiret, og menyen under har sin egen (retning B). */ border-bottom: 1px solid transparent; display: flex; align-items: center; gap: var(--s-4); background: var(--paper); position: sticky; top: 0; padding-top: env(safe-area-inset-top, 0px); z-index: 20; } /* Merket er logoen, ikon og ordmerke, ikke ordet «Nordiva» i skrift (Theodor, 26. september 2026). To filer, fordi den blå forsvinner mot mørk bunn. Bildet er 413 x 60, så høyden bestemmer og bredden følger. */ /* Eget navn, ikke .merke: det er tellemerket i chatten, og logoen fikk en gul pille bak seg da de to møttes i sammenslåingen 26. september 2026. */ .merkelogo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } /* 16 og ikke 20 fra 4. oktober 2026 (Theodor: «krympe Nordiva logoen litt, slik at den passer bedre inn»). Da står den i høyde med teksten i søkefeltet og ikonene i linja. */ .merkelogo .logo { display: block; height: 16px; width: auto; } /* Menyknappen står rett til høyre for logoen; luften er linjas egen gap. */ .merkelogo .logo.mork { display: none; } :root[data-tema="mork"] .merkelogo .logo.lys { display: none; } :root[data-tema="mork"] .merkelogo .logo.mork { display: block; } .topplinje .vokser { flex-grow: 1; } /* Ikonknappene i topplinja står rett på papiret, uten kant: det er søket i midten som er flaten man ser etter, og tre rammer ved siden av det ble fire ting som ropte like høyt. Kanten kommer på hover. */ .topplinje .ikonknapp { border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); } @media (hover: hover) and (pointer: fine) { .topplinje .ikonknapp:hover { background: var(--flate-3); border-color: transparent; } } /* SØKEFELTET I MIDTEN (spes-design-v2.md 4). Det er en knapp som ser ut som et felt, og den åpner det samme som Cmd og K: «Hopp til» i chatten, som finner samtaler og personer. Ett søk, ikke to som finner ulikt. */ .sokefelt { display: inline-flex; align-items: center; gap: var(--s-3); width: var(--sokefelt); min-width: 0; flex: 0 1 var(--sokefelt); min-height: 36px; padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-2); background: var(--flate); box-shadow: var(--over-lett); color: var(--ink-3); font: inherit; font-size: var(--t-3); text-align: left; cursor: pointer; } .sokefelt > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sokefelt kbd { font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); color: var(--ink-3); padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-1); } @media (hover: hover) and (pointer: fine) { .sokefelt:hover { color: var(--ink-2); } } /* klikkflate-unntak: ruta er 32, men flata er 44. Knappen får usynlig luft på seg selv under @media (hover: none), med ::after rett under her: tre ruter på 44 i en topplinje på 375 ville dyttet «Logg ut» ut av linja. */ .ikonknapp { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink-3); cursor: pointer; box-shadow: var(--relieff); } @media (hover: hover) and (pointer: fine) { .ikonknapp:hover { color: var(--ink); border-color: var(--line-3); } } .ikonknapp svg { width: 16px; height: 16px; } .ikonknapp:active { transform: scale(.97); } /* 32px er under gulvet for en finger. På berøring legges det et usynlig lag utenpå knappen, så flata blir 44 uten at ruta vokser: tre ruter på 44 i en topplinje på 375 ville dyttet «Logg ut» ut av linja. Også under 600 px, uansett peker. Nettleserprøven fant 29. september 2026 topplinjeknappene på 30 × 32 uten det usynlige laget på 375: et smalt vindu er en telefon i praksis, og der skal flata aldri avhenge av at nettleseren melder berøring riktig. */ @media (hover: none), (pointer: coarse), (max-width: 599px) { .ikonknapp { position: relative; } /* Radene i sidemenyen er 34 med en peker, som er riktig tetthet for en liste man leser. Med en finger er 34 for lite, og da er det naboraden man treffer. */ .sidemeny button, .sidemeny a { min-height: 44px; } /* Søkefeltet er 36 med mus. Med en finger er gulvet 44, som ellers. */ .sokefelt { min-height: 44px; } /* 7 og ikke 6: laget måles fra innsiden av kanten. Når topplinja på 375 presser ruta ned til 30, ble flata 42 med 6, og en finger ved kanten traff linja bak (nettleserprøven, 29. september 2026). */ .ikonknapp::after { content: ''; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; } } /* CHATKNAPPEN. Tallet for uleste sitter PÅ ikonet, som i innboksikonet i Linear, ikke som en rad i menyen: chatten er ett sted du kan gå til uansett hvor du står, ikke et av systemene i lista. Amber betyr at noe venter på deg, her som på Hjem. Blekket er --paper, som snur med temaet: amber er mørk i lyst tema og lys i mørkt. */ .chatknapp { position: relative; } .chatknapp[aria-expanded="true"] { background: var(--flate-3); color: var(--ink); border-color: var(--line-3); } .chatknapp .tall { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 var(--s-2); border-radius: 999px; background: var(--amber); color: var(--paper); font-family: var(--font-mono); font-size: var(--t-1); line-height: 16px; font-variant-numeric: tabular-nums; text-align: center; } /* OPPDATERKNAPPEN (2. oktober 2026, spes-design-v2.md 7). En .ikonknapp som naboene, rett før chatten. Alt står under id-en, så den ikke er et nytt navn i Lodd. Trykket svarer med en gang (:active), før kallet er ferdig. Pila snurrer bare mens skjermen hentes (data-snurrer, satt av os.js når kallet er i gang), jevnt og lineært med bare transform, og os.js tar den av på hel runde. Gikk det galt, blir pila amber, som alt annet som venter på deg, og tittelen sier hva. data-av er en skjerm som ikke har meldt seg inn: usynlig, men den holder plassen, så søket og chatten står stille når du går mellom skjermene. */ #oppdater { transition: transform var(--tid-2) var(--kurve); } #oppdater:active { transform: scale(.92); } #oppdater[aria-disabled="true"] { cursor: progress; } #oppdater[aria-disabled="true"]:active { transform: none; } #oppdater[data-av] { visibility: hidden; } #oppdater[data-tilstand="feil"] { color: var(--amber); } #oppdater svg { transform-origin: 50% 50%; } #oppdater[data-snurrer] svg { animation: oppdater-snurr 1s linear infinite; } @keyframes oppdater-snurr { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* Ingen snurring og intet trykk som flytter: pila står og dempes mens det hentes, så det synes uten bevegelse. */ #oppdater:active { transform: none; } #oppdater[aria-busy="true"] svg { opacity: .5; } } .initialer { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--person-0); color: var(--brand-blekk); font-family: var(--font-ui); font-weight: 600; font-size: var(--t-2); } .kropp { flex-grow: 1; display: flex; min-height: 0; } /* MENYENE SKJØVET VEKK. Begge går samtidig, og innholdet tar plassen. display: none og ikke en bredde på null: en meny med bredde null har fortsatt knapper i tabrekkefølgen, og da tabber man gjennom åtte usynlige systemer før man kommer til innholdet. Ingen overgang. Dette er en bryter man slår titalls ganger om dagen, og spes-bevegelse.md 1 sier at det som skjer så ofte, ikke skal flytte på seg. Menyene er der, eller de er ikke der. */ body.menyer-av .sidemeny { display: none; } /* BRYTERNE I TOPPLINJA. Begge er .ikonknapp og arver form, størrelse og trykkflate derfra. Her står bare det som skiller dem. TEMAET. Ikonet viser MÅLET og ikke tilstanden: står flaten lyst, vises månen, fordi det er den man er på vei til. Det er samme regel som teksten i kontomenyen hadde mens bryteren bodde der. Begge ikonene ligger i HTML-en og velges med CSS, ikke med JavaScript. Da skifter ikonet i samme bilde som temaet, og ikke ett bilde etterpå. */ .temabryter .sol, .temabryter .mane { display: none; } :root[data-tema="lys"] .temabryter .mane { display: block; } :root[data-tema="mork"] .temabryter .sol { display: block; } /* MENYKNAPPEN. Er menyen borte, dempes strekene i ikonet, så ikonet sier hva som er av uten at noe flytter på seg. */ .menybryter[aria-expanded="false"] svg path { opacity: 0.3; } /* HOVEDMENYEN. Ytterst til venstre, og den tydeligste flaten i skallet: full skriftstørrelse (--t-4), sterkeste blekk på det som ikke er valgt (--ink-2), og flate bak det som er valgt. Delene til systemet som står åpent, står rett under det med innrykk (data-niva="2" under). Bredden er --hovedmeny, alltid. */ .sidemeny { width: var(--hovedmeny); flex: 0 0 var(--hovedmeny); /* Egen flate og ingen strek i versjon 2: menyen er et felt for seg, ett trinn under papiret, som hos Shopify (retning B). */ border-right: 1px solid transparent; background: var(--sidefelt); /* Ingen luft under: kontoraden nederst har sin egen, og skal kunne ligge helt inntil kanten når menyen over den rulles. */ padding: var(--s-4) var(--s-3) 0; display: flex; flex-direction: column; gap: var(--s-1); overflow-y: auto; } /* MENYEN RULLER FOR SEG SELV, OVER KONTORADEN. Med Lager åpen på 1280 x 800 lå Drift klemt ned mot kontoraden, og delvis under den, fordi raden var sticky i den samme rullende spalten (funnet 30. september 2026). Nå er punktene i #menyrull, som tar plassen som er igjen og ruller alene, og kontoraden står fast under. Ingenting ligger under kontoraden. Den negative sidemargen gir fokusringen og det hvite kortet plass inne i rulleflaten. Bare i OS-et: modulene har ingen #menyrull, og der gjelder regelen over som før. */ .sidemeny:has(> #menyrull) { overflow: hidden; } #menyrull { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-1); margin: 0 calc(var(--s-3) * -1); padding: 0 var(--s-3) var(--s-4); overflow-y: auto; overscroll-behavior: contain; } #menyrull > * { flex: 0 0 auto; } .sidemeny .etikett { padding: 0 var(--s-3); margin: var(--s-5) 0 var(--s-2); } .sidemeny .etikett:first-child { margin-top: 0; } .sidemeny button, .sidemeny a { font: inherit; font-size: var(--t-4); text-align: left; display: flex; align-items: center; gap: var(--s-3); min-height: var(--menypunkt); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .sidemeny button:hover, .sidemeny a:hover { background: var(--sidefelt-hover); color: var(--ink); } } /* Det valgte punktet er et hvitt kort på menyens flate, med blekk i 500. Til 30. september 2026 var det #EAEAEA på #F0F0F0, og det kunne ikke ses fra en meter (spes-design-v2.md 1.2). */ .sidemeny button[aria-current="true"] { color: var(--ink); font-weight: 500; } /* Står delene under systemet, er det den merkede delen som bærer kortet, og systemet over står i blekk og 500 uten flate. To kort over hverandre er ett for mye, og det er slik Shopify merker en underside. */ .sidemeny button[aria-current="true"]:not(:has(+ [role="group"][data-deler])) { background: var(--flate); box-shadow: var(--over-lett); } .sidemeny button[aria-current="true"] .menyikon { color: var(--ink); } /* NIVÅ TO. Delene til systemet som står åpent, rett under systemet i hovedmenyen, som i Shopify (docs/helhet/spes-inndeling.md 1, Theodor 30. september 2026). Bare navnet og tallet. Innrykket er det samme som ikonet og lufta etter det, så navnet på nivå to står rett under navnet på systemet: da leses det som en del av systemet over, uten en strek eller en overskrift som sier det. Et trinn ned i blekket (--ink-3) og i skriften (--t-3), og det valgte punktet får det samme hvite kortet som nivå én. Gruppa er et role="group" som os.js setter inn etter systemets knapp, med navnet «Deler av Video». */ .sidemeny [role="group"][data-deler] { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-1); } .sidemeny button[data-niva="2"] { padding-left: calc(var(--s-3) + var(--ikon) + var(--s-3)); font-size: var(--t-3); color: var(--ink-3); min-height: var(--menypunkt); } .sidemeny button[data-niva="2"][aria-current="true"] { color: var(--ink); } /* Menyen er tett med mus, som i Linear. Med en finger er den ikke det: 34 og 30 er under gulvet, og en meny man bommer på er en meny man slutter å bruke. Dette var det siste stedet i Lodd uten et slikt gulv, funnet 27. september 2026. */ @media (hover: none), (pointer: coarse) { .sidemeny button, .sidemeny a, .sidemeny button[data-niva="2"] { min-height: 44px; } } /* TALLET. Grått i en pille, fordi «Oppgaver 21» ikke venter på noen. Amber bare når tallet er noe som venter på deg (.venter), som på Hjem. */ .sidemeny .tall, .fane .tall { margin-left: auto; min-width: 20px; height: 20px; padding: 0 var(--s-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--flate-3); font-family: var(--font-mono); font-size: var(--t-2); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-3); } .sidemeny .tall.venter, .fane .tall.venter { background: var(--amber-svak); color: var(--amber); } .sidemeny .prikk { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; } /* KONTORADEN. Klassen heter .konto og ikke .kontorad, fordi sjekk-tak.mjs teller hvert toppnivånavn som slutter på «rad» som et listesystem, og dette er én rad, ikke en liste. Navnet skal ikke lyve for en vakt. Nederst i hovedmenyen, som i Claude Code: initialen, navnet, og et trykk åpner en meny oppover med det OS-et faktisk har. Den erstatter «Logg ut» i topplinja, og grunnen er at utlogging ikke er en handling man gjør ofte nok til å ha en egen knapp i den linja man ser hele dagen. Sticky og ikke en egen beholder rundt menyen over: raden er en flexboks i den samme rullende spalten, og margin-top: auto skyver den til bunnen også når menyen er kort. Den negative sidemargen gjør at hårstreken over den går helt ut til kantene av spalten, ikke bare til innerlufta. VELGEREN ER .sidemeny .konto OG IKKE BARE .konto. Raden er en knapp inne i sidemenyen, og «.sidemeny button» er mer spesifikk enn «.konto»: med bare klassenavnet vant menyknappenes «background: none», og raden ble gjennomsiktig. Det ses ikke på et skrivebord der ingenting ligger bak den, og det ses med én gang på telefon, der menyen ruller under den. Hjørnene: skarpe oppe, så hårstreken leser som én strek tvers over spalten, og Lodds egen radius nede, så raden ikke stikker ut av menyens avrunding. Ingen fri nullverdi i fila, som vakta krever. */ /* KONTORADEN. Navnet, og rollen under. Rollen sier hva du KAN her, og er det eneste stedet i skallet som sier det. «eier» skrives ut som det er: vi er to, og en tittel som later som vi er flere, er pynt. Egen kolonne rundt de to, fordi .konto selv er en rad: initialen til venstre, teksten til høyre, og teksten er to linjer. */ .kontotekst { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .kontorolle { font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); text-transform: capitalize; } .kontorolle[hidden] { display: none; } .sidemeny .konto { position: sticky; bottom: 0; z-index: 1; /* Den negative margen er menyens egen luft, --s-3, så streken går helt ut til kantene uten å gjøre spalten bredere enn seg selv. Med --s-4 her rullet skuffen sidelengs (nettleserprøven, 30. september 2026). Innerlufta på --s-5 setter initialen i lodd med ikonene over. */ flex: 0 0 auto; margin: auto calc(var(--s-3) * -1) 0; padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-2) var(--r-2); background: var(--sidefelt); display: flex; align-items: center; gap: var(--s-3); font: inherit; font-size: var(--t-4); color: var(--ink-2); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sidemeny .konto:hover { color: var(--ink); } .sidemeny .konto:hover .initialer { background: var(--brand-hover); } } .sidemeny .konto[aria-expanded="true"] { color: var(--ink); } .kontonavn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } /* Trepunktet ytterst til høyre sier at raden åpner en meny. */ .sidemeny .konto > .menyikon:last-child { margin-left: auto; } /* FANENE INNE PÅ EN SIDE. Én felles komponent i Lodd, tegnet av faner.js (docs/helhet/spes-inndeling.md 9). Det som ble slått sammen 30. september 2026, står som faner på siden i stedet for punkter i menyen: Status og Rutiner i Drift, Min konto og System i Innstillinger, og senere delene i Video, Kreatører, Nye konsepter og Lager. Rolig som Shopify og Asana: navnet i --ink-3, den valgte i --ink og 500 med en strek under på --fane-strek, og hårstreken --line under hele rada. Ingen kant rundt, ingen flate bak. Tallet er det samme som i menyen. Rada ruller sidelengs på telefon og brekker aldri, og er aldri en nedtrekksliste. */ .faner { display: flex; align-items: stretch; gap: var(--s-5); margin: 0 0 var(--s-6); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .faner::-webkit-scrollbar { display: none; } .faner:empty { display: none; } .fane { font: inherit; font-size: var(--t-4); display: inline-flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; min-height: var(--menypunkt); padding: 0; margin-bottom: -1px; border: 0; border-bottom: var(--fane-strek) solid transparent; background: none; color: var(--ink-3); white-space: nowrap; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .fane:hover { color: var(--ink); } } .fane[aria-selected="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); } .fane:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-1); } .fanepanel[hidden] { display: none; } @media (hover: none), (pointer: coarse) { .fane { min-height: 44px; } } .innhold { flex-grow: 1; min-width: 0; /* Pausen under den siste seksjonen er --s-8. På iPhone ligger streken som svelger opp appen nederst på skjermen, og uten env() havner den siste raden under den. */ padding: var(--s-7) var(--s-7) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); position: relative; /* Rullingen skal ikke lekke ut i skallet når man når bunnen av spalten. */ overscroll-behavior: contain; /* Rulleområdet. Se .ramme over: dokumenthøyden skal ikke rikke seg av at chatpanelet åpnes, og da må spalten bære rullingen selv. */ overflow: hidden auto; /* Innholdet kan være smalt selv om vinduet er bredt: chatpanelet tar av bredden. Derfor spør radene under om hvor bredt INNHOLDET er, ikke hvor bredt vinduet er. Uten dette la klokka seg oppå tittelen på Hjem første gang panelet sto åpent på en skjerm på 900. */ container-type: inline-size; container-name: innhold; /* LODDLINJA ER UTE AV SKALLET fra 30. september 2026. Den sto her som en bakgrunn gjennom hele spalten, og ga en egen kolonne til margen som ikke bar noe utenfor radene. Theodor kalte den «submenyen». Den lever videre inne i .rad, der margen bærer en nøkkel og status sitter som et segment (spes-design-v2.md 5). */ } .skjerm { display: none; } .skjerm.pa { display: block; } /* --- seksjonen ------------------------------------------------------------ MØNSTERET. En overskrift til venstre, en handling til høyre, og den samme lufta over og under hver gang. Det er det eneste seksjonshodet i Lodd, og det gjelder i alle tre systemene: skallet, videoportalen og kreatørpanelet. Theodor pekte på det 27. september 2026 og sa at det er dette som skal være gjennomgående, «plattformen må ha en helhet». Det erstatter .sidetopp (sidens toppoverskrift) og .bolk (etikett i margen pluss en forklaring). De var to former for den samme jobben, og to former er én for mye: da velger neste skjerm en tredje. FIRE PLASSER, ALLE VALGFRIE
Venter i margen, til venstre for linja

Utviklingen

overskriften tre ting forklaringen Se annonsene › handlingen, helt til høyre
Står det en h1 der, er det sidens toppoverskrift, og da faller lufta over bort: den kommer fra spalten. Det er :has(h1) og ikke en klasse til, fordi nivået på overskriften alt sier hva raden er. OVERSKRIFT ELLER MARGETIKETT? Dette er det ene valget skjermene tok feil, og regelen er: navnet på en del av skjermen er en OVERSKRIFT, ikke en margetikett. Margetiketten er bare for de korte kategorinavnene som gjentar seg nedover en liste med rader, som «Venter», «Gjort», «Alle», «Økter». h2 eller h3 i seksjonen navnet på en del av skjermen: «Nye vinkler», «Utvid formater», «Tidsbegrensede». Den står til venstre i innholdsspalten, i lesbar brødskriftstørrelse, med handlingen til høyre. h2 når skjermen har en h1 over, h3 når den ligger inne i en h2-del. Begge ser like ut i seksjonen: nivået er for leserekkefølgen, ikke for størrelsen. .etikett i margen en kategori på en liste med rader, maks ÅTTE TEGN. Den er en merkelapp, ikke en tittel: den er liten, i majuskler, og står utenfor loddlinja der øyet ikke leter etter innhold. ÅTTE TEGN, regnet ut og ikke gjettet. Margen er --marg = 72px over 600px bredde, og teksten har --s-4 = 12px luft mot loddlinja: 60px igjen. Geist Mono har 0,6em per tegn, og .etikett står på --t-1 = 11px med .06em sperring: 11 * 0,6 + 11 * 0,06 = 7,26px per tegn. 60 / 7,26 = 8,26, altså åtte tegn. Under 600px er --marg 56px, og da er det 44 / 7,26 = 6,06, altså SEKS tegn. Regn med seks når navnet også skal stå på telefon. Et navn som ikke går inn, skal ikke være en margetikett i det hele tatt. Vi klipper det ikke og setter resten i title: ordene som skiller de nærliggende kategoriene fra hverandre står på slutten, så «Tidsbe…» og «Tidsbeg…» leses likt, og en title finnes ikke på telefon og ikke for den som bare bruker tastaturet. Ellipsen under er en VAKT som gjør at en feilbruk blir stygg på ett sted i stedet for å velte spalten, ikke en tillatelse til å bruke lange navn i margen. HANDLINGEN er en lenke når den fører videre, en .knapp når den gjør noe, og en .merke eller .pille når den bare teller. Alle tre havner samme sted, og alle tre faller ned under overskriften når spalten er smal. Grunnlinjen er felles: baseline og ikke center, så overskriften og handlingen står på den samme streken uansett hvor høye de er. */ .seksjon { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); min-height: 26px; margin: var(--s-7) 0 var(--s-5); padding-left: 0; } /* Første seksjon på en skjerm har spalten sin egen luft over seg alt. */ .seksjon:first-child { margin-top: 0; } /* Sidens toppoverskrift. Ingressen under bærer lufta videre, derfor --s-3. */ .seksjon:has(h1) { margin: 0 0 var(--s-3); } /* Seksjonsoverskriften. En h2 i en seksjon er navnet på en del av skjermen, ikke en ny sidetittel, og skal derfor ha den samme formen som h3-en: 20px, til venstre i innholdsspalten, med handlingen på den samme grunnlinja. Den frie h2-en er 26px, og i en seksjon leste den som om skjermen begynte på nytt. Nivået er for leserekkefølgen og skjermleseren, størrelsen er felles, så en skjerm kan velge riktig nivå uten å velge en annen form. */ .seksjon > h2 { /* 17/600: trinnet mellom h1 og radene som manglet (spes-design-v2.md 1.7). */ font-size: var(--t-5); line-height: var(--t-5-h); letter-spacing: -.005em; } /* Etiketten hører til i margen, til venstre for loddlinja, på samme sted som margen i .rad og .hode. Uten dette ville den samme etiketten stått to ulike steder på to skjermer. Én linje, alltid. Åtte tegn er grensa (seks på telefon), og et navn som er lengre skal være en overskrift i stedet. Klippet er vakta som holder spalten i orden hvis noen glemmer det: uten nowrap brekker to ord nedover i en smal stolpe, og ett langt ord legger seg oppå teksten ved siden av. */ /* Uten loddlinja er det ingen marg å stå i. Står etiketten alene, ER den overskriften på bolken, i Geist 17/600. Står det en h2 eller h3 der også, er den en liten linje over overskriften. Ordet blir, det flytter bare. */ .seksjon > .etikett:first-child { /* Klippet er vakta mot at en feilbruk velter spalten: et navn på en bolk er kort, og et langt blir stygt på ett sted, ikke overalt. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex: 0 0 auto; font-size: var(--t-5); line-height: var(--t-5-h); font-weight: 600; letter-spacing: 0; color: var(--ink); } .seksjon:has(> h2, > h3) > .etikett:first-child { flex-basis: 100%; font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; color: var(--ink-3); } .seksjon .hva { font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); } .seksjon .vokser { flex-grow: 1; } /* Handlingen skyves helt ut til høyre av seg selv, uten et tomt element mellom. Er den en lenke, er den liten og rolig: den fører videre, den roper ikke. */ .seksjon > a, .seksjon > .knapp, .seksjon > .merke, .seksjon > .pille { margin-left: auto; } /* :not(.knapp), ellers ville en lenke som ER en knapp fått lenkeformen oppå knappeformen, og den taper bare på rekkefølgen i fila. */ .seksjon > a:not(.knapp) { font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 500; color: var(--brand-tekst); text-decoration: none; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .seksjon > a:not(.knapp):hover { text-decoration: underline; } } /* En seksjon uten innhold. Samme innrykk som radene som skulle stått her, så tomrommet ligger på linja og ikke ved siden av den. */ .seksjon-tom { /* TOMME TILSTANDER ER KORT (spes-design-v2.md 2, regel 6): midt i flaten, en setning som sier hva som kommer her. Aldri en løs setning på papiret. */ padding: var(--s-6) var(--s-5); margin: 0; text-align: center; background: var(--flate); border: 1px solid var(--kort-strek); border-radius: var(--r-3); box-shadow: var(--over-lett); color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); } .ingress { padding-left: 0; margin: 0 0 var(--s-6); color: var(--ink-3); font-size: var(--t-4); max-width: 68ch; } /* --- rader ---------------------------------------------------------------- Ett radsystem for hele skallet. Radene deler flate og skilles av en hårstrek. De er ikke kort: et kort per rad gjør at øyet må finne venstrekanten på nytt for hver linje. */ .rad { display: flex; align-items: stretch; min-height: 48px; border-bottom: 1px solid var(--line); } .rad:first-of-type { border-top: 1px solid var(--line); } .rad .marg { width: var(--marg); flex: 0 0 var(--marg); position: relative; padding: var(--s-4) var(--s-4) 0 0; text-align: right; font-family: var(--font-mono); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } /* Segmentet sitter PÅ linja, midtstilt mot radens første tekstlinje. */ .rad .marg .segment { position: absolute; right: -1px; top: var(--s-4); width: 2px; height: 16px; background: var(--ink-3); } .seg-venter { background: var(--amber) !important; } .seg-gjort { background: var(--gronn) !important; } .seg-feil { background: var(--rod) !important; } .seg-info { background: var(--line-3) !important; } .rad .inn { flex-grow: 1; min-width: 0; padding: var(--s-3) 0 var(--s-3) var(--inn); display: flex; align-items: center; gap: var(--s-5); } a.rad { text-decoration: none; color: inherit; } @media (hover: hover) and (pointer: fine) { a.rad:hover { background: var(--flate-3); } } .rad .tittel { display: block; font-size: var(--t-4); font-weight: 500; color: var(--ink); } .rad .under { display: block; font-size: var(--t-3); color: var(--ink-3); } .rad .vokser { flex-grow: 1; min-width: 0; } .rad .hoyre { font-family: var(--font-mono); font-size: var(--t-3); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .hode { display: flex; align-items: center; min-height: 26px; border-bottom: 1px solid var(--line-2); } .hode .marg { width: var(--marg); flex: 0 0 var(--marg); padding-right: var(--s-4); text-align: right; } .hode .inn { flex-grow: 1; padding-left: var(--inn); display: flex; align-items: center; gap: var(--s-5); } .hode span { font-family: var(--etikett-font); font-size: var(--t-2); font-weight: 500; color: var(--ink-3); } /* --- statusord ------------------------------------------------------------ */ .status { font-size: var(--t-3); font-weight: 500; white-space: nowrap; } .status.ok { color: var(--gronn); } .status.advarsel { color: var(--amber); } .status.feil { color: var(--rod); } .status.ukjent { color: var(--ink-3); } /* --- smal skjerm ---------------------------------------------------------- Under 900px legger menyen seg som en rullbar rad over innholdet, og margen krymper. Loddlinja blir stående: den er strukturen, ikke pynt. */ @media (max-width: 899px) { .kropp { flex-direction: column; } /* SKUFFEN (spes-design-v2.md 1.2). Under 900 px var menyen en vannrett rad som ble klippet: på 835 lå «Rutin» og kontomerket oppå hverandre. Nå er den den samme menyen, i en skuff fra venstre som menyknappen i topplinja åpner. Ingen rad, ingen klipp, og kontoraden står nederst som på et skrivebord. */ .sidemeny { position: fixed; top: calc(var(--topplinje) + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; z-index: 30; width: min(var(--skuff), 86vw); flex: none; border-right: 1px solid var(--line); transform: translateX(-104%); visibility: hidden; transition: transform var(--tid-4) var(--kurve-mot), visibility 0s linear var(--tid-4); } body.menyer-av .sidemeny { display: flex; } body.skuff-apen .sidemeny { transform: none; visibility: visible; box-shadow: var(--over); transition: transform var(--tid-4) var(--kurve-mot), visibility 0s; } .skuffteppe { position: fixed; top: calc(var(--topplinje) + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; z-index: 29; background: var(--teppe); } .sokefelt { flex: 0 0 auto; width: auto; padding: 0 var(--s-3); } .sokefelt > span, .sokefelt kbd { display: none; } .topplinje .ikonknapp { flex-shrink: 0; } /* Fjerdedelen gjelder ikke her, fordi menyene ikke tar bredde i det hele tatt: de ligger over innholdet, ikke ved siden av det. */ .innhold { padding: var(--s-6) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 599px) { :root { --marg: 56px; } /* Topplinja på 375: ikonknappene, søket, logoen og «OS». Med logoen på 20 fikk de ikke plass, og chatknappen ble klemt til 30. Lufta mellom knappene kan IKKE krympe: det usynlige laget som gjør 32 til 44 stikker 7 ut på hver side, og med mindre enn 14 mellom to knapper spiser de hverandres flate (nettleserprøven, 30. september 2026). Derfor krymper logoen, søket skyves ut med margin i stedet for to tomme mellomrom, og menyknappen er den eneste bryteren. */ .topplinje { padding-left: var(--s-4); padding-right: var(--s-4); } .topplinje .vokser { display: none; } .sokefelt { margin-left: auto; } .merkelogo .logo { height: 14px; } /* På en telefon faller handlingen ned under overskriften. Da skal den stå på venstrekanten sammen med den, ikke klistret mot høyre kant med en tom linje foran seg. */ .seksjon > a, .seksjon > .knapp, .seksjon > .merke, .seksjon > .pille { margin-left: 0; } } /* KOMPISEN NEDE TIL HØYRE. Når knappen vises, får innholdet luft nok under seg til at den siste raden i ei liste alltid kan rulles opp over den, så ingen radknapp noensinne ligger under kompisen (spes-sidekick-v2.md 3.3). */ body[data-kompis] .innhold { padding-bottom: calc(var(--s-8) + var(--s-7)); } @media (max-width: 899px) { body[data-kompis] .innhold { padding-bottom: calc(var(--s-8) + var(--s-7) + env(safe-area-inset-bottom, 0px)); } } /* Radene brekker når SPALTEN er smal, uansett hvor bredt vinduet er. Knekkpunktet står nede ved kolonnene, så de to reglene aldri kan komme i utakt. */ /* BER MASKINEN OM MINDRE BEVEGELSE Regelen her sto som «* { transition: none }» til 27. september 2026, og det er for mye. Det folk ber om når de slår på dette, er at ting slutter å FLYTTE seg: flytting er det som utløser svimmelhet. En farge eller en opasitet som skifter gjør ikke det, og skrur man den av også, forsvinner og dukker ting opp brått, uten at man rekker å se hva som endret seg. Derfor: overgangene får bare beholde egenskapene som ikke flytter noe. Elementer uten en overgang fra før berøres ikke, for de har fortsatt 0s varighet. Trykket på en knapp blir stående stille. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, visibility !important; animation: none !important; scroll-behavior: auto !important; } .knapp:active, .ikonknapp:active, .vk:active, .sendknapp:active, .huddle-knapp:active, .til-bunnen:active, .brikke:active .pille { transform: none; } .sf-pil, .framdrift .fylt { transition: none; } } /* Temabryteren med sol og måne sto her til 27. september 2026. Regelen var at bryteren viser MÅLET og ikke tilstanden, og den regelen lever videre i kontomenyen: står flaten lyst, står det «Mørkt tema» i raden. Ikonet er borte, teksten sier det samme, og de tre reglene her hadde ingen knapp å virke på lenger. */ /* KOLONNENE MÅ FLUKTE MED HODET Bredden står ett sted, og både hoderaden og radene under bruker den. Ble den satt i markupen per rad, ville hodet og innholdet drevet fra hverandre første gang noen endret det ene. */ .kol-plan { width: 180px; flex: 0 0 180px; text-align: right; } .kol-hvor { width: 200px; flex: 0 0 200px; text-align: right; } .kol-helse { width: 150px; flex: 0 0 150px; text-align: right; } /* Videos drift i Status (1. oktober 2026): helsesjekkene som fliser, og aktiviteten ved siden av fordelingen. En flis som feiler har rødt fyll, så den synes før man har lest navnet. */ #skjerm-drift .drift-fliser { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--drift-flis), 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); } #skjerm-drift .drift-fliser > .kort { display: flex; flex-direction: column; gap: var(--s-1); } #skjerm-drift .drift-fliser > .kort[data-helse="feil"] { background: var(--rod-svak); border-color: transparent; } #skjerm-drift .drift-fliser .tittel { font-weight: 500; } #skjerm-drift .drift-fliser .under { font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } #skjerm-drift .drift-to { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-5); margin-bottom: var(--s-5); } #skjerm-drift .drift-to .legende { margin-top: var(--s-4); } #skjerm-drift #drift-video .seksjon .knapp { margin-left: auto; } @media (max-width: 899px) { #skjerm-drift .drift-to { grid-template-columns: minmax(0, 1fr); } } .kol-venter { width: 48px; flex: 0 0 48px; text-align: right; } .kol-sett { width: 96px; flex: 0 0 96px; text-align: right; } .kol-bosted { width: 240px; flex: 0 0 240px; font-size: var(--t-3); } .hode .kol-plan, .hode .kol-hvor, .hode .kol-helse, .hode .kol-venter, .hode .kol-sett, .hode .kol-bosted { display: block; } /* NÅR SPALTEN IKKE HAR PLASS TIL RUTENETTET 744 er et SPALTEMÅL, ikke et vindusmål, og det er regnet ut og ikke arvet. Forrige gang ble vindustallet 899 gjenbrukt uendret på en spørring mot spalten, og da flyttet terskelen seg fra vindu 899 til vindu 1175: hoderaden på Drift, Rutiner og Nøkler forsvant på et vindu på 1100 med chatten LUKKET, altså på en helt alminnelig 13-tommer. Regnestykket er hva kolonnene FAKTISK trenger på den bredeste skjermen, Rutiner: 180 til tittelen, 412 til de to faste kolonnene med luft mellom (180 + 200 + 2 x 16), og 152 til margen, innrykket og lufta i spalten. Under det klemmes tittelen, og da er rutenettet ikke verdt prisen. Da gir radene opp rutenettet: kolonnene tar bredden sin av innholdet, raden brekker om den må, og hoderaden går bort med dem. Står tallene i kolonner som ikke får plass, havner de oppå hverandre. */ @container innhold (max-width: 744px) { .kol-plan, .kol-hvor, .kol-helse, .kol-venter, .kol-sett, .kol-bosted { width: auto; flex: 0 1 auto; min-width: 0; text-align: left; } .rad .inn { flex-wrap: wrap; gap: var(--s-3) var(--s-4); } .rad .hoyre { text-align: left; } /* Har raden faste kolonner, tar tittelen hele linja og verdiene står samlet på linja under. Uten dette brakk noen rader og andre ikke, alt etter hvor lang tittelen tilfeldigvis var, og da sto de samme verdiene på ulik linje fra rad til rad. Hjem har ingen slike kolonner, og der blir klokkeslettet stående ved siden av tittelen som før. */ .rad .inn:has(.kol-plan, .kol-hvor, .kol-helse, .kol-bosted) .vokser { flex-basis: 100%; } /* Tittelen er saken, og den skal ikke klemmes til ett ord per linje fordi nabokolonnen har en lang verdi. Målt på 1280 med panelet på 380: «Meta-synk, video» sto 68px bred og 66px høy, mens raden rett over sto på én linje. 180 er samme mål som .kol-plan har over. */ .rad .vokser { min-width: 180px; } /* Verdiene brekker heller enn å bli klippet bort. «7, 22, 37 og 52 over hver time» stakk forbi høyrekanten og mistet halen sin uten at et eneste tegn sa fra, og en rutinetid uten slutten på seg ser komplett ut. */ .rad .hoyre.kol-plan, .rad .hoyre.kol-hvor { white-space: normal; } .hode { display: none; } } /* Første kolonne i hodet må vokse på samme måte som i radene, ellers klemmes de faste kolonnene inn mot venstre og står under feil tall. */ .hode .vokser { flex-grow: 1; min-width: 0; } /* Modullenkene tegnes inn i en egen beholder, men skal oppføre seg som om de sto rett i menyen. Uten dette ble de en søyle inni menyraden på telefon, og «Hjem» ble en høy boks ved siden av. */ #modulmeny { display: contents; } /* Knapper og feil under en liste starter der teksten i radene starter, til høyre for loddlinja, ikke ute i margen. */ .etter-liste { padding-left: 0; margin-top: var(--s-4); } /* Teksten i margen kuttes med ellipse når den er for lang. Den får sin egen boks, fordi segmentet som sitter på linja ligger en piksel utenfor margen og ville blitt kuttet bort sammen med teksten. */ .margtekst { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== CHAT Chatten har to visninger av det samme. PANELET langs høyre kant er til raske svar ved siden av den skjermen du står på: lista, og samtalen og tråden lagt OVER lista, én ting om gangen. Den FULLE VISNINGEN (.modus-chat på roten, .full på #chat) gir panelet hele flaten under topplinja, og legger chatten ut som Slack: sidefeltet, samtalen og tråden side om side. Theodor bestemte 26. september 2026 at chatten skal være «et tilnærmet duplikat» av Slack, så den kan erstatte abonnementet. Oppsettet følger derfor Slack: avatar i margen, navn og klokkeslett på første melding i en rekke, verktøylinja over meldingen ved pekeren, skrivefeltet som en boks med formatering. Fargene, skriften og skalaene er Lodd. Loddlinja er tatt ut av meldingsstrømmen med vilje: en loddrett strek gjennom avatarene er ikke Slack, og den ble lest som en strek mellom navn og tekst. Klikkflatene følger Lodd der det finnes en finger: 44px på berøring. Med mus er verktøylinjene 32, som i Slack, samme grep som .ikonknapp over. ========================================================================== */ /* --- panelet --------------------------------------------------------------- Som trådpanelet i Slack og sakspanelet i Linear: det DYTTER innholdet i stedet for å legge seg oppå det. Derfor er det et søsken til .innhold i .kropp, og ikke position: fixed. Panelet fyller høyden i .kropp og ruller aldri selv: det er .innhold som ruller ved siden av, og strømmen som ruller inni. Ingen position: sticky: den lager ALLTID en ny stablekontekst, og da ble lysbordet på z-index 60 fanget inni panelet og lå under topplinja i stedet for over den. Ingen overgang når det åpnes eller lukkes. En bredde som animerer fra null flytter på hver eneste rad i innholdet mens den går. */ .chatpanel { flex: 0 0 var(--chat-bredde); width: var(--chat-bredde); min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line-2); background: var(--paper); padding: 0 var(--s-4); /* Rammen for knappene i toppen når de flytter seg opp i samtalens egen rad, se «ÉN TOPP, IKKE TO» under. */ position: relative; /* Hjulet skal bli i panelet. Uten dette rullet Rutiner bak fra 0 til 500 mens pekeren sto midt i chatten. */ overscroll-behavior: contain; --marg: 56px; } /* Panelet får fokus når det åpnes, så Esc og skjermleseren treffer riktig sted med en gang. Det er ikke en klikkflate, så en ring rundt hele panelet ville vært støy. */ .chatpanel:focus { outline: none; } .chatpanel-topp { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); min-height: 44px; border-bottom: 1px solid var(--line-2); } .chatpanel-topp h2 { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 600; color: var(--ink); } .chatpanel-topp .vokser { flex-grow: 1; } #chat-utvid[aria-pressed="true"] { background: var(--flate-3); color: var(--ink); } /* ÉN TOPP, IKKE TO Panelet har sin egen topp med «Chat», utvid og kryss, og samtalen har sin med vinkelen tilbake og navnet på kanalen. Sto de over hverandre, gikk det 100px fra panelets overkant til den første meldingen. Er en samtale åpen, flytter knappene seg opp i samtalens egen rad, som i trådpanelet i Slack. Bare på stor skjerm: på telefon legger samtalen seg over hele flaten. */ @media (min-width: 900px) { .chatpanel:has(.chat.apen) .chatpanel-topp { position: absolute; /* 16 ned og 36 høy gir midten på 34, som er midten i samtalens topp: 8 over .chat, 8 luft og halve innholdet på 36. */ top: var(--s-5); right: var(--s-4); min-height: 0; height: 36px; border-bottom: 0; z-index: 3; } .chatpanel:has(.chat.apen) .chatpanel-topp h2 { display: none; } /* Navnet på kanalen og knappene i toppen skal ikke gli inn under dem. */ .chatpanel:has(.chat.apen) .chat:not(.full) .samtale-topp { padding-right: calc(var(--s-8) + var(--s-6)); } } /* HÅNDTAKET. Samme sone som i Slack og Linear: smal, med col-resize, og usynlig til pekeren er på den. touch-action: none, ellers tar nettleseren pekeren til rulling midt i draget. */ .chathandtak { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; z-index: 1; cursor: col-resize; touch-action: none; } .chathandtak::after { content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: 0; /* UT RASKERE ENN INN. Overgangen leses fra tilstanden det går TIL, så denne regelen er veien ut og hover-regelen under er veien inn. Det som er på vei bort har man alt sluttet å se på, og det skal ikke ta lenger tid enn det tok å komme. */ transition: opacity var(--tid-1) var(--kurve-ut); } .drar .chathandtak::after { opacity: 1; } @media (hover: hover) and (pointer: fine) { .chathandtak:hover::after { opacity: 1; transition: opacity var(--tid-2) var(--kurve); } } /* Tastaturet får ingen overgang. Bevegelse hører til der man selv har ført pekeren; når fokus flytter seg med Tab, skal svaret stå der med en gang, ellers leter øyet etter hvor det havnet. */ .chathandtak:focus-visible::after { opacity: 1; box-shadow: var(--fokus); transition: none; } .chathandtak:focus-visible { outline: none; } /* Mens det dras skal HELE flaten ha col-resize, ikke bare de åtte pikslene. */ .drar, .drar * { cursor: col-resize !important; user-select: none; } /* --- den fulle visningen: panelet får flaten ------------------------------- os.js setter .modus-chat på roten. Innholdet og sidemenyen går bort, og panelet vokser. Topplinja blir stående: merket går til Hjem, og chatikonet lukker. Sidemenyen skjules fordi to sidefelt ved siden av hverandre var 472 piksler før samtalen begynte, og da ble det ikke plass til tråden på en skjerm på 1280. */ .modus-chat .innhold { display: none; } @media (min-width: 900px) { .modus-chat .sidemeny { display: none; } .modus-chat .chatpanel { flex: 1 1 auto; width: auto; padding: 0; border-left: 0; } .modus-chat .chatpanel-topp, .modus-chat .chathandtak { display: none; } } /* Skjermen fyller panelet under toppen, og bare strømmene inni ruller. */ #skjerm-chat { flex: 1 1 auto; min-height: 0; } #skjerm-chat.pa { display: flex; flex-direction: column; } .chat { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; margin-top: var(--s-2); } /* --- sidefeltet ------------------------------------------------------------ */ .chat-liste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .sf-rull { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-5); } /* Plassen til huddlene, nederst i sidefeltet som i Slack. Fylles av huddle.js. Tom tar den ingen plass. */ .huddle-linje { flex: 0 0 auto; } .huddle-linje:empty { display: none; } /* Samtalen ligger OVER lista i panelet. Lista skjules mens den ligger under: en dekket rad som likevel tar imot tabulator, sender fokus til noe ingen kan se. */ .chat.apen .chat-liste { visibility: hidden; } .chat .samtale { display: none; } .chat.apen #chat-samtale { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--paper); } /* Tråden ligger over samtalen på samme måte. */ .chat.itrad .tradpanel { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: var(--paper); } /* Arbeidsområdet øverst. I panelet har rammen sin egen topp med «Chat», og da ville to titler stått over hverandre. */ .sf-topp { display: flex; align-items: center; gap: var(--s-1); min-height: 52px; padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--line-2); } .chat:not(.full) .sf-topp { display: none; } .sf-arbeidsomrade { flex: 1 1 auto; font-family: var(--font-display); font-size: var(--t-6); line-height: var(--t-6-h); color: var(--ink); } .sf-sok { font: inherit; display: flex; align-items: center; gap: var(--s-3); width: calc(100% - var(--s-4)); min-height: 32px; margin: var(--s-3) var(--s-2) var(--s-3); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink-3); font-size: var(--t-3); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sf-sok:hover { border-color: var(--line-3); color: var(--ink-2); } } .sf-sok svg { width: 16px; height: 16px; flex: 0 0 auto; } .sf-sok span { flex: 1 1 auto; } kbd { font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); padding: 0 var(--s-1); border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--ink-3); background: var(--flate-2); } /* Spørsmålet om varsler, øverst i sidefeltet til det er besvart. Amber, fordi noe venter på et svar fra deg. */ .varselbanner { margin: 0 var(--s-2) var(--s-3); padding: var(--s-3); border: 1px solid var(--line-2); border-left: 2px solid var(--amber); border-radius: var(--r-2); background: var(--flate); } .varselbanner p { margin: 0 0 var(--s-2); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); } .sf-snarveier { padding: 0 var(--s-2) var(--s-2); } .sf-seksjon { padding: var(--s-2) var(--s-2) 0; } .sf-seksjonstopp { font: inherit; display: flex; align-items: center; gap: var(--s-1); width: 100%; min-height: 32px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); font-size: var(--t-3); font-weight: 500; text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sf-seksjonstopp:hover { color: var(--ink); background: var(--flate-3); } } .sf-pil { display: inline-flex; transition: transform var(--tid-1) var(--kurve); } .sf-pil svg { width: 14px; height: 14px; } .sf-pil.lukket { transform: rotate(-90deg); } /* Radene er knapper, fordi et trykk gjør noe. Fet skrift er «noe nytt», tallet er hvor mange, som i Slack. Valgt rad får merkefargen. */ .sf-rad { font: inherit; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 32px; padding: 0 var(--s-2) 0 var(--s-3); border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); font-size: var(--t-4); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sf-rad:hover { background: var(--flate-3); color: var(--ink); } } .sf-rad[disabled] { cursor: progress; } .sf-rad.ulest { color: var(--ink); } .sf-rad.ulest .sf-navn { font-weight: 600; } .sf-rad[aria-current="true"] { background: var(--brand); color: var(--brand-blekk); } .sf-rad[aria-current="true"] .sf-ikon { color: var(--brand-blekk); } .sf-ikon { flex: 0 0 20px; width: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: var(--t-5); } .sf-ikon svg { width: 16px; height: 16px; } .sf-navn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-utkast { display: inline-flex; color: var(--ink-3); } .sf-utkast svg { width: 14px; height: 14px; } .sf-antall { font-family: var(--font-mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; color: var(--ink-3); } .chat-liste .seksjon-tom { padding: var(--s-2) var(--s-4); font-size: var(--t-3); line-height: var(--t-3-h); } .chat-listefeil { padding: 0 var(--s-4); } /* Tallet for uleste. Amber betyr at noe venter på deg, her som på Hjem og på chatikonet. Blekket er --paper, som snur med temaet. PILLEN, ALTSÅ 999px, ER FORBEHOLDT MERKER. Et tellemerke, en status og dagskillet er pille, fordi formen ER tingen: en flate uten hjørner sier «dette er et stempel, ikke noe du kan trykke på». En knapp med samme form later som den er et stempel, og da må man prøve seg fram for å finne ut hva som er trykkbart. Knappene har --r-1, --r-2 eller --r-3 som alt annet. .kanalsok .filter og .til-bunnen sto som piller til 27. september 2026 og er rettet. */ .merke { flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 var(--s-2); border-radius: 999px; background: var(--amber); color: var(--paper); font-family: var(--font-mono); font-size: var(--t-1); line-height: 18px; font-variant-numeric: tabular-nums; text-align: center; } /* --- avatarene og prikken -------------------------------------------------- Initialene på fargen personen har i TEAM. Fargen er en klasse, farge-0 til farge-5, i samme rekkefølge som FARGER i functions/api/_felles.js, fordi CSP-en ikke tillater stil i HTML-en. Hver farge har en lysere utgave i mørkt tema, ellers forsvant den mørkeblå mot flaten. */ .avatar { position: relative; flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); color: var(--brand-blekk); font-size: var(--t-3); font-weight: 600; letter-spacing: .02em; user-select: none; } .avatar.liten { flex-basis: 20px; width: 20px; height: 20px; border-radius: var(--r-1); font-size: var(--t-1); letter-spacing: 0; } .avatar.mini { flex-basis: 16px; width: 16px; height: 16px; border-radius: var(--r-1); font-size: 0; } .avatar.stor { flex-basis: 72px; width: 72px; height: 72px; border-radius: var(--r-3); font-size: var(--t-7); margin-bottom: var(--s-4); } /* PERSONEN SOM EN RUND AVATAR (29. september 2026, Oppgaver og Sidekick v2). Theodor syntes Oppgaver var steril og ville ha det mer som Asana. Der står hvem som eier noe som en fylt sirkel i personens farge med initialen, og det er den samme komponenten her: i radene i Oppgaver, på kortene i tavla, ved kommentarene, ved meldingene i Sidekick og i kontoknappen. Blekket er --brand-blekk fra .avatar: hvitt på de mørke personfargene i lyst tema, og mørkt på de lyse personfargene i mørkt tema. Begge står over 4,5:1 for alle seks. Sirkelen er det samme unntaket som prikkene og kompisen: 50 % er en form, ikke en radius i skalaen. */ .avatar.person { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; font-size: var(--t-1); line-height: var(--t-1-h); letter-spacing: 0; } .avatar.person.liten { flex-basis: 20px; width: 20px; height: 20px; } .farge-0 { background: var(--person-0); } .farge-1 { background: var(--person-1); } .farge-2 { background: var(--person-2); } .farge-3 { background: var(--person-3); } .farge-4 { background: var(--person-4); } .farge-5 { background: var(--person-5); } /* Tilstede: grønn når personen er aktiv, hul når den er borte. Grønn er «i orden» i Lodd, og her betyr den at noen er der. Kanten har flatens farge, så prikken ser ut som den er stanset ut av avataren. */ .prikk { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--paper); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-3); } .prikk.aktiv { background: var(--gronn); box-shadow: none; } .full .chat-liste .prikk { border-color: var(--sidefelt); } .sf-rad[aria-current="true"] .prikk { border-color: var(--brand-tekst); } .stabel { display: inline-flex; gap: var(--s-1); } /* --- samtalen og tråden ----------------------------------------------------- */ .samtale { flex-direction: column; min-width: 0; min-height: 0; } .samtale-topp { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-2); flex: 0 0 auto; min-height: 52px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); } .topp-tittel { flex: 1 1 0; min-width: 0; } .samtale-navn { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-5); line-height: var(--t-5-h); font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .samtale-navn span { overflow: hidden; text-overflow: ellipsis; } .samtale-navn .hash { color: var(--ink-3); font-weight: 500; } .samtale-om { margin: 0; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topp-knapper { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; } /* Vinkelen tilbake står bare der noe ligger over noe: i panelet og på telefon. I full visning står alt side om side, og da er det ingenting å gå tilbake fra. */ .samtale-topp .tilbake { margin-left: calc(var(--s-2) * -1); } .tradpanel .vk.lukk { display: none; } /* Knappen med hvem som er med: avatarene og tallet, som i Slack. I panelet er den borte, fordi det ikke er plass til den ved siden av navnet. */ .medlemsknapp { font: inherit; display: none; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink-2); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .medlemsknapp:hover { border-color: var(--line-3); color: var(--ink); } } .medlemsknapp .tall, .vk .tall { font-family: var(--font-mono); font-size: var(--t-2); font-variant-numeric: tabular-nums; } .vk.medtall { width: auto; gap: var(--s-1); padding: 0 var(--s-2); } /* Søket i kanalen. Egen rad under navnet, over hele bredden. */ .kanalsok { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .kanalsok input { flex: 1 1 160px; min-width: 0; } .kanalsok .filter { font: inherit; display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate-2); color: var(--ink-2); font-size: var(--t-2); cursor: pointer; } .kanalsok .filter svg { width: 12px; height: 12px; } .strom { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; /* Luft over den første meldingen, så verktøylinja som flyter over en melding ikke klippes bort av kanten på den øverste. */ padding: var(--s-6) 0 var(--s-3); } .eldre { display: flex; justify-content: center; padding: var(--s-2) 0; } /* Starten på en samtale, øverst når det ikke finnes eldre meldinger. */ .start { padding: var(--s-5) var(--s-4) var(--s-4); } .start h3 { font-size: var(--t-6); line-height: var(--t-6-h); margin-bottom: var(--s-2); } .start p { margin: 0; color: var(--ink-2); max-width: 60ch; } /* --- en melding ------------------------------------------------------------- Avataren står i margen på den første i en rekke, og klokka kommer fram der på de neste når pekeren står over, som i Slack. Hele raden lyser ved pekeren, ikke bare teksten. */ .melding { position: relative; padding: var(--s-1) var(--s-4) var(--s-1) 0; } .melding.forst { margin-top: var(--s-2); padding-top: var(--s-2); } .melding.valgt { background: var(--flate-2); } @media (hover: hover) and (pointer: fine) { .melding:hover { background: var(--flate-2); } } /* Linja en huddle legger i kanalen. En systemlinje, ikke en melding: grå, med ikonet, og «Bli med» mens den pågår. Den flukter med teksten i meldingene, så den leses som en del av samtalen og ikke som et kort. */ .melding.systemlinje { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-2) 0; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-8); color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); } @media (hover: hover) and (pointer: fine) { .melding.systemlinje:hover { background: transparent; } } .systemlinje .systemikon { display: inline-flex; width: 16px; height: 16px; color: var(--ink-3); } .systemlinje .systemikon svg { width: 16px; height: 16px; } .systemlinje.pagar .systemikon, .systemlinje.pagar .systemtekst { color: var(--gronn); } .systemlinje .systemtid { font-family: var(--font-mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; } .melding .mrad { display: flex; align-items: flex-start; } .melding .marg { flex: 0 0 var(--marg); width: var(--marg); display: flex; justify-content: center; padding-top: var(--s-1); } .melding .klokke { visibility: hidden; font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-4-h); font-variant-numeric: tabular-nums; color: var(--ink-3); } .melding:focus-within .klokke, .melding.valgt .klokke { visibility: visible; } @media (hover: hover) and (pointer: fine) { .melding:hover .klokke { visibility: visible; } } .melding .sak { flex: 1 1 0; min-width: 0; } .mhode { display: flex; align-items: baseline; gap: var(--s-3); } .mhode .navn { font-weight: 600; color: var(--ink); } .mhode .tid { font-family: var(--font-mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; color: var(--ink-3); } .melding .tekst { color: var(--ink); overflow-wrap: anywhere; } .melding .endret { margin-left: var(--s-2); font-size: var(--t-2); color: var(--ink-3); } .melding.slettet .tekst, .melding.sendes .tekst { color: var(--ink-3); } .melding.slettet .tekst { font-style: italic; } /* Formateringen, tolket fra ren tekst av tekstHtml i chatfelles.js. */ .tekst code { font-family: var(--font-mono); font-size: var(--t-3); padding: 0 var(--s-1); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--flate-2); } .tekst .kodeblokk { margin: var(--s-2) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate-2); font-family: var(--font-mono); font-size: var(--t-3); line-height: var(--t-3-h); white-space: pre-wrap; overflow-wrap: anywhere; } .tekst .kodeblokk code { padding: 0; border: 0; background: none; } .tekst blockquote { margin: var(--s-1) 0; padding-left: var(--s-4); border-left: 4px solid var(--line-3); color: var(--ink-2); } .tekst ul, .tekst ol { margin: var(--s-1) 0; padding-left: var(--s-6); } .tekst a { overflow-wrap: anywhere; } .tekst .omtale { padding: 0 var(--s-1); border-radius: var(--r-1); background: var(--omtale); color: var(--brand-tekst); font-weight: 500; cursor: pointer; } .tekst .omtale.meg { background: var(--omtale-meg); color: var(--ink); } /* Bare emoji, høyst seks: store, som i Slack. */ .tekst.stor-emoji { font-size: var(--t-8); line-height: var(--t-8-h); } /* «Ikke sendt, prøv igjen». Meldingen blir stående i lista med teksten sin, med en rød hårstrek i margen. Rød betyr at noe er galt, her som ellers. */ .melding.feilet .sak { box-shadow: inset 2px 0 0 var(--rod); padding-left: var(--s-3); } .ikkesendt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); } .ikkesendt .hva { font-size: var(--t-3); line-height: var(--t-3-h); color: var(--rod); } .melding .bekreft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); } .melding .bekreft .hva { font-size: var(--t-3); color: var(--ink-2); } .knapp.fare { color: var(--rod); } .rediger { margin-top: var(--s-1); } .rediger .skrivefelt { border: 1px solid var(--line-3); border-radius: var(--r-2); background: var(--flate); } .rediger .knapperad { margin-top: var(--s-3); align-items: center; } .rediger .hint { font-size: var(--t-2); color: var(--ink-3); } .melding.redigeres { background: var(--festet); } /* En festet melding har et merke over seg og en varm bakgrunn, som i Slack. Amber, fordi den er lagt fram for at noen skal se den. */ .melding.festet { background: var(--festet); } .festetmerke { display: flex; align-items: center; gap: var(--s-1); padding-left: calc(var(--marg) - var(--s-5)); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--amber); } .festetmerke svg { width: 14px; height: 14px; } /* Meldingen det nettopp ble hoppet til, fra søket, Senere eller en lenke. */ .melding.markert { background: var(--markert); } /* VERKTØYLINJA over meldingen. Den flyter over meldingen over, og er derfor et av de få stedene i chatten med skygge. Med mus kommer den fram ved pekeren. På berøring kommer den fram når meldingen trykkes på, og legger seg da under teksten i stedet for oppå den. */ .mverktoy { position: absolute; top: calc(var(--s-5) * -1); right: var(--s-4); z-index: 2; display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); box-shadow: var(--over); /* opacity og ikke visibility: et element med visibility: hidden er ikke tabbart. På en vanlig melding uten reaksjoner, uten lenke i teksten og uten trådlinje finnes det ingenting annet inni som kan ta fokus, så :focus-within kunne aldri utløses, og «Svar i tråd», «Lagre til senere», «Rediger» og «Slett» var umulige uten mus. */ opacity: 0; pointer-events: none; } /* Tabulerer man inn i linja, kommer den fram, også uten peker. */ .mverktoy:focus-within { opacity: 1; pointer-events: auto; } .melding.forst .mverktoy { top: calc(var(--s-4) * -1); } @media (hover: hover) and (pointer: fine) { .melding:hover .mverktoy, .melding:focus-within .mverktoy { opacity: 1; pointer-events: auto; } } @media (hover: none), (pointer: coarse) { .melding.valgt .mverktoy { opacity: 1; pointer-events: auto; position: static; flex-wrap: wrap; width: max-content; max-width: 100%; margin: var(--s-2) 0 0 var(--marg); box-shadow: none; } } /* Ikonknappene i chatten: verktøylinjene, toppen og skrivefeltet. 32 med mus, som i Slack. 44 på berøring, der det finnes en finger. */ .vk { font: inherit; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .vk:hover { background: var(--flate-3); color: var(--ink); } } .vk:active { transform: scale(.97); } .vk svg { width: 18px; height: 18px; } .vk.tegn { font-size: var(--t-5); line-height: 1; } .vk.pa, .vk[aria-pressed="true"], .vk[aria-expanded="true"] { color: var(--brand-tekst); } .vk[disabled] { opacity: .5; cursor: not-allowed; } @media (hover: none), (pointer: coarse) { .vk { width: 44px; height: 44px; } } /* --- vedleggene ----------------------------------------------------------- */ .vedleggene { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); } /* Luft under en melding med vedlegg. Uten den la neste melding sin tekst seg rett inntil bildet over, og ble lest som bildetekst til feil melding. */ .melding.medvedlegg { margin-bottom: var(--s-3); } .vedleggene.rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); max-width: 480px; } .vedlegg { margin: 0; min-width: 0; } .vedlegg.bilde img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r-2); /* Bak et bilde som ikke fyller ruta står den mørke flaten, i begge temaer: et skjermbilde skal bedømmes på sin egen eksponering. */ background: var(--skjerm); cursor: zoom-in; } .vedleggene.rutenett .vedlegg.bilde img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .vedlegg.film video { display: block; width: 100%; max-width: 480px; max-height: 360px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--skjerm); } .vedlegg figcaption { font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); margin-top: var(--s-2); overflow-wrap: anywhere; } .vedlegg.filrad, .kurvbit { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; max-width: 480px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); } .vedlegg.filrad .ikon, .kurvbit .tumm.tom { flex: 0 0 auto; color: var(--ink-3); display: inline-flex; } .vedlegg.filrad .ikon svg, .kurvbit .tumm.tom svg { width: 20px; height: 20px; } .vedlegg.filrad .vokser, .kurvbit .vokser { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } .filnavn { font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tall i mono med tabular-nums, som alt maskinelt i Lodd. */ .maskin { font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); font-variant-numeric: tabular-nums; color: var(--ink-3); } /* --- reaksjonene ---------------------------------------------------------- Brikker under meldingen: tegnet og antallet. Tegnet er INNHOLD, ikke pynt. KNAPPEN er 44px, PILLA inni er 26. Luft rundt en knapp er ikke klikkbar, bare knappen er. Raden trekkes inn med like mye som knappen stikker ut, så pillene står der Slack har dem uten at klikkflata krymper. */ .reaksjoner { display: flex; flex-wrap: wrap; align-items: center; margin: calc(var(--s-2) * -1) 0 calc(var(--s-2) * -1) calc(var(--s-2) * -1); } .brikke { font: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s-1); border: 0; background: none; cursor: pointer; } .pille { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 26px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); color: var(--ink-2); } @media (hover: hover) and (pointer: fine) { .brikke:hover .pille { border-color: var(--line-3); background: var(--flate-2); } } /* Min egen er tydeligere, så man ser hva man selv har satt uten å telle. */ .brikke.min .pille { border-color: var(--brand-tekst); color: var(--brand-tekst); background: var(--omtale); } /* Trykket sitter på PILLA og ikke på knappen: knappen er 44 med usynlig luft rundt, og en skalering av den ville flyttet pilla uten at noe synlig endret seg i kanten. */ .brikke:active .pille { transform: scale(.97); } .brikke .tegn { font-size: var(--t-4); line-height: 1; } .brikke .antall { font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); font-variant-numeric: tabular-nums; } .brikke.apneknapp .pille { min-width: 32px; color: var(--ink-3); } .brikke.apneknapp svg { width: 16px; height: 16px; } @media (hover: hover) and (pointer: fine) { .brikke.apneknapp:hover .pille { color: var(--ink); } } /* TALLBRIKKA (29. september 2026, spes-sidekick-v2.md 2.4). Et navn og et tall som går et sted, som «Venter på Hjem 1» på Sidekick-siden. Den ligger her og ikke i sidekick.css fordi den er nyttig i alle systemene. Den heter ikke .brikke, fordi det navnet alt er reaksjonsbrikka i chatten. Bare tokens, så begge temaene følger med av seg selv. */ .tallbrikke { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-4); /* Versjon 2 (retning B): hvit med kortets skygge, kant bare i mørkt, der skygge ikke synes. Som Shopify sin «Fulfill orders 2». */ border: 1px solid var(--kort-strek); border-radius: var(--r-3); background: var(--flate); box-shadow: var(--over-lett); color: var(--ink); font-size: var(--t-3); line-height: var(--t-3-h); text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: background var(--tid-1) var(--kurve), border-color var(--tid-1) var(--kurve); } /* Tallet står i et lite grått merke, som i Shopifys brikker: navnet leses først, tallet er et svar man ser med et blikk. */ .tallbrikke .mono { min-width: 20px; padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--flate-3); color: var(--ink-2); font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; } @media (hover: hover) and (pointer: fine) { .tallbrikke:hover { background: var(--flate-3); border-color: var(--ink-3); } } .tallbrikke:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { .reaksjoner .apneknapp { visibility: hidden; } .melding:hover .reaksjoner .apneknapp, .melding:focus-within .reaksjoner .apneknapp { visibility: visible; } } /* «Til nyeste» nederst i samtalen når man har rullet opp. Flyter over meldingene, og har derfor skygge. Amber når det har kommet noe nytt. */ .til-bunnen { font: inherit; position: absolute; left: 50%; bottom: 140px; /* settes av chat.js, rett over skrivefeltet */ z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); color: var(--ink-2); font-size: var(--t-3); box-shadow: var(--over); cursor: pointer; } /* Knappen står alt forskjøvet en halv bredde. Trykket må ta med seg den forskyvningen, ellers hopper den til høyre i det man trykker. */ .til-bunnen:active { transform: translateX(-50%) scale(.97); } .til-bunnen svg { width: 14px; height: 14px; } .til-bunnen.nye { border-color: var(--amber); color: var(--ink); } @media (hover: none), (pointer: coarse) { .til-bunnen { min-height: 44px; } } /* --- trådlinja og tråden --------------------------------------------------- */ /* «3 svar» med avatarene og tiden for det siste, under meldingen i kanalen. En knapp, ikke en lenke: den åpner tråden, den går ikke til en adresse. */ .tradlinje { font: inherit; display: flex; align-items: center; gap: var(--s-2); width: 100%; max-width: 480px; min-height: 32px; margin-top: var(--s-1); padding: 0 var(--s-2); margin-left: calc(var(--s-2) * -1); border: 1px solid transparent; border-radius: var(--r-2); background: none; font-size: var(--t-3); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .tradlinje:hover { background: var(--flate); border-color: var(--line-2); } } .tradlinje .antall { color: var(--brand-tekst); font-weight: 600; } .tradlinje .siste, .tradlinje .se { color: var(--ink-3); font-size: var(--t-2); } .tradlinje .se { display: none; } @media (hover: hover) and (pointer: fine) { .tradlinje:hover .siste { display: none; } .tradlinje:hover .se { display: inline; } } .tradlinje .nye { font-family: var(--font-mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; color: var(--amber); } @media (hover: none), (pointer: coarse) { .tradlinje { min-height: 44px; } } .tradforelder .melding { margin-top: 0; } .tradantall { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) var(--s-4) var(--s-2) var(--s-4); font-size: var(--t-2); color: var(--ink-3); } .tradantall::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line-2); } /* --- dagene og det som er nytt --------------------------------------------- */ /* Dagen står midt på en strek, i en pille, som i Slack. */ .dagskille { position: relative; display: flex; justify-content: center; margin: var(--s-5) 0 var(--s-2); } .dagskille::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); } .dagskille span { position: relative; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: var(--t-2); line-height: var(--t-5-h); font-weight: 600; color: var(--ink-2); } /* «Nye meldinger»: en strek med ordene til høyre, der det uleste begynner. Amber betyr at noe venter på deg, her som på Hjem. */ .nye { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) var(--s-4) var(--s-1) 0; } .nye .strek { flex: 1 1 auto; height: 1px; background: var(--amber); } .nye .etikett { font-family: var(--etikett-font); font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; color: var(--amber); } /* --- skrivefeltet ------------------------------------------------------------ En boks, som i Slack: verktøylinja for formatering øverst, feltet i midten, og knappene for vedlegg, emoji og omtale nederst med Send til høyre. Linjehøyden er 26 og luften 8 over og under, så én linje blir 44. */ .skriv { flex: 0 0 auto; display: flex; flex-direction: column; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-4); } .chat:not(.full) .skriv { padding-left: 0; padding-right: 0; } .skriveboks { position: relative; border: 1px solid var(--line-3); border-radius: var(--r-3); background: var(--flate); } .skriveboks:focus-within { border-color: var(--ink-3); } .verktoy { display: none; align-items: center; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); } .skriv.med-verktoy .verktoy { display: flex; } .verktoy .vk { width: 28px; height: 28px; } .verktoy .vk svg { width: 16px; height: 16px; } @media (hover: none), (pointer: coarse) { .verktoy .vk { width: 44px; height: 44px; } } .verktoy-skille { width: 1px; height: 16px; margin: 0 var(--s-1); background: var(--line-2); } .skrivefelt { display: block; width: 100%; font: inherit; font-size: var(--t-4); line-height: var(--t-5-h); min-height: 44px; max-height: calc(var(--t-5-h) * 8 + var(--s-3) * 2 + 2px); padding: var(--s-3) var(--s-4) var(--s-2); border: 0; border-radius: var(--r-3); background: none; color: var(--ink); resize: none; overflow-y: hidden; } .skrivefelt:focus { outline: none; box-shadow: none; } .rediger .skrivefelt:focus { border-color: var(--brand-tekst); box-shadow: var(--fokus); } .skrivefelt::placeholder { color: var(--ink-3); } .skrivefelt[disabled] { opacity: .6; } .skrivbunn { display: flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2) var(--s-2); } .skrivbunn .vokser { flex: 1 1 auto; } .skrivbunn .hint { font-size: var(--t-1); color: var(--ink-3); margin-right: var(--s-2); } .chat:not(.full) .skrivbunn .hint { display: none; } .sendknapp { font: inherit; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: var(--r-2); background: var(--brand); color: var(--brand-blekk); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sendknapp:hover { background: var(--brand-hover); } } .sendknapp:active { transform: scale(.97); } .sendknapp svg { width: 18px; height: 18px; } .sendknapp[disabled] { opacity: .5; cursor: not-allowed; } @media (hover: none), (pointer: coarse) { .sendknapp { width: 52px; height: 44px; } } .vedleggkurv { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) 0; } .kurvbit .tumm { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-1); object-fit: cover; background: var(--skjerm); } .kurvbit .tumm.tom { width: 40px; height: 40px; align-items: center; justify-content: center; } .kurvbit.ille { border-color: var(--rod); } .kurvbit .ille { color: var(--rod); font-size: var(--t-2); line-height: var(--t-2-h); } /* Framdriften. En strek som fylles. Bredden settes med en klasse og ikke med style, fordi CSP-en ikke tillater stil i HTML-en. */ .framdrift { display: block; height: 2px; background: var(--line-2); border-radius: var(--r-1); overflow: hidden; } /* Streken vokser med transform og ikke med width. width tvinger nettleseren til å regne oppsettet på nytt for hver eneste ramme; scaleX flytter bare piksler som alt er malt. Bredden står fast på 100%, og .fyll-N nedenfor setter hvor stor del av den som vises. */ .framdrift .fylt { display: block; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform var(--tid-2) var(--kurve); } .fyll-5 { transform: scaleX(.05); } .fyll-10 { transform: scaleX(.10); } .fyll-15 { transform: scaleX(.15); } .fyll-20 { transform: scaleX(.20); } .fyll-25 { transform: scaleX(.25); } .fyll-30 { transform: scaleX(.30); } .fyll-35 { transform: scaleX(.35); } .fyll-40 { transform: scaleX(.40); } .fyll-45 { transform: scaleX(.45); } .fyll-50 { transform: scaleX(.50); } .fyll-55 { transform: scaleX(.55); } .fyll-60 { transform: scaleX(.60); } .fyll-65 { transform: scaleX(.65); } .fyll-70 { transform: scaleX(.70); } .fyll-75 { transform: scaleX(.75); } .fyll-80 { transform: scaleX(.80); } .fyll-85 { transform: scaleX(.85); } .fyll-90 { transform: scaleX(.90); } .fyll-95 { transform: scaleX(.95); } .fyll-100 { transform: scaleX(1); } /* Filvelgeren skal ikke ses, men må kunne klikkes av koden. display: none ville gjort click() virkningsløs i noen nettlesere. */ .filvelger { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lenkeboks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); } .lenkeboks input { flex: 1 1 200px; min-width: 0; font: inherit; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink); } .lenkeboks .feilmelding { flex: 1 0 100%; margin: 0; } /* Forslagene til @-omtaler, over feltet. Flyter, og har derfor skygge. */ .forslag { position: absolute; left: var(--s-2); right: var(--s-2); bottom: calc(100% + var(--s-1)); z-index: 5; max-height: 280px; overflow-y: auto; padding: var(--s-1) 0; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); box-shadow: var(--over); } .forslag-topp { margin: 0; padding: var(--s-2) var(--s-4) var(--s-1); font-size: var(--t-2); color: var(--ink-3); } .forslag-rad { font: inherit; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 36px; padding: 0 var(--s-4); border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; } .forslag-rad .navn { font-weight: 600; } .forslag-emoji { font-size: var(--t-5); line-height: 1; } .forslag-rad.valgt { background: var(--brand); color: var(--brand-blekk); } .forslag-rad.valgt .svak { color: inherit; } @media (hover: hover) and (pointer: fine) { .forslag-rad:hover { background: var(--brand); color: var(--brand-blekk); } .forslag-rad:hover .svak { color: inherit; } } @media (hover: none), (pointer: coarse) { .forslag-rad { min-height: 44px; } } /* «Joar skriver ...» under feltet. Plassen står alltid, så feltet ikke hopper opp og ned når noen begynner og slutter å skrive. */ .skriverlinje { min-height: var(--t-1-h); margin: var(--s-1) 0 0 var(--s-2); font-size: var(--t-1); line-height: var(--t-1-h); color: var(--ink-3); } .chat-status { padding: 0 var(--s-4); margin: 0; } .chat.drar .skriveboks { box-shadow: 0 0 0 2px var(--amber); } /* --- listene i midten: Tråder, aktiviteten, Senere og søket ---------------- */ .visning { padding: var(--s-2) var(--s-4) var(--s-5); } .treffantall { margin: var(--s-2) 0 0; font-size: var(--t-2); color: var(--ink-3); } .treff, .trad-kort { margin-top: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); overflow: hidden; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .treff:hover, .trad-kort:hover { border-color: var(--line-3); } } .trad-kort.ulest { border-color: var(--amber); } .treff-topp { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--t-2); color: var(--ink-3); } .treff-hvor { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .treff-tid { font-family: var(--font-mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; } .treff .melding, .trad-kort .melding { margin-top: 0; padding-bottom: var(--s-2); } @media (hover: hover) and (pointer: fine) { .treff .melding:hover, .trad-kort .melding:hover { background: none; } } .kort-svar { border-top: 1px solid var(--line); } .kort-svar:empty { display: none; } .flere-svar { margin: 0; padding: var(--s-2) var(--s-4) 0 var(--marg); font-size: var(--t-2); color: var(--brand-tekst); } /* --- det som flyter: emojivelgeren, menyene og hopp til ----------------------- Flyter over alt i chatten, og har derfor skygge, som lysbordet. Fast i vinduet, plassert ved knappen av chat.js. På telefon legger de seg nederst over hele bredden, som arkene i Slack på mobil. */ .flyt { position: fixed; z-index: 55; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); box-shadow: var(--over); } .flyt.ark { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: var(--r-3) var(--r-3) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .emojivelger { width: 360px; max-width: calc(100vw - var(--s-5)); height: 400px; display: flex; flex-direction: column; overflow: hidden; } .emojivelger.ark { height: 60vh; height: 60dvh; } .ev-topp { padding: var(--s-3) var(--s-3) var(--s-2); } .ev-faner { display: flex; gap: var(--s-1); padding: 0 var(--s-2) var(--s-2); border-bottom: 1px solid var(--line); overflow-x: auto; } .ev-fane { font: inherit; flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: var(--r-2); background: none; font-size: var(--t-5); line-height: 1; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .ev-fane:hover { background: var(--flate-3); } } .ev-rutenett { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s-2) var(--s-3); position: relative; } .ev-gruppe { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--s-3) var(--s-2) var(--s-2); background: var(--flate); font-size: var(--t-2); font-weight: 600; color: var(--ink-2); } .ev-rad { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } .ev-tegn { font: inherit; height: 40px; border: 0; border-radius: var(--r-2); background: none; font-size: var(--t-6); line-height: 1; cursor: pointer; } .ev-tegn:focus-visible { background: var(--flate-3); } @media (hover: hover) and (pointer: fine) { .ev-tegn:hover { background: var(--flate-3); } } @media (hover: none), (pointer: coarse) { .ev-tegn { height: 44px; } .ev-rad { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } } .meny { min-width: 220px; max-width: calc(100vw - var(--s-5)); padding: var(--s-2) 0; } .meny-rad { font: inherit; display: block; width: 100%; min-height: 32px; padding: 0 var(--s-5); border: 0; background: none; color: var(--ink); font-size: var(--t-3); text-align: left; cursor: pointer; } .meny-rad:focus-visible { background: var(--brand); color: var(--brand-blekk); box-shadow: none; } @media (hover: hover) and (pointer: fine) { .meny-rad:hover { background: var(--brand); color: var(--brand-blekk); box-shadow: none; } } .meny-rad.fare { color: var(--rod); } .meny-rad.fare:focus-visible { background: var(--rod); color: var(--paper); } @media (hover: hover) and (pointer: fine) { .meny-rad.fare:hover { background: var(--rod); color: var(--paper); } } .meny-skille { height: 1px; margin: var(--s-2) 0; background: var(--line); } @media (hover: none), (pointer: coarse) { .meny-rad { min-height: 44px; } } .meny:has(.nedtrekk) { padding: 0; } .nedtrekk { width: 400px; max-width: calc(100vw - var(--s-5)); max-height: 70vh; display: flex; flex-direction: column; } .flyt.ark .nedtrekk { width: auto; max-width: none; } .nedtrekk-topp { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-weight: 600; } .nedtrekk-liste { overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-3); } .nedtrekk .seksjon-tom { padding: var(--s-4); } .nedtrekk .treff:first-child { margin-top: 0; } .person-rad { font: inherit; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-2) var(--s-2); border: 0; border-radius: var(--r-2); background: none; color: var(--ink); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .person-rad:hover:not([disabled]) { background: var(--flate-2); } } .person-rad[disabled] { cursor: default; } .person-rad .vokser { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .person-rad .navn { font-weight: 600; } .person-rad .svak { font-size: var(--t-2); } /* Hopp til. Midt på skjermen, over alt, med et mørkt teppe bak: det er den ene tingen du gjør akkurat nå. */ .hopp { position: fixed; inset: 0; z-index: 58; } .hopp-bak { position: absolute; inset: 0; background: rgb(10 15 31 / .45); } .hopp-boks { position: relative; width: 600px; max-width: calc(100vw - var(--s-6)); margin: 12vh auto 0; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); box-shadow: var(--over); overflow: hidden; } .hopp-rad { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-bottom: 1px solid var(--line); color: var(--ink-3); } .hopp-rad svg { width: 18px; height: 18px; flex: 0 0 auto; } input.hopp-felt { flex: 1 1 auto; min-height: 56px; padding: 0; border: 0; border-radius: var(--r-1); background: none; box-shadow: none; font-size: var(--t-5); } input.hopp-felt:focus { box-shadow: none; border-color: transparent; } .hopp-liste { max-height: 50vh; overflow-y: auto; padding: var(--s-2) 0; } .hopp-treff { font: inherit; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-1) var(--s-4); border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; } .hopp-treff .vokser { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .hopp-treff .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hopp-treff .under { font-size: var(--t-2); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hopp-treff.ulest .navn { font-weight: 600; } @media (hover: hover) and (pointer: fine) { .hopp-treff:hover { background: var(--flate-2); } } .hopp-treff.valgt { background: var(--brand); color: var(--brand-blekk); } .hopp-treff.valgt .under, .hopp-treff.valgt .sf-ikon { color: inherit; } .hopp-liste .seksjon-tom { padding: var(--s-3) var(--s-4); } .hopp-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: 0; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-1); color: var(--ink-3); } .hopp-hint kbd + kbd { margin-left: 0; } /* Dialogene: ny kanal og emnet. Samme teppe som hopp til. */ .dialog-boks { position: relative; display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - var(--s-6)); margin: 14vh auto 0; padding: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); box-shadow: var(--over); } .dialog-tittel { font-size: var(--t-6); line-height: var(--t-6-h); margin-bottom: var(--s-2); } .dialog-om { margin: 0 0 var(--s-4); color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); } .dialog-boks label { margin: var(--s-4) 0 var(--s-2); } .dialog-boks .hint { margin: var(--s-2) 0 0; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } .dialog-knapper { justify-content: flex-end; margin-top: var(--s-5); } .med-prefiks { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); box-shadow: var(--relieff); } .med-prefiks span { padding-left: var(--s-4); color: var(--ink-3); } .med-prefiks input, .med-prefiks input:focus { border: 0; box-shadow: none; background: none; padding-left: var(--s-2); } .med-prefiks:focus-within { border-color: var(--brand-tekst); box-shadow: var(--fokus); } @media (max-width: 599px) { .dialog-boks { margin-top: var(--s-5); padding: var(--s-5); } } /* Emnet i kanaltoppen er en knapp: et trykk endrer det, som i Slack. */ .samtale-om.emne { font: inherit; display: block; max-width: 100%; padding: 0; border: 0; background: none; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); text-align: left; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .samtale-om.emne:hover { color: var(--ink); } } .sf-legg-til { color: var(--ink-3); } /* --- lysbordet ------------------------------------------------------------ Et bilde i full størrelse. Ikke en og ingen nettleserdialog: en boks i vår egen flate, med Lukk, Last ned og Esc. */ .lysbord { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--s-5); background: rgb(10 15 31 / .82); } .lysramme { display: flex; flex-direction: column; gap: var(--s-3); max-width: 100%; max-height: 100%; min-width: 0; } .lysramme img { display: block; max-width: 100%; max-height: calc(100vh - 44px - var(--s-8)); max-height: calc(100dvh - 44px - var(--s-8)); object-fit: contain; border-radius: var(--r-2); background: var(--skjerm); box-shadow: var(--over); } .lystopp { display: flex; align-items: center; gap: var(--s-4); min-width: 0; } .lystopp .filnavn { flex: 1 1 auto; color: #E9EEFB; } /* Knappene står på et mørkt teppe i BEGGE temaer, så fargen er fast her og ikke hentet fra --ink: i lyst tema ville de blitt usynlige. */ .lystopp .knapp.naken { color: #C3CBE0; } @media (hover: hover) and (pointer: fine) { .lystopp .knapp.naken:hover { color: #FFFFFF; background: rgb(255 255 255 / .12); } } /* --- den fulle visningen, på en skjerm med plass ------------------------------ Sidefeltet, samtalen og tråden side om side, som Slack. Under 900 er det ikke plass, og da oppfører den seg som panelet: én ting om gangen. */ @media (min-width: 900px) { .chat.full { flex-direction: row; margin-top: 0; } .chat.full .chat-liste { flex: 0 0 272px; width: 272px; visibility: visible; border-right: 1px solid var(--line-2); background: var(--sidefelt); } .chat.full #chat-samtale { display: flex; position: relative; flex: 1 1 auto; min-width: 0; background: var(--paper); } .chat.full .tradpanel { position: static; flex: 0 0 min(420px, 38%); width: min(420px, 38%); min-width: 320px; border-left: 1px solid var(--line-2); background: var(--paper); } .chat.full .samtale-topp { padding: var(--s-2) var(--s-4); } .chat.full .samtale-topp .tilbake { display: none; } .chat.full .tradpanel .vk.lukk { display: inline-flex; } .chat.full .medlemsknapp { display: inline-flex; } .chat.full .strom { padding-right: 0; } /* Luft til venstre for avataren, som i Slack. I panelet er det panelets egen luft som gjør det. */ .chat.full .melding { padding-left: var(--s-2); padding-right: var(--s-5); } .chat.full .dagskille, .chat.full .nye { margin-left: var(--s-2); margin-right: var(--s-5); } .chat.full .chat-status { padding: 0 var(--s-5); } } /* Berøring: alt man trykker på i chatten er minst 44, som ellers i Lodd. Med mus er radene 32, som i Slack. Emnet i toppen får en usynlig flate over og under seg i stedet for å gjøre toppen høyere. */ @media (hover: none), (pointer: coarse) { .sf-rad, .sf-seksjonstopp, .sf-sok, .medlemsknapp, .kanalsok .filter { min-height: 44px; } .ev-fane { width: 44px; height: 44px; } .samtale-om.emne { position: relative; } .samtale-om.emne::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; } } /* Knappen som går tilbake til panelet står bare i den fulle visningen. */ .chat:not(.full) [data-handling="modus"] { display: none; } /* --- telefon: panelet tar hele flaten ------------------------------------- Under 900px er det ikke plass til et panel ved siden av noe. Da legger chatten seg over innholdet, under topplinja. Samtalen og tråden legger seg over ALT, også topplinja. Høyden kommer fra visualViewport (chat.js), så skrivefeltet står over tastaturet på iPhone og ikke bak det. */ @media (max-width: 899px) { .chatpanel { position: fixed; left: 0; right: 0; top: calc(var(--topplinje) + env(safe-area-inset-top, 0px)); bottom: 0; width: auto; z-index: 25; border-left: 0; } .chathandtak { display: none; } .chat.apen #chat-samtale, .chat.itrad .tradpanel { position: fixed; left: 0; right: 0; top: var(--vv-topp, 0px); bottom: auto; height: var(--vv-hoyde, 100dvh); z-index: 30; padding: 0 var(--s-4); } .chat.itrad .tradpanel { z-index: 31; } .samtale-topp { padding-top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); } /* Streken nederst på iPhone ligger over skrivefeltet uten dette. */ .skriv { padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); } /* Under 16px zoomer Safari inn når feltet får fokus. */ .skrivefelt, .hopp-felt, .ev-sok, .kanalsok input, .lenkeboks input { font-size: var(--t-5); } .hopp-boks { margin-top: var(--s-4); } .skrivbunn .hint { display: none; } } /* ========================================================================== INSTALLER Egen side, utenfor innloggingen, fordi Joar må kunne lese den FØR han har kommet inn. Den viser ingen data, bare framgangsmåten. Kortene henger på loddlinja som radene ellers, og tallene står i margen. ========================================================================== */ .stedkort { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--line); } .stedkort:first-child { border-top: 1px solid var(--line); } .stedkort h2 { margin: 0; padding-left: calc(var(--marg) + var(--inn)); font-family: var(--font-body); font-size: var(--t-4); font-weight: 500; color: var(--ink); } .stedkort .under { display: block; padding-left: calc(var(--marg) + var(--inn)); margin-top: var(--s-1); } /* Stedet du sitter på står med et rolig segment på linja, som «venter» ellers i skallet. Ingen farge, bare en strek, så det ikke roper. */ .stedkort.fram { position: relative; } .stedkort.fram::before { content: ''; position: absolute; left: calc(var(--marg) - 1px); top: var(--s-4); bottom: var(--s-5); width: 2px; background: var(--brand); } .stedkort .steg { list-style: none; margin: var(--s-3) 0 0; padding: 0; } .stedkort .steg li { display: flex; align-items: baseline; gap: var(--inn); padding: var(--s-2) 0; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); } /* Tallet står i margen, høyrestilt mot linja, som klokkeslettene. */ .stedkort .steg .nr { flex: 0 0 var(--marg); width: var(--marg); padding-right: var(--s-4); text-align: right; font-family: var(--font-mono); font-size: var(--t-2); color: var(--ink-3); font-variant-numeric: tabular-nums; } /* Lenka til installeringen står nederst på innloggingskortet. Den må være der, ikke bak innloggingen, fordi den som skal installere appen ennå ikke er kommet inn. */ .installerlenke { margin: var(--s-5) 0 0; text-align: center; } .installerlenke a { color: var(--ink-3); } @media (hover: hover) and (pointer: fine) { .installerlenke a:hover { color: var(--ink); } } /* ========================================================================== I APPEN PÅ MAC På Mac har appen en gjennomsiktig tittellinje: siden fyller hele vinduet, og de tre knappene flyter oppå den øverst til venstre. Det er slik Slack og Linear gjør det, og det krever to ting av oss. 1. INNHOLDET MÅ VIKE. Knappene tar rundt 78px, og merket skyves forbi dem. 2. TOPPLINJA MÅ KUNNE DRA VINDUET. Uten tittellinje finnes det ingen annen måte å flytte vinduet på. Alt som kan klikkes, må meldes ut igjen, ellers drar man vinduet i stedet for å trykke på knappen. På Windows beholder appen sin vanlige tittellinje, fordi Windows ikke har en gjennomsiktig variant. Der ligger knappene OVER siden, ikke oppå den, så ingenting trenger å vike og topplinja trenger ikke dra. ========================================================================== */ [data-app="mac"] .topplinje { padding-left: var(--knapper-mac); -webkit-app-region: drag; app-region: drag; } [data-app="mac"] .topplinje button, [data-app="mac"] .topplinje a, [data-app="mac"] .topplinje input, [data-app="mac"] .topplinje select { -webkit-app-region: no-drag; app-region: no-drag; } /* Sidemenyen på smal bredde ligger rett under topplinja og blir ellers liggende under knappene når vinduet gjøres smalt. */ @media (max-width: 899px) { [data-app="mac"] .sidemeny { padding-left: var(--s-5); } } /* ========================================================================== SYSTEMENE, INNE I OS-ET Et innebygd system fyller hele innholdsfeltet, uten marg og loddlinje: systemet har sin egen form, og en strek gjennom den ville bare vært støy. Rammen, ikke siden, er det som ruller, så .ramme får fast høyde mens et system vises, og hver boks nedover får min-height: 0 så den kan krympe. Uten det vokser rammen til innholdets høyde, og da ruller hele OS-et med systemet, sidemenyen også. ========================================================================== */ .modus-modul .ramme { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } .modus-modul .kropp { min-height: 0; } .modus-modul .innhold { padding: 0; background: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .modus-modul #skjerm-modul.pa { flex: 1 1 auto; min-height: 0; display: flex; position: relative; } .modulramme { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: var(--paper); } .modulramme[hidden] { display: none; } /* Står bak rammen til den har lastet. Ingen spinner: en rolig linje sier nok, og den er borte i det systemet tegner seg. */ .modul-laster { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: var(--t-3); color: var(--ink-3); } .modul-laster[hidden] { display: none; } /* ========================================================================== TENKEPRIKKENE (4. oktober 2026, spes-design-v2.md 8) Theodor likte prosessen i Claude-appen, der et lite merke går rundt mens noe arbeider, og ville ha den her. Dette er vår utførelse: fire prikker i et kvadrat på 16, i merkets blå, som snur seg jevnt én gang i sekundet mens prikkene pulserer forskjøvet. Bare transform og opacity, så den går på grafikkortet og aldri flytter noe rundt seg. Én komponent for hele appen. HTML-en lages av window.LODD_TENKER.linje() i os.js: prikkene, hva som skjer akkurat nå, og eventuelt hvor lenge det har holdt på. Den brukes der en tekst før sa «Henter» eller «Laster», aldri i stedet for skjelettene i listene, og aldri i oppdaterknappen, som har sin egen pil. ========================================================================== */ .tenker { position: relative; display: inline-block; flex: none; width: var(--tenker); height: var(--tenker); vertical-align: middle; animation: tenker-rund 1s linear infinite; } .tenker > i { position: absolute; width: var(--tenker-prikk); height: var(--tenker-prikk); border-radius: 50%; background: var(--brand-tekst); animation: tenker-puls 1.6s ease-in-out infinite; } /* Rundt med klokka, og pulsen følger etter. Negative forsinkelser, så alle fire er i gang fra første bilde. */ .tenker > i:nth-child(1) { top: 0; left: 0; } .tenker > i:nth-child(2) { top: 0; right: 0; animation-delay: -1.2s; } .tenker > i:nth-child(3) { right: 0; bottom: 0; animation-delay: -.8s; } .tenker > i:nth-child(4) { bottom: 0; left: 0; animation-delay: -.4s; } @keyframes tenker-rund { to { transform: rotate(1turn); } } @keyframes tenker-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } } /* Prikkene, det som skjer, og tiden. Tiden er et tall, så den står i mono. */ .tenkelinje { display: inline-flex; align-items: center; gap: var(--s-3); max-width: 100%; color: var(--ink-3); } .tenkelinje .tenk-tekst { min-width: 0; overflow-wrap: anywhere; } .tenkelinje .tenk-tid { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); } /* Uten bevegelse: ingen rotasjon og ingen bølge (regelen for hele appen over tar alle animasjoner). Prikkene står i kvadratet, dempet i trinn som et stillbilde av runden, så det fortsatt synes at noe pågår. */ @media (prefers-reduced-motion: reduce) { .tenker, .tenker > i { animation: none; } .tenker > i:nth-child(1) { opacity: .9; } .tenker > i:nth-child(2) { opacity: .65; } .tenker > i:nth-child(3) { opacity: .45; } .tenker > i:nth-child(4) { opacity: .3; } } /* ========================================================================== HUDDLENE (26. september 2026, grenen chat/huddle) Lyd, video og skjermdeling i chatten. Alt her tegnes av huddle.js, og bolken står for seg sist i fila så chatten kan bygges om uten å røre den. Kontrakten står i docs/huddle.md. Grønn betyr at en huddle pågår, og at noen snakker. Rød betyr at mikrofonen er av, og er fargen på «Forlat». Ingen andre farger: resten er kant og flate, som ellers i Lodd. Bare det som faktisk flyter over noe annet (linja når chatten er lukket, og beskjeden) har skygge. ========================================================================== */ /* KNAPPEN I KANALTOPPEN, ved siden av navnet. Den negative margen holder raden på navnets høyde, så toppen ikke vokser med klikkflata på 44. */ .knapp.liten.huddleknapp { flex: 0 0 auto; min-width: 44px; padding: 0 var(--s-3); margin: calc(var(--s-3) * -1) 0; gap: var(--s-2); color: var(--ink-3); } .huddleknapp svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .huddleknapp:hover { color: var(--ink); } } .huddleknapp.pagar { color: var(--gronn); } .huddleknapp.med { color: var(--gronn); background: var(--flate-3); } .huddleknapp[aria-busy="true"] { cursor: progress; opacity: .6; } .huddle-antall { font-family: var(--font-mono); font-size: var(--t-2); font-variant-numeric: tabular-nums; } /* MERKET I KANALLISTA. Hodetelefoner og antallet, i grønt, som i Slack. */ .huddle-merke { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: var(--s-3); color: var(--gronn); font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; vertical-align: middle; } .huddle-merke svg { width: 14px; height: 14px; } .huddle-merke .mono { font-variant-numeric: tabular-nums; } /* KORTET UNDER LINJA «Startet en huddle.» Statusen sitter som et segment på kanten, som på Hjem. */ .huddle-kort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-left: 2px solid var(--gronn); border-radius: var(--r-2); background: var(--flate); font-size: var(--t-3); line-height: var(--t-3-h); } .huddle-kort-tekst { flex: 1 1 auto; min-width: 0; color: var(--ink-2); } .huddle-kort-med { color: var(--gronn); font-weight: 500; } .huddle-kort .huddle-folk { flex: 0 0 auto; } .huddle-kort .huddle-avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: var(--t-1); } /* AVATARENE. Fargen er personens egen fra TEAM, satt av huddle.js med style.setProperty. Bokstaven er hvit i begge temaer: fargene er mørke og mettede, og --brand-blekk snur til mørk i mørkt tema. Ringen er en outline, ikke en skygge: den er et signal, ikke en høyde. */ .huddle-avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--farge, var(--brand)); color: #FFFFFF; font-family: var(--font-mono); font-size: var(--t-2); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--tid-1) var(--kurve); } .huddle-avatar.snakker { outline-color: var(--gronn); } .huddle-avatar.stor { width: 72px; height: 72px; flex-basis: 72px; font-size: var(--t-7); } .huddle-dempet { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); color: var(--rod); display: inline-flex; align-items: center; justify-content: center; } .huddle-dempet svg { width: 10px; height: 10px; } .huddle-avatar.stor .huddle-dempet { width: 24px; height: 24px; right: 0; bottom: 0; } .huddle-avatar.stor .huddle-dempet svg { width: 14px; height: 14px; } /* LINJA. I chatten ligger den nederst i panelet, under en hårstrek. */ .huddle-dokk { flex: 0 0 auto; border-top: 1px solid var(--line-2); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); } .huddle-linje-innhold { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; } .huddle-topp { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; min-width: 0; } .huddle-ikon { display: inline-flex; flex: 0 0 auto; color: var(--gronn); } .huddle-ikon svg { width: 16px; height: 16px; } .huddle-tittel { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .huddle-tid { flex: 0 0 auto; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } .huddle-folk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .huddle-knapper { display: flex; align-items: center; gap: var(--s-2); } .huddle-melding { margin: 0; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--amber); } /* Knappene er 44 i begge retninger, fordi de trykkes midt i en samtale, ofte uten å se. Av og på vises med aria-pressed, ikke bare med farge. */ .huddle-knapp { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink-2); cursor: pointer; box-shadow: var(--relieff); transition: background var(--tid-1) var(--kurve), border-color var(--tid-1) var(--kurve), color var(--tid-1) var(--kurve); } .huddle-knapp:active { transform: scale(.97); } .huddle-knapp svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .huddle-knapp:hover { color: var(--ink); border-color: var(--line-3); } } .huddle-knapp[aria-pressed="true"] { background: var(--flate-3); border-color: var(--line-3); color: var(--ink); } .huddle-knapp[data-hh="mikrofon"][aria-pressed="false"] { color: var(--rod); } .huddle-knapp[aria-expanded="true"] { background: var(--flate-3); border-color: var(--line-3); color: var(--ink); } .huddle-knapp.naken { border-color: transparent; background: none; box-shadow: none; color: var(--ink-3); } @media (hover: hover) and (pointer: fine) { .huddle-knapp.naken:hover { color: var(--ink); background: var(--flate-3); } } .huddle-knapp.forlat { margin-left: auto; color: var(--rod); } @media (hover: hover) and (pointer: fine) { .huddle-knapp.forlat:hover { background: var(--rod); border-color: var(--rod); color: var(--paper); } } /* NÅR CHATTEN ER LUKKET flyter linja nederst til høyre, over det man jobber i. Den ligger faktisk over noe, så den får skygge. Hjørnene og skyggen står bare på stor skjerm: på telefon er den en rad over alt annet, med rette kanter (se under). */ .huddle-flyt { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 35; width: 320px; max-width: calc(100vw - var(--s-5) * 2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); background: var(--flate); } @media (min-width: 900px) { .huddle-flyt { border-radius: var(--r-3); box-shadow: var(--over); } } /* VINDUET. Legger seg over innholdsfeltet (målene kommer fra huddle.js), så chatten står ved siden av og kan brukes mens man ser på en skjerm som deles. Bildene står på --skjerm, som er mørk i begge temaer: et bilde skal ses på sin egen eksponering, ikke på flaten rundt. */ .huddle-vindu { position: fixed; top: var(--hv-topp, var(--topplinje)); left: var(--hv-venstre, 0px); width: var(--hv-bredde, 100vw); height: var(--hv-hoyde, calc(100dvh - var(--topplinje))); z-index: 40; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-6); background: var(--paper); } .huddle-vindu:focus { outline: none; } .huddle-vindu-topp { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-2); } .huddle-vindu-topp .huddle-tittel { flex: 0 1 auto; font-size: var(--t-5); line-height: var(--t-5-h); } .huddle-vindu-topp .vokser { flex: 1 1 auto; } .huddle-flate { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-4); overflow: auto; } .huddle-scene { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--s-4); grid-auto-rows: minmax(0, 1fr); } .huddle-rutenett { flex: 1 1 auto; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-content: center; } .huddle-rutenett[data-antall="1"] { grid-template-columns: minmax(0, 720px); justify-content: center; } .med-scene .huddle-rutenett { flex: 0 0 auto; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); justify-content: center; } .huddle-rute { position: relative; aspect-ratio: 16 / 9; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--skjerm); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--tid-1) var(--kurve); } .huddle-rute.snakker { outline-color: var(--gronn); } .huddle-rute.skjerm { aspect-ratio: auto; height: 100%; } .huddle-rute video { display: block; width: 100%; height: 100%; object-fit: cover; } .huddle-rute.skjerm video { object-fit: contain; } .huddle-rute video.speil { transform: scaleX(-1); } /* Navnet står på bildet. Flaten bak er mørk i begge temaer, så teksten er hvit i begge. */ .huddle-navn, .huddle-kobler { position: absolute; left: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); max-width: calc(100% - var(--s-5)); padding: var(--s-1) var(--s-3); border-radius: var(--r-1); background: rgb(0 0 0 / .55); color: #FFFFFF; font-size: var(--t-2); line-height: var(--t-2-h); white-space: nowrap; } .huddle-navn { bottom: var(--s-3); } .huddle-navn > span:first-child { overflow: hidden; text-overflow: ellipsis; } .huddle-kobler { top: var(--s-3); } .huddle-rute-dempet { display: inline-flex; color: var(--rod-paa-morkt); } .huddle-rute-dempet svg { width: 12px; height: 12px; } .huddle-vindu .huddle-knapper { flex: 0 0 auto; justify-content: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-2); } .huddle-vindu .huddle-knapp.forlat { margin-left: var(--s-5); } .huddle-vindu .huddle-melding { flex: 0 0 auto; text-align: center; } /* VALGET AV MIKROFON, HØYTTALER OG KAMERA. */ .huddle-enheter { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); } .huddle-enhet { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .huddle-enhet select { width: 100%; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); color: var(--ink); font: inherit; font-size: var(--t-5); /* 16px eller mer, ellers zoomer iOS inn på valget og aldri ut igjen */ } /* BESKJEDEN når noe går galt utenfor en huddle, som «Huddlen er full». */ .huddle-beskjed { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: 60; max-width: calc(100vw - var(--s-5) * 2); margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--flate); box-shadow: var(--over); font-size: var(--t-3); line-height: var(--t-3-h); } /* TELEFON. Chatpanelet og samtalen dekker hele flaten her, så det finnes ikke noe hjørne linja kan flyte i uten å ligge over noe man trenger. Den legger seg derfor som en egen rad øverst, og resten flytter seg ned med nøyaktig dens høyde (--huddle-hoyde). Én rad: navnet, avatarene, mikrofonen, «Vis stor» og «Forlat». Kameraet slås på i vinduet. */ @media (max-width: 899px) { /* Reserven til huddle.js har målt den virkelige høyden: knappen (44), lufta over og under (--s-3) og hårstreken (1), pluss det systemet tar øverst. Et fast tall her sprakk i det knappehøyden eller --s-3 ble endret, eller i det beskjeden la seg på en rad til. Den målte verdien skrives på og inneholder det samme, så ingen av dem legger safe-area-inset-top til en gang til. */ :root { --huddle-hoyde: calc(44px + var(--s-3) * 2 + 1px + env(safe-area-inset-top, 0px)); } .huddle-flyt { top: 0; left: 0; right: 0; bottom: auto; width: auto; max-width: none; z-index: 45; padding: calc(env(safe-area-inset-top, 0px) + var(--s-3)) var(--s-4) var(--s-3); border: 0; border-bottom: 1px solid var(--line-2); } /* wrap, ikke nowrap: beskjeden skal kunne legge seg på en rad under, og huddle.js måler den virkelige høyden inn i --huddle-hoyde, så resten av flata flytter seg like langt ned som linja faktisk er høy. */ .huddle-linje-innhold.flytende { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .flytende .huddle-topp { flex: 1 1 auto; min-height: 44px; } .flytende .huddle-tid { display: none; } .flytende .huddle-folk { flex-wrap: nowrap; gap: 0; } .flytende .huddle-folk .huddle-avatar { width: 28px; height: 28px; flex-basis: 28px; margin-left: calc(var(--s-3) * -1); outline-offset: 0; border: 2px solid var(--flate); } .flytende .huddle-folk .huddle-avatar:first-child { margin-left: 0; } .flytende .huddle-knapp[data-hh="kamera"], .flytende .huddle-knapp[data-hh="skjerm"] { display: none; } /* Beskjeden står, også her. På telefon flyter linja alltid, og dette er det eneste stedet «Trykk hvor som helst for å høre de andre» eller «Fikk ikke bruke mikrofonen» vises. Nettopp på iOS slår avspillingssperren inn oftest, og en huddle uten lyd og uten en forklaring er verre enn en linje som blir to. Den legger seg på egen rad under knappene, så raden over står urørt. */ .flytende .huddle-melding { flex: 1 0 100%; order: 9; font-size: var(--t-1); line-height: var(--t-1-h); } .huddle-flyter .ramme { padding-top: var(--huddle-hoyde); } .huddle-flyter .topplinje { height: var(--topplinje); padding-top: 0; } .huddle-flyter .chatpanel { top: calc(var(--topplinje) + var(--huddle-hoyde)); } .huddle-flyter .chat.apen .samtale { top: calc(var(--vv-topp, 0px) + var(--huddle-hoyde)); height: calc(var(--vv-hoyde, 100dvh) - var(--huddle-hoyde)); } .huddle-flyter .samtale-topp { padding-top: var(--s-2); } .huddle-vindu { top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 50; padding: calc(env(safe-area-inset-top, 0px) + var(--s-3)) var(--s-4) calc(env(safe-area-inset-bottom, 0px) + var(--s-3)); } .huddle-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .huddle-rutenett[data-antall="1"] { grid-template-columns: minmax(0, 1fr); } .med-scene .huddle-rutenett { grid-template-columns: repeat(4, minmax(0, 1fr)); } .huddle-vindu .huddle-knapper { gap: var(--s-2); } .huddle-vindu .huddle-knapp.forlat { margin-left: var(--s-3); } .huddle-avatar.stor { width: 56px; height: 56px; flex-basis: 56px; font-size: var(--t-6); } } @media (prefers-reduced-motion: reduce) { .huddle-avatar, .huddle-rute { transition: none; } } /* --- telefonen, til slutt -------------------------------------------------- Reglene som gjelder fordi flata holdes i en hånd, samlet på ett sted i stedet for spredt utover. Resten av telefonarbeidet står der det hører hjemme: gulvet på 44 ved hver trykkflate, 100dvh ved hver full høyde, env(safe-area-inset-*) ved hver kant. SEKSTEN PIKSLER I ET FELT Safari på iPhone zoomer inn når et felt med skrift under 16px får fokus, og den zoomer aldri ut igjen: resten av økta står man med en side som er for stor for skjermen. --t-4 er 15. Derfor løftes hvert eneste felt til --t-5, altså 17, under 900px. Chatten hadde denne regelen for sine felt fra før; her er de andre. Det er billigere enn å gjøre --t-4 til 16 overalt, som ville endret rytmen på en skjerm der problemet ikke finnes. */ @media (max-width: 899px) { /* .kodefelt står 28px og er unntaket i sjekk-lodd.mjs. Den er alt over 16 og nevnes derfor ikke her. */ input, select, textarea { font-size: var(--t-5); } } /* ========================================================================== RUTA FRA HØYRE (28. september 2026, Oppgaver er første bruker) Detaljen om raden man nettopp trykket på. Den legger seg over innholdet og dytter ikke: man er ferdig med den om et øyeblikk, og dyttet den, ville den slåss med chatten om bredden. Ikke modal, og fokus fanges ikke, så en annen rad kan trykkes mens den står åpen (spes-navigasjon.md 4.4). Kant og ikke skygge, som ellers i Lodd: teppet og kanten sier alt skyggen ville sagt. Delene heter .rute-noe, men står under .rute i velgeren, så komponenten er ett begrep i stilarket og ikke fire. Teppet står rett etter ruta i HTML-en av samme grunn. Teppet demper bare over 900px, og slipper klikket gjennom til lista bak. Under 900px dekker ruta hele flaten, og da er teppet det som lukker. */ .rute { position: fixed; top: 0; right: 0; bottom: 0; z-index: 58; display: flex; flex-direction: column; width: var(--rute-bredde); max-width: 100%; border-left: 1px solid var(--line-2); background: var(--flate); } .rute ~ .rute-teppe { position: fixed; inset: 0; z-index: 57; background: var(--teppe); pointer-events: none; } .rute > .rute-hode { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); padding-top: calc(var(--s-3) + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); } .rute > .rute-hode h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); overflow-wrap: anywhere; } .rute > .rute-kropp { flex: 1 1 auto; overflow: hidden auto; padding: var(--s-5) var(--s-5) calc(var(--s-7) + env(safe-area-inset-bottom)); } @media (max-width: 899px) { .rute { width: 100%; border-left: 0; } .rute ~ .rute-teppe { pointer-events: auto; } } /* ========================================================================== KORT, DET SOM DRAS, SLIPPSONEN, FRAMDRIFT OG DAGBRIKKA (29. september 2026) Lagt til for Oppgaver versjon 2 (docs/helhet/spes-oppgaver-v2.md 1.1), men bor her fordi tavla, lista og senere systemer skal løfte og slippe likt. Kant i stedet for skygge gjelder fortsatt: .kort har ingen skygge i ro. Det eneste som får --over, er det man holder i, for det flyter faktisk over resten av skjermen mens det dras. ========================================================================== */ .kort { /* Versjon 2: hvitt kort med den lette skyggen, ingen kant i lyst tema og kant i mørkt, der skygge ikke synes (retning B). */ background: var(--flate); border: 1px solid var(--kort-strek); border-radius: var(--r-3); box-shadow: var(--over-lett); padding: var(--s-4); } /* EN LISTE I ET KORT. Radene ligger rett i kortet, som indeksene hos Shopify, og kortet har ingen egen luft: radene har sin. Streken over den første og under den siste faller bort, kortet er kanten. */ .kort:has(> .rad) { padding: 0; } .kort > .rad:first-of-type { border-top: 0; } .kort > .rad:last-child { border-bottom: 0; } /* Verdiene til høyre i raden står ellers helt inntil kortets kant. */ .kort > .rad .inn { padding-right: var(--s-4); } /* Når og Hvor brekker heller enn å gå oppå hverandre. «7, 22, 37 og 52 over hver time» rant inn i neste kolonne på 1440 (skjermbildet av Rutiner, 30. september 2026). */ .rad .hoyre.kol-plan, .rad .hoyre.kol-hvor { white-space: normal; } .kort:empty { display: none; } /* En tom tilstand inne i et kort er ikke et kort til. */ .kort > .seksjon-tom { border: 0; box-shadow: none; } /* ÉN FLATE OM GANGEN (spes-design-v2.md 2, regel 3). Et felt på et kort har ingen egen ramme, bare en fylt flate. sjekk-lodd.mjs stopper en border på et felt inne i .kort. */ .kort :is(input[type=email], input[type=text], input[type=search], textarea, select) { border-color: transparent; background: var(--flate-2); box-shadow: none; } /* IKONENE I MENYEN. Én størrelse, strek og ikke fyll, i --ink-3 til punktet er valgt. De bærer gjenkjenning, ikke pynt: elleve punkter i tre grupper finnes igjen på et halvt sekund med ikon (spes-design-v2.md 1.2). */ .menyikon { width: var(--ikon); height: var(--ikon); flex: 0 0 var(--ikon); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); } /* Transformen som følger pekeren settes hver frame uten overgang (se trykket på .knapp for hvorfor en overgang på transform henger etter). Overgangen her gjelder bare løftet og skyggen i det raden gripes. */ .kort.loftet, .rad.loftet { transform: var(--loft); box-shadow: var(--over); background: var(--flate); z-index: 2; cursor: grabbing; transition: transform var(--tid-1) var(--kurve), box-shadow var(--tid-1) var(--kurve); } .slippsone { outline: 1px dashed var(--line-2); outline-offset: calc(-1 * var(--s-1)); border-radius: var(--r-2); min-height: var(--s-8); } /* Framdriften i et underoppgave-merke. Den fylte delens bredde settes fra koden, og er det ene stedet width animeres: 40px, én flate, ingen layout rundt som flytter seg. */ .framdrift-strek { display: inline-block; position: relative; width: var(--framdrift-bredde); height: var(--s-1); background: var(--line-2); border-radius: var(--r-1); overflow: hidden; vertical-align: middle; } .framdrift-strek .fylt { display: block; width: 0; height: 100%; background: var(--gronn); transition: width var(--tid-3) var(--kurve); } /* Dagen i en rad eller på et kort. Versjon 2: en fylt brikke uten kant, som .pille i prøven. I dag får merkets svake fyll, en passert dag det svake amber: det er venter-fargen, og den betyr det samme her. */ .dagbrikke { display: inline-flex; align-items: center; justify-content: center; min-height: var(--t-3-h); min-width: var(--s-7); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: var(--flate-3); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-2); line-height: var(--t-3-h); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Blekk og ikke --brand-tekst på det svake fyllet: i mørkt tema holdt merkets tekstfarge bare 3,8 i kontrast der (nettleserprøven 30. sep). */ .dagbrikke.er-idag { background: var(--brand-svak); color: var(--ink); font-weight: 600; } .dagbrikke.er-passert { background: var(--amber-svak); color: var(--amber); } @media (prefers-reduced-motion: reduce) { .kort.loftet, .rad.loftet { transform: none; } .framdrift-strek .fylt { transition: none; } } /* ========================================================================== DIAGRAMSETTET I LODD (30. september 2026, spes-hjem-lager-v3.md 5) Tegnes av statisk/assets/diagrammer.js. Farge betyr noe eller er grå: f-klassene setter både background (DOM) og stroke (SVG), så samme navn virker i begge. Ingen hex her; alt er tokens. ========================================================================== */ .diagram { position: relative; width: 100%; } .diagram svg { display: block; width: 100%; height: 100%; overflow: visible; } .diagram .linje { fill: none; stroke: var(--brand-tekst); stroke-width: var(--strek-tynn); stroke-linejoin: round; stroke-linecap: round; } .diagram .linje.stiplet { stroke-dasharray: 4 4; } .diagram .flate-fyll { fill: var(--diagram-fyll); } .diagram .rist { stroke: var(--line); stroke-width: 1; } .diagram .peker { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--tid-2) var(--kurve); } .diagram .punkt { position: absolute; left: var(--px, 100%); top: var(--py, 50%); width: var(--punkt); height: var(--punkt); margin: calc(var(--punkt) / -2 - var(--strek-tynn)) 0 0 calc(var(--punkt) / -2 - var(--strek-tynn)); border: var(--strek-tynn) solid var(--brand-tekst); border-radius: 50%; background: var(--flate); opacity: 0; pointer-events: none; transition: opacity var(--tid-2) var(--kurve); } .diagram.sveip .peker, .diagram.sveip .punkt { opacity: 1; } .diagram .sveipflate { position: absolute; inset: 0; cursor: crosshair; border-radius: var(--r-1); } .diagram .sveipflate:focus-visible { outline: none; box-shadow: var(--fokus); } .diagram.trend { height: var(--diagram-h); } .diagram.gnist { height: var(--diagram-h-liten); } .diagram-skjult { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .diagram-mangler { display: flex; align-items: center; height: 100%; font-size: var(--t-3); color: var(--ink-3); } .avlesning { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-height: var(--t-4-h); margin: var(--s-5) 0 var(--s-2); font-family: var(--font-mono); font-size: var(--t-3); line-height: var(--t-4-h); color: var(--ink-3); font-variant-numeric: tabular-nums; } .avlesning > span:only-child { font-family: var(--font-ui); } .avlesning b { color: var(--ink); font-weight: 500; font-size: var(--t-4); } .ring { display: flex; align-items: center; gap: var(--s-5); } .ring svg { width: var(--ring); height: var(--ring); flex: 0 0 auto; } .ring circle { fill: none; stroke-width: var(--ring-tykk); } .ring .spor { stroke: var(--flate-3); } .ring .del { transition: stroke-dasharray var(--tid-5) var(--kurve), stroke-dashoffset var(--tid-5) var(--kurve); } .ring .midt { font-family: var(--font-mono); font-size: var(--t-6); font-weight: 500; fill: var(--ink); } .ring .midt-under { font-family: var(--font-ui); font-size: var(--t-1); fill: var(--ink-3); } .legende { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 0; } .legende .l { display: flex; align-items: center; gap: var(--s-3); min-height: var(--t-6-h); font-size: var(--t-3); color: var(--ink-2); } .legende .farge { width: var(--farge-merke); height: var(--farge-merke); border-radius: var(--r-1); flex: 0 0 auto; } .legende .mono { margin-left: auto; color: var(--ink); } .f-gronn, .diagram .f-gronn, .ring .f-gronn { background: var(--gronn); stroke: var(--gronn); } .f-rod, .diagram .f-rod, .ring .f-rod { background: var(--rod); stroke: var(--rod); } .f-amber, .diagram .f-amber, .ring .f-amber { background: var(--amber); stroke: var(--amber); } .f-brand, .diagram .f-brand, .ring .f-brand { background: var(--brand-tekst); stroke: var(--brand-tekst); } .f-ink, .diagram .f-ink, .ring .f-ink { background: var(--ink); stroke: var(--ink); } .f-ink2, .diagram .f-ink2, .ring .f-ink2 { background: var(--ink-2); stroke: var(--ink-2); } .f-ink3, .diagram .f-ink3, .ring .f-ink3 { background: var(--ink-3); stroke: var(--ink-3); } .f-line, .diagram .f-line, .ring .f-line { background: var(--line-3); stroke: var(--line-3); } .f-violett, .diagram .f-violett, .ring .f-violett { background: var(--violett); stroke: var(--violett); } .andeler { display: flex; gap: var(--s-1); height: var(--strek); border-radius: var(--r-1); overflow: hidden; background: var(--flate-3); } .andeler > span { display: block; height: 100%; width: var(--andel, 0%); min-width: 0; transition: width var(--tid-5) var(--kurve), opacity var(--tid-2) var(--kurve); } .andeler > span[role="button"] { cursor: pointer; } .andeler > span[hidden] { display: none; } .andeler > span.dempet { opacity: .35; } .andeler > span:focus-visible { outline: none; box-shadow: var(--fokus); } /* En andelsstrek man kan trykke på, er en fingerhøy strek på telefon: 8 px er for lite å treffe (nettleserprøven 1. oktober 2026). */ @media (max-width: 599px), (pointer: coarse) { .andeler[role="group"] { height: var(--finger); border-radius: var(--r-2); } } .trakt { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-3); align-items: start; } .trakt .steg { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .trakt .stolpe { position: relative; height: var(--diagram-h); overflow: hidden; border-radius: var(--r-2); background: var(--flate-2); } .trakt .stolpe i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fyll, 0%); border-radius: var(--r-2) var(--r-2) 0 0; background: var(--brand-tekst); transition: height var(--tid-5) var(--kurve); } .trakt .steg.svak .stolpe i { background: var(--line-3); } .trakt .steg.rod .stolpe i { background: var(--rod); } .trakt .verdi { font-family: var(--font-mono); font-size: var(--t-5); line-height: var(--t-5-h); font-weight: 500; } .trakt .navn { overflow: hidden; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; } .trakt .fall { min-height: var(--t-1-h); font-family: var(--font-mono); font-size: var(--t-1); color: var(--rod); } .dekning { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .dekning .skala { position: relative; flex: 1; height: var(--strek); border-radius: var(--r-1); background: var(--flate-3); } .dekning .skala i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fyll, 0%); border-radius: var(--r-1); background: var(--gronn); transition: width var(--tid-5) var(--kurve); } .dekning.amber .skala i { background: var(--amber); } .dekning.rod .skala i { background: var(--rod); } .dekning .skala b { position: absolute; top: calc(var(--s-1) * -1); bottom: calc(var(--s-1) * -1); left: var(--maal, 50%); width: var(--strek-tynn); border-radius: var(--r-1); background: var(--ink); } .dekning .dager { min-width: var(--s-8); font-family: var(--font-mono); font-size: var(--t-3); text-align: right; } .dekning.rod .dager { color: var(--rod); font-weight: 500; } .dekning.amber .dager { color: var(--amber); } .varme { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; } .varme .dager { display: grid; grid-template-rows: repeat(7, var(--rute)); gap: var(--s-1); font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--rute); color: var(--ink-3); } .varme .ruter { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--rute)); grid-auto-columns: var(--rute); gap: var(--s-1); } .varme .ruter i { display: block; border-radius: var(--r-1); background: var(--flate-3); } .varme .ruter i.tom { visibility: hidden; } .varme .ruter i.v1 { background: var(--varme-1); } .varme .ruter i.v2 { background: var(--varme-2); } .varme .ruter i.v3 { background: var(--varme-3); } .varme .ruter i.v4 { background: var(--varme-4); } .varme .ruter i.idag { outline: var(--strek-tynn) solid var(--ink); } .varme .ruter i:focus-visible { outline: var(--strek-tynn) solid var(--ink-3); } .varme-fot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); } .varme-fot i { display: block; width: var(--farge-merke); height: var(--farge-merke); border-radius: var(--r-1); background: var(--flate-3); } .varme-fot i.v1 { background: var(--varme-1); } .varme-fot i.v2 { background: var(--varme-2); } .varme-fot i.v3 { background: var(--varme-3); } .varme-fot i.v4 { background: var(--varme-4); } .tidslinje .akse, .tidslinje .rad-t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-4); align-items: center; } .tidslinje .uker { position: relative; height: var(--t-1-h); font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); } .tidslinje .uker span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; } .tidslinje .rad-t { min-height: var(--s-8); border-top: 1px solid var(--line); } .tidslinje .navn { min-width: 0; font-size: var(--t-3); color: var(--ink-3); } .tidslinje .navn b { display: block; overflow: hidden; font-size: var(--t-4); font-weight: 500; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .tidslinje .spor { position: relative; height: var(--s-7); } .tidslinje .stolpe { position: absolute; top: var(--s-2); bottom: var(--s-2); left: var(--fra); width: var(--bredde); display: flex; align-items: center; padding: 0 var(--s-3); overflow: hidden; border: 1px solid var(--brand-tekst); border-radius: var(--r-2); background: var(--brand-svak); font-family: var(--font-mono); font-size: var(--t-1); color: var(--brand-tekst); white-space: nowrap; } .tidslinje .stolpe.gronn { border-color: var(--gronn); background: var(--gronn-svak); color: var(--gronn); } .tidslinje .stolpe.amber { border-color: var(--amber); background: var(--amber-svak); color: var(--amber); } .tidslinje .stolpe.rod { border-color: var(--rod); background: var(--rod-svak); color: var(--rod); } .tidslinje .stolpe .del { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fyll, 0%); background: var(--diagram-mottatt); } .tidslinje .stolpe .tekst { position: relative; } .tidslinje .idag { position: absolute; top: 0; bottom: 0; left: var(--idag); width: var(--strek-tynn); background: var(--ink); pointer-events: none; } .maaler { display: flex; flex-direction: column; gap: var(--s-2); } .maaler .skala { position: relative; height: var(--maaler-h); border-radius: var(--r-1); background: linear-gradient(90deg, var(--rod-svak) 0 var(--grense), var(--gronn-svak) var(--grense) 100%); } .maaler .skala b { position: absolute; top: calc(var(--s-2) * -1); bottom: calc(var(--s-2) * -1); left: var(--grense); width: var(--strek-tynn); background: var(--ink-3); } .maaler .skala i { position: absolute; top: calc((var(--maaler-h) - var(--maaler-punkt)) / 2); left: var(--pos); width: var(--maaler-punkt); height: var(--maaler-punkt); border: 2px solid var(--flate); border-radius: 50%; background: var(--gronn); box-shadow: var(--over-lett); transform: translateX(-50%); transition: left var(--tid-5) var(--kurve); } .maaler.under .skala i { background: var(--rod); } .maaler.ukjent .skala i { display: none; } .maaler .mer { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); } .nokkelrekke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } .nokkelrekke .nokkel + .nokkel { padding-left: var(--s-5); border-left: 1px solid var(--line); } .nokkel { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .nokkel .navn { font-size: var(--t-3); color: var(--ink-3); } .nokkel .verdi { font-family: var(--font-mono); font-size: var(--t-6); line-height: var(--t-6-h); font-weight: 500; font-variant-numeric: tabular-nums; } .nokkel .verdi small { margin-left: var(--s-2); font-family: var(--font-ui); font-size: var(--t-3); font-weight: 400; color: var(--ink-3); } .nokkel .endring { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } .nokkel .endring .menyikon { width: var(--t-2); height: var(--t-2); flex: 0 0 auto; } .nokkel .endring.opp { color: var(--gronn); } .nokkel .endring.ned { color: var(--rod); } @media (max-width: 599px) { .varme { --rute: var(--rute-liten); } .trakt { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } .trakt .steg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: var(--s-3); } .trakt .stolpe { order: 2; height: var(--strek); } .trakt .stolpe i { top: 0; width: var(--fyll); height: 100%; border-radius: var(--r-1); } .trakt .navn { order: 1; } .trakt .verdi { order: 3; font-size: var(--t-4); } .trakt .fall { grid-column: 1 / -1; order: 4; } .trakt .fall:empty { display: none; } .tidslinje .akse, .tidslinje .rad-t { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } .tidslinje .navn-hode { display: none; } /* På telefon er aksen like bred som kortet: annenhver uke, og den første står fra kanten, ikke midt over den (nettleserprøven 1. oktober 2026). */ .tidslinje .uker span:nth-child(2n) { display: none; } .tidslinje .uker span:first-child { transform: none; } .nokkelrekke { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .nokkelrekke .nokkel + .nokkel { padding: var(--s-3) 0 0; border-left: 0; border-top: 1px solid var(--line); } } /* ========================================================================== HJEM I VERSJON 3 (30. september 2026, spes-hjem-lager-v3.md 3) Et øyeblikksbilde av dagen: hilsen og dagens setning, Salget og Annonsene med diagrammene over, Dagens fokus med ringen, og Det som venter som brikker per system. Alt står under #skjerm-hjem, så ingen ny klasse kommer på toppnivå utenom diagramsettet over. ========================================================================== */ #skjerm-hjem .hilsen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; margin: 0 0 var(--s-6); } #skjerm-hjem .hilsen h1.hjem-hilsen { font-family: var(--font-display); font-size: var(--t-8); line-height: var(--t-8-h); font-weight: 400; letter-spacing: 0; } #skjerm-hjem .hilsen .ingress { max-width: 60ch; margin: var(--s-2) 0 0; } #skjerm-hjem .ingress .mono { color: var(--ink); } #skjerm-hjem .setning { max-width: var(--setning-bredde); margin: 0; padding: var(--s-4) var(--s-5); border-left: 3px solid var(--brand-tekst); border-radius: var(--r-2); background: var(--flate); box-shadow: var(--over-lett); } #skjerm-hjem .setning blockquote { margin: 0; font-family: var(--font-display); font-size: var(--t-5); font-style: italic; line-height: var(--t-5-h); color: var(--ink); } #skjerm-hjem .setning figcaption { margin-top: var(--s-2); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); } :is(#skjerm-hjem, #skjerm-lager) .rutenett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; margin: 0 0 var(--s-5); } :is(#skjerm-hjem, #skjerm-lager) .rutenett > .kort { min-width: 0; margin: 0; padding: var(--s-5); } :is(#skjerm-hjem, #skjerm-lager) .rutenett > .kort.tett { padding: 0; } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .kort.tett > .korthode { margin: 0; padding: var(--s-5) var(--s-5) var(--s-3); } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode h2 { margin: 0; font-size: var(--t-5); line-height: var(--t-5-h); font-weight: 600; white-space: nowrap; } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode .hva { font-size: var(--t-3); color: var(--ink-3); } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode .antall { font-family: var(--font-mono); font-size: var(--t-3); color: var(--ink-3); } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode .mer { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .korthode .ikonknapp .menyikon { color: var(--ink-2); } :is(#skjerm-hjem, #skjerm-lager) .merke { font-family: var(--font-ui); display: inline-flex; align-items: center; min-height: var(--t-6-h); padding: 0 var(--s-3); border-radius: var(--r-2); background: var(--flate-3); font-size: var(--t-2); font-weight: 500; color: var(--ink-2); white-space: nowrap; } :is(#skjerm-hjem, #skjerm-lager) .merke.amber { background: var(--amber-svak); color: var(--amber); } :is(#skjerm-hjem, #skjerm-lager) .merke.gronn { background: var(--gronn-svak); color: var(--gronn); } :is(#skjerm-hjem, #skjerm-lager) .merke.rod { background: var(--rod-svak); color: var(--rod); } :is(#skjerm-hjem, #skjerm-lager) .merke.brand { background: var(--brand-svak); color: var(--brand-tekst); } #skjerm-hjem .mangler { margin: var(--s-3) 0 0; padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); font-size: var(--t-3); color: var(--ink-3); } :is(#skjerm-hjem, #skjerm-lager) .periodevalg { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-2); background: var(--flate-2); } :is(#skjerm-hjem, #skjerm-lager) .periodevalg button { min-height: var(--t-6-h); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: none; font: inherit; font-size: var(--t-2); font-weight: 500; color: var(--ink-3); cursor: pointer; } :is(#skjerm-hjem, #skjerm-lager) .periodevalg button[aria-pressed="true"] { background: var(--flate); color: var(--brand-tekst); box-shadow: var(--over-lett); } :is(#skjerm-hjem, #skjerm-lager) .periodevalg button:focus-visible { outline: none; box-shadow: var(--fokus); } #skjerm-hjem #roas-maaler { margin-top: var(--s-5); } #skjerm-hjem .markeder { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-5); font-size: var(--t-3); } #skjerm-hjem .markeder .navn { min-width: var(--s-7); font-weight: 500; } #skjerm-hjem .markeder .strek { height: var(--strek); overflow: hidden; border-radius: var(--r-1); background: var(--flate-3); } #skjerm-hjem .markeder .strek i { display: block; width: var(--fyll, 0%); height: 100%; border-radius: var(--r-1); background: var(--brand-tekst); transition: width var(--tid-5) var(--kurve); } #skjerm-hjem .markeder .strek i.under { background: var(--rod); } #skjerm-hjem .markeder .tall { min-width: var(--marked-tall); font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; } #skjerm-hjem .markeder .tall small { margin-left: var(--s-2); font-size: var(--t-1); color: var(--ink-3); } :is(#skjerm-hjem, #skjerm-lager) .nokkelrekke .nokkel .verdi { font-size: var(--t-5); line-height: var(--t-5-h); } #skjerm-hjem .ring.liten { --ring: var(--ring-liten); --ring-tykk: var(--ring-tykk-liten); } #skjerm-hjem .ring.liten .midt { font-size: var(--t-4); } #hjem-fokus .rad { display: flex; align-items: center; gap: var(--s-4); min-height: var(--s-8); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); color: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { #hjem-fokus .rad:hover { background: var(--flate-2); } } #hjem-fokus .rad .status { width: var(--t-6); height: var(--t-6); flex: 0 0 auto; color: var(--ink-3); } #hjem-fokus .rad .status.ferdig { color: var(--gronn); } #hjem-fokus .rad .status.jobbes-med { color: var(--amber); } #hjem-fokus .rad .tekst { flex: 1; min-width: 0; } #hjem-fokus .rad .tittel { display: block; overflow: hidden; font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } #hjem-fokus .rad.ferdig .tittel { color: var(--ink-3); text-decoration: line-through; } #hjem-fokus .rad .under { display: block; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); } #hjem-fokus .tomt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 var(--s-5) var(--s-5); padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); } #hjem-fokus .tomt .system { display: inline-flex; align-items: center; justify-content: center; width: var(--s-7); height: var(--s-7); flex: 0 0 auto; border-radius: var(--r-2); background: var(--flate); color: var(--gronn); } #hjem-fokus .tomt .system .menyikon { width: var(--t-4); height: var(--t-4); } #hjem-fokus .tomt .tekst { flex: 1; min-width: 0; } #hjem-fokus .tomt .tekst b { display: block; font-size: var(--t-4); font-weight: 500; } #hjem-fokus .tomt .tekst span { display: block; font-size: var(--t-3); color: var(--ink-3); } #venter-brikker { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } #venter-brikker a { display: flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: var(--s-8); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--flate-2); color: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { #venter-brikker a:hover { background: var(--flate-3); } } #venter-brikker .system { display: inline-flex; align-items: center; justify-content: center; width: var(--s-7); height: var(--s-7); flex: 0 0 auto; border-radius: var(--r-2); background: var(--flate); color: var(--ink-3); } #venter-brikker .system .menyikon { width: var(--t-4); height: var(--t-4); } #venter-brikker .tekst { flex: 1; min-width: 0; } #venter-brikker .tekst b { display: block; overflow: hidden; font-size: var(--t-3); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } #venter-brikker .tekst span { display: block; overflow: hidden; font-size: var(--t-2); color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; } #venter-brikker .merke { font-family: var(--font-mono); font-weight: 400; } #venter-alle { margin: var(--s-4) 0 0; } #venter-alle summary { display: inline-flex; align-items: center; min-height: var(--s-7); font-size: var(--t-3); font-weight: 500; color: var(--ink-2); cursor: pointer; } #venter-alle[open] summary { margin-bottom: var(--s-2); } #skjerm-hjem .seksjon-tom { margin: 0; padding: var(--s-4); border: 0; border-radius: var(--r-2); background: var(--flate-2); box-shadow: none; text-align: left; } /* HJEM ER ROLIG (1. oktober 2026). Theodor: «altfor ulike variasjon i høyde», og det ble verre når vinduet endret størrelse. Kortene sto med sin egen høyde (align-items: start), så Salget og Annonsene, og Dagens fokus og Det som venter, sprikte med opptil 130 px og etterlot store tomme flater. Nå er kortene i en rad like høye, og innholdet fordeler seg i kortet i stedet for å samle seg øverst: - Salget: trenden tar høyden som er igjen. - Annonsene: nøkkeltallene, måleren og markedene fordeles over kortet, også med ett marked. - Dagens fokus: høyst fire rader fremme (FOKUS_RADER i os.js), resten under «Vis n til». Radene deler høyden. Er uka ryddig, fyller den tomme tilstanden kortet. - Det som venter: brikkene deler høyden. Står en «Vis alle» åpen, får kortet sin egen høyde: da har man selv bedt om en lang liste, og naboen skal ikke strekkes etter den. To spalter fra 760 px innhold, én under det. Bredden måles på spalten (container innhold), ikke vinduet, så Sidekick-panelet teller med. */ #skjerm-hjem .rutenett { align-items: stretch; } #skjerm-hjem .rutenett:has(details[open]) { align-items: start; } #skjerm-hjem .rutenett > .kort { display: flex; flex-direction: column; } #skjerm-hjem .rutenett > .kort > .korthode { flex: 0 0 auto; } #salg-trend.diagram.trend { flex: 1 1 var(--diagram-h); min-height: var(--diagram-h); height: auto; } #hjem-annonser { justify-content: space-between; } #fokus-liste { display: flex; flex: 1 1 auto; flex-direction: column; } #fokus-liste > .rad { flex: 1 1 auto; } #fokus-liste > .tomt { flex: 1 1 auto; } #fokus-liste > .fokus-alle { flex: 0 0 auto; padding: var(--s-2) var(--s-5) var(--s-4); border-top: 1px solid var(--line); } #fokus-liste > .fokus-alle summary { display: inline-flex; align-items: center; min-height: var(--s-7); font-size: var(--t-3); font-weight: 500; color: var(--ink-2); cursor: pointer; } #fokus-liste > .fokus-alle .rad { margin: 0 calc(var(--s-5) * -1); } #venter-brikker { flex: 1 1 auto; grid-auto-rows: minmax(var(--s-8), 1fr); } #venter-alle { flex: 0 0 auto; } /* HJEM FØLGER VINDUET (1. oktober 2026, andre runde). Kortene var like høye i en rad, men siden brydde seg ikke om vinduets høyde: i 900 endte kortene 77 px under kanten, i 1100 sto 123 px tomt papir under. Nå fyller de to radene med kort høyden som er igjen i spalten når innholdet får plass: plassen som er til overs deles likt mellom de to radene (flex-grow), så kortene vokser jevnt når vinduet dras opp og ingenting hopper. Flex og ikke rutenett med 1fr 1fr: når innholdet ikke får plass, ville 1fr gjort begge radene like høye som den høyeste. Nå står radene i sin egen høyde, og spalten ruller som før. Står en «Vis alle» åpen, får radene sin egen høyde, så naboraden ikke strekkes etter lista man selv har åpnet. Bare med to spalter: i én spalte er siden en lang liste uansett. */ @container innhold (min-width: 760px) { #skjerm-hjem.pa { display: flex; flex-direction: column; min-height: 100%; } #skjerm-hjem.pa > .hilsen { flex: none; } #skjerm-hjem.pa > .rutenett { flex: 1 1 auto; } #skjerm-hjem.pa:has(details[open]) > .rutenett { flex: none; } #skjerm-hjem.pa > .rutenett:last-child { margin-bottom: 0; } } @container innhold (max-width: 759px) { #skjerm-hjem .rutenett { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); } #skjerm-hjem .hilsen { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s-4); } #skjerm-hjem .setning { max-width: none; } } /* Radene med hendelser: Det som venter på Hjem (under «Vis alle») og Gjort i Drift, fanen Status. Segmentet er en kort strek på venstre kant, fordi fargen er informasjon: amber venter, rød er feil. */ #venter-liste > .rad, #gjort-liste > .rad { position: relative; border-radius: var(--r-2); } #venter-liste > .rad:first-of-type, #gjort-liste > .rad:first-of-type { border-top: 0; } #venter-liste > .rad:last-child, #gjort-liste > .rad:last-child { border-bottom: 0; } /* Segmentet er en kort strek på venstre kant av raden: fargen er informasjon, amber venter og rødt er feil. */ :is(#venter-liste, #gjort-liste) .rad > .segment { position: absolute; left: 0; top: calc(var(--s-4) + var(--s-1)); width: 2px; height: var(--s-5); border-radius: var(--r-1); } /* Systemet: ikon og navn, i Geist og ikke i mono, fordi det er et ord. */ :is(#venter-liste, #gjort-liste) .rad > .marg { display: flex; align-items: flex-start; gap: var(--s-3); width: calc(var(--marg) + var(--s-7)); flex: 0 0 calc(var(--marg) + var(--s-7)); padding: var(--s-4) 0 0 var(--s-4); text-align: left; font-family: var(--font-ui); font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; color: var(--ink-3); } :is(#venter-liste, #gjort-liste) .rad > .marg .menyikon { width: var(--t-3); height: var(--t-3); flex-basis: var(--t-3); margin-top: var(--s-1); } :is(#venter-liste, #gjort-liste) .rad .inn { padding-left: var(--s-3); padding-right: var(--s-3); } :is(#venter-liste, #gjort-liste) .rad .hoyre { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-2); color: var(--ink-3); } :is(#venter-liste, #gjort-liste) .rad .hoyre .pille { min-height: var(--t-3-h); border: 0; background: var(--flate-3); color: var(--ink-2); border-radius: var(--r-2); padding: 0 var(--s-3); } /* Tallet på oppgavene står i Venter, og får venter-fargen som i prøven. */ :is(#venter-liste, #gjort-liste) .rad .hoyre .pille.venter { background: var(--amber-svak); color: var(--amber); } :is(#venter-liste, #gjort-liste) .rad .hoyre .pille { min-height: var(--t-3-h); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: var(--flate-3); color: var(--ink-2); } #panel-drift-status #gjort-liste { padding: 0 var(--s-2) var(--s-2); } @media (max-width: 899px) { #skjerm-lager .rutenett { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); } #venter-brikker { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 599px) { :is(#skjerm-hjem, #skjerm-lager) .periodevalg button { min-height: var(--finger); } :is(#skjerm-hjem, #skjerm-lager) .rutenett > .kort { padding: var(--s-4); } :is(#skjerm-hjem, #skjerm-lager, #skjerm-konsept, #skjerm-drift) .kort.tett > .korthode { padding: var(--s-4) var(--s-4) var(--s-3); } #hjem-fokus .rad { padding: var(--s-3) var(--s-4); } :is(#venter-liste, #gjort-liste) .rad > .marg { width: var(--s-7); flex-basis: var(--s-7); padding-left: var(--s-3); } :is(#venter-liste, #gjort-liste) .rad > .marg .margtekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .ring .del, .andeler > span, .trakt .stolpe i, .dekning .skala i, .maaler .skala i, #skjerm-hjem .markeder .strek i { transition-duration: 0ms; } }