/* ============================================================
   KLAPPTAVLA — avstandsseksjonen «Nærmere enn du tror» på
   /hagebostad/ og på forsidene (der i ramme="naken", inne i
   forsidens egen seksjon).

   ALLE MÅL ER RELATIVE TIL SEKSJONENS EGEN BREDDE, ikke vinduets.
   Seksjonen er en container, og klaffene regner grad ut fra
   kolonnebredden. Med vw fikk en 360 px spalte skrivebordstypografi
   og klaffene rant ut av kabinettet.

   FELLE: cq-enheter i en containers EGNE erklæringer måler seg mot
   forelderen, ikke mot containeren. Derfor ligger polstringen i en
   egen div inne i <section>, og klaffenes font-size ett nivå under
   kolonne-containeren.
   ============================================================ */

/* ── Tavlas egen materialskala ───────────────────────────────
   Dette er spesialdesign etter CLAUDE.md: en mekanisk Solari-tavle
   gjengitt i sitt eget materiale. Tonene er metall og lakk sett
   ovenfra, ikke husets flater, og de finnes ikke i paletten fordi
   ingen annen flate skal ha dem. De står ETT sted — her — og hver
   linje er merket som unntak, slik regelen krever.

   Kontrast: blekk #fbf8f2 på klaffeflate #31414f = 10,6:1. */
.kt {
  /* farge-unntak: tavlas eget materiale, se blokka over */
  --kt-ramme: #1d2c3a;
  /* farge-unntak: tavlas eget materiale */
  --kt-ramme2: #111d28;
  /* farge-unntak: tavlas eget materiale */
  --kt-bunn: #09111a;
  /* farge-unntak: tavlas eget materiale */
  --kt-topp1: #3a4d60;
  /* farge-unntak: tavlas eget materiale */
  --kt-topp2: #28353f;
  /* farge-unntak: tavlas eget materiale */
  --kt-bunn1: #31414f;
  /* farge-unntak: tavlas eget materiale */
  --kt-bunn2: #1d2833;
  /* farge-unntak: tavlas eget materiale */
  --kt-ink: #fbf8f2;
  --kt-hengsel: rgba(0, 0, 0, 0.58);
  --kt-hengsel-lys: rgba(255, 255, 255, 0.07);
  --kt-kant: rgba(0, 0, 0, 0.55);
  --kt-strip: rgba(241, 235, 227, 0.6);
  --kt-skrue: rgba(241, 235, 227, 0.13);

  /* Tavla maaler seg mot SEKSJONEN, ikke vinduet: klaffene regner grad ut
     fra kolonnebredden. Flate, polstring og typografi kommer fra
     .kv-section / .kv-inner / .kv-eyebrow / .kv-title / .kv-intro. */
  container-type: inline-size;

  /* MINDRE LUFT UNDER enn husets standard (Tom, 18. sep).
     Maalt: 160 px ned til neste eyebrow, likt med alle de andre
     seksjonsparene paa sida — rytmen var altsaa ikke feil. Men den er
     stemt for seksjoner som SLUTTER MED TEKST, der siste linje har sin
     egen linjeavstand aa toene ut i. Denne slutter med en pille: en tung
     flate med harde kanter, og da leser de samme 160 pikslene som et hull.
     Halvert bunn gir ~132 px, som kjennes likt naar oeyet maaler fra
     knappekanten. Toppen roeres ikke — der kommer tavla etter et moerkt
     kart og trenger luften. */
  padding-bottom: clamp(28px, 4vh, 52px);
}

/* Naken tavle (ramme="naken", Forside C): ingen seksjonsramme, så heller
   ingen egen luft. Seksjonen rundt eier polstringen. To klasser, fordi
   regelen skal slå .kt over. */
.kt.kt--naken { padding-bottom: 0; }

/* Lys tavle — beholdt som reell variant fra designrunden. Legges på
   .kt for å bytte materiale uten å røre noe annet. */
.kt--lys {
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-ramme: #33485c;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-ramme2: #26384a;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-bunn: #16232f;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-topp1: #f6f1ea;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-topp2: #e7dfd3;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-bunn1: #f1eae0;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-bunn2: #dcd2c3;
  /* farge-unntak: tavlas eget materiale, lys variant */
  --kt-ink: #15110e;
  --kt-hengsel: rgba(10, 16, 22, 0.42);
  --kt-hengsel-lys: rgba(255, 255, 255, 0.5);
  --kt-kant: rgba(12, 18, 24, 0.4);
  --kt-strip: rgba(241, 235, 227, 0.62);
  --kt-skrue: rgba(241, 235, 227, 0.18);
}

