/* ============================================================
   MINDSTORE — designsystem (retro / brutalist)
   Extraherat från design/prototyp-2026-08-25.html (commit 3bc40cc)
   ============================================================ */
/* Färger och typsnitt: Hultbergs tema (arbetsytor/design-prompt.md), samma värden
   som Arbetsplan/Arbetslogg/Bollen hos er. Tokennamnen är portalens gamla — värdena
   är bytta, så att hela sajten följer med utan att varje regel skrivs om. Tre
   accentfärger: grön (accent), sand, varning — ingen blå, inte heller i grafer. */
:root {
  --paper: #f4f0e8;
  --paper-2: #fbf8f2;
  --paper-3: #e6e0d4;
  --ink: #221f26;
  --ink-2: #514b57;
  --muted: #8f8893;
  --line: #221f26;

  /* De gamla pastellnamnen pekar nu på temats accenter. --orange är portalens
     primärfärg (knappar, vald flik, fokus) och blir därför grön; den rosa kanten
     för sajtdetaljer har en egen token. */
  --orange: #accfbe;
  --rosa: #e9967f;
  --blue: #e5d6a8;
  --teal: #accfbe;
  /* grön: primär markering */
  --violet: #e5d6a8;
  --yellow: #e5d6a8;
  /* sand: utveckling, stämplar */
  --pink: #faf0d2;
  --display-a: #2f6f52;
  --display-b: #8a6a12;

  /* diagram: kategoriska slots, ingen blå */
  --s1: #2f6f52;
  --s2: #8a6a12;
  --s3: #514b57;
  --s4: #7fb39b;
  --surface: #fbf8f2;
  --grid: #d3ccc4;
  --axis: #8f8893;
  --text-primary: #221f26;
  --text-secondary: #514b57;
  --text-muted: #8f8893;

  --good: #accfbe;
  --warn: #e5d6a8;
  --crit: #e9a293;
  --good-ink: #2f6f52;
  --crit-ink: #b8452e;

  /* bakgrundens raster och tvättar */
  --bg-dot: rgba(34, 31, 38, .12);
  --bg-line: rgba(34, 31, 38, .05);
  --bg-wash-a: rgba(172, 207, 190, .45);
  --bg-wash-b: rgba(229, 214, 168, .35);

  --bw: 3px;
  /* brutalistisk kantbredd */
  --sh: 6px 6px 0 var(--ink);
  /* hård skugga */
  --sh-sm: 4px 4px 0 var(--ink);
  --font-display: "Archivo Black", "Archivo", Impact, system-ui, sans-serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* Mörkt läge: marinblått, inte svart. */
html[data-theme="dark"] {
  --paper: #0b0e15;
  --paper-2: #141821;
  --paper-3: #1a1f2b;
  --ink: #efeae2;
  --ink-2: #c4bcc6;
  --muted: #8c8490;
  --line: #efeae2;
  --orange: #accfbe;
  --rosa: #e9967f;
  --blue: #e5d6a8;
  --teal: #accfbe;
  --violet: #e5d6a8;
  --yellow: #e5d6a8;
  --pink: #332b16;
  --display-a: #9fcbb5;
  --display-b: #e5d6a8;
  --s1: #9fcbb5;
  --s2: #e5d6a8;
  --s3: #c4bcc6;
  --s4: #e07b62;
  --surface: #141821;
  --grid: #303847;
  --axis: #8c8490;
  --text-primary: #efeae2;
  --text-secondary: #c4bcc6;
  --text-muted: #8c8490;
  --good: #9fcbb5;
  --warn: #e5d6a8;
  --crit: #e07b62;
  --good-ink: #9fcbb5;
  --crit-ink: #e07b62;
  --bg-dot: rgba(242, 236, 228, .16);
  --bg-line: rgba(242, 236, 228, .05);
  --bg-wash-a: rgba(172, 207, 190, .14);
  --bg-wash-b: rgba(229, 214, 168, .12);
  --sh: 6px 6px 0 #05070c;
  --sh-sm: 4px 4px 0 #05070c;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background-color: var(--paper);
  /* Fyra lager som i arbetsytorna: prickraster, kolumnlinjer, grön och sand tvätt. */
  background-image:
    radial-gradient(var(--bg-dot) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-line) 1px, transparent 1px),
    radial-gradient(ellipse 55% 45% at 0% 0%, var(--bg-wash-a), transparent 70%),
    radial-gradient(ellipse 50% 55% at 100% 30%, var(--bg-wash-b), transparent 72%);
  background-size: 22px 22px, 25% 100%, auto, auto;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: uppercase;
  line-height: .95
}

