/* Koppla ert system (B40e) — G-koppla. BARA tokens ur /tokens.css (B33/B51), med app.html:s namn som reserv. Prefix kp-. Mobil först: 300/320 px. */
.kp{display:grid;gap:28px;min-width:0}
.kp-hero{display:grid;gap:10px;min-width:0}
.kp-rubrik{margin:0;font-size:clamp(24px,5.5vw,34px);letter-spacing:-.03em;line-height:1.1;font-family:var(--serif,Newsreader,Georgia,serif);font-weight:500}
.kp-ingress{margin:6px 0 0;color:var(--mut);font-size:15.5px;max-width:56ch}
.kp-sam{margin:0;font-size:13.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.kp-sam b{color:var(--ink)}
.kp-bara-status{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--linje2);border-radius:var(--r2);background:var(--yta2);color:var(--ink2);font-size:14px}
.kp-bara-status svg{margin-top:2px;color:var(--mut)}
.kp-grupp{display:grid;gap:10px;min-width:0}
.kp-grupprubrik{margin:0;font-size:12.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.kp-grupptext{margin:-4px 0 4px;font-size:14px}
.kp-rutnat{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.kp-rutnat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.kp-rutnat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kp .kp-kort{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-width:0;padding:16px;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r2);box-shadow:var(--sk1);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.kp .kp-kort:hover{border-color:var(--linje2);box-shadow:var(--sk)}
.kp .kp-kort[data-status=kopplad]{border-color:color-mix(in srgb,var(--ok) 35%,var(--linje))}
.kp-kortkopf{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-width:0}
.kp-ikon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--acc-svag);color:var(--acc);flex:none}
.kp-ikon svg{width:20px;height:20px}
.kp-namn{margin:4px 0 0;font-size:17px;line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere}
.kp-vad{margin:0;color:var(--mut);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.kp .kp-kort .knapp{margin-top:6px}

/* Guide i blad */
.kp-guide{display:grid;gap:16px;min-width:0}
.kp-guidehuvud h2{margin:0 0 4px;font-size:22px;overflow-wrap:anywhere}
.kp-stegtext{margin:0;color:var(--mut);font-size:13.5px}
.kp-prickar{display:flex;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.kp-prickar li{flex:1;height:4px;border-radius:999px;background:var(--yta3);transition:background var(--t)}
.kp-prickar li.klar{background:var(--acc);opacity:.5}
.kp-prickar li.nu{background:var(--acc)}
.kp-inne{display:grid;gap:14px;min-width:0;align-content:start}
.kp-lead{margin:0;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.kp-val{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.kp-val legend{padding:0;margin-bottom:6px;font-size:13px;color:var(--mut);font-weight:500}
ol.kp-lista{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5}
ol.kp-lista li{overflow-wrap:anywhere}
.kp-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;position:sticky;bottom:calc(-1 * (20px + env(safe-area-inset-bottom)));background:linear-gradient(to top,var(--bg) 70%,transparent);padding:8px 0 2px;margin-top:4px}
.kp-nav .knapp{flex:0 1 auto;min-width:0}
.kp-nav .knapp.acc{flex:1 1 140px}
.kp-nav [hidden]{display:none}
.kp-kod{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px;border:1px solid var(--linje2);border-radius:var(--r2);background:var(--yta2);min-width:0}
.kp-kod code{font:600 clamp(17px,5vw,22px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all;min-width:0;flex:1 1 140px}
.kp-ok,.kp-varning{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r1);font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.kp-ok{background:var(--ok-svag);color:var(--ok)}
.kp-varning{background:var(--var-svag);color:var(--var)}
.kp-ok svg,.kp-varning svg{margin-top:2px}
.kp-prov{display:grid;gap:10px;min-width:0}
.kp-prov:empty{display:none}
.kp-kontroll{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kp-kontroll li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;overflow-wrap:anywhere}
.kp-kontroll li.ok svg{color:var(--ok)}
.kp-kontroll li.fel svg{color:var(--fel)}
.kp-kontroll small{display:block}
.kp-hemlig{padding:14px;border:1px dashed var(--var);border-radius:var(--r2);background:var(--var-svag);display:grid;gap:10px;min-width:0}
.kp-hemlig b{color:var(--var);font-size:14.5px}

/* Visa tekniska uppgifter */
.kp-tekn{border:1px solid var(--linje);border-radius:var(--r1);background:var(--yta);min-width:0}
.kp-tekn summary{cursor:pointer;padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink2);list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.kp-tekn summary::-webkit-details-marker{display:none}
.kp-tekn summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(-45deg);transition:transform var(--t);flex:none}
.kp-tekn[open] summary::before{transform:rotate(45deg)}
.kp-tekn-in{padding:0 14px 14px;display:grid;gap:12px;min-width:0;font-size:14px}
.kp-tekn-in p{margin:0;overflow-wrap:anywhere}
.kp-falt{margin:0;display:grid;gap:10px;min-width:0}
.kp-falt>div{display:grid;gap:4px;min-width:0}
.kp-falt dt{font-size:12.5px;color:var(--mut);font-weight:500}
.kp-falt dd{margin:0;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;min-width:0}
.kp-varde{font:500 13.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-word;min-width:0;flex:1 1 160px}
.kp-kopiera{flex:none}
.kp-tomt{display:grid;gap:8px;justify-items:center;text-align:center;color:var(--mut);padding:24px 12px}
.kp-tomt p{margin:0}

/* Hantera-listor */
.kp-rader{display:grid;gap:10px;margin-bottom:14px;min-width:0}
.kp-rad{display:grid;gap:8px;min-width:0}
.kp-radhuvud{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;min-width:0}
.kp-url{overflow-wrap:anywhere;word-break:break-all;min-width:0}
.kp-chips{gap:6px}
.kp-senaste{margin:0}
.kp-knappar{display:flex;gap:8px;flex-wrap:wrap}
.kp-bort{justify-self:start;color:var(--fel)}
.kp .c-lista{margin-top:4px}

/* Färdig konfiguration / kodexempel (B55) */
.kp-underrubrik{margin:6px 0 0;font-size:14px}
.kp-gen{display:grid;gap:10px;min-width:0}
.kp-genut{display:grid;gap:10px;min-width:0}
.kp-kodblock{display:grid;gap:8px;min-width:0}
.kp-kodrubrik{margin:0}
.kp-pre{margin:0;padding:12px;border:1px solid var(--linje2);border-radius:var(--r1);background:var(--yta2);max-height:260px;overflow:auto;font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;-webkit-overflow-scrolling:touch}
.kp-pre code{font:inherit}

/* Onboardingens steg «Koppla era system» (B56) — kopplaSteg(el, …). */
.kp-fs{display:grid;gap:14px;min-width:0}
.kp-fs-last{display:grid;place-items:center;padding:28px}
.kp-fs-lead{margin:0;font-size:15.5px;line-height:1.55}
.kp-fs-rutnat{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.kp-fs-rutnat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kp-fs-kort{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 14px;text-align:left;cursor:pointer;background:var(--yta);color:var(--ink);border:1px solid var(--linje2);border-radius:var(--r2);transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.kp-fs-kort:hover{border-color:var(--acc)}
.kp-fs-kort[aria-pressed=true]{border-color:var(--acc);background:var(--acc-svag);box-shadow:0 0 0 1px var(--acc) inset}
.kp-fs-ikon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--acc-svag);color:var(--acc)}
.kp-fs-ikon svg{width:20px;height:20px}
.kp-fs-text{display:grid;gap:2px;min-width:0}
.kp-fs-text b{font-size:15px;overflow-wrap:anywhere}
.kp-fs-text span{font-size:13.5px;color:var(--mut);line-height:1.4;overflow-wrap:anywhere}
.kp-fs-bock{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--linje2);color:transparent;flex:none}
.kp-fs-bock svg{width:15px;height:15px;stroke-width:2.4}
.kp-fs-kort[aria-pressed=true] .kp-fs-bock{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.kp-fs-pill{grid-column:2/-1;justify-self:start}
.kp-fs-not{margin:0;color:var(--mut);font-size:14px}

/* ===== B57 premium (Retell × Apple) — lokala designvärden i .kp/.blad:has(.kp-guide); förslag till delade tokens skrivs i Beslut ===== */
.kp,.blad:has(.kp-guide),.blad:has(.kp-rader){--kp-kod-bg:#0d0e12;--kp-kod-ink:#e9eaf0;--kp-kod-linje:rgba(255,255,255,.09);--kp-r-rod:#ff5f57;--kp-r-gul:#febc2e;--kp-r-gron:#28c840;--kp-skugga:0 1px 1px rgba(12,12,15,.04),0 2px 4px rgba(12,12,15,.04),0 12px 32px rgba(12,12,15,.06)}
.kp-rubrik{font-weight:500;letter-spacing:-.035em}
.kp-hero{padding:4px 0 2px}
.kp .kp-kort{position:relative;border-radius:var(--r3);padding:18px;gap:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 3%,var(--yta)) 0,var(--yta) 70px);box-shadow:var(--kp-skugga)}
.kp .kp-kort:hover{transform:translateY(-2px);box-shadow:0 1px 1px rgba(12,12,15,.04),0 4px 8px rgba(12,12,15,.05),0 18px 40px rgba(12,12,15,.10)}
.kp-ikon{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 22%,var(--yta)),var(--acc-svag));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 18%,transparent)}
.kp .kp-kort .knapp{min-height:48px;border-radius:14px;font-weight:600}
.kp .kp-kort .knapp.acc{box-shadow:0 1px 2px rgba(12,12,15,.12),0 6px 16px color-mix(in srgb,var(--acc) 30%,transparent)}
.kp-grupprubrik{letter-spacing:.09em}
.blad:has(.kp-guide),.blad:has(.kp-rader){backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);background:rgba(10,10,15,.36)}
.blad:has(.kp-guide)>div,.blad:has(.kp-rader)>div{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--linje);box-shadow:0 2px 4px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.28);border-radius:24px 24px 0 0;max-width:640px}
@media (min-width:700px){.blad:has(.kp-guide)>div,.blad:has(.kp-rader)>div{border-radius:24px}}
.kp-prickar li{height:5px}
.kp-nav .knapp{min-height:48px;border-radius:14px}
.kp-nav .knapp.acc{box-shadow:0 1px 2px rgba(12,12,15,.12),0 6px 16px color-mix(in srgb,var(--acc) 28%,transparent)}
.chips button{min-height:44px}
.kp-tekn{border-radius:var(--r2);background:var(--yta2)}
/* Kodblock = fönster med fönsterprickar (Retell) */
.kp-fonster{margin:0;border-radius:14px;overflow:hidden;background:var(--kp-kod-bg);border:1px solid var(--kp-kod-linje);box-shadow:var(--kp-skugga);min-width:0}
.kp-fonsterhuvud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px 8px 14px;border-bottom:1px solid var(--kp-kod-linje);background:rgba(255,255,255,.04);min-width:0}
.kp-fprickar{display:inline-flex;gap:7px;flex:none}
.kp-fprickar i{width:11px;height:11px;border-radius:50%;background:var(--kp-r-rod)}
.kp-fprickar i:nth-child(2){background:var(--kp-r-gul)}
.kp-fprickar i:nth-child(3){background:var(--kp-r-gron)}
.kp-filnamn{flex:1 1 90px;min-width:0;color:rgba(233,234,240,.62);font:500 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.kp-fonsterknappar{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.kp-fonsterknappar .knapp{color:var(--kp-kod-ink);background:rgba(255,255,255,.07);border:0;min-height:40px;font-size:13px}
.kp-fonsterknappar .knapp:hover{background:rgba(255,255,255,.14)}
.kp-fonster .kp-pre{border:0;border-radius:0;background:transparent;color:var(--kp-kod-ink);max-height:300px;padding:14px}
.kp-kodrubrik{margin:2px 0 0;font-size:12.5px}
.kp-kod{background:var(--kp-kod-bg);border-color:var(--kp-kod-linje);border-radius:14px;box-shadow:var(--kp-skugga)}
.kp-kod code{color:var(--kp-kod-ink)}
.kp-kod .knapp{background:rgba(255,255,255,.08);color:var(--kp-kod-ink);border:0}
/* Skelett */
.kp-sk{border-radius:8px;background:linear-gradient(90deg,var(--yta2) 0,var(--yta3) 50%,var(--yta2) 100%);background-size:200% 100%;animation:kp-skelett 1.4s ease-in-out infinite}
.kp-sk-kort{pointer-events:none}
@keyframes kp-skelett{from{background-position:100% 0}to{background-position:-100% 0}}
.kp-tomt svg{width:36px;height:36px;color:var(--mut2)}
@media (prefers-reduced-motion:reduce){.kp *,.kp-kort,.kp-sk,.blad:has(.kp-guide) *{animation:none!important;transition:none!important}.kp-kort:hover{transform:none}}

/* Systemval (B59d): logotyp-liknande brickor */
.kp-valsystem .falt input[type=search]{min-height:48px;border-radius:14px}
.kp-sysgrupper{display:grid;gap:18px;min-width:0}
.kp-sysgrupp{display:grid;gap:8px;min-width:0}
.kp-brickor{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.kp-bricka{display:flex;align-items:center;gap:12px;min-width:0;min-height:60px;padding:10px 12px;text-align:left;cursor:pointer;background:var(--yta);color:var(--ink);border:1px solid var(--linje);border-radius:var(--r2);box-shadow:var(--kp-skugga);transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.kp-bricka:hover{border-color:var(--acc);transform:translateY(-1px)}
.kp-bricka:active{transform:scale(.98)}
.kp-bricka[hidden],.kp-sysgrupp[hidden]{display:none}
.kp-bricka-t{display:grid;gap:1px;min-width:0}
.kp-bricka-t b{font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.kp-bricka-t small{color:var(--mut);font-size:12.5px}
.kp-logo{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;font:700 14px/1 var(--kp-sans,inherit);letter-spacing:.02em;background:linear-gradient(145deg,hsl(var(--h,230) 68% 54%),hsl(calc(var(--h,230) + 32) 68% 42%));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.2)}
.kp-logo-hjalp{background:var(--acc-svag);color:var(--acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent);font-size:18px}
.kp-bricka-hjalp{border-style:dashed;width:100%}
.kp-metod{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;font-size:13.5px;color:var(--mut)}
.kp-metod span:last-child{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}

/* B62b: rubriken i samma sans som övriga portalvyer; kp-klasserna är scopade (kampanjer.css delar prefixet) */
.kp .kp-rubrik{font-family:inherit;font-weight:700;letter-spacing:-.03em}