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

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

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

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

/* ==========================================================================
   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; }
  .s__h { break-after: avoid; }
  .cv-head { break-after: avoid; }
  .rt p { orphans: 2; widows: 2; }
}