/* Självhostade typsnitt — egna kopior i Värdekollens static, inga anrop
 * till Google och ingen sökväg in i Pekunias statiska filer. */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+2215;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020-20AB;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+2215;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020-20AB;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/EBGaramond-Regular.ttf') format('truetype');
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/EBGaramond-Bold.ttf') format('truetype');
}

/* Värdekollens formspråk.
 *
 * Samma hand som Pekunia — färgtema, knappar, kort, rundningar — men en
 * EGEN fil. Tokens och komponentmönster är kopierade ur Pekunias
 * new-design.css och theme-warm.css, inte importerade: projekten delar
 * process och databas med ingenting, och då ska de inte dela en stilfil
 * heller. En kopia kan drifta isär; en delad import hade skapat precis den
 * koppling vi bestämde att inte ha.
 *
 * Här finns ingen Pekunia-logotyp och inget Pekunia-namn. Värdekollen är
 * ett eget varumärke.
 */

:root {
  /* Färg — samma palett som Pekunias varma tema */
  --white: #ffffff;
  --paper: #fbf6ea;
  --cream: #f2ebe1;
  --sand: #e9dfd5;
  --cocoa: #46321c;
  --cocoa-900: #2a1c0e;
  --cocoa-950: #1b1208;
  --gold: #cda765;
  --gold-text: #704a1a;
  --gold-djup: #a87a26;
  --line: color-mix(in srgb, var(--cocoa) 16%, transparent);
  --line-2: color-mix(in srgb, var(--cocoa) 28%, transparent);
  --dampad: #6b5a45;
  /* Foten ar dampad MEN juridisk. #786751 ger 5,05:1 mot pappret —
     tydligt tystare an --dampad (6,14:1) och anda val over 4,5:1.
     Gomd text duger inte som friskrivning. */
  --fot: #786751;
  --gron: #2b7349;         /* 4.90:1 mot --gron-bg, matt */
  --gron-bg: #e3f0e7;
  --amber: #8a6415;
  --amber-bg: #fdf3de;
  --rod: #a33c2c;
  --rod-bg: #f8e3df;

  /* Typografi — serif i rubriker, sans i brödtext, som Pekunia */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-body: 1rem;
  --fs-lg: 1.25rem;
  --lh-tight: 1.2;

  /* Mått */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --radie: 14px;
  --radie-liten: 10px;
  --btn-h: 48px;
  --control-y: 13px;
  --control-x: 22px;

  --bakgrund: var(--paper);
  --text: var(--cocoa);
  --kort: var(--white);
  --skugga: 0 1px 2px rgba(70, 50, 28, .06), 0 8px 24px rgba(70, 50, 28, .06);

  /* ── Mörka lägets värden ──────────────────────────────────────────
     Bor HÄR, en gång, och plockas upp av de två mappningarna längre
     ner. Ändra en färg och båda lägena följer med.

     Emil 2026-09-17 ville ljust och mörkt som följer Android. Det
     gjorde appen redan — men mätningen visade att mörka läget bara
     överstyrde märkenas BAKGRUNDER, inte deras textfärger. Grönt,
     amber och rött låg på 2,3–2,7:1 mot sina egna rutor, alltså långt
     under WCAG:s 4,5:1. Därför finns --m-gron/-amber/-rod här nu. */
  --m-bakgrund: #171208;
  --m-text:     #f2e9da;
  --m-kort:     #221a0f;
  --m-dampad:   #b6a68e;
  --m-fot:      #9e8e76;   /* 5,85:1 mot --m-bakgrund (--m-dampad: 7,84:1) */
  --m-gold-text:#e0bd7f;
  --m-gron:     #46ae71;   /* 4.80:1 mot --m-gron-bg  (var 2.65:1) */
  --m-gron-bg:  #1d3427;
  --m-amber:    #c28e24;   /* 4.89:1 mot --m-amber-bg (var 2.66:1) */
  --m-amber-bg: #34290f;
  --m-rod:      #d17d70;   /* 4.91:1 mot --m-rod-bg   (var 2.31:1) */
  --m-rod-bg:   #3a201b;
}

