/* ==========================================================================
   Talea CV — appskal (rail, instrumentpanel, redigerare, designdocka)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
/* inga webbläsarblå formkontroller någonstans */
input { accent-color: var(--plum-800); }

/* range: egen track och tumme i varumärkets färger ----------------------- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 28px; background: transparent; cursor: pointer;
  accent-color: var(--plum-800);
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-pill); background: var(--ink-200);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--plum-800); border: 2px solid var(--white);
  box-shadow: var(--sh-1);
  transition: transform var(--fast) var(--ease-out);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--r-pill); background: var(--ink-200);
}
input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: var(--r-pill); background: var(--plum-800);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--plum-800); border: 2px solid var(--white);
  box-shadow: var(--sh-1);
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.view { display: none; }
/* diskret entré vid varje vybyte — display-regeln triggar animationen när
   hidden tas bort, helt utan JS */
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.view:not([hidden]) { display: block; animation: viewIn var(--med) var(--ease-out); }

/* ikoner: en enda stil, aldrig fyllda ------------------------------------ */
.ico {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Knappar
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* ljus uppifrån: gradientyta, inre ljuskant och skugga i knappens egen färg */
.btn--primary {
  background: linear-gradient(180deg, var(--plum-700), var(--plum-800));
  color: var(--white);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              0 1px 2px rgba(44,5,56,.25),
              0 4px 14px rgba(74,11,94,.22);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--plum-600), var(--plum-700));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              0 2px 4px rgba(44,5,56,.25),
              0 8px 22px rgba(74,11,94,.32);
}
.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink-800);
}
.btn--secondary:hover { border-color: var(--brand-300); background: var(--brand-050); }

.btn--ghost { color: var(--ink-600); padding: 9px 12px; }
.btn--ghost:hover { background: var(--ink-100); color: var(--ink-900); }

.btn--danger { color: var(--danger); }
.btn--danger:hover { background: var(--danger-100); }

/* ==========================================================================
   Startvyn
   Förstagångsbesökaren ska inte mötas av en tom arbetsyta utan av ett val.
   ========================================================================== */

#view-start:not([hidden]) { display: block; }

.start {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  /* två asymmetriska ljusfält: plommon uppe vänster, sand uppe höger —
     varumärkets två röster i samma rum */
  background:
    radial-gradient(90% 70% at 18% -12%, var(--plum-100) 0%, transparent 55%),
    radial-gradient(70% 55% at 88% -5%, var(--sand-100) 0%, transparent 55%),
    var(--canvas);
}
.start__head { padding: var(--s6) var(--s8); }
.start__brand { display: inline-flex; align-items: center; gap: 14px; }

/* Hela loggan: ordmärket med WORK spärrat under, som i den riktiga
   talea WORK-loggan. Produktnamnet CV står avskilt bakom en tunn linje. */
.brandstack { display: grid; justify-items: center; gap: 3px; }
.brandstack img { height: 26px; width: auto; display: block; }
.brandstack__work {
  font-size: 9.5px; font-weight: 600; line-height: 1;
  letter-spacing: .52em; margin-right: -.52em;   /* spärrningen ska inte skjuta WORK åt vänster */
  text-transform: uppercase;
  color: var(--ink-700);
}
.start__product {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--plum-700);
  padding-left: 14px; border-left: 1px solid var(--ink-200);
}

.start__main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s8) var(--s6) var(--s12);
  max-width: 860px; margin: 0 auto; width: 100%;
}
.start__title {
  font-size: var(--t-display);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  color: var(--plum-800);
}
/* serif-kursiv accent på nyckelordet — sans/serif-parningen är signaturen */
.start__title em {
  font-family: "Lora", Georgia, serif;
  font-style: italic; font-weight: 500; letter-spacing: 0;
  color: var(--plum-700);
}
.start__lede {
  margin-top: var(--s4); max-width: min(46ch, 100%);
  font-size: var(--t-md); line-height: 1.6; color: var(--ink-600);
}

/* --- signaturen: tre mallkort som viker ut sig till en solfjäder -------- */
.start__fan {
  display: flex; justify-content: center; align-items: flex-end;
  height: 118px; margin-bottom: var(--s6);
}
.fan__card {
  position: relative;
  width: 84px; aspect-ratio: 1 / 1.35;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  transform-origin: 50% 130%;
  animation: fan-in .6s var(--ease-out) both;
}
.fan__card::before {
  content: ""; position: absolute; inset: 9px 9px auto;
  height: 20px; border-radius: 4px;
  background: var(--plum-800);
}
.fan__card::after {
  content: ""; position: absolute; inset: 39px 11px 11px;
  background: repeating-linear-gradient(to bottom, var(--ink-200) 0 3px, transparent 3px 11px);
}
.fan__card:nth-child(1) { transform: rotate(-9deg) translate(15px, 6px); animation-delay: .05s; }
.fan__card:nth-child(2) { z-index: 1; }
.fan__card:nth-child(3) { transform: rotate(9deg) translate(-15px, 6px); animation-delay: .1s; }
.fan__card:nth-child(1)::before { background: #1E3352; }   /* Midnatt ur mallpaletten */
.fan__card:nth-child(3)::before { background: var(--sand-600); }
@keyframes fan-in { from { transform: none; opacity: 0; } }

/* orkestrerad entré: vyn ligger hidden tills JS visar den, så animationerna
   startar exakt vid reveal — backwards håller allt osynligt före sin delay */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#view-start:not([hidden]) .start__title,
#view-start:not([hidden]) .start__lede,
#view-start:not([hidden]) .start__choices,
#view-start:not([hidden]) .start__note--hero {
  animation: rise var(--slow) var(--ease-out) backwards;
}
#view-start:not([hidden]) .start__lede        { animation-delay: 70ms; }
#view-start:not([hidden]) .start__note--hero  { animation-delay: 140ms; }
#view-start:not([hidden]) .start__choices     { animation-delay: 200ms; }
/* Inget barn får bli bredare än skärmen. ch-mått och nowrap-knappar kan annars
   trycka ut sidan i sidled på en telefon. */
.start__main > * { min-width: 0; max-width: 100%; }
.choice { min-width: 0; }

.start__choices {
  margin-top: var(--s10);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5);
  width: 100%;
}
.choice {
  display: grid; justify-items: start; gap: 6px;
  padding: var(--s6);
  text-align: left; cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease),
              border-color var(--fast) var(--ease);
}
.choice:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--plum-300); }
.choice__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s2);
  border-radius: var(--r-md);
  background: var(--plum-050); color: var(--plum-700);
}
.choice__ico .ico { width: 22px; height: 22px; }
.choice__t { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.choice__d { font-size: var(--t-sm); color: var(--ink-500); line-height: 1.5; }

.choice--primary {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(160deg, var(--plum-700), var(--plum-850));
  border-color: transparent; color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--sh-2);
}
.choice--primary:hover {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.1), transparent 55%),
    linear-gradient(160deg, var(--plum-600), var(--plum-800));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(74,11,94,.35);
}
.choice--primary .choice__ico { background: rgba(255,255,255,.14); color: var(--sand-300); }
.choice--primary .choice__d { color: rgba(255,255,255,.75); }

.start__note {
  margin-top: var(--s8);
  display: inline-flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--t-sm); color: var(--ink-500); max-width: min(54ch, 100%);
  text-align: left;
}
.start__note .ico { width: 16px; height: 16px; flex: none; color: var(--ok); }

/* Integritetslöftet är det mest särskiljande vi har — det står därför i
   hjälteytan, direkt under ingressen, inte som finstilt längst ned. */
.start__note--hero {
  margin-top: var(--s5);
  align-items: center;
  font-size: var(--t-base); color: var(--ink-600);
  padding: var(--s2) var(--s4);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: var(--sh-1);
}
.start__note--hero .ico { width: 18px; height: 18px; }

.start__more {
  margin-top: var(--s8);
  border: 0; background: none; cursor: pointer;
  font-size: var(--t-base); font-weight: 500; color: var(--plum-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.start__more[hidden] { display: none; }

/* Köpvägen för den som bygger åt andra — synlig men lågmäld, kandidaten ska
   aldrig uppleva startsidan som en säljtratt. */
.start__proffs {
  margin-top: var(--s4);
  display: inline-block;
  border: 0; background: none; cursor: pointer;
  font-size: var(--t-sm); color: var(--ink-500);
  text-decoration: none;
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  transition: background var(--fast) var(--ease);
}
.start__proffs span { color: var(--plum-700); font-weight: 500; }
.start__proffs:hover { background: var(--plum-050); }
.start__proffs:hover span { text-decoration: underline; text-underline-offset: 3px; }

.start__foot {
  padding: var(--s6) var(--s8); text-align: center;
  font-size: var(--t-sm); color: var(--ink-400);
}
.start__foot a { color: var(--plum-700); text-decoration: underline; text-underline-offset: 2px; }
/* Länkraden ligger på en rad på skrivbordet och radbryter mjukt på mobil.
   Avsändarraden är medvetet dämpad — den ska gå att hitta, inte att läsa. */
.foot__lankar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s5);
}
.foot__avsandare {
  margin: var(--s3) auto 0; max-width: 62ch;
  font-size: var(--t-xs); color: var(--ink-400); line-height: 1.6;
}

