/* ==========================================================================
   Talea CV — dokumentmallar
   Tjugotvå mallar i fem formspråk. En gemensam DOM (se render.js); mallen är CSS.
     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);
  --doc-font: "Montserrat", sans-serif;
  --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 * { 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; }
.ct li > span, .dt dd, .e__meta, .e__title, .lv__name, .tg li { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   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; }
.ct--detaljer li { opacity: .85; 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 */
.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(--gap); }
.cv-main { padding: var(--gap) var(--pad-x) var(--pad-y); display: grid; gap: var(--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: calc(var(--gap) * .62); }

/* 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; }
.lv__row { display: grid; grid-template-columns: 1fr auto auto; 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);
}
.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; }

/* ==========================================================================
   1 — TALEA          formspråk: Talea          layout: band
   Loggans plakettform i huvudet, pillerrubriker, sand som andra röst.
   ========================================================================== */

.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: #A5701F; font-weight: 600; }
.cv[data-tpl="talea"] .rt li::marker { color: #C98A3C; }
.cv[data-tpl="talea"] .lv__row { grid-template-columns: 1fr 96px auto; }
.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;
}
.cv[data-tpl="kolumn"] .cv-main .s__h::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 99px;
  background: #C98A3C; margin-top: 6px;
}
.cv[data-tpl="kolumn"] .lv__meter i { border-radius: 99px; }

/* ==========================================================================
   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 { 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 { gap: 0; }
.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; }
.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; }
.cv[data-tpl="kompakt"] .lv__row { grid-template-columns: 1fr auto; }

/* ==========================================================================
   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;
}
.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.
   ========================================================================== */

.cv[data-tpl="antikva"] {
  --doc-font: "Lora", Georgia, serif;
  --doc-line: #DAD5CD;
  --pad-x: 66px; --pad-y: 60px;
  background-color: #FCFBF9;
}
.cv[data-tpl="antikva"] .cv-head { display: block; text-align: center; padding-bottom: 18px; }
.cv[data-tpl="antikva"] .cv-photo { margin: 0 auto 16px; }
.cv[data-tpl="antikva"] .cv-name { font-weight: 400; letter-spacing: .01em; font-size: calc(var(--fs) * 2.5); }
.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: calc(var(--gap) * 1.4); }
.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: 14px;
}
.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.
   ========================================================================== */

.cv[data-tpl="tradition"] { --pad-x: 58px; }
.cv[data-tpl="tradition"] .cv-head { display: block; text-align: center; padding-bottom: 6px; }
.cv[data-tpl="tradition"] .cv-photo { margin: 0 auto 14px; 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", sans-serif;
  --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 { 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 { gap: 0; }
.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); }

/* ==========================================================================
   18 — BLOCKAD       formspråk: Kreativ        layout: single
   Fyllda rubrikblock över hela bredden. Tydlig rytm, lätt att skanna.
   ========================================================================== */

.cv[data-tpl="blockad"] .cv-head { padding-bottom: 18px; }
.cv[data-tpl="blockad"] .cv-name { color: var(--accent); font-weight: 800; letter-spacing: -.025em; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="blockad"] .s__h {
  background: var(--accent); color: #fff;
  padding: 5px 14px; margin: 0 0 12px;
  font-size: calc(var(--fs) * .8); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.cv[data-tpl="blockad"] .e__meta { color: var(--doc-mut); }
.cv[data-tpl="blockad"] .lv__meter i { border-radius: 0; }

/* ==========================================================================
   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));
  font-family: "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;
  font-family: "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 Cirkulär, Casual, Horisontell och Modern */
.cv[data-tpl="cirkular"] .lv__meter i,
.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="cirkular"] .lv__meter i.is-on,
.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); }

/* ==========================================================================
   23 — CIRKULÄR     formspråk: Klassiker      layout: sideL
   Välvd namnplatta i accentfärg, tonad spalt, punktmätare.
   ========================================================================== */

