/* ============================================================
   MINDSTORE — designsystem (retro / brutalist)
   Extraherat från design/prototyp-2026-08-25.html (commit 3bc40cc)
   ============================================================ */
:root{
  --paper:#FAF5EF;
  --paper-2:#F3E7E4;
  --paper-3:#E7D8D5;
  --ink:#2A2430;
  --ink-2:#554C5E;
  --muted:#8A8090;
  --line:#2A2430;

  /* pastellpalett */
  --orange:#FF9E86;   /* korall */
  --blue:#A9C3FF;     /* himmel */
  --teal:#9EDCC8;     /* mint */
  --violet:#C9B3F5;   /* lila */
  --yellow:#FFE3A3;   /* smör */
  --pink:#FFC8DD;
  --display-a:#FF8A6B;
  --display-b:#7FA3FF;

  /* diagram: kategoriska slots (validerade mot ytan #FAF5EF) */
  --s1:#5C6FE0; --s2:#EE7357; --s3:#AE84DE; --s4:#2E9B86;
  --surface:#FAF5EF;
  --grid:#E2D6D2;
  --axis:#B3A5AE;
  --text-primary:#2A2430;
  --text-secondary:#554C5E;
  --text-muted:#8A8090;

  --good:#8FD9B0; --warn:#FFD37A; --crit:#F79A9A;
  --good-ink:#2E7D57; --crit-ink:#B4405A;

  --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 Black Fallback",Impact,system-ui,sans-serif;
  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
html[data-theme="dark"]{
  --paper:#17161A;
  --paper-2:#211F26;
  --paper-3:#2E2B36;
  --ink:#F6F1EA;
  --ink-2:#D5CEDC;
  --muted:#9A93A5;
  --line:#F6F1EA;
  --s1:#7183E8; --s2:#DC6C53; --s3:#A379DC; --s4:#2FA48E;
  --surface:#17161A;
  --grid:#2E2B36;
  --axis:#5C5666;
  --text-primary:#FFFFFF;
  --text-secondary:#D5CEDC;
  --text-muted:#9A93A5;
  --good:#7FD1A0; --warn:#FFD37A; --crit:#F79A9A;
  --good-ink:#8FD9B0; --crit-ink:#F79A9A;
  --sh:6px 6px 0 #000; --sh-sm:4px 4px 0 #000;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); 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}
.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 */
}
.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}
.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;
}
.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)}
.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)}
.chip.is-on{background:var(--ink); color:var(--paper)}
.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{flex:1 1 50%; border-bottom:2px solid var(--line); padding:10px 14px}
  .dashbar{position:static}
  .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}
}