@font-face { font-family: "Geist"; font-weight: 300 600; font-display: swap; src: url(../fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Geist"; font-weight: 300 600; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA; }
@font-face { font-family: "Noto Sans Thai"; font-weight: 300 600; font-display: swap; src: url(../fonts/noto-sans-thai.woff2) format("woff2"); unicode-range: U+0E01-0E5B; }
:root { --bg:#fff; --pink:#fbe4ea; --pink2:#f4c6d3; --rose:#7d1d3f; --rose-text:#7d1d3f; --brun:#7a4b2e; --brun-text:#7a4b2e; --rosa:#c73e70; --ink:#2b1a1d; --muted:#75574f; --line:rgba(125,29,63,.14); --card:rgba(255,255,255,.9); --surface:#fff; --on-ink:#fff; --serif: Georgia, "Noto Sans Thai", serif; --sans: "Geist", "Noto Sans Thai", system-ui, sans-serif; }
/* ==== omdesign 2026-10: gemensamma tokens (docs/specs/2026-10-02-omdesign.md §3, ordagrant ur final_tokens.css). Befintliga tokens ovan ändras INTE.
   Varje färgpar är mätt (WCAG): siffrorna i kommentarerna är kontrasten mot sin botten. Mörka varianten står direkt under "mörkt läge". ==== */
:root {
  /* ytor */
  --grupp: #f7f2f3;            /* grupperade listor (Ändra minne, inställningar); ink 14,9 · muted 5,9 · rose-text 8,9 */
  --hennes: #fbe4ea;           /* den andras bubbla i Vi två; ink 13,7 · muted 5,4 */
  --min-bubbla: #7d1d3f;       /* mina bubblor; vit 9,9 */
  --brev: #5c1530;             /* text i vita lappar (hälsningen ovanför rundeln); på vit 13,1 */
  --ok-bg: #e3f1e9; --ok-text: #1e5a3c;         /* "ni vill båda" 7,0 */
  --kanske: #8a5a12;           /* valt "Kanske" (vit text 5,9) */
  --moln: #2a6db0;             /* träffarnas blå (kalenderns moln), vit text 5,4 */
  --moln-text: #1f5a94;        /* träff-blå som text på vit 7,1 / på --moln-bg 6,3 */
  --moln-bg: #eaf2fb;
  --flik-av: #6b5a5e;          /* ej vald flik i flikraden 6,5 */
  --skugga-kort: 0 1px 2px rgba(43,26,29,.06), 0 8px 24px rgba(125,29,63,.08);
  /* natt-ytan: ALLT 18+ (fråga, svar, Er plan i sängen) – samma i båda temana, används aldrig till något annat */
  --natt-1: #2a0f1c; --natt-2: #4a1430;          /* vit 17,7 / 14,7 */
  --natt-accent: #f093ad;                        /* på natt-2 6,6; natt-1-text på accent 8,0 */
  --natt-dim: rgba(255,255,255,.72);             /* minsta vita för text på natten 8,2 */
  --natt-yta: rgba(255,255,255,.08);             /* kort/fält på natten */
  --natt-kant: rgba(255,255,255,.14);
  /* slöja över foton: minst .62 bakom liten vit text (vit .9 → 4,8:1 över helvitt foto), .80 längst ner */
  --sloja: 30,8,18;
  /* ny-ring (Instagram-stil) – ritas en gång */
  --ring: conic-gradient(from 200deg, #d4a882, #c73e70, #7d1d3f, #f093ad, #d4a882);
  /* mått */
  --tryck: 44px;               /* minsta tryckyta */
  --r-kontroll: 12px; --r-lista: 16px; --r-kort: 20px; --r-blad: 24px; --r-hjalte: 28px;
  --topp-h: 56px; --flikrad-h: 64px;             /* flikraden + env(safe-area-inset-bottom) */
  /* rörelse – stängs av under prefers-reduced-motion (se nedan) */
  --t-snabb: 180ms; --t-blad: 280ms; --kurva: cubic-bezier(.2,.8,.2,1);
  /* bakgrunden (sql/26 utseende): sätts av header.js från personens val; standard = dagens utseende */
  --bg-syn: .12;               /* hur synliga bilderna är, 0–.45 */
  --platta: rgba(255,255,255,.88);               /* läsplattan bakom fri text när --bg-syn > gränsen */
}
/* thai: Georgia saknar thailändska tecken – reservtypsnittet behöver mer radavstånd (rubriker 1,05 klipper tecknen) */
:root:lang(th) { --serif-lh: 1.45; }
@media (prefers-reduced-motion: reduce) { :root { --t-snabb: 0ms; --t-blad: 0ms; } }
/* ==== Gemensamma komponenter (omdesign 2026-10) – Steg 0 klistrar in blocket i site/css/vlogg.css direkt efter tokens.
   Prefix k- så att inget krockar med befintliga klasser (.val, .etikett, .chip, .kort, .knapp finns redan och ändras inte).
   Alla paket använder dessa; bara huvudsessionen ändrar blocket (efter granskning). Mått och färger: docs/specs/2026-10-02-omdesign.md §3–5. ==== */
.ikon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: middle; }
.k-etikett { font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.k-etikett--rose { color: var(--rose-text); }
.k-en-rad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tva-rader { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* kort och knappar */
.k-kort { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-kort); box-shadow: var(--skugga-kort); padding: 16px; }
.k-knapp { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--rose); color: #fff; font: 700 15px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; transition: transform var(--t-snabb) var(--kurva); }
.k-knapp:active { transform: scale(.96); }
.k-knapp--sek { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.k-knapp--liten { min-height: var(--tryck); padding: 0 16px; border-radius: 12px; font-size: 14px; }
.k-knapp--bred { width: 100%; }
.k-ikonknapp { position: relative; width: var(--tryck); height: var(--tryck); border: 0; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.k-ikonknapp--yta { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.k-marke { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rose); color: #fff; font: 700 11px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
/* chips: minst 44 px höga (tryckytan = det man ser) */
.k-chip { min-height: var(--tryck); padding: 0 14px; border: 0; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--sans); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); white-space: nowrap; cursor: pointer; }
.k-chip[aria-pressed="true"], .k-chip--pa { background: var(--rose); color: #fff; box-shadow: none; }
.k-chiprad { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.k-chiprad::-webkit-scrollbar { display: none; }
/* segment: Väg/Lista/Kalender, Meddelanden/Händelser, Dag/Utflykt/Resa */
.k-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--grupp); border-radius: 12px; padding: 3px; gap: 3px; }
.k-seg > button { min-height: var(--tryck); border: 0; border-radius: 10px; background: none; font: 600 14px/1 var(--sans); color: var(--muted); cursor: pointer; }
.k-seg > button[aria-selected="true"], .k-seg > button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* mörkt: --surface mot --grupp var 1,05:1 – valt segment får rosa yta (3,7:1 mot plattan, vit text 4,8:1) */
:root[data-theme="dark"] :is(.k-seg > button[aria-selected="true"], .k-seg > button[aria-checked="true"], .vag-seg > a[aria-selected="true"]) { background: var(--rosa); color: #fff; box-shadow: none; }
/* grupperad lista (iOS-stil) */
.k-grupp { background: var(--surface); border-radius: var(--r-lista); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.k-grupp-rubrik { display: block; margin: 22px 4px 8px; }
.k-rad { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 54px; padding: 10px 16px; color: inherit; text-decoration: none; }
.k-rad + .k-rad::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; border-top: 1px solid var(--line); }
.k-rad small { display: block; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.k-ikonruta { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--rose); }
/* omkopplare 51×31 (role="switch") */
.k-vaxel { position: relative; width: 51px; height: 31px; border: 0; border-radius: 16px; background: var(--line); cursor: pointer; flex: 0 0 auto; }
.k-vaxel::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: left var(--t-snabb) var(--kurva); }
.k-vaxel[aria-checked="true"] { background: var(--rose); }
.k-vaxel[aria-checked="true"]::after { left: 22px; }
.k-vaxel::before { content: ''; position: absolute; inset: -7px -2px; }   /* 45 px tryckyta på höjden */
/* rundlar och ring (ritas en gång) */
.k-rund { border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--rose); color: #fff; font: 400 20px/1 var(--serif); flex: 0 0 auto; object-fit: cover; }
.k-ring { display: inline-grid; padding: 3px; border-radius: 50%; background: var(--ring); flex: 0 0 auto; animation: k-ring-in 600ms var(--kurva) 1 both; }
/* glappet ligger INUTI rundeln (som i skissen final_bas.css) – en box-shadow utanför täckte hela ringen (granskningen 2026-10-02) */
.k-ring > .k-rund { border: 3px solid var(--ring-glapp, var(--bg)); }
.k-ring--sedd { background: var(--line); animation: none; }
@keyframes k-ring-in { from { clip-path: inset(0 0 100% 0 round 50%); } to { clip-path: inset(0 0 0 0 round 50%); } }
/* blad som glider upp */
.k-blad { position: fixed; left: 0; right: 0; bottom: 0; top: 44px; z-index: 60; max-width: 640px; margin: 0 auto; background: var(--bg); border-radius: var(--r-blad) var(--r-blad) 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; animation: k-blad-in var(--t-blad) var(--kurva) 1 both; }
.k-blad__handtag { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 2px; flex: 0 0 auto; }
.k-dimma { position: fixed; inset: 0; z-index: 59; background: rgba(20,8,14,.45); }
@keyframes k-blad-in { from { transform: translateY(100%); } to { transform: none; } }
/* natt-ytan: ALLT 18+ och inget annat */
.k-natt { background: radial-gradient(120% 80% at 50% 0%, var(--natt-2), var(--natt-1) 70%); color: #fff; }
:root[data-theme="dark"] .k-natt { box-shadow: inset 0 0 0 1px var(--natt-kant); }
.k-natt .k-etikett { color: var(--natt-accent); }
.k-vuxen { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--natt-accent); color: var(--natt-1); font: 800 11px/1 var(--sans); }
/* ångra-listen (3 s) */
.k-angra { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 0 0 0 14px; border-radius: 22px; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--sans); overflow: hidden; }
.k-angra button { min-height: var(--tryck); padding: 0 16px; border: 0; border-radius: 22px; background: var(--bg); color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
.k-angra__streck { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--natt-accent); animation: k-angra 3s linear 1 both; }
@keyframes k-angra { from { width: 0; } to { width: 100%; } }
/* läsplattan: text direkt på bakgrunden när bilderna syns mycket (body.lasplatta sätts av header.js) */
body.lasplatta .k-platta { background: var(--platta); border-radius: 10px; padding: 2px 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* också sidtitlarna, vägens texter (datum · rubrik · plats), START och Höjdpunkternas texter – och listan blir ett kort
   (spec §6.5: "listor och längre text står alltid i kort"; granskningen 2026-10-02 mätte 1,9–3,5:1 utan platta vid 45 %) */
body.lasplatta :is(h1.stor, .vag__text, .vag__start, .hem-hojd__text) { background: var(--platta); border-radius: 10px; }
body.lasplatta h1.stor { width: fit-content; max-width: 100%; padding: 2px 10px 4px; }
body.lasplatta .vag__text { padding: 2px 5px 3px; }
body.lasplatta .vag__start { padding: 2px 8px; }
body.lasplatta .hem-hojd__text { padding: 2px 4px; }
body.lasplatta .lista { background: var(--platta); border-radius: var(--r-kort); padding: 2px 14px 12px; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.lasplatta :is(.k-platta, h1.stor, .vag__text, .vag__start, .hem-hojd__text, .lista) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
/* minska rörelse: av i systemet ELLER html.minska-rorelse (testerna sätter klassen) */
@media (prefers-reduced-motion: reduce) { .k-ring, .k-blad, .k-angra__streck, .k-knapp { animation: none !important; transition: none !important; } }
html.minska-rorelse .k-ring, html.minska-rorelse .k-blad, html.minska-rorelse .k-angra__streck, html.minska-rorelse .k-knapp { animation: none !important; transition: none !important; }
/* ==== slut gemensamma komponenter ==== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); min-height: 100vh;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }   /* viewport-fit=cover: liggande iPhone */
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
/* bilderna bakom sidan (omdesignen 2026-10, paket F, spec §6.5): var och en väljer antal (Inga/1/6/12/24/40) och synlighet 0–45 %
   (bakgrund.js sätter data-antal och --bg-syn). Ingen toning längre – siffran är det man ser. Upp till 15 % (ljust) / 20 % (mörkt)
   klarar texten 4,5:1 över ett svart eller vitt foto; över det får korta texter läsplattan (body.lasplatta, .k-platta). */
.mosaik { position: fixed; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(var(--bg-kol, 3), 1fr); grid-template-rows: repeat(var(--bg-rad, 4), 1fr); opacity: var(--bg-syn); filter: saturate(.85); pointer-events: none; }
.mosaik img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.mosaik[data-antal="1"] { --bg-kol: 1; --bg-rad: 1; }
.mosaik[data-antal="6"] { --bg-kol: 2; --bg-rad: 3; }
.mosaik[data-antal="12"] { --bg-kol: 3; --bg-rad: 4; }
.mosaik[data-antal="24"] { --bg-kol: 4; --bg-rad: 6; }
.mosaik[data-antal="40"] { --bg-kol: 5; --bg-rad: 8; }
@media (min-aspect-ratio: 1/1) {   /* liggande skärm (dator): kolumner och rader byter plats – rutorna förblir ungefär kvadratiska */
  .mosaik { --bg-kol: 4; --bg-rad: 3; }
  .mosaik[data-antal="6"] { --bg-kol: 3; --bg-rad: 2; }
  .mosaik[data-antal="12"] { --bg-kol: 4; --bg-rad: 3; }
  .mosaik[data-antal="24"] { --bg-kol: 6; --bg-rad: 4; }
  .mosaik[data-antal="40"] { --bg-kol: 8; --bg-rad: 5; }
}
.tona { display: none; }   /* den gamla toningen: borttagen (sidor som fortfarande har elementet påverkas inte) */

/* topp – omdesignen 2026-10 (paket F, spec §5): EN rad på 56 px med frostat glas: ordbilden till vänster, till höger sök · ♥ · profil.
   Flikarna och den svävande ＋ ligger i flikraden längst ner (block F). Glaset ritas av ::before – .top själv får aldrig
   backdrop-filter/filter/transform, för då skulle flikraden (position: fixed inuti sidhuvudet) fastna i sidhuvudet. */
.top { position: sticky; top: 0; z-index: 20; height: var(--topp-h); display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--line); }
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; }
/* logotyp: titeln som ordbild */
.top__varumarke { display: flex; align-items: center; min-width: 0; flex: 1 1 0; }   /* basis 0: ordbilden krymper (…) i stället för att raden bryts */
.par { display: flex; align-items: center; min-width: 0; min-height: var(--tryck); text-decoration: none; color: var(--ink); }
.par__titel { font: 400 clamp(19px, 5.6vw, 23px)/1.2 var(--serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.par__och { font-style: italic; font-weight: 400; color: var(--rose-text); padding: 0 .08em; }
.par__emoji { font-size: .72em; vertical-align: .14em; margin-left: .12em; }
/* .flik finns kvar för bildflikarna (Alla · Bilder · Filmer, urval.js); flikraden har eget utseende (block F) */
.flik { font-size: 14px; font-weight: 500; color: var(--muted); padding: 7px 13px; border-radius: 99px; text-decoration: none; white-space: nowrap; }
.top__hoger { margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; flex: 0 0 auto; position: relative; }
.narvaro .av--narvaro + .av--narvaro { margin-left: -10px; }   /* flera partner överlappar i stället för att tränga ut logotypen */
/* runda ikonknappar i sidhuvudet: sök och (besökare) inställningar – 44 × 44, linjeikon */
.sok-knapp, .install-knapp { width: var(--tryck); height: var(--tryck); border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sok-knapp:active, .install-knapp:active { background: var(--line); }
.knapp--liten { padding: 7px 13px; font-size: 13px; border-radius: 99px; box-shadow: none; }
.sprak { display: flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--surface); }
.sprak button { border: 0; background: none; font-size: 11px; padding: 4px 8px; border-radius: 99px; color: var(--muted); }
.sprak button.pa { background: var(--ink); color: var(--on-ink); }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--rose); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.knapp { display: inline-block; border: 0; background: var(--rose); color: #fff; font-weight: 600; padding: 9px 14px; border-radius: 12px; font-size: 14px; text-decoration: none; box-shadow: 0 6px 18px rgba(125,29,63,.28); }
.knapp:disabled { opacity: .5; }
.knapp--sekundar { background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.knapp--fara { background: #c43d3d; }
.lank { border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; }
@media (min-width: 900px) {
  .top { padding: 0 22px 0 28px; gap: 6px; }
  .top__varumarke { flex: 0 1 auto; }
  .top .sok { display: flex; flex: 0 1 280px; margin-left: auto; }   /* datorn: sökfältet syns alltid (.top-prefix: vinner över grundregeln längre ner) */
  .top__hoger { margin-left: 0; }
  .sok-knapp { display: none; }
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
@media (min-width: 900px) { .wrap { padding: 28px 30px 60px; } }
h1.stor { font: 400 34px/1.1 var(--serif); }
@media (min-width: 900px) { h1.stor { font-size: 44px; } }
.dampad { color: var(--muted); }

/* kalender */
.kalhuvud { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kalnav button { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 12px; color: var(--muted); font-size: 13px; margin-left: 4px; }
.kal { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: 0 20px 60px rgba(125,29,63,.10); }
.kal__dagar, .kal__vecka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal__vecka { --steg: 15px; position: relative; margin-top: 4px; padding-bottom: calc(var(--banor, 0) * var(--steg)); }
@media (min-width: 900px) { .kal__vecka { --steg: 27px; } }   /* bandet (steg − 3 = 24 px) ryms i sin rad */
.kal__dow { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .06em; padding: 0 4px; }
.dag { position: relative; aspect-ratio: 1 / .9; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; }
.dag--ute { opacity: .35; background: transparent; }
.dag--idag .dag__n { background: var(--rose); color: #fff; border-radius: 99px; padding: 0 6px; }
.dag__n { position: absolute; top: 5px; left: 7px; font-size: 12px; font-weight: 600; color: var(--muted); z-index: 2; }
.dag--har .dag__n { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.dag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dag__antal, .dag__film { position: absolute; bottom: 5px; z-index: 2; font-size: 10px; font-weight: 600; background: var(--surface); padding: 0 6px; border-radius: 99px; }
.dag__antal { right: 5px; } .dag__film { left: 5px; }
/* smal skärm (dagrutan ca 40 px): ▶ och antalet ryms inte bredvid varandra – ▶ flyttar in i antalsmärket ("▶ 15"),
   märkena blir mindre och ligger nere till höger, under datumet i stället för över det */
@media (max-width: 599px) {
  .dag__n { top: 3px; left: 5px; line-height: 1.2; }
  .dag__antal, .dag__film { left: auto; right: 2px; bottom: 2px; font-size: 9px; line-height: 12px; padding: 0 3px; white-space: nowrap; }
  .dag__antal ~ .dag__film { display: none; } .dag__antal:has(~ .dag__film)::before { content: "▶ "; }
}
.band { position: absolute; bottom: calc(var(--bana, 0) * var(--steg) + 1px); height: calc(var(--steg) - 3px); border-radius: 99px; z-index: 3; font-size: 9px; letter-spacing: .01em; font-weight: 700; color: #fff; display: block; line-height: calc(var(--steg) - 3px); padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0,0,0,.08); text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.band--resa { background: var(--rose); } .band--utflykt { background: var(--brun); } .band--dag { background: var(--rosa); }
@media (min-width: 900px) { .band { font-size: 11px; padding: 0 10px; } }
.band--fore { border-top-left-radius: 0; border-bottom-left-radius: 0; } .band--efter { border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 900px) { .kal { padding: 16px; } .kal__dagar, .kal__vecka { gap: 8px; } .kal__vecka { margin-top: 8px; } .dag { border-radius: 14px; } .dag__n { font-size: 13px; } .band { font-size: 12px; } }
.kort { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
@media (min-width: 700px) { .kort { grid-template-columns: repeat(3, 1fr); } }
.kort a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; }
.kort img, .kort .tomt { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--pink); }
.kort div { padding: 12px 14px; }
.kort small { color: var(--rose-text); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.kort h3 { font: 400 20px var(--serif); }

/* händelse på hela sidan */
.hjalte { position: relative; height: 62vh; min-height: 380px; overflow: hidden; background: var(--pink); }
.hjalte img { width: 100%; height: 100%; object-fit: cover; }
.hjalte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 50%, rgba(43,26,36,.78)); pointer-events: none; }
.hjalte__tillbaka { position: absolute; top: 16px; left: 16px; z-index: 3; background: rgba(255,255,255,.92); color: #2b1a24; padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; }   /* vit pill: mörk text även i mörkt läge */
.prickar { position: absolute; top: 16px; right: 16px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 20px; letter-spacing: 1px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.meny { position: absolute; top: 62px; right: 16px; z-index: 5; background: var(--surface); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 6px; width: 250px; }
.meny { color: var(--ink); }
.hjalte > .meny { max-height: calc(100% - 78px); overflow-y: auto; overscroll-behavior: contain; }   /* bildytan klipper (overflow: hidden) – menyn skrollar i stället för att sista raderna försvinner */
.meny button { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.meny button:hover, .meny button:focus-visible { background: var(--pink); }
.meny .fara { color: #c43d3d; }
.meny hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.meny__namn { margin: 6px 12px 8px; font-weight: 700; font-size: 15px; }
.meny__sprak { margin: 4px 8px 6px; justify-content: space-between; }
.meny .meny__sprak button { width: auto; flex: 1; text-align: center; padding: 6px 0; font-size: 12px; font-weight: 600; }
.meny__lank { display: block; padding: 10px 12px; border-radius: 9px; font-size: 14px; color: inherit; text-decoration: none; }
.meny__lank:hover, .meny__lank:focus-visible { background: var(--pink); }
.meny .sprak button.pa, .meny .sprak button.pa:hover, .meny .sprak button.pa:focus-visible { background: var(--ink); color: var(--on-ink); }   /* valt språk syns även vid fokus */
.meny--profil { max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
.hjalte__text { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 16px; color: #fff; }
.hjalte__text small { font-weight: 600; letter-spacing: .08em; font-size: 12px; background: var(--rose); padding: 4px 10px; border-radius: 99px; }
.hjalte__text h1 { font: 400 44px/1.02 var(--serif); margin: 12px 0 6px; word-break: break-word; }
.hjalte__text p { opacity: .92; }
.chip { font-size: 12px; background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 99px; margin-left: 8px; }
@media (min-width: 900px) { .hjalte { height: 70vh; } .hjalte__text h1 { font-size: 72px; } .hjalte__text { bottom: 40px; padding: 0 30px; } .hjalte__tillbaka { left: 30px; top: 22px; } .prickar { right: 30px; top: 22px; } .meny { right: 30px; top: 70px; } }
.kropp { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; }
@media (min-width: 900px) { .kropp { padding: 36px 30px 60px; } }
.dagflikar { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 22px; }
.dagflikar button { font-size: 13px; padding: 7px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dagflikar button.pa { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.block { display: grid; gap: 16px; }
.block[data-layout="bredvid"] { grid-template-columns: 1fr; }
@media (min-width: 800px) { .block[data-layout="bredvid"] { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.block[data-layout="over"] .block__bild { order: 2; }
.block[data-layout="ovanpa"] { position: relative; }
.block[data-layout="ovanpa"] .block__text { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, transparent 60%, rgba(0,0,0,.45)); border-radius: 16px; }
.block[data-texty="mitt"] .block__text { justify-content: center; } .block[data-texty="botten"] .block__text { justify-content: flex-end; }
.block[data-textx="mitten"] .block__text { text-align: center; } .block[data-textx="hoger"] .block__text { text-align: right; }
.block[data-layout="text"] .block__bild { display: none; }
.block__bild img, .block__bild video { width: 100%; max-height: 72vh; object-fit: cover; border-radius: 16px; }
.block__titel { font-weight: 400; line-height: 1.15; margin-bottom: 8px; color: var(--titelfarg); }   /* vald färg (style.js); utan den ärver rubriken temats textfärg */
:root[data-theme="dark"] .block__titel { color: var(--titelfarg-mork); }   /* samma färg, ljusare om den är för mörk mot mörk bakgrund */
.block__berattelse { font-size: 19px; line-height: 1.65; white-space: pre-wrap; }
.av-rad { display: block; font-size: 13px; color: var(--muted); margin-top: 10px; }
.dagrubrik { font: 400 26px var(--serif); margin: 36px 0 12px; }
.dagrubrik small { display: block; font-family: var(--sans); font-size: 12px; color: var(--rose-text); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.galleri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 800px) { .galleri { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.galleri button { border: 0; padding: 0; background: var(--pink); border-radius: 14px; overflow: hidden; aspect-ratio: 1; position: relative; }
.galleri img { width: 100%; height: 100%; object-fit: cover; }
.galleri .spela { position: absolute; left: 8px; bottom: 8px; background: var(--surface); color: var(--ink); border-radius: 99px; padding: 1px 8px; font-size: 12px; }
.inbaddning { margin-top: 20px; border-radius: 18px; overflow: hidden; background: #111; }
.inbaddning iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.inbaddning--hog iframe { aspect-ratio: 9 / 16; max-height: 80vh; }
.socialt { display: flex; gap: 14px; align-items: center; margin-top: 26px; font-size: 14px; color: var(--muted); }
.gilla { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 12px; color: var(--rose-text); font-weight: 600; }
.gilla.pa { background: var(--rose); color: #fff; }
.kommentar { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.kommentar b { white-space: nowrap; } .kommentar button { margin-left: auto; }
.kommentar > span { min-width: 0; overflow-wrap: anywhere; }   /* en lång länk bryts i stället för att knuffa ut Godkänn/Ta bort */
.kommentarform { display: flex; gap: 8px; margin-top: 12px; }
.kommentarform input, .kommentarform textarea { flex: 1; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; }
.nasta { display: block; margin-top: 40px; position: relative; border-radius: 22px; overflow: hidden; height: 220px; text-decoration: none; background: var(--pink); }
.nasta img { width: 100%; height: 100%; object-fit: cover; }
.nasta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,26,36,.82), rgba(43,26,36,.1)); }
.nasta div { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; }
.nasta small { font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.nasta h3 { font: 400 32px var(--serif); margin: 4px 0; }
.foregaende { display: inline-block; margin-top: 14px; color: var(--muted); font-size: 14px; }

/* helskärm */
.ljus { position: fixed; inset: 0; z-index: 50; background: rgba(20,10,16,.96); display: flex; align-items: center; justify-content: center; }
.ljus img, .ljus video { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.ljus button { position: absolute; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; width: 48px; height: 48px; border-radius: 50%; }
.ljus .stang { top: 14px; right: 14px; } .ljus .fore { left: 10px; top: 50%; } .ljus .efter { right: 10px; top: 50%; }

/* dialoger (margin: auto centrerar en modal dialog – "* { margin: 0 }" skriver annars över webbläsarens värde) */
.dlg { margin: auto; background: var(--surface); color: var(--ink); border: 0; border-radius: 20px; padding: 20px; width: min(560px, 94vw); max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.dlg::backdrop { background: rgba(43,26,36,.45); }
.dlg h2 { font: 400 24px var(--serif); margin-bottom: 14px; }
.dlg__knappar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.falt { display: grid; gap: 6px; margin-bottom: 12px; }
.falt label { font-size: 13px; color: var(--muted); }
.falt input, .falt textarea, .falt select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; width: 100%; }
.falt textarea { min-height: 140px; resize: vertical; }
/* iPhone zoomar in vid fält med text under 16 px (och zoomar inte ut igen) */
input, textarea, select, .falt input, .falt textarea, .falt select, .kommentarform input, .kommentarform textarea { font-size: 16px; }
.val { display: flex; flex-wrap: wrap; gap: 6px; }
.val button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.val button.pa { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
.farg { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.farg.pa { box-shadow: 0 0 0 2px var(--ink); }
.forhands { border: 1px dashed var(--line); border-radius: 16px; padding: 12px; margin: 10px 0 14px; }
.forhands .block__bild img { max-height: 200px; }
.tummar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tummar div { position: relative; }
.tummar img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.tummar button { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 11px; padding: 1px 6px; }
.tummar .omslag { outline: 3px solid var(--rose); }
.tummar .tumme__par { left: 4px; right: auto; }
.tummar .tumme__typ { position: absolute; left: 4px; bottom: 4px; background: rgba(20,10,16,.72); color: #fff; border-radius: 99px; padding: 1px 7px; font-size: 11px; pointer-events: none; }
.tummar .tumme__tom { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--pink); font-size: 22px; cursor: pointer; }
.tummar .tumme__bock { display: none; position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 99px; background: var(--rose); color: #fff; font-size: 14px; line-height: 24px; text-align: center; pointer-events: none; }
.tummar.valjer .tumme__bort, .tummar.valjer .tumme__par { display: none; }
.tummar.valjer img, .tummar.valjer .tumme__tom { cursor: pointer; opacity: .75; }
.tummar .vald img, .tummar .vald .tumme__tom { opacity: 1; outline: 3px solid var(--rose); outline-offset: -3px; }
.tummar .vald .tumme__bock { display: block; }
/* någon annans bild (sql/19): syns, men inget × och går inte att markera */
.tummar .tumme__las { position: absolute; top: 4px; right: 4px; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 11px; line-height: 1; padding: 3px 5px; pointer-events: none; }
.tummar.valjer .tumme--last img, .tummar.valjer .tumme--last .tumme__tom { opacity: .4; cursor: not-allowed; }
.urval-egna { display: block; margin-bottom: 8px; }
.urval-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.urval-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.urval-rad small { width: 100%; }
.urval-snabb { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.knapp.fara { background: #c0392b; color: #fff; }
.knapp:disabled { opacity: .45; cursor: default; }
.logg { display: flex; flex-direction: column; }
.logg__rad { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.logg__bild { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--pink); display: grid; place-items: center; font-size: 24px; }
.logg__bild img { width: 100%; height: 100%; object-fit: cover; }
.logg__spela { position: absolute; left: 4px; bottom: 4px; background: rgba(20,10,16,.72); color: #fff; border-radius: 99px; font-size: 10px; padding: 0 6px; }
.logg__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.logg__text b { font-weight: 600; font-size: 15px; }
.logg__text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klocka-plats { position: relative; display: inline-flex; }
.klocka { position: relative; border: 0; background: transparent; font-size: 19px; padding: 4px 6px; cursor: pointer; line-height: 1; }
.klocka__antal { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--rosa); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.meny--klocka { position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; z-index: 60; }
@media (max-width: 700px) {
  .top__hoger { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }   /* klockan får inte knuffa ut "+ Nytt minne" */
  .meny--klocka { position: fixed; left: 12px; right: 12px; top: calc(100% + 6px); width: auto; }   /* under rubrikraden (fast position räknas från den), aldrig över klockan */
}
.klocka__rubrik { font-weight: 700; margin: 4px 8px 6px; }
.meny .klocka__lasalla { display: block; width: auto; margin: 0 8px 6px auto; font-size: 13px; text-align: right; }
.klocka__rad { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.klocka__rad.olast { background: var(--pink); font-weight: 600; }
.klocka__rad small { color: var(--muted); font-weight: 400; }
.klocka__tom { margin: 8px 10px; color: var(--muted); }
.nasta-traff { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.06); color: inherit; text-decoration: none; }
.nasta-traff small { color: var(--rose-text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.nasta-traff strong { font-size: 18px; }
.nasta-traff span { color: var(--muted); }
.dag--ny { font: inherit; text-align: left; cursor: pointer; padding: 0; }
.dag--ny::after { content: '+'; position: absolute; right: 6px; bottom: 3px; font-size: 13px; line-height: 1; color: var(--rose-text); opacity: .14; transition: opacity .15s; }
.dag--ny:hover::after, .dag--ny:focus-visible::after, .dag--ny:active::after { opacity: 1; }
.ihop__lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 46vh; overflow-y: auto; }
.ihop__rad { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ihop__rad img, .ihop__tom { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--pink); display: grid; place-items: center; color: var(--rose-text); }
.ihop__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ihop__text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ihop__bock { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; font-size: 13px; }
.ihop__rad.vald { border-color: var(--rose); background: var(--pink); }
.ihop__rad.vald .ihop__bock { background: var(--rose); border-color: var(--rose); color: #fff; }
.ihop__blir { font-weight: 700; color: var(--rose-text); margin: 6px 0; }
/* träff: namnet i ett blått moln nere i dagrutan (två rader, sedan …); pucklarna ovanpå gör det till ett moln */
.dag__traff { position: absolute; left: 2px; right: 2px; bottom: 3px; z-index: 3; pointer-events: none; background: #2a6db0; color: #fff; border-radius: 9px;
  font: 700 8.5px/1.15 var(--sans); padding: 2px 3px; text-align: center; box-shadow: 0 2px 6px rgba(20,60,110,.3); }
.dag__traff-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dag__traff::before, .dag__traff::after { content: ''; position: absolute; z-index: -1; background: #2a6db0; border-radius: 50%; }
.dag__traff::before { width: 12px; height: 12px; top: -5px; left: 22%; } .dag__traff::after { width: 9px; height: 9px; top: -3px; right: 24%; }
.dag:has(.dag__traff) .dag__antal, .dag:has(.dag__traff) .dag__film { display: none; }   /* molnet tar platsen nere i rutan */
@media (min-width: 600px) { .dag__traff { font-size: 10px; padding: 3px 5px; border-radius: 11px; } }
/* smal dagruta (mobil): en rad, små pucklar – datumet ska synas ovanför molnet */
.dag { container-type: inline-size; }
@container (max-width: 80px) {
  .dag__traff { font-size: 8.5px; padding: 1px 3px; border-radius: 7px; bottom: 2px; }
  .dag__traff-text { -webkit-line-clamp: 1; }
  .dag__traff::before { width: 7px; height: 7px; top: -3px; } .dag__traff::after { width: 5px; height: 5px; top: -2px; }
}
.traffar { display: grid; gap: 12px; }
.traff { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.traff--vald { outline: 3px solid var(--rose); }
.traff--forr { opacity: .75; }
.traff__topp { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.traff__nar { font-size: 13px; font-weight: 700; color: var(--rose-text); }
.traff__knappar { display: flex; gap: 12px; }
.traff__topp .traff__knappar .lank { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -12px 0; }   /* tryckyta 44 px utan att raden blir högre */
.traff__titel { margin: 6px 0 4px; font-size: 20px; }
.traff__nar-text { margin: 0 0 6px; }
.traff__plats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; color: var(--muted); }
.traff__karta { padding: 4px 12px; font-size: 13px; }
.traff__not { margin: 6px 0 0; white-space: pre-wrap; }
.traffar-forr { margin-top: 18px; }
.traffar-forr summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.falt-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* tidslinjen som väg (omdesignen 2026-10, paket e – spec §6.4): rundlar på 72 px, 205 px mellan varven, DATUM · RUBRIK · PLATS
   under varje stopp. Vägen är 26 px ljusbrun med streckad mittlinje (#ead7c3 / mörkt #4a3626). */
.vag-behallare { margin: 10px -4px 0; }
.vag { position: relative; }
.vag__svg { position: absolute; inset: 0; overflow: visible; }
.vag__kant { fill: none; stroke: #cfb08e; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.vag__yta { fill: none; stroke: #ead7c3; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.vag__mitt { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 9 9; stroke-linecap: round; }
.vag__framtid { fill: none; stroke: #ead7c3; stroke-width: 20; stroke-linecap: butt; stroke-dasharray: 16 12; }
:root[data-theme="dark"] .vag__kant { stroke: #3a2a1e; }
:root[data-theme="dark"] .vag__yta, :root[data-theme="dark"] .vag__framtid { stroke: #4a3626; }
:root[data-theme="dark"] .vag__mitt { stroke: rgba(255,255,255,.55); }
/* ett stopp: rundeln (78 px med ringen) ligger mitt på vägen, texten under. Hela stoppet går att trycka på (länkens ::before
   täcker rundeln); "+ Lägg till plats" är en egen länk ovanpå. */
.vag__station { position: absolute; transform: translate(-50%, -39px); display: flex; flex-direction: column; align-items: center; width: 104px; color: inherit; text-align: center; z-index: 2; }
.vag__ring { width: 78px; height: 78px; --ring-glapp: var(--bg); }
.vag__bild { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--pink); display: grid; place-items: center; font-size: 22px; color: var(--rose-text); }
.vag__station--traff .vag__bild { margin: 3px; background: var(--moln-bg); border: 2.5px dashed var(--moln); color: var(--moln-text); }
.vag__resa { position: absolute; top: -4px; right: 18px; background: var(--rose); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 6px; }   /* äldre märke (före omdesignen) */
.vag__typ { position: absolute; top: -2px; left: calc(50% + 18px); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; box-shadow: 0 0 0 2px var(--bg); z-index: 3; }
.vag__syn { position: absolute; top: 51px; left: calc(50% + 20px); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 1px 3px rgba(0,0,0,.2); z-index: 3; }
.vag__text { display: flex; flex-direction: column; align-items: center; margin-top: 6px; line-height: 1.3; min-width: 0; max-width: 100%; }
.vag__text small { font-weight: 700; color: var(--rose-text); font-size: 12px; }
.vag__lank { display: flex; flex-direction: column; align-items: inherit; width: 100%; color: inherit; text-decoration: none; min-width: 0; max-width: 100%; border-radius: 6px; }
.vag__lank::before { content: ''; position: absolute; top: 0; left: calc(50% - 39px); width: 78px; height: 78px; border-radius: 50%; }
.vag__lank:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.vag__text .vag__datum { font: 700 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--rose-text); }
.vag__titel { width: 100%; font: 600 14px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vag__plats { display: flex; align-items: center; justify-content: inherit; gap: 3px; max-width: 100%; font: 500 12px/1.45 var(--sans); color: var(--muted); }
.vag__plats > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vag__lagg-plats { position: relative; z-index: 3; display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; padding: 0 4px; color: var(--rose-text); font: 600 12px/1.3 var(--sans); text-decoration: none; white-space: nowrap; }
/* ändstationernas text har fast ytterkant (stationens kant ± 38 px = 14 px förbi mitten, före svängen); vag.js smalnar av den mot
   grannen. Marginaler i stället för position, så att länkens ::before fortfarande täcker rundeln. */
.vag__station--hoger .vag__text { align-self: flex-end; margin: 6px 38px 0 -120px; text-align: right; align-items: flex-end; }
.vag__station--vanster .vag__text { align-self: flex-start; margin: 6px -120px 0 38px; text-align: left; align-items: flex-start; }
.vag__station--hoger .vag__plats { justify-content: flex-end; } .vag__station--vanster .vag__plats { justify-content: flex-start; }
/* högerställd text tappar radklippningens … i Chrome – rubriken i högra änden är därför en vänsterställd ruta som ligger mot höger */
.vag__station--hoger .vag__titel { width: fit-content; max-width: 100%; text-align: left; }
.vag__skylt { position: absolute; transform: translate(-50%, -50%); padding: 2px 4px; border-radius: 8px; background: var(--surface); border: 1.5px solid var(--brun-text); color: var(--brun-text); font: 700 11px/14px var(--sans); letter-spacing: .06em; white-space: nowrap; z-index: 1; pointer-events: none; }
.vag__start { position: absolute; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #6b3f24; white-space: nowrap; }
/* NU: rundel på 72 px i vinrött med halo, "NU ♥", datumet och dagarna tillsammans under */
.vag__nu { position: relative; width: 72px; height: 72px; margin: 3px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: 0 0 0 8px rgba(125,29,63,.22); font: 700 15px/1 var(--sans); z-index: 2; }
.vag__station--nu .vag__titel { font-weight: 600; }
@media (min-width: 760px) { .vag__station { width: 130px; }
  .vag__station--hoger .vag__text { margin-right: 52px; } .vag__station--vanster .vag__text { margin-left: 52px; } }
:root[data-theme="dark"] .vag__start { color: var(--brun-text); }   /* START står bredvid vägen på mörk botten */
.galleri-flikar { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.galleri-flikar .flik { border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.galleri-flikar .flik.pa { background: var(--rose); color: #fff; border-color: var(--rose); }
.framsteg { height: 6px; background: var(--pink); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.framsteg i { display: block; height: 100%; background: var(--rose); width: 0; transition: width .2s; }

/* inloggning och admin */
.ruta { max-width: 420px; margin: 8vh auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: 0 20px 60px rgba(125,29,63,.12); }
.ruta h1 { font: 400 30px var(--serif); margin-bottom: 16px; }
/* QR-koden behöver en ljus tyst zon runt sig – utan den hittar kameran inte hörnrutorna mot mörk bakgrund */
.ruta .qr { display: block; width: 260px; height: 260px; margin: 10px auto; padding: 18px; background: #fff; border-radius: 12px; box-sizing: border-box; }
.tabell { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; }
.tabell td, .tabell th { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.tabell td:first-child { overflow-wrap: anywhere; }   /* lång e-postadress bryts, så att knapparna längst till höger ryms på 360 px */
.sektion { margin-top: 28px; } .sektion h2 { font: 400 24px var(--serif); margin-bottom: 10px; }
.matare { height: 10px; background: var(--pink); border-radius: 99px; overflow: hidden; } .matare i { display: block; height: 100%; background: var(--rose); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 92vw; }
.toast--fel { background: #b33535; color: #fff; }   /* vit text: --on-ink blir mörk i mörkt läge */
.tomlage { text-align: center; padding: 60px 16px; color: var(--muted); }
[hidden] { display: none !important; }

/* mörkt läge */
:root[data-theme="dark"] { --bg:#16101a; --pink:#2e1a22; --pink2:#4f2636; --rose:#a3345a; --rose-text:#f093ad; --brun:#8b5a3a; --brun-text:#d4a882; --rosa:#c73e70; --ink:#f3e8ee; --muted:#c4aca6; --line:rgba(240,147,173,.16); --card:rgba(34,24,31,.92); --surface:#21171f; --on-ink:#16101a; }
/* omdesign 2026-10: nya tokens i mörkt läge (ur final_tokens.css) – de befintliga på raden ovan ändras inte */
:root[data-theme="dark"] {
  --grupp: #1d151b;            /* ink 15,0 · muted 8,3 */
  --hennes: #3a2430;           /* ink 11,9 · muted 6,6 */
  --min-bubbla: #a3345a;       /* vit 6,6 */
  --ok-bg: #183526; --ok-text: #a8e0c0;          /* 8,9 */
  --moln-text: #9cc6f0; --moln-bg: #172433;      /* 10,5 / 8,8 */
  --flik-av: #a8969b;          /* 6,7 */
  --skugga-kort: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --natt-kant: rgba(240,147,173,.25);            /* natten ligger nära sidans svarta botten – kanten skiljer dem */
  --platta: rgba(22,16,26,.88);
}
:root[data-theme="dark"] .top::before { background: rgba(22,16,26,.9); }   /* mosaiken: samma --bg-syn som i ljust läge (personens val) */
:root[data-theme="dark"] .knapp--sekundar { color: var(--ink); }
:root[data-theme="dark"] .meny .fara { color: #ff8a80; }   /* ljusare röd: #c43d3d syns dåligt på den mörka menyn */

/* meny: sök och tema – sök på mobil: fältet tar ordbildens plats på samma rad (sidhuvudet växer aldrig), ✕ stänger */
.sok { display: none; flex: 1 1 auto; min-width: 0; height: 44px; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); overflow: hidden; }
.top--sok .top__varumarke, .top--sok .narvaro { display: none; }
.top--sok .sok { display: flex; }
.sok input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; padding: 0 4px 0 14px; outline: none; }
.sok button, .tema { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 4px 10px; }
.sok button { height: 100%; min-width: 40px; display: grid; place-items: center; }
.tema { border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }


/* sidfot */
.fot { max-width: 1240px; margin: 0 auto; padding: 26px 16px 40px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.fot nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fot a { text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; background: var(--surface); color: var(--ink); }

/* kategorier, författare, lästid */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.chips a, .chips button { font-size: 12px; font-weight: 600; text-decoration: none; padding: 5px 11px; border-radius: 99px; background: var(--pink); color: var(--rose-text); border: 1px solid transparent; }
.chips .pa { background: var(--rose); color: #fff; }
.forfattare { display: inline-flex; align-items: center; gap: 6px; }
.forfattare img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
/* bylinen återanvänder klassen .av – nollställ avatarens storlek, rund form och rosa bakgrund */
.kort small.av { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--muted); font-weight: 400; margin-top: 4px; letter-spacing: 0; }

/* ljud */
.ljudlista { display: grid; gap: 10px; margin-top: 18px; }
.ljudlista figure { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.ljudlista figcaption { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.ljudlista audio { width: 100%; }

/* kommentarer: väntande och honungsfälla */
.kommentar--vantar { border-style: dashed; }   /* streckad ram räcker – genomskinlighet gjorde texten blek */
.kommentar .etikett { font-size: 11px; color: var(--brun-text); margin-left: 6px; }
.honung { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kommentarform { flex-wrap: wrap; }
.kommentarform .namn { flex: 1 1 100%; }

/* Om oss och 404 */
.om__text { font-size: 19px; line-height: 1.7; white-space: pre-wrap; max-width: 720px; }
.fel404 { text-align: center; padding: 14vh 16px; }
.fel404 .tag { font-size: 90px; line-height: 1; }
.fel404 h1 { font: 400 40px var(--serif); margin: 18px 0 10px; }

/* bildspel */
.bildspel { position: relative; }
.bildspel img { display: none; }
.bildspel img.pa { display: block; }
.bildspel button { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #2b1a24; font-size: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.bildspel__fore { left: 10px; } .bildspel__nasta { right: 10px; }

/* appen: installationstips och profilmeny */
.app-tips { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: 0 16px 40px rgba(0,0,0,.2); font-size: 14px; }
.app-tips span { flex: 1; }
@media (min-width: 700px) { .app-tips { left: auto; max-width: 420px; } }
.notisfraga { flex-wrap: wrap; }
.notisfraga p { flex: 1 1 200px; margin: 0; }
.notisfraga div { display: flex; gap: 8px; }
button.av { border: 0; cursor: pointer; }
.meny--profil { top: calc(100% + 6px); right: 0; }

/* Närvaro uppe till höger: partnerns profil med grön prick när hon/han är inne i appen */
.narvaro { display: flex; gap: 6px; position: relative; }
.av--narvaro { position: relative; background: var(--pink); color: var(--rose-text); border: 2px solid var(--surface, #fff); box-shadow: 0 0 0 2px var(--line); }
.av--narvaro .prick { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #b9aab2; border: 2px solid var(--surface, #fff); }
.av--narvaro.ar-inne { box-shadow: 0 0 0 2px #2fb36b; }
.av--narvaro.ar-inne .prick { background: #2fb36b; }
.meny--narvaro { top: 44px; right: 0; min-width: 190px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.meny--narvaro p { margin: 0; font-size: 13px; }
.meny--narvaro .inne { color: #1f8f53; font-weight: 600; }
.meny--narvaro a { font-size: 13px; }
/* Platser */
.kort small.plats { display: block; color: var(--muted); margin-top: 2px; }
.hjalte__plats { display: inline-block; margin-top: 6px; color: #fff; text-decoration: none; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.platslista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.platslista a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.platslista a:hover { border-color: var(--rose); }
.platslista small { color: var(--muted); }

/* Hjärtat i sidhuvudet (Jock 2026-09-28: klockan 🔔 blev ett ♥ med antal olästa) – trycket öppnar Vi två-bladet.
   Stora hjärtat på fotot, räknaren under det och hjärtats ruta med nio stora knappar ersattes 2026-10 av Vi två-kortet
   och Vi två-bladet (omdesignen, paket d: block D längst ner). Fotovalet bakom kortet (VL.hjarta.valjBakgrund) finns kvar. */
.klocka__hjarta { display: block; width: 23px; height: 21px; overflow: visible; }
.klocka__hjarta path { fill: var(--rose-text); }
.bakgrund-val { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 60vh; overflow-y: auto; }
.bakgrund-val button { aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--pink); cursor: pointer; }
.bakgrund-val img { width: 100%; height: 100%; object-fit: cover; }

/* Profilbilder i rundlarna (J uppe till höger, partnern med grön prick) */
.av { position: relative; }
.av__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.av--bild .av__bokstav { visibility: hidden; }
.profilbild-val__telefon { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; cursor: pointer; }
.profilbild-val__fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nytt__samma { margin: 4px 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--pink); color: var(--ink); font-size: 14px; }
/* Minnen, bilder och kalender (granskningen 2026-10-02) */
.nytt__samma--synlig { border: 2px solid var(--rose); }   /* minnet på dagen är inte privat: man väljer själv */
.nytt__samma .val { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nytt__samma .val button { text-align: left; }
.dag__flera { position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }   /* flera minnen samma dag */
@media (max-width: 599px) { .dag__flera { top: 2px; right: 2px; min-width: 13px; height: 13px; line-height: 13px; font-size: 9px; padding: 0 3px; } }
.dag--val { font: inherit; text-align: left; cursor: pointer; padding: 0; }
.kal-val a.ihop__rad { text-decoration: none; }
.tummar .tumme__vem { position: absolute; right: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(20,10,16,.72); color: #fff; border-radius: 99px; padding: 1px 7px; font-size: 11px; pointer-events: none; }   /* admin: vems bild det är */

/* 📱 Widget på iPhone (Scriptable, Emma 2026-10-02) – förhandsvisningen har widgetens egna färger (neutral gul, mörkbrun text) i båda temana */
.widget-ruta__intro { margin-bottom: 12px; }
.widget-exempel { display: grid; justify-items: center; gap: 6px; margin: 0 0 14px; }
.widget-exempel figcaption { font-size: 12px; color: var(--muted); }
.widget-forhand { width: 150px; height: 150px; border-radius: 24px; background: #F2E2B0; color: #4A2F1F; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 8px 24px rgba(74,47,31,.2); }
.widget-forhand__emoji { font-size: 46px; line-height: 1.05; opacity: .6; }
.widget-forhand__text { font-size: 14px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.widget-forhand__luft { flex: 1; }
.widget-forhand__rad { font-size: 12px; line-height: 1.3; }
.widget-forhand__rad--fet { font-size: 13px; font-weight: 700; }
.widget-ruta__rubrik { font: 600 15px var(--sans); margin: 4px 0 6px; }
.widget-steg { padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.widget-steg a { color: var(--rose-text); font-weight: 600; }
.widget-varning { margin: 14px 0 12px; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--brun); background: var(--pink); color: var(--ink); font-size: 14px; }
.widget-kod { display: grid; gap: 10px; justify-items: start; }
.widget-kod__en-gang { font-size: 14px; font-weight: 600; color: var(--rose-text); }
.widget-kod__text { width: 100%; min-height: 9em; font: 16px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; white-space: pre; overflow: auto; }
.widget-stang { margin-top: 18px; }

/* adminsidan (Jock 2026-10-02 "fixa administration sidan bättre") */
.admin-fel { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid #c43d3d; background: var(--surface); color: #c43d3d; font-size: 14px; }
.admin-fel b { font-weight: 700; }
:root[data-theme="dark"] .admin-fel { color: #ff8a80; border-left-color: #ff8a80; }
/* rullistor, filväljare och datumfält följer temat (annars vita lappar på svart botten i Samsung/Chrome) */
:root[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme="dark"]) { color-scheme: light; }
main select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 44px; font-size: 16px; max-width: 100%; }
main.admin .knapp { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.admin-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-knappar button { margin-left: 0; }
.kommentar .admin-knappar { flex-basis: 100%; }
.knapp--fara-text { background: var(--surface); color: #c43d3d; border: 1px solid var(--line); box-shadow: none; }
:root[data-theme="dark"] .knapp--fara-text { color: #ff8a80; }
/* kategorietiketter som span (adminsidan) ser ut som länkarna – .chip ensam är hjältebildens genomskinliga etikett */
.chips .chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: var(--pink); color: var(--rose-text); margin: 0; }
/* personer som kort */
.admin-personer { display: grid; gap: 10px; }
@media (min-width: 900px) { .admin-personer { grid-template-columns: 1fr 1fr; } }
.admin-person { display: grid; gap: 8px; align-content: start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.admin-person__topp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-person__bild { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.admin-person__bokstav { display: grid; place-items: center; background: var(--pink); color: var(--rose-text); font-weight: 700; }
.admin-person__namn { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.admin-person__namn b, .admin-person__epost { overflow-wrap: anywhere; }
.admin-person__epost { color: var(--muted); font-size: 14px; }
.admin-person__inbjuden { color: var(--brun-text); font-size: 13px; font-weight: 600; }
.admin-person__admin { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--rose-text); background: var(--pink); padding: 4px 10px; border-radius: 99px; }
.admin-person select { width: 100%; }
.admin-person__rolltext { font-size: 13px; margin-top: -4px; }
.admin-bjud { display: grid; gap: 8px; margin-top: 16px; }
.admin-bjud h3 { font: 600 15px var(--sans); }
.admin-bjud input { width: 100%; min-height: 44px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; }
.admin-bjud__rad { display: flex; gap: 8px; }
.admin-bjud__rad select { flex: 1; min-width: 0; }
.admin-dlg { overflow-wrap: anywhere; }
/* ordning och hopfällda delar */
main.admin { max-width: 860px; }
.admin-attgora { display: grid; gap: 8px; }
.admin-klart { padding: 12px 14px; border-radius: 14px; background: var(--pink); color: var(--rose-text); font-weight: 600; }
.admin-rad { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.admin-rad__ikon, .admin-rad > img { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--pink); font-size: 20px; object-fit: cover; }
.admin-rad__text { min-width: 0; display: grid; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.admin-rad__citat { color: var(--ink); }
.admin-rad .admin-knappar { grid-column: 1 / -1; }
.admin-rad .etikett { font-size: 11px; color: var(--brun-text); margin-left: 6px; }
.admin-lagring { margin-top: 14px; display: grid; gap: 6px; }
.admin-fall { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.admin-fall > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 10px 14px; cursor: pointer; }
.admin-fall > summary::-webkit-details-marker { display: none; }
.admin-fall > summary::before { content: "▸"; color: var(--rose-text); font-size: 14px; }
.admin-fall[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .admin-fall > summary::before { transition: transform .2s; } }
.admin-fall__titel { font: 400 22px var(--serif); }
.admin-fall__lage { color: var(--muted); font-size: 13px; }
.admin-fall__innehall { display: grid; gap: 22px; padding: 4px 14px 16px; }
.admin-grupp { display: grid; gap: 8px; justify-items: start; }
.admin-grupp > .falt, .admin-grupp form { width: 100%; }
.admin-grupp h3 { font: 600 15px var(--sans); }
.admin-grupp .falt { margin-bottom: 0; }
.admin-grupp .chips { margin: 0; }
.admin-hjalp { font-size: 13px; margin-top: -4px; }
.admin-kat { display: grid; gap: 8px; justify-items: start; }
.admin-parbild-rad { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.admin-parbild { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pink2); box-shadow: 0 0 0 2px var(--rose); display: grid; place-items: center; background: var(--pink); color: var(--rose-text); font-size: 34px; }
.admin-parbilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 60vh; overflow-y: auto; }
.admin-parbilder button { aspect-ratio: 1; min-width: 64px; min-height: 64px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--pink); cursor: pointer; }
.admin-parbilder img { width: 100%; height: 100%; object-fit: cover; }
.matare--varning i { background: var(--brun); }
.matare--fullt i { background: #c43d3d; }
.admin-rad__varning { color: #c43d3d; font-weight: 600; }
:root[data-theme="dark"] .admin-rad__varning { color: #ff8a80; }
.admin-ihop { display: grid; gap: 8px; }
.admin-ihop__minne { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; }
.admin-ihop__minne img, .admin-ihop__minne .admin-rad__ikon { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.admin-ihop__minne div { display: grid; min-width: 0; }
.admin-ihop__pil { justify-self: center; color: var(--rose-text); font-size: 20px; line-height: 1; }
/* Lägg upp: den riktiga filväljaren är dold men går att nå med tangentbordet; den stora knappen är en label */
.admin-dold { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.admin-dold:focus-visible + .admin-valj { outline: 3px solid var(--rosa); outline-offset: 2px; }
main.admin .admin-valj { min-height: 48px; font-size: 16px; padding: 12px 18px; cursor: pointer; }
.admin-valj--av { opacity: .5; pointer-events: none; }
@media (max-width: 899px) { main.admin .admin-valj { display: flex; width: 100%; } }
#lagg-upp > .knapp, #lagg-upp > .admin-hjalp, #lagg-upp > p { margin-top: 10px; }
#lagg-upp .admin-hjalp { margin-top: 8px; }
.admin-upp__val { font-weight: 600; }
.admin-upp__status { font-size: 14px; }
.admin-upp__status:empty { display: none; }
.admin-upp__hoppade { color: #c43d3d; }
:root[data-theme="dark"] .admin-upp__hoppade { color: #ff8a80; }
.admin-upp__dagar { margin-top: 10px; }
.admin-upp__dagar:empty { display: none; }
/* aktiviteten: tiden klipps aldrig bort, tumnagelremsa för ihopslagna uppladdningar, rubrik per dag */
.logg__text { flex: 1 1 auto; }
.logg__text small { display: flex; gap: 4px; min-width: 0; }
.logg__om { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logg__tid { flex: 0 0 auto; white-space: nowrap; }
.logg__om + .logg__tid::before { content: "· "; }
.logg__tummar { display: flex; gap: 4px; margin: 4px 0 2px; min-width: 0; overflow: hidden; }
.logg__tummar img, .logg__fler { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.logg__fler { display: grid; place-items: center; background: var(--pink); color: var(--rose-text); font-size: 13px; font-weight: 700; }
.logg__dag { font: 600 13px var(--sans); color: var(--muted); margin: 14px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.logg__dag:first-child { margin-top: 0; }
.admin-fler { margin-top: 12px; }
main.admin [hidden] { display: none !important; }   /* hidden ska gälla också där en klass sätter display (knappar, rutnät) */
.admin-kopia__senast { font-weight: 600; }
.admin-kopia__plan:empty { display: none; }
main.admin .admin-rad--dold { display: none; }
.admin-attgora:empty { display: none; }
#att-gora .admin-attgora + .admin-attgora:not(:empty) { margin-top: 8px; }
.admin-rubrikrad { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sektion .admin-rubrikrad h2 { margin-bottom: 0; }
.admin-rad__rubrik { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* vem + vilket minne på en rad */
main.admin .knapp--liten, main.admin .knapp--sekundar { box-shadow: none; }
main.admin .knapp:disabled { box-shadow: none; }
.admin-kat .falt { width: 100%; }
@media (min-width: 900px) { .admin-personer { align-items: start; } .admin-person--admin { grid-column: 1 / -1; } }

/* ==== D: Hem och Vi två ==== */
/* Omdesignen 2026-10, paket d (docs/specs/2026-10-02-omdesign.md §6.1–6.2). Mått och färger enligt §3 och §5; textparen är
   mätta i tests/hem.test.js och tests/vitva.test.js (≥ 4,5:1 i båda temana, även över ett helvitt och ett helsvart foto). */

/* --- Hem: en spalt med kort, 12 px från skärmkanten på telefonen --- */
.hem { display: flex; flex-direction: column; gap: 16px; margin: 0 -4px; }
@media (min-width: 640px) { .hem { max-width: 600px; margin: 0 auto; } }
.hem-dagens:empty { display: none; }
.hem-rubrik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.hem-rubrik h2 { min-width: 0; font: 400 22px/1.25 var(--serif); color: var(--ink); }
.hem-rubrik a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: var(--tryck); min-width: var(--tryck); padding: 0 4px 0 12px;
  font: 600 14px/1.3 var(--sans); color: var(--rose-text); text-decoration: none; white-space: nowrap; }

/* --- Vi två-kortet: det egna fotot (eller en vinröd toning) under slöjan; all text är vit eller står i vita lappar --- */
.hem-vitva { --ring-glapp: #3b1424; position: relative; isolation: isolate; overflow: hidden; max-height: 400px; border-radius: var(--r-hjalte); color: #fff;
  box-shadow: 0 12px 32px rgba(43,10,24,.28); }
.hem-vitva__foto { position: absolute; inset: 0; z-index: -2; background: linear-gradient(160deg, #8a2348 0%, #7d1d3f 45%, #5a2f1f 100%) center / cover no-repeat; }
/* slöjan: minst .62 bakom liten vit text (vit .9 → 4,8:1 över ett helvitt foto), tätare längst ner där siffrorna står */
.hem-vitva::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--sloja),.62) 0%, rgba(var(--sloja),.64) 55%, rgba(var(--sloja),.82) 100%); }
.hem-vitva__topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 0 14px; }
.hem-milstolpe { display: inline-block; min-width: 0; max-width: calc(100% - 52px); padding: 7px 12px; border-radius: 16px; background: rgba(var(--sloja),.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 600 13px/1.4 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hem-glas { flex: 0 0 auto; margin-left: auto; background: rgba(var(--sloja),.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; }
/* två personer och hjärtat i ett rutnät (lapp / rundel / namn): rundlarna och hjärtat står alltid på samma höjd */
.hem-duo { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 8px;
  align-items: center; justify-items: center; padding: 6px 12px 0; }
.hem-person { display: contents; }
.hem-person--andra > * { grid-column: 1; }
.hem-person--jag > * { grid-column: 3; }
.hem-lapp { grid-row: 1; align-self: end; position: relative; max-width: 100%; padding: 8px 11px 7px; border-radius: 16px; background: #fff; color: var(--brev);
  box-shadow: 0 6px 16px rgba(0,0,0,.25); text-align: left; }
.hem-lapp::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.hem-lapp__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.25 var(--sans); color: var(--brev); overflow-wrap: anywhere; }
.hem-lapp__tid { display: block; margin-top: 2px; font: 500 12px/1.3 var(--sans); color: #75574f; overflow-wrap: anywhere; }   /* får bryta: 360 px gick "du · för 23 min sedan" ut i kanten */
.hem-lapp--tom .hem-lapp__text { -webkit-line-clamp: 3; font-weight: 500; color: #75574f; }   /* tomläget får en rad till: "Skicka dagens första hälsning ♥" ska synas helt */
.hem-rundram { grid-row: 2; display: inline-grid; padding: 3px; border-radius: 50%; background: transparent; }   /* ring bara när något är nytt */
.hem-rundram.k-ring { background: var(--ring); }
.hem-rund { width: 72px; height: 72px; font-size: 28px; }
.hem-namn { grid-row: 3; align-self: start; max-width: 100%; font: 600 15px/1.25 var(--sans); text-align: center; overflow-wrap: anywhere; }
.hem-namn__tid { display: block; font: 500 12px/1.3 var(--sans); color: rgba(255,255,255,.9); }
.hem-mitt { grid-column: 2; grid-row: 2; position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.hem-mitt::before { content: ''; position: absolute; left: -20px; right: -20px; top: 50%; border-top: 2px dashed rgba(255,255,255,.45); }
.hem-hjarta { position: relative; z-index: 1; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center;
  cursor: pointer; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); -webkit-tap-highlight-color: transparent; }
.hem-hjarta .ikon { width: 60px; height: 60px; fill: #fff; stroke: #fff; }
.hem-hjarta .k-marke { top: 2px; right: -4px; box-shadow: 0 0 0 2px #fff; }
.hem-hjarta:focus-visible, .hem-snabb button:focus-visible, .hem-glas:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* snabbraden: fyra emoji (48×46) och Svara; ångra-listen tar dess plats i 3 s */
.hem-snabb { display: grid; grid-template-columns: repeat(4, 48px) minmax(0, 1fr); gap: 8px; padding: 12px 16px 0; }
.hem-snabb__knapp { height: 46px; padding: 0; border: 0; border-radius: 14px; background: rgba(var(--sloja),.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  font-size: 22px; line-height: 1; color: #fff; }
.hem-svara { height: 46px; min-width: 0; padding: 0 10px; border: 0; border-radius: 14px; background: #fff; color: #7d1d3f; font: 700 15px/1.2 var(--sans); }
.hem-angra { display: flex; justify-content: center; padding: 12px 16px 0; }
.hem-angra:empty { display: none; }
.hem-angra .k-angra { max-width: 100%; }
/* sifferraden: dagar ihop · dagar kvar · minnen */
.hem-siffror { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 16px 0; padding: 8px 0 10px; border-top: 1px solid rgba(255,255,255,.22); text-align: center; }
.hem-siffra b { display: block; font: 400 24px/1.15 var(--serif); }
.hem-siffra span { display: block; font: 500 12px/1.3 var(--sans); color: rgba(255,255,255,.9); }

/* --- Nästa träff: eget kort med 4 px träff-blå överkant (text står aldrig på ett foto) --- */
.hem-traff { border-top: 4px solid var(--moln); }
.hem-traff__lank { display: block; color: inherit; text-decoration: none; }
.hem-traff__etikett { display: block; color: var(--moln-text); }
.hem-traff__nedrakning { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.hem-traff__nedrakning b { font: 400 40px/1.1 var(--serif); color: var(--ink); }
.hem-traff__nedrakning span { font: 600 16px/1.3 var(--sans); }
.hem-traff__nedrakning .hem-traff__idag { font: 400 28px/1.2 var(--serif); }
.hem-traff__titel { display: block; margin-top: 8px; font: 600 15px/1.35 var(--sans); }
.hem-traff__plats { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 2px; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.hem-traff__plats .k-en-rad { min-width: 0; }
.hem-resa { position: relative; display: block; height: 6px; margin: 16px 0 6px; border-radius: 3px; background: var(--moln-bg); }
.hem-resa i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #9cc6f0, var(--moln)); }
.hem-resa__text { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.hem-traff__infor { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hem-traff__infor p, .hem-traff--tom p { flex: 1; min-width: 0; font: 600 14px/1.35 var(--sans); }
.hem-traff__infor small, .hem-traff--tom small { display: block; font: 500 12px/1.35 var(--sans); color: var(--muted); }
.hem-traff--tom { display: flex; align-items: center; gap: 12px; }
.hem-traff__ikon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--moln-bg); color: var(--moln-text); }
.hem-traff--laddar { min-height: 150px; }
.hem-skelett { display: block; width: 45%; height: 12px; border-radius: 6px; background: var(--grupp); }
.hem-skelett--stor { width: 60%; height: 40px; margin-top: 12px; }

/* --- Höjdpunkter: rundlar på 64 px i en rad som går att svepa --- */
.hem-hojd__rad { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hem-hojd__rad::-webkit-scrollbar { display: none; }
.hem-hojd__punkt { flex: 0 0 84px; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; text-align: center; }
.hem-hojd__ring .k-rund { width: 64px; height: 64px; font-size: 24px; }
.hem-hojd__ring--forr { background: conic-gradient(from 200deg, #f5c04a, #ef8a3c, #e35d3a, #f5c04a); }
.hem-hojd__text { display: block; width: 100%; min-width: 0; }
.hem-hojd__text b { display: block; font: 600 12px/1.35 var(--sans); }
.hem-hojd__text small { font: 500 12px/1.35 var(--sans); color: var(--muted); }   /* högst två rader (k-tva-rader) */

/* --- Den här veckan: rutnät 3×n, rosa prick på osedda, ▶ på filmer --- */
.hem-vecka__rutor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 8px; border-radius: 16px; overflow: hidden; }
.hem-vecka__ruta { position: relative; display: block; aspect-ratio: 1; background: var(--grupp); }
.hem-vecka__ruta img { width: 100%; height: 100%; object-fit: cover; }
.hem-vecka__ruta--ny::after { content: ''; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: #f093ad; box-shadow: 0 0 0 2px #fff; }
.hem-vecka__film { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,8,14,.66); color: #fff; font-size: 11px; line-height: 1; }

/* thai: Georgia saknar thailändska tecken – reservtypsnittet behöver mer radavstånd (annars klipps tecknen ovanför och under) */
:root:lang(th) .hem-lapp__text, :root:lang(th) .hem-namn, :root:lang(th) .hem-hojd__text b, :root:lang(th) .hem-hojd__text small,
:root:lang(th) .hem-traff__titel, :root:lang(th) .hem-rubrik h2, :root:lang(th) .hem-milstolpe, :root:lang(th) .hem-svara { line-height: 1.5; }

/* --- Vi två-bladet: en riktig chatt i ett blad som glider upp (k-blad) --- */
/* dialogens egna mått (bredd/höjd efter innehållet, ram, marginal) ersätts; höjden följer den synliga ytan när tangentbordet är uppe */
dialog.vitva-blad { top: var(--vitva-y, 44px); bottom: auto; width: 100%; height: var(--vitva-h, calc(100% - 44px)); max-height: none; padding: 0; border: 0; color: var(--ink); }
dialog.vitva-blad::backdrop { background: rgba(20,8,14,.45); }
:root[data-theme="dark"] .vitva-blad .k-blad__handtag { background: rgba(255,255,255,.25); }
.vitva-blad .k-blad__handtag { touch-action: none; }
.vitva-huvud { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 12px 10px 16px; touch-action: none; }
.vitva-huvud__rund { display: inline-grid; padding: 3px; border-radius: 50%; }
.vitva-huvud__text { flex: 1; min-width: 0; }
.vitva-namn { font: 400 23px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.vitva-klocka { display: block; font: 500 12px/1.4 var(--sans); color: var(--muted); }
.vitva-seg { flex: 0 0 auto; margin: 0 16px; }
.vitva-seg__antal { position: static; display: inline-block; margin-left: 6px; vertical-align: 1px; box-shadow: none; }
.vitva-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* rundlar: profilbilden över bokstaven */
.vitva-rund { position: relative; }
.vitva-rund__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vitva-rund--40 { width: 40px; height: 40px; font-size: 18px; }
/* tråden */
.vitva-trad { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 3px; padding: 6px 16px 10px; }
.vitva-trad > :first-child { margin-top: auto; }
.vitva-dag { align-self: center; margin: 14px 0 8px; }
.vitva-bubbla { max-width: 78%; padding: 10px 14px; border-radius: 20px; font: 500 15px/1.35 var(--sans); overflow-wrap: anywhere; }
.vitva-bubbla--hennes { align-self: flex-start; background: var(--hennes); color: var(--ink); border-bottom-left-radius: 6px; }
.vitva-bubbla--min { align-self: flex-end; background: var(--min-bubbla); color: #fff; border-bottom-right-radius: 6px; }
.vitva-bubbla--min + .vitva-bubbla--min { border-top-right-radius: 6px; }
.vitva-bubbla--hennes + .vitva-bubbla--hennes { border-top-left-radius: 6px; }
.vitva-emoji { align-self: flex-start; padding: 2px 4px; font-size: 46px; line-height: 1.15; }
.vitva-emoji--min { align-self: flex-end; }
.vitva-tid { align-self: flex-start; margin: 2px 4px 6px; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.vitva-tid--min { align-self: flex-end; }
.vitva-fragekort { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 2px 4px 2px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--grupp); }
.vitva-fragekort__ikon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pink); color: var(--rose-text); }
.vitva-fragekort p { flex: 1; min-width: 0; font: 600 13px/1.35 var(--sans); }
.vitva-fragekort b { display: block; }
.vitva-fragekort small { display: block; font: 500 12px/1.35 var(--sans); color: var(--muted); }
.vitva-fragekort a { display: inline-flex; align-items: center; min-height: var(--tryck); padding: 0 10px; font: 600 13px/1.2 var(--sans); color: var(--rose-text); text-decoration: none; white-space: nowrap; }
.vitva-trad > .k-angra { align-self: flex-end; flex: 0 0 auto; margin-top: 6px; }
.vitva-tom { margin: auto; padding: 24px 8px; text-align: center; font: 500 14px/1.45 var(--sans); color: var(--muted); }
/* snabbvalen, paletten och skrivraden */
.vitva-snabbval { flex: 0 0 auto; padding: 8px 16px 6px; }
.vitva-snabbval .k-chip:disabled { opacity: .5; cursor: default; }
.vitva-palett { flex: 0 0 auto; max-height: 38vh; overflow-y: auto; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--grupp); }
.vitva-palett__rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.vitva-palett__emoji { width: 100%; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; font-size: 22px; line-height: 1; }
.vitva-palett__emoji[aria-pressed="true"] { background: var(--pink); box-shadow: inset 0 0 0 2px var(--rose); }
.vitva-palett__klar { display: flex; margin: 8px 0 0 auto; }
.vitva-skriv { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.vitva-falt { flex: 1; min-width: 0; height: var(--tryck); padding: 0 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--grupp); color: var(--ink); font: 400 16px/1.2 var(--sans); }
.vitva-falt::placeholder { color: var(--muted); opacity: 1; }
.vitva-emojiknapp__val { font-size: 18px; line-height: 1; letter-spacing: -2px; }
.vitva-raknare { flex: 0 0 auto; min-width: 2ch; font: 600 12px/1 var(--sans); color: var(--muted); text-align: right; }
.vitva-raknare--over, .vitva-fel { color: #b3261e; }
:root[data-theme="dark"] .vitva-raknare--over, :root[data-theme="dark"] .vitva-fel { color: #ff8a80; }
.vitva-skicka { flex: 0 0 auto; width: var(--tryck); height: var(--tryck); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; }
.vitva-skicka--hjarta { background: var(--pink); color: var(--rose-text); }
.vitva-skicka--hjarta .ikon { fill: currentColor; }
.vitva-skicka--pil { background: var(--rose); color: #fff; }
.vitva-skicka:disabled { opacity: .6; }
.vitva-fel { flex: 0 0 auto; padding: 0 16px 8px; font: 600 13px/1.35 var(--sans); }
.vitva-fel:empty { display: none; }
/* Händelser: NYA och TIDIGARE, rosa prick för oläst */
.vitva-handelser__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 8px; }
.vitva-handelser__rubrik { display: block; margin: 16px 0 6px; }
.vitva-hrad { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; }
.vitva-hrad--ny::before { content: ''; position: absolute; left: -11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rosa); }
.vitva-hrad p { font: 400 14px/1.35 var(--sans); overflow-wrap: anywhere; }
.vitva-hrad b { font-weight: 650; }
.vitva-hrad small { display: block; margin-top: 2px; font: 500 12px/1.35 var(--sans); color: var(--muted); }
.vitva-hrad__tumme { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.vitva-hrad__tumme img { width: 100%; height: 100%; object-fit: cover; }
.vitva-hrad__tumme--ikon { background: var(--pink); color: var(--rose-text); }
.vitva-hrad__tumme--traff { background: var(--moln-bg); color: var(--moln-text); }
.vitva-handelser__fot { flex: 0 0 auto; display: grid; gap: 4px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.vitva-notislank { min-height: var(--tryck); border: 0; background: none; font: 600 14px/1.3 var(--sans); color: var(--rose-text); }
:root:lang(th) .vitva-bubbla, :root:lang(th) .vitva-hrad p, :root:lang(th) .vitva-namn, :root:lang(th) .vitva-fragekort p { line-height: 1.5; }

/* --- rörelse bara som återkoppling, aldrig i evighet; av vid "minska rörelse" (systemet eller html.minska-rorelse) --- */
.hem-snabb__knapp, .hem-svara, .hem-hjarta { transition: transform var(--t-snabb) var(--kurva); }
.hem-snabb__knapp:active, .hem-svara:active, .hem-hjarta:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .hem *, .vitva-blad, .vitva-blad * { animation: none !important; transition: none !important; } }
html.minska-rorelse .hem *, html.minska-rorelse .vitva-blad, html.minska-rorelse .vitva-blad * { animation: none !important; transition: none !important; }
/* ==== slut D ==== */

/* ==== E: Ändra minne och tidslinjen ==== */
/* --- minnessidan (spec §6.3 skärm 4): hjältefoto 430 px med slöja, ‹ och ✎ Ändra (44 px glas), typchip, rubrik, datum och plats --- */
.andra-hjalte { height: 430px; min-height: 0; background: #5a2f3f; color: #fff; }
.andra-hjalte > img { position: absolute; inset: 0; }
.andra-hjalte::after { background: linear-gradient(180deg, rgba(var(--sloja),.35) 0%, rgba(var(--sloja),.05) 22%, rgba(var(--sloja),.62) 52%, rgba(var(--sloja),.82) 100%); }
.andra-hjalte__knappar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.andra-glasrund { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #2b1a1d; box-shadow: 0 4px 14px rgba(0,0,0,.2); text-decoration: none; }
.andra-glaspiller { margin-left: auto; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); color: #2b1a1d; font: 650 15px/1 var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.andra-hjalte__text { bottom: 22px; padding: 0 20px; }
.andra-typchip { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(var(--sloja),.72); color: #fff; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; }
.andra-hjalte__text h1 { font: 400 34px/1.15 var(--serif); margin: 10px 0 8px; overflow-wrap: anywhere; }
:root:lang(th) .andra-hjalte__text h1 { line-height: var(--serif-lh, 1.45); }
.andra-hjalte__text .andra-meta { display: flex; flex-wrap: wrap; gap: 0 16px; font: 500 14px/1.3 var(--sans); opacity: 1; }
.andra-meta__del { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: #fff; text-decoration: none; }
a.andra-meta__del { min-height: 44px; margin-top: 0; font-weight: 500; text-shadow: none; }
.andra-byline { margin: 6px 0 4px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
@media (min-width: 900px) { .andra-hjalte { height: 70vh; } .andra-hjalte__text h1 { font-size: 56px; } .andra-hjalte__knappar { left: 30px; right: 30px; top: 18px; } }

/* --- Ändra minne: helskärm (spec §6.3 skärm 1) --- */
html.andra-oppen, html.andra-oppen body { overflow: hidden; }
.andra { position: fixed; inset: 0; z-index: 56; display: flex; flex-direction: column; background: var(--grupp); color: var(--ink); animation: andra-in var(--t-blad) var(--kurva) 1 both; outline: none; }
@keyframes andra-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .andra { animation: none; } }
html.minska-rorelse .andra { animation: none; }
.andra-huvud { flex: 0 0 auto; min-height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: env(safe-area-inset-top, 0px) 8px 0; background: var(--grupp); border-bottom: 1px solid var(--line); }
.andra-huvud h1 { font: 650 17px/1.35 var(--sans); white-space: nowrap; }
.andra-avbryt { justify-self: start; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; color: var(--rose-text); font: 500 16px/1 var(--sans); }
.andra-innehall { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px 16px 32px; -webkit-overflow-scrolling: touch; }
.andra-innehall > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.andra-grupp .k-grupp-rubrik { margin: 20px 4px 8px; }
.andra-hjalp { margin: 10px 4px 0; font: 500 12px/1.45 var(--sans); color: var(--muted); }
.andra-dold { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* bildremsan: + Lägg till först, omslaget märkt; inga ta bort-knappar här */
.andra-remsa { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.andra-remsa::-webkit-scrollbar { display: none; }
.andra-remsa > * { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 14px; position: relative; overflow: hidden; }
.andra-remsa__lagg { display: grid; place-items: center; align-content: center; gap: 4px; border: 1.5px dashed var(--rose-text); background: var(--surface); color: var(--rose-text); font: 600 12px/1.2 var(--sans); cursor: pointer; }
.andra-remsa__ruta { background: var(--pink); }
.andra-remsa__ruta img { width: 100%; height: 100%; object-fit: cover; }
.andra-remsa__tom { display: grid; place-items: center; height: 100%; color: var(--rose-text); font-size: 22px; }
.andra-remsa__film { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 8px; background: rgba(20,10,16,.72); color: #fff; font: 700 11px/1.2 var(--sans); }
.andra-omslag { position: absolute; left: 6px; bottom: 6px; padding: 4px 7px; border-radius: 8px; background: #fff; color: #2b1a1d; font: 700 11px/1 var(--sans); }
.andra-remsa__fot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px; margin: 2px 4px 0; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.andra-ordna { min-height: 44px; padding: 0; border: 0; background: none; color: var(--rose-text); font: 600 13px/1.3 var(--sans); text-align: right; }
/* fält och rader */
.andra-falt { position: relative; }
.andra-falt--rubrik textarea { display: block; width: 100%; min-height: 54px; border: 0; background: transparent; color: var(--ink); font: 400 22px/1.3 var(--serif); padding: 12px 16px; border-radius: var(--r-lista); resize: none; overflow: hidden; }
.andra-falt--berattelse textarea { display: block; width: 100%; min-height: 150px; border: 0; background: transparent; color: var(--ink); font: 400 17px/1.6 var(--serif); padding: 14px 16px; resize: vertical; border-radius: var(--r-lista); }
.andra-falt input:focus-visible, .andra-falt textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.andra-rad { width: 100%; border: 0; background: none; color: var(--ink); font: 500 15px/1.4 var(--sans); text-align: left; grid-template-columns: 32px auto minmax(0, 1fr) auto; cursor: pointer; }
summary.andra-rad { list-style: none; grid-template-columns: 32px minmax(0, 1fr) auto; }
.andra-rad[data-mer] { grid-template-columns: 32px minmax(0, 1fr) auto; }   /* MER: ikon, namn, pil – pilen i högerkanten */
.andra-grupp[data-grupp="ta_bort"] { margin-top: 20px; }   /* utan rubrik: samma luft som de andra grupperna, inte ihop med MER */
summary.andra-rad::-webkit-details-marker { display: none; }
.andra-utseende[open] > summary .andra-chev { transform: rotate(90deg); }
.andra-rad + .andra-rad::before { left: 58px; }
.andra-rad__namn { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.andra-varde { justify-self: end; min-width: 0; max-width: 100%; color: var(--muted); font: 500 15px/1.4 var(--sans); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.andra-varde--tom { color: var(--rose-text); font-weight: 600; }
.andra-chev { color: var(--muted); display: grid; place-items: center; }
.andra-rad--typ { grid-template-columns: 32px minmax(0, 1fr); cursor: default; }
.andra-rad--typ .k-seg { grid-column: 1 / -1; }
.andra-seg > button { min-width: 0; padding: 0 6px; overflow-wrap: anywhere; line-height: 1.25; }
.andra-fara { color: #b3261e; font-weight: 600; }
:root[data-theme="dark"] .andra-fara { color: #ff8a80; }
/* ändrat fält: rosa kant på 4 px och märket ÄNDRAD */
.andra .andrad { box-shadow: inset 4px 0 0 var(--rosa); }
.andra .k-grupp.andrad { box-shadow: inset 4px 0 0 var(--rosa), inset 0 0 0 1px var(--line); }
.andra .andrad .andra-varde { color: var(--ink); font-weight: 600; }
.andra-marke { display: inline-block; padding: 3px 6px; border-radius: 6px; background: var(--pink); color: var(--rose-text); font: 700 10px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.andra-falt > .andra-marke { position: absolute; top: 8px; right: 10px; z-index: 1; }
.andra-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.andra-chips > .andra-marke { position: static; order: -1; flex-basis: 100%; width: max-content; max-width: max-content; }
/* vem ser minnet */
.andra-syn { position: relative; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 12px; align-items: center; min-height: 54px; padding: 12px 14px; border: 0; background: none; color: var(--ink); text-align: left; }
.andra-syn + .andra-syn::before { content: ''; position: absolute; left: 50px; right: 0; top: 0; border-top: 1px solid var(--line); }
.andra-syn__text b { display: block; font: 600 15px/1.35 var(--sans); }
.andra-syn__text small { display: block; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.andra-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); }
.andra-syn[aria-checked="true"] .andra-radio { border: 7px solid var(--rose); }
/* förhandsvisningen: som ett stopp på tidslinjen */
.andra-forhands { display: flex; align-items: center; gap: 14px; padding: 14px; --ring-glapp: var(--surface); }
.andra-forhands__bild { width: 60px; height: 60px; }
.andra-forhands__text { display: flex; flex-direction: column; min-width: 0; font: 600 14px/1.35 var(--sans); }
.andra-forhands__text b { font-weight: 600; overflow-wrap: anywhere; }
.andra-forhands__plats { display: flex; align-items: center; gap: 3px; font: 500 12px/1.4 var(--sans); color: var(--muted); }
/* utseende (hopfällt) */
.andra-utseende__innehall { padding: 4px 14px 16px; display: grid; gap: 12px; }
.andra-stil { display: grid; gap: 6px; }
.andra-stil__namn { font: 600 13px/1.3 var(--sans); color: var(--muted); }
.andra-stil input[type="range"] { width: 100%; accent-color: var(--rose); }
.andra-val { display: flex; flex-wrap: wrap; gap: 8px; }
.andra-farg { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.andra-farg[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
/* utkast och krockar */
.andra-utkast { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-lista); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--rosa); font: 500 14px/1.45 var(--sans); }
.andra-utkast__knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.andra-krockar:empty { display: none; }
.andra-krockar { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; padding-bottom: 10px; }
.andra-krock { padding: 10px 12px; border-radius: 14px; background: var(--grupp); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1.45 var(--sans); }
.andra-krock__knappar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.andra-krock__knappar .k-knapp { white-space: normal; text-align: center; line-height: 1.25; }
/* den fasta raden längst ner */
.andra-spara { flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.andra-spara__rad { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.andra-spara__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.andra-spara__antal { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.andra-spara__knapp { flex: 0 0 auto; min-width: 104px; }
.andra-spara__knapp:disabled { opacity: .45; cursor: default; }
/* bekräftelsen "Göra minnet synligt för alla?" (skärm 3): två lika stora val */
.andra-dlg h2 { font: 400 23px/1.25 var(--serif); margin-bottom: 4px; }
.andra-dlg__ingress { font: 500 14px/1.45 var(--sans); color: var(--muted); margin: 4px 0 12px; }
.andra-dlg__lista { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
.andra-dlg__lista li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.4 var(--sans); }
.andra-dlg__lista li .ikon { color: var(--rose-text); margin-top: 1px; }
.andra-dlg__knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.andra-fraga { width: min(420px, 92vw); }
.andra-fraga .dlg__knappar { display: grid; grid-template-columns: 1fr 1fr; }
.andra-fraga .knapp { min-height: 48px; font-size: 15px; }
.andra-varning { display: grid; justify-items: start; gap: 2px; border-radius: 14px; background: #fff4d6; color: #4d3900; padding: 12px; font: 500 13px/1.45 var(--sans); margin-bottom: 16px; }
.andra-varning button { margin-top: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #5c4400; color: #fff; font: 700 13px/1.2 var(--sans); }
:root[data-theme="dark"] .andra-varning { background: #3a2e10; color: #f5dc9a; }
:root[data-theme="dark"] .andra-varning button { background: #f5dc9a; color: #3a2e10; }

/* --- platsbladet (skärm 2): sökfält 48 px, fri text, era platser – ingen position, ingen karttjänst --- */
.platsval { padding: 0 16px; }
.platsval-huvud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; margin: 0 -8px; }
.platsval-huvud h2 { font: 650 17px/1.35 var(--sans); }
.platsval-avbryt, .platsval-klar { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; color: var(--rose-text); font: 500 16px/1 var(--sans); }
.platsval-avbryt { justify-self: start; } .platsval-klar { justify-self: end; font-weight: 700; }
.platsval-innehall { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }   /* luft för sökfältets fokusram */
.platsval-falt { position: relative; display: block; margin: 0 3px; color: var(--muted); }
.platsval-falt > .ikon { position: absolute; left: 14px; top: 14px; pointer-events: none; }
.platsval-sok { display: block; width: 100%; height: 48px; padding: 0 48px 0 44px; border-radius: 14px; background: var(--grupp); border: 1.5px solid var(--rose); color: var(--ink); font: 400 16px/1 var(--sans); }
.platsval-sok:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.platsval-fritext, .platsval-ingen { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--rose-text); font: 500 15px/1.35 var(--sans); text-align: left; }
.platsval-fritext[hidden] { display: none; }
.platsval-ingen { color: var(--ink); }
.platsval-rubrik { display: block; margin: 18px 0 4px; }
.platsval-rad { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.platsval-tummar { display: flex; }
.platsval-tummar > * { width: 30px; height: 40px; border-radius: 8px; border: 2px solid var(--bg); display: block; object-fit: cover; background: var(--pink); }
.platsval-tummar > * + * { margin-left: -10px; }
.platsval-tummar--1 > *, .platsval-tummar--0 > * { width: 40px; }   /* en ensam bild är hel */
.platsval-tummar--0 > i { display: grid; place-items: center; color: var(--rose-text); }
.platsval-rensa { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.platsval-rensa[hidden] { display: none; }
.platsval-rensa:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.platsval-text { display: flex; flex-direction: column; min-width: 0; }
.platsval-text b { font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.platsval-text small { font: 500 13px/1.35 var(--sans); color: var(--muted); }
.platsval-bock { color: var(--rose-text); }
.platsval-hjalp { margin: 12px 0; font: 500 14px/1.45 var(--sans); color: var(--muted); }
.platsval-anm { display: flex; gap: 8px; margin-top: 16px; font: 500 12px/1.45 var(--sans); color: var(--muted); }

/* --- tidslinjens huvud: Tidslinje, Väg | Lista | Kalender och filtren (spec §6.4) --- */
.vag-titel { margin-bottom: 12px; }
.vag-seg > a { min-height: var(--tryck); border-radius: 10px; display: grid; place-items: center; font: 600 14px/1.2 var(--sans); color: var(--muted); text-decoration: none; text-align: center; padding: 0 6px; }
.vag-seg > a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vag-filter { margin-top: 12px; padding-bottom: 2px; }
.vag-filter a.k-chip { text-decoration: none; }
.vag-platsknapp > span:first-of-type { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.vag-platser .platslista { margin-top: 12px; }
.platslista a.pa { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.kal__manad { font: 400 28px/1.15 var(--serif); }
@media (min-width: 900px) { .kal__manad { font-size: 36px; } }

/* --- Lista (spec §6.4 skärm 2): nyast först, Kommande överst, NU-linjen, månadsrubriker, rader på 84 px --- */
.lista { margin-top: 6px; }
.lista-kommande, .lista-manad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 22px 0 6px; font: 400 22px/1.25 var(--serif); }
.lista-manad small { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.lista-rad { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 84px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lista-rad__omslag { position: relative; width: 68px; height: 68px; border-radius: 14px; background: var(--pink); display: grid; place-items: center; }
.lista-rad__omslag img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.lista-rad__omslag--traff { background: var(--moln-bg); border: 2px dashed var(--moln); color: var(--moln-text); }
.lista-rad__tom { color: var(--rose-text); font-size: 22px; }
.lista-typ { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.lista-syn { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 1px 3px rgba(0,0,0,.2); }
.lista-rad__text { min-width: 0; }
.lista-rad__lank { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: inherit; text-decoration: none; }
.lista-rad__lank::after { content: ''; position: absolute; inset: 0; }
.lista-rad__lank:focus-visible { outline: none; }
.lista-rad__lank:focus-visible::after { outline: 2px solid var(--rose); outline-offset: -2px; border-radius: 12px; }
.lista-rad--traff .lista-rad__datum { color: var(--moln-text); }
.lista-rad__titel { font: 600 15px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lista-rad__meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 4px; min-width: 0; font: 500 13px/1.45 var(--sans); color: var(--muted); }
.lista-rad__var { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }   /* nålen + platsen: krymper, aldrig isär */
.lista-rad__var > .ikon, .lista-rad__var > svg { flex: none; }
.lista-rad__plats { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-rad__antal { flex: none; white-space: nowrap; }
.lista-lagg-plats { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; color: var(--rose-text); font-weight: 600; text-decoration: none; }
.lista-nu { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 700 12px/1.3 var(--sans); color: var(--rose-text); letter-spacing: .06em; text-transform: uppercase; }
.lista-nu::before, .lista-nu::after { content: ''; flex: 1; height: 2px; background: var(--rose); border-radius: 1px; }
/* ==== slut E ==== */

/* ==== F: navigering och inställningar ==== */
/* Omdesignen 2026-10, paket F (docs/specs/2026-10-02-omdesign.md §2, §5, §6.5, §6.7, §6.10). Allt nås med tummen: sidhuvudet är
   en rad, flikraden ligger längst ner, tryckytor ≥ 44 px, fält 16 px. Kontrasten är mätt i båda temana (tests/navigering.test.js,
   tests/installningar.test.js). Ingen emoji som gränssnittsikon – bara VL.ikon. */

/* --- sidhuvudet: ♥ (klocka.js) och rundlarna får 44 × 44; min rundel är 32 px med ring --- */
.top .klocka { width: var(--tryck); height: var(--tryck); padding: 0; display: grid; place-items: center; border-radius: 50%; }
.top .klocka .klocka__antal { top: 5px; right: 3px; box-shadow: 0 0 0 2px var(--bg); }
.top .klocka:active, .topp-profil:active { background: var(--line); }
.topp-profil { width: var(--tryck); height: var(--tryck); padding: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.topp-profil .av__bokstav, .topp-profil .av__bild { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--rose); }
.topp-profil .av__bokstav { display: grid; place-items: center; background: var(--rose); color: #fff; font: 700 14px/1 var(--sans); }
.topp-profil .av__bild { inset: 6px; }
/* den andra syns i sidhuvudet bara när hon/han är inne i appen just nu (grön ring) – sidhuvudet håller sig till en rad */
.top .av--narvaro { width: var(--tryck); height: var(--tryck); border: 0; background: none; box-shadow: none; }
.top .av--narvaro:not(.ar-inne) { display: none; }
.top .av--narvaro .av__bokstav { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--rose-text); font: 700 14px/1 var(--sans); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #2fb36b; }
.top .av--narvaro .av__bild { inset: 6px; width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #2fb36b; }
.top .av--narvaro .prick { right: 4px; bottom: 4px; }

/* --- flikraden längst ner: Hem · Tidslinje · ＋ · Frågor · Träffar (besökare och gäster: Tidslinje · Om oss · Logga in/Meny) ---
   64 px + iPhones säkerhetsmarginal (hemskärmsappen). Den ligger i sidhuvudet (som inte har något filter) och är fast mot skärmen. */
body.flikrad-syns { padding-bottom: calc(var(--flikrad-h) + env(safe-area-inset-bottom, 0px)); }
.flikrad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; height: calc(var(--flikrad-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(0px, calc((100% - 560px) / 2)) env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.flikrad--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-theme="dark"] .flikrad { background: rgba(22,16,26,.94); }
.flikrad-flik { position: relative; min-width: 0; height: var(--flikrad-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; border: 0; border-radius: 0;
  background: none; color: var(--flik-av); font: 600 11px/1.25 var(--sans); text-align: center; text-decoration: none; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flikrad-flik[aria-current="page"] { color: var(--rose-text); }
.flikrad-flik:focus-visible { outline: 3px solid var(--rose-text); outline-offset: -5px; border-radius: 14px; }
.flikrad-text { display: block; max-width: 100%; overflow-wrap: anywhere; }
:root:lang(th) .flikrad-text { line-height: 1.45; }
.flikrad .k-marke { top: 6px; right: calc(50% - 24px); }
.flikrad-ny__knapp { width: 54px; height: 54px; margin-top: -6px; border-radius: 18px; background: var(--rose); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(125,29,63,.35); transition: transform var(--t-snabb) var(--kurva); }
.flikrad-ny:active .flikrad-ny__knapp { transform: scale(.94); }
/* det som ligger fast längst ner på sidan hamnar ovanför flikraden */
body.flikrad-syns .toast { bottom: calc(var(--flikrad-h) + env(safe-area-inset-bottom, 0px) + 12px); }
body.flikrad-syns .app-tips { bottom: calc(var(--flikrad-h) + env(safe-area-inset-bottom, 0px) + 10px); }

/* --- profilmenyn (och besökarens inställningsmeny): rader på minst 44 px, ovanför flikraden --- */
.top .meny--profil { width: min(292px, calc(100vw - 16px)); padding: 6px; max-height: calc(100vh - var(--topp-h) - var(--flikrad-h) - env(safe-area-inset-bottom, 0px) - 16px);
  max-height: calc(100dvh - var(--topp-h) - var(--flikrad-h) - env(safe-area-inset-bottom, 0px) - 16px); }
.top .meny--profil button, .top .meny--profil a { min-height: var(--tryck); }
.top .meny .meny__rad { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 12px; text-align: left; font-size: 15px; }
.top .meny .meny__rad > span { flex: 1 1 auto; min-width: 0; }
.top .meny .meny__rad .ikon { color: var(--rose-text); }
.top .meny .meny__rad--mer .ikon:last-child { color: var(--muted); }
.top .meny .meny__sprak { margin: 4px 8px 6px; }
.top .meny .fara .ikon { color: inherit; }

/* --- Bakgrund (profilmenyn → Bakgrund, och bildknappen på Vi två-kortet) – skissen final_bakgrund skärm 1 --- */
.bakgrund-mini { position: relative; width: 176px; height: 300px; margin: 6px auto 0; border-radius: 26px; border: 6px solid #2b1a1d; background: var(--bg); overflow: hidden; }
:root[data-theme="dark"] .bakgrund-mini { border-color: #4f3a44; }
.bakgrund-mini__mos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--kol, 3), 1fr); grid-template-rows: repeat(var(--rad, 4), 1fr); }
.bakgrund-mini__mos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.bakgrund-mini__ton { display: block; background: linear-gradient(160deg, #e9c9b5, #c98aa0); }
.bakgrund-mini__ton--1 { background: linear-gradient(160deg, #b9d3e8, #7a9fc2); }
.bakgrund-mini__ton--2 { background: linear-gradient(160deg, #d6e4c4, #93b089); }
.bakgrund-mini__ton--3 { background: linear-gradient(160deg, #f1d9a8, #d49a63); }
.bakgrund-mini__ton--4 { background: linear-gradient(160deg, #d9c6e6, #9a7fb8); }
.bakgrund-mini__ton--5 { background: linear-gradient(160deg, #f3c1cf, #c0567a); }
.bakgrund-mini__ord { position: absolute; top: 10px; left: 10px; padding: 3px 6px; border-radius: 6px; font: 400 12px/1.2 var(--serif); color: var(--ink); }
.bakgrund-mini--platta .bakgrund-mini__ord { background: var(--platta); }
.bakgrund-mini__kort { position: absolute; left: 10px; right: 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.bakgrund-mini__kort--1 { top: 36px; height: 92px; }
.bakgrund-mini__kort--2 { top: 138px; height: 60px; }
.bakgrund-mini__kort--3 { top: 208px; height: 74px; }
.bakgrund-mini-text { margin: 10px 20px 0; text-align: center; font: 500 13px/1.45 var(--sans); color: var(--muted); }
.bakgrund-antal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bakgrund-antal button { min-height: 64px; min-width: 0; padding: 6px 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); display: grid; place-items: center; align-content: center; gap: 6px; font: 650 13px/1.2 var(--sans); cursor: pointer; }
.bakgrund-antal button[aria-checked="true"] { border-color: var(--rose); background: var(--pink); color: var(--rose-text); }
.bakgrund-antal button:focus-visible, .bakgrund-spar:focus-visible { outline: 3px solid var(--rose-text); outline-offset: 2px; }
.bakgrund-ruta { display: grid; grid-template-columns: repeat(var(--k, 1), 1fr); grid-auto-rows: 1fr; gap: 1.5px; width: 20px; height: 20px; }
.bakgrund-ruta i { background: currentColor; border-radius: 1px; opacity: .8; }
.bakgrund-ruta--inga { display: grid; place-items: center; }
.bakgrund-ruta--inga::before { content: ''; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.bakgrund-reglage { padding: 16px; }
.bakgrund-reglage__rad { display: flex; justify-content: space-between; gap: 12px; font: 600 15px/1.3 var(--sans); }
.bakgrund-varde { color: var(--rose-text); white-space: nowrap; }
.bakgrund-reglage__spar { position: relative; margin-top: 4px; }
.bakgrund-spar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--tryck); margin: 0; background: transparent; cursor: pointer; }
.bakgrund-spar::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--rose) calc(var(--fyll, 0) * 100%), var(--line) 0); }
.bakgrund-spar::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.bakgrund-spar::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.bakgrund-spar::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--rose); }
.bakgrund-spar::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.bakgrund-markor { position: absolute; top: 12.5px; left: calc(14px + var(--grans, .33) * (100% - 28px) - 1px); width: 2px; height: 19px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.bakgrund-reglage__skala { display: flex; justify-content: space-between; gap: 12px; }
.bakgrund-reglage__skala small { font: 500 12px/1.3 var(--sans); color: var(--muted); }
.bakgrund-info { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--grupp); font: 500 13px/1.45 var(--sans); color: var(--ink); }
.bakgrund-info .ikon { margin-top: 1px; }
.bakgrund-foto__bild { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(160deg, #e7b78f, #8a2348 60%, #5a2f1f); }
.bakgrund-foto__bild--foto { background-size: cover; background-position: center; }
.bakgrund-foto__bild--foto .ikon { display: none; }

/* --- helskärmsvyerna (Bakgrund, Dagens frågor, Notiser): grupperade listor i iOS-stil --- */
.inst-vy { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--grupp); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain; animation: inst-in var(--t-blad) var(--kurva) 1 both; }
.inst-vy::backdrop { background: var(--grupp); }
@keyframes inst-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.inst-huvud { position: sticky; top: 0; z-index: 2; min-height: var(--topp-h); display: grid; grid-template-columns: var(--tryck) minmax(0, 1fr) var(--tryck); align-items: center; gap: 4px; padding: 0 6px; background: var(--grupp); border-bottom: 1px solid var(--line); }
.inst-huvud h2 { font: 650 17px/1.3 var(--sans); text-align: center; overflow-wrap: anywhere; }
.inst-innehall { max-width: 640px; margin: 0 auto; padding: 6px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.inst-rad { width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.inst-rad--ikon { grid-template-columns: auto minmax(0, 1fr) auto; }
.inst-rad:disabled { cursor: default; }
/* aria-checked sitter på raden (role="switch"/"radio") – växeln i raden följer den */
.inst-rad[aria-checked="true"] > .k-vaxel { background: var(--rose); }
.inst-rad[aria-checked="true"] > .k-vaxel::after { left: 22px; }
.inst-rad:disabled .k-vaxel, .inst-rad:disabled .inst-radio { opacity: .45; }
.inst-rad:focus-visible, .inst-val:focus-visible { outline: 3px solid var(--rose-text); outline-offset: -3px; }
.inst-rad__text { min-width: 0; overflow-wrap: anywhere; }
.inst-rad__text b, .inst-rad__rubrik { display: block; font: 600 15px/1.3 var(--sans); }
.inst-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--flik-av); }
.inst-rad[aria-checked="true"] .inst-radio { border: 7px solid var(--rose); }
.inst-val { max-width: min(46vw, 210px); min-width: var(--tryck); min-height: var(--tryck); padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 16px/1.2 var(--sans); text-align: right; text-align-last: right; cursor: pointer; }
.inst-val:disabled { cursor: default; }
.inst-pausat { display: block; width: fit-content; margin: -4px 16px 12px; padding: 3px 8px; border-radius: 8px; background: var(--grupp); color: var(--muted); font: 600 12px/1.35 var(--sans); }
.inst-pausat + .k-rad::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; border-top: 1px solid var(--line); }   /* avdelaren efter Sex 18+ */
.inst-niva-ruta { padding: 14px 16px 12px; }
.inst-niva { margin-top: 10px; }
.inst-niva button:disabled { cursor: default; }
.inst-tips { display: block; margin-top: 8px; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.inst-fot { margin: 8px 4px 0; font: 500 13px/1.45 var(--sans); color: var(--muted); }
.inst-snart { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1.45 var(--sans); color: var(--ink); }
.inst-telefon { grid-template-columns: auto minmax(0, 1fr); font: 600 15px/1.3 var(--sans); }   /* linjeikon + text (notis.js) */
.inst-telefon > .ikon { color: var(--rose-text); }
/* SÅ SER NOTISEN UT: en låsskärmsnotis med serverns fasta text */
.inst-prov { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(240,240,245,.92); color: #1c1c1e; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
:root[data-theme="dark"] .inst-prov { background: rgba(60,60,67,.92); color: #fff; }
.inst-prov__app { width: 38px; height: 38px; border-radius: 9px; background: #7d1d3f; color: #fff; display: grid; place-items: center; font: 400 15px/1 var(--serif); }
.inst-prov__text b { display: block; font: 650 14px/1.3 var(--sans); }
.inst-prov__text span { font: 500 14px/1.3 var(--sans); }

/* --- bladen nerifrån: samtycket för Sex 18+ (skärm 5) och tidszonsfrågan --- */
.inst-ark { margin: auto auto 0; width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border: 0; border-radius: var(--r-blad) var(--r-blad) 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.3); animation: k-blad-in var(--t-blad) var(--kurva) 1 both; }
.inst-ark::backdrop { background: rgba(20,8,14,.5); }
.inst-ark .k-blad__handtag { margin-bottom: 12px; }
.inst-ark h2 { font: 400 25px/1.25 var(--serif); margin: 4px 0 8px; }
:root:lang(th) .inst-ark h2 { line-height: 1.45; }
.inst-regler { list-style: none; display: grid; gap: 10px; margin: 14px 0 4px; }
.inst-regler li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font: 500 14px/1.45 var(--sans); }
.inst-regler li .ikon { color: var(--rose-text); margin-top: 1px; }
.inst-ark__fraga { font: 500 16px/1.5 var(--sans); margin: 6px 0 2px; }
.inst-ark__knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.inst-ark__knappar .k-knapp { min-height: 52px; border-radius: 16px; padding: 0 12px; text-align: center; line-height: 1.2; }

/* minska rörelse: av i systemet ELLER html.minska-rorelse (testerna sätter klassen) */
@media (prefers-reduced-motion: reduce) { .inst-vy, .inst-ark, .flikrad-ny__knapp { animation: none !important; transition: none !important; } }
html.minska-rorelse .inst-vy, html.minska-rorelse .inst-ark, html.minska-rorelse .flikrad-ny__knapp { animation: none !important; transition: none !important; }
/* ==== slut F ==== */

/* ==== Ladda ner (Jock 2026-10-14): "Ladda ner" i bildvisaren och "Ladda ner alla" på minnets foto – nedladdning.js ==== */
.ljus .ljus__ned { top: max(14px, env(safe-area-inset-top)); left: 14px; width: auto; min-width: 48px; max-width: calc(100% - 90px); padding: 0 16px; border-radius: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.ljus .ljus__ned[disabled], .ned-alla[disabled] { opacity: .7; cursor: progress; }
/* bildvisarens knappar (‹ › × och Ladda ner): mörk halvgenomskinlig botten med tunn ljus kant – vit text på 14 % vitt försvann mot
   ljusa foton (snö, himmel: 1,03:1 mot vitt – granskningen 2026-10-14, fynd 7). Nu minst 3:1 mot både helvitt och helsvart foto. */
.ljus button { background: rgba(20,10,16,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ned-alla { border: 0; padding: 0; cursor: pointer; font: inherit; }
.ned-dlg .ned-status { font: 600 15px/1.4 var(--sans); }
.ned-dlg .ned-filnamn { margin-top: 6px; font: 500 13px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.ned-saknas { margin: 10px 0 0 20px; font: 500 13px/1.5 var(--sans); overflow-wrap: anywhere; }
/* ==== slut Ladda ner ==== */

/* ==== Välj flera (Jock 2026-10-14): läget "Välj" i Tidslinjen (Väg, Lista) och Kalendern – lista.js (VL.valj), pages/kalender.js ==== */
/* Välj-knappen står bredvid sidans rubrik (bara Jock och Emma) */
.valj-titelrad { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.valj-titelrad > h1 { min-width: 0; }
.valj-knapp { flex: 0 0 auto; margin-top: 2px; }
/* bocken: en tom ring på varje minne i läget, fylld vinröd med ✓ när minnet är valt (::after på minnet självt, inget nytt i sidan).
   [data-valj-flera] = en kalenderdag med flera minnen: ett tryck öppnar en väljlista (lista.js), bocken fylls när något av dem är valt. */
.valj-pa :is([data-minne], [data-valj-flera]) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.valj-pa :is([data-minne], [data-valj-flera])::after { content: ''; position: absolute; z-index: 5; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--rose-text); background: var(--surface); box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,.25);
  display: grid; place-items: center; font: 800 15px/1 var(--sans); color: #fff; pointer-events: none; }
.valj-pa :is([data-minne], [data-valj-flera]).valj-vald::after { content: '✓'; background: var(--rose); border-color: var(--rose); }
/* vägen: bocken uppe till vänster på rundeln (typmärket sitter uppe till höger), och en vinröd ring runt det valda */
.valj-pa .vag__station::after { top: -3px; left: calc(50% - 43px); }
.valj-pa .vag__station.valj-vald .vag__ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--rose); }
/* listan: bocken längst till höger på raden */
.valj-pa .lista-rad { padding-right: 42px; }
.valj-pa .lista-rad::after { top: 50%; right: 4px; transform: translateY(-50%); }
.valj-pa .lista-rad.valj-vald { background: rgba(125,29,63,.07); }
:root[data-theme="dark"] .valj-pa .lista-rad.valj-vald { background: rgba(240,147,173,.10); }
/* kalendern: liten bock NERE till höger i dagen – datumet uppe till vänster står fritt. Antal och ▶ göms i läget (på 360 px är dagen
   ca 40 × 36 px och bocken täckte både datumets andra siffra och antalet – granskningen 2026-10-14, fynd 2). Har dagen ett träffmoln
   längst ner står bocken ovanför molnet. Banden (för smala för en bock) får en vinröd kant. */
.valj-pa .dag::after { top: auto; left: auto; right: 3px; bottom: 3px; width: 20px; height: 20px; font-size: 12px; border-width: 1.5px; }
.valj-pa .dag:has(.dag__traff)::after { bottom: 20px; }
@media (max-width: 599px) {
  .valj-pa .dag::after { right: 2px; bottom: 2px; width: 16px; height: 16px; font-size: 10px; box-shadow: 0 0 0 1.5px var(--bg), 0 1px 4px rgba(0,0,0,.25); }
  .valj-pa .dag:has(.dag__traff)::after { bottom: 15px; }
}
.valj-pa .dag :is(.dag__antal, .dag__film) { display: none; }
/* ramen runt en vald dag: ett eget lager OVANFÖR dagens foto (fotot är positionerat och målades över den gamla inset-skuggan, så att
   vald och ovald dag med foto såg likadana ut). Den tunna ljusa linjen innanför syns även mot ett mörkt foto. */
.valj-pa .dag.valj-vald::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--rose), inset 0 0 0 4px rgba(255,255,255,.75); }
.valj-pa .band::after { display: none; }
.valj-pa .band.valj-vald { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--rose-text); }
/* det som inte går att välja i läget tonas ner, liksom "+ Lägg till plats" (ett tryck i läget väljer bara minnet) */
.valj-pa :is(.vag__lagg-plats, .lista-lagg-plats, .vag__station--traff, .lista-rad--traff, .dag:not([data-minne]):not([data-valj-flera])) { opacity: .45; }
/* väljlistan för en dag med flera minnen (rader som Slå ihop-rutan, .ihop__rad; bocken fylls för det som är valt) */
.valj-flera .ihop__rad[aria-checked="true"] { border-color: var(--rose); background: var(--pink); }
.valj-flera .ihop__rad[aria-checked="true"] .ihop__bock { background: var(--rose); border-color: var(--rose); color: #fff; }
/* medan det sparas: ett genomskinligt lager över sidan, sidhuvudet och flikraden – iPhone frågar aldrig "Lämna sidan?", och ett
   sidbyte mitt i lämnade hälften av minnena oändrade utan besked (fynd 10). Bara åtgärdsraden med framsteget ligger ovanpå. */
.valj-skydd { position: fixed; inset: 0; z-index: 39; background: transparent; cursor: progress; }
body.valj-sparar :is(.top, .flikrad) { pointer-events: none; }
/* åtgärdsraden: fast längst ner, ovanför flikraden; sidan får luft under sig så att sista minnet går att nå */
.valj-rad { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 560px; margin: 0 auto;
  display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-kort); background: var(--surface); color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 0 0 1px var(--line); }
body.flikrad-syns .valj-rad { bottom: calc(var(--flikrad-h) + env(safe-area-inset-bottom, 0px) + 10px); }
body.valj-lage #innehall { padding-bottom: 190px; }
.valj-rad__topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.valj-rad__antal { margin: 0; min-width: 0; font: 600 15px/1.3 var(--sans); }
.valj-rad__knappar { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.valj-rad__atgard { padding: 0 10px; white-space: normal; line-height: 1.15; text-align: center; }
.valj-rad button[disabled] { opacity: .45; cursor: not-allowed; }
.valj-rad button[disabled]:active { transform: none; }
:root[data-theme="dark"] .valj-rad { box-shadow: 0 10px 34px rgba(0,0,0,.6), inset 0 0 0 1px var(--line); }
/* temat Vinröd glas: åtgärdsraden är tätt glas som flikraden (fast färg utan backdrop-filter eller med minska genomskinlighet) */
:where(:root[data-tema="vinrod-glas"]) .valj-rad { background: var(--glas-tat-yta, var(--surface)); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); }
/* frågan före sparningen och beskedet efteråt */
.valj-fraga__varning { font: 600 15px/1.45 var(--sans); }
.valj-fraga--public .valj-fraga__varning { color: var(--rose-text); }
/* listan klipper i sidled (overflow-y: auto gör overflow-x auto): indraget är padding, inte marginal – annars hamnar listpunkterna
   och "+ N till" (margin-left -20px) utanför klippkanten och bara ordet "till" syns (fynd 1) */
.valj-fraga__lista { margin: 10px 0 0; padding-left: 20px; max-height: 38vh; overflow-y: auto; font: 500 14px/1.5 var(--sans); overflow-wrap: anywhere; }
.valj-fraga__fler { list-style: none; margin-left: -20px; color: var(--muted); }
.valj-fraga__not { margin-top: 10px; font: 500 13px/1.45 var(--sans); color: var(--muted); }
/* adressvarningen (som Ändras gula ruta, .andra-varning): minnen vars plats ser ut som en gatuadress */
.valj-fraga__adress { margin: 12px 0 0; justify-items: stretch; }
.valj-fraga__adress .valj-fraga__lista { margin: 4px 0 6px; padding-left: 18px; max-height: 22vh; font-size: 13px; }
.valj-fraga__kommentarer { margin-top: 10px; font: 600 14px/1.45 var(--sans); }   /* kommentarerna blir också synliga (fynd 9) */
/* ==== slut Välj flera ==== */

/* ==== Rättelse (temagranskningen 2026-10-14): ⋯ på Om oss syntes inte i mörkt läge – vit prick på vit knapp ==== */
/* Samma mörka text som ‹ på fotot (.hjalte__tillbaka). Står före temablocket så att ett tema (glaspillret) kan ändra färgen. */
.prickar { color: #2b1a24; }
/* ==== slut Rättelse ⋯ ==== */

/* ==== Tema: Vinröd glas ==== */
/* Jocks beställning 2026-10-14 ("ui glass … tema rödvin färg"): djupt rödvin med frostat glas och varma guld-/champagneaccenter,
   i ljust och mörkt läge. Gäller när <html data-tema="vinrod-glas"> (theme.js sparar valet per enhet). Klassisk rörs inte.
   NYTT TEMA: en rad i VL.theme.TEMAN (theme.js) + ett token-block som avsnitt 1 (:root[data-tema="<id>"] och ...[data-theme="dark"]).
   Komponentreglerna (avsnitt 2–5) läser bara tokens (--glas-*, --guld*) och kan återanvändas genom att lägga till temats id.
   Kontrasten är mätt mot SÄMSTA botten (tests/tema.test.js): sidhuvud, flikrad, menyer och blad över helsvart/helvitt foto,
   korten över sidans botten med bakgrundsbilderna på 45 %, text direkt på sidan upp till läsplattans gräns (15/20 %).
   Glaset (backdrop-filter) slås bara på inom @supports; prefers-reduced-transparency och html.minska-genomskinlighet ger fasta
   färger (--glas-fast-*). :where() runt temat håller specificiteten som grundreglernas, så att lägen och val (.andrad, .pa …)
   fortfarande vinner. Inga eviga animationer. */

/* --- 1. tokens --- */
:root[data-tema="vinrod-glas"] {
  --tema-rad: #7a1a3b;                           /* telefonens statusrad/adressfält (theme.js) */
  --bg: #f7ecee;                                 /* fast sidbotten (ringarnas glapp m.m.); toningen ligger i body::before */
  --pink: #f6dfe6; --pink2: #eec3d0; --rose: #7a1a3b; --rose-text: #7a1a3b; --brun: #7a4b2e; --brun-text: #5e3820; --rosa: #c73e70;
  --ink: #2a1219; --muted: #5a3842; --line: rgba(122,26,59,.15); --card: #fdf6f8; --surface: #fffafb; --on-ink: #fff;
  --grupp: #f4e4e8; --hennes: #f6dfe6; --min-bubbla: #7a1a3b; --flik-av: #5f4650; --platta: rgba(255,248,249,.9);
  --guld: #c9a35a;                               /* champagne: ringar, prickar, kanter (inte text på ljust) */
  --guld-text: #5c3f0e;                          /* guld som text på ljus botten */
  /* accenttext som också står direkt på den rosa botten (Listans träffdatum, START, fel): mörkare än i Klassisk – mätt vid 15 % svart foto */
  --moln-text: #17457a; --fara-text: #8a1717;
  --ring: conic-gradient(from 200deg, #e2c27e, #c73e70, #7a1a3b, #f3b6c8, #e2c27e);
  /* glaset */
  --glas-kort: rgba(255,255,255,.6);             /* kort över sidans botten */
  --glas-tat: rgba(255,248,249,.84);             /* sidhuvud, flikrad, menyer och blad – kan ligga över ett helsvart foto */
  --glas-pille: rgba(255,248,249,.8);            /* runda knappar på minnets foto */
  --glas-fast-kort: #fdf6f8; --glas-fast-tat: #fdf7f8;   /* reserv: utan backdrop-filter eller med minska genomskinlighet */
  --glas-kant: rgba(255,255,255,.78);            /* tunn ljus kant */
  --glas-hojd: inset 0 1px 0 rgba(255,255,255,.9);   /* ljusreflex i överkanten */
  --glas-skugga: 0 1px 2px rgba(74,16,36,.05), 0 12px 32px rgba(110,24,53,.13);
  --glas-filter: blur(18px) saturate(1.6);
  --skugga-kort: var(--glas-hojd), inset 0 0 0 1px var(--glas-kant), var(--glas-skugga);
  /* krom = sidhuvudet och flikraden: vinrött glas med ljus text och guld även i ljust läge (det som gör temat vinrött) */
  --krom: rgba(92,18,44,.86); --krom-fast: #5c122c; --krom-text: #fff8fa; --krom-dampad: #ead3db; --krom-aktiv: #e7c88a; --krom-ikon: #f8b4c7;
  --krom-kant: rgba(255,255,255,.16); --krom-hojd: inset 0 1px 0 rgba(231,200,138,.22); --krom-knapp: #a3345a;
  --glas-botten: radial-gradient(120% 70% at 100% 0%, rgba(125,29,63,.09), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(217,178,122,.22), transparent 65%),
    linear-gradient(170deg, #fcf5f3 0%, #f6e8eb 45%, #f3e2e6 100%);
  /* det komponenterna läser: fasta färger som standard – glaset slås på i @supports nedan */
  --glas-kort-yta: var(--glas-fast-kort); --glas-tat-yta: var(--glas-fast-tat); --glas-pille-yta: var(--glas-fast-tat); --krom-yta: var(--krom-fast); --glas-filter-pa: none;
}
:root[data-tema="vinrod-glas"][data-theme="dark"] {
  --tema-rad: #1c0811;
  --bg: #1c0811;
  --pink: #3d1424; --pink2: #5a1f36; --rose: #a3345a; --rose-text: #f8b4c7; --brun: #8b5a3a; --brun-text: #ebc6a3; --rosa: #c73e70;
  --ink: #fbf1f4; --muted: #e6cfd6; --line: rgba(255,200,218,.16); --card: #2e0e1c; --surface: #2c0d1a; --on-ink: #1c0811;
  --grupp: #240a16; --hennes: #3d1424; --min-bubbla: #a3345a; --flik-av: #cdb6be; --platta: rgba(28,8,17,.9);
  --guld: #e7c88a; --guld-text: #e7c88a; --moln-text: #a9d0f5; --fara-text: #ffb0a8;   /* ljusare: mätt vid 20 % vitt foto */
  --ring: conic-gradient(from 200deg, #e7c88a, #f093ad, #a3345a, #e7c88a);
  --glas-kort: rgba(58,15,32,.62); --glas-tat: rgba(38,9,26,.82); --glas-pille: rgba(38,9,26,.72);
  --glas-fast-kort: #2e0e1c; --glas-fast-tat: #240a16;
  --glas-kant: rgba(255,214,228,.16);
  --glas-hojd: inset 0 1px 0 rgba(231,200,138,.16);   /* champagne i överkanten */
  --krom: rgba(38,9,26,.82); --krom-fast: #240a16; --krom-text: #fbf1f4; --krom-dampad: #cdb6be; --krom-kant: rgba(255,214,228,.16); --krom-hojd: inset 0 1px 0 rgba(231,200,138,.16);
  --glas-skugga: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.4);
  --glas-botten: radial-gradient(110% 60% at 0% 0%, rgba(176,48,94,.18), transparent 60%),
    radial-gradient(90% 55% at 100% 100%, rgba(176,48,94,.14), transparent 65%),
    radial-gradient(60% 40% at 90% 8%, rgba(217,178,122,.07), transparent 70%),
    linear-gradient(170deg, #33101e 0%, #1f0913 50%, #14050b 100%);
}
/* glaset: bara där webbläsaren klarar backdrop-filter … */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-tema="vinrod-glas"] { --glas-kort-yta: var(--glas-kort); --glas-tat-yta: var(--glas-tat); --glas-pille-yta: var(--glas-pille); --krom-yta: var(--krom); --glas-filter-pa: var(--glas-filter); }
}
/* … och inte när man bett om mindre genomskinlighet (systemet, eller html.minska-genomskinlighet i testerna) */
@media (prefers-reduced-transparency: reduce) {
  :root[data-tema="vinrod-glas"] { --glas-kort-yta: var(--glas-fast-kort); --glas-tat-yta: var(--glas-fast-tat); --glas-pille-yta: var(--glas-fast-tat); --krom-yta: var(--krom-fast); --glas-filter-pa: none; }
}
:root.minska-genomskinlighet[data-tema="vinrod-glas"] { --glas-kort-yta: var(--glas-fast-kort); --glas-tat-yta: var(--glas-fast-tat); --glas-pille-yta: var(--glas-fast-tat); --krom-yta: var(--krom-fast); --glas-filter-pa: none; }

/* --- 2. sidans botten: rödvinstoningen ligger still bakom bakgrundsbilderna (mosaiken z -2) när man rullar --- */
:root[data-tema="vinrod-glas"] body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--glas-botten); }
:where(:root[data-tema="vinrod-glas"]) :is(.inst-vy, .andra) { background: var(--glas-botten), var(--bg); }   /* helskärmsvyerna: samma botten */

/* --- 3. kort: frostat glas över sidans botten (kanter och val från grundreglerna står kvar) --- */
:where(:root[data-tema="vinrod-glas"]) :is(.k-kort, .kal, .traff, .nasta-traff, .k-grupp, .ruta, .admin-fall, .admin-person, .admin-rad, .kommentar) {
  background: var(--glas-kort-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); }
:where(:root[data-tema="vinrod-glas"]) :is(.kort a, .platslista a, .ljudlista figure) {
  background: var(--glas-kort-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); }
:where(:root[data-tema="vinrod-glas"]) :is(.kal, .traff, .nasta-traff, .ruta, .admin-fall, .admin-person) { box-shadow: var(--skugga-kort); }
:where(:root[data-tema="vinrod-glas"]) :is(.kort a, .platslista a) { box-shadow: var(--skugga-kort); }
:where(:root[data-tema="vinrod-glas"]) .k-grupp { box-shadow: var(--glas-hojd), inset 0 0 0 1px var(--glas-kant), 0 6px 18px rgba(74,16,36,.06); }

/* --- 4. sidhuvud, flikrad, menyer, blad och dialoger: tätare glas (läsbart även över ett helsvart eller helvitt foto) --- */
/* sidhuvudet: glaset ritas av ::before – .top själv får aldrig backdrop-filter (då fastnar flikraden i sidhuvudet) */
:root[data-tema="vinrod-glas"] .top::before { background: var(--krom-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); box-shadow: var(--krom-hojd); }
:where(:root[data-tema="vinrod-glas"]) .top { border-bottom-color: var(--krom-kant); color: var(--krom-text); }
:root[data-tema="vinrod-glas"] .top :is(.par, .sok-knapp, .install-knapp) { color: var(--krom-text); }
:root[data-tema="vinrod-glas"] .top .klocka__hjarta path { fill: var(--krom-ikon); }
:root[data-tema="vinrod-glas"] .top .klocka .klocka__antal, :root[data-tema="vinrod-glas"] .flikrad .k-marke { box-shadow: 0 0 0 2px var(--krom-fast); }
:root[data-tema="vinrod-glas"] .top :is(.sok-knapp, .install-knapp, .klocka, .topp-profil):active { background: rgba(255,255,255,.14); }
:root[data-tema="vinrod-glas"] .flikrad { background: var(--krom-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa);
  border-top-color: var(--krom-kant); box-shadow: var(--krom-hojd), 0 -8px 24px rgba(40,6,20,.12); }
:root[data-tema="vinrod-glas"] .flikrad-flik { color: var(--krom-dampad); }
:root[data-tema="vinrod-glas"] .flikrad-flik:focus-visible { outline-color: var(--krom-aktiv); }
:where(:root[data-tema="vinrod-glas"]) :is(.meny, .k-blad, .dlg, .inst-ark, .app-tips) {
  background: var(--glas-tat-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa);
  box-shadow: var(--glas-hojd), inset 0 0 0 1px var(--glas-kant), 0 18px 50px rgba(40,6,20,.28); }
/* en öppen <dialog> (dialogruta, Vi två-bladet, arken): oskärpan sitter på ::backdrop i stället för på rutan. backdrop-filter gör
   annars rutan till "containing block" för fasta barn – toasten som ui.js lägger i den öppna rutan hamnade inne i rutan eller
   nedanför skärmen. Rutan är fortfarande halvgenomskinlig och ligger över den suddiga sidan (tests/tema.test.js). */
:where(:root[data-tema="vinrod-glas"]) dialog:is(.k-blad, .dlg, .inst-ark) { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-tema="vinrod-glas"] dialog:is(.k-blad, .dlg, .inst-ark)::backdrop { -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); }
:where(:root[data-tema="vinrod-glas"]) :is(.andra-huvud, .inst-huvud, .andra-spara) {
  background: var(--glas-tat-yta); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa); }
/* runda knappar på minnets foto (‹, ⋯, ✎ Ändra): glaspiller i temats färg */
:where(:root[data-tema="vinrod-glas"]) :is(.andra-glasrund, .andra-glaspiller, .hjalte__tillbaka, .prickar) {
  background: var(--glas-pille-yta); color: var(--ink); -webkit-backdrop-filter: var(--glas-filter-pa); backdrop-filter: var(--glas-filter-pa);
  box-shadow: var(--glas-hojd), inset 0 0 0 1px var(--glas-kant), 0 4px 14px rgba(0,0,0,.2); }

/* röd text (fara, fel) i temats röda – klassiska #c43d3d/#b3261e räcker inte på glaset över ett svart foto */
:root[data-tema="vinrod-glas"] :is(.meny .fara, .andra-fara, .vitva-fel, .vitva-raknare--over, .admin-rad__varning, .admin-upp__hoppade, .knapp--fara-text) { color: var(--fara-text); }

/* --- 5. guld/champagne-accenter --- */
:root[data-tema="vinrod-glas"] .topp-profil :is(.av__bokstav, .av__bild) { box-shadow: 0 0 0 2px var(--krom-fast), 0 0 0 3.5px var(--guld); }
:root[data-tema="vinrod-glas"] .top .par__och { color: var(--krom-aktiv); }
:root[data-tema="vinrod-glas"] .flikrad-flik[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 3px 3px; background: var(--guld); }
:root[data-tema="vinrod-glas"] .flikrad-flik[aria-current="page"] { color: var(--krom-aktiv); }
:root[data-tema="vinrod-glas"] .flikrad-ny__knapp { background: var(--krom-knapp); box-shadow: inset 0 0 0 1px rgba(231,200,138,.6), inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(20,4,10,.35); }
:root[data-tema="vinrod-glas"] .vag__start { color: var(--brun-text); }   /* START på vägen: temats bruna (mätt mot den rosa botten) */
:root[data-tema="vinrod-glas"][data-theme="dark"] .top .meny .meny__rad .ikon { color: var(--guld); }
:where(:root[data-tema="vinrod-glas"]) .k-knapp { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(231,200,138,.35); }
:where(:root[data-tema="vinrod-glas"]) .k-knapp--sek { box-shadow: var(--glas-hojd), inset 0 0 0 1.5px var(--line); }

/* --- 6. temaväljaren i profilmenyn (header.js): "TEMA" och två val i EN låg rad som språkväljaren – gäller alla teman ---
   Granskningen 2026-10-14 (fynd 3): rubrik över två höga knappar med förhandsrutor tog 64 px och sköt ner Logga ut under menyns
   kant. Nu: rubriken till vänster (i linje med radernas ikoner), valen i ett piller som slutar där språkväljaren slutar, och en
   färgprick per tema (temats två huvudfärger). Ett nytt tema = en knapp till i pillret och en prick (.tema-prov--<id>). */
.meny__teman { display: flex; align-items: center; gap: 8px; margin: 4px 8px 6px; }
.meny__temarubrik { flex: 0 0 auto; margin: 0 4px; font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meny__temaval { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.meny .meny__temaknapp { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 2px 8px;
  border-radius: 99px; background: none; color: var(--ink); font: 600 12px/1.2 var(--sans); text-align: center; }
.meny .meny__temaknapp:hover, .meny .meny__temaknapp:focus-visible { background: var(--pink); }
.meny .meny__temaknapp[aria-pressed="true"], .meny .meny__temaknapp[aria-pressed="true"]:hover { background: var(--ink); color: var(--on-ink); }
:root[data-tema="vinrod-glas"] .meny .meny__temaknapp[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--guld); }
.meny .meny__temaknapp:focus-visible { outline: 3px solid var(--rose-text); outline-offset: 1px; }
.meny__temanamn { min-width: 0; overflow-wrap: break-word; }
:root:lang(th) .meny__temanamn { line-height: 1.45; }
.tema-prov { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.tema-prov--klassisk { background: linear-gradient(135deg, #fff 50%, #7d1d3f 50%); }
:root[data-theme="dark"] .tema-prov--klassisk { background: linear-gradient(135deg, #16101a 50%, #a3345a 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.tema-prov--vinrod-glas { background: linear-gradient(135deg, #5c122c 50%, #e2c27e 50%); }
:root[data-theme="dark"] .tema-prov--vinrod-glas { background: linear-gradient(135deg, #26091a 50%, #e7c88a 50%); box-shadow: inset 0 0 0 1px rgba(231,200,138,.5); }
/* profilmenyn (och ⚙-menyn) får gå ända ner till skärmens nederkant medan den är öppen – den ligger då över flikraden. Med
   temaväljaren rymdes annars inte Logga ut för Emma i iPhone-appen (fynd 3). Ryms den ändå inte (kort skärm, t.ex. Jocks Samsung)
   tonas nederkanten (.meny--mer, header.js kantPaMeny) så att man ser att menyn går att rulla – kanten försvinner längst ner. */
.top .meny--profil { max-height: calc(100vh - var(--topp-h) - env(safe-area-inset-bottom, 0px) - 16px); max-height: calc(100dvh - var(--topp-h) - env(safe-area-inset-bottom, 0px) - 16px); }
.top .meny--profil.meny--mer::after { content: ''; position: sticky; bottom: -6px; display: block; height: 44px; margin: -44px -6px 0; border-radius: 0 0 14px 14px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--meny-botten, var(--surface)) 80%); }
:root[data-tema="vinrod-glas"] .top .meny--profil { --meny-botten: var(--glas-fast-tat); }
/* ==== slut Tema: Vinröd glas ==== */