/* ── Tema ──────────────────────────────────────────────────────────────
   Tre lägen: system (förval), ljust och mörkt. Systemet styr via
   prefers-color-scheme; ett eget val skriver över det med data-tema på
   <html>, satt av en liten upplösare i sidhuvudet innan stilmallen
   hinner måla. Valet sparas per användare på servern.

   De två blocken nedan har AVSIKTLIGT identiska deklarationer — CSS kan
   inte dela ett block mellan ett mediavillkor och en attributväljare.
   Färgvärdena finns bara i :root ovan, så det som upprepas är mappningen.
   tests/tema_detektor.py vaktar att de två listorna håller ihop. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]):not([data-tema="morkt"]) {
    --bakgrund: var(--m-bakgrund);
    --text: var(--m-text);
    --kort: var(--m-kort);
    --line: color-mix(in srgb, var(--m-text) 14%, transparent);
    --line-2: color-mix(in srgb, var(--m-text) 26%, transparent);
    --dampad: var(--m-dampad);
    --fot: var(--m-fot);
    --gold-text: var(--m-gold-text);
    --gron: var(--m-gron);
    --gron-bg: var(--m-gron-bg);
    --amber: var(--m-amber);
    --amber-bg: var(--m-amber-bg);
    --rod: var(--m-rod);
    --rod-bg: var(--m-rod-bg);
    --skugga: none;
  }
}

:root[data-tema="morkt"] {
  --bakgrund: var(--m-bakgrund);
  --text: var(--m-text);
  --kort: var(--m-kort);
  --line: color-mix(in srgb, var(--m-text) 14%, transparent);
  --line-2: color-mix(in srgb, var(--m-text) 26%, transparent);
  --dampad: var(--m-dampad);
  --fot: var(--m-fot);
  --gold-text: var(--m-gold-text);
  --gron: var(--m-gron);
  --gron-bg: var(--m-gron-bg);
  --amber: var(--m-amber);
  --amber-bg: var(--m-amber-bg);
  --rod: var(--m-rod);
  --rod-bg: var(--m-rod-bg);
  --skugga: none;
}

/* Talar om for plattformen vilket lage som galler, sa inbyggda kontroller,
   rullningslister och overscroll far ratt ton. */
:root { color-scheme: light dark; }
:root[data-tema="ljust"] { color-scheme: light; }
:root[data-tema="morkt"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bakgrund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

/* ── Systemytorna ─────────────────────────────────────────────────────────
   Android 15 och 16 tvingar kant-till-kant for allt som targetar API 35+,
   och vi targetar 36. Webbvyn ritar alltsa BAKOM statusraden och
   gestfaltet, och appen maste sjalv halla sig undan.

   FALLAN, och den kostade tid 2026-09-17: `env(safe-area-inset-top)`
   racker pa iOS men INTE pa Android. Dar speglar den bara display-cutout,
   inte statusraden. Vi hade env() pa plats, viewport-fit=cover satt och
   WebView 151 — och innehallet lag anda under klockan och batteriet.

   Darfor tva kallor, och den storsta vinner:
     env(safe-area-inset-*)     riktig pa iOS och for cutouts
     var(--systemtopp/-botten)  satts av JS i appen, och exakt av
                                appskalet nar insets-lyssnaren finns
   Pa webben ar bada noll och ingenting reserveras. */
:root { --systemtopp: 0px; --systembotten: 0px; }

/* Egen toppbar (Emil 2026-09-17: "Gar det satta en egen bar langst upp?").
   Fast langst upp, fylld med appens bakgrund, med systemytan som egen
   padding — sa statusradens ikoner alltid ligger pa var yta och aldrig pa
   var text. */
.toppbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--bakgrund);
  border-bottom: 1px solid var(--line);
  padding-top: max(env(safe-area-inset-top, 0px), var(--systemtopp));
}
/* Market bredvid ordmarket (Emil 2026-09-18). Klassen heter `logotyp`
   och inte `marke` — `.marke` ar redan osakerhetsmarket i resultatkortet,
   och tva betydelser pa samma klassnamn blir fel nagon gang.

   Raden har redan tva element som tavlar om bredden. Varumarket far
   krympa och kvoten behalla sin plats: kvoten baar information, ordmarket
   ar dekor pa en skarm dar det ar trangt. */
.varumarke {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 0; flex: 0 1 auto;
}
.logotyp { width: 28px; height: 28px; flex: none; display: block; }
/* Loggan hålls in för granskarens ruta — inga markeringar, ingen
   bildmeny och ingen rullning som avbryter trycket. */