@media (max-width: 680px) {
  .start__choices { grid-template-columns: 1fr; margin-top: var(--s8); }
  .start__head { padding: var(--s5) var(--s5) 0; }
  .start__main { padding: var(--s6) var(--s5) var(--s10); }
  .start__pitch { margin-top: var(--s10); }
  .start__fan { height: 96px; }
  .fan__card { width: 70px; }
}
@media (max-width: 520px) {
  /* pillret blir en pösig stadion när texten radbryts */
  .start__note--hero { border-radius: var(--r-lg); align-items: flex-start; }
  .start__note--hero .ico { margin-top: 2px; }
}

/* --- klarrutan efter nedladdning --------------------------------------- */

.done { display: grid; gap: var(--s5); max-width: 620px; }
.done__lead { font-size: var(--t-md); line-height: 1.6; color: var(--ink-700); }
.done__cta {
  display: grid; gap: var(--s3);
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--plum-800), var(--plum-700));
  color: var(--white);
}
.done__cta h3 { font-size: var(--t-lg); letter-spacing: -.01em; }
.done__cta p { font-size: var(--t-sm); color: rgba(255,255,255,.82); line-height: 1.55; max-width: 46ch; }
.done__cta .btn { align-self: start; background: var(--white); color: var(--plum-800); font-weight: 600; margin-top: var(--s2); }
.done__cta .btn:hover { background: var(--sand-100); }
.done__row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.done__note { font-size: var(--t-sm); color: var(--ink-500); }

/* delning och läsvy ------------------------------------------------------- */
.share__url { display: flex; gap: var(--s3); }
.share__url input {
  flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ink-050); font-size: var(--t-sm);
}
.lasvy__info { padding: var(--s10) var(--s2); display: grid; gap: var(--s4); justify-items: start; max-width: 46ch; }
.lasvy__talea {
  margin-top: var(--s6); padding-top: var(--s6);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: var(--s3); justify-items: start;
}
.lasvy__talea-h { font-weight: 700; color: var(--ink-800); }
.lasvy__talea p { color: var(--ink-600); line-height: 1.6; }
.lasvy__info h2 { font-size: var(--t-xl); letter-spacing: -.015em; }
.lasvy__info p { color: var(--ink-600); line-height: 1.6; }
.lasvy .viewswap, .lasvy .rail__jobb { display: none; }
.lasvy .topbar__actions .seg { display: none; }
.lasvy .db-onepage { display: none; }   /* ingen komprimering i läsvyn */
/* Mall, färg, typsnitt och granskning hör till den som äger dokumentet. I
   läsvyn blir bara det kvar som rör själva visningen: sidräknare och zoom.
   (Att bara sätta disabled räckte inte — attributet gör ingenting på en div.) */
.lasvy .db-tpl,
.lasvy .db-group,
.lasvy .db-btn,
.lasvy .db-sep,
.lasvy [data-action="more"] { display: none; }
.lasvy .db-right { margin-left: 0; }

/* nyckelordsmatchningen i granskningen ------------------------------------ */
.kw { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line-soft); }
.kw__h { font-size: var(--t-lg); letter-spacing: -.01em; }
.kw__d { margin: 5px 0 var(--s4); font-size: var(--t-sm); color: var(--ink-500); max-width: 60ch; line-height: 1.55; }
.kw__ta {
  width: 100%; padding: 12px 14px; margin-bottom: var(--s3);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--ink-100); resize: vertical; line-height: 1.55;
}
.kw__ta:focus { outline: 0; background: var(--white); border-color: var(--plum-400); box-shadow: 0 0 0 3px var(--plum-100); }
.kw__resultat { display: flex; align-items: center; gap: var(--s5); margin: var(--s6) 0 var(--s5); }
.kw__lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s3); }
.kw__ord { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kw__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--sand-100); color: var(--sand-700);
  font-size: var(--t-sm); font-weight: 500;
}
.kw__chip b { font-size: var(--t-xs); opacity: .7; }
.kw__tom { font-size: var(--t-sm); color: var(--ink-500); margin-top: var(--s4); }
.kw__varning { margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-500); max-width: 58ch; line-height: 1.55; }

/* ==========================================================================
   Rail (instrumentpanelens vänsterkant)
   ========================================================================== */

#view-dashboard:not([hidden]) { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  gap: var(--s5);
  padding: var(--s6) var(--s4);
  /* ljus uppifrån: gradient + varm glöd bakom loggan + ljuskant mot innehållet */
  background:
    radial-gradient(80% 180px at 30% 0%, rgba(201,138,60,.09), transparent 70%),
    radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.055), transparent 55%),
    linear-gradient(180deg, var(--plum-850) 0%, var(--plum-900) 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
  color: var(--dark-text);
}

.rail__brand { display: flex; align-items: center; gap: 14px; padding: 0 var(--s3) var(--s2); }
/* Loggan är en transparent PNG i svart. Filtret gör den helvit så att den kan
   ligga direkt på den lila raden — ingen vit platta bakom. */
.rail__logo { filter: brightness(0) invert(1); }
.rail__brand .brandstack__work { color: rgba(255,255,255,.92); }
.rail__product {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand-300);
  padding-left: 14px;
  /* hårlinje som tonar ut i ändarna — det enda "klippta" i en rail av
     mjuka övergångar var den här avdelaren i full höjd */
  border-left: 1px solid;
  border-image: linear-gradient(180deg, transparent, var(--dark-line) 30% 70%, transparent) 1;
}

/* Köpvägen bor i footens metazon — se markupkommentaren i index.html. */
.rail__proffs {
  font-size: var(--t-sm); color: var(--dark-muted);
  transition: color var(--fast) var(--ease);
}
.rail__proffs:hover { color: var(--dark-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .rail__proffs { display: none; } }

/* Ikonerna i railen: stroke 2 ger ~1,5px renderad linje i 18px — optisk
   paritet med Montserrat 500 på mörk grund; globala 1.7 blir spinkig här. */
.rail .ico { stroke-width: 2; }

/* Sandljus fokusring: brand-ringen ger ~2:1 mot plum-900 och drunknar. */
.rail :focus-visible { outline-color: var(--sand-300); outline-offset: 3px; }

/* Primärknappens material översatt till mörkt rum: toppljus gradient +
   inset ljuskant + skugga — två steg ljusare än väggen, sand förblir
   enda accenten. margin-top binder ihop verktygszonen (knapp + nav)
   och låter branden stå ensam som avsändare. */
.btn--new {
  justify-content: center;
  width: 100%;
  margin-top: var(--s2);
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--plum-600), var(--plum-700));
  color: var(--dark-text);
  border-radius: var(--r-md);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(20,2,26,.35);
}
.btn--new:hover {
  background: linear-gradient(180deg, var(--plum-500), var(--plum-600));
  border-color: rgba(255,255,255,.20);
}

.rail__nav { display: flex; flex-direction: column; gap: 2px; margin-top: calc(-1 * var(--s2)); }
.rail__link {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s3);
  border-radius: var(--r-md);
  color: var(--dark-muted);
  font-weight: 500;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail__link .ico { transition: color var(--fast) var(--ease); }
.rail__link:hover { background: var(--dark-soft); color: var(--dark-text); }
/* Signaturen: det aktiva valet LYSER. En kort rundad pinne med sandglöd
   (loggans mjuka geometri, samma ljussystem som toppglöden) som växer
   fram från mitten vid vybyte — full höjd rak inset-kant var 2015. */
.rail__link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 18px; border-radius: var(--r-pill);
  translate: 0 -50%;
  background: linear-gradient(180deg, var(--sand-300), var(--sand-600));
  box-shadow: 0 0 10px rgba(232,201,155,.5);
  transform: scaleY(0);
  transition: transform var(--med) var(--ease-out);
}
.rail__link.is-active { background: var(--dark-soft); color: var(--white); }
.rail__link.is-active::before { transform: scaleY(1); }
.rail__link.is-active .ico { color: var(--sand-300); }

