/* ════════════════════════════════════════════════════════════
   tech.css — artikkelkomponenter og figurspråk for gribben.no/tech
   Lastes ETTER gribben.css og arver paletten derfra. Ingen egne
   rotfarger utenom figurflata, som er mørke og trenger sine egne.

   Komponentene er flyttet hit fra Strava-artikkelen
   (loping/ai-som-personlig-trener.html) slik at hver ny sak
   slipper å kopiere dem. Der saken fortsatt har egne kopier, vinner
   den lokale — ingenting her skal bryte en eldre side.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Figurflater. Stedet der grønn får lov å være lys. */
  --f-bg:     var(--navy);
  --f-panel:  #0E2442;
  --f-panel2: #15305A;
  --f-line:   rgba(255, 255, 255, 0.16);
  --f-text:   #F4F7FA;
  --f-dim:    #A9BACD;      /* 8,9:1 mot navy */
  --f-gul:    #F7C46C;      /* samme gule som markerte felt i promptene */
  --bred:     980px;        /* figurer og brede blokker */
}

/* ────────────────────────────────────────────
   ARTIKKEL — brødtekst og overskrifter
   ──────────────────────────────────────────── */
.art-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.art-meta .prikk { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.3); }

.art { max-width: var(--read); margin: 0 auto; }
.art-bred { max-width: var(--bred); margin: 0 auto; }
.art p { font-size: 1.06rem; color: var(--ink); margin-bottom: 20px; }
.art p.lead { font-size: 1.22rem; color: var(--ink-soft); line-height: 1.68; }
.art h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
  color: var(--blue); margin: 54px 0 10px;
}
.art h2 em { color: var(--green-dark); font-style: normal; }
.art h3 {
  font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.3; color: var(--ink); margin: 34px 0 10px;
}
.art .kapittel {
  font-family: var(--font-display);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #3F660A; margin-top: 54px;
}
.art .kapittel + h2 { margin-top: 6px; }
.art a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue-wash); }
.art a:hover { border-bottom-color: var(--blue); }
.art strong { font-weight: 700; }
.art ul, .art ol { list-style: none; margin: 0 0 22px; }
.art ul li, .art ol li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--ink); }
.art ul li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 2px; background: var(--green);
}
.art ol { counter-reset: n; }
.art ol li { padding-left: 30px; counter-increment: n; }
.art ol li::before {
  content: counter(n) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 800; color: var(--green-dark);
}
.art code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em; background: var(--sand);
  border: 1px solid var(--grey-line); border-radius: 5px;
  padding: 1px 6px; color: #2C4A0A;
}
.art blockquote {
  border-left: 4px solid var(--green); background: var(--green-wash);
  padding: 16px 22px; margin: 26px 0; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.04rem; color: var(--ink);
}
.art blockquote p:last-child { margin-bottom: 0; }

/* Kort sagt — definisjonen i én boks, øverst på hver begrepsside */
.kortsagt {
  background: var(--white); border: 1px solid var(--grey-line);
  border-top: 4px solid var(--blue); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 26px; margin: 8px 0 30px;
}
.kortsagt .k {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: #0063A0;
  display: block; margin-bottom: 8px;
}
.kortsagt p { margin: 0; font-size: 1.14rem; line-height: 1.6; color: var(--ink); }
.kortsagt p strong { color: var(--blue); }

/* Analogien — grønn flate, merket som bilde og ikke som fakta */
.analogi {
  background: var(--green-wash); border-left: 4px solid var(--green-dark);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 24px; margin: 26px 0;
}
.analogi .k {
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #3F660A;
  display: block; margin-bottom: 6px;
}
.analogi p { margin: 0; font-size: 1rem; color: var(--ink); }

/* Tall som bærer et poeng. Tallet står stort, kilden under. */
.tallrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 26px 0 30px; }
.tall {
  background: var(--white); border: 1px solid var(--grey-line);
  border-radius: var(--radius); padding: 20px 20px 16px;
}
.tall .v {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--blue);
}
.tall .l { font-size: 0.88rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }

/* ────────────────────────────────────────────
   SPØRSMÅL, KRAV, STEG, PROMPTER — fra Strava-artikkelen
   ──────────────────────────────────────────── */
.sporsmal { display: grid; gap: 10px; margin: 24px 0 26px; }
.sporsmal div {
  background: var(--white); border: 1px solid var(--grey-line);
  border-left: 3px solid var(--blue); border-radius: 10px;
  padding: 14px 18px; font-size: 0.98rem; color: var(--ink);
}
.sporsmal div::before { content: '\201C'; color: var(--blue); font-weight: 700; }
.sporsmal div::after  { content: '\201D'; color: var(--blue); font-weight: 700; }

.krav { margin: 26px 0 28px; display: grid; gap: 1px; background: var(--grey-line);
        border: 1px solid var(--grey-line); border-radius: var(--radius); overflow: hidden; }
.krav-rad { background: var(--white); padding: 18px 20px; display: grid;
            grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.krav-rad > div { min-width: 0; }
.krav-rad h4 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 4px;
}
.krav-rad p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.merke {
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.merke.ma    { background: #FFF1CC; color: #7A5200; }
.merke.kan   { background: var(--green-wash); color: #3F660A; }
.merke.gratis{ background: var(--blue-wash); color: #0063A0; }

.steg { display: grid; gap: 14px; margin: 26px 0 28px; }
.steg-boks {
  background: var(--white); border: 1px solid var(--grey-line);
  border-radius: var(--radius); padding: 22px 24px;
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
}
/* Rutenettbarn krymper ikke under innholdet uten dette. En lang kommando
   dro i sin tid hele sida ut til 646 px bredde på telefon. */
.steg-boks > div { min-width: 0; }
.steg-nr {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
  line-height: 1; color: var(--green-dark); letter-spacing: -0.04em;
}
.steg-boks h4 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 7px; line-height: 1.25;
}
.steg-boks p { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 10px; }
.steg-boks p:last-child { margin-bottom: 0; }
.steg-boks ul { margin-bottom: 0; }
.steg-boks ul li { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 7px; }

.prompt {
  background: var(--navy); border-radius: var(--radius);
  margin: 22px 0 28px; overflow: hidden; box-shadow: var(--shadow-lift);
}
.prompt-topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.prompt-navn {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #92D62E;
}
.kopier {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1); color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}
.kopier:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255,255,255,0.4); }
.kopier.klart { background: var(--green-dark); border-color: var(--green-dark); }
.prompt pre {
  margin: 0; padding: 20px 18px; overflow-x: auto;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.83rem; line-height: 1.62; color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap; word-break: break-word;
}
/* Feltene man skal fylle ut selv, så de er umulige å overse */
.prompt pre mark {
  background: rgba(245, 166, 35, 0.22); color: #F7C46C;
  border-radius: 3px; padding: 0 3px; font-style: normal;
}
.prompt-fot { padding: 0 18px 18px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }

.kommando {
  background: var(--navy); border-radius: 12px; padding: 16px 18px; margin: 14px 0 4px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.84rem; color: #C6F291; max-width: 100%;
  overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch;
}