.varumarke--hall { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.varumarke--hall img { -webkit-user-drag: none; pointer-events: none; }
.toppbar-rad .kvotrad { flex: none; }
.toppbar-rad .ordmarke {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 340px) { .toppbar-rad .ordmarke { display: none; } }

.toppbar-rad {
  max-width: 600px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 56px;
  padding:
    var(--space-2)
    calc(var(--space-4) + env(safe-area-inset-right, 0px))
    var(--space-2)
    calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
/* Liggande pa telefon: baren far inte ata upp en tredjedel av hojden. */
@media (orientation: landscape) and (max-height: 520px) {
  .toppbar-rad { min-height: 44px; }
  .har-toppbar .omslag {
    padding-top: calc(44px + var(--space-4) * 2 + var(--space-2)
                      + max(env(safe-area-inset-top, 0px), var(--systemtopp)));
  }
}

.omslag {
  max-width: 600px;
  margin: 0 auto;
  /* Toppbarens hojd skjuter ner innehallet. Nedtill lika viktigt:
     bottennavigationen kommer, och utan reserverad yta hamnar den under
     gestfaltet med exakt samma fel. */
  padding:
    calc(var(--space-6) + max(env(safe-area-inset-top, 0px), var(--systemtopp)))
    calc(var(--space-4) + env(safe-area-inset-right, 0px))
    calc(var(--space-8) + max(env(safe-area-inset-bottom, 0px), var(--systembotten)))
    calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
/* Nar toppbaren ar pa skjuts innehallet ner under den, och rubrikraden i
   flodet doljs — samma uppgifter ska inte sta pa tva stallen. */
.har-toppbar .omslag {
  padding-top: calc(56px + var(--space-4) * 2 + var(--space-4)
                    + max(env(safe-area-inset-top, 0px), var(--systemtopp)));
}
.har-toppbar .topp { display: none; }

/* ── Sidhuvud ─────────────────────────────────────────────────────────── */
.topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.ordmarke {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.015em; margin: 0; color: var(--text);
}
.ordmarke span { color: var(--gold-text); }

/* ── Kort ─────────────────────────────────────────────────────────────── */
.kort {
  background: var(--kort);
  border: 1px solid var(--line);
  border-radius: var(--radie);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--skugga);
}
.kort > :first-child { margin-top: 0; }
.kort > :last-child { margin-bottom: 0; }
.kort-rubrik {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600;
  margin: 0 0 var(--space-3);
}

/* ── Knappar — samma form som Pekunias .btn ───────────────────────────── */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.01em; line-height: var(--lh-tight);
  min-height: var(--btn-h);
  padding: var(--control-y) var(--control-x);
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--gold); color: var(--cocoa-900);
  cursor: pointer; width: 100%;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.knapp:hover { background: color-mix(in srgb, var(--gold) 88%, var(--white)); }
.knapp:disabled { opacity: .5; cursor: default; }
.knapp--sekundar {
  background: transparent; color: var(--text); border-color: var(--line-2);
}
.knapp--sekundar:hover { background: color-mix(in srgb, var(--sand) 50%, transparent); }
/* Ikon i en knapp. Samma SVG-stil som menyn: arver `color`, sa den
   foljer knappens text i bada temalagena utan en egen regel. */
/* Ikonen tar 18 px plus 8 px luft. Med den inne bröts "Fota föremålet"
   över tva rader och knapparna blev olika höga. Knapptexten far darfor
   krympa nagra procent i en tva-knappars rad i stallet for att brytas —
   en knapp som ar hogre an sin granne ser ut som ett fel. */
/* MATT: knappen ar 163 px bred i en tva-knappars rad pa 411 px skarm.
   Med 22 px padding at varje hall och ikonens 26 px aterstod 93 px till
   texten — och "Fota foremalet" behover ~98. Darfor bröts den. Mindre
   sidopadding ger 113 px och en rad. */
.rad .knapp {
  /* En rad, aldrig tva. Bryts texten blir knapparna OLIKA hoga — vilket
     ser ut som ett fel — och det ar varre an en aning mindre text.
     13 px och 12 px sidopadding ger "Ladda upp bild" plats i de 163 px
     en knapp far i en tvaknappsrad pa 411 px skarm. */
  font-size: var(--fs-xs);
  padding-left: 12px; padding-right: 12px;
  white-space: nowrap;
}
.knapp .ikon { display: inline-flex; margin-right: 8px; flex: none; }
.knapp .ikon svg { width: 18px; height: 18px; display: block; }
.knapp--auto { width: auto; }
.knapp--liten { min-height: 38px; padding: 8px 16px; font-size: var(--fs-xs); }

/* ── Fält ─────────────────────────────────────────────────────────────── */
/* Tonvaljaren i annonsvyn ska se ut som falten, inte som ett rat
   OS-element. color-scheme pa :root gor att den inbyggda pilen och
   listan foljer temat. */
select {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--text);
  background: var(--kort); border: 1px solid var(--line-2);
  border-radius: 999px; min-height: var(--btn-h);
  padding: var(--control-y) var(--control-x); flex: 1;
}
select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