/* hidden ska vinna över display-reglerna nedan. Säljytorna döljs med
   hidden-attributet när visaCta är false (betalande och interna konton) —
   men ett display:flex/grid i klassen slog igenom och visade dem ändå. */
.rail__jobb[hidden], .start__pitch[hidden], .done__cta[hidden] { display: none; }

/* Vägen till Talea. Ska synas hela tiden utan att skrika.
   Ljuset faller uppifrån som i resten av rummet: radial i övre hörnet +
   sandad ljuskant. Tinten ligger i background-color under en KONSTANT
   gradient — gradient↔färg kan inte interpoleras, hovern snäppte förr. */
.rail__jobb {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: 13px var(--s3);
  margin-top: var(--s4);        /* paus: Taleas erbjudande, inte kandidatens verktyg */
  border: 1px solid rgba(232,201,155,.22); border-radius: var(--r-md);
  background-color: rgba(201,138,60,.04);
  background-image: radial-gradient(120% 100% at 25% 0%, rgba(201,138,60,.18), transparent 75%);
  box-shadow: inset 0 1px 0 rgba(232,201,155,.15);
  color: var(--dark-text);
  text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.rail__jobb:hover { border-color: var(--sand-600); background-color: rgba(201,138,60,.14); }
.rail__jobb .ico { color: var(--sand-300); margin-top: 1px; }
.rail__jobb-t { display: block; font-size: var(--t-sm); font-weight: 600; }
.rail__jobb-d { display: block; font-size: var(--t-xs); color: var(--dark-muted); line-height: 1.4; }

.start__pitch {
  margin-top: var(--s12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  width: 100%; padding: var(--s6);
  border-radius: var(--r-lg);
  /* sandton: detta är ett erbjudande från Talea, inte ett steg i CV-bygget */
  background: linear-gradient(140deg, var(--sand-100), var(--white) 70%);
  border: 1px solid var(--sand-300);
  text-align: left;
}
.start__pitch h2 { font-size: var(--t-lg); letter-spacing: -.01em; }
.start__pitch p { margin-top: 5px; font-size: var(--t-sm); color: var(--ink-600); line-height: 1.55; max-width: min(52ch, 100%); }
.start__pitch .btn { flex: none; }
@media (max-width: 680px) { .start__pitch { flex-direction: column; align-items: flex-start; } }

/* ansökningsformuläret */
.apply { display: grid; gap: var(--s5); max-width: 640px; }
.apply__lead { font-size: var(--t-base); color: var(--ink-600); line-height: 1.6; }
.apply__doc {
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-050);
  font-size: var(--t-sm);
}
.apply__doc .ico { color: var(--plum-700); }
.apply__consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-600); line-height: 1.55; }
.apply__consent input { margin-top: 3px; accent-color: var(--plum-800); width: 17px; height: 17px; flex: none; }
.apply__consent a { color: var(--plum-700); text-decoration: underline; }
.apply__status { font-size: var(--t-sm); }
.apply__status--fel { color: var(--danger); }
.apply__klar { display: grid; gap: var(--s3); text-align: center; padding: var(--s8) var(--s4); }
.apply__klar .ico { width: 46px; height: 46px; color: var(--ok); justify-self: center; }
.apply__klar h3 { font-size: var(--t-xl); }
.apply__klar p { color: var(--ink-600); max-width: 44ch; margin: 0 auto; line-height: 1.6; }

/* Metazonen: hårfin topplinje i railens eget kantljus avgränsar den från
   innehållet, ghost-raderna får träffyta (negativ inline-marginal växer
   målet utan att flytta en pixel visuellt). */
.rail__foot {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s5) var(--s3) 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rail__ghost {
  border: 0; background: none; text-align: left;
  padding: 7px var(--s3); margin-inline: calc(-1 * var(--s3));
  border-radius: var(--r-sm);
  color: var(--dark-muted); font-size: var(--t-sm); cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.rail__ghost:hover { color: var(--dark-text); text-decoration: underline; }
.rail__ver { font-size: var(--t-xs); color: var(--dark-muted); opacity: .7; margin-top: var(--s2); }

/* ==========================================================================
   Instrumentpanel
   ========================================================================== */

/* centrerad tomhet läses som luft; vänsterklistrad läses som bugg */
.board { padding: var(--s10) var(--s12) var(--s12); max-width: 1400px; margin-inline: auto; width: 100%; }

.board__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s6); margin-bottom: var(--s6); }
.board__title { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.03em; }
.board__sub { color: var(--ink-500); font-size: var(--t-base); margin-top: 2px; font-variant-numeric: tabular-nums; }

.board__section + .board__section { margin-top: var(--s12); }
.board__section-title {
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em;
  margin-bottom: var(--s4);
}

.grid {
  display: grid;
  /* spann i stället för 1fr: korten behåller närvaro även med få dokument */
  grid-template-columns: repeat(auto-fill, minmax(212px, 252px));
  justify-content: start;
  gap: var(--s6) var(--s5);
  align-items: start;
}

/* korten dukas fram med en kort kaskad — reduced motion nollar den globalt */
.grid > .card { animation: rise var(--med) var(--ease-out) backwards; }
.grid > .card:nth-child(2) { animation-delay: 40ms; }
.grid > .card:nth-child(3) { animation-delay: 80ms; }
.grid > .card:nth-child(4) { animation-delay: 120ms; }
.grid > .card:nth-child(5) { animation-delay: 160ms; }
.grid > .card:nth-child(n+6) { animation-delay: 200ms; }

/* dokumentkort ------------------------------------------------------------ */
.card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 0; padding: 0; background: none;
  text-align: left;
}
.card__thumb {
  position: relative;
  aspect-ratio: 210 / 297;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--med) var(--ease), transform var(--med) var(--ease-out), border-color var(--fast) var(--ease);
}
.card:hover .card__thumb { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: var(--brand-200); }

.card__frame {
  position: absolute; inset: 0;
  transform-origin: top left;
  pointer-events: none;
}
.card__name { margin-top: var(--s3); font-weight: 600; font-size: var(--t-base); color: var(--ink-900); }
.card__meta { font-size: var(--t-sm); color: var(--ink-500); display: flex; align-items: center; gap: var(--s2); }
.card__verktyg { margin-left: auto; display: inline-flex; gap: 2px; }

/* växeln kort/lista i arbetsytan */
.vyvaxel { margin-left: auto; display: inline-flex; gap: 2px; align-self: center; }
.vyvaxel .iconbtn.is-active { background: var(--brand-050); color: var(--brand-700); }

.card__menu {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.card:hover .card__menu, .card__menu:focus-visible { opacity: 1; }
.card__menu:hover { background: var(--white); }
/* på touch finns ingen hover — inget får kräva den för att synas */
@media (hover: none) {
  .card__menu { opacity: 1; }
}

/* tomt dokument: skiss i stället för en vit A4-yta — i Taleas egen ton */
.card__thumb--tom {
  display: grid; place-items: center; align-content: center; gap: var(--s3);
  background: var(--plum-050);
}
.card__tom { display: grid; gap: 8px; width: 55%; }
.card__tom i {
  display: block; height: 8px; border-radius: 4px;
  background: var(--plum-100);
}
.card__tom i:nth-child(1) { width: 70%; height: 12px; background: var(--plum-200); }
.card__tom i:nth-child(3) { width: 85%; }
.card__tom-text { font-size: var(--t-sm); color: var(--plum-500); }

/* nytt-kort: tonad yta med fylld plommoncirkel — "skapa", inte "dropzone" */
.card--new .card__thumb {
  display: grid; place-items: center;
  border: 1px solid var(--plum-200);
  background: linear-gradient(160deg, var(--plum-050), var(--white));
  box-shadow: none;
  color: var(--plum-700);
}
.card--new:hover .card__thumb { border-color: var(--brand-400); color: var(--brand-700); transform: none; box-shadow: var(--sh-1); }
.card--new .card__inner { display: grid; justify-items: center; gap: var(--s3); font-weight: 500; }
.card--new .ico {
  width: 42px; height: 42px; padding: 10px; border-radius: 50%;
  background: linear-gradient(180deg, var(--plum-700), var(--plum-800));
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(74,11,94,.22);
  transition: transform var(--fast) var(--ease-out);
}
.card--new:hover .ico { transform: scale(1.06); }

.empty {
  border: 1.5px dashed var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--s10);
  text-align: center;
  color: var(--ink-500);
}

/* ==========================================================================
   Topbar (redigeraren)
   ========================================================================== */

