/* © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
   Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt. */
/* ==========================================================================
   HSC — HAUT SURFACE COMPILER
   TARGET: WEBSJEKK-PAGE-SURFACE-007 (/kunnskap/)
   SCOPE: html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main
   ========================================================================== */

/* 1. TOKENS & BASE */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main {
  --ws-paper: #f8f7f3;
  --ws-forest: #102724;
  --ws-mint: #e8f3ee;
  --ws-lime: #b2f46d;
  --ws-sky: #eaf2f8;
  --ws-sand: #f8f4e6;
  --ws-lilac: #f0ebf5;
  --ws-border-dark: rgba(16, 39, 36, 0.12);
  --ws-border-light: rgba(255, 255, 255, 0.15);

  background-color: var(--ws-paper);
  color: var(--ws-forest);
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 100vw;
  box-sizing: border-box;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *::before,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *::after {
  box-sizing: inherit;
}

/* Hard reset for skjulte elementer */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [hidden] {
  display: none !important;
}

/* 2. OVERFLATEKONTRAST & CASCADE-LÅS (!important) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="dark"],
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion {
  background-color: var(--ws-forest) !important;
  --ui-fg: #ffffff !important;
  --ui-body: #d1dad7 !important;
  --wx-text: #ffffff !important;
  --wx-copy: #d1dad7 !important;
  color: var(--wx-text) !important;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="paper"] {
  background-color: var(--ws-paper) !important;
  --ui-fg: var(--ws-forest) !important;
  --ui-body: #40574f !important;
  --wx-text: var(--ws-forest) !important;
  --wx-copy: #40574f !important;
  color: var(--wx-text) !important;
}

/* Nested pale cards reset */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="mint"] { background-color: var(--ws-mint) !important; --wx-text: var(--ws-forest) !important; --wx-copy: #40574f !important; color: var(--wx-text) !important; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="sky"] { background-color: var(--ws-sky) !important; --wx-text: var(--ws-forest) !important; --wx-copy: #40574f !important; color: var(--wx-text) !important; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="sand"] { background-color: var(--ws-sand) !important; --wx-text: var(--ws-forest) !important; --wx-copy: #40574f !important; color: var(--wx-text) !important; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="lilac"] { background-color: var(--ws-lilac) !important; --wx-text: var(--ws-forest) !important; --wx-copy: #40574f !important; color: var(--wx-text) !important; }

/* 3. TYPOGRAFI & RYTME */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main h1 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem 0;
  max-width: 24ch !important;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem 0;
  max-width: 28ch !important;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem 0; max-width: 32ch !important; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main p { line-height: 1.6; margin: 0 0 1rem 0; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-eyebrow,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .visibility-answer-v1__eyebrow,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index__label,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__eyebrow {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 1rem; opacity: 0.8;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="dark"] .kh-eyebrow {
  color: var(--ws-lime) !important;
  opacity: 1;
}

/* 4. NATIVE CONTROLS & TOUCH MÅL (44px) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main label {
  color: inherit; min-height: 44px;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main :focus-visible {
  outline: 3px solid var(--ws-lime); outline-offset: 3px;
}

/* 5. BASE LAYOUT & SHELLS (Max 1280px, Modest spacing) */
/* Ingen global section padding - styres via spesifikke shells */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .visibility-answer-v1,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-shell,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey {
  padding: clamp(24px, 4vw, 48px) 5vw;
  max-width: 1280px;
  margin: 0 auto;
}

/* 6. HERO & SNAREVEIER (.kh-hero) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px;
}
@media (min-width: 1024px) {
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__grid { grid-template-columns: 1.2fr 0.8fr; align-items: stretch; }
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__copy {
  padding: clamp(24px, 4vw, 48px); border-radius: 12px; display: flex; flex-direction: column; justify-content: center;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__lede { font-size: 1.125rem; opacity: 0.9; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* CTAs - Eksplisitt kontrast */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-action {
  background-color: var(--ws-lime) !important; color: var(--ws-forest) !important; padding: 0 24px; font-weight: 600; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--ws-lime);
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="dark"] .kh-action--ghost {
  background-color: transparent !important; color: #ffffff !important; border: 1.5px solid #ffffff !important;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="paper"] .kh-action--ghost {
  background-color: transparent !important; color: var(--ws-forest) !important; border: 1.5px solid var(--ws-forest) !important;
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__index {
  padding: clamp(32px, 5vw, 48px); border-radius: 12px; display: flex; flex-direction: column;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button {
  background: #ffffff; border: 1px solid var(--ws-border-dark); padding: 16px; border-radius: 6px; display: flex; align-items: center; gap: 16px; font-weight: 600; cursor: pointer; text-align: left;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button span:first-child { font-size: 0.75rem; opacity: 0.6; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button b { flex-grow: 1; color: var(--ws-forest); font-size: 1rem; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button span:last-child { font-size: 1.25rem; opacity: 0.5; }

/* 7. FORKLARINGER & FILTER (.kh-section#forklaringer) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-section__head { max-width: 800px; margin-bottom: 48px; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter::-webkit-scrollbar { display: none; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter button {
  background: var(--ws-paper); border: 1px solid var(--ws-border-dark); padding: 0 20px; border-radius: 24px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ws-forest);
}
/* Filter Valgt Tilstand (HSC Forslag) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter button[aria-pressed="true"] {
  background: var(--ws-forest) !important; color: #ffffff !important; border-color: var(--ws-forest); border-bottom: 3px solid var(--ws-lime);
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
@media (min-width: 768px) { html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card {
  padding: 32px; border-radius: 8px; border: 1px solid var(--ws-border-dark); display: flex; flex-direction: column; text-decoration: none;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; opacity: 0.7; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card p { font-size: 0.875rem; opacity: 0.9; margin-bottom: 24px; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card__action { margin-top: auto; font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ws-border-dark); padding-top: 16px; }

/* 8. NYHETS-SKILLE (.kh-now) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 32px;
}
@media (min-width: 768px) { html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card {
  padding: 32px; border-radius: 8px; border: 1px solid var(--ws-border-dark); display: flex; flex-direction: column; text-decoration: none;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card small { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; opacity: 0.7; display: block; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card p { font-size: 0.875rem; opacity: 0.9; margin-bottom: 24px; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card strong { margin-top: auto; font-size: 0.875rem; }

/* 9. GRENSELINJE (.kh-boundary) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--ws-border-dark); padding-top: 32px;
}
@media (min-width: 768px) { html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary { grid-template-columns: 1fr 1fr; align-items: start; } }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary h3 { font-size: 1.75rem; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary p { font-size: 1.125rem; opacity: 0.9; }

/* 10. REDAKSJONELL EXIT / KONVERTERING */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion {
  border-radius: 12px; margin-top: 48px; margin-bottom: 48px; display: flex; align-items: center; position: relative; overflow: hidden;
}
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion__copy { max-width: 600px; position: relative; z-index: 2; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
@media (min-width: 1024px) { html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link { padding: 32px; border-radius: 8px; border: 1px solid var(--ws-border-dark); display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #ffffff; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link span { font-size: 0.75rem; font-weight: 700; margin-bottom: 12px; opacity: 0.8; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link b { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--ws-forest); }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__actions a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; display: inline-flex; align-items: center; min-height: 44px; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .knowledge-hub-v1 { background: #f8f7f3 !important; --kh-ink:#102724; --kh-muted:#40574f; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-section,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero { padding-block: 24px !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-shell { width: min(1280px,100%); padding-inline: clamp(20px,4vw,48px); }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card { grid-column: auto !important; min-width: 0; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__grid > *,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-section__head > *,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary > * { min-width: 0; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-section__head { max-width: none; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__copy,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion { background: #102724 !important; color:#fff !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__copy :is(h1,p),
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion :is(h2,p) { color: #fff !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main [data-ui-surface="dark"] .kh-eyebrow { color:#b2f46d !important; background:transparent !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__index,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link { --ui-fg:#102724 !important; --ui-body:#40574f !important; --wx-text:#102724 !important; --wx-copy:#40574f !important; color:#102724 !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__index :is(h2,p,b,span),
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card :is(h3,p,span),
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card :is(h3,p,strong,small),
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link :is(span,strong,p,b) { color:#102724 !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button { color:#102724 !important; background:#fff !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter button { min-height:44px !important; background:#fff !important; color:#102724 !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-filter button[aria-pressed="true"] { background:#102724 !important; color:#fff !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-action { padding:12px 22px !important; font-size:1rem !important; line-height:1.35 !important; border-radius:24px; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-conversion__copy { max-width: 760px; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__actions a { min-height:48px; padding:12px 22px; font-size:1rem !important; font-weight:650; line-height:1.35; opacity:1 !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__actions a:first-child { background:#143a30 !important; color:#fff !important; border:1px solid #143a30 !important; }

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__actions a:not(:first-child) { background:#fff !important; color:#102724 !important; border:1px solid #7c928b !important; }

@media(max-width:767px) {
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-section__head, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card-grid, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-grid, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-boundary { grid-template-columns:minmax(0,1fr) !important; }
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__copy, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-hero__index { padding:24px !important; }
}