input[type=text], input[type=email] {
  width: 100%; padding: var(--control-y) var(--space-4);
  border: 1px solid var(--line-2); border-radius: var(--radie-liten);
  background: var(--bakgrund); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body);
}
input[type=text]:focus, input[type=email]:focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset: 1px; border-color: var(--gold);
}

.filknapp {
  display: block; border: 1.5px dashed var(--line-2);
  border-radius: var(--radie); padding: var(--space-7) var(--space-4);
  text-align: center; color: var(--dampad); cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.filknapp:hover { border-color: var(--gold); background: color-mix(in srgb, var(--sand) 40%, transparent); }

/* ── Småting ──────────────────────────────────────────────────────────── */
.dampad { color: var(--dampad); }
.liten { font-size: var(--fs-sm); }
.dold { display: none !important; }
.rad { display: flex; gap: var(--space-3); align-items: center; }
.rad--bryt { flex-wrap: wrap; }

.marke {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
}
.marke--low { background: var(--gron-bg); color: var(--gron); }
.marke--medium { background: var(--amber-bg); color: var(--amber); }
.marke--high { background: var(--rod-bg); color: var(--rod); }

.varde {
  font-family: var(--serif); font-size: 2.25rem; font-weight: 600;
  letter-spacing: -0.02em; margin: var(--space-3) 0 var(--space-1);
}

.fel {
  background: var(--rod-bg); color: var(--rod);
  padding: var(--space-3) var(--space-4); border-radius: var(--radie-liten);
  font-size: var(--fs-sm);
}

.miniatyr {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: var(--radie-liten); border: 1px solid var(--line);
}

/* Resultatkortet med foto överst, i full kortbredd.
   Kortet har vågrät padding, så bilden måste dras ut lika mycket på båda
   sidor för att nå kanten. Kortets egna rundade hörn klipper bilden
   (overflow: hidden), så vi slipper hålla två radievärden i synk.
   Höjden är LÅST till 4:3 och bilden beskärs — annars hoppar kortet i höjd
   beroende på om fotot är stående eller liggande, och ett stående
   telefonfoto (3:4) skulle trycka ner priset under vikningen. */
.kort--foto { padding-top: 0; overflow: hidden; }
.resultatfoto {
  display: block;
  width: calc(100% + var(--space-5) * 2);
  margin: 0 calc(var(--space-5) * -1) var(--space-5);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--line);
}
/* Reserv för webbvyer utan aspect-ratio (Android WebView < 88). */
@supports not (aspect-ratio: 1 / 1) {
  .resultatfoto { height: 210px; }
}

.kvotrad { font-size: var(--fs-sm); color: var(--dampad); white-space: nowrap; }

table.pris { width: 100%; border-collapse: collapse; }
table.pris th, table.pris td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); }
table.pris th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--dampad); font-weight: 600;
}
table.pris td.belopp { font-weight: 700; white-space: nowrap; font-family: var(--serif); }

ul.lista { list-style: none; padding: 0; margin: 0; }
ul.lista li {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
ul.lista li:last-child { border-bottom: 0; }
/* Beloppet far aldrig brytas mellan siffran och "kr". */
ul.lista li strong { white-space: nowrap; }

.nivarad {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.nivarad:last-child { border-bottom: 0; }

.steg { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.steg:last-child { margin-bottom: 0; }
.steg__nr {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: var(--cocoa-900);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
}

.snurra {
  width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--cocoa-900) 25%, transparent);
  border-top-color: var(--cocoa-900); border-radius: 50%;
  animation: vk-snurr .8s linear infinite;
}
@keyframes vk-snurr { to { transform: rotate(360deg); } }

/* Friskrivningen. Emil 2026-09-18: mindre, mer subtil och centrerad — en
   fot, inte en ruta som tavlar med innehallet. Den har ocksa en juridisk
   uppgift, sa den far dampas men aldrig gommas: egen ton med matt
   kontrast, egen radhojd, och en maxbredd sa raderna blir lasbara i
   stallet for att spanna hela skarmen. */
.fot {
  color: var(--fot);
  font-size: 0.75rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  max-width: 34rem;
  margin: var(--space-7) auto 0;
}

/* ── Kompletteringar ──────────────────────────────────────────────────────
   Rutan i resultatkortet dar modellen far be om det den saknar. Avskild
   med en linje och en egen ton sa den lases som en inbjudan och inte som
   ett formular man MASTE fylla i — de flesta varderingar visar den aldrig. */
.kompl {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.kompl-falt { margin-bottom: var(--space-4); }
.kompl-falt label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  margin-bottom: var(--space-1);
}
.kompl-falt .varfor {
  display: block; font-size: var(--fs-xs); color: var(--dampad);
  margin-bottom: var(--space-2);
}

/* ── Prisjämförelse ───────────────────────────────────────────────────────
   Nypris och värdeminskning under huvudsiffran. Dämpad med avsikt:
   begagnatpriset är det kunden ska agera på, nypriset är referens. */
.prisjmf {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--dampad);
}
.prisjmf .minskning { font-weight: 700; }
.prisjmf .haller { color: var(--gron); font-weight: 700; }
.prisjmf .notis {
  display: block; margin-top: var(--space-1); color: var(--gold-text);
}

