/* Felles: artikkeloversikt og lesesider. Kai-identitet fra genererte artikler-tokens.css; sidemål fra docs/DESIGN.md. */
:root {
  /* Sidemarg er Kai-headerens padding (experience.css: 3.5 %, 16px gulv), så innholdet står i flukt med KAIZEN-merket. */
  --reading-width: 64ch; --page-margin: max(16px, 3.5%);
  --article-heading-leading: 1.08; --article-body-leading: 1.65;
  --article-section-leading: 1.2; --row-space: 32px; --intro-space: 32px;
  --article-gap: 1.25rem; --article-section-gap: 3rem; --article-border: 1px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--font-body); }
body { margin: 0; }
main { padding-top: 80px; }
/* Fast nav må skjerme tekst som ruller bak den. Kun artikkelflaten får tett bakgrunn. */
body > header.kai-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
main [id] { scroll-margin-top: 96px; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--cyan); color: var(--nav-fill); }
.skip { position: absolute; left: 20px; top: -100px; padding: 1rem; background: var(--nav-fill); color: var(--nav-text); z-index: 3; }
.skip:focus { top: 10px; }
main { width: 100%; padding-inline: var(--page-margin); }
/* Hovedsidens kontaktseksjon avslutter alle sidene (CEO 2026-11-01). Den står utenfor main og følger sidens språk som headeren; vasken går kant til kant og innholdet flukter med sidemargen. */
#kontakt { padding-inline: var(--page-margin); }
main h1,main h2,main h3 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: break-word; }
main p { margin-top: 0; }
.eyebrow { font: 500 var(--t-label)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--gap-title); }
.intro { padding-block: var(--intro-space); }
.intro .eyebrow { display: flex; align-items: center; gap: 12px; }
.intro kai-eyes { font-size: 24px; color: var(--eyes); }
.intro h1 { font-size: var(--t-h1); line-height: var(--lh-display); margin: 0 0 var(--gap-title); }
.title-dot { color: var(--accent); }
.lead { font-size: var(--t-body); font-weight: 500; line-height: 1.5; margin: 0; }
.section-label { display: flex; justify-content: space-between; padding-block: 16px; border-bottom: 1px solid var(--hairline); color: var(--muted); font: var(--t-label)/1.5 var(--font-mono); }
.section-label h2 { margin: 0; font: inherit; letter-spacing: .04em; text-transform: uppercase; }
.article-list { list-style: none; padding: 0; margin: 0; }
.article-row { display: grid; grid-template-columns: 1fr; padding-block: var(--row-space); border-bottom: 1px solid var(--hairline); }
.article-row .eyebrow { margin-bottom: 16px; }
.row-copy { max-width: 830px; }
.row-copy h3 { font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--gap-title); text-wrap: pretty; }
.row-copy h3 a { text-decoration: none; }
.row-copy h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.row-copy p { font-size: var(--t-body); line-height: 1.5; max-width: 64ch; color: var(--muted); margin-bottom: 16px; }
.read-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-body); text-decoration: none; }
.read-link span { color: var(--accent); }
.read-link:hover { text-decoration: underline; }
.reading-main { min-width: 0; max-width: var(--reading-width); font-size: var(--t-body); }
.prose { line-height: var(--article-body-leading); overflow-wrap: anywhere; }
.prose > p:first-child { font-weight: 500; }
.prose p { margin: 0 0 var(--article-gap); }
.prose h2 { font-size: var(--t-h3); line-height: var(--article-section-leading); margin: var(--article-section-gap) 0 var(--gap-title); scroll-margin-top: 96px; text-wrap: pretty; }
.prose a { color: var(--accent); }
.prose ul,.prose ol { padding-left: 1.4em; margin: 0 0 var(--article-gap); }
.prose li { padding-left: .25em; margin-bottom: .7em; }
.prose blockquote { border-left: 2px solid var(--accent); margin: 32px 0; padding: 4px 0 4px var(--article-gap); }
.prose blockquote p:last-child { margin-bottom: 0; }
.table-region { max-width: 100%; overflow-x: auto; margin-bottom: 24px; }
/* Samme tabellspråk som faktaradene på veiviseren: hårlinjer, ingen flate, første kolonne i mono. Verdiene 1rem som registeret. */
table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--hairline); }
th,td { text-align: left; vertical-align: top; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--hairline); overflow-wrap: normal; }
thead th { font: 500 var(--t-label)/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-block: 12px; }
tbody td:first-child { font-weight: 500; }
th:last-child, td:last-child { padding-right: 0; }
.table-wide table { min-width: 580px; }
.table-hint { font: var(--t-label)/1.6 var(--font-mono); color: var(--muted); }
/* Veiviseren grupperer etter leserens oppgave, uten en ny kort- eller knappfamilie. */
.task-intro h1 { font-size: var(--t-h2); line-height: 1.08; max-width: 20ch; }
.task-intro .lead { max-width: 64ch; }
.guide-section { margin-top: 48px; }
.article-contact { min-height: 48px; }
.article-contact[data-cta="secondary"] { min-height: 44px; display: flex; align-items: center; }
@media(min-width:1081px) {
  .task-list,.guide-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
  .task-list .article-row,.guide-list .article-row { display: block; padding-block: 32px; }
  .task-list .row-copy,.guide-list .row-copy { height: 100%; display: flex; flex-direction: column; }
  .task-list .read-link,.guide-list .read-link { margin-top: auto; align-self: start; }
}
/* Veiviser-utprøving: register til venstre som følger lesingen, én seksjon per veiledning til høyre. Ingen fast seksjonshøyde. */
.guide-hero { display: flex; flex-direction: column; }
.guide-hero h1 { font-size: var(--t-h1); line-height: 1.02; margin: 0 0 var(--gap-title); max-width: 18ch; text-wrap: balance; }
.guide-hero .lead { max-width: 48ch; margin: 0; }
/* Lenken ligger i bunnen av hero og flukter med registerets underkant i panelet (felles --panel-bottom, CEO 2026-11-01). */
.guide-hero-link { margin-top: auto; padding-top: 48px; align-self: start; }
.guide-layout { display: grid; grid-template-columns: minmax(0,1fr); }
.guide-panel { display: flex; flex-direction: column; padding-block: 16px 0; border-bottom: 1px solid var(--hairline); }
/* Registeret er et nedtrekk på mobil (44px rad) og står fast åpent på brede skjermer via nav.js. */
.guide-panel-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: var(--t-body); font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; }
.guide-panel-title::-webkit-details-marker { display: none; }
.guide-panel-title::after { content: "↓"; color: var(--muted); }
.guide-panel-index[open] .guide-panel-title::after { content: "↑"; }
.guide-index { border-top: 1px solid var(--hairline); margin-top: 8px; }
.guide-index ul { list-style: none; margin: 0; padding: 0; }
.guide-index li { border-bottom: 1px solid var(--hairline); }
.guide-index li:last-child { border-bottom: 0; }
/* Rader i brødtekstfont, nummer og tittel i ink; gruppeoverskriftene er de eneste etikettene. */
/* Registerpunktene ett trinn under brødtekst (CEO 2026-11-01): 1rem er Kai-menyens eget trinn for merke og kontaktknapp. */
.guide-index a, .guide-index-group { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 16px; min-height: 44px; padding-block: 10px; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); text-decoration: none; }
.guide-index-group { font: 500 var(--t-label)/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-index a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.guide-index a[aria-current] span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; text-decoration-color: var(--accent); }
.guide-no { font: inherit; }
.guide { padding-block: 64px; border-bottom: 1px solid var(--hairline); scroll-margin-top: 96px; }
.guide:first-child { padding-top: 48px; }
/* Seksjonshode etter Mecha: tre stablede etiketter, stor luft, tittel over to linjer, stor luft til hårlinjen. */
.guide > .eyebrow { display: flex; flex-direction: column; gap: 2px; margin-bottom: 96px; }
.guide > h2, .guide-article > h1 { font-size: var(--t-h2); line-height: 1.04; margin: 0 0 32px; max-width: 20ch; text-wrap: balance; hyphens: auto; } /* lang="nb": lange sammensatte ord deles med bindestrek på smal skjerm i stedet for å brekke */
.guide > h2 { font-size: var(--t-h1); line-height: 1; max-width: 16ch; margin-bottom: 80px; }
/* Lesesiden: innholdsfortegnelsen tar registerets plass i panelet; teksten fyller høyre kolonne. */
.guide-article .guide-body { grid-template-columns: minmax(0,1fr); }
/* Seksjonskropp etter Mecha-mønsteret (CEO 2026-11-01): under hårlinjen står knappen i venstre felt, teksten fra veiviser.json til høyre, og faktaradene under i to kolonner. */
.guide-body { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px 48px; border-top: 1px solid var(--hairline); padding-top: 40px; }
.guide-cta { min-height: 44px; display: flex; align-items: flex-start; }
.guide-lead { font-size: var(--t-body); font-weight: 500; line-height: 1.55; max-width: 44ch; margin: 0; color: var(--ink); text-wrap: pretty; } /* ingress = lesetekst (DESIGN.md §29/§35), ikke metadata */
.guide-facts { grid-column: 1 / -1; margin: 40px 0 0; border-top: 1px solid var(--hairline); }
.guide-facts div { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px 32px; padding-block: 18px; border-bottom: 1px solid var(--hairline); font-size: var(--t-body); line-height: 1.5; }
.guide-facts dt { font: 500 var(--t-label)/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-facts dd { margin: 0; font-size: 1rem; line-height: 1.5; } /* samme trinn som registeret; ingressen står alene på --t-body (CEO 2026-11-01) */
@media(min-width:1081px) {
  .guide-layout { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 80px; align-items: start; }
  /* Seksjonen følger Mecha 1:1 i skjermhøyde (CEO 2026-11-01), målt på referansen: etiketter ved 3 %, tittel 20–38 %,
     hårlinje 46 %, knapp og tekst 49 %, tabell 69–81 %, resten luft. Alt er i svh, så proporsjonene holder i alle vinduer;
     min-height lar seksjonen vokse i stedet for å klippe på lave skjermer. */
  /* Headeren svever over innholdet (60px), Mechas ligger i flyten; de 60 legges til toppen så etikettene aldri havner bak den.
     Registerklikk lander seksjonen i vinduskanten (scroll-margin 0), så én seksjon = én skjerm. */
  .guide { display: flex; flex-direction: column; min-height: 100svh; padding: calc(60px + 2svh) 0 var(--panel-bottom, 48px); }
  html:has(.kai-header) main section.guide[id] { scroll-margin-top: 0; }
  .guide > .eyebrow { margin-bottom: 0; }
  .guide > h2 { font-size: min(var(--t-h1), 8.5svh); margin: 8svh 0 8svh; }
  .guide-body { padding-top: 3svh; }
  .guide-facts { margin-top: 5svh; }
  /* Panel og hero deler bunnavstand, så registerets underkant og hero-lenken står på samme linje ved scroll 0. */
  .guide-layout { --panel-bottom: 48px; }
  .guide-panel { position: sticky; top: 96px; height: calc(100svh - 96px); padding: 48px 0 var(--panel-bottom); border-bottom: 0; }
  .guide-hero, .guide:first-child { padding-top: 48px; }
  /* main har 80px topp-padding; hero trekker den fra så underkanten lander på folden, der panelet også slutter. */
  .guide-hero { min-height: calc(100svh - 80px); padding-bottom: var(--panel-bottom); }
  .guide-panel-index { margin-top: auto; }
  .guide-panel-title { pointer-events: none; cursor: default; }
  .guide-panel-title::after, .guide-panel-index[open] .guide-panel-title::after { content: none; }
  .guide-index li:last-child { border-bottom: 1px solid var(--hairline); }
  /* 260px gir Kai-øya plass også når pil-blobben dyttes ut ved hover (221px i ro, 248px åpen). */
  .guide-body { grid-template-columns: 260px minmax(0,1fr); }
  /* Tabellen ligger under teksten, knappen står alene i sin kolonne (CEO 2026-11-01). Etiketten tar sin bredde, verdien resten, så radene holder én linje. */
  .guide-facts { grid-column: 2; }
  .guide-facts div { grid-template-columns: 200px minmax(0,1fr); gap: 4px 32px; } /* 200px = bredeste etikett, så verdiene flukter */
  .guide-article .guide-body { grid-template-columns: minmax(0,1fr); }
}
@media(min-width:1081px) {
  :root { --row-space: 48px; --intro-space: 48px; }
  .article-row { grid-template-columns: 1fr 3fr; gap: 48px; }
  .article-row > .eyebrow { padding-top: 8px; }
  /* Innholdsfortegnelsen følger lesingen; 96px matcher ankeravstanden under den faste navigasjonen. */
  .table-hint { display: none; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto; } }