/* Kundkontakter – komponenter (designskiss v2, 2026-10-05) Kräver tokens.css. Varje komponent har prefixet kk- och följer BEM: .kk-block komponenten .kk-block__element en del av komponenten .kk-block--variant en variant eller ett tillstånd Filen är ordnad uppifrån och ned som skärmarna: grund, sidhuvud, rubriker, kort och val, fält, knappar, Ditt urval, filterrader, karta, steg för steg, mobil. Sist ligger mobilanpassningarna i en container query på .kk-app (se tokens.css om brytpunkten). Där står bara det som ändras på mobil. Tillstånd som skissen visar har en modifierare (--selected, --current, --done, --focused, --open, --pending). Ange samtidigt rätt ARIA-attribut i HTML (aria-checked, aria-current, aria-expanded, aria-pressed). Skissen visar inga hover-, fokus- eller felslägen; de är inte ritade. screens.html visar alla 17 skärmar byggda med de här klasserna. */ /* ===================================================================== 1. Grund ===================================================================== */ /* kk-app: roten för hela gränssnittet. Sätter typsnitt, textfärg och bakgrund och är container för mobilanpassningarna. Positionerad, eftersom sidfoten, mobillisten och arket placeras mot den. I skissen är den exakt 1440 × 900 eller 390 × 844 (sätts i screens.html); i produktionen fyller den fönstret. */ .kk-app { container: kk-app / inline-size; position: relative; overflow: hidden; background: var(--kk-color-bg); color: var(--kk-color-ink); font-family: var(--kk-font-sans); font-size: var(--kk-font-size-base); line-height: var(--kk-line-height-base); font-variant-ligatures: var(--kk-font-ligatures); } .kk-app, .kk-app *, .kk-app *::before, .kk-app *::after { box-sizing: border-box; } /* Nollställning av webbläsarens standardstil, så att semantiska element (rubriker, listor, knappar, fält, länkar) ser ut exakt som skissen. :where() ger specificitet 0, så alla komponentklasser vinner. */ :where(.kk-app) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; } :where(.kk-app) :where(ul, ol) { padding: 0; list-style: none; } :where(.kk-app) :where(a) { color: inherit; text-decoration: none; } :where(.kk-app) :where(button, input) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: inherit; text-transform: inherit; text-indent: 0; text-shadow: inherit; -webkit-appearance: none; appearance: none; } :where(.kk-app) :where(button) { cursor: pointer; } /* kk-sprite: det dolda SVG-elementet med ikonerna och kartan ( och i ). Ligger först i och tar ingen plats. */ .kk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* kk-icon: linjeikon från spriten, . 22 px och currentColor som standard; komponenterna sätter storlek där den avviker. */ .kk-icon { width: var(--kk-icon-size-22); height: var(--kk-icon-size-22); fill: none; stroke: currentColor; stroke-width: var(--kk-icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; } /* Ikon i varumärkesgrönt där omgivande text har en annan färg. */ .kk-icon--brand { color: var(--kk-color-brand); } /* Hjälpklasser för text. */ .kk-muted { color: var(--kk-color-muted); } /* Dämpad text i löpande text */ .kk-help { font-size: var(--kk-font-size-sm); color: var(--kk-color-muted); } /* Liten dämpad hjälptext under fält och kort */ .kk-nowrap { white-space: nowrap; } /* Håller ihop ord som inte ska brytas */ /* ===================================================================== 2. Sidhuvud (desktop): kk-header, kk-brand, kk-stepper, kk-step, kk-account ===================================================================== */ /* kk-header: sidhuvudet på desktop. Tre kolumner: märket, stegraden (tom på kvittot) och Mitt konto. */ .kk-header { height: var(--kk-size-header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--kk-space-48); border-bottom: var(--kk-border-width) solid var(--kk-color-line); background: var(--kk-color-surface-translucent); } /* kk-brand: k-märket och namnet Kundkontakter. Länk till startsidan. Desktop och mobil. */ .kk-brand { display: flex; align-items: center; gap: var(--kk-space-11); } .kk-brand__mark { position: relative; width: var(--kk-size-mark-w); height: var(--kk-size-mark-h); border-radius: var(--kk-radius-mark); background: var(--kk-color-brand); color: var(--kk-color-on-brand); font-size: var(--kk-font-size-6xl); font-weight: var(--kk-font-weight-semibold); display: flex; align-items: center; justify-content: center; line-height: var(--kk-line-height-none); padding-bottom: var(--kk-space-3); flex: none; } /* Limepricken uppe till höger i k-märket. */ .kk-brand__mark::after { content: ""; position: absolute; right: var(--kk-space-6); top: var(--kk-space-7); width: var(--kk-size-mark-dot); height: var(--kk-size-mark-dot); border-radius: var(--kk-radius-round); background: var(--kk-color-lime); } .kk-brand__name { font-size: var(--kk-font-size-xl-plus); font-weight: var(--kk-font-weight-bold); letter-spacing: var(--kk-letter-spacing-brand); } /* kk-stepper: stegraden i sidhuvudet,