.advarsel {
  background: #FFF8E6; border: 1px solid #F2DDA6; border-left: 4px solid #E0A93B;
  border-radius: var(--radius); padding: 20px 22px; margin: 28px 0;
}
.advarsel h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #7A5200; margin-bottom: 7px; }
.advarsel p { font-size: 0.95rem; color: #5E4A1E; margin: 0; }

/* Skal / skal ikke — to kort ved siden av hverandre */
.dom { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 26px 0; }
.dom-kort { background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 22px 24px; }
.dom-kort.ja  { border-top: 3px solid var(--green); }
.dom-kort.nei { border-top: 3px solid #1B2A47; }
.dom-kort h4 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 12px; }
.dom-kort.ja h4  { color: var(--green-dark); }
.dom-kort.nei h4 { color: #1B2A47; }
.dom-kort ul { margin: 0; }
.dom-kort ul li { font-size: 0.92rem; color: var(--ink-soft); }
.dom-kort.nei ul li::before { background: #1B2A47; }
.dom-kort.mid { border-top: 3px solid #E0A93B; }
.dom-kort.mid h4 { color: #7A5200; }
.dom-kort.mid ul li::before { background: #E0A93B; }
.dom-tre { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.kilder { font-size: 0.86rem; color: var(--grey-text); margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--grey-line); }
.kilder a { color: var(--grey-text); border-bottom-color: var(--grey-line); }
.kilder .dato { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }

/* Tabeller i artikkel */
.art table { width: 100%; border-collapse: collapse; margin: 24px 0 28px; font-size: 0.94rem; }
.art th {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text);
  text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--grey-line);
}
.art td { padding: 12px 14px; border-bottom: 1px solid var(--grey-line); vertical-align: top; color: var(--ink); }
.art td:first-child { font-weight: 700; }
.tabellramme { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ────────────────────────────────────────────
   SAMTALE — et eksempel på hvordan en samtale med AI ser ut
   Bruk den til å vise et spørsmål og et svar, eller før og etter.
   Den er bevisst nøytral: ingen produkts logo eller grensesnitt.
   ──────────────────────────────────────────── */
.samtale {
  background: var(--white); border: 1px solid var(--grey-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin: 26px 0 30px; overflow: hidden;
}
.samtale-topp {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--sand); border-bottom: 1px solid var(--grey-line);
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-text);
}
.samtale-topp::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.samtale-topp .merke { margin-left: auto; letter-spacing: 0.1em; }
.samtale-innhold { padding: 18px 18px 6px; display: grid; gap: 12px; }
.boble { max-width: 90%; padding: 12px 16px; border-radius: 16px; font-size: 0.96rem; line-height: 1.58; }
.boble.du { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.boble.ai { justify-self: start; background: var(--sand); color: var(--ink); border-bottom-left-radius: 4px; }
.boble .hvem {
  display: block; font-family: var(--font-display); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; margin-bottom: 4px;
}
.boble p { margin: 0 0 8px; font-size: inherit; color: inherit; }
.boble p:last-child { margin-bottom: 0; }
.boble ul, .boble ol { margin: 4px 0 8px; }
.boble ul li, .boble ol li { color: inherit; font-size: inherit; margin-bottom: 4px; }
.boble.du ul li::before { background: rgba(255,255,255,0.7); }
.samtale-fot { padding: 6px 18px 16px; font-size: 0.84rem; color: var(--grey-text); }
/* To samtaler ved siden av hverandre: svak og god, før og etter */
.samtale-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin: 26px 0 30px; }
.samtale-par .samtale { margin: 0; }
.samtale.svak { border-top: 3px solid #E0A93B; }
.samtale.god  { border-top: 3px solid var(--green); }

/* ────────────────────────────────────────────
   FOR DEG SOM BYGGER — sammenfoldet kode på sider som ellers er for alle
   <details class="bygger"><summary>For deg som bygger</summary> … </details>
   Lukket som standard, så Kari ikke møter kode før hun har bedt om den.
   ──────────────────────────────────────────── */
.bygger { margin: 30px 0; border: 1px solid var(--grey-line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.bygger > summary {
  cursor: pointer; list-style: none; padding: 16px 22px; display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; letter-spacing: -0.01em; color: var(--ink);
}
.bygger > summary::-webkit-details-marker { display: none; }
.bygger > summary::before {
  content: '</>'; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; font-weight: 700;
  background: var(--navy); color: #C6F291; border-radius: 8px; padding: 6px 9px; flex-shrink: 0;
}
.bygger > summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; font-weight: 700; color: var(--blue); transition: transform 0.2s; }
.bygger[open] > summary::after { transform: rotate(45deg); }
.bygger > summary:hover { background: var(--blue-wash); }
.bygger > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.bygger .bygger-inn { padding: 6px 22px 22px; border-top: 1px solid var(--grey-line); }
.bygger .bygger-inn > p { font-size: 0.97rem; color: var(--ink-soft); margin: 14px 0 6px; }
.bygger .prompt { margin: 14px 0 6px; box-shadow: none; }
.prompt.kode pre { white-space: pre; word-break: normal; font-size: 0.8rem; tab-size: 2; }
.bygger .bygger-fot { font-size: 0.84rem; color: var(--grey-text); margin-top: 8px; }

/* Foredragslenke nederst på hver side, fylt av tech.js */
.videre-foredrag {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 24px; background: var(--green-wash); border: 1px solid #D4E8B8; border-radius: var(--radius);
}
.videre-foredrag strong { font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; color: var(--ink); display: block; letter-spacing: -0.01em; }
.videre-foredrag span { font-size: 0.9rem; color: var(--ink-soft); }

/* ────────────────────────────────────────────
   VIDERE — nederst på hver side, fylt av tech.js
   ──────────────────────────────────────────── */
.videre-seksjon { max-width: var(--read); margin: 64px auto 0; }
.videre-merke {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: #3F660A; margin-bottom: 12px;
}
.videre-neste {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--navy); color: var(--white); border-radius: 18px;
  padding: 26px 30px; text-decoration: none; position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.videre-neste::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(520px 260px at 90% 10%, rgba(0,148,210,0.3), transparent 65%);
}
.videre-neste > * { position: relative; z-index: 1; }
.videre-neste:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.videre-neste .vn-label {
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 8px;
}
.videre-neste .vn-tittel {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; display: block;
}
.videre-neste .vn-meta { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 6px; display: block; }
.videre-neste .vn-pil { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--green); }

.videre-andre { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.videre-andre a {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 18px 22px; text-decoration: none; display: block;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.videre-andre a:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.videre-andre .va-rolle {
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #3F660A; display: block; margin-bottom: 5px;
}
.videre-andre .va-tittel {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.015em; color: var(--ink); display: block; line-height: 1.3;
}
.videre-andre .va-sub { font-size: 0.86rem; color: var(--ink-soft); display: block; margin-top: 4px; }
.videre-fot { margin-top: 16px; font-size: 0.86rem; display: flex; gap: 18px; flex-wrap: wrap; }
.videre-fot a { color: #3F660A; text-decoration: none; font-weight: 500; border: 0; }
.videre-fot a:hover { text-decoration: underline; }

/* Spormerket i hero og på kort */
.spor-merke {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--blue-wash); color: #0063A0;
}
.spor-merke.gronn { background: var(--green-wash); color: #3F660A; }

/* Leseframdrift. Smal linje øverst, bare der JS er på. */
.lesefremdrift {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--green); transform-origin: left; transform: scaleX(0);
  z-index: 300; pointer-events: none;
}

/* ────────────────────────────────────────────
   HUB-SIDER — spor og begreper
   ──────────────────────────────────────────── */
.spor-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.spor-kort {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 0; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s;
}
.spor-kort:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.spor-kort .sk-bilde { background: var(--navy); aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.spor-kort .sk-bilde svg { display: block; width: 100%; height: 100%; }
.spor-kort .sk-tekst { padding: 22px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.spor-kort .sk-nr {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #3F660A;
}
.spor-kort h2, .spor-kort h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--blue); line-height: 1.15;
}
.spor-kort p { color: var(--ink-soft); font-size: 0.94rem; flex: 1; }
.spor-kort .sk-fot {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
  padding-top: 12px; border-top: 1px solid var(--grey-line);
  display: flex; justify-content: space-between; gap: 10px;
}

.begrep-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.begrep-kort {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration: none; color: inherit; overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;
}
.begrep-kort:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.begrep-kort .bk-bilde { background: var(--navy); aspect-ratio: 16 / 10; overflow: hidden; }
.begrep-kort .bk-bilde svg { display: block; width: 100%; height: 100%; }
.begrep-kort .bk-tekst { padding: 16px 20px 18px; }
.begrep-kort h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 4px; }
.begrep-kort p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

/* Sporlister: numrerte kort, fylt av tech.js fra spor.json */
.sti-gruppe + .sti-gruppe { margin-top: 56px; }
.sti-gruppe h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1.15; margin-bottom: 8px; }
.sti-gruppe h2 em { color: var(--green-dark); font-style: normal; }
.sti-gruppe > p { color: var(--ink-soft); max-width: 62ch; margin-bottom: 22px; }
.sti-liste { display: grid; gap: 14px; }
.sti-kort {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center;
  background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 22px 26px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sti-kort:hover { transform: translateX(5px); border-color: var(--blue); box-shadow: var(--shadow-lift); }
.sti-nr { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--green-dark); letter-spacing: -0.04em; line-height: 1; }
.sti-kort h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.sti-kort p { font-size: 0.93rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }
.sti-meta { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-text); text-align: right; white-space: nowrap; }
.sti-meta b { display: block; color: var(--blue); font-size: 1rem; margin-top: 4px; }
.sti-utvalgt {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: var(--navy); color: var(--white); border-radius: 20px; padding: 40px 42px;
  text-decoration: none; position: relative; overflow: hidden; margin-bottom: 28px;
}
.sti-utvalgt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% 15%, rgba(0,148,210,0.28), transparent 65%); }
.sti-utvalgt > * { position: relative; z-index: 1; }
.sti-utvalgt .su-merke { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 12px; }
.sti-utvalgt h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; margin-bottom: 10px; }
.sti-utvalgt p { color: rgba(255,255,255,0.74); max-width: 56ch; }
@media (max-width: 640px) {
  .sti-kort { grid-template-columns: 38px 1fr; gap: 14px; padding: 18px 18px; }
  .sti-meta { grid-column: 2; text-align: left; }
  .sti-meta b { display: inline; margin-left: 8px; }
  .sti-utvalgt { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ────────────────────────────────────────────
   SERIER — kort øverst på Løsninger, og valget «Jeg er ny / leder / bygger»
   Løsninger vokste fra tjue til over tretti sider. En lang liste i fire
   grupper var ikke lenger en inngang, bare et lager. Seriekortene gir en
   oversikt på ett blikk, og valget lar leseren se bort fra det som ikke
   angår henne i stedet for å bla forbi det. Kortene bruker samme språk som
   .spor-kort (hvit flate, tynn ramme, grønn merkelapp, blå overskrift) og
   har egne navn så de ikke arver bilde-oppsettet derfra. Ingenting er skjult
   uten JS: kortene står i HTML-en, og valget lages av tech.js.
   ──────────────────────────────────────────── */
.serie-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 48px; }
.serie-kort {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s, opacity 0.22s;
}
.serie-kort:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--blue); }
.serie-kort .sr-nr {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #3F660A;
}
.serie-kort h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1.15; }
.serie-kort h3 em { color: var(--green-dark); font-style: normal; }
.serie-kort p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; flex: 1; }
.serie-kort .sr-fot {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 12px; border-top: 1px solid var(--grey-line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--grey-text);
}
.serie-kort .sr-start { color: var(--blue); text-decoration: none; }
/* Hele kortet er klikkbart til første side. «Alle sidene» ligger over og tar sitt eget klikk. */
.serie-kort .sr-start::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.serie-kort .sr-alle { position: relative; z-index: 2; color: var(--grey-text); text-decoration: underline; text-underline-offset: 3px; }
.serie-kort .sr-alle:hover { color: var(--blue); }
.serie-kort.treff { border-color: var(--green); box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.serie-kort.treff::before {
  content: 'Passer deg'; position: absolute; top: 18px; right: 20px;
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--green); color: var(--navy); padding: 4px 10px; border-radius: 999px;
}
.serie-kort.dimmet { opacity: 0.48; box-shadow: none; }
.serie-kort.dimmet:hover { opacity: 0.9; }

