/* Stora tryckytor genom hela filen. Appen används enhänt, i rörelse, ibland
   med handskar i frysdisken. 56 px är golvet för allt man ska kunna träffa —
   Apples riktlinje säger 44, men den gäller en still hand. */

:root {
  --bg: #f6f3ec;
  --kort: #fffdf8;
  --text: #22201c;
  --svag: #6d675d;
  --gron: #1d3f2f;
  --gron-ljus: #2f6b4f;
  --gron-bg: #deefe2;
  --varning: #7a4a12;
  --varning-bg: #fdf0d8;
  --kant: #e2ddd1;
  --radie: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a;
    --kort: #1f2225;
    --text: #ece9e3;
    --svag: #9d978c;
    --gron: #7fc9a3;
    --gron-ljus: #9ad9ba;
    --gron-bg: #16281f;
    --varning: #f0c98a;
    --varning-bg: #38300f;
    --kant: #33373b;
  }
}

* { box-sizing: border-box; }

/* [hidden] måste vinna över komponenters egna display-regler. Utan detta visas
   t.ex. .varor-merge (display: flex) trots hidden-attributet — den satt kvar på
   startsidan. En regel som gäller alla, så fällan inte kan återuppstå. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- toppen ---------- */

#topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.5rem;
}

#topp h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; }
.topp-hoger { display: flex; align-items: center; gap: 0.6rem; }

/* ---------- färskhetsbanner ----------
   Den ska synas. Poängen är att en gammal lista INTE får se levande ut. */

.banner {
  margin: 0;
  padding: 0.7rem 1rem;
  background: var(--varning-bg);
  color: var(--varning);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* Kö-statusen: ren TRANSIENT feedback ("☁︎ N väntar på att skickas"),
   dyker upp och försvinner vid varje klick på en rad i korgen medan
   sändningen pågår. Fick tidigare bara [hidden]-växlas inline i header-
   flödet — det knuffade hela sidan vid varje avbockning (Jons fynd).
   position: fixed lyfter den ur dokumentflödet permanent: den kan visas
   och döljas hur ofta som helst utan att flytta en enda annan pixel. */
.ko {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 15;
  max-width: calc(100% - 2rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--kant);
  background: var(--kort);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
  color: var(--svag);
  white-space: nowrap;
}

/* ---------- lägg till ---------- */

/* Tilläggsfältet, förslagspanelen och dubblettsvaret bor i Planera-vyn (#browse)
   nu — de ska INTE ligga ovanpå Varor/Historik-vyernas fullskärms-overlay
   (z-index:10). Det gamla z-index:12-hacket (för det ihållande topp-fältet i
   v1/v2) tränger igenom overlayn och gjorde Varor trasig (Jon 2026-08-03). */
#lagg-till {
  position: relative;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.25rem;
}

#falt {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  color: var(--text);
  /* 16px är gränsen där iOS Safari slutar zooma in vid fokus. Zoomar den in
     hamnar listan utanför skärmen mitt i en butik. */
  font-size: 17px;
}

#falt:focus { outline: 2px solid var(--gron-ljus); outline-offset: 1px; }

/* Dubblettsvaret (samma element bär även "för långt namn" och "förslagen
   inte hämtade") hör hemma i flödet, direkt under fältet — men får ALDRIG
   flytta listan under sig. Platsen är därför ALLTID reserverad med
   min-height, oavsett om meddelandet just då syns. */
.dubblett {
  position: relative;
  margin: 0.25rem 1rem 0;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radie);
  background: var(--varning-bg);
  color: var(--varning);
  font-size: 0.9rem;
  min-height: calc(0.9rem * 1.45 + 1.2rem); /* radhöjd + toppa/botten-padding */
}
/* Den globala "[hidden] { display: none !important; }" (se ovan) skulle
   annars kollapsa den reserverade platsen till noll så fort attributet
   sätts. En regel med högre specificitet vinner över den: elementet stannar
   i flödet (display: block) men syns inte (visibility: hidden) — precis
   den reserverade-platsen-tekniken, inte en display-växling. */
.dubblett[hidden] {
  display: block !important;
  visibility: hidden;
}

.tom { margin: 3rem 1rem; text-align: center; color: var(--svag); }

/* ---------- knappar ---------- */

