/* ============================================================================
   VINDEX VEDLIKEHOLDSFRITT — stilark
   ----------------------------------------------------------------------------
   Mobilførst. Fargepaletten er henta frå Vindex sin posisjon: norskprodusert
   PVC utvikla og testa i havgapet på Hustadvika. Difor sjø/skifer som base,
   varm sand som aksent, og kvitt som "produktfarge" (PVC-kvit).

   Strukturen er delt i:
     1. Designtokens          6. Kort og rutenett
     2. Grunnstil             7. Skjema og konfigurator
     3. Topbar/navigasjon     8. Seljarverktøy (tabell, pipeline, merkelappar)
     4. Knappar               9. Botnfelt
     5. Seksjonar/hero       10. Hjelpeklassar + utskrift
   ============================================================================ */

/* Oswald er display-fonten i det mørke temaet: kondensert, laga for
   versalar, og med ein fallback (Arial Narrow) som held same rytme.
   Source Serif og Inter held fram i salsverktøyet. */
@import url('skrifter.css?v=be346f1f');

/* ---------- 1. Designtokens ---------- */
:root {
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-alt: #eaeff0;
  --ink: #14262e;            /* skifer — brødtekst */
  --muted: #55666d;         /* 5.2:1 mot --surface-alt; #5c7078 låg på 4.48 */
  --primary: #10495a;        /* djup sjøblå — hovudaksent */
  --primary-dark: #0a3341;
  --primary-soft: #e2edf0;
  --accent: #b8862f;         /* varm sand/messing — CTA og highlight */
  --accent-soft: #f7eeda;
  --accent-tekst: #8a6317;   /* messing som held 4.5:1 som småtekst på lys botn */
  --good: #1d7a5f;
  --good-soft: #dcefe7;
  --warn: #a4671b;
  --warn-soft: #f8eeda;
  --bad: #a5322b;
  --bad-soft: #f7e3e1;
  --border: #d7e0e2;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(20, 38, 46, 0.07);
  --shadow-md: 0 14px 34px rgba(20, 38, 46, 0.16);
  --maxw: 1120px;
  /* Overskriftsfargen. I mørkt tema er den kremkvit; i lyst er den den same
     skifera som brødteksten. Same variabel, så display-typografien treng ikkje
     vite kva tema den står i. */
  --krem: #14262e;
  font-size: 16px;
}

/* ---------- 2. Grunnstil ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Respekter systeminnstillinga for redusert rørsle. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }

h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; color: var(--primary-dark); text-wrap: balance; margin: 0 0 0.5rem; overflow-wrap: break-word; }
h1 { font-size: 2rem; line-height: 1.18; font-weight: 700; }
h2 { font-size: 1.5rem; line-height: 1.25; margin-top: 0; }
h3 { font-size: 1.1rem; font-family: "Inter", sans-serif; font-weight: 700; color: var(--ink); }
p, li, dd, td { margin: 0.5rem 0; overflow-wrap: break-word; }
p { margin: 0.5rem 0; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 60ch; }
.hint { color: var(--muted); font-size: 0.9rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.78rem;
  font-weight: 700; color: var(--accent-tekst); margin: 0 0 0.5rem;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.1rem; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.1rem; }

@media (min-width: 800px) {
  h1 { font-size: 2.9rem; }
  h2 { font-size: 2rem; }
}

/* ---------- 3. Topbar / navigasjon ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0.7rem 1.1rem;
  display: flex; align-items: center; gap: 1rem;
}
/* Logoen ligg i to utgåver. Ordmerket har svart skugge og eit svart
   VEDLIKEHOLDSFRITT under, og begge forsvinn mot mørk botn — difor ei lysna
   utgåve som byter inn med temaet. Berre éi av dei er i dokumentflyten om
   gongen, så topplinja får same høgd uansett.

   Den mørke utgåva har tom alt-tekst og aria-hidden: to bilete med same
   alt-tekst ville lese logoen to gonger opp for ein skjermlesar. */
.logo {
  display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
}
.logo img { display: block; height: 34px; width: auto; }
.logo .logo-mork { display: none; }
@media (min-width: 600px) { .logo img { height: 38px; } }
.nav { display: flex; gap: 0.35rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.93rem;
  padding: 0.45rem 0.65rem; border-radius: var(--radius-sm);
}
.nav a:hover { background: var(--surface-alt); }
.nav a.active { color: var(--primary); background: var(--primary-soft); }
.nav-toggle {
  margin-left: auto; display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; font-size: 1.1rem; cursor: pointer;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    margin: 0.6rem 0 0.2rem; gap: 0;
  }
  .nav.open { display: flex; }
  .topbar-inner { flex-wrap: wrap; }
  .nav a { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav .btn { margin-top: 0.6rem; border-bottom: none; }
}

/* ---------- 4. Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  padding: 0.8rem 1.35rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; text-decoration: none; line-height: 1.2;
  transition: transform 0.06s ease, background 0.15s ease;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-accent { background: var(--accent); color: #23180a; }
.btn-accent:hover { background: #9c711f; color: #fff; }
.btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--primary-dark); }
.btn-sm { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* Same navigasjonen ein gong til, øvst i skjemaet. Steg 2 er blitt langt etter
   at modellbileta kom inn, og då skal ein ikkje måtte rulle heilt ned for å
   kome vidare. Den står til høgre og litt mindre, så den les som navigasjon og
   ikkje som eit nytt kall til handling. */
