/* Säljportalen: gemensam stil för alla sidor, i två lägen.
   Ljust läge (standard) och mörkt läge (:root[data-lage="morkt"], satt av public/lage.js innan sidan ritas).
   Företagets färger kommer som --marke-* från varumarke.json (public/utseende.mjs); --bas är accenten i båda
   lägena, i mörkt läge den ljusa varianten --marke-bas-lys. Kontrasten för varje par kollas i test/utseende.test.mjs.
   Typsnitt: Geist och Geist Mono (OFL 1.1, public/typsnitt/), lokala filer, aldrig från nätet. */

@font-face {
  font-family: "Geist";
  src: url("/typsnitt/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/typsnitt/geist-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Företagets färger (standard = varumarke.json) */
  --bas: var(--marke-bas, #d81b60);
  --accent: var(--marke-accent, #ff6a14);
  --text: var(--marke-text, #1a1a1a);
  --pa-bas: #ffffff;

  /* Ytor och text */
  --yta: #ffffff;
  --yta-2: #f7f8fa;
  --sida: #f7f8fa;
  --falt-yta: #ffffff;
  --text-svag: #5b6271;
  --platshallare: #6b7280;
  --kant: #e6e8ec;
  --kant-falt: #8a919d;
  --rad: #f0f2f5;
  --sidhuvud: rgba(255, 255, 255, 0.92);

  /* Lägen */
  --fel: #b42318;
  --fel-yta: #fef3f2;
  --fara: #b42318;
  --ok: #166534;
  --ok-yta: #ecfdf3;
  --info-yta: #f3f6fb;
  --vanta: #854d0e;
  --vanta-yta: #fef9ec;

  /* Skuggor och sken */
  --skugga: 0 1px 2px rgba(16, 24, 40, 0.05);
  --skugga-hog: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -8px rgba(16, 24, 40, 0.14);
  --knapp-skugga: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 24, 40, 0.14);
  --fokus-sken: color-mix(in srgb, var(--bas) 28%, transparent);
  --sken: 0;

  /* Form och mått */
  --typsnitt: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --falt-text: max(16px, 1rem);
  --radie-kort: 12px;
  --radie-knapp: 8px;
  --radie-falt: 8px;
  --tryck: 48px;
  --sidbredd: 36rem;
  --mellan: 1rem;
  --mjuk: cubic-bezier(0.2, 0.7, 0.3, 1);
  --tangentbord: 0px;

  color-scheme: light;
}

/* Mörkt läge: samma system, bara färgerna och skenet skiljer. Bara på skärmen, utskrift är alltid ljus. */
@media screen {
  :root[data-lage="morkt"] {
    --bas: var(--marke-bas-lys, #e8447f);
    --text: #e8eaef;
    --pa-bas: #0a0c10;

    --yta: #12151b;
    --yta-2: #181c24;
    --sida: #0a0c10;
    --falt-yta: #0d1015;
    --text-svag: #a1a9b8;
    --platshallare: #7d8595;
    --kant: #252a35;
    --kant-falt: #5c6577;
    --rad: #1c212b;
    --sidhuvud: rgba(10, 12, 16, 0.86);

    --fel: #ff8a80;
    --fel-yta: #2a1414;
    --fara: #b4231a;
    --ok: #6ee7a0;
    --ok-yta: #0f2419;
    --info-yta: #161b25;
    --vanta: #fcd34d;
    --vanta-yta: #2a2110;

    --skugga: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    --skugga-hog: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 24px 60px -12px rgba(0, 0, 0, 0.6);
    --knapp-skugga: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 18px -4px color-mix(in srgb, var(--bas) 55%, transparent);
    --fokus-sken: color-mix(in srgb, var(--bas) 45%, transparent);
    --sken: 1;

    color-scheme: dark;
  }
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Alla fält minst 16 px, annars zoomar iPhone in när man trycker i dem (även dolda fält och väljare). */
input, select, textarea { font-size: var(--falt-text); }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-bottom: 7rem; /* fältet man skriver i hamnar ovanför knappraden */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--sida);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  font-family: var(--typsnitt);
  font-size: 0.875rem; /* 14 px, samma som länkarna i menyn */
  line-height: 1.5;
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; font-weight: 600; letter-spacing: -0.018em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 0.75rem; max-width: 65ch; }

a { color: var(--bas); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--bas);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* Bara för skärmläsare */
.dold-lasbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hoppa till innehållet (syns när man tabbar) */
.hoppa {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--yta); color: var(--bas); padding: 0.75rem 1rem;
  border-radius: var(--radie-knapp); font-weight: 600;
}
.hoppa:focus { top: 1rem; }

/* Antal i Geist Mono (telefon och siffror: admin.css, saljare.css, statistik.css) */
.antal { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- Sidhuvud ---------- */
.sidhuvud {
  position: relative;
  z-index: 30;
  background: var(--sidhuvud);
  color: var(--text);
  border-bottom: 1px solid var(--kant);
  padding-top: env(safe-area-inset-top, 0px);
}
html[data-sprak="en"]:not(.sprak-klar) body { visibility: hidden; }
.sidhuvud-inre {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.875rem max(1.25rem, env(safe-area-inset-right, 0px)) 0.875rem max(1.25rem, env(safe-area-inset-left, 0px));
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sidhuvud-konto { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sidhuvud-marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: max-content;
  max-width: min(12rem, 100%);
  min-width: 0;
}
.logga {
  height: 2.25rem;
  width: auto;
  max-width: 100%;
  aspect-ratio: 447 / 128;
  object-fit: contain;
  border-radius: 0;
}
:root[data-lage="morkt"] .logga { background: none; padding: 0; }
@media screen {
  :root[data-lage="morkt"] .verktyg-meny { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
}
.sidhuvud-namn {
  margin: -5px 0 0 28.64%;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  color: var(--text-svag);
}
.sidhuvud-namn:empty { display: none; }

/* Väljaren Ljust / Mörkt / Som enheten sitter kvar för skriptet, men syns inte.
   Ikonerna i sidhuvudet öppnar samma val. */
.lage-val {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.huvud-verktyg { display: inline-flex; align-items: center; gap: 0.125rem; }
.verktyg { position: relative; }
.verktyg-knapp {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tryck); min-height: var(--tryck); padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer;
  box-shadow: none; text-decoration: none;
}
.verktyg-tips {
  position: absolute; top: calc(100% + 0.35rem); left: 50%; z-index: 50;
  transform: translateX(-50%);
  padding: 0.3rem 0.55rem; border-radius: 0.45rem;
  background: var(--text); color: var(--sida);
  font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  pointer-events: none; opacity: 0;
}
.verktyg-knapp:focus-visible .verktyg-tips { opacity: 1; }
.verktyg-ikon { width: 1.125rem; height: 1.125rem; }
.verktyg-knapp[aria-expanded="true"] { background: var(--rad); }
.verktyg-meny {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 40;
  min-width: 9.5rem; margin: 0; padding: 0.35rem;
  background: var(--yta); color: var(--text);
  border: 1px solid var(--kant); border-radius: 0.75rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.verktyg-val {
  display: block; width: 100%; margin: 0; padding: 0.5rem 0.75rem;
  border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--text);
  font: inherit; font-size: 0.875rem; font-weight: 500;
  text-align: left; cursor: pointer;
}
.verktyg-val[aria-checked="true"] { background: var(--rad); }
.verktyg-val:hover { background: var(--yta-2); }
.verktyg-val[aria-checked="true"]:hover { background: var(--rad); }
.lage-val select {
  min-height: var(--tryck);
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie-knapp);
  background-color: var(--yta);
  color: var(--text);
  font: inherit;
  font-size: var(--falt-text);  /* minst 16 px, annars zoomar iPhone */
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Pilen ritas med två toningar i --text-svag, så den följer läget utan egen bild */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-svag) 50%), linear-gradient(135deg, var(--text-svag) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 52%, calc(100% - 0.8125rem) 52%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  box-shadow: var(--skugga);
}

/* ---------- Sidan ---------- */
.sida {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.saknad-sida {
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.saknad {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  border-top: 4px solid var(--bas);
  box-shadow: var(--skugga-hog);
}
.saknad-marke { display: flex; flex-direction: column; align-items: center; }
.saknad .logga { height: 5rem; width: auto; max-width: 100%; }
.saknad-logga {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tryck); text-decoration: none;
}
.saknad-namn {
  margin: 0.15rem 0 0;
  font-weight: 600; font-size: 0.75rem; line-height: 1.15; color: var(--text-svag);
}
.saknad h1 { margin: 0.25rem 0 0; }
.saknad-text { margin: 0; max-width: 28rem; }
.saknad-knappar { justify-content: center; }
.ingress { color: var(--text-svag); font-size: 0.875rem; margin-bottom: 1.25rem; }

/* Fotot överst i formuläret (dekor). Mobilen 16:9, datorn ett brett band. width/height i HTML: sidan hoppar inte. */
.toppbild { position: relative; background: var(--yta-2); overflow: hidden; }
.toppbild img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: cover; object-position: 50% 62%; }
.toppbild::after {
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--sida)); pointer-events: none;
}
@media screen {
  :root[data-lage="morkt"] .toppbild img { filter: brightness(0.78) saturate(0.9); }
}
@media print { .toppbild { display: none; } }
.sidfot {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 0 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  color: var(--text-svag);
  font-size: 0.875rem;
}
.sidfot a { display: inline-flex; align-items: center; min-height: var(--tryck); }

/* ---------- Kort ---------- */
.kort {
  background: var(--yta);
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
  padding: 1.25rem;
  box-shadow: var(--skugga);
}
.kort + .kort { margin-top: var(--mellan); }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tryck);
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radie-knapp);
  background: var(--bas);
  color: var(--pa-bas);
  box-shadow: var(--knapp-skugga);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms var(--mjuk), filter 120ms var(--mjuk);
}
.knapp:active { transform: scale(0.98); filter: brightness(0.9); }
.knapp--bred { width: 100%; min-height: 48px; }
.knapp--andra { background: var(--yta); color: var(--text); border-color: var(--kant); box-shadow: var(--skugga); }
.knapp--fara { background: var(--fara); color: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14); }
.knapp[disabled], .knapp[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }

/* Skickar: en ring som snurrar före texten */
.knapp[aria-busy="true"] { cursor: progress; }
.knapp[aria-busy="true"]::before {
  content: "";
  width: 1.1em; height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: snurra 700ms linear infinite;
}
@keyframes snurra { to { transform: rotate(360deg); } }

/* ---------- Fält ---------- */
.grupp { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.grupp-rubrik { font-weight: 650; font-size: 1.0625rem; padding: 0; margin: 0 0 0.25rem; }
.grupp-text { color: var(--text-svag); font-size: 0.875rem; margin-bottom: 1rem; }

.falt { display: grid; gap: 0.375rem; margin-bottom: 1rem; }
.falt:last-child { margin-bottom: 0; }
.falt-etikett { font-weight: 500; font-size: 0.875rem; }
.falt-hjalp { color: var(--text-svag); font-size: 0.875rem; margin: 0; }

.falt-in {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--kant-falt);
  border-radius: var(--radie-falt);
  background: var(--falt-yta);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font: inherit;
  font-size: var(--falt-text);
  line-height: 1.4;
  transition: border-color 120ms var(--mjuk), box-shadow 120ms var(--mjuk);
}
.falt-in::placeholder { color: var(--platshallare); opacity: 1; }
textarea.falt-in { min-height: 7.5rem; resize: vertical; }
.falt-in:focus,
.falt-in:focus-visible { outline: none; border-color: var(--kant-falt); box-shadow: none; }
.falt-in[aria-invalid="true"] { border: 2px solid var(--fel); padding: calc(0.625rem - 1px) calc(0.75rem - 1px); }
.falt-in[readonly] { background: var(--yta-2); }