/* dvh: Safaris verktygsrad krymper vh:en, annars hamnar bottenkontrollerna
   bakom raden på iPhone. */
#view-editor:not([hidden]) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  flex: none;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s4);
  background: linear-gradient(180deg, #40094F 0%, var(--plum-850) 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
  color: var(--dark-text);
}
.btn--back {
  justify-self: start;
  color: var(--dark-text);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-md);
  padding: 8px 14px 8px 10px;
}
.btn--back:hover { background: var(--dark-soft); color: var(--white); }

/* Köpvägen för den som bygger åt andra — samma roll som .start__proffs, men i
   appens egna vyer, de enda en besökare faktiskt ser. Döljs för inloggade i
   tillämpaKonfig (hidden måste vinna över display) och i delade läsvyer —
   mottagaren av ett delat CV är arbetsgivare, inte köpare. */
.proffs-lank[hidden] { display: none; }
.topbar__left { justify-self: start; display: flex; align-items: center; gap: var(--s4); }
.topbar__proffs { font-size: var(--t-sm); color: var(--dark-muted); white-space: nowrap; }
.topbar__proffs:hover { color: var(--dark-text); text-decoration: underline; text-underline-offset: 3px; }
.lasvy .topbar__proffs { display: none; }
@media (max-width: 900px) { .topbar__proffs { display: none; } }

.topbar__title { display: flex; align-items: center; gap: var(--s2); justify-self: center; }
.title-input {
  border: 0; background: transparent;
  color: var(--dark-text);
  font-weight: 600; font-size: var(--t-md);
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  width: 34ch; max-width: 40vw;
  text-overflow: ellipsis;
}
.title-input:hover { background: var(--dark-soft); }
.title-input:focus { background: var(--dark-soft); outline: 1px solid var(--brand-400); }

.save-state { display: grid; place-items: center; color: var(--dark-muted); }
.save-state.is-saving { color: var(--sand-300); animation: pulse 1s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }
/* kvittot när sparningen lyckats — ögonblicket användaren bryr sig om */
.save-state.is-saved { color: var(--sand-300); }
.save-state.is-saved .ico { animation: savedTick 500ms var(--ease-out); }
@keyframes savedTick {
  0% { transform: scale(.6); opacity: 0; }
  40% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.topbar__actions { justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.topbar__actions .btn--ghost { color: var(--dark-muted); }
.topbar__actions .btn--ghost:hover { background: var(--dark-soft); color: var(--dark-text); }

.seg { display: flex; border: 1px solid var(--dark-line); border-radius: var(--r-md); overflow: hidden; }
.seg__btn {
  border: 0; background: transparent; color: var(--dark-muted);
  padding: 8px 12px; cursor: pointer; display: grid; place-items: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg__btn + .seg__btn { border-left: 1px solid var(--dark-line); }
.seg__btn:hover:not(:disabled) { background: var(--dark-soft); color: var(--dark-text); }
.seg__btn:disabled { opacity: .35; cursor: default; }

/* ==========================================================================
   Redigerarens tvådelade yta
   ========================================================================== */

.editor { flex: 1; display: grid; grid-template-columns: var(--form-w) 1fr; min-height: 0; }

.pane { min-height: 0; }
.pane--form {
  overflow-y: auto;
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: var(--s8) var(--s10) 25vh;
  scrollbar-width: thin;
}
.pane--form::-webkit-scrollbar { width: 10px; }
.pane--form::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 99px; border: 3px solid var(--white); }

/* intag ------------------------------------------------------------------- */
.intake { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s8); }
.intake--one { grid-template-columns: 1fr; }
.intake__btn {
  display: grid; justify-items: center; gap: var(--s2);
  padding: var(--s5) var(--s3);
  border: 0; background: var(--white);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-700);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.intake__btn + .intake__btn { border-left: 1px solid var(--line); }
.intake__btn:hover { background: var(--brand-050); color: var(--brand-700); }
.intake__btn .ico { width: 22px; height: 22px; }

/* sektioner --------------------------------------------------------------- */
.sec { border-top: 1px solid var(--line-soft); padding: var(--s6) 0; }
.sec:first-child { border-top: 0; padding-top: 0; }

.sec__head { display: flex; align-items: center; gap: var(--s3); }
.sec__grip {
  width: 22px; margin-left: -22px; color: var(--ink-300);
  cursor: grab; opacity: 0; transition: opacity var(--fast) var(--ease);
  display: grid; place-items: center; touch-action: none;
}
.sec:hover .sec__grip { opacity: 1; }

.sec__title {
  flex: 1;
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em;
  border: 0; background: none; padding: 2px 6px; margin-left: -6px;
  border-radius: var(--r-sm);
  color: var(--ink-900);
  min-width: 0;
  text-overflow: ellipsis;
}
.sec__title:hover { background: var(--ink-100); }
.sec__title.is-empty { color: var(--ink-500); }

.sec__tools { display: flex; gap: var(--s1); opacity: 0; transition: opacity var(--fast) var(--ease); }
.sec:hover .sec__tools, .sec__tools:focus-within { opacity: 1; }
/* på touch finns ingen hover — verktygen måste alltid synas */
@media (hover: none) {
  .sec__tools { opacity: 1; }
  .sec__grip { opacity: .6; }
}
/* Trång skärm: upp till sex 42-pixelsknappar på rubrikraden lämnade ~90 px åt
   rubriken — "Utbildningar och intyg" och "Utbildning" blev båda "Utbildn".
   Hopfälld sektion visar bara pilen; utfälld flyttar verktygen till egen rad.
   Personuppgifter ([data-sec]) har bara pilen och lämnas orörd. */
@media (max-width: 620px) {
  .sec__head { flex-wrap: wrap; row-gap: var(--s1); }
  .sec[data-section] .sec__tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; order: 10; }
  /* radera är radens enda destruktiva knapp — lite extra luft mot grannarna */
  .sec[data-section] .sec__tools .iconbtn--danger { margin-inline: var(--s1); }
  .sec[data-section].is-collapsed .sec__tools { flex: 0 0 auto; }
  .sec[data-section].is-collapsed .sec__tools .iconbtn:not([data-act="toggle-sec"]) { display: none; }
}

.iconbtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink-600);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.iconbtn:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-050); }
.iconbtn--plain { border-color: transparent; background: transparent; }
.iconbtn--danger:hover { border-color: #F0C9C6; color: var(--danger); background: var(--danger-100); }

.sec__body { margin-top: var(--s4); display: grid; gap: var(--s4); }
.sec.is-collapsed .sec__body { display: none; }
.sec.is-collapsed .sec__caret { transform: rotate(-90deg); }
.sec__caret { transition: transform var(--fast) var(--ease); }

/* fält -------------------------------------------------------------------- */
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.field { display: grid; gap: 5px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field--half { grid-column: span 2; }
.field--quarter { grid-column: span 1; }

/* länkliknande knapp inuti hjälptext */
.linklike {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-500); font-size: var(--t-xs); text-decoration: underline;
}
.linklike:hover { color: var(--danger); }

/* rader utan ram (färdigheter, taggar) */
.flat, .mini {
  border: 0; background: transparent; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.flat:hover, .mini:hover { border-bottom-color: var(--line); }
.flat:focus, .mini:focus { outline: 0; border-bottom-color: var(--brand-500); }
.mini { font-size: var(--t-sm); color: var(--ink-600); width: 100%; }

/* dold sektion */
.sec.is-hidden .sec__title,
.sec.is-hidden .sec__body { opacity: .45; }
.sec.is-hidden .sec__tools { opacity: 1; }
.sec.is-hidden .sec__head::after {
  content: "dold";
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); background: var(--ink-150);
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* pekarbaserat drag: det lyfta blocket följer pekaren som fixed element,
   platshållaren visar var det landar. HTML5-dragets .is-dragging/.is-over
   är borta — hela flytten sker i sidan, inte i operativsystemet. */
.sec.is-lifted, .entry.is-lifted {
  position: fixed; z-index: 60; margin: 0;
  pointer-events: none;
  box-shadow: 0 18px 44px rgba(44, 5, 56, .22), 0 4px 12px rgba(44, 5, 56, .12);
  transform: rotate(1deg) scale(1.01);
  opacity: .97;
}
.dragplats {
  border: 1.5px dashed var(--brand-300) !important;
  background: var(--brand-050) !important;
  box-shadow: none !important;
}

.field__label { font-size: var(--t-sm); color: var(--ink-700); font-weight: 500; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="month"], .field input[type="url"], .field textarea, .field select {
  width: 100%;
  min-width: 0;               /* month-fält har annars en egen minimibredd */
  padding: 11px 13px;
  border: 1px solid var(--ink-150);   /* hårfin definition mot den vita panelen */
  border-radius: var(--r-sm);
  background: var(--ink-100);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { background: var(--ink-100); border-color: var(--ink-300); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  background: var(--white);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field__hint { font-size: var(--t-xs); color: var(--ink-500); }

.check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-600); }
.check input { accent-color: var(--brand-700); width: 16px; height: 16px; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-600); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 38px; height: 22px; border-radius: 99px; background: var(--ink-300);
  position: relative; transition: background var(--fast) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--white);
  transition: transform var(--med) var(--ease-out);
  box-shadow: var(--sh-1);
}
.switch input:checked + .switch__track { background: var(--brand-700); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }

/* foto -------------------------------------------------------------------- */
.personal { display: grid; grid-template-columns: 118px 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 620px) { .personal { grid-template-columns: 1fr; } .photo { max-width: 140px; } }

.photo {
  width: 100%; aspect-ratio: 1;
  border: 1.5px dashed var(--ink-300); border-radius: var(--r-md);
  background: var(--ink-100) center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--ink-400);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.photo:hover { border-color: var(--brand-400); color: var(--brand-600); }
.photocol { display: grid; gap: var(--s2); }
.bgbtn {
  border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand-700);
  font: 600 11.5px/1.2 var(--font-ui);
  transition: background var(--fast) var(--ease);
}
.bgbtn:hover { background: var(--brand-100); }
.bgbtn:disabled { cursor: default; background: var(--ink-100); color: var(--ink-500); }
/* Dämpad variant för åtgärder som inte ska konkurrera med huvudknappen. */
.bgbtn--lugn { background: var(--ink-100); color: var(--ink-600); }
.bgbtn--lugn:hover { background: var(--ink-200); }
.photo.has-image { border-style: solid; border-color: var(--line); }
.photo .ico { width: 26px; height: 26px; }

/* arbetsytan (inloggade medarbetare) -------------------------------------- */
.yta-sok {
  width: 100%; max-width: 520px;
  margin: 0 0 var(--s4);
  padding: 11px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  font: 400 var(--t-base)/1.4 var(--font-ui); color: var(--ink-800);
}
.yta-sok:focus { outline: 2px solid var(--plum-300); outline-offset: 1px; }
.yta-lista { display: grid; gap: 6px; }
.yta-rad {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.yta-rad:hover { border-color: var(--plum-300); box-shadow: var(--sh-1); }
.yta-rad__typ {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--plum-100); color: var(--plum-800);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
}
.yta-rad__typ--brev { background: var(--sand-100); color: var(--sand-700); }
.yta-rad__namn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yta-rad__meta { flex: none; color: var(--ink-500); font-size: var(--t-sm); }
.yta-rad__verktyg { flex: none; display: flex; gap: 2px; }

/* flerval för massradering ------------------------------------------------ */
.yta-check {
  flex: none; width: 22px; height: 22px; margin: 0;
  cursor: pointer; accent-color: var(--plum-800);
}
/* kortvyn: kryssrutan bor i metaraden under kortet — aldrig ovanpå
   dokumentet (Mahmoud 18/8: "en stor fyrkant precis på bilden").
   Markeringen syns i stället som ringen runt miniatyren. */
.yta-check--kort { width: 19px; height: 19px; }
.yta-rad:has(.yta-check:checked) { border-color: var(--plum-500); background: var(--plum-050); }
.card:has(.yta-check:checked) .card__thumb {
  border-color: var(--plum-500);
  box-shadow: var(--sh-1), 0 0 0 2px var(--plum-300);
}
.yta-bulk[hidden] { display: none; }   /* display:flex vinner annars över hidden */
.yta-bulk {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--plum-300); border-radius: var(--r-sm);
  background: var(--plum-050);
}
.yta-bulk__antal { font-weight: 600; margin-right: auto; }
@media (max-width: 620px) { .yta-rad__meta { display: none; } }

/* poster (entries) -------------------------------------------------------- */
.entry {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.entry:hover { border-color: var(--ink-300); }
.entry.is-open { border-color: var(--brand-300); box-shadow: var(--sh-2); }

.entry__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px var(--s4);
  cursor: pointer;
  user-select: none;
}
.entry__grip { color: var(--ink-300); cursor: grab; display: grid; place-items: center; touch-action: none; }
.entry__grip:active { cursor: grabbing; }
.entry__labels { flex: 1; min-width: 0; display: grid; }
.entry__title { font-weight: 600; font-size: var(--t-base); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry__title:empty::before { content: "(utan titel)"; color: var(--ink-400); font-weight: 500; }
.entry__sub { font-size: var(--t-sm); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry__body { padding: 0 var(--s4) var(--s5); display: none; }
.entry.is-open .entry__body { display: block; }
.entry.is-open .entry__caret { transform: rotate(180deg); }
.entry__caret { transition: transform var(--fast) var(--ease); color: var(--ink-400); }

.addbtn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; padding: 12px;
  border: 1.5px dashed var(--ink-300); border-radius: var(--r-md);
  background: transparent; color: var(--ink-600);
  font-weight: 500; cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.addbtn:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }

/* nivåväljare (färdigheter/språk) ----------------------------------------- */
.level { display: flex; align-items: center; gap: var(--s3); }
.level__dots { display: flex; gap: 5px; }
.level__dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--ink-300); background: transparent;
  padding: 0; cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.level__dot:hover { border-color: var(--brand-400); }
.level__dot.is-on { background: var(--brand-700); border-color: var(--brand-700); }
.level__name { font-size: var(--t-sm); color: var(--ink-500); min-width: 9ch; }

/* chips: lägg till fält / sektion ----------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* snabbvalen i yrkessektionerna ligger mellan posterna och lägg-till-knappen */
.chips--forslag { margin: var(--s3) 0 var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink-700);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }
.chip .ico { width: 15px; height: 15px; }
/* valt yrkespaket: ifylld chip med bock — klick igen tar bort paketet */
.chip.is-on { background: var(--plum-800); border-color: var(--plum-800); color: var(--white); }
.chip.is-on:hover { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }

/* hjälpmedel i formuläret: profiltext och färdiga formuleringar ---------- */
.assist { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); position: relative; }
.assist__note { font-size: var(--t-xs); color: var(--ink-500); max-width: 46ch; }
.chip--assist { border-color: var(--plum-300); color: var(--plum-800); background: var(--plum-050); font-weight: 600; }
.chip--assist:hover { background: var(--plum-100); border-color: var(--plum-500); }

.phrases {
  flex-basis: 100%;
  margin-top: var(--s2);
  max-height: 300px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--sh-2);
  padding: var(--s3);
}
.phrases__group + .phrases__group { margin-top: var(--s4); }
.phrases__h {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500); margin: 0 0 6px 8px;
}
.phrases__row {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: none; font-size: var(--t-sm); line-height: 1.45; cursor: pointer;
}
.phrases__row:hover { background: var(--plum-050); color: var(--plum-800); }
.phrases__row.is-used { color: var(--ink-400); text-decoration: line-through; }

.addsec { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line-soft); }
/* yrkespaketraden överst i formuläret: avgränsas nedåt, inte uppåt */
.addsec--topp { margin: 0 0 var(--s6); padding-top: 0; border-top: 0;
                padding-bottom: var(--s6); border-bottom: 1px solid var(--line-soft); }
.addsec__label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-500); margin-bottom: var(--s3); text-transform: uppercase; letter-spacing: .06em; }

/* ==========================================================================
   Förhandsvisning
   ========================================================================== */

.pane--preview {
  position: relative;
  /* ljusare mot toppen där sidan börjar — dokumentet ligger på ett bord,
     inte i ett vakuum */
  background: radial-gradient(120% 90% at 50% 0%, var(--ink-100) 0%, var(--ink-150) 65%);
  display: flex; flex-direction: column; min-width: 0;
  /* designraden kollapsar efter PANELENS bredd, inte skärmens */
  container-type: inline-size; container-name: preview;
}

.preview__scroll { flex: 1; overflow: auto; padding: var(--s8) var(--s6) 124px; }
/* safe center: när dokumentet är bredare än panelen ska det inte klippas
   på vänsterkanten utan gå att scrolla fram. */
.preview__stage { display: flex; justify-content: safe center; }

.cv {
  --page-w: var(--a4-w);
  --page-h: var(--a4-h);
  flex: none;                 /* sidan får aldrig krympa i flexlayouten */
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--white);
  box-shadow: var(--sh-4);
  position: relative;
}
.cv[data-paper="Letter"] { --page-w: 816px; --page-h: 1056px; }