/* Eyebrow over tittelen, som i alle husets andre seksjoner. Prototypen
   hadde den ved siden av på grunnlinja; det var seksjonens eget påfunn og
   brøt med resten av sida (Tom, 18. sep). */
.kt__topp {
  margin-bottom: clamp(18px, 2.8vw, 36px);
}
.kt__topp .kv-title { max-width: 20ch; }

/* ── Kabinettet ──────────────────────────────────────────────── */

.kt__kabinett {
  position: relative;
  background: linear-gradient(176deg, var(--kt-ramme) 0%, var(--kt-ramme2) 100%);
  border-radius: 6px;
  padding: clamp(5px, 1.1cqw, 13px);
  box-shadow:
    0 26px 46px -26px rgba(10, 22, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.kt__skrue {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kt-skrue);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.kt__skrue--nv { top: 6px; left: 6px; }
.kt__skrue--no { top: 6px; right: 6px; }
.kt__skrue--sv { bottom: 6px; left: 6px; }
.kt__skrue--so { bottom: 6px; right: 6px; }

.kt__plate {
  background: var(--kt-bunn);
  border-radius: 3px;
  padding: clamp(9px, 1.3cqw, 15px) clamp(6px, 1.2cqw, 15px) clamp(6px, 0.9cqw, 11px);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Speilsjenær over hele kabinettet — glasset foran klaffene. */
.kt__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

.kt__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  padding-bottom: clamp(7px, 1cqw, 11px);
  border-bottom: 1px solid rgba(241, 235, 227, 0.16);
  font-family: var(--font-mono);
  /* Etikettene er vanlig tekst, ikke tavle: tekstgulvet gjelder
     (mobilgjennomgang, okt 2026). Klaffene under er tavlas egen skala. */
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--kt-strip);
}
.kt__strip span { white-space: nowrap; }

/* Kommunen i store klaffer (forsiden, Tom 23. sep: «kommunenavnet i
   toppen må være mye mer synlig»). Samme klaffer som radene, men større:
   det er kommunen leseren skal lese først. Etiketten står over i tavlas
   mikroskala, og hårstreken under skiller hodet fra radene. */
.kt__hode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8cqw, 10px);
  padding-bottom: clamp(12px, 1.6cqw, 20px);
  border-bottom: 1px solid rgba(241, 235, 227, 0.16);
}
.kt__hode-etikett {
  font-family: var(--font-mono);
  /* Etikettene er vanlig tekst, ikke tavle: tekstgulvet gjelder
     (mobilgjennomgang, okt 2026). Klaffene under er tavlas egen skala. */
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--kt-strip);
}
/* Kolonnen er målestokken for klaffene, som i radene. Bredden er stemt så
   elleve klaffer (FLEKKEFJORD) blir tydelig større enn radenes. */
.kt__kol--kommune { width: min(100%, 680px); }
/* typografi-unntak: klaffegraden er en funksjon av kolonnebredden,
   som i radene under */
.kt__kol--kommune .kt__klaffer { font-size: clamp(16px, calc((100cqw - 20px) / 12.4), 54px); }

/* Foten: knutepunktene reisene går fra. Samme mikroskala som topplinja,
   men hårstreken ligger OVER — den skiller foten fra radene den forklarer. */
.kt__fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  margin-top: clamp(7px, 1cqw, 11px);
  padding-top: clamp(7px, 1cqw, 11px);
  border-top: 1px solid rgba(241, 235, 227, 0.16);
  font-family: var(--font-mono);
  /* Etikettene er vanlig tekst, ikke tavle: tekstgulvet gjelder
     (mobilgjennomgang, okt 2026). Klaffene under er tavlas egen skala. */
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--kt-strip);
}

/* ── Raden ───────────────────────────────────────────────────
   Skinna under hver rad er en fysisk skjøt: mørk strek med et lyst
   hår under. 3 px luft inni raden mot ~22 px mellom rader — bryter
   raden på mobil, skal den fortsatt lese som ÉN linje. */
.kt__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px clamp(5px, 1.5cqw, 24px);
  padding: clamp(11px, 1.1cqw, 14px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.36);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045);
}
.kt__rad:last-child { border-bottom: 0; box-shadow: none; }