.cv[data-tpl="cirkular"] {
  --side-w: 34%;
  --pad-x: 44px;
  font-family: "Nunito Sans", sans-serif;
  background-image: linear-gradient(to right, var(--accent-soft) 0 34%, transparent 34% 100%);
}
.cv[data-tpl="cirkular"] .cv-head { padding: 0; align-items: flex-start; gap: 0; }
.cv[data-tpl="cirkular"] .cv-head__text {
  flex: none; width: 46%;
  background-image: linear-gradient(var(--accent), var(--accent));
  color: #fff;
  padding: 52px 40px 40px var(--pad-x);
  border-radius: 0 0 190px 0;
}
.cv[data-tpl="cirkular"] .cv-name { color: #fff; font-weight: 800; font-size: calc(var(--fs) * 1.9); }
.cv[data-tpl="cirkular"] .cv-role { color: rgba(255,255,255,.82); font-weight: 600; }
.cv[data-tpl="cirkular"] .cv-photo { order: 2; margin: 26px var(--pad-x) 0 auto; }
/* Jobseekers cirkulärmall bär en tjock vit ring runt fotot — vår gör
   detsamma som mallstandard, så flyttade CV:n känns igen. */
.cv[data-tpl="cirkular"][data-fotoram="standard"] .cv-photo {
  box-shadow: 0 0 0 calc(var(--fs) * .5) #fff;
}
.cv[data-tpl="cirkular"] .s__h {
  font-size: calc(var(--fs) * 1.2); font-weight: 800; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="cirkular"] .cv-main .s__h { font-size: calc(var(--fs) * 1.4); }
.cv[data-tpl="cirkular"] .e__title { font-weight: 800; }
.cv[data-tpl="cirkular"] .e__date { font-weight: 700; color: var(--doc-ink); }
.cv[data-tpl="cirkular"] .lv { gap: 9px; }

/* ==========================================================================
   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;
  font-family: "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%;
  font-family: "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; }

/* ==========================================================================
   26 — VERTIKAL     formspråk: Klassiker      layout: sideL
   Smal mättad rand längs vänsterkanten, lugn tonad spalt, namn i accentfärg.
   ========================================================================== */

.cv[data-tpl="vertikal"] {
  --side-w: 34%;
  font-family: "Source Sans 3", sans-serif;
  background-image: linear-gradient(to right,
    var(--accent) 0 10px, var(--accent-soft) 10px 34%, transparent 34% 100%);
}
.cv[data-tpl="vertikal"] .cv-head {
  display: grid; grid-template-columns: 34% 1fr;
  padding: var(--pad-y) 0 0; align-items: center; gap: 0;
}
.cv[data-tpl="vertikal"] .cv-photo { grid-column: 1; justify-self: center; }
.cv[data-tpl="vertikal"] .cv-head__text { grid-column: 2; padding: 0 var(--pad-x) 0 30px; }
.cv[data-tpl="vertikal"] .cv-name { color: var(--accent); font-weight: 700; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="vertikal"] .cv-role { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="vertikal"] .cv-side { padding: calc(var(--gap) * 1.4) 24px var(--pad-y) 36px; }
.cv[data-tpl="vertikal"] .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="vertikal"] .cv-main .s__h { font-size: calc(var(--fs) * 1.4); }
.cv[data-tpl="vertikal"] .lv__meter { display: none; }
.cv[data-tpl="vertikal"] .lv__row { grid-template-columns: 1fr auto; }
.cv[data-tpl="vertikal"] .s--languages .lv__row::after {
  content: attr(data-niva); font-size: calc(var(--fs) * .86); color: var(--doc-mut);
}
.cv[data-tpl="vertikal"] .tg { display: grid; gap: 4px; }
.cv[data-tpl="vertikal"] .e__date { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   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%;
  font-family: "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;
  font-family: "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); }
.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));
  font-family: "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 { 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;
  font-family: "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;
  font-family: "Source Sans 3", sans-serif;
}
.cv[data-tpl="verkstad"] .cv-head { position: relative; align-items: center; padding-bottom: 18px; }
.cv[data-tpl="verkstad"] .cv-head::after {
  content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0;
  height: 5px;
  background-image: linear-gradient(to right, var(--accent) 0 84px, var(--doc-ink) 84px 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 { 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);
}

/* ==========================================================================
   AVSTAMP         formspråk: Kreativ        layout: band
   Centrerat huvud, titeln som piller och gott om luft. Formen bär när
   raderna är få — det första CV:t ser avsiktligt ut, inte tomt.
   ========================================================================== */

.cv[data-tpl="avstamp"] {
  --pad-x: 60px; --pad-y: 48px;
  --gap: calc(26px * var(--doc-density));
}
.cv[data-tpl="avstamp"] .cv-head {
  display: block; text-align: center;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  padding: calc(var(--pad-y) * 1.1) var(--pad-x) calc(var(--pad-y) * .8);
  border-radius: 0 0 40px 40px;
}
.cv[data-tpl="avstamp"] .cv-photo { margin: 0 auto 16px; }
.cv[data-tpl="avstamp"][data-fotoram="standard"] .cv-photo {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent-line);
}
.cv[data-tpl="avstamp"] .cv-name { font-weight: 800; letter-spacing: -.02em; font-size: calc(var(--fs) * 2.3); }
.cv[data-tpl="avstamp"] .cv-role {
  display: inline-block; margin-top: 9px;
  background: var(--accent); color: #fff;
  padding: 4px 16px; border-radius: 999px;
  font-size: calc(var(--fs) * .9); font-weight: 600;
}
.cv[data-tpl="avstamp"] .ct--inline { justify-content: center; margin-top: 14px; gap: 4px 18px; }
.cv[data-tpl="avstamp"] .ct--detaljer { justify-content: center; margin-top: 4px; }
.cv[data-tpl="avstamp"] .cv-main { padding-top: calc(var(--gap) * 1.25); gap: calc(var(--gap) * 1.1); }
.cv[data-tpl="avstamp"] .s__h {
  text-align: center; margin-bottom: 12px;
  font-size: calc(var(--fs) * .8); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--doc-ink);
}
.cv[data-tpl="avstamp"] .s__h::after {
  content: ""; display: block; width: 34px; height: 4px; border-radius: 99px;
  background: var(--accent); margin: 7px auto 0;
}
.cv[data-tpl="avstamp"] .s--profile .rt {
  text-align: center; font-size: calc(var(--fs) * 1.04);
  max-width: 44em; margin-left: auto; margin-right: auto;
}
.cv[data-tpl="avstamp"] .e__date {
  background: var(--accent-soft); color: var(--doc-ink);
  padding: 2px 10px; border-radius: 999px;
  font-size: calc(var(--fs) * .8); font-weight: 600;
}
.cv[data-tpl="avstamp"] .e__meta { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="avstamp"] .rt li::marker { color: var(--accent); }
.cv[data-tpl="avstamp"] .lv__meter i { width: calc(var(--fs) * .7); height: calc(var(--fs) * .34); border-radius: 99px; }
.cv[data-tpl="avstamp"] .tg { display: flex; flex-wrap: wrap; gap: 7px; }
.cv[data-tpl="avstamp"] .tg li {
  background: var(--accent-soft); color: var(--doc-ink);
  padding: 4px 14px; border-radius: 999px;
  font-weight: 600; font-size: calc(var(--fs) * .9);
}