/* ── Säljbeskrivningar ────────────────────────────────────────────────── */
.flikar { gap: var(--space-2); margin-bottom: var(--space-5); }
.annonsfalt { margin-bottom: var(--space-5); }
.annonsfalt .etikett {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dampad);
  margin-bottom: var(--space-2);
}
.annonsfalt .text {
  white-space: pre-wrap; background: var(--bakgrund);
  border: 1px solid var(--line); border-radius: var(--radie-liten);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-sm);
  line-height: 1.5;
}
.kopiera {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  font: inherit; font-size: var(--fs-xs); font-weight: 700;
  color: var(--gold-text); text-transform: none; letter-spacing: 0;
}

/* ── Modal ────────────────────────────────────────────────────────────────
   Nivamodalen, men avsiktligt generellt namngiven — anledningen kommer
   utifran och fler fall ar pa vag (annonspublicering kraver betalande
   konto). Ingen kvot-specifik text eller klass har.

   Suddningen: `backdrop-filter` har ojamnt stod och ar tung pa aldre
   enheter. Darfor ligger en DAMPANDE TON alltid under suddningen, aldrig i
   stallet for den. Utan tonen lyser innehallet bakom igenom och
   modaltexten blir svarlast — sarskilt i ljust lage dar bakgrunden ar nara
   vit. Med tonen fungerar modalen aven nar suddningen inte gor det. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  /* Centrerad i hojdled (Emil 2026-09-17). Lag forst som bottenark, vilket
     gjorde att overkanten borjade 45 % ner och underkanten gick rakt in i
     menyn. Systemytorna ligger som padding HAR, pa behallaren, inte pa
     ytan — da centreras modalen i den yta som faktiskt syns, inte i
     skarmen, och kan aldrig hamna under statusraden eller menyn. */
  display: flex; align-items: center; justify-content: center;
  padding:
    calc(var(--space-4) + max(env(safe-area-inset-top, 0px), var(--systemtopp)))
    calc(var(--space-4) + env(safe-area-inset-right, 0px))
    calc(var(--space-4) + max(env(safe-area-inset-bottom, 0px), var(--systembotten)))
    calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
/* Fonden ar DEKOR och far aldrig vara en tryckyta.
   `pointer-events: none` tar bort den ur traffprovningen helt — bade ur
   DOM:ens och ur kompositorns. En heltackande yta med `backdrop-filter`
   befordras till ett eget kompositorlager, och ett sadant lager kan i
   Android WebView fa en traffregion som tacker hela sin yta och sluka
   tryck som malas OVANPA den. Det syns inte i en skrivbordswebblasare,
   vilket ar precis monstret Emil ser: suddningen ritas perfekt, men
   ingenting gar att trycka pa. Stangningen vid tryck utanfor ligger
   darfor pa behallaren i stallet, se app.html. */
.modal-fond {
  position: absolute; inset: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--cocoa-950) 62%, transparent);
}
@supports (backdrop-filter: blur(2px)) {
  .modal-fond {
    background: color-mix(in srgb, var(--cocoa-950) 42%, transparent);
    backdrop-filter: blur(10px) saturate(85%);
    -webkit-backdrop-filter: blur(10px) saturate(85%);
  }
}
.modal-yta {
  position: relative; z-index: 1;
  width: 100%; max-width: 600px;
  /* Behallaren har redan dragit av systemytorna i sin padding, sa 100 %
     ar har den yta som syns. */
  max-height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Kolumn sa krysset far en egen rad hogst upp i stallet for att flyta
     ovanpa rubriken. Float lade det i textflodet och rubriken radbrot
     under det — matt 2026-09-17, syntes direkt i skarmbilden. */
  display: flex; flex-direction: column;
  background: var(--kort);
  border: 1px solid var(--line);
  /* Alla fyra horn nu nar den star fritt i mitten. */
  border-radius: var(--radie);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .38);
  animation: modalUpp .22s ease;
}
/* Vaxer fram i stallet for att aka upp — en ruta i mitten ska inte se ut
   som ett bottenark som glider in. */