.knapp {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.knapp--primar {
  width: 56px;
  min-height: 56px;
  padding: 0;
  border-color: var(--gron);
  background: var(--gron);
  color: var(--bg);
  font-size: 1.6rem;
  line-height: 1;
}

.knapp--stor { display: inline-block; min-height: 56px; padding: 1rem 1.5rem; text-decoration: none; }

.lank {
  border: 0;
  background: none;
  color: var(--svag);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- listan ---------- */

main { padding: 0 1rem; }

main h2 {
  margin: 1.25rem 0 0.5rem;
  color: var(--svag);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

ul { margin: 0; padding: 0; list-style: none; }

.ikon { flex: none; width: 44px; height: 44px; object-fit: contain; }

/* ---------- listan som grid ----------
   Samma rutor som bläddringsvyn, grupperade under avdelningsrubrikerna. Stora
   tryckytor, enhänt bruk: hela rutan bockar av, det lilla × i hörnet tar bort. */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-cell { position: relative; display: flex; }

.list-ruta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  width: 100%;
  min-height: 6rem;
  padding: 0.7rem 0.35rem 0.6rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.list-ruta:active { background: var(--bg); }
.list-ruta:focus-visible { outline: 2px solid var(--gron-ljus); outline-offset: -2px; }
.list-ruta .ikon { width: 48px; height: 48px; }

.list-ruta-namn {
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.list-ruta-not {
  color: var(--svag);
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.list-ruta-moln { color: var(--svag); font-size: 0.85rem; }
.list-ruta-pris {
  color: var(--svag);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Korgsumma: en uppskattning, aldrig exaktare än underlaget. En subtil rad
   överst i listan — ingen tung box (den såg trasig ut, Jon 2026-08-03). */
.korgsumma {
  margin: 0.5rem 0.25rem 1rem;
  padding: 0;
  border: none;
  background: none;
  border-top: 1px solid var(--kant);
  padding-top: 0.75rem;
}
.korgsumma-tal { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.korgsumma-under { color: var(--svag); font-size: 0.82rem; }

/* Dubblettspärren: i stället för att tyst vägra ett tillägg pekas den
   befintliga raden ut (markeraBefintlig i app.js). Ramen tonar ut av sig
   själv — självstädande, ingen JS-timer behöver ta bort klassen igen. */
@keyframes lista-markera {
  from { box-shadow: 0 0 0 3px var(--gron-ljus); }
  to   { box-shadow: 0 0 0 3px transparent; }
}
.list-ruta--markerad { animation: lista-markera 1.6s ease-out; }

/* Avbockad ruta tonas ner men försvinner inte — man ska se vad man gjorde och
   kunna ångra med samma tryck. */
.list-ruta--kopt { opacity: 0.5; }
.list-ruta--kopt .list-ruta-namn { text-decoration: line-through; }
.list-ruta-bock {
  position: absolute;
  bottom: 0.3rem;
  left: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--gron);
  color: var(--bg);
  font-size: 0.85rem;
  line-height: 1;
}

/* Litet × i hörnet: ta bort utan att räknas som köpt. Tydligt skild från
   avbockningen — de gör olika saker. */
.list-ta-bort {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--svag);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.list-ta-bort:active { background: var(--bg); }

/* ---------- katalogvyn (#browse) ----------
   En egen plats i normalt dokumentflöde (routad via #lista/#browse-
   växlingen i ritaVy(), se app.js), INTE ett fullskärmsoverlay som
   Varor/Historik — den ersätter #lista rakt av i stället för att lägga sig
   ovanpå den. Fullbredd, samma sidopadding som resten av skalet. */
.browse { padding: 0 1rem; }

/* Läges-växeln: en tydlig segmenterad kontroll, Handla | Planera. */
.lage-vaxel {
  display: flex;
  gap: 0.25rem;
  margin: 0.75rem 0 1rem;
  padding: 0.25rem;
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
}
.lage-knapp {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border: none;
  border-radius: calc(var(--radie) - 0.25rem);
  background: transparent;
  color: var(--svag);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lage-knapp--vald {
  background: var(--gron);
  color: #fff;
}

/* ---------- inloggning ---------- */

body.logga-in { display: grid; min-height: 100vh; place-items: center; text-align: center; }
body.logga-in main { max-width: 22rem; padding: 2rem 1.5rem; }
body.logga-in h1 { margin: 0.5rem 0 0.25rem; }
.finstilt { color: var(--svag); font-size: 0.85rem; }

footer { margin-top: 2.5rem; text-align: center; }

/* ---------- förslag ---------- */

/* Panelen ligger i flödet, inte som overlay. En overlay hade täckt listan man
   just byggt, och på en telefon i en butik är det svårare att förstå vad som
   försvann än att scrolla en rad. */
/* Katalogen är HELA Planera-vyn sedan två-lägesväxeln (2026-08-03), inte en
   popover över listan. En egen ram med bakgrund inuti sidan blev en låda i
   lådan och åt upp bredd på mobilen (Jon: "det känns lite trångt"). Den flyter
   nu i sidan som listvyn gör. */
.forslag {
  position: relative;
  margin: 0;
}

.chips {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--kant);
}
.chips::-webkit-scrollbar { display: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}
.chip--vald {
  background: var(--gron);
  border-color: var(--gron);
  color: var(--bg);
  font-weight: 600;
}

.forslag-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Taket finns för att panelen aldrig ska äta hela skärmen. Åtta träffar är
     ungefär vad som får plats innan man ändå slutar läsa. */
  max-height: 22rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.forslag-rad + .forslag-rad { border-top: 1px solid var(--kant); }

.forslag-knapp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  padding: 0.5rem 0.85rem;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.forslag-knapp:active { background: var(--bg); }
.forslag-knapp:focus-visible { outline: 2px solid var(--gron-ljus); outline-offset: -2px; }

.forslag-namn { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Redan på listan döljs INTE, den märks. Att en vara försvinner ur förslagen
   ser ut som att appen glömt den. */
.forslag-marke {
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--varning-bg);
  color: var(--varning);
  font-size: 0.8rem;
  white-space: nowrap;
}
.forslag-rad--redan .forslag-namn { color: var(--svag); }

.forslag-tomt {
  margin: 0;
  padding: 1rem 0.85rem;
  color: var(--svag);
  font-size: 0.95rem;
}

/* ---------- bläddringsvyn: grid ----------
   Bläddring (kategoripiller utan söktext) visar en grid i stället för en lista,
   så att fler varor syns samtidigt och ikonerna får bära vyn. Sökträffar medan
   man skriver är fortfarande en lista — de två fallen ska inte blandas ihop.

   auto-fill + minmax ger 3–4 kolumner på en telefon (appen används mest där,
   enhänt) och fler på en bredare skärm, utan brytpunkter. Rutorna är stora
   tryckytor med flit: hellre färre kolumner än pyttesmå mål. */
.forslag-lista--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.6rem;
  padding: 0.9rem 1rem 1.5rem;
  /* INGEN max-height: scroll inuti scroll klippte sista raden mitt av och gjorde
     vyn trång. Sidan scrollar; pillerraden är sticky så man aldrig tappar den. */
  max-height: none;
  overflow: visible;
}

.forslag-cell { display: flex; }

.forslag-ruta {
  position: relative; /* för bock-märket */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  min-height: 5.75rem;
  padding: 0.7rem 0.35rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.forslag-ruta:active { background: var(--kort); }
.forslag-ruta:focus-visible { outline: 2px solid var(--gron-ljus); outline-offset: -2px; }

/* Ikonen stor — den är poängen med vyn. */
.forslag-ruta .ikon { width: 48px; height: 48px; }

.forslag-ruta-namn {
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Redan på listan: nedtonad ruta med en bock. Markeringen får aldrig försvinna
   — att se vad som redan ligger på listan är halva nyttan med bläddringsvyn. */
.forslag-ruta--redan { opacity: 0.5; }
.forslag-ruta-bock {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--gron);
  color: var(--bg);
  font-size: 0.85rem;
  line-height: 1;
}
/* ---------- Varor — familjens ordbok ---------- */

body.i-varor { overflow: hidden; }

.varor {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  padding: 0 1rem max(6rem, env(safe-area-inset-bottom));
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

.varor-topp {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--kant);
}
.varor-topp h2 { margin: 0; font-size: 1.2rem; }

.varor-sok {
  width: 100%;
  height: 52px;
  margin-top: 0.75rem;
  padding: 0 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  color: var(--text);
  font-size: 17px;
}
.varor-sok:focus { outline: 2px solid var(--gron-ljus); outline-offset: 1px; }

.varor-hjalp { margin: 0.5rem 0.25rem 0.75rem; }

.varor-lista { margin: 0; padding: 0; list-style: none; }

.varu-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  overflow: hidden;
}

.varu-kryss {
  flex: none;
  width: 48px;
  align-self: stretch;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--kant);
  background: none;
  cursor: pointer;
}
/* Den faktiska affordancen. En osynlig tryckyta utan kant eller ikon var
   inget en människa kunde se var en kryssruta — mätt i mörkt läge, där
   --kant (avsedd för subtila avdelare, inte kontroller) nästan försvinner
   mot --kort. Kanten använder --gron (samma accent som bocken och den fyllda
   "vald"-bakgrunden) med explicit bredd, så den syns i BÅDA färglägena —
   --gron är redan definierad med tillräcklig kontrast mot --kort/--bg i
   både ljust och mörkt läge (se :root och prefers-color-scheme: dark ovan). */
.varu-kryss-ruta {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gron);
  border-radius: 5px;
  color: var(--bg);
  font-size: 0.95rem;
  font-weight: 700;
}
.varu-kryss--vald .varu-kryss-ruta { background: var(--gron); }

.varu-knapp {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.varu-knapp .ikon { width: 40px; height: 40px; }
.varu-namn { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.varu-egen {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--svag);
  font-size: 0.72rem;
}

/* Detaljen fälls ut under raden och tar hela bredden. */
.varu-detalj {
  flex-basis: 100%;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--kant);
  background: var(--bg);
}

.varu-doprad { display: flex; gap: 0.5rem; }
.varu-dopfalt {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 0.85rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  color: var(--text);
  font-size: 17px;
}
.varu-dopfalt:focus { outline: 2px solid var(--gron-ljus); outline-offset: 1px; }

/* Fel vid döp-om/sammanslagning ("Namnet är upptaget" m.fl.) — EGET flytande
   element, skilt från #varor-tomt (den äkta "inga varor matchar sökningen").
   Samma antagonist som .dubblett/.ko: ett fel som visas i 4 sekunder får
   aldrig knuffa varor-listan. position: fixed, samma mönster som .ko. */
.varor-fel {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 15;
  max-width: calc(100% - 2rem);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radie);
  border: 1px solid var(--kant);
  background: var(--varning-bg);
  color: var(--varning);
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Sammanslagningsraden — sticky längst ner när flera varor är kryssade.
   Två rader: chipsen (VILKA varor, radbryter vid behov) ovanför kontrollerna
   (målnamn + knappar). Chipsen kom till efter Jons fynd: baren sa "4 varor"
   med bara tre synliga kryss — det fjärde valet var gjort under en tidigare
   sökning och osynligt tills det redan följt med i sammanslagningen. */
.varor-merge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  background: var(--kort);
  border-top: 1px solid var(--kant);
}
.varor-merge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.varor-merge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--gron);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.varor-merge-chip-x { color: var(--svag); font-size: 1rem; line-height: 1; }
.varor-merge-kontroller { display: flex; align-items: center; gap: 0.5rem; }
.varor-merge-antal { flex: none; font-weight: 700; white-space: nowrap; }
.varor-merge-mal {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 0.85rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
}
.knapp--primar-text {
  border-color: var(--gron);
  background: var(--gron);
  color: var(--bg);
}

.varor-andringar { margin: 1.5rem 0.25rem; }
.varor-andringar h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.varor-not { margin: 0 0 0.75rem; }
.varor-andringar-lista { margin: 0; padding: 0; list-style: none; }

.varu-andring {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--kant);
}
.varu-andring-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.95rem; }
.varu-angra { flex: none; }