/* Felet står under fältet, med ett utropstecken så att det inte bara är färgen som säger det */
.falt-fel {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--fel);
  font-weight: 550;
  font-size: 0.875rem;
  margin: 0;
}
.falt-fel::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--fel);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
}
.falt-fel:empty { display: none; }

/* Kryssruta: hela raden är tryckyta */
.kryss {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  min-height: 48px;
  padding: 0.75rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie-falt);
  background: var(--yta-2);
  cursor: pointer;
}
.kryss input {
  width: 1.5rem; height: 1.5rem;
  margin: 0;
  accent-color: var(--bas);
  cursor: pointer;
}
.kryss-text { font-size: 0.875rem; }
.kryss:has(input[aria-invalid="true"]) { border: 2px solid var(--fel); padding: calc(0.75rem - 1px); }
.kryss + .falt-fel { margin-top: 0.5rem; }

/* Honungsfältet: människor ser det inte, bottar fyller i det */
.honung { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Knappraden längst ner i formuläret ---------- */
/* Klistrar mot skärmens nederkant. --tangentbord sätts av formular.js när tangentbordet
   är uppe på iPhone, så att knappen ligger precis ovanför det. */
.skicka-rad {
  position: sticky;
  bottom: var(--tangentbord);
  z-index: 2;
  margin: 1.25rem -1.25rem -1.25rem;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--yta);
  border-top: 1px solid var(--kant);
  border-radius: 0 0 var(--radie-kort) var(--radie-kort);
}
.skicka-rad .falt-hjalp { margin-top: 0.5rem; text-align: center; }