a {
  color: inherit
}

button {
  font-family: inherit
}

.mono {
  font-family: var(--font-mono)
}

.wrap {
  width: min(1240px, 100% - 48px);
  margin-inline: auto
}

.view {
  display: none
}

.view.is-active {
  display: block
}

/* ---------- brutalistiska primitiv ---------- */
.box {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 14px 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  box-shadow: var(--sh-sm);
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .1s;
  text-decoration: none;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink)
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink)
}

.btn--fill {
  background: var(--ink);
  color: var(--paper)
}

.btn--orange {
  background: var(--orange);
  color: #2A2430
}

.btn--blue {
  background: var(--blue);
  color: #2A2430
}

.btn--yellow {
  background: var(--yellow);
  color: #2A2430
}

.btn--sm {
  padding: 8px 14px;
  font-size: 12px;
  box-shadow: 3px 3px 0 var(--ink)
}

.tag {
  display: inline-block;
  border: 2px solid var(--line);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-mono);
  background: var(--paper);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted)
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 2px solid var(--line);
  background: transparent;
  color: var(--ink)
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite
}

/* Källtexten står i HTML (lib/texter.mjs) och göms tills main.js byggt spåren — samma höjd som färdiga spår. */
.marquee__track:not(.is-klar) {
  visibility: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 13px 24px;
  white-space: nowrap
}

.marquee--rev .marquee__track {
  animation-direction: reverse;
  animation-duration: 58s
}

.marquee span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 13px 24px;
  white-space: nowrap;
  letter-spacing: .22em;
  color: var(--muted);
}

.marquee span i {
  font-style: normal;
  color: var(--display-a)
}

.marquee--alt {
  background: transparent
}

.marquee--alt span i {
  color: var(--display-b)
}

@keyframes slide {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ============================================================
   BLOCK 1 — header (redaktionell, lugn rörelse)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}

.hero__wash {
  position: absolute;
  inset: -25%;
  z-index: -3;
  filter: blur(28px);
  background:
    radial-gradient(46% 46% at 18% 26%, rgba(255, 158, 134, .42), transparent 64%),
    radial-gradient(42% 42% at 82% 60%, rgba(169, 195, 255, .40), transparent 66%),
    radial-gradient(36% 36% at 58% 10%, rgba(201, 179, 245, .28), transparent 64%);
  animation: wash 30s ease-in-out infinite alternate;
}

html[data-theme="dark"] .hero__wash {
  opacity: .34
}

@keyframes wash {
  to {
    transform: translate3d(-5%, 3%, 0) scale(1.09)
  }
}

.hero__rules {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(42, 36, 48, .10) 1px, transparent 1px);
  background-size: calc(100%/6) 100%;
  background-position: 0 0;
}

html[data-theme="dark"] .hero__rules {
  background-image: linear-gradient(to right, rgba(246, 241, 234, .10) 1px, transparent 1px)
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  pointer-events: none;
  background-image: radial-gradient(rgba(42, 36, 48, .16) .8px, transparent .9px);
  background-size: 5px 5px;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  gap: 16px;
  flex-wrap: wrap
}

.logo {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px
}

.logo b {
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px 4px
}

.hero__mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 6px 0 26px
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap
}

.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
  min-width: 40px
}

.hero__title {
  font-family: var(--font-display);
  white-space: nowrap;
  display: flex;
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.045em;
  margin: 0;
  font-size: 96px;
  /* sätts av JS för att fylla raden */
}

.hero__title:not(.is-klar) {
  visibility: hidden
}

.chw {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .06em
}

.ch {
  display: inline-block;
  transform: translateY(115%);
  animation: rise .95s cubic-bezier(.19, .9, .22, 1) both
}

.ch.settled {
  animation: none;
  transform: none;
  transition: transform .25s cubic-bezier(.19, .9, .22, 1), color .25s
}