/* ---------- prislinje (Varor-detalj, function 4) ---------- */
.varu-pris { margin-top: 0.75rem; }
.varu-pris-siffror { font-size: 0.95rem; color: var(--text); }
.varu-pris-siffror b { font-weight: 700; }
.varu-pris-senast { margin: 0.35rem 0 0; color: var(--svag); font-size: 0.85rem; }
.varu-pris-tom { color: var(--svag); font-size: 0.9rem; }
.prislinje { display: block; width: 100%; height: 44px; margin-top: 0.5rem; overflow: visible; }
.prislinje-band {
  fill: none;
  stroke: var(--gron-ljus);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.prislinje-rea { stroke: var(--varning); stroke-width: 1.5; opacity: 0.65; }

/* ---------- Historik — vad vi handlade senast ---------- */

body.i-historik { overflow: hidden; }

.historik {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  padding: 0 1rem max(6rem, env(safe-area-inset-bottom));
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

.historik-topp {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--kant);
}
.historik-topp h2 { margin: 0; font-size: 1.2rem; }

/* Ålder ärligt: bara synlig när datan är gammal (samma varningsfärg som
   färskhetsbannern), annars tyst. */
.historik-alder {
  margin: 0.75rem 0.25rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radie);
  background: var(--varning-bg);
  color: var(--varning);
}