/* sidbrytningsguider på skärm */
.cv::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(var(--page-h) - 1px),
    rgba(86, 13, 112, .22) calc(var(--page-h) - 1px), rgba(86, 13, 112, .22) var(--page-h)
  );
}

/* ==========================================================================
   Designraden
   En rad, aldrig mer. Mallval, granskning och finjustering öppnas i egna
   ytor i stället för att lägga sig över dokumentet.
   ========================================================================== */

.designbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s4);
  /* Alla kontroller centreras mot samma mittlinje. Etiketter OVANFÖR en
     kontroll knuffar ner den ur linjen — därför bär bara mallknappen sin
     etikett, och den ligger inuti en egen ram. */
  height: 76px; padding: 0 var(--s6);
  /* riktigt frostat glas: dokumentet skymtar igenom när man scrollar under */
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(44,5,56,.08);
  overflow-x: auto; scrollbar-width: none;
}
.designbar::-webkit-scrollbar { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .designbar { background: rgba(255,255,255,.97); }
}

/* Raden kollapsar stegvis efter panelens bredd så att Finjustera och Granska
   ALDRIG hamnar utanför kanten (vid 1280 px fönster är panelen ~690 px).
   .designbar-prefixet behövs: basreglerna längre ned vinner annars på ordning. */
@container preview (max-width: 1120px) {
  .designbar { gap: var(--s3); }
  .designbar .db-tpl__shot { display: none; }
  .designbar .db-btn span { display: none; }
  .designbar .db-btn { padding: 11px; }
}
@container preview (max-width: 740px) {
  .designbar .db-colors { gap: 5px; }
  .designbar .db-dot { width: 20px; height: 20px; }
  .designbar .db-lbl { display: none; }
  .designbar .db-select { padding: 8px 28px 8px 10px; font-size: var(--t-sm); }
}

.db-lbl {
  display: block;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500); line-height: 1.4;
}
.db-val { display: block; font-size: var(--t-base); font-weight: 600; color: var(--ink-900); line-height: 1.25; }
.db-sep { width: 1px; height: 34px; background: var(--line-soft); flex: none; }
.db-group { display: flex; align-items: center; flex: none; }

.db-tpl {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.db-tpl:hover { border-color: var(--plum-400); background: var(--plum-050); }
.db-tpl__text { text-align: left; }
.db-tpl__shot {
  display: block; width: 38px; height: 54px; flex: none;
  border-radius: 5px; overflow: hidden; position: relative;
  outline: 1px solid var(--line-soft); background: var(--white);
}
.db-caret { color: var(--ink-400); width: 16px; height: 16px; }

.db-colors { display: flex; align-items: center; gap: 7px; }
.db-dot {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; outline: 1px solid rgba(44,5,56,.14);
  transition: transform var(--fast) var(--ease-out);
}
.db-dot:hover { transform: scale(1.15); }
.db-dot.is-active { border-color: var(--white); outline: 2px solid var(--plum-800); }
.db-dot--fri {
  background: conic-gradient(#e5484d, #e5a13b, #66c261, #3aa3c9, #7b61d6, #d465b8, #e5484d);
}
/* Osynlig men klickbar — display:none hade stoppat färgväljaren i vissa
   webbläsare. */
.db-fricolor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.db-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 32px 9px 14px; font-size: var(--t-base); cursor: pointer;
  line-height: 1.2;
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F94A7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") right 11px center/15px no-repeat;
}
.db-select:hover { border-color: var(--plum-400); }

.db-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 11px 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.db-btn:hover { border-color: var(--plum-400); color: var(--plum-800); background: var(--plum-050); }
.db-btn .ico { width: 17px; height: 17px; }

/* Sidräknare + zoom: flytande glaschip över dokumentytan (som Figma/Docs),
   inte i designraden — zoomen hör till visningen, inte designvalen. */
.db-right {
  position: absolute; right: var(--s4); bottom: calc(76px + var(--s3)); z-index: 6;
  display: flex; align-items: center; gap: var(--s3);
  padding: 4px 6px 4px 12px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
}
.db-pages { font-size: var(--t-sm); color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-onepage {
  border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--plum-100); color: var(--plum-800);
  font: 600 12px/1.2 var(--font-ui);
  white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.db-onepage:hover { background: var(--plum-200); }

/* ==========================================================================
   Modal: mallgalleri, finjustering, granskning
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--s6); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(27,20,32,.5); backdrop-filter: blur(3px); animation: fadeIn var(--med) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }

.modal__panel {
  position: relative;
  width: min(1080px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
  animation: panelIn var(--med) var(--ease-out);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* symmetrisk stängning via allow-discrete — äldre webbläsare degraderar
   tyst till dagens direkta klipp. pointer-events:none gör den dolda ytan död. */
.modal[hidden] { display: grid; pointer-events: none; visibility: hidden; }
.modal[hidden] .modal__backdrop { opacity: 0; animation: none; }
.modal[hidden] .modal__panel { opacity: 0; transform: translateY(10px) scale(.985); animation: none; }
.modal__backdrop, .modal__panel {
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease),
              visibility var(--med) allow-discrete;
}
.modal { transition: visibility var(--med) allow-discrete; }

.modal__head {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--line-soft);
}
.modal__title { font-size: var(--t-xl); letter-spacing: -.015em; }
.modal__tools { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.modal__body { padding: var(--s6); overflow: auto; }

/* betalväggen — gratistakets uppgraderingsvy. Ögonblicket firas, inte
   beklagas: en mörk plommonzon överst med /foretag-hjältens mallsolfjäder
   (igenkänningssignaturen), därunder den ljusa säljdelen — lista, pris,
   EN stor köpknapp. Sand bara som accent: priset och bockarna. */

/* smalare panel för just den här modalen; äldre webbläsare utan :has
   degraderar tyst till standardbredden */
.modal__panel:has(.uppgr) { width: min(560px, 100%); }

.uppgr { text-align: center; }

/* hjältezonen bleder ut över modalkroppens padding till panelens kanter.
   Ljus uppifrån (plommon), en varm sandglöd bakom korten nertill. */
.uppgr__hero {
  margin: calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s6);
  padding: var(--s8) var(--s6) 0;
  background:
    radial-gradient(120% 100% at 50% -30%, var(--plum-700) 0%, transparent 60%),
    radial-gradient(70% 55% at 50% 100%, rgba(201, 138, 60, .18), transparent 70%),
    linear-gradient(180deg, var(--plum-850), var(--plum-900));
  color: var(--white);
  overflow: hidden;
}
.uppgr__hurra {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
  text-wrap: balance;
}

/* solfjädern: riktiga mallar ur appen, samma gest som på /foretag. Korten
   står i zonens nederkant och klipps av den — säljdelen ser ut att hålla
   dem. Rotationen ligger i --rot så att intron kan animera translateY
   utan att tappa den. */
.uppgr__fan { position: relative; height: 128px; max-width: 330px; margin: var(--s5) auto 0; }
.uppgr__dok {
  position: absolute; width: 104px; aspect-ratio: 210 / 297;
  border-radius: 8px;
  object-fit: cover; object-position: top;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(20, 4, 26, .5);
  animation: uppgr-dok-in .55s var(--ease-out) both;
}
@keyframes uppgr-dok-in {
  from { opacity: 0; transform: translateY(24px) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}
.uppgr__dok--1 { left: 3%;  bottom: -34px; --rot: -7deg; transform: rotate(var(--rot)); z-index: 1; animation-delay: .1s; }
.uppgr__dok--2 { left: 34%; bottom: -18px; --rot: -1deg; transform: rotate(var(--rot)); z-index: 2; animation-delay: .2s; }
.uppgr__dok--3 { left: 65%; bottom: -30px; --rot: 6deg;  transform: rotate(var(--rot)); z-index: 3; animation-delay: .3s; }
/* tokens.css nollar durationen men inte delayen — fill both hade annars
   gömt korten under fördröjningen */
@media (prefers-reduced-motion: reduce) { .uppgr__dok { animation: none; } }

/* den ljusa säljdelen */
.uppgr__ingress { max-width: 420px; margin: 0 auto var(--s5); color: var(--ink-700); text-wrap: balance; }
.uppgr__lista {
  list-style: none; text-align: left; display: grid; gap: var(--s2);
  margin: 0 auto var(--s6); width: fit-content; padding: 0;
}
.uppgr__lista li { padding-left: 26px; position: relative; color: var(--ink-800); }
.uppgr__lista li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--sand-600); font-weight: 700;
}
.uppgr__pris { display: grid; gap: 2px; margin-bottom: var(--s5); }
.uppgr__summa { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--sand-700); line-height: 1.1; }
.uppgr__enhet { font-size: 1rem; font-weight: 500; color: var(--ink-500); letter-spacing: 0; }
.uppgr__villkor { font-size: var(--t-sm); color: var(--ink-500); }
.uppgr__kop { display: block; width: 100%; font-size: 1.05rem; padding: 14px 24px; text-decoration: none; }
.uppgr__not { font-size: var(--t-sm); color: var(--ink-500); margin-top: var(--s3); }
.uppgr__alt { font-size: var(--t-sm); color: var(--ink-600); margin-top: var(--s5); }
.uppgr__alt a { color: var(--plum-700); }
.uppgr__annars {
  font-size: var(--t-xs); color: var(--ink-400);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft);
}
@media (max-width: 520px) {
  .uppgr__hero { padding-top: var(--s6); }
  .uppgr__fan { height: 106px; max-width: 276px; }
  .uppgr__dok { width: 88px; }
}