@keyframes modalUpp {
  from { transform: scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .modal-yta { animation: none; } }
/* Systemytorna ligger pa behallaren, inte har — modalen ror aldrig
   skarmkanten langre, sa innehallet behover bara sin egen luft. */
.modal-innehall {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-5) var(--space-6);
}
/* Krysset i en cirkel uppe till hoger, pa egen rad hogst upp. */
.modal-stang {
  position: sticky; z-index: 2; align-self: flex-end; flex: none;
  top: var(--space-4);
  margin: var(--space-4) var(--space-4) calc(var(--space-2) * -1) 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bakgrund); color: var(--text);
  border: 1px solid var(--line-2);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal-stang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Rullning bakom modalen lases. */
body.modal-oppen { overflow: hidden; }

/* Prisknapparna i nivaraden: "125 kr/mån" radbrots till tva rader i den
   smala kolumnen. Priset ar det man laser forst — det far inte brytas. */
.nivarad button[data-niva] { white-space: nowrap; }

/* Kvoten i toppbaren ar klickbar — vagen till nivaerna utan att bli
   stoppad. Ser ut som text, beter sig som en knapp. */
.kvotknapp {
  background: none; border: none; padding: 4px 2px; margin: 0;
  font: inherit; cursor: pointer; text-align: right;
  color: var(--dampad); text-decoration: underline;
  text-decoration-color: var(--line-2); text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.kvotknapp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Bottennavigation ─────────────────────────────────────────────────────
   Formen ar matt ur Pekunias egen bottenmeny (_case_shared_js.html:
   56 px hog rad, ikon over etikett, 54x54 mittencirkel med 3 px ring som
   bryter over kanten med -30 px). Fargerna kommer daremot ur vk.css —
   Pekunias hardkodade hexvarden (#f5ebdc, #8a6d3b) blir osynliga i vart
   morka lage.

   Fem platser med avsikt (Emil 2026-09-17): "gor den knappen disabled sa
   det fortfarande ar 5 stycken. Sa kameran kan hamna i mitten". Kameran
   maste ha lika manga flikar pa varje sida, annars sitter cirkeln snett —
   och positionen ska inte flytta den dag marknadsplatsen aktiveras. */
.bottennav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; overflow: visible;
  background: var(--kort);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--systembotten));
}
.navflik {
  flex: 1; min-width: 0; overflow: visible;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  min-height: 56px; padding: 8px 2px 6px;
  background: none; border: none; cursor: pointer;
  color: var(--dampad); font: inherit; font-size: 11px;
  -webkit-tap-highlight-color: transparent;
}
.navflik .ikon { font-size: 20px; line-height: 1; }
.navflik .etikett {
  /* 10 px i stallet for 11: "Varderingar" ar elva tecken och ska rymmas
     i en femtedels skarm utan att klippas. Mätt pa 411 px bredd. */
  font-size: 10px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.navflik--aktiv { color: var(--gold-text); }
.navflik--aktiv .etikett { font-weight: 800; }
.navflik:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* Mittenknappen: upphojd cirkel som bryter over menyns overkant.
   Ikonen ar en SVG och inte ett tecken (Emil 2026-09-18: "en kamera-ikon
   istallet"). Det finns ingen kamera i de teckensnitt vi kan lita pa, och
   emoji-kameran ritas i farg pa Android — vilket bryter mot resten av
   menyn. SVG:n arver `color`, sa den ar morkt brun pa guldet i bada
   temalagena utan en enda extra regel. */
.navflik--mitt .ikon svg { width: 30px; height: 30px; display: block; }
/* 62 px (var 54). Storre utan att tranga etiketterna: menyn ar 72 px hog,
   cirkeln skjuter upp 34 px over kanten och lamnar kvar 28 px till ikon
   och etikett — matt, inte gissat. */
.navflik--mitt .ikon {
  width: 62px; height: 62px; margin-top: -34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--cocoa-900);
  background: linear-gradient(135deg, var(--gold-djup), var(--gold));
  border-radius: 50%; border: 3px solid var(--kort);
  box-shadow: 0 4px 12px rgba(160, 124, 69, .45), 0 2px 6px rgba(0, 0, 0, .18);
}
.navflik--mitt .etikett { margin-top: 2px; color: var(--gold-text); font-weight: 700; }

/* Inaktiverad flik. Syns, men gar inte att anvanda — och det ska synas
   ATT det ar avsiktligt, annars ser det ut som en bugg. */
.navflik[disabled] {
  cursor: default; opacity: .45;
}
.navflik[disabled] .etikett::after {
  content: attr(data-snart);   /* oversatt i mallen, se app.html */
  display: block; font-size: 9px; font-weight: 500;
  line-height: 1.3; letter-spacing: .02em; opacity: .7;
}
.navflik[disabled]:focus-visible { outline: none; }

/* ── Toast ────────────────────────────────────────────────────────────
   Emil 2026-09-18: "Gor om alla felmeddelanden till toasts". Den gamla
   felrutan lag kvar i flodet tills sidan laddades om, och syntes pa flera
   flikar samtidigt langt efter att forsoket gjorts.

   Lagret ligger pa z-index 200, alltsa OVER modalen (100). Det ar poangen:
   i stallet for att valja ratt ruta att skriva i — vilket var precis det
   som gick fel i gar — finns det ett enda stalle som alltid syns.

   Sjalva lagret tar inga tryck; bara toasterna gor det. Annars hade en
   osynlig remsa over menyn slukat tryck pa navflikarna. */
.toastar {
  position: fixed; left: 0; right: 0; z-index: 200;
  bottom: calc(var(--space-4)
               + max(env(safe-area-inset-bottom, 0px), var(--systembotten)));
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  padding: 0 calc(var(--space-4) + env(safe-area-inset-left, 0px));
  pointer-events: none;
}
/* Ovanfor menyn nar den finns. */
.har-bottennav .toastar {
  bottom: calc(72px + var(--space-4)
               + max(env(safe-area-inset-bottom, 0px), var(--systembotten)));
}
.toast {
  pointer-events: auto;
  width: 100%; max-width: 460px;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  /* Samma yta som korten — det paret ar redan kontrastmatt. Felfargen
     ligger som en kant, aldrig i texten, sa vi inte infor ett nytt
     fargpar att halla efter. */
  background: var(--kort); color: var(--text);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radie-liten);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  font-size: var(--fs-sm); line-height: 1.45;
  animation: toastIn .18s ease;
}
.toast--fel { border-left-color: var(--rod); }
.toast--info { border-left-color: var(--gold); }
.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__stang {
  flex: none; width: 28px; height: 28px; margin: -2px -2px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--dampad); font: inherit; font-size: 1.1rem; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.toast__stang:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.toast--slocknar { animation: toastUt .22s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes toastUt { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast--slocknar { animation: none; }
}

/* ── Forhandsgranskning fore vardering ────────────────────────────────
   Emil 2026-09-18: "Gor ocksa en storre bild i full bredd som
   forhandsgranskas innan man valjer vardera."

   SAMMA BESKARNING som resultatkortets foto (4/3, object-fit: cover).
   Det ar avsiktligt: annars hoppar kortet i hojd mellan ett staende och
   ett liggande foto, och knappen under flyttar sig under fingret. */
.forhands {
  margin: 0 0 var(--space-4);
  position: relative;
}
.forhands img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radie-liten);
  background: var(--sand);
}
.forhands-knappar {
  display: flex; gap: var(--space-2); justify-content: center;
  margin-top: var(--space-2);
}
.forhands-knappar .knapp { width: auto; flex: 0 1 auto; }