.historik-lista { margin: 0.75rem 0 0; padding: 0; list-style: none; }

.hist-kort {
  margin-bottom: 0.6rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  background: var(--kort);
  overflow: hidden;
}

.hist-kort-huvud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  padding: 0.6rem 0.9rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hist-kort-rubrik { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hist-kort-datum { font-weight: 700; }
.hist-kort-butik { font-size: 0.85rem; }
.hist-kort-summa {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ikon-grid: varorna som bilder, poängen med vyn. Många ryms samtidigt. */
.hist-ikoner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: 0.35rem;
  padding: 0 0.9rem 0.9rem;
}
.hist-ikon-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.hist-ikon-cell .ikon { width: 40px; height: 40px; }
.hist-antal {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--gron);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hist-rea-prick {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--varning);
}
/* Samma mekanik som rea-prickens, i motsatt hörn — en rad kan vara BÅDE
   rea och eko samtidigt, och prickarna får aldrig krocka. */
.hist-eko-prick {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--gron);
}

/* Radlistan när ett kort fällts ut. */
.hist-rader {
  margin: 0;
  padding: 0 0.9rem 0.6rem;
  list-style: none;
  border-top: 1px solid var(--kant);
}
.hist-rad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--kant);
}
.hist-rad:last-child { border-bottom: 0; }
.hist-rad .ikon { flex: none; width: 32px; height: 32px; }
.hist-rad-namn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hist-rad-rea {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--varning-bg);
  color: var(--varning);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Samma piller-mekanik och typografi som rea, grön ton. */