.chw:hover .ch.settled {
  transform: translateY(-8px);
  color: var(--display-a)
}

@keyframes rise {
  to {
    transform: translateY(0)
  }
}

.hero__underline {
  height: 3px;
  background: var(--line);
  transform-origin: left;
  animation: wipe 1.1s .5s cubic-bezier(.19, .9, .22, 1) both;
  margin-top: 10px
}

@keyframes wipe {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  gap: 44px;
  align-items: end;
  margin-top: 30px
}

@media(max-width:900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 26px
  }
}

.hero__lead {
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ink-2)
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center
}

.facts {
  border-top: 2px solid var(--line)
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(42, 36, 48, .20);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-theme="dark"] .facts div {
  border-bottom-color: rgba(246, 241, 234, .18)
}

.facts b {
  font-weight: 700;
  color: var(--ink)
}

.scrollcue {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-top: var(--bw) solid var(--line);
  padding: 15px 0;
  width: 100%;
  cursor: pointer;
  justify-content: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .24em;
  font-weight: 700;
}

.scrollcue:hover {
  background: var(--ink);
  color: var(--paper)
}

.scrollcue span {
  display: inline-block;
  animation: down 2.4s ease-in-out infinite
}

@keyframes down {

  0%,
  100% {
    transform: translateY(-2px)
  }

  50% {
    transform: translateY(3px)
  }
}

/* ============================================================
   BLOCK 2 — vägvalet
   ============================================================ */
.fork {
  padding: 76px 0 90px;
  background: var(--paper-2);
  border-bottom: var(--bw) solid var(--line)
}

.fork__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px
}

.fork__head h2 {
  font-size: clamp(34px, 6vw, 72px)
}

.fork__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px
}

.choice {
  position: relative;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh);
  padding: 34px 30px 30px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
  text-align: left;
  display: block;
  width: 100%;
  color: inherit;
}

.choice:hover {
  transform: translate(-4px, -4px);
  box-shadow: 11px 11px 0 var(--ink)
}

.choice__num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--muted)
}

.choice h3 {
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 12px
}

.choice p {
  max-width: 40ch;
  font-weight: 500;
  color: var(--ink-2)
}

.choice__bar {
  height: 14px;
  margin: 0 0 22px;
  border: var(--bw) solid var(--line)
}

.choice--kund .choice__bar {
  background: var(--orange)
}

.choice--nyfiken .choice__bar {
  background: var(--blue)
}

.choice ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  font-family: var(--font-mono);
  font-size: 13px
}

.choice ul li {
  padding: 7px 0;
  border-bottom: 2px solid var(--paper-3)
}

.choice ul li::before {
  content: "→ ";
  font-weight: 700
}

.choice__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .06em
}

.choice:hover .choice__go {
  color: var(--display-a)
}

/* ============================================================
   NAV (undersidor)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

.topbar nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center
}

.navlink {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.navlink:hover {
  border-color: var(--line)
}

.navlink.is-on {
  background: var(--ink);
  color: var(--paper)
}

/* ============================================================
   BLOCK 3 — tjänster
   ============================================================ */
.svc-hero {
  padding: 70px 0 60px;
  border-bottom: var(--bw) solid var(--line)
}

.svc-hero h1 {
  font-size: clamp(40px, 8vw, 104px);
  margin-bottom: 18px
}

.svc-hero p {
  max-width: 60ch;
  font-size: 19px;
  font-weight: 600
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-bottom: var(--bw) solid var(--line)
}

.svc {
  padding: 34px 28px 30px;
  border-right: var(--bw) solid var(--line)
}

.svc:last-child {
  border-right: 0
}

.svc h3 {
  font-size: 26px;
  margin: 14px 0 10px
}

.svc p {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 15px
}

.svc__ix {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em
}

.svc__mark {
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--line);
  margin-top: 16px
}

.clients {
  padding: 60px 0;
  border-bottom: var(--bw) solid var(--line);
  background: var(--paper-2)
}

.clients__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px
}

.clients__row div {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  padding: 18px 26px;
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  box-shadow: var(--sh-sm)
}

.cta {
  padding: 70px 0;
  text-align: center
}

.cta h2 {
  font-size: clamp(32px, 6vw, 64px);
  margin-bottom: 22px
}