.navrad-topp {
  justify-content: flex-end;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.navrad-topp .btn { padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ---------- 5. Seksjonar / hero ---------- */
section { padding: 3.25rem 0; }
section.tight { padding: 2rem 0; }
.section-alt { background: var(--surface-alt); }
.section-dark { background: var(--primary-dark); color: #dbe7ea; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 62ch; margin-bottom: 1.75rem; }

.hero { background: linear-gradient(170deg, var(--primary-dark) 0%, var(--primary) 62%, #17677a 100%); color: #eaf3f5; padding: 3.5rem 0 3.75rem; }
.hero h1 { color: #fff; }
.hero .lead { color: #cfe2e7; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.hero .btn-row { margin-top: 1.5rem; }
.hero-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.6rem; }
.hero-points li { display: flex; gap: 0.6rem; align-items: flex-start; color: #d5e6ea; font-weight: 500; }
.hero-points li::before { content: "✓"; color: var(--accent); font-weight: 800; flex-shrink: 0; }
.hero-card {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius); padding: 1.5rem;
}
.hero-card h3 { color: #fff; margin-top: 0; }

/* ---------- 6. Kort og rutenett ---------- */
.grid { display: grid; gap: 1.1rem; }
/* Rutenettbarn får min-width: 0 slik at lange ord ikkje pressar kolonna
   breiare enn skjermen — standardverdien auto gjer nettopp det. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-media { aspect-ratio: 4 / 3; background: var(--surface-alt) center/cover no-repeat; border-radius: var(--radius-sm); margin-bottom: 0.9rem; display: grid; place-items: center; color: var(--muted); font-size: 2.4rem; }
.card-price { font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-top: 0.6rem; }
.card-price small { font-weight: 500; color: var(--muted); }

.usp { text-align: left; }
.usp-icon { font-size: 1.7rem; line-height: 1; margin-bottom: 0.6rem; }

.stat { text-align: center; }
.stat-num { font-family: "Source Serif 4", serif; font-size: 2.3rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-label { color: #b9d0d6; font-size: 0.9rem; margin-top: 0.35rem; }

/* ---------- 7. Skjema og konfigurator ---------- */
.field { margin-bottom: 1.1rem; }
.field label, .field-label { display: block; font-weight: 700; margin-bottom: 0.35rem; font-size: 0.95rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.85rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-error { color: var(--bad); font-size: 0.88rem; font-weight: 600; margin-top: 0.3rem; }
.field input.invalid, .field select.invalid { border-color: var(--bad); }

/* valkort — brukt til produkt-, modell- og fargeval i konfiguratoren */
.choices { display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr; }
.choices > * { min-width: 0; }
@media (min-width: 760px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice {
  position: relative; display: block; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.9rem; transition: border-color 0.12s ease;
}
.choice:hover { border-color: var(--primary); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-title { font-weight: 700; display: block; }
.choice-sub { color: var(--muted); font-size: 0.85rem; display: block; margin-top: 0.15rem; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.choice-swatch { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 0.5rem; }

/* stegindikator */
.steps { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step-dot {
  flex: 1 1 0; min-width: 62px; text-align: center; font-size: 0.75rem; font-weight: 700;
  color: var(--muted); padding: 0.4rem 0.2rem 0; border-top: 3px solid var(--border);
}
.step-dot.done { color: var(--primary); border-top-color: var(--primary); }
.step-dot.current { color: var(--accent); border-top-color: var(--accent); }

.summary-box {
  background: var(--primary-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem; margin: 1.25rem 0;
}
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(16, 73, 90, 0.2); }
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--muted); font-size: 0.92rem; margin: 0; }
.summary-row dd { margin: 0; font-weight: 700; text-align: right; }
.price-estimate { font-family: "Source Serif 4", serif; font-size: 2rem; font-weight: 700; color: var(--primary-dark); }

.notice { border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.93rem; margin: 1rem 0; }
.notice-info { background: var(--primary-soft); border: 1px solid #bcd7de; }
.notice-good { background: var(--good-soft); border: 1px solid #b6ddcd; }
.notice-warn { background: var(--warn-soft); border: 1px solid #e8d2a5; }
.notice-bad { background: var(--bad-soft); border: 1px solid #e8c2be; }

/* ---------- 8. Seljarverktøy ---------- */
.app-shell { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.toolbar select, .toolbar input {
  padding: 0.5rem 0.7rem; font: inherit; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.toolbar .spacer { margin-left: auto; }

.kpi-row { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.4rem; }
@media (min-width: 800px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.kpi-num { font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.kpi-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 720px; }
table.data th, table.data td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { background: var(--surface-alt); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--primary-soft); }
table.data tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

.tag {
  display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.tag-ny { background: var(--accent-soft); color: #7a5715; }
.tag-kontaktet { background: var(--primary-soft); color: var(--primary-dark); }
.tag-befaring { background: #e6e2f6; color: #4a3d8f; }
.tag-tilbud { background: var(--warn-soft); color: #7d4d13; }
.tag-vunnet { background: var(--good-soft); color: #12583f; }
.tag-tapt { background: var(--bad-soft); color: #7d241e; }
.tag-muted { background: var(--surface-alt); color: var(--muted); }
/* Ein person uten Firebase-bruker. Same farge som «tapt», fordi det er same
   slag beskjed: noko står oppført som om det virkar, og gjer det ikkje. */
.tag-bad { background: var(--bad-soft); color: #7d241e; }

/* detaljpanel (slår ut under valgt rad / eige kort) */
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; margin-top: 1.2rem; box-shadow: var(--shadow-sm); }
.detail-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-size: 0.94rem; }
.detail dt { color: var(--muted); font-weight: 600; }
.detail dd { margin: 0; }
.log { list-style: none; padding: 0; margin: 0.5rem 0 0; border-left: 2px solid var(--border); }
.log li { padding: 0.4rem 0 0.4rem 0.9rem; font-size: 0.9rem; position: relative; }
.log li::before { content: ""; position: absolute; left: -5px; top: 0.85rem; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.log time { color: var(--muted); font-size: 0.8rem; display: block; }

/* ---------- 9. Botnfelt ---------- */
footer.site {
  background: var(--primary-dark); color: #b9cdd3; padding: 2.75rem 0 1.75rem; margin-top: 2rem;
  font-size: 0.93rem;
}
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site h4 { color: #fff; margin: 0 0 0.6rem; font-size: 0.95rem; }
.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 1.75rem; padding-top: 1.1rem; color: #8fa9b1; font-size: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- 10. Hjelpeklassar + utskrift ---------- */
.hidden { display: none !important; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.5rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.spinner { text-align: center; color: var(--muted); padding: 2.5rem 1rem; font-weight: 600; }

@media print {
  .topbar, footer.site, .toolbar, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .detail, .card, .table-scroll { box-shadow: none; border-color: #999; }
}

/* ---------- produktbilete i kort og valkort ---------- */
.choice-bilde {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 8px; margin-bottom: 0.55rem; background: var(--surface-alt);
}
.card-media-bilde {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 0.9rem; background: var(--surface-alt);
}
.hero-bilde {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-md); object-fit: cover;
}
.produktbilete {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin: 0 0 1.25rem;
}
.bildegalleri { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bildegalleri { grid-template-columns: 1fr 1fr; } }

/* ---------- galleri av modellar og stolpetoppar på produktsida ----------
   Eit rekkverk blir valt med auga. Difor er dette bilete i full breidd og
   ikkje ei tabellrad: kunden skal kjenne att det han vil ha, ikkje tyde ein
   modellkode. Heile kortet er lenka, så det er like lett å treffe med
   tommelen som med musa. */
.valgalleri {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.valkort {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.valkort:hover, .valkort:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.valkort .kort-tittel { display: block; font-weight: 700; }
.valkort .kort-sub { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.valkort .kort-vel {
  display: block; margin-top: 0.5rem; font-weight: 600; font-size: 0.85rem;
  color: var(--accent);
}
/* Toppane er fotograferte heile, med luft rundt. Blir dei skorne til som
   produktbileta, mistar den gotiske spissen toppen sin — så desse skal
   rommast, ikkje fyllast. */
/* «Kanskje du ser etter» — ei rad ein dreg bortover. På ein telefon er det
   ein sveip med snap, på ein skjerm blir det tre kort ved sida av kvarandre.
   Same markup begge stader. */
.naborad {
  display: grid; gap: 1rem;
  grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.6rem; margin-bottom: -0.6rem;
  scrollbar-width: thin;
}
.naborad > * { scroll-snap-align: start; }
.nabokort {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.nabokort:hover, .nabokort:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.nabokort .kort-tittel { display: block; font-weight: 700; }
.nabokort .kort-sub { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.nabokort .kort-vel {
  display: block; margin-top: 0.5rem; font-weight: 600; font-size: 0.85rem; color: var(--accent);
}

.toppbilete {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: 8px; margin-bottom: 0.55rem; background: var(--surface-alt);
}

/* ---------- sprossetypar i bestillingsskjemaet ----------
   Teikninga er valet. Talfeltet ligg i same kortet, så «kva slags» og «kor
   mange» er ei handling og ikkje to. Heile kortet er ein <label>, så eit trykk
   kvar som helst set markøren i feltet. */
.typerutenett {
  display: grid; gap: 0.7rem; margin-top: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.typerutenett .typekort {
  display: grid; justify-items: center; gap: 0.15rem;
  padding: 0.7rem 0.6rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.typerutenett .typekort:hover { border-color: var(--accent); }
.typerutenett .typekort:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.22); }
.typerutenett .typekort.har-tal { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.typerutenett .typekort .typefigur { display: block; line-height: 0; }
.typerutenett .typefoto {
  width: 100%; height: auto; max-width: 104px; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 6px; display: block;
}
.typerutenett .typekort .typefigur svg { width: 100%; height: auto; max-width: 104px; }
.typerutenett .typefigur-tom {
  display: grid; place-items: center; width: 74px; height: 62px;
  border: 1px dashed var(--border); border-radius: 6px;
  font-size: 1.6rem; font-weight: 700; color: var(--muted);
}
.typerutenett .typekort .typenamn { font-weight: 700; font-size: 0.9rem; margin-top: 0.3rem; }
.typerutenett .typekort .typesub { color: var(--muted); font-size: 0.8rem; text-align: center; }
.typerutenett .typekort input {
  width: 100%; margin-top: 0.45rem; text-align: center;
  font-weight: 700; padding: 0.4rem;
}

/* ---------- bilete kunden legg ved ---------- */
.biletvelger { margin-top: 0.7rem; }
.biletfelt .biletvelger label.btn { display: inline-flex; margin-bottom: 0; }
.biletvelger input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}
/* Fokus frå tastatur må sjå ut som fokus, sjølv om feltet sjølv er gøymt. */
.biletvelger input[type=file]:focus-visible + label { box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.35); }
.biletliste {
  display: grid; gap: 0.6rem; margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}
.biletliste:empty { display: none; }
.biletkort {
  position: relative; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-alt);
}
.biletkort img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.biletkort figcaption {
  padding: 0.35rem 0.45rem; font-size: 0.74rem; line-height: 1.25;
  word-break: break-word; color: var(--muted);
}
.biletkort figcaption span { display: block; opacity: 0.75; }
.biletkort-fjern {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(10, 26, 36, 0.78); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.biletkort-fjern:hover { background: #a02b2b; }

/* Eit ark som kjem ut av ein skrivar skal kunne leggast på eit bord og framleis
   seie kven det gjeld. Difor får kvar utskrift eit hovud med firma, kunde og
   dato — synleg berre på papiret. */
.utskriftshovud { display: none; }
@media print {
  .utskriftshovud {
    border-bottom: 2px solid #333; padding-bottom: 0.6rem; margin-bottom: 1rem;
  }
  .utskriftshovud h1 { font-size: 1.3rem; margin: 0 0 0.2rem; }
  .utskriftshovud p { margin: 0; font-size: 0.85rem; }
}

/* Knappane på ei sprosselinje: dupliser står først, fordi den blir brukt
   femten gonger på ein ordre og slett éin gong. */
.sprosselinjeknappar { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.sprosselinjeknappar .btn { white-space: nowrap; }
.figurmerknad { display: block; margin-top: 0.3rem; text-align: center; font-size: 0.75rem; }

/* ---------- slett saker ----------
   Raud er reservert for denne eine handlinga i heile verktøyet. Brukar vi
   fargen på noko anna òg, sluttar den å bety «dette kan ikkje angrast». */
.btn-fare {
  background: #a5301f; border-color: #a5301f; color: #fff;
}
.btn-fare:hover:not(:disabled) { background: #8c2718; border-color: #8c2718; }
.btn-fare:disabled { opacity: .45; cursor: not-allowed; }

.slettliste { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.slettrad {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .35rem .8rem;
  align-items: center; padding: .6rem .8rem; background: var(--surface);
  cursor: pointer; font-size: .92rem;
}
.slettrad:hover { background: var(--surface-alt); }
.slettrad input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: #a5301f; }
.slettrad .slettnamn { display: grid; gap: .05rem; min-width: 0; }
.slettrad .slettnamn .hint { font-size: .8rem; }
/* Ei sak med ordre på kan ikkje slettast — bokføringslova. Rada står, men
   utan hake, så det er tydeleg at den er vurdert og ikkje gløymd. */
.slettrad.sperra { cursor: default; opacity: .72; }
.slettrad.sperra:hover { background: var(--surface); }
@media (max-width: 720px) {
  .slettrad { grid-template-columns: auto 1fr; }
  .slettrad .hint, .slettrad .tag { grid-column: 2; }
}

/* ---------- kundebileta, slik seljaren ser dei ---------- */
.kundebilete {
  display: grid; gap: 0.7rem; margin: 0.6rem 0 0;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kundebilete-kort {
  display: block; text-decoration: none; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-alt);
}
.kundebilete-kort img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--surface-alt);
}
.kundebilete-kort span {
  display: block; padding: 0.35rem 0.5rem; font-size: 0.78rem; word-break: break-word;
}
.kundebilete-kort.manglar { border-color: #c0392b; }

/* ---------- samtykket ----------
   Det blei oversett kvar gong. Ei avkryssingsrute i brødtekst ser ut som meir
   brødtekst; her er den ein boks med eigen botn og ei rute ein ser. */
.samtykkeboks {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.samtykkerad {
  display: flex; gap: 0.85rem; align-items: flex-start;
  font-weight: 500; cursor: pointer; margin: 0;
}
.samtykkerad input[type=checkbox] {
  width: 22px; height: 22px; flex: 0 0 22px; margin: 0.1rem 0 0;
  accent-color: var(--accent); cursor: pointer;
}
/* Går kunden vidare utan å hake av, skal boksen seie frå med meir enn ei linje
   grå tekst under. */
.samtykkeboks.manglar {
  border-color: #c0392b; border-left-color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

/* ---------- salgsverktøy: faner, dialog, agenda, ordreskjema ---------- */
.fanerad { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.fane {
  background: transparent; border: 1.5px solid var(--border); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font: inherit;
  font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.fane:hover { background: var(--surface-alt); }
.fane.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
.fane .teljar {
  display: inline-block; margin-left: 0.4rem; background: var(--accent-soft); color: #7a5715;
  border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 800;
}
.fane.aktiv .teljar { background: rgba(255,255,255,.22); color: #fff; }

/* dialog */
.modal {
  position: fixed; inset: 0; z-index: 60; background: rgba(10, 32, 40, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal-kort {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 860px;
  margin: 2vh auto; box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  max-height: 96vh;
}
.modal-topp {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border);
}
.modal-innhald { padding: 1.35rem; overflow-y: auto; }
.modal-botn {
  padding: 1rem 1.35rem; border-top: 1px solid var(--border);
  display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; justify-content: flex-end;
}
.modal-botn .spacer { margin-right: auto; }

/* skjemaseksjonar i ordreskjemaet */
.skjemaseksjon { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.skjemaseksjon > h3 { margin-top: 0; }
.skjemaseksjon.intern { border-color: var(--accent); background: var(--accent-soft); }
.feltrutenett { display: grid; gap: 0.7rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .feltrutenett { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .feltrutenett { grid-template-columns: repeat(3, 1fr); } }
.feltrutenett .field { margin-bottom: 0; }
.feltrutenett .field.brei { grid-column: 1 / -1; }
.feltrutenett label { font-size: 0.85rem; font-weight: 600; }
.feltrutenett input, .feltrutenett select, .feltrutenett textarea { padding: 0.5rem 0.6rem; font-size: 0.92rem; }

/* måltabell for sprosser */
table.maltabell { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.maltabell th {
  background: var(--surface-alt); padding: 0.4rem 0.35rem; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted);
  border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
table.maltabell td { padding: 0.2rem 0.25rem; border-bottom: 1px solid var(--border); }
table.maltabell input, table.maltabell select {
  width: 100%; padding: 0.35rem 0.4rem; font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
table.maltabell tr:nth-child(even) td { background: rgba(0,0,0,0.015); }

/* agenda */
.agendadag { margin-bottom: 1.5rem; }
.agendadag > h3 { position: sticky; top: 0; background: var(--bg); padding: 0.35rem 0; margin: 0 0 0.5rem; text-transform: capitalize; }
/* Avtalerada har tid, innhald og knappar. På telefon får knappane falle ned
   på eiga linje — utan flex-wrap skyv «Legg i telefonkalender» sida ut i
   breidda, og då kan heile verktøyet skrollast sidelengs. */
.avtale {
  display: flex; gap: 0.6rem 1rem; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.6rem;
}
.avtale > span { min-width: 0; overflow-wrap: anywhere; }
.avtale-tid { font-weight: 800; color: var(--primary); min-width: 4.5rem; flex: none; }
.avtale-type { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.avtale > span:nth-child(2) { flex: 1 1 9rem; }
.avtale-handling { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.avtale.befaring { border-left-color: var(--accent); }
.avtale.montering { border-left-color: var(--good); }

/* ordre og plukkliste */
.ordrekort { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem; margin-bottom: 1rem; }
.ordrekort-topp { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.plukk-linjer { list-style: none; padding: 0; margin: 0.75rem 0 0; }
/* Namnet på delen kan vere langt. Utan min-width: 0 nektar flexbarnet å
   krympe, og då blir mengda skvisa ut av skjermen på telefon. */
/* Namnet på delen kan vere langt, og mengda skal ikkje brytast midt i. På
   telefon får difor mengda falle ned på eiga linje i staden for å presse
   sida ut i breidda. */
.plukk-linjer li {
  display: flex; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap;
  padding: 0.35rem 0; border-bottom: 1px dashed var(--border);
}
.plukk-linjer li > span { min-width: 0; overflow-wrap: anywhere; }
.plukk-linjer li > span:first-child { flex: 1 1 10rem; }
.plukk-linjer li:last-child { border-bottom: none; }
/* Mengda er som regel kort («4 stk») og bryt seg då aldri. Men for sprosser
   står heile målbeskrivelsen her — «8 stk, 1180×1080 mm, sprosseverk 22 mm …»
   — og med nowrap skyv den heile sida ut i breidda på telefon. */
.plukk-linjer .mengde { font-weight: 800; color: var(--primary); text-align: right; }
.avkryssrad { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; }
.avkryssrad input { width: auto; margin-top: 0.3rem; flex-shrink: 0; }

.statusknappar { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.statusknapp {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.82rem;
  font-weight: 700; cursor: pointer;
}
.statusknapp:hover { border-color: var(--primary); }
.statusknapp.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
.statusknapp.avslag.aktiv { background: var(--bad); border-color: var(--bad); }
.statusknapp.solgt.aktiv { background: var(--good); border-color: var(--good); }

.tag-ny { background: var(--accent-soft); color: #7a5715; }
.tag-sett { background: var(--surface-alt); color: var(--muted); }
.tag-kontaktet { background: var(--primary-soft); color: var(--primary-dark); }
.tag-tilbud_sendt { background: var(--warn-soft); color: #7d4d13; }
.tag-oppfulgt { background: #e6e2f6; color: #4a3d8f; }
.tag-solgt { background: var(--good-soft); color: #12583f; }
.tag-avslatt { background: var(--bad-soft); color: #7d241e; }

@media print {
  .fanerad, .kpi-row { display: none !important; }
  .ordrekort { break-inside: avoid; border-color: #999; }

  /* Ein lukka dialog er framleis i dokumentet, og skal ikkje på papiret. Den
     opne skal — heile poenget med «Skriv ut» i ein dialog er dialogen. Før sto
     det `.modal { display: none !important }` her, og då kom det ut eit blankt
     ark uansett kva ein prøvde å skrive ut. */
  .modal.hidden { display: none !important; }
  .modal:not(.hidden) {
    display: block !important;
    position: static; background: none; padding: 0; overflow: visible;
  }
  .modal:not(.hidden) .modal-kort {
    box-shadow: none; max-height: none; border: 0; width: 100%; max-width: none;
  }
  .modal:not(.hidden) .modal-innhald { overflow: visible !important; padding: 0; }
  /* Tittelrada og knapperada er skjerm, ikkje papir. Overskrifta blir skriven
     inn på arket av utskriftshovudet i staden. */
  .modal:not(.hidden) .modal-topp,
  .modal:not(.hidden) .modal-botn { display: none !important; }
  /* Resten av verktøyet ligg bak dialogen og skal ikkje følgje med. */
  body:has(.modal:not(.hidden)) .app-shell { display: none !important; }
  .utskriftshovud { display: block !important; }
  /* Skjermens verktøy skal ikkje på papiret: typeveljaren er ei rad knappar
     ein trykkjer på, og ei sprosselinje som ikkje er fylt ut er ein tom plass
     — ikkje ei linje kunden skal lese. */
  .typeveljar, .sprosselinjeknappar, .typeetikett { display: none !important; }
  .sprosselinje.linje-tom { display: none !important; }
  .sprosselinje { break-inside: avoid; }
}

/* Kort tilbakemelding — ligg fast nedst, så den aldri flyttar innhaldet under seg. */
.toast {
  position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 70; margin: 0; max-width: min(92vw, 460px); box-shadow: var(--shadow-md);
  font-weight: 600;
  /* Toasten er berre til å lese — den skal aldri fange eit klikk som var
     meint for knappen under. */
  pointer-events: none;
}

/* Produkt utan eit bilete som held mål får eit typografisk kort i staden.
   Det skal sjå bevisst ut, ikkje som eit manglande bilete. */
.utan-bilete {
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(150deg, var(--primary-dark), var(--primary));
  color: #fff; padding: 1rem;
}
.utan-bilete span {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em; color: rgba(255, 255, 255, 0.72);
}

/* ===========================================================================
   PANEL: nøkkeltal, kart og lett 3D
   ---------------------------------------------------------------------------
   Rørslene er små med vilje. Eit verktøy som skal brukast heile dagen tåler
   djupne og ei mjuk innkomst, men ikkje eit sprett i kvar rute.
   =========================================================================== */

.panel-topp {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.merkerad { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.merke {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.84rem; font-weight: 700;
}
.merke-liten { padding: 0.05rem 0.45rem; font-size: 0.72rem; border-width: 1px; }
.merke-streak { border-color: var(--accent); background: var(--accent-soft); color: #7a5715; }

/* --- stat-fliser --- */
.stat-rad { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.1rem; }
@media (min-width: 900px) { .stat-rad { grid-template-columns: repeat(4, 1fr); } }
.stat-kort {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
}
.stat-verdi {
  font-family: "Source Serif 4", Georgia, serif; font-size: 2.4rem; font-weight: 700;
  line-height: 1; color: var(--primary-dark); font-variant-numeric: tabular-nums;
}
.stat-etikett { font-weight: 700; font-size: 0.9rem; margin-top: 0.35rem; }
.stat-sub { color: var(--muted); font-size: 0.83rem; }

.panel-rutenett { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .panel-rutenett { grid-template-columns: 1.15fr 1fr; } }

/* --- progresjonsring --- */
.ring-rad { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.ring { width: 118px; height: 118px; flex-shrink: 0; }
.ring-fyll { transition: stroke-dasharray 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.ring-tal {
  font-family: "Source Serif 4", Georgia, serif; font-size: 30px; font-weight: 700;
  fill: var(--primary-dark); text-anchor: middle; dominant-baseline: central;
}
.ring-prosent { font-size: 16px; fill: var(--muted); }

/* --- produksjonskø --- */
.ko-tal {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0.6rem 0 0.2rem;
  font-family: "Source Serif 4", Georgia, serif; font-size: 2.6rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ko-eining { font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.ko-ikon { font-size: 1rem; line-height: 1; }
.ko-status { font-weight: 700; margin: 0 0 0.5rem; }
/* Statusfargane er validerte for fargesynsvariasjon, og står aldri åleine:
   ikon og tekst seier det same som fargen. */
.ko-god { color: #0f7a52; }
.ko-warn { color: #c07a08; }
.ko-bad { color: #b32218; }

.live-prikk {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #0f7a52; margin-left: 0.35rem; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.55); animation: puls 2.4s infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(15, 122, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 122, 82, 0); }
}

/* --- stolpe i tabellcelle --- */
.stolpe { background: var(--surface-alt); border-radius: 4px; height: 8px; width: 100%; max-width: 130px; overflow: hidden; }
.stolpe span { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); }
table.data tr.meg td { background: var(--primary-soft); }
table.data tr.klikkbar { cursor: pointer; }
table.data tr.klikkbar:hover td { background: var(--primary-soft); }
table.data.kompakt { min-width: 0; font-size: 0.86rem; }
table.data.kompakt th, table.data.kompakt td { padding: 0.4rem 0.5rem; }

/* --- kart --- */
.kart-oppsett { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kart-oppsett { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.kartboks { position: relative; --kart-hogd: 620px; }
/* Noreg er høgt og smalt. Med width:100% blir kartet liggjande som ei stripe
   midt i ei brei kolonne — vi lèt difor høgda styre og breidda følgje etter. */
.norgeskart {
  height: var(--kart-hogd); width: auto; max-width: 100%; display: block; margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(20, 38, 46, 0.16));
}
.fylke {
  stroke: #ffffff; stroke-width: 1.4; stroke-linejoin: round; cursor: pointer;
  transition: fill 200ms ease, transform 180ms ease, filter 180ms ease;
  transform-origin: center; transform-box: fill-box;
}
.fylke:hover, .fylke:focus {
  filter: brightness(1.08) drop-shadow(0 6px 10px rgba(10, 51, 65, 0.35));
  transform: translateY(-3px) scale(1.012);
  outline: none;
}
/* Ein tjukk strek rundt eit fylke med hundrevis av øyar blir til grums.
   Tynn gullstrek pluss løft og skugge markerer valet utan å viske ut kysten. */
.fylke.valt {
  stroke: var(--accent); stroke-width: 1.6;
  filter: drop-shadow(0 6px 12px rgba(184, 134, 47, 0.55));
  transform: translateY(-2px);
}
.minikart .norgeskart { filter: none; pointer-events: none; }
.minikart { cursor: default; }

.kart-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--primary-dark); color: #fff; border-radius: 8px;
  padding: 0.45rem 0.65rem; font-size: 0.84rem; line-height: 1.35;
  box-shadow: var(--shadow-md); max-width: 200px;
}
.kart-tegn { display: flex; align-items: center; gap: 3px; margin-top: 0.5rem; flex-wrap: wrap; }
.kart-tegn i { width: 26px; height: 12px; border-radius: 2px; display: block; }
.tegn-etikett { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin: 0 0.35rem; }
.tegn-rad { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; margin-right: 0.9rem; }
.tegn-rad i { width: 14px; height: 14px; border-radius: 3px; }

.kart-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem; }
.kart-side h4 { margin: 1rem 0 0.35rem; font-size: 0.92rem; }
.fylkefakta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0; }
.fylkefakta dt { color: var(--muted); font-weight: 600; }
.fylkefakta dd { margin: 0; font-weight: 700; }
.enkelliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.enkelliste li { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }
.lenkeknapp { background: none; border: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.grunnliste { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.grunnliste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--border); }
.grunnliste li:last-child { border-bottom: none; }
.grunntal { font-weight: 800; font-variant-numeric: tabular-nums; }
.grunntal.god { color: #0f7a52; }
.grunntal.bad { color: #b32218; }

/* --- lett 3D --- */
.tilt { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease; will-change: transform; }
.tilt:hover { box-shadow: var(--shadow-md); }

/* --- konfetti ved solgt --- */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.konfetti i {
  position: absolute; width: 8px; height: 12px; border-radius: 2px;
  animation: fall 1400ms cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}
@keyframes fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(var(--spin, 540deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fylke:hover, .fylke:focus { transform: none; }
  .live-prikk { animation: none; }
  .ring-fyll, .stolpe span { transition: none; }
  .konfetti { display: none; }
}

/* ===========================================================================
   RØRSLE OG DJUPNE
   ---------------------------------------------------------------------------
   Alt her er transform og opacity — ingen av effektane rører layout, så dei
   kan ikkje skape hakking i scrollen. Alt slår seg av ved redusert rørsle.
   =========================================================================== */

[data-avslor] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-avslor].synleg { opacity: 1; transform: none; }
[data-avslor][data-forseinking="1"] { transition-delay: 90ms; }
[data-avslor][data-forseinking="2"] { transition-delay: 180ms; }
[data-avslor][data-forseinking="3"] { transition-delay: 270ms; }
[data-avslor][data-forseinking="4"] { transition-delay: 360ms; }

[data-parallakse] { perspective: 1100px; }
[data-djupne] { transform-style: preserve-3d; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
[data-parallakse]:hover [data-djupne] { transition: none; }

/* Heltebiletet får eit ekstra lag djupne: ei mjuk flate bak, litt forskjøvet. */
.hero-scene { position: relative; }
.hero-scene::before {
  content: ""; position: absolute; inset: 8% -4% -8% 6%;
  background: linear-gradient(150deg, rgba(184, 134, 47, 0.35), rgba(255, 255, 255, 0.06));
  border-radius: var(--radius); transform: translateZ(-40px) rotate(-1.4deg);
  pointer-events: none;
}
.hero-scene .hero-bilde { position: relative; }

/* Vindstriper bak seksjonen om lyd i vinden. */
.vindstriper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.5; }
.vindstriper path { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; stroke-linecap: round; }
.vindstriper path:nth-child(1) { animation: driv 13s linear infinite; }
.vindstriper path:nth-child(2) { animation: driv 17s linear infinite -3s; }
.vindstriper path:nth-child(3) { animation: driv 21s linear infinite -7s; }
.vindstriper path:nth-child(4) { animation: driv 15s linear infinite -11s; }
@keyframes driv {
  from { transform: translateX(-16%); }
  to { transform: translateX(16%); }
}
.seksjon-rel { position: relative; overflow: hidden; }
.seksjon-rel > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-avslor] { opacity: 1; transform: none; transition: none; }
  [data-djupne] { transform: none !important; }
  .vindstriper path { animation: none; }
  .hero-scene::before { transform: none; }
}

/* --- kapasitetsmålar --- */
.malar { margin: 0.75rem 0 0.9rem; }
.malar-spor { position: relative; height: 10px; background: var(--surface-alt); border-radius: 5px; overflow: hidden; }
.malar-fyll { display: block; height: 100%; border-radius: 5px; transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.malar-god { background: #0f7a52; }
.malar-warn { background: #c07a08; }
.malar-bad { background: #b32218; }
.tekst-god { color: #0f7a52; }
.tekst-warn { color: #8a5510; }
.tekst-bad { color: #b32218; }
body.tema-mork .tekst-god { color: var(--good); }
body.tema-mork .tekst-warn { color: var(--warn); }
body.tema-mork .tekst-bad { color: var(--bad); }
.malar-merke { position: absolute; top: -2px; width: 2px; height: 14px; background: var(--muted); opacity: 0.55; }
.malar-etikettar { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; font-weight: 600; }

/* --- minikart med topplista ved sida --- */
.minikart-oppsett { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .minikart-oppsett { grid-template-columns: 240px 1fr; } }
.fylkeliste { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.45rem; }
.fylkeliste li { display: grid; grid-template-columns: 6.5rem 1fr 2rem; gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.fylkeliste-navn { font-weight: 600; }
.fylkeliste-tal { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- månadsdiagram --- */
.diagramboks { position: relative; margin-top: 0.75rem; }
.manadsdiagram { width: 100%; height: auto; display: block; }
/* Aksen skal vere til stades, ikkje til stades i vegen. */
.manadsdiagram .akse { stroke: var(--border); stroke-width: 1; }
.manadsdiagram .stolpe-aar { fill: var(--primary); }
.manadsdiagram .stolpe-fjor { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: 0.55; }
.manadsdiagram .stolpe-etikett { font-size: 11px; fill: var(--muted); text-anchor: middle; font-weight: 600; }
.manadsdiagram .stolpe-tal { font-size: 12px; fill: var(--primary-dark); text-anchor: middle; font-weight: 800; }
.manadsdiagram .stolpe-treff { fill: transparent; }
.manadsdiagram .stolpegruppe:hover .stolpe-aar { fill: var(--primary-dark); }
.manadsdiagram .stolpegruppe:hover .stolpe-treff { fill: rgba(16, 73, 90, 0.05); }
.diagram-tegn { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.diagram-tegn i { width: 14px; height: 12px; border-radius: 3px; display: inline-block; }
.diagram-tegn .tegn-aar { background: var(--primary); }
.diagram-tegn .tegn-fjor { border: 1.5px solid var(--muted); opacity: 0.7; }

/* ===========================================================================
   KLEBRIG HANDLINGSKNAPP
   ---------------------------------------------------------------------------
   Reisa frå interesse til førespurnad skal vere eitt trykk uansett kor på
   sida kunden er. Baren kjem først når helten er ute av syne, så den aldri
   konkurrerer med hovudknappen.
   =========================================================================== */
.klebrig-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap;
  background: rgba(10, 51, 65, 0.96); backdrop-filter: blur(8px);
  color: #eaf3f5; padding: 0.7rem 1.1rem;
  box-shadow: 0 -6px 22px rgba(20, 38, 46, 0.22);
  transform: translateY(110%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.klebrig-cta.synleg { transform: none; }
.klebrig-tekst { font-weight: 600; font-size: 0.94rem; }
.klebrig-cta a:not(.btn) { color: #fff; }
@media (max-width: 560px) {
  .klebrig-cta { justify-content: space-between; padding: 0.6rem 0.85rem; }
  .klebrig-tekst { font-size: 0.82rem; flex: 1 1 60%; }
}
@media (prefers-reduced-motion: reduce) { .klebrig-cta { transition: none; } }
@media print { .klebrig-cta { display: none; } }

/* ===========================================================================
   FORSIDA — moderne rytme
   =========================================================================== */

/* Større, roligare helt. clamp() gjer at overskrifta skalerer med skjermen
   i staden for å hoppe mellom faste storleikar. */
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); letter-spacing: -0.015em; }
.hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.22rem); max-width: 52ch; }

/* Nøkkelinfo rett under helten: det kunden vil vite før dei orkar lese meir. */
.nokkelstripe {
  display: grid; gap: 1px; background: var(--border);
  border-block: 1px solid var(--border); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .nokkelstripe { grid-template-columns: repeat(5, 1fr); } }
.nokkelfelt { background: var(--surface); padding: 1.3rem 1.1rem; text-align: center; }
.nokkelfelt .tal {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.85rem; font-weight: 700;
  color: var(--primary); line-height: 1; display: block;
}
.nokkelfelt .under { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-top: 0.35rem; display: block; }

/* Verdiar: store, luftige rader i staden for tette kort. */
.verdirad { display: grid; gap: 1.5rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--border); }
.verdirad:last-child { border-bottom: none; }
@media (min-width: 820px) { .verdirad { grid-template-columns: 4.5rem 1fr 1.15fr; gap: 2rem; } }
.verdinummer {
  font-family: "Source Serif 4", Georgia, serif; font-size: 2.6rem; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.verdirad h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.45rem; color: var(--primary-dark); margin: 0; }
.verdirad p { margin: 0; color: var(--muted); }

/* Sitat frå kundar. */
.sitatrad { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .sitatrad { grid-template-columns: repeat(3, 1fr); } }
.sitat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.9rem;
}
.sitat blockquote {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem;
  line-height: 1.5; color: var(--primary-dark);
}
.sitat blockquote::before { content: "\\201C"; color: var(--accent); font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.1em; }
.sitat figcaption { font-size: 0.86rem; color: var(--muted); font-weight: 600; margin-top: auto; }

/* Teknisk: definisjonstabell som les seg som eit datablad. */
.datablad { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .datablad { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.datablad div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.datablad dt { color: var(--muted); font-weight: 600; margin: 0; }
.datablad dd { margin: 0; font-weight: 700; text-align: right; }

/* Miljøfyrtårn. */
.miljoblokk { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) { .miljoblokk { grid-template-columns: 128px 1fr; gap: 2rem; } }
.miljomerke {
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center;
  background: #0f7a52; color: #fff; text-align: center; padding: 1rem;
  font-weight: 800; font-size: 0.82rem; line-height: 1.25; letter-spacing: 0.02em;
  box-shadow: var(--shadow-md);
}

/* ===========================================================================
   MØRKT TEMA — nettstaden
   ---------------------------------------------------------------------------
   Oppbygginga er henta frå eit referansenettstad kunden peika på: mørk base,
   kondensert versal-display, farga merkelapp over kvar overskrift, og
   nummererte kort. Paletten er Vindex sin eigen — djup sjø-svart og messing
   der referansen brukar marineblå og raudt.
   Salsverktøyet held fram i lyst tema: det er eit arbeidsverktøy som skal
   lesast heile dagen og skrivast ut (plukklister), og då er lyst rett.
   =========================================================================== */

body.tema-mork {
  /* Fortel nettlesaren at temaet er mørkt, så avkryssingsboksar, nedtrekk,
     datoveljarar og rullefelt følgjer med i staden for å lyse kvitt. */
  color-scheme: dark;
  --bg: #0a1621;
  --surface: #10202e;
  --surface-alt: #0c1a26;
  --ink: #e6eef3;
  --muted: #91a7b5;
  --border: #1d3243;
  --primary: #b8862f;          /* messing er handlingsfargen i mørkt tema */
  --primary-dark: #9c711f;
  --primary-soft: #1a2a38;
  --accent: #b8862f;
  --accent-soft: #241d10;
  --krem: #f2ece0;             /* overskriftsfargen, som i referansen */
  --good: #4cb98b;             /* statusfargane må lysne for å halde 4.5:1 */
  --good-soft: #10281f;
  --warn: #e0a53c;
  --warn-soft: #2a2110;
  --bad: #e8776b;
  --bad-soft: #2b1512;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.5);
  background: var(--bg);
  color: var(--ink);
}

/* --- display-typografi ---
   Store versalar i Oswald er nettstaden sin identitet, ikkje det mørke temaet
   sin. Difor gjeld den for .nettside i begge tema. Verktøyet har .verktoyside
   og held fram med den kompakte skrifta. */
body.nettside h1,
body.nettside h2,
body.nettside .display,
body.tema-mork h1,
body.tema-mork h2,
body.tema-mork .display {
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--krem);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-wrap: balance;
}
body.tema-mork h1 { font-size: clamp(2.6rem, 9vw, 5.4rem); }
body.tema-mork h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
body.tema-mork h3 { color: var(--krem); font-weight: 700; }
body.tema-mork .h3-versal {
  font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase;
  font-size: 1.22rem; letter-spacing: 0.02em; font-weight: 600;
}

/* Sperra versalar til småtekst — nav, etikettar, knappar. */
body.tema-mork .nav a,
body.tema-mork .btn,
body.tema-mork .sperra {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600;
}
body.tema-mork .btn { padding: 0.95rem 1.6rem; border-radius: 2px; }
body.tema-mork .btn-accent { background: var(--accent); color: #171104; }
body.tema-mork .btn-accent:hover { background: #cf9a3c; color: #171104; }
body.tema-mork .btn-ghost { border-color: rgba(230, 238, 243, 0.28); color: var(--krem); background: transparent; }
body.tema-mork .btn-ghost:hover { background: rgba(230, 238, 243, 0.08); color: #fff; }

/* --- topbar --- */
body.tema-mork .topbar { background: rgba(10, 22, 33, 0.92); border-bottom-color: var(--border); }
body.tema-mork .logo .logo-lys { display: none; }
body.tema-mork .logo .logo-mork { display: block; }
body.tema-mork .nav a { color: var(--muted); }
body.tema-mork .nav a:hover, body.tema-mork .nav a.active { color: var(--krem); background: transparent; }
body.tema-mork .nav-toggle { border-color: var(--border); color: var(--krem); }

/* --- merkelapp over overskrifta --- */
.merkelapp {
  display: inline-block; background: var(--accent); color: #171104;
  padding: 0.55rem 1.1rem; font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1.1rem;
}
.merkelapp-open {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
}

/* --- helt med fullt bilete bak --- */
.helt-fullbleed {
  position: relative; overflow: hidden; background: #06101a;
  /* Bandet er mørkt i begge tema — det ligg eit foto bak. Fargane blir difor
     sette lokalt, så teksten held seg lesbar òg når resten av sida er lys. */
  --krem: #f2ece0;
  --ink: #f2ece0;
  --muted: #b6c6d0;
  color: var(--ink);
}
.helt-fullbleed > .helt-bilete {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42;
}
.helt-fullbleed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 16, 26, 0.94) 8%, rgba(6, 16, 26, 0.62) 52%, rgba(6, 16, 26, 0.35) 100%);
}
.helt-innhald { position: relative; z-index: 2; padding: 4.5rem 0 5rem; max-width: 46rem; }
.helt-tofarga span { display: block; }
.helt-tofarga .linje2 { color: var(--accent); }
.helt-stikkord {
  display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem;
  font-weight: 600; color: var(--krem); margin: 1.1rem 0 1.3rem;
}
.helt-stikkord i { color: var(--accent); font-style: normal; }

/* Tredje, roligare veg vidare — for dei som ikkje er klare til å be om tilbod. */
.tredjeveg {
  display: inline-flex; flex-direction: column; gap: 0.15rem;
  border: 1px solid var(--accent); padding: 0.85rem 1.3rem; text-decoration: none;
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.8rem;
}
.tredjeveg small { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.75; font-size: 0.78rem; }
.tredjeveg:hover { background: rgba(184, 134, 47, 0.12); }

/* Tillitsstripe nedst i helten. */
.tillitspille {
  display: inline-block; border: 1px solid rgba(230, 238, 243, 0.4);
  border-radius: 999px; padding: 0.75rem 1.5rem; color: var(--krem);
  font-size: 0.88rem; margin-top: 2rem;
}

/* --- talrutenett --- */
.talrutenett {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem;
  padding: 3.5rem 0; text-align: center;
}
@media (min-width: 820px) { .talrutenett { grid-template-columns: repeat(4, 1fr); } }
.talrutenett .tal {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: clamp(2.6rem, 6vw, 3.6rem);
  color: var(--accent); line-height: 1; font-weight: 600; display: block;
}
.talrutenett .etikett {
  display: block; margin-top: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.78rem; color: var(--muted); font-weight: 600;
}

/* --- nummererte produktkort --- */
.nummerkort {
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit; display: block; overflow: hidden;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
}
.nummerkort:hover { transform: translateY(-4px); border-color: var(--accent); }
.nummerkort-bilete { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.nummerkort-bilete img, .nummerkort-bilete .utan-bilete { width: 100%; height: 100%; object-fit: cover; display: block; }
.nummerkort-nr {
  position: absolute; top: 0.5rem; left: 0.9rem; z-index: 2;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 3.2rem; font-weight: 600;
  color: rgba(242, 236, 224, 0.32); line-height: 1;
}
.nummerkort-kropp { padding: 1.3rem 1.4rem 1.5rem; }
.nummerkort-kropp h3 { margin: 0 0 0.5rem; }
.nummerkort-kropp p { color: var(--muted); margin: 0 0 1rem; }
.les-meir {
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem;
}

/* --- justeringar av eksisterande komponentar i mørkt tema --- */
body.tema-mork .section-alt { background: var(--surface-alt); }
body.tema-mork .section-dark { background: #06101a; }
body.tema-mork .card { background: var(--surface); border-color: var(--border); }
body.tema-mork .eyebrow { color: var(--accent); }
body.tema-mork .lead, body.tema-mork .hint, body.tema-mork .muted { color: var(--muted); }
body.tema-mork .hero { background: none; }
body.tema-mork footer.site { background: #06101a; border-top: 1px solid var(--border); }
body.tema-mork .nokkelstripe { background: var(--border); border-color: var(--border); }
body.tema-mork .nokkelfelt { background: var(--surface); }
body.tema-mork .verdirad { border-bottom-color: var(--border); }
body.tema-mork .verdirad h3 { color: var(--krem); }
body.tema-mork .datablad div { border-bottom-color: var(--border); }
body.tema-mork .klebrig-cta { background: rgba(6, 16, 26, 0.97); }
body.tema-mork .field input, body.tema-mork .field select, body.tema-mork .field textarea {
  background: var(--surface-alt); border-color: var(--border); color: var(--ink);
}
body.tema-mork .field input::placeholder, body.tema-mork .field textarea::placeholder { color: #6d8492; }
body.tema-mork .choice { background: var(--surface-alt); border-color: var(--border); }
body.tema-mork .choice:has(input:checked) { border-color: var(--accent); background: rgba(184, 134, 47, 0.1); box-shadow: none; }
body.tema-mork .step-dot { border-top-color: var(--border); }
body.tema-mork .summary-box { background: var(--surface); border-color: var(--border); }
body.tema-mork .summary-row { border-bottom-color: var(--border); }
body.tema-mork .price-estimate { color: var(--accent); }
body.tema-mork table.data { background: var(--surface); }
body.tema-mork table.data th { background: var(--surface-alt); }
body.tema-mork table.data th, body.tema-mork table.data td { border-bottom-color: var(--border); }
body.tema-mork .table-scroll { background: var(--surface); border-color: var(--border); }
body.tema-mork .notice-info { background: var(--primary-soft); border-color: var(--border); }
body.tema-mork .notice-warn { background: #2a2110; border-color: #4a3a18; }
body.tema-mork .notice-good { background: #10281f; border-color: #1d4a38; }
body.tema-mork .notice-bad { background: #2b1512; border-color: #55261f; }
body.tema-mork .miljomerke { background: #0f7a52; }
body.tema-mork .sitat { background: var(--surface); border-color: var(--border); }
body.tema-mork .sitat blockquote { color: var(--krem); }

/* Lite steg-tal på korta i teknisk-seksjonen. */
.tal-liten {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.5rem;
  color: var(--accent); font-weight: 600; display: block; margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Knappefargar i mørkt tema — må kome etter navigasjonsreglane.
   `body.tema-mork .nav a` er meir spesifikk enn `body.tema-mork .btn-accent`,
   så utan desse to reglane arvar CTA-en i toppmenyen menyfargen og blir
   messing på messing. Kontrastrevisjonen målte 1,29:1.
   Messing er lys nok til at teksten oppå må vere mørk, ikkje kvit — kvit på
   messing gir 3,2:1 og fell under kravet for brødtekst.
   --------------------------------------------------------------------------- */
body.tema-mork .btn,
body.tema-mork .nav a.btn { background: var(--primary); color: #171104; }
body.tema-mork .btn:hover,
body.tema-mork .nav a.btn:hover { background: #cf9a3c; color: #120d03; }
body.tema-mork .btn-ghost,
body.tema-mork .nav a.btn-ghost { background: transparent; color: var(--krem); border-color: rgba(230, 238, 243, 0.28); }
body.tema-mork .btn-ghost:hover { background: rgba(230, 238, 243, 0.08); color: #fff; }

/* Bakgrunnsbiletet i helten rører seg litt mot peikaren. Vi skalerer det opp
   nokre prosent så kantane aldri kjem innanfor når det flyttar seg. */
.helt-fullbleed > .helt-bilete { transform-origin: center; scale: 1.08; }

/* ---------------------------------------------------------------------------
   ANBEFALINGAR
   Kortmønsteret frå referansen: stjerner, sitat, og ein initial-sirkel med
   namn og rolle. På smal skjerm ligg dei i ei rad ein sveipar gjennom, som i
   referansen; frå 900 px blir det eit vanleg rutenett.
   --------------------------------------------------------------------------- */
.sitatrad {
  display: grid; gap: 1.1rem; grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 78vw);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sitatrad > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .sitatrad {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto; overflow: visible;
  }
}
.sitat {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--shadow-sm);
}
.stjerner { color: var(--accent); letter-spacing: 0.18em; font-size: 1.05rem; line-height: 1; }
.sitat blockquote {
  margin: 0; font-style: italic; font-size: 1.02rem; line-height: 1.55;
  color: var(--ink); font-family: inherit;
}
.sitat blockquote::before { content: none; }
.sitat-person { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.initialar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--accent); color: #171104;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
}
.sitat-namn { font-weight: 700; color: var(--krem, var(--ink)); line-height: 1.25; }
.sitat-rolle {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
  color: var(--muted); font-weight: 600; margin-top: 0.2rem;
}

/* Aksentord midt i ei overskrift, som i referansen. */
.aksentord { color: var(--accent); font-style: normal; }

/* --- "Kven er me" med lagbilete over --- */
.lagbilete { width: 100%; height: clamp(220px, 38vw, 420px); object-fit: cover; display: block; }
.omoss-tekst { max-width: 62ch; }
.omoss-skilje { border: none; border-top: 1px solid var(--border); margin: 2.25rem 0; }
.omoss-tekst .understreking { font-weight: 700; color: var(--krem, var(--ink)); font-size: 1.08rem; }

/* Kjelda står på linje med stjernene i staden for å presse seg inn under
   namnet — der brakk ho i tre linjer på smal skjerm. */
.sitat-topp { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sitat-kjelde {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem;
  color: var(--muted); font-weight: 700; white-space: nowrap;
}
.initialar { width: 46px; height: 46px; font-size: 0.92rem; }
.sitat-rolle { display: block; }

/* ---------------------------------------------------------------------------
   KONTAKTPERSONAR
   Eit namn og eit ansikt gjer meir for terskelen til å ta kontakt enn noko
   anna på sida. Kortet er difor bygd rundt portrettet, med telefon og e-post
   som store, trykkbare mål.
   --------------------------------------------------------------------------- */
.personrad { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .personrad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .personrad.tre { grid-template-columns: repeat(3, 1fr); } }
.personkort {
  background: var(--surface); border: 1px solid var(--border);
  padding: 2rem 1.5rem; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 0.4rem;
}
.personbilete {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  margin-bottom: 1rem; border: 3px solid var(--border);
}
.personkort .namn {
  font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase;
  font-size: 1.3rem; font-weight: 600; color: var(--krem, var(--ink)); letter-spacing: 0.02em;
}
.personkort .rolle {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem;
  color: var(--muted); font-weight: 700; margin-bottom: 1rem;
}
.personlenker { display: grid; gap: 0.55rem; width: 100%; margin-top: auto; }
.personlenker a {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); font-weight: 600; font-size: 0.94rem;
}
.personlenker a:hover { border-color: var(--accent); color: var(--accent); }
.personlenker svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }

/* Apparatet i admin: eigne seljarar og eksterne forhandlarar er to ulike
   samtalar, og skal difor lesast som to lister. */
.apparatbolk { margin-bottom: 2.25rem; }
.apparatbolk:last-child { margin-bottom: 0; }
.apparatbolk > .detail-head { border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }

/* ===========================================================================
   SALSVERKTØYET I MØRKT TEMA
   ---------------------------------------------------------------------------
   Verktøyet er lyst som standard: det skal lesast heile dagen og skrivast ut.
   Men den som sit med det i eit mørkt rom skal kunne velje sjølv, så her er
   dei komponentane verktøyet har som nettstaden ikkje har.
   =========================================================================== */

body.tema-mork.verktoyside { color: var(--ink); }
body.tema-mork .kpi,
body.tema-mork .stat-kort,
body.tema-mork .ordrekort,
body.tema-mork .kart-side,
body.tema-mork .detail,
body.tema-mork .avtale,
body.tema-mork .skjemaseksjon,
body.tema-mork .personkort { background: var(--surface); border-color: var(--border); }

body.tema-mork .stat-verdi,
body.tema-mork .kpi-num,
body.tema-mork .ring-tal { color: var(--krem); }
body.tema-mork .stat-etikett { color: var(--ink); }
body.tema-mork .agendadag > h3 { background: var(--bg); color: var(--krem); }

/* Fanene */
body.tema-mork .fane { border-color: var(--border); color: var(--ink); }
body.tema-mork .fane:hover { background: var(--surface); }
body.tema-mork .fane.aktiv { background: var(--accent); border-color: var(--accent); color: #171104; }
body.tema-mork .fane .teljar { background: var(--accent-soft); color: var(--accent); }
body.tema-mork .fane.aktiv .teljar { background: rgba(0, 0, 0, 0.22); color: #171104; }

/* Dialog */
body.tema-mork .modal { background: rgba(3, 9, 14, 0.72); }
body.tema-mork .modal-kort { background: var(--surface); }
body.tema-mork .modal-topp, body.tema-mork .modal-botn { border-color: var(--border); }
body.tema-mork .skjemaseksjon.intern { background: var(--accent-soft); border-color: var(--accent); }
body.tema-mork table.maltabell th { background: var(--surface-alt); }
body.tema-mork table.maltabell td { border-color: var(--border); }
body.tema-mork table.maltabell input, body.tema-mork table.maltabell select {
  background: var(--surface-alt); border-color: var(--border); color: var(--ink);
}
body.tema-mork table.maltabell tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* Diagram, målarar og stolpar */
body.tema-mork .manadsdiagram .stolpe-aar { fill: var(--accent); }
body.tema-mork .manadsdiagram .stolpe-fjor { stroke: var(--muted); }
body.tema-mork .manadsdiagram .stolpe-tal { fill: var(--krem); }
body.tema-mork .manadsdiagram .akse { stroke: var(--border); }
body.tema-mork .manadsdiagram .stolpegruppe:hover .stolpe-aar { fill: #d8a349; }
body.tema-mork .diagram-tegn .tegn-aar { background: var(--accent); }
body.tema-mork .stolpe { background: var(--surface-alt); }
body.tema-mork .stolpe span { background: var(--accent); }
body.tema-mork .malar-spor { background: var(--surface-alt); }
body.tema-mork table.data tr.meg td { background: rgba(184, 134, 47, 0.12); }
body.tema-mork table.data tr.clickable:hover td { background: rgba(255, 255, 255, 0.04); }

/* Kartet: kvit strek mellom fylka blir feil på mørk botn. */
/* Plassholdaren for manglande bilete er bygd på --primary. I mørkt tema er
   --primary messing, og kvit skrift på messing gir berre 3.24:1 — så her blir
   flata pinna til den djupe sjøblåe uansett tema. */
body.tema-mork .utan-bilete { background: linear-gradient(150deg, #0a3341, #10495a); }

body.tema-mork .fylke { stroke: var(--bg); }
body.tema-mork .norgeskart { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)); }
body.tema-mork .kart-tooltip { background: var(--surface-alt); border: 1px solid var(--border); }

/* Statusmerke */
body.tema-mork .tag-ny { background: #2a2110; color: #e0b25f; }
body.tema-mork .tag-sett { background: var(--surface-alt); color: var(--muted); }
body.tema-mork .tag-kontaktet { background: #16303f; color: #9fc9d8; }
body.tema-mork .tag-tilbud_sendt { background: #2a2110; color: #e0b25f; }
body.tema-mork .tag-oppfulgt { background: #232041; color: #b3aae8; }
body.tema-mork .tag-solgt { background: #10281f; color: #6cc4a1; }
body.tema-mork .tag-avslatt { background: #2b1512; color: #e29289; }
body.tema-mork .tag-muted { background: var(--surface-alt); color: var(--muted); }
body.tema-mork .statusknapp { background: var(--surface); border-color: var(--border); color: var(--ink); }
body.tema-mork .statusknapp.aktiv { background: var(--accent); border-color: var(--accent); color: #171104; }

/* Køen og ringen: statusfargane må lysne for å halde kontrasten på mørk botn. */
body.tema-mork .ko-god, body.tema-mork .malar-god { color: var(--good); }
body.tema-mork .ko-warn, body.tema-mork .malar-warn { color: var(--warn); }
body.tema-mork .ko-bad, body.tema-mork .malar-bad { color: var(--bad); }
body.tema-mork .malar-god { background: var(--good); }
body.tema-mork .malar-warn { background: var(--warn); }
body.tema-mork .malar-bad { background: var(--bad); }
body.tema-mork .live-prikk { background: var(--good); }

/* Temaveljaren */
.temaveljar {
  display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.temaveljar button {
  background: transparent; border: none; padding: 0.45rem 0.7rem; font: inherit;
  font-size: 0.82rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.temaveljar button.aktiv { background: var(--primary); color: #fff; }
body.tema-mork .temaveljar button.aktiv { background: var(--accent); color: #171104; }
body.tema-mork .temaveljar { border-color: var(--border); }

/* Set temaet før JavaScript rekk å køyre, så sida ikkje blinkar lys først. */
html.tema-mork-tidleg { color-scheme: dark; }
html.tema-mork-tidleg body { background: #0a1621; color: #e6eef3; }

/* ---------------------------------------------------------------------------
   Verktøyet skal ikkje arve display-typografien frå nettstaden. Der er
   overskriftene store versalar i Oswald — det er rett på ei landingsside, men
   verktøyet har titlar inne i kort og tabellar og treng den kompakte skrifta.
   .verktoy blir sett på <body> av salsverktøyet, aldri av nettstaden.
   --------------------------------------------------------------------------- */
body.tema-mork.verktoyside h1,
body.tema-mork.verktoyside h2,
body.tema-mork.verktoyside h3 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  text-transform: none; letter-spacing: normal; line-height: 1.2;
  font-weight: 700; color: var(--krem);
}
body.tema-mork.verktoyside h1 { font-size: 2rem; }
body.tema-mork.verktoyside h2 { font-size: 1.5rem; }
body.tema-mork.verktoyside h3 {
  font-family: "Inter", sans-serif; font-size: 1.1rem; color: var(--ink);
}
body.tema-mork.verktoyside .btn {
  text-transform: none; letter-spacing: normal; font-size: 0.92rem;
  font-weight: 600; padding: 0.6rem 1.05rem; border-radius: var(--radius-sm);
}
body.tema-mork.verktoyside .btn { background: var(--accent); color: #171104; }
body.tema-mork.verktoyside .btn:hover { background: #cf9a3c; color: #171104; }
body.tema-mork.verktoyside .btn-ghost {
  background: var(--surface); border-color: var(--border); color: var(--ink);
}
body.tema-mork.verktoyside .btn-ghost:hover { background: var(--surface-alt); color: var(--krem); }
body.tema-mork.verktoyside .btn-sm { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
body.tema-mork.verktoyside .toolbar { background: var(--surface); border-color: var(--border); }
body.tema-mork.verktoyside .card { background: var(--surface); border-color: var(--border); }
body.tema-mork.verktoyside input,
body.tema-mork.verktoyside select,
body.tema-mork.verktoyside textarea {
  background: var(--surface-alt); border-color: var(--border); color: var(--ink);
}
body.tema-mork.verktoyside label { color: var(--ink); }
body.tema-mork.verktoyside input[type=checkbox], body.tema-mork.verktoyside input[type=radio] { accent-color: var(--accent); }
body.tema-mork.verktoyside .hint, body.tema-mork.verktoyside .lead { color: var(--muted); }
body.tema-mork.verktoyside a { color: var(--accent); }

/* ===========================================================================
   DASHBORDET
   ---------------------------------------------------------------------------
   Seljarverktøyet er ikkje ei samling faner lenger, men éin skjerm. Jobben er
   å følgje opp kundar, så arbeidslista har den store kolonna og alt anna —
   kart, nøkkeltal, påminningar, pall og dagens tips — ligg i sidekolonna der
   det kan lesast utan å klikke. På telefon fell alt ned under kvarandre, og
   då kjem arbeidslista først.
   =========================================================================== */

.dashbord {
  display: grid;
  gap: 1.1rem;
  align-items: start;
}
/* Éi kolonne på telefon. Arbeidslista står først i HTML-en, så rekkefølgja
   blir riktig av seg sjølv — ingen order-triksing. */
@media (min-width: 1080px) {
  .dashbord { grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); }
  .dashbord-hovud { grid-column: 1; }
  .dashbord-side { grid-column: 2; }
}
.dashbord-hovud, .dashbord-side { display: grid; gap: 1.1rem; align-items: start; }
/* Standardverdien min-width:auto let eit breitt diagram eller ein brei tabell
   presse kolonna breiare enn rutenettet, og då legg sidekolonna seg oppå
   hovudkolonna. Alt breitt skal rulle inni sitt eige panel i staden. */
.dashbord > *, .dashbord-hovud > *, .dashbord-side > * { min-width: 0; }
.dashbord svg:not(.norgeskart) { max-width: 100%; height: auto; }

/* Panela i dashbordet. Same ramme som .card, men med ei fast topplinje slik
   at rutenettet får ein tydeleg rytme. */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel-topp {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.panel-topp h2, .panel-topp h3 { margin: 0; font-size: 1.05rem; }
.panel-topp .hint { margin: 0; }
.panel-topp .spacer { margin-left: auto; }
.panel-tett { padding: 0.75rem 0.85rem; }
.dashbord-side .kpi { padding: 0.7rem 0.8rem; }
.dashbord-side .kpi-num { font-size: 1.5rem; }

/* ---------------------------------------------------------------------------
   Kontrollpanelet på hovudkontoret
   ---------------------------------------------------------------------------
   Fire knappar som fortel kor mange saker som ventar, og eit søkefelt under.
   Knappane er tal først, tekst etter: talet er det ein ser frå andre sida av
   rommet, og er det null, er knappen slått av og dempa — ingenting å gjere
   er ein gyldig og hyggjeleg tilstand.

   Varselmerket er ein raud ring med utropsteikn ved sida av talet, ikkje ein
   raud farge på talet. Farge åleine ville forsvunne for den som ikkje ser
   raudt, og eit tal som byter farge er lett å lese som pynt. */
.kontrollrad {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 820px) { .kontrollrad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kontrollkort {
  display: flex; flex-direction: column; gap: 0.15rem;
  text-align: left; cursor: pointer;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.7rem 0.8rem;
  color: inherit; font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.kontrollkort:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
.kontrollkort:disabled { cursor: default; opacity: 0.6; }
.kontrolltal {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--primary);
}
.kontrolltittel { font-weight: 600; }
.kontrollkort .hint { margin: 0; }

.kontrollkort-varsel { border-color: var(--bad); background: var(--bad-soft); }
.kontrollkort-varsel .kontrolltal { color: var(--bad); }
.varselmerke {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; background: var(--bad); color: #fff;
  font-size: 0.95rem; font-weight: 700;
}

.sokefelt { max-width: 34rem; }

/* Søkeresultatet. Kvar rad er ein knapp i full breidd — han skal treffast med
   tommelen medan ein held telefonen i den andre handa. */
.sokeliste { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.sokerad {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.55rem 0.7rem;
  color: inherit; font: inherit;
}
.sokerad:hover { border-color: var(--primary); }
.sokerad-namn { display: block; font-weight: 600; }
.sokerad .hint { display: block; margin: 0; }

/* Summen under det vesle ordreinngangsdiagrammet i sidekolonna. */
.panel-sum { margin: 0.4rem 0 0; }
.panel-sum strong { font-size: 1.25rem; }

/* ---------------------------------------------------------------------------
   Kontakttemperatur
   ---------------------------------------------------------------------------
   Fargane er validerte: dei held minst 4,5:1 som tekst i begge tema, og
   nabopara er skiljbare ved protanopi og deuteranopi. Fargen står aldri
   åleine — kvart merke har alltid tekst, og «gjenoppretting» har i tillegg
   ei skrå stripe, slik at den skil seg frå rein grøn òg i svart-kvitt.
   --------------------------------------------------------------------------- */
:root {
  --temp-gron: #0f7a52;
  --temp-gron-blekk: #0d6e4a;
  --temp-gron-mjuk: #dcefe7;
  --temp-oransje: #c07a08;
  --temp-oransje-blekk: #8a5510;
  --temp-oransje-mjuk: #f8eeda;
  --temp-raud: #b32218;
  --temp-raud-blekk: #b32218;
  --temp-raud-mjuk: #f7e3e1;
}
body.tema-mork {
  --temp-gron: #35c48f;
  --temp-gron-blekk: #35c48f;
  --temp-gron-mjuk: #10281f;
  --temp-oransje: #f5c542;
  --temp-oransje-blekk: #f5c542;
  --temp-oransje-mjuk: #2a2110;
  --temp-raud: #f76d6d;
  --temp-raud-blekk: #f76d6d;
  --temp-raud-mjuk: #2b1512;
}

.temp {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.55rem 0.2rem 0.45rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.temp::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor; flex: none;
}
.temp-gron { background: var(--temp-gron-mjuk); color: var(--temp-gron-blekk); }
.temp-oransje { background: var(--temp-oransje-mjuk); color: var(--temp-oransje-blekk); }
.temp-raud { background: var(--temp-raud-mjuk); color: var(--temp-raud-blekk); }
/* Gjenoppretting: grøn, men aldri heilt grøn. Stripene gjer skilnaden synleg
   også for den som ikkje ser fargen. */
.temp-gjenoppretting {
  color: var(--temp-gron-blekk);
  background:
    repeating-linear-gradient(135deg,
      var(--temp-gron-mjuk) 0, var(--temp-gron-mjuk) 4px,
      var(--temp-oransje-mjuk) 4px, var(--temp-oransje-mjuk) 8px);
  border-color: var(--temp-oransje);
}
.temp-avslutta { background: var(--surface-alt); color: var(--muted); }
.temp-avslutta::before { background: var(--muted); }

/* Same fargespråk som ei tynn stripe langs venstre kant av leadraden. */
/* Tellarane over arbeidslista: klikkbare filter, ikkje berre pynt. */
.tempfilter { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tempfilter button {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  border: 1.5px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 0.3rem 0.75rem; font: inherit;
  font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.tempfilter button:hover { background: var(--surface-alt); }
.tempfilter button.aktiv { border-color: var(--primary); background: var(--primary-soft); }
body.tema-mork .tempfilter button.aktiv { border-color: var(--accent); background: var(--accent-soft); }
.tempfilter b { font-size: 0.95rem; }
.tempfilter .prikk {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block;
  align-self: center;
}

/* ---------------------------------------------------------------------------
   Arbeidslista
   --------------------------------------------------------------------------- */
.arbeidsliste { display: grid; gap: 0.5rem; }
.leadrad {
  display: grid; gap: 0.15rem 0.8rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
  font: inherit; color: inherit; cursor: pointer;
  grid-template-areas: "namn temp" "stad tid" "prod prod";
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (min-width: 720px) {
  .leadrad {
    grid-template-areas: "namn stad prod temp tid";
    grid-template-columns: minmax(8rem, 1.3fr) minmax(6rem, 1fr) minmax(6rem, 1fr) auto auto;
    align-items: center;
  }
}
.leadrad:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.leadrad.valt { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
body.tema-mork .leadrad:hover, body.tema-mork .leadrad.valt { border-color: var(--accent); }
body.tema-mork .leadrad.valt { box-shadow: 0 0 0 2px var(--accent-soft); }
.leadrad-namn { grid-area: namn; font-weight: 700; }
.leadrad-stad { grid-area: stad; color: var(--muted); font-size: 0.86rem; }
.leadrad-prod { grid-area: prod; color: var(--muted); font-size: 0.86rem; }
.leadrad-temp { grid-area: temp; justify-self: end; }
.leadrad-tid { grid-area: tid; justify-self: end; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.leadrad-merke { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; vertical-align: middle; }

.leadrad { border-left: 4px solid transparent; }
.leadrad-gron { border-left-color: var(--temp-gron); }
.leadrad-oransje { border-left-color: var(--temp-oransje); }
.leadrad-raud { border-left-color: var(--temp-raud); }
.leadrad-gjenoppretting {
  border-left-color: var(--temp-gron);
  border-left-style: dashed;
}
.leadrad-avslutta { border-left-color: var(--border); }


/* ---------------------------------------------------------------------------
   Pallen
   ---------------------------------------------------------------------------
   Litt leik, men tala skal framleis lesast. Høgda på pallen er fast per
   plassering (den tyder rang, ikkje mengde) — omsetninga står som tal.
   --------------------------------------------------------------------------- */
.pall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; align-items: end; }
.pall-plass { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.pall-medalje { font-size: 1.5rem; line-height: 1; }
.pall-namn { font-size: 0.8rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pall-tal { font-size: 0.76rem; color: var(--muted); }
.pall-sokkel {
  width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, var(--primary-soft), var(--surface-alt));
  border: 1px solid var(--border); border-bottom: none;
  display: grid; place-items: center; font-weight: 800; color: var(--primary);
}
body.tema-mork .pall-sokkel {
  background: linear-gradient(180deg, var(--accent-soft), var(--surface-alt));
  color: var(--accent);
}
.pall-1 .pall-sokkel { height: 4.6rem; }
.pall-2 .pall-sokkel { height: 3.4rem; }
.pall-3 .pall-sokkel { height: 2.5rem; }
.pall-plass.meg .pall-namn { color: var(--primary); }
body.tema-mork .pall-plass.meg .pall-namn { color: var(--accent); }
.pall-eg {
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--border);
  font-size: 0.85rem; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Dagens tips
   --------------------------------------------------------------------------- */
.tips { border-left: 4px solid var(--accent); }
.tips-merke {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-tekst); margin-bottom: 0.25rem;
}
body.tema-mork .tips-merke { color: var(--accent); }
.tips h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.tips p { margin: 0; font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   Tilbodslinjer (delelista)
   --------------------------------------------------------------------------- */
table.linjer { width: 100%; border-collapse: collapse; }
table.linjer th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); padding: 0.3rem 0.35rem;
  font-weight: 700;
}
table.linjer td { padding: 0.2rem 0.35rem; border-bottom: 1px solid var(--border); }
table.linjer input, table.linjer select {
  width: 100%; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
table.linjer .tal, table.linjer th.tal { text-align: right; }
table.linjer .linjesum { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tilbodsum {
  display: grid; gap: 0.25rem; margin-top: 0.8rem; padding-top: 0.7rem;
  border-top: 2px solid var(--border);
}
.tilbodsum div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.tilbodsum .total { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
body.tema-mork .tilbodsum .total { color: var(--krem); }
.tilbodsum .avvik { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Bistand frå daglig leder
   --------------------------------------------------------------------------- */
.bistandsmerke {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 999px; padding: 0.15rem 0.5rem;
  font-size: 0.72rem; font-weight: 700;
}
body.tema-mork .bistandsmerke { background: var(--accent-soft); color: var(--accent); }
.bistandsmerke.svart { background: var(--temp-gron-mjuk); color: var(--temp-gron-blekk); }

/* ---------------------------------------------------------------------------
   Arkivet
   --------------------------------------------------------------------------- */
.arkivrad {
  display: grid; gap: 0.15rem 0.8rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-alt);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.arkivrad + .arkivrad { margin-top: 0.45rem; }
.arkivrad .grunngiving { grid-column: 1 / -1; font-size: 0.86rem; color: var(--muted); }

/* Temperaturlinja øvst i detaljpanelet */
.temp-linje {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.8rem;
}
.temp-linje .spacer { margin-left: auto; }

/* Ei knapp som ser ut som ei lenke. Brukt i påminningane og på kartet, der
   handlinga er «hopp hit» og ikkje «send skjema». */
.lenkeknapp {
  background: none; border: none; padding: 0; font: inherit; text-align: left;
  color: var(--primary); text-decoration: underline; cursor: pointer;
}
body.tema-mork .lenkeknapp { color: var(--accent); }
.lenkeknapp:hover { text-decoration: none; }

ul.paaminn { list-style: none; padding: 0; margin: 0.35rem 0 0; display: grid; gap: 0.3rem; }
ul.paaminn li { margin: 0; font-size: 0.86rem; line-height: 1.35; }
ul.paaminn .lenkeknapp { color: inherit; text-decoration: none; }
ul.paaminn .lenkeknapp:hover { text-decoration: underline; }

/* Ein liten definisjonsliste-variant til sidekolonna */
dl.minitabell { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; margin: 0; }
dl.minitabell dt { font-size: 0.84rem; color: var(--muted); margin: 0; }
dl.minitabell dd { font-size: 0.84rem; font-weight: 700; margin: 0; text-align: right; }

/* Tilbodsarket i førehandsvisninga */
.tilbodsark table.data { margin-top: 0.8rem; }
.tilbodsark .tilbodsum { max-width: 22rem; margin-left: auto; }

@media print {
  /* Skriv du ut frå tilbodsvindauget, er det tilbodet du vil ha på papiret —
     ikkje heile dashbordet bak. */
  body:has(.tilbodsark) .app-shell,
  body:has(.tilbodsark) .modal-topp,
  body:has(.tilbodsark) .modal-botn { display: none !important; }
  body:has(.tilbodsark) .modal { position: static; background: none; padding: 0; }
  body:has(.tilbodsark) .modal-kort { box-shadow: none; max-height: none; }
}

/* ---------------------------------------------------------------------------
   Marknadskanalar og fordelingsrader (hovudkontoret)
   ---------------------------------------------------------------------------
   Stolpen måler tal leads. Omsetning og treffprosent står som tal ved sida av,
   ikkje som ein andre stolpe — to måleiningar i same geometri blir ei løgn om
   kor stor skilnaden er.
   --------------------------------------------------------------------------- */
.kanalliste, .kanalhovud { display: grid; gap: 0.3rem; }
.kanalrad, .kanalhovud {
  display: grid; align-items: center; gap: 0.5rem;
  grid-template-columns: minmax(4.5rem, 1fr) minmax(2.5rem, 2.2fr) 2rem 4.2rem 2.6rem;
  font-size: 0.82rem;
}
.kanalhovud { color: var(--muted); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.03em; font-weight: 700; margin-bottom: 0.3rem; }
.kanalhovud span:nth-child(n+3) { text-align: right; }
.kanalnavn { font-weight: 600; overflow-wrap: anywhere; }
.kanalstolpe { background: var(--surface-alt); border-radius: 4px; height: 10px; overflow: hidden; }
.kanalstolpe i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
body.tema-mork .kanalstolpe i { background: var(--accent); }
.kanaltal, .kanalverdi, .kanaltreff { text-align: right; font-variant-numeric: tabular-nums; }
.kanalverdi { font-weight: 700; }
.kanaltreff { color: var(--muted); }

.fordelingsrad {
  display: grid; align-items: center; gap: 0.5rem;
  grid-template-columns: minmax(5.5rem, auto) 1fr 2rem;
  margin-bottom: 0.35rem; font-size: 0.85rem;
}
.fordelingsnavn { overflow-wrap: anywhere; }
.fordelingsstolpe { background: var(--surface-alt); border-radius: 4px; height: 10px; overflow: hidden; }
.fordelingsstolpe i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
body.tema-mork .fordelingsstolpe i { background: var(--accent); }
.fordelingstal { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.fyll-gron { background: var(--temp-gron) !important; }
.fyll-oransje { background: var(--temp-oransje) !important; }
.fyll-raud { background: var(--temp-raud) !important; }
.fyll-gjenoppretting { background: var(--temp-gron) !important; opacity: 0.65; }
.fyll-solgt { background: var(--temp-gron) !important; }
.fyll-avslatt { background: var(--temp-raud) !important; }

/* Ein tom seksjon skal ikkje legge igjen luft. Bistandsvarselet på
   hovudkontoret er der berre når nokon faktisk ventar på svar. */
#seksjonBistand:empty { display: none; }

/* Innlimingsboksen i «Nytt lead». Lukka som standard — den er der for
   overgangsperioden mens den gamle nettsiden fortsatt sender e-post. */
.limboks {
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; background: var(--surface-alt);
}
.limboks summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.limboks[open] summary { margin-bottom: 0.3rem; }
.limboks textarea {
  font: inherit; font-size: 0.88rem; padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); resize: vertical;
}

/* ===========================================================================
   NETTVERKET AV LOKALE REPRESENTANTAR
   ---------------------------------------------------------------------------
   Kartet har to tilstandar, ikkje ein skala: dekt eller ledig. Fargen står
   aldri åleine — teiknforklaringa har tekst, dei ledige fylka har stipla
   strek i tillegg, og kvart fylke har eit tilgjengeleg namn.
   =========================================================================== */

.nettverk-oppsett { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 900px) {
  .nettverk-oppsett { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.4rem; }
}
.nettverk-oppsett > * { min-width: 0; }

.nettkart .norgeskart { filter: drop-shadow(0 12px 30px rgba(10, 22, 33, 0.18)); }
.nettfylke {
  stroke: var(--bg); stroke-width: 0.9; cursor: pointer;
  transition: fill 0.2s ease, opacity 0.2s ease;
}
.nettfylke.dekt { fill: #10495a; }
.nettfylke.ledig { fill: #c8dce1; stroke: #2f6d82; stroke-dasharray: 3 2.5; stroke-width: 1.5; }
.nettfylke:hover, .nettfylke:focus-visible { opacity: 0.82; outline: none; }
.nettfylke.valt { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: none; }
.nettfylke:focus-visible { stroke: var(--accent); stroke-width: 2.4; }

body.tema-mork .nettfylke.dekt { fill: #b8862f; }
body.tema-mork .nettfylke.ledig { fill: #23505f; stroke: #9ed3e4; }
body.tema-mork .nettkart .norgeskart { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5)); }

.nettverk-tegn {
  display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center;
  margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600;
}
.nettverk-tegn .tegn-rad { display: inline-flex; align-items: center; gap: 0.45rem; }
.nettverk-tegn i { width: 1rem; height: 1rem; border-radius: 3px; display: inline-block; }
.nettverk-tegn .prov-dekt { background: #10495a; }
.nettverk-tegn .prov-ledig { background: #c8dce1; border: 1.5px dashed #2f6d82; }
body.tema-mork .nettverk-tegn .prov-dekt { background: #b8862f; }
body.tema-mork .nettverk-tegn .prov-ledig { background: #23505f; border-color: #9ed3e4; }

.nettverk-detalj {
  margin-top: 0.9rem; padding: 0.85rem 1rem; min-height: 5.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.nettverk-detalj h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.nettverk-detalj p + p { margin-top: 0.3rem; }
.statusprikk {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block;
  margin-right: 0.4rem; vertical-align: baseline;
}
.statusprikk.dekt { background: #10495a; }
.statusprikk.ledig { background: #c8dce1; border: 1.5px solid #2f6d82; }
body.tema-mork .statusprikk.dekt { background: var(--accent); }
body.tema-mork .statusprikk.ledig { background: #23505f; border-color: #9ed3e4; }

/* Dei tre tala. Store nok til å lesast på avstand — det er dei som skal
   feste seg, både hos kunden og hos den som vurderer å bli med. */
.nettverk-tal {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.nettverk-tal > div { text-align: center; }
.nettverk-tal strong {
  display: block; font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; font-weight: 700;
  color: var(--primary-dark); font-variant-numeric: tabular-nums;
}
body.tema-mork .nettverk-tal strong { color: var(--accent); }
.nettverk-tal span {
  display: block; font-size: 0.8rem; color: var(--muted); font-weight: 600;
  margin-top: 0.35rem; line-height: 1.3;
}
.nettverk-ledig {
  border-left: 4px solid var(--accent); padding: 0.6rem 0 0.6rem 0.9rem;
  margin: 1.1rem 0;
}

ul.hakeliste { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.45rem; }
ul.hakeliste li { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; }
ul.hakeliste li::before {
  content: "✓"; color: var(--accent); font-weight: 800; flex-shrink: 0;
}

.repskjema {
  margin-top: 1.4rem; padding: 1.2rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
body.tema-mork .repskjema { background: var(--surface); border-color: var(--border); }

/* Montering og reise — eige felt i tilbodet, med eigen sum.
   Ramma er der for å seie at dette ikkje er ei linje i delelista. */
.monteringsfelt {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
  margin: 0;
}
.monteringsfelt legend {
  padding: 0 .4rem;
  font-weight: 600;
  font-size: .95rem;
}
.monteringsfelt .field { margin-bottom: 0; }
.tilbodsum-liten { font-size: .95rem; }
.tilbodsum-liten .total { font-size: 1rem; }

/* Vedlegg til ordren — skisser og bilete. Miniatyrane er små med vilje:
   dei skal seie «her er ei teikning», ikkje ta over sida. Klikk opnar. */
.vedleggsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vedleggsliste li {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.vedleggsliste img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none;
}
.vedleggsikon {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  border-radius: 6px; background: var(--primary-soft);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
}
.vedleggsnavn { flex: 1; min-width: 0; word-break: break-word; font-size: .9rem; }

/* Provisjonsruta. Lukka som standard, og alltid borte i utskrift — sjå
   kommentaren over provisjonsrute() for kvifor det ikkje berre er pynt. */
.provisjon {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  background: var(--surface);
}
.provisjon > summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--muted);
}
.provisjon[open] > summary { margin-bottom: .4rem; }
@media print { .provisjon { display: none !important; } }

/* Dagens tips: hjartet og bytetidspunktet.
   Hjartet er lite og roleg til det blir trykt — då får det ein kort hopp.
   Ingen animasjon for dei som har bedt om mindre rørsle. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tipsbotn {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .75rem;
}
.likeknapp {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 1.5px solid var(--border);
  border-radius: 999px; padding: .3rem .7rem;
  color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.likeknapp:hover { border-color: var(--bad); color: var(--bad); }
.likeknapp.likt { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.likeknapp:disabled { opacity: .6; cursor: default; }
.likehjarte { font-size: 1.1rem; line-height: 1; }
.liketal { font-variant-numeric: tabular-nums; font-weight: 600; }
.likeknapp.hopp .likehjarte { animation: hjarteslag .35s ease-out; }
@keyframes hjarteslag {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .likeknapp.hopp .likehjarte { animation: none; }
}

/* Sprossetilbodet: figur til venstre, felt i midten, pris til høgre.
   Figuren er teikna av dei same tala som står i felta — den kan difor ikkje
   vise noko anna enn det som blir bestilt. */
.sprosselinje {
  display: grid;
  grid-template-columns: 215px 1fr 8.5rem;
  gap: 1rem;
  align-items: start;
  padding: .8rem 0;
  border-top: 1px solid var(--border);
}
.sprosselinje:first-child { border-top: none; }
.sprossefigurboks {
  display: grid; place-items: center;
  min-height: 190px; padding: .6rem;
  background: var(--primary-soft); border-radius: var(--radius-sm);
}
.sprossefelt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem .75rem;
}
.sprossefelt .field { margin: 0; }
.sprossefelt .field span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .15rem; }
.sprossefelt input, .sprossefelt select { width: 100%; }
.sprossepris { text-align: right; display: grid; gap: .2rem; justify-items: end; align-content: start; }
.sprossepris strong { font-size: 1.05rem; }

.sprossefigur { max-width: 100%; height: auto; overflow: visible; }

/* Glaset. Himmelen bak gjer at figuren les seg som eit vindauge og ikkje som
   eit rutenett, og glansstripene er det som skil glas frå tomrom. */
.sprossefigur .sp-himmel-topp { stop-color: #9ec3dd; }
.sprossefigur .sp-himmel-botn { stop-color: #dcebf3; }
.sprossefigur .sp-glans { fill: #fff; opacity: .3; }
.sprossefigur .sp-glans-svak { opacity: .15; }
.sprossefigur .sp-glaskant { stroke: rgba(12, 38, 56, .28); stroke-width: 1.1; }

/* Profilane. Kvar list får ein gradient på tvers — lys kant, flate, skuggekant
   — så ein 84 mm sprosse ser ut som ein brei list og ikkje som ein feit strek. */
.sprossefigur .sp-pr-lys { stop-color: #fff; }
.sprossefigur .sp-pr-flate { stop-color: #f6f9fa; }
.sprossefigur .sp-pr-mork { stop-color: #c8dae3; }
.sprossefigur .sp-spor { stroke: rgba(12, 38, 56, .13); stroke-width: .8; }
.sprossefigur .sp-karmkant { stroke: rgba(12, 38, 56, .3); stroke-width: .9; }

/* Sprosseverket er tynt og lyst; midtstolpe og losholt er berande og tjukkare,
   og skal difor lesast som noko anna enn ei vanleg sprosse. */
.sprossefigur .sp-verk { stroke: rgba(12, 38, 56, .3); stroke-width: .4; }
.sprossefigur .sp-berande { stroke: rgba(12, 38, 56, .45); stroke-width: .7; }
.sprossefigur .sp-kryss { fill: none; stroke: #f2f7f9; stroke-linecap: round; }
.sprossefigur .sp-bue { fill: none; stroke: #f2f7f9; stroke-linecap: round; }
.sprossefigur .sp-hengsel { fill: var(--accent-tekst); }
.sprossefigur .sp-maal { stroke: var(--muted); stroke-width: .7; }
.sprossefigur .sp-maaltekst { font-size: 8.5px; fill: var(--muted); }
.sprossefigur .sp-rutetekst { font-size: 8.5px; fill: var(--muted); font-weight: 600; }

body.tema-mork .sprossefigur .sp-himmel-topp { stop-color: #163a4f; }
body.tema-mork .sprossefigur .sp-himmel-botn { stop-color: #2f5c76; }
body.tema-mork .sprossefigur .sp-glans { opacity: .16; }
body.tema-mork .sprossefigur .sp-glans-svak { opacity: .08; }
body.tema-mork .sprossefigur .sp-glaskant { stroke: rgba(0, 0, 0, .38); }
body.tema-mork .sprossefigur .sp-pr-flate { stop-color: #eef3f5; }
body.tema-mork .sprossefigur .sp-pr-mork { stop-color: #b6cad4; }
body.tema-mork .sprossefigur .sp-spor { stroke: rgba(12, 38, 56, .2); }
body.tema-mork .sprossefigur .sp-karmkant { stroke: rgba(0, 0, 0, .4); }

@media (max-width: 720px) {
  .sprosselinje { grid-template-columns: 1fr; }
  .sprossepris { justify-items: start; text-align: left; }
}


/* Typeveljaren: dei ni standardtypane frå måleskjemaet, teikna med same motor
   som sjølve linja — så det seljaren peikar på er det same som blir teikna. */
.typeveljar {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 0;
}
.typeknapp {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: .3rem .3rem .15rem; cursor: pointer;
  display: grid; justify-items: center; gap: .1rem; line-height: 1;
}
.typeknapp:hover { border-color: var(--primary); }
.typeknapp.valt { border-color: var(--accent-tekst); border-width: 2px; padding: calc(.3rem - .5px); }
.typeknapp svg { display: block; }
.typeknapp span { font-size: .68rem; color: var(--muted); font-weight: 700; }
.typeknapp.valt span { color: var(--accent-tekst); }
.typeknapp.fri { min-width: 3.4rem; min-height: 3.4rem; align-content: center; }
.typeetikett { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .1rem; }
.sprossefelt > .brei { grid-column: 1 / -1; }

/* Seljarkorta på hovudkontorsida.
   Kartet til venstre og tala til høgre: kartet svarer på «kvar», tala på
   «kor mykje og korleis». Saman er det eit portrett av ein seljar. */
.apparatstyring { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aarsveljar { display: inline-flex; gap: .25rem; }
.aarknapp {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted);
  padding: .3rem .7rem; cursor: pointer; font-weight: 700; font-size: .85rem;
}
.aarknapp:hover { border-color: var(--primary); }
.aarknapp.valt { border-color: var(--accent-tekst); color: var(--accent-tekst); border-width: 2px; padding: calc(.3rem - .5px) calc(.7rem - .5px); }

.seljarkort .kortkropp { display: grid; grid-template-columns: 116px 1fr; gap: .9rem; margin-top: .7rem; }
.kortkart { display: grid; place-items: start center; }
.kortkart .kartboks { width: 100%; }
.korttal { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin: 0; }
.korttal > div { margin: 0; min-width: 0; }
.korttal > .brei { grid-column: 1 / -1; }
.korttal dt { font-size: .74rem; color: var(--muted); font-weight: 600; margin: 0; }
.korttal dt .hint { font-size: .7rem; font-weight: 400; }
/* Atterhaldet om tynt grunnlag høyrer til under merka, ikkje ved sida av dei —
   inline blir det ei setning som slyngjer seg mellom pillene. */
.korttal .grunnatterhald { display: block; font-size: .72rem; margin-top: .2rem; }
.korttal dd { margin: 0; font-size: .9rem; }
.korttal dd.tal { display: grid; line-height: 1.25; }
.korttal dd.tal strong { font-size: 1.02rem; }
.korttal dd .hint { font-size: .72rem; }
.korttal .tomtal { color: var(--muted); font-weight: 400; }
.grunnmerke {
  display: inline-block; background: var(--primary-soft); border-radius: 999px;
  padding: .1rem .55rem; font-size: .76rem; margin: .12rem .25rem .12rem 0;
}
.grunnmerke b { font-weight: 800; }

.distriktval { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.distriktval summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 600; }
.hakelinje {
  display: flex; gap: .5rem; align-items: center;
  font-weight: 500; font-size: .9rem; padding: .12rem 0;
}
.hakelinje input { width: auto; }

/* Arkiverte er ikkje borte, berre ute av drift. Dempa, ikkje gøymt. */
.arkivkort { opacity: .72; }
.arkivkort:hover, .arkivkort:focus-within { opacity: 1; }

@media (max-width: 620px) {
  .seljarkort .kortkropp { grid-template-columns: 1fr; }
  .kortkart { max-width: 150px; }
}

/* Ordreinngang: årssummen og regnskapstalet under diagrammet.
   Dei står side om side, men aldri i same søylerekkje — det eine er kva som
   vart bestilt, det andre kva som vart inntektsført. */
.aarsfakta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: end;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border);
}
.aarsfakta > div { display: grid; }
.aarsfakta dt { font-size: .74rem; color: var(--muted); font-weight: 600; margin: 0; }
.aarsfakta dt .hint { font-size: .7rem; font-weight: 400; }
.aarsfakta dd { margin: 0; display: grid; line-height: 1.25; }
.aarsfakta dd strong { font-size: 1.05rem; }
.aarsfakta dd .hint { font-size: .72rem; }
.aarsfakta > .btn { margin-left: auto; }

/* Lyst/mørkt på nettstaden. Ligg i menyen, ikkje som eit flytande ikon:
   det er ei innstilling, ikkje ei handling sida vil at du skal gjere. */
.temaknapp {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); cursor: pointer;
  padding: .3rem .7rem; font-size: .8rem; font-weight: 600; line-height: 1;
}
.temaknapp:hover { color: var(--ink); border-color: var(--primary); }
body.tema-mork .temaknapp { border-color: var(--border); color: var(--muted); }
body.tema-mork .temaknapp:hover { color: var(--krem); border-color: var(--accent); }
@media (max-width: 860px) {
  .temaknapp-tekst { display: none; }
}

/* Kampanjar.
   På kundekortet står dei som lappar rett under temperaturlinja: der seljaren
   alt ser etter «kva gjeld denne saka», og før han byrjar å skrive tilbod. */
.kampanjeband { display: grid; gap: .5rem; margin: .8rem 0; }
.kampanjelapp {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .6rem .8rem;
}
.kampanjelapp-topp { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.kampanjelapp p { font-size: .9rem; }

/* Panelet på dashbordet er ei påminning, ikkje sjølve kampanjen. Difor er
   talet det største der: «4 av sakene dine» er ei oppgåve. */
.kampanjerad {
  display: flex; gap: .6rem; align-items: center; justify-content: space-between;
  padding: .45rem 0; border-top: 1px solid var(--border);
}
.kampanjerad:first-of-type { border-top: none; }
.kampanjerad .hint { display: block; font-size: .74rem; }
.kampanjetreff {
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-tekst);
  border-radius: 999px; padding: .18rem .6rem;
}
.kampanjetreff.tom { background: var(--surface-alt); color: var(--muted); font-weight: 500; }
body.tema-mork .kampanjetreff { color: var(--accent); }

.kampanjekort.gaar { border-left: 3px solid var(--good); }
.seljarhaker { columns: 2; column-gap: 1.2rem; }
@media (max-width: 620px) { .seljarhaker { columns: 1; } }

/* Kundeanmeldingar. Stjernene skal lesast som ei vurdering og ikkje som pynt:
   dei fylte er messing, dei tomme er berre eit omriss i same form, så
   forskjellen mellom fire og fem er tydeleg utan å telje. */
.stjerner { color: var(--accent-tekst); letter-spacing: .06em; font-size: .95rem; }
body.tema-mork .stjerner { color: var(--accent); }
.stjerner .tom { opacity: .22; }
.anmelding { padding: .6rem 0; border-top: 1px solid var(--border); }
.anmelding:first-of-type { border-top: none; }
.anmelding p { font-size: .88rem; }
.anmelding-topp { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.anmelding-topp .hint { font-size: .72rem; }
.anmelding-botn { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.anmelding-botn select { max-width: 12rem; }

/* Saker sett frå hovudkontoret.
   Ein tal-flis med saker bak seg skal sjå ut som noko du kan opne — elles blir
   den lesen som ein plakat og aldri trykt på. */
.stat-kort-knapp {
  font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--border); width: 100%;
}
.stat-kort-knapp:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.stat-kort-knapp::after {
  content: "›"; position: absolute; top: .6rem; right: .8rem;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
}
.stat-kort { position: relative; }

tr.klikkbar { cursor: pointer; }
tr.klikkbar:hover td { background: var(--primary-soft); }

.saksliste { display: grid; }
.sakslinje {
  display: grid; grid-template-columns: 3.2rem 1fr 10rem 8rem; gap: .7rem;
  align-items: center; text-align: left; font: inherit; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--border);
  padding: .55rem .3rem; color: inherit; width: 100%;
}
.sakslinje:first-child { border-top: none; }
.sakslinje:hover { background: var(--primary-soft); }
.saksnamn, .sakseigar { display: grid; min-width: 0; line-height: 1.3; }
.saksnamn .hint, .sakseigar .hint { font-size: .75rem; }
.sakstid { text-align: right; font-size: .78rem; }

.logg { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.logg li { border-left: 2px solid var(--border); padding-left: .7rem; font-size: .88rem; }

@media (max-width: 700px) {
  .sakslinje { grid-template-columns: 3rem 1fr; }
  .sakseigar, .sakstid { grid-column: 2; text-align: left; }
}

/* Kollisjonsvarselet under avtaleskjemaet. Det hindrar ikkje — det viser. */
.krasjliste { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .25rem; }
.krasjliste li { font-size: .88rem; }

/* ---------------------------------------------------------------------------
   Modellfigurar og valde produkt i bestillingsskjemaet
   ---------------------------------------------------------------------------
   Figurane (js/modellfigur.js) er teikna i currentColor og arvar difor
   temafargen. Det einaste dei set sjølve er kva som er gjennomsiktig (glas),
   kva som lyser og kva som er ei målelinje.
--------------------------------------------------------------------------- */
.modellfigur {
  display: block; width: 100%; height: auto; aspect-ratio: 160 / 96;
  margin-bottom: 0.5rem; color: var(--primary-dark);
  background: var(--surface-alt); border-radius: 8px; padding: 0.35rem;
}
.modellfigur rect, .modellfigur path, .modellfigur ellipse, .modellfigur circle {
  fill: currentColor; stroke: none;
}
/* Glas er hol, ikkje flate. */
.modellfigur .figur-glas { fill: currentColor; opacity: 0.1; stroke: currentColor;
  stroke-width: 1.5; }
.modellfigur .figur-glas-sota { opacity: 0.32; }
.modellfigur .figur-glas-frosta { opacity: 0.18; }
.modellfigur .figur-opa { fill: currentColor; opacity: 0.12; }
/* Strekar: bakke, glans, målelinje, vind. */
.modellfigur .figur-bakke, .modellfigur .figur-glans, .modellfigur .figur-maal path,
.modellfigur .figur-straale, .modellfigur .figur-vind, .modellfigur .figur-sprosse,
.modellfigur .figur-rute {
  fill: none; stroke: currentColor; stroke-linecap: round;
}
.modellfigur .figur-bakke { stroke-width: 1.5; opacity: 0.3; }
.modellfigur .figur-glans { stroke-width: 1; opacity: 0.28; }
.modellfigur .figur-maal path { stroke-width: 1.2; opacity: 0.55; }
.modellfigur .figur-vind { stroke-width: 1.2; opacity: 0.35; }
.modellfigur .figur-rute { stroke-width: 2; opacity: 0.45; }
.modellfigur .figur-sprosse { stroke-width: 5; opacity: 1; stroke-linecap: butt; }
.modellfigur .figur-fot { opacity: 0.45; }
.modellfigur .figur-skrue { opacity: 0.3; }
.modellfigur .figur-tekst {
  fill: currentColor; opacity: 0.55; font-size: 10px; font-weight: 600;
  font-family: inherit; stroke: none;
}
/* Lyset er det einaste som har eigen farge — elles ser ein ikkje at det lyser. */
.modellfigur .figur-lys { fill: var(--accent); }
.modellfigur .figur-straale { stroke: var(--accent); stroke-width: 2; opacity: 0.8; }

.choice:has(input:checked) .modellfigur { background: var(--surface); }

/* ---------------------------------------------------------------------------
   Raden med valde produkt, synleg gjennom heile skjemaet
--------------------------------------------------------------------------- */
.valgte-rad {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin: 0 0 1.25rem;
}
.valgte-rad:empty { display: none; }
.valgte-merkelapp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--primary-soft); color: var(--primary-dark);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  font-size: 0.85rem; font-weight: 600; line-height: 1.2;
}
.valgte-merkelapp img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-alt);
}
.valgte-merkelapp .valgte-ikon {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--surface-alt); color: var(--primary-dark); padding: 2px;
}
.valgte-fjern {
  background: none; border: 0; cursor: pointer; padding: 0 0 0 0.15rem;
  color: inherit; opacity: 0.55; font-size: 1rem; line-height: 1;
}
.valgte-fjern:hover { opacity: 1; }
.valgte-tom { color: var(--muted); font-size: 0.9rem; }

/* Blokk per valt produkt på steg 2 */
.produktblokk + .produktblokk {
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.produktblokk > h3 { margin: 0 0 0.75rem; }

body.tema-mork .modellfigur { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
body.tema-mork .choice:has(input:checked) .modellfigur { background: rgba(255, 255, 255, 0.07); }
body.tema-mork .valgte-merkelapp { background: rgba(255, 255, 255, 0.06); color: var(--ink); }

/* Mitt salg og min provisjon, i «Mine tall» på seljardashbordet. */
.minsals {
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border);
}
.minsals .kpi-num { font-size: 1.35rem; }

/* ---------------------------------------------------------------------------
   Kundeomtaler — den vandrande rada på nettsida
   ---------------------------------------------------------------------------
   Rada inneheld korta to gonger. Animasjonen flyttar henne nøyaktig halvvegs
   og startar på nytt; då er det same biletet, og skøyten er usynleg.
--------------------------------------------------------------------------- */
.omtalerad { overflow: hidden; margin: 0 -1rem; padding: 0.25rem 0; -webkit-mask-image:
  linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent); }
.omtalespor { display: flex; gap: 1rem; width: max-content;
  animation: omtaleglid var(--omtale-tid, 60s) linear infinite; }
.omtalerad:hover .omtalespor, .omtalerad:focus-within .omtalespor { animation-play-state: paused; }
@keyframes omtaleglid { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.omtalerad-still { display: grid; gap: 1rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); -webkit-mask-image: none; mask-image: none; }

.omtale {
  flex: 0 0 auto; width: min(21rem, 78vw); margin: 0; padding: 1.15rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.omtalerad-still .omtale { width: auto; }
.omtale blockquote { margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--ink); }
.omtale blockquote::before { content: "«"; }
.omtale blockquote::after { content: "»"; }
.omtale figcaption { font-size: 0.85rem; font-weight: 600; color: var(--primary-dark);
  margin-top: auto; display: flex; flex-direction: column; gap: 0.1rem; }
.omtale figcaption span { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.omtale-stjerner { color: var(--accent); letter-spacing: 0.1em; font-size: 1rem; line-height: 1; }
.omtale-tomme { opacity: 0.25; }

body.tema-mork .omtale { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
body.tema-mork .omtale figcaption { color: var(--ink); }

/* Rørsle er ikkje innhald. Den som har bedt om ro, skal få eit rutenett. */
@media (prefers-reduced-motion: reduce) {
  .omtalespor { animation: none; flex-wrap: wrap; width: auto; }
  .omtalerad { -webkit-mask-image: none; mask-image: none; }
  .omtalespor .omtale:nth-child(n + 7) { display: none; }
}

/* Miljøfyrtårn-merket.
   Ordmerket står i boksen til den ekte logoen har lasta — ein
   sertifiseringspåstand med eit brote bilete ved sida av er verre enn ingen
   logo i det heile.
   Boksen er ein sirkel på 128 px så lenge det er ordmerket som står der. Den
   ekte logoen er nesten tre gonger så brei som han er høg, og blir uleseleg
   klemt inn i ein sirkel — difor byter både boksen og spalta form når logoen
   er på plass. Kvit botn i begge tema: merket er laga for det, og ein
   sertifiseringslogo skal ikkje fargeleggjast om. */
.miljomerke.har-logo {
  width: 100%; max-width: 280px; height: auto; border-radius: 8px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  padding: 1rem 1.2rem; font-size: 0; place-items: center;
}
.miljoblokk.har-logo { align-items: center; }
@media (min-width: 820px) {
  .miljoblokk.har-logo { grid-template-columns: 280px 1fr; }
}
.miljologo { width: 100%; height: auto; display: block; }
body.tema-mork .miljomerke.har-logo { background: #fff; border-color: rgba(255,255,255,.18); }