.leservalg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.leservalg .lv-merke {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-text); margin-right: 6px;
}
.lv-knapp {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--grey-line);
  background: var(--white); color: var(--ink-soft); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lv-knapp:hover { border-color: var(--blue); color: var(--blue); }
.lv-knapp[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.lv-knapp:focus-visible, .lv-nullstill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.leservalg .lv-hint { flex-basis: 100%; margin: 4px 0 0; font-size: 0.93rem; color: var(--ink-soft); max-width: 70ch; }
.leservalg .lv-hint:empty { display: none; }
.lv-nullstill { font: inherit; background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: 6px; }
.sti-gruppe[hidden] { display: none; }
@media (max-width: 640px) {
  .serie-kort { padding: 20px 20px 18px; }
  .lv-knapp { padding: 11px 16px; }
}

/* Begrepsnavigasjon øverst og nederst på hver begrepsside */
.begrep-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.begrep-nav a {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--grey-line);
  background: var(--white); color: var(--ink-soft);
}
.begrep-nav a:hover { border-color: var(--blue); color: var(--blue); }
.begrep-nav a.na { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Et lite regneark/verktøy innfelt i en side */
.verktoy {
  background: var(--white); border: 1px solid var(--grey-line); border-top: 4px solid var(--blue);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin: 28px 0;
}
.verktoy h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.verktoy label { display: block; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); margin: 14px 0 6px; }
.verktoy textarea, .verktoy input[type="text"], .verktoy input[type="number"], .verktoy select {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px;
  border: 1px solid var(--grey-line); border-radius: 10px; background: var(--cream); color: var(--ink);
}
.verktoy textarea:focus, .verktoy input:focus, .verktoy select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.verktoy .resultat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.verktoy .res { background: var(--sand); border-radius: 12px; padding: 14px 16px; }
.verktoy .res .v { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--blue); line-height: 1.1; }
.verktoy .res .l { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.verktoy .fot { font-size: 0.82rem; color: var(--grey-text); margin-top: 14px; }

/* ────────────────────────────────────────────
   FIGUR — navy scene med trinnvis bevegelse
   Se js/figur.js for hvordan data-attributtene virker.
   ──────────────────────────────────────────── */
.fig {
  background: var(--f-bg); color: var(--f-text);
  border-radius: 22px; box-shadow: var(--shadow-lift);
  margin: 34px auto; max-width: var(--bred);
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.fig::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 320px at 85% 0%, rgba(0, 148, 210, 0.22), transparent 62%),
    radial-gradient(520px 300px at 8% 100%, rgba(118, 188, 23, 0.12), transparent 60%);
}
.fig > * { position: relative; z-index: 1; }
.fig-hero { margin-top: -78px; position: relative; z-index: 6; }
.fig-merke {
  position: absolute !important; top: 14px; left: 20px; z-index: 3;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green);
}
.fig-scene { padding: 0; }
.fig-scene svg { display: block; width: 100%; height: auto; }

