/* ==========================================================================
   CVkompass — dokumentmallar
   58 mallar i fem formspråk (2/9: 49 grundformer + 9 varianter, se `variantAv`
   i model.js). En gemensam DOM (se render.js); mallen är CSS. Registret är
   T.TEMPLATES — listan nedan är den ursprungliga från 2026-07 och står kvar
   som historik. Gallrade mallar lever vidare som alias (T.TPL_ALIAS);
   deras CSS är borttagen. Sist i filen: grunden alla mallar delar (ikoner,
   presentation per sektion, marginaltext).
     Talea ..... Talea, Kolumn, Band, Sidopanel, Rubrikkort, Monogram
                 loggans mjuka geometri, färg som yta
     Trycksak .. Tryck, Ren, Antikva, Tradition, Akademisk
                 typografin bär, färgen understryker
     Nordiskt .. Kontor, Kompakt, Tidslinje, Register, Ram, Sober
                 linjer i stället för färgfält, säkrast genom ATS
     Kreativ ... Blockad, Kant, Toning
                 mer uttryck, för yngre sökande
   Bakgrunder sätts som background-image så att den vita sidan alltid ligger
   kvar under, och så att färgade spalter upprepas över utskrivna sidor.
   ========================================================================== */

.cv {
  --accent: #4A0B5E;
  --accent-soft: rgba(74,11,94,.10);
  --accent-line: rgba(74,11,94,.28);
  /* --tpl-font är mallens eget typsnitt; --doc-font sätts av render.js från
     kandidatens val och är var(--tpl-font) när valet är "Mallens" (standard).
     Mallarna sätter därför ALDRIG font-family direkt på .cv — bara --tpl-font —
     annars är typsnittsväljaren död (så var det i ~40 mallar till 2/9). */
  --tpl-font: "Montserrat", sans-serif;
  --doc-font: var(--tpl-font);
  --doc-scale: 1;
  --doc-density: 1;

  --fs: calc(13.2px * var(--doc-scale));
  --lh: calc(1.5 * var(--doc-density));
  --pad-x: 46px;
  --pad-y: 44px;
  --gap: calc(20px * var(--doc-density));
  --side-w: 33%;

  --doc-ink: #1D1A21;
  --doc-mut: #625C69;
  --doc-line: #DFDCE3;

  font-family: var(--doc-font);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--doc-ink);
}

/* .cv själv MÅSTE med: utanför appen (capture-riggen, delade dokument) finns
   ingen global border-box, och då lägger Ram/Bårds egen padding sig OVANPÅ
   A4-höjden — .cv-inner:s min-height:100% löser mot 1123 och arket blir
   1123 + 2×padding högt. Med border-box mäter alla vyer som appen. */
.cv, .cv *, .cv *::before, .cv *::after { box-sizing: border-box; }

/* Inget innehåll får spränga sin kolumn – långa URL:er och e-postadresser
   bryts hellre än att skjuta ut sidokolumnen i pappersmarginalen. */
.cv-cols > *, .cv-side, .cv-main, .s, .s__b, .e, .e__main,
.lv__row, .lv__row > *, .ct li, .ct li > span, .dt, .dt dd { min-width: 0; }
.dt dd, .e__meta, .e__title, .lv__name, .tg li { overflow-wrap: anywhere; }
/* Kontaktraderna: render.js sätter <wbr> vid skiljetecknen i e-post/webb/
   LinkedIn — break-word låter brytningen ske DÄR, och mitt i ordet bara som
   nödfall när ett segment ensamt är bredare än spalten. */
.ct li > span { overflow-wrap: break-word; }
/* Svenska sammansättningar ("Förändringsledning", "Processkartläggning") bryts
   med bindestreck i stället för mitt i — sidan har lang="sv". anywhere ovan
   är kvar som nödfall när inte ens en avstavad del ryms. Adresser, länkar
   och etikettvärden avstavas aldrig: ett bindestreck i en e-postadress ser
   ut som en del av adressen. */
.cv[data-lang="sv"] :is(.lv__name, .e__title, .e__meta, .cv-side) { -webkit-hyphens: auto; hyphens: auto; }
.cv .cv-side :is(.ct li > span, .dt dd, a, .cv-name, .cv-role) { -webkit-hyphens: manual; hyphens: manual; }

/* --------------------------------------------------------------------------
   Grundsättning
   -------------------------------------------------------------------------- */

/* Sidan är en flexkolumn så att avsändarraden och sidfoten kan ankras mot
   sidans nederkant med margin-top:auto — annars hänger de mitt på ett
   halvfyllt CV. Ger också Ram och färgspalter full höjd vid tunt innehåll. */
.cv { display: flex; flex-direction: column; }
.cv-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }

.cv-head { padding: var(--pad-y) var(--pad-x) 0; display: flex; gap: 22px; align-items: flex-start; }
.cv-head__text { flex: 1; min-width: 0; }

.cv-name {
  margin: 0;
  font-size: calc(var(--fs) * 2.15);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.015em;
}
.cv-role {
  margin: 3px 0 0;
  font-size: calc(var(--fs) * 1.05);
  font-weight: 500;
  color: var(--accent);
}

.cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  flex: none;
  background: #EBE7ED center/cover no-repeat;
  border-radius: 50%;
}
.cv[data-photo="square"] .cv-photo { border-radius: 4px; }
.cv[data-photo="rounded"] .cv-photo { border-radius: 14px; }

/* Friliggande: frilagd bild utan platta eller form — personen flyter direkt
   på headern. Som bäst ihop med "Ta bort bakgrunden". */
.cv[data-photo="cutout"] .cv-photo {
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  box-shadow: none !important;
}