/* ── Vagen i bakgrunden ───────────────────────────────────────────────
   Emil 2026-09-18: samma vag som pa splashen, genom hela appen.

   FAST MOT VYNS BOTTEN, inte mot dokumentet. Rullar den med innehallet
   skar den mitt i en lista nagonstans, och det ser ut som ett fel snarare
   an som en bakgrund.

   z-index -1 lagger den bakom kortens bakgrunder men over sidans egen
   farg. Den tar inga tryck. Opaciteten skiljer sig mellan lagena: mot
   kramvitt syns guld nastan inte, mot nastan svart syns det direkt.
   Talen ar satta sa att texten OVANPA behaller sin uppmatta kontrast —
   se tests/tema_detektor.py. */
.vag {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
  height: min(42vh, 380px);
  background: url('vag.svg') bottom center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: .30;
}
:root[data-tema="morkt"] .vag { opacity: .22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]):not([data-tema="morkt"]) .vag { opacity: .22; }
}
/* En som helst slipper rorelse och dekor slipper ocksa den har. */
@media (prefers-reduced-transparency: reduce) { .vag { display: none; } }

/* ── Listan over varderingar ──────────────────────────────────────────
   Emil 2026-09-18: raderna ska ga att trycka pa, ha en liten bild till
   vanster, och se ut som nagot. Forut var det en punktlista med titel och
   pris, och ett ensamt streck dar vardet saknades — vilket sag ut som ett
   fel snarare an som ett arligt "vi kunde inte satta ett varde". */