/* ============================================================
   BLOCK 4a — login
   ============================================================ */
.login {
  min-height: calc(100svh - 60px);
  display: grid;
  place-items: center;
  padding: 50px 0;
  position: relative;
  overflow: hidden
}

.login__bg {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: repeating-linear-gradient(45deg, transparent 0 30px, rgba(42, 36, 48, .055) 30px 60px);
  animation: drift 12s linear infinite
}

@keyframes drift {
  from {
    transform: translate(0, 0)
  }

  to {
    transform: translate(60px, 60px)
  }
}

.login__card {
  width: min(460px, 100%);
  padding: 34px 30px
}

.login__card h1 {
  font-size: 38px;
  margin-bottom: 6px
}

.field {
  display: block;
  margin: 20px 0
}

.field span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 7px
}

.field input {
  width: 100%;
  padding: 13px 14px;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}

.field input:focus {
  outline: none;
  box-shadow: var(--sh-sm)
}

.login__hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px
}

.login__error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--crit-ink);
  margin-top: 16px;
  font-weight: 700
}

/* ============================================================
   BLOCK 4b — dashboard
   ============================================================ */
.dash {
  padding: 0 0 70px
}

.dashbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: var(--bw) solid var(--line);
  background: var(--ink);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 60;
}

.dashbar .logo b {
  background: var(--orange);
  color: #2A2430
}

.dashbar .logo {
  color: var(--paper)
}

.sitepick {
  display: flex;
  align-items: center;
  gap: 8px
}

.dashbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto
}

.sitepick select {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border: 2px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  text-transform: uppercase;
}

.site-detail-nav {
  margin: 0;
  padding: 14px 16px 16px;
  border-bottom: 2px solid var(--line);
}

.site-detail-frame {
  margin: 22px 0 8px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--rosa);
  background: var(--paper);
  overflow: hidden;
}

.site-detail-frame>.sec {
  margin-left: 16px;
  margin-right: 16px;
}

.group-status {
  margin: 22px 0 8px;
  border: 2px solid var(--line);
  background: var(--paper);
}

.group-status__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

.group-status__head .eyebrow {
  margin: 0;
}

.group-status .strip {
  border-top: 2px solid var(--line);
}

.group-status__item {
  min-width: 180px;
}

.group-status__ping {
  font: 11px var(--font-mono);
  color: var(--text-muted);
  margin-top: 4px;
}

.group-status__badge {
  padding: 8px 16px 10px;
}

.group-range {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.group-status__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--line);
}

.group-status__card {
  padding: 14px 16px 16px;
}

.group-status__card+.group-status__card {
  border-left: 2px solid var(--line);
}

.group-status__title {
  font: 700 11px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.group-status__list {
  display: grid;
  gap: 8px;
}

.group-status__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.group-status__row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-status__row span:last-child {
  font: 700 12px var(--font-mono);
}

.site-detail-badge {
  padding: 8px 16px 0;
}

.site-detail-nav__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}

.site-detail-nav__head .eyebrow {
  margin: 0;
}

.site-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
}

.site-tab {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--line);
}

.site-tab:hover {
  transform: translate(-1px, -1px);
}

.site-tab.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--orange);
}

.site-tab:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.dashbar .btn {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--orange)
}

.dashbar .btn:hover {
  background: var(--paper);
  color: var(--ink)
}

html[data-theme="dark"] .dashbar {
  background: #0F0E12;
  color: #F6F1EA;
  border-bottom-color: #F6F1EA
}

html[data-theme="dark"] .dashbar .logo {
  color: #F6F1EA
}

html[data-theme="dark"] .dashbar select {
  border-color: #F6F1EA;
  background: #0F0E12;
  color: #F6F1EA
}

html[data-theme="dark"] .dashbar .btn {
  border-color: #F6F1EA;
  color: #F6F1EA;
  box-shadow: 3px 3px 0 var(--orange)
}

html[data-theme="dark"] .dashbar .btn:hover {
  background: #F6F1EA;
  color: #0F0E12
}

.strip {
  display: flex;
  gap: 0;
  border-bottom: var(--bw) solid var(--line);
  flex-wrap: wrap
}