/* proffsmodalens sekundära kontaktväg — hopfälld så att priset och
   /foretag-knappen bär försäljningen */
.proffs-kontakt { margin-top: var(--s6); border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.proffs-kontakt summary {
  cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--plum-700);
  list-style: none;
}
.proffs-kontakt summary::-webkit-details-marker { display: none; }
.proffs-kontakt summary::after { content: " ▾"; font-size: .8em; }
.proffs-kontakt[open] summary::after { content: " ▴"; }
.proffs-kontakt[open] { padding-bottom: var(--s2); }
.proffs-kontakt .done__note { margin-top: var(--s3); }

/* mallgalleri */
.gal-fam { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); }
.gal-fam__h { font-size: var(--t-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.gal-fam__note { font-size: var(--t-sm); color: var(--ink-400); }
.gal-section + .gal-section { margin-top: var(--s10); }

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s5); }
/* align-self: start — annars sträcks knappen till radens höjd och centrerar
   sitt innehåll, så kort med kortare text (t.ex. utan ATS-märke) hamnar
   lägre än grannarna. Alla miniatyrer ska ligga på samma topplinje. */
.gal-item { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; align-self: start; }
.gal-item__shot {
  display: block; width: 100%; aspect-ratio: 210/297;
  border-radius: var(--r-md); overflow: hidden; position: relative;
  outline: 1px solid var(--line); border: 2px solid transparent;
  background: var(--white);
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease), border-color var(--fast) var(--ease);
}
.gal-item:hover .gal-item__shot { transform: translateY(-4px); box-shadow: var(--sh-3); }
.gal-item.is-active .gal-item__shot { border-color: var(--plum-800); outline-color: var(--plum-800); }
.gal-item__name { display: block; margin-top: 9px; font-weight: 600; font-size: var(--t-base); }
.gal-item.is-active .gal-item__name { color: var(--plum-800); }
.gal-item__note { display: block; font-size: var(--t-sm); color: var(--ink-500); line-height: 1.4; }
.gal-item__ats {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.5;
  color: var(--ok); background: var(--ok-100); border-radius: 999px;
}

/* ATS-filtret: kryssat döljer allt som inte bär gal-item--ats, och
   familjer som blir tomma försvinner med sina rubriker. */
.gal-filter { margin-bottom: 14px; }
.gal-filter__val {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.gal-filter__val:hover { background: var(--ok-100); }
.gal-filter__val:has(input:checked) {
  background: var(--ok-100); border-color: var(--ok); color: var(--ok);
}
.gal-filter__val input { accent-color: var(--ok); margin: 0; }
.gal--ats .gal-item:not(.gal-item--ats) { display: none; }
.gal--ats .gal-section:not(:has(.gal-item--ats)) { display: none; }

/* Radera-zonen sist i formuläret. */
.form-radera { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-radera__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: none; font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--danger); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.form-radera__btn:hover { background: var(--danger-100); border-color: currentColor; }
.form-radera__btn .ico { width: 16px; height: 16px; }
.gal-frame { position: absolute; inset: 0; transform-origin: top left; pointer-events: none; }

/* finjustering */
.tune { display: grid; gap: var(--s6); max-width: 620px; }
.tune__row { display: grid; gap: var(--s2); }
.tune__lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink-700); }
.tune__hint { font-size: var(--t-sm); color: var(--ink-500); }

/* pillerval: Finjustera och fotopanelen ---------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  padding: 6px 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink-700);
  font: 500 var(--t-sm)/1.2 var(--font-ui); cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.pill:hover { border-color: var(--brand-400); color: var(--brand-700); }
.pill.is-active { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.pill--mini { padding: 4px 10px; font-size: 12px; }

/* tryckrespons: varje liten kontroll kvitterar klicket — avgörande på mobil
   där hover inte finns */
.pill:active, .db-btn:active, .db-onepage:active, .bgbtn:active,
.chip:active, .iconbtn:active, .viewswap__btn:active,
.seg__btn:active:not(:disabled) { transform: scale(.96); }
.db-onepage, .bgbtn, .seg__btn, .viewswap__btn { transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }

/* fotopanelen under fotorutan ------------------------------------------- */
.fotopanel { display: grid; gap: 6px; }
.fotopanel__lbl { display: grid; gap: 2px; font: 600 12px/1.2 var(--font-ui); color: var(--ink-600); }
.fotopanel__lbl input[type="range"] { width: 100%; }
.fotopanel__rad { display: flex; flex-wrap: wrap; gap: 4px; }

/* granskning */
.rev-score { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s6); }
.rev-ring { --p: 0; width: 92px; height: 92px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--plum-800) calc(var(--p) * 1%), var(--ink-150) 0);
  display: grid; place-items: center; }
.rev-ring span { width: 72px; height: 72px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; font-size: var(--t-xl); font-weight: 700; }
.rev-lead { font-size: var(--t-md); font-weight: 600; }
.rev-sub { color: var(--ink-500); font-size: var(--t-sm); max-width: 52ch; }

.rev-list { display: grid; gap: var(--s2); }
.rev-item { display: flex; gap: var(--s3); padding: 12px 14px; border-radius: var(--r-md); background: var(--ink-050); }
.rev-item--ok { background: var(--ok-100); }
.rev-item--warn { background: var(--warn-100); }
.rev-item--bad { background: var(--danger-100); }
.rev-item__ico { flex: none; margin-top: 1px; }
.rev-item--ok .rev-item__ico { color: var(--ok); }
.rev-item--warn .rev-item__ico { color: var(--warn); }
.rev-item--bad .rev-item__ico { color: var(--danger); }
.rev-item__t { font-weight: 600; font-size: var(--t-base); }
.rev-item__d { font-size: var(--t-sm); color: var(--ink-600); }

/* zoom -------------------------------------------------------------------- */
.zoom {
  display: flex; align-items: center; gap: var(--s2);
  padding: 4px 5px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink-600);
}
.zoom__btn {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--ink-700);
  display: grid; place-items: center; font-size: var(--t-md); line-height: 1;
}
.zoom__btn:hover { background: var(--ink-100); }

/* ==========================================================================
   Meny + toast
   ========================================================================== */

.menu {
  position: fixed; z-index: 90;
  min-width: 210px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  animation: menuIn var(--fast) var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu[hidden] { display: none; }
.menu__item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 9px 11px;
  border: 0; background: none; border-radius: var(--r-sm);
  font-size: var(--t-base); text-align: left; cursor: pointer;
}
.menu__item:hover { background: var(--ink-100); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-100); }
.menu__sep { border: 0; border-top: 1px solid var(--line-soft); margin: 5px 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 200;
  padding: 11px 20px;
  background: var(--ink-900); color: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm); font-weight: 500;
  animation: toastIn var(--med) var(--ease-out);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease),
              visibility var(--med) allow-discrete;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }
/* glider ut i stället för att klippas bort */
.toast[hidden] {
  display: block; visibility: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px);
  animation: none;
}

/* ==========================================================================
   Responsivt
   ========================================================================== */

/* Växlaren visas bara när de två panelerna inte får plats bredvid varandra. */
.viewswap { display: none; }