/* Fotoram — väljs i fotopanelen. 'standard' låter mallen bestämma. */
.cv[data-fotoram="ingen"] .cv-photo { box-shadow: none !important; border: 0 !important; }
.cv[data-fotoram="tunn"] .cv-photo { box-shadow: 0 0 0 1.5px rgba(0,0,0,.28); }
.cv[data-fotoram="vit"] .cv-photo { box-shadow: 0 0 0 calc(var(--fs) * .5) #fff; }
.cv[data-fotoram="accent"] .cv-photo { box-shadow: 0 0 0 calc(var(--fs) * .3) var(--accent); }

/* kontaktrader */
.ct { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ct li { display: flex; align-items: flex-start; gap: 7px; font-size: calc(var(--fs) * .92); color: var(--doc-mut); }
.ci { width: calc(var(--fs) * 1.02); height: calc(var(--fs) * 1.02); flex: none; margin-top: 2px;
      fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
      color: var(--accent); }
.ct--inline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
/* Detaljraden (körkort, anpassade fält …) i enspaltiga mallar: samma rad,
   men något nedtonad så kontaktuppgifterna behåller tyngden. */
.ct--detaljer { margin-top: 4px; }
/* ATS-fyndet (Ruta 2/9): opacity < 1 skapar en stackningskontext som Chrome
   målar EFTER flödet — i PDF:ens textström hamnade "Körkort: B" sist, efter
   referenserna, i elva av tretton ATS-mallar. Dämpningen är därför en färg
   (85 % av den dämpade tonen mot vitt, som opacity .85 såg ut), aldrig
   opacity/transform/position på en kontaktrad. Kontrollskriptets pass 8
   läser textordningen i PDF:en för alla ATS-mallar. */
.ct--detaljer li { color: var(--doc-mut); color: color-mix(in srgb, var(--doc-mut) 85%, #fff); font-size: calc(var(--fs) * .92); }

/* etikett/värde */
.dt { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: calc(var(--fs) * .9); }
.dt dt { color: var(--doc-mut); }
.dt dd { margin: 0; }

/* kolumner */
/* Kolumnernas och sektionskropparnas rytm går genom två variabler, --kol-gap
   (mellan sektioner) och --sek-gap (mellan poster), så att UTSKRIFTEN — där
   kolumner och kroppar är block med marginaler, se printblocket sist i
   filen — får exakt samma mått som skärmens grid-gap, även när en mall
   skriver om rytmen. Mallar sätter därför ALDRIG gap direkt på .cv-main,
   .cv-side eller .s__b, bara variablerna (Tryck, Kontor, Akademisk …). */
.cv { --kol-gap: var(--gap); --sek-gap: calc(var(--gap) * .62); }
.cv-cols { display: grid; grid-template-columns: var(--side-w) 1fr; align-items: start; }
.cv-side { padding: var(--gap) 26px var(--pad-y) var(--pad-x); display: grid; gap: var(--kol-gap); }
.cv-main { padding: var(--gap) var(--pad-x) var(--pad-y); display: grid; gap: var(--kol-gap); }
.cv[data-layout="single"] .cv-main,
.cv[data-layout="band"] .cv-main,
.cv[data-layout="timeline"] .cv-main { padding-top: calc(var(--gap) * 1.2); }

.cv[data-layout="sideR"] .cv-cols { grid-template-columns: 1fr var(--side-w); }
.cv[data-layout="sideR"] .cv-side { order: 2; padding: var(--gap) var(--pad-x) var(--pad-y) 26px; }
.cv[data-layout="sideR"] .cv-main { order: 1; padding-right: 26px; }

/* sektion – får brytas över sidor, till skillnad från enskilda poster */
.s__h {
  margin: 0 0 8px;
  font-size: calc(var(--fs) * 1.02);
  font-weight: 700;
  color: var(--accent);
  overflow-wrap: anywhere;   /* egna rubriker får inte spränga etikettspalten */
}
.s__b { display: grid; gap: var(--sek-gap); }

/* post */
.e { break-inside: avoid; }
.e__row { display: flex; gap: 14px; align-items: baseline; }
.e__main { flex: 1; min-width: 0; }
.e__title { margin: 0; font-size: var(--fs); font-weight: 700; }
.e__meta { margin: 0; font-size: calc(var(--fs) * .93); color: var(--accent); }
.e__date { margin: 0; font-size: calc(var(--fs) * .88); color: var(--doc-mut); white-space: nowrap; }

/* fritext */
.rt { margin-top: 4px; }
.rt p { margin: 0 0 5px; }
.rt p:last-child { margin-bottom: 0; }
.rt ul { margin: 4px 0 0; padding-left: 17px; }
.rt li { margin-bottom: 2px; }
.rt li::marker { color: var(--accent); }

/* nivåer */
.lv { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
/* Ordkolumnen är FAST (7.5fs rymmer "Grundläggande" i alla mallars typsnitt,
   uppmätt max 7.02fs) — varje rad är sitt eget grid, så en auto-kolumn får
   olika bredd per nivåord och mätarna hamnar omlott (Talea-buggen v1.37.4,
   samma fel i 17 mallar till). */
.lv__row { display: grid; grid-template-columns: 1fr auto calc(var(--fs) * 7.5); gap: 10px; align-items: center; font-size: calc(var(--fs) * .95); }
/* Nivån står alltid i klartext — "Modersmål", "Expert". Symboler kan varken
   ansökningssystem eller rekryterarnas AI-verktyg läsa; mätaren är dekor
   ovanpå orden, aldrig ersättning för dem. */
.lv__row::after {
  content: attr(data-niva);
  color: var(--doc-mut);
  font-size: calc(var(--fs) * .88);
  justify-self: end; text-align: right;
}
.lv__meter { display: flex; gap: 3px; }
.lv__meter i { width: calc(var(--fs) * .58); height: calc(var(--fs) * .42); border-radius: 2px; background: var(--accent-soft); }
.lv__meter i.is-on { background: var(--accent); }

/* taggar */
.tg { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: calc(var(--fs) * .95); }

/* sidfot och avsändarrad */
.cv-foot {
  margin: auto var(--pad-x) 6px;
  padding-top: 10px;
  border-top: 1px solid var(--doc-line);
  font-size: calc(var(--fs) * .85);
  color: var(--doc-mut);
}
.cv-credit {
  margin: auto var(--pad-x) calc(var(--pad-y) * .55);
  padding-top: 8px;
  font-size: calc(var(--fs) * .72);
  letter-spacing: .04em;
  color: #A49CAB;
}
/* står sidfot och avsändarrad ihop är det sidfoten som ankrar */
.cv-foot + .cv-credit { margin-top: 8px; }
/* Länken ska se ut exakt som textraden gjorde — klickbar i PDF:en, osynlig som länk. */
.cv-credit a { color: inherit; text-decoration: none; }
/* Kontaktraderna (2/9): render.js gör e-post, telefon, LinkedIn och webb till
   <a class="cv-link" href="mailto:|tel:|https://">. Samma princip som
   avsändarraden — klickbar i PDF:en, osynlig som länk på papperet. Ingen mall
   sätter färg eller streck på a-element (kontrollerat 2/9), så regeln gäller
   överallt, även i utskrift. */
.cv a.cv-link { color: inherit; text-decoration: none; }

/* ==========================================================================
   1 — TALEA          formspråk: Talea          layout: band
   Loggans plakettform i huvudet, pillerrubriker, sand som andra röst.
   Andrarösten är --accent2 (palettens hex2, render.js) med den gamla
   hårdkodade sanden som reserv — Plommons hex2 ÄR #A5701F, så standard-
   utseendet är oförändrat.
   ========================================================================== */

.cv[data-tpl="talea"] .cv-head {
  background: var(--accent);
  color: #fff;
  padding: calc(var(--pad-y) * .95) var(--pad-x) calc(var(--pad-y) * .85);
  border-radius: 0 0 46px 0;
  align-items: center;
  gap: 26px;
}
.cv[data-tpl="talea"] .cv-name { color: #fff; letter-spacing: -.025em; }
.cv[data-tpl="talea"] .cv-role { color: rgba(255,255,255,.78); font-weight: 500; }
.cv[data-tpl="talea"] .cv-photo { border: 3px solid rgba(255,255,255,.3); background-color: rgba(255,255,255,.12); }
.cv[data-tpl="talea"] .ct--inline li { color: rgba(255,255,255,.86); }
.cv[data-tpl="talea"] .ct--inline .ci { color: rgba(255,255,255,.6); }
.cv[data-tpl="talea"] .s__h {
  display: inline-flex; align-items: center;
  padding: 5px 14px; margin-bottom: 12px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px;
  font-size: calc(var(--fs) * .78); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-tpl="talea"] .e__meta { color: var(--accent2, #A5701F); font-weight: 600; }
.cv[data-tpl="talea"] .rt li::marker { color: var(--accent2, #C98A3C); }
.cv[data-tpl="talea"] .lv__row { grid-template-columns: 1fr 96px auto; }
/* Fasta kolumner för mätarraden: spåret och nivåordet får samma bredd på
   varje rad — annars är varje rad sitt eget rutnät och staplarna hamnar
   omlott ("Expert" ger kort spår långt till höger, "Mycket god" långt
   vänster; Mahmouds fynd 26/8). 7.5fs rymmer "Grundläggande". */
.cv[data-tpl="talea"] .lv__row { grid-template-columns: 1fr calc(var(--fs) * 9) calc(var(--fs) * 7.5); }
.cv[data-tpl="talea"] .lv__row::after { justify-self: end; }
.cv[data-tpl="talea"] .lv__meter { display: block; height: 5px; border-radius: 99px; background: var(--accent-soft); position: relative; }
.cv[data-tpl="talea"] .lv__meter i { position: absolute; top: 0; bottom: 0; left: 0; height: auto; border-radius: 99px; background: none; }
.cv[data-tpl="talea"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="talea"] .lv__meter i:nth-child(1).is-on { width: 20%; }
.cv[data-tpl="talea"] .lv__meter i:nth-child(2).is-on { width: 40%; }
.cv[data-tpl="talea"] .lv__meter i:nth-child(3).is-on { width: 60%; }
.cv[data-tpl="talea"] .lv__meter i:nth-child(4).is-on { width: 80%; }
.cv[data-tpl="talea"] .lv__meter i:nth-child(5).is-on { width: 100%; }
.cv[data-tpl="talea"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="talea"] .tg li {
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 12px; border-radius: 999px;
  font-size: calc(var(--fs) * .88); font-weight: 500;
}

/* ==========================================================================
   2 — KOLUMN         formspråk: Talea          layout: sideL
   Den form de flesta förväntar sig: foto, kontakt och färdigheter till
   vänster, historiken till höger. Tonad spalt, inte mättad.
   ========================================================================== */

.cv[data-tpl="kolumn"] {
  background-image: linear-gradient(to right, var(--accent-soft) 0 34%, transparent 34% 100%);
  --side-w: 34%;
}
.cv[data-tpl="kolumn"] .cv-head {
  background: var(--accent); color: #fff;
  padding: calc(var(--pad-y) * .8) var(--pad-x);
  border-radius: 0 0 40px 0;
  align-items: center;
}
.cv[data-tpl="kolumn"] .cv-name { color: #fff; }
.cv[data-tpl="kolumn"] .cv-role { color: rgba(255,255,255,.78); }
.cv[data-tpl="kolumn"] .cv-photo { border: 3px solid rgba(255,255,255,.3); background-color: rgba(255,255,255,.12); }
.cv[data-tpl="kolumn"] .cv-cols { margin-top: 4px; }
.cv[data-tpl="kolumn"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
/* strecket i andrarösten (juryn 3/9): var hårdkodat #C98A3C och följde inte
   palettens hex2 — nu palettens par, sanden som reserv */
.cv[data-tpl="kolumn"] .cv-main .s__h::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 99px;
  background: var(--accent2, #C98A3C); margin-top: 6px;
}
.cv[data-tpl="kolumn"] .lv__meter i { border-radius: 99px; }
/* Sidospalten är för smal för namn + mätare + nivåord på EN rad — ord som
   "Budgetuppföljning" bröts mitt i utan bindestreck. Namnet får hela raden,
   mätaren och nivån lägger sig under (mätare vänster, nivå höger). */
.cv[data-tpl="kolumn"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="kolumn"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="kolumn"] .cv-side .lv__row::after { justify-self: end; }

/* ==========================================================================
   3 — BAND           formspråk: Talea          layout: band
   Helbrett färgat huvud, enspaltigt under. Formell och tydlig – den mall som
   fungerar när ansökan går till ett större bolag med formell process.
   ========================================================================== */

.cv[data-tpl="band"] .cv-head {
  background: var(--accent); color: #fff;
  padding: calc(var(--pad-y) * .85) var(--pad-x);
  align-items: center;
}
.cv[data-tpl="band"] .cv-name { color: #fff; text-transform: uppercase; letter-spacing: .01em; font-size: calc(var(--fs) * 1.9); }
.cv[data-tpl="band"] .cv-role { color: rgba(255,255,255,.8); }
.cv[data-tpl="band"] .cv-photo { border: 3px solid rgba(255,255,255,.85); }
.cv[data-tpl="band"] .ct--inline li { color: rgba(255,255,255,.9); }
.cv[data-tpl="band"] .ct--inline .ci { color: rgba(255,255,255,.7); }
.cv[data-tpl="band"] .s__h {
  border-bottom: 2px solid var(--accent-line); padding-bottom: 5px;
  font-size: calc(var(--fs) * .84); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   4 — TRYCK          formspråk: Trycksak       layout: single
   Namnet i antikva, etiketterna i en smal vänsterspalt, hårfina linjer.
   Accentfärgen används på två ställen i hela dokumentet.
   ========================================================================== */

.cv[data-tpl="tryck"] {
  --doc-ink: #191512;
  --doc-mut: #6E655C;
  --doc-line: #DCD5CA;
  --pad-x: 62px; --pad-y: 58px;
  background-color: #FCFBF8;
}
.cv[data-tpl="tryck"] .cv-head { display: block; padding-bottom: 20px; }
.cv[data-tpl="tryck"] .cv-head__text { border-bottom: 2px solid var(--doc-ink); padding-bottom: 20px; }
.cv[data-tpl="tryck"] .cv-photo { display: none; }
.cv[data-tpl="tryck"] .cv-name {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 400; font-size: calc(var(--fs) * 2.9); letter-spacing: -.02em;
}
.cv[data-tpl="tryck"] .cv-role {
  margin-top: 8px; font-size: calc(var(--fs) * .84); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.cv[data-tpl="tryck"] .ct--inline { gap: 3px 22px; }
.cv[data-tpl="tryck"] .ci { display: none; }
.cv[data-tpl="tryck"] .cv-main { --kol-gap: calc(var(--gap) * 1.3); }
.cv[data-tpl="tryck"] .s { display: grid; grid-template-columns: calc(var(--fs) * 11.6) 1fr; gap: 22px; align-items: start; }
.cv[data-tpl="tryck"] .s__h {
  margin: 0; padding-top: 4px;
  font-size: calc(var(--fs) * .72); font-weight: 700; line-height: 1.4;
  letter-spacing: .09em; text-transform: uppercase; color: var(--doc-mut);
}
.cv[data-tpl="tryck"] .e__meta { color: var(--doc-mut); font-style: italic; }
.cv[data-tpl="tryck"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="tryck"] .rt li::marker { color: var(--doc-line); }
.cv[data-tpl="tryck"] .lv__meter { display: none; }
.cv[data-tpl="tryck"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="tryck"] .lv__row::after {
  content: attr(data-niva); font-size: calc(var(--fs) * .88);
  color: var(--doc-mut); font-style: italic;
}
.cv[data-tpl="tryck"] .tg { display: flex; flex-wrap: wrap; gap: 3px 18px; }

/* ==========================================================================
   5 — REN            formspråk: Trycksak       layout: single
   Mycket luft, stort namn, lite text per sida. Får ett kort CV att se
   avsiktligt ut i stället för tomt — bra för den med kort historik.
   ========================================================================== */

.cv[data-tpl="ren"] {
  --pad-x: 72px; --pad-y: 68px;
  --gap: calc(28px * var(--doc-density));
}
.cv[data-tpl="ren"] .cv-head { display: block; padding-bottom: 6px; }
.cv[data-tpl="ren"] .cv-photo { margin-bottom: 18px; }
.cv[data-tpl="ren"] .cv-name { font-weight: 300; font-size: calc(var(--fs) * 2.7); letter-spacing: -.03em; }
.cv[data-tpl="ren"] .cv-role { color: var(--doc-mut); font-weight: 400; }
.cv[data-tpl="ren"] .s { display: grid; grid-template-columns: calc(var(--fs) * 11.6) 1fr; gap: 20px; align-items: start; }
.cv[data-tpl="ren"] .s__h {
  margin: 0; padding-top: 3px; line-height: 1.4;
  font-size: calc(var(--fs) * .72); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--doc-mut);
}
.cv[data-tpl="ren"] .e__title { font-weight: 600; }
.cv[data-tpl="ren"] .lv__meter i { height: 2px; border-radius: 0; width: calc(var(--fs) * .9); }

/* ==========================================================================
   6 — KONTOR         formspråk: Nordiskt       layout: single
   Nästan monokromt, avsnitten som rader i ett register. Ingen färgyta som en
   ATS-läsare snubblar på, och lika läsbart i svartvitt.
   ========================================================================== */

.cv[data-tpl="kontor"] {
  --doc-ink: #16161A;
  --doc-mut: #63626B;
  --doc-line: #DEDDE1;
  --pad-x: 56px; --pad-y: 54px;
}
.cv[data-tpl="kontor"] .cv-head { padding-bottom: 20px; }
.cv[data-tpl="kontor"] .cv-head__text { border-bottom: 1px solid var(--doc-line); padding-bottom: 20px; }
.cv[data-tpl="kontor"] .cv-photo { border-radius: 3px; width: calc(var(--fs) * 6.6 * var(--fotoskala, 1)); height: calc(var(--fs) * 6.6 * var(--fotoskala, 1)); }
.cv[data-tpl="kontor"] .cv-name { font-weight: 600; font-size: calc(var(--fs) * 1.85); letter-spacing: -.01em; }
.cv[data-tpl="kontor"] .cv-role { color: var(--doc-mut); font-weight: 400; }
.cv[data-tpl="kontor"] .ct--inline { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.cv[data-tpl="kontor"] .ci { display: none; }
.cv[data-tpl="kontor"] .cv-main { --kol-gap: 0px; }
.cv[data-tpl="kontor"] .s {
  display: grid; grid-template-columns: calc(var(--fs) * 11.8) 1fr; gap: 20px;
  padding: calc(var(--gap) * .8) 0;
  border-bottom: 1px solid var(--doc-line);
}
.cv[data-tpl="kontor"] .s:last-child { border-bottom: 0; }
.cv[data-tpl="kontor"] .s__h {
  margin: 0; line-height: 1.4;
  font-size: calc(var(--fs) * .74); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.cv[data-tpl="kontor"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="kontor"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="kontor"] .rt li::marker { color: var(--doc-line); }
.cv[data-tpl="kontor"] .lv { grid-template-columns: 1fr 1fr; gap: 4px 24px; }
/* Spalten (241px) rymmer inte namn + prickar + fast ordkolumn på en rad —
   staplad radlayout som i kolumn/omtanke, annars bryts långa namn mitt i. */
.cv[data-tpl="kontor"] .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="kontor"] .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="kontor"] .lv__meter i { width: calc(var(--fs) * .38); height: calc(var(--fs) * .38); border-radius: 50%; background: var(--doc-line); }
.cv[data-tpl="kontor"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="kontor"] .tg { display: flex; flex-wrap: wrap; gap: 2px 16px; }

/* ==========================================================================
   7 — KOMPAKT        formspråk: Nordiskt       layout: sideR
   Tät sättning för den med lång historik. Sidokolumnen till höger så att
   brödtexten börjar vid vänstermarginalen — lättare för ATS att följa.
   ========================================================================== */

.cv[data-tpl="kompakt"] {
  --gap: calc(15px * var(--doc-density));
  --side-w: 30%;
  --doc-line: #DEDDE1;
  --pad-x: 44px; --pad-y: 42px;
  background-image: linear-gradient(to right, transparent 0 70%, rgba(0,0,0,.028) 70% 100%);
}
.cv[data-tpl="kompakt"] .cv-head { padding-bottom: 14px; }
.cv[data-tpl="kompakt"] .cv-head__text { border-bottom: 2px solid var(--accent); padding-bottom: 14px; }
.cv[data-tpl="kompakt"] .cv-name { font-size: calc(var(--fs) * 1.75); }
.cv[data-tpl="kompakt"] .cv-photo { width: calc(var(--fs) * 5.8 * var(--fotoskala, 1)); height: calc(var(--fs) * 5.8 * var(--fotoskala, 1)); }
.cv[data-tpl="kompakt"] .s__h {
  font-size: calc(var(--fs) * .74); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="kompakt"] .lv__meter { display: none; }
/* Gapet 10px gjorde att "Budgetuppföljning" + "Expert" blev en bråkdels
   pixel för brett för spalten och ordet bröts mitt i — 6px ger luft nog. */
.cv[data-tpl="kompakt"] .lv__row { grid-template-columns: 1fr auto; gap: 6px; }

/* ==========================================================================
   8 — TIDSLINJE      formspråk: Nordiskt       layout: timeline
   Datum i vänstergutter. Gör många korta anställningar läsbara i stället för
   rörigt — vanligt hos den som arbetat via bemanning.
   ========================================================================== */

.cv[data-tpl="tidslinje"] {
  --doc-line: #DEDDE1;
}
.cv[data-tpl="tidslinje"] .cv-head { padding-bottom: 18px; }
.cv[data-tpl="tidslinje"] .cv-head__text { border-bottom: 2px solid var(--accent); padding-bottom: 18px; }
.cv[data-tpl="tidslinje"] .s__h {
  font-size: calc(var(--fs) * .78); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="tidslinje"] .e { position: relative; padding-left: 9.5em; }
.cv[data-tpl="tidslinje"] .e__row { display: block; }
.cv[data-tpl="tidslinje"] .e__date {
  position: absolute; left: 0; top: 1px; width: 8.5em;
  text-align: left; white-space: normal;
  font-variant-numeric: tabular-nums;
}
.cv[data-tpl="tidslinje"] .e::before {
  content: ""; position: absolute; left: 8.9em; top: 5px; bottom: -6px;
  border-left: 1.5px solid var(--accent-line);
}
.cv[data-tpl="tidslinje"] .e::after {
  content: ""; position: absolute; left: calc(8.9em - 3px); top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.cv[data-tpl="tidslinje"] .s--profile .e,
.cv[data-tpl="tidslinje"] .s--skills .lv,
.cv[data-tpl="tidslinje"] .s--languages .lv { padding-left: 0; }
.cv[data-tpl="tidslinje"] .s--profile .e::before,
.cv[data-tpl="tidslinje"] .s--profile .e::after { display: none; }


/* ==========================================================================
   9 — SIDOPANEL      formspråk: Talea          layout: sideL
   Mättad färgspalt med vit text. Den mest sedda formen på marknaden, och den
   som får ett CV att kännas "designat" utan att bli rörigt.
   ========================================================================== */

.cv[data-tpl="sidopanel"] {
  background-image: linear-gradient(to right, var(--accent) 0 32%, transparent 32% 100%);
  --side-w: 32%;
}
/* Sidhuvudet är ett rutnät där första kolumnen ÄR färgspalten: fotot hamnar
   centrerat i ramen oavsett storleksreglage, texten till höger som förut.
   Utan foto är kolumnen tom och ingenting ändras. */
.cv[data-tpl="sidopanel"] .cv-head {
  display: grid; grid-template-columns: 32% 1fr;
  padding: var(--pad-y) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="sidopanel"] .cv-photo { grid-column: 1; justify-self: center;
  border: 3px solid rgba(255,255,255,.35); background-color: rgba(255,255,255,.12); }
.cv[data-tpl="sidopanel"] .cv-head__text { grid-column: 2; padding: 0 var(--pad-x) 0 24px; }
.cv[data-tpl="sidopanel"] .cv-name { letter-spacing: -.02em; }
.cv[data-tpl="sidopanel"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.6); }
.cv[data-tpl="sidopanel"] .cv-side .s__h {
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 5px;
  font-size: calc(var(--fs) * .8); letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-tpl="sidopanel"] .cv-side .ct li,
.cv[data-tpl="sidopanel"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="sidopanel"] .cv-side .ci { color: #fff; }
.cv[data-tpl="sidopanel"] .cv-side .lv__meter i { background: rgba(255,255,255,.28); }
.cv[data-tpl="sidopanel"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="sidopanel"] .cv-side .lv__row::after { color: rgba(255,255,255,.75); }
.cv[data-tpl="sidopanel"] .cv-main .s__h {
  font-size: calc(var(--fs) * .82); letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   10 — RUBRIKKORT    formspråk: Talea          layout: band
   Namnet i ett färgat kort som ligger på sidan. Luftigt och vänligt.
   ========================================================================== */

.cv[data-tpl="rubrikkort"] .cv-head {
  margin: var(--pad-y) var(--pad-x) 0;
  padding: 28px 30px;
  background: var(--accent); color: #fff;
  border-radius: 20px;
  align-items: center;
}
.cv[data-tpl="rubrikkort"] .cv-name { color: #fff; }
.cv[data-tpl="rubrikkort"] .cv-role { color: rgba(255,255,255,.8); }
.cv[data-tpl="rubrikkort"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="rubrikkort"] .ct--inline .ci { color: rgba(255,255,255,.62); }
.cv[data-tpl="rubrikkort"] .cv-photo { border: 3px solid rgba(255,255,255,.35); }
.cv[data-tpl="rubrikkort"] .s__h {
  font-size: calc(var(--fs) * .82); letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="rubrikkort"] .s__h::after {
  content: ""; display: block; height: 2px; background: var(--accent-line); margin-top: 5px;
}

/* ==========================================================================
   11 — MONOGRAM      formspråk: Talea          layout: band
   Initialerna i en färgad cirkel. Bär ett CV utan foto, vilket många vill.
   ========================================================================== */

.cv[data-tpl="monogram"] .cv-head { align-items: center; gap: 24px; padding-bottom: 22px; }
.cv[data-tpl="monogram"] .cv-head::after {
  content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: 0; height: 3px; background: var(--accent);
}
.cv[data-tpl="monogram"] .cv-head { position: relative; }
.cv[data-tpl="monogram"] .cv-mono {
  display: grid; place-items: center;
  width: calc(var(--fs) * 5); height: calc(var(--fs) * 5);
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: calc(var(--fs) * 1.7); font-weight: 700; letter-spacing: .02em;
  flex: none; order: -1;
}
/* Monogrammet är fotots ersättare, inte dess granne (Mahmouds beslut 28/8):
   med uppladdat foto göms cirkeln — accentlinjen och namnet bär mallen. */
.cv[data-tpl="monogram"] .cv-head:has(.cv-photo) .cv-mono { display: none; }
.cv[data-tpl="monogram"] .cv-name { color: var(--accent); }
.cv[data-tpl="monogram"] .s__h {
  font-size: calc(var(--fs) * .82); letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   12 — ANTIKVA       formspråk: Trycksak       layout: single
   Genomgående antikva och centrerat namn. Bokens sättning, inte skärmens.
   ========================================================================== */

/* Bokens luft — men trimmad så att standardinnehållet ryms på A4:an;
   tidigare hamnade sidfotskrediten nedanför sidslutet. */
.cv[data-tpl="antikva"] {
  /* (--doc-font: Lora stod här men var dött — inline-värdet från render.js
     vann, mallen har alltid renderats i Montserrat och granskats så.) */
  --doc-line: #DAD5CD;
  --pad-x: 66px; --pad-y: 44px;
  background-color: #FCFBF9;
}
.cv[data-tpl="antikva"] .cv-head { display: block; text-align: center; padding-bottom: 12px; }
.cv[data-tpl="antikva"] .cv-photo { margin: 0 auto 12px; }
.cv[data-tpl="antikva"] .cv-name { font-weight: 400; letter-spacing: .01em; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="antikva"] .cv-role {
  font-style: italic; font-weight: 400; color: var(--doc-mut);
  font-size: calc(var(--fs) * 1.05);
}
.cv[data-tpl="antikva"] .ct--inline { justify-content: center; }
.cv[data-tpl="antikva"] .ci { display: none; }
.cv[data-tpl="antikva"] .cv-main { border-top: 1px solid var(--doc-line); padding-top: var(--gap); }
.cv[data-tpl="antikva"] .s__h {
  text-align: center; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; font-size: calc(var(--fs) * .8);
  color: var(--doc-mut); margin-bottom: 10px;
}
.cv[data-tpl="antikva"] .e__meta { font-style: italic; color: var(--doc-mut); }
.cv[data-tpl="antikva"] .lv__meter { display: none; }
.cv[data-tpl="antikva"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="antikva"] .lv__row::after { content: attr(data-niva); font-style: italic; color: var(--doc-mut); font-size: calc(var(--fs) * .88); }

/* ==========================================================================
   13 — TRADITION     formspråk: Trycksak       layout: single
   Den svenska standardformen: centrerat namn, dubbel linje, versalrubriker.
   Den mall en äldre rekryterare känner igen direkt.
   ========================================================================== */

/* pad-y en aning stramare än basens: standardinnehållet stack annars 13px
   utanför A4:an och nederkantens marginal klipptes i förhandsvisningen. */
.cv[data-tpl="tradition"] { --pad-x: 58px; --pad-y: 30px; }
.cv[data-tpl="tradition"] .cv-head { display: block; text-align: center; padding-bottom: 6px; }
.cv[data-tpl="tradition"] .cv-photo { margin: 0 auto 12px; border-radius: 3px; }
.cv[data-tpl="tradition"] .cv-name { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: calc(var(--fs) * 1.9); }
.cv[data-tpl="tradition"] .cv-head__text { border-bottom: 3px double var(--doc-ink); padding-bottom: 14px; }
.cv[data-tpl="tradition"] .ct--inline { justify-content: center; }
.cv[data-tpl="tradition"] .ci { display: none; }
.cv[data-tpl="tradition"] .s__h {
  font-size: calc(var(--fs) * .88); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--doc-line); padding-bottom: 4px;
}
.cv[data-tpl="tradition"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   14 — AKADEMISK     formspråk: Trycksak       layout: single
   Tät sättning och hängande indrag. Byggd för långa listor: kurser,
   uppdrag, publikationer.
   ========================================================================== */

.cv[data-tpl="akademisk"] {
  /* (--doc-font: Source Sans 3 stod här men var dött — se Antikva.) */
  --fs: calc(12.4px * var(--doc-scale));
  --gap: calc(15px * var(--doc-density));
  --pad-x: 52px; --pad-y: 48px;
}
.cv[data-tpl="akademisk"] .cv-head { padding-bottom: 12px; }
.cv[data-tpl="akademisk"] .cv-head__text { border-bottom: 1px solid var(--doc-ink); padding-bottom: 12px; }
.cv[data-tpl="akademisk"] .cv-name { font-weight: 600; font-size: calc(var(--fs) * 1.8); }
.cv[data-tpl="akademisk"] .s__h {
  font-size: calc(var(--fs) * .84); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--doc-line); padding-bottom: 3px;
}
.cv[data-tpl="akademisk"] .s__b { --sek-gap: calc(var(--gap) * .5); }
.cv[data-tpl="akademisk"] .e__row { display: grid; grid-template-columns: 1fr 8em; }
.cv[data-tpl="akademisk"] .e__date { text-align: right; }
.cv[data-tpl="akademisk"] .rt { margin-top: 2px; }
.cv[data-tpl="akademisk"] .rt ul { padding-left: 14px; }
.cv[data-tpl="akademisk"] .lv { grid-template-columns: 1fr 1fr; gap: 3px 24px; }

/* ==========================================================================
   15 — REGISTER      formspråk: Nordiskt       layout: single
   Varje post som en rad i ett register, med linje emellan. Extremt läsbart
   när CV:t är långt.
   ========================================================================== */

.cv[data-tpl="register"] { --doc-line: #E2E1E5; }
.cv[data-tpl="register"] .cv-head { padding-bottom: 18px; }
.cv[data-tpl="register"] .cv-head__text { border-bottom: 2px solid var(--doc-ink); padding-bottom: 18px; }
.cv[data-tpl="register"] .cv-name { font-weight: 600; }
.cv[data-tpl="register"] .s__h {
  font-size: calc(var(--fs) * .78); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--doc-mut);
}
.cv[data-tpl="register"] .s__b { --sek-gap: 0px; }
.cv[data-tpl="register"] .e { padding: 11px 0; border-top: 1px solid var(--doc-line); }
.cv[data-tpl="register"] .e:first-child { border-top: 0; padding-top: 2px; }
.cv[data-tpl="register"] .e__row { display: grid; grid-template-columns: 9em 1fr; gap: 18px; }
.cv[data-tpl="register"] .e__date { order: -1; text-align: left; white-space: normal; }
.cv[data-tpl="register"] .e .rt { margin-left: calc(9em + 18px); }
.cv[data-tpl="register"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   16 — RAM           formspråk: Nordiskt       layout: single
   En tunn ram runt hela sidan och mycket luft innanför. Diskret men tydligt
   avsiktligt — sticker ut i en hög med lösa papper.
   ========================================================================== */

/* Ramen ligger som padding på sidan, inte som marginal på innehållet:
   en marginal kollapsar ut genom .cv och skjuter sidan över kanten i utskrift. */
.cv[data-tpl="ram"] { --pad-x: 66px; --pad-y: 62px; padding: 22px; }
.cv[data-tpl="ram"] .cv-inner { border: 1px solid var(--accent-line); min-height: 100%; }
.cv[data-tpl="ram"] .cv-head { padding-top: calc(var(--pad-y) * .8); }
.cv[data-tpl="ram"] .cv-name { font-weight: 400; letter-spacing: -.01em; }
.cv[data-tpl="ram"] .cv-role { letter-spacing: .18em; text-transform: uppercase; font-size: calc(var(--fs) * .8); font-weight: 600; }
.cv[data-tpl="ram"] .s__h {
  font-size: calc(var(--fs) * .78); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.cv[data-tpl="ram"] .cv-main { padding-bottom: calc(var(--pad-y) * .8); }

/* ==========================================================================
   17 — SOBER         formspråk: Nordiskt       layout: single
   Helt utan accentfärg. Den säkraste mallen genom en ATS-läsare, och den som
   aldrig kan se fel ut i svartvitt.
   ========================================================================== */

/* !important behövs: --accent sätts som inline-stil av render.js. */
.cv[data-tpl="sober"] {
  --accent: #2B2B2E !important;
  --accent-soft: #E6E6E8 !important;
  --accent-line: #C9C9CD !important;
  --doc-line: #D8D8DC;
}
.cv[data-tpl="sober"] .cv-head { padding-bottom: 16px; }
.cv[data-tpl="sober"] .cv-head__text { border-bottom: 1px solid var(--doc-line); padding-bottom: 16px; }
.cv[data-tpl="sober"] .cv-name { font-weight: 600; font-size: calc(var(--fs) * 1.8); }
.cv[data-tpl="sober"] .cv-role { color: var(--doc-mut); }
.cv[data-tpl="sober"] .ci { color: var(--doc-mut); }
.cv[data-tpl="sober"] .s__h { font-size: calc(var(--fs) * .84); letter-spacing: .1em; text-transform: uppercase; }
.cv[data-tpl="sober"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   19 — KANT          formspråk: Kreativ        layout: single
   Bred färgad vänsterkant. Färg utan att ta plats från innehållet.
   ========================================================================== */

.cv[data-tpl="kant"] {
  background-image: linear-gradient(to right, var(--accent) 0 16px, transparent 16px 100%);
  --pad-x: 58px;
}
.cv[data-tpl="kant"] .cv-head { padding-bottom: 16px; }
.cv[data-tpl="kant"] .cv-name { letter-spacing: -.02em; }
.cv[data-tpl="kant"] .s__h {
  position: relative; padding-left: 16px;
  font-size: calc(var(--fs) * .84); letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="kant"] .s__h::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* ==========================================================================
   20 — TONING        formspråk: Kreativ        layout: band
   Mjuk toning i huvudet. Den varmaste av mallarna.
   ========================================================================== */

.cv[data-tpl="toning"] .cv-head {
  background-image: linear-gradient(120deg, var(--accent) 0%, rgba(0,0,0,.35) 160%);
  color: #fff;
  padding: calc(var(--pad-y) * .95) var(--pad-x);
  align-items: center;
}
.cv[data-tpl="toning"] .cv-name { color: #fff; letter-spacing: -.02em; }
.cv[data-tpl="toning"] .cv-role { color: rgba(255,255,255,.82); }
.cv[data-tpl="toning"] .cv-photo { border: 3px solid rgba(255,255,255,.4); }
.cv[data-tpl="toning"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="toning"] .ct--inline .ci { color: rgba(255,255,255,.62); }
.cv[data-tpl="toning"] .s__h {
  font-size: calc(var(--fs) * .82); letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="toning"] .s__h::after {
  content: ""; display: block; width: 40px; height: 3px; border-radius: 99px;
  background: var(--accent); margin-top: 5px;
}

/* monogrammet visas bara i sin egen mall */
.cv-mono { display: none; }

/* ==========================================================================
   21 — KLAR         formspråk: Nordiskt       layout: single
   Strikt enspalt i Inter. Rytmen bär: hårlinjer, versalrubriker, tabellsiffror.
   Som Sober låst till neutralt — färgväljaren ska inte kunna göra den brokig.
   ========================================================================== */

.cv[data-tpl="klar"] {
  --accent: #141417 !important;
  --accent-soft: #EDEDEF !important;
  --accent-line: #C9C9CD !important;
  --doc-ink: #141417;
  --doc-mut: #5F5F66;
  --doc-line: #E3E3E6;
  --pad-x: 56px; --pad-y: 54px;
  --gap: calc(24px * var(--doc-density));
  --tpl-font: "Inter", sans-serif;
}
.cv[data-tpl="klar"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.3); letter-spacing: -.02em; }
.cv[data-tpl="klar"] .cv-role { color: var(--doc-mut); font-weight: 400; }
.cv[data-tpl="klar"] .ci { display: none; }
.cv[data-tpl="klar"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px;
}
.cv[data-tpl="klar"] .e__meta { color: var(--doc-ink); font-weight: 400; }
.cv[data-tpl="klar"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="klar"] .rt li::marker { color: #B9B9BF; }
.cv[data-tpl="klar"] .lv__meter { display: none; }
.cv[data-tpl="klar"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="klar"] .lv__row::after {
  content: attr(data-niva); font-size: calc(var(--fs) * .88); color: var(--doc-mut);
}
.cv[data-tpl="klar"] .tg { display: block; }
.cv[data-tpl="klar"] .tg li { display: inline; }
.cv[data-tpl="klar"] .tg li:not(:last-child)::after { content: ", "; }

/* ==========================================================================
   22 — SKIFFER      formspråk: Talea          layout: sideL
   Modern tvåspalt: dovt mörk sidokolumn, namnet över hela bredden i Manrope,
   kompetenser som pillertaggar i vitt.
   ========================================================================== */

.cv[data-tpl="skiffer"] {
  --side-w: 32%;
  --pad-x: 48px;
  --tpl-font: "Source Sans 3", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 32%, transparent 32% 100%);
}
.cv[data-tpl="skiffer"] .cv-head {
  display: grid; grid-template-columns: 32% 1fr;
  padding: var(--pad-y) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="skiffer"] .cv-photo { grid-column: 1; justify-self: center; }
.cv[data-tpl="skiffer"] .cv-head__text { grid-column: 2; padding: 0 var(--pad-x) 0 34px; }
.cv[data-tpl="skiffer"] .cv-name {
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: calc(var(--fs) * 2.25); letter-spacing: -.02em;
}
.cv[data-tpl="skiffer"] .cv-role { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="skiffer"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.6); }
.cv[data-tpl="skiffer"] .cv-side .s__h {
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 6px;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: calc(var(--fs) * .78); letter-spacing: .14em; text-transform: uppercase;
}
.cv[data-tpl="skiffer"] .cv-side .ct li,
.cv[data-tpl="skiffer"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="skiffer"] .cv-side .ci { color: #fff; }
.cv[data-tpl="skiffer"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="skiffer"] .cv-side .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="skiffer"] .cv-side .lv__row::after {
  content: attr(data-niva); font-size: calc(var(--fs) * .84); color: rgba(255,255,255,.6);
}
.cv[data-tpl="skiffer"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="skiffer"] .tg li {
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 2px 11px; font-size: calc(var(--fs) * .86);
}
.cv[data-tpl="skiffer"] .cv-main .s__h {
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: calc(var(--fs) * .78); letter-spacing: .14em; text-transform: uppercase;
}
.cv[data-tpl="skiffer"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="skiffer"] .cv-photo { border: 3px solid rgba(255,255,255,.3); }

/* ==========================================================================
   KLASSIKER — formerna folk känner igen från CV-byggare, med mer liv:
   färgytor, stora meningssatta färgrubriker, mätare och ikoner. Allt färgat
   går genom var(--accent)/-soft/-line så att färgväljaren styr.
   ========================================================================== */

/* runda punktmätare — gemensamt för Casual, Horisontell och Modern */
.cv[data-tpl="casual"] .lv__meter i,
.cv[data-tpl="horisontell"] .lv__meter i,
.cv[data-tpl="modern"] .lv__meter i {
  width: calc(var(--fs) * .46); height: calc(var(--fs) * .46);
  border-radius: 50%; background: var(--accent-line);
}
.cv[data-tpl="casual"] .lv__meter i.is-on,
.cv[data-tpl="horisontell"] .lv__meter i.is-on,
.cv[data-tpl="modern"] .lv__meter i.is-on { background: var(--accent); }

/* ==========================================================================
   24 — CASUAL       formspråk: Klassiker      layout: sideL
   Färgblock och ljus linje överst, stort svart namn, färgspalt därunder och
   datum i egen vänsterkolumn.
   ========================================================================== */

.cv[data-tpl="casual"] {
  --side-w: 34%;
  --pad-x: 44px;
  --tpl-font: "Nunito Sans", sans-serif;
}
.cv[data-tpl="casual"] .cv-head { display: block; padding: 0 var(--pad-x); }
.cv[data-tpl="casual"] .cv-head::before {
  content: ""; display: block; width: 38%; height: 44px;
  margin-left: calc(0px - var(--pad-x));
  background-image: linear-gradient(var(--accent), var(--accent));
}
.cv[data-tpl="casual"] .cv-head__text {
  border-top: 4px solid var(--accent-line); padding-top: 16px; margin-top: 6px;
}
/* Fotot till vänster i linje med färgspalten — inte tryckt mot högerkanten. */
.cv[data-tpl="casual"] .cv-photo { float: left; margin: 14px 20px 0 0; }
.cv[data-tpl="casual"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.4); letter-spacing: -.01em; }
.cv[data-tpl="casual"] .cv-role { color: var(--accent); font-weight: 700; }
.cv[data-tpl="casual"] .cv-cols {
  flex: 1; margin-top: 18px;
  background-image: linear-gradient(to right, var(--accent) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="casual"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.3); }
.cv[data-tpl="casual"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * 1.2); font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 6px;
}
.cv[data-tpl="casual"] .cv-side .ct li,
.cv[data-tpl="casual"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="casual"] .cv-side .ci { color: #fff; }
.cv[data-tpl="casual"] .cv-side .lv__meter i { background: rgba(255,255,255,.3); }
.cv[data-tpl="casual"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="casual"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); }
.cv[data-tpl="casual"] .cv-main .s__h {
  font-size: calc(var(--fs) * 1.35); font-weight: 800;
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px; color: var(--doc-ink);
}
.cv[data-tpl="casual"] .e__row { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 18px; }
.cv[data-tpl="casual"] .e__date {
  grid-column: 1; grid-row: 1; white-space: normal;
  font-weight: 700; color: var(--doc-ink);
}
.cv[data-tpl="casual"] .e__main { grid-column: 2; }
.cv[data-tpl="casual"] .e .rt { margin-left: calc(8.5em + 18px); margin-top: 2px; }
.cv[data-tpl="casual"] .e__meta { font-weight: 600; }

/* ==========================================================================
   25 — HORISONTELL  formspråk: Klassiker      layout: sideL
   Helbrett färgband överst, namn i accentfärg, sidokolumnen som tonad panel.
   ========================================================================== */

.cv[data-tpl="horisontell"] {
  --side-w: 34%;
  --tpl-font: "Source Sans 3", sans-serif;
}
.cv[data-tpl="horisontell"] .cv-head { display: block; padding: 0; }
.cv[data-tpl="horisontell"] .cv-head::before {
  content: ""; display: block; height: 28px;
  background-image: linear-gradient(var(--accent), var(--accent));
}
.cv[data-tpl="horisontell"] .cv-photo { float: right; margin: 20px var(--pad-x) 0 0; }
.cv[data-tpl="horisontell"] .cv-head__text {
  padding: 24px var(--pad-x) 18px;
  border-bottom: 1px solid var(--doc-line);
}
.cv[data-tpl="horisontell"] .cv-name { color: var(--accent); font-weight: 700; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="horisontell"] .cv-role { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="horisontell"] .cv-side {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  margin: calc(var(--gap) * 1.2) 0 var(--pad-y) var(--pad-x);
  padding: 20px 18px; border-radius: 2px; align-self: start;
}
.cv[data-tpl="horisontell"] .s__h {
  font-size: calc(var(--fs) * 1.2); font-weight: 700; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="horisontell"] .cv-main .s__h { font-size: calc(var(--fs) * 1.4); }
.cv[data-tpl="horisontell"] .e__date { color: var(--accent); font-weight: 700; }
.cv[data-tpl="horisontell"] .lv { gap: 9px; }

/* ==========================================================================
   27 — PROFESSIONELL formspråk: Klassiker     layout: sideR
   Mörkt namnband över hela bredden, innehållet till vänster och färdigheter
   som tunna stapelmätare till höger.
   ========================================================================== */

.cv[data-tpl="professionell"] {
  --side-w: 30%;
  --tpl-font: "Source Sans 3", sans-serif;
}
.cv[data-tpl="professionell"] .cv-head {
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  padding: calc(var(--pad-y) * .9) var(--pad-x);
  align-items: center;
}
.cv[data-tpl="professionell"] .cv-name { color: #fff; font-weight: 700; font-size: calc(var(--fs) * 2.4); }
.cv[data-tpl="professionell"] .cv-role { color: rgba(255,255,255,.75); font-weight: 600; }
.cv[data-tpl="professionell"] .cv-photo { border: 3px solid rgba(255,255,255,.85); }
.cv[data-tpl="professionell"] .s__h {
  font-size: calc(var(--fs) * 1.3); font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px;
}
.cv[data-tpl="professionell"] .e__title { font-weight: 700; }
.cv[data-tpl="professionell"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="professionell"] .lv { gap: 12px; }
.cv[data-tpl="professionell"] .lv__row { grid-template-columns: 1fr auto; gap: 5px 10px; }
.cv[data-tpl="professionell"] .lv__meter { grid-column: 1 / -1; }
.cv[data-tpl="professionell"] .lv__meter {
  display: block; height: 4px; border-radius: 99px;
  background: #E6E5E9; position: relative; overflow: hidden;
}
.cv[data-tpl="professionell"] .lv__meter i {
  position: absolute; top: 0; bottom: 0; left: 0; height: auto;
  border-radius: 99px; background: none;
}
.cv[data-tpl="professionell"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="professionell"] .lv__meter i:nth-child(1).is-on { width: 20%; }
.cv[data-tpl="professionell"] .lv__meter i:nth-child(2).is-on { width: 40%; }
.cv[data-tpl="professionell"] .lv__meter i:nth-child(3).is-on { width: 60%; }
.cv[data-tpl="professionell"] .lv__meter i:nth-child(4).is-on { width: 80%; }
.cv[data-tpl="professionell"] .lv__meter i:nth-child(5).is-on { width: 100%; }

/* ==========================================================================
   28 — MODERN       formspråk: Klassiker      layout: sideL
   Mättad färgspalt med namnet centrerat i vitt, rubriker med tunn sidolinje
   och datum i egen vänsterkolumn.
   ========================================================================== */

.cv[data-tpl="modern"] {
  --side-w: 34%;
  --pad-x: 44px;
  --tpl-font: "Nunito Sans", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 34%, transparent 34% 100%);
}
/* Rutnät med spaltbredden som första kolumn: fotot centreras exakt i den
   gröna spalten oavsett storleksreglaget, namnet därunder. */
.cv[data-tpl="modern"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr;
  padding: 0; gap: 0;
}
.cv[data-tpl="modern"] .cv-photo {
  grid-area: 1 / 1; justify-self: center;
  margin: 44px 0 0;
  border: 3px solid rgba(255,255,255,.4);
}
.cv[data-tpl="modern"] .cv-head__text { grid-area: 2 / 1; width: auto; color: #fff; text-align: center; padding: 48px 24px 0; }
/* med foto tar fotot höjden — namnet behöver bara ett kort andrum under */
.cv[data-tpl="modern"] .cv-head:has(.cv-photo) .cv-head__text { padding-top: 24px; }
.cv[data-tpl="modern"] .cv-name { color: #fff; font-weight: 700; font-size: calc(var(--fs) * 1.75); }
.cv[data-tpl="modern"] .cv-role { color: rgba(255,255,255,.85); font-weight: 600; font-size: calc(var(--fs) * .95); }
.cv[data-tpl="modern"] .cv-side { color: #fff; }
.cv[data-tpl="modern"] .s__h { display: flex; align-items: center; gap: 12px; }
.cv[data-tpl="modern"] .s__h::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.45); }
.cv[data-tpl="modern"] .cv-side .s__h { color: #fff; font-size: calc(var(--fs) * 1.2); font-weight: 800; }
.cv[data-tpl="modern"] .cv-side .ct li,
.cv[data-tpl="modern"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="modern"] .cv-side .ci { color: #fff; }
.cv[data-tpl="modern"] .cv-side .lv__meter i { background: rgba(255,255,255,.3); }
.cv[data-tpl="modern"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="modern"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); justify-self: end; }
/* Som i Kolumn: raden ryms inte i sidospalten — namnet över, mätare + nivå under. */
.cv[data-tpl="modern"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="modern"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="modern"] .cv-main .s__h { color: var(--doc-ink); font-size: calc(var(--fs) * 1.35); font-weight: 800; }
.cv[data-tpl="modern"] .cv-main .s__h::after { border-top-color: var(--doc-line); }
.cv[data-tpl="modern"] .e__row { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 18px; }
.cv[data-tpl="modern"] .e__date {
  grid-column: 1; grid-row: 1; white-space: normal;
  font-weight: 700; color: var(--doc-ink);
}
.cv[data-tpl="modern"] .e__main { grid-column: 2; }
.cv[data-tpl="modern"] .e .rt { margin-left: calc(8.5em + 18px); margin-top: 2px; }
.cv[data-tpl="modern"] .e__meta { font-weight: 600; }

/* ==========================================================================
   GROTESK        formspråk: Trycksak       layout: single
   Det typografiska statementet: namnet i displaysatt Manrope med en färgad
   punkt, hårfina linjer och mikroskopiska versalrubriker med samma punkt.
   Enspaltig och linjär — går genom ATS, men ser formgiven 2026 ut.
   ========================================================================== */

.cv[data-tpl="grotesk"] {
  --doc-ink: #121215;
  --doc-mut: #5E5E66;
  --doc-line: #E4E4E7;
  --pad-x: 58px; --pad-y: 56px;
  --gap: calc(26px * var(--doc-density));
  --tpl-font: "Inter", sans-serif;
}
.cv[data-tpl="grotesk"] .cv-head {
  margin: var(--pad-y) var(--pad-x) 0;
  padding: 0 0 22px;
  border-bottom: 2px solid var(--doc-ink);
}
.cv[data-tpl="grotesk"] .cv-photo {
  order: 2;
  width: calc(var(--fs) * 6.2 * var(--fotoskala, 1));
  height: calc(var(--fs) * 6.2 * var(--fotoskala, 1));
}
.cv[data-tpl="grotesk"] .cv-name {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: calc(var(--fs) * 3.05);
  line-height: .98;
  letter-spacing: -.035em;
}
.cv[data-tpl="grotesk"] .cv-name::after { content: "."; color: var(--accent); }
.cv[data-tpl="grotesk"] .cv-role {
  margin-top: 9px;
  font-size: calc(var(--fs) * .8); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.cv[data-tpl="grotesk"] .ci { display: none; }
.cv[data-tpl="grotesk"] .ct--inline { margin-top: 16px; gap: 4px 20px; }
.cv[data-tpl="grotesk"] .cv-main { --kol-gap: calc(var(--gap) * 1.05); }
.cv[data-tpl="grotesk"] .s__h {
  font-family: "Manrope", sans-serif;
  font-size: calc(var(--fs) * .76); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--doc-ink); margin-bottom: 10px;
}
.cv[data-tpl="grotesk"] .s__h > span::after { content: "."; color: var(--accent); }
.cv[data-tpl="grotesk"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="grotesk"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="grotesk"] .lv__meter { display: none; }
.cv[data-tpl="grotesk"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="grotesk"] .tg { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.cv[data-tpl="grotesk"] .tg li {
  border: 1px solid var(--doc-line); border-radius: 999px;
  padding: 2px 11px; font-size: calc(var(--fs) * .86);
}

/* ==========================================================================
   KORT           formspråk: Kreativ        layout: band
   Mjuka kortytor: huvudet som rundat pastellkort, varje post ett eget tonat
   kort med datumet som vit pill. All färg genom --accent-soft — ser mest
   formgiven ut i biblioteket men är nästan gratis i bläck.
   ========================================================================== */

.cv[data-tpl="kort"] {
  --pad-x: 48px;
  --tpl-font: "Nunito Sans", sans-serif;
}
.cv[data-tpl="kort"] .cv-head {
  margin: 20px 20px 0;
  padding: 26px 30px;
  background: var(--accent-soft);
  border-radius: 20px;
  align-items: center;
}
.cv[data-tpl="kort"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 calc(var(--fs) * .38) #fff; }
.cv[data-tpl="kort"] .cv-name { color: var(--accent); font-weight: 800; font-size: calc(var(--fs) * 2.1); letter-spacing: -.015em; }
.cv[data-tpl="kort"] .cv-role { color: var(--doc-mut); font-weight: 700; }
.cv[data-tpl="kort"] .s__h { display: flex; align-items: center; gap: 9px; font-size: calc(var(--fs) * .95); font-weight: 800; color: var(--doc-ink); }
.cv[data-tpl="kort"] .s__h::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
/* posterna är redan break-inside: avoid — korten bryter aldrig itu */
.cv[data-tpl="kort"] .e {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border-radius: 14px; padding: 12px 16px;
}
.cv[data-tpl="kort"] .s__b > .rt {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border-radius: 14px; padding: 12px 16px; margin-top: 0; break-inside: avoid;
}
.cv[data-tpl="kort"] .e__row { align-items: flex-start; }
.cv[data-tpl="kort"] .e__date {
  background: #fff; border-radius: 999px; padding: 2px 10px;
  font-size: calc(var(--fs) * .82);
}
.cv[data-tpl="kort"] .e__meta { font-weight: 600; }
.cv[data-tpl="kort"] .lv__meter i { border-radius: 99px; }
.cv[data-tpl="kort"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="kort"] .tg li {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border-radius: 999px; padding: 3px 12px;
  font-size: calc(var(--fs) * .88); font-weight: 600;
}

/* ==========================================================================
   VERKSTAD        formspråk: Nordiskt       layout: single
   Tung rubrik, raka kanter och stadiga taggar. För bygg, transport, industri
   och lager — robust utan att bli grov. Enspaltig text som ATS läser rent.
   ========================================================================== */

.cv[data-tpl="verkstad"] {
  --doc-ink: #1A1B1D;
  --doc-mut: #5C5E63;
  --doc-line: #D9DADE;
  --pad-x: 52px; --pad-y: 46px;
  --tpl-font: "Source Sans 3", sans-serif;
}
/* Linjen under huvudet (accent 84 px + bläck) är en BAKGRUND på huvudet,
   inte ett absolut ::after: position: relative på huvudet la hela huvudet i
   ett senare målarlager, och i PDF:ens textström kom namnet och körkortet
   EFTER hela historiken (ATS-passet 2/9, Verkstad är ATS-märkt). */
.cv[data-tpl="verkstad"] .cv-head {
  align-items: center; padding-bottom: 18px;
  background-image: linear-gradient(to right, var(--accent) 0 84px, var(--doc-ink) 84px 100%);
  background-repeat: no-repeat; background-size: calc(100% - var(--pad-x) * 2) 5px;
  background-position: var(--pad-x) 100%;
}
.cv[data-tpl="verkstad"] .cv-photo {
  order: 2; margin-left: auto; border-radius: 4px;
  width: calc(var(--fs) * 6.6 * var(--fotoskala, 1));
  height: calc(var(--fs) * 6.6 * var(--fotoskala, 1));
}
.cv[data-tpl="verkstad"] .cv-name {
  font-weight: 800; text-transform: uppercase; letter-spacing: .015em;
  font-size: calc(var(--fs) * 2.05);
}
.cv[data-tpl="verkstad"] .cv-role {
  margin-top: 6px; color: var(--accent);
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(var(--fs) * .84);
}
.cv[data-tpl="verkstad"] .ct--inline { margin-top: 10px; }
.cv[data-tpl="verkstad"] .cv-main { --kol-gap: calc(var(--gap) * 1.05); }
.cv[data-tpl="verkstad"] .s__h {
  display: flex; align-items: center; gap: 10px;
  color: var(--doc-ink); font-weight: 800;
  font-size: calc(var(--fs) * .86); letter-spacing: .1em; text-transform: uppercase;
}
.cv[data-tpl="verkstad"] .s__h::before {
  content: ""; flex: none;
  width: calc(var(--fs) * .74); height: calc(var(--fs) * .74);
  background: var(--accent);
}
.cv[data-tpl="verkstad"] .s__h::after { content: ""; flex: 1; border-top: 2px solid var(--doc-line); }
.cv[data-tpl="verkstad"] .e__title { font-size: calc(var(--fs) * 1.02); }
.cv[data-tpl="verkstad"] .e__meta { color: var(--doc-ink); font-weight: 600; }
.cv[data-tpl="verkstad"] .e__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.cv[data-tpl="verkstad"] .lv__meter i { width: calc(var(--fs) * .6); height: calc(var(--fs) * .46); border-radius: 1px; background: var(--doc-line); }
.cv[data-tpl="verkstad"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="verkstad"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="verkstad"] .tg li {
  border: 1.5px solid var(--doc-ink); border-radius: 3px;
  padding: 2px 10px; font-weight: 600; font-size: calc(var(--fs) * .88);
}

/* ==========================================================================
   OMTANKE         formspråk: Talea          layout: sideL
   Antikva i namnet, mjuk tonad spalt och runda punktmätare. Varm och
   förtroendeingivande — för vård, omsorg, förskola och service.
   ========================================================================== */

.cv[data-tpl="omtanke"] {
  --side-w: 34%;
  --pad-x: 50px;
  --tpl-font: "Source Sans 3", sans-serif;
  background-color: #FDFCFA;
  background-image: linear-gradient(to right, var(--accent-soft) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="omtanke"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr;
  padding: calc(var(--pad-y) * 1.05) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="omtanke"] .cv-photo { grid-column: 1; justify-self: center; }
.cv[data-tpl="omtanke"][data-fotoram="standard"] .cv-photo {
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--accent-line);
}
.cv[data-tpl="omtanke"] .cv-head__text { grid-column: 2; padding: 0 var(--pad-x) 0 30px; }
.cv[data-tpl="omtanke"] .cv-name {
  font-family: "Lora", Georgia, serif; font-weight: 500;
  font-size: calc(var(--fs) * 2.25); letter-spacing: -.01em;
}
.cv[data-tpl="omtanke"] .cv-role {
  font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: calc(var(--fs) * 1.1);
}
.cv[data-tpl="omtanke"] .cv-side { padding-top: calc(var(--gap) * 1.5); }
.cv[data-tpl="omtanke"] .cv-main { padding-top: calc(var(--gap) * 1.5); }
.cv[data-tpl="omtanke"] .s__h {
  font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: calc(var(--fs) * 1.12); color: var(--accent);
}
.cv[data-tpl="omtanke"] .s__h::after {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 99px;
  background: var(--accent-line); margin-top: 5px;
}
.cv[data-tpl="omtanke"] .e__title { font-weight: 700; }
.cv[data-tpl="omtanke"] .e__meta { color: var(--doc-mut); font-style: italic; }
.cv[data-tpl="omtanke"] .lv { gap: 8px; }
/* Sidospalten (194px) rymmer inte namn + prickar + fast ordkolumn på en
   rad — staplad radlayout som i kolumn. */
.cv[data-tpl="omtanke"] .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="omtanke"] .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="omtanke"] .lv__meter i { width: calc(var(--fs) * .44); height: calc(var(--fs) * .44); border-radius: 50%; background: var(--accent-line); }
.cv[data-tpl="omtanke"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="omtanke"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="omtanke"] .tg li {
  background: #fff; border: 1px solid var(--accent-line); border-radius: 999px;
  padding: 3px 12px; font-size: calc(var(--fs) * .88);
}
/* Brev: sidokolumnen finns inte — gradienten släcks och huvudet flyttas hem.
   Ligger här (efter mallens egna regler) så att ordningen avgör rätt. */
.cv[data-doc="letter"][data-tpl="omtanke"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="omtanke"] .cv-head { display: flex; padding: var(--pad-y) var(--pad-x) 0; }
.cv[data-doc="letter"][data-tpl="omtanke"] .cv-head__text { padding: 0; }

/* ==========================================================================
   GAVEL        formspråk: Talea          layout: sideR
   Mättad färgspalt till höger — den enda färgspalten som låter brödtexten
   börja vid vänstermarginalen. Fotot centreras i spalten, som i Sidopanel.
   ========================================================================== */

.cv[data-tpl="gavel"] {
  --side-w: 32%;
  background-image: linear-gradient(to right, transparent 0 68%, var(--accent) 68% 100%);
}
/* Huvudet är ett rutnät där andra kolumnen ÄR färgspalten: fotot centreras i
   den oavsett storleksreglaget. Utan foto är kolumnen tom och ingenting
   ändras — den mättade ytan bär ändå. */
.cv[data-tpl="gavel"] .cv-head {
  display: grid; grid-template-columns: 1fr 32%;
  padding: var(--pad-y) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="gavel"] .cv-head__text { grid-area: 1 / 1; padding: 0 28px 0 var(--pad-x); }
.cv[data-tpl="gavel"] .cv-photo {
  grid-area: 1 / 2; justify-self: center;
  border: 3px solid rgba(255,255,255,.35); background-color: rgba(255,255,255,.12);
}
.cv[data-tpl="gavel"] .cv-name { letter-spacing: -.02em; }
.cv[data-tpl="gavel"] .cv-role { font-weight: 600; }
.cv[data-tpl="gavel"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.6); }
.cv[data-tpl="gavel"] .cv-side .s__h {
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 5px;
  font-size: calc(var(--fs) * .8); letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-tpl="gavel"] .cv-side .ct li,
.cv[data-tpl="gavel"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="gavel"] .cv-side .ci { color: #fff; }
/* mätarna får inte plats bredvid klartexten i en 32 %-spalt — orden räcker */
.cv[data-tpl="gavel"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="gavel"] .cv-side .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="gavel"] .cv-side .lv__row::after { color: rgba(255,255,255,.75); }
/* flyttade sektioner med accentfärgad meta försvinner annars på färgad botten */
.cv[data-tpl="gavel"] .cv-side .e__meta { color: rgba(255,255,255,.88); }
.cv[data-tpl="gavel"] .cv-side .e__date { color: rgba(255,255,255,.72); }
.cv[data-tpl="gavel"] .cv-main .s__h {
  font-size: calc(var(--fs) * .82); letter-spacing: .12em; text-transform: uppercase;
}
/* strecket i andrarösten (juryn 3/9) — som Kolumn */
.cv[data-tpl="gavel"] .cv-main .s__h::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 99px;
  background: var(--accent2, #C98A3C); margin-top: 6px;
}
/* brev: ingen färgspalt att centrera fotot i — huvudet flyttar hem.
   Släck spalten här också: blocket ligger efter brevsektionen i filen, så
   den generella .cv[data-doc="letter"]-regeln vinner inte på ordning. */
.cv[data-doc="letter"][data-tpl="gavel"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="gavel"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="gavel"] .cv-photo {
  border-color: var(--accent-line); background-color: #EBE7ED;
}

/* ==========================================================================
   SAND         formspråk: Trycksak       layout: band
   Sandfärgat huvud och namnet i antikva. Den varma neutrala ytan bär, och
   accentfärgen understryker — bra med Ockra och Tegel, lugn med Midnatt.
   ========================================================================== */

.cv[data-tpl="sand"] {
  --doc-ink: #211C15;
  --doc-mut: #6E655C;
  --doc-line: #DCD5CA;
  --pad-x: 58px; --pad-y: 52px;
  background-color: #FBF9F4;
}
.cv[data-tpl="sand"] .cv-head {
  background: #F1EAD9;
  border-bottom: 3px solid var(--accent);
  /* .75/.6 i stället för .85/.7: standardinnehållet stack annars 10px
     utanför A4:an och krediten klipptes i förhandsarket. */
  padding: calc(var(--pad-y) * .75) var(--pad-x) calc(var(--pad-y) * .6);
  align-items: center; gap: 26px;
}
.cv[data-tpl="sand"] .cv-name {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 500; font-size: calc(var(--fs) * 2.5); letter-spacing: -.015em;
}
.cv[data-tpl="sand"] .cv-role {
  margin-top: 7px; color: var(--accent);
  font-size: calc(var(--fs) * .8); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.cv[data-tpl="sand"] .cv-photo { border: 3px solid #fff; background-color: #E7DFCC; }
.cv[data-tpl="sand"] .ci { display: none; }
.cv[data-tpl="sand"] .ct--inline { gap: 3px 20px; }
.cv[data-tpl="sand"] .ct--inline li { color: #5D5546; }
.cv[data-tpl="sand"] .cv-main { --kol-gap: calc(var(--gap) * 1.15); }
.cv[data-tpl="sand"] .s__h {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600; font-size: calc(var(--fs) * 1.06);
  color: var(--doc-ink); margin-bottom: 10px;
}
.cv[data-tpl="sand"] .s__h::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--accent); margin-top: 5px;
}
.cv[data-tpl="sand"] .e__meta { color: var(--doc-mut); font-style: italic; }
.cv[data-tpl="sand"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="sand"] .lv__meter { display: none; }
.cv[data-tpl="sand"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="sand"] .lv__row::after {
  content: attr(data-niva); font-style: italic;
  color: var(--doc-mut); font-size: calc(var(--fs) * .88);
}
.cv[data-tpl="sand"] .tg { display: flex; flex-wrap: wrap; gap: 3px 18px; }

/* ==========================================================================
   NYA 14/8 — tio ur konkurrentdykningen. Greppen branschens storsäljare
   bygger på (resume.io-bibliotekets formspråk), ritade från grunden på vår
   DOM. Allt färgat går genom var(--accent)/-soft/-line.
   ========================================================================== */

/* ==========================================================================
   29 — UTSIKT       formspråk: Klassiker      layout: sideR
   Vitt huvud över hela bredden; den mörka högerspalten börjar först under
   namnet och löper till sidfoten. Asymmetrin ger namnet hela scenen.
   ========================================================================== */

.cv[data-tpl="utsikt"] {
  --side-w: 31%;
  --tpl-font: "Source Sans 3", sans-serif;
}
.cv[data-tpl="utsikt"] .cv-head { align-items: center; padding-bottom: 6px; }
.cv[data-tpl="utsikt"] .cv-name { font-weight: 700; font-size: calc(var(--fs) * 2.5); letter-spacing: -.02em; }
.cv[data-tpl="utsikt"] .cv-role { color: var(--doc-mut); font-weight: 600; }
/* Spalten målas på kolumnraden, inte på sidan — färgen börjar exakt där
   kolumnerna börjar och upprepas över alla utskrivna sidor. */
.cv[data-tpl="utsikt"] .cv-cols {
  flex: 1;
  background-image: linear-gradient(to left, var(--accent) 0 31%, transparent 31% 100%);
}
.cv[data-tpl="utsikt"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.3); }
.cv[data-tpl="utsikt"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * .82); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 6px;
}
.cv[data-tpl="utsikt"] .cv-side .ct li,
.cv[data-tpl="utsikt"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="utsikt"] .cv-side .ci { color: #fff; }
.cv[data-tpl="utsikt"] .cv-side .lv__meter i { background: rgba(255,255,255,.3); }
.cv[data-tpl="utsikt"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="utsikt"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); justify-self: end; }
/* Som i Kolumn: raden ryms inte i sidospalten — namnet över, mätare + nivå under. */
.cv[data-tpl="utsikt"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="utsikt"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="utsikt"] .cv-main .s__h {
  font-size: calc(var(--fs) * .82); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--doc-ink);
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px;
}
.cv[data-tpl="utsikt"] .e__date { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   30 — FYR          formspråk: Klassiker      layout: sideL
   Färgblocket bakom namnet börjar en bit in på sidan och löper ut i höger-
   kanten; fotot står i sömmen mellan vitt och färg och binder ihop ytorna.
   ========================================================================== */

.cv[data-tpl="fyr"] {
  --side-w: 32%;
  --tpl-font: "Inter", sans-serif;
}
.cv[data-tpl="fyr"] .cv-head {
  display: grid; grid-template-columns: 32% 1fr; align-items: center;
  gap: 0; padding: 38px 0 0;
}
.cv[data-tpl="fyr"] .cv-head__text {
  grid-column: 2;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  padding: 30px var(--pad-x) 30px 64px;
}
.cv[data-tpl="fyr"] .cv-photo {
  grid-column: 1; grid-row: 1; justify-self: end; margin-right: -44px;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 5px #fff;
}
.cv[data-tpl="fyr"] .cv-name { color: #fff; font-weight: 700; font-size: calc(var(--fs) * 2.1); }
.cv[data-tpl="fyr"] .cv-role { color: rgba(255,255,255,.85); font-weight: 600; }
.cv[data-tpl="fyr"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
.cv[data-tpl="fyr"] .cv-side .s__h { border-bottom: 1px solid var(--accent-line); padding-bottom: 6px; }
/* tunna stapelmätare, samma mekanik som Professionell */
.cv[data-tpl="fyr"] .lv { gap: 11px; }
.cv[data-tpl="fyr"] .lv__row { grid-template-columns: 1fr auto; gap: 5px 10px; }
.cv[data-tpl="fyr"] .lv__meter {
  grid-column: 1 / -1; display: block; height: 4px; border-radius: 99px;
  background: var(--accent-soft); position: relative; overflow: hidden;
}
.cv[data-tpl="fyr"] .lv__meter i {
  position: absolute; top: 0; bottom: 0; left: 0; height: auto;
  border-radius: 99px; background: none;
}
.cv[data-tpl="fyr"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="fyr"] .lv__meter i:nth-child(1).is-on { width: 20%; }
.cv[data-tpl="fyr"] .lv__meter i:nth-child(2).is-on { width: 40%; }
.cv[data-tpl="fyr"] .lv__meter i:nth-child(3).is-on { width: 60%; }
.cv[data-tpl="fyr"] .lv__meter i:nth-child(4).is-on { width: 80%; }
.cv[data-tpl="fyr"] .lv__meter i:nth-child(5).is-on { width: 100%; }
.cv[data-tpl="fyr"] .e__date { color: var(--doc-mut); font-weight: 600; }

/* ==========================================================================
   31 — RELIEF       formspråk: Klassiker      layout: sideL
   Namnet i display-storlek och varje rolltitel som en överstrykning i färg —
   ögat landar på titlarna innan det läser något annat. Ljusgrå spalt.
   ========================================================================== */

.cv[data-tpl="relief"] {
  --side-w: 30%;
  --tpl-font: "Inter", sans-serif;
  background-image: linear-gradient(to right, #F2F1F4 0 30%, transparent 30% 100%);
}
.cv[data-tpl="relief"] .cv-head { padding-bottom: 10px; }
.cv[data-tpl="relief"] .cv-name {
  font-weight: 800; font-size: calc(var(--fs) * 2.9);
  line-height: 1.02; letter-spacing: -.025em;
}
.cv[data-tpl="relief"] .cv-role { color: var(--doc-mut); font-weight: 600; margin-top: 7px; }
.cv[data-tpl="relief"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--doc-ink);
}
.cv[data-tpl="relief"] .e__title {
  display: inline; padding: 1px 7px 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cv[data-tpl="relief"] .e__meta { color: var(--doc-ink); font-weight: 600; margin-top: 4px; }
.cv[data-tpl="relief"] .e__date { font-weight: 700; color: var(--doc-mut); }
/* mätarna viker för nivåordet — orden läses, dekoren behövs inte här */
.cv[data-tpl="relief"] .lv__meter { display: none; }
.cv[data-tpl="relief"] .lv__row { grid-template-columns: 1fr auto; }

/* ==========================================================================
   32 — ATELJÉ       formspråk: Klassiker      layout: sideL
   Fotot fyller sidokolumnens topp kant i kant, resten av spalten är mörk.
   Mallen för den som vill låta bilden bära — och som har en bra bild.
   ========================================================================== */

.cv[data-tpl="atelje"] {
  --side-w: 33%;
  --tpl-font: "Nunito Sans", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 33%, transparent 33% 100%);
}
.cv[data-tpl="atelje"] .cv-head {
  display: grid; grid-template-columns: 33% 1fr; gap: 0; padding: 0;
  align-items: center;
}
/* Kant i kant: bilden är spaltens topp, oavsett vald fotoform. */
.cv[data-tpl="atelje"] .cv-photo {
  grid-column: 1; grid-row: 1; justify-self: stretch; align-self: start;
  width: 100%; height: calc(var(--fs) * 15 * var(--fotoskala, 1));
  margin: 0; border-radius: 0 !important;
}
.cv[data-tpl="atelje"] .cv-head__text { grid-column: 2; padding: var(--pad-y) var(--pad-x) 12px 30px; }
.cv[data-tpl="atelje"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="atelje"] .cv-role { color: var(--accent); font-weight: 700; }
.cv[data-tpl="atelje"] .cv-side { color: #fff; }
.cv[data-tpl="atelje"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * .95); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 6px;
}
.cv[data-tpl="atelje"] .cv-side .ct li,
.cv[data-tpl="atelje"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="atelje"] .cv-side .ci { color: #fff; }
.cv[data-tpl="atelje"] .cv-side .lv__meter i { background: rgba(255,255,255,.3); }
.cv[data-tpl="atelje"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="atelje"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); justify-self: end; }
/* Som i Kolumn: raden ryms inte i sidospalten — namnet över, mätare + nivå under. */
.cv[data-tpl="atelje"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="atelje"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="atelje"] .cv-main .s__h {
  font-size: calc(var(--fs) * 1.25); font-weight: 800; color: var(--accent);
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px;
}

/* ==========================================================================
   34 — HORISONT     formspråk: Kreativ        layout: band
   Tre vågräta zoner: mörkt huvud med kontakterna, tonad profilzon i full
   bredd, vit historik. Sidan läses uppifrån och ned — som en annons, inte
   som en blankett.
   ========================================================================== */

.cv[data-tpl="horisont"] { --tpl-font: "Manrope", sans-serif; }
.cv[data-tpl="horisont"] .cv-head {
  background-image: linear-gradient(var(--doc-ink), var(--doc-ink));
  color: #fff;
  padding: calc(var(--pad-y) * .7) var(--pad-x);
  align-items: center;
}
.cv[data-tpl="horisont"] .cv-name { color: #fff; font-weight: 800; font-size: calc(var(--fs) * 2.2); }
.cv[data-tpl="horisont"] .cv-role { color: rgba(255,255,255,.8); font-weight: 700; }
.cv[data-tpl="horisont"] .cv-photo { border: 3px solid rgba(255,255,255,.8); }
.cv[data-tpl="horisont"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="horisont"] .ct--inline .ci { color: rgba(255,255,255,.65); }
.cv[data-tpl="horisont"] .cv-main { padding-top: 0; }
/* mittzonen i accentens egen ljusa ton — mörkt huvud, tonad profil, accent i
   rubrikerna: TVÅ röster. Andratonen (2/9: 12 % av --accent2) gav med Ockra
   en rosalila platta mellan svart huvud och ockra rubriker — juryn 3/9:
   "enda mallen där andratonen gjorde helheten sämre". Alla tre tonerna
   (soft, 12 % accent2, juryns 6 % + 6 %) provades mot alla åtta
   palettfärgerna (steg3/jury-fix/horisont-8x3.png): soft-tonen är den
   enda som hör ihop med rubrikerna i samtliga åtta — de andra ger en
   främmande pastell (persika mot Skiffer, sand mot Furu, rosa mot Ockra)
   eller ett gråslam. Horisont är därför enfärgad igen. */
.cv[data-tpl="horisont"] .s--profile {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  margin: 0 calc(0px - var(--pad-x));
  padding: 24px var(--pad-x) 26px;
}
.cv[data-tpl="horisont"] .s--profile .rt { font-size: calc(var(--fs) * 1.1); line-height: 1.55; }
.cv[data-tpl="horisont"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.cv[data-tpl="horisont"] .rt li::marker { color: var(--accent); }
.cv[data-tpl="horisont"] .e__date { font-weight: 700; color: var(--accent); }

/* ==========================================================================
   35 — SIGNATUR     formspråk: Kreativ        layout: band
   Namnet i versal display-storlek över hela bredden och rubrikerna som
   fyllda etiketter. Med Bläck som signaturfärg är den svartvit och slår
   ändå — färgväljaren gör den till affisch.
   ========================================================================== */

.cv[data-tpl="signatur"] { --tpl-font: "Manrope", sans-serif; }
.cv[data-tpl="signatur"] .cv-head { align-items: center; }
.cv[data-tpl="signatur"] .cv-photo { order: 2; margin-left: auto; }
.cv[data-tpl="signatur"] .cv-head__text { border-bottom: 3px solid var(--doc-ink); padding-bottom: 20px; }
.cv[data-tpl="signatur"] .cv-name {
  font-weight: 800; font-size: calc(var(--fs) * 3); line-height: .98;
  text-transform: uppercase; letter-spacing: -.02em;
}
.cv[data-tpl="signatur"] .cv-role {
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: calc(var(--fs) * .82); color: var(--doc-mut); margin-top: 8px;
}
.cv[data-tpl="signatur"] .s__h { font-size: calc(var(--fs) * .78); }
.cv[data-tpl="signatur"] .s__h span {
  display: inline-block;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; padding: 3px 10px 4px;
  text-transform: uppercase; letter-spacing: .13em; font-weight: 800;
}
.cv[data-tpl="signatur"] .e__title { font-weight: 800; }
.cv[data-tpl="signatur"] .e__date { font-weight: 700; }
/* tunna stapelmätare i två spalter — snabba att skumma */
.cv[data-tpl="signatur"] .lv { grid-template-columns: 1fr 1fr; gap: 9px 26px; }
.cv[data-tpl="signatur"] .lv__row { grid-template-columns: 1fr auto; gap: 4px 10px; }
.cv[data-tpl="signatur"] .lv__meter {
  grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px;
  background: var(--accent-soft); position: relative; overflow: hidden;
}
.cv[data-tpl="signatur"] .lv__meter i {
  position: absolute; top: 0; bottom: 0; left: 0; height: auto;
  border-radius: 99px; background: none;
}
.cv[data-tpl="signatur"] .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="signatur"] .lv__meter i:nth-child(1).is-on { width: 20%; }
.cv[data-tpl="signatur"] .lv__meter i:nth-child(2).is-on { width: 40%; }
.cv[data-tpl="signatur"] .lv__meter i:nth-child(3).is-on { width: 60%; }
.cv[data-tpl="signatur"] .lv__meter i:nth-child(4).is-on { width: 80%; }
.cv[data-tpl="signatur"] .lv__meter i:nth-child(5).is-on { width: 100%; }

/* ==========================================================================
   36 — SIGILL       formspråk: Trycksak       layout: single
   Centrerad antikva: namnet i mitten, hårfina linjer som flankerar varje
   rubrik, färdigheterna som konturchips. Enspaltig och linjär — läses av
   ATS trots elegansen.
   ========================================================================== */

.cv[data-tpl="sigill"] {
  --pad-x: 56px;
  --doc-line: #D9D4CE;
  --tpl-font: "Lora", serif;
}
.cv[data-tpl="sigill"] .cv-head { display: block; text-align: center; }
.cv[data-tpl="sigill"] .cv-photo { margin: 0 auto 16px; }
.cv[data-tpl="sigill"] .cv-name { font-weight: 500; font-size: calc(var(--fs) * 2.3); letter-spacing: .01em; }
.cv[data-tpl="sigill"] .cv-role {
  color: var(--accent); font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; font-size: calc(var(--fs) * .78); margin-top: 8px;
}
.cv[data-tpl="sigill"] .ct--inline { justify-content: center; }
.cv[data-tpl="sigill"] .ct--detaljer { justify-content: center; }
.cv[data-tpl="sigill"] .ci { color: var(--doc-mut); }
.cv[data-tpl="sigill"] .s__h {
  display: flex; align-items: center; gap: 16px;
  font-size: calc(var(--fs) * .8); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--doc-ink);
}
.cv[data-tpl="sigill"] .s__h::before,
.cv[data-tpl="sigill"] .s__h::after { content: ""; flex: 1; border-top: 1px solid var(--doc-line); }
.cv[data-tpl="sigill"] .e__meta { font-style: italic; color: var(--doc-mut); }
.cv[data-tpl="sigill"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="sigill"] .tg { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.cv[data-tpl="sigill"] .tg li {
  border: 1px solid var(--doc-line); border-radius: 2px;
  padding: 2px 12px; font-size: calc(var(--fs) * .88);
}

/* ==========================================================================
   37 — BÅRD         formspråk: Trycksak       layout: single
   En mättad bård runt hela sidan och satsytan som ett vitt blad innanför.
   Som Ram, men med färgen som röst i stället för viskning.
   ========================================================================== */

/* Som i Ram: bården är padding på sidan, inte marginal på innehållet. */
.cv[data-tpl="bard"] {
  --pad-x: 56px; --pad-y: 40px;
  padding: 18px;
  --tpl-font: "IBM Plex Serif", serif;
  background-image: linear-gradient(var(--accent), var(--accent));
}
.cv[data-tpl="bard"] .cv-inner { background: #fff; min-height: 100%; }
/* Trimmat huvud och avslut: med de gamla måtten stack innehållet ~28px
   utanför A4:an och bårdens nederkant klipptes bort i förhandsvisningen. */
.cv[data-tpl="bard"] .cv-head { display: block; text-align: center; padding-top: calc(var(--pad-y) * .6); }
.cv[data-tpl="bard"] .cv-photo { margin: 0 auto 10px; }
.cv[data-tpl="bard"] .cv-name { font-weight: 600; font-size: calc(var(--fs) * 2.2); }
.cv[data-tpl="bard"] .cv-role {
  color: var(--accent); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; font-size: calc(var(--fs) * .8); margin-top: 6px;
}
.cv[data-tpl="bard"] .ct--inline { justify-content: center; }
.cv[data-tpl="bard"] .ct--detaljer { justify-content: center; }
.cv[data-tpl="bard"] .s__h {
  font-size: calc(var(--fs) * .82); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="bard"] .cv-main { padding-bottom: calc(var(--pad-y) * .5); }

/* ==========================================================================
   38 — PÄRLA        formspråk: Nordiskt       layout: timeline
   Tidslinjens släkting med räls och ringar: varje post är en pärla på
   linjen. Linjär enspalt — läses av ATS lika rent som Tidslinje.
   ========================================================================== */

.cv[data-tpl="parla"] { --tpl-font: "Inter", sans-serif; }
.cv[data-tpl="parla"] .cv-head { padding-bottom: 16px; }
.cv[data-tpl="parla"] .cv-head__text { border-bottom: 1px solid var(--doc-line); padding-bottom: 16px; }
.cv[data-tpl="parla"] .cv-name { font-weight: 700; }
.cv[data-tpl="parla"] .cv-role { color: var(--accent); font-weight: 600; }
.cv[data-tpl="parla"] .s__h {
  display: flex; align-items: center; gap: 8px;
  font-size: calc(var(--fs) * .78); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-tpl="parla"] .s__h::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.cv[data-tpl="parla"] .e { position: relative; padding-left: 10em; }
.cv[data-tpl="parla"] .e__row { display: block; }
.cv[data-tpl="parla"] .e__date {
  position: absolute; left: 0; top: 1px; width: 8.5em;
  text-align: left; white-space: normal;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--doc-ink);
}
.cv[data-tpl="parla"] .e::before {
  content: ""; position: absolute; left: 9em; top: 6px; bottom: -8px;
  border-left: 2px solid var(--accent-line);
}
.cv[data-tpl="parla"] .e::after {
  content: ""; position: absolute; left: calc(9em - 4.5px); top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
}
.cv[data-tpl="parla"] .s--profile .e,
.cv[data-tpl="parla"] .s--skills .lv,
.cv[data-tpl="parla"] .s--languages .lv { padding-left: 0; }
.cv[data-tpl="parla"] .s--profile .e::before,
.cv[data-tpl="parla"] .s--profile .e::after { display: none; }

/* ==========================================================================
   39 — VÅG          formspråk: Klassiker      layout: sideL
   Välvt färghuvud över hela bredden och fotot i tjock vit ring som hänger
   över sömmen. Ljusgrå spalt under. Formen ur Mahmouds skärmbilder 14/8.
   ========================================================================== */

.cv[data-tpl="vag"] {
  --side-w: 33%;
  --tpl-font: "Nunito Sans", sans-serif;
  background-image: linear-gradient(to right, #F2F1F4 0 33%, transparent 33% 100%);
}
.cv[data-tpl="vag"] .cv-head {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 42px var(--pad-x) 0;
  background-image: linear-gradient(var(--accent), var(--accent));
  border-radius: 0 0 48% 48% / 0 0 60px 60px;
}
.cv[data-tpl="vag"] .cv-head__text { flex: none; width: 100%; text-align: center; padding-bottom: 26px; }
.cv[data-tpl="vag"] .cv-name {
  color: #fff; font-weight: 700; font-size: calc(var(--fs) * 2);
  letter-spacing: .06em; text-transform: uppercase;
}
.cv[data-tpl="vag"] .cv-role { color: rgba(255,255,255,.85); font-weight: 600; }
.cv[data-tpl="vag"] .ct--inline { justify-content: center; }
.cv[data-tpl="vag"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="vag"] .ct--inline .ci { color: rgba(255,255,255,.65); }
/* Fotot hänger halvvägs ut ur det välvda huvudet, i tjock vit ring. */
.cv[data-tpl="vag"] .cv-photo { order: 2; margin: 2px 0 calc(var(--fs) * -3.6); }
.cv[data-tpl="vag"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 calc(var(--fs) * .45) #fff; }
.cv[data-tpl="vag"] .cv-head:has(.cv-photo) + .cv-cols { padding-top: calc(var(--fs) * 3.2); }
.cv[data-tpl="vag"] .s__h {
  font-size: calc(var(--fs) * .95); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="vag"] .cv-main .s__h { font-size: calc(var(--fs) * 1.1); }
.cv[data-tpl="vag"] .lv__meter i { width: calc(var(--fs) * .46); height: calc(var(--fs) * .46); border-radius: 50%; }
/* Som i Kolumn: raden ryms inte i sidospalten — namnet över, mätare + nivå under. */
.cv[data-tpl="vag"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="vag"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="vag"] .cv-side .lv__row::after { justify-self: end; }
.cv[data-tpl="vag"] .e__date { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   40 — KRETS        formspråk: Klassiker      layout: sideL
   Rubrikerna som färgplattor med ikon, radade på en lodrät räls genom hela
   innehållsspalten. Mättad sidospalt. Formen ur Mahmouds skärmbilder 14/8.
   ========================================================================== */

.cv[data-tpl="krets"] {
  --side-w: 32%;
  --tpl-font: "Inter", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 32%, transparent 32% 100%);
}
.cv[data-tpl="krets"] .cv-head {
  display: grid; grid-template-columns: 32% 1fr; gap: 0; padding: 0;
  align-items: center;
}
.cv[data-tpl="krets"] .cv-photo { grid-area: 1 / 1; justify-self: center; margin-top: 40px; }
.cv[data-tpl="krets"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
.cv[data-tpl="krets"] .cv-head__text { grid-area: 1 / 2; padding: var(--pad-y) var(--pad-x) 8px 34px; }
.cv[data-tpl="krets"] .cv-name { font-weight: 700; font-size: calc(var(--fs) * 2.6); line-height: 1.05; }
.cv[data-tpl="krets"] .cv-role { color: var(--doc-mut); font-weight: 600; margin-top: 6px; }
.cv[data-tpl="krets"] .cv-side { color: #fff; }
.cv[data-tpl="krets"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * 1.1); font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,.9); padding-bottom: 7px;
}
.cv[data-tpl="krets"] .cv-side .ct li,
.cv[data-tpl="krets"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="krets"] .cv-side .ci { color: #fff; }
.cv[data-tpl="krets"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="krets"] .cv-side .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="krets"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); }
.cv[data-tpl="krets"] .cv-side .lv__name {
  border-bottom: 2px solid #fff; padding-bottom: 4px;
}
/* Rälsen: en lodrät linje genom innehållet, plattorna sitter på den. */
.cv[data-tpl="krets"] .cv-main .s { position: relative; padding-left: calc(var(--fs) * 3.4); }
.cv[data-tpl="krets"] .cv-main .s::before {
  content: ""; position: absolute; top: 4px; bottom: calc(-1 * var(--gap));
  left: calc(var(--fs) * 1.2 - 1.5px);
  border-left: 3px solid var(--accent);
}
.cv[data-tpl="krets"] .cv-main .s:last-child::before { bottom: 0; }
.cv[data-tpl="krets"] .cv-main .s__h { position: static; display: flex; align-items: center; font-size: calc(var(--fs) * 1.02); }
.cv[data-tpl="krets"] .cv-main .s__h::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(var(--fs) * 2.4); height: calc(var(--fs) * 2.4);
  background-color: var(--accent); border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: 60%; background-position: center; background-repeat: no-repeat;
}
.cv[data-tpl="krets"] .cv-main .s--profile .s__h::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7.2' r='2.8'/%3E%3Cpath d='M4.5 16c1.3-3 3.4-4.2 5.5-4.2s4.2 1.2 5.5 4.2'/%3E%3C/svg%3E");
}
.cv[data-tpl="krets"] .cv-main .s--experience .s__h::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='9' rx='1'/%3E%3Cpath d='M8 7V5.5A1.5 1.5 0 0 1 9.5 4h1A1.5 1.5 0 0 1 12 5.5V7'/%3E%3C/svg%3E");
}
.cv[data-tpl="krets"] .cv-main .s--education .s__h::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4 2.5 7.5 10 11l7.5-3.5z'/%3E%3Cpath d='M6 9.5V13c2.5 1.6 5.5 1.6 8 0V9.5'/%3E%3C/svg%3E");
}
.cv[data-tpl="krets"] .cv-main .s__h span {
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; padding: 5px 14px 6px; font-weight: 700;
}
.cv[data-tpl="krets"] .e__title { font-weight: 700; }
.cv[data-tpl="krets"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   41 — KIL          formspråk: Klassiker      layout: sideL
   Mörk spalt och namnet i ett färgat pillerband som kliver över sömmen in
   i innehållet. Formen ur Mahmouds skärmbilder 14/8.
   ========================================================================== */

.cv[data-tpl="kil"] {
  --side-w: 34%;
  --tpl-font: "Manrope", sans-serif;
  /* Spaltmörkret tonas 18 % av andrafärgen (2/9) — pillerbandet är accenten,
     spalten svarar med parets andra ton. Reserven är det gamla nattsvarta. */
  --kil-mork: #17181C;
  --kil-mork: color-mix(in srgb, var(--accent2, #17181C) 18%, #17181C);
  background-image: linear-gradient(to right, var(--kil-mork) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="kil"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr; gap: 0; padding: 0;
  align-items: center;
}
.cv[data-tpl="kil"] .cv-photo { grid-area: 1 / 1; justify-self: center; margin-top: 40px; }
.cv[data-tpl="kil"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 5px rgba(255,255,255,.92); }
.cv[data-tpl="kil"] .cv-head__text {
  grid-area: 1 / 2;
  margin: 44px calc(var(--pad-x) * .5) 0 -34px;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; border-radius: 999px;
  padding: 18px 34px 20px 40px;
}
.cv[data-tpl="kil"] .cv-name { color: #fff; font-weight: 800; font-size: calc(var(--fs) * 2.1); }
.cv[data-tpl="kil"] .cv-role { color: rgba(255,255,255,.85); font-weight: 600; }
.cv[data-tpl="kil"] .cv-side { color: #fff; }
.cv[data-tpl="kil"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * 1.1); font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,.9); padding-bottom: 7px;
}
.cv[data-tpl="kil"] .cv-side .ct li,
.cv[data-tpl="kil"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="kil"] .cv-side .ci { color: #fff; }
.cv[data-tpl="kil"] .cv-side .lv__meter i { background: rgba(255,255,255,.3); }
.cv[data-tpl="kil"] .cv-side .lv__meter i.is-on { background: #fff; }
.cv[data-tpl="kil"] .cv-side .lv__row::after { color: rgba(255,255,255,.8); justify-self: end; }
/* Som i Kolumn: raden ryms inte i sidospalten — namnet över, mätare + nivå under. */
.cv[data-tpl="kil"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="kil"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="kil"] .cv-main .s__h {
  font-size: calc(var(--fs) * 1.15); font-weight: 800; color: var(--doc-ink);
  border-bottom: 2px solid var(--doc-ink); padding-bottom: 5px;
}
.cv[data-tpl="kil"] .e__date { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   42 — STÄV         formspråk: Klassiker      layout: sideL
   Nattmörk spalt vars övre kant skär snett in i sidan, tunt jättenamn och
   färdigheter med ringar. Formen ur Mahmouds skärmbilder 14/8.
   ========================================================================== */

.cv[data-tpl="stav"] {
  --side-w: 36%;
  --tpl-font: "Inter", sans-serif;
  /* Två lager: den snedskurna klacken överst (ritas en gång) och spalten
     (upprepas över utskrivna sidor). */
  background-image:
    linear-gradient(103deg, var(--accent) 0 49.5%, transparent 50% 100%),
    linear-gradient(to right, var(--accent) 0 36%, transparent 36% 100%);
  background-size: 52% 130px, 100% 100%;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-y;
}
.cv[data-tpl="stav"] .cv-head {
  display: grid; grid-template-columns: 36% 1fr; gap: 0; padding: 0;
  align-items: start;
}
.cv[data-tpl="stav"] .cv-photo { grid-area: 1 / 1; justify-self: center; margin-top: 44px; border: 3px solid rgba(255,255,255,.85); }
.cv[data-tpl="stav"] .cv-head__text { grid-area: 1 / 2; padding: 56px var(--pad-x) 0 34px; }
.cv[data-tpl="stav"] .cv-name {
  font-weight: 300; font-size: calc(var(--fs) * 3);
  line-height: 1.04; letter-spacing: -.01em;
}
.cv[data-tpl="stav"] .cv-role { color: var(--doc-ink); font-weight: 500; font-size: calc(var(--fs) * 1.1); margin-top: 4px; }
.cv[data-tpl="stav"] .cv-side { color: #fff; }
/* Linjerna under spaltrubrikerna löper kant i kant, som i förlagan. */
.cv[data-tpl="stav"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * 1.2); font-weight: 600;
  border-bottom: 2px solid rgba(255,255,255,.9); padding-bottom: 8px;
  margin-left: calc(0px - var(--pad-x)); padding-left: var(--pad-x);
  margin-right: -26px; padding-right: 26px;
}
.cv[data-tpl="stav"] .cv-side .ct li,
.cv[data-tpl="stav"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
.cv[data-tpl="stav"] .cv-side .ci { color: #fff; }
.cv[data-tpl="stav"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="stav"] .cv-side .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="stav"] .cv-side .lv__row::after { color: rgba(255,255,255,.75); }
.cv[data-tpl="stav"] .cv-side .lv__name { display: flex; align-items: center; gap: 10px; }
.cv[data-tpl="stav"] .cv-side .lv__name::before {
  content: ""; flex: none;
  width: calc(var(--fs) * .95); height: calc(var(--fs) * .95);
  border: 2px solid #fff; border-radius: 50%;
}
.cv[data-tpl="stav"] .cv-side .tg li { display: flex; align-items: center; gap: 10px; }
.cv[data-tpl="stav"] .cv-side .tg li::before {
  content: ""; flex: none;
  width: calc(var(--fs) * .95); height: calc(var(--fs) * .95);
  border: 2px solid #fff; border-radius: 50%;
}
.cv[data-tpl="stav"] .cv-main .s__h {
  font-size: calc(var(--fs) * 1.3); font-weight: 600; color: var(--doc-ink);
  border-bottom: 2.5px solid var(--doc-ink); padding-bottom: 6px;
}
.cv[data-tpl="stav"] .e__title { font-weight: 700; }
.cv[data-tpl="stav"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   43 — SPETS        formspråk: Klassiker      layout: sideL
   Mörkt huvud över hela bredden som löper ut i en nedåtriktad spets kring
   fotot; sandfärgad spalt under. Formen ur Mahmouds skärmbilder 14/8.
   ========================================================================== */

.cv[data-tpl="spets"] {
  --side-w: 33%;
  --tpl-font: "Source Sans 3", sans-serif;
  /* sandspalten är andrafärgen i 14 % vitt (2/9) — Blächs hex2 är bränd sand,
     så standardparet ger samma sand som det gamla hårdkodade #EDE9E3 */
  --spets-sand: #EDE9E3;
  --spets-sand: color-mix(in srgb, var(--accent2, #A5701F) 14%, #fff);
  background-image: linear-gradient(to right, var(--spets-sand) 0 33%, transparent 33% 100%);
}
.cv[data-tpl="spets"] .cv-head {
  position: relative;
  display: grid; grid-template-columns: 33% 1fr; gap: 0;
  align-items: center; padding: 0;
  background-image: linear-gradient(var(--accent), var(--accent));
}
/* Spetsen: huvudets mörka yta fortsätter ned i en triangel över spalten. */
.cv[data-tpl="spets"] .cv-head::after {
  content: ""; position: absolute; top: 100%; left: 0;
  width: 33%; height: 58px;
  background-image: linear-gradient(var(--accent), var(--accent));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cv[data-tpl="spets"] .cv-photo { grid-area: 1 / 1; justify-self: center; margin: 30px 0 14px; }
.cv[data-tpl="spets"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
.cv[data-tpl="spets"] .cv-head__text { grid-area: 1 / 2; padding: 34px var(--pad-x) 30px 34px; color: #fff; }
.cv[data-tpl="spets"] .cv-name { color: #fff; font-weight: 700; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="spets"] .cv-role { color: rgba(255,255,255,.8); font-weight: 600; }
.cv[data-tpl="spets"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="spets"] .ct--inline .ci { color: rgba(255,255,255,.65); }
/* Sidokolumnen är sand — mörk text, spalten börjar under spetsen. */
.cv[data-tpl="spets"] .cv-side { padding-top: calc(58px + var(--gap) * .6); }
.cv[data-tpl="spets"] .s__h {
  font-size: calc(var(--fs) * 1.15); font-weight: 700; color: var(--doc-ink);
  border-bottom: 2px solid var(--doc-ink); padding-bottom: 6px;
}
.cv[data-tpl="spets"] .cv-main .s__h { font-size: calc(var(--fs) * 1.3); }
.cv[data-tpl="spets"] .ci { color: var(--doc-ink); }
.cv[data-tpl="spets"] .lv__meter { display: none; }
.cv[data-tpl="spets"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="spets"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   44 — SAMMET       formspråk: Klassiker      layout: sideL
   Sammetsmörkt huvud och spalt i ett — en stående mörk L-form — och
   accentfärgen som svarar i fyllda block: rollen under namnet, flaggan vid
   rubrikerna, datumen vid posterna. Ur konkurrentrundan 31/8: formen som
   CV.se:s "Elegant" bygger på — två starka toner på samma sida — ritad från
   grunden på vår DOM. Mörkret är fast (nästan Bläck) så att färgväljaren
   byter blockens ton utan att tvåtonigheten någonsin går förlorad.
   ========================================================================== */

.cv[data-tpl="sammet"] {
  --side-w: 34%;
  /* Mörkret är fast — men tonas 18 % av andrafärgen (2/9), så att ett valt
     par färgar hela sidan utan att sammeten ljusnar. Utan --accent2 (äldre
     bakade sidor) blir mixen mörkret med sig självt = exakt som förut. */
  --sammet: #221E26;
  --sammet: color-mix(in srgb, var(--accent2, #221E26) 18%, #221E26);
  --tpl-font: "Source Sans 3", sans-serif;
  background-image: linear-gradient(to right, var(--sammet) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="sammet"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr; gap: 0; padding: 0;
  align-items: center;
  background-image: linear-gradient(var(--sammet), var(--sammet));
  color: #fff;
}
.cv[data-tpl="sammet"] .cv-photo {
  grid-area: 1 / 1; justify-self: center; margin: 34px 0 26px;
  border: 3px solid rgba(255,255,255,.35);
}
.cv[data-tpl="sammet"] .cv-head__text { grid-area: 1 / 2; padding: 40px var(--pad-x) 34px 34px; }
.cv[data-tpl="sammet"] .cv-name {
  color: #fff; font-family: "Lora", serif; font-weight: 500;
  font-size: calc(var(--fs) * 2.5); letter-spacing: .01em;
}
/* rollen som fyllt accentblock — mallens första svar på mörkret */
.cv[data-tpl="sammet"] .cv-role {
  display: inline-block; margin-top: 10px;
  background-image: linear-gradient(var(--accent), var(--accent));
  /* höger 8px: spärrningen (.16em) lägger sig efter sista bokstaven och
     hade annars gjort högerluften optiskt bredare än vänsterns 12px */
  color: #fff; padding: 3px 8px 4px 12px;
  font-weight: 700; font-size: calc(var(--fs) * .8);
  text-transform: uppercase; letter-spacing: .16em;
}
.cv[data-tpl="sammet"] .ct--inline li { color: rgba(255,255,255,.85); }
.cv[data-tpl="sammet"] .ct--inline .ci { color: rgba(255,255,255,.6); }
/* -9px: linjerar spaltens första rubrik med satsytans PROFIL-flagga
   (juryn 31/8 mätte 9px diff — versala rubriker på samma rad ska ligga i liv) */
.cv[data-tpl="sammet"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.4 - 9px); }
.cv[data-tpl="sammet"] .cv-side .s__h {
  color: #fff; font-weight: 700; font-size: calc(var(--fs) * .8);
  letter-spacing: .15em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 6px;
}
.cv[data-tpl="sammet"] .cv-side .ct li,
.cv[data-tpl="sammet"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="sammet"] .cv-side .ci { color: #fff; }
/* namnet får hela raden, mätaren som tunn vit helbreddslinje under
   (signatur-mönstret) — spalten är för smal för basens trespaltsrad */
.cv[data-tpl="sammet"] .cv-side .lv__row { grid-template-columns: 1fr auto; gap: 4px 10px; }
.cv[data-tpl="sammet"] .cv-side .lv__row::after { color: rgba(255,255,255,.7); }
.cv[data-tpl="sammet"] .cv-side .lv__meter {
  grid-column: 1 / -1; display: block; height: 4px;
  background: rgba(255,255,255,.22); position: relative; overflow: hidden;
}
.cv[data-tpl="sammet"] .cv-side .lv__meter i {
  position: absolute; top: 0; bottom: 0; left: 0; height: auto;
  border-radius: 0; background: none;
}
.cv[data-tpl="sammet"] .cv-side .lv__meter i.is-on { background: #fff; }
/* skalan toppar på 92 % — fylls spåret helt ser mätaren ut som en linjal */
.cv[data-tpl="sammet"] .cv-side .lv__meter i:nth-child(1).is-on { width: 18%; }
.cv[data-tpl="sammet"] .cv-side .lv__meter i:nth-child(2).is-on { width: 36%; }
.cv[data-tpl="sammet"] .cv-side .lv__meter i:nth-child(3).is-on { width: 55%; }
.cv[data-tpl="sammet"] .cv-side .lv__meter i:nth-child(4).is-on { width: 74%; }
.cv[data-tpl="sammet"] .cv-side .lv__meter i:nth-child(5).is-on { width: 92%; }
.cv[data-tpl="sammet"] .cv-side .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="sammet"] .cv-side .tg li {
  background: rgba(255,255,255,.12); border-radius: 2px;
  padding: 2px 10px; font-size: calc(var(--fs) * .86);
}
/* satsytan: rubriker med accentflagga, datumen i fyllda block */
.cv[data-tpl="sammet"] .cv-main .s__h {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: calc(var(--fs) * .8);
  letter-spacing: .15em; text-transform: uppercase; color: var(--doc-ink);
}
.cv[data-tpl="sammet"] .cv-main .s__h::before {
  content: ""; flex: none;
  width: calc(var(--fs) * 1.5); height: calc(var(--fs) * .7);
  background: var(--accent);
}
.cv[data-tpl="sammet"] .e__title { font-weight: 700; }
.cv[data-tpl="sammet"] .e__date {
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; padding: 1px 8px 2px;
  font-size: calc(var(--fs) * .8); font-weight: 600;
}
.cv[data-tpl="sammet"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   45 — FOND         formspråk: Klassiker      layout: single
   Tonat huvud på strikt enspalt — marknadens "Header ATS"-form: färg utan
   att läsordningen bryts. Ingen av de andra ATS-mallarna bär någon färgyta;
   det är hela poängen med den här. Toppkanten i mättad accent ger
   miniatyren dess identitet.
   ========================================================================== */

/* Toppkanten målas som bakgrund, inte border — en border på .cv ligger
   utanför scrollHeight och gjorde arket 6px "för kort" i A4-svepet. */
.cv[data-tpl="fond"] {
  --pad-x: 50px;
  --tpl-font: "Inter", sans-serif;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: top;
}
.cv[data-tpl="fond"] .cv-head {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  padding: calc(var(--pad-y) * .75) var(--pad-x) calc(var(--pad-y) * .55);
  align-items: center;
}
.cv[data-tpl="fond"] .cv-photo { order: 2; margin-left: auto; }
.cv[data-tpl="fond"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.2); letter-spacing: -.02em; }
.cv[data-tpl="fond"] .cv-role { color: var(--accent); font-weight: 700; }
.cv[data-tpl="fond"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="fond"] .e__title { font-weight: 700; }
.cv[data-tpl="fond"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="fond"] .e__date { font-variant-numeric: tabular-nums; }
/* nivån i klartext räcker — mätardekor hör inte hemma i ATS-form */
.cv[data-tpl="fond"] .lv__meter { display: none; }
.cv[data-tpl="fond"] .lv__row { grid-template-columns: 1fr auto; }

/* ==========================================================================
   46 — KAPITEL      formspråk: Nordiskt       layout: single
   Numrerade rubriker — 01, 02, 03 — i stora, halvtonade accentsiffror.
   Siffrorna är CSS-räknare (ren dekor: ansökningssystemen ser bara
   rubrikorden), resten är Nordisk enspalt. ATS-säker.
   ========================================================================== */

.cv[data-tpl="kapitel"] { --pad-x: 52px; --tpl-font: "Manrope", sans-serif; }
.cv[data-tpl="kapitel"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.4); letter-spacing: -.02em; }
.cv[data-tpl="kapitel"] .cv-role { color: var(--accent); font-weight: 700; }
.cv[data-tpl="kapitel"] .cv-main { counter-reset: kapitel; }
.cv[data-tpl="kapitel"] .cv-main > .s { counter-increment: kapitel; }
.cv[data-tpl="kapitel"] .cv-main .s__h {
  display: flex; align-items: baseline; gap: 12px;
  font-size: calc(var(--fs) * .82); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--doc-ink);
  border-bottom: 1px solid var(--doc-line); padding-bottom: 6px;
}
/* siffran i andrarösten, full täckning (juryn 3/9): accent i 45 % opacitet
   blev gråblå och rastreringsberoende i tryck — stålblått mot marinrubriker
   i standardparet är två riktiga röster i stället för en halv */
.cv[data-tpl="kapitel"] .cv-main .s__h::before {
  content: counter(kapitel, decimal-leading-zero);
  font-size: calc(var(--fs) * 1.8); font-weight: 800; line-height: 1;
  letter-spacing: 0; color: var(--accent2, var(--accent)); opacity: 1;
}
.cv[data-tpl="kapitel"] .e__title { font-weight: 800; }
.cv[data-tpl="kapitel"] .e__date { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   47 — PELARE       formspråk: Klassiker      layout: sideR
   Mättad mörk högerspalt och satsytan i Lora — den enda tvåspalten satt i
   antikva med mörk spalt. Gavels disposition, boksättningens röst.
   ========================================================================== */

/* Valvet: spalten toppas av en välvd dom (tvillingjakten 31/8 — utan den
   var siluetten gavels). Tre lager uppifrån: domen (ritas en gång), en vit
   maskremsa som gömmer spaltens raka topp, och spalten själv (upprepas
   över utskrivna sidor, som huset kräver). */
.cv[data-tpl="pelare"] {
  --side-w: 32%;
  --tpl-font: "Lora", serif;
  background-image:
    radial-gradient(ellipse 127px 100px at calc(100% - 127px) 235px, var(--accent) 0 99.4%, transparent 100%),
    linear-gradient(#fff, #fff),
    linear-gradient(to left, var(--accent) 0 32%, transparent 32% 100%);
  /* masken 3px bredare än spalten: annars läcker spaltens kantutjämnade
     vänsterkant fram som en prickad söm i PDF:en (granskningen 2/9) — med
     1px låg maskens egen kantutjämning fortfarande ovanpå spaltkanten */
  background-size: auto, calc(32% + 3px) 236px, 100% 100%;
  background-position: 0 0, right top, 0 0;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.cv[data-tpl="pelare"] .cv-head {
  display: grid; grid-template-columns: 1fr 32%; gap: 0;
  /* end, inte center: namnet förankras mot fotokanten i stället för att
     flyta i död luft när fotot är stort (juryn 31/8) */
  padding: var(--pad-y) 0 0; align-items: end;
}
.cv[data-tpl="pelare"] .cv-head__text { grid-column: 1; padding: 0 34px 0 var(--pad-x); }
.cv[data-tpl="pelare"] .cv-photo { grid-column: 2; justify-self: center; margin-bottom: 4px; border: 3px solid var(--accent); }
.cv[data-tpl="pelare"] .cv-name { font-weight: 500; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="pelare"] .cv-role { color: var(--accent); font-style: italic; }
/* -8px: spaltens första rubrik i baslinje med satsytans (juryn 31/8) */
.cv[data-tpl="pelare"] .cv-side { color: #fff; padding-top: calc(var(--gap) * 1.5 - 8px); }
/* huvudet måste vara minst lika högt som valvmasken, annars glipar det
   mellan domen och spaltens topp vid korta namn */
.cv[data-tpl="pelare"] .cv-head { min-height: 236px; }
.cv[data-tpl="pelare"] .cv-side .s__h {
  color: #fff; font-size: calc(var(--fs) * .95); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 6px;
}
.cv[data-tpl="pelare"] .cv-side .ct li,
.cv[data-tpl="pelare"] .cv-side .dt dt { color: rgba(255,255,255,.88); }
.cv[data-tpl="pelare"] .cv-side .ci { color: #fff; }
.cv[data-tpl="pelare"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="pelare"] .cv-side .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="pelare"] .cv-side .lv__row::after { color: rgba(255,255,255,.7); }
.cv[data-tpl="pelare"] .cv-side .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="pelare"] .cv-side .tg li {
  border: 1px solid rgba(255,255,255,.4); padding: 2px 11px;
  font-size: calc(var(--fs) * .86);
}
.cv[data-tpl="pelare"] .cv-main .s__h {
  font-size: calc(var(--fs) * 1.15); font-weight: 600; color: var(--doc-ink);
  border-bottom: 1px solid var(--doc-line); padding-bottom: 5px;
}
.cv[data-tpl="pelare"] .e__meta { font-style: italic; color: var(--doc-mut); }

/* ==========================================================================
   48 — JOURNAL      formspråk: Trycksak       layout: single
   Tidningens sättning: dubbellinje under huvudet, kickerrubriker i sans
   med ett kort svart streck, brödtext och kursiva datum i Plex Serif.
   ========================================================================== */

.cv[data-tpl="journal"] { --pad-x: 54px; --tpl-font: "IBM Plex Serif", serif; }
.cv[data-tpl="journal"] .cv-head {
  align-items: flex-end;
  border-bottom: 6px double var(--doc-ink); padding-bottom: 16px;
}
.cv[data-tpl="journal"] .cv-photo { order: 2; margin-left: auto; }
.cv[data-tpl="journal"] .cv-name { font-weight: 600; font-size: calc(var(--fs) * 2.5); letter-spacing: -.01em; }
.cv[data-tpl="journal"] .cv-role {
  font-family: "Inter", sans-serif; color: var(--accent);
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(var(--fs) * .8); margin-top: 6px;
}
.cv[data-tpl="journal"] .s__h {
  display: flex; align-items: center; gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--fs) * .78); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
.cv[data-tpl="journal"] .s__h::before {
  content: ""; flex: none; width: 26px; height: 3px; background: var(--doc-ink);
}
.cv[data-tpl="journal"] .e__title { font-weight: 600; }
.cv[data-tpl="journal"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="journal"] .e__date { font-style: italic; }
.cv[data-tpl="journal"] .lv__meter { display: none; }
.cv[data-tpl="journal"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="journal"] .lv__row::after { font-style: italic; }

/* ==========================================================================
   49 — AFTON        formspråk: Kreativ        layout: single
   Galleriets enda helmörka ark: dokumentfärgerna inverteras med tokens
   (--doc-ink/-mut/-line blir ljusa), mörkret målas som background-image så
   det upprepas över utskrivna sidor. Accentfärgen bor i roll, markörer och
   linjer — och med Bläck som accent blir den svartvit och slår ändå.
   ========================================================================== */

.cv[data-tpl="afton"] {
  --doc-ink: #F2EEE8;
  --doc-mut: rgba(242,238,232,.65);
  --doc-line: rgba(242,238,232,.22);
  --tpl-font: "Montserrat", sans-serif;
  background-image: linear-gradient(#1B181D, #1B181D);
}
.cv[data-tpl="afton"] .cv-photo { border: 3px solid rgba(242,238,232,.35); }
.cv[data-tpl="afton"] .cv-name { font-weight: 700; font-size: calc(var(--fs) * 2.4); letter-spacing: .01em; }
.cv[data-tpl="afton"] .cv-role {
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: calc(var(--fs) * .8); margin-top: 6px;
}
.cv[data-tpl="afton"] .s__h {
  color: var(--doc-ink); font-size: calc(var(--fs) * .82); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent); padding-bottom: 6px;
}
.cv[data-tpl="afton"] .e__title { font-weight: 700; }
.cv[data-tpl="afton"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="afton"] .e__date { color: var(--accent); font-weight: 600; }
.cv[data-tpl="afton"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="afton"] .tg li {
  border: 1px solid var(--doc-line); border-radius: 999px;
  padding: 2px 11px; font-size: calc(var(--fs) * .86);
}

/* ==========================================================================
   50 — FRIS         formspråk: Talea          layout: band
   Rubrikerna som mjukt tonade band från arkets vänsterkant, med loggans
   rundning i den fria änden. Färg som yta — men i den lätta tonen.
   ========================================================================== */

.cv[data-tpl="fris"] { --tpl-font: "Montserrat", sans-serif; }
.cv[data-tpl="fris"] .cv-photo { order: 2; margin-left: auto; }
.cv[data-tpl="fris"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.3); letter-spacing: -.02em; }
.cv[data-tpl="fris"] .cv-role { color: var(--accent); font-weight: 600; }
/* 16 % ton i vitt: soft-tokenens 10 % försvann i utskrift — bandet ÄR
   mallen (juryn 31/8). Soft-raden står kvar som reserv utan color-mix.
   Tonen är andrafärgen (2/9): sandband med plommonrubrik i standardparet,
   accenten själv där --accent2 saknas. */
.cv[data-tpl="fris"] .cv-main .s__h {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-image: linear-gradient(color-mix(in srgb, var(--accent2, var(--accent)) 16%, #fff), color-mix(in srgb, var(--accent2, var(--accent)) 16%, #fff));
  margin-left: calc(0px - var(--pad-x));
  padding: 6px 24px 7px var(--pad-x);
  width: fit-content; max-width: calc(100% + var(--pad-x));
  border-radius: 0 999px 999px 0;
  font-size: calc(var(--fs) * .92); font-weight: 700; color: var(--accent);
}
/* kroppen hålls medvetet neutral — banden ÄR färgen (tvillingjakten 31/8:
   med accentdatum och mätarprickar var kroppen duetts rad för rad) */
.cv[data-tpl="fris"] .e__title { font-weight: 700; }
.cv[data-tpl="fris"] .e__date { color: var(--doc-mut); font-variant-numeric: tabular-nums; }
.cv[data-tpl="fris"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="fris"] .rt li::marker { color: var(--accent); }
.cv[data-tpl="fris"] .lv__meter { display: none; }
.cv[data-tpl="fris"] .lv__row { grid-template-columns: 1fr auto; }

/* ==========================================================================
   51 — KONTUR       formspråk: Kreativ        layout: single
   Namnet i konturversaler i posterformat — bara linjen, ingen fyllning.
   Resten stram enspalt så att typografin får stå ensam. @supports-vakten
   ger fylld text i miljöer utan text-stroke.
   ========================================================================== */

.cv[data-tpl="kontur"] { --pad-x: 50px; --tpl-font: "Montserrat", sans-serif; }
.cv[data-tpl="kontur"] .cv-photo { order: 2; margin-left: auto; }
/* Konturen görs med åtta skuggor kring vit fyllning, INTE text-stroke:
   de variabla fonternas glyfer har överlappande delkonturer och stroke
   ritar sömmarna som diagonala spöklinjer tvärs igenom bokstäverna.
   Skuggor utgår från silhuetten och är sömfria — och vitt-på-vitt läses
   som ihålig text. */
.cv[data-tpl="kontur"] .cv-name {
  font-weight: 800; font-size: calc(var(--fs) * 3.2); line-height: .95;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff;
  text-shadow:
    1.5px 0 0 var(--doc-ink), -1.5px 0 0 var(--doc-ink),
    0 1.5px 0 var(--doc-ink), 0 -1.5px 0 var(--doc-ink),
    1.1px 1.1px 0 var(--doc-ink), -1.1px 1.1px 0 var(--doc-ink),
    1.1px -1.1px 0 var(--doc-ink), -1.1px -1.1px 0 var(--doc-ink);
}
/* Med foto är namnraden ~560 px: "ÅSA SÖDERSTRÖM-ÖHRN" i 3.2 fs bröts efter
   bindestrecket och lämnade ÖHRN ensamt. Mindre grad när fotot tar plats,
   och balance jämnar ut de rader som ändå blir. */
.cv[data-tpl="kontur"] .cv-name { text-wrap: balance; }
.cv[data-tpl="kontur"] .cv-head:has(.cv-photo) .cv-name { font-size: calc(var(--fs) * 2.75); }
.cv[data-tpl="kontur"] .cv-role {
  color: var(--accent); font-weight: 800; text-transform: uppercase;
  letter-spacing: .2em; font-size: calc(var(--fs) * .82); margin-top: 8px;
}
.cv[data-tpl="kontur"] .s__h {
  display: flex; align-items: center; gap: 14px;
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--doc-ink);
}
.cv[data-tpl="kontur"] .s__h::after { content: ""; flex: 1; border-top: 1.5px solid var(--doc-ink); }
.cv[data-tpl="kontur"] .e__title { font-weight: 800; }
.cv[data-tpl="kontur"] .e__date { font-weight: 700; color: var(--doc-ink); }
.cv[data-tpl="kontur"] .e__meta { color: var(--accent); }

/* ==========================================================================
   52 — MAST         formspråk: Nordiskt       layout: sideL
   Smal kontaktspalt (25 %) bakom en tunn lina — linjer i stället för
   färgfält, som familjen bjuder. Nästan enspaltens lugn, tvåspaltens
   täthet. Spalten sätts en grad mindre så den viker sig för satsytan.
   ========================================================================== */

/* Linan målas på arket, inte som border på spalten — annars slutar den
   där spaltinnehållet slutar och hänger i luften vid tunna CV:n. */
.cv[data-tpl="mast"] {
  --side-w: 25%; --pad-x: 46px; --tpl-font: "Inter", sans-serif;
  background-image: linear-gradient(var(--doc-line), var(--doc-line));
  background-size: 1px 100%;
  background-position: 25% 0;
  background-repeat: repeat-y;
}
.cv[data-tpl="mast"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.3); letter-spacing: -.02em; }
.cv[data-tpl="mast"] .cv-role { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="mast"] .cv-side {
  padding-right: 18px;
  font-size: calc(var(--fs) * .92);
}
.cv[data-tpl="mast"] .cv-side .s__h {
  font-size: calc(var(--fs) * .72); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--doc-mut);
}
.cv[data-tpl="mast"] .cv-side .lv__meter { display: none; }
.cv[data-tpl="mast"] .cv-side .lv__row { grid-template-columns: 1fr; gap: 0; }
.cv[data-tpl="mast"] .cv-side .lv__row::after { justify-self: start; text-align: left; }
/* 25 %-spalten rymmer inte etikett + värde sida vid sida ("1985-\n04-12") —
   värdet står under etiketten, som nivåorden gör */
.cv[data-tpl="mast"] .cv-side .dt { grid-template-columns: 1fr; gap: 0; }
.cv[data-tpl="mast"] .cv-side .dt dd { margin-bottom: 4px; }
.cv[data-tpl="mast"] .cv-side .tg { display: flex; flex-wrap: wrap; gap: 5px; }
.cv[data-tpl="mast"] .cv-side .tg li {
  border: 1px solid var(--doc-line); border-radius: 3px;
  padding: 1px 8px; font-size: calc(var(--fs) * .82);
}
.cv[data-tpl="mast"] .cv-main .s__h {
  font-size: calc(var(--fs) * .82); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
.cv[data-tpl="mast"] .e__title { font-weight: 700; }
.cv[data-tpl="mast"] .e__date { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   53 — DUETT        formspråk: Klassiker      layout: band
   Huvudet i två block kant i kant: mättad accent med namnet i vitt till
   vänster, ljus ton med fotot till höger. Enspalt under, rubriker i mjuka
   tonade plattor som ekar huvudets högra block.
   ========================================================================== */

.cv[data-tpl="duett"] { --tpl-font: "Nunito Sans", sans-serif; }
.cv[data-tpl="duett"] .cv-head {
  display: grid; grid-template-columns: 58% 42%; gap: 0;
  padding: 0; align-items: stretch;
  /* 12 % ton i vitt: soft-tokenen var nästan arkvit och duetten lästes
     som soloblock (juryn 31/8). Soft-raden är reserv utan color-mix.
     Tonen är andrafärgen (2/9) — duetten blir två röster på riktigt. */
  background-image: linear-gradient(to right, transparent 0 58%, var(--accent-soft) 58% 100%);
  background-image: linear-gradient(to right, transparent 0 58%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, #fff) 58% 100%);
}
.cv[data-tpl="duett"] .cv-head__text {
  grid-area: 1 / 1;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  padding: 34px 28px 30px var(--pad-x);
}
.cv[data-tpl="duett"] .cv-photo { grid-area: 1 / 2; place-self: center; }
.cv[data-tpl="duett"] .cv-name { color: #fff; font-weight: 800; font-size: calc(var(--fs) * 2.1); }
.cv[data-tpl="duett"] .cv-role { color: rgba(255,255,255,.85); font-weight: 700; }
.cv[data-tpl="duett"] .cv-head .ct--inline li { color: rgba(255,255,255,.85); }
.cv[data-tpl="duett"] .cv-head .ct--inline .ci { color: #fff; }
.cv[data-tpl="duett"] .s__h {
  display: inline-block; width: fit-content;
  /* plattorna ekar huvudets högra block — samma andraton (2/9) */
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-image: linear-gradient(color-mix(in srgb, var(--accent2, var(--accent)) 12%, #fff), color-mix(in srgb, var(--accent2, var(--accent)) 12%, #fff));
  border-radius: 6px; padding: 4px 14px 5px;
  font-size: calc(var(--fs) * .88); font-weight: 800; color: var(--accent);
}
.cv[data-tpl="duett"] .e__title { font-weight: 800; }
.cv[data-tpl="duett"] .e__date { color: var(--accent); font-weight: 700; }


/* ==========================================================================
   54 — VY           formspråk: Kreativ        layout: single
   Kandidatens eget foto som helbrett huvud, namnet i vitt över en mörk
   scrim. Utan foto blir huvudet ett rent färgfält — formen bär ändå.
   Ur inspirationsskörden 31/8 (fotografmallen), ritad från grunden.
   ========================================================================== */

.cv[data-tpl="vy"] { --tpl-font: "Manrope", sans-serif; }
.cv[data-tpl="vy"] .cv-head {
  position: relative; display: block;
  padding: 0; min-height: 220px;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
}
.cv[data-tpl="vy"] .cv-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0; box-shadow: none !important;
  background-position: center 18%;
}
/* scrim: namnet ska bära mot vilken bild som helst */
.cv[data-tpl="vy"] .cv-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(20,17,23,.18), rgba(20,17,23,.42) 55%, rgba(20,17,23,.62));
}
.cv[data-tpl="vy"] .cv-head__text {
  position: relative; z-index: 2;
  padding: 132px var(--pad-x) 28px; text-align: center;
}
.cv[data-tpl="vy"] .cv-name {
  color: #fff; font-weight: 800; font-size: calc(var(--fs) * 2.5);
  text-transform: uppercase; letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.cv[data-tpl="vy"] .cv-role {
  color: rgba(255,255,255,.92); font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: calc(var(--fs) * .8); margin-top: 8px;
}
.cv[data-tpl="vy"] .ct--inline { justify-content: center; }
.cv[data-tpl="vy"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="vy"] .ct--inline .ci { color: #fff; }
.cv[data-tpl="vy"] .ct--detaljer { justify-content: center; }
.cv[data-tpl="vy"] .s__h {
  font-size: calc(var(--fs) * .8); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.cv[data-tpl="vy"] .e__title { font-weight: 700; }
.cv[data-tpl="vy"] .e__meta { color: var(--doc-mut); }

/* ==========================================================================
   55 — PUDER        formspråk: Kreativ        layout: sideL
   Galleriets enda genomljusa mall: vit sida, en pastellplatta bakom
   fotot, spärrade rubriker i accent och en tunn tonrand i underkanten.
   Allt annat i galleriet bär mörka accenter — Puder är motvikten.
   ========================================================================== */

.cv[data-tpl="puder"] {
  --side-w: 37%; --pad-x: 48px;
  --tpl-font: "Montserrat", sans-serif;
  /* pudertonen (juryn 3/9): plattan, tonranden och taggarna i ANDRARÖSTENS
     ljusa ton — varm pudersand mot plommonrubriker i standardparet, i
     stället för plommon i två styrkor. Soft-raden är reserv utan color-mix. */
  --puder-ton: var(--accent-soft);
  --puder-ton: color-mix(in srgb, var(--accent2, var(--accent)) 18%, #fff);
  background-image: linear-gradient(var(--puder-ton), var(--puder-ton));
  background-size: 100% 12px;
  background-position: bottom;
  background-repeat: no-repeat;
}
.cv[data-tpl="puder"] .cv-head { position: relative; align-items: center; padding-bottom: 10px; }
/* pastellplattan — förskjuten bakom fotot */
.cv[data-tpl="puder"] .cv-head::before {
  content: ""; position: absolute;
  left: calc(var(--pad-x) - 18px); top: 30px;
  width: calc(var(--fs) * 11.8); height: calc(var(--fs) * 9.4);
  border-radius: calc(var(--fs) * 4.7);
  background-image: linear-gradient(var(--puder-ton), var(--puder-ton));
}
.cv[data-tpl="puder"] .cv-photo { position: relative; margin-left: 12px; }
/* utan foto finns inget att lägga plattan bakom — då hängde den tom bredvid namnet */
.cv[data-tpl="puder"] .cv-head:not(:has(.cv-photo))::before { display: none; }
.cv[data-tpl="puder"] .cv-head__text { position: relative; padding-left: 34px; }
.cv[data-tpl="puder"] .cv-name {
  font-weight: 700; font-size: calc(var(--fs) * 2.2);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.08;
}
.cv[data-tpl="puder"] .cv-role {
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: .24em; font-size: calc(var(--fs) * .8); margin-top: 8px;
}
.cv[data-tpl="puder"] .s__h {
  color: var(--accent); font-weight: 700; font-size: calc(var(--fs) * .82);
  letter-spacing: .2em; text-transform: uppercase;
}
.cv[data-tpl="puder"] .cv-side { padding-top: calc(var(--gap) * 1.2); }
.cv[data-tpl="puder"] .cv-main { padding-top: calc(var(--gap) * 1.2); }
.cv[data-tpl="puder"] .e__title { font-weight: 700; }
.cv[data-tpl="puder"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="puder"] .e__date { color: var(--doc-mut); }
/* luftig och linjelös — nivåer i klartext, inga mätare */
.cv[data-tpl="puder"] .lv__meter { display: none; }
.cv[data-tpl="puder"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="puder"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="puder"] .tg li {
  background-image: linear-gradient(var(--puder-ton), var(--puder-ton));
  border-radius: 999px; padding: 2px 12px; font-size: calc(var(--fs) * .86);
}

/* ==========================================================================
   56 — SVALL        formspråk: Talea          layout: band
   Färghuvud som slutar i en mjuk, oregelbunden våg — den organiska kanten
   ingen rak mall har. Vågen är en SVG-mask över en accentfärgad yta, så
   färgväljaren styr den precis som allt annat.
   ========================================================================== */

.cv[data-tpl="svall"] { --tpl-font: "Nunito Sans", sans-serif; }
.cv[data-tpl="svall"] .cv-head {
  position: relative;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  padding: calc(var(--pad-y) * .8) var(--pad-x) 32px;
  align-items: center;
  margin-bottom: 36px;
}
.cv[data-tpl="svall"] .cv-head::after {
  content: ""; position: absolute; top: 100%; left: 0;
  width: 100%; height: 34px;
  background-image: linear-gradient(var(--accent), var(--accent));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'><path d='M0,0 H100 V12 C81,30 62,4 44,14 C27,23 11,7 0,18 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'><path d='M0,0 H100 V12 C81,30 62,4 44,14 C27,23 11,7 0,18 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
}
.cv[data-tpl="svall"] .cv-photo { order: 2; margin-left: auto; border: 3px solid rgba(255,255,255,.55); }
.cv[data-tpl="svall"] .cv-name { color: #fff; font-weight: 800; font-size: calc(var(--fs) * 2.55); letter-spacing: -.02em; }
.cv[data-tpl="svall"] .cv-role { color: rgba(255,255,255,.88); font-weight: 700; }
.cv[data-tpl="svall"] .ct--inline li { color: rgba(255,255,255,.88); }
.cv[data-tpl="svall"] .ct--inline .ci { color: #fff; }
.cv[data-tpl="svall"] .cv-main { padding-top: calc(var(--gap) * .8); }
.cv[data-tpl="svall"] .s__h {
  font-size: calc(var(--fs) * .82); font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
}
.cv[data-tpl="svall"] .e__title { font-weight: 800; }
.cv[data-tpl="svall"] .e__date { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="svall"] .rt li::marker { color: var(--accent); }

/* ==========================================================================
   57 — BALANS       formspråk: Trycksak       layout: single
   Rubrikerna i konturboxar på en genomgående mittlinje, namnet i en egen
   box — symmetrins mall. Släkt med gallrade Sigill i tanken, men boxarna
   och sansen gör en annan sida av den.
   ========================================================================== */

.cv[data-tpl="balans"] { --pad-x: 54px; --tpl-font: "Montserrat", sans-serif; }
.cv[data-tpl="balans"] .cv-head { display: block; text-align: center; }
.cv[data-tpl="balans"] .cv-photo { margin: 0 auto 12px; }
.cv[data-tpl="balans"] .cv-name {
  display: inline-block;
  border: 1.5px solid var(--doc-ink); padding: 7px 22px 8px;
  font-weight: 600; font-size: calc(var(--fs) * 1.55);
  text-transform: uppercase; letter-spacing: .12em;
}
.cv[data-tpl="balans"] .cv-role {
  color: var(--accent); font-weight: 600; font-style: italic;
  font-family: "Lora", serif; font-size: calc(var(--fs) * 1.05); margin-top: 6px;
}
.cv[data-tpl="balans"] .ct--inline { justify-content: center; }
.cv[data-tpl="balans"] .ct--detaljer { justify-content: center; }
.cv[data-tpl="balans"] .s__h {
  display: flex; align-items: center; gap: 14px;
  font-size: calc(var(--fs) * .76); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--doc-ink);
}
/* flanklinjerna tonade 45 % — fullstyrka överallt gjorde sidan gallerlik
   (juryn 31/8); namnboxen behåller hela bläcket */
.cv[data-tpl="balans"] .s__h::before,
.cv[data-tpl="balans"] .s__h::after {
  content: ""; flex: 1;
  border-top: 1px solid var(--doc-line);
  border-top-color: color-mix(in srgb, var(--doc-ink) 45%, #fff);
}
.cv[data-tpl="balans"] .s__h span {
  border: 1.5px solid var(--doc-ink); padding: 3px 14px 4px;
}
/* boxarna kostar höjd — tätare sektionsrytm håller demon på en A4 */
.cv[data-tpl="balans"] .cv-main { --kol-gap: calc(var(--gap) * .75); padding-top: calc(var(--gap) * .8); }
.cv[data-tpl="balans"] .ct--inline { margin-top: 8px; }
.cv[data-tpl="balans"] .e__title { font-weight: 700; }
.cv[data-tpl="balans"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="balans"] .e__date { font-variant-numeric: tabular-nums; color: var(--accent); }
.cv[data-tpl="balans"] .lv__meter { display: none; }
.cv[data-tpl="balans"] .lv__row { grid-template-columns: 1fr auto; }

/* ==========================================================================
   PERSONLIGT BREV
   Brevet använder samma mallar men alltid en kolumn. Reglerna ligger sist med
   avsikt: de har samma specificitet som mallarnas egna och vinner på ordning.
   ========================================================================== */

.cv[data-doc="letter"] { background-image: none; }

.cv[data-doc="letter"][data-tpl="kolumn"] .cv-head,
.cv[data-doc="letter"][data-tpl="kompakt"] .cv-head {
  padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="kolumn"] .cv-head { border-radius: 0 0 40px 0; }
.cv[data-doc="letter"] .cv-photo { position: static; }

/* De nya mallarnas sidokolumnsytor finns inte i brev: huvudet flyttas hem och
   text på färgad yta får färg igen. Sidans gradient släcks av regeln ovan. */
.cv[data-doc="letter"][data-tpl="skiffer"] .cv-head,
.cv[data-doc="letter"][data-tpl="modern"] .cv-head { display: flex; }
.cv[data-doc="letter"][data-tpl="modern"] .cv-head__text { grid-area: auto; }
.cv[data-doc="letter"][data-tpl="skiffer"] .cv-head {
  padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="casual"] .cv-inner { display: block; }
.cv[data-doc="letter"][data-tpl="casual"] .cv-head { padding-top: 0; }
.cv[data-doc="letter"][data-tpl="modern"] .cv-head__text {
  width: auto; color: var(--doc-ink); text-align: left;
  padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="modern"] .cv-name { color: var(--accent); }
.cv[data-doc="letter"][data-tpl="modern"] .cv-role { color: var(--doc-mut); }
.cv[data-doc="letter"][data-tpl="modern"] .cv-photo { margin: var(--pad-y) 0 0 var(--pad-x); border-color: var(--accent-line); }
.cv[data-doc="letter"][data-tpl="modern"] .cv-main .s__h::after { border-top-color: var(--doc-line); }

/* 14/8: de tio nya på brev. Sidgradienterna släcks av den generella regeln;
   här flyttas huvudena hem och text på färgad yta får sin färg tillbaka. */
.cv[data-doc="letter"][data-tpl="fyr"] .cv-head,
.cv[data-doc="letter"][data-tpl="atelje"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="fyr"] .cv-head__text { background-image: none; color: var(--doc-ink); padding: 0; }
.cv[data-doc="letter"][data-tpl="fyr"] .cv-name { color: var(--doc-ink); }
.cv[data-doc="letter"][data-tpl="fyr"] .cv-role { color: var(--accent); }
.cv[data-doc="letter"][data-tpl="fyr"] .cv-photo { margin-right: 0; box-shadow: none; }
.cv[data-doc="letter"][data-tpl="atelje"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="atelje"] .cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  border-radius: 50% !important;
}
.cv[data-doc="letter"][data-tpl="horisont"] .cv-main { padding-top: calc(var(--gap) * 1.2); }
/* Bård behåller sin bård även som brev — den är mallens identitet. */
.cv[data-doc="letter"][data-tpl="bard"] { background-image: linear-gradient(var(--accent), var(--accent)); }
.cv[data-doc="letter"][data-tpl="krets"] .cv-head,
.cv[data-doc="letter"][data-tpl="kil"] .cv-head,
.cv[data-doc="letter"][data-tpl="stav"] .cv-head,
.cv[data-doc="letter"][data-tpl="spets"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="krets"] .cv-head__text,
.cv[data-doc="letter"][data-tpl="stav"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="krets"] .cv-photo,
.cv[data-doc="letter"][data-tpl="kil"] .cv-photo,
.cv[data-doc="letter"][data-tpl="stav"] .cv-photo,
.cv[data-doc="letter"][data-tpl="spets"] .cv-photo { margin: 0; }
/* Kil behåller pillerbandet — det är mallens identitet — men utan spalt
   flyttar det hem till satsytan. */
.cv[data-doc="letter"][data-tpl="kil"] .cv-head__text { margin: 0 0 0 18px; }
/* Krets räls och plattikoner hör till CV-sektionerna, inte brevets bilagor. */
.cv[data-doc="letter"][data-tpl="krets"] .cv-main .s { padding-left: 0; }
.cv[data-doc="letter"][data-tpl="krets"] .cv-main .s::before,
.cv[data-doc="letter"][data-tpl="krets"] .cv-main .s__h::before { display: none; }
/* Spets: huvudet är enspaltigt i brevet — spetsen och sandspalten utgår. */
.cv[data-doc="letter"][data-tpl="spets"] .cv-head::after { display: none; }
.cv[data-doc="letter"][data-tpl="spets"] .cv-head__text { padding: 0 0 0 0; color: #fff; }
/* Vågens foto ska inte hänga ned över brevtexten. */
.cv[data-doc="letter"][data-tpl="vag"] .cv-photo { margin-bottom: 14px; }
/* Afton behåller sitt mörker även som brev — det ÄR mallen. Den generella
   regeln släcker .cv-bakgrunden; här tänds den igen (bård-prejudikatet). */
.cv[data-doc="letter"][data-tpl="afton"] { background-image: linear-gradient(#1B181D, #1B181D); }
/* Pelare: spalten finns inte i brevet — huvudet flyttar hem. */
.cv[data-doc="letter"][data-tpl="pelare"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="pelare"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="pelare"] .cv-photo { margin: 0; border: none; }
/* Duett: tvåblockshuvudet blir ett — accentblocket bär brevet ensamt. */
.cv[data-doc="letter"][data-tpl="duett"] .cv-head {
  display: flex; background-image: linear-gradient(var(--accent), var(--accent));
  padding: 0;
}
.cv[data-doc="letter"][data-tpl="duett"] .cv-head__text {
  background-image: none; flex: 1;
  padding: 30px var(--pad-x) 28px 24px;
}
.cv[data-doc="letter"][data-tpl="duett"] .cv-photo {
  margin: 26px 0 26px var(--pad-x); place-self: auto; align-self: center;
}
/* Vy: bildhuvudet är för tungt för ett brev — huvudet flyttar hem. */
.cv[data-doc="letter"][data-tpl="vy"] .cv-head {
  display: flex; min-height: 0; padding: var(--pad-y) var(--pad-x) 0;
  background-image: none; color: var(--doc-ink);
}
.cv[data-doc="letter"][data-tpl="vy"] .cv-head::before { display: none; }
.cv[data-doc="letter"][data-tpl="vy"] .cv-photo {
  position: static; inset: auto;
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  border-radius: 50%;
}
.cv[data-doc="letter"][data-tpl="vy"] .cv-head__text { padding: 0; text-align: left; }
.cv[data-doc="letter"][data-tpl="vy"] .cv-name { color: var(--doc-ink); text-shadow: none; }
.cv[data-doc="letter"][data-tpl="vy"] .cv-role { color: var(--accent); }
.cv[data-doc="letter"][data-tpl="vy"] .ct--inline { justify-content: flex-start; }
.cv[data-doc="letter"][data-tpl="vy"] .ct--inline li { color: var(--doc-mut); }
.cv[data-doc="letter"][data-tpl="vy"] .ct--inline .ci { color: var(--accent); }
/* Svall behåller sitt våghuvud — det är mallen. Bakgrunden på .cv-head
   släcks inte av den generella regeln (den rör bara .cv). */
/* Puder: tonranden i underkanten släcks av den generella regeln, plattan
   bakom fotot står kvar — den bor på huvudet. Fotot måste återfå sin
   stackningsordning: den generella regeln sätter position:static och då
   målas plattan OVANPÅ fotot (juryn 31/8). */
.cv[data-doc="letter"][data-tpl="puder"] .cv-photo { position: relative; }
/* Sammet: mörkret utgår i brevet — bara accentblocken följer med. */
.cv[data-doc="letter"][data-tpl="sammet"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
  background-image: none; color: var(--doc-ink);
}
.cv[data-doc="letter"][data-tpl="sammet"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="sammet"] .cv-name { color: var(--doc-ink); }
.cv[data-doc="letter"][data-tpl="sammet"] .cv-photo { margin: 0; border: none; }
.cv[data-doc="letter"][data-tpl="sammet"] .ct--inline li { color: var(--doc-mut); }
.cv[data-doc="letter"][data-tpl="sammet"] .ct--inline .ci { color: var(--accent); }

/* --- brevets egen sättning --------------------------------------------- */

.lt { display: grid; gap: calc(var(--gap) * .85); }

.lt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.lt-to { display: grid; gap: 1px; font-style: normal; font-size: calc(var(--fs) * .95); }
.lt-to span:first-child { font-weight: 600; }
.lt-stamp { margin: 0; font-size: calc(var(--fs) * .95); color: var(--doc-mut); white-space: nowrap; }

.lt-subject { margin: 0; font-size: calc(var(--fs) * 1.1); font-weight: 700; color: var(--accent); }
.lt-greeting { margin: 0; }

.lt .rt { margin-top: 0; }
.lt .rt p { margin: 0 0 calc(var(--fs) * .85); }

.lt-sign { margin-top: calc(var(--gap) * .4); break-inside: avoid; }
.lt-sign p { margin: 0; }
.lt-name { margin-top: calc(var(--fs) * 2) !important; font-weight: 600; }

.lt .s { margin-top: calc(var(--gap) * .5); }
.lt .tg { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* ==========================================================================
   Flyttade sektioner i färgad sidokolumn
   Sedan sektioner kan flyttas mellan kolumnerna (sec.slot) kan poster med
   .e__meta (accentfärg) och .e__date (dämpat mörk) hamna på accentfärgad
   botten — där försvinner de. Gäller ALLA mallar med vit sidotext (listan
   nedan speglar varje `.cv-side { color: #fff }` i filen — granskningen 2/9
   hittade certifikatmeta osynlig i Ateljé, Krets, Stäv, Pelare, Sammet, Kil).
   Kontrast mot palettens djupaste toner: .9 vitt ≥ 7:1, .78 vitt ≥ 4.6:1.
   ========================================================================== */

.cv[data-tpl="sidopanel"] .cv-side .e__meta,
.cv[data-tpl="skiffer"]   .cv-side .e__meta,
.cv[data-tpl="casual"]    .cv-side .e__meta,
.cv[data-tpl="modern"]    .cv-side .e__meta,
.cv[data-tpl="gavel"]     .cv-side .e__meta,
.cv[data-tpl="utsikt"]    .cv-side .e__meta,
.cv[data-tpl="atelje"]    .cv-side .e__meta,
.cv[data-tpl="krets"]     .cv-side .e__meta,
.cv[data-tpl="kil"]       .cv-side .e__meta,
.cv[data-tpl="stav"]      .cv-side .e__meta,
.cv[data-tpl="sammet"]    .cv-side .e__meta,
.cv[data-tpl="pelare"]    .cv-side .e__meta { color: rgba(255,255,255,.9); }

.cv[data-tpl="sidopanel"] .cv-side .e__date,
.cv[data-tpl="skiffer"]   .cv-side .e__date,
.cv[data-tpl="casual"]    .cv-side .e__date,
.cv[data-tpl="modern"]    .cv-side .e__date,
.cv[data-tpl="gavel"]     .cv-side .e__date,
.cv[data-tpl="utsikt"]    .cv-side .e__date,
.cv[data-tpl="atelje"]    .cv-side .e__date,
.cv[data-tpl="krets"]     .cv-side .e__date,
.cv[data-tpl="kil"]       .cv-side .e__date,
.cv[data-tpl="stav"]      .cv-side .e__date,
.cv[data-tpl="sammet"]    .cv-side .e__date,
.cv[data-tpl="pelare"]    .cv-side .e__date { color: rgba(255,255,255,.78); }

/* ==========================================================================
   Utskriftssäkerhet
   ========================================================================== */

@media print {
  .cv { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* En enskild post hålls ihop. En hel sektion får däremot brytas – annars
     skjuts långa avsnitt till nästa sida och lämnar en halv sida tom. */
  .e, .lv__row, .tg li { break-inside: avoid; }
  /* Rubrikblocket (titel + arbetsgivare + datum) är en flexrad, och Chrome
     hedrar inte alltid break-inside på den yttre .e när innehållet är flex —
     då hamnade titeln sist på en sida och arbetsgivaren ensam högst upp på
     nästa. Två extra fästpunkter som brytmotorn respekterar var för sig:
     håll ihop själva raden, och låt aldrig en titel bli sidans sista rad. */
  .e__row { break-inside: avoid; }
  .e__title { break-after: avoid; }
  .s__h { break-after: avoid; }
  .cv-head { break-after: avoid; }
  .rt p { orphans: 2; widows: 2; }
  /* En rubrik direkt följd av första posten ska inte skiljas åt över en
     sidbrytning — annars står "REFERENSER" ensamt kvar sist på sidan. */
  .s__h + * { break-before: avoid; }
  /* …men sektionskroppen är ett grid, och Chrome hedrar varken rubrikens
     break-after: avoid eller kroppens break-before: avoid över gridgränsen
     (Kolumn/Omtanke 2/9: "UTBILDNING"/"Certifikat" ensamt sist på sida 1 i
     kontrollskriptets tvåsidiga pass). Det som biter, provat rent i färska
     processer: rubriken odelbar + kroppens FÖRSTA post odelbar och med
     avoid före sig — då flyttar Chrome rubriken med posten. avoid-page-
     varianter och display:block på kroppen räckte inte. */
  .s__h { break-inside: avoid; }
  .s__b > :first-child { break-before: avoid; break-inside: avoid; }
  /* Tvåspaltiga mallar: align-items:start på .cv-cols fick Chrome att lyfta
     hela rutnätet till sida 2 och lämna förstasidan tom under huvudet
     (Kompakt, Vertikal i granskningen 2/9). Stretch i tryck — spalterna
     målas ändå av .cv:s bakgrund, inte av sin egen höjd. */
  .cv-cols { align-items: stretch; }
  /* Chrome fragmenterar RUTNÄT ofragmenterat: radpositionerna räknas för
     hela dokumentet i ett svep, så när en post med break-inside: avoid
     knuffas till nästa sida flyttar inte raderna efter den — nästa
     sektionsrubrik målas OVANPÅ posten ("UTBILDNING" över punkterna på
     sida 2 i Kolumn, Kompakt, Pelare, Gavel; hittat oberoende av två
     byggagenter 2/9). Kolumner och sektionskroppar är därför BLOCK i
     tryck, med marginaler ur samma variabler som skärmens grid-gap
     (--kol-gap/--sek-gap, se "kolumner") — identisk rytm, provat mot
     skärmen i alla mallar. Bonus: block flödar från toppen, så stretch på
     .cv-cols ovan sprider inte längre sidokolumnens sektioner jämnt över
     sidan (Kolumn/Pelare/Skiffer såg så ut i PDF). Marginalen sitter som
     margin-top på syskonet: den trunkeras vid en sidbrytning, så det som
     hamnar överst på sida 2 börjar i kant. Kontrollskriptets pass 4 mäter
     ordöverlapp i PDF:en i tre brytlägen så felet inte kan komma tillbaka.
     flow-root på kroppen: ett gridbarn är sin egen formateringskontext, så
     listornas inre marginaler (fritextens margin-top, sista li:ns
     margin-bottom) räknas in i barnets höjd — som rena block hade de
     kollapsat med syskonens marginaler och trycket blivit 2–4 px tätare
     per post än skärmen. Kroppens DIREKTA barn (.e, .rt) får INTE
     flow-root: det fick Chrome att skjuta hela Trycks etikettspalts-
     sektioner till sida 2 (tom förstasida, 2/9). I stället en hårfin
     padding (0,05 px — osynlig, men över Chromes layoutenhet 1/64 px; 0,01 avrundades bort) som hindrar just den kollapsen: postens
     nederkant mot sista li:ns marginal, fritextens överkant mot listans.
     En .rt inne i .e lämnas — ett vanligt block även på skärmen. Uppmätt
     mot skärmen i alla mallar 2/9: 0 px avvikelse (steg3/merge/rytm.py). */
  .cv:where(:not([data-doc="letter"])) :where(.cv-main, .cv-side) { display: block; }
  .cv:where(:not([data-doc="letter"])) .s__b { display: flow-root; }
  :where(.cv:not([data-doc="letter"]) .s__b > .e) { padding-bottom: .05px; }
  :where(.cv:not([data-doc="letter"]) .s__b > .rt) { padding-top: .05px; }
  .cv:where(:not([data-doc="letter"])) :where(.cv-main, .cv-side) > * + * { margin-top: var(--kol-gap); }
  .cv:where(:not([data-doc="letter"])) .s__b > * + * { margin-top: var(--sek-gap); }
  /* etikettlistan efter kontaktraderna bär en egen marginal (10 px) som
     gridet lade TILL gapet — samma summa här */
  .cv:where(:not([data-doc="letter"])) .s__b > .ct + .dt { margin-top: calc(var(--sek-gap) + 10px); }
  /* :where håller specificiteten låg (0,1,0–0,2,0): en mall som själv sätter
     display på kroppen (Brickas flexbrickor, Fasads block) vinner. Brev
     lämnas i grid — de har inga poster att knuffa. */
  /* Tryck/Kontor/Ren: sektionen är själv ett rutnät (etikettspalten bredvid
     kroppen). Som barn till en BLOCK-kolumn lade Chrome hela satsytan på
     sida 2 — tom förstasida (pass 4, Tryck 2/9); som gridbarn fragmenterar
     den rätt. Satsytan förblir därför grid i tryck för dem (gapet bär
     rytmen, marginalen nollas); kroppens flow-root räcker mot ordöverlappet. */
  .cv:is([data-tpl="tryck"], [data-tpl="kontor"], [data-tpl="ren"]) .cv-main { display: grid; }
  .cv:is([data-tpl="tryck"], [data-tpl="kontor"], [data-tpl="ren"]) .cv-main > * + * { margin-top: 0; }
  /* Tidslinje/Pärla: datumet i gutter är absolut positionerat på skärmen.
     Chrome placerar absoluta lådor efter den OFRAGMENTERADE layouten, så en
     post som knuffats till nästa sida fick sitt datum målat ovanpå grannens
     ("jun 2018" över "aug 2013", pass 4 brytläge 3 — fanns före 2/9). I
     tryck är raden ett rutnät med datumet i flödet; linjen och pricken
     (pseudoelementen på .e) är bara dekor och lämnas. */
  .cv:is([data-tpl="tidslinje"], [data-tpl="parla"]) :not(.s--profile) > .s__b > .e { padding-left: 0; }
  .cv:is([data-tpl="tidslinje"], [data-tpl="parla"]) :not(.s--profile) > .s__b > .e > .e__row {
    display: grid; grid-template-columns: 8.5em 1fr; column-gap: 1em; align-items: start;
  }
  .cv:is([data-tpl="tidslinje"], [data-tpl="parla"]) :not(.s--profile) > .s__b > .e .e__date { position: static; grid-area: 1 / 1; }
  .cv:is([data-tpl="tidslinje"], [data-tpl="parla"]) :not(.s--profile) > .s__b > .e .e__main { grid-area: 1 / 2; }
  .cv[data-tpl="tidslinje"] :not(.s--profile) > .s__b > .e > .rt { margin-left: 9.5em; }
  .cv[data-tpl="parla"] :not(.s--profile) > .s__b > .e > .rt { margin-left: 10em; }
  /* Avsändarraden får aldrig ensam föda en sista sida. */
  .cv-credit { break-before: avoid; }
  /* Akademisk: färdighetslistan i två kolumner hålls ihop när den är kort
     (≤ 20 poster = 10 rader); längre listor får brytas som förut. */
  .cv[data-tpl="akademisk"] .lv:not(:has(li:nth-child(21))) { break-inside: avoid; }
}

/* ==========================================================================
   28 — ASURIA       formspråk: Asuria (kundmall)     layout: sideL
   Formgiven efter asuria.se: turkos spalt (deras #009CA6 via --accent), vit
   huvudyta och en varm orange accent (#E9A22E) som understrykning och mätare.
   Galleriet visar den bara för Asurias handledare (app.js), men stilen ligger
   alltid här så att ett delat dokument renderar rätt hos mottagaren.
   ========================================================================== */

.cv[data-tpl="asuria"] {
  --side-w: 32%;
  --asuria-orange: #E9A22E;
  --asuria-skiffer: #33475B;
  /* Turkosspalten är sist i listan så att den upprepas över utskriftssidor;
     bubblorna överst är no-repeat och hör till förstasidan — samma mjuka
     cirkelgest som på asuria.se, men i vitt på vitt-i-turkos så de aldrig
     stör läsbarheten (försvinner helt i svartvit utskrift). */
  background-image:
    radial-gradient(circle 120px at -34px -30px, rgba(255,255,255,.12) 0 99%, transparent 100%),
    radial-gradient(circle 64px at 200px 88px, rgba(255,255,255,.08) 0 99%, transparent 100%),
    radial-gradient(circle 30px at 120px 190px, rgba(255,255,255,.10) 0 99%, transparent 100%),
    linear-gradient(to right, var(--accent) 0 32%, transparent 32% 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.cv[data-tpl="asuria"] .cv-head {
  display: grid; grid-template-columns: 32% 1fr;
  padding: var(--pad-y) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="asuria"] .cv-photo {
  grid-column: 1; justify-self: center;
  border: 4px solid rgba(255,255,255,.55);
}
.cv[data-tpl="asuria"] .cv-head__text { grid-column: 2; padding: 0 var(--pad-x) 0 34px; }
/* Manrope: samma runda geometri som Asurias gemena logotyp. Namn och rubriker
   i deras mörka skiffer — brödtexten följer kandidatens typsnittsval. */
.cv[data-tpl="asuria"] .cv-name {
  font-family: "Manrope", "Montserrat", sans-serif;
  font-weight: 800; letter-spacing: -.02em; font-size: calc(var(--fs) * 2.35);
  color: var(--asuria-skiffer);
}
.cv[data-tpl="asuria"] .cv-role {
  color: var(--asuria-orange); font-weight: 700;
  font-family: "Manrope", "Montserrat", sans-serif;
}
/* det orangea avstampet under namnet — samma gest som knapparna på asuria.se */
.cv[data-tpl="asuria"] .cv-head__text::after {
  content: ""; display: block; width: 52px; height: 5px; border-radius: 999px;
  background: var(--asuria-orange); margin-top: 12px;
}
.cv[data-tpl="asuria"] .cv-side {
  color: #fff; padding-top: calc(var(--gap) * 1.6);
  /* lite extra textbredd i 32 %-spalten så adresser slipper tappa en ensam
     bokstav på egen rad */
  padding-left: 42px; padding-right: 20px;
}
.cv[data-tpl="asuria"] .cv-side .s__h {
  color: #fff; font-family: "Manrope", "Montserrat", sans-serif;
  font-weight: 800; font-size: calc(var(--fs) * .78);
  letter-spacing: .14em; text-transform: uppercase;
  /* prickad avdelare — ekot av sajtens prickade kurvlinjer */
  border-bottom: 2px dotted rgba(255,255,255,.45); padding-bottom: 7px;
}
.cv[data-tpl="asuria"] .cv-side .ct li,
.cv[data-tpl="asuria"] .cv-side .dt dt { color: rgba(255,255,255,.92); }
/* smalare rader så adresser slipper brytas mitt i ordet i 32 %-spalten */
.cv[data-tpl="asuria"] .cv-side .ct li { font-size: calc(var(--fs) * .87); }
.cv[data-tpl="asuria"] .cv-side .ci { color: rgba(255,255,255,.85); }
/* flyttar kandidaten sektioner till spalten får accentfärgad meta inte
   drunkna i turkosen (samma skydd som Gavel) */
.cv[data-tpl="asuria"] .cv-side .e__meta { color: rgba(255,255,255,.88); }
.cv[data-tpl="asuria"] .cv-side .e__date { color: rgba(255,255,255,.72); }
.cv[data-tpl="asuria"] .cv-side .rt li::marker { color: var(--asuria-orange); }
.cv[data-tpl="asuria"] .cv-main .s__h {
  font-family: "Manrope", "Montserrat", sans-serif;
  font-weight: 800; font-size: calc(var(--fs) * .82);
  letter-spacing: .13em; text-transform: uppercase; color: var(--asuria-skiffer);
}
.cv[data-tpl="asuria"] .cv-main .s__h::after {
  content: ""; display: block; width: 32px; height: 4px; border-radius: 999px;
  background: var(--asuria-orange); margin-top: 6px;
}
.cv[data-tpl="asuria"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="asuria"] .tg li {
  background: rgba(255,255,255,.16); border-radius: 999px;
  padding: 2px 12px; font-size: calc(var(--fs) * .86);
}
/* i huvudytan (flyttad sektion) blir pillren turkostonade i stället */
.cv[data-tpl="asuria"] .cv-main .tg li { background: var(--accent-soft); }
/* Spalten är smal: namnet får hela raden, mätaren och nivåordet delar nästa —
   annars bryts "Projektstyrning" mitt i och nivån drunknar i turkosen. */
.cv[data-tpl="asuria"] .cv-side .lv__row { grid-template-columns: auto 1fr; gap: 3px 10px; }
.cv[data-tpl="asuria"] .cv-side .lv__name { grid-column: 1 / -1; }
.cv[data-tpl="asuria"] .cv-side .lv__row::after { color: rgba(255,255,255,.78); justify-self: end; }
.cv[data-tpl="asuria"] .cv-side .lv__meter i {
  width: calc(var(--fs) * .46); height: calc(var(--fs) * .46);
  border-radius: 50%; background: rgba(255,255,255,.32);
}
.cv[data-tpl="asuria"] .cv-side .lv__meter i.is-on { background: var(--asuria-orange); }
.cv[data-tpl="asuria"] .cv-main .lv__meter i {
  width: calc(var(--fs) * .46); height: calc(var(--fs) * .46);
  border-radius: 50%; background: var(--accent-line);
}
.cv[data-tpl="asuria"] .cv-main .lv__meter i.is-on { background: var(--accent); }
.cv[data-tpl="asuria"] .e__meta { color: var(--doc-mut); }
/* Kundmall = kundens dokument fullt ut — aldrig någon Talea-rad, oavsett
   inställning eller var dokumentet visas (Mahmoud 11/8). */
.cv[data-tpl="asuria"] .cv-credit { display: none; }
/* Brev: ingen turkosspalt att luta sig mot — huvudet flyttar hem till vänster-
   kanten som i Gavel. Släcks här eftersom blocket ligger efter den generella
   .cv[data-doc="letter"]-regeln och annars vinner på ordning (= buggen att
   gradienten låg kvar på brevet). */
.cv[data-doc="letter"][data-tpl="asuria"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="asuria"] .cv-head {
  display: flex; padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="asuria"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="asuria"] .cv-photo {
  border-color: var(--accent-line); background-color: #EBE7ED;
}

/* ==========================================================================
   Handledarfyndet 28/8: långa FRITEXTDATUM ("Studier 2017–2020, återupptagna
   2023") är nowrap som alla datum och krossade titeln till en teckenbred
   pelare — bokstav för bokstav på höjden. Två symmetriska motmedel, sist i
   filen så de vinner ordningsstriden mot mallarnas egna e__row-varianter:
   1) Fritextdatum får radbrytas och tar max 60 % av raden — genererade
      intervall (start–slut) behåller nowrap och påverkas inte alls.
   2) I sidospalten staplas posten alltid: datumet under titeln. En spalt på
      ~30 % rymmer aldrig titel och datum sida vid sida.
   ========================================================================== */
.e__date--fri { white-space: normal; max-width: 60%; }
.cv .cv-side .e__row { display: block; }
.cv .cv-side .e__row .e__date { white-space: normal; max-width: none; margin-top: 2px; }

/* ==========================================================================
   Granskningen 2/9 — smala spalter och avsändarraden
   Sist i filen så att reglerna vinner ordningsstriden mot mallarnas egna.
   ========================================================================== */

/* Smala spalter (≤ 32 %) satte namn + nivåord i ett `1fr auto`-rutnät, och
   långa ord ("Processkartläggning") bröts mitt i. Raden är i stället en
   radbrytande flexrad: ryms båda står de sida vid sida med nivån
   högerställd, annars lägger sig nivån under namnet — bara när det behövs.
   Namnet får inte krympa under sitt längsta ord (break-word i stället för
   anywhere), så avstavningen ovan får göra jobbet. Mätaren är släckt i
   alla dessa (Kompass, som hade cirkeln kvar, gallrades 2/9). */
.cv[data-tpl="kompakt"] .lv__row,
.cv[data-tpl="relief"] .lv__row,
.cv[data-tpl="gavel"] .cv-side .lv__row,
.cv[data-tpl="krets"] .cv-side .lv__row,
.cv[data-tpl="stav"] .cv-side .lv__row,
.cv[data-tpl="pelare"] .cv-side .lv__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 10px; row-gap: 1px;
}
.cv[data-tpl="kompakt"] .lv__row .lv__name,
.cv[data-tpl="relief"] .lv__row .lv__name,
.cv[data-tpl="gavel"] .cv-side .lv__row .lv__name,
.cv[data-tpl="krets"] .cv-side .lv__row .lv__name,
.cv[data-tpl="stav"] .cv-side .lv__row .lv__name,
.cv[data-tpl="pelare"] .cv-side .lv__row .lv__name { flex: 1 1 auto; overflow-wrap: break-word; }
.cv[data-tpl="kompakt"] .lv__row::after,
.cv[data-tpl="relief"] .lv__row::after,
.cv[data-tpl="gavel"] .cv-side .lv__row::after,
.cv[data-tpl="krets"] .cv-side .lv__row::after,
.cv[data-tpl="stav"] .cv-side .lv__row::after,
.cv[data-tpl="pelare"] .cv-side .lv__row::after { flex: 0 0 auto; margin-left: auto; }

/* Avsändarraden stod på den färgade vänsterspalten i Kil, Skiffer, Modern,
   Sammet (grå text på mörk botten). I vänsterspaltade mallar flyttar den
   in under huvudkolumnen, i linje med dess text. */
.cv[data-layout="sideL"] .cv-credit { margin-left: calc(var(--side-w) + var(--pad-x)); }

/* ==========================================================================
   GRUNDEN SOM ALLA MALLAR DELAR (2/9) — ikoner, presentation, marginaltext
   Sist i filen med avsikt: reglerna ska vinna ordningsstriden mot mallarnas
   egna, och specificiteten är vald så att de slår även de tyngsta
   (Sammets .cv-side .lv__meter i:nth-child(n).is-on).
   ========================================================================== */

/* --- Ikoner vid rubriker ----------------------------------------------------
   render.js skriver <svg class="s__ikon"><use href="#ik-<typ>"/></svg> först
   i .s__h när design.icons är på, och sätter data-icons="on" på .cv. Ikonen
   är 1em i rubrikens egen färg, strecktecknad som kontaktikonerna, och sitter
   optiskt mot versalhöjden (-.14em). I flexrubriker (gap ≥ 8px) nollas
   marginalen så att gapet ensamt bär avståndet. */
.cv .s__ikon { display: none; }
.cv[data-icons="on"] .s__h .s__ikon {
  display: inline-block; width: 1em; height: 1em; flex: none;
  vertical-align: -.14em; margin-right: .45em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.cv[data-icons="on"] :is([data-tpl="modern"], [data-tpl="verkstad"], [data-tpl="kort"],
  [data-tpl="journal"], [data-tpl="parla"], [data-tpl="kontur"], [data-tpl="balans"],
  [data-tpl="sammet"], [data-tpl="krets"], [data-tpl="kapitel"]) .s__h .s__ikon,
.cv[data-icons="on"]:is([data-tpl="modern"], [data-tpl="verkstad"], [data-tpl="kort"],
  [data-tpl="journal"], [data-tpl="parla"], [data-tpl="kontur"], [data-tpl="balans"],
  [data-tpl="sammet"], [data-tpl="krets"], [data-tpl="kapitel"]) .s__h .s__ikon { margin-right: 0; }
/* Smala rubrikkolumner (sidokolumner, Trycks/Rens/Kontors etikettspalt):
   en radbruten rubrik hänger in under sin egen text, inte under ikonen —
   listans hängande indrag. Flexrubriker (Modern) och Stävs utfallande
   linje lämnas: där bär flexen respektive pad-x måtten. */
.cv[data-icons="on"] :is(.cv-side, [data-tpl="tryck"], [data-tpl="ren"], [data-tpl="kontor"]) .s__h,
.cv[data-icons="on"]:is([data-tpl="tryck"], [data-tpl="ren"], [data-tpl="kontor"]) .s__h { padding-left: 1.45em; text-indent: -1.45em; }
.cv[data-icons="on"]:is([data-tpl="modern"], [data-tpl="stav"]) .cv-side .s__h { padding-left: 0; text-indent: 0; }
.cv[data-icons="on"][data-tpl="stav"] .cv-side .s__h { padding-left: var(--pad-x); }
/* Mallar med egen markör före rubriken (prick, ruta, streck): ikonen TAR
   markörens plats — två tecken framför samma ord är en för mycket. */
.cv[data-icons="on"][data-tpl="kant"] .s__h { padding-left: 0; }
.cv[data-icons="on"][data-tpl="kant"] .s__h::before,
.cv[data-icons="on"][data-tpl="parla"] .s__h::before,
.cv[data-icons="on"][data-tpl="kort"] .s__h::before,
.cv[data-icons="on"][data-tpl="verkstad"] .s__h::before,
.cv[data-icons="on"][data-tpl="journal"] .s__h::before { display: none; }
/* Kapitel: numret ÄR markören — 01 + ikon + rubrik blir tre led. Ikonen
   döljs i satsytan (sidokolumn finns inte). */
.cv[data-tpl="kapitel"] .cv-main .s__ikon { display: none; }
/* Krets bär redan egna plattikoner i satsytan; spritens ikon skulle
   dubblera dem. Sidokolumnens rubriker saknar plattor och får ikonen. */
.cv[data-tpl="krets"] .cv-main .s__ikon { display: none; }
/* Signatur: etiketten är fylld på span — med ikon på flyttar fyllningen
   till hela rubriken så att ikonen står INUTI etiketten, inte bredvid. */
.cv[data-icons="on"][data-tpl="signatur"] .s__h {
  display: inline-flex; align-items: center;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; padding: 3px 10px 4px;
}
.cv[data-icons="on"][data-tpl="signatur"] .s__h span { background-image: none; padding: 0; }
/* Sammet: accentflaggan står kvar (den är mallens svar på mörkret), ikonen
   efter den — flaggan är yta, ikonen tecken, de läses inte som dubbla. */

/* --- Presentation per sektion -------------------------------------------------
   render.js sätter data-style="bars|dots|text|tags" på .s för färdigheter och
   språk när kandidaten valt; utan attribut gäller mallens standard (reglerna
   ovan i filen). Färgerna går genom --lv-on/--lv-off/--lv-ord och
   --tag-bg/--tag-fg, som de vita sidokolumnerna skriver om. */
.cv {
  --lv-on: var(--accent);
  --lv-off: var(--accent-soft);
  --lv-prick: var(--accent-line);
  --lv-ord: var(--doc-mut);
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--accent);
}
.cv[data-tpl="skiffer"] .cv-side, .cv[data-tpl="sidopanel"] .cv-side,
.cv[data-tpl="casual"] .cv-side, .cv[data-tpl="modern"] .cv-side,
.cv[data-tpl="gavel"] .cv-side, .cv[data-tpl="utsikt"] .cv-side,
.cv[data-tpl="atelje"] .cv-side, .cv[data-tpl="krets"] .cv-side,
.cv[data-tpl="kil"] .cv-side, .cv[data-tpl="stav"] .cv-side,
.cv[data-tpl="sammet"] .cv-side, .cv[data-tpl="pelare"] .cv-side,
.cv[data-tpl="asuria"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.26); --lv-prick: rgba(255,255,255,.34);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.14); --tag-fg: #fff;
}
.cv[data-tpl="asuria"] .cv-side { --lv-on: var(--asuria-orange); }
.cv[data-tpl="afton"] {
  --lv-off: rgba(242,238,232,.18); --lv-prick: rgba(242,238,232,.3);
  --tag-bg: rgba(242,238,232,.1); --tag-fg: var(--doc-ink);
}
/* Nivå 0 (ingen nivå vald) skriver inget ord i någon stil. */
.cv .lv__row[data-niva=""]::after { content: none; }

/* bars — stapeln ur Talea: spår, fyllning i femtedelar, nivåordet till höger */
.cv .s[data-style="bars"] .lv__row {
  display: grid; grid-template-columns: 1fr calc(var(--fs) * 7) calc(var(--fs) * 7.5);
  gap: 4px 10px; align-items: center; padding: 0; border: 0; background: none;
}
.cv .s[data-style="bars"] .lv__row .lv__name,
.cv .s[data-style="dots"] .lv__row .lv__name {
  display: block; grid-column: auto; flex: none; border: 0; padding: 0; margin: 0;
}
.cv .s[data-style="bars"] .lv__row .lv__name::before,
.cv .s[data-style="dots"] .lv__row .lv__name::before { content: none; }
.cv .s[data-style="bars"] .lv__row::after,
.cv .s[data-style="dots"] .lv__row::after {
  content: attr(data-niva); display: block; margin: 0; flex: none;
  color: var(--lv-ord); font-size: calc(var(--fs) * .88); font-style: normal;
  justify-self: end; text-align: right;
}
.cv .s[data-style="bars"] .lv__meter {
  display: block; order: 0; grid-column: auto; position: relative; overflow: hidden;
  width: auto; height: 5px; margin: 0; border-radius: 99px; background: var(--lv-off);
}
.cv .s[data-style="bars"] .lv__meter::after { content: none; }
.cv .s[data-style="bars"] .lv__meter i.lv__u {
  display: block; position: absolute; top: 0; bottom: 0; left: 0;
  width: 0; height: auto; border: 0; border-radius: 99px; background: none;
}
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on { background: var(--lv-on); }
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on:nth-child(1) { width: 20%; }
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on:nth-child(2) { width: 40%; }
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on:nth-child(3) { width: 60%; }
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on:nth-child(4) { width: 80%; }
.cv .s[data-style="bars"] .lv__meter i.lv__u.is-on:nth-child(5) { width: 100%; }
/* smala spalter (sidokolumn, tvåspaltiga listor i Kontor/Akademisk/
   Signatur): namnet får raden, spåret och ordet delar nästa */
.cv .cv-side .s[data-style="bars"] .lv__row,
.cv:is([data-tpl="kontor"], [data-tpl="akademisk"], [data-tpl="signatur"]) .s[data-style="bars"] .lv__row { grid-template-columns: 1fr calc(var(--fs) * 7.5); }
.cv .cv-side .s[data-style="bars"] .lv__row .lv__name,
.cv:is([data-tpl="kontor"], [data-tpl="akademisk"], [data-tpl="signatur"]) .s[data-style="bars"] .lv__row .lv__name { grid-column: 1 / -1; }

/* dots — fem prickar, fyllda efter nivån */
.cv .s[data-style="dots"] .lv__row {
  display: grid; grid-template-columns: 1fr auto calc(var(--fs) * 7.5);
  gap: 4px 10px; align-items: center; padding: 0; border: 0; background: none;
}
.cv .s[data-style="dots"] .lv__meter {
  display: flex; gap: 4px; order: 0; grid-column: auto; position: static;
  width: auto; height: auto; margin: 0; background: none; border-radius: 0; overflow: visible;
}
.cv .s[data-style="dots"] .lv__meter::after { content: none; }
.cv .s[data-style="dots"] .lv__meter i.lv__u {
  display: block; position: static; border: 0;
  width: calc(var(--fs) * .5); height: calc(var(--fs) * .5);
  border-radius: 50%; background: var(--lv-prick);
}
.cv .s[data-style="dots"] .lv__meter i.lv__u.is-on { background: var(--lv-on); width: calc(var(--fs) * .5); }
.cv .cv-side .s[data-style="dots"] .lv__row,
.cv:is([data-tpl="kontor"], [data-tpl="akademisk"], [data-tpl="signatur"]) .s[data-style="dots"] .lv__row { grid-template-columns: auto 1fr; }
.cv .cv-side .s[data-style="dots"] .lv__row .lv__name,
.cv:is([data-tpl="kontor"], [data-tpl="akademisk"], [data-tpl="signatur"]) .s[data-style="dots"] .lv__row .lv__name { grid-column: 1 / -1; }

/* text — "Namn — nivåord" på en rad, ingen dekor */
.cv .s[data-style="text"] .lv__row { display: block; padding: 0; border: 0; background: none; }
.cv .s[data-style="text"] .lv__meter { display: none; }
.cv .s[data-style="text"] .lv__row .lv__name { display: inline; border: 0; padding: 0; margin: 0; }
.cv .s[data-style="text"] .lv__row .lv__name::before { content: none; }
.cv .s[data-style="text"] .lv__row::after {
  content: " — " attr(data-niva); display: inline; margin: 0;
  color: var(--lv-ord); font-size: calc(var(--fs) * .88); font-style: normal;
}
.cv .s[data-style="text"] .lv__row[data-niva=""]::after { content: none; }

/* tags — pillerchips utan nivå (samma sättning som Taleas taggar) */
.cv .s[data-style="tags"] .lv { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.cv .s[data-style="tags"] .lv__row {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-fg);
  font-size: calc(var(--fs) * .88); font-weight: 500;
}
.cv .s[data-style="tags"] .lv__row .lv__name { display: inline; border: 0; padding: 0; margin: 0; }
.cv .s[data-style="tags"] .lv__row .lv__name::before { content: none; }
.cv .s[data-style="tags"] .lv__meter { display: none; }
.cv .s[data-style="tags"] .lv__row::after { content: none; }

/* Taggsektioner (egenskaper, hobbys …) har två stilar: tags = samma chips,
   text = löpande rad med kommatecken (Klars sättning), mallens egna .tg-regler
   viker för valet. */
.cv .s[data-style="tags"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv .s[data-style="tags"] .tg li {
  display: inline-block; padding: 3px 12px; border: 0; border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-fg);
  font-size: calc(var(--fs) * .88); font-weight: 500;
}
.cv .s[data-style="tags"] .tg li::before,
.cv .s[data-style="tags"] .tg li::after { content: none; }
.cv .s[data-style="text"] .tg { display: block; }
.cv .s[data-style="text"] .tg li {
  display: inline; padding: 0; border: 0; background: none; border-radius: 0;
  color: inherit; font-size: inherit; font-weight: inherit;
}
.cv .s[data-style="text"] .tg li::before { content: none; }
.cv .s[data-style="text"] .tg li:not(:last-child)::after { content: ", "; }

/* --- Löpande sidhuvud på sida 2+ (2/9) -----------------------------------------
   app.js skriver "Namn · sidnummer" HÖGERSTÄLLT i @page-marginalboxen (samma
   högerpadding som kolumnen) och läser färgen ur
   getComputedStyle(cv).getPropertyValue('--marg-text'). Boxen målas med
   arkets upprepande lager (marginalbakgrund), så texten står på det som
   finns vid arkets HÖGERKANT: vitt ark eller vänsterspalt → mörk text;
   mörk högerspalt (Gavel, Pelare), helmörkt ark (Afton) eller färgad bård
   → vit. Kompakts ljusgrå högerspalt bär den mörka. */
.cv { --marg-text: rgba(29,26,33,.6); }
.cv[data-tpl="afton"], .cv[data-tpl="bard"],
.cv[data-tpl="gavel"], .cv[data-tpl="utsikt"], .cv[data-tpl="pelare"] { --marg-text: rgba(255,255,255,.78); }
/* brevet är enspaltigt utan spalter — bara helmörkt ark och bård behåller vitt */
.cv[data-doc="letter"] { --marg-text: rgba(29,26,33,.6); }
.cv[data-doc="letter"][data-tpl="afton"], .cv[data-doc="letter"][data-tpl="bard"] { --marg-text: rgba(255,255,255,.78); }

/* ==========================================================================
   NIO NYA 2/9 KVÄLL — sammanslagna EFTER grunden ovan med avsikt: blocken är
   skrivna för att vinna ordningsstriden mot de generella reglerna (egna
   :not([data-style])-vakter, egna brevsläckningar). Ordning: Fasad, Stråk,
   Skrå, Ribba, Karm, Tablå, Skylt, Ruta, Bricka. Byggrapporter och bevis i
   scratchpad/steg3/bygg/<id>/ (2/9).
   ========================================================================== */

/* ==========================================================================
   FASAD          formspråk: Klassiker      layout: sideL
   "Tornet": fotot fyller spaltens topp kant i kant, namnet i versaler
   UNDER fotot inne i spalten, och satsytan börjar högst upp bredvid bilden.
   Rubrikerna i satsytan som fyllda accentband med vit text, arbetsgivare
   och datum i andrafärgen. Marknadens vanligaste grepp (Canva, cv-mallen),
   som ingen av de 49 hade — ritat från grunden på vår DOM.
   Gridknepet: .cv-inner är ett rutnät med spalten som kolumn 1; huvudet
   ligger i rad 1, sidokolumnen i rad 2 och satsytan spänner båda raderna.
   .cv-cols är display:contents så att spalt och satsyta blir rutnätets
   egna barn. ALLA fem barn har explicit grid-area (grid-fällan, LÄGET §3),
   liksom foto och text inne i huvudet. Fragmenterar i utskrift (torn-testet
   2/9): sida 2 fortsätter med spalt och satsyta sida vid sida.
   ========================================================================== */

.cv[data-tpl="fasad"] {
  --side-w: 36%;
  --tpl-font: "Inter", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 36%, transparent 36% 100%);
}
.cv[data-tpl="fasad"] .cv-inner {
  display: grid; grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: auto 1fr auto auto;
}
.cv[data-tpl="fasad"] .cv-head {
  grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr;
  grid-template-rows: auto auto; padding: 0; gap: 0; color: #fff;
}
/* Kant i kant: bilden ÄR spaltens topp, oavsett vald fotoform. Höjden är
   23 fs (304 px, 80 mm) × fotoreglaget, spärrad vid 40 % av arket så att
   satsytans första rubrik aldrig trycks ned under huvudtexten. */
.cv[data-tpl="fasad"] .cv-photo {
  grid-area: 1 / 1; justify-self: stretch; width: 100%;
  height: calc(var(--fs) * 23 * var(--fotoskala, 1)); max-height: 450px;
  margin: 0; border-radius: 0 !important; background-position: center 20%;   /* hjässan ryms (center top klippte den) */
}
.cv[data-tpl="fasad"] .cv-head__text { grid-area: 2 / 1; padding: 26px 22px 0 var(--pad-x); }
/* utan foto kliver texten upp och spalten är mättad ändå — formen bär (som Vy) */
.cv[data-tpl="fasad"] .cv-head:not(:has(.cv-photo)) .cv-head__text { grid-area: 1 / 1; padding-top: var(--pad-y); }
/* Ett ord per rad — CLARA / BERG som i förebilden. word-spacing bredare än
   spalten tvingar radbrytning vid varje mellanslag; anywhere är nödfallet
   för ett efternamn som ensamt är bredare än spalten. */
.cv[data-tpl="fasad"] .cv-name {
  color: #fff; font-weight: 800; font-size: calc(var(--fs) * 1.9);
  line-height: 1.06; letter-spacing: .02em; text-transform: uppercase;
  word-spacing: 100em; overflow-wrap: anywhere;
}
.cv[data-tpl="fasad"] .cv-role {
  color: rgba(255,255,255,.85); font-weight: 600; font-size: calc(var(--fs) * .8);
  letter-spacing: .16em; text-transform: uppercase; margin-top: 10px;
}
.cv[data-tpl="fasad"] .cv-cols { display: contents; }
.cv[data-tpl="fasad"] .cv-side { grid-area: 2 / 1 / 3 / 2; color: #fff; padding: 30px 22px var(--pad-y) var(--pad-x); }
.cv[data-tpl="fasad"] .cv-main { grid-area: 1 / 2 / 3 / 3; padding: var(--pad-y) var(--pad-x) var(--pad-y) 30px; }
.cv[data-tpl="fasad"] .cv-foot { grid-area: 3 / 1 / 4 / 3; }
.cv[data-tpl="fasad"] .cv-credit { grid-area: 4 / 1 / 5 / 3; }
/* satsytan spänner två rader: utan align-content:start sträcks dess sektioner
   ut över hela höjden (.cv-cols align-items:start når inte ett contents-barn) */
.cv[data-tpl="fasad"] .cv-side, .cv[data-tpl="fasad"] .cv-main { align-content: start; }
/* sidfot och avsändarrad i linje med satsytans text (den generella sideL-
   regeln räknar med pad-x; här börjar satsytan 30 px in) */
.cv[data-tpl="fasad"]:not([data-doc="letter"]) .cv-foot,
.cv[data-tpl="fasad"]:not([data-doc="letter"]) .cv-credit { margin-left: calc(var(--side-w) + 30px); }

/* Spaltens rubriker i en ljus ton av andrafärgen — förebildens ljusblå på
   marinblått. Reserven är nästan vitt. */
.cv[data-tpl="fasad"] .cv-side .s__h {
  color: rgba(255,255,255,.9);
  color: color-mix(in srgb, var(--accent2) 40%, #fff);
  font-weight: 700; font-size: calc(var(--fs) * .78); letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 10px;
}
.cv[data-tpl="fasad"] .cv-side .ct li,
.cv[data-tpl="fasad"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="fasad"] .cv-side .dt dd { color: #fff; }
.cv[data-tpl="fasad"] .cv-side .ci { color: rgba(255,255,255,.7); }
/* flyttade sektioner: meta och datum får aldrig vara accent på accent */
.cv[data-tpl="fasad"] .cv-side .e__title { color: #fff; }
.cv[data-tpl="fasad"] .cv-side .e__meta { color: rgba(255,255,255,.9); }
.cv[data-tpl="fasad"] .cv-side .e__date { color: rgba(255,255,255,.78); }
.cv[data-tpl="fasad"] .cv-side .rt li::marker { color: rgba(255,255,255,.7); }
.cv[data-tpl="fasad"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.26); --lv-prick: rgba(255,255,255,.34);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.14); --tag-fg: #fff;
}

/* Färdigheter och taggar som punktlista med liten rund markör — inga mätare
   (nivåordet står i klartext till höger). :not([data-style]) lämnar de fyra
   valbara stilarna orörda. */
.cv[data-tpl="fasad"] .lv__meter { display: none; }
.cv[data-tpl="fasad"] .s:not([data-style]) .lv__row {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px;
}
.cv[data-tpl="fasad"] .s:not([data-style]) .lv__name,
.cv[data-tpl="fasad"] .s:not([data-style]) .tg li {
  flex: 1 1 auto; overflow-wrap: break-word; position: relative; padding-left: 14px;
}
.cv[data-tpl="fasad"] .s:not([data-style]) .lv__name::before,
.cv[data-tpl="fasad"] .s:not([data-style]) .tg li::before {
  content: ""; position: absolute; left: 1px; top: .52em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75;
}
.cv[data-tpl="fasad"] .s:not([data-style]) .lv__row::after {
  flex: 0 0 auto; margin-left: auto; color: var(--lv-ord); font-size: calc(var(--fs) * .84);
}
.cv[data-tpl="fasad"] .cv-main .s:not([data-style]) .lv__name::before,
.cv[data-tpl="fasad"] .cv-main .s:not([data-style]) .tg li::before { background: var(--accent); opacity: 1; }

/* Satsytans rubriker: fyllda accentband över hela satsbredden, vit text. */
.cv[data-tpl="fasad"] .cv-main .s__h {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px 7px; margin: 0 0 12px;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff; font-weight: 800; font-size: calc(var(--fs) * .8);
  letter-spacing: .16em; text-transform: uppercase;
}
.cv[data-icons="on"][data-tpl="fasad"] .cv-main .s__h .s__ikon { margin-right: 0; }

/* Posten: titel i accent, arbetsgivare | datum på EN rad i andrafärgen
   ("Perssons mjukvara | Sep 2018 – nu"). .e__main är display:contents och raden
   en radbrytande flexrad: titeln tar hela bredden, metan och datumet delar
   nästa rad (ryms inte datumet viker det ned). Inline-varianten (block i
   inline) gav överlapp vid sidbrytning i Chrome — undvik den. Andrafärgen skyddas mot en fri färgs ljusa följeslagare genom
   22 % bläck; reservraden är hex2 rakt av (kuraterad, 4,25:1+ på vitt). */
.cv[data-tpl="fasad"] .cv-main .e__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
.cv[data-tpl="fasad"] .cv-main .e__main { display: contents; }
.cv[data-tpl="fasad"] .e__title { font-weight: 700; font-size: calc(var(--fs) * 1.02); }
.cv[data-tpl="fasad"] .cv-main .e__title { flex: 0 0 100%; color: var(--accent); }
.cv[data-tpl="fasad"] .e__meta {
  color: var(--accent2, #56728F);
  color: color-mix(in srgb, var(--accent2, #56728F) 78%, var(--doc-ink));
  font-weight: 500; font-size: calc(var(--fs) * .86);
}
.cv[data-tpl="fasad"] .cv-main .e__meta { flex: 0 1 auto; min-width: 0; }
/* referensernas kontaktrad (andra metan) på egen rad */
.cv[data-tpl="fasad"] .cv-main .e__meta + .e__meta { flex: 0 0 100%; }
.cv[data-tpl="fasad"] .cv-main .e__date {
  flex: 0 0 auto; white-space: nowrap; font-size: calc(var(--fs) * .86); font-weight: 500;
  color: var(--accent2, #56728F);
  color: color-mix(in srgb, var(--accent2, #56728F) 78%, var(--doc-ink));
}
.cv[data-tpl="fasad"] .cv-main .e__main:has(.e__meta) + .e__date::before { content: "|"; margin: 0 .4em; }
.cv[data-tpl="fasad"] .rt { margin-top: 5px; }

/* Utskrift: Chrome fragmenterar rutnät opålitligt — med det långa
   kontrolldokumentet hamnade nästa sektions rubrik OVANPÅ en post som
   knuffats till sida 2 (skiftet syntes bara vid vissa brytlägen). Satsytan
   och sektionskropparna är därför block med marginaler i samma rytm som
   basens grid-gap; skärmen ser exakt likadan ut. */
.cv[data-tpl="fasad"] .cv-main { display: block; }
.cv[data-tpl="fasad"] .cv-main > .s + .s { margin-top: var(--gap); }
.cv[data-tpl="fasad"] .cv-main .s__b { display: block; }
.cv[data-tpl="fasad"] .cv-main .s__b > * + * { margin-top: calc(var(--gap) * .62); }

/* Brev: inget torn — rutnätet tillbaka till flex, huvudet hem med rund
   bild i 8 fs (Ateljés brevregel som mall) och mörk text. Banden följer
   med i brevets bilagor: de är mallens identitet. Sidgradienten släcks här
   eftersom blocket ligger efter den generella brevregeln i filen. */
.cv[data-doc="letter"][data-tpl="fasad"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="fasad"] .cv-inner { display: flex; }
.cv[data-doc="letter"][data-tpl="fasad"] .cv-head {
  display: flex; align-items: center; padding: var(--pad-y) var(--pad-x) 0; color: var(--doc-ink);
}
.cv[data-doc="letter"][data-tpl="fasad"] .cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  border-radius: 50% !important; background-position: center;
}
.cv[data-doc="letter"][data-tpl="fasad"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="fasad"] .cv-name { color: var(--doc-ink); word-spacing: normal; }
.cv[data-doc="letter"][data-tpl="fasad"] .cv-role { color: var(--accent); }
.cv[data-doc="letter"][data-tpl="fasad"] .cv-main { padding: calc(var(--gap) * 1.2) var(--pad-x) var(--pad-y); }

/* ==========================================================================
   STRÅK          formspråk: Klassiker      layout: sideL
   Tornet med cirkelfoto: bild, namn i vita versaler och en kort vit linje
   inne i den mättade spalten, satsytan från arkets topp. Satsytans rubriker
   som tonade band i andrafärgen — persika mot skiffer i standardparet —
   med rubriken i mörka spärrade versaler. Streckade rader i alla listor.
   Samma gridknep som Fasad (se det blocket); alla fem barn med grid-area.
   ========================================================================== */

.cv[data-tpl="strak"] {
  --side-w: 34%;
  --tpl-font: "Montserrat", sans-serif;
  background-image: linear-gradient(to right, var(--accent) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="strak"] .cv-inner {
  display: grid; grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: auto 1fr auto auto;
}
.cv[data-tpl="strak"] .cv-head {
  grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr;
  grid-template-rows: auto auto; padding: 40px 24px 0 var(--pad-x); gap: 20px 0; color: #fff;
}
.cv[data-tpl="strak"] .cv-photo {
  grid-area: 1 / 1; justify-self: center;
  width: calc(var(--fs) * 9.5 * var(--fotoskala, 1));
  height: calc(var(--fs) * 9.5 * var(--fotoskala, 1));
}
.cv[data-tpl="strak"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
.cv[data-tpl="strak"] .cv-head__text { grid-area: 2 / 1; }
.cv[data-tpl="strak"] .cv-head:not(:has(.cv-photo)) .cv-head__text { grid-area: 1 / 1; padding-top: 6px; }
/* HENRIETTA / EKBLOM — ett ord per rad (samma grepp som Fasad) */
.cv[data-tpl="strak"] .cv-name {
  color: #fff; font-weight: 700; font-size: calc(var(--fs) * 1.75);
  line-height: 1.1; letter-spacing: .04em; text-transform: uppercase;
  word-spacing: 100em; overflow-wrap: anywhere;
}
.cv[data-tpl="strak"] .cv-role {
  color: rgba(255,255,255,.8); font-weight: 700; font-size: calc(var(--fs) * .76);
  letter-spacing: .2em; text-transform: uppercase; margin-top: 8px;
}
/* den korta vita linjen som sluter namnblocket */
.cv[data-tpl="strak"] .cv-head__text::after {
  content: ""; display: block; height: 2px; background: rgba(255,255,255,.55); margin-top: 22px;
}
.cv[data-tpl="strak"] .cv-cols { display: contents; }
.cv[data-tpl="strak"] .cv-side { grid-area: 2 / 1 / 3 / 2; color: rgba(255,255,255,.85); padding: 26px 24px var(--pad-y) var(--pad-x); }
.cv[data-tpl="strak"] .cv-main { grid-area: 1 / 2 / 3 / 3; padding: 40px var(--pad-x) var(--pad-y) 30px; }
.cv[data-tpl="strak"] .cv-foot { grid-area: 3 / 1 / 4 / 3; }
.cv[data-tpl="strak"] .cv-credit { grid-area: 4 / 1 / 5 / 3; }
/* satsytan spänner två rader: utan align-content:start sträcks dess sektioner
   ut över hela höjden (.cv-cols align-items:start når inte ett contents-barn) */
.cv[data-tpl="strak"] .cv-side, .cv[data-tpl="strak"] .cv-main { align-content: start; }
/* sidfot och avsändarrad i linje med satsytans text (den generella sideL-
   regeln räknar med pad-x; här börjar satsytan 30 px in) */
.cv[data-tpl="strak"]:not([data-doc="letter"]) .cv-foot,
.cv[data-tpl="strak"]:not([data-doc="letter"]) .cv-credit { margin-left: calc(var(--side-w) + 30px); }

.cv[data-tpl="strak"] .cv-side .s__h {
  color: #fff; font-weight: 700; font-size: calc(var(--fs) * .8);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.cv[data-tpl="strak"] .cv-side .ct li,
.cv[data-tpl="strak"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="strak"] .cv-side .dt dd { color: #fff; }
.cv[data-tpl="strak"] .cv-side .ci { color: rgba(255,255,255,.7); }
.cv[data-tpl="strak"] .cv-side .e__title { color: #fff; }
.cv[data-tpl="strak"] .cv-side .e__meta { color: rgba(255,255,255,.9); }
.cv[data-tpl="strak"] .cv-side .e__date { color: rgba(255,255,255,.78); }
.cv[data-tpl="strak"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.26); --lv-prick: rgba(255,255,255,.34);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.14); --tag-fg: #fff;
}

/* Streckade rader: beskrivningar, färdigheter och taggar börjar med "– ",
   hängande så att en radbruten rad ställer sig under sitt eget ord. */
.cv[data-tpl="strak"] .rt ul { list-style: none; padding-left: 0; }
.cv[data-tpl="strak"] .rt li { padding-left: 13px; text-indent: -13px; margin-bottom: 1px; }
.cv[data-tpl="strak"] .rt li::before { content: "– "; }
.cv[data-tpl="strak"] .lv__meter { display: none; }
.cv[data-tpl="strak"] .s:not([data-style]) .lv__row {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px;
}
.cv[data-tpl="strak"] .s:not([data-style]) .lv__name,
.cv[data-tpl="strak"] .s:not([data-style]) .tg li {
  flex: 1 1 auto; overflow-wrap: break-word; padding-left: 13px; text-indent: -13px;
}
.cv[data-tpl="strak"] .s:not([data-style]) .lv__name::before,
.cv[data-tpl="strak"] .s:not([data-style]) .tg li::before { content: "– "; }
.cv[data-tpl="strak"] .s:not([data-style]) .lv__row::after {
  flex: 0 0 auto; margin-left: auto; color: var(--lv-ord); font-size: calc(var(--fs) * .84);
}
.cv[data-tpl="strak"] .s:not([data-style]) .tg { gap: 2px; }

/* Satsytans rubriker: tonade band i andrafärgen (26 % i vitt), rubriken i
   mörka spärrade versaler. Flex — inte block — så att rubrikikonen sitter
   inne i bandet. Reservraden utan color-mix är accentens soft-ton. */
.cv[data-tpl="strak"] .cv-main .s__h {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 8px; margin: 0 0 12px;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-image: linear-gradient(color-mix(in srgb, var(--accent2, #A2643A) 26%, #fff), color-mix(in srgb, var(--accent2, #A2643A) 26%, #fff));
  color: var(--doc-ink); font-weight: 700; font-size: calc(var(--fs) * .8);
  letter-spacing: .16em; text-transform: uppercase;
}
.cv[data-icons="on"][data-tpl="strak"] .cv-main .s__h .s__ikon { margin-right: 0; }

/* Posten: titel fet, arbetsgivare fet i dämpad ton med datumet i parentes
   på samma rad — "Portal Spelhubb (2017 – idag)". Samma flexrad som i Fasad. */
.cv[data-tpl="strak"] .cv-main .e__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
.cv[data-tpl="strak"] .cv-main .e__main { display: contents; }
.cv[data-tpl="strak"] .e__title { font-weight: 700; font-size: calc(var(--fs) * 1.02); }
.cv[data-tpl="strak"] .cv-main .e__title { flex: 0 0 100%; }
.cv[data-tpl="strak"] .e__meta { color: var(--doc-mut); font-weight: 700; font-size: calc(var(--fs) * .9); }
.cv[data-tpl="strak"] .cv-main .e__meta { flex: 0 1 auto; min-width: 0; }
/* referensernas kontaktrad (andra metan) på egen rad */
.cv[data-tpl="strak"] .cv-main .e__meta + .e__meta { flex: 0 0 100%; }
.cv[data-tpl="strak"] .cv-main .e__date { flex: 0 0 auto; font-weight: 600; font-size: calc(var(--fs) * .9); color: var(--doc-mut); }
.cv[data-tpl="strak"] .cv-main .e__main:has(.e__meta) + .e__date::before { content: "("; margin-left: .35em; }
.cv[data-tpl="strak"] .cv-main .e__main:has(.e__meta) + .e__date::after { content: ")"; }
.cv[data-tpl="strak"] .rt { margin-top: 5px; }

/* Utskrift: Chrome fragmenterar rutnät opålitligt — med det långa
   kontrolldokumentet hamnade nästa sektions rubrik OVANPÅ en post som
   knuffats till sida 2 (skiftet syntes bara vid vissa brytlägen). Satsytan
   och sektionskropparna är därför block med marginaler i samma rytm som
   basens grid-gap; skärmen ser exakt likadan ut. */
.cv[data-tpl="strak"] .cv-main { display: block; }
.cv[data-tpl="strak"] .cv-main > .s + .s { margin-top: var(--gap); }
.cv[data-tpl="strak"] .cv-main .s__b { display: block; }
.cv[data-tpl="strak"] .cv-main .s__b > * + * { margin-top: calc(var(--gap) * .62); }

/* Brev: flex tillbaka, huvudet hem med mörk text; banden följer med i
   bilagorna. Linjen under namnblocket utgår — den är spaltens gest. */
.cv[data-doc="letter"][data-tpl="strak"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="strak"] .cv-inner { display: flex; }
.cv[data-doc="letter"][data-tpl="strak"] .cv-head {
  display: flex; align-items: center; gap: 22px; padding: var(--pad-y) var(--pad-x) 0; color: var(--doc-ink);
}
.cv[data-doc="letter"][data-tpl="strak"] .cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  box-shadow: none;
}
.cv[data-doc="letter"][data-tpl="strak"] .cv-head__text::after { display: none; }
.cv[data-doc="letter"][data-tpl="strak"] .cv-name { color: var(--doc-ink); word-spacing: normal; }
.cv[data-doc="letter"][data-tpl="strak"] .cv-role { color: var(--accent); }
.cv[data-doc="letter"][data-tpl="strak"] .cv-main { padding: calc(var(--gap) * 1.2) var(--pad-x) var(--pad-y); }

/* ==========================================================================
   SKRÅ           formspråk: Klassiker      layout: sideR
   Mörkt huvud vars nederkant är en DIAGONAL över hela bredden (låg till
   vänster, hög till höger), accentspalt till höger och fotot i en cirkel
   som rider på sömmen inne i spalten. Två toner: huvudet är fast nästan
   svart med ett tonat objektivmönster (ren CSS, ingen bild), spalten bär
   palettfärgen. Diagonalen är 64 px — den får ALDRIG plattas (Svall-
   varningen), då är den "Spets fast snett".
   Huvudet är rakt; det mörka lagret med diagonalen ritas av .cv-head::before
   som sträcker sig 64 px under huvudets box. Så klipps varken foto eller
   text, och fotot kan hänga fritt under sömmen.
   ========================================================================== */

.cv[data-tpl="skra"] {
  --side-w: 36%;
  --tpl-font: "Montserrat", sans-serif;
  --skra: #26272B;
  --skra-lut: 64px;
  --marg-text: rgba(255,255,255,.78);
  background-image: linear-gradient(to left, var(--accent) 0 36%, transparent 36% 100%);
}
.cv[data-tpl="skra"] .cv-head {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 1fr var(--side-w); gap: 0;
  padding: 0; min-height: 224px; color: #fff;
}
/* huvudets mörker + diagonalen i ett lager: mönstret är tre svaga ljusa
   skivor (förebildens objektiv), klippt snett i nederkanten */
.cv[data-tpl="skra"] .cv-head::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: 0; bottom: calc(0px - var(--skra-lut));
  background-image:
    radial-gradient(circle at 17% 30%, rgba(255,255,255,.075) 0 60px, transparent 61px),
    radial-gradient(circle at 44% 96%, rgba(255,255,255,.05) 0 92px, transparent 93px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.06) 0 50px, transparent 51px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.035) 0 120px, transparent 121px),
    linear-gradient(var(--skra), var(--skra));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skra-lut)), 0 100%);
}
.cv[data-tpl="skra"] .cv-head__text { grid-area: 1 / 1; align-self: start; padding: 46px 30px 34px var(--pad-x); }
.cv[data-tpl="skra"] .cv-name { color: #fff; font-weight: 700; font-size: calc(var(--fs) * 2.4); letter-spacing: -.01em; }
.cv[data-tpl="skra"] .cv-role {
  color: rgba(255,255,255,.85); font-weight: 500; font-size: calc(var(--fs) * .8);
  letter-spacing: .3em; text-transform: uppercase; margin-top: 10px;
}
.cv[data-tpl="skra"] .ct--inline li { color: rgba(255,255,255,.85); }
.cv[data-tpl="skra"] .ct--inline .ci { color: rgba(255,255,255,.65); }
/* Fotot: 11 fs, centrerat i spaltkolumnen, halva bilden under huvudets
   box. Mörk ring (förebildens) — den smälter in i huvudet upptill och
   tecknar cirkeln mot spalten nedtill. */
.cv[data-tpl="skra"] .cv-photo {
  grid-area: 1 / 2; justify-self: center; align-self: end;
  width: calc(var(--fs) * 11 * var(--fotoskala, 1));
  height: calc(var(--fs) * 11 * var(--fotoskala, 1));
  margin-bottom: calc(var(--fs) * -5.5 * var(--fotoskala, 1));
  position: relative; z-index: 2;
}
.cv[data-tpl="skra"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 5px var(--skra); }
/* Sömmen är lägst till vänster (64 px under huvudet) och nästan i höjd
   med huvudet vid spalten; satsytan börjar under diagonalen, spalten under
   fotot. Utan foto börjar spalten strax under sömmens högra del. */
.cv[data-tpl="skra"] .cv-main { padding-top: calc(var(--skra-lut) + var(--gap) * .9); padding-right: 26px; }
.cv[data-tpl="skra"] .cv-side {
  color: #fff;
  padding-top: calc(var(--fs) * 5.5 * var(--fotoskala, 1) + var(--gap) * .9);
}
.cv[data-tpl="skra"] .cv-head:not(:has(.cv-photo)) + .cv-cols .cv-side { padding-top: calc(var(--skra-lut) * .4 + var(--gap)); }

/* Rubriker: fet gemen Montserrat i bläck (Rasmus), vit i spalten. */
.cv[data-tpl="skra"] .s__h { font-weight: 700; font-size: calc(var(--fs) * 1.15); color: var(--doc-ink); margin-bottom: 10px; }
.cv[data-tpl="skra"] .cv-side .s__h { color: #fff; }
.cv[data-tpl="skra"] .cv-side .ct li,
.cv[data-tpl="skra"] .cv-side .dt dt { color: rgba(255,255,255,.85); }
.cv[data-tpl="skra"] .cv-side .dt dd { color: #fff; }
.cv[data-tpl="skra"] .cv-side .ci { color: rgba(255,255,255,.75); }
.cv[data-tpl="skra"] .cv-side .e__title { color: #fff; }
.cv[data-tpl="skra"] .cv-side .e__meta { color: rgba(255,255,255,.9); }
.cv[data-tpl="skra"] .cv-side .e__date { color: rgba(255,255,255,.78); }
.cv[data-tpl="skra"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.26); --lv-prick: rgba(255,255,255,.34);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.14); --tag-fg: #fff;
}

/* Posten: titeln i spärrade versaler, arbetsgivare | datum i dämpad ton på
   samma rad ("Björkstads gym | 2018 – idag"). Samma flexrad som i Fasad. */
.cv[data-tpl="skra"] .cv-main .e__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
.cv[data-tpl="skra"] .cv-main .e__main { display: contents; }
.cv[data-tpl="skra"] .e__title { font-weight: 700; font-size: calc(var(--fs) * .88); letter-spacing: .06em; text-transform: uppercase; }
.cv[data-tpl="skra"] .cv-main .e__title { flex: 0 0 100%; margin-bottom: 1px; }
.cv[data-tpl="skra"] .e__meta { color: var(--doc-mut); font-weight: 500; font-size: calc(var(--fs) * .93); }
.cv[data-tpl="skra"] .cv-main .e__meta { flex: 0 1 auto; min-width: 0; }
/* referensernas kontaktrad (andra metan) på egen rad */
.cv[data-tpl="skra"] .cv-main .e__meta + .e__meta { flex: 0 0 100%; }
.cv[data-tpl="skra"] .cv-main .e__date { flex: 0 0 auto; font-weight: 500; font-size: calc(var(--fs) * .93); color: var(--doc-mut); }
.cv[data-tpl="skra"] .cv-main .e__main:has(.e__meta) + .e__date::before { content: "|"; margin: 0 .4em; }
.cv[data-tpl="skra"] .rt { margin-top: 5px; }
.cv[data-tpl="skra"] .cv-side .rt ul { list-style: none; padding-left: 0; }
.cv[data-tpl="skra"] .cv-side .rt li { padding-left: 13px; text-indent: -13px; }
.cv[data-tpl="skra"] .cv-side .rt li::before { content: "– "; }

/* Spaltens färdigheter och taggar som streckade rader utan mätare. */
.cv[data-tpl="skra"] .lv__meter { display: none; }
.cv[data-tpl="skra"] .s:not([data-style]) .lv__row {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px;
}
.cv[data-tpl="skra"] .s:not([data-style]) .lv__name,
.cv[data-tpl="skra"] .s:not([data-style]) .tg li {
  flex: 1 1 auto; overflow-wrap: break-word; padding-left: 13px; text-indent: -13px;
}
.cv[data-tpl="skra"] .s:not([data-style]) .lv__name::before,
.cv[data-tpl="skra"] .s:not([data-style]) .tg li::before { content: "– "; }
.cv[data-tpl="skra"] .s:not([data-style]) .lv__row::after {
  flex: 0 0 auto; margin-left: auto; color: var(--lv-ord); font-size: calc(var(--fs) * .84);
}
.cv[data-tpl="skra"] .s:not([data-style]) .tg { gap: 2px; }
/* i spalten står nivåordet ALLTID på raden under namnet, högerställt — inte
   bara när namnet råkar vara långt (granskningen 2/9: "Processkartläggning"
   bröt ensamt och såg slumpartat ut) */
.cv[data-tpl="skra"] .cv-side .s:not([data-style]) .lv__name { flex: 0 0 100%; }

/* Utskrift: Chrome fragmenterar rutnät opålitligt — med det långa
   kontrolldokumentet hamnade nästa sektions rubrik OVANPÅ en post som
   knuffats till sida 2 (skiftet syntes bara vid vissa brytlägen). Satsytan
   och sektionskropparna är därför block med marginaler i samma rytm som
   basens grid-gap; skärmen ser exakt likadan ut. */
.cv[data-tpl="skra"] .cv-main { display: block; }
.cv[data-tpl="skra"] .cv-main > .s + .s { margin-top: var(--gap); }
.cv[data-tpl="skra"] .cv-main .s__b { display: block; }
.cv[data-tpl="skra"] .cv-main .s__b > * + * { margin-top: calc(var(--gap) * .62); }

/* Brev: spalten släcks men huvudet behåller mörkret OCH diagonalen (det ÄR
   mallen — Bård/Afton-prejudikatet). Fotot hem till höger i huvudet utan
   överhäng; kontakterna i huvudet är vita. Egen regel för det positionerade
   fotot (Puder-fällan). Sidhuvudets färg tillbaka till mörk: högerspalten
   finns inte i brevet. */
.cv[data-doc="letter"][data-tpl="skra"] { background-image: none; --marg-text: rgba(29,26,33,.6); }
.cv[data-doc="letter"][data-tpl="skra"] .cv-head {
  display: flex; align-items: center; gap: 24px; min-height: 0;
  padding: 44px var(--pad-x) 36px;
}
.cv[data-doc="letter"][data-tpl="skra"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="skra"] .cv-photo {
  order: 2; margin: 0 0 0 auto; position: relative;
  width: calc(var(--fs) * 8 * var(--fotoskala, 1));
  height: calc(var(--fs) * 8 * var(--fotoskala, 1));
}
.cv[data-doc="letter"][data-tpl="skra"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.cv[data-doc="letter"][data-tpl="skra"] .cv-main { padding-top: calc(var(--skra-lut) + var(--gap)); }

/* ==========================================================================
   RIBBA          formspråk: Nordiskt       layout: single
   En smal, fast mörkgrå remsa över arkets topp, namnet som enda stora
   accentyta och hårlinjer under rubrikerna som slutar i en liten fylld
   kvadrat. Kvadratpunkter i listorna, kvadratiska mätare. Enspaltig och
   ATS-säker — den enda ATS-mallen med ett mörkt neutralt element (Fond
   har 6 px accent och tonat huvud; Klar är helt neutral).
   Remsan ligger på .cv-inner::before (absolut, 26 px): den räknas inte i
   scrollHeight, målas bara på förstasidan i utskrift — vilket är rätt,
   sidhuvudet hör till sida 1 (som Fonds kant) — och ALDRIG som border på
   .cv (Fond-fällan: border ligger utanför scrollHeight). Lämna det så.
   ========================================================================== */

.cv[data-tpl="ribba"] {
  --pad-x: 50px;
  --tpl-font: "Inter", sans-serif;
  --ribba: #2B2B30;
}
.cv[data-tpl="ribba"] .cv-inner::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 26px;
  background: var(--ribba);
}
.cv[data-tpl="ribba"] .cv-head { padding-top: calc(26px + var(--pad-y) * .85); align-items: center; }
/* kvadrat med 4 px hörn (förebilden) — en rund bild hör inte till linjesystemet */
.cv[data-tpl="ribba"] .cv-photo { order: 2; margin-left: auto; border-radius: 4px; }
.cv[data-tpl="ribba"][data-photo="rounded"] .cv-photo { border-radius: 14px; }
.cv[data-tpl="ribba"] .cv-name { color: var(--accent); font-weight: 800; font-size: calc(var(--fs) * 2.3); letter-spacing: -.02em; }
.cv[data-tpl="ribba"] .cv-role { color: var(--doc-mut); font-weight: 600; margin-top: 4px; }
.cv[data-tpl="ribba"] .ct--inline { margin-top: 14px; }
.cv[data-tpl="ribba"] .ct--inline li { color: var(--doc-mut); }
.cv[data-tpl="ribba"] .ci { color: var(--doc-ink); opacity: .55; }

/* Rubriken: dämpade spärrade versaler, hårlinje i accentens linjeton och
   den fyllda kvadraten som sitter ovanpå linjens högra ände. */
.cv[data-tpl="ribba"] .s__h {
  position: relative; color: var(--doc-ink); font-weight: 700;
  font-size: calc(var(--fs) * .8); letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--accent-line);
}
.cv[data-tpl="ribba"] .s__h::after {
  content: ""; position: absolute; right: 0; bottom: -3.5px;
  width: 6px; height: 6px; background: var(--accent);
}
.cv[data-tpl="ribba"] .e__title { font-weight: 700; }
.cv[data-tpl="ribba"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="ribba"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="ribba"] .rt ul { list-style: square; padding-left: 16px; }
.cv[data-tpl="ribba"] .rt li::marker { color: var(--accent); font-size: .9em; }
/* kvadratiska mätare, låga — nivåordet står i klartext så ATS-läsaren har
   orden och kvadraterna är dekor (regeln i basblocket) */
.cv[data-tpl="ribba"] .lv__meter { gap: 2px; }
.cv[data-tpl="ribba"] .lv__meter i { border-radius: 0; width: calc(var(--fs) * .66); height: calc(var(--fs) * .34); }
/* taggar som en rad med kvadratpunkter */
.cv[data-tpl="ribba"] .s:not([data-style]) .tg { display: flex; flex-wrap: wrap; gap: 3px 20px; }
.cv[data-tpl="ribba"] .s:not([data-style]) .tg li { position: relative; padding-left: 13px; }
.cv[data-tpl="ribba"] .s:not([data-style]) .tg li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; background: var(--accent);
}
/* Brev: remsan bor på .cv-inner och släcks inte av den generella regeln —
   den följer med som mallens identitet. Inget mer att göra. */

/* ==========================================================================
   KARM         formspråk: Kreativ        layout: sideL
   Tjock färgram runt hela arket och ett ljusgrått blad innanför. "Tornet":
   kvadratfotot och namnet står INNE i vänsterspalten och satsytan börjar
   högst upp till höger — ett gridknep på den vanliga DOM:en (.cv-cols är
   display: contents, alla fem barn har explicita grid-area). Tre toner på
   sidan: accent (ram, namn, rubriker), accent2 (arbetsgivare i versaler)
   och grå (kursiv beskrivning). Ur Mahmouds skärmbilder 31/8 (Anna).
   ========================================================================== */

/* Ramen är padding + bakgrund på sidan (Bård-mönstret): border räknas inte
   i scrollHeight, och en bakgrund repeteras över utskriftssidorna. */
.cv[data-tpl="karm"] {
  --pad-x: 40px; --pad-y: 34px;
  --side-w: 33%;
  --tpl-font: "Nunito Sans", sans-serif;
  padding: 18px;
  background-image: linear-gradient(var(--accent), var(--accent));
}
.cv[data-tpl="karm"] .cv-inner {
  background: #F7F7F9; min-height: 100%;
  display: grid; grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: auto 1fr auto auto;
}
.cv[data-tpl="karm"] .cv-cols { display: contents; }
/* huvudet: fotot över namnet, allt i spaltens kolumn */
.cv[data-tpl="karm"] .cv-head {
  grid-area: 1 / 1 / 2 / 2;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
  gap: 16px; padding: var(--pad-y) 18px 0 var(--pad-x); align-items: start;
}
.cv[data-tpl="karm"] .cv-photo {
  grid-area: 1 / 1; width: 100%;
  height: calc(var(--fs) * 13 * var(--fotoskala, 1));
  border-radius: 0 !important;
}
.cv[data-tpl="karm"] .cv-head__text { grid-area: 2 / 1; }
.cv[data-tpl="karm"] .cv-head:not(:has(.cv-photo)) { grid-template-rows: auto; }
.cv[data-tpl="karm"] .cv-head:not(:has(.cv-photo)) .cv-head__text { grid-area: 1 / 1; }
.cv[data-tpl="karm"] .cv-name {
  color: var(--accent); font-weight: 800;
  font-size: calc(var(--fs) * 2.2); line-height: 1.05; letter-spacing: -.01em;
  /* förnamn och efternamn på var sin rad, som förebilden */
  word-spacing: 100vw;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere;
}
.cv[data-tpl="karm"] .cv-role { color: var(--doc-mut); font-weight: 600; margin-top: 8px; font-size: var(--fs); }
.cv[data-tpl="karm"] .cv-side {
  grid-area: 2 / 1 / 3 / 2; align-content: start;
  padding: 20px 18px var(--pad-y) var(--pad-x);
}
.cv[data-tpl="karm"] .cv-main {
  grid-area: 1 / 2 / 3 / 3; align-content: start;
  padding: var(--pad-y) var(--pad-x) var(--pad-y) 24px;
}
.cv[data-tpl="karm"] .cv-foot { grid-area: 3 / 1 / 4 / 3; }
.cv[data-tpl="karm"] .cv-credit { grid-area: 4 / 1 / 5 / 3; }
/* kontakten står direkt under namnet, utan rubrik (förebilden) */
.cv[data-tpl="karm"] .cv-side .s--contact .s__h { display: none; }
.cv[data-tpl="karm"] .ct li { color: var(--doc-ink); font-size: calc(var(--fs) * .9); }
.cv[data-tpl="karm"] .dt { font-size: calc(var(--fs) * .88); }
/* rubriker: gemener i accent, ingen linje — storleken bär */
.cv[data-tpl="karm"] .s__h {
  color: var(--accent); font-weight: 800; font-size: calc(var(--fs) * 1.35);
  letter-spacing: -.01em; margin-bottom: 8px;
}
.cv[data-tpl="karm"] .cv-side .s__h { font-size: calc(var(--fs) * 1.18); }
/* posten: arbetsgivare i versaler i andratonen ÖVER titeln, sedan
   "Titel | datum" på en rad, beskrivningen kursiv och grå. Ett rutnät med
   explicita rader — en flerradig flexrad delas av Chrome över sidbrytningen
   trots break-inside: avoid (Johan Björk ensam på sida 2, provat 2/9). */
.cv[data-tpl="karm"] .e__row,
.cv[data-tpl="karm"] .cv-side .e__row {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; align-items: baseline;
}
.cv[data-tpl="karm"] .e__main { display: contents; }
.cv[data-tpl="karm"] .e__meta {
  grid-area: 1 / 1 / 2 / 3;
  color: var(--accent2, #4A6B58); font-weight: 700;
  font-size: calc(var(--fs) * .8); letter-spacing: .07em; text-transform: uppercase;
}
.cv[data-tpl="karm"] .e__meta + .e__meta { grid-area: 2 / 1 / 3 / 3; }
.cv[data-tpl="karm"] .e__title { grid-area: 2 / 1; font-weight: 600; font-size: calc(var(--fs) * 1.02); }
.cv[data-tpl="karm"] .e__date { grid-area: 2 / 2; justify-self: start; color: var(--doc-ink); font-size: calc(var(--fs) * .95); white-space: normal; }
/* poster med två metarader (företag + kontakt) — namnet under båda */
.cv[data-tpl="karm"] .e__main:has(.e__meta + .e__meta) .e__title { grid-area: 3 / 1; }
.cv[data-tpl="karm"] .e__main:has(.e__meta + .e__meta) + .e__date { grid-area: 3 / 2; }
/* …utom referenserna: NAMNET först (som i alla andra mallar), roll och
   kontakt under — arbetsgivare-över-titel gäller bara historiken
   (granskningen 2/9). Står EFTER tvåmeta-reglerna: samma specificitet. */
.cv[data-tpl="karm"] .s--references .e__main:has(.e__meta) .e__title { grid-area: 1 / 1 / 2 / 3; }
.cv[data-tpl="karm"] .s--references .e__meta { grid-area: 2 / 1 / 3 / 3; }
.cv[data-tpl="karm"] .s--references .e__meta + .e__meta { grid-area: 3 / 1 / 4 / 3; }
.cv[data-tpl="karm"] .s--references .e__main:has(.e__meta) + .e__date { grid-area: 4 / 1 / 5 / 3; }
.cv[data-tpl="karm"] .e__date::before { content: "|  "; color: var(--doc-mut); }
.cv[data-tpl="karm"] .rt { color: var(--doc-mut); font-size: calc(var(--fs) * .96); }
.cv[data-tpl="karm"] .e .rt { font-style: italic; }   /* beskrivningarna kursiva — profilen rak (granskningen 2/9) */
.cv[data-tpl="karm"] .rt ul { padding-left: 15px; }
.cv[data-tpl="karm"] .rt li { margin-bottom: 1px; }
/* färdigheter och språk: ren lista med nivåord, inga mätare */
.cv[data-tpl="karm"] .lv__meter { display: none; }
.cv[data-tpl="karm"] .lv__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px; }
.cv[data-tpl="karm"] .lv__row .lv__name { flex: 1 1 auto; overflow-wrap: break-word; }
.cv[data-tpl="karm"] .lv__row::after { flex: 0 0 auto; margin-left: auto; }
.cv[data-tpl="karm"] .tg { display: block; padding-left: 15px; }
.cv[data-tpl="karm"] .tg li { display: list-item; list-style: disc; margin-bottom: 2px; }
.cv[data-tpl="karm"] .tg li::marker { color: var(--accent); }
/* brev: ramen är mallens identitet och står kvar (Bård-prejudikatet);
   tornet utgår — huvudet hem som flexrad med kvadratfotot i 8 fs */
.cv[data-doc="letter"][data-tpl="karm"] { background-image: linear-gradient(var(--accent), var(--accent)); }
.cv[data-doc="letter"][data-tpl="karm"] .cv-inner { display: flex; }
.cv[data-doc="letter"][data-tpl="karm"] .cv-head {
  display: flex; gap: 22px; padding: var(--pad-y) var(--pad-x) 0; align-items: flex-start;
}
.cv[data-doc="letter"][data-tpl="karm"] .cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1)); height: calc(var(--fs) * 8 * var(--fotoskala, 1));
}
.cv[data-doc="letter"][data-tpl="karm"] .cv-name { word-spacing: normal; }
.cv[data-doc="letter"][data-tpl="karm"] .cv-main { padding: var(--gap) var(--pad-x) var(--pad-y); }
/* referenser/certifikat i spalten: datumet på egen rad, utan streck */
.cv[data-tpl="karm"] .cv-side .e__row { grid-template-columns: 1fr; }
.cv[data-tpl="karm"] .cv-side .e__date { grid-area: 3 / 1; }
.cv[data-tpl="karm"] .cv-side .e__main:has(.e__meta + .e__meta) + .e__date { grid-area: 4 / 1; }
.cv[data-tpl="karm"] .cv-side .e__date::before { content: none; }
/* UTSKRIFT (provat 2/9, sex varianter): tornrutnätet fragmenterar inte —
   med 1fr-raden och det flexsträckta .cv-inner lyfter Chrome hela rutnätet
   till sida 2 och lämnar förstasidan tom, med auto-rader sprids huvudet och
   spalten över sidan (satsytans höjd fördelas på raderna), och en satsyta
   som är ett grid högre än en sida lyfts också. I tryck byggs tornet därför
   med flytande block: huvudet och spalten flyter vänster, satsytan är ett
   vanligt block med spaltens bredd som vänstermarginal. Spalt, satsyta och
   sektionskroppar blir block med marginaler i stället för grid-gap — ett
   grid räknar sina rader ofragmenterat, så en post som break-inside: avoid
   knuffar till nästa sida får nästa rubrik målad ovanpå sig (samma fel
   syns i Gavel/Kolumn-svepen). Gråytan målas av .cv-inner (flexsträckt
   till arkets slut) och av sidbakgrunden (app.js marginalbakgrund). */
@media print {
  .cv[data-tpl="karm"] .cv-inner { display: block; }
  .cv[data-tpl="karm"] .cv-head { float: left; width: var(--side-w); align-content: start; }
  .cv[data-tpl="karm"] .cv-side { float: left; clear: left; width: var(--side-w); }
  .cv[data-tpl="karm"] .cv-main { margin-left: var(--side-w); }
  .cv[data-tpl="karm"] .cv-foot, .cv[data-tpl="karm"] .cv-credit { clear: both; }
  /* block + marginaler för kolumner och sektionskroppar: basens printblock */
}
/* löpande sidhuvud: arkets högerkant är ramen — vit text (som Bård) */
.cv[data-tpl="karm"], .cv[data-doc="letter"][data-tpl="karm"] { --marg-text: rgba(255,255,255,.78); }

/* ==========================================================================
   TABLÅ        formspråk: Klassiker      layout: sideL
   Mättad spalt med fotot som en RECTANGEL på spaltens topp, bredare än
   spalten, så att det kliver 40 px ut över sömmen in i satsytan. Namnet i
   antikvaversaler (Lora) på två rader, satsytan ljusgrå i stället för vit,
   och varje post satt som en tabell med datumet i egen vänsterkolumn.
   Ur Mahmouds skärmbilder 31/8 (Emma).
   ========================================================================== */

.cv[data-tpl="tabla"] {
  --side-w: 34%;
  --tpl-font: "Source Sans 3", sans-serif;
  /* spalt + grå satsyta i ETT lager på .cv — repeteras över sidorna */
  background-image: linear-gradient(to right, var(--accent) 0 34%, #F3F2F5 34% 100%);
}
.cv[data-tpl="tabla"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr; gap: 0; padding: 0;
  align-items: start;
}
/* Fotot: 40 px bredare än spalten och kant i kant med arkets överkant.
   Rektangel oavsett vald fotoform; en tunn vit kant skiljer det från
   spaltfärgen och gråytan. --fotoskala skalar höjden, inte bredden. */
.cv[data-tpl="tabla"] .cv-photo {
  grid-area: 1 / 1; justify-self: start; align-self: start;
  position: relative; z-index: 1;
  width: calc(100% + 40px);
  height: calc(var(--fs) * 17 * var(--fotoskala, 1));
  margin: 0; border-radius: 0 !important;
  background-position: center 20%;   /* hjässan ryms (center top klippte den) */
}
.cv[data-tpl="tabla"][data-fotoram="standard"] .cv-photo { box-shadow: 4px 4px 0 0 #fff; }
/* namnet och satsytan delar vänsterkant (60 px från sömmen): fotot slutar
   40 px in, sedan 20 px luft */
.cv[data-tpl="tabla"] .cv-head__text { grid-area: 1 / 2; padding: 50px var(--pad-x) 14px 60px; }
.cv[data-tpl="tabla"] .cv-name {
  font-family: "Lora", Georgia, serif; font-weight: 500;
  font-size: calc(var(--fs) * 2.35); line-height: 1.18;
  letter-spacing: .08em; text-transform: uppercase; color: var(--doc-ink);
  word-spacing: 100vw;   /* förnamn och efternamn på var sin rad */
}
.cv[data-tpl="tabla"] .cv-role {
  color: var(--doc-ink); font-weight: 700; margin-top: 12px;
  font-size: calc(var(--fs) * .92); letter-spacing: .22em; text-transform: uppercase;
}
/* spalten: vit text på färg */
.cv[data-tpl="tabla"] .cv-side { color: #fff; padding: calc(var(--gap) * 1.5) 24px var(--pad-y) var(--pad-x); }
.cv[data-tpl="tabla"] .cv-main { padding: calc(var(--gap) * 1.1) var(--pad-x) var(--pad-y) 60px; }
/* i tryck sträcks spalterna (print-blocket) — innehållet ska ändå ligga i topp, inte spridas */
.cv[data-tpl="tabla"] .cv-side, .cv[data-tpl="tabla"] .cv-main { align-content: start; }
.cv[data-tpl="tabla"] .cv-head:not(:has(.cv-photo)) + .cv-cols .cv-side { padding-top: calc(var(--gap) * .6); }
.cv[data-tpl="tabla"] .s__h {
  font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: calc(var(--fs) * 1.02); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 9px;
}
.cv[data-tpl="tabla"] .cv-side .s__h { color: #fff; }
.cv[data-tpl="tabla"] .cv-side .ct li,
.cv[data-tpl="tabla"] .cv-side .dt dd { color: rgba(255,255,255,.92); }
.cv[data-tpl="tabla"] .cv-side .dt dt { color: rgba(255,255,255,.7); }
.cv[data-tpl="tabla"] .cv-side .ci { color: rgba(255,255,255,.75); }
.cv[data-tpl="tabla"] .cv-side .e__meta { color: rgba(255,255,255,.9); }
.cv[data-tpl="tabla"] .cv-side .e__date { color: rgba(255,255,255,.88); }   /* .78 gav 4,31:1 på ockra */
/* tabellen: datumet i egen kolumn till vänster om titel och arbetsgivare.
   Rutnätet ligger på RADEN (.e__row) och beskrivningen får samma indrag som
   marginal — ett rutnät på hela .e med baseline-justering fick Chrome att
   måla nästa sektionsrubrik ovanpå punkterna efter en sidbrytning (2/9). */
.cv[data-tpl="tabla"] .cv-main .e__row {
  display: grid; grid-template-columns: calc(var(--fs) * 5.4) 1fr; column-gap: 14px; align-items: baseline;
}
.cv[data-tpl="tabla"] .cv-main .e__date {
  grid-area: 1 / 1; white-space: normal; font-weight: 700;
  color: var(--doc-ink); font-size: calc(var(--fs) * .86);
  font-variant-numeric: tabular-nums; line-height: 1.35;
  /* två rader lika långa: "feb 2018 –" / "aug 2021", inte "feb 2018 – aug" / "2021" */
  text-wrap: balance;
}
.cv[data-tpl="tabla"] .cv-main .e__main { grid-area: 1 / 2; }
.cv[data-tpl="tabla"] .cv-main .rt { margin: 3px 0 0 calc(var(--fs) * 5.4 + 14px); }
.cv[data-tpl="tabla"] .cv-main .e:not(:has(.e__date)) .e__main { grid-column: 1 / -1; }
.cv[data-tpl="tabla"] .cv-main .e:not(:has(.e__date)) .rt { margin-left: 0; }
.cv[data-tpl="tabla"] .e__title { font-weight: 700; }
.cv[data-tpl="tabla"] .e__meta { color: var(--doc-mut); }
/* färdigheter: klartext, inga mätare; smal spalt → radbrytande rad */
.cv[data-tpl="tabla"] .lv__meter { display: none; }
.cv[data-tpl="tabla"] .lv__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px; }
.cv[data-tpl="tabla"] .lv__row .lv__name { flex: 1 1 auto; overflow-wrap: break-word; }
.cv[data-tpl="tabla"] .lv__row::after { flex: 0 0 auto; margin-left: auto; }
.cv[data-tpl="tabla"] .cv-side .lv__row::after { color: rgba(255,255,255,.72); }
.cv[data-tpl="tabla"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="tabla"] .tg li { border: 1px solid var(--accent-line); border-radius: 3px; padding: 1px 9px; font-size: calc(var(--fs) * .88); }
.cv[data-tpl="tabla"] .cv-side .tg li { border-color: rgba(255,255,255,.4); }
.cv[data-tpl="tabla"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.26); --lv-prick: rgba(255,255,255,.34);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.14); --tag-fg: #fff;
}
/* Utskrift: kolumner och sektionskroppar som block sköts av basens printblock (2/9). */
/* brev: spalt och gråyta bor på .cv-bakgrunden och släcks; huvudet hem
   som flexrad, fotot i 8 fs utan överhäng */
.cv[data-doc="letter"][data-tpl="tabla"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="tabla"] .cv-head { display: flex; gap: 22px; padding: var(--pad-y) var(--pad-x) 0; align-items: flex-start; }
.cv[data-doc="letter"][data-tpl="tabla"] .cv-photo {
  width: calc(var(--fs) * 8 * var(--fotoskala, 1)); height: calc(var(--fs) * 8 * var(--fotoskala, 1));
  box-shadow: none; z-index: auto;
}
.cv[data-doc="letter"][data-tpl="tabla"] .cv-head__text { padding: 0; }
.cv[data-doc="letter"][data-tpl="tabla"] .cv-name { word-spacing: normal; font-size: calc(var(--fs) * 1.9); }

/* ==========================================================================
   SKYLT        formspråk: Kreativ        layout: sideL
   Fast mellangrå spalt (varken accent eller svart), namnet i jätteversaler
   högerställt i accent, och rollen på en mörk rektangulär SKYLT som börjar
   inne i spalten och löper tvärs över sömmen ut till högermarginalen.
   Spaltens text är högerställd — mot sömmen. Ur Mahmouds skärmbilder 31/8
   (Greta).
   ========================================================================== */

.cv[data-tpl="skylt"] {
  --side-w: 30%;
  --tpl-font: "Source Sans 3", sans-serif;
  --skylt-gra: #75757B;    /* vit text 4,6:1 */
  --skylt-mork: #5F5F66;
  background-image: linear-gradient(to right, var(--skylt-gra) 0 30%, transparent 30% 100%);
}
.cv[data-tpl="skylt"] .cv-head {
  display: grid; grid-template-columns: 30% 1fr; gap: 0; padding: 0;
  align-items: start;
}
.cv[data-tpl="skylt"] .cv-photo {
  grid-area: 1 / 1; justify-self: center; margin-top: 40px;
  width: calc(var(--fs) * 10 * var(--fotoskala, 1)); height: calc(var(--fs) * 10 * var(--fotoskala, 1));
}
.cv[data-tpl="skylt"][data-fotoram="standard"] .cv-photo { box-shadow: 0 0 0 4px #fff; }
.cv[data-tpl="skylt"] .cv-head__text { grid-area: 1 / 2; padding: 44px var(--pad-x) 0 0; text-align: right; }
.cv[data-tpl="skylt"] .cv-name {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: calc(var(--fs) * 2.7); line-height: 1.02; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--accent);
  word-spacing: 100vw;   /* förnamn och efternamn på var sin rad */
}
/* Skylten: negativ vänstermarginal tar den 34 px in i spalten. Rektangel —
   ett piller vore Kil. */
.cv[data-tpl="skylt"] .cv-role {
  display: block; position: relative; z-index: 1;
  margin: 18px 0 0 -34px; padding: 9px 20px 10px; border-radius: 0;
  background-image: linear-gradient(var(--skylt-mork), var(--skylt-mork));
  color: #fff; text-align: center; text-indent: .3em;
  font-size: calc(var(--fs) * .82); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
}
/* spalten: vit text, högerställd mot sömmen */
.cv[data-tpl="skylt"] .cv-side {
  color: #fff; text-align: right;
  padding: calc(var(--gap) * 1.6) 24px var(--pad-y) var(--pad-x);
}
.cv[data-tpl="skylt"] .s__h {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: calc(var(--fs) * .9); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 9px;
}
/* spaltrubrikerna: accenten lyft 45 % mot vitt så att den bär på grått */
.cv[data-tpl="skylt"] .cv-side .s__h {
  color: #fff; color: color-mix(in srgb, var(--accent) 45%, #fff);
  font-size: calc(var(--fs) * .84); letter-spacing: .14em;   /* "PERSONUPPGIFTER" + ikon ryms på en rad */
}
.cv[data-tpl="skylt"] .cv-side .ct li { flex-direction: row-reverse; justify-content: flex-start; color: rgba(255,255,255,.9); }
.cv[data-tpl="skylt"] .cv-side .ci { color: rgba(255,255,255,.85); }
.cv[data-tpl="skylt"] .cv-side .dt { grid-template-columns: 1fr auto; }
.cv[data-tpl="skylt"] .cv-side .dt dt { color: rgba(255,255,255,.7); }
/* vit fullt ut: gråspalten #75757B bär vitt med 4,58:1 — varje dämpning
   faller under 4,5 (pass 5) */
.cv[data-tpl="skylt"] .cv-side .e__meta { color: #fff; }
.cv[data-tpl="skylt"] .cv-side .e__date { color: #fff; }
.cv[data-tpl="skylt"] .cv-side .rt { color: rgba(255,255,255,.9); }
.cv[data-tpl="skylt"] .cv-side .rt ul { padding-left: 0; }
/* satsytan: rubriker i accent, titel fet, arbetsgivare kursiv med datumet
   inline efter ett streck, beskrivningen som streckade rader */
.cv[data-tpl="skylt"] .cv-main { padding: calc(var(--gap) * 1.3) var(--pad-x) var(--pad-y) 34px; }
/* i tryck sträcks spalterna (print-blocket) — innehållet ska ändå ligga i topp, inte spridas */
.cv[data-tpl="skylt"] .cv-side, .cv[data-tpl="skylt"] .cv-main { align-content: start; }
.cv[data-tpl="skylt"] .e__row { display: block; }
.cv[data-tpl="skylt"] .e__main { display: contents; }
.cv[data-tpl="skylt"] .e__title { font-weight: 700; }
.cv[data-tpl="skylt"] .e__meta { display: inline; color: var(--doc-mut); font-style: italic; }
/* referensernas kontaktrad (andra metan) på egen rad */
.cv[data-tpl="skylt"] .e__meta + .e__meta { display: block; }
.cv[data-tpl="skylt"] .e__date { display: inline; color: var(--doc-mut); font-style: italic; white-space: normal; }
/* .e__date är syskon till .e__main, inte till metan — därför :has */
.cv[data-tpl="skylt"] .e__main:has(.e__meta) + .e__date::before { content: " | "; }
.cv[data-tpl="skylt"] .rt { font-size: calc(var(--fs) * .95); }
.cv[data-tpl="skylt"] .rt ul { list-style: none; padding-left: 0; }
.cv[data-tpl="skylt"] .rt li::before { content: "– "; }
.cv[data-tpl="skylt"] .rt li::marker { content: none; }
/* färdigheter: klartext utan mätare, högerställda i spalten */
.cv[data-tpl="skylt"] .lv__meter { display: none; }
.cv[data-tpl="skylt"] .lv__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px; }
.cv[data-tpl="skylt"] .lv__row .lv__name { flex: 1 1 auto; overflow-wrap: break-word; }
.cv[data-tpl="skylt"] .lv__row::after { flex: 0 0 auto; margin-left: auto; }
.cv[data-tpl="skylt"] .cv-side .lv__row { justify-content: flex-end; }
.cv[data-tpl="skylt"] .cv-side .lv__row .lv__name { flex: 0 1 auto; }
.cv[data-tpl="skylt"] .cv-side .lv__row::after { margin-left: 0; color: rgba(255,255,255,.72); }
.cv[data-tpl="skylt"] .cv-side {
  --lv-on: #fff; --lv-off: rgba(255,255,255,.3); --lv-prick: rgba(255,255,255,.38);
  --lv-ord: rgba(255,255,255,.78); --tag-bg: rgba(255,255,255,.16); --tag-fg: #fff;
}
.cv[data-tpl="skylt"] .cv-side .s[data-style="tags"] .lv,
.cv[data-tpl="skylt"] .cv-side .s[data-style="tags"] .tg { justify-content: flex-end; }
/* Utskrift: kolumner och sektionskroppar som block sköts av basens printblock (2/9). */
/* brev: gråspalten släcks, huvudet hem — namnet vänsterställt, skylten
   kvar men utan överhäng (som Kils pillerband) */
.cv[data-doc="letter"][data-tpl="skylt"] { background-image: none; }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-head { display: flex; gap: 22px; padding: var(--pad-y) var(--pad-x) 0; align-items: flex-start; }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-photo { margin: 0; }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-head__text { padding: 0; text-align: left; }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-name { word-spacing: normal; font-size: calc(var(--fs) * 2.2); }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-role { display: inline-block; margin: 14px 0 0; text-align: left; }
.cv[data-doc="letter"][data-tpl="skylt"] .cv-main { padding: var(--gap) var(--pad-x) var(--pad-y); }

/* ==========================================================================
   RUTA           formspråk: Nordiskt       layout: single
   Snabbfakta-rutan: detaljraden (körkort, födelseår, egna fält som "Kan
   börja: omgående" eller "Truckkort: A2, B1") satt som en inramad ruta med
   en liten etikett i ramen, direkt under kontaktuppgifterna — det en
   bemanningskund letar efter först, innan en rad av CV:t är läst.
   Yrkespaketens intygssektioner (behörigheter, truckkort, körkort, bevis…)
   sätts som täta bockrader: namn · utfärdare · datum på en rad, en bock i
   accent före. Enspaltig, hårlinjer, inga färgytor bakom text — ATS-säker.
   Rutan bor på .ct--detaljer som render.js redan skriver i enspaltiga
   mallar; finns inga detaljer finns ingen ruta och huvudet står som Klar.
   Etiketten "Snabbfakta" är CSS-genererad (som Kapitels siffror) och följer
   dokumentets språk via data-lang.
   ATS-REGEL (2/9, uppmätt i PDF:en): INGET textbärande element i mallen får
   vara position: relative/absolute. Chrome målar positionerade lådor i ett
   senare lager, och i PDF:ens textström hamnade rutan och bockraderna då
   SIST i dokumentet (rad 47–57 av 63) — en ATS som läser strömordningen
   hade sett körkortet efter hobbyerna. Etiketten är därför ett in-flow-
   pseudoelement med negativ marginal, bocken ett flexbarn, avdelarna
   border-right. Rör inte det.
   ========================================================================== */

.cv[data-tpl="ruta"] {
  --doc-ink: #17181C;
  --doc-mut: #5E6067;
  --doc-line: #DCDDE2;
  --pad-x: 52px; --pad-y: 40px;
  --tpl-font: "Manrope", sans-serif;
}
.cv[data-tpl="ruta"] .cv-head { align-items: flex-start; gap: 26px; padding-bottom: 0; }
/* rundad kvadrat till höger — hör till linjesystemet, inte en cirkel */
.cv[data-tpl="ruta"] .cv-photo {
  order: 2; border-radius: 10px;
  width: calc(var(--fs) * 7 * var(--fotoskala, 1));
  height: calc(var(--fs) * 7 * var(--fotoskala, 1));
}
.cv[data-tpl="ruta"][data-photo="square"] .cv-photo { border-radius: 4px; }
.cv[data-tpl="ruta"] .cv-name { font-weight: 800; font-size: calc(var(--fs) * 2.25); letter-spacing: -.025em; }
.cv[data-tpl="ruta"] .cv-role { margin-top: 4px; color: var(--doc-mut); font-weight: 600; }
/* kontaktraden utan ikoner (ATS-ren text), hårlinjer som avdelare i stället */
.cv[data-tpl="ruta"] .ci { display: none; }
/* avdelaren står till HÖGER om posten (alla utom sista) och luften efter
   den är marginal, inte vänsterpadding: bryts raden börjar nästa rad i
   vänsterkanten, och den föregående får en avslutande hårlinje — aldrig en
   inledande, aldrig ett indrag */
.cv[data-tpl="ruta"] .ct--inline:not(.ct--detaljer) { margin-top: 12px; gap: 4px 0; }
.cv[data-tpl="ruta"] .ct--inline:not(.ct--detaljer) li { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--doc-line); }
.cv[data-tpl="ruta"] .ct--inline:not(.ct--detaljer) li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }

/* --- Snabbfakta-rutan --------------------------------------------------------
   Inramad, hugger om innehållet (fit-content) så att en ensam post inte ger
   en tom låda över hela bredden. Etiketten sitter i ramen som en legend,
   med vit botten så att linjen bryts bakom ordet. Posterna står i rad med
   hårlinjer emellan; render.js skriver "Etikett: värde" i samma span, så
   hela posten är halvfet. */
.cv[data-tpl="ruta"] .ct--detaljer {
  display: block; width: fit-content; max-width: 100%;
  margin-top: 13px; padding: 8px 0 5px 14px;
  border: 1.5px solid var(--accent); border-radius: 8px;
  font-size: 0; line-height: 0;         /* inga mellanrum mellan inline-block-posterna */
  break-inside: avoid;
}
/* etiketten: ett blockpseudoelement på egen rad som dras upp med negativ
   marginal så att den står PÅ ramen (vit botten bryter linjen bakom ordet) —
   i flödet, inte positionerad (ATS-regeln ovan) */
.cv[data-tpl="ruta"] .ct--detaljer::before {
  content: "Snabbfakta";
  display: block; width: fit-content;
  margin: calc(-8px - .95em) 0 3px 12px; padding: 0 6px;
  background: #fff; line-height: 1.4;
  color: var(--accent); font-size: calc(var(--fs) * .66); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.cv[data-tpl="ruta"][data-lang="en"] .ct--detaljer::before { content: "Quick facts"; }
/* posterna radas som ord: bryts raden får den föregående raden en
   avslutande hårlinje, aldrig en inledande */
.cv[data-tpl="ruta"] .ct--detaljer li {
  display: inline-block; vertical-align: top; opacity: 1;
  margin: 0 14px 4px 0; padding: 0 14px 0 0;
  color: var(--doc-ink); font-weight: 600; font-size: calc(var(--fs) * .92); line-height: 1.4;
  border-right: 1px solid var(--accent-line);
}
.cv[data-tpl="ruta"] .ct--detaljer li:last-child { border-right: 0; padding-right: 0; }

/* --- rubriker: spärrade versaler i bläck med ett kort accentstreck före ------ */
.cv[data-tpl="ruta"] .cv-main { --kol-gap: calc(var(--gap) * .95); padding-top: calc(var(--gap) * 1.05); }
.cv[data-tpl="ruta"] .s__h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  color: var(--doc-ink); font-weight: 800;
  font-size: calc(var(--fs) * .8); letter-spacing: .14em; text-transform: uppercase;
}
.cv[data-tpl="ruta"] .s__h::before {
  content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: var(--accent);
}
/* ikoner på (kandidatens val — mallen har dem av): ikonen tar streckets plats */
.cv[data-icons="on"][data-tpl="ruta"] .s__h::before { display: none; }
.cv[data-icons="on"][data-tpl="ruta"] .s__h .s__ikon { margin-right: 0; color: var(--accent); }

.cv[data-tpl="ruta"] .e__title { font-weight: 700; }
.cv[data-tpl="ruta"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="ruta"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="ruta"] .rt li::marker { color: var(--accent); }

/* --- intygssektionerna som bockrader ------------------------------------------
   Yrkespaketens sektioner (T.SECTIONS: behorigheter, truckkort, korkort,
   yrkesbevis, maskinbevis, stadbevis, hygienintyg) och certifikat: namn,
   utfärdare och datum på EN rad, bocken ritad med två kantlinjer (ingen
   text — ATS-läsaren ser bara orden). Beskrivningsfält finns inte i dem. */
.cv[data-tpl="ruta"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates) .s__b { --sek-gap: 5px; }
.cv[data-tpl="ruta"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates) .e__main {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
}
/* bocken: ett flexbarn (i flödet), inte ett positionerat märke */
.cv[data-tpl="ruta"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates) .e__main::before {
  content: ""; flex: none; align-self: center;
  width: 10px; height: 5px; margin: 0 2px -3px 2px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cv[data-tpl="ruta"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates) .e__meta {
  padding-left: 10px; border-left: 1px solid var(--doc-line); font-size: calc(var(--fs) * .9);
}

/* --- nivåer i klartext, taggar som rad med hårlinjer ------------------------ */
.cv[data-tpl="ruta"] .lv { gap: 4px; }
.cv[data-tpl="ruta"] .lv__meter { display: none; }
.cv[data-tpl="ruta"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="ruta"] .lv__row::after { font-size: calc(var(--fs) * .88); color: var(--doc-mut); }
.cv[data-tpl="ruta"] .s:not([data-style]) .tg { display: flex; flex-wrap: wrap; gap: 4px 0; }
.cv[data-tpl="ruta"] .s:not([data-style]) .tg li { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--doc-line); }
.cv[data-tpl="ruta"] .s:not([data-style]) .tg li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
/* systemsektionerna (lagersystem, kassasystem, kontorssystem): namn och vana
   på en rad — kompetens, ingen bock */
.cv[data-tpl="ruta"] :is(.s--lagersystem, .s--kassasystem, .s--kontorssystem) .s__b { --sek-gap: 5px; }
.cv[data-tpl="ruta"] :is(.s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__main {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
}
.cv[data-tpl="ruta"] :is(.s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__meta {
  padding-left: 10px; border-left: 1px solid var(--doc-line); font-size: calc(var(--fs) * .9);
}
/* Brev: huvudet är samma flexhuvud, rutan följer med — det är poängen. */

/* ==========================================================================
   BRICKA         formspråk: Talea          layout: band
   Behörigheterna först. Detaljraden (körkort, egna fält som "Truckkort:
   A2, B1", "ID06", "Kan börja: omgående") som vita brickor i ett tonat band
   som löper kant i kant under huvudet — bandet är sidans enda färgyta och
   bär andrarösten (--accent2, palettens hex2). Yrkespaketens intygs-
   sektioner (T.SECTIONS: behorigheter, truckkort, korkort, yrkesbevis,
   maskinbevis, stadbevis, hygienintyg), certifikat och systemsektionerna
   (lagersystem, kassasystem, kontorssystem) sätts som brickor i
   rad i stället för poster under varandra; taggar får samma bricka i
   bandets ton. Ikoner vid rubrikerna som standard (icons: true).
   Huvudet är ett rutnät med .cv-head__text som display: contents så att
   bandet kan spänna båda kolumnerna under fotot — grid-fällan: ALLA barn
   har explicit grid-area. Utan detaljer bär en accent2-linje bandets plats.
   ========================================================================== */

.cv[data-tpl="bricka"] {
  --pad-x: 48px; --pad-y: 42px;
  --tpl-font: "Source Sans 3", sans-serif;
  --bricka-ton: var(--accent-soft);
  --bricka-ton: color-mix(in srgb, var(--accent2, #A5701F) 16%, #fff);
  --bricka-kant: var(--accent2, #A5701F);
}
.cv[data-tpl="bricka"] .cv-head {
  /* gap: basens 22px flexgap skulle annars bli RADgap i rutnätet */
  display: grid; grid-template-columns: 1fr auto; gap: 0 24px;
  /* 1fr på kontaktraden: fotots överskjutande höjd hamnar UNDER kontakten,
     inte som luft mellan namn och roll (spännande gridbarn delar annars ut
     överskottet jämnt på auto-raderna) */
  grid-template-rows: auto auto 1fr auto;
  align-items: start; padding-bottom: 0;
}
.cv[data-tpl="bricka"] .cv-head__text { display: contents; }
.cv[data-tpl="bricka"] .cv-name { grid-area: 1 / 1 / 2 / 2; font-weight: 700; font-size: calc(var(--fs) * 2.2); letter-spacing: -.02em; }
.cv[data-tpl="bricka"] .cv-role { grid-area: 2 / 1 / 3 / 2; margin-top: 2px; color: var(--accent); font-weight: 600; }
.cv[data-tpl="bricka"] .ct--inline { grid-area: 3 / 1 / 4 / 2; margin-top: 10px; align-self: start; }
/* 6.4 fs: fotot får inte bli högre än namn + roll + kontakt — då styr det
   huvudets höjd och bandet sjunker; brickorna är formen, inte porträttet */
.cv[data-tpl="bricka"] .cv-photo {
  grid-area: 1 / 2 / 4 / 3; border-radius: 14px;
  width: calc(var(--fs) * 6.4 * var(--fotoskala, 1));
  height: calc(var(--fs) * 6.4 * var(--fotoskala, 1));
}
.cv[data-tpl="bricka"][data-photo="square"] .cv-photo { border-radius: 4px; }

/* --- brickbandet ----------------------------------------------------------- */
.cv[data-tpl="bricka"] .ct--detaljer {
  grid-area: 4 / 1 / 5 / 3;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px calc(-1 * var(--pad-x)) 0;
  padding: 9px var(--pad-x);
  background: var(--bricka-ton);
  break-inside: avoid;
}
.cv[data-tpl="bricka"] .ct--detaljer li {
  opacity: 1; background: #fff;
  border: 1.5px solid var(--bricka-kant); border-radius: 6px;
  padding: 3px 11px; color: var(--doc-ink);
  font-weight: 600; font-size: calc(var(--fs) * .9);
}
/* inga detaljer: bandets plats markeras av en linje i samma ton */
.cv[data-tpl="bricka"] .cv-head:not(:has(.ct--detaljer))::after {
  content: ""; grid-area: 4 / 1 / 5 / 3; height: 3px; margin-top: 18px;
  background: var(--bricka-kant);
}

/* --- rubriker: accentversaler med ikon --------------------------------------- */
.cv[data-tpl="bricka"] .cv-main { --kol-gap: calc(var(--gap) * .9); padding-top: calc(var(--gap) * 1.1); }
.cv[data-tpl="bricka"] .s__h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  color: var(--accent); font-weight: 700;
  font-size: calc(var(--fs) * .8); letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-icons="on"][data-tpl="bricka"] .s__h .s__ikon { margin-right: 0; }
.cv[data-tpl="bricka"] .e__title { font-weight: 700; }
.cv[data-tpl="bricka"] .e__meta { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="bricka"] .e__date { font-variant-numeric: tabular-nums; }
.cv[data-tpl="bricka"] .rt li::marker { color: var(--bricka-kant); }

/* --- intygssektionerna som brickor ------------------------------------------
   Varje post en inramad bricka: namnet halvfett, utfärdare · datum dämpat
   under. Brickorna radas och bryts som ord — ett CV med två rader
   erfarenhet men sju kort fyller sidan med det som räknas. */
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .s__b {
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* brickorna radas i flex även i tryck: basens printmarginal mellan poster
   ska inte läggas ovanpå flexgapet */
@media print {
  .cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
    .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
    .s--lagersystem, .s--kassasystem, .s--kontorssystem) .s__b > * + * { margin-top: 0; }
}
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .e {
  flex: 0 1 auto; max-width: 100%; min-width: 0;
  border: 1.5px solid var(--accent-line); border-radius: 6px;
  padding: 4px 10px 5px;
}
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px;
}
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__main { display: contents; }
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__title {
  flex: 1 1 100%; font-size: calc(var(--fs) * .95); line-height: 1.25;
}
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) :is(.e__meta, .e__date) {
  font-size: calc(var(--fs) * .78); color: var(--doc-mut); font-weight: 400; white-space: normal; line-height: 1.35;
}
.cv[data-tpl="bricka"] :is(.s--behorigheter, .s--truckkort, .s--korkort, .s--yrkesbevis,
  .s--maskinbevis, .s--stadbevis, .s--hygienintyg, .s--certificates,
  .s--lagersystem, .s--kassasystem, .s--kontorssystem) .e__main:has(.e__meta) + .e__date::before { content: "· "; }

/* --- taggar som brickor i bandets ton, mätare som fyllda rutor -------------- */
.cv[data-tpl="bricka"] .tg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv[data-tpl="bricka"] .tg li {
  background: var(--bricka-ton); border-radius: 6px;
  padding: 2px 11px; font-weight: 600; font-size: calc(var(--fs) * .88);
}
/* mätaren som fem små brickor: kontur i andrarösten, fylld när nivån nås —
   samma ton som bandets kanter och taggarna, så att allt som är "bricka"
   på sidan talar med en röst (accent bär rubriker och roll) */
.cv[data-tpl="bricka"] .lv { gap: 6px; }
.cv[data-tpl="bricka"] .lv__meter { gap: 3px; }
.cv[data-tpl="bricka"] .lv__meter i {
  width: calc(var(--fs) * .56); height: calc(var(--fs) * .56); border-radius: 2px;
  background: none; border: 1.5px solid var(--bricka-kant);
}
.cv[data-tpl="bricka"] .lv__meter i.is-on { background: var(--bricka-kant); }
/* i de valbara stilarna (staplar/prickar) följer fyllningen samma röst */
.cv[data-tpl="bricka"] { --lv-on: var(--accent2, #A5701F); --lv-off: var(--bricka-ton); --lv-prick: var(--bricka-ton); --tag-bg: var(--bricka-ton); --tag-fg: var(--doc-ink); }
/* Brev: samma huvud och band (detaljraden renderas i brevets huvud) — det
   är mallens identitet, som Kils pillerband. Inget bakgrundslager att släcka. */

/* ==========================================================================
   JURYNS FIXLISTA 3/9 (steg3/JURY-49.md) — sist i filen med avsikt: reglerna
   ska vinna ordningsstriden mot både mallblocken och "grunden". Numren
   nedan är juryns (K = kritisk, H = hög, G = grundfynd).
   ========================================================================== */

/* K1 Tryck: etikettspalten (11,6 fs) rymde "ARBETSLIVSERFARENHET" utan ikon
   men inte med 1 em + .45 em + hängande indrag — ikonen stod ensam på rad 1,
   ordet bröts "…ERFARENHE / T". Tryck är den strängaste mallen och ikonen
   tillför inget: den döljs, som Kapitels siffra och Krets plattor. */
.cv[data-icons="on"][data-tpl="tryck"] .s__h .s__ikon { display: none; }   /* (0,5,0): slår grundens inline-block */
.cv[data-icons="on"][data-tpl="tryck"] .s__h { padding-left: 0; text-indent: 0; }

/* K2 Kontor: samma haveri, men registerraden tål ikonen — spalten breddas
   med exakt ikonens mått (1 em + .45 em, mätt i rubrikens egen stil). */
.cv[data-icons="on"][data-tpl="kontor"] .s { grid-template-columns: calc(var(--fs) * 11.8 + 1.45em * .74) 1fr; }

/* G4 Text-stilen: nivåordet bröts "Mycket / god" och avstavades "Myc- / ket"
   i alla spalter ≤ 33 % (14 mallar). Hela "— Mycket god" flyttar nu som en
   enhet till nästa rad; kommaraden i spalten avstavas inte heller. */
.cv .s[data-style="text"] .lv__row::after { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
.cv .cv-side .s[data-style="text"] .tg { -webkit-hyphens: manual; hyphens: manual; }

/* H1 Sammet, Krets: nollmarginalen är skriven för satsytans flexrubrik men
   slog även på spaltens vanliga rubriker — "☆FÄRDIGHETER". */
.cv[data-icons="on"]:is([data-tpl="sammet"], [data-tpl="krets"]) .cv-side .s__h .s__ikon { margin-right: .45em; }

/* H2 Sand: accentstrecket under rubriken började vid ikonens vänsterkant —
   det understryker ordet, inte ikonen. */
.cv[data-icons="on"][data-tpl="sand"] .s__h::after { margin-left: 1.45em; }

/* H3 Journal: ikonen ersatte kickerstrecket (mallens signatur) men var 10 px
   och tunn. Strecket står kvar, ikonen efter det, en grad större och i bläck. */
.cv[data-icons="on"][data-tpl="journal"] .s__h::before { display: block; }
.cv[data-icons="on"][data-tpl="journal"] .s__h .s__ikon { width: 1.35em; height: 1.35em; stroke-width: 1.9; color: var(--doc-ink); }

/* H7 Mast: linan vid spaltgränsen gick rakt genom namnet — huvudet täcker
   den, kolumnerna börjar under. H8: 25 %-spalten gav 135 px textbredd
   (e-posten i tre rader, "HOBBYS / OCH INTRESSEN") — 28 % och kontaktraden
   en grad mindre. H18: taggar och prickar i spalten bröts inne i pillret. */
.cv[data-tpl="mast"] { --side-w: 28%; background-position: 28% 0; }
.cv[data-tpl="mast"] .cv-head { background-image: linear-gradient(#fff, #fff); }
.cv[data-tpl="mast"] .cv-side .ct li { font-size: calc(var(--fs) * .86); }
.cv[data-tpl="mast"] .cv-side .s[data-style="tags"] .lv__row { font-size: calc(var(--fs) * .8); padding: 2px 9px; -webkit-hyphens: manual; hyphens: manual; }
.cv[data-tpl="mast"] .cv-side .s[data-style="dots"] .lv__row::after { font-size: calc(var(--fs) * .8); }

/* H9 Vy: mallen är byggd för liggande bild men får stående porträtt — fotot
   beskars vid 18 % och namnet lade sig över näsa och mun. Huvudet är högre
   (270 px — 300 sprängde A4:an med demot), bilden visar ansiktet i sin övre
   del (center 22 %) och namnet står i nedre tredjedelen över en tätare
   scrim. Utan foto krymper huvudet tillbaka (juryn: 295 px marinfält med
   132 px luft). */
.cv[data-tpl="vy"] .cv-head { min-height: 270px; }
.cv[data-tpl="vy"] .cv-head__text { padding-top: 156px; }
.cv[data-tpl="vy"] .cv-photo { background-position: center 22%; }
.cv[data-tpl="vy"] .cv-head::before {
  background-image: linear-gradient(rgba(20,17,23,.12), rgba(20,17,23,.22) 45%, rgba(20,17,23,.72) 72%, rgba(20,17,23,.8));
}
.cv[data-tpl="vy"] .cv-head:not(:has(.cv-photo)) { min-height: 0; }
.cv[data-tpl="vy"] .cv-head:not(:has(.cv-photo)) .cv-head__text { padding-top: 56px; }

/* H6 Duett: utan foto stod det högra sandblocket (42 % × 210 px) helt tomt.
   Duetten blir en smal sandlist (22 %) — två röster, inget tomt block.
   Bara i CV:t: brevets huvud är ett enda accentblock (brevblocket ovan)
   och får inte tappa det när fotot saknas. */
.cv:not([data-doc="letter"])[data-tpl="duett"] .cv-head:not(:has(.cv-photo)) {
  grid-template-columns: 1fr 22%;
  background-image: linear-gradient(to right, transparent 0 78%, var(--accent-soft) 78% 100%);
  background-image: linear-gradient(to right, transparent 0 78%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, #fff) 78% 100%);
}

/* H5 Fris, Duett: taggstilen och stapelspåret tog accent-soft (plommonton)
   medan banden/plattorna är sand — två pasteller på samma sida. Nu samma
   andraröst som ytorna. */
.cv:is([data-tpl="fris"], [data-tpl="duett"]) {
  --tag-bg: color-mix(in srgb, var(--accent2, var(--accent)) 14%, #fff);
  --lv-off: color-mix(in srgb, var(--accent2, var(--accent)) 24%, #fff);
  --lv-on: var(--accent2, var(--accent));
}

/* Andratonen där den gör helheten bättre (juryn 3/9, punkt 4): Band,
   Tidslinje, Monogram och Fond får Taleas grepp — arbetsgivaren och
   punktmarkören i andrarösten, rubriker och datum behåller accenten. */
.cv:is([data-tpl="band"], [data-tpl="tidslinje"], [data-tpl="monogram"], [data-tpl="fond"]) .e__meta { color: var(--accent2, var(--accent)); font-weight: 600; }
.cv:is([data-tpl="band"], [data-tpl="tidslinje"], [data-tpl="monogram"], [data-tpl="fond"]) .rt li::marker { color: var(--accent2, var(--accent)); }
/* Ateljé (del-C): Skiffer + koppar är ett rent par — datumen bär det. */
.cv[data-tpl="atelje"] .cv-main .e__date { color: var(--accent2, var(--doc-mut)); font-weight: 600; }