.fig-bunn {
  display: flex; align-items: center; gap: 22px;
  padding: 16px 24px 18px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}
.fig-tekst-boks { flex: 1; min-width: 0; position: relative; }
.fig-steg { list-style: none; margin: 0; padding: 0; }
.fig-steg li {
  font-size: 1.02rem; line-height: 1.5; color: var(--f-text);
  margin: 0; padding: 0;
}
.fig-steg li b { color: var(--green); font-weight: 700; }
.fig-steg li i { color: var(--f-gul); font-style: normal; font-weight: 700; }
.fig-steg li code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88em; background: rgba(255,255,255,0.1); border-radius: 5px; padding: 1px 6px; color: #C6F291;
}
/* Med JS vises ett trinn om gangen. De andre ligger igjen for skjermlesere. */
.fig-js .fig-steg { min-height: 3.1em; }
.fig-js .fig-steg li:not(.aktiv) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fig-js .fig-steg li.aktiv { animation: figInn 0.4s ease both; }
@keyframes figInn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fig-kontroll { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fig-knapp {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.fig-knapp:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255,255,255,0.4); }
.fig-knapp:active { transform: scale(0.94); }
.fig-knapp:focus-visible, .fig-prikk:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.fig-knapp svg { width: 16px; height: 16px; fill: currentColor; }
.fig-knapp.spill { background: var(--green-dark); border-color: var(--green-dark); }
.fig-knapp.spill:hover { background: #3F660A; }
.fig-prikker { display: flex; gap: 2px; margin: 0 8px; }
.fig-prikk {
  width: 24px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fig-prikk::after {
  content: ''; width: 100%; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.22); transition: background 0.25s, height 0.25s;
}
.fig-prikk.gjort::after { background: rgba(118, 188, 23, 0.55); }
.fig-prikk.aktiv::after { background: var(--green); height: 6px; }

/* ── Motoren: elementer som kommer inn på et bestemt trinn ── */
.fig [data-fra] {
  opacity: 0;
  transition: opacity 0.55s ease var(--d, 0s), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s),
              stroke-dashoffset 0.9s ease var(--d, 0s);
  transform-box: fill-box; transform-origin: center;
}
.fig [data-fra].paa { opacity: 1; transform: none; }
.fig [data-fra]:not(.paa) { transition-delay: 0s; }   /* forsvinner uten forsinkelse */
.fig [data-effekt="pop"]    { transform: scale(0.6); }
.fig [data-effekt="opp"]    { transform: translateY(26px); }
.fig [data-effekt="ned"]    { transform: translateY(-26px); }
.fig [data-effekt="hoyre"]  { transform: translateX(-34px); }
.fig [data-effekt="venstre"]{ transform: translateX(34px); }
.fig [data-effekt="vokse"]  { transform: scaleX(0); transform-origin: left center; }
.fig [data-effekt="vokseopp"] { transform: scaleY(0); transform-origin: center bottom; }
.fig [data-effekt="tegn"]   { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; transform: none; }
.fig [data-effekt="tegn"].paa { stroke-dashoffset: 0; }
.fig [data-effekt="tegn"]:not(.paa) { transition-duration: 0.2s; opacity: 0; }   /* uten dette blir en rund endestrek stående igjen som en prikk */
.fig [data-effekt="tegn"].paa { opacity: 1; transition: opacity 0.15s, stroke-dashoffset 0.9s ease var(--d, 0s); }

