/* Källan varv 7 – två fristående komponenter för startsidan (prefix kp-).
 *   1. Tvåveckorsprocessen  (#process)
 *   2. Planuppslaget        (i #handlingsplan)
 * Bygger på ../../system/kallan.css och ../web.css (laddas före). Inga nya färger, typsnitt eller typgrader:
 * serif i --w-mellan (huvudbudskap, sidrubrik) och 19 px kursiv (Fig.-titel, som .fig-titel), Figtree 13–18 px.
 * Minsta text i figurerna är 13 px.
 * Rörelsen följer scrollen (scripts/kallan/rorelse.ts); utan JS och med reducerad rörelse står allt färdigt. */

.kp-process, .kp-uppslag-rad {
  --kp-linje: var(--k-linje-stark);           /* milstolparnas lodräta linjer */
  --kp-axel: var(--k-fg);                     /* tidsaxeln i veckorna */
}
.k-natt .kp-process, .kp-process.k-natt { --kp-linje: rgba(255,255,255,.34); }

/* ===================================================================================== */
/* 1. TVÅVECKORSPROCESSEN                                                                 */
/* ===================================================================================== */
.kp-inledning { color: var(--k-fg2); }
.kp-tidslinje { margin-top: clamp(40px, 5vw, 80px); }
.kp-spar { display: none; }

/* ---------- Grund (mobil först): lodrät tidslinje, en milstolpe i taget ---------- */
.kp-steg {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px;
  padding-bottom: 44px;
}
.kp-steg > * { grid-column: 2; min-width: 0; }
.kp-period { grid-row: 1; }
.kp-titel  { grid-row: 2; }
.kp-ni     { grid-row: 3; }
.kp-hs     { grid-row: 4; }
.kp-se     { grid-row: 5; }
.kp-axel   { grid-column: 1; grid-row: 1 / span 5; position: relative; }

/* Axeln: lodrät linje genom milstolparnas noder. Före start streckad (förarbete), veckorna i bläck, slutet utan fortsättning. */
.kp-axel-linje {
  position: absolute; left: 10px; top: 6px; width: 1px; height: calc(100% + 44px);
  background: var(--kp-axel); transform-origin: 50% 0;
  --kp-linje-dold: scaleY(0);
}
.kp-steg--fore .kp-axel-linje { background: linear-gradient(var(--kp-linje) 0 4px, transparent 4px 8px) 0 0 / 1px 8px repeat-y; }
.kp-steg--slut .kp-axel-linje { display: none; }
.kp-nod {
  position: absolute; left: 6px; top: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--k-bg, var(--k-papper)); box-shadow: inset 0 0 0 1px var(--kp-axel);
}
.kp-nod--ws { background: var(--kp-axel); }                         /* workshop: ni och Heartspace möts */
.kp-nod--mal { left: 5px; top: 1px; width: 11px; height: 11px; background: var(--k-guld); box-shadow: none; }   /* sidans enda guld här: målet */

/* Period och veckomarkering */
.kp-period { position: relative; padding-top: 0; margin-bottom: 10px; }
.kp-period .k-etikett { display: block; line-height: 1.2; }
.kp-period--vecka .k-etikett { color: var(--k-fg); }
.kp-dagar {
  display: block; height: 6px; margin-top: 8px; border-top: 1px solid var(--kp-axel);
  background-image: repeating-linear-gradient(to right, var(--kp-linje) 0 1px, transparent 1px 20%);
  background-size: calc(100% - 1px) 6px; background-repeat: no-repeat;
}

/* Huvudbudskapet: mellangraden, satt bakom sin egen mask */
.kp-titel {
  font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400;
  font-size: var(--w-mellan); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
  overflow: hidden; padding-bottom: .12em; margin-bottom: calc(18px - .12em);
}
.kp-titel-in { display: block; }

/* Spåren: Ni och Heartspace. På mobil står etiketten ovanför texten. */
.kp-spar-mobil { display: block; margin-bottom: 6px; }
.kp-ni .kp-spar-mobil { color: var(--k-fg); }
.kp-ni, .kp-hs { padding-top: 12px; border-top: 1px solid var(--k-rule); }
.kp-hs { margin-top: 18px; }
.kp-text { font-size: var(--w-lopande); line-height: 1.5; color: var(--k-fg2); text-wrap: pretty; max-width: 40ch; }
.kp-ni .kp-text { color: var(--k-fg); }
.kp-ws { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--k-fg); margin-bottom: 4px; font-variant-numeric: lining-nums tabular-nums; }
.kp-beslut { margin-top: 10px; }
.kp-beslut .k-etikett { color: var(--k-fg); }
.kp-beslut .k-etikett::before { content: ""; display: inline-block; width: 14px; height: var(--k-mark-h); background: var(--k-fg); vertical-align: middle; margin: -2px 8px 0 0; }