/* Hver kolonne er to nivåer: en ytre container som er målestokken,
   og en indre flex som bærer graden. Klaffbredden regnes fra
   kolonnens egen bredde, så raden treffer kanten i alle bredder.

   Nevnerne er «antall klaffer × 1.12» (klaffbredden i em); trekket i
   telleren er summen av mellomrommene, (antall − 1) × 2px. Endrer du
   klaffbredden eller mellomrommet, må nevneren regnes om. */
.kt__kol { container-type: inline-size; min-width: 0; }
/* Grunnbreddene er stemt etter antall klaffer i hver kolonne. Reisemåten
   gikk fra tre til elleve tegn da «FLY» ble «BIL + FLY», og måtte ha
   plassen sin — den er tatt fra navnekolonnens overskudd, ikke fra tida. */
.kt__kol--navn { flex: 1 1 240px; }
.kt__kol--tid { flex: 1 1 130px; }
.kt__kol--modus { flex: 0 1 112px; }

.kt__klaffer {
  display: flex;
  gap: 2px;
  font-family: var(--font-mono);
}
/* typografi-unntak: klaffegraden er en funksjon av kolonnebredden,
   ikke et trinn på typeskalaen — tavlas egen skala, som --album-*  */
.kt__kol--navn .kt__klaffer { font-size: clamp(10px, calc((100cqw - 22px) / 13.7), 30px); }
/* typografi-unntak: se linja over */
.kt__kol--tid .kt__klaffer { font-size: clamp(11px, calc((100cqw - 10px) / 6.85), 36px); justify-content: flex-end; }

/* ── Reisemåten: piktogramklaffer (Tom 19. okt 2026) ─────────────
   To klaffer per rad, til høyre for tida. De er vanlige .kt-klaff med
   samme lag og hengsel, bare bredere, og «tegnet» er et symbol. Graden
   regnes fra kolonnebredden som for bokstavene: to klaffer à 1,51 em og
   ett mellomrom på 2 px. */
/* typografi-unntak: klaffegraden er en funksjon av kolonnebredden, ikke et
   trinn på typeskalaen — tavlas egen skala, som --album-* */
.kt__kol--modus .kt__klaffer { font-size: calc((100cqw - 2px) / 3.02); justify-content: flex-end; }
.kt-klaff--ikon { width: 1.51em; }
.kt-klaff--ikon svg { display: block; width: 1.05em; height: 1.05em; }

/* ── Smal seksjon: TO linjer per rad, ikke tre ────────────────
   Raden brekker naturlig når den ikke får plass. Da skal navnet ha egen
   linje, og tid og måte dele den neste — tid mot venstre kant, måte mot
   høyre. Det gir ÉN felles venstremarg for navn og tid, og én høyrekant
   for måten.

   Uten dette ble det tre linjer med hver sin kant: navn venstre, tid
   høyre, måte høyre — og tavla leste som rot (Tom, 18. sep).

   Midtstilling ble vurdert og forkastet: klaffene er et rutenett, og et
   rutenett leser fra én kant. Midtstilt ville gitt to ujevne kanter,
   fordi radene har ulikt antall blanke klaffer. */
@container (max-width: 660px) {
  .kt__kol--navn { flex: 1 1 100%; }
  .kt__kol--tid { flex: 1 1 130px; }
  .kt__kol--modus { flex: 0 1 94px; }
  .kt__kol--tid .kt__klaffer { justify-content: flex-start; }
}

/* ── Klaffen ─────────────────────────────────────────────────
   Fire lag. Hengselet SKAL være 1 px: ved 1,5 kuttet skjøten
   tverrstreken i E, F og H, og bokstavene ble tvetydige. */
.kt-klaff {
  position: relative;
  width: 1.12em;
  height: 1.74em;
  perspective: 180px;
  flex: none;
}

.kt-klaff__ned,
.kt-klaff__opp,
.kt-klaff__blad {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--kt-kant);
}

.kt-klaff__ned {
  top: 50%;
  bottom: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, var(--kt-bunn1) 0%, var(--kt-bunn2) 100%);
}

.kt-klaff__opp,
.kt-klaff__blad {
  top: 0;
  bottom: 50%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--kt-topp1) 0%, var(--kt-topp2) 100%);
}

/* Bladet er det fallende, og viser det FORRIGE tegnet. */
.kt-klaff__blad {
  box-shadow: inset 0 0 0 1px var(--kt-kant), 0 3px 7px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  opacity: 0;
}

/* Tegnet er sentrert på HELE klaffen og beskåret til sin halvdel —
   derfor 200 % høyde i en absolutt plassert span. */