.strip__item {
  flex: 1 1 200px;
  padding: 14px 20px;
  border-right: var(--bw) solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px
}

.strip__item:last-child {
  border-right: 0
}

.dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  flex: none
}

.dot--good {
  background: var(--good)
}

.dot--warn {
  background: var(--warn)
}

.dot--crit {
  background: var(--crit)
}

.strip__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.strip__val {
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase
}

.sec {
  padding: 34px 0 6px
}

.sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px
}

.sec__head h2 {
  font-size: clamp(22px, 3vw, 32px)
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 18px
}

.kpi {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  padding: 16px 18px 12px;
  position: relative
}

.kpi__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.kpi__val {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  margin: 10px 0 8px;
  color: var(--text-primary)
}

.group-overview .kpi__val {
  font-size: clamp(24px, 2.8vw, 36px);
  white-space: nowrap;
}

.kpi__delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary)
}

.kpi__delta b {
  font-weight: 700
}

.kpi__delta .up {
  color: var(--good-ink)
}

.kpi__delta .down {
  color: var(--crit-ink)
}

.kpi__spark {
  display: block;
  margin-top: 10px
}

.charts {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px
}

@media(max-width:980px) {
  .charts {
    grid-template-columns: 1fr
  }
}

.card {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  padding: 18px 18px 14px
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap
}

.card__title {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase
}

.card__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 4px
}

.legend__i {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary)
}

.legend__sw {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  flex: none
}

.chart {
  position: relative
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible
}

.tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 8px 10px;
  min-width: 150px;
  box-shadow: var(--sh-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 5;
  transition: opacity .08s;
  color: var(--text-primary);
}

.tip.on {
  opacity: 1
}

.tip__d {
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: .06em;
  text-transform: uppercase
}

.tip__r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}

.tip__r i {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 2px
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 12px
}

.tbl th,
.tbl td {
  border: 2px solid var(--paper-3);
  padding: 6px 9px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary)
}

.tbl th:first-child,
.tbl td:first-child {
  text-align: left
}

.tbl th {
  background: var(--paper-2);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .06em
}

.hidden {
  display: none
}

.sys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px
}

.sys__card {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
  position: relative;
  overflow: hidden;
}

.sys__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink)
}

.sys__ico {
  width: 38px;
  height: 38px;
  border: var(--bw) solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: #2A2430
}

.sys__name {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase
}

.sys__desc {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500
}

.sys__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 8px
}

.sys__card.is-own::after {
  content: "EGET SYSTEM";
  position: absolute;
  top: 10px;
  right: -30px;
  transform: rotate(45deg);
  background: var(--yellow);
  color: #2A2430;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 34px;
  border-block: 2px solid var(--line)
}

.alerts {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  padding: 13px 16px;
  box-shadow: var(--sh-sm)
}

.alert__b {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px
}

.alert--crit .alert__b {
  background: var(--crit);
  color: #2A2430
}

.alert--warn .alert__b {
  background: var(--warn);
  color: #2A2430
}

.alert--good .alert__b {
  background: var(--good);
  color: #2A2430
}

.alert__t {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px
}

.alert__x {
  font-size: 13px;
  color: var(--text-secondary)
}

.alert time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap
}

.docs__search {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px
}

.docs__search input {
  flex: 1 1 260px;
  padding: 12px 14px;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink)
}

.docs__search input:focus {
  outline: none;
  box-shadow: var(--sh-sm)
}

.chip {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  color: var(--ink)
}

/* Vald chip: fylld med accent (grön) och bläcktext — design-prompt.md. */
.chip.is-on {
  background: var(--teal);
  color: #221f26;
  border-color: var(--line)
}
.chip:not(.is-on) {
  box-shadow: 3px 3px 0 var(--ink)
}

.docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px
}

.doc {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  padding: 16px;
  cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2)
}

.doc:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink)
}

.doc h4 {
  font-size: 16px;
  margin: 10px 0 6px;
  line-height: 1.08
}

.doc p {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0
}

.doc__m {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px
}

.empty {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  padding: 24px 0
}

.foot {
  border-top: var(--bw) solid var(--line);
  padding: 26px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap
}