.hist-rad-eko {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--gron-bg);
  color: var(--gron);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hist-rad-pris {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hist-rad-pris--rea { color: var(--varning); font-weight: 700; }

/* Sök-pillret: samma form som en kategori men markerat som ett eget läge, så
   det syns direkt VAD raden nedanför visar. Ett tryck rensar sökningen. */
.chip--sok { font-variant-numeric: tabular-nums; }

/* Sökrutans töm-knapp. Hylsan gör att knappen kan ligga ovanpå fältets
   högerkant utan att ändra fältets bredd eller knuffa +-knappen. */
.falt-hylsa { position: relative; flex: 1; min-width: 0; display: flex; }
.falt-hylsa #falt { flex: 1; padding-right: 3rem; }
.falt-rensa {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--svag);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.falt-rensa:active { background: var(--kant); }

/* Reamärket på en listruta. Villkoret ("3 för 28 kr") står i texten — ett
   styckpris utan villkor ser ut som en lögn i hyllan. */
.list-ruta-rea {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--varning);
  background: var(--varning-bg);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Pris på en katalogruta. Tom från start och fylls i när svaret kommer —
   därför min-height, så griden inte hoppar när priserna droppar in. */
.forslag-ruta-pris {
  min-height: 1rem;
  font-size: 0.7rem;
  color: var(--svag);
  font-variant-numeric: tabular-nums;
}
.forslag-ruta-pris--rea {
  color: var(--varning);
  font-weight: 700;
}

/* Jämförpriset (kr/kg, kr/l) under styckpriset. Tunt med flit — det är
   svaret på "är det dyrt?", inte det man betalar i kassan. */
.forslag-ruta-jamfor {
  font-size: 0.62rem;
  color: var(--svag);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}