/* Ni får se: formatillustrationer, tryck på papper */
.kp-se { margin-top: 24px; display: grid; row-gap: 24px; }
.kp-se:empty { display: none; }
.kp-se > .kp-spar-mobil { margin-bottom: -16px; }
.kp-fig { margin: 0; max-width: 460px; }
.kp-fig-text { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--k-fg); margin-bottom: 12px; }
.kp-fig-nr { font-variant-numeric: lining-nums tabular-nums; }
.kp-fig-titel { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-style: italic; font-size: 19px; line-height: 1.3; color: var(--k-fg); }

.kp-ark {
  --k-fg: var(--k-ink); --k-fg2: #2c463c; --k-rule: var(--k-linje);
  background: var(--k-papper-upphojd); color: var(--k-ink); border: 1px solid var(--k-linje-stark);
  padding: 14px 16px 16px; font-size: 14px; line-height: 1.4;
}
.kp-ark-lista > div { padding: 8px 0 9px; border-top: 1px solid var(--k-linje); }
.kp-ark-lista > div:first-child { border-top: 0; padding-top: 0; }
.kp-ark-lista dt { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--k-teal); margin-bottom: 6px; }
.kp-ark-lista dd { margin: 0; }
.kp-streck { display: block; height: 5px; background: var(--k-dimma); box-shadow: inset 0 0 0 1px var(--k-linje); }
.kp-streck + .kp-streck { margin-top: 6px; }
.kp-streck--kort { width: 62%; }
.kp-ark-par { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--k-fg2); }
.kp-ark-par > span { padding: 0 10px; border-left: 1px solid var(--k-linje-stark); line-height: 1.2; }
.kp-ark-par > span:first-child { padding-left: 0; border-left: 0; }
.kp-ark-slut dd { display: grid; row-gap: 6px; }
.kp-ark-nr { display: grid; grid-template-columns: 16px 1fr; align-items: center; font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 15px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.kp-ark-nr::after { content: ""; height: 5px; background: var(--k-dimma); box-shadow: inset 0 0 0 1px var(--k-linje); width: 80%; }

/* Gantt (90-dagarsplanen): ett spår per område, tre perioder, 4 px staplar som datastaplarna */
.kp-gantt { display: grid; row-gap: 0; font-size: 13px; }
.kp-gantt-rad { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: center; min-height: 30px; border-top: 1px solid var(--k-linje); }
.kp-gantt-huvud { border-top: 0; min-height: 0; padding-bottom: 6px; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.kp-gantt-huvud > span + span { padding-left: 6px; }
.kp-gantt-rad > [role="rowheader"] { color: var(--k-ink); padding-right: 8px; }
.kp-gantt-spar {
  grid-column: 2 / -1; position: relative; align-self: stretch;
  background: linear-gradient(to right, var(--k-linje) 1px, transparent 1px) 0 0 / 33.333% 100% repeat-x;
}
.kp-gantt-spar::before {
  content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px;
  left: calc(var(--fran) / 3 * 100% + 6px); width: calc((var(--till) - var(--fran)) / 3 * 100% - 12px);
  background: var(--k-ink); transform-origin: 0 50%;
}
.kp-ark-fot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--k-linje); font-size: 13px; color: var(--k-fg2); }

/* AI-arbetsflödet: numrerad hårlinjelista, vem som gör vad i högerkanten. Inga pilar, inga rutor. */
.kp-flode li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--k-linje); font-size: 14px; }
.kp-flode li:first-child { border-top: 0; padding-top: 0; }
.kp-flode-nr { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 15px; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.kp-flode-vem { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-teal); }
.kp-flode li:last-child { border-top-color: var(--k-ink); }
.kp-flode li:last-child .kp-flode-vem { color: var(--k-ink); }

/* Faktaraden: hänvisa, sist */
.kp-fakta-rad { margin-top: clamp(8px, 1.5vw, 24px); }
.kp-fakta { padding-top: 14px; border-top: 1px solid var(--k-fg); color: var(--k-fg); font-size: var(--w-lopande); line-height: 1.5; max-width: none; }
.kp-fakta-etikett { font-weight: 600; }