/* ==========================================================================
   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;
  font-family: "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; }
.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;
}
.cv[data-tpl="gavel"] .cv-main .s__h::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 99px;
  background: #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);
  padding: calc(var(--pad-y) * .85) var(--pad-x) calc(var(--pad-y) * .7);
  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 { 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%;
  font-family: "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); }
.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%;
  font-family: "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%;
  font-family: "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%;
  font-family: "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); }
.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;
}

/* ==========================================================================
   33 — KOMPASS      formspråk: Klassiker      layout: sideR
   Tonad högerspalt och färdigheterna som runda mätare — formen från
   CV-byggarnas klassiker, utan att ge avkall på nivåordet i klartext.
   ========================================================================== */

.cv[data-tpl="kompass"] {
  --side-w: 32%;
  font-family: "Nunito Sans", sans-serif;
  background-image: linear-gradient(to left, var(--accent-soft) 0 32%, transparent 32% 100%);
}
.cv[data-tpl="kompass"] .cv-head { align-items: center; }
.cv[data-tpl="kompass"] .cv-name { color: var(--accent); font-weight: 800; font-size: calc(var(--fs) * 2.2); }
.cv[data-tpl="kompass"] .cv-role { color: var(--doc-mut); font-weight: 600; }
.cv[data-tpl="kompass"] .s__h {
  font-size: calc(var(--fs) * 1.15); font-weight: 800; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
}
.cv[data-tpl="kompass"] .cv-main .s__h { font-size: calc(var(--fs) * 1.3); }
/* runda mätare: cirkeln fylls medurs efter nivån, hålet i mitten är vitt */
.cv[data-tpl="kompass"] .lv { gap: 10px; }
.cv[data-tpl="kompass"] .lv__row { grid-template-columns: auto 1fr auto; }
.cv[data-tpl="kompass"] .lv__meter {
  order: -1; position: relative; display: block;
  width: calc(var(--fs) * 1.7); height: calc(var(--fs) * 1.7);
  border-radius: 50%; background: var(--accent-line);
}
.cv[data-tpl="kompass"] .lv__meter::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.cv[data-tpl="kompass"] .lv__meter i { display: none; }
.cv[data-tpl="kompass"] .lv__meter[data-level="1"] { background: conic-gradient(var(--accent) 0 20%, var(--accent-line) 20% 100%); }
.cv[data-tpl="kompass"] .lv__meter[data-level="2"] { background: conic-gradient(var(--accent) 0 40%, var(--accent-line) 40% 100%); }
.cv[data-tpl="kompass"] .lv__meter[data-level="3"] { background: conic-gradient(var(--accent) 0 60%, var(--accent-line) 60% 100%); }
.cv[data-tpl="kompass"] .lv__meter[data-level="4"] { background: conic-gradient(var(--accent) 0 80%, var(--accent-line) 80% 100%); }
.cv[data-tpl="kompass"] .lv__meter[data-level="5"] { background: var(--accent); }
.cv[data-tpl="kompass"] .e__date { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   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"] { font-family: "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; }
.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"] { font-family: "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;
  font-family: "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: 50px;
  padding: 18px;
  font-family: "IBM Plex Serif", serif;
  background-image: linear-gradient(var(--accent), var(--accent));
}
.cv[data-tpl="bard"] .cv-inner { background: #fff; min-height: 100%; }
.cv[data-tpl="bard"] .cv-head { display: block; text-align: center; padding-top: calc(var(--pad-y) * .85); }
.cv[data-tpl="bard"] .cv-photo { margin: 0 auto 16px; }
.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) * .8); }

/* ==========================================================================
   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"] { font-family: "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%;
  font-family: "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%; }
.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%;
  font-family: "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%;
  font-family: "Manrope", sans-serif;
  background-image: linear-gradient(to right, #17181C 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); }
.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%;
  font-family: "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%;
  font-family: "Source Sans 3", sans-serif;
  background-image: linear-gradient(to right, #EDE9E3 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); }

/* ==========================================================================
   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="vertikal"] .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,
.cv[data-doc="letter"][data-tpl="vertikal"] .cv-head {
  padding: var(--pad-y) var(--pad-x) 0;
}
.cv[data-doc="letter"][data-tpl="cirkular"] .cv-head__text { width: auto; border-radius: 0 0 140px 0; }
.cv[data-doc="letter"][data-tpl="cirkular"] .cv-photo { order: 0; margin: 26px 0 0 var(--pad-x); }
.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; }

/* --- 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 de fyra mallarna med vit sidotext.
   ========================================================================== */

.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 { color: rgba(255,255,255,.88); }

.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 { color: rgba(255,255,255,.72); }

/* ==========================================================================
   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; }
}

/* ==========================================================================
   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;
}