/* ---------- datamärkning: sitter i komponenten, aldrig en global banner ---------- */
.data-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--line);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.data-badge--mock {
  background: var(--yellow);
  color: #2A2430
}

.data-badge--soon {
  background: var(--paper-3);
  color: var(--text-secondary)
}

/* ---------- plugins/tema: register + changelog ---------- */
.plugin-row {
  border: var(--bw) solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  margin-bottom: 14px
}

.plugin-row summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
}

.plugin-row summary::-webkit-details-marker {
  display: none
}

.plugin-row .version {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: none
}

.plugin-row .updated {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: none
}

.plugin-row .body {
  padding: 0 18px 18px;
  border-top: 2px solid var(--paper-3)
}

.plugin-row .actions {
  margin: 14px 0
}

.changelog h3,
.changelog h4 {
  font-size: 15px;
  margin: 18px 0 8px;
  text-transform: none
}

.changelog p,
.changelog li {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500
}

.changelog ul {
  padding-left: 20px
}

/* ---------- innehållssidor: faq/felsökning/kundsidor ---------- */
.content {
  max-width: 70ch
}

.content h2 {
  font-size: 22px;
  margin: 36px 0 12px
}

.content p {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.6
}

.content ol,
.content ul {
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.7
}

.content li {
  margin-bottom: 6px
}

.linklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.linklist li {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.linklist a {
  font-weight: 700
}

.linklist .note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

@media (max-width:640px) {
  .strip__item {
    .group-status__grid {
      grid-template-columns: 1fr
    }

    .group-status__card+.group-status__card {
      border-left: 0;
      border-top: 2px solid var(--line)
    }

    flex: 1 1 50%;
    border-bottom: 2px solid var(--line);
    padding: 10px 14px
  }

  .dashbar {
    position: static
  }

  .dashbar__actions {
    margin-left: 0
  }

  .kpi__val {
    font-size: 32px
  }

  .svc {
    border-right: 0;
    border-bottom: var(--bw) solid var(--line)
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  html {
    scroll-behavior: auto
  }
}
/* ── Dashbar: en rad. Navigering till vänster, ikoner till höger. ──────────
   Tidigare låg e-postadressen som egen synlig post i menyraden och tvingade
   den att radbrytas. Den bor nu i gruppmenyns huvud — fortfarande åtkomlig,
   men inte det första ögat fastnar på. */
.dashbar {
  flex-wrap: nowrap;
  /* Menyraden är mörk i BÅDA teman, så dess förgrund får inte följa --paper —
     den vänder med temat och gjorde navlänkar och ikoner osynliga i mörkt läge. */
  --bar-fg: #F6F1EA
}

.dashnav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none
}

.dashnav::-webkit-scrollbar {
  display: none
}

.dashnav a {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bar-fg);
  text-decoration: none;
  padding: 7px 10px;
  border: 2px solid transparent
}

.dashnav a:hover,
.dashnav a:focus-visible {
  border-color: var(--bar-fg)
}

/* Aktuell sida: samma mått som en länk, så raden inte hoppar när man byter sida. */
.dashnav .is-on {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 2px solid var(--bar-fg);
  background: var(--bar-fg);
  color: #17161A
}

.dashbar__actions {
  flex: none;
  flex-wrap: nowrap;
  gap: 6px
}

/* Ikonknapparna: samma storlek och ram, så de läses som en grupp. */









/* Bocken har fast bredd så etiketterna står i linje oavsett vald grupp. */


@media (max-width:720px) {
  .dashbar {
    padding: 10px 14px;
    gap: 8px
  }

  .dashbar .logo {
    font-size: 15px
  }
}

/* Förklarande mening i en linklist. `.note` är versalt monospace och funkar för
   en kort etikett ("kontrollerat post för post"), men gör en hel mening till en
   versalvägg. Den här är brödtext. */
.linklist .detalj {
  display: block;
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2)
}

/* [hidden] måste vinna över komponenternas egna display-värden. `.alert` sätter
   display:flex, vilket är mer specifikt än attributväljaren i webbläsarens
   standardstil — en ruta med hidden syntes därför ändå. */
[hidden] {
  display: none !important
}