/* ---------- 641–1239 px: lodrät, men figurerna står bredvid texten ---------- */
@media (min-width: 641px) {
  .kp-steg { grid-template-columns: 22px minmax(0, 6fr) minmax(0, 5fr); column-gap: 14px var(--w-gap); }
  .kp-se { grid-column: 3; grid-row: 2 / span 3; margin-top: 0; align-content: start; }
  .kp-se > .kp-spar-mobil { display: none; }
  .kp-period { grid-column: 2 / -1; }
}
@media (min-width: 1101px) {
  .kp-tidslinje { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--w-gap); }
  .kp-steg-lista { grid-column: 3 / -1; }
}

/* ---------- ≥ 1240 px: vågrät tidslinje med två spår ----------
 * Rader (subgrid, så att spåren linjerar över alla milstolpar):
 *   1 period · 2 huvudbudskap · 3 Ni · 4 axel · 5 Heartspace · 6 Ni får se
 * Varje milstolpe är en lodrät hårlinje genom Ni – axel – Heartspace, på samma x (periodens början). */
@media (min-width: 1240px) {
  .kp-tidslinje { grid-template-rows: auto auto auto 24px auto auto; }
  .kp-spar { display: grid; grid-column: 1 / span 2; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .kp-spar-etikett { align-self: start; padding-top: 2px; }
  .kp-spar-etikett--ni { grid-row: 3; color: var(--k-fg); }
  .kp-spar-etikett--hs { grid-row: 5; padding-top: 22px; }
  .kp-spar-etikett--fig { grid-row: 6; padding-top: 40px; }

  .kp-steg-lista {
    grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--w-gap);
  }
  .kp-steg { grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; column-gap: 0; }
  .kp-steg > * { grid-column: 1; }
  .kp-period { grid-row: 1; grid-column: 1; margin-bottom: 0; padding-bottom: 14px; }
  .kp-titel { grid-row: 2; margin-bottom: 0; padding-bottom: 28px; padding-right: 8px; }
  .kp-ni { grid-row: 3; }
  .kp-axel { grid-row: 4; grid-column: 1; }
  .kp-hs { grid-row: 5; }
  .kp-se { grid-row: 6; grid-column: 1; margin-top: 0; padding-top: 40px; }

  /* Spårens etiketter står i marginalen; i milstolpen läses de bara av skärmläsare. */
  .kp-spar-mobil { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .kp-se > .kp-spar-mobil { display: block; }

  /* Ni ovanför axeln, Heartspace under: texten hänger på milstolpens lodräta linje. */
  .kp-ni, .kp-hs { position: relative; border-top: 0; margin-top: 0; padding-left: 16px; padding-right: 8px; }
  .kp-ni { padding-top: 0; padding-bottom: 22px; }
  .kp-hs { padding-top: 22px; }
  .kp-ni::before, .kp-hs::before { content: ""; position: absolute; left: 0; width: 1px; background: var(--kp-linje); }
  .kp-ni::before { top: 4px; bottom: 0; transform-origin: 50% 100%; }
  .kp-hs::before { top: 0; bottom: 4px; transform-origin: 50% 0; }
  .kp-ni--workshop::before { background: var(--kp-axel); }   /* workshop: linjen i bläck, ni är med */

  .kp-axel-linje {
    left: 0; top: 50%; height: 1px; width: calc(100% + var(--w-gap)); transform-origin: 0 50%;
    --kp-linje-dold: scaleX(0);
  }
  .kp-steg--fore .kp-axel-linje { background: linear-gradient(to right, var(--kp-linje) 0 4px, transparent 4px 8px) 0 0 / 8px 1px repeat-x; }
  .kp-steg--slut .kp-axel-linje { display: block; width: 100%; background: var(--kp-linje); }
  .kp-nod { left: -4px; top: calc(50% - 4px); }
  .kp-nod--mal { left: -5px; top: calc(50% - 5px); }

  .kp-dagar { margin-top: 10px; }
  .kp-period { padding-top: 0; }
  .kp-fig { max-width: none; }
  .kp-fakta-rad { margin-top: clamp(48px, 5vw, 72px); }
}

/* ---------- Rörelse (varv 8): axeln ritas och milstolparna fylls i takt med scrollen ----------
 * scripts/kallan/rorelse.ts skriver framsteget som stil på axellinjen, noderna och Gantt-staplarna (--kp-g). Text står alltid. */

/* ===================================================================================== */
/* 2. PLANUPPSLAGET                                                                       */
/* ===================================================================================== */
.kp-uppslag-rad { margin-top: clamp(48px, 5vw, 80px); align-items: start; }
.kp-uppslag-marg { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--k-fg); }
.kp-uppslag-not { margin-top: 8px; max-width: 15em; }
.kp-uppslag { grid-column: 3 / -1; margin: 0; min-width: 0; }