.postlista { list-style: none; margin: 0; padding: 0; }
.post {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.postlista li:last-child .post { border-bottom: 0; }
.post:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.post__bild {
  flex: none; width: 48px; height: 48px; border-radius: var(--radie-liten);
  object-fit: cover; background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Platshallare nar fotot ar gallrat eller aldrig fanns. Ingen bruten
   bild-ikon — en lugn ruta med ett litet motiv. */
.post__bild--tom {
  border: 1px dashed var(--line-2); background: none;
  color: var(--dampad); font-size: 18px;
}
.post__text { flex: 1 1 auto; min-width: 0; }
.post__rubrik {
  display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post__under {
  display: block; font-size: var(--fs-xs); color: var(--dampad);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post__varde { flex: none; text-align: right; }
.post__varde strong { display: block; white-space: nowrap; }
/* Saknat varde ar ett BESKED, inte ett streck. */
.post__utan {
  display: block; font-size: var(--fs-xs); color: var(--dampad);
  font-style: italic; white-space: nowrap;
}
.post__pil { flex: none; color: var(--dampad); font-size: 18px; }

/* Papperskorgen. Nas fran listan, for det ar dar man slangde. */
.korglank {
  display: block; width: 100%; margin-top: var(--space-4);
  background: none; border: 0; padding: var(--space-2);
  color: var(--dampad); font: inherit; font-size: var(--fs-xs);
  text-align: center; cursor: pointer; text-decoration: underline;
}
.korgnotis {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs); color: var(--dampad);
}

/* Plats for menyn langst ner i innehallet. */
.har-bottennav .omslag {
  padding-bottom: calc(72px + var(--space-6)
                       + max(env(safe-area-inset-bottom, 0px), var(--systembotten)));
}
/* Modalen halls fri fran menyn av behallarens egen padding, se `.modal`. */

/* Texten till vanster i nivaraden far radbrytas. Med butikens pris
   ("125,00 kr/mån" i StoreKit) och "12,50 SEK per föremål" pa en rad
   (.kvotrad ar nowrap) trycktes prisknappen ut over modalens kant pa en
   iPhone 16 Pro Max — uppmatt 2026-10-25 i 440 pt bredd. */
.nivarad > div:first-child { min-width: 0; flex: 1 1 auto; }
.nivarad .kvotrad { white-space: normal; }
.nivarad button[data-niva] { flex: none; }

/* "Drivs av Pekunia.se" under ansvarsraden. Tatt mot den, med
   varumarkets guldton pa namnet. */
.fot.drivs-av { margin-top: var(--space-2); }
.fot.drivs-av a { color: var(--gold-text); font-weight: 600; text-decoration: none; }
.fot.drivs-av a:hover, .fot.drivs-av a:focus-visible { text-decoration: underline; }

/* ── Flera bilder (2026-10-27) ────────────────────────────────────────
   Miniatyrrad under huvudbilden. Visas forst vid tva bilder; med en bild
   racker den stora forhandsvisningen. */
.bildrad {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
}
.bildrad__post { position: relative; }
.bildrad__bild {
  display: block; width: 100%; padding: 0; border: 2px solid transparent;
  border-radius: var(--radie-liten); background: none; cursor: pointer;
  overflow: hidden;
}
.bildrad__post--huvud .bildrad__bild { border-color: var(--gold); cursor: default; }
.bildrad__bild img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--sand);
}
.bildrad__bort {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(30, 22, 12, .72); color: #fff; font-size: 18px;
  line-height: 28px; text-align: center; cursor: pointer; padding: 0;
}
.bildtips {
  margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--dampad);
  text-align: center; text-wrap: balance;
}
.bildtips .lanknapp {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer;
}

/* Etikett ovanfor ett valfalt (sprak och vardering, 2026-10-27). */
.falt-etikett { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
#vy-sprak select { width: 100%; }