/* #247 Knowledge Center (/hjaelp). One stylesheet for both worlds: --kc-* map to theme.css in the app (themed) and to
   public.css for visitors. Colours, sizes and corners only via tokens; see DESIGNSYSTEM.md. */
.kc-app{--kc-bg:var(--bg);--kc-surface:var(--surface);--kc-soft:var(--surface-2);--kc-text:var(--text);--kc-muted:var(--text-muted);--kc-subtle:var(--text-subtle);--kc-border:var(--border);--kc-accent:var(--accent);--kc-accent-hover:var(--accent-hover);--kc-on-accent:var(--accent-ink);--kc-accent-text:var(--accent-text);--kc-accent-soft:var(--accent-soft);--kc-shadow:var(--shadow-color);--kc-focus:var(--focus)}
.kc-public{--kc-bg:var(--pub-bg);--kc-surface:var(--pub-surface);--kc-soft:var(--pub-surface-soft);--kc-text:var(--pub-text);--kc-muted:var(--pub-text-muted);--kc-subtle:var(--pub-text-subtle);--kc-border:var(--pub-border);--kc-accent:var(--pub-accent);--kc-accent-hover:var(--pub-accent-hover);--kc-on-accent:var(--pub-ink);--kc-accent-text:var(--pub-link);--kc-accent-soft:var(--pub-accent-soft);--kc-shadow:var(--pub-shadow);--kc-focus:var(--pub-focus)}
.kc-page{background:var(--kc-bg);color:var(--kc-text);line-height:1.55}
.kc-public header nav a[aria-current=page]{color:var(--pub-on-ink)}
main.kc{max-width:1080px;margin:0 auto;padding:28px 20px 64px}
.kc a{color:var(--kc-accent-text)}
.kc a:focus-visible{outline:2px solid var(--kc-focus);outline-offset:3px}
.kc h1{font-size:clamp(28px,4.4vw,44px);line-height:1.12;letter-spacing:-.03em;margin:10px 0 12px;color:var(--kc-text)}
.kc-eyebrow{font-size:var(--fs-xs);letter-spacing:.14em;font-weight:750;color:var(--kc-subtle)}
.kc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px}
.kc .kc-back,.kc .kc-home{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:var(--radius-pill);border:1px solid var(--kc-border);background:var(--kc-surface);color:var(--kc-text);font-weight:700;font-size:var(--fs-lg);text-decoration:none;transition:border-color .15s,background .15s}
.kc .kc-back span{color:var(--kc-accent-text);font-size:var(--fs-2xl)}
.kc .kc-home{font-weight:600;color:var(--kc-muted)}
.kc .kc-back:hover,.kc .kc-home:hover{border-color:var(--kc-accent);background:var(--kc-accent-soft)}
.kc-hero{padding:18px 0 26px}
.kc-hero p,.kc-article-head p{font-size:var(--fs-2xl);color:var(--kc-muted);max-width:640px;margin:0}
.kc-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);background:var(--kc-accent-soft);color:var(--kc-accent-text);font-size:var(--fs-4xl)}
.kc-icon-lg{width:52px;height:52px;font-size:var(--fs-6xl)}
.kc-cards,.kc-list{list-style:none;margin:0;padding:0}
.kc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.kc-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:20px;background:var(--kc-surface);border:1px solid var(--kc-border);border-radius:var(--radius-md);text-decoration:none;color:var(--kc-text);transition:border-color .15s,transform .15s,box-shadow .15s}
.kc a.kc-card,.kc a.kc-row{color:var(--kc-text)}
.kc-card:hover,.kc-row:hover{border-color:var(--kc-accent);transform:translateY(-2px);box-shadow:0 10px 24px var(--kc-shadow)}
.kc-card strong{font-size:var(--fs-3xl);line-height:1.3}
.kc-summary{font-size:var(--fs-lg);color:var(--kc-muted);flex:1}
.kc-count{font-size:var(--fs-md);font-weight:700;color:var(--kc-accent-text)}
.kc-list{display:grid;gap:12px}
.kc-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px;background:var(--kc-surface);border:1px solid var(--kc-border);border-radius:var(--radius-md);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.kc-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-sm);background:var(--kc-soft);border:1px solid var(--kc-border)}
.kc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.kc-row-text{display:grid;gap:4px}
.kc-row-text strong{font-size:var(--fs-2xl)}
.kc-row-text span{font-size:var(--fs-lg);color:var(--kc-muted)}
.kc-arrow{font-size:var(--fs-4xl);color:var(--kc-accent-text);padding-right:8px}
.kc-article-head{padding:0 0 22px}
.kc-article-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}
.kc-steps{list-style:none;counter-reset:kc-step;margin:0 0 20px;padding:0;display:grid;gap:12px}
.kc-steps li{counter-increment:kc-step;position:relative;padding:12px 14px 12px 54px;background:var(--kc-surface);border:1px solid var(--kc-border);border-radius:var(--radius);font-size:var(--fs-xl)}
.kc-steps li::before{content:counter(kc-step);position:absolute;left:12px;top:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--kc-accent);color:var(--kc-on-accent);font-weight:800;font-size:var(--fs-md)}
.kc-tips{background:var(--kc-soft);border:1px solid var(--kc-border);border-radius:var(--radius);padding:14px 16px;margin:0 0 20px}
.kc-tips strong:first-child{font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--kc-subtle)}
.kc-tips ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:var(--fs-lg);color:var(--kc-muted)}
.kc .kc-cta{display:inline-block;background:var(--kc-accent);color:var(--kc-on-accent);text-decoration:none;font-weight:750;font-size:var(--fs-lg);padding:12px 18px;border-radius:var(--radius)}
.kc .kc-cta:hover{background:var(--kc-accent-hover)}
.kc-shot{margin:0;position:sticky;top:20px}
.kc-shot a{display:block}.kc-shot img{display:block;width:100%;height:auto;border-radius:var(--radius-md);border:1px solid var(--kc-border);box-shadow:0 14px 34px var(--kc-shadow);background:var(--kc-surface)}
.kc-shot figcaption{font-size:var(--fs-md);color:var(--kc-subtle);margin-top:10px}
.kc-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:32px 0 0;padding:14px 18px;border:1px solid var(--kc-border);border-radius:var(--radius-md);background:var(--kc-soft);font-size:var(--fs-lg);color:var(--kc-muted)}
.kc-feedback[hidden]{display:none}
.kc .kc-vote{padding:8px 14px;border:1px solid var(--kc-border);border-radius:var(--radius-pill);background:var(--kc-surface);color:var(--kc-text);font:inherit;font-weight:700;cursor:pointer}
.kc .kc-vote:hover{border-color:var(--kc-accent)}
.kc-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--kc-border)}
.kc .kc-turn{display:grid;gap:4px;align-content:center;padding:16px 18px;background:var(--kc-surface);border:1px solid var(--kc-border);border-radius:var(--radius-md);text-decoration:none;color:var(--kc-text);transition:border-color .15s,transform .15s,box-shadow .15s}
.kc .kc-turn:hover{border-color:var(--kc-accent);transform:translateY(-2px);box-shadow:0 10px 24px var(--kc-shadow)}
.kc-turn span{font-size:var(--fs-md);font-weight:700;color:var(--kc-accent-text)}
.kc-turn strong{font-size:var(--fs-xl)}
.kc .kc-next{text-align:right}
.kc-position{align-self:center;font-size:var(--fs-md);color:var(--kc-subtle);white-space:nowrap}
.kc-zoom{position:relative;cursor:zoom-in}
.kc-zoom-hint{position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--kc-surface);border:1px solid var(--kc-border);color:var(--kc-text);font-size:var(--fs-md);font-weight:700;box-shadow:0 4px 12px var(--kc-shadow)}
.kc-lightbox{width:min(1280px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--kc-border);border-radius:var(--radius-lg);background:var(--kc-surface);color:var(--kc-text);overflow:auto}
.kc-lightbox::backdrop{background:color-mix(in srgb,var(--kc-bg) 70%,transparent);backdrop-filter:blur(6px)}
.kc-lightbox-bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 12px 20px;background:var(--kc-surface);border-bottom:1px solid var(--kc-border);font-size:var(--fs-md);color:var(--kc-muted)}
.kc .kc-close{flex:none;min-height:44px;padding:10px 18px;border:0;border-radius:var(--radius-pill);background:var(--kc-accent);color:var(--kc-on-accent);font:inherit;font-size:var(--fs-lg);font-weight:800;cursor:pointer}
.kc .kc-close:hover{background:var(--kc-accent-hover)}
.kc .kc-close:focus-visible{outline:2px solid var(--kc-focus);outline-offset:3px}
.kc-lightbox[open]{display:flex;flex-direction:column}
.kc-lightbox img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 110px);object-fit:contain;margin:auto;cursor:zoom-out}
.kc-contact{margin:44px 0 0;padding:22px 26px;background:var(--kc-soft);border:1px solid var(--kc-border);border-radius:var(--radius-md)}
.kc-contact strong{font-size:var(--fs-2xl)}
.kc-contact p{margin:6px 0 0;font-size:var(--fs-lg);color:var(--kc-muted)}
/* Identity colours (identity.css): every topic wears one colour, the colour of the feature it explains; a card's line fades into the next card's colour, numbered steps use the Brand DNA
   studio's step colours, and the front page carries the studio's colour line. Only identity tokens here, no pairing of its own. */