.kp-sidor {
  --k-fg: var(--k-ink); --k-fg2: #2c463c; --k-rule: var(--k-linje);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--k-papper-upphojd); color: var(--k-ink); border: 1px solid var(--k-linje-stark);
}
.kp-sida { padding: clamp(20px, 2.6vw, 40px) clamp(20px, 2.6vw, 40px) clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; min-width: 0; }
.kp-sida + .kp-sida { border-left: 1px solid var(--k-linje); }   /* falsen */
.kp-lophuvud { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; margin-bottom: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--k-linje); font-size: 13px; letter-spacing: .04em; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.kp-sida-rubrik { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: var(--w-mellan); line-height: 1.15; letter-spacing: -.01em; }
.kp-sida-block { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--k-linje); }
.kp-sida-rubrik + .kp-sida-block { border-top-color: var(--k-ink); }
.kp-sida-etikett { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-teal); margin-bottom: 8px; }
/* Exemplets text: rak antikva, inte platshållarens kursiv. */
.kp-varde { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 17px; line-height: 1.35; color: var(--k-ink); text-wrap: pretty; }
.kp-varde--liten { font-size: 16px; }
.kp-gantt--stor { font-size: 14px; }
.kp-gantt--stor .kp-gantt-rad { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); min-height: 36px; }
.kp-gantt--stor .kp-gantt-huvud { min-height: 0; font-size: 13px; }
.kp-avstamning li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--k-linje); font-size: 14px; }
.kp-avstamning li:first-child { border-top: 0; padding-top: 0; }
.kp-avst-tid { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.kp-avstamning li > span + span { color: var(--k-ink); text-wrap: pretty; }

/* Områdena (högra sidan): ett block per område, rubriken med nummer och period, fälten med etikett. */
.kp-omrade { padding: 12px 0 14px; border-top: 1px solid var(--k-linje); }
.kp-omrade:first-child { border-top: 0; padding-top: 2px; }
.kp-omrade-huvud { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; margin-bottom: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--k-ink); }
.kp-omrade-nr { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-weight: 400; color: var(--k-teal); font-variant-numeric: lining-nums tabular-nums; }
.kp-omrade-tid { font-size: 13px; font-weight: 400; color: var(--k-fg2); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.kp-omrade-falt { display: grid; row-gap: 5px; margin: 0 0 0 calc(2em + 8px); font-size: 14px; line-height: 1.4; }
.kp-omrade-falt > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); column-gap: 10px; }
.kp-omrade-falt dt { font-size: 13px; font-weight: 600; color: var(--k-fg2); }
.kp-omrade-falt dd { margin: 0; color: var(--k-ink); text-wrap: pretty; }
.kp-folio { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.kp-sida + .kp-sida .kp-folio { text-align: right; }

@media (max-width: 1100px) {
  .kp-uppslag { grid-column: 1 / -1; }
  .kp-uppslag-marg { flex-direction: column; }
  .kp-uppslag-not { max-width: none; }
}
@media (max-width: 900px) {
  .kp-sidor { grid-template-columns: minmax(0, 1fr); }
  .kp-sida + .kp-sida { border-left: 0; border-top: 1px solid var(--k-linje-stark); }
  .kp-sida + .kp-sida .kp-folio { text-align: left; }
}
/* Mobil: områdenas fält utan indrag. */
@media (max-width: 640px) {
  .kp-sida { padding: 20px 18px 16px; }
  .kp-omrade-falt { margin-left: 0; }
  .kp-omrade-falt > div { grid-template-columns: 6.4em minmax(0, 1fr); }
  .kp-gantt--stor .kp-gantt-rad { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
  .kp-gantt--stor .kp-gantt-huvud > span { font-size: 13px; }
}



/* Justeringar efter första skärmbildsgranskningen */
.kp-ihop { white-space: nowrap; }
.kp-gantt-rad { grid-template-columns: max-content repeat(3, minmax(0, 1fr)); column-gap: 0; }
.kp-gantt-rad > [role="rowheader"], .kp-gantt-huvud > span:first-child { white-space: nowrap; padding-right: 12px; }
.kp-gantt--stor .kp-gantt-rad { grid-template-columns: max-content repeat(3, minmax(0, 1fr)); }
.kp-gantt--stor .kp-gantt-rad > [role="rowheader"], .kp-gantt--stor .kp-gantt-huvud > span:first-child { padding-right: 20px; }
.kp-ark-par { font-size: 13px; }
.kp-ark-par > span { padding: 0 8px; }
@media (max-width: 640px) { .kp-gantt--stor .kp-gantt-rad { grid-template-columns: max-content repeat(3, minmax(0, 1fr)); } .kp-gantt--stor .kp-gantt-rad > [role="rowheader"], .kp-gantt--stor .kp-gantt-huvud > span:first-child { padding-right: 10px; } }
/* Huvud och rader är separata rutnät: etikettkolumnen måste ha fast bredd för att linjera. */
.kp-gantt-rad { grid-template-columns: 5.4em repeat(3, minmax(0, 1fr)); }
.kp-gantt-rad > [role="rowheader"], .kp-gantt-huvud > span:first-child { padding-right: 8px; }
.kp-gantt--stor .kp-gantt-rad { grid-template-columns: 11.5em repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .kp-gantt--stor .kp-gantt-rad { grid-template-columns: 6.6em repeat(3, minmax(0, 1fr)); }
  .kp-gantt--stor .kp-gantt-rad > [role="rowheader"] { white-space: normal; line-height: 1.25; padding-block: 5px; }
  .kp-gantt--stor .kp-gantt-huvud > span + span { padding-left: 4px; }
}
.kp-ark-par { gap: 2px 14px; }
.kp-ark-par > span, .kp-ark-par > span:first-child { padding: 0; border-left: 0; }
/* Masken sitter på ett eget omslag: titelns utfyllnad (subgrid-raden) får inte visa texten innan den satts. */
.kp-titel { overflow: visible; }
.kp-titel-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
/* 641–1239 px: figuren bredvid texten får inte sprida ut textraderna – överskottet går till en tom sista rad. */
@media (min-width: 641px) and (max-width: 1239px) {
  .kp-steg { grid-template-rows: repeat(4, auto) 1fr; }
  .kp-se { grid-row: 2 / span 4; }
  .kp-axel { grid-row: 1 / -1; }
}

/* ---------- Efter Design Critic varv 7 ---------- */
/* B9: bildtexten i raden Ni får se (Slutleverans) */
.kp-se-text { font-size: var(--w-lopande); line-height: 1.5; color: var(--k-fg); max-width: 40ch; text-wrap: pretty; margin-bottom: -8px; }
/* B9: de gemensamma momenten (workshopparna och genomgången) märks Ni och Heartspace även på bred skärm, ovanför texten */
@media (min-width: 1240px) {
  .kp-ni--workshop > .kp-spar-mobil { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin: 0 0 6px; color: var(--k-fg); }
}
/* Exemplets text i arken (6a, 6b), och möjligheterna numrerade som områdena i planen (01–03). */
.kp-ark .kp-varde { font-size: 15px; line-height: 1.35; }
.kp-ark-nr--text { grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; font-family: inherit; font-size: 14px; line-height: 1.35; }
.kp-ark-nr--text::after { content: none; }
.kp-ark-nr--text .kp-omrade-nr { font-size: 15px; }
/* Tidsplanerna: områdets nummer och namn får bryta på två rader. */
.kp-gantt-rad > [role="rowheader"] { white-space: normal; line-height: 1.25; padding-block: 5px; }
/* 6c i den smala spalten: områdets namn över stapeln, så att stapeln får hela bredden. */
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-huvud > span { padding-left: 6px; }
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-huvud > span:nth-child(-n + 2) { grid-area: 1 / 1; padding-right: 0; }
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-huvud > span:nth-child(2) { padding-left: calc(6px + 2.6em); }
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-rad > [role="rowheader"] { grid-column: 1 / -1; padding: 7px 0 0; }
.kp-gantt:not(.kp-gantt--stor) .kp-gantt-spar { grid-column: 1 / -1; min-height: 18px; }
.kp-gantt--stor .kp-gantt-rad { grid-template-columns: 12.5em repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .kp-gantt--stor .kp-gantt-rad { grid-template-columns: 7.6em repeat(3, minmax(0, 1fr)); } }
/* B5: väg till förfrågan på faktaraden "Er tidsinsats" */
.kp-fakta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; }
.kp-fakta-text { flex: 1 1 32em; min-width: 0; }
.kp-fakta-cta { flex: none; font-weight: 400; }