/* ── Köptratt ──────────────────────────────────────────────────────────────
   Stapelbredden är andel av FÖRSTA steget, så stegen går att jämföra med
   varandra. Procenten till höger är andel av FÖREGÅENDE steg — det är den som
   pekar ut var kunderna faller ifrån. */
.funnel__rad {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr minmax(72px, auto) minmax(96px, auto);
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(42, 36, 48, .14)
}

.funnel__rad:last-child {
  border-bottom: 0
}

.funnel__namn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em
}

.funnel__spar {
  background: var(--paper-3);
  border: 2px solid var(--line);
  height: 30px;
  display: flex;
  align-items: stretch
}

.funnel__stapel {
  background: var(--s1);
  min-width: 3px;
  transition: width .3s
}

.funnel__stapel--mal {
  background: var(--orange)
}

.funnel__antal {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap
}

.funnel__andel {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap
}

/* ── Produktmix ────────────────────────────────────────────────────────── */
.mix__rad {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(42, 36, 48, .14)
}

.mix__rad:last-child {
  border-bottom: 0
}

.mix__namn {
  font-size: 14px
}

.mix__spar {
  background: var(--paper-3);
  border: 2px solid var(--line);
  height: 22px
}

.mix__stapel {
  height: 100%;
  transition: width .3s
}

.mix__tal {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap
}

.mix__tal b {
  display: block;
  font-size: 15px
}

.mix__tal span {
  color: var(--text-muted)
}

/* ── Arbetsytor på gruppnivå i dashboarden (ärende #408) ─────────────── */
.work { margin: 22px 0 8px; border: 2px solid var(--line); background: var(--paper); }
.work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.work__head .eyebrow { margin: 0; }
.work__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--line); }
.work__cards > .empty { grid-column: 1 / -1; padding: 14px 16px; margin: 0; }
.work__card {
  display: block; padding: 14px 16px 16px; color: inherit; text-decoration: none;
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--teal) 16%, transparent) 0 10px, transparent 10px 20px);
}
.work__card + .work__card { border-left: 2px solid var(--line); }
.work__card:hover .work__open, .work__card:focus-visible .work__open { text-decoration: underline; }
.work__card h3 { margin: 0 0 6px; font: 900 20px var(--font-ui); text-transform: uppercase; letter-spacing: -.02em; }
.work__sub { margin: 0 0 10px; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.work__line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--grid); }
.work__line b { font: 700 12px var(--font-mono); white-space: nowrap; }
.work__warn { color: var(--crit-ink); }
.work__open { display: inline-block; margin-top: 10px; font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.work__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; padding: 10px 16px 12px; border-top: 2px solid var(--line); }
.work__links:empty { display: none; }
.work__links a { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; color: inherit; text-decoration: none; font-size: 13px; }
.work__links a:hover b, .work__links a:focus-visible b { text-decoration: underline; }
.work__links span { font: 11px var(--font-mono); color: var(--text-muted); }
@media (max-width: 760px) {
  .work__cards { grid-template-columns: 1fr; }
  .work__card + .work__card { border-left: 0; border-top: 2px solid var(--line); }
}

/* ── Kunskap längst ner på dashboarden: fd menyposterna ─────────────── */
.kunskap__lankar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kunskap__lankar a {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: inherit; text-decoration: none;
  background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .12s, box-shadow .12s;
}
.kunskap__lankar a:hover, .kunskap__lankar a:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.kunskap__lankar b { font-size: 15px; }
.kunskap__lankar span { font: 11px var(--font-mono); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .kunskap__lankar a { transition: none; } }

/* ── Inställningar: full bredd och pills (Jonas 2026-09-11) ──────────── */
.content.content--bred { max-width: none; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills .chip { cursor: pointer; }
.pills .chip[aria-pressed="mixed"] { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--teal) 45%, transparent) 0 6px, transparent 6px 12px); }
.pills .chip[hidden] { display: none; }
.tbl td .pills { min-width: 180px; }
tr.is-andrad td:first-child { box-shadow: inset 5px 0 0 var(--teal); }
.tbl.tbl--text th, .tbl.tbl--text td { text-align: left; }

/* ── KPI-kort utan källa (Jonas 2026-09-11): "Väntar på källa", ingen gissning. */
.kpi--empty { opacity: .6; }
.kpi__val--empty { color: var(--text-muted); }