@media (max-width: 1180px) {
  .viewswap {
    display: flex; gap: 4px;
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    z-index: 40;
    padding: 5px;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    box-shadow: var(--sh-3);
  }
  /* Pillret kliver undan medan TANGENTBORDET är uppe — inte medan ett fält
     råkar ha fokus. iOS blurrar aldrig fält när tangentbordet stängs, så
     :has(:focus)-varianten gömde pillret för alltid efter första
     knapptryckningen (Mahmouds fynd 13/8). Klassen sätts av
     visualViewport-lyssnaren i app.js — den vet när tangentbordet syns. */
  body.tangentbord-uppe .viewswap {
    opacity: 0; pointer-events: none;
    transition: opacity var(--fast) var(--ease);
  }
  .viewswap__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--ink-600);
    font-size: var(--t-sm); font-weight: 600; cursor: pointer;
    white-space: nowrap;   /* "Se CV:t" ska aldrig brytas mitt i pillret */
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .viewswap__btn.is-active { background: var(--plum-800); color: var(--white); }
  .viewswap__btn .ico { width: 16px; height: 16px; }

  .editor { grid-template-columns: 1fr; }
  .pane--preview { display: none; }
  .pane--form { border-right: 0; padding-bottom: max(20vh, 160px); scroll-padding-bottom: 120px; }
  /* Ensamt i vyn blir formuläret annars lika brett som skärmen, och ett
     förnamnsfält på sextio tecken ser mest ut som ett fel. */
  .pane--form > * { max-width: 780px; margin-inline: auto; }
  .editor.show-preview .pane--form { display: none; }
  .editor.show-preview .pane--preview { display: flex; }

  /* designraden får inte skymma växlaren */
  .designbar { bottom: 74px; }
  .db-right { bottom: calc(74px + 76px + var(--s3)); }
  .preview__scroll { padding-bottom: 194px; }
}

@media (max-width: 620px) {
  /* iOS Safari zoomar in vid fokus om graden är under 16 px och lämnar sidan
     inzoomad. 16 px i fälten är enda sättet att stoppa det. */
  .field input, .field textarea, .field select, .title-input { font-size: 16px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: var(--s2); padding: 0 var(--s3); }
  .title-input { width: 100%; max-width: none; font-size: var(--t-sm); }
  .btn--back span { display: none; }
  /* Ikonen bär på liten skärm — med texten kvar blev raden 30 px bredare än
     telefonen och hela sidan gick att dra i sidled. */
  .topbar__actions .btn__t { display: none; }
  .designbar { gap: var(--s3); padding: 0 var(--s3); }
  .db-group, .db-sep { display: none; }
  .db-pages { display: none; }
  .db-onepage { display: none; }   /* på mobil nås Gör till en sida via Finjustera */
  .modal { padding: 0; }
  .modal__panel { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; width: 100%; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s4); }
}

/* touch: träffytor som går att träffa ------------------------------------ */
@media (pointer: coarse) {
  .iconbtn { width: 42px; height: 42px; }
  .zoom__btn { width: 34px; height: 34px; }
  .card__menu { width: 38px; height: 38px; }
  .level__dots { gap: 10px; }
  .level__dot { width: 22px; height: 22px; }
  .db-dot { width: 30px; height: 30px; }
}

@media (max-width: 860px) {
  #view-dashboard:not([hidden]) { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--s4); overflow-x: auto; }
  .rail > * { flex: none; }              /* inget kläms i overflow-raden */
  .rail__nav { flex-direction: row; margin-top: 0; }
  /* Foten följer med i den liggande raden — display:none gömde Logga in/ut
     och säkerhetskopian på mobil, och att kunna lämna arbetsytan på en delad
     telefon är lika lite valfritt som på en delad dator. Versionsraden är
     det enda som får ryka. */
  .rail__foot {
    display: flex; flex-direction: row; align-items: center; gap: var(--s3);
    margin-top: 0; padding: 0; border-top: 0;
  }
  .rail__ver { display: none; }
  .btn--new { width: auto; margin-top: 0; }
  .rail__jobb { width: auto; margin-top: 0; }
  /* markören byter ledd i liggande nav: streck under, inte pinne i vänsterkant */
  .rail__link::before {
    left: 10px; right: 10px; top: auto; bottom: 0;
    width: auto; height: 3px;
    translate: none;
    transform: scaleX(0);
  }
  .rail__link.is-active::before { transform: scaleX(1); }
  .board { padding: var(--s6) var(--s5) var(--s10); }
  .pane--form { padding: var(--s6) var(--s5) 30vh; }
  .fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Utskrift → PDF
   ========================================================================== */

/* Sidstorleken sätts av #page-size som app.js skriver om när mallen byter
   pappersformat. Den här regeln är utgångsläget. */
@page { size: A4; margin: 0; }

/* Utskriftens osynliga datarad: aldrig synlig på skärm, med i PDF:ens
   textlager som mikroskopisk vit text så att importen kan återskapa
   dokumentet exakt. */
.cv-data { display: none; }

@media print {
  html, body { background: var(--white); height: auto; }
  .cv-data {
    display: block;
    position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 1px; line-height: 1; color: #fff;
    word-break: break-all;
    z-index: 0;
  }
  /* .db-right: sidräknarchipet följde annars med ut i PDF:en ("2 sidor"
     tryckt på sista sidan). */
  .rail, .topbar, .pane--form, .designbar, .viewswap, .zoom, .db-right,
  .toast, .menu, #view-dashboard { display: none !important; }
  #view-editor:not([hidden]) { display: block; height: auto; }
  .editor { display: block; }
  .pane--preview { background: none; display: block; overflow: visible; }
  .preview__scroll { overflow: visible; padding: 0; }
  .preview__stage { display: block; }
  .cv {
    width: 210mm;
    /* Full sidhöjd även när texten tar slut tidigare — annars slutar färgade
       sidospalter och ramar mitt på sidan i den utskrivna PDF:en. */
    min-height: 297mm;
    box-shadow: none;
    transform: none !important;
    zoom: 1 !important;
  }
  .cv[data-paper="Letter"] { width: 8.5in; min-height: 11in; }
  .cv::after { display: none; }
}

/* LinkedIn-hjälpen: numrerad väg till profil-PDF:en */
.lihelp { margin: 14px 0 18px; padding-left: 20px; color: var(--ink-700); line-height: 1.7; }
.lihelp li { margin-bottom: 4px; }

/* Fil dras över fönstret: en tydlig men lugn markering av att vi tar emot den */
body.drar-fil::after {
  content: 'Släpp PDF-filen här';
  position: fixed; inset: 12px; z-index: 9000;
  display: grid; place-items: center;
  font-size: var(--t-lg); font-weight: 600; color: var(--plum-800);
  background: rgba(255,255,255,.86);
  border: 2px dashed var(--plum-400, #8a5a9e); border-radius: var(--r-lg);
  pointer-events: none;
}

/* --- Erbjudande till den som skapar CV åt andra -------------------------
   Visas bara i instrumentpanelen, och bara för det beteendet. Ska läsas som
   ett erbjudande bland dokumenten, inte som en annons ovanpå dem. */
.proffs {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin: var(--s6) 0 var(--s10);
  padding: var(--s5) var(--s6);
  background: var(--plum-050, #f7f2f9);
  border: 1px solid var(--plum-200, #e3d4ea);
  border-radius: var(--r-lg);
}
.proffs__text { display: grid; gap: 3px; max-width: 62ch; }
.proffs__text strong { font-size: var(--t-md); color: var(--plum-800); }
.proffs__text span { font-size: var(--t-sm); color: var(--ink-600); line-height: 1.55; }
.proffs__val { display: flex; align-items: center; gap: var(--s2); }
.proffs__lista { margin: 14px 0 18px; padding-left: 20px; color: var(--ink-700); line-height: 1.7; }
.proffs__lista li { margin-bottom: 4px; }
@media (max-width: 620px) {
  .proffs { flex-direction: column; align-items: flex-start; }
}

/* Intresseanmälan: samma tvåkolumnsrytm som formuläret i redigeraren */
#proffs-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4); align-items: start;
}
#proffs-form .field--full,
#proffs-form .apply__status,
#proffs-form button[type=submit] { grid-column: 1 / -1; }
#proffs-form button[type=submit] { justify-self: start; }
@media (max-width: 620px) { #proffs-form { grid-template-columns: 1fr; } }

/* Kronologitipset: syns bara när posterna ligger äldst först */
.kronotips {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin: 0 0 var(--s4);
  padding: 10px 14px;
  background: var(--sand-050, #fbf7ef);
  border: 1px solid var(--sand-200, #ecdfc8);
  border-radius: var(--r-md);
}
.kronotips__txt { font-size: var(--t-sm); color: var(--ink-700); line-height: 1.5; }
.btn--liten { padding: 6px 13px; font-size: var(--t-sm); }