/* Uten JS står scenen i endetilstand: alt vises, bortsett fra det som
   bare var der på veien. */
.fig:not(.fig-js) [data-fra] { opacity: 1; transform: none; stroke-dashoffset: 0; }
.fig:not(.fig-js) [data-til] { display: none; }

/* Hvile → utheving. Brukes på ting som allerede står der. */
.fig .dim { transition: opacity 0.5s ease; }
.fig[data-steg] .dim.dempet { opacity: 0.28; }

/* Kontinuerlig bevegelse, bare mens figuren spiller */
.fig.spiller .flyt  { stroke-dasharray: 7 11; animation: figFlyt 1s linear infinite; }
.fig.spiller .puls  { animation: figPuls 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fig.spiller .svev  { animation: figSvev 3.2s ease-in-out infinite; }
.fig.spiller .blink { animation: figBlink 1s steps(2, jump-none) infinite; }
@keyframes figFlyt  { to { stroke-dashoffset: -18; } }
@keyframes figPuls  { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes figSvev  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes figBlink { 0% { opacity: 1; } 100% { opacity: 0; } }

/* SVG-tekst og -flater. Størrelsene i figurene er skrevet for at 24 enheter
   skal bli lesbare på en telefon: viewBox 720 krymper til ca. 0,47. */
.fig svg text { font-family: var(--font-body); fill: var(--f-text); }
.fig svg .t  { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.fig svg .m  { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.fig svg .dimt { fill: var(--f-dim); }
.fig svg .gronnt { fill: var(--green); }
.fig svg .gult { fill: var(--f-gul); }
.fig svg .blaat { fill: var(--blue-mid); }
.fig svg .morkt { fill: var(--navy); }
.fig svg .panel  { fill: var(--f-panel);  stroke: var(--f-line); stroke-width: 1.5; }
.fig svg .panel2 { fill: var(--f-panel2); stroke: var(--f-line); stroke-width: 1.5; }
.fig svg .lys    { fill: #F4F7FA; }
.fig svg .gronn  { fill: var(--green); }
.fig svg .bla    { fill: var(--blue-mid); }
.fig svg .gul    { fill: var(--f-gul); }
.fig svg .strek  { fill: none; stroke: var(--f-line); stroke-width: 2; }
.fig svg .strek-g { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig svg .strek-b { fill: none; stroke: var(--blue-mid); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig svg .strek-h { fill: none; stroke: #F4F7FA; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig svg .strek-y { fill: none; stroke: var(--f-gul); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Stor figurtittel i selve scenen (valgfritt) */
.fig svg .scene-tittel { font-family: var(--font-display); font-weight: 800; font-size: 26px; fill: var(--f-dim); letter-spacing: 0.02em; }

/* ── Rolig modus: ingen bevegelse, endetilstand først ── */
.fig-rolig [data-fra], .fig-rolig .fig-steg li { transition: none !important; animation: none !important; }
.fig-rolig .fig-steg li { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; margin-bottom: 6px; padding-left: 0; }
.fig-rolig .fig-steg { min-height: 0; list-style: decimal inside; }

@media (prefers-reduced-motion: reduce) {
  .fig [data-fra] { transition: none !important; }
  .fig .flyt, .fig .puls, .fig .svev, .fig .blink { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Smal skjerm: kontrollene under teksten ── */
@media (max-width: 640px) {
  .fig { border-radius: 16px; margin-left: -8px; margin-right: -8px; }
  .fig-bunn { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; }
  .fig-kontroll { justify-content: space-between; }
  .fig-prikker { margin: 0; flex: 1; justify-content: center; }
  .fig-steg li { font-size: 0.98rem; }
  .fig-hero { margin-top: -50px; }
  /* Merkelappen ligger over scenen i stedet for oppå den: scenen krymper til under halv
     størrelse, og øverste element havner ellers under teksten. */
  .fig-merke { position: relative !important; top: auto; left: auto; display: block; padding: 14px 18px 4px; }
  .krav-rad { grid-template-columns: 1fr; }
  .steg-boks { grid-template-columns: 30px 1fr; gap: 12px; padding: 20px 18px; }
  .prompt pre { font-size: 0.78rem; }
  .videre-neste { padding: 22px 22px; }
  .videre-neste .vn-tittel { font-size: 1.2rem; }
  .kortsagt { padding: 18px 20px; }
}

/* «Ny her?» — liten boks øverst på sider som en nybegynner kan havne på.
   Hvorfor egen komponent: Kari-leseren falt av på alle sidene i Beslutninger og Øv fordi ingen sa
   hvor man limer inn en prompt eller om det koster noe. Samme tekst på alle sidene gjør at den
   kan kuttes ned til én linje der leseren allerede har vært innom. */
.nyher { background: var(--green-wash); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 16px 20px; margin: 22px 0; }
.nyher h4 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 6px; }
.nyher p { font-size: 0.95rem; margin: 0 0 6px; color: var(--ink-soft); }
.nyher p:last-child { margin-bottom: 0; }

/* Skillhylla: hele SKILL.md bak «Vis og kopier».
   Hvorfor: nedlastede .md-filer åpner seg ikke med et dobbeltklikk på Windows, og den enkleste
   veien for en nybegynner er å lime teksten inn i en chat. Lukket som standard, så hylla
   fortsatt er en liste og ikke sju lange tekster etter hverandre. */
.skilltekst { margin-top: 10px; }
.skilltekst > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--blue);
  padding: 6px 0;
}
.skilltekst > summary::-webkit-details-marker { display: none; }
.skilltekst > summary::before { content: '+'; font-size: 1.1rem; line-height: 1; transition: transform 0.2s; }
.skilltekst[open] > summary::before { transform: rotate(45deg); }
.skilltekst > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.skilltekst > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.skilltekst .prompt { margin: 10px 0 4px; box-shadow: none; }
.skilltekst .prompt pre { max-height: 420px; overflow: auto; }