/* ---------- Meddelanden ---------- */
.meddelande {
  border-radius: var(--radie-falt);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--bas);
  background: var(--info-yta);
  color: var(--text);
}
.meddelande:empty { display: none; }
.meddelande--fel { border-left-color: var(--fel); background: var(--fel-yta); color: var(--fel); font-weight: 550; }
.meddelande--ok { border-left-color: var(--ok); background: var(--ok-yta); color: var(--ok); }
.meddelande--vanta { border-left-color: #eab308; background: var(--vanta-yta); color: var(--vanta); font-weight: 550; }

/* ---------- Tack ---------- */
.tack { text-align: center; padding: 2rem 1.25rem; }
.tack p { margin-left: auto; margin-right: auto; }
.tack-bock { width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; display: block; }
.tack-bock circle { fill: var(--ok-yta); stroke: var(--ok); stroke-width: 3; }
.tack-bock path {
  fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: rita 420ms var(--mjuk) 120ms forwards;
}
@keyframes rita { to { stroke-dashoffset: 0; } }
.tack h1:focus { outline: none; }

/* ---------- Statusetiketter (färgerna = STATUSAR i public/rules.mjs) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--status-bakgrund, var(--rad));
  color: var(--status-text, var(--text));
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 50%;
  background: var(--status-farg, var(--kant-falt));
}
.status--ny          { --status-farg: #2563eb; --status-bakgrund: #dbeafe; --status-text: #1e40af; }
.status--kontaktad   { --status-farg: #7c3aed; --status-bakgrund: #ede9fe; --status-text: #5b21b6; }
.status--pa_gang     { --status-farg: #eab308; --status-bakgrund: #fef3c7; --status-text: #854d0e; }
.status--mote_bokat  { --status-farg: #ea580c; --status-bakgrund: #ffedd5; --status-text: #9a3412; }
.status--gatt_vidare { --status-farg: #16a34a; --status-bakgrund: #dcfce7; --status-text: #166534; }
.status--skickat     { --status-farg: #16a34a; --status-bakgrund: #dcfce7; --status-text: #166534; }
.status--blev_kund   { --status-farg: #15803d; --status-bakgrund: #bbf7d0; --status-text: #14532d; }
.status--tackat_nej  { --status-farg: #dc2626; --status-bakgrund: #fee2e2; --status-text: #991b1b; }
.status--svarar_inte { --status-farg: #6b7280; --status-bakgrund: #e5e7eb; --status-text: #374151; }
/* Blev kund: en bock i stället för pricken, så att den skiljer sig från Gått vidare även utan färg */
.status--blev_kund::before {
  content: "✓"; width: auto; height: auto; background: none; box-shadow: none;
  font-weight: 700; color: var(--status-text);
}

/* Mörkt läge: mörk ton, ljus text och en prick som lyser (samma ordning och betydelse som STATUSAR) */
@media screen {
  :root[data-lage="morkt"] .status--ny          { --status-bakgrund: #12224a; --status-text: #a9c4ff; --status-linje: #2a4a96; }
  :root[data-lage="morkt"] .status--kontaktad   { --status-bakgrund: #231a45; --status-text: #cdb8ff; --status-linje: #4c3790; }
  :root[data-lage="morkt"] .status--pa_gang     { --status-bakgrund: #2e2509; --status-text: #fde68a; --status-linje: #6b5512; }
  :root[data-lage="morkt"] .status--mote_bokat  { --status-bakgrund: #321809; --status-text: #fdba8c; --status-linje: #7a3812; }
  :root[data-lage="morkt"] .status--gatt_vidare { --status-bakgrund: #0d2a19; --status-text: #86efac; --status-linje: #1d6b3c; }
  :root[data-lage="morkt"] .status--skickat     { --status-bakgrund: #0d2a19; --status-text: #86efac; --status-linje: #1d6b3c; }
  :root[data-lage="morkt"] .status--blev_kund   { --status-bakgrund: #0b3a1f; --status-text: #bbf7d0; --status-linje: #22a355; }
  :root[data-lage="morkt"] .status--tackat_nej  { --status-bakgrund: #34131a; --status-text: #fca5a5; --status-linje: #7f1d1d; }
  :root[data-lage="morkt"] .status--svarar_inte { --status-bakgrund: #1d2129; --status-text: #c7ccd6; --status-linje: #454c5a; }
  :root[data-lage="morkt"] .status { border-color: var(--status-linje, var(--kant)); }
  :root[data-lage="morkt"] .status::before { box-shadow: 0 0 8px 1px var(--status-farg, transparent); }
  :root[data-lage="morkt"] .status--blev_kund::before { box-shadow: none; text-shadow: 0 0 8px var(--status-farg); }
}

/* ---------- Tabell ---------- */
.tabell-ram {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--yta);
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
}
.tabell { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabell th, .tabell td { text-align: left; padding: 0.75rem 1rem; vertical-align: top; }
.tabell th {
  position: sticky; top: 0;
  background: var(--yta);
  color: var(--text-svag);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}
.tabell td { font-size: 0.875rem; }
.tabell tbody tr + tr td { border-top: 1px solid var(--rad); }
.tabell .tal { text-align: right; }

/* På smala skärmar blir varje rad ett litet kort (td får data-etikett="Telefon" osv.) */
@media (max-width: 40rem) {
  .tabell--stapla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabell--stapla, .tabell--stapla tbody, .tabell--stapla tr, .tabell--stapla td { display: block; }
  .tabell--stapla tr { padding: 0.75rem 1rem; }
  .tabell--stapla tbody tr + tr { border-top: 1px solid var(--kant); }
  .tabell--stapla tbody tr + tr td { border-top: 0; }
  .tabell--stapla td { padding: 0.25rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
  .tabell--stapla td::before { content: attr(data-etikett); color: var(--text-svag); font-size: 0.875rem; }
  .tabell--stapla .tal { text-align: left; }
}

/* ---------- Tomt läge ---------- */
.tomt {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
  background: var(--yta);
}
.tomt-bild { display: block; width: 8rem; height: auto; aspect-ratio: 1; margin: 0 auto 1rem; }
.tomt-rubrik { font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.25rem; }
.tomt-text { color: var(--text-svag); margin: 0 auto 1rem; }

/* ---------- Integritetssidan ---------- */
.text-sida h2 { margin-top: 1.75rem; }
.text-sida ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.text-sida li { margin-bottom: 0.375rem; }
.lista-par { display: grid; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.lista-par > div { border-left: 3px solid var(--kant); padding-left: 0.75rem; }
.lista-par dt { font-weight: 600; }
.lista-par dd { margin: 0; color: var(--text-svag); }

/* ---------- Större skärmar ---------- */
@media (min-width: 48rem) {
  h1 { font-size: 2rem; }
  .sida { padding-top: 2.5rem; }
  .kort { padding: 2rem; }
  .skicka-rad { margin: 1.5rem -2rem -2rem; padding: 1rem 2rem 1.25rem; }
}

/* ---------- Mus ---------- */
@media (hover: hover) and (pointer: fine) {
  .knapp:hover { filter: brightness(1.08); }
  .knapp--andra:hover { background: var(--yta-2); filter: none; }
  :root[data-lage="morkt"] .knapp:hover { filter: brightness(1.12); }
  .lage-val select:hover { border-color: var(--kant-falt); }
  .verktyg-knapp:hover { background: var(--rad); }
  .verktyg-knapp:hover .verktyg-tips { opacity: 1; }
  a:hover { text-decoration-thickness: 2px; }
}

/* ---------- Mörkt läge: ett svagt blått sken överst ---------- */
@media screen {
  :root[data-lage="morkt"] body {
    background: radial-gradient(1200px 520px at 50% -220px, color-mix(in srgb, var(--bas) 12%, transparent), transparent 70%) no-repeat, var(--sida);
  }
}

/* ---------- Utskrift: alltid ljust ---------- */
@media print {
  :root { color-scheme: light; }
  body { background: #ffffff; color: #000000; }
}

/* ---------- Mindre rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .knapp[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .tack-bock path { stroke-dashoffset: 0; }
}