.kc [data-topic]{--kc-hue:var(--kc-topic,var(--kc-accent));--kc-hue-next:var(--kc-next,var(--kc-hue));--kc-hue-soft:color-mix(in srgb,var(--kc-hue) 16%,var(--kc-surface));--kc-hue-ink:color-mix(in srgb,var(--kc-hue) 62%,var(--kc-text))}
.kc-hero-home{position:relative}.kc-hero-home::before{content:"";display:block;width:min(200px,40%);height:4px;margin-bottom:16px;border-radius:var(--radius-pill);background:var(--brand-gradient)}
.kc-card[data-topic]{position:relative;overflow:hidden;background:radial-gradient(80% 110px at 100% 0,color-mix(in srgb,var(--kc-hue) 14%,transparent),transparent 100%),var(--kc-surface)}
.kc-card[data-topic]::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--kc-hue) 55%,var(--kc-hue-next))}
.kc-card[data-topic]:hover,.kc-list[data-topic] .kc-row:hover,.kc-article[data-topic] .kc-turn:hover{border-color:var(--kc-hue)}
.kc [data-topic] .kc-icon{background:var(--kc-hue-soft);color:var(--kc-hue-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc-hue) 35%,transparent)}
.kc-hero-topic::after{content:"";display:block;width:96px;height:4px;margin-top:18px;border-radius:var(--radius-pill);background:var(--kc-hue)}
.kc-hero-topic .kc-icon{margin-bottom:6px}
.kc-list[data-topic] .kc-row{border-left:3px solid var(--kc-hue)}
.kc-article[data-topic] .kc-eyebrow::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--kc-hue);vertical-align:1px}
.kc-steps li{--kc-step:var(--step-materiale,var(--kc-accent))}.kc-steps li:nth-child(5n+2){--kc-step:var(--step-maal,var(--kc-accent))}.kc-steps li:nth-child(5n+3){--kc-step:var(--step-stemme,var(--kc-accent))}.kc-steps li:nth-child(5n+4){--kc-step:var(--step-forslag,var(--kc-accent))}.kc-steps li:nth-child(5n){--kc-step:var(--step-godkend,var(--kc-accent))}
.kc-steps li::before{background:color-mix(in srgb,var(--kc-step) 22%,var(--kc-surface));color:var(--kc-text);box-shadow:inset 0 0 0 2px var(--kc-step)}
.kc-article[data-topic] .kc-tips{border-left:3px solid var(--kc-hue)}
@media(max-width:760px){.kc-pager{grid-template-columns:1fr 1fr}.kc-position{grid-column:1/-1;grid-row:1;justify-self:center}.kc-turn strong{font-size:var(--fs-lg)}.kc-zoom-hint{right:8px;bottom:8px}.kc-lightbox{width:100vw;max-width:100vw;max-height:100vh;height:100vh;margin:0;border-radius:0;background:var(--kc-bg)}.kc-top{gap:8px}main.kc{padding:20px 16px 48px}.kc-article-body{grid-template-columns:1fr;gap:22px}.kc-shot{position:static;order:-1}.kc-row{grid-template-columns:96px minmax(0,1fr);gap:12px}.kc-arrow{display:none}.kc-hero p,.kc-article-head p{font-size:var(--fs-xl)}.kc-steps li{font-size:var(--fs-lg)}}
@media(prefers-reduced-motion:reduce){.kc-card,.kc-row,.kc .kc-turn{transition:none}.kc-card:hover,.kc-row:hover,.kc .kc-turn:hover{transform:none}}