.kt-klaff__tegn {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kt-ink);
}
/* Bokstavene står 0,1 em under midten (Tom 19. okt 2026). Målt i IBM Plex
   Mono: midtstreken i E, F og H går fra 0,025 em over til 0,06 em under
   midten av klaffen, akkurat der hengselet ligger, og forsvant i skjøten.
   Med 0,1 em ned ligger streken helt under hengselet, også på mobil, og
   bokstaven står bare synlig litt lavt. Alle tre lagene flyttes likt, så
   halvdelene møtes som før. Symbolene står midt i. */
.kt-klaff__tegn { transform: translateY(0.1em); }
.kt-klaff--ikon .kt-klaff__tegn { transform: none; }
.kt-klaff__ned .kt-klaff__tegn { bottom: 0; }
.kt-klaff__opp .kt-klaff__tegn,
.kt-klaff__blad .kt-klaff__tegn { top: 0; }

.kt-klaff__hengsel {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--kt-hengsel);
  box-shadow: 0 1px 0 var(--kt-hengsel-lys);
}

/* ── Bunnlinje: ingress + CTA ────────────────────────────────── */

/* Ingress og knapp STABLES, venstrestilt under tavla. Prototypen skjøv
   knappen ut mot motsatt kant med space-between; da sto den for seg selv
   ute i margen, uten noe å høre til. Husets seksjoner leser ovenfra og ned
   i én kolonne — eyebrow, tittel, ingress, handling — og tidskartet gjorde
   det samme før. */
.kt__bunn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(20px, 3vw, 40px);
}

/* Graden kommer fra .kv-intro. Her styres bare hvordan ingressen oppfører
   seg i bunnraden ved siden av knappen. */
.kt__ingress {
  max-width: 62ch;
  text-wrap: pretty;
}

/* CTA-en ER husets .kv-pill--primary (ta-steget.css) — flate, farge og
   hover kommer derfra, og skal ikke skrives om her. Klassen under gjør to
   ting: gir knappen tavlas containerrelative grad, og hindrer at den
   strekkes av flex-raden. To klasser i selektoren fordi den slår en
   basisregel i et annet stilark (se CLAUDE.md). */
.kv-pill.kt__cta {
  /* En inline-flex som er flex-barn blokkifiseres og strekkes til hele
     spaltebredden. Samme felle som tidskartets knapp gikk i. */
  align-self: flex-start;
  flex: none;
  gap: 12px;
  padding: 16px clamp(22px, 2.6vw, 34px);
  line-height: var(--linje-etikett);
}
.kt__cta:focus-visible {
  outline: 2px solid var(--aksent-tekst);
  outline-offset: 3px;
}
.kt__cta svg { width: 18px; height: 18px; flex: none; }

/* ── Lesbar utgave for skjermlesere ──────────────────────────
   Tavla er aria-hidden: hver klaff rendrer samme tegn tre ganger, og
   uten dette leser skjermleseren «A A A M M M». Lista dekker ALLE
   målene, ikke bare de seks som vises — den som ikke ser tavla skal
   ikke måtte vente på at den klapper rundt. Samme grep som .tk__sr. */
.kt__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Redusert bevegelse ──────────────────────────────────────
   Tavla klapper ikke. Den står på utgangstilstanden, der Kristiansand
   viser toget. Poenget går fram uten bevegelse. */
@media (prefers-reduced-motion: reduce) {
  .kt-klaff__blad { display: none; }
}

/* Styring nede til høyre i tavlas bunnlinje (tilgjengelighet 2.2.2,
   28. sep 2026): pil tilbake, pause, pil fram. I tavlas egen skrift og farge,
   så den leser som en del av tavla. Tegnene er små, men treffeflaten er minst
   24 × 24 px. */
.kt__styring {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.kt__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  cursor: pointer;
}
.kt__knapp:hover { color: var(--color-cream); }
.kt__knapp:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 1px; }
/* På berøringsskjerm 44 px, husets minste trykkflate (tilgjengelighet,
   19. okt 2026). Med mus holder 24 px, og tavla beholder sin tette fot. */
@media (hover: none) {
  .kt__knapp { min-width: 44px; min-height: 44px; }
}
.kt__ikon-spill { display: none; }
.kt__knapp[aria-pressed="true"] .kt__ikon-pause { display: none; }
.kt__knapp[aria-pressed="true"] .kt__ikon-spill { display: inline; }