/* ==========================================================================
   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; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

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

.view { display: none; }
.view:not([hidden]) { display: block; }

/* 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);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--plum-800);
  color: var(--white);
  box-shadow: var(--sh-1);
}
.btn--primary:hover { background: var(--plum-700); }

.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: #FCEDEC; }

/* ==========================================================================
   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;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% -30%, var(--plum-100) 0%, transparent 60%),
    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: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  color: var(--plum-800);
}
.start__lede {
  margin-top: var(--s4); max-width: min(46ch, 100%);
  font-size: var(--t-md); line-height: 1.6; color: var(--ink-600);
}
/* 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: var(--plum-800); border-color: var(--plum-800); color: var(--white); }
.choice--primary:hover { border-color: var(--plum-700); }
.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(--s6);
  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(--s6);
  border: 0; background: none; cursor: pointer;
  font-size: var(--t-sm); color: var(--ink-500);
}
.start__proffs span { color: var(--plum-700); font-weight: 500; }
.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; }

@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); }
}

/* --- 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);
  background: var(--dark);
  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; border-left: 1px solid var(--dark-line);
}

.btn--new {
  justify-content: center;
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--dark-line);
  background: var(--dark-soft);
  color: var(--dark-text);
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn--new:hover { background: var(--plum-700); border-color: var(--plum-600); }

.rail__nav { display: flex; flex-direction: column; gap: 2px; }
.rail__link {
  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:hover { background: var(--dark-soft); color: var(--dark-text); }
.rail__link.is-active { background: var(--dark-soft); color: var(--white); }
.rail__link.is-active .ico { color: var(--sand-300); }

/* Vägen till Talea. Ska synas hela tiden utan att skrika. */
.rail__jobb {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: 13px var(--s3);
  margin-top: var(--s2);
  border: 1px solid var(--dark-line); border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(201,138,60,.16), rgba(201,138,60,.05));
  color: var(--dark-text);
  text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.rail__jobb:hover { border-color: var(--sand-600); background: rgba(201,138,60,.22); }
.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);
  background: var(--white); border: 1px solid var(--line);
  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; }

.rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s3); }
.rail__ghost {
  border: 0; background: none; padding: 0; text-align: left;
  color: var(--dark-muted); font-size: var(--t-sm); cursor: pointer;
}
.rail__ghost:hover { color: var(--dark-text); text-decoration: underline; }
.rail__ver { font-size: var(--t-xs); color: #6C5C79; }

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

.board { padding: var(--s10) var(--s12) var(--s12); max-width: 1400px; }

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

.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;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s6);
  align-items: start;
}

/* 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,.92);
  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); }

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

/* nytt-kort */
.card--new .card__thumb {
  display: grid; place-items: center;
  border: 1.5px dashed var(--ink-300);
  background: transparent;
  box-shadow: none;
  color: var(--ink-500);
}
.card--new:hover .card__thumb { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); transform: none; box-shadow: none; }
.card--new .card__inner { display: grid; justify-items: center; gap: var(--s2); font-weight: 500; }
.card--new .ico { width: 26px; height: 26px; }

.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: var(--dark);
  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); }

.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; } }

.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;
}
.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;
}
.sec__title:hover { background: var(--ink-100); }
.sec__title.is-empty { color: var(--ink-400); }

.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; }

.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: #FCEDEC; }

.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);
}

.sec.is-dragging { opacity: .4; }
.sec.is-over { box-shadow: 0 -2px 0 0 var(--brand-500) inset; }

.field__label { font-size: var(--t-sm); color: var(--ink-600); 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 transparent;
  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-150); }
.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-400); }

.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); }
.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; }
@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.is-dragging { opacity: .4; }
.entry.is-over { border-color: var(--brand-500); box-shadow: 0 -2px 0 0 var(--brand-500) inset; }

.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; }
.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); }
.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; }

/* 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-400); 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-400); 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); }
.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; background: var(--ink-150); display: flex; flex-direction: column; min-width: 0; }

.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);
  background: rgba(255,255,255,.97);
  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; }

.db-lbl {
  display: block;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); 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(0,0,0,.12);
  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(--ink-900); }
.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 {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: var(--t-base); background: var(--white); cursor: pointer;
  line-height: 1.2;
}
.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; }

.db-right { margin-left: auto; display: flex; align-items: center; gap: var(--s4); flex: none; }
.db-pages { font-size: var(--t-sm); color: var(--ink-500); white-space: nowrap; }
.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[hidden] { display: none; }
.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); } }

.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; }

/* 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); }
.gal-item { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.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: 11px; font-weight: 600; line-height: 1.5;
  color: #1f5133; background: #e6f2ea; border-radius: 999px;
}
.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: 3px 9px; font-size: 11px; }

/* fotopanelen under fotorutan ------------------------------------------- */
.fotopanel { display: grid; gap: 6px; }
.fotopanel__lbl { display: grid; gap: 2px; font: 600 11px/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: #EDF6F1; }
.rev-item--warn { background: #FBF3E6; }
.rev-item--bad { background: #FBEDEC; }
.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: #FCEDEC; }
.menu__sep { border: 0; border-top: 1px solid var(--line-soft); margin: 5px 8px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; 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);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }
.toast[hidden] { display: 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: 18px; transform: translateX(-50%);
    z-index: 40;
    padding: 5px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    box-shadow: var(--sh-3);
  }
  .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;
    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: 96px; }
  /* 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; }
  .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; }
  .designbar { gap: var(--s3); padding: 0 var(--s3); }
  .db-group, .db-sep { display: none; }
  .db-right { margin-left: 0; }
  .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; height: 100%; border-radius: 0; width: 100%; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s4); }
}

@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__nav { flex-direction: row; }
  .rail__foot { display: none; }
  .btn--new { width: auto; }
  .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;
  }
  .rail, .topbar, .pane--form, .designbar, .viewswap, .zoom, .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); }