/* Jobbsmed – ljust och luftigt, med glöd från ässjan som signatur
   Typsnitt: Bricolage Grotesque (rubriker) + Figtree (text), självhostade, OFL. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }

@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-normal.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-italic.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; }

:root {
  --bg: #F1F6F3;               /* mjuk salvia */
  --surface: #FFFFFF;
  --sunk: #ECF3EF;
  --field: #F5F9F7;
  --ink: #12201A;
  --ink-2: #384840;
  --muted: #687A71;
  --line: #E0EAE4;
  --line-2: #CFDDD5;
  --accent: #0E8A5F;          /* smaragd */
  --accent-2: #2FBF87;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2F4EB;
  --accent-text: #B4490D;     /* accent för text på ljus botten (AA-kontrast) */
  --glow: #A7F0CF;            /* mint */
  --lime: #C9F27A;
  --ok: #15803D; --ok-soft: #E3F3E7;
  --warn: #B4540A; --warn-soft: #FDF0E1;
  --danger: #B42318;
  --info: #2C6A8A; --info-soft: #E8F2F6;
  --focus: #0E8A5F;
  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11, 27, 51, .04), 0 4px 18px -10px rgba(11, 27, 51, .10);
  --sh-2: 0 1px 2px rgba(11, 27, 51, .04), 0 14px 40px -18px rgba(11, 27, 51, .22);
  --sh-glow: 0 14px 40px -14px rgba(226, 88, 12, .38);
  --page-bg:
    radial-gradient(1100px 620px at 92% -8%, rgba(249, 115, 22, .16), transparent 62%),
    radial-gradient(900px 560px at -12% 28%, rgba(120, 160, 230, .30), transparent 64%),
    radial-gradient(900px 700px at 55% 112%, rgba(255, 196, 138, .16), transparent 62%),
    linear-gradient(180deg, #F5F7FB 0%, #EEF2F8 100%);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --rail: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1310; --surface: #111C17; --sunk: #16231D; --field: #14201A; --ink: #E6F0EA; --ink-2: #C0D0C7; --muted: #8B9E94;
    --line: #1F2E27; --line-2: #2A3D34; --accent: #34D399; --accent-2: #6EE7B7; --accent-ink: #032B1C; --accent-soft: #0E2A1F; --accent-text: #6EE7B7; --glow: #1F6F50; --lime: #4D6B1F;
    --ok: #4ADE80; --ok-soft: #12271B; --warn: #F5A55C; --warn-soft: #2A1E12; --danger: #FF7B72; --info: #7FB6D9; --info-soft: #13212A; --focus: #34D399;
    --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(255, 138, 61, .12), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(30, 64, 120, .16), transparent 62%), linear-gradient(180deg, #0A1426, #08101E);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .7); --sh-glow: 0 12px 40px -14px rgba(255, 138, 61, .30);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1310; --surface: #111C17; --sunk: #16231D; --field: #14201A; --ink: #E6F0EA; --ink-2: #C0D0C7; --muted: #8B9E94;
  --line: #1F2E27; --line-2: #2A3D34; --accent: #34D399; --accent-2: #6EE7B7; --accent-ink: #032B1C; --accent-soft: #0E2A1F; --accent-text: #6EE7B7; --glow: #1F6F50; --lime: #4D6B1F;
  --ok: #4ADE80; --ok-soft: #12271B; --warn: #F5A55C; --warn-soft: #2A1E12; --danger: #FF7B72; --info: #7FB6D9; --info-soft: #13212A; --focus: #34D399;
  --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(255, 138, 61, .12), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(30, 64, 120, .16), transparent 62%), linear-gradient(180deg, #0A1426, #08101E);
  color-scheme: dark;
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg, var(--bg)); background-color: var(--bg); background-attachment: fixed; color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0 0 .5em; letter-spacing: -.012em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); font-weight: 750; line-height: 1.05; font-variation-settings: 'opsz' 96; }
h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; font-variation-settings: 'opsz' 24; }
h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; font-variation-settings: 'opsz' 14; }
p { margin: 0 0 .85em; }
a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; border-radius: 8px; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .84rem; }
.boot { display: grid; place-items: center; min-height: 100vh; font-family: var(--display); font-weight: 750; font-size: 1.6rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: 600 .95rem/1 var(--font); color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: .72em 1.1em; min-height: 42px; cursor: pointer; box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px -8px rgba(226, 88, 12, .55); }
.btn.primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -8px rgba(226, 88, 12, .65); color: var(--accent-ink); }
.btn.small { min-height: 34px; padding: .5em .8em; font-size: .85rem; border-radius: 9px; }
.btn.big { min-height: 52px; padding: .85em 1.6em; font-size: 1.05rem; border-radius: 12px; }
.btn.wide { width: 100%; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.btn.busy { cursor: progress; }
.btn.busy::after { content: ''; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--info); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--accent-text); }
.link.danger { color: var(--danger); }
.link[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.btnrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .7rem 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.2rem; }

/* ---------- Formulär ---------- */
label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink-2); margin-bottom: 1rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .4rem; font: 400 1rem/1.5 var(--font); color: var(--ink);
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: .7em .85em;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
label.check { display: flex; gap: .55rem; align-items: center; font-weight: 500; color: var(--ink); }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
input[type="checkbox"] { accent-color: var(--accent); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; align-items: end; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.narrowform { max-width: 560px; }
fieldset.item { border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem 1.1rem .5rem; margin: 0 0 1rem; background: var(--surface); box-shadow: var(--sh-1); }
.sticky-save { position: sticky; bottom: 0; padding: .9rem 0; background: linear-gradient(transparent, var(--bg) 35%); }
details > summary { cursor: pointer; font-weight: 600; }
details > summary::marker { color: var(--accent); }

/* ---------- Skal: sidomeny ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 1.3rem .9rem; z-index: 10;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 750; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; padding: .2rem .6rem 1.6rem; }
.brand:hover { color: var(--ink); }
.logo { color: var(--ink); flex: none; }
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail li a { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .96rem; transition: background .15s, color .15s; }
.rail li a svg { color: var(--muted); transition: color .15s; }
.rail li a:hover { background: var(--sunk); color: var(--ink); }
.rail li a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.rail li a[aria-current="page"] svg { color: var(--accent); }
.rail-foot { margin-top: auto; padding: .8rem; border-radius: 12px; background: var(--sunk); }
.credits { font-size: .82rem; color: var(--muted); font-weight: 600; }
main { margin-left: var(--rail); min-height: 100vh; outline: none; }
.page { padding: 2.6rem clamp(1rem, 3.5vw, 3.5rem) 4.5rem; max-width: 1200px; }
.page.narrow { max-width: 780px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
@media (max-width: 860px) {
  .rail { inset: auto 10px 10px 10px; width: auto; height: auto; flex-direction: row; padding: .35rem; border: 1px solid var(--line); border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sh-2); }
  .rail .brand, .rail-foot { display: none; }
  .rail ul { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 2px; }
  .rail li a { flex-direction: column; gap: 3px; font-size: .68rem; padding: .5rem .2rem; text-align: center; border-radius: 13px; }
  main { margin-left: 0; padding-bottom: 92px; }
  .page { padding: 1.6rem 1rem 3rem; }
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: .8rem 1.15rem; border-radius: 14px; max-width: min(92vw, 520px);
  font-weight: 600; box-shadow: var(--sh-2); transition: opacity .2s, transform .2s; z-index: 100;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast[data-kind="error"] { background: var(--danger); color: #fff; }
#toast[data-kind="ok"]::before { content: '✓ '; color: #4CC38A; }
#toast[data-kind="warn"] { box-shadow: var(--sh-2), inset 4px 0 0 var(--glow); }
@media (max-width: 860px) { #toast { bottom: 100px; } }

/* ---------- Inloggning ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--bg); position: relative; overflow: hidden; }
.auth-side { position: relative; padding: clamp(2rem, 6vw, 5.5rem); display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.auth-side::before { /* ässjans glöd */
  content: ''; position: absolute; z-index: -1; inset: -20% -10% -20% -30%;
  background: radial-gradient(40% 45% at 22% 62%, rgba(249, 115, 22, .20), transparent 70%), radial-gradient(30% 35% at 55% 30%, rgba(255, 196, 138, .22), transparent 70%);
}
.auth-side .brand { padding-left: 0; }
.auth-side h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -.025em; max-width: 11ch; margin: 1.4rem 0 1.1rem; font-weight: 800; }
.auth-sub { color: var(--ink-2); font-size: 1.15rem; max-width: 42ch; margin-bottom: 2rem; }
.auth-steps { list-style: none; padding: 0; margin: 0; max-width: 46ch; display: grid; gap: .7rem; counter-reset: s; }
.auth-steps li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; align-items: center; color: var(--ink-2); counter-increment: s; }
.auth-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; color: var(--accent-text); }
.auth-card { align-self: center; justify-self: center; width: min(430px, 92vw); padding: 2rem; margin: 2rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--sunk); border-radius: 12px; padding: 4px; margin-bottom: 1.5rem; }
.seg button { border: 0; background: none; padding: .6rem; font: 600 .95rem var(--font); color: var(--muted); border-radius: 9px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin: 1.1rem 0; font-size: .93rem; }
.fine { font-size: .82rem; color: var(--muted); text-align: center; }
.lang-pick { display: flex; justify-content: center; gap: .3rem; }
.lang-pick button { border: 1px solid var(--line); background: none; border-radius: var(--r-pill); padding: .2rem .65rem; font: 600 .75rem var(--font); color: var(--muted); cursor: pointer; text-transform: uppercase; }
.lang-pick button[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.mailicon { font-size: 2.4rem; margin: 0 0 .4rem; color: var(--accent); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 1.8rem 1.25rem .5rem; }
  .auth-side h1 { margin: 1rem 0 .6rem; }
  .auth-sub { margin-bottom: 0; font-size: 1.02rem; }
  .auth-steps { display: none; }
  .auth-card { margin: 1.2rem auto 2rem; }
}

/* ---------- Översikt ---------- */
.dash-head { margin-bottom: 1.8rem; }
.dash-head h1 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 1040px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-side { display: grid; gap: 1.2rem; }
.dash-side > section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; box-shadow: var(--sh-1); margin: 0; }
.setup { margin-bottom: 1.4rem; padding: 1.3rem 1.4rem; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--r-l); }
.setup h2 { font-size: 1.08rem; }
.meter { height: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: var(--r-pill); overflow: hidden; margin: .5rem 0 .9rem; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--glow)); }
.setup-cta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .2rem 0 1rem; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.checks li a { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.checks li a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line-2); }
.checks li a:hover { border-color: var(--accent); color: var(--ink); }
.checks li.done a { color: var(--muted); }
.checks li.done a::before { background: var(--ok); border-color: var(--ok); }
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.agenda li:first-child { border-top: 0; padding-top: .2rem; }
.agenda time { color: var(--muted); font-size: .85rem; font-weight: 500; }
.agenda a { color: var(--ink); text-decoration: none; font-weight: 600; }
.agenda a:hover { color: var(--accent-text); }
.agenda .ev-intervju time, .agenda .ev-test time { color: var(--accent-text); font-weight: 700; }
.agenda .ev-deadline time { color: var(--warn); }
.tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.tally div { margin: 0; padding: .7rem .8rem; border-radius: 12px; background: var(--sunk); }
.tally dt { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tally dd { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 750; line-height: 1.2; }

/* ---------- Annonsfältet: appens hjärta ---------- */
.adform { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.6rem 1.6rem 1.3rem; box-shadow: var(--sh-2), var(--sh-glow); }
.adform::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-l) var(--r-l) 0 0; background: linear-gradient(90deg, var(--accent), var(--glow)); }
.adlabel { font-family: var(--display); font-size: 1.45rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); margin-bottom: .35rem; }
.adhint { margin: 0 0 .9rem; }
.adform textarea#adText { font-size: 1rem; min-height: 8rem; border-radius: 14px; }
.qbox { margin: .7rem 0 1.1rem; }
.qbox summary { font-size: .93rem; color: var(--ink-2); }
.adsubmit { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
@media (max-width: 640px) { .adform { padding: 1.2rem 1.1rem 1.1rem; } }

/* ---------- Notiser ---------- */
.notice { background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); padding: .9rem 1.1rem; border-radius: var(--r-m); margin: 0 0 1.1rem; }
.notice.warn { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.notice.small { padding: .55rem .85rem; font-size: .9rem; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice .btn { margin-top: .4rem; }

/* ---------- Ansökan ---------- */
.app-head { margin-bottom: 1.4rem; }
.crumb { font-size: .9rem; margin-bottom: .4rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a::before { content: '← '; }
.app-meta { color: var(--muted); }
.track { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.1rem; }
.track ol { display: flex; list-style: none; padding: 4px; margin: 0; flex-wrap: wrap; gap: 2px; background: var(--sunk); border-radius: var(--r-pill); }
.track button { border: 0; background: none; padding: .45rem .95rem; font: 600 .85rem var(--font); color: var(--muted); cursor: pointer; border-radius: var(--r-pill); }
.track button:hover { color: var(--ink); }
.track li.past button { color: var(--ink-2); }
.track li.past button::before { content: '✓ '; color: var(--ok); }
.track li.now button { background: var(--surface); color: var(--accent-text); box-shadow: var(--sh-1); }
.track.closed ol { opacity: .55; }
.track-end { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.pill { display: inline-block; padding: .2rem .65rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--sunk); color: var(--ink-2); }
.pill.st-klar { background: var(--accent-soft); color: var(--accent-text); }
.pill.st-sokt { background: var(--info-soft); color: var(--info); }
.pill.st-intervju, .pill.st-test, .pill.st-erbjudande { background: var(--ok-soft); color: var(--ok); }
.pill.st-avslag, .pill.st-avbojd { color: var(--muted); }

.gen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin-bottom: 1.6rem; box-shadow: var(--sh-1); }
.steps { list-style: none; padding: 0; margin: .3rem 0 1.1rem; display: grid; gap: .5rem; }
.steps li { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-weight: 500; }
.steps li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--sunk); border: 2px solid var(--line-2); flex: none; transition: all .3s; }
.steps li.ok { color: var(--ink); }
.steps li.ok::before { background: var(--ok); border-color: var(--ok); }
.steps li.run { color: var(--ink); font-weight: 700; }
.steps li.run::before { background: radial-gradient(circle, #FFF6EE 0 20%, var(--glow) 45%, var(--accent) 80%); border-color: transparent; animation: glow 1.1s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 2px rgba(249, 115, 22, .15), 0 0 6px 1px rgba(249, 115, 22, .3); } to { box-shadow: 0 0 0 4px rgba(249, 115, 22, .12), 0 0 18px 5px rgba(255, 170, 100, .55); } }

.tabs { display: flex; gap: .25rem; margin-bottom: 1.6rem; overflow-x: auto; scrollbar-width: none; padding: 4px; background: var(--sunk); border-radius: 14px; width: fit-content; max-width: 100%; }
.tabs [role="tab"] { flex: none; display: flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .55rem .85rem; font: 600 .93rem var(--font); color: var(--muted); cursor: pointer; text-decoration: none; border-radius: 10px; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--sh-1); }
.tabn { font-size: .72rem; font-weight: 700; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); }
[aria-selected="true"] .tabn { background: var(--accent); color: var(--accent-ink); }

.fit { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.8rem; flex-wrap: wrap; padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.fit > div:not(.fit-score) { flex: 1 1 320px; }
.fit-score { --score: 0; width: 116px; height: 116px; border-radius: 50%; flex: none; display: grid; place-items: center; align-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 80%, transparent 81%), conic-gradient(var(--accent) calc(var(--score) * 1%), var(--sunk) 0); }
.fit-score span { font-family: var(--display); font-size: 2.3rem; font-weight: 750; line-height: 1; display: block; }
.fit-score small { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; margin-top: .15rem; }
.verdict { font-size: 1.12rem; max-width: 62ch; color: var(--ink); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.6rem; margin-bottom: 1.2rem; }
.cols.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cols, .cols.wide-left { grid-template-columns: 1fr; } }
section + section { margin-top: 1.4rem; }
.cols > section + section { margin-top: 0; }
table.reqs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.reqs th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 700; background: var(--sunk); padding: .6rem .9rem; }
.reqs td { border-top: 1px solid var(--line); padding: .7rem .9rem; vertical-align: top; }
@media (max-width: 640px) { table.reqs { display: block; overflow-x: auto; } }
.met { font-weight: 700; }
.met-ja { color: var(--ok); } .met-delvis { color: var(--info); } .met-nej { color: var(--warn); }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: var(--sunk); color: var(--ink-2); vertical-align: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .85rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.adtext { margin-top: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem 1.1rem; }
.adtext > div { max-height: 420px; overflow: auto; margin-top: .8rem; color: var(--ink-2); }

/* CV-papper */
.paper { background: #fff; color: #161B22; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); padding: clamp(1.3rem, 4vw, 3.2rem); max-width: 830px; }
.paper[contenteditable="true"] { outline: 2px dashed var(--accent); outline-offset: 4px; }
.cv { font-family: var(--font); }
.cv h1 { font-size: 2.1rem; margin-bottom: .15rem; color: #161B22; letter-spacing: -.025em; }
.cv-headline { font-family: var(--display); font-size: 1.12rem; font-weight: 600; margin-bottom: .35rem; color: #B4490D; }
.cv-contact { font-size: .88rem; color: #6B7480; }
.cv-contact .sep { color: #C7CCD3; }
.cv-summary { margin: 1.2rem 0; font-size: 1rem; color: #3B4450; }
.cv section { margin-top: 1.4rem; }
.cv h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6B7480; font-family: var(--font); padding-bottom: .35rem; border-bottom: 1px solid #E4E7EC; margin-bottom: .8rem; }
.cv-item { margin-bottom: 1rem; break-inside: avoid; }
.cv-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cv-row h3 { margin: 0; font-size: 1.02rem; color: #161B22; }
.cv-period { font-size: .86rem; color: #6B7480; white-space: nowrap; }
.cv-loc { font-size: .85rem; color: #6B7480; margin: 0; }
.cv ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.cv li { margin-bottom: .18rem; }

.lettertext { font-size: 1.03rem; line-height: 1.7; background: var(--surface); padding: 1.3rem 1.4rem; max-width: 830px; border-radius: var(--r-m); box-shadow: var(--sh-1); }
mark.ph { background: var(--accent-soft); color: inherit; padding: 0 .2em; border-radius: 4px; box-shadow: inset 0 -2px 0 var(--accent); }
.rewrite { display: flex; gap: .5rem; max-width: 830px; margin: .8rem 0 1.6rem; }
.rewrite input { margin: 0; }
.review { max-width: 830px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
.review h2 { display: flex; justify-content: space-between; align-items: baseline; }
.review .score { font-size: .9rem; color: var(--ok); background: var(--ok-soft); padding: .2rem .6rem; border-radius: var(--r-pill); font-family: var(--font); }
.issues { padding-left: 1.1rem; }
.issues li { margin-bottom: .5rem; }
.issues q { font-style: italic; color: var(--muted); text-decoration: line-through; }
.pitches { max-width: 830px; }
.pitch { background: var(--surface); border-radius: var(--r-m); padding: 1rem 1.1rem; margin-bottom: .8rem; border: 1px solid var(--line); }
.pitch-head { display: flex; justify-content: space-between; align-items: baseline; }
.count { font-size: .8rem; color: var(--muted); font-weight: 700; }
.count.over { color: var(--warn); }

.fields { max-width: 880px; }
.fields h2 { display: flex; gap: 1rem; align-items: baseline; }
.field { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.fl { font-size: .82rem; color: var(--muted); font-weight: 600; padding-top: .2rem; }
.fv { white-space: pre-wrap; overflow-wrap: anywhere; }
.fgroup { background: var(--surface); border-radius: var(--r-m); padding: .2rem 1.1rem; margin-bottom: .8rem; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fgroup .field:last-child { border-bottom: 0; }
@media (max-width: 640px) { .field { grid-template-columns: 1fr auto; } .field .fl { grid-column: 1 / -1; padding: 0; } }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem 1.1rem; margin-bottom: .8rem; }
.qa .q { font-weight: 700; }
.qform { margin-top: 1.1rem; }
.sent { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 35%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--r-l); padding: 1.2rem 1.3rem; max-width: 880px; margin-top: 2rem; }
.sent .btn { margin-bottom: 1rem; }

.iq { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.iq summary { font-size: 1.02rem; }
.iq .ans { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--r-s) var(--r-s) 0; padding: .8rem 1rem; margin: .7rem 0; }
.testcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem 1.1rem; margin-bottom: .8rem; }
.script { background: var(--surface); padding: 1.1rem 1.3rem; border-radius: var(--r-m); border: 1px solid var(--line); font-size: 1.08rem; line-height: 1.75; max-width: 70ch; }
.checklist { list-style: none; padding: 0; }
.checklist label { font-weight: 400; display: flex; gap: .55rem; align-items: baseline; margin-bottom: .45rem; color: var(--ink); }
.checklist input { width: auto; margin: 0; }
.mailcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; max-width: 830px; box-shadow: var(--sh-1); }
.mailcard + .mailcard { margin-top: 1rem; }
.subj { display: flex; gap: .6rem; align-items: baseline; }
.mailbody { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .4rem; }

/* Tidslinje */
.timeline { list-style: none; padding: 0; margin: 0; }
.tl { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.tl-when { font-size: .85rem; color: var(--muted); font-weight: 500; }
.tl.ev-intervju .tl-when, .tl.ev-test .tl-when { color: var(--accent-text); font-weight: 700; }
.tl.done { opacity: .55; }
.tl-title { margin: 0 0 .2rem; font-weight: 500; }
.tl-app, .tl-loc { font-size: .88rem; margin: 0 0 .2rem; color: var(--muted); }
.tl-actions { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; margin-top: .35rem; }
.tl details summary { font-size: .85rem; font-weight: 500; color: var(--info); }
.tl-text { font-size: .9rem; color: var(--ink-2); max-height: 300px; overflow: auto; background: var(--sunk); padding: .7rem .9rem; border-radius: var(--r-s); margin-top: .4rem; }
@media (max-width: 640px) { .tl { grid-template-columns: 1fr; gap: .2rem; } }
.addev, .mailbox { margin-bottom: 1.3rem; }
.addev summary { margin-bottom: .9rem; }
.interp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem; margin-top: 1rem; box-shadow: var(--sh-2); }
.interp details { margin-top: 1rem; }

/* Rapport, kalender och svarsadress */
.report { margin-bottom: 2.2rem; }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.report-head label { margin: 0; }
.report-head select { margin: 0; min-width: 190px; }
.calsub, .inbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; margin-bottom: 1.4rem; box-shadow: var(--sh-1); }
.inbox { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.calsub .field, .inbox .field { grid-template-columns: minmax(0, 1fr) auto; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem .6rem .5rem .8rem; align-items: center; }
.inbox ol { padding-left: 1.2rem; }

/* Ansökningslista */
.search { max-width: 480px; }
.group h2 { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .7rem; }
.group h2 .count { background: var(--sunk); padding: .1rem .5rem; border-radius: var(--r-pill); }
.applist { list-style: none; padding: 0; margin: 0 0 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
.applist li + li { border-top: 1px solid var(--line); }
.applist a { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .3rem 1rem; padding: 1rem 1.2rem; color: var(--ink); text-decoration: none; align-items: center; transition: background .15s; }
.applist a:hover { background: var(--sunk); color: var(--ink); }
.al-title { font-weight: 700; }
.al-co { color: var(--muted); }
.al-meta { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; }
.al-date { font-size: .82rem; color: var(--muted); min-width: 7rem; text-align: right; }
.fitmini { font-family: var(--display); font-weight: 700; font-size: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(var(--accent) calc(var(--s, 0) * 1%), var(--sunk) 0); }
@media (max-width: 760px) { .applist a { grid-template-columns: 1fr; } .al-meta { justify-content: flex-start; } .al-date { text-align: left; } }
.empty { padding: 3rem 0; }

/* Profil */
.import { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin-bottom: 2rem; max-width: 880px; box-shadow: var(--sh-1); }
.filebtn { cursor: pointer; margin: 0; }
.profile-form { max-width: 880px; }
.profile-form > section { margin-bottom: 1.8rem; }
.chat { display: flex; flex-direction: column; }
.chatlog { display: flex; flex-direction: column; gap: .7rem; max-height: 55vh; overflow-y: auto; padding: .3rem 0; margin-bottom: .9rem; }
.msg { max-width: 88%; padding: .75rem 1rem; border-radius: 18px; }
.msg p:last-child { margin: 0; }
.msg.assistant { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: var(--sh-1); }
.msg.user { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 6px; }
.story { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .8rem 1rem; margin-bottom: .55rem; }
.story form { margin-top: .9rem; }
.danger-zone { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* Snabbstart */
.import.big { max-width: 880px; }
.drop { display: grid; place-items: center; gap: .35rem; text-align: center; padding: 2.4rem 1rem; margin: 1.1rem 0; border: 2px dashed var(--line-2); border-radius: var(--r-l); background: var(--field); cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s; }
.drop strong { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.pastebox { margin-bottom: 1rem; }
.pastebox textarea { margin-bottom: .5rem; }
.filelist { list-style: none; padding: 0; margin: 0 0 .5rem; }
.filelist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .4rem 1rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.fname { font-weight: 600; overflow-wrap: anywhere; }
.fstat { font-size: .85rem; color: var(--muted); }
.fs-läser .fstat { color: var(--ink); }
.fs-läser .fstat::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: .4rem; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; vertical-align: -1px; }
.fs-klar .fstat { color: var(--ok); }
.fs-fel .fstat { color: var(--warn); }
.check.own { margin: 0; font-size: .85rem; }
@media (max-width: 640px) { .filelist li { grid-template-columns: 1fr auto; } .filelist .fstat { grid-column: 1 / -1; } }
.import-result { max-width: 880px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.4rem 1.5rem; margin-top: 1.6rem; box-shadow: var(--sh-2), var(--sh-glow); }
.found > label.check { align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.found > label.check input { margin-top: .25rem; }
.found h3 { margin-top: 1.3rem; }
.picklist, .mini { list-style: none; padding: 0; margin: 0; }
.picklist li { border-bottom: 1px solid var(--line); }
.picklist label.check { align-items: flex-start; margin: 0; padding: .55rem 0; }
.picklist label.check input { margin-top: .25rem; }
.mini li { padding: .2rem 0; font-size: .92rem; }

/* Länk, delning, spara-knapp */
.bookmarklet { margin-top: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1rem 1.2rem; box-shadow: var(--sh-1); }
.bookmarklet .cols { margin-top: 1rem; }
.btn.bm { background: var(--ink); color: var(--bg); border-color: var(--ink); cursor: grab; }
.bookmarklet ul { padding-left: 1.1rem; }

/* ---------- Utskrift (CV och brev som PDF) ---------- */
body.print-doc { background: #fff; color: #161B22; margin: 0; }
body.print-doc .cv, body.print-doc .letter { max-width: 760px; margin: 0 auto; padding: 18mm 16mm; font-size: 11pt; }
.letter { line-height: 1.65; font-family: var(--font); }
.letter-from { font-size: .95rem; color: #6B7480; }
.letter-date { margin: 1.4rem 0 2rem; color: #6B7480; }
@page { size: A4; margin: 0; }
@media print { body.print-doc .cv, body.print-doc .letter { padding: 16mm; } a { color: inherit; text-decoration: none; } }

/* =====================================================================
   Gemensamt för nya vyer
   ===================================================================== */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 750; color: var(--accent-text); margin: 0 0 .35rem; }
.notice.ok-n { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.copybtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 .75rem var(--font); padding: .25rem .6rem; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.copybtn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
button.chip { cursor: pointer; font: 500 .85rem var(--font); color: var(--ink-2); text-align: left; }
button.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.rail li a .ns { display: none; }
.rail-how { display: flex; align-items: center; gap: .75rem; margin: auto 0 .6rem; padding: .6rem .8rem; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
.rail-how:hover, .rail-how[aria-current="page"] { background: var(--sunk); color: var(--ink); }
.rail-how + .rail-foot { margin-top: 0; }
@media (max-width: 860px) {
  .rail li a .nl { display: none; }
  .rail li a .ns { display: inline; }
  .rail-how { display: none; }
}
.how-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.how-link::after { content: '→'; transition: transform .15s; }
.how-link:hover::after { transform: translateX(3px); }
@media (max-width: 860px) { .auth-side .how-link { margin-top: .8rem; } }

/* Filterflikar (dagbok, intervjufrågor) */
.filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.filters a { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: .88rem; text-decoration: none; transition: border-color .15s, background .15s; }
.filters a span { font-size: .75rem; color: var(--muted); background: var(--sunk); padding: 0 .4rem; border-radius: var(--r-pill); }
.filters a:hover { border-color: var(--line-2); color: var(--ink); }
.filters a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.filters a[aria-current] span { background: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); }

/* Påminnelse om rapporten */
.due-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; margin: 0 0 1.4rem; border-radius: var(--r-l); text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: var(--sh-1); }
.due-banner:hover { color: var(--ink); box-shadow: var(--sh-glow); }
.due-n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font: 800 1.35rem var(--display); }
.due-banner strong { display: block; }
.due-banner span span { color: var(--muted); font-size: .9rem; }
.due-go { font-weight: 700; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 560px) { .due-banner { grid-template-columns: auto 1fr; } .due-go { grid-column: 1 / -1; } }

.coach-teaser { display: grid; gap: .25rem; padding: 1.2rem 1.3rem; border-radius: var(--r-l); text-decoration: none; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, var(--glow), transparent 55%), linear-gradient(150deg, var(--accent-2), var(--accent) 60%, #B4490D); box-shadow: var(--sh-glow); }
.coach-teaser strong { font: 750 1.05rem/1.3 var(--display); }
.coach-teaser span { font-size: .9rem; opacity: .92; }
.coach-teaser span::after { content: ' →'; }
.coach-teaser:hover { color: #fff; transform: translateY(-1px); }
.dash-side .coach-teaser { margin: 0; }

/* =====================================================================
   Jobbdagbok
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: .4rem 0 1.6rem; }
.kpis > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1rem 1.15rem; box-shadow: var(--sh-1); display: grid; gap: .1rem; }
.kpis > div.hot { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.kpis dt { font-size: .8rem; font-weight: 650; color: var(--muted); }
.kpis dd { margin: 0; font: 780 2.1rem/1.1 var(--display); letter-spacing: -.02em; }
.kpis span { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.diary-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.6rem; align-items: start; }
.diary-side { display: grid; gap: 1rem; position: sticky; top: 1.2rem; }
.diary-side > section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
@media (max-width: 1080px) { .diary-grid { grid-template-columns: 1fr; } .diary-side { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.diary-tools { display: grid; gap: .8rem; margin-bottom: 1rem; }
.diary-search { display: flex; gap: .6rem; flex-wrap: wrap; }
.diary-search .search { flex: 1 1 240px; margin: 0; max-width: none; }
.diary-search select { margin: 0; width: auto; }
.diary-search label { margin: 0; }

.dcards { display: grid; gap: .8rem; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem 1.25rem .5rem; box-shadow: var(--sh-1); transition: box-shadow .2s, border-color .2s; }
.dcard:hover { box-shadow: var(--sh-2); }
.dcard.st-avslag, .dcard.st-avbojd { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.dcard.st-erbjudande { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.dc-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.dc-title { font: 700 1.08rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
.dc-title:hover { color: var(--accent-text); }
.dc-co { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.dc-meta { display: flex; gap: .5rem; align-items: center; flex: none; }

.journey { list-style: none; padding: 0; margin: 1rem 0 .8rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.journey li { position: relative; display: grid; justify-items: center; text-align: center; gap: .15rem; font-size: .78rem; }
.journey li::before { content: ''; position: absolute; top: 7px; right: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.journey li:first-child::before { display: none; }
.journey li.j-done::before, .journey li.j-now::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.journey li.j-skip::before { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); }
.j-dot { position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-2); }
.j-done .j-dot { background: var(--accent); border-color: var(--accent); }
.j-now .j-dot { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.j-skip .j-dot { border-style: dashed; }
.j-label { font-weight: 650; color: var(--ink-2); }
.j-todo .j-label, .j-skip .j-label { color: var(--muted); font-weight: 500; }
.j-now .j-label { color: var(--accent-text); }
.journey time { color: var(--muted); min-height: 1.2em; }
.st-erbjudande .j-now .j-dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 5px var(--ok-soft); }
.st-avslag .j-now .j-dot, .st-avbojd .j-now .j-dot { border-color: var(--muted); background: var(--muted); box-shadow: none; }
.st-avslag .j-now .j-label, .st-avbojd .j-now .j-label { color: var(--muted); }

.dc-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .7rem 0 .6rem; border-top: 1px solid var(--line); }
.dc-next { font-weight: 650; font-size: .9rem; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.dc-next::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
a.dc-next:hover { color: var(--accent-text); }
.dc-next.due::before, .dc-next.meet::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dc-next.due, .dc-next.meet { color: var(--accent-text); }
.dc-next.late { color: var(--danger); } .dc-next.late::before { background: var(--danger); }
.dc-next.good { color: var(--ok); } .dc-next.good::before { background: var(--ok); }
.dc-dates { display: flex; gap: .8rem; font-size: .8rem; color: var(--muted); }
.dc-more { border-top: 1px solid var(--line); padding: .55rem 0 .3rem; }
.dc-more summary { font-size: .86rem; color: var(--ink-2); }
.dc-more summary .muted { font-weight: 400; }
form.note { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; margin: .8rem 0 .4rem; }
form.note textarea { margin: 0; min-height: 0; }
.agenda .late time { color: var(--danger); font-weight: 700; }
.agenda .ev-uppfoljning time { color: var(--accent-text); font-weight: 700; }

.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 120px; margin: .4rem 0 .6rem; }
.bar { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.bar span { align-self: end; height: var(--h); min-height: 4px; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--accent) 30%, var(--sunk)); font-size: .65rem; font-weight: 700; color: var(--ink-2); display: flex; justify-content: center; padding-top: 2px; }
.bar.now span { background: linear-gradient(180deg, var(--glow), var(--accent)); color: #fff; }
.bar small { font-size: .62rem; color: var(--muted); margin-top: 3px; }
.diary-empty { max-width: 560px; }
.empty-small { padding: 1.5rem 0; }
body.print-doc .diary-print { padding: 14mm; font-size: 10pt; }
body.print-doc .diary-print h1 { font-size: 18pt; }
body.print-doc .diary-print .reqs td, body.print-doc .diary-print .reqs th { padding: .35rem .5rem; }

/* =====================================================================
   Aktivitetsrapport
   ===================================================================== */
.afr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.4rem 1.5rem .6rem; margin-bottom: 2.2rem; box-shadow: var(--sh-1); }
.afr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.afr-head h2 { font-size: 1.45rem; margin: 0; }
.afr-head select { margin: 0; min-width: 180px; }
.afr-head label { margin: 0; }
.afr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .4rem 0 .2rem; }
.afr-stats div { background: var(--sunk); border-radius: 14px; padding: .7rem .9rem; display: grid; }
.afr-stats strong { font: 780 1.6rem/1.1 var(--display); }
.afr-stats span { font-size: .8rem; color: var(--muted); }
.afr-steps { list-style: none; padding: 0; margin: 1.2rem 0 0; counter-reset: s; }
.afr-steps > li { position: relative; padding: 0 0 1.4rem 3rem; counter-increment: s; }
.afr-steps > li::before { content: counter(s); position: absolute; left: 0; top: -.15rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 750 .95rem var(--display); }
.afr-steps > li::after { content: ''; position: absolute; left: calc(1rem - 1px); top: 2.1rem; bottom: .3rem; width: 2px; background: var(--line); }
.afr-steps > li:last-child::after { display: none; }
.afr-steps h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.afr-form { background: var(--sunk); border-radius: var(--r-m); padding: 1rem 1.1rem .4rem; margin: .8rem 0; }
.afr-form h4 { margin: 0 0 .6rem; font-family: var(--display); }
.acts { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .6rem; }
.act { border: 1px solid var(--line); border-radius: var(--r-m); padding: .75rem .9rem; background: var(--surface); transition: background .2s, opacity .2s; }
.act.is-done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.act.is-done .act-fields { opacity: .6; }
.act-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.act-head label.check { margin: 0; font-weight: 500; }
.act-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .35rem .9rem; margin: .6rem 0 0; }
.act-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem .5rem; padding: .35rem .5rem .35rem .65rem; background: var(--field); border-radius: 10px; }
.act-fields dt { grid-column: 1; font-size: .7rem; color: var(--muted); font-weight: 650; }
.act-fields dd { grid-column: 1; margin: 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.act-fields .copybtn { grid-column: 2; grid-row: 1 / span 2; }

/* =====================================================================
   Intervju
   ===================================================================== */
.iv-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.4rem; padding: 1.4rem 1.5rem; margin: .4rem 0 1.2rem; border-radius: var(--r-l); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--accent-soft), var(--surface) 65%); }
.iv-hero h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.iv-format { display: grid; gap: .6rem; margin: 0; }
.iv-format dt { font-size: .76rem; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: .05em; }
.iv-format dd { margin: 0; color: var(--ink-2); }
.iv-when { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem; display: grid; gap: .6rem; align-content: start; box-shadow: var(--sh-1); }
.iv-date { display: grid; margin: 0; }
.iv-date span { font-size: .75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.iv-date strong { font: 750 1.15rem var(--display); }
.iv-date em { font-style: normal; color: var(--muted); font-size: .88rem; }
.iv-progress span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.iv-progress .meter { margin: .3rem 0 0; }
@media (max-width: 820px) { .iv-hero { grid-template-columns: 1fr; } }
.iv-cats { margin: .2rem 0 1rem; }
.iv-cat { margin-bottom: 1.4rem; }
.iv-cat > h3 { font-size: 1.1rem; margin: 0; }
.iv-cat > .hint { margin: .1rem 0 .3rem; }
.iq-why { color: var(--ink-2); font-size: .92rem; margin: .7rem 0 0; }
.iq-meta { display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-2); margin-bottom: .7rem; }
.iq-meta p { margin: 0; }
.pitfall strong { color: var(--warn); }
.pill.v-stark { background: var(--ok-soft); color: var(--ok); }
.pill.v-bra { background: var(--info-soft); color: var(--info); }
.pill.v-utveckla { background: var(--accent-soft); color: var(--accent-text); }
.practice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin: 0 0 2rem; box-shadow: var(--sh-2); scroll-margin-top: 1rem; }
.practice-head { display: flex; gap: .7rem; align-items: center; }
.practice-head .link { margin-left: auto; }
.practice-q { font-size: 1.45rem; line-height: 1.25; margin: .7rem 0 .3rem; }
.practice textarea { min-height: 140px; }
.timer { font: 700 .95rem var(--display); color: var(--muted); padding: .3rem .7rem; background: var(--sunk); border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.timer.long { color: var(--warn); background: var(--warn-soft); }
#pMic[aria-pressed="true"] { background: var(--danger); color: #fff; border-color: var(--danger); }
.feedback { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--r-m); background: var(--sunk); border-left: 4px solid var(--info); }
.feedback.v-stark { border-left-color: var(--ok); } .feedback.v-utveckla { border-left-color: var(--accent); }
.fb-verdict { font: 750 1.15rem var(--display); margin: 0 0 .5rem; }
.feedback h4 { margin: .2rem 0 .3rem; font-size: .9rem; }
.feedback ul { margin: 0; padding-left: 1.1rem; }
.tips { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.tips li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .7rem .9rem; }
.tips strong { display: block; font-family: var(--display); }
.iv-general { margin-top: .4rem; }
.iv-general summary { margin-bottom: .6rem; }
.asklist { padding-left: 1.1rem; }
.asklist li { margin-bottom: .4rem; }

/* =====================================================================
   Coach
   ===================================================================== */
.coach-intro { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 2rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 2rem; box-shadow: var(--sh-2); max-width: 900px; }
.coach-intro h2 { font-size: 1.5rem; }
.coach-looks { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .45rem; }
.coach-looks li { display: flex; gap: .6rem; align-items: baseline; color: var(--ink-2); }
.coach-looks li::before { content: '✓'; color: var(--accent); font-weight: 800; }
.coach-art { width: 100%; height: auto; }
.coach-art.small { width: 110px; flex: none; }
@media (max-width: 760px) { .coach-intro { grid-template-columns: 1fr; padding: 1.4rem; } .coach-intro .coach-art { max-width: 200px; order: -1; } }
.coach-headline { display: flex; gap: 1.4rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: var(--r-l); margin-bottom: 1.8rem;
  background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 60%), var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.coach-headline h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.2; margin-bottom: .6rem; }
.coach-headline p { color: var(--ink-2); }
@media (max-width: 640px) { .coach-headline { flex-direction: column; align-items: flex-start; } }
.coach-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.8rem; align-items: start; }
.coach-grid aside { display: grid; gap: 1rem; position: sticky; top: 1.2rem; }
.coach-grid aside > section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
@media (max-width: 1080px) { .coach-grid { grid-template-columns: 1fr; } .coach-grid aside { position: static; } }
.improve { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.improve > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem 1.25rem; box-shadow: var(--sh-1); }
.improve > li.prio-hog { border-left: 4px solid var(--accent); }
.imp-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.imp-head h3 { margin: 0; font-size: 1.08rem; }
.pill.prio { background: var(--sunk); }
.prio-hog .pill.prio { background: var(--accent-soft); color: var(--accent-text); }
.imp-why { color: var(--muted); font-size: .92rem; margin: .45rem 0 .6rem; }
.improve .checklist { margin: 0 0 .5rem; }
.strengths, .gaps { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; }
.strengths li { display: grid; gap: .1rem; padding: .85rem 1rem; border-radius: var(--r-m); background: var(--ok-soft); }
.strengths li span { color: var(--ink-2); font-size: .92rem; }
.gaps li { padding: .85rem 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.gaps li div { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; }
.gaps p { margin: .3rem 0 0; color: var(--ink-2); font-size: .92rem; }
.weekplan ul { list-style: none; padding: 0; margin: 0; }
.weekplan li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.weekplan li:first-child { border-top: 0; }
.weekplan li span { font-weight: 700; color: var(--accent-text); }
.coach-chat .chatlog { max-height: 46vh; }
.coach-chat .msg { font-size: .93rem; }
.coach-chat form textarea { margin: .4rem 0 .5rem; }
.coach-chat .chips { margin-bottom: .2rem; }
.msg.typing { display: flex; gap: 4px; padding: .9rem 1rem; }
.msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .2s; } .msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* =====================================================================
   Så funkar det
   ===================================================================== */
.how { max-width: 1100px; }
.how section { margin: 0 0 4.5rem; }
.how h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 780; }
.how-sub { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; margin-bottom: 1.6rem; }
.how-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin: 0 0 4.5rem; position: relative; }
.how-hero h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 13ch; }
.how-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 50ch; margin-bottom: 1.6rem; }
.how-hero-art { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; padding: 2rem 1rem; isolation: isolate; }
.how-hero-art::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(45% 50% at 50% 55%, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 70%); }
.hh-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem .8rem; box-shadow: var(--sh-2); display: grid; gap: 6px; }
.hh-card i { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.hh-card i:nth-child(odd) { width: 78%; }
.hh-card b { font: 750 .78rem var(--display); color: var(--accent-text); }
.hh-tag { font-size: .7rem; font-weight: 700; color: var(--muted); }
.hh-ad { transform: rotate(-5deg); }
.hh-anvil { width: 120px; height: 120px; display: grid; place-items: center; border-radius: 32px; background: var(--surface); box-shadow: var(--sh-glow), var(--sh-2); color: var(--ink); }
.hh-stack { display: grid; gap: .5rem; }
.hh-stack .hh-card:nth-child(2) { transform: translateX(10px); }
.hh-stack .hh-card:nth-child(3) { transform: translateX(20px); }
@media (max-width: 900px) { .how-hero { grid-template-columns: 1fr; gap: 1rem; } .how-hero-art { max-width: 460px; } .hh-anvil { width: 92px; height: 92px; border-radius: 26px; } .hh-anvil svg { width: 70px; height: auto; } }

.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; box-shadow: var(--sh-1); }
.pain span { font: 800 .85rem var(--display); color: var(--accent-text); background: var(--accent-soft); padding: .15rem .5rem; border-radius: var(--r-pill); }
.pain h3 { font-size: 1.15rem; margin: .8rem 0 .4rem; }
.pain p { color: var(--ink-2); margin: 0; }
.how-answer { font: 650 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.4 var(--display); margin: 1.8rem 0 0; max-width: 46ch; padding-left: 1rem; border-left: 4px solid var(--accent); }
@media (max-width: 820px) { .pains { grid-template-columns: 1fr; } }

.how-steps > h2 { margin-bottom: 2rem; }
.how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-bottom: 3rem; }
.how-step.flip figure { order: 2; }
.how-step figure { margin: 0; background: linear-gradient(160deg, var(--sunk), var(--surface)); border: 1px solid var(--line); border-radius: 28px; padding: 1rem; box-shadow: var(--sh-1); }
.ill { width: 100%; height: auto; display: block; }
.step-n { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 12px; background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font: 800 1.05rem var(--display); margin-bottom: .8rem; }
.how-step h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; margin-bottom: .6rem; }
.how-step p { color: var(--ink-2); font-size: 1.04rem; }
.ticks { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .45rem; }
.ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; color: var(--ink-2); }
.ticks li::before { content: ''; width: 1.1rem; height: 1.1rem; margin-top: .2rem; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231F8A5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
@media (max-width: 820px) { .how-step { grid-template-columns: 1fr; gap: 1.2rem; } .how-step.flip figure { order: 0; } }

.cmp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row span { padding: .9rem 1.2rem; }
.cmp-row span:first-child { color: var(--muted); }
.cmp-row span:last-child { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); font-weight: 600; }
.cmp-head span { font: 750 .8rem var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) !important; }
.cmp-head span:last-child { color: var(--accent-text) !important; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.principles > div { padding: 1.2rem 1.3rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.principles h3 { font-size: 1.08rem; }
.principles p { color: var(--ink-2); margin: 0; }
@media (max-width: 700px) { .principles { grid-template-columns: 1fr; } .cmp-row span { padding: .75rem .9rem; font-size: .92rem; } }
.how-faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; max-width: 760px; }
.how-faq summary { font: 650 1.08rem var(--display); }
.how-faq details p { color: var(--ink-2); margin: .6rem 0 0; }
.how-cta { text-align: center; padding: 3rem 1.5rem; border-radius: 28px; color: #fff;
  background: radial-gradient(80% 120% at 50% 0%, var(--glow), transparent 60%), linear-gradient(160deg, var(--accent-2), var(--accent) 60%, #B4490D); box-shadow: var(--sh-glow); }
.how-cta h2, .how-cta p { color: #fff; }
.how-cta p { opacity: .92; max-width: 46ch; margin: 0 auto 1.4rem; font-size: 1.08rem; }
.how-cta .btn.primary { background: #fff; color: #B4490D; border-color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }

/* SVG-illustrationer */
.il-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.il-raise { filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .10)); }
.il-line { fill: var(--line); } .il-line2 { fill: var(--line-2); } .il-wline { fill: rgba(255, 255, 255, .75); }
.il-sunk { fill: var(--sunk); } .il-soft { fill: var(--accent-soft); } .il-acc { fill: var(--accent); } .il-ink { fill: var(--ink); } .il-ok { fill: var(--ok); }
.il-dot { fill: var(--surface); stroke: var(--line-2); stroke-width: 3; } .il-now { fill: var(--surface); stroke: var(--accent); stroke-width: 3.5; }
.il-track { stroke: var(--line); stroke-width: 3; }
.il-arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-plus { stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.il-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.il-check2 { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-check3 { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.il-mic { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.il-ring { fill: none; stroke: var(--sunk); stroke-width: 14; } .il-ring-on { fill: none; stroke-width: 14; stroke-linecap: round; }
.il-spark { stroke: var(--glow); }
.il-cursor { stroke: var(--surface); stroke-width: 2; }
.ill text { font-family: var(--display); }
.il-tw { fill: #fff; font-size: 11px; font-weight: 750; } .il-tsoft { fill: var(--accent-text); font-weight: 700; }
.il-url { fill: var(--muted); font-size: 9px; font-family: var(--font) !important; }
.il-big { fill: var(--ink); font-size: 30px; font-weight: 800; } .il-small { fill: var(--muted); font-size: 10px; font-weight: 600; }
.il-label { fill: var(--ink); font-size: 11px; font-weight: 750; } .il-q { fill: var(--accent); font-size: 17px; font-weight: 800; }
.st-a { stop-color: var(--accent); } .st-a2 { stop-color: var(--accent-2); } .st-glow { stop-color: var(--glow); }

/* Publik sida (utan inloggning) */
.public { min-height: 100vh; background: var(--bg); }
.pub-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.pub-bar .brand { padding: 0; }
.pub-actions { display: flex; align-items: center; gap: .8rem; }
.pub-main { margin: 0; padding: 2.6rem clamp(1rem, 4vw, 3rem) 4rem; display: flex; justify-content: center; }
@media (max-width: 560px) { .pub-actions .lang-pick { display: none; } }

/* =====================================================================
   Pitchar, ämnesrader och spontanansökan
   ===================================================================== */
.modeswitch { display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0 0 1.4rem; min-width: min(420px, 100%); }
.modeswitch a { text-align: center; padding: .6rem .9rem; border-radius: 9px; font-weight: 600; color: var(--muted); text-decoration: none; }
.modeswitch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.pitch.spoken { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.subjects { margin: 1.6rem 0; }
.subjlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.subjlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .7rem .9rem; }
.subjlist strong { display: block; font-weight: 650; }
.subjlist span { font-size: .84rem; color: var(--muted); }
.spont-angle { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: var(--r-l); margin: .4rem 0 1.4rem;
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.spont-angle p { margin: 0; }
@media (max-width: 720px) { .spont-angle { grid-template-columns: 1fr; } }
.spont-to { max-width: 460px; }
.spont-mails { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.spont-mails .mailcard { max-width: none; margin: 0; }
.spont-mails .mailcard + .mailcard { margin-top: 0; }
.spont-mails input { margin-bottom: .6rem; }
.spont-mails textarea { font-size: .95rem; }
.spont-view .cols .mailcard { margin-bottom: 1rem; }
.spont-view [data-st][aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Lönebild */
.salary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin: 0 0 1.6rem; box-shadow: var(--sh-1); }
.salary.empty-sal { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%); }
.salary.empty-sal h2 { margin-bottom: .2rem; } .salary.empty-sal .hint { margin: 0; max-width: 60ch; }
.sal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sal-head h2 { margin-bottom: .1rem; } .sal-head .hint { margin: 0; }
.sal-range { margin: 1.2rem 0 .8rem; }
.sal-bar { position: relative; height: 12px; border-radius: var(--r-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, var(--sunk)), var(--accent), color-mix(in srgb, var(--accent) 25%, var(--sunk))); }
.sal-dot { position: absolute; top: 50%; left: var(--pos); width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 4px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.sal-nums { display: flex; justify-content: space-between; align-items: baseline; margin-top: .7rem; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.sal-nums strong { font: 780 1.6rem var(--display); color: var(--ink); letter-spacing: -.01em; }
.sal-ad { background: var(--sunk); border-radius: var(--r-s); padding: .6rem .8rem; font-size: .92rem; }
.salary h3 { font-size: .95rem; margin: .4rem 0 .3rem; }
.salary ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.pill.conf-hog { background: var(--ok-soft); color: var(--ok); } .pill.conf-medel { background: var(--info-soft); color: var(--info); } .pill.conf-lag { background: var(--accent-soft); color: var(--accent-text); }
main:focus, main:focus-visible, #main:focus-visible { outline: none; }
.cols > .subjects { margin-top: 0; }

/* =====================================================================
   CV-inriktningar
   ===================================================================== */
.trackbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; margin: 0 0 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.trackbar label { margin: 0; font-weight: 650; font-size: .9rem; }
.trackbar select { margin: 0; width: auto; min-width: 220px; }
.tracks-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-bottom: 1.6rem; padding: 1.4rem 1.5rem; border-radius: var(--r-l);
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.tracks-intro h2 { margin-bottom: .3rem; }
.tracks-suggest { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem 1.1rem; }
.tracks-suggest textarea { margin-bottom: .6rem; }
@media (max-width: 820px) { .tracks-intro { grid-template-columns: 1fr; } }
label.inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
label.inline select { margin: 0; width: auto; }
.suggestions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; margin-bottom: 1.6rem; box-shadow: var(--sh-2); }
.suggestions h3 { margin-bottom: .2rem; }
.sugg { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .8rem 0; border-top: 1px solid var(--line); }
.sugg .check { margin: .55rem 0 0; }
.sugg-body { display: grid; grid-template-columns: 1fr 1.6fr; gap: .2rem .6rem; }
.sugg-body input { margin: 0; }
.sugg-body input:first-child { font-weight: 700; }
.sugg-body .hint { grid-column: 1 / -1; margin: .2rem 0 0; }
@media (max-width: 640px) { .sugg-body { grid-template-columns: 1fr; } }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 1rem; align-items: start; }
.cvtrack { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
.track-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.track-head h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.track-head .chips { margin: 0; }
.track-meta { display: flex; gap: .5rem; align-items: center; flex: none; }
.track-headline { font: 650 1rem var(--display); margin: .9rem 0 .2rem; }
.track-summary { color: var(--ink-2); font-size: .94rem; margin: 0 0 .5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.track-tools { font-size: .88rem; color: var(--ink-2); margin: 0 0 .3rem; }
.track-preview { margin-top: 1rem; max-height: 70vh; overflow: auto; }
.track-edit { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.exp-weights { border: 1px solid var(--line); border-radius: var(--r-m); padding: .8rem 1rem; margin: 0 0 1rem; }
.exp-weights legend { font-weight: 700; padding: 0 .3rem; }
.exp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 170px; gap: .7rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); }
.exp-row:first-of-type { border-top: 0; }
.exp-row select { margin: 0; }
.exp-what { display: grid; } .exp-what span { font-size: .82rem; color: var(--muted); }
.exp-move { display: flex; gap: 2px; }
.iconbtn { width: 1.9rem; height: 1.9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 700; }
.iconbtn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent-text); }
.iconbtn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 560px) { .exp-row { grid-template-columns: auto 1fr; } .exp-row select { grid-column: 1 / -1; } }
.track-tag { margin-left: .4rem; background: var(--accent-soft); color: var(--accent-text); }
.cv-item.short { margin-bottom: .35rem; }
.cv-item.short h3 { font-weight: 600; }
.cvtrack:has(.track-edit:not([hidden])), .cvtrack:has(.track-preview:not([hidden])) { grid-column: 1 / -1; }

/* =====================================================================
   CV- och brevmallar (cvdesign.js). Fasta färger: dokumentet är alltid vitt papper.
   ===================================================================== */
.paper:has(.cvdoc) { padding: 0; overflow: hidden; max-width: 794px; }
.cvdoc { --cv-ink: #1F2328; --cv-muted: #5F6670; --cv-soft: #EEF0F2; --cv-line: #E3E6EA; --cv-accent: #3B4450;
  font: 400 calc(13.5px * var(--k, 1))/1.55 'Figtree', 'Helvetica Neue', Arial, sans-serif; color: var(--cv-ink); background: #fff; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cvdoc h1, .cvdoc h2, .cvdoc h3, .cvdoc p { margin: 0; color: inherit; letter-spacing: normal; }
.cvdoc ul { list-style: none; margin: 0; padding: 0; }
.cvd-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cvd-ic.big { width: 34px; height: 34px; stroke-width: 1.3; }
.cvd-contact li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 5px; overflow-wrap: anywhere; }
.cvd-contact .cvd-ic { margin-top: 3px; color: var(--cv-muted); }
.cvd-list li { position: relative; padding-left: 14px; margin-bottom: 3px; }
.cvd-list li::before, .cvd-bullets li::before { content: ''; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #B9BEC5; }
.cvd-inline { color: var(--cv-ink); }
.cvd-inline .dot { color: #9AA0A8; }
.cvd-job, .cvd-edu { break-inside: avoid; margin-bottom: 16px; }
.cvd-job.short { margin-bottom: 8px; }
.cvd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cvd-row h3 { font-size: calc(16px * var(--k, 1)); font-weight: 500; }
.cvd-period { font-size: calc(11.5px * var(--k, 1)); color: var(--cv-muted); white-space: nowrap; }
.cvd-org { font-size: calc(10.5px * var(--k, 1)); text-transform: uppercase; font-style: italic; color: var(--cv-muted); letter-spacing: .02em; margin-top: 1px; }
.cvd-desc { margin-top: 4px; }
.cvd-bullets { margin-top: 8px !important; }
.cvd-bullets li { position: relative; padding-left: 16px; margin-bottom: 3px; color: #4A5058; }
.cvd-systems { font-style: italic; }
.cvd-details { font-size: calc(12.5px * var(--k, 1)); color: var(--cv-muted); }
.cvd-langs li { margin-bottom: 9px; display: grid; }
.cvd-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 2px; max-width: 220px; }
.cvd-bar i { height: 5px; background: #DDE0E4; }
.cvd-bar i.on { background: color-mix(in srgb, var(--cv-accent) 55%, #9AA0A8); }
.cvd-level { font-size: calc(12px * var(--k, 1)); color: var(--cv-muted); }
.cvd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cvd-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; background: #fff; }

/* --- Skandinavisk: grått sidhuvud, glest namn, rund bild, två spalter (efter Saras CV) --- */
.tpl-skandinavisk .cvd-head { text-align: center; }
.tpl-skandinavisk .cvd-band { background: color-mix(in srgb, var(--cv-accent) 5%, #EEEFF1); padding: 46px 40px 38px; }
.tpl-skandinavisk .cvd-head.has-photo .cvd-band { padding-bottom: 66px; }
.tpl-skandinavisk .cvd-name { font-size: calc(34px * var(--k, 1)); font-weight: 400; letter-spacing: .38em; text-transform: uppercase; line-height: 1.15; margin-right: -.38em; }
.tpl-skandinavisk .cvd-last { color: #6E747C; }
.tpl-skandinavisk .cvd-headline { margin-top: 10px; font-size: calc(12px * var(--k, 1)); letter-spacing: .18em; text-transform: uppercase; color: var(--cv-muted); }
.tpl-skandinavisk .cvd-photo { display: block; margin: -54px auto 0; position: relative; }
.tpl-skandinavisk .cvd-body { display: grid; grid-template-columns: 34% 1fr; gap: 38px; padding: 20px 46px 44px; }
.tpl-skandinavisk h2 { font-size: calc(22px * var(--k, 1)); font-weight: 400; padding-bottom: 9px; margin: 24px 0 14px; border-bottom: 4px solid color-mix(in srgb, var(--cv-accent) 8%, #EEF0F2); }
.tpl-skandinavisk .cvd-contact .cvd-ic { width: 18px; height: 18px; padding: 3px; margin-top: 0; border-radius: 50%; background: #EEF0F2; stroke: #8B9199; }
.tpl-skandinavisk .cvd-side { color: #4A5058; }
.tpl-skandinavisk .cvd-edu h3 { font-size: calc(15px * var(--k, 1)); }
.tpl-skandinavisk .cvd-edu .cvd-org { text-transform: none; font-size: calc(11.5px * var(--k, 1)); }

/* --- Modern: färgad sidokolumn med bild, namn i kraftig rubrik --- */
.tpl-modern { display: grid; grid-template-columns: 240px 1fr; grid-template-areas: "photo head" "side main";
  background: linear-gradient(to right, var(--cv-accent) 240px, #fff 240px); }
.tpl-modern .cvd-head, .tpl-modern .cvd-body { display: contents; }
.tpl-modern .cvd-band { grid-area: head; padding: 44px 40px 6px; }
.tpl-modern .cvd-photo { grid-area: photo; justify-self: center; margin-top: 36px; width: 132px; height: 132px; border: 4px solid rgba(255,255,255,.85); background: rgba(255,255,255,.15); }
.tpl-modern .cvd-name { font: 750 calc(32px * var(--k, 1))/1.08 'Bricolage Grotesque', 'Figtree', sans-serif; letter-spacing: -.01em; }
.tpl-modern .cvd-headline { margin-top: 8px; font-size: calc(15px * var(--k, 1)); font-weight: 600; color: var(--cv-accent); }
.tpl-modern .cvd-side { grid-area: side; color: rgba(255,255,255,.92); padding: 14px 28px 40px; }
.tpl-modern .cvd-side h2 { font-size: calc(12px * var(--k, 1)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 24px 0 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.3); }
.tpl-modern .cvd-side .cvd-ic { color: rgba(255,255,255,.75); }
.tpl-modern .cvd-side .cvd-list li::before { background: rgba(255,255,255,.6); }
.tpl-modern .cvd-side .cvd-bar i { background: rgba(255,255,255,.25); } .tpl-modern .cvd-side .cvd-bar i.on { background: #fff; }
.tpl-modern .cvd-side .cvd-level, .tpl-modern .cvd-side .cvd-period { color: rgba(255,255,255,.7); }
.tpl-modern .cvd-main { grid-area: main; padding: 6px 40px 44px; }
.tpl-modern .cvd-main h2 { font-size: calc(12.5px * var(--k, 1)); font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-accent); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
.tpl-modern .cvd-main h2::after { content: ''; flex: 1; height: 1px; background: var(--cv-line); }
.tpl-modern .cvd-row h3 { font-weight: 650; }

/* --- Klassisk: en spalt, serif-rubriker, centrerat huvud – säker för rekryteringssystem --- */
.tpl-klassisk { padding: 46px 58px 50px; }
.tpl-klassisk .cvd-head { text-align: center; position: relative; padding-bottom: 18px; border-bottom: 1.5px solid var(--cv-accent); margin-bottom: 6px; }
.tpl-klassisk .cvd-head.has-photo { padding-right: 0; }
.tpl-klassisk .cvd-name { font: 400 calc(34px * var(--k, 1))/1.15 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.tpl-klassisk .cvd-headline { font: italic calc(15px * var(--k, 1)) Georgia, serif; color: var(--cv-muted); margin-top: 6px; }
.tpl-klassisk .cvd-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 12px; font-size: calc(12.5px * var(--k, 1)); color: var(--cv-muted); }
.tpl-klassisk .cvd-contact li { margin: 0; align-items: center; }
.tpl-klassisk .cvd-contact .cvd-ic { margin: 0; }
.tpl-klassisk .cvd-photo { position: absolute; right: 0; top: -6px; width: 86px; height: 86px; border: 0; }
.tpl-klassisk h2 { font: 400 calc(14px * var(--k, 1)) Georgia, serif; text-transform: uppercase; letter-spacing: .16em; color: var(--cv-accent); margin: 22px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--cv-line); }
.tpl-klassisk .cvd-row h3 { font-weight: 650; font-size: calc(15px * var(--k, 1)); }
.tpl-klassisk .cvd-org { font-size: calc(11.5px * var(--k, 1)); }

/* --- Kompakt: tätt, en spalt, mycket på en sida --- */
.tpl-kompakt { padding: 36px 42px 40px; font-size: calc(12.5px * var(--k, 1)); }
.tpl-kompakt .cvd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 3px solid var(--cv-accent); }
.tpl-kompakt .cvd-name { font: 750 calc(28px * var(--k, 1))/1.1 'Bricolage Grotesque', 'Figtree', sans-serif; }
.tpl-kompakt .cvd-last { color: var(--cv-accent); }
.tpl-kompakt .cvd-headline { font-weight: 600; margin-top: 4px; color: var(--cv-muted); }
.tpl-kompakt .cvd-contact { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 10px; color: var(--cv-muted); font-size: calc(12px * var(--k, 1)); }
.tpl-kompakt .cvd-contact li { margin: 0; align-items: center; } .tpl-kompakt .cvd-contact .cvd-ic { margin: 0; }
.tpl-kompakt .cvd-photo { width: 84px; height: 84px; border-radius: 14px; border: 0; }
.tpl-kompakt h2 { font-size: calc(11.5px * var(--k, 1)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-accent); margin: 18px 0 8px; padding-left: 9px; border-left: 3px solid var(--cv-accent); line-height: 1.2; }
.tpl-kompakt .cvd-job, .tpl-kompakt .cvd-edu { margin-bottom: 11px; }
.tpl-kompakt .cvd-row h3 { font-size: calc(14px * var(--k, 1)); font-weight: 650; }
.tpl-kompakt .cvd-bullets li { margin-bottom: 1px; }

/* --- Brev i samma mall --- */
.letterdoc .letter-body { padding: 30px 56px 56px; }
.letterdoc .letter-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; font-size: calc(12.5px * var(--k, 1)); color: var(--cv-muted); margin-bottom: 26px; }
.letterdoc .letter-date { white-space: nowrap; }
.letterdoc .letter-text { font-size: calc(14px * var(--k, 1)); line-height: 1.7; max-width: 62ch; }
.letterdoc .letter-text p { margin: 0 0 12px; }
.tpl-skandinavisk.letterdoc .letter-body { display: block; padding-top: 30px; }
.tpl-klassisk.letterdoc .letter-body, .tpl-kompakt.letterdoc .letter-body { padding: 26px 0 0; }
.tpl-modern.letterdoc .letter-body { display: contents; }
.tpl-modern.letterdoc .letter-meta { grid-area: side; flex-direction: column; color: rgba(255,255,255,.9); padding: 24px 28px; }
.tpl-modern.letterdoc .letter-meta .cvd-ic { color: rgba(255,255,255,.75); }
.tpl-modern.letterdoc .letter-text { grid-area: main; padding: 24px 40px 56px; }

/* Utskrift: A4 utan webbläsarens marginaler */
body.print-doc .cvdoc { width: 210mm; min-height: 297mm; margin: 0 auto; font-size: calc(10.2pt * var(--k, 1)); }
@media print { body.print-doc .cvdoc { box-shadow: none; } .cvd-job, .cvd-edu { break-inside: avoid; } .cvd-sec h2 { break-inside: avoid; break-after: avoid-page; } }

/* Panel: mall och utseende */
.design-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .75rem 1rem; margin: 0 0 1rem; max-width: 830px; }
.design-panel summary .hint { font-weight: 500; }
.dp-body { display: grid; gap: 1rem; margin-top: .9rem; }
.dp-body fieldset { border: 0; padding: 0; margin: 0; }
.dp-body legend { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
.dp-tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.dp-tpls legend { grid-column: 1 / -1; }
.dp-tpl { display: grid; gap: .2rem; padding: .6rem; border: 2px solid var(--line); border-radius: var(--r-m); cursor: pointer; margin: 0; text-align: center; background: var(--surface); }
.dp-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.dp-tpl.on, .dp-tpl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dp-tpl svg { width: 100%; max-width: 92px; justify-self: center; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.12); fill: #D7DBE0; }
.dp-tpl svg .tb-h { fill: #8B9199; } .dp-tpl svg .tb-band { fill: #EEEFF1; } .dp-tpl svg .tb-photo { fill: #C3C8CF; stroke: #fff; stroke-width: 1.5; }
.dp-tpl svg .tb-side { fill: var(--cv-accent); } .dp-tpl svg .tb-w { fill: rgba(255,255,255,.6); }
.dp-tpl span { font-weight: 700; font-size: .9rem; } .dp-tpl small { font-size: .75rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 640px) { .dp-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dp-colors { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dp-colors legend { width: 100%; }
.dp-swatch { margin: 0; cursor: pointer; } .dp-swatch input { position: absolute; opacity: 0; }
.dp-swatch span:not(.sr) { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.dp-swatch input:checked + span { box-shadow: 0 0 0 2px var(--accent); }
.dp-swatch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.dp-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .8rem; }
.dp-blocks legend { grid-column: 1 / -1; }
.dp-blocks label.check { margin: 0; font-weight: 500; }
.dp-photo { display: flex; gap: 1rem; align-items: center; }
.dp-photo img, .dp-nophoto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.dp-nophoto { display: grid; place-items: center; background: var(--sunk); color: var(--muted); }
.dp-photo .hint { margin: 0 0 .4rem; }
.letter-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0 0 .8rem; min-width: 300px; }
.cvd-pair { margin-top: 18px; align-items: start; } .cvd-pair h2 { margin-top: 0 !important; }

/* =====================================================================
   Mina dokument
   ===================================================================== */
.doclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.doccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); display: grid; transition: box-shadow .2s, transform .2s; }
.doccard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.doc-thumb { display: block; height: 300px; overflow: hidden; background: var(--sunk); border-bottom: 1px solid var(--line); position: relative; }
.doc-thumb-inner { width: 794px; transform: scale(.31); transform-origin: top left; position: absolute; left: 50%; margin-left: -123px; top: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.12); pointer-events: none; }
.doc-info { padding: .9rem 1rem; }
.doc-name { font: 700 1rem var(--display); color: var(--ink); text-decoration: none; }
.doc-name:hover { color: var(--accent-text); }
.doc-info .hint { margin: .15rem 0 .6rem; }
.newdoc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin-bottom: 1.8rem; box-shadow: var(--sh-2); max-width: 860px; }
.newdoc .dp-tpls { margin-bottom: 1rem; }
.newdoc .dp-tpl { text-align: left; }
.docedit-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .3rem 0 1.2rem; }
.docname { font: 750 1.6rem var(--display); border: 1px solid transparent; background: transparent; padding: .25rem .5rem; margin: 0 0 0 -.5rem; border-radius: 10px; flex: 1 1 320px; min-width: 0; color: var(--ink); }
.docname:hover { border-color: var(--line); } .docname:focus { border-color: var(--accent); background: var(--surface); }
.docedit-head .btnrow { margin: 0; }
.docedit-grid { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.docedit-preview { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; border-radius: 12px; }
.docedit-preview .paper { max-width: 794px; margin: 0; }
@media (max-width: 1100px) { .docedit-grid { grid-template-columns: 1fr; } .docedit-preview { position: static; max-height: none; } }
.dblock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: .6rem; }
.dblock > summary { padding: .8rem 1rem; font-weight: 700; }
.dblock-body { padding: 0 1rem 1rem; }
.dblock textarea { min-height: 0; }
.entry { border: 1px solid var(--line); border-radius: var(--r-m); padding: .7rem .8rem .2rem; margin: 0 0 .7rem; background: var(--field); position: relative; }
.entry legend { font-weight: 700; padding: 0 .3rem; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-ops { position: absolute; right: .6rem; top: -.75rem; display: flex; gap: 3px; align-items: center; background: var(--field); padding: 0 .3rem; }
.langrow { display: grid; grid-template-columns: 1fr 1fr 110px auto; gap: .5rem; align-items: end; }
.langrow label { margin-bottom: .4rem; }
@media (max-width: 560px) { .langrow { grid-template-columns: 1fr 1fr; } }
.fetch { margin-bottom: .8rem; } .fetch select { margin: 0; width: auto; max-width: 100%; }
.letterdoc .letter-to { margin-bottom: 18px; }
.letterdoc .letter-subject { font-weight: 700; font-size: calc(15px * var(--k, 1)); margin-bottom: 14px; }

/* =====================================================================
   Grönt och mjukt: svävande glasmeny, genomskinliga ytor mot den mjuka bakgrunden
   ===================================================================== */
.rail { inset: 14px auto 14px 14px; width: calc(var(--rail) - 14px); border: 1px solid rgba(255, 255, 255, .75); border-radius: 26px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); box-shadow: var(--sh-2); }
.rail li a[aria-current="page"] { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.rail-foot { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
main { margin-left: calc(var(--rail) + 6px); }
.auth, .public { background: transparent; }
.brand .logo { filter: drop-shadow(0 4px 10px rgba(226, 88, 12, .18)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail { background: rgba(15, 28, 48, .66); border-color: rgba(255, 255, 255, .06); } }
:root[data-theme="dark"] .rail { background: rgba(15, 28, 48, .66); border-color: rgba(255, 255, 255, .06); }
@media (max-width: 860px) {
  .rail { inset: auto 10px 10px 10px; width: auto; border-radius: 20px; }
  main { margin-left: 0; }
}
/* Kort och paneler: lite mjukare kanter och skuggor */
.dash-side > section, .diary-side > section, .kpis > div, .dcard, .afr, .calsub, .applist, .import, .coach-grid aside > section, .improve > li, .doccard, .cvtrack, .salary, .fit, .pain, .principles > div, .suggestions, .newdoc, .design-panel, .dblock, .trackbar {
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
}
.page-head h1, .dash-head h1 { letter-spacing: -.02em; }
.btn:not(.primary) { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.tabs, .seg, .track ol { background: color-mix(in srgb, var(--sunk) 85%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail li a[aria-current="page"] { background: var(--accent-soft); } }
:root[data-theme="dark"] .rail li a[aria-current="page"] { background: var(--accent-soft); }
a { color: var(--accent-text); }

/* =====================================================================
   Landningssida (före inloggning)
   ===================================================================== */
.landing { --lw: 1180px; }
.lnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.2rem; padding: .75rem max(1rem, calc((100vw - var(--lw)) / 2));
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.lnav .brand { padding: 0; font-size: 1.25rem; }
.lnav-links { display: flex; gap: .2rem; margin-left: 1rem; }
.lnav-links button, .lnav-links a { border: 0; background: none; font: 600 .95rem var(--font); color: var(--ink-2); padding: .5rem .8rem; border-radius: 10px; cursor: pointer; text-decoration: none; }
.lnav-links button:hover, .lnav-links a:hover { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); color: var(--accent-text); }
.lnav-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.lnav-actions .lang-pick { margin-right: .4rem; }
@media (max-width: 980px) { .lnav-links { display: none; } }
@media (max-width: 560px) { .lnav-actions .lang-pick { display: none; } .lnav { gap: .5rem; } }

.lmain { max-width: var(--lw); margin: 0 auto; padding: 0 1rem 2rem; }
.lmain > section { margin: 0 0 6.5rem; }
.lhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; padding-top: 4.5rem; }
.lpill { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .45rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); font-weight: 650; font-size: .88rem; color: var(--ink-2); box-shadow: var(--sh-1); }
.lpill span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--glow), var(--accent)); box-shadow: 0 0 0 4px var(--accent-soft); }
.lhero h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; margin: 1.3rem 0 1.3rem; max-width: 12ch; }
.lhero h1 .hl { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 60%, #FFB067); -webkit-background-clip: text; background-clip: text; color: transparent; }
.llead { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); color: var(--ink-2); max-width: 46ch; margin-bottom: 1.8rem; }
.ltrust { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--ink-2); font-weight: 600; font-size: .93rem; }
.ltrust li { display: flex; align-items: center; gap: .4rem; }
.ltrust svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.lhero-art { position: relative; padding: 1rem 0 3rem; isolation: isolate; }
.lhero-art::before { content: ''; position: absolute; inset: -12% -10% -6% -6%; z-index: -1; background: radial-gradient(50% 50% at 55% 45%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%); filter: blur(10px); }
.lbrowser { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 30px 80px -30px rgba(11, 27, 51, .45), var(--sh-2); transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.lbrowser img { display: block; width: 100%; height: auto; }
.lbrowser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: color-mix(in srgb, var(--sunk) 90%, transparent); border-bottom: 1px solid var(--line); }
.lbrowser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.lbrowser-bar span { margin-left: .8rem; font-size: .75rem; color: var(--muted); background: var(--surface); padding: .15rem .8rem; border-radius: var(--r-pill); }
.lphone { position: absolute; right: -2%; bottom: -1rem; width: 30%; margin: 0; border-radius: 30px; padding: 7px; background: #0B1B33; box-shadow: 0 30px 60px -20px rgba(8, 20, 40, .55); }
.lphone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.lchip { position: absolute; display: flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--sh-2); font-weight: 650; font-size: .85rem; color: var(--ink); animation: float 6s ease-in-out infinite; }
.lchip svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lchip b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font: 800 .85rem var(--display); background: radial-gradient(closest-side, var(--surface) 74%, transparent 76%), conic-gradient(var(--accent) 82%, var(--sunk) 0); }
.lchip.c1 { left: -4%; top: 8%; } .lchip.c2 { left: 6%; bottom: 8%; animation-delay: -2s; } .lchip.c3 { right: 26%; top: -2%; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 980px) { .lhero { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 2rem; } .lbrowser { transform: none; } .lchip.c3 { display: none; } }
@media (max-width: 560px) { .lchip { display: none; } .lphone { width: 34%; right: -1%; } }

.lworks { text-align: center; margin-top: -2.5rem !important; }
.lworks p { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.lworks ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.lworks li { font: 700 1.05rem var(--display); color: color-mix(in srgb, var(--ink) 55%, transparent); }

.lbig { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 18ch; margin-bottom: .8rem; }
.lsub { font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 2.2rem; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.lcard { background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r-l); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.lic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 15px; margin-bottom: 1rem; }
.lic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tone-0 .lic { background: #FFEBDD; color: #C2410C; } .tone-1 .lic { background: #E3F1FB; color: #2C6A8A; } .tone-2 .lic { background: #E6ECF7; color: #1D3A66; }
.tone-3 .lic { background: #FDF1E3; color: #B45309; } .tone-4 .lic { background: #EFEAFB; color: #5B4B9A; }
.lcard h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.lcard p { font-size: .94rem; margin: 0 0 .45rem; }
.lwhy { color: var(--muted); } .lwhy strong { color: var(--ink-2); } .lhow strong { color: var(--accent-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lic { background: var(--accent-soft) !important; color: var(--accent-text) !important; } }

.lshow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.lshow h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.025em; line-height: 1.05; }
.lshow p { color: var(--ink-2); font-size: 1.05rem; }
.lbrowser.small { transform: perspective(1600px) rotateY(5deg); transform-origin: right center; max-height: 520px; }
.lbrowser.small img { object-fit: cover; object-position: top; height: 480px; }
@media (max-width: 880px) { .lshow { grid-template-columns: 1fr; } .lbrowser.small { transform: none; } }

.lstat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lstat { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r-l); padding: 1.4rem; box-shadow: var(--sh-1); text-align: center; }
.lstat.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: center; text-align: left; }
.lstat p { margin: .6rem 0 0; font-weight: 600; color: var(--ink-2); }
.lnum { font: 800 clamp(3rem, 2rem + 3vw, 4.6rem)/1 var(--display) !important; letter-spacing: -.03em; color: var(--accent-text) !important; margin: 0 !important; }
.lstat.wide p:not(.lnum):not(.lsrc) { font-size: 1.25rem; max-width: 30ch; }
.lsrc { font-size: .78rem !important; font-weight: 500 !important; color: var(--muted) !important; margin-top: .6rem !important; }
.ldots { display: grid; grid-template-columns: repeat(10, 18px); gap: 6px; }
.ldots i { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.ldots i.on { background: linear-gradient(160deg, var(--accent-2), var(--accent)); }
.lring { width: 132px; height: 132px; }
.lring .lr-bg { fill: none; stroke: var(--sunk); stroke-width: 12; }
.lring .lr-on { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.lring text { font: 800 26px var(--display); fill: var(--ink); }
.ltake { font: 650 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.4 var(--display); max-width: 52ch; margin: 2rem 0 2.4rem; padding-left: 1rem; border-left: 4px solid var(--accent); }
@media (max-width: 820px) { .lstat-grid { grid-template-columns: 1fr; } .lstat.wide { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ldots { grid-template-columns: repeat(10, 14px); gap: 5px; } .ldots i { width: 14px; height: 14px; } }

.lcalc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: 1.8rem; border-radius: 28px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 85%, transparent), color-mix(in srgb, var(--surface) 80%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: var(--sh-2); }
.lcalc h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.lcalc label { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; margin: 1rem 0 0; font-weight: 600; }
.lcalc output { font: 750 1rem var(--display); color: var(--accent-text); }
.lcalc input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; box-shadow: none; }
.lcalc-out { display: grid; align-content: center; gap: 1rem; }
.lbar { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .8rem; align-items: center; font-weight: 600; }
.lbar > div { height: 18px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.lbar i { display: block; height: 100%; border-radius: inherit; background: #8E9BB3; transition: width .3s; }
.lbar.acc i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.lbar b { font: 750 1rem var(--display); min-width: 6.5rem; text-align: right; }
.lsaved { font-size: 1.1rem; margin: .4rem 0 0; } .lsaved strong { font: 800 1.6rem var(--display); color: var(--accent-text); }
@media (max-width: 820px) { .lcalc { grid-template-columns: 1fr; } .lbar { grid-template-columns: 5.5rem 1fr auto; } }

.lgenuine h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.025em; }
.lprices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.lprice { display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r-l); padding: 1.6rem; box-shadow: var(--sh-1); }
.lprice.hot { border: 2px solid var(--accent); box-shadow: var(--sh-glow); }
.lptag { align-self: flex-start; font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); }
.lprice h3 { font-size: 1.3rem; margin: .8rem 0 .2rem; }
.lpamount { font: 800 2.6rem/1.1 var(--display); letter-spacing: -.02em; margin: .2rem 0 1rem; }
.lpamount.small { font-size: 1.25rem; color: var(--ink-2); }
.lprice .ticks { flex: 1; margin-bottom: 1.2rem; }
@media (max-width: 880px) { .lprices { grid-template-columns: 1fr; } }
.lfinal { margin-bottom: 3rem !important; }
.lfoot { max-width: var(--lw); margin: 0 auto; padding: 2rem 1rem 3rem; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.lfoot .brand { padding: 0 0 .4rem; font-size: 1.05rem; }
.lfoot p { margin: 0; color: var(--muted); font-size: .9rem; }
.landing { overflow-x: clip; }
.lhero h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.5rem); }
@media (min-width: 981px) { .lhero { grid-template-columns: minmax(0, .88fr) minmax(0, 1.22fr); gap: 3.5rem; } .lhero-art .lbrowser { width: 112%; } .lphone { right: -10%; width: 28%; } }
.lpill { max-width: 100%; }

/* Meny: Mer-knapp på mobilen, profilkort */
.mob-only { display: none; }
.more-sheet[hidden] { display: none; }
@media (min-width: 861px) { .more-sheet { display: none !important; } }
@media (max-width: 860px) {
  .rail li.mob-more { display: none; }
  .mob-only { display: list-item; }
  .rail li button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; border: 0; background: none; font: 600 .68rem var(--font); color: var(--ink-2); padding: .5rem .2rem; border-radius: 13px; cursor: pointer; }
  .rail li button svg { color: var(--muted); }
  .rail li button[aria-current="page"], .rail li button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
  .more-sheet { position: absolute; right: 6px; bottom: calc(100% + 10px); min-width: 230px; padding: .5rem; border-radius: 20px; background: color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: var(--sh-2); }
  .more-sheet ul { display: grid !important; grid-auto-flow: row !important; gap: 2px; }
  .more-sheet li a { flex-direction: row !important; font-size: .95rem !important; padding: .7rem .9rem !important; text-align: left !important; gap: .7rem !important; }
}
.profile-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r-l); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; box-shadow: var(--sh-1); }
.profile-card h2 { margin-bottom: .2rem; }
.profile-card .narrowform { max-width: none; }

/* =====================================================================
   TEMA: marinblått och orange. Mörk meny och mörka partier blandas med ljusa ytor.
   (Ligger sist så att det styr över tidigare tokens.)
   ===================================================================== */
:root {
  --navy: #2B3F5A; --navy-2: #3A5274; --navy-3: #4E6A8F; --on-navy: #F4F7FC; --on-navy-2: #D3DCE8;
  --bg: #F3F5FA; --surface: #FFFFFF; --sunk: #ECF0F6; --field: #F6F8FC;
  --ink: #0E1A2E; --ink-2: #33415A; --muted: #566275; --line: #DFE5EE; --line-2: #CCD5E2;
  --accent: #E0560B; --accent-2: #FF8A3D; --accent-ink: #FFFFFF; --accent-soft: #FFF0E5; --accent-text: #B4490D;
  --glow: #FFC48A; --lime: #FFD9B0;
  --ok: #15803D; --ok-soft: #E4F4EA; --warn: #B45309; --warn-soft: #FEF3E2; --danger: #B42318; --info: #1D4E89; --info-soft: #E7EEF8; --focus: #E0560B;
  --sh-1: 0 1px 2px rgba(36, 52, 74, .05), 0 4px 18px -10px rgba(36, 52, 74, .12);
  --sh-2: 0 1px 2px rgba(36, 52, 74, .05), 0 16px 40px -18px rgba(36, 52, 74, .28);
  --sh-glow: 0 14px 40px -14px rgba(226, 88, 12, .42);
  --page-bg:
    radial-gradient(1100px 620px at 95% -10%, rgba(78, 106, 143, .10), transparent 62%),
    radial-gradient(900px 560px at -10% 20%, rgba(255, 138, 61, .10), transparent 62%),
    radial-gradient(900px 700px at 60% 115%, rgba(120, 160, 230, .14), transparent 62%),
    linear-gradient(180deg, #F6F8FC 0%, #EEF2F8 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08111F; --surface: #0F1C30; --sunk: #142440; --field: #12213A; --ink: #EEF3FB; --ink-2: #C3CEE0; --muted: #8C9AB3;
    --line: #1F3050; --line-2: #2A3E62; --accent: #FF8A3D; --accent-2: #FFA866; --accent-ink: #1E0D02; --accent-soft: #2B1B10; --accent-text: #FFAE73; --glow: #7A3A12; --lime: #4A3420;
    --ok: #4ADE80; --ok-soft: #10261B; --warn: #F5A55C; --warn-soft: #2A1E12; --info: #8BB8EA; --info-soft: #12223A; --focus: #FF8A3D;
    --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(255, 138, 61, .10), transparent 62%), linear-gradient(180deg, #0A1426, #08101E);
  }
}
:root[data-theme="dark"] {
  --bg: #08111F; --surface: #0F1C30; --sunk: #142440; --field: #12213A; --ink: #EEF3FB; --ink-2: #C3CEE0; --muted: #8C9AB3;
  --line: #1F3050; --line-2: #2A3E62; --accent: #FF8A3D; --accent-2: #FFA866; --accent-ink: #1E0D02; --accent-soft: #2B1B10; --accent-text: #FFAE73;
  --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), linear-gradient(180deg, #0A1426, #08101E);
}

/* Mörk sidomeny med vit text och orange markering */
.rail, :root[data-theme="dark"] .rail { background: linear-gradient(170deg, var(--navy-2), var(--navy) 60%); border-color: rgba(255, 255, 255, .06); box-shadow: 0 20px 50px -24px rgba(30, 44, 62, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail { background: linear-gradient(170deg, var(--navy-2), #070F1D 60%); border-color: rgba(255, 255, 255, .06); } }
.rail .brand, .rail .brand:hover { color: var(--on-navy); }
.rail .logo { color: var(--on-navy); }
.rail li a { color: var(--on-navy-2); }
.rail li a svg { color: #AEBDD2; }
.rail li a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rail li a:hover svg { color: #fff; }
.rail li a[aria-current="page"], :root[data-theme="dark"] .rail li a[aria-current="page"] { background: linear-gradient(135deg, rgba(255, 138, 61, .22), rgba(224, 86, 11, .12)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail li a[aria-current="page"] { background: linear-gradient(135deg, rgba(255, 138, 61, .22), rgba(224, 86, 11, .12)); } }
.rail li a[aria-current="page"] svg { color: var(--accent-2); }
.rail-foot { background: rgba(255, 255, 255, .06); }
.rail-foot .credits { color: var(--on-navy-2); }
.brand .logo { filter: drop-shadow(0 4px 10px rgba(226, 88, 12, .25)); }
@media (max-width: 860px) {
  .rail li button { color: var(--on-navy-2); } .rail li button svg { color: #AEBDD2; }
  .rail li button[aria-current="page"], .rail li button[aria-expanded="true"] { background: rgba(255, 138, 61, .2); color: #fff; }
  .more-sheet { background: rgba(43, 63, 90, .97); border-color: rgba(255, 255, 255, .08); }
  .more-sheet li a { color: var(--on-navy-2) !important; }
}

/* Mörka partier i den ljusa appen */
.dash-head { position: relative; overflow: hidden; color: var(--on-navy); padding: 1.8rem 2rem 1.9rem; margin-bottom: 1.4rem; border-radius: 28px;
  background: radial-gradient(70% 140% at 100% 0%, rgba(255, 138, 61, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(78, 106, 143, .9), transparent 70%), linear-gradient(140deg, var(--navy-2), var(--navy)); box-shadow: 0 24px 60px -30px rgba(30, 44, 62, .7); }
.dash-head h1 { color: #fff; margin-bottom: .4rem; }
.dash-head .lead { color: var(--on-navy-2); margin: 0; }
.dash-head .lead a, .dash-head .link { color: var(--accent-2); }
.coach-teaser { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 138, 61, .55), transparent 55%), linear-gradient(150deg, var(--navy-3), var(--navy)); box-shadow: 0 18px 44px -20px rgba(30, 44, 62, .55); }
.how-cta { background: radial-gradient(80% 120% at 50% 0%, rgba(255, 138, 61, .55), transparent 60%), linear-gradient(160deg, var(--navy-3), var(--navy) 70%); box-shadow: 0 24px 60px -30px rgba(30, 44, 62, .7); }
.how-cta .btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-color: transparent; }
.due-n { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff; }

/* Inloggning: mörk vänsterdel, ljust formulär */
.auth-side { color: var(--on-navy); background: radial-gradient(60% 70% at 85% 15%, rgba(255, 138, 61, .30), transparent 65%), linear-gradient(150deg, var(--navy-2), var(--navy)); }
.auth-side::before { display: none; }
.auth-side h1, .auth-side .brand, .auth-side .brand:hover { color: #fff; }
.auth-side .logo { color: #fff; }
.auth-sub, .auth-steps li { color: var(--on-navy-2); }
.auth-steps li::before { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--accent-2); box-shadow: none; }
.auth-side .how-link { color: var(--accent-2); }
@media (max-width: 860px) { .auth-side { padding-bottom: 1.6rem; } }

/* Knappar */
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.btn.primary, .btn.primary:hover { color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #1E0D02; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #1E0D02; } }
a { color: var(--info); }
a:hover { color: var(--accent-text); }

/* =====================================================================
   RÖRELSE: "Så funkar det" i tre steg, snabbval med animerade scener,
   hamrande städ medan Jobbsmed arbetar. Allt stängs av vid "minska rörelse" (rad 82).
   ===================================================================== */

/* Tona in vid scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Så funkar det (mörk sektion) ---------- */
.steps3 { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--on-navy); border-radius: 32px; padding: clamp(2.4rem, 2rem + 2vw, 4rem) clamp(1rem, .5rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.6rem);
  background: radial-gradient(70% 60% at 85% 0%, rgba(224, 86, 11, .18), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(78, 106, 143, .9), transparent 70%), linear-gradient(170deg, #31476A, #2B3F5A 70%);
  box-shadow: 0 30px 70px -40px rgba(30, 44, 62, .7); }
.s3-arc { position: absolute; z-index: -1; width: 520px; height: 520px; left: -300px; top: -260px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 0 0 90px rgba(255, 255, 255, .015); animation: s3spin 40s linear infinite; }
.s3-arc::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); right: 52px; bottom: 74px; }
@keyframes s3spin { to { transform: rotate(360deg); } }
.s3-pill { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.2rem; padding: .35rem .95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.s3-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: s3pulse 2s ease-in-out infinite; }
@keyframes s3pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 138, 61, 0); opacity: .6; } 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .5); } }
.steps3 .s3-h { font: 800 clamp(2rem, 1.3rem + 3vw, 3.6rem)/1.06 var(--display); letter-spacing: -.035em; color: #fff; max-width: 21ch; margin: 0 auto .9rem; text-wrap: balance; }
.steps3 .s3-h .hl { background: linear-gradient(100deg, #FF7A2E, #FFA45C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3-sub { color: var(--on-navy-2); font-size: clamp(1rem, .95rem + .3vw, 1.18rem); max-width: 46ch; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem); }
.s3-frame { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); text-align: left; }
.s3-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .06); transition: border-color .25s, background .25s, opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.s3-card:hover { border-color: rgba(255, 138, 61, .35); background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); }
.s3-num { font: 800 clamp(3rem, 2.2rem + 2.6vw, 4.6rem)/1 var(--display); letter-spacing: -.05em; background: linear-gradient(160deg, #FF8A3D, #E0560B); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1.4rem; }
.s3-card h3, .s3-card .s3-ct { color: #fff; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.02em; margin: 0 0 .9rem; }
.s3-card p { color: var(--on-navy-2); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.6rem; }
.s3-chip { margin-top: auto; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(30, 44, 62, .35); }
.s3-chip b { display: block; color: #fff; font-size: .98rem; }
.s3-chip small { display: block; color: #AEBDD2; font-size: .85rem; margin-top: .1rem; }
.s3-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.s3-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s3-ic.ic1, .s3-ic.ic3 { background: #FFF0E5; color: var(--accent); }
.s3-ic.ic2 { background: linear-gradient(150deg, #FF8A3D, #E0560B); color: #fff; }
.s3-card.in .s3-ic.ic1 svg { animation: s3up 2.6s ease-in-out infinite 1s; }
.s3-card.in .s3-ic.ic2 svg circle:last-child { animation: s3ping 2.4s ease-out infinite 1.2s; transform-origin: 12px 12px; }
.s3-card.in .s3-ic.ic3 svg path:last-child { stroke-dasharray: 30; animation: s3tick 3s ease-in-out infinite 1.4s; }
@keyframes s3up { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }
@keyframes s3ping { 0% { transform: scale(1); } 40% { transform: scale(2.2); opacity: .2; } 60%, 100% { transform: scale(1); opacity: 1; } }
@keyframes s3tick { 0% { stroke-dashoffset: 30; } 40%, 100% { stroke-dashoffset: 0; } }
.s3-arrow { position: absolute; z-index: 2; top: 50%; right: -34px; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center; background: #30455F; border: 1px solid rgba(255, 255, 255, .1); color: var(--accent-2); box-shadow: 0 0 0 6px #2B3F5A; }
.s3-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: s3nudge 1.8s ease-in-out infinite; }
@keyframes s3nudge { 50% { transform: translateX(4px); } }
.s3-cta { justify-content: center; margin-top: 2rem; }
.steps3 .btn.ghost-light { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
.steps3 .btn.ghost-light:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 900px) {
  .s3-frame { grid-template-columns: 1fr; gap: 26px; }
  .s3-arrow { top: auto; bottom: -41px; right: 50%; margin: 0 -28px 0 0; transform: rotate(90deg); }
}
.lmain > .steps3 { margin-bottom: 6.5rem; }
.how-page .steps3 { margin: 0 0 4rem; }
.pub-main .steps3 { margin: 1rem 0 4rem; }

/* ---------- Snabbval på översikten ---------- */
.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin: 0 0 2rem; }
.qtile { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem .9rem; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.qtile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.qtile:first-child { background: linear-gradient(160deg, var(--navy-2), var(--navy)); border-color: transparent; color: var(--on-navy); }
.qtile:first-child span { color: var(--on-navy-2); }
.qtile strong { font-size: .95rem; line-height: 1.2; }
.qtile span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.anim-scene { width: 100%; height: auto; max-height: 76px; margin-bottom: .35rem; border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.qtile:first-child .anim-scene { background: rgba(255, 255, 255, .06); }
@media (max-width: 1100px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .qtile span { display: none; } }

/* Scenernas delar */
.anim-scene * { vector-effect: non-scaling-stroke; }
.anim-scene .s-card { fill: var(--surface); stroke: color-mix(in srgb, var(--navy-3) 30%, transparent); stroke-width: 1.5; }
.anim-scene .s-card.back { opacity: .6; }
.anim-scene .s-draw { stroke: var(--navy-3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: sDraw 4s ease-in-out infinite; }
.anim-scene .d2 { animation-delay: .35s; } .anim-scene .d3 { animation-delay: .7s; } .anim-scene .d4 { animation-delay: 1.05s; }
@keyframes sDraw { 0% { stroke-dashoffset: 30; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; opacity: 0; } }
.anim-scene .s-pen { animation: sPen 4s ease-in-out infinite; }
.anim-scene .s-pen-body { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.anim-scene .s-pen-tip { fill: var(--navy); stroke: var(--navy); stroke-width: 1; }
@keyframes sPen { 0%, 100% { transform: translate(-30px, -36px); } 12% { transform: translate(-2px, -36px); } 20% { transform: translate(-30px, -26px); } 32% { transform: translate(-6px, -26px); } 40% { transform: translate(-30px, -16px); } 52% { transform: translate(-2px, -16px); } 60% { transform: translate(-30px, -6px); } 72% { transform: translate(-14px, -6px); } 85% { transform: translate(0, 0); } }
.anim-scene .s-track { stroke: color-mix(in srgb, var(--navy-3) 25%, transparent); stroke-width: 4; stroke-linecap: round; }
.anim-scene .s-dot { fill: var(--surface); stroke: color-mix(in srgb, var(--navy-3) 35%, transparent); stroke-width: 2; animation: sDot 4.8s ease-in-out infinite; }
.anim-scene .dot1 { animation-delay: .8s; } .anim-scene .dot2 { animation-delay: 1.6s; } .anim-scene .dot3 { animation-delay: 2.4s; }
@keyframes sDot { 0%, 10% { fill: var(--surface); } 20%, 85% { fill: var(--accent); stroke: var(--accent); } 100% { fill: var(--surface); } }
.anim-scene .s-flag { fill: none; stroke: var(--navy-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform-origin: 104px 32px; animation: sFlag 4.8s ease-in-out infinite; }
@keyframes sFlag { 0%, 50% { transform: scaleY(0); } 60%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.anim-scene .s-band { fill: var(--navy-3); }
.anim-scene .s-photo { fill: var(--accent-2); stroke: var(--surface); stroke-width: 3; }
.anim-scene .s-line { fill: color-mix(in srgb, var(--navy-3) 30%, transparent); transform-box: fill-box; animation: sShuffle 4.5s ease-in-out infinite; }
.anim-scene .l1 { fill: var(--accent); }
@keyframes sShuffle { 0%, 25% { transform: translateY(0); } 35%, 60% { transform: translateY(8px); } 70%, 100% { transform: translateY(0); } }
.anim-scene .l2 { animation-name: sShuffle2; } @keyframes sShuffle2 { 0%, 25% { transform: translateY(0); } 35%, 60% { transform: translateY(-8px); } 70%, 100% { transform: translateY(0); } }
.anim-scene .l3 { animation: none; }
.anim-scene .s-front { animation: sFlip 5s ease-in-out infinite; transform-origin: 52px 62px; }
@keyframes sFlip { 0%, 40% { transform: none; } 50%, 90% { transform: translate(6px, 2px) rotate(4deg); } 100% { transform: none; } }
.anim-scene .s-acc { fill: var(--accent); } .anim-scene .s-ln { fill: color-mix(in srgb, var(--navy-3) 25%, transparent); }
.anim-scene .s-badge rect { fill: var(--navy); } .anim-scene .s-badge text { fill: #fff; font: 800 8px var(--display); letter-spacing: .04em; }
.anim-scene .s-badge { animation: sPop 5s ease-in-out infinite; transform-origin: 83px 58px; }
@keyframes sPop { 0%, 45% { transform: scale(0); } 55% { transform: scale(1.15); } 60%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.anim-scene .s-bubble { fill: var(--surface); stroke: color-mix(in srgb, var(--navy-3) 30%, transparent); stroke-width: 1.5; }
.anim-scene .s-type { fill: var(--navy-3); animation: sType 1.4s ease-in-out infinite; }
.anim-scene .t2 { animation-delay: .2s; } .anim-scene .t3 { animation-delay: .4s; }
@keyframes sType { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.anim-scene .s-star { fill: var(--accent-2); transform-origin: 98px 18px; animation: sTwinkle 2.6s ease-in-out infinite; }
@keyframes sTwinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.anim-scene .s-box { fill: var(--surface); stroke: color-mix(in srgb, var(--navy-3) 35%, transparent); stroke-width: 1.5; }
.anim-scene .s-check { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; animation: sCheck 4.5s ease-in-out infinite; }
.anim-scene .c1 { animation-delay: .6s; } .anim-scene .c2 { animation-delay: 1.2s; }
@keyframes sCheck { 0%, 10% { stroke-dashoffset: 14; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
/* Scenerna står still tills man pekar på kortet, utom det första – lugnare översikt */
.qtile:not(:first-child) .anim-scene * { animation-play-state: paused; }
.qtile:hover .anim-scene *, .qtile:focus-visible .anim-scene * { animation-play-state: running; }
@media (hover: none) { .qtile .anim-scene * { animation-play-state: running; } }

/* ---------- Städet som hamrar ---------- */
.gen.working { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-items: center; }
.gen.working > :not(.gen-anim) { grid-column: 2; }
.gen-anim { grid-row: 1 / span 4; width: 120px; padding: .6rem; border-radius: 20px; background: linear-gradient(160deg, var(--navy-2), var(--navy)); }
.anim-anvil { display: block; width: 100%; height: auto; overflow: visible; }
.aa-anvil { fill: #F4F7FC; }
.aa-plate { fill: var(--accent-2); animation: aaGlow .9s ease-in-out infinite; }
.aa-hammer { fill: #AEBDD2; transform-origin: 104px 28px; animation: aaHit .9s cubic-bezier(.5, 0, .3, 1) infinite; }
.aa-hammer rect:first-child { fill: #C9D4E6; }
.aa-sparks path { stroke: #FFB067; stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: aaSpark .9s ease-out infinite; }
.aa-sparks path:nth-child(2) { animation-delay: .05s; } .aa-sparks path:nth-child(3) { animation-delay: .1s; }
@keyframes aaHit { 0%, 40% { transform: rotate(40deg); } 58% { transform: rotate(-3deg); } 66% { transform: rotate(0deg); } 100% { transform: rotate(40deg); } }
@keyframes aaSpark { 0%, 60% { opacity: 0; transform: none; } 66% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -6px); } }
@keyframes aaGlow { 0%, 55%, 100% { fill: var(--accent); } 64% { fill: #FFC48A; } }
@media (max-width: 560px) { .gen.working { grid-template-columns: 1fr; } .gen.working > :not(.gen-anim) { grid-column: 1; } .gen-anim { grid-row: auto; width: 96px; margin-bottom: .8rem; } }

/* ---------- Menyikoner rör sig lite vid hovring ---------- */
.rail li a svg, .mobile-nav a svg { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), color .15s; }
.rail li a:hover svg { transform: translateX(2px) scale(1.12); }
.rail li a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(255, 138, 61, .55)); }

/* ---------- Landning: mörk statistikpanel blandas med ljusa ytor ---------- */
.lstats { position: relative; isolation: isolate; color: var(--on-navy); border-radius: 32px; padding: clamp(2.4rem, 2rem + 2vw, 4rem) clamp(1rem, .5rem + 2vw, 2.5rem);
  background: radial-gradient(60% 60% at 100% 100%, rgba(224, 86, 11, .16), transparent 60%), linear-gradient(170deg, #31476A, #2B3F5A 70%); }
.lstats .lbig, .lstats h2 { color: #fff; }
.lstats .lsub, .lstats .eyebrow { color: var(--on-navy-2); }
.lstats .eyebrow { color: var(--accent-2); }
.lstats .lstat { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.lstats .lstat p { color: var(--on-navy-2); }
.lstats .lstat .lnum { color: #fff !important; }
.lstats .lsrc { color: #AEBDD2 !important; }
.lstats .lring .lr-bg { stroke: rgba(255, 255, 255, .1); }
.lstats .lring text { fill: #fff; }
.lstats .ldots i { background: rgba(255, 255, 255, .12); }
.lstats .ldots i.on { background: var(--accent-2); }
.lstats a { color: var(--accent-2); }
@media (max-width: 700px) { .s3-arc::after { display: none; } .steps3 { border-radius: 26px; } }
/* Räknaren blir en ljus yta i den mörka panelen */
.lstats .lcalc { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.lstats .lcalc p, .lstats .lcalc label { color: var(--ink-2); }
.lstats .lcalc h3 { color: var(--ink); }

/* Mobilens toppfält: loggan leder till landningssidan */
.mtop { display: none; }
@media (max-width: 860px) {
  .mtop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 30; padding: .7rem 1rem; background: linear-gradient(170deg, var(--navy-2), var(--navy)); color: var(--on-navy); box-shadow: 0 10px 24px -18px rgba(30, 44, 62, .7); }
  .mtop .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-navy); text-decoration: none; font: 800 1.12rem var(--display); letter-spacing: -.02em; }
  .mtop .logo { color: var(--on-navy); }
  .mtop .credits { font-size: .78rem; font-weight: 600; color: var(--on-navy-2); background: rgba(255, 255, 255, .07); padding: .25rem .65rem; border-radius: 999px; }
}
/* Mobil: Funktioner syns kvar i landningens menyrad */
@media (max-width: 980px) {
  .lnav { flex-wrap: wrap; row-gap: .4rem; }
  .lnav-links { display: flex; order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .lnav-links button, .lnav-links a { white-space: nowrap; font-size: .88rem; padding: .35rem .6rem; }
}
@media (max-width: 560px) { .lnav .lang-pick { display: none; } }

/* =====================================================================
   NAVIGERING: grupperad meny, Ny ansökan som knapp, hjälp och konto längst ner
   ===================================================================== */
.rail { overflow-y: auto; scrollbar-width: none; }
.rail .brand { padding-bottom: 1.1rem; }
.rail-new { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 .2rem 1rem; padding: .7rem .9rem; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .96rem; color: #fff;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 24px -12px rgba(224, 86, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .15s; }
.rail-new:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(224, 86, 11, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.rail-new[aria-current="page"] { box-shadow: 0 0 0 2px rgba(255, 176, 103, .6), 0 10px 24px -12px rgba(224, 86, 11, .8); }
.rail-new svg { color: #fff; }
.rail ul.nav-main { gap: 2px; }
.nav-g { margin: .95rem 0 .25rem; padding: 0 .8rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9DB0C9; }
.rail li.mob-new { display: none; }
.rail ul.nav-foot { margin-top: auto; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .08); gap: 2px; }
.nav-foot li a { font-size: .9rem !important; padding: .5rem .8rem !important; }
.rail-foot { margin-top: .6rem; }
@media (max-width: 860px) {
  .rail-new, .nav-g, .rail ul.nav-foot { display: none !important; }
  .rail li.mob-new { display: list-item; }
  .rail li.mob-new a { color: #fff !important; }
  .rail li.mob-new a svg { width: 40px; height: 40px; padding: 9px; margin: -12px 0 -2px; border-radius: 50%; color: #fff !important; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 18px -8px rgba(224, 86, 11, .9); }
  .rail li.mob-new a .ns { display: none; }
  .rail li.mob-new a[aria-current="page"] { background: none !important; box-shadow: none !important; }
}

/* =====================================================================
   ANSÖKAN SOM ARBETSYTA: fem steg, status och nästa steg
   ===================================================================== */
.ws .app-head { margin-bottom: 1.2rem; }
.ws .crumb a { text-decoration: none; font-weight: 600; }
.ws-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.ws-title h1 { margin-bottom: .3rem; }
.ws-title .app-meta { margin: 0; }
.ws-status { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ws-status label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ws-status select { width: auto; min-width: 11rem; font-weight: 650; border-radius: 999px; padding: .45rem 2.2rem .45rem .95rem; }

.wsteps { margin: 0 0 1.6rem; padding: .5rem; border-radius: 22px; background: linear-gradient(160deg, var(--navy-2), var(--navy)); box-shadow: 0 18px 40px -26px rgba(30, 44, 62, .7); overflow-x: auto; scrollbar-width: none; }
.wsteps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 4px; counter-reset: s; }
.wsteps li { position: relative; }
.wsteps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -6px; width: 8px; height: 2px; background: rgba(255, 255, 255, .18); }
.wsteps button { width: 100%; height: 100%; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 0; border-radius: 16px; background: transparent; color: var(--on-navy-2); text-align: left; cursor: pointer; font: inherit; transition: background .15s, color .15s; }
.wsteps button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ws-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 .9rem var(--display); border: 1.5px solid rgba(255, 255, 255, .22); color: var(--on-navy-2); }
.ws-t { display: grid; min-width: 0; }
.ws-t strong { font-size: .95rem; color: #fff; line-height: 1.2; }
.ws-t small { font-size: .76rem; color: #AEBDD2; line-height: 1.3; margin-top: .1rem; }
.ws-done .ws-n { background: rgba(76, 195, 138, .16); border-color: rgba(76, 195, 138, .5); color: #7BE0AE; }
.ws-now .ws-n { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(255, 138, 61, .18); animation: wsPulse 2.4s ease-in-out infinite; }
.ws-now .ws-t small { color: var(--accent-2); font-weight: 650; }
@keyframes wsPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 138, 61, .06); } }
.ws-skip { opacity: .5; }
.ws-skip .ws-t strong { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.wsteps li.sel button { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45); }
.wsteps li.sel .ws-t strong { color: #fff; }

.ws-panel { min-height: 40vh; }
.ws-lead { font-size: 1.04rem; color: var(--ink-2); max-width: 62ch; margin: 0 0 1.3rem; }
.ws-docseg { margin: 0 0 1.2rem; }
.ws-docseg button { min-width: 9rem; }
.ws-h { display: flex; align-items: baseline; gap: .8rem; margin: 1.8rem 0 .8rem; }
.ws-h:first-of-type { margin-top: 0; }
.ws-mails { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ws-mails .mailcard { margin: 0; }
.ws-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; position: sticky; top: 0; z-index: 5; padding: .6rem 0; background: linear-gradient(var(--bg) 70%, transparent); }
.ws-jump .chip { cursor: pointer; font: 600 .85rem var(--font); }
.ws-jump .chip:hover { border-color: var(--accent); color: var(--accent-text); }
.ws-sec { scroll-margin-top: 4.5rem; }
.ws-fold { margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--sh-1); }
.ws-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; }
.ws-fold > summary::-webkit-details-marker { display: none; }
.ws-fold > summary::after { content: "▾"; color: var(--accent); font-size: 1.1rem; transition: transform .2s; }
.ws-fold[open] > summary::after { transform: rotate(180deg); }
.ws-fold > summary span { display: grid; }
.ws-fold > summary small { color: var(--muted); font-weight: 500; font-size: .86rem; }
.ws-fold > .fields { margin: 0 1.3rem 1.2rem; }
.ws-saved { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--r-l); background: var(--sunk); }
.ws-saved h2, .ws-saved h3 { font-size: 1rem; margin: 0 0 .5rem; }
.ws-saved ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ws-saved li { display: flex; justify-content: space-between; gap: 1rem; }
.ws-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ws-foot .btn.primary { padding-inline: 1.4rem; }
@media (max-width: 860px) {
  .wsteps { margin-inline: -1rem; border-radius: 0; padding: .4rem .6rem; }
  .wsteps ol { grid-template-columns: repeat(5, minmax(128px, 1fr)); }
  .ws-t small { display: none; }
  .ws-foot { flex-direction: column-reverse; align-items: stretch; }
  .ws-foot .btn { justify-content: center; text-align: center; }
  .ws-status select { min-width: 0; }
}

/* Mina ansökningar: snabblänkar till ansökans eget material */
.dc-docs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .9rem; }
.dc-docs a { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.dc-docs a.ok::before { content: "✓"; color: var(--ok); font-weight: 800; }
.dc-docs a:not(.ok) { color: var(--muted); border-style: dashed; }
.dc-docs a:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* =====================================================================
   ÖVERSIKT: kort och lugn
   ===================================================================== */
.dash2 .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.dash2 .dash-head .btn.primary { flex: none; }
.dash-profile { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: .9rem 1.2rem; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s; }
.dash-profile:hover { transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--ink); }
.dash-profile > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.dash-profile > span:nth-child(2) span { color: var(--muted); font-size: .9rem; }
.dp-meter { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--sunk) 0); }
.dp-meter b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 800 .78rem var(--display); color: var(--accent-text); }
.dp-go { font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.dcard2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; box-shadow: var(--sh-1); }
.dcard2 h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.dc2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.agenda li.ev-report time { color: var(--accent-text); font-weight: 700; }
.actlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.act-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id dots" "id next"; gap: .2rem 1rem; align-items: center; padding: .75rem .9rem; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--sunk); transition: background .15s; }
.act-main:hover { background: var(--accent-soft); color: var(--ink); }
.act-id { grid-area: id; display: grid; min-width: 0; }
.act-id strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-id span { color: var(--muted); font-size: .86rem; }
.act-dots { grid-area: dots; display: flex; gap: 4px; justify-self: end; }
.act-dots i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.act-dots i.d { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.act-dots i.n { background: var(--accent); }
.act-next { grid-area: next; justify-self: end; font-size: .8rem; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.dash-empty { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2rem; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.dash-empty .anim-scene { max-height: none; }
.dash-empty .anim-scene * { animation-play-state: running !important; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } .dash-empty { grid-template-columns: 1fr; } .dash-empty .de-art { max-width: 200px; } }
@media (max-width: 560px) { .dash2 .dash-head .btn.primary { width: 100%; justify-content: center; } .dp-go { display: none; } }
.dash-cols > section { margin: 0; }
/* Bild till CV i Mitt CV */
.photo-card { display: flex; align-items: center; gap: 1.3rem; margin: 0 0 1.6rem; padding: 1.2rem 1.4rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.photo-card h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.photo-card .hint { margin: 0 0 .7rem; }
.photo-card .btnrow { align-items: center; }
.pc-img { flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sunk); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .photo-card { flex-direction: column; align-items: flex-start; } }
[hidden] { display: none !important; }
.filebtn input[type="file"] { display: none !important; }
.photo-card { max-width: 880px; }
/* Mina ansökningar: annonser och spontanansökningar i egna grupper */
.apps-type { display: inline-flex; margin: 0 0 1rem; }
.apps-type a { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.apps-type a span { font-size: .78rem; opacity: .7; }
.apps-type a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.apps-group + .apps-group { margin-top: 2rem; }
.apps-gh { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0 0 .8rem; }
.apps-gh span { font: 700 .78rem var(--font); padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.apps-type a { padding: .5rem .95rem; border-radius: 9px; color: var(--muted); font-weight: 650; font-size: .92rem; }

/* =====================================================================
   MJUKARE ÖVERGÅNG MOT MARINBLÅTT: mörkare blågrå botten som tonar in i menyn
   och de mörka partierna (ljust tema)
   ===================================================================== */
:root:not([data-theme="dark"]) {
  --bg: #DFE5EE; --sunk: #E7ECF3; --field: #F4F6FA; --line: #D3DBE7; --line-2: #C2CCDB;
  --page-bg:
    radial-gradient(1200px 900px at -8% -12%, rgba(66, 90, 122, .42), transparent 58%),
    radial-gradient(900px 620px at 104% -8%, rgba(78, 106, 143, .26), transparent 60%),
    radial-gradient(760px 520px at 88% 6%, rgba(255, 138, 61, .10), transparent 62%),
    radial-gradient(1100px 760px at 40% 118%, rgba(66, 90, 122, .30), transparent 64%),
    linear-gradient(180deg, #CDD6E4 0%, #DCE3ED 38%, #E3E8F0 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08111F; --sunk: #142440; --field: #12213A; --line: #1F3050; --line-2: #2A3E62; --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(255, 138, 61, .10), transparent 62%), linear-gradient(180deg, #0A1426, #08101E); } }
.public { background: transparent; }

/* Menyn smälter in i botten i stället för att ligga som en hård platta */
.rail, :root[data-theme="dark"] .rail { border-color: transparent; box-shadow: 0 30px 80px -20px rgba(36, 52, 74, .55), 0 0 0 1px rgba(36, 52, 74, .25); }
@media (max-width: 860px) { .rail { box-shadow: 0 -10px 40px -12px rgba(36, 52, 74, .5); } .mtop { box-shadow: 0 18px 40px -16px rgba(36, 52, 74, .6); } }

/* Mörka partier får en mjuk marinblå gloria som tonar ut i bakgrunden */
.steps3, .lstats, .how-cta, .dash-head, .wsteps, .coach-teaser {
  box-shadow: 0 40px 110px -36px rgba(36, 52, 74, .75), 0 0 0 1px rgba(36, 52, 74, .18);
}
.lmain > .lstats, .lmain > .steps3, .how > .steps3 { position: relative; }
.lmain > .lstats::before, .how-page .steps3::before, .pub-main .steps3::before {
  content: ""; position: absolute; z-index: -2; inset: -90px -10vw; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(66, 90, 122, .28), transparent 70%);
}

/* Landning: menyraden och toppen tonar från marinblått ner i den ljusa ytan */
.landing .lnav { background: color-mix(in srgb, #C9D2E1 72%, transparent); border-bottom-color: rgba(36, 52, 74, .08); }
.landing::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 900px; pointer-events: none;
  background: radial-gradient(1100px 700px at 15% -20%, rgba(66, 90, 122, .38), transparent 62%), radial-gradient(900px 600px at 95% -10%, rgba(78, 106, 143, .30), transparent 60%); }
.landing { position: relative; isolation: isolate; }
.lcard, .lstat, .lgenuine article, .lprice { box-shadow: 0 1px 2px rgba(36, 52, 74, .06), 0 18px 40px -22px rgba(36, 52, 74, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing .lnav { background: color-mix(in srgb, var(--bg) 78%, transparent); } :root:not([data-theme="light"]) .landing::before { display: none; } }
:root[data-theme="dark"] .landing .lnav { background: color-mix(in srgb, var(--bg) 78%, transparent); }
:root[data-theme="dark"] .landing::before { display: none; }
/* Inloggad på landningssidan: namnet i stället för "Öppna appen" */
.user-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .3rem; border-radius: 999px; }
.ub-av { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 800 .72rem var(--display); color: #fff; background: linear-gradient(160deg, var(--navy-3), var(--navy)); }
.ub-av img { width: 100%; height: 100%; object-fit: cover; }
.ub-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ub-name { max-width: 8ch; } }
#updateBar { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: .9rem; padding: .6rem .7rem .6rem 1.1rem; border-radius: 16px; background: var(--navy); color: var(--on-navy); box-shadow: 0 20px 50px -18px rgba(30, 44, 62, .7); font-weight: 600; max-width: calc(100vw - 32px); }
@media (max-width: 860px) { #updateBar { bottom: 96px; } }
@media (max-width: 520px) { .user-btn { padding: .25rem; } .ub-name { display: none; } .lnav-actions { margin-left: auto; } }

/* Varmare beigeblå botten som smälter ihop med marinblått (ljust tema) */
:root:not([data-theme="dark"]) {
  --bg: #D9D5CE; --sunk: #ECE8E1; --field: #F8F6F2; --line: #D6CFC4; --line-2: #C6BEB1;
  --page-bg:
    radial-gradient(1300px 950px at -10% -15%, rgba(60, 82, 112, .58), transparent 60%),
    radial-gradient(1000px 720px at 108% -12%, rgba(72, 98, 132, .42), transparent 60%),
    radial-gradient(820px 560px at 82% 8%, rgba(255, 150, 90, .14), transparent 62%),
    radial-gradient(1200px 820px at 40% 122%, rgba(60, 82, 112, .46), transparent 64%),
    linear-gradient(180deg, #C3C4C6 0%, #D3CFC8 38%, #DED8CE 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08111F; --sunk: #142440; --field: #12213A; --line: #1F3050; --line-2: #2A3E62; --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(255, 138, 61, .10), transparent 62%), linear-gradient(180deg, #0A1426, #08101E); } }
.landing .lnav { background: color-mix(in srgb, #B9BDC4 70%, transparent); border-bottom-color: rgba(36, 52, 74, .1); }
.landing::before { height: 1000px; background: radial-gradient(1200px 760px at 12% -22%, rgba(60, 82, 112, .55), transparent 62%), radial-gradient(1000px 640px at 98% -14%, rgba(72, 98, 132, .40), transparent 60%), radial-gradient(700px 420px at 70% 30%, rgba(255, 150, 90, .10), transparent 65%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing .lnav { background: color-mix(in srgb, var(--bg) 78%, transparent); } }
:root[data-theme="dark"] .landing .lnav { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* Landning: illustrerad jobbsökare framför appen */
.lperson { position: absolute; z-index: 3; left: -16%; bottom: -9%; width: 38%; margin: 0; filter: drop-shadow(0 26px 40px rgba(36, 52, 74, .45)); animation: float 7s ease-in-out infinite; animation-delay: -1s; }
.lperson svg { display: block; width: 100%; height: auto; }
.lchip.c2 { left: 24%; bottom: 2%; }
.seeker .sk-eyes { transform-origin: 200px 170px; animation: skBlink 5s infinite; }
.seeker .sk-hand { transform-box: fill-box; transform-origin: center; animation: skType .5s ease-in-out infinite alternate; }
.seeker .sk-hand.r { animation-delay: -.25s; }
.seeker .sk-steam { animation: skSteam 2.6s ease-in-out infinite; opacity: 0; }
.seeker .sk-steam.s2 { animation-delay: -1.3s; }
.seeker .sk-plant { transform-box: fill-box; transform-origin: 50% 100%; animation: skSway 6s ease-in-out infinite; }
.seeker .sk-glow { animation: aaGlow 2s ease-in-out infinite; }
.seeker .sk-moon { animation: skMoon 8s ease-in-out infinite; }
@keyframes skBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes skType { to { transform: translateY(-3px); } }
@keyframes skSteam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes skSway { 50% { transform: rotate(-3deg); } }
@keyframes skMoon { 50% { opacity: .75; } }
@media (max-width: 980px) { .lperson { left: -2%; bottom: -6%; width: 34%; } }
@media (max-width: 560px) { .lperson { width: 40%; left: -3%; bottom: -10%; } }
@media (min-width: 981px) { .lperson { left: 0; bottom: -12%; width: 31%; } .lchip.c2 { left: 34%; bottom: 0; } }

/* Meny v3: Ny ansökan under ANSÖKNINGAR, Mina dokument fälls ut med ljusblå undermenyer */
.rail > .rail-new { display: none; }
.rail ul li.nav-newli { margin: .1rem 0 .45rem; }
.rail ul li a.rail-new { margin: 0; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 24px -12px rgba(224, 86, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .25); font-weight: 700; }
.rail ul li a.rail-new:hover { color: #fff; background: linear-gradient(180deg, #FF9A55, var(--accent)); }
.rail ul li a.rail-new svg { color: #fff; }
.rail ul li a.rail-new[aria-current="page"] { box-shadow: 0 0 0 2px rgba(255, 176, 103, .6), 0 10px 24px -12px rgba(224, 86, 11, .8); background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.nav-g.fold { margin: .8rem 0 .1rem; padding: 0; text-transform: none; letter-spacing: 0; }
.nav-g.fold button { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 0; border-radius: 12px; background: transparent; color: var(--on-navy-2); font: 600 .96rem var(--font); cursor: pointer; text-align: left; }
.nav-g.fold button svg { color: #AEBDD2; flex: none; }
.nav-g.fold button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-g.fold button[aria-expanded="true"] { color: #fff; }
.nav-g.fold .chev { margin-left: auto; transition: transform .2s; }
.nav-g.fold button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fold-box { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.fold-box.open { grid-template-rows: 1fr; }
.fold-box > ul { overflow: hidden; min-height: 0; list-style: none; margin: 0; padding: 0 0 0 1.25rem; display: grid; gap: 2px; }
.fold-box > ul::before { content: ""; }
.rail li.sub a { position: relative; color: #A9C2EA; font-size: .9rem; padding: .5rem .8rem .5rem .9rem; border-left: 1px solid rgba(169, 194, 234, .25); border-radius: 0 12px 12px 0; }
.rail li.sub a svg { width: 17px; height: 17px; color: #7FA0D6; }
.rail li.sub a:hover { color: #E1EBFB; background: rgba(120, 160, 230, .12); }
.rail li.sub a:hover svg { color: #C9DAF6; }
.rail li.sub a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, rgba(120, 160, 230, .28), rgba(120, 160, 230, .12)); box-shadow: inset 2px 0 0 #8FB4F0; border-left-color: transparent; }
.rail li.sub a[aria-current="page"] svg { color: #CFE0FA; }
@media (max-width: 860px) {
  .nav-g.fold { display: none !important; }
  .fold-box, .fold-box > ul { display: contents !important; }
  .rail li.nav-newli { display: none !important; }
  .rail li.sub a { border-left: 0; border-radius: 13px; padding: .5rem .2rem; font-size: .68rem; color: var(--on-navy-2); }
  .rail li.sub a svg { width: 20px; height: 20px; color: #AEBDD2; }
}

/* Mitt CV: översikt med kort i grupper */
.hub-start { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 2rem; padding: 1.2rem 1.4rem; border-radius: 22px; text-decoration: none; color: var(--on-navy); background: linear-gradient(150deg, var(--navy-3), var(--navy)); box-shadow: 0 24px 50px -28px rgba(30, 45, 66, .7); }
.hub-start > span:nth-child(2) { display: grid; flex: 1; }
.hub-start strong { color: #fff; font-size: 1.15rem; }
.hub-start span span { color: var(--on-navy-2); }
.hub-start .hub-ic { background: rgba(255, 255, 255, .12); color: #FFB067; }
.hub-group { margin: 0 0 2rem; }
.hub-group h2 { font-size: 1.2rem; margin: 0 0 .15rem; }
.hub-group > .hint { margin: 0 0 .9rem; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.hub-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "ic st"; gap: .25rem 1rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--ink); }
.hub-ic { grid-area: ic; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.hub-txt { grid-area: txt; display: grid; gap: .15rem; }
.hub-txt strong { font-size: 1.02rem; }
.hub-txt span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.hub-st { grid-area: st; justify-self: start; margin-top: .35rem; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.hub-card.done .hub-st { background: var(--ok-soft); color: var(--ok); }
.hub-card.done .hub-st::before { content: "✓ "; }
.hub-card.todo .hub-st { background: var(--accent-soft); color: var(--accent-text); }
.hub-more { margin-top: -.5rem; }
.cvsub .crumb a, .docs .crumb a { text-decoration: none; font-weight: 600; }

/* Personliga brev och CV: listor */
.docs-h { font-size: 1.1rem; margin: 1.8rem 0 .8rem; }
.docs-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.docs-apps li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.docs-apps a { display: grid; text-decoration: none; color: var(--ink); }
.docs-apps a span { color: var(--muted); font-size: .88rem; }

/* Kommunikation */
.comms .filters { margin-bottom: 1.4rem; }
.cm-app { margin: 0 0 1.8rem; }
.cm-app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .7rem; }
.cm-app-head h2 { font-size: 1.15rem; margin: 0; }
.cm-app-head p { margin: 0; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.cm-item { padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: .5rem; }
.cm-item header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cm-kind { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.k-mail .cm-kind, .k-follow .cm-kind { background: var(--info-soft); color: var(--info); }
.k-linkedin .cm-kind { background: #E3EEFA; color: #0A66C2; }
.cm-subj { margin: 0; font-weight: 600; }
.cm-text { margin: 0; white-space: pre-wrap; }
.cm-item .btnrow { margin-top: auto; align-items: center; }

/* Duvblått: menyn och mörka partier i en mjukare blågrå ton som passar den varma botten */
:root { --navy: #2B3F5A; --navy-2: #3A5274; --navy-3: #4E6A8F; --on-navy: #F7F9FC; --on-navy-2: #D3DCE8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #1B2A40; --navy-2: #263A55; --navy-3: #354E6E; } }
:root[data-theme="dark"] { --navy: #1B2A40; --navy-2: #263A55; --navy-3: #354E6E; }

/* Landning: mer inbjudande topp – ljus, varm botten med duvblå skiftning och en lugn illustration */
.landing::before { height: 1100px; background:
  radial-gradient(900px 600px at 78% 18%, rgba(243, 181, 140, .32), transparent 62%),
  radial-gradient(1100px 700px at 8% -18%, rgba(78, 106, 143, .38), transparent 62%),
  radial-gradient(900px 520px at 100% -10%, rgba(78, 106, 143, .26), transparent 60%); }
.landing .lnav { background: color-mix(in srgb, #CFCBC6 70%, transparent); }
.lhero-art::before { background: radial-gradient(50% 50% at 55% 45%, rgba(243, 160, 110, .34), transparent 70%); }
.lperson { filter: drop-shadow(0 22px 30px rgba(36, 52, 74, .22)); animation: none; }
@media (min-width: 981px) { .lperson { left: -9%; bottom: -14%; width: 36%; } .lchip.c2 { left: 30%; bottom: -2%; } }
.seeker .sk-hand { transform-box: fill-box; transform-origin: center; animation: skType .45s ease-in-out infinite alternate; }
.seeker .sk-pony { transform-box: fill-box; transform-origin: 80% 10%; animation: skSway 5s ease-in-out infinite; }
.seeker .sk-sun { animation: skMoon 7s ease-in-out infinite; }
.rail li.sub-h { margin: .55rem 0 .1rem; padding: 0 .9rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8EA4C4; border-left: 1px solid rgba(169, 194, 234, .25); }
@media (max-width: 860px) { .rail li.sub-h { display: none; } }

/* CV-sidan */
.cvp-sec { margin: 0 0 2rem; }
.cvp-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cvp-h h2 { font-size: 1.15rem; margin: 0; }
.cvp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cvp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cvp-id { display: grid; gap: .1rem; }
.cvp-id span { color: var(--muted); font-size: .88rem; }
.cvd-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.cvd-chip { font-size: .8rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; background: var(--sunk); color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); }
.cvd-chip::before { content: "📄 "; }
.cvd-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.cvp-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.cvp-track { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cvp-track .btnrow { margin-top: .4rem; }
.cvhelp { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.tip { display: flex; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.tip-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem var(--display); color: #fff; background: linear-gradient(160deg, var(--accent-2), var(--accent)); }
.tip h3 { font-size: 1rem; margin: 0 0 .25rem; }
.tip p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.cvhelp-more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--sunk); }
.cvhelp-more p { margin: 0; }
.newdoc .dp-tpl svg { width: 60px; height: 80px; display: block; margin: 0 auto .4rem; }
@media (max-width: 640px) { .cvp-list li { grid-template-columns: 1fr auto; } .cvp-list li .btn { grid-column: 1 / -1; } }
.lnav-links .btn.primary { color: #fff; padding: .45rem 1rem; }
.lnav-links .btn.primary:hover { color: #fff; background: linear-gradient(180deg, #FF9A55, var(--accent)); }
@media (max-width: 980px) { .lnav { flex-wrap: nowrap; } .lnav-links { order: 0; width: auto; margin-left: auto; } .lnav-actions { margin-left: .4rem; } }
.settings-h { margin: 2rem 0 .8rem; font-size: 1.3rem; }
.profile-card .calsub, .profile-card .inbox { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.settings-moved { padding: 1rem 1.1rem; border-radius: 16px; background: var(--sunk); }
.settings-moved p { margin: 0 0 .3rem; }

/* Underlag: framstegsrad */
.basebar { margin: 0 0 1.6rem; padding: 1rem 1.1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.bb-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.bb-head span { color: var(--muted); font-size: .9rem; }
.basebar ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.basebar a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--sunk); border: 1px solid transparent; height: 100%; }
.basebar a:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.bb-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 .82rem var(--display); background: var(--surface); color: var(--muted); border: 1.5px solid var(--line-2); }
.basebar li.done .bb-n { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.basebar li.cur a { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.basebar li.cur .bb-n { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-color: transparent; }
.bb-t { display: grid; min-width: 0; }
.bb-t b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-t small { color: var(--muted); font-size: .76rem; }
@media (max-width: 760px) { .basebar ol { grid-template-columns: 1fr 1fr; } }

/* Dina exempel */
.ex-goal { display: flex; align-items: center; gap: 1.4rem; padding: 1.3rem 1.5rem; border-radius: 22px; color: var(--on-navy); background: radial-gradient(80% 140% at 100% 0%, rgba(255, 138, 61, .3), transparent 60%), linear-gradient(150deg, var(--navy-3), var(--navy)); box-shadow: 0 24px 50px -30px rgba(36, 52, 74, .7); }
.ex-goal h2 { color: #fff; margin: 0 0 .3rem; font-size: 1.3rem; }
.ex-goal p { margin: 0; color: var(--on-navy-2); max-width: 62ch; }
.ex-ring { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); }
.ex-ring b { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 1.6rem var(--display); }
.ex-ring small { font-size: .9rem; color: var(--on-navy-2); }
.ex-slots { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.slot { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 16px; border: 1.5px dashed var(--line-2); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.slot b { display: block; font-size: .92rem; }
.slot small { color: var(--muted); font-size: .78rem; }
.slot-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem var(--display); background: var(--surface); color: var(--muted); border: 1.5px solid var(--line-2); }
.slot.next { border-color: var(--accent); background: var(--accent-soft); }
.slot.next .slot-n { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-color: transparent; }
.slot.next small { color: var(--accent-text); font-weight: 700; }
.slot.done { border-style: solid; border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--surface); }
.slot.done .slot-n { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ex-ways { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.ex-way { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ex-way.rec { border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ex-way h3 { margin: 0; font-size: 1.15rem; }
.ex-way p { margin: 0; color: var(--ink-2); }
.ex-way .btn { align-self: flex-start; margin-top: auto; }
.ex-badge { position: absolute; top: -11px; left: 1.2rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; }
.ex-star { margin: .2rem 0 .6rem; display: grid; gap: .35rem; }
.ex-star div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; font-size: .88rem; }
.ex-star dt { font-weight: 700; }
.ex-star dd { margin: 0; color: var(--muted); }
.ex-chat { margin-bottom: 2rem; padding: 1.3rem 1.4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ex-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ex-chat-head h2 { margin: 0; }
.ex-chat .btnrow { align-items: center; }
.ex-list h2 { display: flex; align-items: center; gap: .5rem; }
details.story > summary { display: flex; align-items: center; gap: .8rem; list-style: none; }
details.story > summary::-webkit-details-marker { display: none; }
.st-chips { display: inline-flex; gap: 3px; }
.st-chips i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 800 .66rem var(--display); font-style: normal; background: var(--sunk); color: var(--muted); }
.st-chips i.on { background: var(--ok-soft); color: var(--ok); }
.st-title { flex: 1; min-width: 0; font-weight: 650; }
.st-state { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
details.story.ok .st-state { background: var(--ok-soft); color: var(--ok); }
details.story label .hint { display: block; font-weight: 400; margin: .1rem 0 .3rem; }
@media (max-width: 820px) { .ex-ways { grid-template-columns: 1fr; } .ex-goal { flex-direction: column; align-items: flex-start; } .ex-star div { grid-template-columns: 1fr; gap: 0; } }
.ex-ring b { display: flex; align-items: baseline; justify-content: center; gap: 1px; }
.ex-ring b { line-height: 72px; }
/* Underlaget under CV i menyn */
.rail li.sub.deep a { margin-left: 1.1rem; padding-top: .38rem; padding-bottom: .38rem; font-size: .84rem; color: #95AED6; }
.rail li.sub.deep a svg { width: 15px; height: 15px; }
.rail li.sub.deep a[aria-current="page"] { color: #fff; }
@media (max-width: 860px) { .rail li.sub.deep a { margin-left: 0; font-size: .68rem; } }

/* Om mig: läs in gamla CV separat, sedan det nya CV:t */
.oldcv { display: flex; gap: 1.2rem; padding: 1.4rem 1.5rem; margin: 0 0 2.2rem; border-radius: 22px; border: 1.5px dashed color-mix(in srgb, var(--navy-3) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--navy-3) 10%, var(--surface)), var(--surface)); }
.oldcv-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--navy-3), var(--navy)); }
.oldcv-body { flex: 1; min-width: 0; }
.oldcv h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.oldcv p { margin: 0 0 .6rem; color: var(--ink-2); max-width: 70ch; }
.oldcv-steps { list-style: none; margin: .2rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.oldcv-steps li { font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.oldcv-steps li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.oldcv details { margin: .6rem 0; }
.aboutme { padding-top: .2rem; }
.aboutme-head { margin: 0 0 1.2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--line); }
.aboutme-head h2 { margin: 0 0 .3rem; font-size: 1.5rem; }
.aboutme-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }
@media (max-width: 640px) { .oldcv { flex-direction: column; } }

/* Månadsvy under Att göra nu */
.mcal { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mc-head strong { text-transform: capitalize; font: 750 1.02rem var(--display); }
.mc-nav { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.mc-nav:hover { border-color: var(--accent); color: var(--accent-text); }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mc-wd { text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding-bottom: .2rem; }
.mc-cell { position: relative; aspect-ratio: 1 / .9; min-height: 34px; border: 0; border-radius: 10px; background: var(--sunk); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 .82rem var(--font); color: var(--ink-2); padding: 0; }
.mc-cell.empty { background: transparent; cursor: default; }
.mc-cell.we { color: var(--muted); }
.mc-cell.afband { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--info) 35%, transparent); }
.mc-cell:hover { background: var(--accent-soft); }
.mc-cell.today .mc-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.mc-cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.mc-dots { display: flex; gap: 2px; }
.mc-dots i, .mc-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--muted); }
.k-intervju, .k-test { --k: var(--accent); } .k-prep { --k: #E8A23A; } .k-deadline { --k: var(--danger); } .k-uppfoljning { --k: var(--ok); } .k-af { --k: var(--info); } .k-akassa { --k: #7B5EA7; }
.mc-dots i[class], .mc-legend i[class] { background: var(--k, var(--muted)); }
.mc-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .7rem 0 .2rem; font-size: .75rem; color: var(--muted); }
.mc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.mc-day { margin-top: .8rem; padding: .8rem .9rem; border-radius: 14px; background: var(--sunk); }
.mc-day h3 { margin: 0 0 .4rem; font-size: .92rem; text-transform: capitalize; }
.mc-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mc-day li a { display: grid; gap: .1rem; padding: .5rem .7rem; border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: inset 3px 0 0 var(--k, var(--line)); }
.mc-day li a strong { font-size: .88rem; }
.mc-day li a span { font-size: .8rem; color: var(--muted); }
.mc-day .muted { margin: 0; font-size: .88rem; }
.mc-foot { margin: .7rem 0 0; font-size: .85rem; }
/* CV som rullgardin i menyn */
.rail li.has-kids { position: relative; }
.rail li.has-kids > a { padding-right: 2.6rem; }
.kid-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: #A9C2EA; display: grid; place-items: center; cursor: pointer; }
.kid-toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kid-toggle .chev { transition: transform .2s; }
.kid-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fold-box.kids > ul { padding-left: 0; }
@media (max-width: 860px) { .kid-toggle { display: none; } .rail li.has-kids > a { padding-right: .2rem; } }

/* =====================================================================
   ÖVERSIKT v3: personlig topp utan kantlinje, viktigast först, din månad
   ===================================================================== */
.hero3 { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 1rem 2rem; margin: 0 0 1.8rem; padding: 2rem 2.2rem; border-radius: 30px; color: var(--on-navy);
  background: radial-gradient(70% 120% at 100% 0%, rgba(243, 160, 110, .34), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(120, 150, 190, .35), transparent 70%), linear-gradient(140deg, var(--navy-3), var(--navy));
  box-shadow: 0 30px 70px -40px rgba(36, 52, 74, .8); border: 0; }
.hero3-hi { margin: 0 0 .4rem; font-weight: 700; color: #FFC9A3; letter-spacing: .01em; }
.hero3 h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 22ch; }
.hero3-stats { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero3-stats li { display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--on-navy-2); font-size: .88rem; }
.hero3-stats b { color: #fff; font: 800 1.05rem var(--display); }
.hero3-art { align-self: stretch; display: grid; place-items: center; }
.todo-art { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.todo-art .ta-check { stroke-dasharray: 20; stroke-dashoffset: 20; animation: taCheck 6s ease-in-out infinite; }
.todo-art .ta-check.c1 { animation-delay: .7s; } .todo-art .ta-check.c2 { animation-delay: 1.4s; }
@keyframes taCheck { 0%, 8% { stroke-dashoffset: 20; } 18%, 85% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 20; } }
.todo-art .ta-plane { animation: taFly 6s ease-in-out infinite; }
@keyframes taFly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } }
.todo-art .ta-board { transform-box: fill-box; transform-origin: center; animation: taBob 7s ease-in-out infinite; }
@keyframes taBob { 50% { transform: rotate(-5deg) translateY(-3px); } }
.sec3-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sec3-head h2 { margin: 0; font-size: 1.25rem; }
.next3 { margin: 0 0 2rem; }
.act3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.act3 a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "ic btn"; gap: .2rem 1rem; padding: 1.1rem 1.2rem; border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 14px 32px -22px rgba(36, 52, 74, .45); transition: transform .15s, box-shadow .15s; }
.act3 a:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 22px 40px -22px rgba(36, 52, 74, .55); color: var(--ink); }
.act3-ic { grid-area: ic; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.act3 li:first-child .act3-ic { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff; }
.act3-txt { grid-area: txt; display: grid; gap: .15rem; padding-right: 1.6rem; }
.act3-txt strong { font-size: 1.02rem; line-height: 1.3; }
.act3-txt span { color: var(--muted); font-size: .88rem; }
.act3-btn { grid-area: btn; justify-self: start; margin-top: .4rem; font-weight: 700; font-size: .88rem; color: var(--accent-text); }
.act3-n { position: absolute; top: .9rem; right: 1rem; font: 800 .8rem var(--display); color: var(--muted); opacity: .6; }
.calm3 { margin: 0; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--surface); color: var(--ink-2); }
.dash3 .dcard2 { border: 0; box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 14px 32px -22px rgba(36, 52, 74, .45); }
.dash3 .dcard2 .mcal { margin-top: .2rem; padding-top: 0; border-top: 0; }
@media (max-width: 900px) { .hero3 { grid-template-columns: 1fr; padding: 1.6rem 1.4rem; } .hero3-art { display: none; } }
.mc-cell.afband { box-shadow: none; background: color-mix(in srgb, var(--info) 9%, var(--sunk)); }
.mc-day h3 { text-transform: none; }
.mc-day h3::first-letter { text-transform: uppercase; }
.mc-legend .k-af + * { }

/* Standardsvar: kategorier efter typ av tjänst */
.cm-cats { margin: 0 0 1.8rem; padding: 1.2rem 1.3rem; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 14px 32px -22px rgba(36, 52, 74, .45); }
.cm-cats h2 { margin: 0 0 .7rem; font-size: 1.1rem; }
.cm-catlist { display: flex; flex-wrap: wrap; gap: .5rem; }
.cm-catlist a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--sunk); border: 1.5px solid transparent; }
.cm-catlist a span { font-size: .78rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--surface); color: var(--muted); }
.cm-catlist a:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cm-catlist a[aria-current="true"] { background: var(--navy); color: #fff; }
.cm-catlist a[aria-current="true"] span { background: rgba(255, 255, 255, .15); color: #fff; }
.cm-catlist a.none b { font-weight: 600; color: var(--muted); }
.cm-catlist a.none[aria-current="true"] b { color: #fff; }
.cm-newcat { display: flex; gap: .5rem; margin: .9rem 0 0; max-width: 460px; }
.cm-newcat input { flex: 1; }
.cm-sort { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.cm-sort summary { display: flex; align-items: center; gap: .6rem; }
.cm-sort ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.cm-sort li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: 12px; background: var(--sunk); }
.cm-sort select { width: auto; min-width: 12rem; }
.cm-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cm-current h2 { margin: 0; font-size: 1.35rem; }
.cm-current .filters { margin: 0; }
.cm-kindsec { margin: 0 0 1.6rem; }
.cm-kindsec h3 { font-size: 1rem; margin: 0 0 .6rem; color: var(--ink-2); }
.cm-src { margin: -.2rem 0 0; font-size: .8rem; color: var(--muted); }
/* Personliga brev: börja med annonsen */
.letter-start { margin: 0 0 2rem; padding: 1.3rem 1.4rem; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 14px 32px -22px rgba(36, 52, 74, .45); border-top: 4px solid var(--accent); }
.ls-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .6rem; }
.ls-head h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.ls-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.ls-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 .9rem var(--display); color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.letter-start .adform { margin: 0; box-shadow: none; border: 0; padding: 0; background: none; }
@media (max-width: 640px) { .cm-sort li { flex-direction: column; align-items: stretch; } .cm-sort select { min-width: 0; } }
.letter-start .adlabel, .letter-start .adhint { display: none; }
.letter-start .adform::before, .letter-start .adform::after { display: none !important; }
.letter-start textarea { margin-top: .4rem; }
/* Rullgardin under Översikt (Rapport & logg) – samma ljusblå stil som under CV */
.rail li.has-kids:not(.sub) > a { padding-right: 2.6rem; }
.rail ul.nav-main > .fold-box.kids > ul { padding-left: .9rem; }
.rail ul.nav-main > .fold-box.kids li.deep a { margin-left: .4rem; border-left: 1px solid rgba(169, 194, 234, .25); border-radius: 0 12px 12px 0; }

/* Ny ansökan: liten orange knapp under Mina ansökningar */
.rail ul li.nav-newli { margin: .2rem 0 .5rem; padding-left: .8rem; }
.rail ul li a.rail-new { display: inline-flex; width: auto; gap: .35rem; padding: .38rem .8rem .38rem .6rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(224, 86, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.rail ul li a.rail-new svg { width: 15px; height: 15px; }
.rail ul li a.rail-new:hover { transform: translateY(-1px); }

/* ============================================================
   Design v4: lugnare sidor, ikonbaserat, mindre text
   ============================================================ */
.ico { flex: none; }
.btn.has-ico, a.btn.has-ico { display: inline-flex; align-items: center; gap: .42rem; }
.btn .bi { width: 17px; height: 17px; margin-left: -.1rem; opacity: .9; }
.btn.small .bi { width: 15px; height: 15px; }
button.link.has-ico, a.link.has-ico { display: inline-flex; align-items: center; gap: .3rem; }
button.link .bi, a.link .bi { width: 15px; height: 15px; }

/* Sidhuvud med ikonruta */
.page-head.ph4 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1.6rem; }
.ph4-crumb { grid-column: 1 / -1; }
.ph4-main { display: flex; align-items: center; gap: .95rem; min-width: 0; }
.ph4-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 10px 22px -12px rgba(43, 63, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .18); position: relative; }
.ph4-ico::after { content: ""; position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px var(--bg); }
.ph4-ico .ico { width: 26px; height: 26px; }
.ph4-txt { min-width: 0; }
.ph4 h1 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); margin: 0; }
.ph4 .lead { margin: .25rem 0 0; font-size: .98rem; color: var(--muted); max-width: 56ch; }
.ph4 .kicker { margin: 0 0 .15rem; }
.ph4 .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .page-head.ph4 { grid-template-columns: 1fr; }
  .ph4 .page-actions { justify-content: flex-start; }
  .ph4-ico { width: 44px; height: 44px; border-radius: 14px; }
  .ph4-ico .ico { width: 22px; height: 22px; }
}
:root[data-theme="dark"] .ph4-ico { background: linear-gradient(145deg, #4E6A8F, #2B3F5A); }

/* Sektionsrubrik med ikon */
.sh4 { display: flex; align-items: center; gap: .6rem; font-size: 1.12rem; margin: 0 0 .8rem; }
.sh4-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--accent-text); background: var(--accent-soft); }
.sh4-ico .ico { width: 18px; height: 18px; }
.sh4 .count, .sh4 .pill { margin-left: .2rem; }
h3.sh4 { font-size: 1rem; }
h3.sh4 .sh4-ico { width: 28px; height: 28px; border-radius: 9px; }

/* Ikonknapp */
.ibtn { width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.ibtn:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.ibtn .ico { width: 18px; height: 18px; }

/* Lugnare brödtext */
.page .hint { font-size: .86rem; }

/* Mina ansökningar v4 */
.kpi4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1.4rem; }
.kpi4 > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); }
.kpi4 .k-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sunk); color: var(--navy-2); }
.kpi4 .k-ico .ico { width: 20px; height: 20px; }
.kpi4 .hot .k-ico { background: var(--accent-soft); color: var(--accent-text); }
.kpi4 dt { font-size: .78rem; color: var(--muted); font-weight: 600; margin: 0; }
.kpi4 dd { margin: 0; font: 750 1.45rem/1.1 var(--display); color: var(--ink); }
@media (max-width: 760px) { .kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.diary-tools.t4 { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.t4 .diary-search { flex: 1 1 380px; justify-content: flex-end; }
.t4 .search { position: relative; display: flex; align-items: center; }
.t4 .search .ico { position: absolute; left: .75rem; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.t4 .search input { padding-left: 2.3rem; }

.ac4 { padding: 1rem 1.15rem .35rem; }
.ac4 .dc-head { align-items: center; gap: .85rem; justify-content: flex-start; }
.ac4-av { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; text-decoration: none; font: 750 1.15rem var(--display); color: #fff;
  background: linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.ac4.st-klar .ac4-av, .ac4.st-utkast .ac4-av { background: linear-gradient(145deg, var(--accent-2), var(--accent)); }
.ac4.st-avslag .ac4-av, .ac4.st-avbojd .ac4-av { background: #A8A296; }
.ac4.st-erbjudande .ac4-av { background: linear-gradient(145deg, #3FAE6A, #1E7A45); }
.ac4 .dc-id { flex: 1; min-width: 0; }
.ac4 .dc-title { font: 700 1.08rem/1.2 var(--display); color: var(--ink); text-decoration: none; }
.ac4 .dc-title:hover { color: var(--accent-text); }
.ac4 .dc-co { margin: .1rem 0 0; font-size: .88rem; color: var(--muted); }
.ac4 .dc-meta { display: flex; align-items: center; gap: .5rem; }
.ac4-prog { display: flex; align-items: center; gap: .8rem; margin: .8rem 0 .2rem; padding-left: calc(44px + .85rem); }
.ac4-prog ol { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.ac4-prog li { width: 34px; height: 6px; border-radius: 99px; background: var(--line); }
.ac4-prog li.j-done { background: var(--navy-3); }
.ac4-prog li.j-now { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac4-prog li.j-skip { background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 7px); }
.ac4-prog > span { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.ac4 .dc-foot { margin-top: .6rem; padding: .6rem 0 .5rem; }
.ac4 .dc-next::before { display: none; }
.ac4 .dc-next .ico { width: 17px; height: 17px; }
.dc-ic { display: flex; gap: .3rem; }
.dc-ic a { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #A9A397; border: 1px dashed var(--line-2); text-decoration: none; transition: background .15s, color .15s; }
.dc-ic a .ico { width: 16px; height: 16px; }
.dc-ic a.ok { color: var(--navy-2); background: var(--sunk); border: 1px solid transparent; }
.dc-ic a:hover { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.ac4 .dc-more summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; }
.ac4 .dc-more summary::-webkit-details-marker { display: none; }
.ac4 .dc-more summary .ico { width: 16px; height: 16px; color: var(--muted); }
.ac4 .dc-more { border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .ac4-prog { padding-left: 0; } .ac4 .dc-meta .pill { display: none; } }
.dcards { display: grid; gap: .75rem; }
.ph4-ico::after { display: none; }
.t4 .diary-search { flex: 1 1 100%; justify-content: stretch; }
.t4 .diary-search .search { flex: 1 1 260px; max-width: none; }
.act3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.act3-btn .ico { width: 15px; height: 15px; vertical-align: -3px; }
.act-main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av id dots" "av id next"; }
.act-av { grid-area: av; margin-right: .1rem; width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; font: 750 .95rem var(--display); color: #fff; background: linear-gradient(145deg, var(--navy-3), var(--navy)); }

/* Ny ansökan v4 */
.modes4 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 1.2rem; max-width: 640px; }
.modes4 a { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 16px; text-decoration: none; font-weight: 650; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--line); transition: background .15s, border-color .15s, box-shadow .15s; }
.modes4 a .ico { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--sunk); color: var(--navy-2); }
.modes4 a:hover { background: var(--surface); }
.modes4 a[aria-current="page"] { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--sh-1); }
.modes4 a[aria-current="page"] .ico { background: var(--accent-soft); color: var(--accent-text); }
.adlabel { display: flex; align-items: center; gap: .55rem; }
.adlabel .ico { width: 22px; height: 22px; color: var(--accent-text); }
.qbox summary, details.bookmarklet > summary { display: inline-flex; align-items: center; gap: .45rem; }
.qbox summary .ico, details.bookmarklet > summary .ico { width: 17px; height: 17px; color: var(--muted); }
.credit-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--muted); padding: .35rem .7rem; border-radius: 99px; background: var(--sunk); }
.credit-chip .ico { width: 15px; height: 15px; }
.tip4 { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 14px; background: var(--accent-soft); color: var(--ink-2); margin: 0 0 1rem; max-width: 760px; }
.tip4 > .ico { color: var(--accent-text); }
.tip4 p { margin: 0; flex: 1 1 260px; font-size: .92rem; }
@media (max-width: 520px) { .modes4 { grid-template-columns: 1fr; } }

/* Ansökans arbetsyta v4 */
.ws-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ac4-av.big { width: 56px; height: 56px; border-radius: 17px; font-size: 1.45rem; display: grid; place-items: center; flex: none; color: #fff; font-family: var(--display); font-weight: 750; background: linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 10px 22px -12px rgba(43, 63, 90, .8); }
.ws-title h1 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); margin: 0 0 .15rem; }
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; font-size: .92rem; }
.meta-i { display: inline-flex; align-items: center; gap: .3rem; }
.meta-i .ico { width: 15px; height: 15px; }
.ws-n .ico { width: 17px; height: 17px; }
.wsteps .ws-t small { color: var(--accent-2); font-weight: 650; }
.ws-docseg button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.ws-docseg button .ico { width: 17px; height: 17px; }
.ws-panel .sh4 { margin-top: .4rem; }
.ws-panel section > .sh4:first-child { margin-top: 0; }
.ws-foot .btn .bi { margin: 0; }
.pitch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem; }
.pitch-grid .pitch { margin: 0; max-width: none; }
.pitch-head { display: flex; align-items: center; gap: .6rem; }
.pitch-head h3 { flex: 1; margin: 0; }
.pitch-head .ibtn { width: 32px; height: 32px; }
.pitch-head .ibtn .ico { width: 16px; height: 16px; }
.subjlist .ibtn { flex: none; }
.tip4.info { background: var(--info-soft); max-width: none; }
.tip4.info > .ico { color: var(--info); }
.ws .pitches, .ws .mailcard { max-width: none; }

/* Dokumentshjälpen v4 */
.tabs4 [role="tab"] .ico { width: 17px; height: 17px; }
.tabs4 [role="tab"][aria-selected="true"] .ico { color: var(--accent-text); }
.bb-n { width: 32px; height: 32px; border-radius: 10px; }
.bb-n .ico { width: 16px; height: 16px; }
.tip-n { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.tip-n .ico { width: 20px; height: 20px; }
.slot-n .ico { width: 16px; height: 16px; }
.settings-h { display: flex; align-items: center; gap: .55rem; }
.settings-h .ico { width: 24px; height: 24px; color: var(--accent-text); }
.ex-way-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--sunk); color: var(--navy-2); }
.ex-way.rec .ex-way-ic { background: var(--accent-soft); color: var(--accent-text); }
.ex-way-ic .ico { width: 22px; height: 22px; }
.oldcv-ic .ico { width: 26px; height: 26px; }
.cvp-list li { display: flex; align-items: center; gap: .8rem; }
.cvp-list .cvp-id { flex: 1; min-width: 0; }
.cvp-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.cvp-h .sh4 { margin-bottom: .6rem; }
.cvhelp-more.tip4 { max-width: none; margin-top: 1.2rem; }
.sticky-save { display: flex; justify-content: flex-end; background: none; pointer-events: none; }
.sticky-save .btn { pointer-events: auto; box-shadow: 0 12px 28px -10px rgba(224, 86, 11, .7); }
/* Så här gör du: alltid lätt markerad */
.rail .nav-foot li.nf-how a { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; }
.rail .nav-foot li.nf-how a svg { color: var(--accent-2); }
.rail .nav-foot li.nf-how a:hover { background: rgba(255, 255, 255, .14); }
.rail .nav-foot li.nf-how a[aria-current="page"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45); }
.ls-n .ico { width: 18px; height: 18px; }
.ls-base { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .86rem; color: var(--muted); margin: .8rem 0 0; }
.ls-base > .ico { width: 16px; height: 16px; color: var(--accent-text); }
.ls-base a { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 99px; background: var(--sunk); text-decoration: none; color: var(--ink-2); font-weight: 600; }
.ls-base a .ico { width: 14px; height: 14px; }
.ls-base a:hover { background: var(--accent-soft); color: var(--accent-text); }
.docs-apps li { display: flex; align-items: center; gap: .8rem; }
.docs-apps li > a { flex: 1; min-width: 0; }

/* Standardsvar v4 */
.cm-item header { display: flex; align-items: center; gap: .6rem; }
.cm-item header strong { flex: 1; }
.cm-item header .ibtn { width: 32px; height: 32px; }
.cm-item header .ibtn .ico { width: 16px; height: 16px; }
.cm-src { display: flex; align-items: center; gap: .35rem; }
.cm-src .ico { width: 14px; height: 14px; flex: none; }
.cm-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.cm-open { display: inline-flex; align-items: center; gap: .25rem; font-size: .86rem; margin-left: auto; }
.cm-open .ico { width: 15px; height: 15px; }
.cm-sort summary { display: inline-flex; align-items: center; gap: .45rem; }
.cm-sort summary .ico { width: 17px; height: 17px; color: var(--muted); }
.empty4 { text-align: center; display: grid; justify-items: center; gap: .6rem; }
.e-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.e-ico .ico { width: 30px; height: 30px; }
.dp-tpl { position: relative; } .dp-tpl input { left: 0; top: 0; width: 1px; height: 1px; }
.act-fields .copybtn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.act-fields .copybtn .ico { width: 16px; height: 16px; }

/* Så här gör du v4: kort och visuellt */
.how4-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.how4-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.how4-card figure { margin: 0; background: var(--sunk); padding: .4rem .8rem 0; }
.how4-card figure .ill { width: 100%; height: auto; max-height: 160px; display: block; }
.how4-card > div { padding: 1rem 1.1rem 1.2rem; position: relative; }
.how4-card .step-n { position: absolute; top: -18px; left: 1.1rem; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 800 .95rem var(--display); color: #fff; background: linear-gradient(160deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 14px -6px rgba(224, 86, 11, .7); }
.how4-card h3 { margin: .55rem 0 .3rem; font-size: 1.08rem; }
.how4-card p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.pr4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.pr4 > div { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.1rem; }
.pr4-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: .5rem; }
.pr4-ic .ico { width: 21px; height: 21px; }
.pr4 h3 { margin: 0 0 .2rem; font-size: 1rem; }
.pr4 p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.lgrid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; } .lcard .lhow { color: var(--ink-2); }
@media (max-width: 1080px) { .diary-side { order: 1 !important; } }

/* Textstorlek i CV och brev: skalar innehållet men behåller sidbredden */
.cvdoc.sz-s { --k: .9; }
.cvdoc.sz-l { --k: 1.1; }
.dp-size { display: flex; gap: .5rem; flex-wrap: wrap; }
.dp-size legend { width: 100%; }
.dp-sz { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); font-size: .88rem; }
.dp-sz input { position: absolute; opacity: 0; left: 0; top: 0; width: 1px; height: 1px; }
.dp-sz.on, .dp-sz:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sz-a { font-family: var(--display); font-weight: 750; }
.sz-a.sz-s { font-size: .8rem; } .sz-a.sz-normal { font-size: 1rem; } .sz-a.sz-l { font-size: 1.25rem; }

/* CV: arbetsyta med granskning bredvid, skrivskyddat, CV under CV-sidan */
.cv-work { display: grid; grid-template-columns: minmax(0, 794px) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1200px) { .cv-work { grid-template-columns: 1fr; } .cv-work .cvrev { order: -1; } }
.cvrev { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.1rem; box-shadow: var(--sh-1); display: grid; gap: .7rem; }
.cvrev .sh4 { margin: 0; }
.rev-score { display: flex; gap: .8rem; align-items: center; }
.rev-ring { --s: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--s) * 1%), var(--line) 0); }
.rev-ring b { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 800 1.05rem var(--display); }
.rev-score small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rev-score p { margin: .1rem 0 0; font-size: .92rem; }
.rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rev-item { border: 1px solid var(--line); border-left: 4px solid var(--line-2); border-radius: 14px; padding: .7rem .8rem; background: var(--field); }
.rev-item.sev-hog { border-left-color: var(--accent); }
.rev-item.sev-medel { border-left-color: #E8A33D; }
.rev-item.is-done, .rev-item.is-skip { opacity: .7; background: transparent; }
.rev-h { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.rev-h strong { font-size: .95rem; }
.rev-why { margin: .25rem 0; font-size: .86rem; color: var(--ink-2); }
.rev-where { display: flex; align-items: center; gap: .3rem; margin: 0 0 .35rem; font-size: .78rem; color: var(--muted); }
.rev-where .ico { width: 13px; height: 13px; }
.rev-new summary { font-size: .82rem; font-weight: 650; cursor: pointer; color: var(--accent-text); }
.rev-new > div { margin-top: .35rem; padding: .55rem .65rem; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line-2); font-size: .86rem; }
.rev-btns { display: flex; gap: .7rem; align-items: center; margin-top: .5rem; }
.rev-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 700; color: var(--muted); }
.rev-badge.ok { color: var(--ok); }
.rev-badge .ico { width: 13px; height: 13px; }
.tip4.small { padding: .5rem .65rem; font-size: .82rem; margin: 0; }
.locked4 { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: var(--ok-soft); color: var(--ink-2); margin: 0 0 .9rem; }
.locked4 .ico { color: var(--ok); }
.locked4 p { margin: 0; font-size: .92rem; }
.paper.locked { position: relative; }
.cvapp-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 1rem; }
.cvapp-head > div { display: grid; flex: 1; min-width: 0; }
.cvapp-head > div span { color: var(--muted); font-size: .88rem; }
.ws-cvlink { margin: -.6rem 0 1rem; font-size: .88rem; }
.lock-ic .ico { width: 17px; height: 17px; color: var(--ok); }
.cvh-review { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: 1rem 1.1rem; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--line); margin: 0 0 1.2rem; }
.cvh-review > div { flex: 1 1 240px; }
.cvh-review h2 { margin: 0; font-size: 1.12rem; }
.cvh-review form { display: flex; gap: .5rem; flex-wrap: wrap; }
.cvh-review select { width: auto; margin: 0; }
.cvh-r-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: #fff; }

/* AI-matchning */
.jsearch { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1rem; box-shadow: var(--sh-1); margin: 0 0 1.2rem; display: grid; gap: .7rem; }
.js-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.js-row label { position: relative; display: flex; align-items: center; margin: 0; }
.js-row label .ico { position: absolute; left: .8rem; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.js-row input { margin: 0; padding-left: 2.4rem; min-height: 46px; }
.js-row .btn { min-height: 46px; }
.js-filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.js-filters label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .88rem; color: var(--ink-2); }
.js-filters label .ico { width: 16px; height: 16px; color: var(--muted); }
.js-filters select { margin: 0; width: auto; min-height: 36px; padding-top: .35rem; padding-bottom: .35rem; font-size: .88rem; }
@media (max-width: 760px) { .js-row { grid-template-columns: 1fr; } }
.jempty { text-align: center; display: grid; justify-items: center; gap: .5rem; padding: 2.4rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.jempty h2 { margin: .4rem 0 0; }
.jempty p { max-width: 52ch; margin: 0; color: var(--ink-2); }
.jsources { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: .6rem 0; }
.jsources li { padding: .3rem .7rem; border-radius: 99px; background: var(--sunk); font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.jgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
@media (max-width: 1080px) { .jgrid { grid-template-columns: 1fr; } }
.jbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .7rem; }
.jbar p { margin: 0; }
.jtop { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent-text); font-weight: 700; }
.jtop .ico { width: 15px; height: 15px; }
.jbar-tools { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.jbar-tools select { margin: 0; width: auto; min-height: 36px; font-size: .88rem; }
.jmin { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-2); margin: 0; }
.jmin input { width: 110px; accent-color: var(--accent); margin: 0; }
.jprog { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: .9rem; }
.jprog .ico { animation: spin 2.4s linear infinite; }
.jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.jcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-1); }
.jcard.hi { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.jcard.lo { opacity: .85; }
.jring { --s: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--s) * 1%), var(--line) 0); }
.jring b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 800 1rem var(--display); }
.jcard.mid .jring { background: conic-gradient(#E8A33D calc(var(--s) * 1%), var(--line) 0); }
.jcard.lo .jring { background: conic-gradient(var(--line-2) calc(var(--s) * 1%), var(--line) 0); }
.jring.wait { background: var(--sunk); color: var(--accent-text); }
.jring.wait .ico { animation: spin 2.4s linear infinite; }
.jc-top { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.jc-top h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.jc-top h3 a { color: var(--ink); text-decoration: none; }
.jc-top h3 a:hover { color: var(--accent-text); }
.pill.ok { display: inline-flex; align-items: center; gap: .25rem; background: var(--ok-soft); color: var(--ok); text-decoration: none; white-space: nowrap; }
.pill.ok .ico { width: 13px; height: 13px; }
.jc-meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .3rem 0 .5rem; font-size: .84rem; color: var(--muted); }
.jc-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.jc-meta .ico { width: 14px; height: 14px; }
.jc-meta .jdl { color: var(--accent-text); font-weight: 600; }
.jc-why { margin: 0 0 .4rem; font-weight: 600; color: var(--ink); }
.jc-text { margin: 0 0 .4rem; font-size: .9rem; color: var(--ink-2); }
.jc-ai { display: grid; gap: .25rem; font-size: .86rem; margin: 0 0 .5rem; }
.jc-ai span { display: flex; gap: .35rem; align-items: baseline; }
.jc-ai .ico { width: 14px; height: 14px; flex: none; position: relative; top: 2px; }
.jc-ai .ok .ico { color: var(--accent-text); }
.jc-ai .gap { color: var(--ink-2); }
.jc-ai .gap .ico { color: #C27C1A; }
.jc-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .6rem; }
.jsrc { font-size: .78rem; color: var(--muted); font-weight: 600; }
.jc-btns { display: flex; gap: .4rem; align-items: center; }
.jc-btns .ibtn { width: 34px; height: 34px; }
.jside { display: grid; gap: .8rem; position: sticky; top: 1rem; }
.jside > section { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.05rem; }
.jside .sh4 { margin-bottom: .5rem; }
.jtips ul { margin: 0 0 .6rem; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; }
.jsugg .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.jsugg .chip { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }
.jsugg .chip .ico { width: 13px; height: 13px; }
@media (max-width: 1080px) { .jside { position: static; } }


/* Landningssida v2: lugn, ett foto, rörliga detaljer */
.l2 .lmain { overflow: hidden; }
.l2hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem); }
.l2-text h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: .98; letter-spacing: -.035em; margin: 0 0 1.2rem; animation: l2up .8s cubic-bezier(.2, .7, .2, 1) both; }
.l2-text h1 .hl { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l2-lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 30ch; margin: 0 0 1.8rem; animation: l2up .8s .12s cubic-bezier(.2, .7, .2, 1) both; }
.l2-cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; animation: l2up .8s .24s cubic-bezier(.2, .7, .2, 1) both; }
.l2-free { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .92rem; font-weight: 600; }
.l2-free svg, .l2 .l2-ic svg, .l2-fic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.l2-free svg { color: var(--ok); }
.l2-art { position: relative; aspect-ratio: 11 / 13; max-width: 480px; justify-self: center; width: 100%; animation: l2fade 1s .1s ease both; }
.l2-photo { position: absolute; inset: 0; border-radius: 36px; overflow: hidden; background: linear-gradient(160deg, #F4D9C2, #C9A98F 60%, var(--navy-3)); box-shadow: 0 40px 80px -40px rgba(43, 63, 90, .55); }
.l2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; animation: l2zoom 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.l2-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(30, 40, 60, .28)); }
.l2-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem .6rem .6rem; border-radius: 18px; font-weight: 650; font-size: .92rem; color: var(--ink);
  background: color-mix(in srgb, #fff 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -18px rgba(30, 40, 60, .45); white-space: nowrap; opacity: 0; animation: l2pop .7s cubic-bezier(.2, .9, .3, 1.3) forwards, l2float 6s ease-in-out infinite; }
.l2-chip.ch1 { top: 9%; left: -9%; animation-delay: .5s, 1.2s; }
.l2-chip.ch2 { top: 44%; right: -10%; animation-delay: .9s, 1.6s; }
.l2-chip.ch3 { bottom: 9%; left: -6%; animation-delay: 1.3s, 2s; }
.l2-chip.ch4 { top: -4%; right: 8%; animation-delay: 1.7s, 2.4s; }
.l2-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sunk); color: var(--navy-2); }
.l2-ic.ok { background: var(--ok-soft); color: var(--ok); }
.l2-ic.acc { background: var(--accent-soft); color: var(--accent-text); }
@property --l2s { syntax: '<number>'; inherits: false; initial-value: 0; }
.l2-ring { --l2s: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--l2s) * 1%), #E9E4DC 0); animation: l2ring 1.6s 1s cubic-bezier(.3, .7, .2, 1) forwards; }
.l2-ring b { width: 29px; height: 29px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 .8rem var(--display); }
@keyframes l2ring { to { --l2s: 82; } }
@keyframes l2up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes l2fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes l2pop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes l2float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes l2zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .l2 *, .l2 *::after { animation: none !important; } .l2-chip { opacity: 1; } .l2-ring { --l2s: 82; } }
@media (max-width: 900px) {
  .l2hero { grid-template-columns: 1fr; text-align: left; }
  .l2-art { max-width: 420px; margin-top: 1rem; }
  .l2-chip { font-size: .82rem; }
  .l2-chip.ch1 { left: -2%; } .l2-chip.ch2 { right: -2%; } .l2-chip.ch3 { left: 2%; }
}
:root[data-theme="dark"] .l2-chip { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: rgba(255, 255, 255, .08); }
.l2 .lworks { margin-top: 0; }
.l2-feats { max-width: 1180px; margin: clamp(2rem, 5vw, 4rem) auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.l2-feats article { background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); border-radius: 24px; padding: 1.5rem 1.4rem; }
.l2-fic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, var(--navy-3), var(--navy)); color: #fff; margin-bottom: 1rem; }
.l2-fic svg { width: 22px; height: 22px; }
.l2-feats h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.l2-feats p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .l2-feats { grid-template-columns: 1fr; } }
.l2-show { max-width: 1180px; margin: clamp(2rem, 6vw, 5rem) auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: grid; gap: 1.6rem; justify-items: center; text-align: center; }
.l2-show h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin: 0 0 .3rem; }
.l2-show p { margin: 0; color: var(--ink-2); font-size: 1.1rem; }
.l2-show .lbrowser { max-width: 1000px; width: 100%; margin: 0; }
.l2-true { max-width: 1180px; margin: clamp(2rem, 5vw, 4rem) auto; padding: 0 clamp(1rem, 4vw, 2.5rem); text-align: center; }
.l2-true h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
.l2-true ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.l2-true li { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .55rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.l2 .lfinal h2 { margin-bottom: 1.2rem; }
.l2-photo img { opacity: 0; transition: opacity .9s ease; object-position: 50% 20%; transform-origin: 50% 25%; }
.l2-photo img.in { opacity: 1; }

/* Översikt v4: peppande, tydlig prioritet, processen på en blick */
.dash4 { display: grid; gap: 1.6rem; }
.d4-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2.4rem); border-radius: 28px; color: var(--on-navy);
  background: radial-gradient(600px 300px at 90% 0%, rgba(255, 138, 61, .35), transparent 60%), linear-gradient(135deg, var(--navy-3), var(--navy)); box-shadow: 0 30px 60px -36px rgba(43, 63, 90, .8); position: relative; overflow: hidden; }
.d4-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .05); }
.d4-hero-txt { flex: 1 1 380px; position: relative; z-index: 1; }
.d4-hi { margin: 0 0 .3rem; color: var(--accent-2); font-weight: 700; }
.d4-hero h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 0 0 .6rem; max-width: 24ch; }
.d4-pep { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--on-navy-2); font-size: .92rem; }
.d4-pep .ico { width: 17px; height: 17px; color: var(--accent-2); }
.d4-goal { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); position: relative; z-index: 1; }
.d4-ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); transition: background .6s; }
.d4-ring b { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 1.5rem var(--display); }
.d4-ring small { font-size: .85rem; color: var(--on-navy-2); font-weight: 600; }
.d4-goal-t { margin: 0 0 .3rem; color: #fff; font-weight: 700; }
.d4-goal-set select { margin: 0; width: auto; min-height: 32px; padding: .2rem 1.8rem .2rem .6rem; font-size: .85rem; background-color: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.d4-goal-set select option { color: var(--ink); }
.d4-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .6rem; font-family: var(--font); font-weight: 750; }
.d4-label.small { margin-top: 1rem; }
.d4-first { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.2rem; padding: 1.2rem 1.4rem; border-radius: 24px; text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--accent-soft) 70%, var(--surface))); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 20px 44px -26px rgba(224, 86, 11, .55); transition: transform .15s, box-shadow .15s; }
.d4-first:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -26px rgba(224, 86, 11, .65); }
.d4-first-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 22px -10px rgba(224, 86, 11, .8); }
.d4-first-ic svg { width: 26px; height: 26px; }
.d4-first-txt { display: grid; gap: .2rem; }
.d4-first-txt strong { font: 750 1.2rem/1.25 var(--display); }
.d4-first-txt span { color: var(--ink-2); }
.d4-time { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.d4-time .ico { width: 14px; height: 14px; }
.d4-first .btn { pointer-events: none; }
@media (max-width: 760px) { .d4-first { grid-template-columns: auto minmax(0, 1fr); } .d4-first .d4-time { grid-column: 2; } .d4-first .btn { grid-column: 1 / -1; } }
.d4-then { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.d4-then a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.d4-then a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateX(2px); }
.d4-then a > .ico { width: 17px; height: 17px; color: var(--muted); }
.d4-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 .75rem var(--display); background: var(--sunk); color: var(--muted); }
.d4-then-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.d4-then-ic svg { width: 19px; height: 19px; }
.d4-then-txt { display: grid; min-width: 0; }
.d4-then-txt strong { font-weight: 700; }
.d4-then-txt span { font-size: .86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .d4-then a { grid-template-columns: auto minmax(0, 1fr) auto; } .d4-then .d4-n, .d4-then .d4-time { display: none; } }
.d4-calm { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.d4-calm > div { flex: 1 1 260px; }
.d4-calm p { margin: .2rem 0 0; color: var(--ink-2); }
.d4-calm .e-ico { background: var(--ok-soft); color: var(--ok); width: 52px; height: 52px; }
.d4-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.d4-sec-h .sh4 { margin-bottom: .8rem; }
.d4-cols { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
.d4-col { position: relative; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: .8rem; scroll-snap-align: start; min-height: 150px; }
.d4-col header { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; }
.d4-col-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--sunk); color: var(--navy-2); }
.d4-col-ic .ico { width: 16px; height: 16px; }
.d4-col-t { font-weight: 750; font-size: .9rem; flex: 1; }
.d4-col-n { min-width: 24px; height: 24px; padding: 0 .35rem; border-radius: 99px; display: grid; place-items: center; font: 800 .78rem var(--display); background: var(--sunk); color: var(--ink-2); }
.d4-col.st-send .d4-col-ic, .d4-col.st-meet .d4-col-ic { background: var(--accent-soft); color: var(--accent-text); }
.d4-col.st-send .d4-col-n, .d4-col.st-meet .d4-col-n { background: var(--accent); color: #fff; }
.d4-col.st-send, .d4-col.st-meet { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--surface); }
.d4-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.d4-col li a { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.d4-col li a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--sh-1); }
.d4-col .act-av { width: 30px; height: 30px; border-radius: 10px; font-size: .82rem; }
.d4-c-txt { display: grid; min-width: 0; }
.d4-c-txt strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4-c-txt span { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4-c-txt em { font-style: normal; font-size: .74rem; font-weight: 650; color: var(--ink-2); margin-top: .15rem; }
.d4-c-txt em.hot { color: var(--accent-text); }
.d4-col li.more a { justify-content: center; font-size: .82rem; color: var(--muted); }
.d4-empty { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); padding: .7rem; border: 1.5px dashed var(--line-2); border-radius: 13px; text-align: center; }
.d4-arrow { position: absolute; right: -9px; top: 22px; width: 12px; height: 12px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); background: transparent; z-index: 1; }
.d4-col.st-done { opacity: .85; }
.d4-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.d4-days li { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: .6rem; min-height: 96px; display: flex; flex-direction: column; gap: .3rem; }
.d4-days li.today { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.d4-days li.has { background: var(--surface); }
.d4-dname { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.d4-days li.today .d4-dname { color: var(--accent-text); }
.d4-dnum { font: 800 1.2rem var(--display); }
.d4-ev { display: block; font-size: .74rem; line-height: 1.3; padding: .3rem .4rem; border-radius: 8px; background: var(--sunk); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.d4-ev b { margin-right: .25rem; }
.d4-ev.k-intervju, .d4-ev.k-test { background: var(--accent-soft); color: var(--accent-text); }
.d4-ev.k-deadline { background: #FDE8E5; color: #A4321F; }
.d4-free { color: var(--line-2); }
@media (max-width: 760px) { .d4-days { grid-template-columns: repeat(7, 120px); overflow-x: auto; } }
#monthBox { margin-top: 1rem; max-width: 560px; }
.dash4 > * { min-width: 0; } .d4-first-txt { min-width: 0; } @media (max-width: 560px) { .d4-goal { width: 100%; } .d4-hero h1 { font-size: 1.45rem; } }
/* Översikt: mjukare hero med illustration */
.d4-hero { background: radial-gradient(520px 280px at 70% 10%, rgba(255, 170, 110, .38), transparent 62%), radial-gradient(420px 260px at 0% 100%, rgba(255, 220, 190, .14), transparent 60%), linear-gradient(135deg, #546F94, var(--navy)); }
.d4-art { flex: 0 0 auto; width: 190px; position: relative; z-index: 1; margin: -1rem 0; }
.d4-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 28px rgba(20, 30, 50, .35)); }
@media (max-width: 900px) { .d4-art { display: none; } }
.user-btn.only-av { padding: 3px; border-radius: 99px; min-height: 0; }
.user-btn.only-av .ub-av { width: 38px; height: 38px; font-size: .9rem; }
.user-btn.has-photo { padding: 3px .9rem 3px 3px; border-radius: 99px; }
.user-btn .ub-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.page.narrow > .photo-card { margin-bottom: 1rem; }

/* Landningssida v3: varm, modern, foto + animerad illustration */
.l3hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.l3-blobs { position: absolute; inset: -10% -20% 0; pointer-events: none; z-index: 0; filter: blur(60px); opacity: .75; }
.l3-blobs i { position: absolute; border-radius: 50%; animation: l3blob 18s ease-in-out infinite alternate; }
.l3-blobs i:nth-child(1) { width: 460px; height: 460px; right: 4%; top: 2%; background: radial-gradient(circle, rgba(255, 150, 80, .55), transparent 65%); }
.l3-blobs i:nth-child(2) { width: 380px; height: 380px; right: 30%; top: 40%; background: radial-gradient(circle, rgba(255, 205, 150, .55), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.l3-blobs i:nth-child(3) { width: 420px; height: 420px; left: -6%; top: 10%; background: radial-gradient(circle, rgba(120, 150, 200, .35), transparent 65%); animation-duration: 26s; }
@keyframes l3blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } 100% { transform: translate(-30px, 30px) scale(.95); } }
.l3hero > .l2-text, .l3hero > .l3-art { position: relative; z-index: 1; }
.l3-new { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .35rem; border-radius: 99px; background: color-mix(in srgb, #fff 70%, transparent); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 8px 20px -14px rgba(30, 40, 60, .5); text-decoration: none; color: var(--ink); font-weight: 650; font-size: .9rem; margin-bottom: 1.4rem; cursor: pointer; animation: l2up .7s both; }
.l3-new svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--accent-text); }
.l3-new-tag { padding: .2rem .6rem; border-radius: 99px; background: linear-gradient(120deg, var(--accent-2), var(--accent)); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.l3 .l2-lead { max-width: 44ch; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
.l3-bul { list-style: none; padding: 0; margin: -.4rem 0 1.8rem; display: grid; gap: .55rem; animation: l2up .8s .2s both; }
.l3-bul li { display: flex; align-items: center; gap: .65rem; font-weight: 600; color: var(--ink); }
.l3-bul li > span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-soft) 85%, #fff); color: var(--accent-text); flex: none; }
.l3-bul svg, .l3 .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.l3 .btn.big svg { margin-left: .2rem; }
.l3-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 10 / 11.4; justify-self: center; animation: l2fade 1s .1s ease both; }
.l3-ring { position: absolute; inset: -18px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: conic-gradient(from 120deg, var(--accent-2), #FFC98F, var(--navy-3), var(--accent-2)); opacity: .9; animation: l3spin 16s linear infinite, l3morph 9s ease-in-out infinite alternate; filter: blur(.3px); }
.l3-photo { position: absolute; inset: 0; border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%; overflow: hidden; background: linear-gradient(160deg, #FFD8B5, #E9A574 55%, var(--navy-3)); box-shadow: 0 40px 80px -40px rgba(80, 40, 20, .6); animation: l3morph 9s ease-in-out infinite alternate; }
.l3-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 25%; display: block; opacity: 0; transition: opacity 1s; animation: l2zoom 24s ease-in-out infinite alternate; }
.l3-photo img.in { opacity: 1; }
@keyframes l3spin { to { transform: rotate(360deg); } }
@keyframes l3morph { 0% { border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%; } 100% { border-radius: 54% 46% 56% 44% / 44% 56% 46% 54%; } }
.l3 .l2-chip.ch1 { top: 4%; left: -10%; }
.l3 .l2-chip.ch3 { bottom: 2%; right: -6%; left: auto; }
.l3 .l2-chip.ch4 { top: 30%; right: -12%; }
.l3-card { position: absolute; left: -16%; bottom: 10%; width: 210px; padding: .8rem .85rem; border-radius: 18px; background: color-mix(in srgb, #fff 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 50px -22px rgba(30, 40, 60, .5); opacity: 0; animation: l2pop .7s .8s cubic-bezier(.2, .9, .3, 1.3) forwards, l2float 7s 1.5s ease-in-out infinite; z-index: 2; }
.l3-card-h { display: flex; align-items: center; gap: 4px; margin-bottom: .6rem; }
.l3-card-h b { margin-left: .4rem; font-size: .8rem; color: var(--ink); }
.l3-dot { width: 7px; height: 7px; border-radius: 50%; background: #E6DED3; }
.l3-lines { display: grid; gap: 7px; }
.l3-lines i { display: block; height: 7px; border-radius: 6px; background: linear-gradient(90deg, var(--navy-3), #9FB1CA); width: 0; animation: l3type 1s calc(1.2s + var(--i) * .45s) ease-out forwards; }
.l3-lines i:nth-child(3n) { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
@keyframes l3type { to { width: var(--w); } }
.l3-card-f { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .78rem; font-weight: 700; color: var(--ok); opacity: 0; animation: l2pop .5s 4.2s forwards; }
.l3-ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); }
.l3-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.l3-plane { position: absolute; left: 60%; top: -70%; width: 220px; height: 120px; overflow: visible; pointer-events: none; }
.l3-trail { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 4 6; opacity: 0; animation: l3trail 1.2s 4.6s ease forwards; }
.l3-pl { fill: var(--accent); offset-path: path('M8 104 C 60 100, 90 40, 150 46 S 206 20, 214 8'); offset-rotate: auto; offset-distance: 0%; opacity: 0; animation: l3fly 2.6s 4.6s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes l3trail { to { opacity: .8; } }
@keyframes l3fly { 0% { opacity: 1; offset-distance: 0%; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
.l3-anvil { position: absolute; right: 6%; bottom: -6%; width: 96px; padding: 8px 10px; border-radius: 18px; background: color-mix(in srgb, #fff 85%, transparent); box-shadow: 0 18px 36px -18px rgba(30, 40, 60, .5); opacity: 0; animation: l2pop .6s 1.9s forwards; z-index: 2; }
.l3-anvil svg { width: 100%; height: auto; display: block; }
.l3-marquee { text-align: center; padding: 1.4rem 0 1rem; overflow: hidden; }
.l3-marquee p { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 750; margin: 0 0 .8rem; }
.l3-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.l3-track ul { list-style: none; display: flex; gap: 3rem; width: max-content; padding: 0; margin: 0; animation: l3marq 32s linear infinite; }
.l3-track li { font: 750 1.15rem var(--display); color: color-mix(in srgb, var(--ink) 45%, transparent); white-space: nowrap; }
@keyframes l3marq { to { transform: translateX(-50%); } }
.l3-devices { position: relative; max-width: 1000px; width: 100%; }
.l3-devices .lbrowser { margin: 0; }
.l3-phone { position: absolute; right: -2%; bottom: -8%; width: 22%; margin: 0; border-radius: 28px; overflow: hidden; border: 6px solid #1B2433; box-shadow: 0 30px 60px -24px rgba(20, 30, 50, .6); }
.l3-phone img { width: 100%; height: auto; display: block; }
.l3 .l2-true li { align-items: flex-start; border-radius: 18px; padding: .8rem 1rem .8rem .8rem; max-width: 270px; text-align: left; }
.l3 .l2-true li small { display: block; color: var(--ink-2); font-size: .85rem; margin-top: .15rem; }
.l3 .l2-true .l2-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.l3 .lfinal p { margin: 0 0 1.2rem; }
@media (max-width: 900px) {
  .l3hero { grid-template-columns: 1fr; }
  .l3-art { max-width: 400px; margin: 1.5rem auto 2rem; }
  .l3-card { left: -4%; width: 180px; }
  .l3 .l2-chip.ch1 { left: -3%; } .l3 .l2-chip.ch4 { right: -3%; } .l3 .l2-chip.ch3 { right: -2%; }
  .l3-phone { width: 26%; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .l3 *, .l3 *::before, .l3 *::after { animation: none !important; } .l3-card, .l3-anvil, .l3-card-f { opacity: 1; } .l3-lines i { width: var(--w); } }
.l3 .lfinal { text-align: center; } .l3 .lfinal p { margin-left: auto; margin-right: auto; }
.l3 .lmain { overflow: visible; } .l3 { overflow-x: clip; } .l3-blobs { inset: -10% -30vw 0; }
.l3-anvil { right: auto; left: 42%; bottom: -9%; }

/* Landningssida v4: vektorillustration + glimtar från översikten */
.l4-art { aspect-ratio: 480 / 520; max-width: 520px; }
.l4-ill { position: absolute; inset: 0; }
.l4-ill .sv-ill { width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 40px rgba(120, 60, 20, .18)); }
.sv-star { transform-origin: 359px 314px; animation: svPulse 2.4s ease-in-out infinite; }
.sv-steam { animation: svSteam 3s ease-in-out infinite; }
.sv-spark { animation: svSpark 2.2s ease-in-out infinite; transform-origin: 272px 196px; }
.sv-sun { animation: svSun 6s ease-in-out infinite alternate; }
@keyframes svPulse { 50% { transform: scale(1.35) rotate(45deg); } }
@keyframes svSteam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes svSpark { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes svSun { to { transform: translate(14px, -10px); } }
.l4-t { position: absolute; z-index: 2; padding: .7rem .8rem; border-radius: 18px; background: color-mix(in srgb, #fff 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 24px 48px -22px rgba(30, 40, 60, .5); color: var(--ink); opacity: 0; animation: l2pop .7s cubic-bezier(.2, .9, .3, 1.3) forwards, l2float 7s ease-in-out infinite; }
.l4-t small { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); margin-bottom: .35rem; }
.l4-t.goal { top: 6%; left: -12%; display: flex; align-items: center; gap: .7rem; animation-delay: .5s, 1.2s; }
.l4-t.goal small { margin-bottom: .1rem; }
.l4-t.goal b { font-size: .9rem; }
.l4-ring { --l2s: 0; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--l2s) * 1%), #EDE6DD 0); animation: l4ring 1.8s 1s cubic-bezier(.3, .7, .2, 1) forwards; flex: none; }
.l4-ring b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 .95rem var(--display); }
.l4-ring b small { display: inline; font-size: .62rem; letter-spacing: 0; margin: 0; color: var(--muted); }
@keyframes l4ring { to { --l2s: 75; } }
.l4-t.first { left: -16%; bottom: 14%; width: 250px; animation-delay: 1s, 1.7s; }
.l4-t.first > div { display: flex; align-items: center; gap: .6rem; }
.l4-t.first b { display: block; font-size: .88rem; line-height: 1.25; }
.l4-t.first em { font-style: normal; font-size: .74rem; color: var(--muted); }
.l4-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); }
.l4-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.l4-btn { display: block; margin-top: .55rem; text-align: center; padding: .4rem; border-radius: 10px; font-size: .8rem; font-weight: 750; color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.l4-t.pipe { right: -10%; top: 40%; width: 230px; animation-delay: 1.5s, 2.2s; }
.l4-t.pipe ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: 0; margin: 0; }
.l4-t.pipe li { display: grid; justify-items: center; gap: .15rem; padding: .35rem .1rem; border-radius: 10px; background: var(--sunk); opacity: 0; animation: l2pop .4s calc(1.9s + var(--i) * .18s) forwards; }
.l4-t.pipe li b { font: 800 .95rem var(--display); }
.l4-t.pipe li span { font-size: .56rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.1; }
.l4-t.pipe li.hot { background: var(--accent-soft); }
.l4-t.pipe li.hot b, .l4-t.pipe li.hot span { color: var(--accent-text); }
.l4-art .l2-chip.ch3 { bottom: 0; right: -4%; left: auto; animation-delay: 2s, 2.7s; }
.l4-art .l2-chip.ch4 { top: -2%; right: 4%; animation-delay: 2.4s, 3.1s; }
@media (max-width: 900px) { .l4-t.goal { left: -2%; } .l4-t.first { left: -2%; width: 210px; } .l4-t.pipe { right: -2%; width: 200px; } }
@media (prefers-reduced-motion: reduce) { .l4-t, .l4-t.pipe li { opacity: 1; } .l4-ring { --l2s: 75; } }
.l4-t.pipe { top: 22%; right: -14%; } .l4-art .l2-chip.ch4 { top: 2%; right: -6%; }
.voice-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-text); }
.voice-live { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: .9rem; }
.voice-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: wsPulse 1.2s ease-in-out infinite; }
.fb-dl { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.fb-dl .ico { width: 14px; height: 14px; }
.li-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .li-grid { grid-template-columns: 1fr; } }
.li-main, .li-side { display: grid; gap: .8rem; }
.li-box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.1rem; }
.li-box header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.li-box header .sh4 { margin: 0 0 .5rem; }
.li-head { font: 700 1.1rem/1.35 var(--display); margin: 0; }
.li-about p { margin: 0 0 .7rem; }
.li-exp { margin: 0; }
.li-tips { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .9rem; }
.li-box .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Landningssida: hela hjälten ryms på skärmen */
.l3hero { padding-top: clamp(1rem, 3vh, 2.2rem); padding-bottom: clamp(1rem, 3vh, 2.2rem); min-height: calc(100svh - 72px); align-content: center; }
.l3 .l2-text h1 { font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.1rem); margin-bottom: .9rem; }
.l3-new { margin-bottom: 1rem; }
.l3 .l2-lead { margin-bottom: 1.1rem; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); }
.l3-bul { margin: 0 0 1.3rem; gap: .4rem; }
.l3-bul li > span { width: 28px; height: 28px; }
.l4-art { max-width: min(480px, 62vh); }
@media (max-height: 760px) and (min-width: 901px) { .l3 .l2-text h1 { font-size: clamp(2.1rem, 1rem + 2.6vw, 3.4rem); } .l3-bul { display: none; } }
.d4-cal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .d4-cal { grid-template-columns: 1fr; } }
.d4-ag { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.d4-ag li { display: flex; gap: .7rem; align-items: flex-start; }
.d4-ag-d { width: 44px; flex: none; display: grid; justify-items: center; padding: .35rem 0; border-radius: 12px; background: var(--sunk); }
.d4-ag-d b { font: 800 1.05rem var(--display); line-height: 1; }
.d4-ag-d small { font-size: .66rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.d4-ag li.today .d4-ag-d { background: var(--accent-soft); color: var(--accent-text); }
.d4-ag-its { display: grid; gap: .3rem; flex: 1; min-width: 0; }
.d4-ag-its .d4-ev { font-size: .82rem; -webkit-line-clamp: 3; }
.d4-cal > .dcard2 { margin: 0; }
/* Referenser och handledare */
.ref-list { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.ref-list li { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem .8rem; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
.ref-id { flex: 1 1 220px; display: grid; min-width: 0; }
.ref-id span { font-size: .86rem; color: var(--muted); }
.ref-id blockquote { margin: .4rem 0 0; padding-left: .7rem; border-left: 3px solid var(--accent-2); font-style: italic; color: var(--ink-2); font-size: .9rem; }
.ref-st { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.ref-st .ico { width: 15px; height: 15px; }
.ref-bekraftad .ref-st { color: var(--ok); }
.ref-act { display: flex; gap: .35rem; align-items: center; }
.ref-form.inline { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.ref-form.inline .grow { flex: 1 1 220px; margin: 0; }
.pubpage .pub-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.pubcard { max-width: 560px; margin: 2rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 2rem; box-shadow: var(--sh-2); display: grid; gap: .6rem; }
.pubcard h1 { font-size: 1.7rem; margin: 0; }
.pubcard .e-ico { margin-bottom: .4rem; }
.sv-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.sv-head h1 { margin: 0; font-size: 2rem; }
.sv-head .lead { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.sv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .sv-grid { grid-template-columns: 1fr; } }
.sv-box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.1rem; overflow-x: auto; }
.sv-foot { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; }
.sv-foot .ico { width: 15px; height: 15px; }

/* Jobbcoachen v4: lättläst med flikar */
.c4-hero { display: flex; gap: 1.2rem 2rem; flex-wrap: wrap; align-items: center; padding: 1.4rem 1.6rem; border-radius: 24px; color: var(--on-navy); background: radial-gradient(500px 240px at 90% 0%, rgba(255, 150, 80, .3), transparent 60%), linear-gradient(135deg, #546F94, var(--navy)); margin-bottom: 1.2rem; }
.c4-hero-txt { flex: 1 1 380px; }
.c4-hero .kicker { color: var(--accent-2); margin: 0 0 .3rem; }
.c4-hero h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.25; }
.c4-more summary { cursor: pointer; color: var(--on-navy-2); font-size: .9rem; font-weight: 600; }
.c4-more p { color: var(--on-navy-2); margin: .5rem 0 0; font-size: .95rem; }
.c4-kpis { display: grid; grid-template-columns: repeat(4, auto); gap: .5rem; margin: 0; }
.c4-kpis div { padding: .6rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .1); text-align: center; min-width: 84px; }
.c4-kpis dt { font-size: .7rem; color: var(--on-navy-2); font-weight: 650; margin: 0; }
.c4-kpis dd { margin: 0; font: 800 1.3rem var(--display); color: #fff; }
@media (max-width: 600px) { .c4-kpis { grid-template-columns: repeat(2, 1fr); width: 100%; } }
.c4-tabs { margin-bottom: 1rem; }
.c4-prog { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: .8rem; }
.c4-prog > div { display: grid; flex: 1 1 240px; }
.c4-prog span { font-size: .85rem; color: var(--muted); }
.c4-bar { flex: 1 1 200px; height: 10px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.c4-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .4s; }
.c4-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.c4-item { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line-2); border-radius: 18px; padding: 1rem 1.1rem; display: grid; gap: .6rem; }
.c4-item.prio-hog { border-left-color: var(--accent); }
.c4-item.prio-medel { border-left-color: #E8A33D; }
.c4-item.is-done { opacity: .65; }
.c4-item-h { display: flex; gap: .8rem; align-items: flex-start; }
.c4-item-h > div { flex: 1; }
.c4-item-h h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.c4-item-h p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.c4-num { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; font: 800 .9rem var(--display); background: var(--sunk); color: var(--ink-2); }
.c4-item.is-done .c4-num { background: var(--ok-soft); color: var(--ok); }
.c4-num .ico { width: 16px; height: 16px; }
.c4-acts { list-style: none; margin: 0; padding: 0 0 0 calc(32px + .8rem); display: grid; gap: .35rem; }
.c4-acts label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; font-size: .93rem; margin: 0; }
.c4-acts input { margin-top: .2rem; accent-color: var(--accent); }
.c4-acts input:checked + span { text-decoration: line-through; color: var(--muted); }
.c4-item > .btn { justify-self: start; margin-left: calc(32px + .8rem); }
.c4-week ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-width: 720px; }
.c4-week li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.c4-when { font-weight: 800; color: var(--accent-text); font-size: .9rem; }
.c4-chat { max-width: 760px; }
.c4-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.c4-box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.1rem; }
.c4-str { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.c4-str li { display: grid; padding: .6rem .8rem; border-radius: 12px; background: var(--ok-soft); }
.c4-str span { font-size: .88rem; color: var(--ink-2); }
.c4-gaps { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.c4-gaps li { padding: .7rem .8rem; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
.c4-gap-h { display: flex; justify-content: space-between; gap: .6rem; }
.c4-gaps p { margin: .3rem 0 .5rem; font-size: .9rem; color: var(--ink-2); }
.c4-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.c4-links .chip { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; cursor: pointer; }
.c4-links .chip .ico { width: 13px; height: 13px; }
.c4-acts label { display: flex !important; justify-content: flex-start; text-align: left; }
.c4-acts input[type=checkbox] { width: 18px; height: 18px; min-height: 0; flex: none; padding: 0; }
.c4-ins > * { margin: 0 !important; }
.jobs4 .tabs4 { margin-bottom: 1rem; }
.hid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: .8rem; }
.hid-card { display: flex; gap: .9rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-1); }
.hid-card .act-av { width: 44px; height: 44px; border-radius: 14px; font-size: 1.1rem; }
.hid-body { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.hid-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.hid-top h3 { margin: 0; font-size: 1.05rem; }
.hid-titles { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .4rem; }
.hid-titles .chip { font-size: .76rem; }
.hid-card .jc-btns { flex-wrap: wrap; }
@media (max-width: 480px) { .hid-list { grid-template-columns: 1fr; } }

/* Arbetsyta: block som fälls ut, status och sökt via */
.ws4-status { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.ws4-sel { display: grid; gap: .25rem; margin: 0; }
.ws4-sel > span { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ws4-sel > span .ico { width: 13px; height: 13px; }
.ws4-sel select { margin: 0; min-width: 170px; min-height: 40px; border-radius: 12px; font-weight: 650; background-color: var(--surface); }
.ws4-sel select.st-klar, .ws4-sel select.st-sokt { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws4-sel select.st-intervju, .ws4-sel select.st-test, .ws4-sel select.st-erbjudande { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
details.acc4 { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin: 0 0 .6rem; padding: 0; max-width: none !important; box-shadow: var(--sh-1); }
details.acc4 > summary { list-style: none; cursor: pointer; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: 18px; }
details.acc4 > summary::-webkit-details-marker { display: none; }
details.acc4 > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px .3rem 0 1rem; transition: transform .2s; flex: none; }
details.acc4[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.acc4 > summary:hover { background: var(--field); }
details.acc4 > summary .sh4 { margin: 0; flex: 1; }
details.acc4 > .acc4-body { padding: .2rem 1rem 1rem; }
details.acc4.mailcard, details.acc4.pitches { padding: 0; }
.ws-panel .cols > details.acc4 { margin: 0; }
details.ws-fold { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); margin: 0 0 .6rem; }
.acc4-head { display: flex; align-items: center; gap: .8rem; flex: 1; flex-wrap: wrap; }
.acc4-head .hint { margin: 0; }
details.acc4.salary { padding: 0; }
.acc4-head.sal-head { justify-content: space-between; } .acc4-head > div { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.mc-day-h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.mc-day-h h3 { margin: 0; }
.mc-form { display: grid; gap: .6rem; margin: .7rem 0; padding: .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mc-types { display: flex; flex-wrap: wrap; gap: .35rem; }
.mc-type { position: relative; margin: 0; }
.mc-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mc-type span { display: inline-block; padding: .35rem .7rem; border-radius: 99px; border: 1px solid var(--line-2); font-size: .82rem; font-weight: 650; cursor: pointer; background: var(--field); }
.mc-type input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.mc-type input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.mc-day li { display: flex; align-items: center; gap: .4rem; }
.mc-day li > a { flex: 1; }
.mc-day li .ibtn { width: 30px; height: 30px; flex: none; }
.mc-day li .ibtn .ico { width: 15px; height: 15px; }
/* Kalender: tydliga ikoner per typ */
.k-aktivitet { --k: #2E7FA8; } .k-anteckning { --k: var(--muted); }
.mc-ics { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
.mc-ics i, .mc-legend i, .mc-li-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #fff; background: var(--k, var(--muted)); font-style: normal; }
.mc-ics i .ico, .mc-legend i .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.mc-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.mc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.mc-legend i { background: var(--k, var(--muted)) !important; }
.mc-li-ic { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.mc-li-ic .ico { width: 16px; height: 16px; }
@media (max-width: 560px) { .mc-ics i { width: 14px; height: 14px; } .mc-ics i .ico { width: 10px; height: 10px; } }
.jwatch { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.05rem; display: grid; gap: .5rem; }
.jwatch.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 60%); }
.jwatch .sh4 { margin: 0; }
.jwatch .hint { margin: 0; }
.jw-opts { display: grid; gap: .5rem; }
.jw-opts label { margin: 0; font-size: .85rem; font-weight: 650; display: grid; gap: .2rem; }
.jw-opts select { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 700; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span { width: 44px; height: 26px; border-radius: 99px; background: var(--line-2); position: relative; transition: background .2s; flex: none; }
.switch > span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.jnews { margin-bottom: 1rem; padding: .9rem; border-radius: 20px; background: linear-gradient(160deg, var(--accent-soft), transparent 70%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.jnews .sh4 { justify-content: flex-start; }
.jnews .sh4 .link { margin-left: auto; font-size: .85rem; font-family: var(--font); }
.jempty-watch { max-width: 520px; margin: 1rem auto 0; }
/* Skicka direkt */
.composer { border: 0; border-radius: 22px; padding: 0; width: min(640px, calc(100vw - 2rem)); box-shadow: 0 40px 90px -30px rgba(20, 30, 50, .6); background: var(--surface); color: var(--ink); }
.composer::backdrop { background: rgba(20, 28, 40, .45); backdrop-filter: blur(3px); }
.composer form { padding: 1.2rem 1.3rem 1.3rem; display: grid; gap: .7rem; }
.composer header { display: flex; justify-content: space-between; align-items: center; }
.composer h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.25rem; }
.composer h2 .ico { color: var(--accent-text); }
.cmp-from { margin: 0; font-size: .9rem; color: var(--muted); }
.composer label { margin: 0; }
.cmp-att { display: flex; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; padding: .6rem .9rem; margin: 0; }
.cmp-att .ico { width: 16px; height: 16px; vertical-align: -3px; }
.sm-acc { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 14px; background: var(--ok-soft); }
.sm-acc > .ico { color: var(--ok); }
.sm-acc > div { display: grid; flex: 1; }
.sm-acc span { font-size: .85rem; color: var(--muted); }

/* Intervjusteget: kalenderposter för ansökan */
.iv-cal-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.iv-cal-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.iv-cal-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.iv-cal-ic svg{width:18px;height:18px}
.iv-cal-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.iv-cal-tx small{color:var(--muted)}
.iv-form{margin-top:4px}
.iv-form .mc-type span{display:inline-flex;align-items:center;gap:6px}
.iv-form .mc-type .bi{width:15px;height:15px}
.iv-noprep .btn{margin-top:4px}
.iv-form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* 24-timmarsval och plats/länk i kalenderformulären */
.tp24{display:flex;align-items:center;gap:6px}
.tp24 select{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.tp24 b{font-weight:700;color:var(--muted)}
.wp4{display:grid;gap:8px;margin:4px 0 12px}
.wp-l{font-weight:600;font-size:.92rem}
.wp-l small,label small{font-weight:400;color:var(--muted)}
.wp4 .mc-type span{display:inline-flex;align-items:center;gap:6px}
.wp4 .mc-type .bi{width:15px;height:15px}
.wp4 [hidden]{display:none!important}

/* Chrome-tillägget */
.ext4{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 16px;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface)}
.ext4>div{flex:1;min-width:0;display:flex;flex-direction:column}
.ext4 small{color:var(--muted)}
.ext4-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.ext4-ic svg{width:19px;height:19px}
.ext-steps{display:grid;gap:10px;padding-left:20px;margin:8px 0 12px}
.ext-steps li .btn{margin-left:6px;vertical-align:middle}
.ext-steps code{padding:1px 6px;border-radius:6px;background:var(--line);font-size:.9em}
.ok4{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:600}
.ok4 svg{width:18px;height:18px}
@media (max-width:560px){.ext4{flex-wrap:wrap}.ext4 .btn{width:100%}}

/* Översikt: prioriteringar och kalendern sida vid sida högst upp */
.d4-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "focus month" "agenda month"; gap: 1rem 1.25rem; align-items: start; margin-bottom: 1.5rem; }
.d4-top > .d4-focus { grid-area: focus; margin: 0; }
.d4-top .d4-cal-top { display: contents; }
.d4-top .d4-month { grid-area: month; }
.d4-top .d4-agenda { grid-area: agenda; }
@media (max-width: 1100px) { .d4-top { grid-template-columns: 1fr; grid-template-areas: "focus" "month" "agenda"; } }

/* Svensk datumväljare */
.lbl4 { display: block; font-weight: 600; font-size: .9rem; color: var(--ink-2); margin-bottom: 1rem; }
.lbl4 > span:first-child { display: block; margin-bottom: .35rem; }
.dp4 { position: relative; display: block; }
.dp4-btn { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 46px; padding: .6rem .85rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--field, var(--surface)); color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; text-transform: capitalize; }
.dp4-btn:hover, .dp4-btn:focus-visible { border-color: var(--accent); }
.dp4-btn .bi { width: 17px; height: 17px; color: var(--accent); flex: none; }
.dp4-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 32px); padding: .75rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 50px rgba(16, 35, 26, .18); }
.dp4-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.dp4-h strong { text-transform: capitalize; font-size: .95rem; }
.dp4-h button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.dp4-h button:hover { background: var(--line); }
.dp4-g { display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 2px; text-align: center; font-size: .85rem; }
.dp4-wd { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: capitalize; padding: .2rem 0; }
.dp4-wk { display: grid; place-items: center; font-size: .68rem; color: var(--muted); font-weight: 600; }
.dp4-wk.h { font-size: .62rem; }
.dp4-g button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; }
.dp4-g button:hover { background: var(--line); }
.dp4-g button.out { color: var(--muted); opacity: .55; }
.dp4-g button.we { color: var(--muted); }
.dp4-g button.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp4-g button.sel { background: var(--accent); color: #fff; font-weight: 700; }
.dp4-f { display: flex; justify-content: flex-end; margin-top: .4rem; }
.dp4-f button { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }

/* Påminnelser */
.rm4-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.rm4-row label { flex: 1; min-width: 200px; }
.rm4-row .link { margin-bottom: 1.3rem; display: inline-flex; align-items: center; gap: .35rem; }
.rm4-row .bi, svg.mini { width: 13px; height: 13px; vertical-align: -2px; }
.cal4.editing { box-shadow: 0 0 0 2px var(--accent); }
.rm4 { position: fixed; z-index: 90; top: 16px; right: 16px; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.rm4-card { position: relative; display: flex; gap: 12px; padding: 14px 40px 14px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(16, 35, 26, .22); animation: rm4In .35s cubic-bezier(.2, .9, .3, 1.2); }
.rm4-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; animation: rm4Ring 1.2s ease-in-out 2; }
.rm4-ic svg { width: 20px; height: 20px; }
.rm4-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm4-tx small { color: var(--accent); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.rm4-tx span { color: var(--muted); font-size: .88rem; }
.rm4-act { display: flex; gap: 8px; margin-top: 8px; }
.rm4-x { position: absolute; top: 8px; right: 8px; }
@keyframes rm4In { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes rm4Ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* Smedjan arbetar: när en sida laddar */
.boot { gap: .8rem; grid-auto-flow: row; align-content: center; }
.boot-anvil { width: 92px !important; padding: 14px 12px 8px; border-radius: 24px; background: linear-gradient(160deg, var(--navy-2, #33476a), var(--navy, #24324d)); box-shadow: 0 16px 40px rgba(16, 35, 26, .2); box-sizing: content-box; }
.boot span { font-size: 1.1rem; letter-spacing: .02em; animation: work4Pulse 1.8s ease-in-out infinite; }
.work4 { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: color-mix(in srgb, var(--bg, #f6f4ef) 55%, transparent); backdrop-filter: blur(3px); animation: work4In .25s ease-out; pointer-events: none; }
.work4.out { opacity: 0; transition: opacity .2s; }
.work4-box { display: grid; justify-items: center; gap: .6rem; padding: 18px 22px 14px; border-radius: 24px; background: linear-gradient(160deg, var(--navy-2, #33476a), var(--navy, #24324d)); color: #fff; font-weight: 700; box-shadow: 0 20px 50px rgba(16, 35, 26, .28); }
.work4-box .anim-anvil { width: 84px; }
.work4-box span { font-size: .9rem; opacity: .9; animation: work4Pulse 1.8s ease-in-out infinite; }
@keyframes work4In { from { opacity: 0; } }
@keyframes work4Pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rm4-card, .rm4-ic, .work4, .boot span, .work4-box span { animation: none; } }

/* Menyn: gruppen som innehåller sidan du står på fälls ut när du kommer dit (app.js), men går att fälla ihop */
.rail li.nav-g.fold.has-cur > button { color: #fff; }
.rail li.nav-g.fold.has-cur > button svg:first-child { color: var(--accent); }
.rail li.nav-g.fold.has-cur .chev, .rail li.has-kids.has-cur .kid-toggle .chev { transform: rotate(180deg) !important; }
.rail li.has-kids.has-cur > a:not([aria-current]) { color: #fff; }
.rail li.has-kids.has-cur > a:not([aria-current]) svg { color: var(--accent); }
.d4-top .d4-first { grid-template-columns: auto minmax(0, 1fr); }
.d4-top .d4-first .d4-time { grid-column: 2; grid-row: 2; justify-self: start; }
.d4-top .d4-first .btn { grid-column: 2; grid-row: 2; justify-self: end; }
.d4-top .d4-then .d4-time { display: none; }
.dp4-btn { text-transform: none; }
.dp4-btn span { display: inline-block; }
.dp4-btn span::first-letter { text-transform: uppercase; }
.cal4 .mc-type span { display: inline-flex; align-items: center; gap: 6px; }
.cal4 .mc-type .bi { width: 15px; height: 15px; }

/* Mina ansökningar: sektioner efter var i processen du är, en tydlig rad per ansökan */
.al5-page .page-head { margin-bottom: 1rem; }
.al5-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.al5-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.al5-stat { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; }
.al5-stat svg { width: 15px; height: 15px; color: var(--muted); }
.al5-stat b { font: 750 .95rem var(--display); color: var(--ink); }
.al5-stat.hot { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.al5-stat.hot svg { color: var(--accent); }
.al5-tools { display: flex; gap: .5rem; align-items: center; }
.al5-tools label { margin: 0; }
.al5-tools .search { position: relative; display: block; width: 240px; }
.al5-tools .search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.al5-tools .search input { padding-left: 2.2rem; height: 40px; margin: 0; }
.al5-sort { position: relative; display: block; }
.al5-sort svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.al5-sort select { padding-left: 2rem; height: 40px; margin: 0; width: auto; font-size: .9rem; }
.al5-only { margin: -.5rem 0 1rem; color: var(--muted); font-size: .9rem; }

.al5-sec { margin-bottom: 1rem; border-radius: 20px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--line); }
.al5-sec > summary { list-style: none; display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; cursor: pointer; border-radius: 20px; }
.al5-sec > summary::-webkit-details-marker { display: none; }
.al5-sec > summary:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.al5-sec-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.al5-sec-ic svg { width: 17px; height: 17px; }
.al5-sec-t { font: 700 1.02rem var(--display); color: var(--ink); }
.al5-count { min-width: 24px; padding: 0 .45rem; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--line); font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.al5-sec > summary .chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
.al5-sec[open] > summary .chev { transform: rotate(180deg); }
.al5-sec.sec-closed .al5-sec-ic, .al5-sec.sec-saved .al5-sec-ic { background: var(--line); color: var(--ink-2); }
.al5-list { display: grid; gap: .5rem; padding: 0 .6rem .6rem; }

.al5 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.al5:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 10px 26px -18px rgba(16, 35, 26, .4); }
.al5-main { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) 2.4rem; align-items: center; gap: 1rem; padding: .75rem .25rem .75rem .85rem; color: inherit; text-decoration: none; }
.al5-av { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; background: linear-gradient(145deg, var(--navy-2), var(--navy)); }
.al5.st-klar .al5-av, .al5.st-utkast .al5-av { background: linear-gradient(145deg, var(--accent-2), var(--accent)); }
.al5.st-avslag .al5-av, .al5.st-avbojd .al5-av { background: #A8A296; }
.al5.st-erbjudande .al5-av { background: linear-gradient(145deg, #3FAE6A, #1E7A45); }
.al5-id { display: flex; flex-direction: column; min-width: 0; }
.al5-id strong { font: 700 1rem/1.25 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al5-id small { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al5-tag { font-style: normal; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); margin-left: .25rem; }
.al5-stage { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.al5-stage small { font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al5-dots { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.al5-dots li { flex: 1; max-width: 34px; height: 5px; border-radius: 3px; background: var(--line-2); }
.al5-dots li.j-done { background: var(--navy-3, #4E6A8F); }
.al5-dots li.j-now { background: var(--accent); }
.al5-dots li.j-skip { background: transparent; border: 1px dashed var(--line-2); }
.al5-next { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.al5-next span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.al5-next svg { width: 16px; height: 16px; flex: none; }
.al5-next.meet, .al5-next.late, .al5-next.due { color: var(--accent-text, var(--accent)); }
.al5-next.meet svg, .al5-next.late svg, .al5-next.due svg { color: var(--accent); }
.al5-next.good { color: #1E7A45; }
.al5-logbtn { margin-right: .6rem; display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 .55rem; }
.al5-logbtn b { font-size: .75rem; color: var(--muted); }
.al5-logbtn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.al5-log { grid-column: 1 / -1; padding: .25rem 1rem 1rem; border-top: 1px solid var(--line); }
.al5-log .note { margin: .75rem 0; }
@media (max-width: 900px) {
  .al5-main { grid-template-columns: auto minmax(0, 1fr) 2.4rem; grid-template-areas: "av id fit" "av stage stage" "av next next"; row-gap: .45rem; }
  .al5-av { grid-area: av; align-self: start; } .al5-id { grid-area: id; } .al5-stage { grid-area: stage; } .al5-next { grid-area: next; } .al5-main > .fitmini, .al5-main > span:last-child { grid-area: fit; }
  .al5-logbtn { align-self: start; margin-top: .75rem; }
  .al5-tools, .al5-tools .search { width: 100%; } .al5-tools .search { flex: 1; }
}
.cvrev-locked .btn { margin-top: .4rem; }
.cvwork-note { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cvwork-note p { flex: 1; min-width: 220px; margin: 0; }
.docedit-form > .cvrev { position: static; margin-bottom: .9rem; }
.newdoc #newPhoto .photo-card { margin-bottom: 1.2rem; }
/* Hänglås på skickade CV och brev */
.paper.locked .lock-badge { position: absolute; z-index: 3; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #1E3A2C; color: #fff; font: 700 .8rem var(--display, inherit); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.paper.locked .lock-badge svg { width: 15px; height: 15px; }
.lock-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #1E7A45 14%, var(--surface)); color: #1E6A3E; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.lock-pill svg { width: 14px; height: 14px; }
.lock-pill.open { background: var(--line); color: var(--ink-2); font-weight: 600; }

/* CV:t anpassar sig efter texten */
.tpl-klassisk .cvd-head.has-photo .cvd-name, .tpl-klassisk .cvd-head.has-photo .cvd-headline { padding: 0 104px; }
.tpl-klassisk .cvd-head.has-photo { min-height: 96px; }
.cvdoc.hl-long .cvd-headline { font-size: calc(13.5px * var(--k, 1)); line-height: 1.4; }
.cvdoc.hl-xlong .cvd-headline { font-size: calc(12.5px * var(--k, 1)); line-height: 1.4; }
.tpl-skandinavisk.hl-long .cvd-headline { font-size: calc(11.5px * var(--k, 1)); letter-spacing: .1em; }
.tpl-skandinavisk.hl-xlong .cvd-headline { font-size: calc(12px * var(--k, 1)); letter-spacing: .02em; text-transform: none; }
.tpl-kompakt.hl-long .cvd-headline, .tpl-kompakt.hl-xlong .cvd-headline { font-size: calc(12.5px * var(--k, 1)); }
.cvdoc.nm-long .cvd-name { font-size: calc(26px * var(--k, 1)) !important; letter-spacing: .01em !important; }
.cvdoc.dense .cvd-body { line-height: 1.42; }
.cvdoc.dense h2 { margin-top: 16px !important; margin-bottom: 8px !important; }
.cvdoc.dense .cvd-job { margin-bottom: 10px; }
.cvdoc.dense .cvd-bullets li { margin-bottom: 1px; }
.cvdoc.airy .cvd-body { line-height: 1.62; }
.cvdoc.airy h2 { margin-top: 28px !important; }
/* CV-granskningen går att fälla ihop */
details.cvrev { display: block; }
.cvrev > summary.cvrev-sum { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cvrev > summary.cvrev-sum::-webkit-details-marker { display: none; }
.cvrev > summary .sh4 { flex: 1; }
.cvrev > summary .chev { color: var(--muted); transition: transform .2s; flex: none; transform: none !important; }
.cvrev[open] > summary .chev { transform: rotate(180deg) !important; }
.cvrev-body { display: grid; gap: .7rem; margin-top: .7rem; }
.rev-mini { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; margin-left: .4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-size: .78rem; font-weight: 750; }
.rev-left { margin-left: .4rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.cvrev[open] .rev-mini, .cvrev[open] .rev-left { display: none; }

/* Egen typografi per mall – moderna typsnitt som gör att CV:t sticker ut lite */
.cvdoc.tpl-skandinavisk { font-family: 'Manrope', 'Figtree', 'Helvetica Neue', Arial, sans-serif; }
.tpl-skandinavisk .cvd-name { font-family: 'Manrope', sans-serif; font-weight: 300; }
.tpl-skandinavisk h2 { font-family: 'Manrope', sans-serif; font-weight: 500; letter-spacing: -.01em; }
.tpl-skandinavisk .cvd-row h3 { font-weight: 700; }
.cvdoc.tpl-modern { font-family: 'Plus Jakarta Sans', 'Figtree', 'Helvetica Neue', Arial, sans-serif; }
.tpl-modern .cvd-name { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; }
.tpl-modern h2 { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; }
.tpl-modern .cvd-headline { font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.cvdoc.tpl-klassisk { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; }
.tpl-klassisk .cvd-name { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-variation-settings: 'opsz' 72, 'SOFT' 50; letter-spacing: 0; }
.tpl-klassisk .cvd-headline { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 350; }
.tpl-klassisk h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }
.tpl-klassisk .cvd-row h3 { font-weight: 600; }
.cvdoc.tpl-kompakt { font-family: 'DM Sans', 'Figtree', 'Helvetica Neue', Arial, sans-serif; }
.tpl-kompakt .cvd-name { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; }
.tpl-kompakt h2 { font-family: 'DM Sans', sans-serif; }

/* Valbart typsnitt för hela CV:t och brevet */
.cvdoc.ff-manrope, .cvdoc.ff-manrope .cvd-name, .cvdoc.ff-manrope h2, .cvdoc.ff-manrope h3, .cvdoc.ff-manrope .cvd-headline { font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-jakarta, .cvdoc.ff-jakarta .cvd-name, .cvdoc.ff-jakarta h2, .cvdoc.ff-jakarta h3, .cvdoc.ff-jakarta .cvd-headline { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-inter, .cvdoc.ff-inter .cvd-name, .cvdoc.ff-inter h2, .cvdoc.ff-inter h3, .cvdoc.ff-inter .cvd-headline { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-dmsans, .cvdoc.ff-dmsans .cvd-name, .cvdoc.ff-dmsans h2, .cvdoc.ff-dmsans h3, .cvdoc.ff-dmsans .cvd-headline { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-grotesk, .cvdoc.ff-grotesk .cvd-name, .cvdoc.ff-grotesk h2, .cvdoc.ff-grotesk h3, .cvdoc.ff-grotesk .cvd-headline { font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-fraunces, .cvdoc.ff-fraunces .cvd-name, .cvdoc.ff-fraunces h2, .cvdoc.ff-fraunces h3, .cvdoc.ff-fraunces .cvd-headline { font-family: 'Fraunces', Georgia, serif, 'Helvetica Neue', Arial, sans-serif !important; }
.cvdoc.ff-fraunces .cvd-name { font-weight: 400 !important; }
/* Storlek på namn och rubriker */
.tpl-skandinavisk.hs-s .cvd-name { font-size: calc(28px * var(--k, 1)); } .tpl-skandinavisk.hs-l .cvd-name { font-size: calc(40px * var(--k, 1)); }
.tpl-skandinavisk.hs-s h2 { font-size: calc(18px * var(--k, 1)); } .tpl-skandinavisk.hs-l h2 { font-size: calc(25px * var(--k, 1)); }
.tpl-modern.hs-s .cvd-name { font-size: calc(26px * var(--k, 1)); } .tpl-modern.hs-l .cvd-name { font-size: calc(38px * var(--k, 1)); }
.tpl-modern.hs-s .cvd-side h2, .tpl-modern.hs-s .cvd-main h2 { font-size: calc(11px * var(--k, 1)); } .tpl-modern.hs-l .cvd-side h2, .tpl-modern.hs-l .cvd-main h2 { font-size: calc(14px * var(--k, 1)); }
.tpl-klassisk.hs-s .cvd-name { font-size: calc(28px * var(--k, 1)); } .tpl-klassisk.hs-l .cvd-name { font-size: calc(40px * var(--k, 1)); }
.tpl-klassisk.hs-s h2 { font-size: calc(12.5px * var(--k, 1)); } .tpl-klassisk.hs-l h2 { font-size: calc(16px * var(--k, 1)); }
.tpl-kompakt.hs-s .cvd-name { font-size: calc(23px * var(--k, 1)); } .tpl-kompakt.hs-l .cvd-name { font-size: calc(33px * var(--k, 1)); }
.tpl-kompakt.hs-s h2 { font-size: calc(10.5px * var(--k, 1)); } .tpl-kompakt.hs-l h2 { font-size: calc(13px * var(--k, 1)); }
.cvdoc.hs-s .cvd-row h3 { font-size: calc(13.5px * var(--k, 1)); } .cvdoc.hs-l .cvd-row h3 { font-size: calc(16.5px * var(--k, 1)); }
/* Mall- och stilval får plats även i en smal spalt */
.dp-tpls { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; }
.dp-tpl small { overflow-wrap: anywhere; }
.dp-size { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.dp-size legend, .dp-fonts legend { grid-column: 1 / -1; }
.dp-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .45rem; border: 0; padding: 0; margin: 0 0 1rem; }
.dp-font { position: relative; display: grid; gap: 2px; justify-items: start; padding: .5rem .65rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; margin: 0; background: var(--surface); font-weight: 500; font-size: .8rem; color: var(--ink-2); }
.dp-font input { position: absolute; opacity: 0; left: 0; top: 0; width: 1px; height: 1px; }
.dp-font.on, .dp-font:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.dp-font:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-font-a { font-size: 1.3rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.dp-hsize .sz-a b { font-weight: 800; }
/* Textstorlek: --k skalar typsnitten (ingen zoom, den ställer till det vid utskrift) */
.dp-tpls { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }

/* Delarna på CV:t: tydliga rutor med reglage, dra för att flytta */
.dp-blocks2 { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; }
.dp-blocks2 > .hint { margin: 0; }
.blk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.blk-col { display: grid; gap: .35rem; align-content: start; }
.blk-col-h { font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.blk-list { list-style: none; margin: 0; padding: .35rem; display: grid; gap: .35rem; min-height: 52px; border-radius: 14px; background: var(--sunk, color-mix(in srgb, var(--line) 45%, transparent)); border: 1px dashed transparent; }
.blk-list:not(.fixed):has(.dragging) { border-color: var(--line-2); }
.blk { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 35, 26, .05); font-size: .88rem; font-weight: 600; color: var(--ink); user-select: none; }
.blk[draggable] { cursor: grab; }
.blk.dragging { opacity: .55; box-shadow: 0 10px 24px -12px rgba(16, 35, 26, .45); border-color: var(--line-2); }
.blk.off { background: transparent; color: var(--muted); font-weight: 500; }
.blk.off .blk-ic { opacity: .5; }
.blk-grip { color: var(--muted); display: grid; place-items: center; width: 16px; flex: none; }
.blk-grip.blank { visibility: hidden; }
.blk-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--navy, #2B3F5A) 9%, transparent); color: var(--ink-2); flex: none; }
.blk-ic svg { width: 15px; height: 15px; }
.blk-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-mv { display: inline-flex; gap: 2px; }
.blk-mv button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: .85rem; line-height: 1; }
.blk-mv button:hover { background: var(--line); color: var(--ink); }
@media (hover: hover) { .blk-mv { opacity: 0; transition: opacity .15s; } .blk:hover .blk-mv, .blk:focus-within .blk-mv { opacity: 1; } }
.blk-sw { position: relative; display: inline-flex; margin: 0; flex: none; cursor: pointer; }
.blk-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.blk-sw .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; }
.blk-sw .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.blk-sw input:checked + .sw { background: var(--navy-2, #3A5274); }
.blk-sw input:checked + .sw::after { transform: translateX(14px); }
.blk-sw input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Rubrikförslag från CV-granskningen */
.rev-hl { display: grid; gap: .45rem; padding: .75rem; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }
.rev-hl > small { font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.rev-hl-cur { margin: 0; font-size: .86rem; color: var(--ink-2); }
.rev-hl-opts { display: grid; gap: .35rem; }
.rev-hl-opt { display: flex; align-items: center; gap: .4rem; text-align: left; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.rev-hl-opt:hover { border-color: var(--accent); }
.rev-hl-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.rev-hl-opt .bi { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* Sidfot för de publika sidorna */
.sitefoot { margin-top: 3rem; background: #14211B; color: #C9D6CF; }
.sf-in { max-width: var(--lw, 1180px); margin: 0 auto; padding: 3rem 1.25rem 2rem; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.sf-brand .brand { color: #fff; font-size: 1.2rem; padding: 0; }
.sf-brand p { margin: .9rem 0 0; max-width: 42ch; line-height: 1.6; color: #A9BAB1; }
.sf-col h3 { margin: .3rem 0 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sf-col a { color: #C9D6CF; text-decoration: none; }
.sf-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sf-bottom { max-width: var(--lw, 1180px); margin: 0 auto; padding: 1.1rem 1.25rem 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .85rem; color: #8FA399; }
@media (max-width: 760px) { .sf-in { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
/* Informationssidor */
.info-main { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; }
.info-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.info-tabs a { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 600; }
.info-tabs a[aria-current="page"] { background: var(--navy, #2B3F5A); border-color: var(--navy, #2B3F5A); color: #fff; }
.info-head h1 { font: 750 clamp(2rem, 4vw, 2.6rem)/1.1 var(--display); margin: 0 0 .6rem; }
.info-head .lsub { margin: 0 0 2rem; }
.info-body { display: grid; gap: 1.6rem; }
.info-body h2 { font: 700 1.15rem var(--display); margin: 0 0 .4rem; }
.info-body p { margin: 0; line-height: 1.7; color: var(--ink-2); }
.sf-form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; }
.sf-sent { padding: 1.5rem; border-radius: 20px; background: var(--accent-soft); }
.pf-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1.5rem 0 0; font-size: .88rem; }
.pf-links a { color: var(--muted); }
.pub-main.info-main { display: block; max-width: 760px; margin: 0 auto; }
.sitefoot .logo { color: #fff !important; }
/* Utskrift/PDF: rader i rutnätsmallar får inte sträckas ut när sidan är högre än innehållet */
.cvdoc.tpl-modern { grid-template-rows: auto 1fr; align-content: start; }
body.print-doc .cvdoc { align-content: start; }
/* Sidfoten i samma marinblå nyans som blocken i appen */
.sitefoot { background: linear-gradient(165deg, var(--navy-2, #3A5274) 0%, var(--navy, #2B3F5A) 45%, #1F2E44 100%); color: #D3DCE8; }
.sf-brand p { color: #B9C6D8; }
.sf-col a { color: #D3DCE8; }
.sf-bottom { color: #9FB0C6; border-top-color: rgba(255, 255, 255, .14); }

/* AI-modifieraren under texterna */
.aimod { display: grid; gap: .5rem; margin-top: .9rem; padding: .7rem .75rem; border-radius: 14px; background: color-mix(in srgb, var(--navy, #2B3F5A) 5%, var(--surface)); border: 1px solid var(--line); }
.aimod-l { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.aimod-l svg { width: 15px; height: 15px; color: var(--accent); }
.aimod-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.aimod-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.aimod-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.aimod-chip .bi { width: 14px; height: 14px; color: var(--accent); }
.aimod-chip:disabled { opacity: .6; cursor: progress; }
.aimod-own { display: flex; gap: .4rem; margin: 0; }
.aimod-own input { flex: 1; margin: 0; height: 36px; font-size: .86rem; }
.aimod-own .btn { height: 36px; padding: 0 .7rem; }
.aimod-own .btn svg { width: 15px; height: 15px; }
.aimod-undo { margin: 0; font-size: .82rem; color: var(--muted); }
.aimod-edit textarea { width: 100%; margin-bottom: .5rem; line-height: 1.6; }
.li-box .hint.warn { color: #B4471B; }
details.aimod { padding: .55rem .75rem; }
details.aimod > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
details.aimod > summary::-webkit-details-marker { display: none; }
.aimod-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: .3rem; }
details.aimod[open] > summary { margin-bottom: .2rem; }
details.aimod:not([open]):hover { border-color: var(--accent); }
/* Kalenderformuläret i ansökan är hopfällt tills man trycker */
.cal4-wrap > summary { list-style: none; width: max-content; cursor: pointer; }
.cal4-wrap > summary::-webkit-details-marker { display: none; }
.cal4-wrap[open] > summary { display: none; }
.cal4-wrap > .cal4 { margin-top: .6rem; }

/* Ljusa färger: ytor i ljus ton, text och linjer i en mörkare, läsbar nyans */
.cvdoc { --cv-fill: var(--cv-accent); --cv-on-fill: #fff; }
.tpl-modern { background: linear-gradient(to right, #ECE7DF 240px, #fff 240px); }
.dp-tpl svg .tb-side.mod { fill: #E2DBCF; }
.tpl-modern.lt .cvd-side, .tpl-modern.lt.letterdoc .letter-meta { color: #2A2F36; }
.tpl-modern.lt .cvd-side h2 { color: var(--cv-accent); border-bottom-color: color-mix(in srgb, var(--cv-accent) 30%, transparent); }
.tpl-modern.lt .cvd-side .cvd-ic, .tpl-modern.lt.letterdoc .letter-meta .cvd-ic { color: var(--cv-accent); }
.tpl-modern.lt .cvd-side .cvd-list li::before { background: var(--cv-accent); }
.tpl-modern.lt .cvd-side .cvd-bar i { background: color-mix(in srgb, var(--cv-accent) 22%, transparent); }
.tpl-modern.lt .cvd-side .cvd-bar i.on { background: var(--cv-accent); }
.tpl-modern.lt .cvd-side .cvd-level, .tpl-modern.lt .cvd-side .cvd-period { color: #5F6670; }
.tpl-modern.lt .cvd-photo { border-color: #fff; }
.tpl-skandinavisk.lt .cvd-band { background: var(--cv-fill); }
.tpl-skandinavisk.lt h2 { border-bottom-color: var(--cv-fill); }
.tpl-klassisk.lt .cvd-head { background: var(--cv-fill); margin: -46px -58px 10px; padding: 40px 58px 20px; border-bottom: 0; }
.tpl-klassisk.lt .cvd-photo { right: 58px; top: 30px; }
.tpl-kompakt.lt .cvd-head { background: var(--cv-fill); margin: -36px -42px 0; padding: 30px 42px 18px; border-bottom: 0; }
.dp-swatch.light span:first-of-type { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* Översikt: kompaktare kalender */
.d4-month .mc-grid { gap: 4px; }
.d4-month .mc-cell { aspect-ratio: auto; height: 42px; min-height: 0; border-radius: 9px; gap: 2px; font-size: .8rem; }
.d4-month .mc-ics { gap: 3px; margin-top: 0; }
.d4-month .mc-ics i { width: 7px; height: 7px; border-radius: 50%; }
.d4-month .mc-ics i .ico { display: none; }
.d4-month .mc-cell.today .mc-n { width: 22px; height: 22px; }
.d4-month .mc-legend { gap: .25rem .7rem; font-size: .7rem; margin: .55rem 0 0; }
.d4-month .mc-legend i { width: 8px; height: 8px; border-radius: 50%; }
.d4-month .mc-legend i .ico { display: none; }
.d4-month .mc-head { margin-bottom: .4rem; }
.d4-month .mc-day { padding: .7rem .8rem; margin-top: .7rem; }
.d4-month .mc-day ul { gap: .35rem; }
.d4-month > .sh4 { margin-bottom: .5rem; }

/* Översikt: processen syns – marinblått kort med tydliga steg */
.d4-pipe { margin-top: 1.6rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, var(--navy-2, #3A5274) 0%, var(--navy, #2B3F5A) 45%, #1F2E44 100%);
  box-shadow: 0 30px 60px -32px rgba(20, 32, 50, .7); }
.d4-pipe .d4-sec-h { margin-bottom: .9rem; }
.d4-pipe .sh4 { color: #fff; font-size: 1.15rem; }
.d4-pipe .sh4-ico { background: rgba(255, 176, 103, .16); color: #FFB067; }
.d4-pipe .d4-sec-h a { color: #D3DCE8; }
.d4-pipe .d4-col { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.d4-pipe .d4-col-t { color: #fff; }
.d4-pipe .d4-col-ic { background: rgba(255, 255, 255, .12); color: #DCE5F0; }
.d4-pipe .d4-col-n { min-width: 30px; height: 30px; font-size: .95rem; background: rgba(255, 255, 255, .14); color: #fff; }
.d4-pipe .d4-col.st-send, .d4-pipe .d4-col.st-meet { background: rgba(255, 138, 61, .12); border-color: rgba(255, 160, 100, .45); }
.d4-pipe .d4-col.st-send .d4-col-ic, .d4-pipe .d4-col.st-meet .d4-col-ic { background: rgba(255, 138, 61, .25); color: #FFC48A; }
.d4-pipe .d4-col.st-send .d4-col-n, .d4-pipe .d4-col.st-meet .d4-col-n { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(255, 138, 61, .2); }
.d4-pipe .d4-empty { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .2); }
.d4-pipe .d4-arrow { border-color: rgba(255, 255, 255, .4); }
.d4-pipe .d4-col li a { border-color: transparent; }
.d4-pipe .d4-col li.more a { background: rgba(255, 255, 255, .1); color: #D3DCE8; }
.d4-top { margin-bottom: .6rem; }
.d4-pipe { margin-top: .6rem; }
.d4-pipe .d4-col { min-height: 120px; }

/* Granskning 14 okt: småfixar */
.paper.fit { max-width: none !important; width: 794px; }
.paper.fit > .cvdoc { width: 794px; }
.pend4 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px dashed var(--line-2); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pend4 p { margin: 0; flex: 1; min-width: 200px; }
p.pend4 { display: block; }
.sh4 .link { font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--accent-text, var(--accent)); margin-left: .4rem; }
.sh4 .link:hover { text-decoration: underline; }
/* Processen: orange bara när det finns något i steget */
.d4-pipe .d4-col.none { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .1) !important; }
.d4-pipe .d4-col.none .d4-col-n { background: rgba(255, 255, 255, .1) !important; box-shadow: none !important; color: rgba(255, 255, 255, .7) !important; }
.d4-pipe .d4-col.none .d4-col-ic { background: rgba(255, 255, 255, .1) !important; color: #DCE5F0 !important; }
/* Mina ansökningar: sökfältet får plats med hela texten */
.al5-tools .search { width: 300px; }
/* Profil och inställningar: två spalter på bred skärm i stället för en smal spalt och tom yta */
.page.prof5 { max-width: 1180px; }
/* Inställningarna är en lista med rubriker som fälls ut (set5) i stället för två spalter */
.prof5-top { column-span: all; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.4rem; align-items: start; }
@media (min-width: 1180px) { .prof5-top { grid-template-columns: minmax(0, 1fr) 360px; } .prof5-top .photo-card { margin-bottom: 0; } }
.page.prof5 > .profile-card, .page.prof5 > section { display: inline-block; width: 100%; }
.prof5-top > * { margin-top: 0 !important; }
/* Översikt: två delar högst upp (nästa steg och kalendern), processen under */
.d4-top { grid-template-areas: "focus month" !important; }
@media (max-width: 1100px) { .d4-top { grid-template-areas: "focus" "month" !important; } }

/* Skicka-steget: kanalen överst, resten under Fler sätt att söka */
.via5 { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.via5-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; flex: none; }
.via5-ic svg { width: 22px; height: 22px; }
.via5 > div:nth-child(2) { flex: 1; min-width: 220px; display: grid; gap: .1rem; }
.via5 > div:nth-child(2) strong { font: 700 1.05rem var(--display); }
.via5 > div:nth-child(2) small { color: var(--muted); font-size: .86rem; }
.via5-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
details.more5 { margin: 1rem 0; border-radius: 20px; border: 1.5px dashed var(--line-2); background: color-mix(in srgb, var(--surface) 45%, transparent); }
details.more5 > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; padding: .9rem 1.1rem; font-weight: 700; }
details.more5 > summary::-webkit-details-marker { display: none; }
details.more5 > summary small { font-weight: 500; color: var(--muted); }
details.more5 > summary .bi { width: 16px; height: 16px; color: var(--accent); }
details.more5[open] > summary { border-bottom: 1px dashed var(--line-2); }
.more5-body { padding: .8rem; }
details.subj-more { margin-top: .9rem; }
details.subj-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; }
details.subj-more > summary .bi { width: 15px; height: 15px; color: var(--accent); }
/* Standardsvar: senaste versionen först, äldre hopfällda */
details.cm-older { margin-top: .7rem; }
details.cm-older > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--ink-2); padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); list-style: none; }
details.cm-older > summary::-webkit-details-marker { display: none; }
details.cm-older > summary .bi { width: 15px; height: 15px; color: var(--muted); }
details.cm-older[open] > summary { margin-bottom: .7rem; }
.cm-item details .btnrow { margin-top: .6rem; }
/* Om mig: hopfällbara poster och automatisk sparning */
.profile-form fieldset.item { padding: 0; overflow: hidden; }
details.it5 > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; }
details.it5 > summary::-webkit-details-marker { display: none; }
details.it5 > summary .chev { margin-left: auto; color: var(--muted); transition: transform .2s; flex: none; }
details.it5[open] > summary .chev { transform: rotate(180deg); }
details.it5[open] > summary { border-bottom: 1px solid var(--line); }
.it5-t { display: grid; min-width: 0; }
.it5-t strong { font-size: .98rem; }
.it5-t small { color: var(--muted); font-size: .84rem; }
.it5-body { padding: .9rem 1rem 1rem; }
#expList, #eduList { display: grid; gap: .5rem; margin-bottom: .7rem; }
.save5 { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .55rem .6rem .55rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.save5 span { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--ink-2); }
.save5 span .bi { width: 15px; height: 15px; color: var(--ok, #1E7A45); }
@media (max-width: 760px) { .save5 { bottom: 84px; } }
/* Rapport & logg: rapporten och all aktivitet sida vid sida */
.log5 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (min-width: 1150px) { .log5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .log5-report { position: sticky; top: 1rem; } }
.log5-act { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l, 22px); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
.log5-act .addev { margin: .2rem 0 1rem; }
.log5-act .cal4-wrap > .evform { margin-top: .6rem; }
.log5-report > section { margin-top: 0; }
.log5-act .cal4-wrap[open] > summary { display: inline-flex; }
.doc-thumb-inner .cvdoc { min-height: 1123px; }
.lmore { text-align: center; margin: 1.6rem 0 0; }
.lmore .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doclist { margin-bottom: 2rem; }
.act-fields dd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; grid-column: 1 / -1; }
.act-fields dd .copybtn { flex: none; }
.acc4-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: -.2rem 0 .6rem; }
/* Läsbarhet (WCAG AA) */
.mc-cell.we { color: color-mix(in srgb, var(--ink-2) 80%, var(--muted)); }
.ex-badge { background: #C24A0C; }
.ibtn.armed, .link.armed, button.armed { background: #C0392B !important; color: #fff !important; border-color: #C0392B !important; text-decoration: none; padding-inline: .5rem; border-radius: 8px; }
/* Övriga formulärsvar: korta fält två och två, långa över hela bredden */
.prefs5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; max-width: 900px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l, 22px); padding: 1.3rem 1.4rem; box-shadow: var(--sh-1); }
.prefs5 > .hint, .prefs5 > .wide, .prefs5 > button { grid-column: 1 / -1; }
.prefs5 > button { justify-self: start; }
@media (max-width: 700px) { .prefs5 { grid-template-columns: 1fr; } }

/* ---------- Köp ansökningar (#/kop) ---------- */
.buy5 { max-width: 860px; }
.buy-msg { display: flex; gap: .7rem; align-items: flex-start; }
.buy-msg > .ico { flex: none; margin-top: .1rem; color: var(--info); }
.buy-msg div { display: grid; gap: .15rem; }
.buy-done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.buy-done > .ico { color: var(--ok); }
.buy-bal { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--ink-2); background: var(--sunk); border-radius: var(--r-pill); padding: .4rem .9rem; margin: 0 0 1.2rem; }
.buy-bal .ico { width: 18px; height: 18px; color: var(--accent); }
.buy-form { display: grid; gap: 1rem; }
.buy-packs { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .8rem; }
.buy-pack { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1.25rem 1rem 1rem; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-m); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; font-weight: 400; margin: 0; }
.buy-pack:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); transform: translateY(-1px); }
.buy-pack input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.buy-pack:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.buy-pack:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.buy-pack:has(input:checked)::after { content: ''; position: absolute; top: .75rem; right: .75rem; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.buy-badge { position: absolute; top: -.7rem; left: 1rem; background: var(--accent-text); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .6rem; border-radius: var(--r-pill); }
.buy-n { color: var(--ink-2); font-size: .95rem; }
.buy-n strong { display: block; font-size: 2rem; line-height: 1.05; color: var(--ink); letter-spacing: -.02em; }
.buy-price { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.buy-per { font-size: .84rem; color: var(--muted); }
.buy-per b { display: block; color: var(--ok); font-weight: 600; margin-top: .1rem; }
.buy-vat { margin: -.4rem 0 0; }
.buy-what { display: flex; gap: .6rem; align-items: flex-start; background: var(--sunk); border-radius: var(--r-m); padding: .8rem 1rem; }
.buy-what .ico { flex: none; color: var(--accent); margin-top: .1rem; }
.buy-what p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.buy-consent { align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); }
.buy-consent input { margin-top: .2rem; }
.buy-consent .hint { display: block; margin-top: .25rem; font-weight: 400; }
.buy-consent.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.buy-form > .btn.big { justify-self: start; gap: .5rem; }
.buy-form > .btn.big .ico { width: 18px; height: 18px; }
.buy-methods { margin: -.4rem 0 0; }
.buy-seller { font-style: normal; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; }
.buy-seller strong { color: var(--ink-2); }
.buy-hist { margin-top: 2rem; }
.buy-hist h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.buy-tab { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.buy-tab th, .buy-tab td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.buy-tab th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--sunk); }
.buy-tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.buy-tab tr:last-child td { border-bottom: 0; }
a.credits { text-decoration: none; }
a.credits:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .buy-packs { grid-template-columns: 1fr; gap: .9rem; }
  .buy-pack { grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 1rem 2.9rem 1rem 1rem; }
  .buy-n, .buy-per { grid-column: 1; }
  .buy-n strong { display: inline; font-size: 1.5rem; margin-right: .2rem; }
  .buy-price { grid-column: 2; grid-row: 1 / span 2; }
  .buy-per b { display: inline; margin-left: .3rem; }
  .buy-pack:has(input:checked)::after { top: 50%; right: .9rem; transform: translateY(-50%); }
}
@media (max-width: 760px) {
  .buy-form > .btn.big { justify-self: stretch; justify-content: center; }
}
.ai-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.ai-note .ico { width: 14px; height: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.info-body .buy-seller { border: 1px solid var(--line); border-radius: var(--r-m); padding: .8rem 1rem; margin-bottom: 1.4rem; background: var(--surface); }
.info-prices { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.info-prices li { white-space: nowrap; display: flex; justify-content: space-between; gap: .5rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.ai-note { margin: .35rem 0 0; }
.buy-hist .hint { margin-top: .6rem; }

/* ---------- Intern kostnadsmätare (#/admin) ---------- */
.adm5 { max-width: 1040px; }
.adm-bar { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.adm-bar label { display: grid; gap: .3rem; font-size: .85rem; margin: 0; }
.adm-bar select, .adm-bar input { min-width: 140px; margin: 0; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.adm-kpi { display: grid; gap: .2rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.adm-kpi span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.adm-kpi strong { font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-kpi small { color: var(--muted); font-size: .8rem; }
.adm-sec { margin: 0 0 1.8rem; }
.adm-tab { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.adm-tab th, .adm-tab td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.adm-tab th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--sunk); font-weight: 600; }
.adm-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-tab tr:last-child td { border-bottom: 0; }
.adm-tab .neg, .adm5 small.neg { color: var(--danger); }
.adm-tab .pos { color: var(--ok); font-weight: 600; }
.adm-days { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow-x: auto; }
.adm-day { flex: 1 0 14px; height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 4px; }
.adm-day i { display: block; width: 100%; max-width: 22px; background: var(--accent); border-radius: 4px 4px 0 0; }
.adm-day span { font-size: .65rem; color: var(--muted); }
.adm-foot code, .adm-tab code { font-size: .82rem; }
@media (max-width: 760px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-sec { overflow-x: auto; } }
.adm-bar .adm-incl { align-self: end; padding-bottom: .6rem; display: flex; }

/* ---------- Bild till CV (pc5) ---------- */
.photo-card.pc5 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; }
.pc5 .pc-img { position: relative; width: 76px; height: 76px; margin: 0; cursor: pointer; overflow: visible; border: 0; box-shadow: none; background: none; }
.pc5 .pc-img img, .pc5 .pc-img .dp-nophoto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-2); }
.pc5 .pc-img .dp-nophoto { background: var(--sunk); color: var(--muted); }
.pc5 .pc-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: var(--sh-1); transition: transform .15s, color .15s; }
.pc5 .pc-cam .ico { width: 15px; height: 15px; }
.pc5 .pc-img:hover .pc-cam { transform: scale(1.08); color: var(--accent-text); }
.pc5 .pc-body { display: grid; gap: .5rem; min-width: 0; }
.pc5 h2 { font-size: 1.02rem; margin: 0; }
.pc5 .hint { margin: -.3rem 0 0; font-size: .85rem; }
.pc5 .pc-act { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pc5 .pc-act .btn { margin: 0; }
.pc5 .pc-del { color: var(--muted); }
.pc5 .pc-del:hover { color: var(--danger); }
.pc5 .pc-show { font-weight: 500; font-size: .88rem; color: var(--ink-2); gap: .5rem; }
.pc5 .pc-show > span { width: 36px; height: 22px; }
.pc5 .pc-show > span::after { width: 16px; height: 16px; }
.pc5 .pc-show input:checked + span::after { transform: translateX(14px); }
@media (max-width: 560px) { .photo-card.pc5 { flex-direction: row; grid-template-columns: auto minmax(0, 1fr); align-items: start; } }

/* ---------- Profil: inställningar som fällbara rubriker ---------- */
.set5 { display: grid; gap: .6rem; }
.set5-item { scroll-margin-top: 90px; }
.set5-item { margin: 0 !important; padding: 0 !important; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.set5-item > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .95rem 1.15rem; cursor: pointer; border-radius: inherit; }
.set5-item > summary::-webkit-details-marker { display: none; }
.set5-item > summary:hover { background: color-mix(in srgb, var(--sunk) 60%, transparent); }
.set5-item > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.set5-item > summary .sh4-ico { margin: 0; }
.set5-tx { display: grid; gap: .1rem; min-width: 0; }
.set5-tx strong { font-family: var(--font-display, inherit); font-size: 1.02rem; color: var(--ink); }
.set5-tx small { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set5-item[open] .set5-tx small { white-space: normal; }
.set5-st { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); }
.set5-st .badge5 { font-size: .74rem; font-weight: 600; padding: .15rem .55rem; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.set5-chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); transition: transform .2s; }
.set5-chev svg { width: 16px; height: 16px; }
.set5-item[open] .set5-chev { transform: rotate(180deg); }
.set5-item[open] { box-shadow: var(--sh-2, var(--sh-1)); border-color: var(--line-2); }
.set5-item[open] > summary { border-bottom: 1px solid var(--line); border-radius: 0; }
.set5-body { padding: 1rem 1.15rem 1.2rem; }
.set5-body > .sh4:first-child { display: none; }
.set5-body.profile-card, .set5-body section { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
@media (max-width: 560px) { .set5-item > summary { padding: .85rem .9rem; gap: .65rem; } .set5-tx small { display: none; } .set5-item[open] .set5-tx small { display: block; } .set5-body { padding: .9rem; } }
.set5-body .danger-zone .btn + .hint { margin-top: 1rem; }
@media (max-width: 1179px) { .prof5-top .photo-card { margin-top: 1rem !important; } }

/* ---------- Logiktester (#/coach?vy=logik) ---------- */
.lg5 { display: grid; gap: 1.4rem; max-width: 1040px; }
.lg-intro { padding: 1.3rem 1.4rem; border-radius: var(--r-l); background: linear-gradient(140deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--line); }
.lg-intro h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.lg-intro p { margin: 0 0 .4rem; max-width: 70ch; }
.lg-intro .hint { margin: 0; }
.lg-up ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lg-up a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .75rem 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lg-up a:hover { border-color: var(--accent); }
.lg-up a span { color: var(--muted); font-size: .88rem; }
.lg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.lg-card { display: grid; gap: .45rem; align-content: start; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.lg-card h3 { margin: .2rem 0 0; font-size: 1.08rem; }
.lg-card p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.lg-card .lg-meta { color: var(--muted); font-size: .82rem; }
.lg-card .btn { justify-self: start; margin-top: .4rem; }
.lg-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.lg-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lg-hist li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 50px 140px; gap: .8rem; align-items: center; font-size: .9rem; padding: .45rem .8rem; background: var(--surface); border-radius: var(--r-s); border: 1px solid var(--line); }
.lg-hbar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.lg-hbar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.lg-know details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .8rem 1rem; margin-bottom: .5rem; }
.lg-know summary { cursor: pointer; font-weight: 600; }
.lg-know details p { margin: .6rem 0 0; color: var(--ink-2); }
.lg-tipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.lg-tipgrid > div { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.lg-tipgrid h4 { margin: 0 0 .35rem; font-size: .98rem; }
.lg-tipgrid p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.lg-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; margin-top: 1.2rem; padding: .8rem 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; max-width: 460px; }
.lg-teaser:hover { border-color: var(--accent); }
.lg-teaser > .ico:first-child { color: var(--accent-text); }
.lg-teaser span { display: grid; }
.lg-teaser small { color: var(--muted); }
/* Själva testet */
.lg-run { display: grid; gap: 1rem; padding: 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); scroll-margin-top: 90px; }
.lg-top { display: flex; align-items: center; gap: 1rem; }
.lg-step { font-weight: 700; }
.lg-time { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); background: var(--sunk); padding: .2rem .65rem; border-radius: 99px; }
.lg-time.low { color: var(--danger); }
.lg-bar { height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.lg-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 1s linear; }
.lg-ask { margin: 0; font-weight: 600; }
.lg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 360px); padding: 6px; background: var(--line-2); border-radius: 14px; justify-self: center; color: var(--ink); }
.lg-grid.small { width: 180px; gap: 3px; padding: 3px; border-radius: 9px; }
.lg-sq { aspect-ratio: 1; background: var(--surface); border-radius: 9px; display: grid; place-items: center; }
.lg-grid.small .lg-sq { border-radius: 6px; }
.lg-sq.lg-miss { font-size: 2rem; font-weight: 700; color: var(--muted); background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 8px, var(--sunk) 8px, var(--sunk) 16px); }
.lg-grid.small .lg-miss { font-size: 1.1rem; }
.lg-cell { width: 100%; height: 100%; display: block; }
.lg-opts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.lg-opts.serie { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 620px; }
.lg-opt { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: .4rem; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lg-opts.serie .lg-opt { aspect-ratio: auto; padding: 1rem .4rem; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-opt:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.lg-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lg-opt b { position: absolute; top: 4px; left: 7px; font-size: .72rem; color: var(--muted); font-weight: 700; }
.lg-seq { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; justify-content: center; }
.lg-seq span { min-width: 3.2rem; padding: .7rem .6rem; text-align: center; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sunk); border-radius: 12px; }
.lg-seq .lg-miss { background: var(--surface); border: 2px dashed var(--line-2); color: var(--muted); }
.lg-seq.small { justify-content: flex-start; }
.lg-seq.small span { min-width: 2.4rem; padding: .35rem .45rem; font-size: 1rem; border-radius: 8px; }
.lg-seq .lg-miss.ok { border: 2px solid var(--ok); color: var(--ok); }
.lg-keys { margin: 0; text-align: center; }
/* Resultat */
.lg-res { display: grid; gap: .8rem; padding: 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); scroll-margin-top: 90px; }
.lg-score { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.lg-score strong { font-size: 2.4rem; letter-spacing: -.02em; }
.lg-score span { color: var(--muted); }
.lg-res > p { margin: 0; max-width: 70ch; }
.lg-res h3 { margin: .8rem 0 0; font-size: 1.05rem; }
.lg-review { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lg-review > li { border: 1px solid var(--line); border-radius: var(--r-m); padding: .8rem 1rem; }
.lg-review > li.bad { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.lg-rv-h { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; }
.lg-rv-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.lg-rv-mark .ico { width: 14px; height: 14px; }
.bad .lg-rv-mark { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.lg-rv-b { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.lg-rv-b ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .92rem; flex: 1 1 260px; }
.lg-rv-pic { display: flex; align-items: center; gap: .6rem; }
.lg-rv-ans { width: 56px; height: 56px; padding: 4px; border: 2px solid var(--ok); border-radius: 8px; color: var(--ink); display: block; }
@media (max-width: 760px) {
  .lg-cards, .lg-tipgrid { grid-template-columns: 1fr; }
  .lg-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-opts.serie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-hist li { grid-template-columns: 64px minmax(0, 1fr) 44px; }
  .lg-hist .lg-hbar { display: none; }
  .lg-seq span { min-width: 2.6rem; font-size: 1.15rem; padding: .55rem .4rem; }
}

/* =====================================================================
   v7 Marinblått glas: det blå finns kvar men är halvgenomskinligt, mjukt och
   integrerat i bakgrunden i stället för hårda block. Orange som accent.
   ===================================================================== */
:root { --glass: color-mix(in srgb, var(--surface) 72%, transparent); --glass-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-line: rgba(255, 255, 255, .78); --glass-hover: rgba(36, 52, 74, .055);
  --navy-glass: linear-gradient(180deg, rgba(52, 75, 106, .80) 0%, rgba(36, 53, 78, .86) 55%, rgba(30, 45, 67, .90) 100%);
  --navy-edge: rgba(255, 255, 255, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(16, 29, 50, .58); --glass-strong: rgba(16, 29, 50, .82); --glass-line: rgba(255, 255, 255, .07); --glass-hover: rgba(255, 255, 255, .06);
  --navy-glass: linear-gradient(180deg, rgba(34, 52, 80, .72), rgba(14, 25, 44, .82)); --navy-edge: rgba(255, 255, 255, .07); } }
:root[data-theme="dark"] { --glass: rgba(16, 29, 50, .58); --glass-strong: rgba(16, 29, 50, .82); --glass-line: rgba(255, 255, 255, .07); --glass-hover: rgba(255, 255, 255, .06);
  --navy-glass: linear-gradient(180deg, rgba(34, 52, 80, .72), rgba(14, 25, 44, .82)); --navy-edge: rgba(255, 255, 255, .07); }

/* Sidomenyn: marinblått glas med en svag orange glöd upptill */
.rail, :root[data-theme="dark"] .rail, :root:not([data-theme="light"]) .rail {
  background: radial-gradient(240px 160px at 30% 0%, rgba(255, 138, 61, .16), transparent 70%), var(--navy-glass) !important;
  border: 1px solid var(--navy-edge) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 30px 60px -36px rgba(20, 32, 52, .55) !important; }
.rail li a { border-radius: 14px; }
.rail li a:hover, .nav-g.fold button:hover { background: rgba(255, 255, 255, .07) !important; }
.rail li a[aria-current="page"], :root[data-theme="dark"] .rail li a[aria-current="page"], :root:not([data-theme="light"]) .rail li a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255, 138, 61, .20), rgba(255, 255, 255, .06) 70%) !important; color: #fff !important;
  box-shadow: inset 2px 0 0 var(--accent-2) !important; }
.rail li a[aria-current="page"] svg { color: var(--accent-2) !important; filter: none; }
.rail li.sub a[aria-current="page"] { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 2px 0 0 var(--accent-2) !important; color: #fff !important; }
.rail li.sub a, .rail ul.nav-main > .fold-box.kids li.deep a { border-left-color: rgba(255, 255, 255, .10) !important; }
.rail ul.nav-foot { border-top-color: rgba(255, 255, 255, .08) !important; }
.rail-foot { background: rgba(255, 255, 255, .06) !important; }
@media (max-width: 860px) {
  .mtop { background: radial-gradient(260px 120px at 15% 0%, rgba(255, 138, 61, .14), transparent 70%), var(--navy-glass) !important; border-bottom: 1px solid var(--navy-edge);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 30px -22px rgba(20, 32, 52, .6) !important; }
  .more-sheet { background: var(--navy-glass) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-color: var(--navy-edge) !important; }
}

/* Översiktens hälsning: marinblått som tonar ut mot höger i stället för ett hårt block */
.d4-hero, :root[data-theme="dark"] .d4-hero {
  background:
    radial-gradient(520px 280px at 88% -10%, rgba(255, 138, 61, .30), transparent 64%),
    linear-gradient(115deg, rgba(43, 63, 90, .94) 0%, rgba(52, 75, 106, .84) 45%, rgba(78, 106, 143, .62) 100%) !important;
  border: 1px solid var(--navy-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 30px 60px -40px rgba(20, 32, 52, .6) !important; }
.d4-hero::after { border-color: rgba(255, 255, 255, .045); }
.d4-goal { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.d4-ring b { background: rgba(30, 45, 67, .92); }

/* Coachens teaser och äldre sidhuvuden: samma mjuka marin */
.coach-teaser, .dash-head {
  background: radial-gradient(420px 220px at 100% 0%, rgba(255, 138, 61, .30), transparent 64%), linear-gradient(120deg, rgba(43, 63, 90, .93), rgba(78, 106, 143, .66)) !important;
  border: 1px solid var(--navy-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 50px -36px rgba(20, 32, 52, .6) !important; }

/* Ny ansökan i mörkt läge: mörk text på ljus orange */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail ul li a.rail-new, :root:not([data-theme="light"]) .rail ul li a.rail-new svg { color: #1E0D02 !important; } }
:root[data-theme="dark"] .rail ul li a.rail-new, :root[data-theme="dark"] .rail ul li a.rail-new svg { color: #1E0D02 !important; }

/* ---------- Intervju: påminnelser, övningsintervju och digital guide ---------- */
.ivr5 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .85rem 1.1rem; margin: 1rem 0; border-radius: var(--r-m); background: var(--glass, var(--surface)); border: 1px solid var(--line); }
.ivr5 > div { display: grid; gap: .1rem; }
.ivr5 > div span { color: var(--muted); font-size: .88rem; }
.ivr-ic, .mock-ic, .dg-ic, .mn-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.mock5 { margin: 1rem 0 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--r-l); background: radial-gradient(520px 220px at 100% 0%, rgba(255, 138, 61, .12), transparent 66%), var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); display: grid; gap: .9rem; }
.mock-intro { display: flex; gap: .9rem; align-items: flex-start; }
.mock-intro h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.mock-intro p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.mock-next { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink-2); font-size: .92rem; }
.mock-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.1rem; }
.mock-opts label:not(.check) { display: grid; gap: .3rem; font-size: .85rem; margin: 0; }
.mock-opts select { margin: 0; min-width: 160px; }
.mock-opts label.check { margin: 0 0 .55rem; }
.mock-opts .btn { margin-left: auto; }
.mock-last { border-top: 1px solid var(--line); padding-top: .7rem; }
.mock-last summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.mock-run { display: grid; gap: .8rem; }
.mock-top { display: flex; align-items: center; gap: .9rem; }
.mock-live { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--accent-text); }
.mock-live .ico { width: 12px; height: 12px; animation: mkpulse 1.4s ease-in-out infinite; }
@keyframes mkpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mock-live .ico { animation: none; } }
.mock-count { color: var(--muted); font-size: .88rem; }
.mock-top .link { margin-left: auto; }
.mock-log { display: grid; gap: .6rem; max-height: 460px; overflow-y: auto; padding: .4rem; }
.mk-msg { max-width: 82%; padding: .7rem .95rem; border-radius: 16px; background: var(--sunk); color: var(--ink); }
.mk-msg p { margin: 0 0 .4rem; } .mk-msg p:last-child { margin: 0; }
.mk-msg.candidate { justify-self: end; background: var(--accent-soft); border-bottom-right-radius: 6px; }
.mk-msg.interviewer { border-bottom-left-radius: 6px; }
.mk-who { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.mk-msg.typing { display: inline-flex; gap: 4px; width: auto; }
.mk-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: mkpulse 1s infinite; }
.mk-msg.typing span:nth-child(2) { animation-delay: .2s; } .mk-msg.typing span:nth-child(3) { animation-delay: .4s; }
.mock-ans textarea { margin: 0 0 .5rem; }
.mock-ans .btnrow { align-items: center; }
.mock-fb-h { margin: .4rem 0 0; }
.mock-fb { display: grid; gap: .8rem; }
.mock-sum { margin: 0; padding: .9rem 1rem; border-radius: var(--r-m); background: var(--ok-soft); color: var(--ink); }
.mock-fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.mock-fb-grid > div { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.mock-fb-grid h3 { margin: 0 0 .4rem; font-size: .95rem; }
.mock-fb-grid ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .92rem; }
.dg5 { margin: 0 0 1.4rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.dg5 > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; }
.dg5 > summary::-webkit-details-marker { display: none; }
.dg5 > summary > span:nth-child(2) { display: grid; }
.dg5 > summary small { color: var(--muted); }
.dg5[open] .set5-chev { transform: rotate(180deg); }
.dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 0 1.2rem 1rem; }
.dg-grid section { padding: .9rem 1rem; border-radius: var(--r-m); background: var(--sunk); }
.dg-grid h3 { margin: 0 0 .45rem; font-size: .95rem; }
.dg-grid ul { margin: 0; padding-left: 1.05rem; font-size: .9rem; color: var(--ink-2); display: grid; gap: .25rem; }
.dg-grid .dg-second { grid-column: 1 / -1; background: var(--accent-soft); }
.dg-honest { margin: 0; padding: 0 1.2rem 1.1rem; }
.mock-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: var(--r-l); text-decoration: none; color: var(--ink);
  background: radial-gradient(420px 200px at 100% 0%, rgba(255, 138, 61, .16), transparent 66%), var(--glass, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: var(--sh-1); }
.mock-nudge:hover { border-color: var(--accent); }
.mn-tx { display: grid; gap: .1rem; } .mn-tx small { color: var(--ink-2); }
@media (max-width: 760px) {
  .dg-grid, .mock-fb-grid { grid-template-columns: 1fr; }
  .mock-opts .btn { margin-left: 0; width: 100%; justify-content: center; }
  .mk-msg { max-width: 92%; }
  .mock-nudge, .ivr5 { grid-template-columns: auto minmax(0, 1fr); }
  .mock-nudge .btn, .ivr5 .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 860px) { .rail li a[aria-current="page"], :root:not([data-theme="light"]) .rail li a[aria-current="page"], :root[data-theme="dark"] .rail li a[aria-current="page"] { box-shadow: none !important; background: rgba(255, 138, 61, .18) !important; } }

/* ---------- Logiktester v2: enhetliga kort, resultat och avklarade test ---------- */
.lg-card { display: flex; flex-direction: column; gap: .55rem; }
.lg-card p { flex: 1; }
.lg-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
.lg-pill { font-size: .76rem; font-weight: 600; padding: .22rem .6rem; border-radius: 99px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.lg-pill.has { background: var(--ok-soft); color: var(--ok); }
.lg-chips { list-style: none; margin: .2rem 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lg-chips li { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-2); background: var(--sunk); padding: .25rem .6rem; border-radius: 99px; }
.lg-chips .ico { width: 14px; height: 14px; color: var(--muted); }
.lg-card .lg-go { width: 100%; justify-content: center; margin-top: .2rem; }
.lg-card:hover .lg-go { border-color: var(--accent); color: var(--accent-text); }
.lg-ic.sm { width: 34px; height: 34px; border-radius: 10px; }
.lg-ic.sm .ico { width: 17px; height: 17px; }
.lg-ring { --p: 0; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--sunk) 0); flex: none; }
.lg-ring b { display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); font-family: var(--display); font-variant-numeric: tabular-nums; line-height: 1; }
.lg-ring b small { font-size: .5em; color: var(--muted); }
.lg-ring.l { width: 132px; height: 132px; } .lg-ring.l b { width: 108px; height: 108px; font-size: 2.3rem; }
.lg-ring.s { width: 42px; height: 42px; } .lg-ring.s b { width: 34px; height: 34px; font-size: .78rem; font-weight: 700; }
/* Resultat */
.lg-res { gap: 1rem; }
.lg-res-hero { display: flex; align-items: center; gap: 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--r-l);
  background: radial-gradient(420px 220px at 100% 0%, rgba(255, 138, 61, .16), transparent 66%), linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--line); }
.lg-res-hero.tier-low, .lg-res-hero.tier-mid { background: radial-gradient(420px 220px at 100% 0%, rgba(78, 106, 143, .14), transparent 66%), var(--sunk); }
.lg-res-txt { display: grid; gap: .35rem; justify-items: start; }
.lg-res-txt h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; }
.lg-res-meta { margin: 0; color: var(--muted); font-weight: 600; }
.lg-res-praise { margin: 0; color: var(--ink-2); max-width: 62ch; }
.lg-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 99px; }
.lg-badge .ico { width: 14px; height: 14px; }
.lg-badge.best { background: linear-gradient(135deg, #FFD48A, #FFAE73); color: #5A2A04; }
.lg-badge.up { background: var(--ok-soft); color: var(--ok); }
.lg-badge.up .ico { transform: rotate(-45deg); }
.lg-badge.first { background: var(--info-soft); color: var(--info); }
.lg-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.4rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: var(--r-m); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
.lg-next-txt { display: grid; gap: .1rem; }
.lg-next-txt small { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--accent-text); }
.lg-next-txt strong { font-size: 1.05rem; }
.lg-next-txt span { color: var(--muted); font-size: .9rem; }
.lg-next-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-next-btns .btn { margin: 0; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { background: var(--sunk); }
.lg-rv > summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 600; color: var(--ink-2); padding: .4rem 0; }
.lg-rv > summary .ico { width: 17px; height: 17px; }
.lg-rv[open] > summary { margin-bottom: .6rem; }
/* Mina avklarade test */
.lg-done { display: grid; gap: .9rem; padding: 1.3rem 1.4rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.lg-done-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.lg-done-h h3 { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.15rem; }
.lg-done-h h3 .ico { color: var(--accent); }
.lg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.lg-stats > div { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: var(--r-m); background: var(--sunk); }
.lg-stats b { font: 750 1.6rem/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.lg-stats b small { font-size: .55em; color: var(--muted); font-weight: 700; }
.lg-stats span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.lg-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.lg-trend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: var(--r-m); border: 1px solid var(--line); }
.lg-trend-t { display: grid; } .lg-trend-t span { font-size: .8rem; color: var(--muted); }
.lg-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.lg-spark i { width: 6px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent-2), var(--accent)); opacity: .85; }
.lg-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lg-sessions li { display: grid; grid-template-columns: auto minmax(0, 1fr) 48px 52px auto; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: var(--r-m); background: var(--field); }
.lg-s-t { display: grid; } .lg-s-t small { color: var(--muted); font-size: .8rem; }
.lg-s-score { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.lg-delta { font-size: .78rem; font-weight: 700; text-align: center; padding: .15rem .4rem; border-radius: 99px; }
.lg-delta.up { color: var(--ok); background: var(--ok-soft); } .lg-delta.down { color: var(--muted); background: var(--sunk); }
@media (max-width: 760px) {
  .lg-res-hero { flex-direction: column; text-align: center; } .lg-res-txt { justify-items: center; }
  .lg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-next-btns { width: 100%; } .lg-next-btns .btn { flex: 1 1 auto; justify-content: center; }
  .lg-sessions li { grid-template-columns: auto minmax(0, 1fr) auto auto; } .lg-sessions .lg-delta, .lg-sessions li > span:nth-child(3) { display: none; }
}
.lg-pill.has, .lg-delta.up, .lg-badge.up { color: color-mix(in srgb, var(--ok) 82%, #000); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-pill.has, :root:not([data-theme="light"]) .lg-delta.up, :root:not([data-theme="light"]) .lg-badge.up { color: var(--ok); } }
:root[data-theme="dark"] .lg-pill.has, :root[data-theme="dark"] .lg-delta.up, :root[data-theme="dark"] .lg-badge.up { color: var(--ok); }
.lg-ring b { display: flex; align-items: baseline; justify-content: center; gap: 1px; }
#lgHome { display: grid; gap: 1.4rem; }
#lgHome[hidden] { display: none; }
.lg-ring b { align-items: center; } .lg-ring b small { margin-top: .45em; }

/* ---------- Fråga coachen: chatt med boten ---------- */
.bot-av { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff;
  background: radial-gradient(60px 40px at 30% 0%, rgba(255, 138, 61, .55), transparent 70%), linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 8px 18px -10px rgba(30, 44, 62, .6); }
.bot-av .ico { width: 21px; height: 21px; }
.bot-av.sm { width: 32px; height: 32px; border-radius: 11px; } .bot-av.sm .ico { width: 17px; height: 17px; }
.chat5 { max-width: 920px; }
.bot5 { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; height: min(74vh, 760px); min-height: 460px; border-radius: 26px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(30, 44, 62, .45); }
.bot-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; color: #fff;
  background: radial-gradient(320px 120px at 15% 0%, rgba(255, 138, 61, .25), transparent 70%), linear-gradient(120deg, var(--navy-2), var(--navy)); }
.bot-head .bot-av { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.bot-who { display: grid; } .bot-who strong { font-size: 1.02rem; }
.bot-who small { display: inline-flex; align-items: center; gap: .35rem; color: var(--on-navy-2); font-size: .8rem; }
.bot-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.bot-head .btn.ghost { margin-left: auto; color: var(--on-navy-2); }
.bot-head .btn.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.bot-log { overflow-y: auto; padding: 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; background: linear-gradient(180deg, var(--field), var(--surface)); scroll-behavior: smooth; }
.bot-row { display: flex; align-items: flex-end; gap: .55rem; max-width: 86%; }
.bot-row.me { align-self: flex-end; }
.bot-bub { padding: .7rem .95rem; border-radius: 18px; line-height: 1.5; font-size: .96rem; }
.bot-bub p { margin: 0 0 .45rem; } .bot-bub p:last-child { margin: 0; }
.bot-row.bot .bot-bub { background: var(--sunk); color: var(--ink); border-bottom-left-radius: 6px; }
.bot-row.me .bot-bub { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 8px 18px -12px rgba(224, 86, 11, .7); }
:root[data-theme="dark"] .bot-row.me .bot-bub { color: #1E0D02; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bot-row.me .bot-bub { color: #1E0D02; } }
.bot-row.typing .bot-bub { display: inline-flex; gap: 4px; padding: .85rem 1rem; }
.bot-row.typing .bot-bub span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: mkpulse 1s infinite; }
.bot-row.typing .bot-bub span:nth-child(2) { animation-delay: .2s; } .bot-row.typing .bot-bub span:nth-child(3) { animation-delay: .4s; }
.bot-sugg { display: flex; gap: .4rem; flex-wrap: wrap; padding: .5rem 1.1rem 0; }
.bot-sugg:empty { display: none; }
.bot-sugg .chip { font-size: .85rem; }
.bot-input { display: flex; align-items: flex-end; gap: .5rem; margin: .7rem 1.1rem .4rem; padding: .35rem .35rem .35rem .9rem; border-radius: 22px; background: var(--field); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s; }
.bot-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.bot-input textarea { flex: 1; margin: 0; border: 0; background: transparent; resize: none; min-height: 0; padding: .55rem 0; box-shadow: none !important; outline: none; max-height: 160px; line-height: 1.45; }
.bot-send { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 16px -10px rgba(224, 86, 11, .9); transition: transform .15s; }
.bot-send:hover { transform: scale(1.06); } .bot-send:disabled { opacity: .5; cursor: default; transform: none; }
.bot-send .ico { width: 18px; height: 18px; }
.bot-ai { display: flex; align-items: center; gap: .35rem; margin: 0 1.2rem .8rem; font-size: .76rem; color: var(--muted); }
.bot-ai .ico { width: 13px; height: 13px; }
/* Frågefältet på coachens startsida */
.ask-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; margin: 0 0 1.2rem; padding: .75rem .8rem .75rem .9rem; border-radius: 22px;
  background: radial-gradient(420px 160px at 0% 0%, rgba(255, 138, 61, .12), transparent 70%), var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: 0 16px 40px -28px rgba(30, 44, 62, .5); }
.ask-t-tx { display: grid; gap: .1rem; }
.ask-t-tx strong { font-size: .82rem; color: var(--accent-text); text-transform: uppercase; letter-spacing: .06em; }
.ask-t-tx input { margin: 0; border: 0; background: transparent; padding: .15rem 0; font-size: 1.02rem; box-shadow: none !important; outline: none; min-height: 0; }
.ask-teaser:focus-within { border-color: var(--accent); }
@media (max-width: 760px) { .bot5 { height: calc(100vh - 230px); border-radius: 20px; } .bot-row { max-width: 94%; } }
.ph4-crumb a { display: inline-flex; align-items: center; gap: .3rem; }
.ph4-crumb a .ico { width: 16px; height: 16px; }
@media (max-width: 760px) { .bot5 { height: calc(100dvh - 330px); min-height: 380px; } .bot-new-l { display: none; } .bot-head .btn.ghost { padding: .45rem; } }

/* ---------- CV: Mina färdiga CV (cv6) ---------- */
.cv6-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 0 0 1.8rem; }
.cv6-sum a { display: flex; align-items: baseline; gap: .5rem; padding: .85rem 1.1rem; border-radius: var(--r-m); background: var(--glass, var(--surface)); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); transition: border-color .15s; }
.cv6-sum a:hover { border-color: var(--accent); }
.cv6-sum b { font: 750 1.6rem/1 var(--display); color: var(--ink); }
.cv6-sum span { font-size: .9rem; font-weight: 600; }
.cv6-sec { margin: 0 0 2.2rem; scroll-margin-top: 90px; }
.cv6-h { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.cv6-h > div { flex: 1; min-width: 0; }
.cv6-h h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.2rem; }
.cv6-h p { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.cv6-hic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); }
.cv6-n { font: 700 .78rem var(--font); color: var(--muted); background: var(--sunk); padding: .1rem .5rem; border-radius: 99px; }
.cv6-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 99px; white-space: nowrap; }
.cv6-tag.std { background: color-mix(in srgb, var(--navy-3) 16%, transparent); color: var(--navy); }
.cv6-tag.ad { background: var(--accent-soft); color: var(--accent-text); }
:root[data-theme="dark"] .cv6-tag.std { color: #B9CBE6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cv6-tag.std { color: #B9CBE6; } }
.cv6-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.cv6-card { display: flex; flex-direction: column; gap: .6rem; min-height: 220px; padding: 1.1rem 1.15rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cv6-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.cv6-card.std { border-top: 3px solid var(--navy-3); }
.cv6-top { display: flex; align-items: center; justify-content: space-between; }
.cv6-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); }
.cv6-card h3 { margin: 0; font-size: 1.04rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cv6-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start; flex: 1; }
.cv6-roles li { font-size: .78rem; padding: .2rem .55rem; border-radius: 99px; background: var(--sunk); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv6-roles li.more { background: transparent; color: var(--muted); }
.cv6-foot { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); }
.cv6-foot .btn { flex: 1; justify-content: center; margin: 0; }
.cv6-card.add { align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--ink-2); background: transparent; border: 2px dashed var(--line-2); box-shadow: none; }
.cv6-card.add:hover { border-color: var(--accent); color: var(--accent-text); }
.cv6-card.add span:last-child { font-size: .85rem; color: var(--muted); }
.cv6-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cv6-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); border-left: 3px solid var(--accent-2); }
.cv6-id { display: grid; gap: .1rem; min-width: 0; }
.cv6-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv6-id span { display: flex; flex-wrap: wrap; gap: .2rem .7rem; color: var(--muted); font-size: .88rem; }
.cv6-id em { display: inline-flex; align-items: center; gap: .25rem; font-style: normal; color: var(--ink-2); }
.cv6-id em .ico { width: 14px; height: 14px; }
.cv6-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.cv6-vers { position: relative; }
.cv6-vers > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 99px; background: var(--sunk); color: var(--ink-2); cursor: pointer; }
.cv6-vers > summary::-webkit-details-marker { display: none; }
.cv6-vers > summary .ico { width: 14px; height: 14px; }
.cv6-vers ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 280px; list-style: none; margin: 0; padding: .4rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); display: grid; gap: 2px; }
.cv6-vers li { display: grid; padding: .45rem .6rem; border-radius: 10px; }
.cv6-vers li:hover { background: var(--sunk); }
.cv6-vers li a { font-weight: 600; text-decoration: none; color: var(--ink); }
.cv6-vers li small { color: var(--muted); font-size: .78rem; }
.cv6-row > .btn { margin: 0; }
.cv6-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.cv6-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.cv6-file:hover { border-color: var(--accent); }
.cv6-fic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); }
.cv6-ft { display: grid; min-width: 0; } .cv6-ft strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; } .cv6-ft small { color: var(--muted); font-size: .8rem; }
.cv6-file > .ico { color: var(--muted); }
.cv6-empty { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: var(--r-m); border: 2px dashed var(--line-2); color: var(--muted); }
.cv6-empty p { margin: 0; flex: 1; }
@media (max-width: 760px) {
  .cv6-sum { grid-template-columns: 1fr 1fr 1fr; } .cv6-sum a { flex-direction: column; gap: .15rem; padding: .7rem; } .cv6-sum span { font-size: .78rem; }
  .cv6-row { grid-template-columns: auto minmax(0, 1fr); } .cv6-meta { grid-column: 1 / -1; justify-content: flex-start; } .cv6-row > .btn { grid-column: 1 / -1; justify-content: center; }
  .cv6-h .cv6-tag { display: none; } .cv6-vers ul { left: 0; right: auto; }
}
.cv6-row > .act-av { grid-column: 1; grid-row: 1; position: static; order: 0; margin: 0; }
.cv6-row > .cv6-id { grid-column: 2; grid-row: 1; }
.cv6-row > .cv6-meta { grid-column: 3; grid-row: 1; }
.cv6-row > .btn { grid-column: 4; grid-row: 1; }
.cv6-card.std { border-top: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--navy-3), var(--sh-1); }
.cv6-row { border-left: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent-2), var(--sh-1); }
.pill.st-intervju, .pill.st-erbjudande { color: color-mix(in srgb, var(--ok) 82%, #000); }
@media (max-width: 760px) { .cv6-row > .cv6-meta, .cv6-row > .btn { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 760px) { .cv6-card.add { min-height: 0; padding: 1.2rem; } }
/* CV för annonser: alla versioner listade under jobbet */
.cv6-ads { display: grid; gap: .8rem; }
.cv6-ad { border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent-2), var(--sh-1); overflow: hidden; }
.cv6-ad > .cv6-row { box-shadow: none; border: 0; border-radius: 0; background: transparent; }
.cv6-ad .cv6-vers { position: static; list-style: none; margin: 0; padding: .3rem .8rem .7rem 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--sunk) 45%, transparent); min-width: 0; box-shadow: none; border-radius: 0; }
.cv6-ad .cv6-vers li { padding: 0; }
.cv6-ad .cv6-vers a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; padding: .55rem .7rem; border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); margin-top: .4rem; }
.cv6-ad .cv6-vers a:hover { border-color: var(--accent); }
.cv6-ad .cv6-vers a > .ico { margin-top: .15rem; color: var(--muted); }
.cv6-ad .cv6-vers span { display: grid; min-width: 0; }
.cv6-ad .cv6-vers strong { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.cv6-ad .cv6-vers small { color: var(--muted); font-size: .78rem; }
.cv6-new { font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); margin-left: .25rem; white-space: nowrap; }
.cv6-addline { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .55rem .9rem; border-radius: 99px; border: 1.5px dashed var(--line-2); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; }
.cv6-addline small { color: var(--muted); font-weight: 400; }
.cv6-addline:hover { border-color: var(--accent); color: var(--accent-text); }
.cv6-files { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cv6-ft strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.cv6-card { min-height: 0; }
@media (max-width: 760px) { .cv6-ad .cv6-vers { padding-left: .8rem; } .cv6-addline small { display: none; } }
/* Kalenderförslag i chatten */
.bot-cal { display: grid; gap: .5rem; margin: -.2rem 0 .2rem 2.6rem; max-width: 560px; }
.bot-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .8rem .9rem; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--sh-1); }
.bot-ev.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.bot-ev.skipped { opacity: .6; }
.bot-ev-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.bot-ev.done .bot-ev-ic { background: var(--ok-soft); color: var(--ok); }
.bot-ev-tx { display: grid; gap: .15rem; min-width: 0; }
.bot-ev-tx strong { font-size: .95rem; }
.bot-ev-tx span { display: flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--ink-2); overflow-wrap: anywhere; }
.bot-ev-tx .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.bot-ev-act { grid-column: 2; display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.bot-ev-act .btn { margin: 0; }
.bot-ev-ok { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .85rem; color: color-mix(in srgb, var(--ok) 82%, #000); }
:root[data-theme="dark"] .bot-ev-ok { color: var(--ok); }
@media (max-width: 760px) { .bot-cal { margin-left: 0; } }
/* CV-versioner under ett jobb: en lista uppifrån och ned */
.cv6-ad .cv6-vers { display: block; padding: .4rem 1rem .9rem 4.1rem; }
.cv6-ad .cv6-vers li { position: relative; padding: 0; border-radius: 0; }
.cv6-ad .cv6-vers li:hover { background: none; }
.cv6-ad .cv6-vers li + li::before { content: ""; position: absolute; left: 1.05rem; top: -.4rem; height: .8rem; width: 2px; background: var(--line-2); }
.cv6-ad .cv6-vers a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; margin-top: .4rem; padding: .6rem .85rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cv6-ad .cv6-vers a > .ico { margin: 0; color: var(--muted); }
.cv6-vi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); }
.cv6-vi .ico { width: 16px; height: 16px; }
.cv6-ad .cv6-vers li.main .cv6-vi { background: var(--accent-soft); color: var(--accent-text); }
.cv6-ad .cv6-vers li.main a { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.cv6-vt { display: grid; min-width: 0; }
.cv6-vt strong { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .92rem; font-weight: 600; }
.cv6-vw { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv6-vw .ico { width: 14px; height: 14px; }
@media (max-width: 760px) { .cv6-ad .cv6-vers { padding-left: 1rem; } .cv6-ad .cv6-vers a { grid-template-columns: auto minmax(0, 1fr) auto; } .cv6-vw { grid-column: 2; grid-row: 2; } }
/* Standard-CV och övriga sparade: listor uppifrån och ned */
.cv6-grid { grid-template-columns: 1fr; gap: .5rem; }
.cv6-card.std { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "top title foot" "top roles foot"; align-items: center; column-gap: 1rem; row-gap: .35rem; min-height: 0; padding: .85rem 1rem; border-radius: var(--r-m); box-shadow: inset 3px 0 0 var(--navy-3), var(--sh-1); }
.cv6-card.std:hover { transform: none; border-color: color-mix(in srgb, var(--navy-3) 45%, var(--line)); }
.cv6-card.std .cv6-top { grid-area: top; }
.cv6-card.std .cv6-top .cv6-tag { display: none; }
.cv6-card.std h3 { grid-area: title; min-height: 0; display: block; font-size: 1rem; }
.cv6-card.std .cv6-roles { grid-area: roles; flex: none; }
.cv6-card.std .cv6-foot { grid-area: foot; margin: 0; padding: 0; border: 0; }
.cv6-card.std .cv6-foot .btn { flex: none; min-width: 130px; }
.cv6-files { grid-template-columns: 1fr; gap: .4rem; }
.cv6-file { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .85rem; padding: .65rem .9rem; }
.cv6-ft strong { -webkit-line-clamp: 1; }
@media (max-width: 760px) {
  .cv6-card.std { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top title" "roles roles" "foot foot"; }
  .cv6-card.std .cv6-foot .btn { flex: 1; }
  .cv6-file { grid-template-columns: auto minmax(0, 1fr) auto; } .cv6-file .cv6-vw { grid-column: 2; grid-row: 2; }
}
.cv6-ad .cv6-vers .cv6-vw { display: inline-flex; }
@media (max-width: 760px) { .cv6-ad .cv6-vers .cv6-vw:empty { display: none; } }

/* ---------- Kortare meny: avdelare i stället för rubriker, + bredvid Mina ansökningar, kompakt fot ---------- */
.rail { padding-top: 1rem; padding-bottom: .8rem; }
.rail .brand { padding-bottom: .8rem !important; }
.rail ul.nav-main { gap: 1px; }
.rail li a, .nav-g.fold button { padding-top: .5rem !important; padding-bottom: .5rem !important; font-size: .94rem; }
.rail li.sub a { padding-top: .38rem !important; padding-bottom: .38rem !important; }
.nav-sep { height: 1px; margin: .5rem .8rem; background: rgba(255, 255, 255, .09); list-style: none; }
.nav-g.fold { margin: 0 !important; }
.rail li.has-add { position: relative; }
.rail li.has-add > a:first-child { padding-right: 2.6rem !important; }
.nav-add { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff !important; padding: 0 !important;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; box-shadow: 0 6px 14px -8px rgba(224, 86, 11, .9) !important; transition: transform .15s; }
.nav-add:hover { transform: translateY(-50%) scale(1.08); }
.nav-add svg { width: 16px; height: 16px; color: #fff !important; }
:root[data-theme="dark"] .nav-add, :root[data-theme="dark"] .nav-add svg { color: #1E0D02 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-add, :root:not([data-theme="light"]) .nav-add svg { color: #1E0D02 !important; } }
.rail ul.nav-foot { padding-top: .5rem; gap: 1px; }
.rail .nf-how a { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.rail .nf-how a svg { color: var(--accent-2) !important; }
.nav-credits a.credits { display: flex; align-items: center; gap: .75rem; padding: .45rem .8rem !important; font-size: .82rem !important; border-radius: 12px; color: var(--on-navy-2) !important; text-decoration: none; }
.nav-credits a.credits svg { width: 18px; height: 18px; color: var(--accent-2) !important; }
.nav-credits a.credits:hover { background: rgba(255, 255, 255, .07); }
@media (max-width: 860px) { .nav-sep, .nav-add, .nav-credits { display: none !important; } .rail li.has-add > a:first-child { padding-right: .2rem !important; } }
@media (max-height: 760px) and (min-width: 861px) { .rail li a, .nav-g.fold button { padding-top: .4rem !important; padding-bottom: .4rem !important; } .nav-sep { margin: .35rem .8rem; } .rail .brand { padding-bottom: .5rem !important; } }
.rail li a.nav-add, .rail li a.nav-add:hover, .rail li a.nav-add[aria-current="page"] { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; box-shadow: 0 6px 14px -8px rgba(224, 86, 11, .9) !important; padding: 0 !important; border-radius: 9px; }
.rail li a.nav-add[aria-current="page"] { box-shadow: 0 0 0 2px rgba(255, 176, 103, .7) !important; }
.cv6-sum.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv6-ad.std { box-shadow: inset 3px 0 0 var(--navy-3), var(--sh-1); }
.cv6-ad .cv6-vers.solo { border-top: 0; padding: .3rem .9rem .8rem; background: transparent; }
.lt6 + .letter-start { margin-top: .4rem; }

/* ---------- Fråga coachen: flytande chattruta (cw5) ---------- */
.cw5 { position: fixed; right: 24px; bottom: 24px; z-index: 70; }
.cw-launch { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; position: relative;
  background: radial-gradient(40px 30px at 30% 10%, rgba(255, 138, 61, .55), transparent 70%), linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 16px 34px -12px rgba(20, 32, 52, .7), 0 0 0 4px rgba(255, 255, 255, .5); transition: transform .2s; }
.cw-launch:hover { transform: scale(1.06); }
.cw-launch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cw-launch .ico { width: 26px; height: 26px; }
.cw-launch > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .25s, opacity .2s; }
.cw-l-close { opacity: 0; transform: rotate(-90deg); }
.cw5.open .cw-l-open { opacity: 0; transform: rotate(90deg); }
.cw5.open .cw-l-close { opacity: 1; transform: none; }
.cw-panel { position: absolute; right: 0; bottom: 74px; width: 390px; height: min(660px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(20, 32, 52, .55); transform-origin: bottom right; animation: cwin .22s ease; }
@keyframes cwin { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .cw-panel { animation: none; } }
.cw-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cw-v-home { overflow-y: auto; background: radial-gradient(360px 220px at 85% -10%, rgba(255, 138, 61, .45), transparent 65%), linear-gradient(180deg, var(--navy-2) 0, var(--navy) 150px, color-mix(in srgb, var(--navy) 35%, var(--surface)) 270px, var(--surface) 340px); }
.cw-hero { padding: 1.3rem 1.4rem 1.2rem; color: #fff; }
.cw-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.cw-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--on-navy); }
.cw-brand .ico { color: var(--accent-2); }
.cw-hero h2 { margin: 0; color: #fff; font-size: 1.7rem; line-height: 1.2; letter-spacing: -.02em; }
.cw-x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; flex: none; }
.cw-hero .cw-x:hover { background: rgba(255, 255, 255, .12); }
.cw-body { padding: 0 1rem 1rem; display: grid; gap: .75rem; }
.cw-card { display: block; width: 100%; text-align: left; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 28px -18px rgba(20, 32, 52, .45); color: var(--ink); text-decoration: none; font: inherit; }
.cw-start { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: 1rem 1.1rem; cursor: pointer; transition: border-color .15s, transform .15s; }
.cw-start:hover { border-color: var(--accent); transform: translateY(-1px); }
.cw-start > span:nth-child(2) { display: grid; min-width: 0; }
.cw-start small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-start > .ico { color: var(--accent); }
.cw-faq { padding: .7rem; }
.cw-search { display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem .25rem .9rem; border-radius: 12px; background: var(--sunk); margin: 0 0 .3rem; }
.cw-search input { flex: 1; margin: 0; border: 0; background: transparent; box-shadow: none !important; outline: none; padding: .55rem 0; min-height: 0; font-weight: 600; }
.cw-search button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer; border-radius: 9px; }
.cw-faq ul { list-style: none; margin: 0; padding: 0; }
.cw-faq li button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .6rem; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .93rem; text-align: left; cursor: pointer; border-radius: 10px; }
.cw-faq li button:hover { background: var(--sunk); color: var(--ink); }
.cw-faq li button .ico { color: var(--accent); flex: none; width: 15px; height: 15px; }
.cw-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.cw-next > span:nth-child(2) { display: grid; min-width: 0; }
.cw-next small { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); font-weight: 700; }
.cw-next strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-next em { font-style: normal; color: var(--muted); font-size: .85rem; }
.cw-next-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.cw-next-ic.ok { background: var(--ok-soft); color: var(--ok); }
a.cw-next:hover { border-color: var(--accent); }
.cw-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.cw-head.plain { justify-content: space-between; padding: 1rem 1.1rem; }
.cw-head.plain strong { font-size: 1.1rem; }
.cw-head .cw-x:hover, .cw-back:hover { background: var(--sunk); }
.cw-back { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.cw-who { display: grid; flex: 1; min-width: 0; } .cw-who small { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .76rem; }
.cw-log { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem .9rem; display: flex; flex-direction: column; gap: .6rem; background: var(--field); }
.cw-log .bot-row { max-width: 92%; }
.cw-log .bot-bub { font-size: .93rem; }
.bot-av.xs { width: 26px; height: 26px; border-radius: 9px; } .bot-av.xs .ico { width: 14px; height: 14px; }
.cw-cal { display: grid; gap: .45rem; margin-left: 2.1rem; }
.cw-cal .bot-ev { padding: .7rem .75rem; }
.cw-sugg { display: flex; gap: .35rem; flex-wrap: wrap; padding: .5rem .9rem 0; background: var(--field); }
.cw-sugg .chip { font-size: .8rem; }
.cw-input { margin: .5rem .8rem .3rem; }
.cw-v-chat .bot-ai { margin: 0 .9rem .5rem; }
.cw-links { padding: .4rem; display: grid; }
.cw-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .6rem; border-radius: 12px; color: var(--ink); text-decoration: none; }
.cw-links a:hover { background: var(--sunk); }
.cw-links a > span:nth-child(2) { display: grid; } .cw-links small { color: var(--muted); font-size: .82rem; }
.cw-links a > .ico { color: var(--muted); }
.cw-li-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--sunk); color: var(--accent-text); }
.cw-v-help { overflow-y: auto; }
.cw-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--surface); }
.cw-tabs button { display: grid; justify-items: center; gap: .15rem; padding: .55rem 0 .65rem; border: 0; background: transparent; color: var(--muted); font: 600 .78rem var(--font); cursor: pointer; }
.cw-tabs button .ico { width: 22px; height: 22px; }
.cw-tabs button[aria-current="page"] { color: var(--accent-text); }
.cw-tabs button:hover { color: var(--ink); }
@media (max-width: 860px) { .cw5 { right: 14px; bottom: 96px; } .cw-launch { width: 52px; height: 52px; } }
@media (max-width: 600px) {
  .cw5.open { inset: 0; }
  .cw5.open .cw-launch { display: none; }
  .cw-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
}
@media print { .cw5 { display: none; } }
/* Logiktester: illustration i introt */
.lg-intro { display: flex; align-items: center; gap: 1.5rem; }
.lg-intro > div { flex: 1; min-width: 0; }
.lg-art { width: 250px; flex: none; height: auto; }
.lga-glow { fill: rgba(255, 138, 61, .14); }
.lga-sheet { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; filter: drop-shadow(0 14px 22px rgba(30, 44, 62, .18)); }
.lga-line { fill: var(--ink-2); opacity: .75; } .lga-line.soft { opacity: .3; }
.lga-cell { fill: var(--sunk); }
.lga-stroke { fill: none; stroke: var(--navy-3); stroke-width: 2.4; stroke-linejoin: round; }
.lga-miss { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.lga-q { font: 800 17px var(--display, sans-serif); fill: var(--accent-text); }
.lga-face { fill: var(--surface); }
.lga-hand { fill: none; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; }
.lga-spark { stroke: var(--accent-2); }
:root[data-theme="dark"] .lga-hand { stroke: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lga-hand { stroke: var(--ink); } }
@media (max-width: 760px) { .lg-intro { flex-direction: column-reverse; align-items: stretch; } .lg-art { width: 190px; align-self: center; } }
/* Logiktester: introt som marinblå hero i stället för beige ruta */
.lg-intro { position: relative; overflow: hidden; color: var(--on-navy); border: 1px solid var(--navy-edge, rgba(255,255,255,.1));
  background: radial-gradient(420px 240px at 92% 10%, rgba(255, 138, 61, .38), transparent 62%), radial-gradient(380px 220px at 0% 110%, rgba(120, 160, 230, .22), transparent 65%), linear-gradient(120deg, #2B3F5A 0%, #3A5274 55%, #4E6A8F 100%);
  box-shadow: 0 30px 60px -40px rgba(20, 32, 52, .7); padding: 1.6rem 1.8rem; }
.lg-intro::after { content: ""; position: absolute; left: -70px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .04); pointer-events: none; }
.lg-intro h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.lg-intro p { color: var(--on-navy); }
.lg-intro .hint { color: var(--on-navy-2); }
.lg-intro .lga-glow { fill: rgba(255, 138, 61, .22); }
.lg-intro .lga-sheet { stroke: transparent; filter: drop-shadow(0 18px 26px rgba(10, 18, 32, .45)); fill: #fff; }
.lg-intro .lga-cell { fill: #EEF2F8; } .lg-intro .lga-line { fill: #33415A; } .lg-intro .lga-face { fill: #fff; } .lg-intro .lga-hand { stroke: #2B3F5A; }
/* Siffrorna i Mina avklarade test: lite färg i stället för beige */
.lg-stats > div { background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.lg-stats > div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.lg-stats > div:nth-child(2)::before, .lg-stats > div:nth-child(4)::before { background: linear-gradient(180deg, var(--navy-3), var(--navy)); }
/* + vid Mina ansökningar: liten, lugn rund knapp i menyns glas som blir orange först vid hovring */
.rail li a.nav-add, .rail li a.nav-add:hover, .rail li a.nav-add[aria-current="page"] {
  position: absolute; right: .55rem; top: 50%; width: 24px !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; gap: 0 !important;
  display: grid !important; place-items: center; padding: 0 !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 176, 103, .55) !important; box-shadow: none !important;
  color: #FFB067 !important; transform: translateY(-50%); transition: background .15s, border-color .15s, color .15s, transform .15s; }
.rail li a.nav-add svg { width: 14px !important; height: 14px !important; color: inherit !important; stroke-width: 2.4; margin: 0 !important; }
.rail li a.nav-add:hover, .rail li a.nav-add:focus-visible { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-50%) rotate(90deg); }
.rail li a.nav-add[aria-current="page"] { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; border-color: transparent !important; color: #fff !important; }
.rail li a.nav-add::before, .rail li a.nav-add::after { display: none !important; }
:root[data-theme="dark"] .rail li a.nav-add:not(:hover):not([aria-current="page"]) { color: #FFB067 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail li a.nav-add:not(:hover):not([aria-current="page"]) { color: #FFB067 !important; } }
@media (prefers-reduced-motion: reduce) { .rail li a.nav-add:hover { transform: translateY(-50%); } }
/* Fråga coachen: rund orange knapp som "skriver" ibland och glider ut med texten vid hovring */
.cw5 .cw-launch { width: auto; height: 52px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; color: #fff; font: 700 .92rem/1 var(--font);
  background: linear-gradient(135deg, #F47A26 0%, #D8590C 55%, #B4490D 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -10px rgba(180, 73, 13, .75);
  transition: transform .2s, box-shadow .2s; animation: cwglow 4s ease-in-out infinite; }
.cw5 .cw-launch > span { position: static; inset: auto; transform: none; opacity: 1; }
.cw-l-ic { width: 52px; height: 52px; flex: none; display: grid !important; place-items: center; }
.cw-l-ic svg { width: 25px; height: 25px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(120, 40, 0, .3)); }
.cw-dot { fill: #D8590C; animation: cwtype 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cw-dot:nth-of-type(2) { animation-delay: .15s; } .cw-dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes cwtype { 0%, 62%, 100% { transform: none; opacity: 1; } 68% { transform: translateY(-2.2px); opacity: .55; } 74% { transform: none; opacity: 1; } 80% { transform: translateY(-2.2px); opacity: .55; } 86% { transform: none; opacity: 1; } }
@keyframes cwglow { 0%, 55%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -10px rgba(180, 73, 13, .75), 0 0 0 0 rgba(244, 122, 38, .5); }
  85% { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -10px rgba(180, 73, 13, .75), 0 0 0 12px rgba(244, 122, 38, 0); } }
.cw-l-tx { display: block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; padding-left: 0; text-shadow: 0 1px 1px rgba(120, 40, 0, .35);
  transition: max-width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s, padding .35s; }
.cw5 .cw-launch:hover .cw-l-tx, .cw5 .cw-launch:focus-visible .cw-l-tx, .cw5.peek .cw-l-tx { max-width: 11em; opacity: 1; padding-left: 1.15rem; }
.cw5 .cw-launch:hover { transform: translateY(-2px); animation: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 30px -10px rgba(180, 73, 13, .85); }
.cw5 .cw-launch > .cw-l-close { display: none; }
.cw5.open .cw-launch { width: 52px; justify-content: center; animation: none; background: linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 12px 26px -10px rgba(20, 32, 52, .7); }
.cw5.open .cw-launch > .cw-l-ic, .cw5.open .cw-launch > .cw-l-tx { display: none !important; }
.cw5.open .cw-launch > .cw-l-close { display: grid; }
.cw-panel { bottom: 68px; }
@media (max-width: 860px) { .cw5 .cw-launch { height: 50px; } .cw-l-ic { width: 50px; height: 50px; } }
@media (hover: none) { .cw5 .cw-launch:hover .cw-l-tx { max-width: 0; opacity: 0; padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .cw5 .cw-launch, .cw-dot { animation: none; } .cw-l-tx { transition: none; } }
/* ---------- LinkedIn-profil v7: lättare kort, förhandsvisning av toppen och var texterna ska klistras in ---------- */
.li7 .li-how { list-style: none; margin: 0 0 1.2rem; padding: .35rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); counter-reset: lih; }
.li7 .li-how li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 14px; }
.li7 .li-how li + li { box-shadow: inset 1px 0 0 var(--glass-line); border-radius: 0; }
.li7 .li-how strong { display: block; font-size: .92rem; }
.li7 .li-how small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.li-how-ic { position: relative; flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); counter-increment: lih; }
.li-how-ic .ico { width: 17px; height: 17px; }
.li-how-ic::after { content: counter(lih); position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 .62rem/16px var(--font); text-align: center; }
.li7 .li-how li:first-child .li-how-ic { background: color-mix(in srgb, var(--navy) 12%, var(--surface)); color: var(--navy); }
@media (max-width: 760px) { .li7 .li-how { grid-template-columns: 1fr; } .li7 .li-how li + li { box-shadow: inset 0 1px 0 var(--glass-line); } }

.li7 .li-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; }
.li7 .li-main, .li7 .li-side { gap: 1rem; }
.li-card { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 20px; padding: 1rem 1.15rem; box-shadow: 0 10px 30px -24px rgba(20, 32, 52, .5); }
.li-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem; margin-bottom: .6rem; }
.li-h h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.li-h-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.li-h-ic .ico { width: 16px; height: 16px; }
.li-where { display: flex; align-items: flex-start; gap: .3rem; margin: .1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.li-where .bi { width: 13px; height: 13px; flex: none; margin-top: .1rem; color: var(--navy-3, var(--navy)); }
.li-copy { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .8rem var(--font); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.li-copy .bi { width: 14px; height: 14px; color: var(--accent-text); }
.li-copy:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Toppen: banner, bild, namn och rubrik */
.li-top { padding: 0; overflow: hidden; }
.li-banner { height: 76px; background: radial-gradient(260px 120px at 85% 0, rgba(255, 138, 61, .55), transparent 70%), linear-gradient(120deg, var(--navy-2, #33506F), var(--navy)); }
.li-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 0 1.15rem; }
.li-av { width: 84px; height: 84px; margin-top: -42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; font: 800 1.6rem var(--display); box-shadow: 0 0 0 4px var(--surface), 0 10px 24px -12px rgba(20, 32, 52, .6); }
.li-av img { width: 100%; height: 100%; object-fit: cover; }
.li-id-tx { padding-top: .7rem; min-width: 0; }
.li-kicker { margin: 0 0 .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.li-name { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.li7 .li-head { margin: .25rem 0 0; font: 500 .98rem/1.45 var(--font); color: var(--ink); }
.li-city { margin: .3rem 0 0; color: var(--muted); font-size: .85rem; }
.li-otw { display: inline-block; margin: .6rem 0 0; padding: .45rem .7rem; border-radius: 12px; background: var(--ok-soft); color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.li-otw b { color: var(--ok); }
.li-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; padding: .75rem 1.15rem; border-top: 1px solid var(--glass-line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.li-foot-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; }
.li-foot-l strong { font-size: .9rem; }
.li-foot-l .li-where { flex-basis: 100%; }
.li-count { font-size: .78rem; color: var(--muted); } .li-count.warn { color: #B4471B; font-weight: 700; }
.li-top > .li-undo, .li-top > .li-mod { margin-left: 1.15rem; margin-right: 1.15rem; }
.li-top > .li-mod { margin-bottom: .9rem; }

/* Om: lugnare text, fälls ihop när den är lång */
.li7 .li-about { font-size: .95rem; line-height: 1.65; color: var(--ink-2); max-width: 70ch; }
.li7 .li-about p { margin: 0 0 .7rem; }
.li7 .li-about.clamp { max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.li-meta { display: flex; align-items: center; gap: .8rem; margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.li-meta .link { font-weight: 700; color: var(--accent-text); }

/* Erfarenhet: en lista i stället för en låda per tjänst */
.li-roles { list-style: none; margin: 0; padding: 0; display: grid; }
.li-roles > li { padding: .85rem 0; border-top: 1px solid var(--glass-line); }
.li-roles > li:first-child { border-top: 0; padding-top: .2rem; }
.li-role-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.li-role-h h4 { margin: 0; font-size: .95rem; }
.li-role-h small { color: var(--muted); font-size: .82rem; }
.li-role-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--navy) 10%, var(--surface)); color: var(--navy); font: 800 .78rem var(--font); }
.li7 .li-exp { margin: .5rem 0 0 calc(36px + .7rem); font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.li-roles .li-undo, .li-roles .li-mod { margin-left: calc(36px + .7rem); }

/* Kompetenser och Öppen för: små chips som kopieras med ett tryck */
.li-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.li-chips button { padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 .8rem var(--font); cursor: copy; transition: border-color .15s, background .15s; }
.li-chips button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.li-side .li-h { grid-template-columns: auto minmax(0, 1fr); }
.li-side .li-h .li-copy { grid-column: 1 / -1; justify-self: start; }
.li-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.li-tips li { display: grid; grid-template-columns: auto 1fr; gap: .45rem; }
.li-tips .bi { width: 15px; height: 15px; color: var(--ok); margin-top: .15rem; }
.li-made { display: flex; gap: .4rem; margin: 0; padding: 0 .3rem; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.li-made .bi { width: 13px; height: 13px; flex: none; margin-top: .15rem; color: var(--accent-text); }

/* Justera med AI: en liten knapp som fälls ut till verktygen */
.li7 details.li-mod { margin-top: .6rem; padding: 0; border: 0; background: transparent; }
.li7 details.li-mod > summary { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .55rem; border-radius: 999px; font: 600 .8rem var(--font); color: var(--accent-text); background: var(--accent-soft); width: max-content; transition: background .15s; }
.li7 details.li-mod > summary .ico { width: 14px; height: 14px; }
.li7 details.li-mod > summary:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.li7 details.li-mod[open] { padding: .6rem .7rem .7rem; border-radius: 14px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); border: 1px solid var(--line); }
.li7 details.li-mod[open] > summary { margin-bottom: .5rem; }
.li7 details.li-mod .aimod-chips { margin-bottom: .45rem; }
.li-undo { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 0; font-size: .8rem; color: var(--muted); }
.li-undo .bi { width: 14px; height: 14px; color: var(--ok); }
.li-undo .link { font-weight: 700; }
@media (max-width: 600px) { .li-id { grid-template-columns: 1fr; } .li-av { width: 72px; height: 72px; margin-top: -36px; } .li-id-tx { padding-top: 0; } .li-h { grid-template-columns: auto minmax(0, 1fr); } .li-h .li-copy { grid-column: 1 / -1; justify-self: start; } .li7 .li-exp, .li-roles .li-undo, .li-roles .li-mod { margin-left: 0; } .li-foot { flex-wrap: wrap; } }
.li-otw b { color: var(--ink); position: relative; padding-left: .85rem; }
.li-otw b::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ok); }
.li-role-ic { background: var(--sunk); color: var(--ink-2); }
.li-how li:first-child .li-how-ic { color: var(--ink); }
.li7 .li-main > .li-card, .li7 .li-side > .li-card { margin: 0; }
.li7 .li-how { margin-top: .2rem; }
@media (max-width: 1000px) { .li7 .li-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .rail li a.nav-add, .rail li a.nav-add:hover, .rail li a.nav-add[aria-current="page"] { display: none !important; } }
/* Botten: beigen dras mot blågrått så att den smälter ihop med marinblått (samma färgfamilj, ljust tema) */
:root:not([data-theme="dark"]) {
  --bg: #D0D4DA;
  --page-bg:
    radial-gradient(1300px 950px at -10% -15%, rgba(60, 82, 112, .55), transparent 60%),
    radial-gradient(1000px 720px at 108% -12%, rgba(72, 98, 132, .42), transparent 60%),
    radial-gradient(820px 560px at 82% 8%, rgba(255, 150, 90, .12), transparent 62%),
    radial-gradient(1200px 820px at 40% 122%, rgba(60, 82, 112, .50), transparent 64%),
    linear-gradient(180deg, #BAC1CC 0%, #C9CED6 40%, #D6D6D8 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08111F; --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(255, 138, 61, .10), transparent 62%), linear-gradient(180deg, #0A1426, #08101E); } }
.landing .lnav { background: color-mix(in srgb, #B8BFCA 70%, transparent); }
/* Hovring: knappen behåller sin runda form, en liten marinblå bubbla med texten tonar fram till vänster */
.cw5 .cw-launch { position: relative; overflow: visible; }
.cw5 .cw-launch > .cw-l-tx, .cw5 .cw-launch:hover > .cw-l-tx, .cw5 .cw-launch:focus-visible > .cw-l-tx, .cw5.peek .cw-launch > .cw-l-tx {
  position: absolute; right: calc(100% + 12px); top: 50%; max-width: none; padding: .5rem .8rem; border-radius: 12px; background: var(--navy); color: #fff;
  font: 600 .84rem/1 var(--font); text-shadow: none; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(20, 32, 52, .7);
  opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.cw5 .cw-launch > .cw-l-tx::after { content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: inherit; transform: rotate(45deg); border-radius: 0 2px 0 0; }
.cw5 .cw-launch:hover > .cw-l-tx, .cw5 .cw-launch:focus-visible > .cw-l-tx { opacity: 1; transform: translate(0, -50%); transition-delay: .12s; }
.cw5 .cw-launch:hover { transform: translateY(-2px) scale(1.04); }
@media (hover: none) { .cw5 .cw-launch > .cw-l-tx { display: none; } }
@media (prefers-reduced-motion: reduce) { .cw5 .cw-launch > .cw-l-tx { transition: none; } .cw5 .cw-launch:hover { transform: none; } }
.cw5 .cw-launch > .cw-l-tx { overflow: visible; }
/* ---------- Månadskalendern på översikten: kompakt, tryck för stor vy ---------- */
.mc-compact .mc-head { position: relative; gap: .4rem; margin-bottom: .4rem; }
.mc-compact .mc-head strong { flex: 1; text-align: center; font-size: .95rem; }
.mc-compact .mc-nav { width: 28px; height: 28px; border-radius: 9px; font-size: 1.05rem; }
.mc-big { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); display: grid; place-items: center; cursor: pointer; flex: none; }
.mc-big .ico { width: 14px; height: 14px; }
.mc-big:hover { border-color: var(--accent); background: var(--accent-soft); }
.d4-month .mc-compact > .mc-grid, .d4-month .mc-ghost > .mc-grid { gap: 2px; }
.d4-month .mc-compact > .mc-grid .mc-cell, .d4-month .mc-ghost .mc-cell { height: 30px; border-radius: 7px; font-size: .74rem; gap: 1px; }
.d4-month .mc-compact > .mc-grid .mc-wd, .d4-month .mc-ghost .mc-wd { font-size: .6rem; padding-bottom: .1rem; }
.d4-month .mc-compact > .mc-grid .mc-ics i, .d4-month .mc-ghost .mc-ics i { width: 5px; height: 5px; }
.d4-month .mc-compact > .mc-grid .mc-cell.today .mc-n, .d4-month .mc-ghost .mc-cell.today .mc-n { width: 19px; height: 19px; font-size: .72rem; }
.d4-month .mc-compact > .mc-grid .mc-ics, .d4-month .mc-ghost .mc-ics { margin-top: 0; }
.mc-mini { margin-top: .6rem; padding: .55rem .65rem; border-radius: 12px; background: var(--sunk); }
.mc-mini-h { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.mc-mini-h::first-letter { text-transform: uppercase; }
.mc-mini ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.mc-mini li a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem; padding: .3rem .4rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .82rem; }
.mc-mini li a:hover { background: var(--surface); }
.mc-mini .mc-li-ic { width: 18px; height: 18px; border-radius: 6px; }
.mc-mini .mc-li-ic .ico { width: 11px; height: 11px; }
.mc-mini-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-mini .muted { margin: 0; font-size: .82rem; }
.mc-open { margin-top: .35rem; font-size: .78rem; font-weight: 700; color: var(--accent-text); }

/* Stor vy: ligger ovanpå sidan med mörk bakgrund */
.mc-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(14, 24, 40, .45); backdrop-filter: blur(3px); animation: mcfade .2s ease; }
.mc-pop { position: fixed; z-index: 91; left: 50%; top: 50%; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; transform: translate(-50%, -50%);
  padding: 1.2rem 1.3rem 1.3rem; border-radius: 24px; background: var(--surface); box-shadow: 0 40px 100px -30px rgba(14, 24, 40, .7); animation: mcpop .22s ease; }
@keyframes mcfade { from { opacity: 0; } }
@keyframes mcpop { from { opacity: 0; transform: translate(-50%, -47%) scale(.97); } }
.mc-pop .mc-head { gap: .5rem; margin-bottom: .8rem; }
.mc-pop .mc-head strong { flex: 1; text-align: center; font-size: 1.2rem; }
.mc-pop .mc-close { color: var(--ink-2); border-radius: 10px; }
.mc-pop .mc-close:hover { background: var(--sunk); }
.d4-month .mc-pop .mc-grid { gap: 5px; }
.d4-month .mc-pop .mc-cell { height: 62px; border-radius: 12px; font-size: .92rem; }
.d4-month .mc-pop .mc-ics i { width: 8px; height: 8px; }
.d4-month .mc-pop .mc-cell.today .mc-n { width: 26px; height: 26px; }
body.mc-lock { overflow: hidden; }
@media (max-width: 600px) { .mc-pop { top: auto; bottom: 0; left: 0; width: 100%; transform: none; border-radius: 22px 22px 0 0; max-height: 92vh; } @keyframes mcpop { from { opacity: 0; transform: translateY(20px); } } .d4-month .mc-pop .mc-cell { height: 46px; } }
@media (prefers-reduced-motion: reduce) { .mc-pop, .mc-backdrop { animation: none; } }
.mc-open { color: color-mix(in srgb, var(--accent-text) 82%, #000); } :root[data-theme="dark"] .mc-open { color: var(--accent-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-open { color: var(--accent-2); } }
/* Jobbcoachens startvy: orange topp i stället för marinblå */
.cw-v-home { background: radial-gradient(320px 200px at 88% -6%, rgba(255, 214, 170, .45), transparent 65%), radial-gradient(260px 180px at 0% 0%, rgba(150, 50, 0, .35), transparent 70%),
  linear-gradient(180deg, #B4490D 0, #D2560C 120px, #E8691C 170px, color-mix(in srgb, #E8691C 35%, var(--surface)) 270px, var(--surface) 340px); }
.cw-v-home .cw-brand { color: #fff; }
.cw-v-home .cw-brand .ico { color: #FFE2C4; }
.cw-v-home .cw-hero h2 { text-shadow: 0 1px 2px rgba(120, 40, 0, .3); }
.cw-v-home .cw-hero .cw-x:hover { background: rgba(255, 255, 255, .18); }
/* Alla flikrader i appen ser likadana ut: ljus glasrad, vald flik i orange
   (CV, Personligt brev, Jobbcoachen, AI-matchning, dokumentväljaren i ansökan, inloggningen och infosidorna) */
.tabs, .seg, .info-tabs { gap: .3rem; padding: 5px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 10px 26px -20px rgba(20, 32, 52, .5); }
.tabs { margin-bottom: 1.4rem; }
.info-tabs { display: flex; width: fit-content; max-width: 100%; }
.tabs > a, .tabs > [role="tab"], .seg > button, .seg > [role="tab"], .info-tabs > a {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border: 0; border-radius: 12px; background: none; box-shadow: none;
  font: 650 .93rem var(--font); color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.tabs > a .ico, .tabs > [role="tab"] .ico, .seg > button .ico, .info-tabs > a .ico { width: 17px; height: 17px; color: var(--accent-text); }
.tabs > a:hover, .tabs > [role="tab"]:hover, .seg > button:hover, .info-tabs > a:hover { background: var(--accent-soft); color: var(--ink); }
.tabs > [aria-selected="true"], .tabs > [aria-current="page"], .seg > button[aria-selected="true"], .seg > [aria-current="page"], .info-tabs > a[aria-current="page"] {
  color: #fff; background: linear-gradient(135deg, #CF540C, #B4490D); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px -8px rgba(180, 73, 13, .7); }
.tabs > [aria-selected="true"] .ico, .tabs > [aria-current="page"] .ico, .seg > button[aria-selected="true"] .ico, .info-tabs > a[aria-current="page"] .ico { color: #FFE2C4; }
.tabs > a:focus-visible, .tabs > [role="tab"]:focus-visible, .seg > button:focus-visible, .info-tabs > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tabs > [aria-selected="true"] .count, .tabs > [aria-selected="true"] .pill { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 600px) { .tabs > a, .tabs > [role="tab"], .seg > button, .info-tabs > a { padding: .55rem .8rem; font-size: .88rem; } }
.lt-noad { margin-top: .8rem; }
@media (max-width: 600px) { .ptabs > a { padding: .55rem .8rem; font-size: .88rem; } }
.tabs > [role="tab"][aria-selected="true"], .tabs > a[role="tab"][aria-selected="true"] { color: #fff; background: linear-gradient(135deg, #CF540C, #B4490D); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px -8px rgba(180, 73, 13, .7); }
.tabs4 > [role="tab"][aria-selected="true"] .ico, .tabs > [role="tab"][aria-selected="true"] .ico { color: #FFE2C4; }
.tabs > [role="tab"]:hover:not([aria-selected="true"]) { background: var(--accent-soft); color: var(--ink); }
.tabs > [role="tab"]:not([aria-selected="true"]) { color: var(--ink-2); }
/* Ljusare blågrå botten: samma färger, mindre mörk så att texten är lätt att läsa */
:root:not([data-theme="dark"]) {
  --bg: #E1E5EB;
  --page-bg:
    radial-gradient(1300px 950px at -10% -15%, rgba(60, 82, 112, .30), transparent 60%),
    radial-gradient(1000px 720px at 108% -12%, rgba(72, 98, 132, .22), transparent 60%),
    radial-gradient(820px 560px at 82% 8%, rgba(255, 150, 90, .10), transparent 62%),
    radial-gradient(1200px 820px at 40% 122%, rgba(60, 82, 112, .26), transparent 64%),
    linear-gradient(180deg, #D5DBE4 0%, #E0E4EA 40%, #E8E9EC 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08111F; --page-bg: radial-gradient(1000px 600px at 90% -10%, rgba(78, 106, 143, .45), transparent 60%), radial-gradient(800px 560px at -10% 30%, rgba(255, 138, 61, .10), transparent 62%), linear-gradient(180deg, #0A1426, #08101E); } }
.landing .lnav { background: color-mix(in srgb, #D0D6E0 72%, transparent); }
.d4-col .d4-c-txt > span { color: color-mix(in srgb, var(--ink-2) 88%, var(--surface)); }
/* ---------- Översikten tätare: mindre topp, kort och kalender, tydligare hierarki ---------- */
.dash4 { gap: 1.1rem; }
.dash4 .d4-hero { padding: 1rem 1.5rem; border-radius: 22px; gap: 1rem 1.5rem; }
.dash4 .d4-hero::after { width: 180px; height: 180px; border-width: 26px; right: -50px; bottom: -70px; }
.dash4 .d4-hi { margin: 0 0 .15rem; font-size: .85rem; }
.dash4 .d4-hero h1 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.15; margin: 0 0 .45rem; max-width: 30ch; }
.dash4 .d4-pep { margin: 0; padding: .3rem .7rem; font-size: .82rem; }
.dash4 .d4-pep .ico { width: 14px; height: 14px; }
.dash4 .d4-art { width: 112px; margin: -.6rem 0; }
.dash4 .d4-goal { padding: .55rem .85rem; gap: .75rem; border-radius: 16px; }
.dash4 .d4-ring { width: 58px; height: 58px; }
.dash4 .d4-ring b { width: 46px; height: 46px; font-size: 1.1rem; }
.dash4 .d4-ring small { font-size: .7rem; }
.dash4 .d4-goal-t { margin: 0 0 .2rem; font-size: .88rem; }
.dash4 .d4-goal-set select { min-height: 28px; font-size: .8rem; }

.dash4 .d4-top { gap: .9rem 1.1rem; margin-bottom: .4rem; }
.dash4 .d4-label { font-size: .72rem; margin: 0 0 .45rem; }
.dash4 .d4-label.small { margin-top: .8rem; }
.dash4 .d4-first { padding: .85rem 1rem; gap: .5rem .9rem; border-radius: 18px; }
.dash4 .d4-first-ic { width: 42px; height: 42px; border-radius: 13px; }
.dash4 .d4-first-ic svg { width: 21px; height: 21px; }
.dash4 .d4-first-txt { gap: .1rem; }
.dash4 .d4-first-txt strong { font-size: 1.02rem; }
.dash4 .d4-first-txt span { font-size: .88rem; line-height: 1.4; }
.dash4 .d4-first .btn { min-height: 36px; padding: .4rem .9rem; font-size: .88rem; }
.dash4 .d4-then { gap: .35rem; }
.dash4 .d4-then a { padding: .5rem .75rem; gap: .65rem; border-radius: 13px; }
.dash4 .d4-then .d4-n { width: 22px; height: 22px; font-size: .72rem; }
.dash4 .d4-then-ic { width: 30px; height: 30px; border-radius: 9px; }
.dash4 .d4-then-ic svg { width: 16px; height: 16px; }
.dash4 .d4-then-txt strong { font-size: .9rem; }
.dash4 .d4-then-txt span { font-size: .8rem; }

/* Kalenderkortet: rubrik och månad tätt, inga extra linjer, lugnare rutor */
.dash4 .d4-month { padding: .9rem 1rem 1rem; border-radius: 20px; }
.dash4 .d4-month > .sh4 { margin: 0 0 .5rem; font-size: .98rem; }
.dash4 .d4-month > .sh4 .sh4-ico { width: 28px; height: 28px; border-radius: 9px; }
.dash4 .d4-month > .sh4 .sh4-ico .ico { width: 15px; height: 15px; }
.dash4 .d4-month .mcal { margin: 0; padding: 0; border: 0; }
.dash4 .d4-month .mc-compact > .mc-grid .mc-cell { height: 28px; background: color-mix(in srgb, var(--sunk) 70%, var(--surface)); color: var(--ink); font-weight: 650; }
.dash4 .d4-month .mc-compact > .mc-grid .mc-cell.afband { background: color-mix(in srgb, var(--info) 8%, var(--surface)); }
.dash4 .d4-month .mc-compact > .mc-grid .mc-cell.we { color: var(--muted); }
.dash4 .d4-month .mc-compact > .mc-grid .mc-cell:hover:not(.empty) { background: var(--accent-soft); }
.mc-cell.empty, .mc-cell.empty:hover { background: transparent !important; }
.dash4 .d4-month .mc-mini { margin-top: .5rem; padding: .45rem .55rem; }
.dash4 .d4-month .mc-mini li a { padding: .22rem .35rem; }
/* Processen ligger nu direkt under toppen: kompakt så att den och korten under syns utan att skrolla */
.dash4 .d4-pipe { margin-top: 0; padding: .8rem .9rem .85rem; border-radius: 20px; }
.dash4 .d4-pipe .d4-sec-h { margin-bottom: .55rem; align-items: center; }
.dash4 .d4-pipe .sh4 { margin: 0; font-size: .98rem; }
.dash4 .d4-pipe .sh4-ico { width: 28px; height: 28px; border-radius: 9px; }
.dash4 .d4-pipe .sh4-ico .ico { width: 15px; height: 15px; }
.dash4 .d4-pipe .d4-sec-h a { font-size: .85rem; }
.dash4 .d4-cols { gap: .5rem; grid-template-columns: repeat(5, minmax(150px, 1fr)); padding-bottom: 0; }
.dash4 .d4-col { min-height: 0; padding: .55rem; border-radius: 14px; }
.dash4 .d4-col header { margin-bottom: .4rem; gap: .4rem; }
.dash4 .d4-col-ic { width: 24px; height: 24px; border-radius: 8px; }
.dash4 .d4-col-ic .ico { width: 13px; height: 13px; }
.dash4 .d4-col-t { font-size: .82rem; }
.dash4 .d4-pipe .d4-col-n { min-width: 22px; height: 22px; font-size: .75rem; }
.dash4 .d4-pipe .d4-col.st-send .d4-col-n, .dash4 .d4-pipe .d4-col.st-meet .d4-col-n { box-shadow: 0 0 0 3px rgba(255, 138, 61, .22); }
.dash4 .d4-col ul { gap: .3rem; }
.dash4 .d4-col li a { padding: .4rem .45rem; gap: .45rem; border-radius: 10px; }
.dash4 .d4-col .act-av { width: 24px; height: 24px; border-radius: 8px; font-size: .72rem; }
.dash4 .d4-c-txt strong { font-size: .82rem; }
.dash4 .d4-c-txt span { font-size: .72rem; }
.dash4 .d4-c-txt em { font-size: .7rem; margin-top: .05rem; }
.dash4 .d4-empty { margin: 0; padding: .4rem .5rem; font-size: .74rem; border-radius: 10px; }
/* Kontomenyn på landningssidan: hovra över profilen (eller tryck på pilen) för Översikt, Profil och Logga ut */
.umenu { position: relative; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); box-shadow: 0 6px 18px -10px rgba(20, 32, 52, .45); }
.umenu .user-btn { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.umenu .user-btn.has-photo { padding-right: .4rem; }
.um-toggle { width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .2s; }
.um-toggle:hover { background: var(--sunk); }
.um-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.um-pop { position: absolute; right: 0; top: 100%; padding-top: 8px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.umenu:hover .um-pop, .umenu:focus-within .um-pop, .umenu.open .um-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s, visibility 0s; }
.umenu:hover .um-toggle, .umenu.open .um-toggle { transform: rotate(180deg); }
.um-card { min-width: 230px; padding: .4rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(20, 32, 52, .5); display: grid; }
.um-who { margin: 0 0 .3rem; padding: .55rem .7rem .6rem; border-bottom: 1px solid var(--line); display: grid; }
.um-who strong { font-size: .92rem; color: var(--ink); }
.um-who small { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.um-card > a, .um-card > button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 .9rem var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.um-card > a:hover, .um-card > button:hover { background: var(--accent-soft); }
.um-card svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.um-card > button[data-signout] { margin-top: .2rem; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--danger); }
.um-card > button[data-signout] svg { stroke: var(--danger); }
.um-card > button[data-signout]:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .um-pop, .um-toggle { transition: none; } }
/* Inloggad syns överallt: profilbilden högst upp i sidomenyn och i mobilens toppfält (klick = översikten, hovra = kontomeny) */
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rail-top .brand { min-width: 0; }
.umenu.compact { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); flex: none; }
.umenu.compact .user-btn.only-av { padding: 2px; }
.umenu.compact .user-btn.only-av .ub-av { width: 32px; height: 32px; font-size: .78rem; }
.umenu.compact .um-toggle { width: 24px; height: 24px; margin-right: 3px; color: var(--on-navy-2); }
.umenu.compact .um-toggle:hover { background: rgba(255, 255, 255, .14); }
.rail .umenu.compact .um-pop { right: auto; left: 0; }
.rail-top .umenu.compact .um-pop { left: auto; right: -8px; }
.mtop-r { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 860px) { .rail-top .umenu { display: none; } }
.rail-top .umenu.compact .um-toggle { display: none; }
.rail-top .umenu.compact { margin-bottom: .8rem; }
.rail-top .brand { flex: 1; }
/* Logga in på de publika sidorna: tydlig marinblå knapp med ikon */
.lnav .btn.lnav-login { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .5rem 1.15rem .5rem .95rem; border-radius: 999px; border: 0;
  background: linear-gradient(150deg, var(--navy-3), var(--navy)) !important; color: #fff !important; font: 700 .95rem var(--font);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 22px -10px rgba(30, 44, 62, .7); transition: transform .15s, box-shadow .15s; }
.lnav .btn.lnav-login svg { width: 18px; height: 18px; fill: none; stroke: #FFB067; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lnav .btn.lnav-login:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 14px 26px -10px rgba(30, 44, 62, .8); }
.lnav .btn.lnav-login:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lnav .btn.lnav-login { background: linear-gradient(150deg, #5A78A0, #3A5274) !important; } }
:root[data-theme="dark"] .lnav .btn.lnav-login { background: linear-gradient(150deg, #5A78A0, #3A5274) !important; }
/* Inloggningen: stor logga där hammaren slår på städet och gnistorna flyger */
.auth-side .auth-brand { display: inline-flex; align-items: center; gap: 1rem; font: 800 clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--display); letter-spacing: -.02em; color: #fff; text-decoration: none; }
.auth-anvil { position: relative; width: clamp(84px, 7vw, 108px); aspect-ratio: 1; border-radius: 28px; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255, 138, 61, .35), transparent 70%), rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 18px 40px -18px rgba(0, 0, 0, .5); animation: authFloat 4s ease-in-out infinite; }
.auth-anvil::after { content: ""; position: absolute; inset: -6px; border-radius: 32px; background: radial-gradient(50% 50% at 50% 40%, rgba(255, 150, 80, .35), transparent 70%); opacity: 0; animation: authFlash 1.6s ease-out infinite; pointer-events: none; }
.auth-anvil .anim-anvil { width: 100%; }
.auth-anvil .aa-hammer { animation-duration: 1.6s; }
.auth-anvil .aa-sparks path { animation-duration: 1.6s; stroke-width: 3; }
.auth-anvil .aa-plate { animation-duration: 1.6s; }
@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes authFlash { 0%, 58% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 860px) { .auth-anvil { width: 64px; border-radius: 20px; padding: 8px; } .auth-side .auth-brand { font-size: 1.6rem; gap: .7rem; } }
@media (prefers-reduced-motion: reduce) { .auth-anvil, .auth-anvil::after, .auth-anvil .aa-hammer, .auth-anvil .aa-sparks path, .auth-anvil .aa-plate { animation: none; } .auth-anvil .aa-hammer { transform: rotate(0); } }
.auth-side .auth-brand > span:last-child { font: 800 clamp(2rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--display) !important; letter-spacing: -.025em; color: #fff; }
.auth-anvil { padding: 6px; }
.auth-anvil .anim-anvil { transform: scale(1.18) translateY(-4%); }
@media (max-width: 860px) { .auth-side .auth-brand > span:last-child { font-size: 1.7rem !important; } }
.auth-anvil { width: clamp(100px, 8vw, 128px); border-radius: 32px; }
.auth-side .auth-brand { gap: 1.2rem; }
.auth-side .auth-brand > span:last-child { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem) !important; }
@media (max-width: 860px) { .auth-anvil { width: 72px; border-radius: 22px; } .auth-side .auth-brand > span:last-child { font-size: 1.9rem !important; } }
/* Profilknappen ligger alltid uppe till höger, på samma plats på varje sida (som på landningssidan) */
.app-user { position: absolute; top: 16px; right: clamp(1rem, 2.5vw, 2rem); z-index: 45; }
.app-user ~ main .page { padding-top: 4.4rem; }
@media (max-width: 860px) { .app-user { display: none; } .app-user ~ main .page { padding-top: 1.6rem; } }
/* Inloggningsloggan: ingen ruta eller kontur, bara städet med hammaren och en mjuk glöd; lagom stor text */
.auth-anvil { width: 84px !important; padding: 0; border-radius: 0; background: radial-gradient(45% 40% at 50% 55%, rgba(255, 138, 61, .38), transparent 75%); box-shadow: none; }
.auth-anvil::after { inset: -10px; border-radius: 50%; background: radial-gradient(40% 35% at 50% 52%, rgba(255, 170, 100, .45), transparent 75%); }
.auth-anvil .anim-anvil { transform: none; }
.auth-side .auth-brand { gap: .55rem; }
.auth-side .auth-brand > span:last-child { font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem) !important; }
.auth-side h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); margin-top: 1.1rem; }
@media (max-width: 860px) { .auth-anvil { width: 60px !important; } .auth-side .auth-brand > span:last-child { font-size: 1.5rem !important; } }
/* Det här fungerar (Jobbcoachen): ljust beige rutor som syns mot det vita kortet, i stället för grönt */
.c4-str li { background: #F1EBE1; border: 1px solid #E4D9C8; gap: .15rem; }
.c4-str strong { color: var(--ink); }
.c4-str span { color: #4A4238; }
:root[data-theme="dark"] .c4-str li { background: var(--sunk); border-color: var(--line); }
:root[data-theme="dark"] .c4-str span { color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c4-str li { background: var(--sunk); border-color: var(--line); } :root:not([data-theme="light"]) .c4-str span { color: var(--ink-2); } }
/* ---------- AI-matchning: bevakningen som rad under sökningen, enklare start ---------- */
.js-hint { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }
.js-hint .bi { width: 14px; height: 14px; color: var(--accent-text); flex: none; }
.jobs4 .jwatch.jw2 { margin: .9rem 0 1.1rem; padding: .75rem 1rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 10px 26px -22px rgba(20, 32, 52, .5); max-width: none; }
.jw2.on { border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.jw-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.jw-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.jw-ic .ico { width: 19px; height: 19px; }
.jw2.on .jw-ic { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.jw-tx h2 { margin: 0; font-size: .98rem; }
.jw-tx p { margin: .1rem 0 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.jw2 .switch { margin: 0; white-space: nowrap; font-weight: 650; font-size: .88rem; }
.jw2 .jw-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .7rem 0 0 calc(38px + .9rem); padding-top: .7rem; border-top: 1px solid var(--glass-line); }
.jw2 .jw-opts label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; margin: 0; }
.jw2 .jw-opts select { margin: 0; width: auto; min-height: 34px; padding-top: .2rem; padding-bottom: .2rem; }
.jw2 .jw-opts .hint { flex-basis: 100%; margin: 0; font-size: .8rem; }
@media (max-width: 640px) { .jw-row { grid-template-columns: auto minmax(0, 1fr); } .jw2 .switch { grid-column: 1 / -1; } .jw2 .jw-opts { margin-left: 0; } }

.jstart { padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.jsteps { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.jsteps li { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.jst-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.jst-ic .ico { width: 17px; height: 17px; }
.jsteps strong { display: block; font-size: .92rem; }
.jsteps small { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; margin-top: .1rem; }
.jsrc { display: flex; gap: .4rem; align-items: flex-start; margin: .3rem 0 0; font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.jsrc .bi { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--accent-text); }
.jsrc.muted { color: var(--muted); padding-left: calc(14px + .4rem); }
@media (max-width: 760px) { .jsteps { grid-template-columns: 1fr; } }
.jobs4 .jsearch { margin-bottom: 0; } .jobs4 .js-hint { margin: 0; }
/* Kontaktuppgifter: tätare ruta med tre fält per rad, lägre fält och mindre etiketter */
.prof5-top > .profile-card:first-child { padding: 1rem 1.15rem 1.05rem; }
.prof5-top > .profile-card:first-child > .sh4 { margin: 0; font-size: 1.02rem; }
.prof5-top > .profile-card:first-child > .sh4 .sh4-ico { width: 28px; height: 28px; border-radius: 9px; }
.prof5-top > .profile-card:first-child > .hint { margin: .15rem 0 .7rem calc(28px + .6rem); font-size: .82rem; }
#contactForm .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .75rem; margin: 0 0 .75rem; }
#contactForm label { margin: 0; font-size: .78rem; font-weight: 650; color: var(--ink-2); gap: .25rem; }
#contactForm input { margin: .2rem 0 0; min-height: 38px; padding: .4rem .7rem; font-size: .92rem; border-radius: 10px; }
#contactForm > .btn { min-height: 36px; padding: .4rem 1rem; font-size: .88rem; }
@media (max-width: 760px) { #contactForm .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #contactForm .grid2 { grid-template-columns: 1fr; } .prof5-top > .profile-card:first-child > .hint { margin-left: 0; } }
/* ---------- Mina anteckningar i varje steg av en ansökan ---------- */
.snote { margin-top: 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 26px -22px rgba(20, 32, 52, .45); }
.snote > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; border-radius: 18px; }
.snote > summary::-webkit-details-marker { display: none; }
.snote > summary:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.snote > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sn-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.sn-ic .ico { width: 17px; height: 17px; }
.sn-tt { display: grid; min-width: 0; }
.sn-tt strong { font-size: .98rem; }
.sn-tt small { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-chev { color: var(--muted); transition: transform .2s; }
.snote[open] .sn-chev { transform: rotate(180deg); }
.sn-body { padding: 0 1rem 1rem; display: grid; gap: .7rem; }
.sn-rows { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.sn-pick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sn-pick legend { width: 100%; padding: 0; margin-bottom: .35rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.sn-pick label { position: relative; margin: 0; }
.sn-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sn-pick span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: .86rem; font-weight: 650; color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sn-pick span .bi { width: 15px; height: 15px; color: var(--accent-text); }
.sn-pick label:hover span { border-color: var(--accent); background: var(--accent-soft); }
.sn-pick input:checked + span { background: linear-gradient(135deg, #CF540C, #B4490D); border-color: transparent; color: #fff; }
.sn-pick input:checked + span .bi { color: #FFE2C4; }
.sn-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.sn-pick .feel-good input:checked + span { background: var(--ok); }
.sn-pick .feel-ok input:checked + span { background: #8A6A1F; }
.sn-pick .feel-bad input:checked + span { background: var(--danger); }
.sn-text { margin: 0; }
.sn-text textarea { margin: 0; width: 100%; line-height: 1.6; font-size: .95rem; background: color-mix(in srgb, var(--field) 70%, var(--surface)); }
.sn-state { margin: -.35rem 0 0; font-size: .76rem; color: var(--muted); }
.sn-rec { margin-top: .2rem; padding: .8rem .9rem; border-radius: 14px; background: color-mix(in srgb, var(--sunk) 60%, var(--surface)); }
.sn-rec h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; font-size: .92rem; }
.sn-rec h3 .bi { width: 16px; height: 16px; color: var(--accent-text); }
.sn-rec .hint { margin: 0 0 .6rem; font-size: .8rem; }
.sn-files { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.sn-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.sn-f-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.sn-f-ic .ico { width: 15px; height: 15px; }
.sn-f-tx { display: grid; min-width: 0; }
.sn-f-tx strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-f-tx small { font-size: .74rem; color: var(--muted); }
.sn-files .ibtn { width: 32px; height: 32px; }
.sn-files .ibtn.sure { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: var(--danger); }
.sn-rec-act { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sn-up { cursor: pointer; margin: 0; }
.sn-up.busy { opacity: .7; pointer-events: none; }
.sn-up:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.sn-link { display: flex; gap: .4rem; flex: 1; min-width: 240px; margin: 0; }
.sn-link input { flex: 1; margin: 0; min-height: 34px; padding: .3rem .7rem; font-size: .86rem; }
@media (max-width: 600px) { .sn-files li { grid-template-columns: auto minmax(0, 1fr) auto; } .sn-files li .btn { grid-column: 2; justify-self: start; } }
/* Övningsintervjun: tydliga röstval och Lyssna igen */
.mk-voice { flex-basis: 100%; margin: .2rem 0 0; padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); display: grid; gap: .45rem; }
.mk-voice legend { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .3rem; font-size: .85rem; font-weight: 750; color: var(--accent-text); }
.mk-voice legend .bi { width: 15px; height: 15px; }
.mk-voice .switch { margin: 0; font-size: .9rem; font-weight: 600; }
.mk-voice .hint { margin: 0; font-size: .78rem; }
.mk-replay { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); font: 650 .76rem var(--font); cursor: pointer; }
.mk-replay .bi { width: 12px; height: 12px; }
.mk-replay:hover { border-color: var(--accent); background: var(--accent-soft); }
.mock-opts .mk-voice label.switch { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; }
/* ---------- Lönemodell: vad tjänsten är värd + ditt anspråk på samma skala ---------- */
.sal7 { margin: 1.1rem 0; }
.sal7.empty-sal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sal7-scale { position: relative; margin: .6rem 0 1.4rem; padding: 1.6rem .4rem 0; }
.sal7-track { position: relative; height: 12px; border-radius: 99px; background: var(--sunk); }
.sal7-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--navy-3) 55%, var(--surface)), var(--navy-3)); }
.sal7-typ, .sal7-claim { position: absolute; top: 50%; width: 0; }
.sal7-typ::before { content: ""; position: absolute; left: -2px; top: -11px; width: 4px; height: 22px; border-radius: 3px; background: var(--navy); }
.sal7-claim::before { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 0 0 3px var(--surface), 0 6px 14px -6px rgba(224, 86, 11, .8); }
.sal7-typ b, .sal7-claim b { position: absolute; bottom: 16px; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 750; }
.sal7-typ b { color: var(--ink-2); }
.sal7-claim b { color: var(--accent-text); bottom: 18px; }
.sal7-nums { position: relative; height: 1.3rem; margin-top: .45rem; font-size: .8rem; color: var(--muted); }
.sal7-nums span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sal7-nums .typ { color: var(--ink); font-weight: 700; }
.sal7-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.sal7-box { margin: 0; padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sunk) 50%, var(--surface)); display: grid; gap: .45rem; align-content: start; }
.sal7-box.claim { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.sal7-box h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .92rem; }
.sal7-box h3 .bi { width: 16px; height: 16px; color: var(--accent-text); }
.sal7-box .hint, .sal7-box .sal-ad { margin: 0; font-size: .82rem; }
.sal7-big { margin: 0; font: 800 1.45rem/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.sal7-big small { font-size: .8rem; font-weight: 700; color: var(--muted); }
.sal7-in { display: flex; align-items: center; gap: .5rem; margin: 0; }
.sal7-in input { margin: 0; max-width: 11rem; min-height: 42px; font: 800 1.2rem var(--display); }
.sal7-in span { font-weight: 700; color: var(--ink-2); }
.sal7-v { margin: 0; padding: .45rem .65rem; border-radius: 10px; font-size: .84rem; font-weight: 600; background: var(--surface); border-left: 3px solid var(--muted); }
.sal7-v.sal_v_mid { border-color: var(--ok); }
.sal7-v.sal_v_lowmid, .sal7-v.sal_v_low { border-color: var(--warn); }
.sal7-v.sal_v_high { border-color: var(--danger); }
.sal7-act { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 760px) { .sal7-cols { grid-template-columns: 1fr; } }
/* ---------- Ansökan: företaget och tjänsten, kort om tjänsten till höger, läge och intervjuer under processbaren ---------- */
.ah7 { margin-bottom: 1rem; }
.ah7-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1rem 1.6rem; align-items: start; }
.ah7-main .ws-id { display: flex; align-items: center; gap: 1rem; }
.ah7-main h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; }
.ah7-role { margin: .25rem 0 0; font: 700 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.3 var(--font); color: var(--ink-2); }
.ah7-sum { margin: .9rem 0 .4rem; max-width: 62ch; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.ah7-main .ai-note { margin: .2rem 0 0; }
.ah7-facts { padding: .9rem 1rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px -26px rgba(20, 32, 52, .55); }
.ah7-facts h2 { margin: 0 0 .55rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font); font-weight: 750; }
.ah7-facts dl { margin: 0 0 .8rem; display: grid; gap: .1rem; }
.ah7-facts dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .5rem; align-items: center; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.ah7-facts dl > div:last-child { border-bottom: 0; }
.ah7-facts dt { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.ah7-facts dt .bi { width: 14px; height: 14px; color: var(--accent-text); flex: none; }
.ah7-facts dd { margin: 0; font-size: .88rem; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.ah7-facts dd select { margin: 0; width: 100%; min-height: 32px; padding: .2rem 1.8rem .2rem .55rem; font-size: .86rem; }
.ah7-facts dd .link { font-weight: 700; color: var(--accent-text); }
.ah7-ad { width: 100%; justify-content: center; }
@media (max-width: 980px) { .ah7-grid { grid-template-columns: 1fr; } }

.ah7-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem 1.2rem; align-items: start; margin: .9rem 0 1rem; padding: .8rem 1rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 10px 26px -22px rgba(20, 32, 52, .5); }
.ah7-st { display: grid; gap: .3rem; margin: 0; font-size: .78rem; font-weight: 750; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.ah7-st span, .ah7-l { display: inline-flex; align-items: center; gap: .35rem; }
.ah7-st .bi, .ah7-l .bi { width: 14px; height: 14px; color: var(--accent-text); }
.ah7-st select { margin: 0; min-width: 12rem; min-height: 40px; font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ah7-ivs { display: grid; gap: .45rem; }
.ah7-l { font-size: .78rem; font-weight: 750; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.ah7-ivs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ah7-ivs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .4rem .5rem .4rem .45rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ah7-ivs li.past { opacity: .75; }
.ah7-iv-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font: 800 .78rem var(--font); }
.ah7-iv-tx { display: grid; min-width: 0; }
.ah7-iv-tx strong { font-size: .88rem; }
.ah7-iv-tx small { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah7-ivs li select { margin: 0; min-height: 32px; padding: .2rem 1.8rem .2rem .6rem; font-size: .84rem; font-weight: 650; }
.ah7-ivs > .btn { justify-self: start; }
.ah7-none { font-size: .86rem; }
@media (max-width: 640px) { .ah7-now { grid-template-columns: 1fr; } .ah7-ivs li { grid-template-columns: auto minmax(0, 1fr); } .ah7-ivs li select { grid-column: 2; } }

.ad-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 60px); padding: 0; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(14, 24, 40, .7); }
.ad-dlg::backdrop { background: rgba(14, 24, 40, .45); backdrop-filter: blur(3px); }
.ad-dlg-h { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.ad-dlg-h h2 { margin: 0; font-size: 1.1rem; }
.ad-dlg-b { padding: 1rem 1.2rem 1.4rem; font-size: .95rem; line-height: 1.6; }
.mock-opts .mk-vpick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mock-opts .mk-vpick label { display: inline-flex; font-size: .85rem; font-weight: 650; margin: 0; }
.mock-opts .mk-vpick select { margin: 0; min-width: 14rem; min-height: 36px; padding-top: .25rem; padding-bottom: .25rem; font-size: .88rem; }
.mock-opts .mk-vpick .btn { margin-left: 0; }
.mock-opts .mk-vpick label:not(.check) { display: inline-flex; } .mock-opts .mk-vpick select { width: auto; flex: 0 1 18rem; }
/* Vem pratar du med? (valfritt) */
.ah7-who { grid-column: 2 / -1; display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .78rem; font-weight: 650; color: var(--ink-2); }
.ah7-who span { white-space: nowrap; }
.ah7-who small { font-weight: 500; color: var(--muted); }
.ah7-who input { flex: 1; margin: 0; min-height: 30px; padding: .2rem .6rem; font-size: .84rem; }
@media (max-width: 640px) { .ah7-who { flex-wrap: wrap; } .ah7-who input { flex-basis: 100%; } }
.mock-opts .mk-who-in { flex: 1 1 260px; }
.mock-opts .mk-who-in small { font-weight: 500; color: var(--muted); }
.mock-opts .mk-who-in input { margin: 0; }
/* Tätare sidhuvud i ansökan: status och intervjuer under tjänsten, kompakt faktaruta, anteckningar direkt under processbaren */
.ah7 { margin-bottom: .8rem; }
.ah7-grid { gap: .8rem 1.4rem; }
.ah7-main h1 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.ah7-role { margin-top: .15rem; font-size: clamp(1rem, .92rem + .3vw, 1.15rem); }
.ah7-sum { margin: .6rem 0 .7rem; font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ah7-main .ah7-now { margin: 0; padding: .65rem .8rem; grid-template-columns: auto minmax(0, 1fr); }
.ah7-main .ah7-st select { min-width: 10rem; min-height: 36px; font-size: .9rem; }
.ah7-facts { padding: .75rem .9rem .85rem; }
.ah7-facts h2 { margin-bottom: .35rem; }
.ah7-facts dl { margin-bottom: .6rem; }
.ah7-facts dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); padding: .22rem 0; }
.ah7-facts dt { font-size: .76rem; }
.ah7-facts dd { font-size: .84rem; }
.ah7-facts dd select { min-height: 30px; font-size: .82rem; }
.ah7-ad { min-height: 38px; padding-top: .4rem; padding-bottom: .4rem; font-size: .9rem; }
.ws .snote { margin: .9rem 0 1rem; }
.ws-panel > .ai-note { margin: 1rem 0 0; }
@media (max-width: 640px) { .ah7-main .ah7-now { grid-template-columns: 1fr; } }
/* Skickat CV och brev: stort hänglås och tydlig förklaring */
.locked7 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-2, #3A5274), var(--navy)); color: #fff; box-shadow: 0 16px 34px -22px rgba(20, 32, 52, .7); }
.lk7-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; color: #FFB067; }
.lk7-ic .ico { width: 30px; height: 30px; stroke-width: 2; }
.locked7 h3 { margin: 0 0 .2rem; color: #fff; font-size: 1.1rem; }
.locked7 p { margin: 0; color: var(--on-navy-2, #D3DCE8); font-size: .9rem; line-height: 1.5; }
/* ---------- Ansökan v8: lugn topp med en rad för namn och val, fakta som korta etiketter ---------- */
.ah8 { margin-bottom: .9rem; }
.ah8-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.4rem; }
.ah8 .ws-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ah8 h1 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; }
.ah8 .ah7-role { margin: .15rem 0 0; }
.ah8-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .6rem; }
.ah8-sel { display: grid; gap: .2rem; margin: 0; font-size: .74rem; font-weight: 700; color: var(--muted); }
.ah8-sel select { margin: 0; min-width: 9.5rem; min-height: 38px; padding-top: .25rem; padding-bottom: .25rem; font-size: .9rem; font-weight: 650; color: var(--ink); }
.ah8-ad { min-height: 38px; }
.ah8-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; padding: 0; }
.ah8-facts > div { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.ah8-facts dt { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.ah8-facts dt .bi { width: 14px; height: 14px; color: var(--accent-text); }
.ah8-facts dt span::after { content: ":"; }
.ah8-facts dd { margin: 0; font-size: .84rem; font-weight: 700; color: var(--ink); }
.ah8-facts .pay { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ah8-facts dd .link { font-weight: 700; color: var(--accent-text); }
.ah8-now { grid-template-columns: 1fr; margin: .8rem 0 0; }
@media (max-width: 640px) { .ah8-ctl { width: 100%; } .ah8-sel { flex: 1 1 45%; } .ah8-sel select { min-width: 0; width: 100%; } .ah8-ad { width: 100%; justify-content: center; } }
/* Typ och vem för en intervju: samma rad i intervjuraden och i intervjustegets kalender */
.ivmeta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding-top: .45rem; margin-top: .1rem; border-top: 1px dashed var(--line); }
.ivmeta .ivm-k { margin: 0; }
.ivmeta select { margin: 0; min-height: 32px; padding: .2rem 1.8rem .2rem .6rem; font-size: .84rem; font-weight: 650; }
.ivmeta .ah7-who { flex: 1 1 260px; grid-column: auto; }
.ah7-ivs li { grid-template-columns: auto minmax(0, 1fr); }
.iv-cal-list li { flex-wrap: wrap; }
.iv-cal-list li .ivmeta { flex-basis: 100%; }
/* Laddning och "Jobbsmed arbetar": bara städet som hamrar, utan ruta. Namnet finns kvar för skärmläsare. */
.boot-anvil, .work4-box { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.boot-anvil { width: 120px !important; }
.work4-box .anim-anvil { width: 110px; }
.boot span, .work4-box span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { position: relative; }
.boot-anvil .aa-anvil, .work4-box .aa-anvil { fill: var(--navy); }
.boot-anvil .aa-hammer, .work4-box .aa-hammer { fill: var(--navy-3); }
.boot-anvil .aa-hammer rect:first-child, .work4-box .aa-hammer rect:first-child { fill: var(--navy-2, #3A5274); }
.boot-anvil, .work4-box .anim-anvil { filter: drop-shadow(0 14px 18px rgba(30, 44, 62, .22)); }
/* Mjuk orange glöd under städet som pulserar i takt med slagen */
.boot::before, .work4-box::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 110px; transform: translate(-50%, -38%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, .32), transparent); animation: aaHalo .9s ease-in-out infinite; pointer-events: none; z-index: -1; }
.work4-box { position: relative; isolation: isolate; }
.boot { isolation: isolate; }
@keyframes aaHalo { 0%, 55%, 100% { opacity: .5; transform: translate(-50%, -38%) scale(.92); } 64% { opacity: 1; transform: translate(-50%, -38%) scale(1.05); } }
:root[data-theme="dark"] .boot-anvil .aa-anvil, :root[data-theme="dark"] .work4-box .aa-anvil { fill: #F4F7FC; }
:root[data-theme="dark"] .boot-anvil .aa-hammer, :root[data-theme="dark"] .work4-box .aa-hammer { fill: #AEBDD2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boot-anvil .aa-anvil, :root:not([data-theme="light"]) .work4-box .aa-anvil { fill: #F4F7FC; } :root:not([data-theme="light"]) .boot-anvil .aa-hammer, :root:not([data-theme="light"]) .work4-box .aa-hammer { fill: #AEBDD2; } }
@media (prefers-reduced-motion: reduce) { .boot::before, .work4-box::before { animation: none; } }


/* ---------- Förloppsbaren som modern stegvisare: ikon överst, namn under, en linje som fylls fram till ditt steg ---------- */
.wsteps { padding: .75rem .6rem .6rem; }
.wsteps ol { gap: 0; }
.wsteps li { position: relative; }
.wsteps button { flex-direction: column; justify-content: flex-start; gap: .45rem; padding: .35rem .3rem .45rem; text-align: center; border-radius: 14px; background: transparent !important; box-shadow: none !important; }
.wsteps .ws-n { position: relative; z-index: 2; width: 42px; height: 42px; flex: none; border-radius: 50%; transition: transform .2s, box-shadow .2s; }
.wsteps .ws-t { display: grid; justify-items: center; gap: .1rem; }
.wsteps .ws-t strong { font-size: .9rem; }
.wsteps .ws-t small { font-size: .72rem; }
.wsteps button:hover .ws-n { transform: translateY(-2px); }
/* Valt steg: ljus platta under namnet i stället för en ram runt hela steget */
.wsteps li.sel .ws-t strong { padding: .12rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.wsteps li.sel .ws-n { box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.wsteps li.ws-now .ws-n { box-shadow: 0 0 0 5px rgba(255, 138, 61, .28), 0 8px 18px -6px rgba(224, 86, 11, .8); }
/* Linjen mellan stegen, genom ikonernas mitt */
.wsteps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: calc(.35rem + 21px); left: calc(50% + 27px); right: calc(-50% + 27px); width: auto; height: 3px; margin: -1.5px 0 0; border: 0; border-radius: 99px; transform: none; animation: none;
  background: rgba(255, 255, 255, .16); }
.wsteps li.ws-done:not(:last-child)::after { background: linear-gradient(90deg, #FFB067, #FF8A3D); }
/* Från nuvarande steg mot nästa: ett ljussken som glider framåt */
.wsteps li.ws-now:not(:last-child)::after { background: linear-gradient(90deg, rgba(255, 138, 61, .15) 0%, rgba(255, 176, 103, .95) 50%, rgba(255, 138, 61, .15) 100%) 0 0 / 200% 100%, rgba(255, 255, 255, .16); animation: wsFlow 1.8s linear infinite; }
@keyframes wsFlow { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
.wsteps::after { content: none; }
@media (prefers-reduced-motion: reduce) { .wsteps li.ws-now:not(:last-child)::after { animation: none; } }
/* Sidhuvud v9: namn, tjänst och val till vänster, Kort om tjänsten till höger */
.ah9-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 1rem 1.4rem; align-items: start; }
.ah9-main { display: grid; gap: 1rem; align-content: start; }
.ah9-main .ws-id { display: flex; align-items: center; gap: .9rem; }
.ah9-main h1 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; }
.ah9-main .ah8-ctl { justify-content: flex-start; }
.ah7-facts .pay { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); margin: 0 -.45rem; padding-left: .45rem !important; padding-right: .45rem !important; border-radius: 8px; border-bottom: 0 !important; }
@media (max-width: 980px) { .ah9-grid { grid-template-columns: 1fr; } }
/* Klara steg i förloppsbaren i samma orange som linjen */
.wsteps li.ws-done .ws-n { background: rgba(255, 176, 103, .16) !important; border-color: #FFB067 !important; color: #FFB067 !important; box-shadow: none; }
.wsteps li.ws-done .ws-n .ico { color: #FFB067 !important; }
/* ---------- Erbjudande, tackat ja och arkiverat ---------- */
.oc7 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem 1.1rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.oc7-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.oc7-ic .ico { width: 26px; height: 26px; }
.oc7 h2 { margin: 0; font-size: 1.12rem; }
.oc7 p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.oc7-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.oc7.offer, .oc7.accepted { border: 0; color: #fff; background: radial-gradient(360px 160px at 90% 0, rgba(255, 214, 170, .35), transparent 70%), linear-gradient(135deg, #F47A26, #C84F0B); box-shadow: 0 18px 40px -20px rgba(200, 79, 11, .8); }
.oc7.offer h2, .oc7.accepted h2 { color: #fff; }
.oc7.offer p, .oc7.accepted p { color: #FFF1E6; }
.oc7.offer .oc7-ic, .oc7.accepted .oc7-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.oc7.offer .btn.primary { background: #fff !important; color: #B4490D !important; box-shadow: none; }
.oc7.offer .btn:not(.primary) { background: rgba(255, 255, 255, .14) !important; color: #fff; border-color: rgba(255, 255, 255, .45); }
.oc7.offer .link, .oc7.accepted .link { color: #fff; }
.oc7.closed .oc7-ic { background: var(--sunk); color: var(--ink-2); }
@media (max-width: 700px) { .oc7 { grid-template-columns: auto minmax(0, 1fr); } .oc7-act { grid-column: 1 / -1; } }
.al5-oc { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; }
.al5-oc.oc-accepted { color: var(--accent-text); }
.al5-oc.oc-me, .al5-oc.oc-them { color: var(--muted); }
.al5-oc .ico { width: 15px; height: 15px; }

/* Dialogen vid erbjudande eller nej */
.moment { width: min(460px, calc(100vw - 32px)); padding: 1.6rem 1.5rem 1.3rem; border: 0; border-radius: 24px; text-align: center; background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(14, 24, 40, .7); }
.moment::backdrop { background: rgba(14, 24, 40, .45); backdrop-filter: blur(3px); }
.moment[open] { animation: moIn .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes moIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.mo-art { display: grid; place-items: center; margin: 0 auto .6rem; }
.mo-art > .ico { width: 56px; height: 56px; padding: 14px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-text); box-sizing: content-box; }
.moment-offer .mo-art svg { animation: moBounce 1.2s ease .2s; }
@keyframes moBounce { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.moment h2 { margin: 0 0 .4rem; font-size: 1.4rem; }
.moment p { margin: 0 0 1.1rem; color: var(--ink-2); line-height: 1.55; }
.mo-act { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.confetti { position: fixed; inset: 0; z-index: 2000; pointer-events: none; width: 100vw; height: 100vh; }
@media (prefers-reduced-motion: reduce) { .moment[open], .moment-offer .mo-art svg { animation: none; } }

/* Menyn: undermenyerna fälls ut och ihop med klick (ingen hovring som får menyn att hoppa) */
.rail li.has-kids .kid-toggle, .rail li.nav-g.fold button { pointer-events: auto; cursor: pointer; }
/* Skickat dokument: ett större grått hänglås som leder till Mina CV eller Mina brev */
.paper.locked .lock-badge { gap: 0; width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; background: #E9ECF1; color: #5B6577; border: 1px solid #D4DAE3; box-shadow: 0 8px 20px -12px rgba(20, 32, 52, .45); text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.paper.locked .lock-badge svg { width: 24px; height: 24px; stroke-width: 2; }
.paper.locked .lock-badge:hover { background: #DDE2EA; color: #2B3F5A; transform: translateY(-1px); }
.paper.locked .lock-badge:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Status ändras i förloppsbaren: en liten knapp nere till höger i baren */
.wsteps { display: grid; }
.ws-stat { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; margin: .35rem .4rem 0 0; font-size: .74rem; font-weight: 700; color: var(--on-navy-2); text-transform: uppercase; letter-spacing: .06em; }
.ws-stat select { margin: 0; width: auto; min-height: 30px; padding: .15rem 1.9rem .15rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background-color: rgba(255, 255, 255, .1);
  color: #fff; font: 700 .82rem var(--font); text-transform: none; letter-spacing: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23FFB067' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 14px; }
.ws-stat select:hover { background-color: rgba(255, 255, 255, .16); }
.ws-stat select option { color: var(--ink); background: var(--surface); }
/* Steget du tittar på syns tydligt: vit platta under namnet, vit ring och en pil ner mot innehållet */
.wsteps li.sel .ws-t strong { background: #fff; color: var(--navy); }
.wsteps li.sel .ws-n { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255, 255, 255, .18); }
.wsteps li.sel button::after { content: ""; position: absolute; left: 50%; bottom: -.75rem; width: 14px; height: 14px; margin-left: -7px; background: inherit; transform: rotate(45deg); }
.wsteps li.sel button { position: relative; }
.wsteps li.sel button::after { background: #fff; border-radius: 2px; bottom: -1.05rem; opacity: .95; }
.wsteps li:not(.sel) .ws-t strong { opacity: .8; }
/* Inforutan: sökt via och nästa intervju */
.ah7-facts .iv-next { background: color-mix(in srgb, var(--navy) 7%, transparent); margin: 0 -.45rem; padding-left: .45rem !important; padding-right: .45rem !important; border-radius: 8px; }
.ah7-facts .iv-next .link { font-weight: 700; color: var(--navy); text-align: left; }
/* Inforutan i full bredd under namnet: uppgifterna i kolumner, annonsknappen i överkant */
.ah9-grid { grid-template-columns: 1fr; gap: .8rem; }
.ah7-facts { padding: .75rem 1rem .85rem; }
.ahf-h { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; }
.ahf-h h2 { margin: 0; }
.ah7-facts .ah7-ad { width: auto; }
.ah7-facts dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem .9rem; margin: 0; }
.ah7-facts dl > div { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .45rem .6rem !important; margin: 0 !important; border: 0 !important; border-radius: 12px; background: color-mix(in srgb, var(--sunk) 55%, var(--surface)); }
.ah7-facts dl > div.pay { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); }
.ah7-facts dl > div.iv-next { background: color-mix(in srgb, var(--navy) 9%, var(--surface)); }
.ah7-facts dd select { min-height: 28px; }
.wsteps li.sel button::after { content: none; }
@media (max-width: 560px) { .ahf-h { flex-wrap: wrap; } .ah7-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-stat select { -webkit-appearance: none; appearance: none; }
/* Sidhuvud v10: namn och anteckningar till vänster, kompakt lista Kort om tjänsten till höger */
.ah9-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: .8rem 1.4rem; }
.ah9-main { gap: .8rem; }
.ah7-facts.ahf-list { padding: .75rem .9rem .85rem; }
.ah7-facts.ahf-list h2 { margin: 0 0 .35rem; }
.ah7-facts.ahf-list dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 .6rem; }
.ah7-facts.ahf-list dl > div { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .5rem; align-items: center; padding: .24rem 0 !important; margin: 0 !important; border-radius: 0; background: none; border-bottom: 1px dashed var(--line) !important; }
.ah7-facts.ahf-list dl > div:last-child { border-bottom: 0 !important; }
.ah7-facts.ahf-list dl > div.pay, .ah7-facts.ahf-list dl > div.iv-next { margin: 0 -.45rem !important; padding: .28rem .45rem !important; border-radius: 8px; border-bottom: 0 !important; }
.ah7-facts.ahf-list dl > div.pay { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); }
.ah7-facts.ahf-list dl > div.iv-next { background: color-mix(in srgb, var(--navy) 8%, var(--surface)); }
.ah7-facts.ahf-list .ah7-ad { width: 100%; justify-content: center; min-height: 38px; }
/* Anteckningarna som en liten ruta under rubriken */
.ah9-main .snote { margin: 0; border-radius: 14px; box-shadow: none; }
.ah9-main .snote > summary { padding: .5rem .7rem; gap: .55rem; border-radius: 14px; }
.ah9-main .sn-ic { width: 28px; height: 28px; border-radius: 9px; }
.ah9-main .sn-ic .ico { width: 15px; height: 15px; }
.ah9-main .sn-tt strong { font-size: .88rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ah9-main .sn-tt small { font-size: .74rem; }
.sn-step { font-weight: 600; color: var(--muted); }
.sn-badge { font-style: normal; padding: .08rem .5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 750; letter-spacing: .02em; }
.ah9-main .sn-body { padding: 0 .7rem .7rem; }
.ah9-main .sn-text textarea { min-height: 7rem; }
@media (max-width: 980px) { .ah9-grid { grid-template-columns: 1fr; } }
.ah7-facts.ahf-list dl > div { grid-template-columns: 9.6rem minmax(0, 1fr); } .ah7-facts.ahf-list dt { white-space: nowrap; }
/* Hänglåset med en liten ruta vid hovring eller klick */
.paper.locked .lock7 { position: absolute; z-index: 4; top: 12px; right: 12px; }
.paper.locked .lock7 .lock-badge { position: static; cursor: pointer; border: 1px solid #D4DAE3; }
.lock-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; padding: .8rem .9rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 44px -18px rgba(20, 32, 52, .55); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.lock-pop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.lock7:hover .lock-pop, .lock7:focus-within .lock-pop, .lock7.open .lock-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s, visibility 0s; }
.lock-pop strong { display: block; font-size: .92rem; color: var(--ink); }
.lock-pop p { margin: .25rem 0 .7rem; font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.lock-pop .btn { width: 100%; justify-content: center; }
/* ---------- Ditt erbjudande ---------- */
.offer7 { margin: 0 0 1rem; padding: .9rem 1.1rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 14px 34px -26px rgba(200, 79, 11, .6); }
.offer7 h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.offer7 h2 .bi { width: 18px; height: 18px; color: var(--accent-text); }
.offer7.edit .hint { margin: .2rem 0 .7rem; font-size: .84rem; }
.of-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .8rem; margin-bottom: .8rem; }
.of-grid label { margin: 0; font-size: .8rem; font-weight: 650; color: var(--ink-2); display: grid; gap: .25rem; }
.of-grid input, .of-grid select, .of-grid textarea { margin: 0; min-height: 38px; font-size: .92rem; }
.of-grid .wide { grid-column: 1 / -1; }
.of-h { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.of-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .45rem .7rem; margin: 0 0 .6rem; }
.of-sum > div { padding: .45rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.of-sum dt { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.of-sum dt .bi { width: 14px; height: 14px; color: var(--accent-text); }
.of-sum dd { margin: .1rem 0 0; font-weight: 750; font-size: .95rem; }
.of-cmp { margin: 0 0 .4rem; padding: .45rem .65rem; border-radius: 10px; font-size: .86rem; font-weight: 650; background: var(--sunk); border-left: 3px solid var(--muted); }
.of-cmp.up { border-color: var(--ok); }
.of-cmp.down { border-color: var(--warn); }
.of-ben { margin: 0; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 700px) { .of-grid { grid-template-columns: 1fr 1fr; } }
/* ================= Ansökan v10: innehåll till vänster, fast sidospalt till höger, smal stegrad ================= */
.ws10 { max-width: 1320px; }
.ws10 > .crumb { margin: 0 0 .5rem; }
.ws10-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.ws10-main { min-width: 0; }
.ws10-side { position: sticky; top: 1rem; display: grid; gap: .7rem; }
.ws10-head { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; }
.ws10-head .ac4-av.big { width: 46px; height: 46px; font-size: 1.15rem; border-radius: 14px; }
.ws10-head h1 { margin: 0; font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); line-height: 1.15; }
.ws10-head .ah7-role { margin: .1rem 0 0; font-size: .98rem; }

/* Smal stegrad: ikon och namn på samma rad, tunn linje mellan, status sist */
.ws10 .wsteps { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .45rem .6rem; border-radius: 16px; overflow-x: auto; }
.ws10 .wsteps ol { display: flex; flex: 1; align-items: center; gap: 0; min-width: max-content; }
.ws10 .wsteps li { flex: 1 1 auto; display: flex; align-items: center; }
.ws10 .wsteps li:not(:last-child)::after { position: static; flex: 1 1 18px; min-width: 14px; height: 2px; margin: 0 .35rem; top: auto; left: auto; right: auto; border-radius: 99px; }
.ws10 .wsteps button { flex-direction: row; gap: .45rem; padding: .3rem .55rem .3rem .3rem; width: auto; height: auto; border-radius: 999px; text-align: left; }
.ws10 .wsteps .ws-n { width: 28px; height: 28px; }
.ws10 .wsteps .ws-n .ico { width: 14px; height: 14px; }
.ws10 .wsteps .ws-t { justify-items: start; gap: 0; }
.ws10 .wsteps .ws-t strong { font-size: .84rem; white-space: nowrap; padding: 0; background: none; }
.ws10 .wsteps .ws-t small { font-size: .66rem; line-height: 1.1; }
.ws10 .wsteps li.sel button { background: #fff !important; }
.ws10 .wsteps li.sel .ws-t strong { color: var(--navy); background: none; }
.ws10 .wsteps li.sel .ws-n { box-shadow: none; }
.ws10 .wsteps li.ws-done.sel .ws-n { background: color-mix(in srgb, var(--accent) 14%, #fff) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; }
.ws10 .wsteps li.ws-done.sel .ws-n .ico { color: var(--accent-text) !important; }
.ws10 .wsteps li.sel .ws-t small { color: var(--accent-text); }
.ws10 .ws-stat { margin: 0; flex: none; gap: .35rem; padding-left: .6rem; border-left: 1px solid rgba(255, 255, 255, .15); }
.ws10 .ws-stat > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* CV / Brev: liten flikväljare i stället för en jättebred rad */
.ws10 .ws-docseg { display: inline-flex; width: auto; margin: 0 0 .6rem; }
.ws10 .ws-docseg button { min-width: 7rem; padding: .45rem 1rem; }

/* Sidospalten */
.ws10-side .ah7-facts.ahf-list dl > div { grid-template-columns: 7.6rem minmax(0, 1fr); }
.ws10-side .ah7-facts.ahf-list dt { white-space: normal; }
.ws10-side .snote { margin: 0; border-radius: 16px; box-shadow: none; }
.ws10-side .snote > summary { padding: .55rem .7rem; gap: .5rem; border-radius: 16px; }
.ws10-side .sn-ic { width: 28px; height: 28px; border-radius: 9px; }
.ws10-side .sn-ic .ico { width: 15px; height: 15px; }
.ws10-side .sn-tt strong { font-size: .86rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ws10-side .sn-tt small { font-size: .72rem; white-space: normal; }
.ws10-side .sn-body { padding: 0 .7rem .7rem; }
.ws10-side .sn-rows { gap: .5rem; }
.ws10-side .sn-rec-act { flex-direction: column; align-items: stretch; }
.ws10-side .sn-link { min-width: 0; }

@media (max-width: 1100px) {
  .ws10-grid { grid-template-columns: 1fr; }
  .ws10-side { position: static; order: -1; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 700px) { .ws10-side { grid-template-columns: 1fr; } }
/* Stegraden i full bredd; sidospaltens fakta som etikett över värde */
.ws10 .wsteps .ws-t strong { font-size: .86rem; }
.ws10-side .ah7-facts.ahf-list dl > div { grid-template-columns: 1fr; gap: 0; padding: .3rem 0 !important; }
.ws10-side .ah7-facts.ahf-list dt { font-size: .72rem; }
.ws10-side .ah7-facts.ahf-list dd { font-size: .86rem; }
.ws10-side .ah7-facts.ahf-list dd select { margin-top: .15rem; }
@media (max-width: 1100px) {
  .ws10-side .ah7-facts.ahf-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
  .ws10-side .ah7-facts.ahf-list dl > div.pay, .ws10-side .ah7-facts.ahf-list dl > div.iv-next { margin: .2rem 0 !important; }
  .ws10-side .ah7-facts.ahf-list dd { overflow-wrap: anywhere; }
}
/* Den tänkande smeden: större och lugnare – lyfter hammaren i lugnt tempo, ett tydligt slag, gnistor och glöd i takt */
.boot-anvil { width: 160px !important; }
.work4-box .anim-anvil { width: 150px; }
.boot::before, .work4-box::before { width: 230px; height: 140px; }
.boot-anvil .aa-hammer, .work4-box .aa-hammer { animation: aaHitSlow 1.7s cubic-bezier(.45, 0, .2, 1) infinite; }
.boot-anvil .aa-sparks path, .work4-box .aa-sparks path { animation: aaSparkSlow 1.7s ease-out infinite; stroke-width: 3; }
.boot-anvil .aa-sparks path:nth-child(2), .work4-box .aa-sparks path:nth-child(2) { animation-delay: .06s; }
.boot-anvil .aa-sparks path:nth-child(3), .work4-box .aa-sparks path:nth-child(3) { animation-delay: .12s; }
.boot-anvil .aa-plate, .work4-box .aa-plate { animation: aaGlowSlow 1.7s ease-in-out infinite; }
.boot::before, .work4-box::before { animation: aaHaloSlow 1.7s ease-in-out infinite; }
@keyframes aaHitSlow { 0% { transform: rotate(0deg); } 12% { transform: rotate(-2deg); } 55% { transform: rotate(42deg); } 66% { transform: rotate(-4deg); } 72% { transform: rotate(1deg); } 78%, 100% { transform: rotate(0deg); } }
@keyframes aaSparkSlow { 0%, 64% { opacity: 0; transform: none; } 68% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -9px); } }
@keyframes aaGlowSlow { 0%, 62%, 100% { fill: var(--accent); } 70% { fill: #FFC48A; } }
@keyframes aaHaloSlow { 0%, 60%, 100% { opacity: .45; transform: translate(-50%, -38%) scale(.92); } 70% { opacity: 1; transform: translate(-50%, -38%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .boot-anvil .aa-hammer, .work4-box .aa-hammer, .boot-anvil .aa-sparks path, .work4-box .aa-sparks path, .boot-anvil .aa-plate, .work4-box .aa-plate { animation: none; } }
.boot-anvil { width: 190px !important; } .work4-box .anim-anvil { width: 180px; } .boot::before, .work4-box::before { width: 260px; height: 160px; }
.al5-arch { text-decoration: none; color: inherit; border: 1px solid var(--line); }
.al5-arch:hover, .al5-arch.on { border-color: var(--accent); background: var(--accent-soft); }
.al5-oc.oc-ghost { color: var(--muted); }
/* Logiktester: tre nivåer per typ med stjärnor */
.lg-star { display: inline-grid; place-items: center; color: color-mix(in srgb, var(--muted) 45%, transparent); }
.lg-star .ico { width: 16px; height: 16px; }
.lg-star.on { color: #F5A524; }
.lg-star.on .ico, .lg-levels li.pass .lg-lv-mark .ico { fill: currentColor; }
.lg-card-top .lg-pill { display: inline-flex; gap: 1px; padding: .3rem .55rem; background: var(--sunk); }
.lg-card-top .lg-pill.has { background: #FFF6E0; }
.lg-card.all { border-color: #F5A524; box-shadow: 0 0 0 2px rgba(245, 165, 36, .25), var(--sh-1); }
.lg-levels { list-style: none; margin: .2rem 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.lg-levels li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 12px; background: color-mix(in srgb, var(--sunk) 60%, var(--surface)); }
.lg-levels li.pass { background: #FFF6E0; }
.lg-lv-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-2); color: var(--muted); }
.lg-lv-mark .ico { width: 14px; height: 14px; }
.lg-levels li.tried .lg-lv-mark { border-style: solid; color: var(--ok); }
.lg-levels li.pass .lg-lv-mark { border: 0; background: #F5A524; color: #fff; }
.lg-lv-t { display: grid; min-width: 0; }
.lg-lv-t strong { font-size: .88rem; }
.lg-lv-t small { font-size: .74rem; color: var(--muted); }
.lg-levels .btn { min-height: 30px; padding: .2rem .7rem; font-size: .8rem; }
.lg-card-time { display: flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; font-size: .78rem; color: var(--muted); }
.lg-card-time .bi { width: 14px; height: 14px; }
.lg-s-t .lg-star .ico { width: 13px; height: 13px; }
.lg-card .lg-chips { display: none; }
/* ================= Den väntande smeden (forge): mjuk, levande och i takt ================= */
.forge { display: block; width: 190px; height: auto; overflow: visible; }
.fg-anvil { fill: var(--navy); }
.fg-head { fill: var(--navy-2, #3A5274); }
.fg-handle { fill: var(--navy-3); }
.fg-plate { fill: var(--accent); }
.fg-shadow { fill: rgba(30, 44, 62, .18); }
.fg-sp { fill: #FFB067; opacity: 0; }
.fg-hammer { transform-box: view-box; transform-origin: 120px 38.75px; animation: fgSwing 1.8s cubic-bezier(.55, 0, .25, 1) infinite; will-change: transform; }
.fg-glow { transform-box: fill-box; transform-origin: center; animation: fgGlow 1.8s ease-out infinite; }
.fg-plate { transform-box: view-box; animation: fgHeat 1.8s ease-in-out infinite; }
.fg-anvil { transform-box: view-box; }
.fg-anvil { animation: fgThud 1.8s ease-out infinite; }
.fg-sp { animation: fgSpark 1.8s cubic-bezier(.2, .7, .3, 1) infinite; animation-delay: var(--d, 0s); }
.fg-shadow { transform-box: fill-box; transform-origin: center; animation: fgShadow 1.8s ease-in-out infinite; }
/* Hammaren: vilar uppe, tar sats, slår, studsar mjukt */
@keyframes fgSwing { 0% { transform: rotate(34deg); } 18% { transform: rotate(40deg); } 58% { transform: rotate(-1deg); } 63% { transform: rotate(3deg); } 70% { transform: rotate(0deg); } 100% { transform: rotate(34deg); } }
@keyframes fgHeat { 0%, 55%, 100% { fill: var(--accent); } 62% { fill: #FFD3A8; } 75% { fill: #FF8A3D; } }
@keyframes fgGlow { 0%, 56% { opacity: .35; transform: scale(.85); } 63% { opacity: 1; transform: scale(1.12); } 100% { opacity: .35; transform: scale(.85); } }
@keyframes fgThud { 0%, 57%, 70%, 100% { transform: translateY(0); } 61% { transform: translateY(1.2px); } }
@keyframes fgSpark { 0%, 58% { opacity: 0; transform: translate(0, 0) scale(1); } 61% { opacity: 1; } 85% { opacity: .8; transform: translate(var(--x), var(--y)) scale(.9); } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.25), calc(var(--y) * .4 + 10px)) scale(.4); } }
@keyframes fgShadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 60% { transform: scaleX(.92); opacity: 1; } }

/* Vänteläget: smeden mitt på en mjukt tonad sida, en text som byter ton */
.work4.w5 { background: color-mix(in srgb, var(--bg, #E1E5EB) 72%, transparent); backdrop-filter: blur(6px); animation: w5In .35s ease-out both; }
.work4.w5.out { opacity: 0; transition: opacity .25s ease; }
@keyframes w5In { from { opacity: 0; } }
.w5 .work4-box { display: grid; justify-items: center; gap: .3rem; padding: 0 !important; background: none !important; box-shadow: none !important; }
.w5 .work4-box::before { content: none; }
.w5 .forge { width: 200px; filter: drop-shadow(0 16px 22px rgba(30, 44, 62, .18)); }
.w5-msg { position: relative; height: 1.5em; width: 22rem; max-width: 80vw; margin: 0; text-align: center; font: 700 1rem var(--font); color: var(--ink-2); }
.w5-msg span { position: absolute; inset: 0; opacity: 0; animation: w5Msg 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes w5Msg { 0% { opacity: 0; transform: translateY(6px); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-6px); } }
/* Startskärmen */
.boot .boot-forge { width: 200px; }
.boot::before { content: none !important; }
:root[data-theme="dark"] .fg-anvil { fill: #F4F7FC; } :root[data-theme="dark"] .fg-head { fill: #C9D4E6; } :root[data-theme="dark"] .fg-handle { fill: #AEBDD2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fg-anvil { fill: #F4F7FC; } :root:not([data-theme="light"]) .fg-head { fill: #C9D4E6; } :root:not([data-theme="light"]) .fg-handle { fill: #AEBDD2; } }
@media (prefers-reduced-motion: reduce) { .fg-hammer, .fg-plate, .fg-glow, .fg-anvil, .fg-sp, .fg-shadow, .w5-msg span { animation: none; } .fg-hammer { transform: rotate(0deg); } .w5-msg span:first-child { opacity: 1; } }
/* ================= Mina ansökningar v6: tratt överst, filterchips, rader med färg per läge ================= */
.al6-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: 22px; color: #fff;
  background: radial-gradient(420px 200px at 92% -20%, rgba(255, 138, 61, .35), transparent 65%), linear-gradient(135deg, var(--navy-2, #3A5274), var(--navy)); box-shadow: 0 18px 40px -26px rgba(30, 44, 62, .8); }
.al6-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.al6-funnel li { position: relative; flex: 1 1 130px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.al6-funnel li:not(:last-child)::after { content: ""; position: absolute; right: -.4rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid rgba(255, 255, 255, .4); border-width: 2px 2px 0 0; transform: rotate(45deg); z-index: 1; }
.al6-ic { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #FFB067; }
.al6-ic .ico { width: 18px; height: 18px; }
.al6-funnel b { font: 800 1.5rem/1 var(--display); color: #fff; }
.al6-funnel li > span:last-child { font-size: .78rem; color: var(--on-navy-2); }
.al6-funnel li.hot { background: rgba(255, 138, 61, .18); }
.al6-funnel li.win { background: linear-gradient(135deg, rgba(255, 176, 103, .35), rgba(224, 86, 11, .35)); }
.al6-funnel li.win .al6-ic { background: #FFB067; color: #fff; }
.al6-side { display: grid; gap: .4rem; }
.al6-wait, .al6-arch { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; font-size: .84rem; color: var(--on-navy-2); text-decoration: none; background: rgba(255, 255, 255, .08); }
.al6-wait .ico, .al6-arch .ico { width: 15px; height: 15px; color: #FFB067; }
.al6-wait b, .al6-arch b { color: #fff; }
.al6-arch:hover, .al6-arch.on { background: rgba(255, 255, 255, .18); color: #fff; }
.al6-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.al6-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .86rem; font-weight: 650; }
.al6-chips a b { min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; display: inline-grid; place-items: center; background: var(--sunk); font-size: .74rem; color: var(--ink-2); }
.al6-chips a:hover { border-color: var(--accent); }
.al6-chips a[aria-current="true"] { background: linear-gradient(135deg, #CF540C, #B4490D); border-color: transparent; color: #fff; }
.al6-chips a[aria-current="true"] b { background: rgba(255, 255, 255, .25); color: #fff; }
/* Grupperna och raderna */
.al5-sec { background: transparent; border: 0; }
.al5-sec > summary { padding: .5rem .3rem; }
.al5-sec > summary:hover { background: transparent; }
.al5-sec-t { font-size: 1.05rem; }
.al5-list { padding: 0; gap: .55rem; }
.al5 { position: relative; overflow: hidden; border: 0; box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 10px 26px -20px rgba(36, 52, 74, .45); }
.al5::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.sec-active .al5::before { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.sec-todo .al5::before { background: var(--navy-3); }
.sec-waiting .al5::before { background: #8FA3BF; }
.sec-closed .al5::before { background: var(--line-2); }
.al5:hover { box-shadow: 0 1px 2px rgba(36, 52, 74, .05), 0 16px 32px -20px rgba(36, 52, 74, .55); }
.sec-active .al5-sec-ic { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.sec-todo .al5-sec-ic { background: color-mix(in srgb, var(--navy) 12%, var(--surface)); color: var(--navy); }
.sec-waiting .al5-sec-ic { background: color-mix(in srgb, #8FA3BF 25%, var(--surface)); color: var(--navy-2); }
.al5-next:not(.al5-oc) > span { font-weight: 700; }
.sec-closed .al5 { opacity: .85; }
@media (max-width: 700px) { .al6-funnel li { flex-basis: 45%; } .al6-funnel li::after { display: none; } .al6-side { grid-auto-flow: column; } }
/* ---------- Spontanansökan: företaget, hemsidan och liknande företag ---------- */
.sp7-co, .sp7-sim { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 26px -22px rgba(20, 32, 52, .45); }
.sp7-co h2, .sp7-sim h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.sp7-co h2 .bi, .sp7-sim h2 .bi { width: 18px; height: 18px; color: var(--accent-text); }
.sp7-site { margin: .7rem 0 0; }
.sp7-site label { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.sp7-site > div { display: flex; gap: .5rem; margin-top: .25rem; }
.sp7-site input { flex: 1; margin: 0; min-height: 40px; }
.sp7-site .hint { margin: .35rem 0 0; font-size: .8rem; }
.sp7-prof { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.sp7-sum { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.55; }
.sp7-prof dl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.sp7-prof dl > div { padding: .3rem .65rem; border-radius: 999px; background: var(--sunk); font-size: .82rem; display: flex; gap: .3rem; }
.sp7-prof dt { color: var(--muted); } .sp7-prof dt::after { content: ":"; } .sp7-prof dd { margin: 0; font-weight: 700; }
.sp7-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.sp7-lists > div { padding: .6rem .75rem; border-radius: 12px; background: color-mix(in srgb, var(--sunk) 55%, var(--surface)); }
.sp7-lists h4 { margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); }
.sp7-lists ul { margin: 0; padding-left: 1rem; font-size: .86rem; display: grid; gap: .2rem; }
.sp7-sim-h { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sp7-sim > .hint { margin: .3rem 0 .6rem; font-size: .82rem; }
.sp7-sim-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.sp7-sim-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem .7rem; border-radius: 14px; background: color-mix(in srgb, var(--sunk) 50%, var(--surface)); }
.sp7-sim-tx { display: grid; min-width: 0; }
.sp7-sim-tx small { color: var(--muted); font-size: .78rem; }
.sp7-sim-tx > span { font-size: .85rem; color: var(--ink-2); }
.sp7-sim-act { display: grid; justify-items: end; gap: .25rem; }
.sp7-sim-act .link { font-size: .78rem; }
#simWrap { margin-top: 1.2rem; }
@media (max-width: 640px) { .sp7-sim-list li { grid-template-columns: auto minmax(0, 1fr); } .sp7-sim-act { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; } .sp7-site > div { flex-direction: column; } }
/* Roll och lediga jobb hos företaget */
.sp7-role { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 10px 26px -22px rgba(200, 79, 11, .5); }
.sp7-role h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.sp7-role h2 .bi { width: 18px; height: 18px; color: var(--accent-text); }
.sp7-jobs { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.sp7-jobs-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-weight: 750; }
.sp7-jobs-h .bi { width: 16px; height: 16px; color: #F5A524; }
.sp7-jobs ul { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .4rem; }
.sp7-jobs li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.sp7-job-tx { display: grid; min-width: 0; }
.sp7-job-tx small { color: var(--muted); font-size: .78rem; }
.sp7-job-act { display: flex; align-items: center; gap: .6rem; flex: none; }
.sp7-job-act .link { font-size: .8rem; }
.sp7-jobs .hint { margin: 0 0 .4rem; font-size: .8rem; }
.sp7-jobs.none p { margin: 0 0 .6rem; font-weight: 600; }
@media (max-width: 640px) { .sp7-jobs li { flex-direction: column; align-items: flex-start; } }
/* ================= Mina ansökningar v7: smal summering, två filter (typ och läge), färg per typ ================= */
.al6-hero { display: none; }
.al7-top { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin: 0 0 .8rem; }
.al7-top .al5-bar { margin: 0; }
.al7-sum { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; padding: .45rem .8rem; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.al7-n { display: inline-flex; align-items: baseline; gap: .3rem; padding: .1rem .35rem; }
.al7-n .ico { width: 15px; height: 15px; align-self: center; color: var(--accent-text); }
.al7-n b { font: 800 1.05rem var(--display); color: var(--ink); }
.al7-n small { font-size: .8rem; color: var(--muted); }
.al7-arrow { width: 7px; height: 7px; border: solid var(--line-2); border-width: 2px 2px 0 0; transform: rotate(45deg); margin: 0 .25rem; }
.al7-filters { display: grid; gap: .45rem; margin: 0 0 1.1rem; padding: .7rem .8rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.al7-fg { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.al7-fl { width: 3.6rem; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.al7-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .84rem; font-weight: 650; transition: border-color .15s, background .15s; }
.al7-chip b { min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; display: inline-grid; place-items: center; background: var(--sunk); font-size: .72rem; }
.al7-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.al7-chip.k-annons i { background: var(--navy-3); }
.al7-chip.k-spontan i { background: var(--accent); }
.al7-chip.k-sparad i { background: #8FA3BF; }
.al7-chip:hover { border-color: var(--accent); }
.al7-chip[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.al7-chip[aria-current="true"] b { background: rgba(255, 255, 255, .2); color: #fff; }
.al7-chip.k-spontan[aria-current="true"] { background: linear-gradient(135deg, #CF540C, #B4490D); border-color: transparent; }
.al7-chip[aria-current="true"] i { box-shadow: 0 0 0 2px #fff; }
/* Färg per typ: annons marinblå, spontan orange, sparad gråblå (kant och initialruta) */
.al5::before { background: var(--navy-3) !important; width: 5px; }
.al5.kind-spontan::before { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; }
.al5.kind-sparad::before { background: #8FA3BF !important; }
.al5 .al5-av { background: linear-gradient(145deg, var(--navy-3), var(--navy)) !important; color: #fff; }
.al5.kind-spontan .al5-av { background: linear-gradient(145deg, var(--accent-2), var(--accent)) !important; }
.al5.kind-sparad .al5-av { background: linear-gradient(145deg, #A9B9CF, #7C8FAB) !important; }
.sec-active .al5-sec-ic, .sec-todo .al5-sec-ic, .sec-waiting .al5-sec-ic { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 700px) { .al7-fl { width: 100%; } .al7-sum { border-radius: 16px; } }
.al7-filters { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
.al7-fgs { display: grid; gap: .45rem; }
.al7-filters .al7-tools { margin: 0; }
.al7-filters .al5-tools { flex-direction: column; align-items: stretch; gap: .4rem; }
.al7-filters .al5-tools .search { width: 230px; }
.al7-sum { margin: 0 0 .7rem; width: fit-content; max-width: 100%; }
@media (max-width: 900px) { .al7-filters { grid-template-columns: 1fr; } .al7-filters .al5-tools { flex-direction: row; } .al7-filters .al5-tools .search { width: auto; flex: 1; } }
.al7-filters .al5-sort select { width: 100%; } @media (min-width: 901px) { .al7-filters .al5-sort { width: 230px; } }

/* ---------- Mina färdiga CV / Mina brev: hopfällbara kategorier (v7) ---------- */
.cv6-sum button { display: flex; align-items: baseline; gap: .5rem; width: 100%; padding: .85rem 1.1rem; border-radius: var(--r-m); background: var(--glass, var(--surface)); border: 1px solid var(--line); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cv6-sum button:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--sh-1); }
.cv6-sum button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cv6-sum button:disabled { cursor: default; opacity: .6; }
.cv6-sum button b { font: 750 1.6rem/1 var(--display); color: var(--ink); }
.cv6-sum button span { font-size: .9rem; font-weight: 600; }
@media (max-width: 760px) { .cv6-sum button { flex-direction: column; gap: .15rem; padding: .7rem; } .cv6-sum button span { font-size: .78rem; } }

.cv6-sec.fold { margin-bottom: 1.6rem; border-radius: var(--r-l); }
.cv6-sec.fold > summary { list-style: none; cursor: pointer; padding: .55rem .6rem; margin: 0 -.6rem .6rem; border-radius: var(--r-m); transition: background .15s; }
.cv6-sec.fold > summary::-webkit-details-marker, .cv6-more > summary::-webkit-details-marker { display: none; }
.cv6-sec.fold > summary:hover { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.cv6-sec.fold > summary:focus-visible, .cv6-more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cv6-sec.fold:not([open]) { margin-bottom: .6rem; }
.cv6-sec.fold:not([open]) > summary { margin-bottom: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); margin-left: 0; margin-right: 0; padding: .7rem .9rem; }
.cv6-ht { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.cv6-ht h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.2rem; }
.cv6-hp { color: var(--muted); font-size: .9rem; }
.fold-tg { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: var(--sunk); transition: background .15s, color .15s; }
.fold-chev { transition: transform .2s; }
details[open] > summary .fold-tg .fold-chev { transform: rotate(180deg); }
summary:hover .fold-tg { background: var(--accent-soft); color: var(--accent-text); }
.cv6-sec.flash > summary { animation: cv7flash 1.2s ease-out; }
@keyframes cv7flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .cv6-sec.flash > summary { animation: none; } .fold-chev { transition: none; } }

/* Versioner, brev och sparade CV under varje annons eller standard-CV */
.cv6-more { border-top: 1px solid var(--line); }
.cv6-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; padding: .5rem 1rem .5rem 4.1rem; font-size: .86rem; font-weight: 600; color: var(--ink-2); transition: background .15s; }
.cv6-more > summary:hover { background: color-mix(in srgb, var(--sunk) 55%, transparent); }
.cv6-more > summary .fold-tg { width: 28px; height: 28px; margin-left: auto; }
.cv6-cnt { display: inline-flex; align-items: center; gap: .35rem; }
.cv6-cnt .ico { width: 15px; height: 15px; color: var(--muted); }
.cv6-cnt.has-l { color: var(--navy-2); }
.cv6-cnt.has-l .ico { color: var(--navy-3); }
.cv6-cnt.no-l { color: var(--muted); font-weight: 500; }
.cv6-last { color: var(--muted); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }
.cv6-more > .cv6-vers { border-top: 0; padding-top: 0; }
.cv6-ad .cv6-vers li.letter .cv6-vi { background: color-mix(in srgb, var(--navy-3) 14%, transparent); color: var(--navy-2); }
.cv6-ad .cv6-vers li.letter + li.letter::before, .cv6-ad .cv6-vers li:not(.letter) + li.letter::before { background: color-mix(in srgb, var(--navy-3) 35%, transparent); }
.cv6-ad.std { box-shadow: inset 3px 0 0 var(--navy-3), var(--sh-1); }
.cv6-row > .cv6-acts { grid-column: 4; grid-row: 1; display: flex; align-items: center; gap: .4rem; }
.act-av.tr { background: color-mix(in srgb, var(--navy-3) 16%, var(--surface)); color: var(--navy-2); }
.act-av.tr .ico { width: 18px; height: 18px; }
.cv6-none { margin: 0; padding: .1rem 1rem .85rem 4.1rem; color: var(--muted); font-size: .85rem; }
[data-theme="dark"] .cv6-cnt.has-l, [data-theme="dark"] .cv6-ad .cv6-vers li.letter .cv6-vi, [data-theme="dark"] .act-av.tr { color: #C9D6EA; }
@media (max-width: 760px) {
  .cv6-more > summary, .cv6-none { padding-left: .9rem; }
  .cv6-row > .cv6-acts { grid-column: 1 / -1; grid-row: auto; }
  .cv6-last { display: none; }
}

/* ---------- Mina färdiga CV v8: filter, sök och en lista med riktiga miniatyrer ---------- */
.cv8-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin: 0 0 1.8rem; }
.cv8-filter { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cv8-filter button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 600 .9rem var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.cv8-filter button span { font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cv8-filter button:hover { color: var(--ink); }
.cv8-filter button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 27, 51, .08), 0 2px 8px -4px rgba(11, 27, 51, .18); }
.cv8-filter button[aria-pressed="true"] span { color: var(--accent-text); }
.cv8-filter button:focus-visible, .cv8-search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cv8-search { position: relative; flex: 0 1 300px; display: flex; align-items: center; }
.cv8-search > .ico { position: absolute; left: .8rem; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.cv8-search input { width: 100%; padding: .62rem .9rem .62rem 2.35rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; }
.cv8-noresult { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: var(--r-m); background: var(--surface); border: 1px dashed var(--line-2); color: var(--ink-2); }

.cv8-sec { margin: 0 0 2.2rem; scroll-margin-top: 90px; }
.cv8-sec > details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: .2rem 0; margin-bottom: .9rem; border-radius: 10px; }
.cv8-sec > details > summary::-webkit-details-marker, .cv8-docs > summary::-webkit-details-marker { display: none; }
.cv8-sec > details > summary:focus-visible, .cv8-docs > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cv8-sec h2 { grid-column: 1; margin: 0; display: flex; align-items: baseline; gap: .55rem; font: 700 1.2rem/1.25 var(--display); color: var(--ink); }
.cv8-n { font: 650 .95rem var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.cv8-sub { grid-column: 1; color: var(--muted); font-size: .9rem; margin-top: .15rem; max-width: 70ch; }
.cv8-sec > details > summary > .fold-chev { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--ink-2); background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); }
.cv8-sec > details > summary:hover > .fold-chev { color: var(--accent-text); background: var(--accent-soft); }
.cv8-sec > details:not([open]) > summary { margin-bottom: 0; }
.cv8 details[open] > summary > .fold-chev { transform: rotate(180deg); }

.cv8-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }
.cv8-item + .cv8-item { border-top: 1px solid var(--line); }
.cv8-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.05rem 1.4rem; }
.cv8-txt { min-width: 0; }
.cv8-txt h3 { margin: 0; font: 650 1.05rem/1.3 var(--display); }
.cv8-txt h3 a { color: var(--ink); text-decoration: none; }
.cv8-txt h3 a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.cv8-role { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv8-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; margin: .45rem 0 0; font-size: .84rem; color: var(--ink-2); }
.cv8-facts span { display: inline-flex; align-items: center; gap: .3rem; }
.cv8-facts .ico { width: 15px; height: 15px; }
.cv8-facts .has-l { color: var(--navy-2); font-weight: 600; }
.cv8-facts .no-l, .cv8-facts .tr { color: var(--muted); }
.cv8-state, .cv8-acts { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.cv8-lock { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); background: color-mix(in srgb, var(--navy-3) 8%, var(--surface)); }
.cv8-lock .ico { width: 15px; height: 15px; }

/* Pappersbunten: CV:t längst fram, en extra version bakom, brevet snett bakom till höger */
.cv8-thumb { display: block; text-decoration: none; }
.cv8-stack { position: relative; display: block; width: 60px; height: 84px; margin-left: 2px; }
.cv8-sheet { position: absolute; top: 0; left: 0; width: 58px; height: 82px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .08), 0 3px 8px -2px rgba(11, 27, 51, .22); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.cv8-sheet.f { overflow: hidden; z-index: 3; }
.cv8-sheet.b { z-index: 2; transform: translate(-3px, 3px) rotate(-5deg); }
.cv8-sheet.l { z-index: 1; background: #F2F5FA; transform: translate(17px, 4px) rotate(8deg); padding: 12px 8px 0; display: flex; flex-direction: column; gap: 5px; border-top: 4px solid var(--navy-3); }
.cv8-sheet.l i { display: block; height: 2px; border-radius: 1px; background: #CBD5E1; }
.cv8-sheet.l i:nth-child(1) { width: 55%; } .cv8-sheet.l i:nth-child(5) { width: 70%; }
.cv8-mini { display: block; width: 794px; transform: scale(.073); transform-origin: top left; pointer-events: none; }
.cv8-mini .cvdoc { min-height: 1123px; }
.cv8-item:hover .cv8-sheet.l { transform: translate(22px, 1px) rotate(11deg); }
.cv8-item:hover .cv8-sheet.b { transform: translate(-6px, 4px) rotate(-8deg); }

/* Dokumenten under en rad */
.cv8-docs > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; margin: -.35rem 0 .75rem calc(1.4rem + 82px + 1.25rem); padding: .2rem .5rem .2rem 0; font-size: .85rem; font-weight: 600; color: var(--accent-text); border-radius: 8px; }
.cv8-docs > summary .fold-chev { width: 16px; height: 16px; }
.cv8-docs > summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cv8-docs ul { list-style: none; margin: -.3rem 1.4rem 1rem calc(1.4rem + 82px + 1.25rem - .6rem); padding: .3rem 0; border-left: 2px solid var(--line); }
.cv8-docs li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 8.5rem; align-items: center; gap: .75rem; padding: .45rem .7rem; margin-left: .5rem; border-radius: 10px; color: var(--ink); text-decoration: none; }
.cv8-docs li a:hover { background: color-mix(in srgb, var(--navy-3) 7%, var(--surface)); }
.cv8-docs li a:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cv8-di { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); color: var(--ink-2); }
.cv8-di .ico { width: 16px; height: 16px; }
.cv8-di.main { background: var(--accent-soft); color: var(--accent-text); }
.cv8-di.l { background: color-mix(in srgb, var(--navy-3) 16%, var(--surface)); color: var(--navy-2); }
.cv8-dt { display: grid; min-width: 0; }
.cv8-dt strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv8-dt small { color: var(--muted); font-size: .78rem; }
.cv8-new { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: .1rem .5rem; border-radius: 99px; }
.cv8-docs time { grid-column: 4; text-align: right; color: var(--muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.cv8-add { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; padding: .85rem 1.2rem; border-radius: var(--r-m); border: 1.5px dashed var(--line-2); color: var(--ink-2); text-decoration: none; }
.cv8-add span { display: grid; }
.cv8-add small { color: var(--muted); font-size: .82rem; }
.cv8-add:hover { border-color: var(--accent); color: var(--accent-text); }
.cv8-empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: var(--r-l); background: var(--surface); border: 1px dashed var(--line-2); }
.cv8-empty p { margin: 0; color: var(--ink-2); }

[data-theme="dark"] .cv8-facts .has-l, [data-theme="dark"] .cv8-di.l { color: #C9D6EA; }
@media (prefers-reduced-motion: reduce) { .cv8-sheet { transition: none; } .cv8-item:hover .cv8-sheet.l, .cv8-item:hover .cv8-sheet.b { transform: none; } }
@media (max-width: 760px) {
  .cv8-bar { flex-direction: column; align-items: stretch; }
  .cv8-search { flex: none; }
  .cv8-row { grid-template-columns: 78px minmax(0, 1fr); gap: .9rem; padding: .95rem 1rem; }
  .cv8-state, .cv8-acts { grid-column: 2; justify-content: flex-start; }
  .cv8-docs > summary { margin-left: calc(1rem + 78px + .9rem); }
  .cv8-docs ul { margin: -.3rem .8rem .9rem 1rem; }
  .cv8-docs li a { grid-template-columns: auto minmax(0, 1fr); }
  .cv8-docs time, .cv8-new { grid-column: 2; justify-self: start; }
  .cv8-role { white-space: normal; }
}
@media (max-width: 760px) {
  .cv8-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv8-filter button { flex-direction: column; gap: .05rem; padding: .45rem .2rem; font-size: .78rem; white-space: nowrap; text-align: center; line-height: 1.2; letter-spacing: -.01em; }
}
.dp-tpl svg .tb-m { fill: var(--cv-accent); opacity: .45; }

/* ---------- Dokumentlistor v9 (Mina färdiga CV och Mina brev): täta rader med miniatyrer ---------- */
.dl-bar { display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.dl-filter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); border: 1px solid var(--line); }
.dl-filter button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 600 .86rem var(--font); cursor: pointer; white-space: nowrap; }
.dl-filter button span { font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-filter button:hover { color: var(--ink); }
.dl-filter button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 27, 51, .08), 0 2px 8px -4px rgba(11, 27, 51, .18); }
.dl-filter button[aria-pressed="true"] span { color: var(--accent-text); }
.dl-filter button:focus-visible, .dl-search input:focus-visible, .dl-tg:focus-visible, .dl-sec summary:focus-visible, .dl-docs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dl-search { position: relative; flex: 0 1 270px; display: flex; align-items: center; }
.dl-search > .ico { position: absolute; left: .7rem; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.dl-search input { width: 100%; padding: .48rem .8rem .48rem 2.1rem; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; }
.dl-none { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px dashed var(--line-2); color: var(--ink-2); font-size: .9rem; }

.dl-sec { margin: 0 0 1.5rem; scroll-margin-top: 90px; }
.dl-sec summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .7rem; margin-bottom: .55rem; border-radius: 8px; }
.dl-sec summary::-webkit-details-marker { display: none; }
.dl-sec h2 { flex: none; margin: 0; display: flex; align-items: baseline; gap: .45rem; font: 700 1.05rem/1.3 var(--display); color: var(--ink); }
.dl-n { font: 650 .85rem var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-sub { flex: 1; min-width: 0; color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-sec summary > .fold-chev { flex: none; align-self: center; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: var(--ink-2); background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); transition: transform .2s; }
.dl-sec summary:hover > .fold-chev { color: var(--accent-text); background: var(--accent-soft); }
.dl-sec details[open] > summary > .fold-chev { transform: rotate(180deg); }
.dl-sec details:not([open]) > summary { margin-bottom: 0; }

.dl-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); overflow: hidden; }
.dl-item + .dl-item { border-top: 1px solid var(--line); }
.dl-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .6rem 1rem; }
.dl-txt { min-width: 0; }
.dl-txt h3 { margin: 0; font: 650 .98rem/1.3 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-txt h3 a { color: inherit; text-decoration: none; }
.dl-txt h3 a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dl-role { margin-left: .55rem; font: 500 .86rem var(--font); color: var(--muted); }
.dl-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .9rem; margin: .2rem 0 0; font-size: .8rem; color: var(--ink-2); }
.dl-facts > span { display: inline-flex; align-items: center; gap: .28rem; }
.dl-facts .ico { width: 14px; height: 14px; }
.dl-facts .has-l { color: var(--navy-2); font-weight: 600; }
.dl-facts .no-l, .dl-facts .mut { color: var(--muted); }
.dl-tg { display: inline-flex; align-items: center; gap: .2rem; padding: 0; border: 0; background: none; font: 600 .8rem var(--font); color: var(--accent-text); cursor: pointer; border-radius: 6px; }
.dl-tg .fold-chev { width: 14px; height: 14px; transition: transform .2s; }
.dl-tg[aria-expanded="true"] .fold-chev { transform: rotate(180deg); }
.dl-tg:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-end { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.dl-lock { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); background: color-mix(in srgb, var(--navy-3) 8%, var(--surface)); }
.dl-lock .ico { width: 13px; height: 13px; }

/* Miniatyren: dokumentet fram, en version bakom, det andra dokumentet snett bakom */
.dl-thumb { display: block; text-decoration: none; }
.dl-stack { position: relative; display: block; width: 52px; height: 58px; }
.dl-sheet { position: absolute; top: 1px; left: 2px; width: 40px; height: 56px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .09), 0 2px 6px -2px rgba(11, 27, 51, .25); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.dl-sheet.f { overflow: hidden; z-index: 3; }
.dl-sheet.b { z-index: 2; transform: translate(-2px, 2px) rotate(-5deg); }
.dl-sheet.o { z-index: 1; transform: translate(10px, 2px) rotate(8deg); padding: 9px 5px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.dl-sheet.o i { display: block; height: 2px; border-radius: 1px; background: #CBD5E1; }
.dl-sheet.o i:nth-child(1) { width: 55%; } .dl-sheet.o i:nth-child(4) { width: 70%; }
.dl-sheet.o.letter { background: #F2F5FA; border-top: 3px solid var(--navy-3); }
.dl-sheet.o.cv { background: linear-gradient(90deg, #ECE7DF 0 32%, #fff 32%); padding-left: 16px; }
.dl-mini { display: block; width: 794px; transform: scale(.0504); transform-origin: top left; pointer-events: none; }
.dl-mini .cvdoc { min-height: 1123px; }
.dl-item:hover .dl-sheet.o { transform: translate(14px, 0) rotate(11deg); }
.dl-item:hover .dl-sheet.b { transform: translate(-4px, 3px) rotate(-8deg); }

/* Dokumenten under raden */
.dl-docs { list-style: none; margin: -.15rem 1rem .65rem calc(1rem + 56px + .9rem - .55rem); padding: .1rem 0; border-left: 2px solid var(--line); }
.dl-docs li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 8rem; align-items: center; gap: .65rem; padding: .32rem .55rem; margin-left: .45rem; border-radius: 9px; color: var(--ink); text-decoration: none; }
.dl-docs li a:hover { background: color-mix(in srgb, var(--navy-3) 7%, var(--surface)); }
.dl-di { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--navy-3) 9%, var(--surface)); color: var(--ink-2); }
.dl-di .ico { width: 14px; height: 14px; }
.dl-di.main { background: var(--accent-soft); color: var(--accent-text); }
.dl-di.l { background: color-mix(in srgb, var(--navy-3) 16%, var(--surface)); color: var(--navy-2); }
.dl-dt { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.dl-dt strong { font-size: .87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-dt small { flex: none; color: var(--muted); font-size: .76rem; }
.dl-new { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: .05rem .45rem; border-radius: 99px; }
.dl-docs time { text-align: right; color: var(--muted); font-size: .77rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dl-add { display: inline-flex; align-items: baseline; gap: .55rem; margin-top: .55rem; padding: .5rem .9rem; border-radius: 12px; border: 1.5px dashed var(--line-2); color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.dl-add .ico { align-self: center; width: 16px; height: 16px; }
.dl-add small { color: var(--muted); font-size: .8rem; }
.dl-add:hover { border-color: var(--accent); color: var(--accent-text); }
.dl-empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-2); }
.dl-empty p { margin: 0; color: var(--ink-2); font-size: .92rem; }

[data-theme="dark"] .dl-facts .has-l, [data-theme="dark"] .dl-di.l { color: #C9D6EA; }
@media (prefers-reduced-motion: reduce) { .dl-sheet, .dl-tg .fold-chev, .dl-sec summary > .fold-chev { transition: none; } .dl-item:hover .dl-sheet.o, .dl-item:hover .dl-sheet.b { transform: none; } }
@media (max-width: 760px) {
  .dl-bar { flex-direction: column; align-items: stretch; }
  .dl-search { flex: none; }
  .dl-filter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .dl-filter button { flex-direction: column; gap: 0; padding: .4rem .2rem; font-size: .78rem; text-align: center; line-height: 1.2; }
  .dl-sub { display: none; }
  .dl-row { grid-template-columns: 52px minmax(0, 1fr); padding: .7rem .85rem; gap: .75rem; }
  .dl-end { grid-column: 2; justify-content: flex-start; }
  .dl-txt h3 { white-space: normal; }
  .dl-role { display: block; margin: 0; }
  .dl-docs { margin: -.1rem .7rem .7rem .8rem; }
  .dl-docs li a { grid-template-columns: auto minmax(0, 1fr); }
  .dl-docs time, .dl-new { grid-column: 2; justify-self: start; text-align: left; }
  .dl-dt { flex-direction: column; gap: 0; }
}
.dl-sec summary > .fold-chev { margin-left: auto; }
/* Profil: kontaktuppgifter och bild bredvid varandra överst */
.pf-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.4rem; }
.pf-top > * { margin: 0; }
@media (max-width: 900px) { .pf-top { grid-template-columns: minmax(0, 1fr); } }
/* CV för en ansökan: vidare till brev och pitch för samma tjänst */
.nl-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--navy-3) 7%, var(--surface)); border: 1px solid var(--line); }
.nl-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--navy-3) 16%, var(--surface)); color: var(--navy-2); }
.nl-tx h2 { margin: 0; font: 650 1rem/1.3 var(--display); }
.nl-tx p { margin: .1rem 0 0; color: var(--muted); font-size: .86rem; }
.nl-act { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
[data-theme="dark"] .nl-ic { color: #C9D6EA; }
@media (max-width: 760px) { .nl-card { grid-template-columns: auto minmax(0, 1fr); } .nl-act { grid-column: 1 / -1; justify-content: flex-start; } }
/* Lägg ett dokument under en typ av tjänst */
.dl-move select { max-width: 13rem; padding: .32rem 1.9rem .32rem .6rem; border-radius: 9px; border: 1px solid var(--line); background-color: var(--surface); color: var(--ink-2); font: 500 .8rem var(--font); }
.dl-move select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dl-docs li.has-after { display: flex; align-items: center; gap: .4rem; }
.dl-docs li.has-after > a { flex: 1; min-width: 0; }
.dl-docs li.has-after .dl-move select { max-width: 10rem; }
.dl .oldcv { margin-top: 1.4rem; }
@media (max-width: 760px) { .dl-docs li.has-after { flex-wrap: wrap; } .dl-docs li.has-after .dl-move { margin-left: 2.6rem; } }

/* ---------- Standardsvar v9: rader per ansökan, svaren under ---------- */
.cm9 .dl-filter { flex-wrap: wrap; }
.cm-av { width: 40px; height: 40px; margin: 0 auto; }
.cm9 .dl-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.cm9 .dl-facts .cmk .ico { color: var(--muted); }
.cm9 .dl-docs { margin-right: 1rem; }
.cm-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .65rem; padding: .5rem .55rem; margin-left: .45rem; border-radius: 9px; }
.cm-line:hover { background: color-mix(in srgb, var(--navy-3) 6%, var(--surface)); }
.cm-line .dl-di { margin-top: .1rem; }
.cm-lt { display: grid; gap: .1rem; min-width: 0; }
.cm-lt strong { font-size: .86rem; font-weight: 650; }
.cm-tx { font-size: .86rem; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-subj { color: var(--ink); font-size: .82rem; }
.cm-note { color: var(--muted); font-size: .76rem; }
.cm-btns { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.cm-newcat { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cm-newcat input { min-width: 14rem; padding: .4rem .7rem; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; }
@media (max-width: 760px) { .cm-line { grid-template-columns: auto minmax(0, 1fr); } .cm-btns { grid-column: 2; justify-content: flex-start; } .cm-newcat input { min-width: 0; flex: 1; } }

.dl-add.cm-newcat { width: fit-content; max-width: 100%; flex-wrap: nowrap; align-items: center; }
@media (max-width: 760px) { .dl-add.cm-newcat { width: 100%; flex-wrap: wrap; } }

/* ---------- Övriga formulärsvar: tre täta grupper, två kolumner ---------- */
.fs9-head { display: flex; align-items: baseline; gap: .3rem .7rem; flex-wrap: wrap; margin-bottom: .7rem; }
.fs9-head h2 { margin: 0; display: flex; align-items: baseline; gap: .45rem; font: 700 1.05rem/1.3 var(--display); }
.fs9-head .fs9-state { margin: 0 0 0 auto; }
.fs9-g { margin: 0 0 .8rem; padding: .75rem 1rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); }
.fs9-g h2 { margin: 0 0 .5rem; font: 650 .92rem/1.3 var(--display); color: var(--ink); }
.fs9-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; }
.fs9-f { display: grid; gap: .2rem; min-width: 0; }
.fs9-f.wide { grid-column: 1 / -1; }
.fs9-l { font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.fs9-in { display: flex; align-items: center; gap: .35rem; }
.fs9-in input, .fs9-in textarea { flex: 1; min-width: 0; padding: .42rem .65rem; border-radius: 9px; border: 1px solid var(--line); background: var(--field, var(--surface)); color: var(--ink); font: inherit; font-size: .9rem; resize: vertical; }
.fs9-in textarea { min-height: 2.3rem; }
.fs9-in input:focus-visible, .fs9-in textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.fs9-in .ibtn { width: 32px; height: 32px; flex: none; }
.fs9-range .fs9-in input { flex: 0 1 9.5rem; }
.fs9-unit { color: var(--muted); font-size: .85rem; }
.fs9-h { color: var(--muted); font-size: .78rem; }
@media (max-width: 760px) { .fs9-grid { grid-template-columns: minmax(0, 1fr); } .fs9-head .fs9-state { margin-left: 0; } }
.fs9 .fs9-l { display: block; margin: 0; padding: 0; }
.fs9 .fs9-in input, .fs9 .fs9-in textarea { margin: 0; }
.fs9 .fs9-f { margin: 0; }
.fs9-head .dl-sub { white-space: normal; overflow: visible; }
.fs9 .fs9-f { align-content: start; }
.dl-ghost { display: block; position: relative; }
.dl-ghost::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .3); pointer-events: none; }

/* Saknat underlag: en rad överst på sidan */
.mi-note { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 12px; background: color-mix(in srgb, #FF8A3D 10%, var(--surface)); border: 1px solid color-mix(in srgb, #FF8A3D 35%, var(--line)); color: var(--ink); font-size: .88rem; }
.mi-note .ico { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: var(--accent-text); }
.mi-note p { margin: 0; }
.mi-note b { font-weight: 650; }

/* ---------- Standardbrev per typ av tjänst ---------- */
.ltypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.ltype { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ltype header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.ltype h3 { margin: 0; font: 700 1.08rem/1.3 var(--display); }
.ltype header .muted { font-size: .8rem; white-space: nowrap; }
.ltype .chips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.ltype .chips li { padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); }
.ltype-angle { margin: 0; font-size: .86rem; color: var(--ink-2); }
.ltype-paper { position: relative; display: block; height: 250px; overflow: hidden; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); }
.ltype-paper.ghost::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .28); pointer-events: none; }
.ltype-mini { position: absolute; left: 50%; top: 14px; width: 794px; transform: translateX(-50%) scale(.3); transform-origin: top center; pointer-events: none; box-shadow: 0 4px 20px rgba(0, 0, 0, .12); }
.ltype-mini .cvdoc { min-height: 1123px; }
.ltype .btnrow { display: flex; align-items: center; gap: .45rem; margin-top: auto; }
.ltype .btnrow .ibtn { margin-left: auto; }

/* Behöver fyllas i: en liten penna i ljus marinblå (samma familj som menyn) som "skriver" och en mjuk puls runt */
.need { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(145deg, #93B2D6, #5D7EA8); color: #fff; vertical-align: middle; box-shadow: 0 1px 3px rgba(43, 63, 90, .3); }
.need[hidden] { display: none; }
.need svg { position: relative; z-index: 1; }
.need::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #8AA9CE; opacity: 0; }
.ptabs a[aria-current="page"] .need { background: linear-gradient(145deg, #A9C3E2, #6A8BB5); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.ptabs a[aria-current="page"] .need::after { border-color: #D6E3F2; }
@media (prefers-reduced-motion: no-preference) {
  .need::after { animation: needPing 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .need svg { animation: needWrite 2.6s ease-in-out infinite; transform-origin: 30% 80%; }
}
@keyframes needPing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes needWrite { 0%, 55%, 100% { transform: translate(0, 0) rotate(0); } 62% { transform: translate(-1px, 1px) rotate(-12deg); } 70% { transform: translate(1px, 0) rotate(8deg); } 78% { transform: translate(-1px, 1px) rotate(-6deg); } }
.fs9-lr { display: flex; align-items: center; gap: .4rem; }
.sh4 .need { margin-left: .35rem; }

/* ---------- Pitch & mailsvar: förslag överst med pratbubblor ---------- */
.cm-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: 0 0 1.4rem; padding: 1.2rem 1.4rem; border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, #FF8A3D 9%, var(--surface)), var(--surface) 60%); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cm-bubbles { width: 100%; height: auto; }
.cm-sugg { min-width: 0; }
.cm-sugg-k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; color: var(--accent-text); }
.cm-sugg h2 { margin: 0 0 .4rem; font: 700 1.15rem/1.3 var(--display); }
.cm-sugg-subj { margin: 0 0 .3rem; font-size: .9rem; }
.cm-sugg blockquote { margin: 0; padding: .7rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: .95rem; line-height: 1.5; color: var(--ink); }
.cm-sugg-src { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.cm-sugg-act { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.cm-sugg-act .cm-open { margin-left: auto; font-size: .85rem; }
@media (prefers-reduced-motion: no-preference) {
  .cm-bubbles .b { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: bubIn .5s cubic-bezier(.3, 1.4, .5, 1) forwards, bubFloat 5s ease-in-out infinite; }
  .cm-bubbles .b1 { animation-delay: .1s, .6s; }
  .cm-bubbles .b2 { animation-delay: .6s, 1.1s; }
  .cm-bubbles .b3 { animation-delay: 1.1s, 1.6s; }
  .cm-bubbles .d { animation: dotBlink 1.2s ease-in-out infinite; }
  .cm-bubbles .d2 { animation-delay: .2s; } .cm-bubbles .d3 { animation-delay: .4s; }
}
@keyframes bubIn { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bubFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes dotBlink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (max-width: 760px) { .cm-hero { grid-template-columns: minmax(0, 1fr); } .cm-bubbles { max-width: 160px; margin: 0 auto; } .cm-sugg-act .cm-open { margin-left: 0; } }
/* Nya varianter av en pitch */
.cm-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .7rem; }
.cm-var { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cm-var-t { align-self: flex-start; padding: .1rem .55rem; border-radius: 99px; background: color-mix(in srgb, var(--navy-3) 12%, var(--surface)); color: var(--navy-2); font-size: .75rem; font-weight: 700; }
.cm-var p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.cm-var-act { display: flex; gap: .4rem; margin-top: auto; }
[data-theme="dark"] .cm-var-t { color: #C9D6EA; }
@media (max-width: 760px) { .cm-vars { grid-template-columns: minmax(0, 1fr); } }
/* Pitch på beställning */
.cm-len { margin: .3rem 0 .5rem; font-size: .78rem; color: var(--muted); }
.cm-gen { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line-2); }
.cm-gen-h { margin: 0 0 .45rem; font-size: .85rem; font-weight: 650; color: var(--ink-2); }
.cm-gen-row { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.cm-gen-row input, .cm-gen-row select { padding: .5rem .7rem; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.cm-gen-job { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.cm-gen-job > .ico { position: absolute; left: .7rem; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cm-gen-job input { width: 100%; padding-left: 2.1rem; }
.cm-gen-len input { width: 6rem; }
.cm-gen-row input:focus-visible, .cm-gen-row select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ---------- Min skrivstil v9 ---------- */
.vo9 { display: grid; gap: 1rem; }
.vo-top { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, #FF8A3D 9%, var(--surface)), var(--surface) 60%); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.vo-svg { width: 100%; height: auto; }
.vo-k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; color: var(--accent-text); }
.vo-h { margin: 0 0 .3rem; font: 700 1.15rem/1.3 var(--display); }
.vo-sum { margin: 0 0 .6rem; color: var(--ink); line-height: 1.5; max-width: 70ch; }
.vo-types { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.vo-types li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.vo-types .ico { width: 15px; height: 15px; color: var(--navy-3); }
.vo-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.vo-cols h3 { margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.vo-chips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.vo-chips li { padding: .2rem .6rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--ink); }
.vo-chips.words li { background: color-mix(in srgb, var(--navy-3) 10%, var(--surface)); }
.vo-chips.avoid li { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.vo-panel { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.vo-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; }
.vo-panel > summary::-webkit-details-marker { display: none; }
.vo-panel > summary > span { flex: 1; display: grid; }
.vo-panel > summary small { color: var(--muted); font-size: .84rem; }
.vo-panel > summary .fold-chev { color: var(--ink-2); transition: transform .2s; }
.vo-panel[open] > summary .fold-chev { transform: rotate(180deg); }
.vo-panel > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
.vo-panel form { padding: 0 1.1rem 1rem; }
.vo-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.vo-f { display: grid; gap: .3rem; margin: 0; }
.vo-f > span { font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.vo-f textarea { width: 100%; min-height: 9rem; margin: 0; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--field, var(--surface)); color: var(--ink); font: inherit; font-size: .9rem; resize: vertical; }
.vo-f textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.vo-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.vo-foot .btn { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .vo-line { stroke-dasharray: 90; stroke-dashoffset: 90; animation: voWrite 3.2s ease-in-out infinite; }
  .vo-pen { animation: voPen 3.2s ease-in-out infinite; }
}
@keyframes voWrite { 0% { stroke-dashoffset: 90; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 90; opacity: 0; } }
@keyframes voPen { 0% { transform: translate(-58px, 0); } 55% { transform: translate(0, 0); } 85% { transform: translate(0, 0); } 100% { transform: translate(-58px, 0); } }
@media (max-width: 900px) { .vo-fields, .vo-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .vo-top { grid-template-columns: minmax(0, 1fr); } .vo-svg { max-width: 140px; } .vo-foot .btn { margin-left: 0; } }
.vo9 .oldcv { margin: 0; }
.cm-mailbody { white-space: pre-line; max-height: 16rem; overflow: auto; }
/* E-postbild på Mailsvar */
.cm-mailart { width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .cm-mailart .ma-env { transform-box: fill-box; transform-origin: 50% 100%; animation: bubIn .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  .cm-mailart .ma-letter { animation: maLetter 4.5s ease-in-out .5s infinite; }
  .cm-mailart .ma-badge { transform-box: fill-box; transform-origin: center; animation: maBadge 4.5s ease-in-out 1s infinite; }
  .cm-mailart .ma-plane { animation: maPlane 4.5s ease-in-out .8s infinite; }
  .cm-mailart .ma-trail { stroke-dashoffset: 0; animation: maTrail 1.2s linear infinite; }
}
@keyframes maLetter { 0%, 100% { transform: translateY(18px); } 35%, 75% { transform: translateY(-6px); } }
@keyframes maBadge { 0%, 15% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.2); opacity: 1; } 32%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes maPlane { 0% { transform: translate(-40px, 30px) rotate(8deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { transform: translate(24px, -16px) rotate(-6deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes maTrail { to { stroke-dashoffset: -18; } }

/* Ordmätare: en ring som fylls upp mot 150 ord */
.vo-meter { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .8rem .3rem .35rem; border-radius: 99px; background: var(--sunk); }
.vo-ring { width: 36px; height: 36px; flex: none; transform: rotate(-90deg); }
.vo-ring circle { fill: none; stroke-width: 4; }
.vo-ring .tr { stroke: var(--line-2); }
.vo-ring .pr { stroke: #C9A28A; stroke-linecap: round; transition: stroke-dasharray .35s ease, stroke .3s; }
.vo-ring text { transform: rotate(90deg); transform-origin: 18px 18px; font: 750 10px var(--font); fill: var(--ink); }
.vo-meter.mid .pr { stroke: #FF8A3D; }
.vo-meter.ok .pr { stroke: #15803D; }
.vo-mt { display: grid; line-height: 1.25; }
.vo-mt strong { font-size: .84rem; font-weight: 650; color: var(--ink); }
.vo-mt small { font-size: .76rem; color: var(--muted); }
.vo-meter.ok .vo-mt small { color: #15803D; }

/* ---------- Dina exempel v9 ---------- */
.ex9 { display: grid; gap: 1.2rem; }
.ex-top { grid-template-columns: auto minmax(0, 1fr); }
.ex-ring9 { width: 104px; height: 104px; background: conic-gradient(#FF8A3D calc(var(--p) * 1%), color-mix(in srgb, var(--navy-3) 18%, var(--surface)) 0); }
.ex-ring9 b { width: 82px; height: 82px; background: var(--surface); color: var(--ink); }
.ex-ring9 small { color: var(--muted); }
.ex-sample { margin-top: .2rem; }
.ex-sample > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: .88rem; list-style: none; }
.ex-sample > summary::-webkit-details-marker { display: none; }
.ex-sample dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; margin: .6rem 0 0; padding: .8rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ex-sample dt { font-size: .76rem; font-weight: 700; color: var(--ink-2); }
.ex-sample dd { margin: .1rem 0 0; font-size: .86rem; color: var(--ink); }
.ex-step > h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font: 700 1.05rem/1.3 var(--display); }
.ex-sn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-2); color: #fff; font: 750 .8rem var(--font); flex: none; }
.ex-sn.sm { width: 22px; height: 22px; font-size: .74rem; }
.ex9 .ex-ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .9rem; margin: 0; }
.ex9 .ex-way { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ex9 .ex-way.rec { border-color: color-mix(in srgb, #FF8A3D 45%, var(--line)); }
.ex9 .ex-way h3 { margin: 0; font: 700 1rem/1.3 var(--display); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ex9 .ex-way p { margin: .2rem 0 0; color: var(--ink-2); font-size: .9rem; }
.ex9 .ex-way > .btn { align-self: flex-start; margin-top: auto; }
.ex-rec { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: .12rem .5rem; border-radius: 99px; }
.ex-themes { display: flex; flex-wrap: wrap; gap: .4rem; }
.ex-theme { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .75rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .84rem var(--font); cursor: pointer; }
.ex-theme:hover { border-color: var(--accent); color: var(--accent-text); }
.ex-theme.used { color: var(--muted); background: var(--sunk); }
.ex-theme.own { border-style: dashed; }
.ex-theme:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ex9 .story { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 .5rem; box-shadow: var(--sh-1); }
.ex9 .story > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.ex9 .story > summary::-webkit-details-marker { display: none; }
.st-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.ex9 .story.ok .st-ic { background: color-mix(in srgb, #15803D 14%, var(--surface)); color: #15803D; }
.st-ic .ico { width: 16px; height: 16px; }
.ex9 .st-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-prog { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); }
.st-dots { display: inline-flex; gap: 3px; }
.st-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.st-dots i.on { background: #FF8A3D; }
.ex9 .story.ok .st-dots i.on { background: #15803D; }
.ex9 .st-state { font-size: .76rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); }
.ex9 .story.ok .st-state { background: color-mix(in srgb, #15803D 12%, var(--surface)); color: #15803D; }
.st-form { display: grid; gap: .7rem; padding: 0 1rem 1rem; }
.st-form label { display: grid; gap: .3rem; margin: 0; }
.st-tl { font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.st-fh { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.st-fh b { font-size: .9rem; }
.st-fh small { color: var(--muted); font-size: .8rem; }
.st-form input, .st-form textarea { width: 100%; padding: .55rem .7rem; border-radius: 11px; border: 1px solid var(--line); background: var(--field, var(--surface)); color: var(--ink); font: inherit; font-size: .92rem; resize: vertical; margin: 0; }
@media (max-width: 860px) { .ex9 .ex-ways, .ex-sample dl { grid-template-columns: minmax(0, 1fr); } .ex9 .story > summary { grid-template-columns: auto minmax(0, 1fr); } .st-prog, .ex9 .st-state { grid-column: 2; justify-self: start; } }
/* Platshållare i förslag: en streckad etikett att fylla i */
.cm-ph { display: inline-block; padding: 0 .45em; margin: 0 .05em; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, #FF8A3D 70%, transparent); background: color-mix(in srgb, #FF8A3D 10%, var(--surface)); color: var(--accent-text); font-weight: 600; font-size: .92em; line-height: 1.5; }
/* Dina exempel: kompakt blå topp */
.ex-top9 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: .9rem 1.2rem; border-radius: 20px; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); box-shadow: var(--sh-1); }
.ex-top9 h2 { margin: 0 0 .2rem; font: 700 1.08rem/1.3 var(--display); color: #fff; }
.ex-top9 p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--on-navy-2); max-width: 75ch; }
.ex-top9 .ex-ring9 { width: 76px; height: 76px; background: conic-gradient(#FF8A3D calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); }
.ex-top9 .ex-ring9 b { width: 60px; height: 60px; background: var(--navy); color: #fff; font-size: 1.3rem; }
.ex-top9 .ex-ring9 small { color: var(--on-navy-2); }
.ex-top9 .ex-sample { margin-top: .4rem; }
.ex-top9 .ex-sample > summary { color: #FFC48A; font-size: .84rem; }
.ex-top9 .ex-sample dl { color: var(--ink); }
.ex9 .ex-ways { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 760px) { .ex-top9 { grid-template-columns: minmax(0, 1fr); } }
/* Min skrivstil: kompakt blå topp (som Dina exempel) */
.vo-top.vo-blue { grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; padding: .9rem 1.2rem; border: 0; border-radius: 20px; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); }
.vo-blue .vo-k { color: #FFC48A; margin-bottom: .1rem; }
.vo-blue .vo-h { margin: 0 0 .2rem; font-size: 1.08rem; color: #fff; background: none; }
.vo-blue .vo-sum { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; color: var(--on-navy-2); }
.vo-blue .vo-types { gap: .35rem; }
.vo-blue .vo-types li { padding: .22rem .6rem; font-size: .8rem; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: var(--on-navy); }
.vo-blue .vo-types .ico { color: #FFC48A; }
.vo-blue .vo-cols h3 { color: var(--on-navy-2); }
.vo-blue .vo-chips li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: var(--on-navy); }
.vo-blue .vo-chips.words li { background: rgba(255, 200, 150, .16); }
.vo-blue .vo-chips.avoid li { color: var(--on-navy-2); text-decoration-color: rgba(255, 255, 255, .5); }
@media (max-width: 760px) { .vo-top.vo-blue { grid-template-columns: minmax(0, 1fr); } .vo-blue .vo-svg { max-width: 90px; } }
/* Granska ett CV/brev (CV-hjälpen och Brevhjälpen): kompakt blå ruta */
.cvh-review { padding: .85rem 1.1rem; border: 0; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); box-shadow: var(--sh-1); }
.cvh-review h2 { color: #fff; font-size: 1.05rem; }
.cvh-review .hint { margin: .15rem 0 0; color: var(--on-navy-2); font-size: .86rem; }
.cvh-review .cvh-r-ic { width: 40px; height: 40px; background: rgba(255, 255, 255, .12); color: #FFC48A; }
.cvh-review select { background-color: rgba(255, 255, 255, .95); color: var(--ink); border-color: transparent; max-width: 26rem; }
.vo-top.vo-blue { grid-template-columns: 76px minmax(0, 1fr); }
.vo-blue .vo-sum { margin: 0; }

/* ---------- Pitch & mailsvar v10: blå beställningsrad + vitt resultatkort ---------- */
.cm9h { margin: 0 0 1.4rem; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cm9h-gen { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "art txt" "art row"; gap: .35rem 1.1rem; align-items: center; padding: .9rem 1.2rem 1rem; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); }
.cm9h-art { grid-area: art; }
.cm9h-art svg { width: 100%; height: auto; }
.cm9h-gtx { grid-area: txt; }
.cm9h-gtx h2 { margin: 0; font: 700 1.08rem/1.3 var(--display); color: #fff; }
.cm9h-gtx p { margin: .1rem 0 0; font-size: .85rem; color: var(--on-navy-2); }
.cm9h-gen .cm-gen-row { grid-area: row; margin-top: .3rem; }
.cm9h-gen .cm-gen-row input, .cm9h-gen .cm-gen-row select { background: rgba(255, 255, 255, .96); border-color: transparent; color: var(--ink); }
.cm9h-gen .cm-gen-job > .ico { color: var(--muted); }
.cm-gen-lenbox { display: inline-flex; gap: .3rem; }
.cm9h-res { padding: 1rem 1.3rem 1.1rem; display: grid; gap: .6rem; }
.cm9h-head { display: flex; align-items: baseline; gap: .3rem .8rem; flex-wrap: wrap; }
.cm9h-k { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--accent-text); }
.cm9h-head h3 { margin: 0; font: 700 1.05rem/1.3 var(--display); }
.cm9h-len { margin-left: auto; padding: .1rem .55rem; border-radius: 99px; background: var(--sunk); font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cm9h-q { position: relative; margin: 0; padding: .8rem 1rem .8rem 2.6rem; border-radius: 14px; background: color-mix(in srgb, #FF8A3D 6%, var(--surface)); border-left: 3px solid #FF8A3D; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.cm9h-q::before { content: "\201C"; position: absolute; left: .7rem; top: .15rem; font: 800 2.4rem/1 Georgia, serif; color: #FF8A3D; opacity: .7; }
.cm9h-q.cm-mailbody { padding-left: 1rem; white-space: pre-line; max-height: 18rem; overflow: auto; }
.cm9h-q.cm-mailbody::before { content: none; }
.cm9h .cm-sugg-subj { margin: 0; font-size: .9rem; }
.cm9h .cm-sugg-act { margin: 0; }
.cm9h .cm-vars { margin-top: .2rem; }
@media (prefers-reduced-motion: no-preference) { .cm9h-art .cm-bubbles .b, .cm9h-art .ma-env { animation-duration: .5s, 5s; } }
@media (max-width: 760px) { .cm9h-gen { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art txt" "row row"; } .cm9h-len { margin-left: 0; } }
.cm9h-gen .cm-gen-len input { width: 4.8rem; }

/* Coachens bedömning: tajtare rubrik och nyckeltal i en rad */
.page .c4-hero { gap: 1rem 1.6rem; padding: 1.1rem 1.4rem; border-radius: 22px; }
.page .c4-hero-txt { flex: 1 1 420px; min-width: 0; }
.c4-hero .c4-k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .45rem; padding: .18rem .6rem; border-radius: 99px; background: rgba(255, 138, 61, .18); color: #FFC48A; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.c4-hero .c4-k .ico { width: 13px; height: 13px; }
.page .c4-hero h2 { margin: 0 0 .45rem; font: 700 clamp(1.02rem, .92rem + .4vw, 1.18rem)/1.4 var(--display); letter-spacing: -.005em; color: #fff; max-width: 62ch; }
.c4-hero .c4-more > summary { font-size: .84rem; color: var(--on-navy-2); }
.page .c4-kpis { display: flex; gap: 0; padding: .3rem; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.page .c4-kpis div { min-width: 0; padding: .45rem .9rem; border-radius: 0; background: none; text-align: left; }
.page .c4-kpis div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.page .c4-kpis dt { font-size: .7rem; font-weight: 600; color: var(--on-navy-2); white-space: nowrap; }
.page .c4-kpis dd { font: 800 1.35rem/1.15 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .page .c4-kpis { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; } .page .c4-kpis div + div { border-left: 0; } }

/* ---------- Så går det till: blått band i samma stil som stegen överst ---------- */
.how4b { position: relative; overflow: hidden; isolation: isolate; text-align: center; margin: 3rem 0; padding: clamp(2rem, 1.6rem + 2vw, 3.2rem) clamp(1rem, .5rem + 2vw, 2.2rem); border-radius: 32px; color: var(--on-navy);
  background: radial-gradient(70% 60% at 85% 0%, rgba(224, 86, 11, .18), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(78, 106, 143, .9), transparent 70%), linear-gradient(170deg, #31476A, #2B3F5A 70%); }
.how4b > h2 { margin: .4rem 0 1.6rem; color: #fff; font: 800 clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem)/1.15 var(--display); letter-spacing: -.02em; }
.how4b .how4-grid { padding: 10px; gap: 12px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); text-align: left; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.how4b .how4-card { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .09); box-shadow: none; border-radius: 22px; }
.how4b .how4-card figure { background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .7rem .9rem .3rem; }
.how4b .how4-card figure .ill { max-height: 132px; }
.how4b .how4-card > div { padding: 1rem 1.1rem 1.2rem; }
.how4b .how4-card .step-n { position: static; display: block; width: auto; height: auto; margin: 0 0 .5rem; background: linear-gradient(160deg, #FF8A3D, #E0560B); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 2.1rem/1 var(--display); letter-spacing: -.04em; box-shadow: none; border-radius: 0; }
.how4b .how4-card h3 { margin: 0 0 .3rem; color: #fff; font-size: 1.05rem; }
.how4b .how4-card p { color: var(--on-navy-2); font-size: .9rem; line-height: 1.5; }
.how4b .how4-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.how4b .how4-card { flex: 1 1 200px; max-width: calc(25% - 9px); }
@media (max-width: 980px) { .how4b .how4-card { max-width: calc(50% - 6px); } }
@media (max-width: 560px) { .how4b .how4-card { max-width: 100%; } }
/* Så här gör du: ett enda blått band med de sju stegen */
.steps3.how4b { margin: 0 0 3rem; padding: clamp(2.2rem, 1.8rem + 2vw, 3.4rem) clamp(1rem, .5rem + 2vw, 2.2rem) clamp(1.5rem, 1rem + 2vw, 2.4rem); }
.how4b .how4-card .h4c { margin: 0 0 .3rem; color: #fff; font: 700 1.05rem/1.3 var(--display); }

/* ---------- Så här gör du: mjuk rörelse i bandet och illustrationerna ---------- */
.s3-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.s3-orbs i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; }
.s3-orbs i:nth-child(1) { width: 320px; height: 320px; left: 8%; top: 30%; background: rgba(255, 138, 61, .35); }
.s3-orbs i:nth-child(2) { width: 380px; height: 380px; right: 4%; top: 8%; background: rgba(110, 150, 210, .35); }
.s3-orbs i:nth-child(3) { width: 260px; height: 260px; left: 45%; bottom: -60px; background: rgba(255, 176, 103, .25); }
@media (prefers-reduced-motion: no-preference) {
  .s3-orbs i:nth-child(1) { animation: orbA 18s ease-in-out infinite alternate; }
  .s3-orbs i:nth-child(2) { animation: orbB 22s ease-in-out infinite alternate; }
  .s3-orbs i:nth-child(3) { animation: orbC 16s ease-in-out infinite alternate; }
  /* Korten tonar in en i taget */
  .how4b .how4-card { animation: h4in .7s cubic-bezier(.2, .7, .3, 1) both; }
  .how4b .how4-card:nth-child(1) { animation-delay: .05s; } .how4b .how4-card:nth-child(2) { animation-delay: .15s; } .how4b .how4-card:nth-child(3) { animation-delay: .25s; } .how4b .how4-card:nth-child(4) { animation-delay: .35s; }
  .how4b .how4-card:nth-child(5) { animation-delay: .45s; } .how4b .how4-card:nth-child(6) { animation-delay: .55s; } .how4b .how4-card:nth-child(7) { animation-delay: .65s; }
  /* Illustrationerna lever lite: kort som svävar, gnistor som blinkar, pilar som rör sig */
  .how4b .ill .il-raise { animation: ilFloat 5s ease-in-out infinite; transform-box: fill-box; }
  .how4b .how4-card:nth-child(even) .ill .il-raise { animation-delay: -2.5s; }
  .how4b .ill .il-spark { animation: ilSpark 2.4s ease-in-out infinite; }
  .how4b .ill .il-arrow { stroke-dasharray: 6 6; animation: ilDash 1.4s linear infinite; }
  .how4b .ill .il-ring-on { animation: ilRing 4s cubic-bezier(.3, .7, .3, 1) infinite; }
  .how4b .ill .il-cursor { animation: ilClick 2.6s ease-in-out infinite; transform-box: fill-box; }
  .how4b .ill .il-now { animation: ilPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .how4b .ill .il-check3 { stroke-dasharray: 80; animation: ilDraw 3.6s ease-in-out infinite; }
  .how4b .ill .il-mic { animation: ilSpark 1.6s ease-in-out infinite; }
  .how4b .how4-card:hover figure .ill { transform: translateY(-4px) scale(1.02); }
  .how4b .how4-card figure .ill { transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes orbA { to { transform: translate(120px, -60px) scale(1.15); } }
@keyframes orbB { to { transform: translate(-140px, 80px) scale(.9); } }
@keyframes orbC { to { transform: translate(-100px, -70px) scale(1.2); } }
@keyframes h4in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ilFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ilSpark { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ilDash { to { stroke-dashoffset: -24; } }
@keyframes ilRing { 0% { stroke-dasharray: 0 400; } 60%, 100% { stroke-dasharray: 270 400; } }
@keyframes ilClick { 0%, 60%, 100% { transform: translate(0, 0); } 30% { transform: translate(-14px, -18px); } 45% { transform: translate(-14px, -18px) scale(.85); } }
@keyframes ilPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes ilDraw { 0% { stroke-dashoffset: 80; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
.how-page .how-stats, .pub-main .how-stats { margin: 0 0 3rem; }
.lstats .lcalc .lsrc { color: var(--muted) !important; }

/* ---------- Äkta, inte påhittat: rubrik till vänster, principerna som en lugn lista utan boxar ---------- */
.how-principles.how4 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin: 3.5rem 0; }
.how-principles.how4 > h2 { grid-column: 1; margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.how-principles.how4 > .how-sub { grid-column: 1; margin: 0; color: var(--ink-2); max-width: 32ch; }
.how-principles .pr4 { grid-column: 2; grid-row: 1 / span 2; display: block; border-top: 1px solid var(--line-2); }
.how-principles .pr4 > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding: 1rem 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
.how-principles .pr4-ic { grid-row: 1 / span 2; align-self: start; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: none; border: 1.5px solid color-mix(in srgb, #FF8A3D 55%, transparent); }
.how-principles .pr4-ic .ico { width: 17px; height: 17px; }
.how-principles .pr4 h3 { margin: 0; font: 700 1.05rem/1.35 var(--display); }
.how-principles .pr4 p { margin: .15rem 0 0; font-size: .95rem; }
@media (max-width: 820px) { .how-principles.how4 { grid-template-columns: minmax(0, 1fr); } .how-principles .pr4 { grid-column: 1; grid-row: auto; margin-top: 1.2rem; } }

/* Samma på startsidan */
.l3 .l2-true, .l2-true { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; text-align: left; }
.l2-true > h2 { grid-column: 1; margin: 0 0 .5rem; }
.l2-true > .lsub { grid-column: 1; margin: 0; max-width: 32ch; }
.l2-true ul { grid-column: 2; grid-row: 1 / span 2; display: block; margin: 0; border-top: 1px solid var(--line-2); }
.l3 .l2-true li, .l2-true li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; max-width: none; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; }
.l2-true li .l2-ic { width: 34px; height: 34px; border-radius: 50%; background: none; border: 1.5px solid color-mix(in srgb, #FF8A3D 55%, transparent); color: var(--accent-text); display: grid; place-items: center; }
.l2-true li > span:last-child { display: grid; gap: .15rem; }
.l2-true li b { font: 700 1.05rem/1.35 var(--display); }
.l3 .l2-true li small, .l2-true li small { font-size: .95rem; color: var(--ink-2); margin: 0; }
@media (max-width: 820px) { .l2-true { grid-template-columns: minmax(0, 1fr); } .l2-true ul { grid-column: 1; grid-row: auto; margin-top: 1.2rem; } }

/* ---------- Funktioner: en luftig lista i tre spalter i stället för vita boxar ---------- */
section.lfeatures .lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 clamp(1.2rem, 3vw, 2.6rem); }
section.lfeatures .lgrid > .lcard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: start; align-content: start; padding: 1.2rem 0; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
section.lfeatures .lgrid > .lcard:hover { transform: none; box-shadow: none; }
section.lfeatures .lgrid > .lcard .lic { grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; border-radius: 12px; }
section.lfeatures .lgrid > .lcard h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
section.lfeatures .lgrid > .lcard p { margin: 0; font-size: .92rem; }
@media (max-width: 900px) { section.lfeatures .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { section.lfeatures .lgrid { grid-template-columns: minmax(0, 1fr) !important; } }
/* Statistiken i det blå bandet: färre boxar – siffrorna står fritt med tunna linjer emellan */
.how-stats .lstat { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.how-stats .lstat-grid { gap: 0; }
.how-stats .lstat.wide { padding-left: 0; padding-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14) !important; }
.how-stats .lstat:not(.wide) + .lstat:not(.wide) { border-left: 1px solid rgba(255, 255, 255, .14) !important; }
@media (max-width: 760px) { .how-stats .lstat:not(.wide) + .lstat:not(.wide) { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .14) !important; } }

/* ---------- Så här gör du: tajtare blå band ---------- */
.how .steps3.how4b { padding: 1.6rem clamp(.9rem, 2vw, 1.6rem) 1.4rem; border-radius: 26px; margin-bottom: 1.8rem; }
.how .steps3.how4b .s3-pill { margin-bottom: .7rem; }
.how .steps3.how4b .s3-h { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); margin-bottom: .5rem; }
.how .steps3.how4b .s3-sub { font-size: .98rem; margin-bottom: 1.2rem; }
.how .how4b .how4-grid { padding: 6px; gap: 8px; border-radius: 20px; }
.how .how4b .how4-card { flex-basis: 180px; border-radius: 16px; }
.how .how4b .how4-card figure { padding: .45rem .6rem .15rem; }
.how .how4b .how4-card figure .ill { max-height: 96px; }
.how .how4b .how4-card > div { padding: .7rem .85rem .85rem; }
.how .how4b .how4-card .step-n { font-size: 1.5rem; margin-bottom: .3rem; }
.how .how4b .how4-card .h4c { font-size: .95rem; }
.how .how4b .how4-card p { font-size: .84rem; line-height: 1.45; }
.how .s3-cta { margin-top: 1.1rem; }
.how .s3-cta .btn.big { padding: .7rem 1.4rem; font-size: 1rem; }

.how .how-stats { padding: 1.6rem clamp(1rem, 2.5vw, 2rem); border-radius: 26px; margin-bottom: 1.8rem; }
.how .how-stats .lbig { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom: .4rem; }
.how .how-stats .lsub { font-size: .95rem; margin-bottom: 1rem; max-width: 70ch; }
.how .how-stats .lstat { padding: .9rem 1rem; }
.how .how-stats .lstat.wide { gap: 1.4rem; padding: .4rem 0 1rem; }
.how .how-stats .ldots { transform: scale(.78); transform-origin: left center; margin-right: -2.4rem; }
.how .how-stats .lnum { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem) !important; }
.how .how-stats .lstat.wide p:not(.lnum):not(.lsrc) { font-size: 1.05rem; }
.how .how-stats .lring { width: 84px; height: 84px; }
.how .how-stats .lstat p { margin-top: .4rem; font-size: .9rem; }
.how .how-stats .ltake { margin: 1rem 0; font-size: 1.05rem; }
.how .how-stats .lcalc { padding: 1.1rem 1.3rem; gap: 1.2rem; }
.how .how-stats .lbig { max-width: none; }

/* ---------- Profil: en jämn kolumn, lika breda kort och lika höga kort överst ---------- */
.aboutme { max-width: 1120px; }
.aboutme .pf-top { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; gap: 1rem; margin-bottom: 1rem; }
.aboutme .pf-top > .profile-card, .aboutme .pf-top > .photo-card { margin: 0 !important; height: 100%; max-width: none; box-sizing: border-box; }
.aboutme .pf-top > .photo-card.pc5 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .8rem; padding: 1.2rem; }
.aboutme .pf-top > .photo-card .pc-body { display: grid; justify-items: center; }
.aboutme .pf-top > .photo-card .pc-act { justify-content: center; }
.aboutme .profile-form { max-width: none; }
.aboutme .profile-form > section { margin: 0 0 1rem; padding: 1.2rem 1.4rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--sh-1); }
.aboutme .profile-form > section > .sh4:first-child { margin-top: 0; }
.aboutme .profile-form .save5 { margin: 0; }
@media (max-width: 900px) { .aboutme .pf-top { grid-template-columns: minmax(0, 1fr); } }

/* Statistiken spelas upp: punkterna tänds en i taget, ringarna ritas, staplarna växer, och sedan en lugn puls */
.how-stats { overflow: hidden; isolation: isolate; }
.how-stats .lring .lr-on { stroke-dashoffset: var(--off); }
@media (prefers-reduced-motion: no-preference) {
  .how-stats.armed .ldots i.on { background: rgba(255, 255, 255, .12); transform: scale(.6); transition: background .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * 18ms); }
  .how-stats.armed.play .ldots i.on { background: var(--accent-2); transform: scale(1); }
  .how-stats.play .ldots i.on { animation: dotWave 3.2s ease-in-out infinite; animation-delay: calc(1.8s + var(--i) * 30ms); }
  .how-stats.armed .lring .lr-on { stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
  .how-stats.armed.play .lring .lr-on { stroke-dashoffset: var(--off); }
  .how-stats.play .lring { animation: ringBreath 4s ease-in-out 2s infinite; }
  .how-stats.play .lstat:nth-child(3) .lring { animation-delay: 2.6s; } .how-stats.play .lstat:nth-child(4) .lring { animation-delay: 3.2s; }
  .how-stats .lbar i { transition: width .8s cubic-bezier(.3, .7, .2, 1); }
}
@keyframes dotWave { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes ringBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Kontrast: granskningslistan och poängetiketten */
.review .score { color: #116632; }
.rev-badge.ok { color: #116632; }
.rev-item.is-done .rev-why, .is-done > .rev-why { color: var(--ink-2); opacity: 1; }
.rev-item.is-done .rev-where, .is-done > .rev-where { color: #5F6878; opacity: 1; }
[data-rev-undo] { color: var(--navy-2) !important; }
[data-theme="dark"] .review .score, [data-theme="dark"] .rev-badge.ok { color: #6EE7B7; }
[data-theme="dark"] [data-rev-undo] { color: #C9D6EA !important; }
.rev-item.is-done, .rev-item.is-skip { opacity: 1; background: color-mix(in srgb, var(--sunk) 45%, transparent); }

/* ---------- LinkedIn-coachen ---------- */
.lic-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center; padding: .95rem 1.2rem; margin: 0 0 1rem; border-radius: 20px; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); box-shadow: var(--sh-1); }
.lic-top h2 { margin: 0 0 .2rem; font: 700 1.1rem/1.3 var(--display); color: #fff; }
.lic-top p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--on-navy-2); max-width: 72ch; }
.lic-top .lic-k { font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #FFC59E; margin-bottom: .1rem; }
.lic-ring { --s: 0; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#FF8A3D calc(var(--s) * 1%), rgba(255, 255, 255, .16) 0); }
.lic-ring b { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 1.25rem var(--display); }
.lic-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.lic-ic .ico { width: 26px; height: 26px; }
.lic-acts { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
.lic-top .lic-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.lic-top .lic-ghost:hover { background: rgba(255, 255, 255, .1); }
.lic-before { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem !important; }
.lic-before .bi { width: 14px; height: 14px; }
.lic-top .link { color: #fff; text-decoration: underline; }
@media (max-width: 720px) { .lic-top { grid-template-columns: auto minmax(0, 1fr); } .lic-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }

.lic-paste { display: grid; gap: .7rem; margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.lic-paste[hidden] { display: none; }
.lic-paste-h { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .88rem; color: var(--ink-2); }
.lic-paste-h .bi { width: 16px; height: 16px; margin-top: .15rem; color: var(--accent-text); flex: none; }
.lic-paste .field4 { display: grid; gap: .3rem; }
.lic-paste .field4 > span { font-weight: 650; font-size: .88rem; }
.lic-paste .field4 small { font-weight: 500; color: var(--muted); }
.lic-paste input, .lic-paste textarea { margin: 0; width: 100%; }

.lic-hint { display: flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; font-size: .84rem; color: var(--muted); }
.lic-hint .bi { width: 14px; height: 14px; }
.li7 .li-ed { cursor: text; border-radius: 10px; transition: background .15s, box-shadow .15s; }
.li7 .li-ed:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent); }
.li7 .li-empty { color: var(--muted); font-style: italic; }
@keyframes licFlash { 0% { background: color-mix(in srgb, #FFB27A 45%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, #FFB27A 45%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.li7 .li-flash { animation: licFlash 1.8s ease-out; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .li7 .li-flash { animation: none; outline: 2px solid #FF8A3D; outline-offset: 4px; } }
.lic-edlink { margin-top: .5rem; font-size: .84rem; }
.lic-edlink .bi { width: 14px; height: 14px; }

.li7 .li-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.li7 .lic-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 1000px) { .li7 .li-grid { grid-template-columns: 1fr; } .li7 .li-side { display: contents; } .li7 .lic-list { order: -1; position: static; max-height: none; } }
.lic-list .rev-list { margin-top: .6rem; }
.lic-where { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .4rem; padding: 0; border: 0; background: none; font: 600 .78rem var(--font); color: var(--accent-text); cursor: pointer; text-align: left; }
.lic-where:hover span { text-decoration: underline; }
.lic-where .bi { width: 13px; height: 13px; flex: none; }
.lic-new { display: grid; gap: .25rem; }
.lic-new > span { font-size: .74rem; font-weight: 650; color: var(--muted); }
.lic-new textarea { margin: 0; width: 100%; font-size: .86rem; line-height: 1.5; background: var(--surface); border-style: dashed; }

/* Mina ansökningar: tunn rad med siffror och en enda filterrad (typ, sök, sortering) */
.al8-sum { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; margin: -.4rem 0 .6rem; font-size: .9rem; }
.al8-sum .al7-n { padding: .1rem .3rem; }
.al8-sum .al7-n b { font-size: .95rem; }
.al8-sum .al7-n .ico { width: 14px; height: 14px; }
.al8-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; }
.al8-type { display: flex; flex-wrap: wrap; gap: .35rem; }
.al8-type .al7-chip { padding: .28rem .7rem; font-size: .88rem; }
.al8-only { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem .28rem .75rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; }
.al8-only .bi { width: 14px; height: 14px; }
.al8-tools { margin-left: auto; }
.al8-tools .search { width: 240px; }
.al8-tools .search input, .al8-tools .al5-sort select { height: 38px; }
@media (max-width: 700px) { .al8-tools { width: 100%; margin: 0; } .al8-tools .search { flex: 1; width: auto; } }
@media (max-width: 700px) { .al8-sum { gap: .1rem .5rem; } .al8-sum .al7-arrow { display: none; } }
@media (max-width: 720px) { .lic-top .lic-ic { display: none; } .lic-top:has(.lic-ic) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sidhuvud: Klassisk och Kompakt (v9) ---------- */
/* Klassisk: allt centrerat i en lugn stapel – bild, namn, titel, kontakt på en rad med punkter, tunn linje med kort färgstreck */
.tpl-klassisk .cvd-head { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; min-height: 0; padding: 0 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--cv-line); }
.tpl-klassisk .cvd-head::after { content: ''; position: absolute; left: 50%; bottom: -1.5px; width: 64px; height: 3px; margin-left: -32px; background: var(--cv-accent); }
.tpl-klassisk .cvd-head.has-photo { padding-right: 0; min-height: 0; }
.tpl-klassisk .cvd-head.has-photo .cvd-name, .tpl-klassisk .cvd-head.has-photo .cvd-headline { padding: 0; }
.tpl-klassisk .cvd-photo { position: static; order: -1; width: 78px; height: 78px; border-radius: 50%; margin: 0 0 14px; border: 0; object-fit: cover; }
.tpl-klassisk .cvd-band { max-width: 560px; }
.tpl-klassisk .cvd-headline { margin-top: 5px; }
.tpl-klassisk .cvd-hc .cvd-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 0; margin: 12px 0 0; padding: 0; max-width: 600px; font-size: calc(11.5px * var(--k, 1)); color: var(--cv-muted); letter-spacing: .01em; }
.tpl-klassisk .cvd-hc .cvd-contact li { display: inline; margin: 0; white-space: nowrap; }
.tpl-klassisk .cvd-hc .cvd-contact li + li::before { content: '·'; margin: 0 9px; color: var(--cv-accent); font-weight: 700; }
.tpl-klassisk .cvd-hc .cvd-ic { display: none; }
.tpl-klassisk.lt .cvd-head { margin: -46px -58px 12px; padding: 34px 58px 22px; border-bottom: 0; }
.tpl-klassisk.lt .cvd-head::after { display: none; }
.tpl-klassisk.lt .cvd-photo { position: static; }
.tpl-klassisk.lt .cvd-hc .cvd-contact li + li::before { color: var(--cv-accent); }

/* Kompakt: bild, namn och titel till vänster, kontakt staplad till höger – tätt och i balans */
.tpl-kompakt .cvd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "band hc"; align-items: center; gap: 0 24px; padding: 0 0 14px; border-bottom: 2px solid var(--cv-accent); }
.tpl-kompakt .cvd-head.has-photo { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "photo band hc"; }
.tpl-kompakt .cvd-band { grid-area: band; min-width: 0; }
.tpl-kompakt .cvd-photo { grid-area: photo; width: 66px; height: 66px; border-radius: 12px; border: 0; object-fit: cover; margin-right: -6px; }
.tpl-kompakt .cvd-headline { margin-top: 5px; font-size: calc(13px * var(--k, 1)); }
.tpl-kompakt .cvd-hc { grid-area: hc; max-width: 270px; padding-left: 18px; border-left: 1px solid var(--cv-line); align-self: stretch; display: flex; align-items: center; }
.tpl-kompakt .cvd-hc .cvd-contact { display: grid; gap: 3px; margin: 0; padding: 0; font-size: calc(11.5px * var(--k, 1)); color: var(--cv-muted); }
.tpl-kompakt .cvd-hc .cvd-contact li { display: flex; align-items: center; gap: 7px; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.tpl-kompakt .cvd-hc .cvd-ic { flex: none; width: 12px; height: 12px; margin: 0; stroke: var(--cv-accent); }
.tpl-kompakt.lt .cvd-head { margin: -36px -42px 0; padding: 26px 42px 16px; border-bottom: 0; }
.tpl-kompakt.lt .cvd-hc { border-left-color: color-mix(in srgb, var(--cv-accent) 30%, transparent); }
/* Brevet i Klassisk: kontakten staplad och vänsterställd bredvid datumet, utan ikoner */
.tpl-klassisk .letter-meta .cvd-contact { display: grid; justify-content: start; gap: 2px; margin: 0; font-size: calc(11.5px * var(--k, 1)); color: var(--cv-muted); }
.tpl-klassisk .letter-meta .cvd-contact li { margin: 0; }
.tpl-klassisk .letter-meta .cvd-ic { display: none; }

/* CV-färger: alltid en ljus yta i vald färg (standard ljusgrå) och färgen i rubriker och linjer */
.tpl-skandinavisk .cvd-band, .tpl-skandinavisk.lt .cvd-band { background: var(--cv-fill); }
.tpl-modern, .tpl-modern.lt { background: linear-gradient(to right, var(--cv-fill) 240px, #fff 240px); }
.cvdoc .cvd-last { color: color-mix(in srgb, var(--cv-accent) 75%, #9AA0A8); }
.tpl-kompakt .cvd-last { color: var(--cv-accent); }
.dp-swatch.light span:first-of-type { box-shadow: 0 0 0 1px var(--line); }
.dp-swatch input:checked + span { box-shadow: 0 0 0 2px var(--accent) !important; }
/* Visa/Göm dokumenten: texten följer om listan är utfälld */
.dl-tg .dl-tg-hide, .dl-tg[aria-expanded="true"] .dl-tg-show { display: none; }
.dl-tg[aria-expanded="true"] .dl-tg-hide { display: inline; }

/* ---------- Mall och utseende: tät panel (alla CV-redigerare) ---------- */
.design-panel { padding: .6rem .85rem; }
.design-panel .dp-body { gap: .75rem; margin-top: .6rem; }
.design-panel .dp-body legend { font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.design-panel .dp-photo { gap: .65rem; }
.design-panel .dp-photo img, .design-panel .dp-nophoto { width: 44px; height: 44px; }
.design-panel .dp-photo .hint { font-size: .78rem; margin: 0 0 .25rem; }
.design-panel .dp-photo .btnrow { margin: 0; gap: .5rem; }
.design-panel .dp-tpls { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .4rem; }
.design-panel .dp-tpl { gap: .15rem; padding: .35rem .25rem .3rem; border-width: 1.5px; border-radius: 12px; }
.design-panel .dp-tpl.on, .design-panel .dp-tpl:has(input:checked) { box-shadow: 0 0 0 2px var(--accent-soft); }
.design-panel .dp-tpl svg { max-width: 38px; border-radius: 4px; }
.design-panel .dp-tpl span { font-size: .76rem; }
.design-panel .dp-tpl small { display: none; }
.design-panel .dp-size { display: flex !important; flex-wrap: wrap; gap: .3rem; }
.design-panel .dp-size legend { width: 100%; }
.design-panel .dp-sz { gap: .3rem; padding: .22rem .6rem; border-width: 1.5px; border-radius: 999px; font-size: .8rem; }
.design-panel .dp-sz .sz-a { font-size: .8rem; }
.design-panel .dp-fonts { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.design-panel .dp-fonts legend { width: 100%; }
.design-panel .dp-font { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-width: 1.5px; border-radius: 999px; font-size: .8rem; }
.design-panel .dp-font-a { font-size: .9rem; }
.design-panel .dp-colors { gap: .35rem; }
.design-panel .dp-swatch span:not(.sr) { width: 24px; height: 24px; border-width: 2px; }
.design-panel .dp-more { border-top: 1px solid var(--line); padding-top: .55rem; }
.design-panel .dp-more > summary { font-size: .86rem; font-weight: 650; cursor: pointer; color: var(--ink-2); }
.design-panel .dp-more .dp-blocks2 { margin: .6rem 0 0; gap: .5rem; }
.design-panel .dp-more .dp-blocks2 > legend { display: none; }
.design-panel .blk { padding: .3rem .45rem; }
.design-panel .blk-ic { width: 22px; height: 22px; }
.design-panel .dp-ats { font-size: .76rem; margin: 0; }
.design-panel .dp-body > fieldset, .design-panel .dp-body > details { margin: 0 !important; }

/* Brev och pitch för samma tjänst: mörkblå ruta som sticker ut, med små blad och stegen CV → Brev → Pitch */
.nl9 { position: relative; overflow: hidden; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; padding: .95rem 1.2rem; border: 0; border-radius: 20px; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: var(--on-navy); box-shadow: var(--sh-1); }
.nl9::after { content: ''; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 61, .28), transparent 65%); pointer-events: none; }
.nl9 > * { position: relative; z-index: 1; }
.nl9 .nl-tx h2 { color: #fff; font: 700 1.08rem/1.3 var(--display); }
.nl9 .nl-tx > p:not(.nl-k) { color: var(--on-navy-2); }
.nl9 .nl-k { margin: 0 0 .1rem !important; font-size: .7rem !important; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #FFC59E !important; }
.nl-art { position: relative; width: 64px; height: 58px; flex: none; }
.nl-art i { position: absolute; width: 36px; height: 46px; border-radius: 6px; background: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.nl-art i::before, .nl-art i::after { content: ''; position: absolute; left: 7px; right: 7px; height: 3px; border-radius: 2px; background: #D3DCE8; }
.nl-art i::before { top: 9px; } .nl-art i::after { top: 16px; right: 13px; }
.nl-art .s1 { left: 0; top: 8px; transform: rotate(-10deg); background: #E8EDF4; }
.nl-art .s2 { left: 12px; top: 4px; transform: rotate(-3deg); background: #F3F6FA; }
.nl-art .s3 { left: 24px; top: 2px; transform: rotate(6deg); display: grid; place-items: end center; padding-bottom: 6px; color: var(--navy-3); }
.nl-art .s3 .ico { width: 16px; height: 16px; }
.nl-art b { position: absolute; right: -4px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A3D, #E8590C); color: #fff; box-shadow: 0 4px 10px -3px rgba(232, 89, 12, .7); }
.nl-art b .ico { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) { .nl-art b { animation: nlPing 2.6s ease-in-out infinite; } }
@keyframes nlPing { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
.nl-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; padding: 0; }
.nl-steps li { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem .16rem .4rem; border-radius: 999px; font-size: .74rem; font-weight: 650; color: var(--on-navy-2); background: rgba(255, 255, 255, .1); }
.nl-steps li.ok { color: #fff; background: rgba(110, 231, 183, .2); }
.nl-steps li .bi { width: 13px; height: 13px; }
.nl-steps li.ok .bi { color: #6EE7B7; }
.nl9 .nl-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.nl9 .nl-ghost:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 760px) { .nl9 { grid-template-columns: auto minmax(0, 1fr); } .nl9 .nl-act { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 600px) { .cvapp-head > div { flex: 1 1 calc(100% - 3.5rem); } .cvapp-head .btn { margin-left: auto; } }
/* Brevet i ansökan: samma tvåspaltiga redigerare som CV */
.app-ledit .docedit-form > .review { max-width: none; margin: 0 0 .9rem; padding: .9rem 1rem; }
.app-ledit .lettertext { max-width: none; width: 100%; box-shadow: none; padding: .8rem .9rem; font-size: .95rem; line-height: 1.6; }
.app-ledit .rewrite { max-width: none; margin: .6rem 0 0; }
/* I ansökans arbetsyta (med sidokolumn) blir ytan smalare: dela lika så att CV:t och brevet syns tydligare */
*:has(> .app-cvedit), *:has(> .app-ledit) { container-type: inline-size; }
@container (max-width: 880px) { .app-cvedit, .app-ledit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; } }
@container (max-width: 560px) { .app-cvedit, .app-ledit { grid-template-columns: 1fr; } .app-cvedit .docedit-preview, .app-ledit .docedit-preview { position: static; max-height: none; } }

/* Blå notis: saker som bara du vet ([[…]]), med samma penna som i flikarna */
.ph-note { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 16px; background: color-mix(in srgb, #93B2D6 18%, var(--surface)); border: 1px solid color-mix(in srgb, #5D7EA8 35%, transparent); }
.ph-note > .need { width: 26px; height: 26px; margin-top: .05rem; }
.ph-note > .need svg { width: 14px; height: 14px; }
.ph-tx { display: grid; gap: .35rem; min-width: 0; }
.ph-tx strong { font-size: .92rem; color: var(--ink); }
.ph-tx ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ph-go { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .3rem .7rem; border-radius: 999px; border: 1px dashed #5D7EA8; background: var(--surface); color: #2F4A6E; font: 600 .84rem/1.3 var(--font); text-align: left; cursor: pointer; }
.ph-go:hover { background: color-mix(in srgb, #93B2D6 25%, var(--surface)); border-style: solid; }
.ph-go .bi { width: 13px; height: 13px; flex: none; }
[data-theme="dark"] .ph-go { color: #C9D6EA; }
.ws-docseg .need { margin-left: .35rem; }
.ph-note[hidden] { display: none; }

/* ---------- Mobil (v10): egen flikrad längst ner och ett menyark ---------- */
.mtabs, .msheet { display: none; }
@media (max-width: 860px) {
  .rail { display: none !important; }
  main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .mtop .credits { display: none; }
  .mtabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: .35rem .4rem calc(.4rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -8px 28px -18px rgba(20, 32, 52, .45); }
  .mtabs a, .mtabs button { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: .3rem 0 .2rem; border: 0; background: none; color: var(--muted); text-decoration: none; font: 600 .68rem/1.15 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mt-ic { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background .15s, color .15s; }
  .mt-ic svg { width: 21px; height: 21px; }
  .mt-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtabs [aria-current="page"] { color: var(--ink); }
  .mtabs [aria-current="page"] .mt-ic { background: var(--accent-soft); color: var(--accent-text); }
  .mtabs .mt-add .mt-ic { width: 48px; height: 48px; margin-top: -18px; border-radius: 50%; background: linear-gradient(135deg, #FF8A3D, #E8590C); color: #fff; box-shadow: 0 8px 18px -8px rgba(232, 89, 12, .8), 0 0 0 4px var(--surface); }
  .mtabs .mt-add .mt-ic svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .mtabs .mt-add[aria-current="page"] .mt-ic { background: linear-gradient(135deg, #E8590C, #C2410C); color: #fff; }
  .msheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; }
  .ms-back { position: absolute; inset: 0; background: rgba(15, 23, 36, .45); animation: msFade .18s ease-out; }
  .ms-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; overscroll-behavior: contain; padding: .5rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5); animation: msUp .22s cubic-bezier(.2, .8, .2, 1); }
  .ms-head { position: sticky; top: -.5rem; z-index: 1; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: .5rem 0 .6rem; background: var(--bg); }
  .ms-grip { grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin-bottom: .4rem; }
  .ms-head strong { grid-column: 2; text-align: center; font: 700 1.02rem var(--display); }
  .ms-x { grid-column: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
  .ms-x svg { width: 18px; height: 18px; }
  .ms-g { margin: 0 0 .9rem; }
  .ms-g h2 { margin: 0 0 .35rem .3rem; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ms-g ul { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
  .ms-g li + li { border-top: 1px solid var(--line); }
  .ms-g a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: .75rem; min-height: 50px; padding: .55rem .9rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
  .ms-g a svg:first-child { width: 20px; height: 20px; color: var(--accent-text); }
  .ms-g a svg:last-child { width: 16px; height: 16px; color: var(--muted); }
  .ms-g li.ms-sub a { grid-template-columns: 18px minmax(0, 1fr); min-height: 44px; padding-left: 2.6rem; font-weight: 500; font-size: .9rem; color: var(--ink-2); }
  .ms-g li.ms-sub a svg { width: 16px; height: 16px; color: var(--muted); }
  .ms-g a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  .ms-credits { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem; border-radius: 14px; color: var(--muted); font-weight: 600; font-size: .86rem; text-decoration: none; }
  .ms-credits svg { width: 16px; height: 16px; }
  html.ms-open, html.ms-open body { overflow: hidden; }
  /* Chattknappen ligger ovanför flikraden och tar mindre plats */
  .cw5 { right: 12px !important; bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  .cw5 .cw-launch, .cw-launch { width: 48px !important; height: 48px !important; }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@keyframes msUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes msFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-panel, .ms-back { animation: none; } }
@media (max-width: 860px) { html.ms-open .cw5 { display: none !important; } }

/* Ansökans CV och brev: redigeraren bred, förhandsvisningen liten bredvid – klicka för att förstora */
.app-cvedit, .app-ledit { grid-template-columns: minmax(0, 1fr) minmax(200px, 290px); gap: 1rem; }
@container (max-width: 560px) { .app-cvedit, .app-ledit { grid-template-columns: 1fr; } }
.docedit-preview { cursor: zoom-in; }
.docedit-preview:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pv-zoom { position: absolute; z-index: 3; top: .5rem; right: .5rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border: 0; border-radius: 999px; background: rgba(20, 32, 52, .78); color: #fff; font: 600 .76rem var(--font); cursor: pointer; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.pv-zoom .bi { width: 13px; height: 13px; }
.docedit-preview:hover .pv-zoom { background: var(--navy); }
.pvbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.pvbox-back { position: absolute; inset: 0; background: rgba(12, 18, 30, .6); backdrop-filter: blur(3px); }
.pvbox-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(860px, 100vw - 1.5rem); height: min(94vh, 100dvh - 1.5rem); border-radius: 18px; background: var(--bg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: hidden; animation: msUp .2s ease-out; }
.pvbox-bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem .6rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.pvbox-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pvbox-x .ico { width: 18px; height: 18px; }
.pvbox-scroll { overflow: auto; padding: 1rem; }
.pvbox-scroll .paper { margin: 0 auto; max-width: 794px; }
html.pv-open, html.pv-open body { overflow: hidden; }

/* Äkthetskontrollen: en tät rad som fälls ut */
.lrev9 { margin: 0 0 .9rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.lrev9 > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .6rem .85rem; cursor: pointer; }
.lrev9 > summary::-webkit-details-marker { display: none; }
.lrev-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.lrev-ic .ico { width: 17px; height: 17px; }
.lrev-t { display: grid; min-width: 0; }
.lrev-t strong { font-size: .95rem; }
.lrev-t small { font-size: .78rem; color: var(--muted); }
.lrev9 .score { font: 700 .82rem var(--font); color: #116632; background: var(--ok-soft); padding: .2rem .6rem; border-radius: 999px; }
[data-theme="dark"] .lrev9 .score { color: #6EE7B7; }
.lrev-body { padding: 0 .9rem .9rem; display: grid; gap: .5rem; }
.lrev-body .hint { margin: 0; font-size: .82rem; }
.lrev-body .issues { margin: 0; padding-left: 1.1rem; font-size: .86rem; display: grid; gap: .35rem; }
.pv-zoom { top: auto; bottom: .6rem; right: .6rem; }
@media (max-width: 1100px) { .docedit-preview { position: relative !important; } }
@container (max-width: 560px) { .app-cvedit .docedit-preview, .app-ledit .docedit-preview { position: relative !important; } }
/* Förstora: rund ikonknapp i hörnet så att den syns direkt men inte skymmer namnet */
.pv-zoom { top: .45rem !important; bottom: auto !important; right: .45rem !important; width: 34px; height: 34px; padding: 0; justify-content: center; }
.pv-zoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-zoom .bi { width: 16px; height: 16px; }

/* Mobil: ansökans steg får plats utan sidledsrullning; innehållet kommer före sidokolumnen */
.ws10, .ws10 > *, .ws10-grid > * { min-width: 0; }
@media (max-width: 700px) {
  .ws10 .wsteps { flex-wrap: wrap; overflow: visible; gap: .3rem; padding: .4rem; }
  .ws10 .wsteps ol { min-width: 0; width: 100%; }
  .ws10 .wsteps li { flex: 0 1 auto; }
  .ws10 .wsteps li.sel { flex: 1 1 auto; }
  .ws10 .wsteps li:not(:last-child)::after { flex: 1 1 6px; min-width: 4px; margin: 0 .15rem; }
  .ws10 .wsteps li:not(.sel) .ws-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ws10 .wsteps li:not(.sel) button { padding: .2rem; }
  .ws10 .wsteps .ws-stat { width: 100%; justify-content: flex-end; border-left: 0; padding: .2rem 0 0; }
  .ws10-side { order: 1; }
}
/* Mottagare i brevet: liten rad under Kort om tjänsten */
.ws-recip { display: grid; gap: .3rem; margin: 0; padding: .6rem .75rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ws-recip > span { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ws-recip > span .bi { width: 13px; height: 13px; color: var(--accent-text); }
.ws-recip input { margin: 0; min-height: 36px; padding: .35rem .6rem; font-size: .88rem; }

/* Mobil: jobbkorten använder hela bredden – poängen i hörnet, knapparna på en rad */
@media (max-width: 600px) {
  .jcard { grid-template-columns: minmax(0, 1fr); position: relative; gap: .35rem; padding: .9rem .95rem; }
  .jcard .jc-score { position: absolute; top: .8rem; right: .8rem; }
  .jcard .jring { width: 44px; height: 44px; }
  .jcard .jring b { width: 34px; height: 34px; font-size: .88rem; }
  .jcard .jc-top { padding-right: 52px; flex-wrap: wrap; }
  .jcard .jc-meta { padding-right: 40px; }
  .jc-ai span { display: block; }
  .jc-ai .ico { display: inline-block; margin-right: .3rem; vertical-align: -2px; top: 0; }
  .jc-foot { flex-direction: column; align-items: stretch; gap: .45rem; }
  .jc-btns { width: 100%; }
  .jc-btns .btn { white-space: nowrap; justify-content: center; }
  .jc-btns .btn:not(.ibtn):last-of-type, .jc-btns .btn.primary { flex: 1; }
}

/* Utskrift/PDF: marginal överst och nederst på varje sida så att inget hamnar i kanten eller klipps vid sidbrytning.
   Första sidan börjar i kanten så att sidhuvudets färg går ända upp. */
@page { size: A4; margin: 14mm 0 14mm; }
@page :first { margin-top: 0; }
@media print {
  body.print-doc .cvdoc { min-height: 283mm; }
  body.print-doc .cvdoc p, body.print-doc .cvdoc li { orphans: 3; widows: 3; }
  body.print-doc .cvd-head, body.print-doc .letter-meta, body.print-doc .letter-subject { break-inside: avoid; }
}

/* Mobil: flikraderna får plats utan dold sidledsrullning – ikon ovanför kort text, lika breda flikar */
@media (max-width: 600px) {
  .tabs { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .tabs > a, .tabs > [role="tab"] { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: .45rem .25rem; font-size: .74rem; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .tabs > a .ico, .tabs > [role="tab"] .ico { width: 18px; height: 18px; }
  .tabs > a .need, .tabs > [role="tab"] .need { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; }
}

/* Luftigare sidmarginaler i Skandinavisk, Klassisk och Kompakt: samma generösa marginal på båda sidor (ca 17 mm) */
.tpl-klassisk { padding: 48px 66px 52px; }
.tpl-klassisk.lt .cvd-head { margin: -48px -66px 12px; padding: 34px 66px 22px; }
.tpl-kompakt { padding: 40px 62px 44px; }
.tpl-kompakt.lt .cvd-head { margin: -40px -62px 0; padding: 28px 62px 16px; }
.tpl-skandinavisk .cvd-band { padding-left: 62px; padding-right: 62px; }
.tpl-skandinavisk .cvd-body { padding-left: 62px; padding-right: 62px; gap: 34px; }
.tpl-skandinavisk.letterdoc .letter-body { padding-left: 62px; padding-right: 62px; }
/* Blå notisen ska synas mot bakgrunden: vit yta, tydlig blå kant och skugga */
.ph-note { background: var(--surface); border: 1px solid color-mix(in srgb, #5D7EA8 45%, var(--line)); border-left: 5px solid #5D7EA8; box-shadow: var(--sh-1); }
.ph-go { background: color-mix(in srgb, #93B2D6 16%, var(--surface)); border-color: #5D7EA8; }
.ph-go:hover { background: color-mix(in srgb, #93B2D6 32%, var(--surface)); }

/* Mobil: aktivitetsrapportens fält två och två och tätare, så att listan inte blir oändligt lång */
@media (max-width: 600px) {
  .act-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
  .act-fields > div { padding: .3rem .35rem .3rem .5rem; gap: 0; }
  .act-fields dt { font-size: .64rem; }
  .act-fields dd { font-size: .82rem; line-height: 1.25; }
  .act-fields .copybtn { width: 28px; height: 28px; }
  .act-fields .copybtn .ico { width: 14px; height: 14px; }
}

/* Mobil: tätare sidhuvud – mindre ikon och rubrik, kortare ingress, knapparna i en rad */
@media (max-width: 600px) {
  .page { padding-top: 1.1rem; }
  .page-head.ph4 { gap: .6rem; margin-bottom: .9rem; }
  .ph4-main { gap: .65rem; align-items: center; }
  .ph4-ico { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
  .ph4-ico .ico { width: 19px !important; height: 19px !important; }
  .ph4 h1 { font-size: 1.45rem; line-height: 1.15; }
  .ph4 .lead { font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ph4 .page-actions { gap: .4rem; }
  .ph4 .page-actions .btn { padding: .5rem .8rem; font-size: .86rem; min-height: 40px; }
}

/* Förhandsvisningen: rad ovanför med antal sidor och Förstora; sidbrytningar markerade i dokumentet */
.pv-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .4rem .45rem; background: linear-gradient(var(--bg) 70%, transparent); }
.pv-pages { font-size: .76rem; font-weight: 700; color: var(--muted); }
.pv-pages.many { color: #B4490D; }
.pv-zoom, .docedit-preview .pv-zoom { position: static !important; width: auto !important; height: auto !important; padding: .3rem .7rem !important; border-radius: 999px; background: var(--navy); color: #fff; font: 600 .76rem var(--font); box-shadow: none; }
.pv-zoom span { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; }
.pv-zoom .bi { width: 13px !important; height: 13px !important; }
.paper:has(> .cvdoc) { position: relative; }
.pg-break { position: absolute; left: 0; right: 0; height: 0; border-top: 3px dashed #8E99A8; z-index: 2; pointer-events: none; }
.pg-break::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 22px; background: linear-gradient(rgba(142, 153, 168, .18), transparent); }
.pg-break::after { content: attr(data-p); position: absolute; right: 10px; top: -17px; padding: 3px 12px; border-radius: 999px; background: #5F6B7B; color: #fff; font: 700 22px/1.2 var(--font); letter-spacing: .02em; }
@media print { .pg-break, .pv-bar { display: none !important; } }
/* Mobil: verktygsraden (PDF, Word, Spara, Kopiera) tar mindre plats */
@media (max-width: 600px) {
  .toolbar { gap: .35rem; margin-bottom: .7rem; }
  .toolbar .btn { padding: .42rem .7rem; font-size: .84rem; min-height: 38px; }
  .toolbar .link { font-size: .86rem; }
}

/* CV-mallarna: sektionerna i ett par (t.ex. System & verktyg + Språk) börjar på samma höjd */
.cvdoc .cvd-pair > section + section { margin-top: 0; }
/* Kompakt: språken på en rad var – namn, nivåstapel, nivå – så att det inte blir ett tomt hål bredvid */
.tpl-kompakt .cvd-langs li { grid-template-columns: minmax(0, 6.5em) 90px minmax(0, 1fr); align-items: center; column-gap: 10px; margin-bottom: 5px; }
.tpl-kompakt .cvd-langs .cvd-bar { margin: 0; max-width: none; gap: 3px; }
.tpl-kompakt .cvd-langs .cvd-bar i { height: 4px; }
.tpl-kompakt .cvd-langs .cvd-level { font-size: calc(11px * var(--k, 1)); color: var(--cv-muted); }

/* Redigeraren (CV och brev): delarna i en enda tät lista i stället för stora separata kort,
   så att man ser mer av dokumentet bredvid */
.docedit-form { display: grid; gap: .5rem; align-content: start; }
.docedit-form > * { margin: 0 !important; }
.docedit-form form, #appLetterForm { display: block; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.docedit-form form .dblock, #appLetterForm .dblock { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.docedit-form form .dblock + .dblock, #appLetterForm .dblock + .dblock { border-top: 1px solid var(--line); }
.docedit-form .dblock > summary { padding: .55rem .85rem; font-size: .92rem; font-weight: 650; }
.docedit-form .dblock[open] > summary { color: var(--accent-text); }
.docedit-form .dblock-body { padding: 0 .85rem .8rem; }
.docedit-form > .dblock, .docedit-form > details.fetch { border-radius: 14px; }
.docedit-form > .design-panel { padding: .5rem .85rem; border-radius: 14px; }
.docedit-form > .design-panel > summary { font-size: .92rem; }
/* CV-granskningen ihopfälld: en tunn rad */
.docedit-form > .cvrev { padding: .5rem .85rem; border-radius: 14px; }
.docedit-form > .cvrev:not([open]) .sh4 { font-size: .95rem; }
.docedit-form > .cvrev:not([open]) .sh4-ico { width: 28px; height: 28px; }
.docedit-form > .cvrev .cvrev-body { margin-top: .5rem; }
/* Delen man redigerar lyser upp i förhandsvisningen */
@keyframes cvdFlash { 0%, 30% { box-shadow: 0 0 0 6px rgba(255, 138, 61, .55); background: rgba(255, 178, 122, .18); } 100% { box-shadow: 0 0 0 6px transparent; background: transparent; } }
.cvd-flash { animation: cvdFlash 1.6s ease-out; border-radius: 4px; }
@media print { .cvd-flash { animation: none; } }
/* Utskrift: korta listor (meriter, verktyg, språk) delas inte över två sidor – hellre hela sektionen på nästa sida än en ensam rad */
@media print { .cvd-certs, .cvd-tools, .cvd-languages, .cvd-linkedin, .cvd-contact, .cvd-pair, .cvd-list, .cvd-langs { break-inside: avoid; } }

/* Färgväljaren: namnet visas i en liten etikett när man håller över eller väljer med tangentbordet */
.dp-swatch { position: relative; }
.dp-swatch::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: .18rem .5rem; border-radius: 7px; background: var(--ink); color: var(--bg); font: 600 .7rem/1.2 var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 5; }
.dp-swatch:hover::after, .dp-swatch:focus-within::after { opacity: 1; transform: translate(-50%, 0); }
.tpl-skandinavisk h2, .tpl-skandinavisk.lt h2 { border-bottom-color: color-mix(in srgb, var(--cv-accent) 18%, #EEF0F2); }

/* Utskrift/PDF v2: större marginal nederst (20 mm) och upptill på följande sidor (18 mm),
   och sidorna bryts mellan stycken, roller och punkter i stället för mitt i dem */
@page { size: A4; margin: 18mm 0 20mm; }
@page :first { margin-top: 0; }
@media print {
  body.print-doc .cvdoc { min-height: 277mm; }
  body.print-doc .cvdoc p, body.print-doc .cvdoc li, body.print-doc .cvd-job, body.print-doc .cvd-edu, body.print-doc .letter-text p { break-inside: avoid; }
  body.print-doc .cvd-sec > h2, body.print-doc .cvd-row, body.print-doc .cvd-org { break-after: avoid; }
}
.pv-warn { margin: 0 .4rem .5rem; padding: .5rem .7rem; border-radius: 12px; background: #FFF1E6; border: 1px solid #F5C59E; color: #8A3A0B; font-size: .8rem; line-height: 1.4; font-weight: 600; }
[data-theme="dark"] .pv-warn { background: #3A2213; border-color: #7A3E17; color: #FFD2B0; }

/* Mallbilderna i Mall och utseende visar vald färg: ytan (sidhuvud/sidospalt) och rubrikerna */
.dp-tpl svg .tb-band, .dp-tpl svg .tb-side, .dp-tpl svg .tb-side.mod { fill: var(--cv-fill, #EEEFF1); }
.dp-tpl svg .tb-h { fill: var(--cv-accent, #8B9199); opacity: .85; }
.dp-tpl svg .tb-m { fill: var(--cv-accent); opacity: .45; }

/* Verktygsraden: alla knappar lika höga och med samma textstorlek */
.toolbar .btn, .toolbar .btn.small { min-height: 42px; padding: .5rem .95rem; font-size: .9rem; border-radius: 12px; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 600px) { .toolbar .btn, .toolbar .btn.small { min-height: 38px; padding: .42rem .7rem; font-size: .84rem; } }

/* Högerkolumnen i ansökan (v11): Kort om tjänsten och Mina anteckningar i samma lugna stil, lika breda och lika rundade */
.ws10-side { gap: .6rem; }
.ws10-side .ah7-facts.ahf-list, .ws10-side .snote, .ws10-side .ws-recip { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.ws10-side .ah7-facts.ahf-list { padding: .8rem .9rem .9rem; }
.ws10-side .ah7-facts.ahf-list h2 { margin: 0 0 .35rem; font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ws10-side .ah7-facts.ahf-list dl { margin: 0; display: grid; gap: 0; }
.ws10-side .ah7-facts.ahf-list dl > div { padding: .45rem 0 !important; border-bottom: 1px solid var(--line); border-top: 0; background: none !important; margin: 0 !important; border-radius: 0 !important; }
.ws10-side .ah7-facts.ahf-list dl > div:last-child { border-bottom: 0; }
.ws10-side .ah7-facts.ahf-list dt { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 650; color: var(--muted); }
.ws10-side .ah7-facts.ahf-list dt .bi { width: 13px; height: 13px; color: var(--accent-text); }
.ws10-side .ah7-facts.ahf-list dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.ws10-side .ah7-facts.ahf-list dd select { margin: .15rem 0 0; width: 100%; min-height: 34px; padding: .25rem .6rem; font-size: .86rem; border-radius: 10px; }
/* Löneanspråket: en vanlig rad; saknas det visas en liten knapp i stället för en orange ruta */
.ws10-side .ah7-facts.ahf-list dl > div.pay { background: none !important; padding: .45rem 0 !important; }
.ws10-side .ah7-facts.ahf-list .pay dd .link { display: inline-flex; align-items: center; margin-top: .2rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); color: var(--accent-text); font-size: .8rem; font-weight: 650; text-decoration: none; }
.ws10-side .ah7-facts.ahf-list .pay dd .link:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.ws10-side .ah7-ad { width: 100%; justify-content: center; margin-top: .7rem; }
/* Mina anteckningar */
.ws10-side .snote > summary { padding: .6rem .75rem; }
.ws10-side .sn-tt strong { font-size: .88rem; }
.ws10-side .sn-tt small { font-size: .74rem; line-height: 1.35; }
.ws10-side .sn-tt strong { display: block !important; } .ws10-side .sn-tt strong > * { display: inline; font-weight: 500; color: var(--muted); font-size: .8rem; }

/* Förhandsvisningen som riktiga sidor: nedre marginal, glapp mellan bladen och nästa sidas övre marginal */
.pg-gap { display: block; position: relative; list-style: none; pointer-events: none; }
.pg-gap::after { content: ''; position: absolute; left: -3000px; right: -3000px; top: var(--band, 0); height: 18px; background: #D5DAE1; box-shadow: inset 0 7px 8px -6px rgba(20, 32, 52, .35), inset 0 -7px 8px -6px rgba(20, 32, 52, .35); z-index: 3; }
.pg-gap::before { content: attr(data-p); position: absolute; right: -40px; top: calc(var(--band, 0) - 1px); z-index: 4; padding: 0 12px; font: 700 15px/20px var(--font); color: #4A5568; letter-spacing: .04em; text-transform: uppercase; }
.cvd-side .pg-gap::before { content: none; }
[data-theme="dark"] .pg-gap::after { background: #0E1A26; }
[data-theme="dark"] .pg-gap::before { color: #AFC0D6; }
@media print { .pg-gap { display: none !important; } }

/* Alla CV- och brevredigerare ser likadana ut: "här är du"-rad, samma knappar och samma två lika breda spalter */
.ed-ctx { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .7rem; padding: .55rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--navy) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--navy) 16%, var(--line)); font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.ed-ctx .bi { flex: none; width: 16px; height: 16px; margin-top: .1rem; color: var(--navy-3); }
.ed-ctx b { color: var(--ink); font-weight: 700; }
.ed-ctx.saved { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.ed-ctx.saved .bi { color: var(--accent-text); }
.docedit-grid, .app-cvedit, .app-ledit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 1rem !important; }
@media (max-width: 1100px) { .docedit-grid { grid-template-columns: 1fr !important; } }
@container (max-width: 700px) { .app-cvedit, .app-ledit { grid-template-columns: 1fr !important; } }
.docedit-head { margin: 0 0 .8rem; }
.docedit-head .docname { font: 700 1.35rem var(--display); }
.docedit-head .btn { min-height: 42px; padding: .5rem .95rem; font-size: .9rem; border-radius: 12px; }

/* Dokumenten under en annons: två tydliga spalter (CV och brev), ansökans dokument överst och sparade kopior under */
.dl-pane { margin: 0 1rem 1rem; padding: .8rem; border-radius: 16px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); border: 1px solid var(--line); }
.dlp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.dlp-col { display: grid; gap: .4rem; align-content: start; margin: 0 !important; }
.dlp-col h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .1rem; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dlp-col h4 .bi { width: 14px; height: 14px; color: var(--accent-text); }
.dlp-col h4 span { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--sunk); font-size: .7rem; color: var(--ink-2); letter-spacing: 0; }
.dlp-main, .dlp-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); border-radius: 12px; transition: background .12s, border-color .12s, box-shadow .12s; }
.dlp-main { padding: .6rem .7rem; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--sh-1); }
.dlp-main:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px rgba(207, 84, 12, .5); }
.dlp-main.empty { grid-template-columns: auto minmax(0, 1fr) auto; border-style: dashed; border-color: var(--line-2); box-shadow: none; background: transparent; }
.dlp-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.dlp-ic .ico { width: 17px; height: 17px; }
.dlp-ic.sm { width: 28px; height: 28px; border-radius: 8px; background: var(--sunk); color: var(--ink-2); }
.dlp-ic.sm .ico { width: 14px; height: 14px; }
.dlp-tx { display: grid; min-width: 0; }
.dlp-tx strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlp-tx small { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlp-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; background: var(--ok-soft); color: #116632; font-size: .7rem; font-weight: 700; }
.dlp-tag.sent { background: color-mix(in srgb, var(--navy) 10%, var(--surface)); color: var(--navy-2); }
.dlp-tag .bi { width: 11px; height: 11px; }
.dlp-go { display: inline-flex; align-items: center; gap: .2rem; padding: .25rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); white-space: nowrap; }
.dlp-go .bi { width: 12px; height: 12px; }
.dlp-sub { margin: .35rem 0 0 .2rem; font-size: .72rem; font-weight: 650; color: var(--muted); }
.dlp-list { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.dlp-list li + li { border-top: 1px solid var(--line); }
.dlp-list a { padding: .45rem .6rem; border-radius: 0; }
.dlp-list a:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.dlp-list .dlp-go { background: none; padding: .2rem .3rem; }
.dlp-list a:hover .dlp-go { background: var(--accent-soft); }
.dlp-list .dl-new { font-size: .68rem; }
[data-theme="dark"] .dlp-tag { color: #6EE7B7; }
/* Visa/Göm dokumenten som en riktig knapp */
.dl-tg.dl-tg2 { padding: .25rem .65rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface); }
.dl-tg.dl-tg2[aria-expanded="true"] { background: var(--accent-soft); }
@media (max-width: 760px) { .dl-pane { margin: 0 .6rem .8rem; padding: .6rem; } .dlp { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .dlp-list a { grid-template-columns: auto minmax(0, 1fr) auto; } .dlp-list .dl-new { display: none; } .dlp-main .dlp-tag { display: none; } }

/* Utskrift av Modern: sidospaltens färg går över hela höjden på varje sida, även i marginalerna på sida 2 och 3 */
@media print {
  html:has(body.print-doc .tpl-modern) { background: linear-gradient(to right, var(--pg-fill, #F8F6F2) 240px, #fff 240px) fixed !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-doc:has(.tpl-modern) { background: transparent !important; }
  body.print-doc .tpl-modern { background: transparent !important; min-height: 0; }
}
/* Marginalerna i Modern får sidospaltens färg (sidmarginalrutor), bara för den mallen */
@media print { body.print-doc .tpl-modern { page: modern; } }
@page modern { @bottom-left { content: ''; width: 240px; background: var(--pg-fill); margin: 0; } @top-left { content: ''; width: 240px; background: var(--pg-fill); margin: 0; } }
@page modern:first { margin-top: 0; }

/* Skapa nytt CV/brev: tätt formulär i tre numrerade steg, små mallkort och bilden som en liten rad */
.newdoc { padding: 1rem 1.1rem; max-width: 860px; display: grid; gap: .9rem; }
.newdoc legend, .nd-l { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .92rem; margin-bottom: .45rem; padding: 0; }
.newdoc legend b, .nd-l b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .74rem; }
.newdoc .dp-tpls { border: 0; padding: 0; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .45rem; }
.newdoc .dp-tpl { padding: .45rem .4rem; gap: .15rem; border-width: 1.5px; border-radius: 12px; text-align: center; }
.newdoc .dp-tpl svg { width: 42px !important; height: 56px !important; margin: 0 auto .2rem !important; }
.newdoc .dp-tpl span { font-size: .84rem; }
.newdoc .dp-tpl small { font-size: .7rem; line-height: 1.25; }
.newdoc .nd-fields { gap: .7rem; margin: 0; }
.newdoc .nd-fields label { margin: 0; }
.newdoc .nd-fields select, .newdoc .nd-fields input { margin: 0; }
.newdoc .nd-photo .pc5 { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; margin: 0; border-radius: 14px; box-shadow: none; text-align: left; }
.newdoc .nd-photo .pc5 .pc-img img, .newdoc .nd-photo .pc5 .pc-img .dp-nophoto { width: 46px; height: 46px; }
.newdoc .nd-photo .pc5 .pc-body { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.newdoc .nd-photo .pc5 h2 { font-size: .9rem; margin: 0; }
.newdoc .nd-photo .pc5 .hint { display: none; }
.newdoc .nd-photo .pc5 .pc-act, .newdoc .nd-photo .pc5 .pc-show { margin: 0; }
.newdoc .btnrow { margin: 0; }
@media (max-width: 640px) { .newdoc .dp-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.dlp-no { font-weight: 600; color: var(--muted); font-size: .8rem; }

/* Jämnare rytm i alla CV-mallar: avståndet mellan delarna ligger UNDER varje del i stället för ovanför rubriken.
   Då börjar varje spalt överst på en ny sida utan extra luft, och vänster och höger spalt linjerar. */
.cvdoc .cvd-sec > h2 { margin-top: 0 !important; }
.tpl-skandinavisk .cvd-sec { margin-bottom: 22px; }
.tpl-skandinavisk h2 { font-size: calc(18px * var(--k, 1)) !important; line-height: 1.2; padding-bottom: 7px; margin-bottom: 11px !important; border-bottom-width: 3px; }
.tpl-skandinavisk.hs-s h2 { font-size: calc(15.5px * var(--k, 1)) !important; } .tpl-skandinavisk.hs-l h2 { font-size: calc(21px * var(--k, 1)) !important; }
.tpl-modern .cvd-side .cvd-sec { margin-bottom: 20px; } .tpl-modern .cvd-main .cvd-sec { margin-bottom: 20px; }
.tpl-modern .cvd-side { padding-top: 22px; } .tpl-modern .cvd-main > .cvd-sec:first-child { padding-top: 6px; }
.tpl-klassisk .cvd-sec { margin-bottom: 20px; } .tpl-klassisk .cvd-body { padding-top: 14px; }
.tpl-kompakt .cvd-sec { margin-bottom: 16px; } .tpl-kompakt .cvd-body { padding-top: 14px; }
.cvdoc .cvd-pair { margin-top: 0 !important; margin-bottom: 16px; } .cvdoc .cvd-pair > .cvd-sec { margin-bottom: 0; }
/* Listor och utbildning: samma radavstånd överallt, radbrutna punkter linjerar med texten */
.cvdoc .cvd-list li, .cvdoc .cvd-bullets li { line-height: 1.45; margin-bottom: 3px; }
.cvdoc .cvd-edu { margin-bottom: 10px; }
.cvdoc .cvd-edu:last-child, .cvdoc .cvd-job:last-child { margin-bottom: 0; }
.tpl-skandinavisk .cvd-side .cvd-edu h3 { font-size: calc(13.5px * var(--k, 1)); }

/* Papperskorgen */
.dl-trash { width: 32px; height: 32px; flex: none; color: var(--muted); border-radius: 9px; }
.dl-trash:hover { color: var(--danger, #B42318); background: color-mix(in srgb, #B42318 9%, var(--surface)); }
.dlp-list li { display: flex; align-items: center; }
.dlp-list li > a { flex: 1; min-width: 0; }
.dlp-list li > .dl-trash { margin-right: .35rem; }
.dl-end .dl-trash { margin-left: .2rem; }
.tr-box { margin: 1.4rem 0 0; border-radius: 16px; border: 1px dashed var(--line-2); background: color-mix(in srgb, var(--sunk) 50%, transparent); }
.tr-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.tr-box > summary::-webkit-details-marker { display: none; }
.tr-box > summary strong { font-size: .95rem; }
.tr-box > summary small { flex-basis: 100%; color: var(--muted); font-size: .78rem; padding-left: 1.6rem; }
.tr-ic { display: inline-grid; color: var(--muted); }
.tr-list { list-style: none; margin: 0; padding: 0 .9rem .5rem; display: grid; gap: .35rem; }
.tr-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tr-tx { flex: 1; min-width: 0; display: grid; }
.tr-tx strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tr-tx small { font-size: .74rem; color: var(--muted); }
.tr-empty { margin: 0 0 .8rem 1rem; font-size: .84rem; }
@media (max-width: 600px) { .tr-list li { flex-wrap: wrap; } .tr-tx { flex-basis: 100%; } }
/* Behåll en kopia (bokmärke) eller släng; osparade kopior ligger dämpat i en egen lista */
.dl-keep { width: 32px; height: 32px; flex: none; color: var(--muted); border-radius: 9px; }
.dl-keep:hover { color: var(--accent-text); background: var(--accent-soft); }
.dl-keep.on { color: var(--accent-text); }
.dlp-list li > .dl-keep { margin-left: .2rem; }
.dlp-loose .dlp-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; }
.dlp-loose .dlp-sub .link { font-size: .74rem; font-weight: 650; }
.dlp-loose .dlp-list { background: transparent; border-style: dashed; }
.dlp-loose .dlp-list li { opacity: .85; }
.dlp-loose .dlp-list li:hover { opacity: 1; }

/* Standard-CV och standardbrev: beige yta så att de skiljer sig från dokumenten för annonser */
.dl-sec[data-sec="std"] .dl-list { background: #F6F0E4; border-color: #E6DAC4; }
.dl-sec[data-sec="std"] .dl-item + .dl-item { border-top-color: #E6DAC4; }
.dl-sec[data-sec="std"] .dl-docs, .dl-sec[data-sec="std"] .dl-pane { background: transparent; }
.dl-sec[data-sec="std"] .dl-add { background: #FBF8F1; border-color: #E0D2B8; }
[data-theme="dark"] .dl-sec[data-sec="std"] .dl-list { background: #2A2419; border-color: #463B28; }
[data-theme="dark"] .dl-sec[data-sec="std"] .dl-add { background: #231E15; border-color: #463B28; }

/* Pitch & mailsvar: generatorn sticker ut – levande färgkant som snurrar sakta, rörlig toning och små gnistor */
@property --cmA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cm9h { position: relative; isolation: isolate; border: 0; padding: 3px; background: conic-gradient(from var(--cmA), #FF8A3D, #FFC59E, #8FB0DA, #4E6A8F, #FF6B8B, #FF8A3D); box-shadow: 0 18px 40px -22px rgba(232, 89, 12, .55), var(--sh-1); }
.cm9h > * { position: relative; z-index: 1; }
.cm9h-gen { border-radius: 19px 19px 0 0; background: linear-gradient(115deg, #2B3F5A 0%, #3E5B85 40%, #6A5A9C 75%, #C8573A 120%); background-size: 220% 220%; overflow: hidden; }
.cm9h-gen::before, .cm9h-gen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255, 197, 158, .95) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, .6) 0 1px, transparent 1.5px);
  background-size: 140px 90px, 210px 120px, 90px 70px; background-position: 10px 20px, 60px 50px, 30px 10px; opacity: .5; }
.cm9h-gen::after { background-size: 170px 110px, 120px 140px, 70px 90px; background-position: 80px 0, 0 70px, 40px 40px; opacity: .35; }
.cm9h-gen > * { position: relative; z-index: 1; }
.cm9h-res { border-radius: 0 0 19px 19px; background: var(--surface); }
.cm9h-gtx h2::after { content: 'AI'; display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: linear-gradient(135deg, #FF8A3D, #FF6B8B); color: #fff; font: 800 .66rem/1.5 var(--font); letter-spacing: .08em; vertical-align: .25em; box-shadow: 0 4px 10px -4px rgba(255, 107, 139, .7); }
@keyframes cmSpin { to { --cmA: 360deg; } }
@keyframes cmFlow { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@keyframes cmDrift { from { transform: translateY(0); } to { transform: translateY(-90px); } }
@keyframes cmWiggle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3px); } }
@media (prefers-reduced-motion: no-preference) {
  .cm9h { animation: cmSpin 9s linear infinite; }
  .cm9h-gen { animation: cmFlow 12s ease-in-out infinite; }
  .cm9h-gen::before { animation: cmDrift 14s linear infinite; inset: 0 0 -90px 0; }
  .cm9h-gen::after { animation: cmDrift 22s linear infinite; inset: 0 0 -90px 0; }
  .cm9h-art svg { animation: cmWiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
}
[data-theme="dark"] .cm9h-res { background: var(--surface); }
.cm-saved-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 2rem 0 .7rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font: 700 1.05rem var(--display); }
.cm-saved-h .bi { width: 17px; height: 17px; color: var(--accent-text); align-self: center; }
.cm-saved-h small { font: 500 .82rem var(--font); color: var(--muted); }

/* Tonläge i pitch- och mejlgeneratorn: piller på den mörka ytan och ett exempel under */
.cm-tones { grid-column: 1 / -1; grid-area: tone; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .45rem; }
.cm9h-gen { grid-template-areas: "art txt" "art row" "tone tone"; }
.cm-tones-l { font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #FFC59E; margin-right: .2rem; }
.cm-tone { position: relative; margin: 0; cursor: pointer; }
.cm-tone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cm-tone span { display: inline-block; padding: .28rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-size: .8rem; font-weight: 600; transition: background .15s, transform .15s; }
.cm-tone:hover span { background: rgba(255, 255, 255, .18); }
.cm-tone.on span, .cm-tone input:checked + span { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.cm-tone input:focus-visible + span { outline: 2px solid #FFC59E; outline-offset: 2px; }
.cm-tone-ex { flex-basis: 100%; margin: .25rem 0 0; font-size: .8rem; font-style: italic; color: var(--on-navy-2); }
@media (max-width: 760px) { .cm9h-gen { grid-template-areas: "art txt" "row row" "tone tone"; } }
/* Två knappar staplade uppe till höger: Skapa nytt och Läs in gammalt */
.ph-stack { display: grid; gap: .4rem; justify-items: stretch; }
.ph-stack .btn { justify-content: center; }
@media (max-width: 600px) { .ph-stack { grid-auto-flow: column; } }
@keyframes oldFlash { 0%, 40% { box-shadow: 0 0 0 4px rgba(255, 138, 61, .55); } 100% { box-shadow: 0 0 0 4px transparent; } }
.oldcv.old-flash { animation: oldFlash 2s ease-out; border-color: #FF8A3D; }

/* Generatorn v2: blå, grå, beige och orange (ingen lila), och gnistor som blinkar */
.cm9h { background: conic-gradient(from var(--cmA), #FF8A3D, #F2D3B0, #C9B79C, #8FA3BF, #4E6A8F, #E8B98A, #FF8A3D); }
.cm9h-gen { background: linear-gradient(115deg, #24364F 0%, #34507A 35%, #5B6F89 62%, #8A7660 85%, #B5683A 115%); background-size: 220% 220%; }
.cm9h-gtx h2::after { background: linear-gradient(135deg, #FF8A3D, #E8590C); box-shadow: 0 0 0 0 rgba(255, 138, 61, .7); }
@keyframes cmTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
@keyframes cmTwinkle2 { 0%, 100% { opacity: .7; } 50% { opacity: .1; } }
@keyframes cmPing { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .75); } 70% { box-shadow: 0 0 0 9px rgba(255, 138, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .cm9h-gen::before { animation: cmDrift 14s linear infinite, cmTwinkle 1.6s ease-in-out infinite; }
  .cm9h-gen::after { animation: cmDrift 22s linear infinite, cmTwinkle2 2.3s ease-in-out infinite; }
  .cm9h-gtx h2::after { animation: cmPing 1.8s ease-out infinite; }
  .cm9h { animation-duration: 6s; }
}
/* Gnistorna håller sig till kanterna så att de inte hamnar i texten */
.cm9h-gen::before, .cm9h-gen::after { -webkit-mask-image: linear-gradient(90deg, #000 0 14%, transparent 24% 82%, #000 94%); mask-image: linear-gradient(90deg, #000 0 14%, transparent 24% 82%, #000 94%); }

/* Dokumenten under en annons, tätare: inga boxar, bara rader med tunna linjer */
.dl-pane { margin: 0 1rem .8rem calc(1rem + 56px + .9rem); padding: .2rem 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.dlp { gap: 1.4rem; }
.dlp-col { gap: 0; }
.dlp-col h4 { margin: .5rem 0 .15rem; font-size: .68rem; }
.dlp-main, .dlp-list a { gap: .5rem; }
.dlp-main { padding: .35rem .3rem; border: 0; border-radius: 8px; box-shadow: none; background: none; }
.dlp-main:hover, .dlp-list a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: none; }
.dlp-main.empty { border: 0; }
.dlp-main.empty .dlp-ic { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
.dlp-ic { width: 26px; height: 26px; border-radius: 7px; }
.dlp-ic .ico { width: 14px; height: 14px; }
.dlp-ic.sm { width: 26px; height: 26px; border-radius: 7px; background: var(--sunk); }
.dlp-tx strong { font-size: .86rem; }
.dlp-tx small { font-size: .72rem; }
.dlp-tag { font-size: .66rem; padding: .08rem .45rem; }
.dlp-go { padding: .15rem .35rem; background: none !important; font-size: .74rem; }
.dlp-sub { margin: .3rem 0 0 .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.dlp-list { border: 0; border-radius: 0; background: none; }
.dlp-list li + li { border-top: 0; }
.dlp-list a { padding: .3rem .3rem; border-radius: 8px; }
.dlp-list li > .dl-trash { width: 28px; height: 28px; margin-right: 0; }
@media (max-width: 760px) { .dl-pane { margin: 0 .6rem .7rem; } }
/* Pitchen/mejlet först, generatorn under */
.cm9h-res { border-radius: 19px 19px 0 0; padding: 1.1rem 1.3rem 1rem; }
.cm9h-gen { border-radius: 0 0 19px 19px; }
.cm9h-head .cm9h-title { margin: 0; font: 700 1.05rem/1.3 var(--display); }
.cm9h-gtx h3 { margin: 0; font: 700 1.08rem/1.3 var(--display); color: #fff; }
.cm9h-gtx h3::after { content: 'AI'; display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: linear-gradient(135deg, #FF8A3D, #E8590C); color: #fff; font: 800 .66rem/1.5 var(--font); letter-spacing: .08em; vertical-align: .25em; }
@media (prefers-reduced-motion: no-preference) { .cm9h-gtx h3::after { animation: cmPing 1.8s ease-out infinite; } }

/* Dokumenten under en annons v3: en tät trädlista som tydligt hänger ihop med företaget ovanför */
.dl-item:has(> .dl-pane:not([hidden])) { background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.dl-pane { margin: -.35rem 1rem .75rem calc(1rem + 28px); padding: 0; border: 0; background: none; }
.dlt { list-style: none; margin: 0; padding: 0 0 0 calc(28px + .9rem); position: relative; }
/* Linjen från miniatyren ner längs dokumenten, med en liten gren till varje rad */
.dlt::before { content: ''; position: absolute; left: 0; top: -.4rem; bottom: .95rem; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dlt-row { position: relative; display: flex; align-items: center; }
.dlt-row::before { content: ''; position: absolute; left: calc(-28px - .9rem); top: 50%; width: calc(28px + .9rem - .3rem); height: 2px; background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dlt-row > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; padding: .28rem .45rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.dlt-row > a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dlt-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--sunk); color: var(--ink-2); }
.dlt-ic .bi { width: 13px; height: 13px; }
.dlt-row.main .dlt-ic { background: var(--accent-soft); color: var(--accent-text); }
.dlt-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; overflow: hidden; white-space: nowrap; }
.dlt-t strong { font-size: .86rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.dlt-row.copy .dlt-t strong { font-weight: 550; color: var(--ink-2); }
.dlt-t small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dlt-row.empty .dlt-t strong { color: var(--muted); font-weight: 550; font-style: italic; }
.dlt-row.empty .dlt-ic { background: transparent; border: 1px dashed var(--line-2); }
.dlt-go { flex: none; display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700; color: var(--accent-text); opacity: .75; }
.dlt-row > a:hover .dlt-go { opacity: 1; }
.dlt-go .bi { width: 12px; height: 12px; }
.dlt-row .dlp-tag { flex: none; }
.dlt-row > .dl-trash { width: 28px; height: 28px; border: 0; background: none; }
@media (max-width: 760px) { .dl-pane { margin-left: .8rem; } .dlt-t { flex-direction: column; gap: 0; } .dlt-row .dlp-tag { display: none; } }
.dlt-row:not(:has(> .dl-trash)) > a { margin-right: 28px; }

/* ---------- Pitch & mailsvar v10: en enda sammanhållen ruta ----------
   Hela rutan är en levande, tonad scen (blå → grå → beige → orange). Pitchen står som en stor vit pratbubbla,
   knapparna direkt under, och längst ner en glasig panel för att ändra eller skriva nytt. */
.cm10 { padding: 3px; }
.cm10-in { position: relative; overflow: hidden; border-radius: 19px; background: linear-gradient(120deg, #24364F 0%, #34507A 38%, #5B6F89 64%, #8A7660 86%, #B5683A 112%); background-size: 220% 220%; color: #fff; padding: 1.1rem 1.25rem 1rem; display: grid; gap: .8rem; }
.cm10-in::before, .cm10-in::after { content: ''; position: absolute; inset: 0 0 -90px 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255, 197, 158, .95) 0 2px, transparent 2.5px);
  background-size: 150px 100px, 230px 130px; background-position: 10px 20px, 70px 50px; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, #000 0 10%, transparent 22% 80%, #000 92%); mask-image: linear-gradient(90deg, #000 0 10%, transparent 22% 80%, #000 92%); }
.cm10-in::after { background-size: 180px 120px, 120px 150px; background-position: 90px 0, 0 80px; opacity: .3; }
.cm10-in > * { position: relative; z-index: 1; }
.cm10 .cm9h-res, .cm10 .cm9h-gen { background: none; border-radius: 0; padding: 0; overflow: visible; animation: none; }
.cm10 .cm9h-gen::before, .cm10 .cm9h-gen::after { content: none; }
.cm10 .cm9h-res { display: grid; gap: .65rem; }
/* Rubrikrad: liten bild, etikett, rubrik, längd */
.cm10 .cm9h-head { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; }
.cm10-art { width: 54px; flex: none; }
.cm10-art svg { width: 100%; height: auto; display: block; }
.cm10 .cm9h-k { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFD9BD; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.cm10 .cm9h-k .bi { color: #FFC59E; }
.cm10 .cm9h-title { color: #fff; font: 700 1.12rem/1.3 var(--display); }
.cm10 .cm9h-len { margin-left: auto; background: rgba(255, 255, 255, .14); color: #E9EEF5; }
/* Pitchen: vit pratbubbla med svans */
.cm10 .cm9h-q { position: relative; margin: 0 0 0 .3rem; padding: 1rem 1.2rem 1rem 2.9rem; border: 0; border-radius: 18px 18px 18px 6px; background: #fff; color: #1F2733; font-size: 1.05rem; line-height: 1.55; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .55); }
.cm10 .cm9h-q::before { left: .8rem; top: .45rem; color: #FF8A3D; opacity: 1; }
.cm10 .cm9h-q::after { content: ''; position: absolute; left: -7px; bottom: 0; width: 18px; height: 18px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cm10 .cm9h-q.cm-mailbody { padding-left: 1.2rem; max-height: 16rem; }
.cm10 .cm-sugg-subj { color: #fff; }
.cm10 .cm-sugg-subj b { color: #FFD9BD; }
/* Knapparna under bubblan */
.cm10 .cm-sugg-act { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 0 .3rem; }
.cm10 .cm-sugg-act .btn:not(.primary) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.cm10 .cm-sugg-act .btn:not(.primary):hover { background: rgba(255, 255, 255, .24); }
.cm10 .cm-sugg-act .link { color: #FFD9BD; }
.cm10 .muted { color: #D3DCE8; }
/* Varianter: små vita kort */
.cm10 .cm-vars { margin: 0 0 0 .3rem; }
.cm10 .cm-var { background: rgba(255, 255, 255, .95); color: #1F2733; border: 0; }
/* Ändra eller skriv nytt: glaspanel längst ner i samma ruta */
.cm10 .cm9h-gen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "row" "tone"; gap: .45rem; margin-top: .2rem; padding: .8rem .9rem .85rem !important; border-radius: 16px !important; background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cm10 .cm9h-gtx h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font: 700 .95rem/1.3 var(--display); color: #fff; }
.cm10 .cm9h-gtx h3::after { content: none !important; }
.cm10 .cm9h-gtx h3 .bi { width: 15px; height: 15px; color: #FFC59E; }
.cm10 .cm9h-gtx p { margin: .1rem 0 0; font-size: .8rem; color: #D3DCE8; }
.cm10 .cm-gen-row { margin-top: 0; }
.cm10 .cm-tones { margin-top: .15rem; }
@media (prefers-reduced-motion: no-preference) {
  .cm10-in { animation: cmFlow 12s ease-in-out infinite; }
  .cm10-in::before { animation: cmDrift 14s linear infinite, cmTwinkle 1.6s ease-in-out infinite; }
  .cm10-in::after { animation: cmDrift 22s linear infinite, cmTwinkle2 2.3s ease-in-out infinite; }
  .cm10-art svg { animation: cmWiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
  .cm10 .cm9h-k { animation: cmPing 2.2s ease-out infinite; }
}
@media (max-width: 760px) { .cm10-in { padding: .9rem; } .cm10-art { display: none; } .cm10 .cm9h-q { font-size: .98rem; } }
.cm10 .cm-sugg-subj { margin: 0 0 0 .3rem; font-size: .9rem; }

/* Ändra eller skriv nytt: glaspanel, bara en aning ljusare än rutan runt omkring */
.cm10 .cm9h-gen { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .22); }

/* Fälten i pitch- och mejlgeneratorn: samma ljust beige som övriga fält i appen, så att man ser att de ska fyllas i */
.cm10 .cm9h-gen .cm-gen-row input, .cm10 .cm9h-gen .cm-gen-row select, .cm9h-gen .cm-gen-row input, .cm9h-gen .cm-gen-row select { background: #F8F6F2 !important; border: 1px solid #DDD3C3 !important; color: #1F2733; }
.cm9h-gen .cm-gen-row input:focus, .cm9h-gen .cm-gen-row select:focus { border-color: #E8590C !important; box-shadow: 0 0 0 3px rgba(255, 138, 61, .25); outline: none; }
.cm9h-gen .cm-gen-row input::placeholder { color: #7A7368; }

/* Så här gör du – statistiken tätare: alla fyra siffror på en rad, mindre ringar och punkter, kompakt räknare */
.how .how-stats { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
.how .how-stats .lbig { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem) !important; margin-bottom: .3rem; }
.how .how-stats .lsub { font-size: .88rem !important; margin-bottom: .9rem !important; max-width: 80ch; }
.how-stats .lstat-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.how-stats .lstat { padding: .9rem .8rem !important; text-align: center; border-left: 1px solid rgba(255, 255, 255, .1) !important; }
.how-stats .lstat:first-child { border-left: 0 !important; }
.how-stats .lstat.wide { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; text-align: left; }
.how-stats .ldots { grid-template-columns: repeat(10, 9px); gap: 3px; }
.how-stats .ldots i { width: 9px; height: 9px; }
.how-stats .lnum { font-size: 2rem !important; }
.how-stats .lstat.wide p:not(.lnum):not(.lsrc) { font-size: .86rem; max-width: none; margin-top: .25rem; }
.how-stats .lring { width: 74px; height: 74px; }
.how-stats .lstat p { font-size: .82rem; margin-top: .35rem; line-height: 1.35; }
.how-stats .lsrc { font-size: .68rem !important; margin-top: .3rem !important; line-height: 1.35; opacity: .85; }
.how-stats .ltake { font-size: 1rem; margin: .9rem 0 .9rem; padding-left: .8rem; border-left-width: 3px; }
.how-stats .lcalc { gap: 1.2rem; padding: 1rem 1.2rem; border-radius: 18px; }
.how-stats .lcalc h3 { font-size: 1.05rem; }
.how-stats .lcalc .hint { font-size: .8rem; margin: 0; }
.how-stats .lcalc label { margin-top: .5rem; font-size: .86rem; }
.how-stats .lcalc-out { gap: .55rem; }
.how-stats .lbar { font-size: .86rem; gap: .6rem; }
.how-stats .lbar > div { height: 12px; }
.how-stats .lbar b { font-size: .9rem; min-width: 5rem; }
.how-stats .lsaved { font-size: .95rem; margin: .2rem 0 0; }
.how-stats .lsaved strong { font-size: 1.35rem; }
@media (max-width: 980px) { .how-stats .lstat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .how-stats .lstat.wide { grid-column: 1 / -1; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; } .how-stats .lstat:nth-child(2) { border-left: 0 !important; } }
@media (max-width: 600px) { .how-stats .lstat-grid { grid-template-columns: 1fr; } .how-stats .lstat { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; text-align: left; align-items: center; } .how-stats .lstat > p { grid-column: 2; } .how-stats .lstat .lring { grid-row: span 2; width: 58px; height: 58px; } }
.how-stats .lcalc input[type=range] { margin: .1rem 0 0; height: 18px; }

/* Dagens händelser i kalendern: ett kort per händelse – tid, ikon, text och knappar i samma kort */
.mc-day { padding: .85rem .95rem; border-radius: 16px; }
.mc-day-h { margin-bottom: .55rem; }
.mc-day-h h3 { font: 700 1rem var(--display); }
.mc-day-h .btn { min-height: 34px; padding: .3rem .75rem; font-size: .84rem; }
.mc-evs { gap: .45rem !important; }
.mc-day li.mc-ev { display: grid; grid-template-columns: 3.4rem auto minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; padding: .55rem .6rem .55rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 32, 52, .05); position: relative; overflow: hidden; }
.mc-day li.mc-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, var(--accent)); }
.mc-ev-time { font: 800 1rem var(--display); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mc-ev-time small { font: 650 .7rem var(--font); color: var(--muted); }
.mc-day li.mc-ev .mc-li-ic { width: 32px; height: 32px; border-radius: 10px; }
.mc-day li.mc-ev > a { display: grid; gap: .15rem; padding: 0; background: none; box-shadow: none; min-width: 0; }
.mc-day li.mc-ev > a strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-day li.mc-ev > a:hover strong { color: var(--accent-text); }
.mc-ev-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .78rem; color: var(--muted); }
.mc-ev-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.mc-ev-meta .mini { width: 12px; height: 12px; }
.mc-day li.mc-ev .ibtn { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); border-radius: 9px; }
.mc-day li.mc-ev .ibtn:hover { background: var(--sunk); color: var(--ink); }
.mc-day li.mc-ev .ibtn[data-mcdel]:hover { color: #B42318; background: color-mix(in srgb, #B42318 9%, var(--surface)); }
@media (max-width: 520px) { .mc-day li.mc-ev { grid-template-columns: auto minmax(0, 1fr) auto auto; } .mc-ev-time { grid-column: 1 / -1; font-size: .85rem; } }
.mc-ev-time small { white-space: nowrap; }

/* ---------- Min kalender (#/kalender) ---------- */
.mcal.mcp { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.mcp-main { padding: 1rem 1.1rem 1.1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.mcp .mc-head { justify-content: flex-start; gap: .5rem; margin-bottom: .8rem; }
.mcp .mc-head h2 { margin: 0 .3rem; min-width: 11ch; text-align: center; font: 750 1.3rem var(--display); text-transform: capitalize; }
.mcp .mc-nav { width: 36px; height: 36px; border-radius: 10px; font-size: 1.2rem; }
.mcp-today { margin-left: auto; }
.mcp .mc-grid { gap: 4px; }
.mcp .mc-wd { padding: .2rem .3rem; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.mcp .mc-cell { aspect-ratio: auto; min-height: 96px; padding: .35rem .35rem .4rem; align-items: stretch; justify-content: flex-start; gap: .2rem; border-radius: 12px; text-align: left; background: color-mix(in srgb, var(--sunk) 70%, var(--surface)); border: 1.5px solid transparent; }
.mcp .mc-cell .mc-n { align-self: flex-start; font: 700 .86rem var(--display); color: var(--ink-2); }
.mcp .mc-cell.today .mc-n { width: 24px; height: 24px; }
.mcp .mc-cell.sel { border-color: var(--accent); background: var(--surface); box-shadow: 0 6px 16px -10px rgba(207, 84, 12, .55); }
.mcp .mc-cell:hover { background: var(--accent-soft); }
.mcp .mc-cell.we:not(.sel) { background: color-mix(in srgb, var(--sunk) 40%, var(--surface)); }
.mcp-chips { display: grid; gap: 2px; min-width: 0; }
.mcp-chip { display: flex; align-items: center; gap: .25rem; min-width: 0; padding: .1rem .3rem .1rem .15rem; border-radius: 6px; background: color-mix(in srgb, var(--k, var(--accent)) 14%, var(--surface)); font-size: .68rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mcp-chip i { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--k, var(--accent)); color: #fff; font-style: normal; }
.mcp-chip i .ico { width: 9px; height: 9px; }
.mcp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-more { font-size: .66rem; font-weight: 700; color: var(--muted); padding-left: .2rem; }
.mcp .mc-legend { margin-top: .8rem; }
.mcp-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.mcp-side .mc-day { margin: 0; }
.mcp-up { padding: .85rem .95rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.mcp-up h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font: 700 .95rem var(--display); }
.mcp-up h3 .bi { width: 15px; height: 15px; color: var(--accent-text); }
.mcp-up ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mcp-up li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .6rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--line); }
.mcp-up li:first-child { border-top: 0; }
.mcp-up-d { display: grid; justify-items: center; padding: .2rem 0; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--k, var(--accent)) 14%, var(--surface)); cursor: pointer; line-height: 1.05; }
.mcp-up-d b { font: 800 1rem var(--display); color: var(--ink); }
.mcp-up-d small { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--ink-2); }
.mcp-up a { display: grid; min-width: 0; text-decoration: none; color: var(--ink); }
.mcp-up a strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-up a span { font-size: .74rem; color: var(--muted); }
.mcp-up a:hover strong { color: var(--accent-text); }
@media (max-width: 1100px) { .mcal.mcp { grid-template-columns: 1fr; } .mcp-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 600px) { .mcp .mc-cell { min-height: 52px; } .mcp-chip span { display: none; } .mcp-chips { display: flex; flex-wrap: wrap; } .mcp-chip { padding: 0; background: none; } .mcp .mc-head h2 { font-size: 1.1rem; min-width: 0; } }
.mcp .mc-cell.today .mc-n { color: #fff; }
.mcal.mcp { grid-template-columns: minmax(0, 1fr) 300px; }
.mcp-chip { align-items: flex-start; }
.mcp-chip span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcp-chip i { margin-top: 1px; }
@media (max-width: 600px) { .mcp-chip span { display: none; } }

/* Översikten: Gör det här först och Din månad lika breda och lika höga; första uppgiften sticker ut */
.d4-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; }
.d4-top > .d4-focus { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.d4-top .d4-month { height: 100%; margin: 0; }
.d4-focus .d4-label { margin: 0; }
.d4-focus .d4-label.small { margin-top: .35rem; }
/* Den viktigaste: mörkblå med orange glöd och ikon */
.d4-top .d4-first { position: relative; overflow: hidden; background: linear-gradient(125deg, #2B3F5A, #3E5B85 70%, #8A6A50 130%) !important; border: 0 !important; color: #fff !important; box-shadow: 0 18px 36px -20px rgba(36, 52, 74, .8) !important; padding: 1rem 1.1rem !important; }
.d4-top .d4-first::before { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 61, .45), transparent 65%); pointer-events: none; }
.d4-top .d4-first > * { position: relative; }
.d4-top .d4-first-txt strong { color: #fff; font-size: 1.12rem !important; }
.d4-top .d4-first-txt span { color: #D3DCE8 !important; }
.d4-top .d4-first .d4-time { color: #FFD9BD; }
.d4-top .d4-first .d4-time .ico { color: #FFC59E; }
.d4-top .d4-first-ic { background: linear-gradient(135deg, #FF8A3D, #E8590C) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(232, 89, 12, .9); }
@keyframes d4Glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .55), 0 8px 18px -8px rgba(232, 89, 12, .9); } 50% { box-shadow: 0 0 0 7px rgba(255, 138, 61, 0), 0 8px 18px -8px rgba(232, 89, 12, .9); } }
@media (prefers-reduced-motion: no-preference) { .d4-top .d4-first-ic { animation: d4Glow 2.4s ease-out infinite; } }
.d4-top .d4-first:hover { transform: translateY(-1px); }
/* Resten: en tät lista i samma kort */
.d4-focus .d4-then { display: grid; gap: 0 !important; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.d4-focus .d4-then li + li { border-top: 1px solid var(--line); }
.d4-focus .d4-then a { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; padding: .5rem .4rem !important; }
.d4-focus .d4-then a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
[data-theme="dark"] .d4-top > .d4-focus { background: var(--surface); }
@media (max-width: 1100px) { .d4-top { grid-template-columns: 1fr !important; } }

/* Översikten: hälsningen och processen i samma ruta. Toppen är en tunn rad, processen får platsen. */
.d4-merge.has-pipe { position: relative; overflow: hidden; border-radius: 26px; color: #fff; margin-bottom: 1rem;
  background: radial-gradient(520px 260px at 78% 0%, rgba(255, 170, 110, .30), transparent 62%), radial-gradient(120% 140% at 0% 0%, var(--navy-2, #3A5274) 0%, var(--navy, #2B3F5A) 45%, #1F2E44 100%);
  box-shadow: 0 30px 60px -32px rgba(20, 32, 50, .7); }
.d4-merge.has-pipe .d4-hero { background: none !important; box-shadow: none !important; border-radius: 0; padding: 1rem 1.3rem .4rem !important; margin: 0; gap: .6rem 1.2rem; align-items: center; flex-wrap: nowrap; }
.d4-merge.has-pipe .d4-hero::before, .d4-merge.has-pipe .d4-hero::after { content: none !important; }
.d4-merge.has-pipe .d4-hero-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: baseline; }
.d4-merge.has-pipe .d4-hi { grid-column: 1 / -1; margin: 0 0 .1rem; font-size: .8rem; }
.d4-merge.has-pipe .d4-hero h1 { grid-column: 1 / -1; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem) !important; margin: 0 0 .35rem; max-width: none; letter-spacing: -.01em; }
.d4-merge.has-pipe .d4-pep { grid-column: 1 / -1; margin: 0; padding: .2rem .7rem; font-size: .8rem; justify-self: start; }
.d4-merge.has-pipe .d4-art { display: none; }
.d4-merge.has-pipe .d4-goal { flex: none; padding: .45rem .8rem .45rem .5rem; gap: .6rem; border-radius: 16px; }
.d4-merge.has-pipe .d4-ring { width: 48px; height: 48px; }
.d4-merge.has-pipe .d4-ring b { width: 38px; height: 38px; font-size: .9rem; }
.d4-merge.has-pipe .d4-goal-t { font-size: .78rem; margin: 0 0 .2rem; }
.d4-merge.has-pipe .d4-goal-set select { min-height: 30px; padding: .15rem 1.8rem .15rem .6rem; font-size: .8rem; }
.d4-merge.has-pipe .d4-pipe { margin: 0; padding: .6rem 1.3rem 1.2rem; background: none !important; box-shadow: none !important; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.d4-merge.has-pipe .d4-pipe .d4-sec-h { margin-bottom: .6rem; }
.d4-merge.has-pipe .d4-pipe .sh4 { font-size: 1rem; }
@media (max-width: 760px) { .d4-merge.has-pipe .d4-hero { flex-wrap: wrap; } .d4-merge.has-pipe .d4-pipe { padding: .6rem .8rem 1rem; } }
/* Första uppgiften: varm orange ton (ljus text behålls) */
.d4-top .d4-first { background: linear-gradient(120deg, #9A3F12 0%, #C2541A 45%, #E07130 85%, #F0904E 120%) !important; box-shadow: 0 18px 36px -18px rgba(194, 84, 26, .75) !important; }
.d4-top .d4-first::before { background: radial-gradient(circle, rgba(255, 214, 170, .45), transparent 65%); }
.d4-top .d4-first-txt span { color: #FFE7D6 !important; }
.d4-top .d4-first .d4-time, .d4-top .d4-first .d4-time .ico { color: #FFE2CC; }
.d4-top .d4-first-ic { background: rgba(255, 255, 255, .18) !important; border: 1px solid rgba(255, 255, 255, .35); }
.d4-top .d4-first .btn.primary { background: #fff !important; color: #B4490D !important; border-color: #fff !important; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }

/* Min kalender: Lägg till/Ändra som en luftig dialog mitt på skärmen */
.mcp-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.mcp-back { position: absolute; inset: 0; background: rgba(15, 23, 36, .5); backdrop-filter: blur(3px); animation: msFade .18s ease-out; }
.mcp-dlg { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 22px; background: var(--surface); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .55); animation: msUp .2s ease-out; }
.mcp-dlg-h { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: 1rem 1.2rem .9rem; background: linear-gradient(120deg, var(--navy-2), var(--navy)); color: #fff; }
.mcp-dlg-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FF8A3D, #E8590C); color: #fff; }
.mcp-dlg-ic .ico { width: 20px; height: 20px; }
.mcp-dlg-h h2 { margin: 0; font: 700 1.1rem var(--display); color: #fff; }
.mcp-dlg-h p { margin: .1rem 0 0; font-size: .84rem; color: var(--on-navy-2); }
.mcp-dlg-h p::first-letter { text-transform: uppercase; }
.mcp-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mcp-x:hover { background: rgba(255, 255, 255, .24); }
.mcp-x .ico { width: 18px; height: 18px; }
/* Formuläret i två spalter: typ överst, datum/tid, vad, plats, ansökan + påminnelse, knappar */
.mcp-dlg .cal4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1rem; padding: 1.1rem 1.2rem 1.2rem; margin: 0; border: 0; background: none; box-shadow: none; }
.mcp-dlg .cal4 > * { grid-column: 1 / -1; margin: 0; }
.mcp-dlg .cal4 > .mc-types { order: 1; gap: .4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mcp-dlg .cal4 > .mc-types .mc-type span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; font-size: .86rem; }
.mcp-dlg .cal4 > .mc-types .bi { width: 15px; height: 15px; }
.mcp-dlg .cal4 > .grid2 { order: 2; gap: 1rem; }
.mcp-dlg .cal4 > label:has(input[name=title]) { order: 3; }
.mcp-dlg .cal4 > .wp4 { order: 4; }
.mcp-dlg .cal4 > label:has(select[name=app]) { order: 5; grid-column: 1; }
.mcp-dlg .cal4 > .rm4-row { order: 5; grid-column: 2; align-self: end; }
.mcp-dlg .cal4 > .iv-form-foot { order: 6; display: flex; justify-content: flex-end; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.mcp-dlg .cal4 > .iv-form-foot .btn { min-height: 42px; padding: .5rem 1.1rem; font-size: .92rem; }
.mcp-dlg .cal4 > .iv-form-foot [type=submit] { order: 2; }
.mcp-dlg .cal4 label, .mcp-dlg .cal4 .wp-l { font-size: .86rem; font-weight: 650; color: var(--ink-2); }
.mcp-dlg .cal4 input, .mcp-dlg .cal4 select { margin-top: .3rem; }
@media (max-width: 560px) { .mcp-dlg .cal4 { grid-template-columns: 1fr; } .mcp-dlg .cal4 > label:has(select[name=app]), .mcp-dlg .cal4 > .rm4-row { grid-column: 1; } .mcp-modal { padding: 0; align-items: end; } .mcp-dlg { border-radius: 22px 22px 0 0; max-height: 92dvh; } }

/* Översikten v2: ljusare, varm topp med luft; processen som en egen mörkare panel inuti rutan */
.d4-merge.has-pipe { padding: 0 .75rem .75rem; border-radius: 28px;
  background: radial-gradient(420px 220px at 88% 0%, rgba(255, 168, 105, .55), transparent 70%), radial-gradient(380px 200px at 0% 0%, rgba(255, 226, 196, .22), transparent 70%), linear-gradient(135deg, #5A7598 0%, #6F86A3 45%, #8F8E95 78%, #B08A6E 105%); }
.d4-merge.has-pipe .d4-hero { padding: 1.35rem .65rem 1.2rem !important; gap: 1rem 1.6rem; }
.d4-merge.has-pipe .d4-hi { color: #FFE2CC; font-size: .86rem; margin-bottom: .2rem; }
.d4-merge.has-pipe .d4-hero h1 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem) !important; margin-bottom: .55rem; text-shadow: 0 1px 12px rgba(20, 32, 52, .25); }
.d4-merge.has-pipe .d4-pep { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); color: #fff; padding: .3rem .8rem; }
.d4-merge.has-pipe .d4-goal { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); padding: .6rem .9rem .6rem .6rem; }
.d4-merge.has-pipe .d4-ring { width: 54px; height: 54px; }
.d4-merge.has-pipe .d4-ring b { width: 42px; height: 42px; }
.d4-merge.has-pipe .d4-pipe { padding: .9rem 1rem 1rem !important; border-top: 0; border-radius: 22px !important;
  background: radial-gradient(120% 140% at 0% 0%, var(--navy-2, #3A5274) 0%, var(--navy, #2B3F5A) 50%, #1F2E44 100%) !important; box-shadow: 0 14px 30px -18px rgba(20, 32, 52, .8), inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
.d4-merge.has-pipe .d4-pipe .d4-sec-h { margin-bottom: .75rem; }
@media (max-width: 760px) { .d4-merge.has-pipe { padding: 0 .5rem .5rem; } .d4-merge.has-pipe .d4-hero { padding: 1rem .5rem .9rem !important; } }
.d4-merge.has-pipe .d4-hero { border: 0 !important; outline: 0; }
.d4-merge.has-pipe .d4-pep, .d4-merge.has-pipe .d4-pep span { color: #fff !important; }
.d4-merge.has-pipe .d4-pep .ico { color: #FFD9BD !important; }
.d4-merge.has-pipe .d4-goal-t { color: #fff; }

/* Förklaringen under kalendern: jämna små piller i en rad (bryts snyggt på smalare skärmar) */
.mcp .mc-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.mcp .mc-legend span { display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .28rem .5rem .28rem .3rem; border-radius: 999px; background: color-mix(in srgb, var(--k, var(--muted)) 10%, var(--surface)); font-size: .74rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp .mc-legend span:has(.k-intervju) { --k: #E8590C; } .mcp .mc-legend span:has(.k-prep) { --k: #E8A33D; } .mcp .mc-legend span:has(.k-deadline) { --k: #B42318; }
.mcp .mc-legend span:has(.k-uppfoljning) { --k: #16803C; } .mcp .mc-legend span:has(.k-aktivitet) { --k: #2F7FB0; } .mcp .mc-legend span:has(.k-af) { --k: #1F4E8C; } .mcp .mc-legend span:has(.k-akassa) { --k: #7A5AA8; }
.mcp .mc-legend i { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.mcp .mc-legend i .ico { width: 11px; height: 11px; }

/* Lägg till uppgift: tydliga knappar, och en tom dag som inbjuder till att lägga till */
.d4-month-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
.d4-month-h .sh4 { margin: 0; }
.mcp-empty { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .85rem; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line-2)); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); }
.mcp-empty:hover { border-style: solid; background: var(--accent-soft); }
.mcp-empty > .bi { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: linear-gradient(135deg, #FF8A3D, #E8590C); color: #fff; }
.mcp-empty span { display: grid; gap: .1rem; }
.mcp-empty strong { font-size: .88rem; }
.mcp-empty small { font-size: .76rem; color: var(--muted); }
/* Händelserna i den smala högerspalten: tid och ikon överst, texten under – inget trängs */
.mcp-side .mc-day li.mc-ev { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "time ic . ed del" "txt txt txt txt txt"; row-gap: .35rem; padding: .6rem .6rem .65rem .85rem; }
.mcp-side .mc-ev-time { grid-area: time; font-size: .95rem; }
.mcp-side .mc-ev .mc-li-ic { grid-area: ic; width: 26px; height: 26px; border-radius: 8px; }
.mcp-side .mc-ev .mc-li-ic .ico { width: 14px; height: 14px; }
.mcp-side .mc-ev > a { grid-area: txt; }
.mcp-side .mc-ev > a strong { white-space: normal; }
.mcp-side .mc-ev [data-mcedit] { grid-area: ed; }
.mcp-side .mc-ev [data-mcdel] { grid-area: del; }
.mcp-side .mc-day-h .btn { white-space: nowrap; flex: none; }
.pv-warn { display: grid; gap: .5rem; }
.pv-warn p { margin: 0; }
.pv-warn .pv-help { justify-self: start; min-height: 34px; padding: .35rem .8rem; font-size: .82rem; }


/* ---------- Jobbsmed i mobilen (installera som app) ---------- */
.inst-ban { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .7rem; padding: .65rem .7rem .65rem .75rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-m, 14px); box-shadow: var(--sh-1); }
.inst-ban-ic img { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: block; }
.inst-ban-tx { display: grid; gap: .1rem; min-width: 0; }
.inst-ban-tx strong { font-size: .95rem; line-height: 1.25; }
.inst-ban-tx small { color: var(--muted); font-size: .82rem; line-height: 1.3; }
.inst-ban-x { border: 0; background: none; color: var(--muted); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.inst-ban-x:hover { background: var(--sunk); color: var(--ink); }
.inst-ban-x svg { width: 1rem; height: 1rem; }
@media (max-width: 420px) { .inst-ban { grid-template-columns: auto 1fr auto; } .inst-ban .btn { grid-column: 2 / 4; justify-self: start; grid-row: 2; } .inst-ban-x { grid-row: 1; grid-column: 3; } }

.inst-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: start; max-width: 980px; }
.inst-hero { display: grid; place-items: center; padding: 1rem 0; }
.inst-phone { width: 220px; aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 9px; background: var(--navy, #2B3F5A); box-shadow: 0 18px 40px -18px rgba(20, 30, 50, .55); }
.inst-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; padding: 2.1rem .9rem 1rem; background: linear-gradient(160deg, #FFE6D2 0%, #F8F6F2 45%, #DCE6F3 100%); }
.inst-time { position: absolute; top: .55rem; left: 0; right: 0; text-align: center; font: 700 .72rem var(--font); color: #2B3F5A; }
.inst-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem .6rem; }
.inst-apps i { aspect-ratio: 1; border-radius: 11px; background: rgba(43, 63, 90, .14); }
.inst-app { display: grid; justify-items: center; gap: .2rem; animation: instPop 2.4s ease-in-out infinite; }
.inst-app img { width: 100%; aspect-ratio: 1; border-radius: 11px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.inst-app small { font-size: .55rem; overflow: hidden; max-width: 100%; text-overflow: ellipsis; color: #2B3F5A; font-weight: 600; white-space: nowrap; }
@keyframes instPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .inst-app { animation: none; } }

.inst-tabs { display: inline-grid; grid-auto-flow: column; background: var(--sunk); border-radius: 12px; padding: 4px; margin-bottom: 1rem; }
.inst-tabs button { border: 0; background: none; padding: .5rem .95rem; font: 600 .92rem var(--font); color: var(--muted); border-radius: 9px; cursor: pointer; }
.inst-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.inst-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 1.1rem 1.2rem; }
.inst-go { margin-bottom: 1rem; }
.inst-go:has(> [hidden]) { display: none; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.inst-steps li { display: grid; grid-template-columns: 1.7rem 2.4rem 1fr; gap: .65rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.inst-steps li:first-child { border-top: 0; padding-top: 0; }
.inst-steps li:last-child { padding-bottom: 0; }
.inst-steps li:last-child .inst-n { background: var(--accent); color: var(--accent-ink); }
.inst-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); font: 700 .85rem var(--display, var(--font)); color: var(--ink-2); }
.inst-ic { width: 2.4rem; height: 2.4rem; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.inst-ic svg { width: 1.15rem; height: 1.15rem; }
.inst-steps strong { display: block; font-size: .97rem; line-height: 1.3; }
.inst-steps small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.35; margin-top: .1rem; }
.inst-qr { display: grid; grid-template-columns: 168px 1fr; gap: 1.2rem; align-items: center; }
.inst-qr-box { width: 168px; height: 168px; background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 4px; overflow-wrap: anywhere; font-size: .75rem; }
.inst-qr-box svg { width: 100%; height: 100%; display: block; }
.inst-qr p { color: var(--ink-2); margin: .3rem 0 0; font-size: .93rem; }
.inst-url { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem !important; }
.inst-url code { background: var(--sunk); padding: .3rem .55rem; border-radius: 8px; font-size: .88rem; color: var(--ink); }
.inst-why { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.inst-why li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: .93rem; }
.inst-why .bi { flex: none; color: var(--accent-text); margin-top: .1rem; }
.inst-done { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--r-l); background: var(--accent-soft); border: 1px solid var(--line); }
.inst-done > svg { flex: none; width: 1.6rem; height: 1.6rem; color: var(--accent-text); }
.inst-done p { margin: .2rem 0 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .inst-grid { grid-template-columns: 1fr; }
  .inst-hero { display: none; }
  .inst-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .inst-tabs button { padding: .5rem .3rem; }
  .inst-pane { padding: .95rem 1rem; }
  .inst-qr { grid-template-columns: 1fr; justify-items: start; }
}

/* Inloggning när Jobbsmed öppnas som installerad app: bara kortet */
main.auth.auth-app { grid-template-columns: 1fr; align-content: center; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.auth-app .auth-side { padding: 1.6rem 1.25rem 0; align-items: center; text-align: center; }
.auth-app .auth-side h1 { margin: .9rem auto .4rem; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); max-width: 14ch; }
.auth-app .auth-sub { margin: 0 auto; font-size: 1rem; }
.auth-app .auth-steps, .auth-app .how-link { display: none; }
.auth-app .auth-card { margin: 1.2rem auto 2rem; }
.auth-app-note { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: .9rem; font-weight: 600; text-align: center; }
main.auth, main.auth:focus { margin-left: 0; padding-bottom: 0; }

/* ---------- Så gör du: numrerad att-göra-rad överst i varje steg ---------- */
.gd { margin: 0 0 1rem; padding: .75rem .85rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.gd-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; min-width: 0; }
.gd-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.gd-ic svg { width: 16px; height: 16px; }
.gd-t { margin: 0; font-size: .98rem; font-weight: 700; letter-spacing: -.005em; min-width: 0; }
.gd-dots { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.gd-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.gd-dots i.on { background: var(--accent); }
.gd-dots i.now { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.gd-dd { display: flex; gap: 4px; }
.gd-pc { margin-left: .35rem; }
.gd-mode { flex: none; font-size: .8rem; white-space: nowrap; }
.gd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .45rem; }
.gd-list li { display: flex; min-width: 0; }
.gd-it { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem; padding: .55rem .6rem; border-radius: 12px; border: 1px solid transparent; background: var(--sunk); color: var(--ink-2); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.gd-it:hover { border-color: var(--line-2); }
.gd-it:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gd-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem var(--display, var(--font)); background: var(--surface); border: 1.5px solid var(--line-2); color: var(--muted); }
.gd-n svg { width: 13px; height: 13px; }
.gd-tx strong { display: block; font-size: .86rem; line-height: 1.28; color: var(--ink); font-weight: 650; }
.gd-tx small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.32; color: var(--muted); }
.gd-ext { width: .8em; height: .8em; margin-left: .3rem; vertical-align: -1px; color: var(--accent-text); }
.gd-go { display: none; align-self: center; color: var(--accent-text); }
.gd-go svg { width: 18px; height: 18px; }
.gd-done .gd-it { background: transparent; border-color: var(--line); }
.gd-done .gd-n { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.gd-done .gd-tx strong { color: var(--muted); font-weight: 600; }
.gd-done .gd-tx small { display: none; }
.gd-now .gd-it { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.gd-now .gd-n { background: var(--accent); border-color: transparent; color: #fff; animation: gdPulse 2.2s ease-in-out infinite; }
@keyframes gdPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } }
.gd-fin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; padding: .5rem .55rem .5rem .75rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: .9rem; }
.gd-fin .btn { margin-left: auto; }
/* Kompakt: bara nästa punkt syns, i full bredd */
.gd-compact .gd-list { grid-template-columns: 1fr; }
.gd-compact .gd-list li:not(.gd-now) { display: none; }
.gd-compact .gd-it { grid-template-columns: auto minmax(0, 1fr) auto; }
.gd-compact .gd-go { display: block; }
.gd-all.gd-compact .gd-list { display: none; }
.gd-all .gd-fin { margin-top: .1rem; }
.gd-open.gd-all .gd-fin { margin-top: .55rem; }
/* Samma nummer på delen av sidan som punkten gäller */
.gd-pin { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: .45rem; border-radius: 50%; font: 700 .72rem var(--display, var(--font)); background: var(--surface); border: 1.5px solid var(--line-2); color: var(--muted); vertical-align: middle; letter-spacing: 0; }
.gd-pin.now { background: var(--accent); border-color: transparent; color: #fff; }
.gd-pin.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.gd-target { scroll-margin-top: 96px; }
.gd-flash { animation: gdFlash 1.7s ease-out; }
@keyframes gdFlash { 0%, 35% { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 4px; } 100% { outline: 3px solid transparent; outline-offset: 4px; } }
@media (prefers-reduced-motion: reduce) { .gd-now .gd-n, .gd-flash { animation: none; } }
@media (max-width: 760px) {
  .gd { padding: .65rem .7rem .7rem; }
  .gd-pc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gd-list { grid-template-columns: 1fr; gap: .35rem; }
  .gd-it { padding: .5rem .55rem; }
  .gd-target { scroll-margin-top: 84px; }
}

.ms-path .ms-step + .ms-step { margin-top: .5rem; }
.ms-path h3 { display: flex; align-items: center; gap: .45rem; margin: .35rem 0 .2rem; font-size: .8rem; font-weight: 750; color: var(--ink-2); }
.ms-path .ms-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 800 .7rem var(--display, var(--font)); }
.rail .nst-items li.has-add > a:first-child { padding-right: 2.5rem !important; white-space: nowrap; }
.rail .nst-items .nav-add { right: .6rem; }
.rail .nst-items > li { min-width: 0; max-width: 100%; }

/* ---------- Mobilen: avskalad och tätare ---------- */
.m-lite { display: none; }
@media (max-width: 760px) {
  /* Sidhuvuden: mindre */
  .ph4 { margin-bottom: .8rem !important; }
  .ph4 h1 { font-size: 1.35rem !important; line-height: 1.2; }
  .ph4-ico { width: 34px !important; height: 34px !important; border-radius: 11px !important; }
  .ph4-ico svg { width: 18px; height: 18px; }
  .ph4 .lead { font-size: .84rem !important; margin-top: .15rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Mina ansökningar: korta rader, ny ansökan finns i flikraden */
  .diary .page-actions, .diary .al8-sum { display: none !important; }
  .diary .al5 { padding: .55rem .65rem !important; border-radius: 16px !important; }
  .diary .al5-main { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; grid-template-areas: "av id sc" "av nx sc" !important; gap: .1rem .6rem !important; align-items: center !important; padding: 0 !important; }
  .diary .al5-main > .al5-av { grid-area: av; width: 34px !important; height: 34px !important; font-size: .9rem; align-self: start; }
  .diary .al5-main > .al5-id { grid-area: id; min-width: 0; }
  .diary .al5-id strong { font-size: .96rem; }
  .diary .al5-id small { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .diary .al5-main > .al5-next { grid-area: nx; font-size: .78rem !important; margin: 0 !important; min-width: 0; }
  .diary .al5-main > .fitmini, .diary .al5-main > span:last-child { grid-area: sc; transform: scale(.85); }
  .diary .al5-stage, .diary .al5-logbtn { display: none !important; }
  .diary .al5-sec { margin-top: .7rem !important; }
  .diary .ac4 { padding: .65rem .75rem !important; border-radius: 16px !important; }
  .diary .ac4 .dc-head { gap: .6rem !important; }
  .diary .ac4-av { width: 34px !important; height: 34px !important; font-size: .9rem; }
  .diary .ac4 .dc-title { font-size: .98rem; }
  .diary .ac4 .dc-co { font-size: .78rem; margin: 0; }
  .diary .ac4-prog, .diary .ac4 .dc-ic, .diary .ac4 .dc-more, .diary .ac4 .pill { display: none !important; }
  .diary .ac4 .fitmini { transform: scale(.85); }
  .diary .ac4 .dc-foot { margin-top: .35rem !important; padding-top: 0 !important; border: 0 !important; }
  .diary .ac4 .dc-next { font-size: .8rem; }
  /* Ansökan: mindre huvud */
  .ws10-head h1 { font-size: 1.3rem !important; }
  .ws10-head .ac4-av.big { width: 38px !important; height: 38px !important; }
  .ws10 .crumb { margin-bottom: .3rem; font-size: .82rem; }
  /* CV och brev i mobilen: förhandsvisning och PDF – redigeringen finns på datorn (eller "Redigera ändå") */
  .ws10:not(.m-edit) .m-lite { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .5rem 0; padding: .5rem .7rem; border-radius: 12px; background: var(--sunk); font-size: .8rem; color: var(--ink-2); }
  .m-lite > span { display: flex; align-items: flex-start; gap: .4rem; }
  .m-lite .bi { flex: none; margin-top: 2px; color: var(--accent-text); }
  .m-lite .link { flex: none; font-size: .8rem; }
  .ws10.ws-st-dokument:not(.m-edit) .ws10-main > .gd,
  .ws10:not(.m-edit) .docedit-form,
  .ws10:not(.m-edit) .ws-panel > .trackbar,
  .ws10:not(.m-edit) .ws-panel > .ed-ctx,
  .ws10:not(.m-edit) .ws-panel > .ws-cvlink,
  .ws10:not(.m-edit) .ws-panel > .ws-saved,
  .ws10:not(.m-edit) #cvWord, .ws10:not(.m-edit) #cvSaveDoc, .ws10:not(.m-edit) #letterWord, .ws10:not(.m-edit) #letterSaveDoc,
  .ws10:not(.m-edit) .ws-panel > .toolbar .link { display: none !important; }
  .ws10:not(.m-edit) .docedit-grid { display: block !important; }
  .ws10 .ws-panel > .ai-note { font-size: .74rem; }
}




/* ---------- Menyn: vägen till jobbet – 1 AI-matchning → 2 Dokumentshjälpen (Profil → CV → Brev → Pitch → LinkedIn) → 3 Ansökningar på en linje ---------- */
.rail li.path { position: relative; margin: .5rem 0 .15rem; }
.rail .path-l { margin: 0 0 .2rem .8rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8FA3BE; }
.rail ul.path-ul { position: relative; gap: 2px; }
.rail ul.path-ul::before { content: ''; position: absolute; left: calc(.8rem + 9px); top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.rail .stn { flex: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #3A5274; border: 1.5px solid rgba(255, 255, 255, .34); color: #DCE5F1; font: 800 .68rem var(--display, var(--font)); letter-spacing: 0; line-height: 1; }
.rail a[aria-current="page"] .stn, .rail .nav-g.fold.has-cur .stn, .rail li.has-cur > a .stn { background: var(--accent); border-color: transparent; color: #fff; }
/* Dokumentshjälpens delar som små punkter på samma linje */
.rail .path [data-box="docs"] > ul { padding-left: 0; }
.rail .path [data-box="docs"] li.sub > a { border-left-color: transparent !important; box-shadow: none !important; padding-left: calc(.8rem + 26px) !important; }
.rail .path [data-box="docs"] .fold-box.kids > ul { padding-left: 0; }
.rail .path [data-box="docs"] li.deep > a { padding-left: calc(.8rem + 52px) !important; margin-left: 0 !important; }
.rail .seq { position: absolute; left: calc(.8rem + 5px); top: 50%; transform: translateY(-50%); z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #3A5274; border: 2px solid rgba(255, 255, 255, .34); }
.rail li.seq-li > a[aria-current="page"] .seq, .rail li.seq-li.has-cur > a .seq { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 86, 11, .25); }
/* Ansökningar: kortare namn i menyn så att plusknappen får luft */
@media (min-width: 861px) {
  .rail li.stn-li.has-add .nl { display: none; }
  .rail li.stn-li.has-add .ns { display: inline; }
  .rail li.stn-li.has-add > a:first-child { padding-right: 3rem !important; }
  .rail li.stn-li.has-add .nav-add { right: .55rem; }
}
@media (max-width: 860px) { .msheet .ms-g a { min-height: 42px; padding: .4rem .85rem; font-size: .92rem; } .msheet .ms-g li.ms-sub a { min-height: 36px; font-size: .86rem; } }

/* ---------- Mobilen: Jobbcoachen som en liten ruta ovanför flikraden ---------- */
@media (max-width: 860px) {
  .cw5.open { inset: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(20, 30, 48, .32); }
  .cw5 .cw-panel { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; width: auto !important; height: min(66vh, 540px) !important; border-radius: 22px !important; }
  .cw5 .cw-panel::before { content: ''; position: absolute; top: 6px; left: 50%; z-index: 3; width: 36px; height: 4px; border-radius: 2px; background: rgba(140, 150, 170, .55); transform: translateX(-50%); }
  .cw-hero { padding: .9rem 1rem .7rem !important; }
  .cw-hero-top { margin-bottom: .6rem !important; }
  .cw-hero h2 { font-size: 1.15rem !important; }
  .cw-head { padding: .75rem .7rem .55rem !important; }
  .cw-body { padding: 0 .7rem .7rem !important; gap: .5rem !important; }
  .cw-start, .cw-next { padding: .7rem .8rem !important; }
  .cw-faq li button { padding: .5rem .5rem !important; font-size: .88rem !important; }
  .cw-tabs button { padding: .3rem .2rem !important; font-size: .7rem !important; }
  .cw-tabs .ico { width: 18px; height: 18px; }
}

/* ---------- Mobilen: filter och val i mindre format ---------- */
@media (max-width: 760px) {
  .al7-chip, .al8-type .al7-chip { padding: .2rem .6rem !important; font-size: .78rem !important; min-height: 30px; }
  .al8-type { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .3rem !important; }
  .al8-bar { gap: .45rem !important; margin-bottom: .5rem !important; }
  .al8-tools { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: .4rem !important; }
  .al8-tools input, .al8-tools select { min-height: 36px !important; height: 36px; padding-top: .3rem !important; padding-bottom: .3rem !important; font-size: .85rem !important; }
  .al8-tools .al5-sort select { max-width: 9.5rem; }
  .al5-sec h2, .al5-sec-t { font-size: .95rem !important; }
  .al5-sec-ic { width: 28px !important; height: 28px !important; }
  .filters a, .iv-cats a { padding: .2rem .6rem !important; font-size: .78rem !important; }
  .tabs4 { gap: .3rem !important; padding: 3px !important; margin-bottom: .6rem !important; }
  .tabs4 a { padding: .4rem .5rem !important; font-size: .8rem !important; flex-direction: row !important; gap: .35rem !important; }
  .tabs4 a svg { width: 16px; height: 16px; }
  /* AI-matchning: tätare sökruta, filter på en rad, korta jobbkort */
  .jobs4 .jsearch { padding: .7rem !important; gap: .45rem !important; border-radius: 18px !important; }
  .jobs4 .js-row { gap: .4rem !important; }
  .jobs4 .js-row input { min-height: 38px !important; height: 38px; padding-top: .3rem !important; padding-bottom: .3rem !important; font-size: .88rem !important; }
  .jobs4 .js-row .btn { min-height: 38px; padding: .35rem .8rem; font-size: .88rem; }
  .jobs4 .js-filters { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: .35rem !important; margin: 0 -.1rem; }
  .jobs4 .js-filters label { flex: none; }
  .jobs4 .js-filters select { min-height: 32px !important; height: 32px; padding: .2rem 1.6rem .2rem .45rem !important; font-size: .78rem !important; }
  .jobs4 .js-filters label > svg { width: 15px; height: 15px; }
  .jobs4 .js-filters .check { font-size: .78rem; white-space: nowrap; }
  .jobs4 .js-hint:not(.js-lowpay) { display: none !important; }
  .jobs4 .jw2 { padding: .55rem .7rem !important; border-radius: 16px !important; margin: .6rem 0 !important; }
  .jobs4 .jw2 .jw-tx p { display: none; }
  .jobs4 .jw2 .jw-tx h2 { font-size: .9rem !important; margin: 0; }
  .jobs4 .jw2 .jw-ic { width: 30px !important; height: 30px !important; }
  .jobs4 .jbar { gap: .4rem !important; margin-bottom: .5rem !important; }
  .jobs4 .jbar p { font-size: .82rem; }
  .jobs4 .jbar select { min-height: 32px !important; height: 32px; font-size: .8rem !important; padding-top: .2rem !important; padding-bottom: .2rem !important; }
  .jobs4 .jlist { gap: .5rem !important; }
  .jobs4 .jcard { padding: .65rem .7rem !important; gap: .55rem !important; border-radius: 16px !important; }
  .jobs4 .jc-top h3, .jobs4 .jc-top a, .jobs4 .jc-top strong { font-size: .98rem !important; }
  .jobs4 .jring { width: 36px !important; height: 36px !important; }
  .jobs4 .jring b { font-size: .78rem !important; }
  .jobs4 .jc-meta { font-size: .74rem !important; gap: .15rem .55rem !important; margin: .1rem 0 .3rem !important; }
  .jobs4 .jc-meta svg { width: 12px; height: 12px; }
  .jobs4 .jc-why, .jobs4 .jc-text { font-size: .84rem !important; margin: 0 0 .35rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .jobs4 .jc-ai { display: none !important; }
  .jobs4 .jc-foot { gap: .4rem !important; }
  .jobs4 .jc-foot .jsrc, .jobs4 .jc-foot > p { font-size: .72rem !important; }
  .jobs4 .jc-btns .btn { min-height: 34px; padding: .3rem .7rem; font-size: .84rem; }
  .jobs4 .jhow { display: none !important; }
  .jobs4 .jtips, .jobs4 .jsugg { padding: .7rem .8rem !important; font-size: .86rem; }
}
@media (max-width: 760px) {
  .jobs4 .jw2 .jw-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: .55rem !important; }
  .jobs4 .jw2 .switch { font-size: 0 !important; gap: 0 !important; }
  .jobs4 .jc-foot { padding-top: .35rem !important; }
}
@media (max-width: 760px) { .jobs4 .jw2 .switch { grid-column: auto !important; } }

.mtop-menu { display: none; }
@media (max-width: 860px) {
  .mtop-menu { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--on-navy); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mtop-menu svg { width: 21px; height: 21px; }
  .mtop-menu[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
}

/* ---------- Mobilen: genomgång – flikar, kalender, Chrome-tillägg, matchning ---------- */
@media (max-width: 860px) {
  /* Chrome-tillägget fungerar inte i mobilen */
  .ws10 .ext4, details#chrome { display: none !important; }
  /* Kalendersidan: månaden överst, dagen och kommande under */
  .mcal.mcp { grid-template-columns: 1fr !important; }
  .mcp-side { position: static !important; grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  /* Flikar överst på sidorna (CV, brev, profil): en rad som går att svepa, ingen avstavning */
  .ptabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: .25rem !important; padding: 3px !important; margin-bottom: .7rem !important; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptabs > a { flex: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .35rem !important; white-space: nowrap !important; padding: .42rem .75rem !important; font-size: .8rem !important; line-height: 1.2 !important; min-height: 0 !important; word-break: normal !important; hyphens: none !important; }
  .ptabs > a svg { width: 16px !important; height: 16px !important; flex: none; }
  .ptabs > a .need { position: static !important; margin-left: .15rem; transform: none !important; }
  /* Matchning i ansökan: mindre poängring */
  .ws10 .fit { gap: .8rem !important; padding: .8rem .9rem !important; margin-bottom: .8rem !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
  .ws10 .fit-score { width: 64px !important; height: 64px !important; }
  .ws10 .fit-score span { font-size: 1.35rem !important; }
  .ws10 .fit-score small { font-size: .58rem !important; }
  .ws10 .fit > div:not(.fit-score) { flex: 1 1 auto !important; min-width: 0; }
  .ws10 .verdict { font-size: .92rem !important; margin: 0 0 .3rem !important; }
  .ws10 .fit .muted { font-size: .8rem; margin: 0; }
  /* Ny ansökan: lägre textruta */
  .adform textarea#adText { min-height: 140px !important; height: 140px; }
}
/* Mobilen: coachen nås från toppfältet i stället för en flytande knapp över innehållet */
@media (max-width: 860px) {
  .cw5:not(.open) { display: none !important; }
  .cw5.open .cw-launch { display: none !important; }
  .mtop-r { gap: .4rem !important; }
  .mtop-coach { color: var(--accent-2) !important; }
}

/* ---------- Jobbcoachen: Din vecka som en veckoplan med dagar, bock och kalender ---------- */

/* ---------- Dokumentshjälpen: stegrad överst, nästa steg förklarat, två sätt att söka ---------- */



/* ---------- Mobilen: allt lite mindre och tätare (rem-baserade mått krymper med roten) ---------- */
@media (max-width: 760px) {
  html { font-size: 15px; }
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; padding: .5em .7em; margin-top: .3rem; } /* 16 px så att iPhone inte zoomar in */
  label { margin-bottom: .7rem; font-size: .86rem; }
  .page { padding: .9rem .75rem 6.5rem !important; }
  h2 { font-size: 1.05rem; }
  h3 { font-size: .98rem; }
  .btn { min-height: 38px; padding: .55em .95em; font-size: .9rem; }
  .btn.small { min-height: 32px; padding: .4em .7em; font-size: .82rem; }
  .btn.big { min-height: 44px; padding: .65em 1.2em; font-size: .98rem; }
  .toolbar { gap: .35rem; margin-bottom: .8rem; }
  .sh4 { font-size: 1rem !important; gap: .5rem !important; }
  .sh4-ico { width: 28px !important; height: 28px !important; border-radius: 9px !important; }
  .sh4-ico svg { width: 16px; height: 16px; }
  details.acc4 > summary { padding-top: .6rem !important; padding-bottom: .6rem !important; }
  .acc4-body { padding-top: .2rem !important; }
  .hint, .muted { font-size: .84rem; }
}

/* ---------- Mobilen: enkel översikt – läget, att göra och veckan ---------- */
.d4m { display: none; }
@media (max-width: 860px) { a.mtop-menu[aria-current="page"] { background: rgba(255, 255, 255, .22); } .mtop .brand span { font-size: 1.02rem; } }
@media (max-width: 760px) {
  .dash4 > *:not(.d4m):not(.inst-ban) { display: none !important; }
  .dash4 .inst-ban { padding: .45rem .5rem; gap: .5rem; margin-bottom: .6rem; grid-template-columns: auto 1fr auto auto !important; }
  .dash4 .inst-ban-ic img { width: 1.8rem; height: 1.8rem; }
  .dash4 .inst-ban-tx small { display: none; }
  .dash4 .inst-ban-tx strong { font-size: .85rem; }
  .dash4 .inst-ban .btn { grid-column: auto !important; grid-row: auto !important; min-height: 30px; padding: .25rem .65rem; font-size: .8rem; }
  .d4m { display: grid; gap: .7rem; }
  .d4m > * { margin: 0 !important; }
  .d4m-h { padding: .1rem .1rem 0; }
  .d4m-hi { margin: 0; font-size: .8rem; font-weight: 700; color: var(--accent-text); }
  .d4m-h h1 { margin: .1rem 0 .25rem; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
  .d4m-goal { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; font-size: .78rem; color: var(--muted); }
  .d4m-goal > .bi, .d4m-streak .bi { width: 14px; height: 14px; color: var(--accent-text); }
  .d4m-streak { display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem; }
  .d4-mcount { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .d4-mcount a { display: grid; justify-items: center; padding: .35rem .15rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--muted); min-width: 0; }
  .d4-mcount b { font: 800 1.05rem/1.1 var(--display, var(--font)); color: var(--ink-2); }
  .d4-mcount span { font-size: .62rem; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d4-mcount a.has b { color: var(--accent-text); }
  .d4-mcount a.st-send.has { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
  .d4m-sec { padding: .7rem .75rem .75rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
  .d4m-sec h2 { margin: 0 0 .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .d4m-sec-h { display: flex; align-items: baseline; justify-content: space-between; }
  .d4m-sec-h .link { font-size: .82rem; }
  .d4m-todo { list-style: none; margin: 0; padding: 0; display: grid; }
  .d4m-todo li + li { border-top: 1px solid var(--line); }
  .d4m-todo a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem 0; color: var(--ink); text-decoration: none; }
  .d4m-todo a > svg:last-child { width: 16px; height: 16px; color: var(--muted); }
  .d4m-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sunk); color: var(--accent-text); }
  .d4m-ic svg { width: 17px; height: 17px; }
  .d4m-tx strong { display: block; font-size: .9rem; font-weight: 650; line-height: 1.25; }
  .d4m-tx small { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d4m-todo li.first a { margin: 0 -.4rem; padding: .5rem .4rem; border-radius: 12px; background: var(--accent-soft); }
  .d4m-todo li.first .d4m-ic { background: linear-gradient(135deg, #FF8A3D, #E0560B); color: #fff; }
  .d4m-todo li.first a > svg:last-child { color: var(--accent-text); }
  .d4m-calm { margin: 0; font-size: .85rem; }
  .d4m-week { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
  .d4m-week button { width: 100%; display: grid; justify-items: center; gap: 1px; padding: .3rem 0 .25rem; border: 0; border-radius: 11px; background: var(--sunk); color: var(--ink); font: inherit; cursor: pointer; }
  .d4m-week small { font-size: .6rem; text-transform: uppercase; font-weight: 700; color: var(--muted); }
  .d4m-week b { font: 800 .95rem/1.1 var(--display, var(--font)); }
  .d4m-week .past { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .d4m-week .past b { color: var(--muted); }
  .d4m-week .today { background: #B4490D; color: #fff; }
  .d4m-week .today small { color: #fff; }
  .d4m-dots { display: flex; gap: 2px; height: 5px; }
  .d4m-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
  .d4m-dots i.k-intervju, .d4m-dots i.k-test { background: var(--accent); }
  .d4m-dots i.k-deadline { background: #C2410C; }
  .d4m-dots i.k-uppfoljning, .d4m-dots i.k-aktivitet { background: #3B6FB6; }
  .d4m-dots i.k-prep { background: #D9A400; }
  .d4m-week .today .d4m-dots i { background: #fff; }
  .d4m .d4-ag { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .d4m .d4-ag li { display: block; }
  .d4m .d4-ag li + li { border-top: 1px solid var(--line); }
  .d4m .d4-ag a { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .4rem 0; text-decoration: none; color: var(--ink); }
  .d4m .d4-ag-d { width: auto; display: grid; justify-items: center; padding: .15rem 0; border-radius: 9px; background: var(--sunk); line-height: 1.05; }
  .d4m .d4-ag-d b { font: 800 .92rem var(--display, var(--font)); }
  .d4m .d4-ag-d small { font-size: .58rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .d4m .d4-ag li.k-intervju .d4-ag-d, .d4m .d4-ag li.k-test .d4-ag-d { background: var(--accent-soft); color: var(--accent-text); }
  .d4m .d4-ag-t strong { display: block; font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d4m .d4-ag-t small { display: block; font-size: .72rem; color: var(--muted); }
  .d4m .d4-ag-none { margin: 0 0 .3rem; font-size: .84rem; }
  .d4m-add { margin-top: .45rem; }
}

/* ---------- Jobbcoachen: innehållet till vänster, coachens bedömning som en smal sammanfattning till höger ---------- */
.page.coach .mock-nudge { margin-bottom: 1rem; }

/* Dokumentshjälpen: alla steg förklarade i ordning, på en linje */

/* Dokumentshjälpen tätare: alla steg syns utan att skrolla på en vanlig skärm */

/* LinkedIn som extrasteg: utanför linjen, med streckad ring */

/* ---------- Jobbcoachen tätare: mindre rubrik, kort påminnelse, kompakta rader ---------- */
.page.coach { padding-top: 1.6rem; }
.page.coach .ph4 { margin-bottom: .8rem; }
.page.coach .ph4 h1 { font-size: 1.55rem; }
.page.coach .ph4-ico { width: 40px; height: 40px; border-radius: 12px; }
.page.coach .ph4 .lead { font-size: .88rem; margin-top: 0; }
.page.coach .page-actions .hint { font-size: .78rem; }
.page.coach .page-actions .btn { min-height: 34px; padding: .4em .8em; font-size: .85rem; }
.page.coach .mock-nudge { padding: .5rem .7rem; gap: .7rem; margin-bottom: .8rem; border-radius: 14px; }
.page.coach .mn-ic { width: 32px; height: 32px; border-radius: 10px; }
.page.coach .mn-ic svg { width: 17px; height: 17px; }
.page.coach .mn-tx strong { font-size: .9rem; }
.page.coach .mn-tx small { font-size: .78rem; }
.page.coach .mock-nudge .btn { min-height: 30px; padding: .3rem .75rem; font-size: .8rem; }
.c4-item { padding: .7rem .85rem !important; gap: .4rem !important; border-radius: 14px !important; }
.c4-item h3 { font-size: .95rem !important; margin: 0 !important; }
.c4-item-h p { font-size: .82rem !important; margin: .1rem 0 0 !important; }
.c4-acts label { font-size: .86rem !important; }
.c4-prog { padding: .5rem .75rem !important; border-radius: 12px !important; margin-bottom: .5rem !important; }
.c4-prog b { font-size: .86rem; } .c4-prog span { font-size: .76rem !important; }
.c4-list { gap: .45rem !important; }

/* ---------- Dokumentshjälpen: resan från vänster till höger – fyra steg som kort på en linje ---------- */
.dh4 { max-width: 1240px; }
.dh4-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.dh4-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #3A5274, #2B3F5A); box-shadow: 0 10px 22px -12px rgba(30, 44, 62, .7); }
.dh4-ic svg { width: 22px; height: 22px; color: #FFB27A; }
.dh4-ht h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; }
.dh4-ht p { margin: .2rem 0 0; color: var(--ink-2); font-size: .95rem; max-width: 62ch; }
.dh4-prog { display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.dh4-ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--sunk) 0); }
.dh4-ring b { font: 800 .9rem var(--display, var(--font)); color: var(--ink); }
.dh4-ring small { font-size: .65rem; color: var(--muted); }

.dh4-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dh4-s { display: flex; flex-direction: column; min-width: 0; }
.dh4-track { position: relative; height: 36px; margin-bottom: .7rem; }
.dh4-track::before { content: ''; position: absolute; top: 50%; left: 0; right: calc(-1rem); height: 3px; transform: translateY(-50%); border-radius: 3px; background: var(--line-2); }
.dh4-s:last-child .dh4-track::before { right: 50%; }
.dh4-s:first-child .dh4-track::before { left: 50%; }
.dh4-done .dh4-track::before { background: linear-gradient(90deg, #FF8A3D, #E0560B); }
.dh4-n { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); color: var(--muted); font: 800 .95rem var(--display, var(--font)); transition: border-color .25s, box-shadow .25s; }
.dh4-n svg { width: 17px; height: 17px; }
.dh4-done .dh4-n { background: linear-gradient(135deg, #FF8A3D, #E0560B); border-color: transparent; color: #fff; }
.dh4-now .dh4-n { border-color: #FF8A3D; color: #C2410C; }
.dh4-s.is-hl .dh4-n { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }

.dh4-card { flex: 1; display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.dh4-s.is-hl .dh4-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 16px 34px -22px rgba(224, 86, 11, .5); transform: translateY(-2px); }
.dh4-now .dh4-card { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dh4-fig { display: grid; place-items: center; height: 100px; background: linear-gradient(180deg, var(--sunk), color-mix(in srgb, var(--sunk) 40%, var(--surface))); border-bottom: 1px solid var(--line); }
.dh4-fig .ill { width: auto; height: 100%; max-width: 100%; }
.dh4-now .dh4-fig { background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, var(--surface))); }
.dh4-body { flex: 1; padding: .9rem 1rem .4rem; }
.dh4-k { display: flex; align-items: center; gap: .45rem; margin: 0 0 .15rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dh4-k em { font-style: normal; padding: .05rem .45rem; border-radius: 999px; background: #B4490D; color: #fff; letter-spacing: .05em; }
.dh4-body h2 { margin: 0 0 .3rem; font-size: 1.12rem; }
.dh4-body h2 a { color: inherit; text-decoration: none; }
.dh4-p { margin: 0 0 .6rem; color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.dh4-do { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.dh4-do li { position: relative; padding-left: 1.05rem; font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.dh4-do li::before { content: ''; position: absolute; left: .15rem; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.dh4-sub { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: .6rem 0 0; font-size: .8rem; }
.dh4-sub a { color: var(--info); text-underline-offset: 3px; }
.dh4-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem .85rem; }
.dh4-st { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh4-st.ok { color: var(--accent-text); }
.dh4-st .bi { width: 14px; height: 14px; flex: none; }
.dh4-foot .btn { flex: none; }

.dh4-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.dh4-way:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); }
.dh4-way > svg:last-child { width: 18px; height: 18px; color: var(--accent-text); }
.dh4-way-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.dh4-way-ic svg { width: 19px; height: 19px; }
.dh4-way-tx strong { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.dh4-way-tx strong em { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.dh4-way-tx small { display: block; margin-top: .1rem; color: var(--muted); font-size: .8rem; line-height: 1.35; }

@media (max-width: 1100px) { .dh4-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dh4-track { display: none; } }
@media (max-width: 760px) {
  .dh4-head { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; margin-bottom: 1rem; }
  .dh4-ic { display: none; }
  .dh4-ht h1 { font-size: 1.3rem; }
  .dh4-ht p { font-size: .82rem; }
  .dh4-prog { padding: .3rem; } .dh4-prog > span:last-child { display: none; }
  .dh4-ring { width: 38px; height: 38px; }
  .dh4-path { grid-template-columns: 1fr; gap: .5rem; margin-bottom: 1.2rem; }
  .dh4-card { flex-direction: row; flex-wrap: wrap; border-radius: 16px; }
  .dh4-fig { width: 84px; height: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .dh4-fig .ill { width: 100%; height: auto; }
  .dh4-body { flex: 1; min-width: 0; padding: .65rem .75rem .2rem; }
  .dh4-body h2 { font-size: 1rem; }
  .dh4-p { font-size: .8rem; margin-bottom: .35rem; }
  .dh4-do li { font-size: .76rem; }
  .dh4-foot { width: 100%; padding: .5rem .75rem .6rem; border-top: 1px solid var(--line); }
  .dh4-way { padding: .65rem .75rem; }
}

/* ---------- Jobbcoachen: bedömningen överst, sedan en panel med flikar och innehåll ---------- */
.c6-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin: 0 0 .9rem; padding: 1.1rem 1.3rem; border-radius: 20px; color: var(--on-navy);
  background: radial-gradient(420px 220px at 95% 0%, rgba(255, 138, 61, .22), transparent 60%), linear-gradient(140deg, #3A5274, #2B3F5A); box-shadow: 0 20px 44px -30px rgba(30, 44, 62, .8); }
.c6-hero .c4-k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(255, 138, 61, .18); color: #FFC48A; font-size: .72rem; font-weight: 700; }
.c6-hero .c4-k .bi { width: 13px; height: 13px; }
.c6-hero h2 { margin: 0 0 .35rem; color: #fff; font: 700 1.08rem/1.4 var(--display); max-width: 60ch; }
.c6-hero .c4-more summary { color: var(--on-navy-2); font-size: .82rem; cursor: pointer; }
.c6-hero .c4-more p { color: var(--on-navy-2); font-size: .88rem; }
.c6-kpis { display: grid; grid-template-columns: repeat(4, auto); margin: 0; padding: .25rem; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.c6-kpis div { padding: .35rem .85rem; }
.c6-kpis div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
.c6-kpis dt { font-size: .68rem; color: var(--on-navy-2); white-space: nowrap; }
.c6-kpis dd { margin: 0; font: 800 1.2rem/1.15 var(--display); color: #fff; }
.page.coach .mock-nudge { margin: 0 0 .9rem; }
.c6-panel { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.c6-panel-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sunk) 45%, var(--surface)); }
.c6-tabs { display: flex; gap: .2rem; }
.c6-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: .88rem; }
.c6-tabs a svg { width: 16px; height: 16px; color: var(--muted); }
.c6-tabs a:hover { background: var(--sunk); }
.c6-tabs a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.c6-tabs a[aria-selected="true"] svg { color: var(--accent-text); }
.c6-prog { display: flex; align-items: center; gap: .6rem; font-size: .78rem; }
.c6-prog .c4-bar { width: 120px; }
.c6-prog b { color: var(--ink-2); white-space: nowrap; }
.c6-panel-b { padding: .4rem .5rem .6rem; }
.c6-panel-b .c4-todo, .c6-panel-b .c4-ins { padding: .5rem; }
.c6-panel-b .c4-prog { display: none; }
/* Veckan: en lugn lista – bock, dag, uppgift, kalender */
.c6w-list { list-style: none; margin: 0; padding: 0; }
.c6w-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .15rem .4rem .15rem .2rem; border-radius: 12px; }
.c6w-list > li + li { border-top: 1px solid var(--line); border-radius: 0; }
.c6w-task { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); align-items: center; gap: .6rem; margin: 0; padding: .55rem .4rem; cursor: pointer; }
.c6w-task input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.c6w-day { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.c6w-tx { font-size: .92rem; line-height: 1.4; color: var(--ink); }
.c6w-today .c6w-day { color: #B4490D; }
.c6w-list > li.c6w-today { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-radius: 12px; }
.c6w-list > li.c6w-today + li { border-top-color: transparent; }
.c6w-past:not(.is-done) .c6w-tx { color: var(--ink-2); }
.is-done .c6w-tx { color: var(--muted); text-decoration: line-through; }
.c6w-cal { width: 32px; height: 32px; color: var(--muted); }
.c6w-cal:hover { color: var(--accent-text); }
.c6w-cal svg { width: 17px; height: 17px; }
.c6w-added { display: inline-flex; align-items: center; color: var(--accent-text); padding: 0 .4rem; }
.c6w-added .bi { width: 15px; height: 15px; }
.c6w-added .bi + .bi { width: 12px; height: 12px; margin-left: -4px; margin-top: 8px; }
@media (max-width: 900px) { .c6-hero { grid-template-columns: 1fr; } .c6-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .c6-kpis div { padding: .3rem .5rem; } }
@media (max-width: 760px) {
  .c6-hero { padding: .85rem .9rem; border-radius: 16px; }
  .c6-hero h2 { font-size: .95rem; }
  .c6-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c6-kpis div:nth-child(3) { border-left: 0; }
  .c6-kpis div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .c6-panel { border-radius: 16px; }
  .c6-panel-h { padding: .45rem; }
  .c6-tabs { width: 100%; }
  .c6-tabs a { flex: 1; justify-content: center; padding: .4rem .3rem; font-size: .8rem; }
  .c6-prog { width: 100%; padding: 0 .3rem; } .c6-prog .c4-bar { flex: 1; }
  .c6w-task { grid-template-columns: 20px minmax(0, 1fr); gap: .1rem .55rem; padding: .5rem .2rem; }
  .c6w-day { grid-column: 2; font-size: .66rem; }
  .c6w-tx { grid-column: 2; font-size: .86rem; }
  .c6w-task input { grid-row: 1 / span 2; }
}
.d4-month-h .d4-month-big { margin-right: auto; margin-left: .1rem; flex: none; }

/* Dokumentshjälpen i sitt sammanhang: först jobbet (blått), sedan stegen (orange), sist LinkedIn (extra) */
.dh4-phase { position: relative; }
.dh4-pk { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dh4-pn { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.dh4-pn svg { width: 15px; height: 15px; }
.dh4-start .dh4-pn { background: #DCE6F3; color: #2B4A73; }
.dh4-docs .dh4-pn { background: var(--accent-soft); color: var(--accent-text); }
.dh4-xtra .dh4-pn { background: #DCEAF8; color: #0A66C2; }
.dh4-link { width: 2px; height: 26px; margin: .5rem 0 .5rem 12px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--line-2) 0 4px, transparent 4px 8px); }
.dh4-start-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .8rem; }
.dh4-or { align-self: center; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dh4-way-job { background: linear-gradient(135deg, #EEF3FA, #F7F9FC); border-color: #D5E0EE; }
.dh4-way-job .dh4-way-ic { background: #2B4A73; color: #fff; }
.dh4-way-job > svg:last-child { color: #2B4A73; }
.dh4-way-job:hover { border-color: #9DB4D3; }
.dh4-xtra .dh4-li { grid-template-columns: auto minmax(0, 1fr) auto auto; border: 1px dashed #9CC3EA; background: linear-gradient(135deg, #EEF5FC, #F8FBFE); }
.dh4-xtra .dh4-li .dh4-way-ic { background: #0A66C2; color: #fff; }
.dh4-xtra .dh4-li > svg:last-child { color: #0A66C2; }
.dh4-xtra .dh4-li:hover { border-style: solid; }
:root[data-theme="dark"] .dh4-way-job, :root[data-theme="dark"] .dh4-xtra .dh4-li { background: color-mix(in srgb, #3B6FB6 14%, var(--surface)); border-color: color-mix(in srgb, #3B6FB6 40%, var(--line)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dh4-way-job, :root:not([data-theme="light"]) .dh4-xtra .dh4-li { background: color-mix(in srgb, #3B6FB6 14%, var(--surface)); border-color: color-mix(in srgb, #3B6FB6 40%, var(--line)); } }
.dh4-head { margin-bottom: 1.3rem; }
@media (max-width: 760px) {
  .dh4-start-row { grid-template-columns: 1fr; gap: .35rem; }
  .dh4-or { justify-self: center; font-size: .7rem; }
  .dh4-xtra .dh4-li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dh4-xtra .dh4-li .dh4-st { display: none; }
  .dh4-link { height: 18px; margin: .3rem 0 .3rem 12px; }
}

/* ---------- Jobbcoachens bilder: scen med coach som hjälper, avatar och småbilder ---------- */
.cs-card { fill: #fff; }
.cs-bar, .cs-off { fill: #E4E8EF; }
.cs-on { fill: #E0560B; }
.cs-floor { fill: rgba(20, 30, 50, .18); }
.cs-laptop { fill: #D6DCE6; }
.cs-screen { fill: #fff; }
.cs-scr-line { fill: #CBD3DF; }
.cs-dot { fill: #8B98AD; }
:root[data-theme="dark"] .cs-card, :root[data-theme="dark"] .cs-screen { fill: #24364F; }
:root[data-theme="dark"] .cs-bar, :root[data-theme="dark"] .cs-off { fill: #34485F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-card, :root:not([data-theme="light"]) .cs-screen { fill: #24364F; } :root:not([data-theme="light"]) .cs-bar, :root:not([data-theme="light"]) .cs-off { fill: #34485F; } }
.c6-hero .cs-card, .c6-hero .cs-screen { fill: #fff; }
.c6-hero .cs-bar { fill: #DDE4EE; }
.cs-scene { width: 100%; height: auto; display: block; overflow: visible; }
/* Rörelse: coachen pekar, prickarna skriver, kurvan ritas, gnistor blinkar, bubblan svävar */
.cs-arm { transform-box: view-box; transform-origin: 174px 116px; animation: csArm 3.2s ease-in-out infinite; }
@keyframes csArm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
.cs-dot { animation: csDot 1.3s ease-in-out infinite; }
.cs-dot:nth-of-type(2) { animation-delay: .18s; } .cs-dot:nth-of-type(3) { animation-delay: .36s; }
@keyframes csDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.cs-bubble { animation: csFloat 4s ease-in-out infinite; }
@keyframes csFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cs-line { stroke-dasharray: 80; stroke-dashoffset: 80; animation: csDraw 4.5s ease-in-out infinite; }
@keyframes csDraw { 0% { stroke-dashoffset: 80; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.cs-pop { transform-box: fill-box; transform-origin: center; animation: csPop 4.5s ease-in-out infinite; }
@keyframes csPop { 0%, 40% { transform: scale(0); } 50% { transform: scale(1.5); } 60%, 90% { transform: scale(1); } 100% { transform: scale(1); opacity: 0; } }
.cs-spark path { animation: csSpark 2.4s ease-in-out infinite; }
.cs-spark path:nth-child(2) { animation-delay: .4s; } .cs-spark path:nth-child(3) { animation-delay: .8s; }
@keyframes csSpark { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.cs-type { transform-box: fill-box; transform-origin: left; animation: csType 2.6s steps(6) infinite; }
@keyframes csType { 0% { transform: scaleX(.15); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .cs-arm, .cs-dot, .cs-bubble, .cs-line, .cs-pop, .cs-spark path, .cs-type { animation: none; } .cs-line { stroke-dashoffset: 0; } }
/* Placering */
.c6-hero { grid-template-columns: 170px minmax(0, 1fr) auto; }
.c6-art { align-self: end; margin: -.4rem 0 -1.1rem -.4rem; }
.cs-intro { max-width: 280px; }
.c6-say { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px; align-items: center; gap: .7rem; margin: .4rem .5rem .3rem; padding: .55rem .8rem .55rem .55rem; border-radius: 16px; background: linear-gradient(135deg, #FFF3EA, #FDF8F4); border: 1px solid #F6DCCB; }
.cs-face { width: 36px; height: 36px; display: block; border-radius: 50%; }
.c6-say-b { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.c6-say-b b { color: #B4490D; }
.cs-spot { width: 96px; height: auto; display: block; }
.mn-face { background: none !important; padding: 0; }
.mn-face .cs-face { width: 100%; height: 100%; }
:root[data-theme="dark"] .c6-say { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c6-say { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); } }
@media (max-width: 1100px) { .c6-hero { grid-template-columns: 150px minmax(0, 1fr); } .c6-hero .c6-kpis { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .c6-hero { grid-template-columns: 96px minmax(0, 1fr); gap: .6rem .8rem; }
  .c6-art { margin: 0; align-self: center; }
  .c6-say { grid-template-columns: 30px minmax(0, 1fr); margin: .3rem .2rem; }
  .c6-say .cs-face { width: 30px; height: 30px; }
  .c6-say .cs-spot { display: none; }
  .c6-say-b { font-size: .8rem; }
}

/* ---------- Dokumentshjälpen v5: allt i ett blått band som "Så här gör du", numrerade kort 01–04 ---------- */
.dh5 { max-width: 1240px; padding-top: 1.4rem; }
.dh5-band.steps3 { margin: 0; text-align: left; padding: clamp(1.3rem, 1rem + 1.4vw, 2.2rem) clamp(1rem, .6rem + 1.6vw, 2rem) clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.dh5-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.dh5-band .s3-pill { margin-bottom: .7rem; }
.dh5-h { margin: 0 0 .4rem; color: #fff; font: 800 clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem)/1.08 var(--display); letter-spacing: -.03em; }
.dh5-h .hl { background: linear-gradient(100deg, #FF7A2E, #FFA45C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh5-sub-t { margin: 0; max-width: 58ch; color: var(--on-navy-2); font-size: .98rem; }
.dh5-prog { display: flex; align-items: center; gap: .6rem; padding: .4rem .9rem .4rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .84rem; font-weight: 650; }
.dh5-prog .dh4-ring { background: radial-gradient(closest-side, #31476A 76%, transparent 78%), conic-gradient(#FF8A3D calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); }
.dh5-prog .dh4-ring b { color: #fff; } .dh5-prog .dh4-ring small { color: var(--on-navy-2); }
.dh5-phase + .dh5-phase { margin-top: 1.2rem; }
.dh5-pk { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #AFC0D6; }
.dh5-pk span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #FFB27A; }
.dh5-pk svg { width: 14px; height: 14px; }
.dh5-ways { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .7rem; align-items: stretch; }
.dh5-or { align-self: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8FA3BE; }
.dh5-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.dh5-way:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }
.dh5-way > svg:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(120, 160, 230, .22); color: #CFE0FA; }
.dh5-way > svg:last-child { width: 18px; height: 18px; color: #FFB27A; }
.dh5-way strong { display: block; font-size: .95rem; }
.dh5-way small { display: block; color: var(--on-navy-2); font-size: .8rem; line-height: 1.35; }
.dh5-li { border-style: dashed; }
.dh5-li > svg:first-child { background: #0A66C2; color: #fff; }
/* Stegkorten */
.dh5-band .dh5-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.dh5-band .dh5-card { max-width: none; display: flex; flex-direction: column; transition: border-color .25s, background .25s, transform .25s; }
.dh5-band .dh5-card.is-hl { border-color: rgba(255, 178, 122, .55); background: linear-gradient(180deg, rgba(255, 138, 61, .14), rgba(255, 255, 255, .03)); transform: translateY(-2px); }
.dh5-band .dh5-now { border-color: rgba(255, 138, 61, .6); }
.dh5-fig { position: relative; display: grid; place-items: center; height: 104px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dh5-fig .ill { height: 100%; width: auto; max-width: 100%; }
.dh5-ok { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A3D, #E0560B); color: #fff; }
.dh5-ok svg { width: 13px; height: 13px; }
.dh5-body { flex: 1; padding: .8rem 1rem .3rem; }
.dh5-n { display: block; margin: 0 0 .3rem; background: linear-gradient(160deg, #FF8A3D, #E0560B); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 1.9rem/1 var(--display); letter-spacing: -.02em; }
.dh5-body h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; font: 700 1.05rem/1.3 var(--display); color: #fff; }
.dh5-body h2 a { color: inherit; text-decoration: none; }
.dh5-body h2 em { font: 800 .6rem var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: #FF8A3D; color: #2B1405; }
.dh5-body > p { margin: 0 0 .55rem; color: var(--on-navy-2); font-size: .85rem; line-height: 1.45; }
.dh5-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.dh5-body li { position: relative; padding-left: 1rem; font-size: .8rem; color: #D3DCE8; }
.dh5-body li::before { content: ''; position: absolute; left: .15rem; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #FF8A3D; }
.dh5-sub { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: .55rem 0 0 !important; font-size: .78rem !important; }
.dh5-sub a { color: #A9C8F5; text-underline-offset: 3px; }
.dh5-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem .85rem; }
.dh5-foot .dh4-st { color: #AFC0D6; }
.dh5-foot .dh4-st.ok { color: #FFB27A; }
.dh5-foot .btn:not(.primary) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.dh5-foot .btn:not(.primary):hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 1100px) { .dh5-band .dh5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dh5 { padding-top: .8rem; }
  .dh5-band.steps3 { border-radius: 20px; padding: 1rem .7rem; }
  .dh5-top { margin-bottom: 1rem; }
  .dh5-h { font-size: 1.5rem; }
  .dh5-sub-t { font-size: .84rem; }
  .dh5-ways { grid-template-columns: 1fr; gap: .35rem; }
  .dh5-or { justify-self: center; }
  .dh5-band .dh5-grid { grid-template-columns: 1fr; padding: 6px; gap: 6px; }
  .dh5-fig { display: none; }
  .dh5-body { padding: .7rem .8rem .2rem; }
  .dh5-n { font-size: 1.3rem; }
  .dh5-foot { padding: .5rem .8rem .7rem; }
}
.dh5-band .s3-arc::after { display: none; }

/* ---------- Jobbcoachen: chatten i hörnet syns mer på coachens sida ---------- */
.cw-hello { position: absolute; right: 0; bottom: 70px; width: max-content; display: flex; align-items: center; gap: .5rem; max-width: 250px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; background: var(--surface); color: var(--ink); font: 600 .88rem/1.35 var(--font); text-align: left; cursor: pointer; box-shadow: 0 16px 34px -18px rgba(20, 32, 52, .55); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity .35s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.cw5.on-coach.hello-in:not(.open) .cw-hello { opacity: 1; transform: none; pointer-events: auto; }
.cw-hello-dots { display: inline-flex; gap: 4px; }
.cw-hello-dots i { width: 6px; height: 6px; border-radius: 50%; background: #E0560B; animation: csDot 1.1s ease-in-out infinite; }
.cw-hello-dots i:nth-child(2) { animation-delay: .15s; } .cw-hello-dots i:nth-child(3) { animation-delay: .3s; }
.cw-hello-tx { display: none; }
.cw5.hello-in .cw-hello-dots { animation: cwHide .01s linear 1.35s forwards; }
.cw5.hello-in .cw-hello-tx { display: block; opacity: 0; animation: c6In .4s ease 1.4s forwards; }
.cw-hello:hover { border-color: var(--accent); }
@keyframes cwHide { to { width: 0; opacity: 0; margin-right: -.5rem; overflow: hidden; } }
@keyframes c6In { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cw5.on-coach:not(.open) .cw-launch { animation: cwBob 2.6s ease-in-out infinite, cwglow 3s ease-in-out infinite; }
@keyframes cwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 860px) { .cw5.on-coach:not(.open) { display: block !important; } .cw-hello { bottom: 62px; max-width: 220px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .cw5.on-coach .cw-launch, .cw-hello-dots i { animation: none !important; } .cw5.hello-in .cw-hello-tx { animation: none; opacity: 1; } .cw5.hello-in .cw-hello-dots { display: none; } }

/* ---------- Dokumentshjälpen: levande band – korten tonar in, numren glänser, nästa steg andas ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dh5-band .dh5-card { animation: h4in .7s cubic-bezier(.2, .7, .3, 1) both; }
  .dh5-band .dh5-card:nth-child(1) { animation-delay: .1s; } .dh5-band .dh5-card:nth-child(2) { animation-delay: .22s; } .dh5-band .dh5-card:nth-child(3) { animation-delay: .34s; } .dh5-band .dh5-card:nth-child(4) { animation-delay: .46s; }
  .dh5-way { animation: h4in .6s cubic-bezier(.2, .7, .3, 1) both; }
  .dh5-ways .dh5-way:last-child { animation-delay: .08s; }
  .dh5-li { animation-delay: .6s; }
  .dh5-n { background-image: linear-gradient(110deg, #E0560B 0%, #FF8A3D 35%, #FFD3B0 50%, #FF8A3D 65%, #E0560B 100%); background-size: 250% 100%; animation: dh5Shine 5s ease-in-out infinite; }
  .dh5-card:nth-child(2) .dh5-n { animation-delay: .6s; } .dh5-card:nth-child(3) .dh5-n { animation-delay: 1.2s; } .dh5-card:nth-child(4) .dh5-n { animation-delay: 1.8s; }
  .dh5-band .dh5-now { animation: h4in .7s cubic-bezier(.2, .7, .3, 1) .46s both, dh5Glow 3s ease-in-out 1.2s infinite; }
  .dh5-ok { animation: dh5Pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .8s; }
  .dh5-fig .ill { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
  .dh5-card:hover .dh5-fig .ill, .dh5-card.is-hl .dh5-fig .ill { transform: translateY(-4px) scale(1.04); }
  .dh5-way > svg:last-child { transition: transform .2s; }
  .dh5-way:hover > svg:last-child { transform: translateX(3px); }
  .dh5-now .btn.primary { animation: dh5Nudge 3s ease-in-out 2s infinite; }
  .dh5-pk span { animation: dh5Float 4s ease-in-out infinite; }
}
@keyframes dh5Shine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
@keyframes dh5Glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 138, 61, .18), 0 12px 30px -16px rgba(255, 138, 61, .6); } }
@keyframes dh5Pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dh5Nudge { 0%, 80%, 100% { transform: translateX(0); } 88% { transform: translateX(3px); } 94% { transform: translateX(-1px); } }
@keyframes dh5Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Dokumentshjälpen: ryms på en skärm – start och LinkedIn som ljusare boxar med etiketten inuti */
.dh5 { padding-top: 1rem; padding-bottom: 1.5rem; }
.dh5-band.steps3 { padding: 1.1rem 1.4rem 1.2rem; }
.dh5-top { margin-bottom: .9rem; align-items: center; }
.dh5-band .s3-pill { margin-bottom: .45rem; padding: .25rem .8rem; font-size: .68rem; }
.dh5-h { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); margin-bottom: .25rem; }
.dh5-sub-t { font-size: .9rem; }
.dh5-box { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; padding: .5rem; border-radius: 18px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.dh5-bl { display: flex; align-items: center; gap: .5rem; margin: 0; padding-left: .45rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: #D3DCE8; }
.dh5-bl span { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #FFB27A; }
.dh5-bl svg { width: 14px; height: 14px; }
.dh5-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: 13px; background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; transition: background .2s; }
a.dh5-opt:hover, .dh5-li:hover .dh5-opt { background: rgba(255, 255, 255, .17); }
.dh5-opt > svg:first-child { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: #fff; color: #2B4A73; }
.dh5-opt > svg:last-child { width: 17px; height: 17px; color: #FFB27A; transition: transform .2s; }
a.dh5-opt:hover > svg:last-child, .dh5-li:hover .dh5-opt > svg:last-child { transform: translateX(3px); }
.dh5-opt strong { display: block; font-size: .9rem; }
.dh5-opt small { display: block; color: #D3DCE8; font-size: .76rem; line-height: 1.3; }
.dh5-start .dh5-or { color: #AFC0D6; font-size: .66rem; }
.dh5-li { grid-template-columns: 170px minmax(0, 1fr); margin-top: .8rem; }
.dh5-in { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #0A66C2; font: 800 1rem/1 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.dh5-phase { margin-top: .8rem; }
.dh5-pk { margin-bottom: .45rem; font-size: .68rem; }
.dh5-band .dh5-grid { padding: 8px; gap: 8px; }
.dh5-fig { height: 78px; }
.dh5-ok { top: 6px; right: 6px; width: 22px; height: 22px; }
.dh5-body { padding: .55rem .85rem .2rem; }
.dh5-n { font-size: 1.5rem; margin-bottom: .15rem; }
.dh5-body h2 { font-size: .98rem; margin-bottom: .2rem; }
.dh5-body > p { font-size: .8rem; margin-bottom: .4rem; line-height: 1.4; }
.dh5-body li { font-size: .76rem; }
.dh5-sub { margin-top: .35rem !important; font-size: .74rem !important; }
.dh5-foot { padding: .45rem .85rem .65rem; }
.dh5-foot .btn { min-height: 30px; padding: .3rem .7rem; font-size: .8rem; }
.dh5-prog .dh4-ring { width: 38px; height: 38px; }
@media (max-width: 900px) { .dh5-box, .dh5-li { grid-template-columns: 1fr; } .dh5-start .dh5-or { justify-self: center; } }

/* Mer rörelse i coachens scen och Dokumentshjälpens bilder */
@media (prefers-reduced-motion: no-preference) {
  .cs-arm { animation-duration: 2.4s; }
  .cs-seeker { transform-box: view-box; transform-origin: 68px 150px; animation: csNod 3.6s ease-in-out infinite; }
  .cs-coach { transform-box: view-box; transform-origin: 152px 158px; animation: csSway 4.2s ease-in-out infinite; }
  .cs-board { animation: csFloat2 5s ease-in-out infinite; }
  .cs-bubble { animation: csFloat3 3.2s ease-in-out infinite; }
  .cs-spark path { animation-duration: 1.6s; }
  .dh5-band .ill .il-raise { animation: ilFloat2 3.6s ease-in-out infinite; }
  .dh5-band .dh5-card:nth-child(even) .ill .il-raise { animation-delay: -1.8s; }
  .dh5-fig .ill { animation: dhSway 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .dh5-card:nth-child(2) .dh5-fig .ill { animation-delay: -1.5s; } .dh5-card:nth-child(3) .dh5-fig .ill { animation-delay: -3s; } .dh5-card:nth-child(4) .dh5-fig .ill { animation-delay: -4.5s; }
}
@keyframes csNod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
@keyframes csSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2.5deg); } }
@keyframes csFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes csFloat3 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.03); } }
@keyframes ilFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes dhSway { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-1.5deg) translateY(-2px); } 75% { transform: rotate(1.5deg) translateY(-1px); } }
/* Börja här: en box med en löpande text och tre vägar in */
.dh5-start { grid-template-columns: 150px minmax(0, 1fr) auto; gap: .9rem; padding: .7rem .8rem; }
.dh5-start-tx { margin: 0; color: #E6ECF4; font-size: .9rem; line-height: 1.45; max-width: 64ch; }
.dh5-start-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.dh5-sbtn { background: #fff !important; color: #2B4A73 !important; border-color: transparent !important; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .5) !important; }
.dh5-sbtn:hover { background: #FFF3EA !important; color: #B4490D !important; }
.dh5-sbtn .bi { color: #E0560B; }
@media (max-width: 1100px) { .dh5-start { grid-template-columns: 1fr; } .dh5-start-btns { justify-content: flex-start; } }
/* Allt från vänster till höger: Börja här → de fyra stegen → LinkedIn */
.dh5 { max-width: none; }
.dh5-flow { display: grid; grid-template-columns: 196px 18px minmax(0, 1fr) 18px 170px; gap: .5rem; align-items: stretch; }
.dh5-arrow { align-self: center; display: grid; place-items: center; color: #FFB27A; }
.dh5-arrow svg { width: 18px; height: 18px; }
.dh5-main { margin: 0 !important; display: flex; flex-direction: column; }
.dh5-main .dh5-grid { flex: 1; }
.dh5-side { display: flex; flex-direction: column; gap: .55rem; padding: .85rem .8rem; border-radius: 18px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.dh5-side .dh5-bl { padding: 0; }
.dh5-side-tx { margin: 0; color: #E6ECF4; font-size: .8rem; line-height: 1.45; }
.dh5-start-btns { display: grid; gap: .35rem; margin-top: auto; }
.dh5-sbtn { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 10px; background: #fff; color: #2B4A73; text-decoration: none; font-size: .8rem; font-weight: 650; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .5); transition: background .2s, transform .2s; }
.dh5-sbtn:hover { background: #FFF3EA; color: #B4490D; transform: translateX(2px); }
.dh5-sbtn .bi { width: 15px; height: 15px; flex: none; color: #E0560B; }
.dh5-li { border-style: dashed; transition: background .2s; }
.dh5-li:hover { background: rgba(255, 255, 255, .18); }
.dh5-li .dh5-in { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 11px; }
.dh5-li-t { font-size: .95rem; }
.dh5-li-go { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .35rem .7rem; border-radius: 10px; background: #fff; color: #0A66C2; font-size: .8rem; font-weight: 700; }
.dh5-li-go .bi { width: 14px; height: 14px; }
.dh5-band .dh5-grid { gap: 7px; padding: 7px; }
.dh5-body { padding: .5rem .7rem .15rem; }
.dh5-body > p { font-size: .76rem; }
.dh5-body li { font-size: .73rem; }
.dh5-foot { padding: .4rem .7rem .6rem; flex-wrap: wrap; }
.dh5-foot .dh4-st { font-size: .7rem; }
.dh5-fig { height: 70px; }
@media (max-width: 1280px) {
  .dh5-flow { grid-template-columns: 1fr; }
  .dh5-arrow { transform: rotate(90deg); justify-self: start; margin-left: 1rem; }
  .dh5-start-btns { grid-template-columns: repeat(3, auto); justify-content: start; }
  .dh5-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
  .dh5-side-tx { flex: 1 1 300px; }
  .dh5-start-btns, .dh5-li-go { margin-top: 0; }
}
@media (max-width: 760px) { .dh5-start-btns { grid-template-columns: 1fr; width: 100%; } .dh5-arrow { display: none; } }
@media (min-width: 1281px) {
  .page.dh5 { padding-left: 1.6rem; padding-right: 1.6rem; }
  .dh5-band.steps3 { padding-left: 1.1rem; padding-right: 1.1rem; }
  .dh5-flow { grid-template-columns: 180px 14px minmax(0, 1fr) 14px 158px; gap: .45rem; }
  .dh5-side { margin-top: 1.95rem; }
  .dh5-start-btns { margin-top: .4rem; }
  .dh5-side .dh5-start-btns { margin-top: auto; }
}
/* Mjukare pratbubbla vid chatten: avatar, varm ton, mjuk skugga och en liten pil mot knappen */
.cw-hello { right: 4px; bottom: 74px; gap: .6rem; max-width: 260px; padding: .55rem .9rem .6rem .55rem; border: 0; border-radius: 20px; background: linear-gradient(135deg, #FFFFFF, #FFF4EC); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -18px rgba(180, 73, 13, .45), 0 4px 12px -6px rgba(20, 32, 52, .18); font-weight: 500; font-size: .86rem; }
.cw-hello::after { content: ''; position: absolute; right: 22px; bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: #FFF4EC; transform: rotate(45deg); box-shadow: 4px 4px 8px -4px rgba(180, 73, 13, .25); }
.cw-hello:hover { border-color: transparent; transform: translateY(-2px); }
.cw-hello-av { width: 32px; height: 32px; flex: none; }
.cw-hello-in { display: grid; gap: .1rem; min-width: 0; }
.cw-hello-in small { font-size: .68rem; font-weight: 700; color: #B4490D; letter-spacing: .02em; }
.cw-hello-tx { color: var(--ink); line-height: 1.35; }
:root[data-theme="dark"] .cw-hello { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); }
:root[data-theme="dark"] .cw-hello::after { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* ---------- Dokumentshjälpen v6: ljus sida, bara Dokumentshjälpens fyra steg i den blå rutan; fyller höjden som menyn ---------- */
@media (min-width: 861px) {
  .app-user ~ main .page.dh6 { padding-top: 1.1rem; }
  .page.dh6 { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 14px !important; padding-left: 1.4rem; padding-right: 1.4rem; max-width: none; }
}
.dh6-head { padding-right: 150px; margin: 0 0 1rem; }
.dh6-head h1 { margin: 0 0 .25rem; font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.dh6-head h1 .hl { color: #E0560B; }
.dh6-head p { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: .95rem; }
.dh6-flow { flex: 1; display: grid; grid-template-columns: 186px 16px minmax(0, 1fr) 16px 162px; gap: .45rem; align-items: stretch; min-height: 0; }
.dh6-arrow { align-self: center; display: grid; place-items: center; color: #C2410C; }
.dh6-arrow svg { width: 18px; height: 18px; }
.dh6-side { display: flex; flex-direction: column; gap: .6rem; padding: .95rem .85rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; }
.dh6-bl { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #2B4A73; }
.dh6-bl span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #E3EBF6; color: #2B4A73; }
.dh6-bl svg { width: 14px; height: 14px; }
.dh6-tx { margin: 0; color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.dh6-btns { display: grid; gap: .4rem; margin-top: auto; }
.dh6-btn { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: 11px; background: #EEF3FA; color: #23406A; text-decoration: none; font-size: .82rem; font-weight: 650; transition: background .2s, transform .2s; }
.dh6-btn:hover { background: #E0E9F5; transform: translateX(2px); }
.dh6-btn .bi { width: 15px; height: 15px; flex: none; color: #2B4A73; }
.dh6-start { background: linear-gradient(180deg, #F4F7FB, var(--surface)); }
.dh6-li { border: 1px dashed #A9C6E8; background: linear-gradient(180deg, #F2F7FD, var(--surface)); transition: border-color .2s, transform .2s; }
.dh6-li:hover { border-style: solid; transform: translateY(-2px); }
.dh6-li .dh5-in { width: 40px; height: 40px; border-radius: 11px; background: #0A66C2; color: #fff; font-size: 1.2rem; }
.dh6-li-t { font-size: .98rem; }
.dh6-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 10px; background: #0A66C2; color: #fff; font-size: .8rem; font-weight: 700; }
.dh6-go .bi { width: 14px; height: 14px; }
.dh6-core.steps3 { margin: 0; text-align: left; display: flex; flex-direction: column; padding: .9rem .9rem .9rem; border-radius: 24px; }
.dh6-core .s3-arc { display: none; }
.dh6-core-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: 0 .15rem .75rem; }
.dh6-core-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A3D, #E0560B); color: #fff; box-shadow: 0 8px 18px -10px rgba(224, 86, 11, .9); }
.dh6-core-ic svg { width: 19px; height: 19px; }
.dh6-core-h h2 { margin: 0; color: #fff; font: 800 1.2rem/1.2 var(--display); letter-spacing: -.01em; }
.dh6-core-h p { margin: .05rem 0 0; color: var(--on-navy-2); font-size: .82rem; }
.dh6-core .dh5-grid { flex: 1; margin: 0; }
.dh6-core .dh5-card { min-height: 0; }
.dh6-core .dh5-fig { height: auto; flex: 0 0 auto; aspect-ratio: 16 / 7; max-height: 110px; }
:root[data-theme="dark"] .dh6-start, :root[data-theme="dark"] .dh6-li { background: var(--surface); }
:root[data-theme="dark"] .dh6-btn { background: color-mix(in srgb, #3B6FB6 18%, var(--surface)); color: var(--ink); }
:root[data-theme="dark"] .dh6-bl, :root[data-theme="dark"] .dh6-btn .bi { color: #A9C2EA; }
:root[data-theme="dark"] .dh6-bl span { background: color-mix(in srgb, #3B6FB6 25%, var(--surface)); color: #A9C2EA; }
@media (max-width: 1280px) {
  .dh6-flow { grid-template-columns: 1fr; }
  .dh6-arrow { transform: rotate(90deg); justify-self: start; margin-left: 1.2rem; }
  .dh6-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .dh6-tx { flex: 1 1 280px; }
  .dh6-btns { grid-template-columns: repeat(3, auto); margin-top: 0; }
  .dh6-go { margin-top: 0; }
}
@media (max-width: 1100px) { .dh6-core .dh5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dh6-head { padding-right: 0; }
  .dh6-head h1 { font-size: 1.45rem; }
  .dh6-head p { font-size: .84rem; }
  .dh6-btns { grid-template-columns: 1fr; width: 100%; }
  .dh6-arrow { display: none; }
  .dh6-core.steps3 { padding: .7rem .5rem; border-radius: 20px; }
  .dh6-core-h { grid-template-columns: auto minmax(0, 1fr); }
  .dh6-core-h .dh5-prog { display: none; }
  .dh6-core .dh5-grid { grid-template-columns: 1fr; }
}
/* Dokumentshjälpen: korten fyller höjden – bilden växer i stället för tomrum */
@media (min-width: 1281px) {
  .dh6-core .dh5-card { display: flex; flex-direction: column; }
  .dh6-core .dh5-fig { flex: 1 1 110px; aspect-ratio: auto; max-height: 230px; min-height: 90px; }
  .dh6-core .dh5-fig .ill { height: 100%; max-height: 190px; }
  .dh6-core .dh5-body { flex: 0 0 auto; padding: .7rem .85rem .2rem; }
  .dh6-core .dh5-n { font-size: 1.8rem; }
  .dh6-core .dh5-body h2 { font-size: 1.05rem; }
  .dh6-core .dh5-body > p { font-size: .82rem; }
  .dh6-core .dh5-body li { font-size: .78rem; }
  .dh6-core .dh5-foot { padding: .6rem .85rem .8rem; }
  .dh6-li .dh6-go { margin-top: .2rem; }
  .dh6-li { justify-content: flex-start; }
}
/* Pratbubblan vid chatten: mörkblå som coachens ruta så att den syns mot den ljusa bakgrunden */
.cw-hello { background: linear-gradient(140deg, #3A5274, #2B3F5A) !important; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 18px 40px -14px rgba(20, 32, 52, .7), 0 0 0 4px rgba(255, 138, 61, .18) !important; }
.cw-hello::after { background: #2E4360 !important; box-shadow: none !important; }
.cw-hello-in small { color: #FFB27A !important; }
.cw-hello-tx { color: #fff !important; font-weight: 600; }
.cw-hello-av { border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.cw-hello-dots i { background: #FFB27A !important; }
.cw5.on-coach.hello-in:not(.open) .cw-hello { animation: cwHelloBob 3.2s ease-in-out 1s infinite; }
@keyframes cwHelloBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cw5.on-coach.hello-in:not(.open) .cw-hello { animation: none; } }
/* Coachens rad överst i fliken: liten och lätt, ingen stor ruta */
.c6-say { display: inline-flex !important; align-items: center; gap: .5rem; width: auto; max-width: calc(100% - 1rem); margin: .5rem .5rem .2rem !important; padding: .3rem .8rem .3rem .3rem !important; border-radius: 999px !important; background: #FFF3EA !important; border: 0 !important; }
.c6-say .cs-face { width: 26px; height: 26px; flex: none; }
.c6-say .cs-spot { display: none; }
.c6-say-b { font-size: .84rem; line-height: 1.35; }
:root[data-theme="dark"] .c6-say { background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important; }
@media (max-width: 760px) { .c6-say { border-radius: 14px !important; align-items: flex-start; } .c6-say-b { font-size: .8rem; } }
@media (min-width: 1281px) {
  .dh6-core .dh5-card { height: 100%; }
  .dh6-core .dh5-fig { flex: 1 1 auto; max-height: none; }
  .dh6-core .dh5-foot { margin-top: auto; }
  .dh6-core .dh5-grid { align-items: stretch; grid-auto-rows: 1fr; }
}
@media (min-width: 1281px) { .dh6-core .dh5-fig { flex: 0 0 36%; min-height: 90px; } }

/* ---------- Dokumentshjälpen v7: ljus och mjuk – Börja här → Dokumentshjälpens fyra steg → LinkedIn, med tydliga pilar ---------- */
.page.dh7 { max-width: 1320px; }
.app-user ~ main .page.dh7 { padding-top: 1.6rem; }
.dh7-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin: 0 150px 1.2rem 0; }
.dh7-head h1 { margin: 0 0 .25rem; font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -.025em; }
.dh7-head p { margin: 0; color: var(--ink-2); font-size: .92rem; max-width: 68ch; }
.dh7-prog { display: flex; align-items: center; gap: .55rem; padding: .35rem .85rem .35rem .35rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.dh7-prog .dh4-ring { width: 36px; height: 36px; }
.dh7-flow { display: grid; grid-template-columns: 190px 46px minmax(0, 1fr) 46px 170px; align-items: center; }
/* Stora mjuka pilar mellan delarna */
.dh7-arrow { position: relative; display: grid; place-items: center; height: 100%; }
.dh7-arrow i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #F3B98F 0 6px, transparent 6px 11px); }
.dh7-arrow svg { position: relative; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #FFF1E6; color: #E0560B; box-shadow: 0 0 0 4px var(--bg), 0 6px 14px -8px rgba(224, 86, 11, .6); }
/* Börja här och LinkedIn: ljusblå, mjuka kort */
.dh7-side { display: flex; flex-direction: column; gap: .55rem; padding: .9rem .85rem; border-radius: 20px; background: linear-gradient(180deg, #EEF4FB, #F8FAFD); border: 1px solid #DCE6F2; color: var(--ink); text-decoration: none; }
.dh7-bl { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #2B4A73; }
.dh7-bl span, .dh7-core-tag span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #2B4A73; color: #fff; font: 800 .72rem var(--display, var(--font)); letter-spacing: 0; }
.dh7-tx { margin: 0; color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
.dh7-btns { display: grid; gap: .35rem; }
.dh7-btn { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 11px; background: #fff; border: 1px solid #DCE6F2; color: #23406A; text-decoration: none; font-size: .8rem; font-weight: 650; transition: border-color .2s, transform .2s; }
.dh7-btn:hover { border-color: #9DB4D3; transform: translateX(2px); }
.dh7-btn .bi { width: 15px; height: 15px; flex: none; color: #E0560B; }
.dh7-li { border-style: dashed; border-color: #B7D0EC; transition: transform .2s, border-color .2s; }
.dh7-li:hover { transform: translateY(-2px); border-style: solid; }
.dh7-li strong { font-size: .95rem; }
.dh7-in { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #0A66C2; color: #fff; font: 800 1.1rem/1 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.dh7-go { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 10px; background: #0A66C2; color: #fff; font-size: .78rem; font-weight: 700; }
.dh7-go .bi { width: 14px; height: 14px; }
/* Dokumentshjälpen: en ljus ram med en blå etikett, fyra vita kort med små pilar emellan */
.dh7-core { position: relative; padding: 1.3rem .7rem .7rem; border-radius: 22px; background: linear-gradient(180deg, #FFF8F3, #FFFFFF 60%); border: 1.5px solid #F6D7C1; box-shadow: 0 14px 34px -26px rgba(224, 86, 11, .55); }
.dh7-core-tag { position: absolute; top: -14px; left: 16px; display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .8rem .3rem .3rem; border-radius: 999px; background: linear-gradient(135deg, #3A5274, #2B3F5A); color: #fff; font-size: .82rem; font-weight: 750; box-shadow: 0 8px 18px -10px rgba(30, 44, 62, .7); }
.dh7-core-tag span { background: #FF8A3D; }
.dh7-core-tag .bi { width: 15px; height: 15px; color: #FFB27A; }
.dh7-core-tag small { font-weight: 500; color: #C9D5E5; font-size: .74rem; }
.dh7-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); align-items: stretch; }
.dh7-chev { display: grid; place-items: center; color: #F0A26E; }
.dh7-chev svg { width: 15px; height: 15px; }
.dh7-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 32, 52, .04); transition: border-color .25s, box-shadow .25s, transform .25s; }
.dh7-card.is-hl { border-color: #F3B98F; box-shadow: 0 14px 28px -20px rgba(224, 86, 11, .6); transform: translateY(-2px); }
.dh7-now { border-color: #F3B98F; }
.dh7-fig { position: relative; display: grid; place-items: center; height: 86px; border-radius: 15px 15px 0 0; background: linear-gradient(180deg, #F3F6FA, #FAFBFD); }
.dh7-now .dh7-fig { background: linear-gradient(180deg, #FFF0E5, #FFF8F3); }
.dh7-fig .ill { height: 100%; width: auto; max-width: 100%; }
.dh7-ok { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A3D, #E0560B); color: #fff; }
.dh7-ok svg { width: 11px; height: 11px; }
.dh7-body { flex: 1; padding: .6rem .75rem .2rem; }
.dh7-t { display: flex; align-items: center; gap: .4rem; margin: 0; }
.dh7-n { background: linear-gradient(160deg, #FF8A3D, #E0560B); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 1.35rem/1 var(--display); }
.dh7-t em { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; background: #B4490D; color: #fff; }
.dh7-body h3 { margin: .2rem 0 .2rem; font-size: .98rem; }
.dh7-body h3 a { color: var(--ink); text-decoration: none; }
.dh7-p { margin: 0 0 .4rem; color: var(--ink-2); font-size: .78rem; line-height: 1.4; }
.dh7-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.dh7-body li { position: relative; padding-left: .9rem; font-size: .75rem; color: var(--ink-2); line-height: 1.35; }
.dh7-body li::before { content: ''; position: absolute; left: .1rem; top: .48em; width: 5px; height: 5px; border-radius: 50%; background: #F0A26E; }
.dh7-sub { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin: .35rem 0 0; font-size: .73rem; }
.dh7-sub a { color: var(--info); text-underline-offset: 3px; }
.dh7-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; padding: .45rem .75rem .65rem; }
.dh7-foot .btn { min-height: 28px; padding: .25rem .6rem; font-size: .76rem; }
.dh7-foot .dh4-st { font-size: .7rem; }
/* Rörelse: bilderna svävar, pilarna puffar fram, nästa steg andas */
@media (prefers-reduced-motion: no-preference) {
  .dh7 .ill .il-raise { animation: ilFloat2 3.6s ease-in-out infinite; transform-box: fill-box; }
  .dh7-card:nth-child(4n+3) .ill .il-raise { animation-delay: -1.8s; }
  .dh7 .ill .il-spark { animation: ilSpark 2s ease-in-out infinite; }
  .dh7 .ill .il-arrow { stroke-dasharray: 6 6; animation: ilDash 1.4s linear infinite; }
  .dh7 .ill .il-cursor { animation: ilClick 2.6s ease-in-out infinite; transform-box: fill-box; }
  .dh7-arrow svg { animation: dh7Push 2.4s ease-in-out infinite; }
  .dh7-flow > .dh7-arrow:nth-of-type(2) svg { animation-delay: 1.2s; }
  .dh7-arrow i { animation: dh7Dash 1.2s linear infinite; }
  .dh7-chev svg { animation: dh7Push 2.4s ease-in-out infinite; }
  .dh7-now { animation: dh5Glow 3s ease-in-out infinite; }
  .dh7-card, .dh7-side { animation: h4in .6s cubic-bezier(.2, .7, .3, 1) both; }
  .dh7-grid > .dh7-card:nth-child(3) { animation-delay: .1s; } .dh7-grid > .dh7-card:nth-child(5) { animation-delay: .2s; } .dh7-grid > .dh7-card:nth-child(7) { animation-delay: .3s; }
  .dh7-now { animation: h4in .6s cubic-bezier(.2, .7, .3, 1) .3s both, dh5Glow 3s ease-in-out 1s infinite; }
  .dh7-li { animation-delay: .4s; }
}
@keyframes dh7Push { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes dh7Dash { to { background-position: 11px 0; } }
:root[data-theme="dark"] .dh7-side { background: color-mix(in srgb, #3B6FB6 10%, var(--surface)); border-color: color-mix(in srgb, #3B6FB6 30%, var(--line)); }
:root[data-theme="dark"] .dh7-btn, :root[data-theme="dark"] .dh7-card { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .dh7-core { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
:root[data-theme="dark"] .dh7-fig { background: var(--sunk); }
:root[data-theme="dark"] .dh7-bl { color: #A9C2EA; }
@media (max-width: 1240px) {
  .dh7-flow { grid-template-columns: 1fr; }
  .dh7-arrow { height: 40px; } .dh7-arrow i { display: none; } .dh7-arrow svg { transform: rotate(90deg); animation: none !important; }
  .dh7-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .dh7-tx { flex: 1 1 260px; }
  .dh7-btns { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 1000px) { .dh7-grid { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); row-gap: .6rem; } .dh7-grid > .dh7-chev:nth-child(4) { display: none; } }
@media (max-width: 760px) {
  .dh7-head { margin-right: 0; }
  .dh7-grid { grid-template-columns: 1fr; } .dh7-chev { display: none !important; }
  .dh7-fig { display: none; }
  .dh7-btns { grid-template-columns: 1fr; width: 100%; }
  .dh7-core { padding: 1.4rem .5rem .5rem; }
}
.dh7-core-tag { font-family: var(--font); }
@media (min-width: 1241px) { .page.dh7 { padding-left: 1.8rem; padding-right: 1.8rem; max-width: 1400px; } .dh7-flow { grid-template-columns: 172px 40px minmax(0, 1fr) 40px 156px; } .dh7-head { margin-right: 140px; } }
/* Dokumentshjälpens ram i översiktens färger: blått som går över i persika */
.dh7-core { border: 0; background: radial-gradient(420px 220px at 92% 0%, rgba(255, 168, 105, .55), transparent 70%), radial-gradient(380px 200px at 0% 0%, rgba(255, 226, 196, .22), transparent 70%), linear-gradient(135deg, #5A7598 0%, #6F86A3 45%, #8F8E95 78%, #B08A6E 105%); box-shadow: 0 24px 48px -30px rgba(30, 44, 62, .7); padding-top: 1.5rem; }
.dh7-core-tag { background: #fff; color: #23406A; box-shadow: 0 10px 22px -12px rgba(30, 44, 62, .6); }
.dh7-core-tag .bi { color: #E0560B; }
.dh7-core-tag small { color: #5B6B82; }
.dh7-chev { color: #fff; }
.dh7-chev svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
.dh7-card { border-color: transparent; box-shadow: 0 10px 22px -16px rgba(20, 32, 52, .55); }
.dh7-card.is-hl { border-color: #FFB27A; }
.dh7-now { border-color: #FFB27A; }
.dh7-side { background: linear-gradient(160deg, #E9F0F8, #F7F9FC 70%); }
.dh7-start { background: radial-gradient(240px 140px at 100% 0%, rgba(255, 196, 150, .35), transparent 70%), linear-gradient(160deg, #E4ECF6, #F7F9FC 70%); }
.dh7-arrow svg { background: linear-gradient(135deg, #FF9A55, #E0560B); color: #fff; }
.dh7-arrow i { background: repeating-linear-gradient(90deg, #E9A276 0 6px, transparent 6px 11px); }

/* ---------- Jobbcoachen lättare och gladare: samma ljusa blå–persika som översikten ---------- */
.c6-hero { background: radial-gradient(420px 220px at 92% 0%, rgba(255, 168, 105, .55), transparent 70%), radial-gradient(380px 200px at 0% 0%, rgba(255, 226, 196, .22), transparent 70%), linear-gradient(135deg, #5A7598 0%, #6F86A3 45%, #8F8E95 78%, #B08A6E 105%); box-shadow: 0 20px 44px -30px rgba(30, 44, 62, .6); }
.c6-hero .c4-k { background: rgba(255, 255, 255, .2); color: #FFE2CC; }
.c6-hero h2 { font-size: 1.15rem; text-shadow: 0 1px 2px rgba(30, 44, 62, .25); }
.c6-hero .c4-more summary { color: #FFE2CC; }
.c6-kpis { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
.c6-kpis dt { color: #F1F4F8; }
.c6-kpis div + div { border-left-color: rgba(255, 255, 255, .25); }
.page.coach .mock-nudge { background: linear-gradient(90deg, #FFF3EA, #FFFFFF); border-color: #F6D7C1; }
.c6-panel { border-color: #E6EAF0; }
.c6-panel-h { background: #F7F9FC; }
.c6-panel-b .c4-item { border-left-width: 4px !important; box-shadow: none; }
.c6-panel-b .c4-item-h p { color: var(--muted) !important; }
.c6-panel-b .c4-acts label { font-size: .84rem !important; color: var(--ink-2); }
.c6-panel-b .c4-num { width: 28px; height: 28px; border-radius: 50%; background: #FFF1E6; color: #C2410C; font-size: .82rem; }
/* Pratbubblan: samma ljusa blå–persika, vit text – syns men är inte tung */
.cw-hello { background: linear-gradient(135deg, #5F7B9F 0%, #7A8EA8 55%, #B08A6E 110%) !important; box-shadow: 0 16px 36px -16px rgba(30, 44, 62, .55), 0 0 0 4px rgba(255, 178, 122, .22) !important; }
.cw-hello::after { background: #8C8E98 !important; }
.cw-hello-in small { color: #FFE2CC !important; }

/* Dokumentshjälpen: hela bredden, mer luft i Dokumentshjälpens del, snygga länkar till underdelarna */
@media (min-width: 1241px) {
  .page.dh7 { max-width: none; padding-left: 1.8rem; padding-right: 1.8rem; }
  .dh7-flow { grid-template-columns: minmax(180px, 13%) 48px minmax(0, 1fr) 48px minmax(170px, 12%); }
  .dh7-core { padding: 1.7rem 1rem 1rem; }
  .dh7-grid { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr); }
  .dh7-fig { height: 120px; }
  .dh7-body { padding: .8rem 1rem .3rem; }
  .dh7-n { font-size: 1.6rem; }
  .dh7-body h3 { font-size: 1.08rem; }
  .dh7-p { font-size: .84rem; }
  .dh7-body li { font-size: .8rem; }
  .dh7-foot { padding: .6rem 1rem .85rem; }
}
.dh7-sub { display: flex; flex-direction: column; gap: .25rem; margin: .7rem 0 0; padding: .55rem .6rem; border-radius: 12px; background: #F4F7FB; }
.dh7-sub > span { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dh7-sub a { display: flex; align-items: center; gap: .35rem; padding: .2rem .1rem; color: #23406A; text-decoration: none; font-size: .78rem; font-weight: 650; border-radius: 6px; transition: color .15s, transform .15s; }
.dh7-sub a .bi { width: 12px; height: 12px; color: #E0560B; flex: none; }
.dh7-sub a:hover { color: #C2410C; transform: translateX(2px); }
:root[data-theme="dark"] .dh7-sub { background: var(--sunk); }
:root[data-theme="dark"] .dh7-sub a { color: var(--ink); }
.dh7-now { animation: none !important; }
@media (min-width: 1241px) {
  .page.dh7 { padding-left: 1.1rem; padding-right: 1.1rem; }
  .dh7-flow { grid-template-columns: 158px 34px minmax(0, 1fr) 34px 150px; }
  .dh7-arrow svg { width: 30px; height: 30px; padding: 7px; }
  .dh7-core { padding: 1.6rem .8rem .8rem; }
  .dh7-grid { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); }
  .dh7-side { padding: .8rem .7rem; }
  .dh7-tx { font-size: .78rem; }
  .dh7-btn { font-size: .76rem; padding: .4rem .5rem; }
}
@media (min-width: 1600px) { .dh7-flow { grid-template-columns: 200px 46px minmax(0, 1fr) 46px 190px; } }

/* ---------- Dokumentshjälpen v8: stor orange rubrik med peppande text, lätta kort ---------- */
.dh8-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin: .4rem 140px 2.2rem 0; }
.dh8-hero-tx { max-width: 760px; }
.dh8-kick { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; padding: .25rem .75rem; border-radius: 999px; background: #FFF1E6; color: #B4490D; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dh8-kick .bi { width: 14px; height: 14px; }
.dh8-hero h1 { margin: 0 0 .7rem; font: 800 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1.08 var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.dh8-hero h1 span { background: linear-gradient(100deg, #E0560B, #FF8A3D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh8-pep { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.dh7-head { display: none; }
/* Lätta kort: bild, nummer, titel, en rad och knapp */
.dh7-p { font-size: .88rem !important; color: var(--ink-2); margin: .1rem 0 .5rem !important; }
.dh8-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.dh8-chips a { padding: .2rem .6rem; border-radius: 999px; background: #EEF3FA; color: #23406A; font-size: .74rem; font-weight: 650; text-decoration: none; transition: background .15s, color .15s; }
.dh8-chips a:hover { background: #FFF1E6; color: #B4490D; }
.dh7-core-tag { font-size: .88rem; }
@media (min-width: 1241px) {
  .dh7-fig { height: 140px; }
  .dh7-body h3 { font-size: 1.15rem; }
}
.dh7-flow { align-items: center; }
.dh7-grid { align-items: stretch; }
.dh7-card { min-height: 0; }
:root[data-theme="dark"] .dh8-kick { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
:root[data-theme="dark"] .dh8-chips a { background: var(--sunk); color: var(--ink); }
@media (max-width: 760px) {
  .dh8-hero { margin: 0 0 1.2rem; }
  .dh8-hero h1 { font-size: 1.6rem; }
  .dh8-pep { font-size: .9rem; }
}

/* ---------- Dokumentshjälpen v8.1: mjukare och rundare hörn, luftigare kort, inga hårda kanter ---------- */
.dh7-core { border-radius: 34px; padding: 1.8rem 1.1rem 1.1rem; background: radial-gradient(520px 260px at 95% 0%, rgba(255, 186, 136, .55), transparent 70%), linear-gradient(135deg, #7C95B6 0%, #8FA2BB 50%, #B9A08E 100%); }
.dh7-core-tag { top: -16px; left: 22px; padding: .35rem 1rem .35rem .35rem; font-size: .9rem; }
.dh7-core-tag span { width: 26px; height: 26px; }
.dh7-grid { gap: 0; }
.dh7-card { border: 0 !important; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 34px -24px rgba(20, 32, 52, .7); }
.dh7-card.is-hl { box-shadow: 0 0 0 3px rgba(255, 178, 122, .9), 0 22px 40px -24px rgba(224, 86, 11, .6); }
.dh7-fig { position: relative; border-radius: 0; background: linear-gradient(160deg, #F2F6FB, #FFF4EC); margin: 8px 8px 0; border-radius: 18px; }
.dh7-fig .ill { padding: 6px 0; }
.dh7-ok { top: 8px; right: 8px; width: 24px; height: 24px; box-shadow: 0 0 0 3px #fff; }
.dh7-body { padding: .75rem 1rem .2rem; }
.dh7-n { font-size: 1.3rem; }
.dh7-body h3 { margin: .15rem 0 .25rem; }
.dh8-chips a { border-radius: 999px; }
.dh7-foot { padding: .5rem 1rem 1rem; }
.dh7-foot .btn { border-radius: 999px; padding: .3rem .85rem; border: 0; background: #F1F4F8; box-shadow: none; }
.dh7-foot .btn:hover { background: linear-gradient(135deg, #FF9A55, #E0560B); color: #fff; }
.dh7-chev { color: #fff; opacity: .85; }
.dh7-side { border: 0 !important; border-radius: 30px; padding: 1.1rem 1rem; background: #fff; box-shadow: 0 16px 34px -26px rgba(20, 32, 52, .6); }
.dh7-start { background: radial-gradient(220px 140px at 100% 0%, rgba(255, 196, 150, .4), transparent 70%), #fff; }
.dh7-li { background: radial-gradient(220px 140px at 100% 0%, rgba(150, 190, 235, .35), transparent 70%), #fff; outline: 2px dashed #C9DCF1; outline-offset: -8px; }
.dh7-bl span, .dh7-core-tag span { background: linear-gradient(135deg, #FF9A55, #E0560B); }
.dh7-btn { border: 0; border-radius: 999px; background: #F1F5FA; padding: .45rem .75rem; }
.dh7-btn:hover { background: #FFF1E6; }
.dh7-in { border-radius: 14px; }
.dh7-go { border-radius: 999px; padding: .4rem .9rem; }
.dh7-arrow svg { width: 38px; height: 38px; padding: 9px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 8px 18px -8px rgba(224, 86, 11, .7); }
.dh7-arrow i { height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #F0A26E 0 4px, transparent 4px 10px); }
.dh8-hero h1 span { background: linear-gradient(100deg, #E0560B, #FF8A3D 70%); -webkit-background-clip: text; background-clip: text; }
.dh7-prog { border: 0; box-shadow: 0 10px 26px -18px rgba(30, 44, 62, .5); }
:root[data-theme="dark"] .dh7-side, :root[data-theme="dark"] .dh7-card { background: var(--surface); }
:root[data-theme="dark"] .dh7-fig { background: var(--sunk); }
:root[data-theme="dark"] .dh7-foot .btn, :root[data-theme="dark"] .dh7-btn { background: var(--sunk); color: var(--ink); }
@media (min-width: 1241px) { .dh7-flow { grid-template-columns: 168px 56px minmax(0, 1fr) 56px 156px; } }
@media (min-width: 1600px) { .dh7-flow { grid-template-columns: 210px 64px minmax(0, 1fr) 64px 200px; } }
/* Mer luft i Dokumentshjälpens ram */
@media (min-width: 761px) { .dh7-core { padding: 2.2rem 1.6rem 1.6rem; border-radius: 38px; } .dh7-core-tag { left: 28px; } }
@media (min-width: 1241px) { .dh7-grid { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); } }

/* ---------- Dokumentshjälpen: levande bild i rubriken ---------- */
.dh10-art { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.dh10 { width: 300px; height: auto; overflow: visible; }
.dh10 .h-card { fill: #fff; filter: drop-shadow(0 8px 14px rgba(30, 44, 62, .18)); }
.dh10 .h-ink { fill: #2B3F5A; }
.dh10 .h-line { fill: #D6DDE7; }
.dh10 .h-road { stroke: #F0B48A; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.dh8-hero { align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .dh10 .h-road { animation: dh9Walk 1.4s linear infinite; }
  .dh10 .h-base { animation: hBob 4s ease-in-out infinite; transform-box: fill-box; }
  .dh10 .h-doc { offset-rotate: 0deg; opacity: 0; animation: hFly 4.5s cubic-bezier(.45, .05, .35, 1) infinite; }
  .dh10 .h-d0 { offset-path: path('M118 112 C 170 112, 190 50, 262 46'); }
  .dh10 .h-d1 { offset-path: path('M118 112 C 180 112, 200 112, 262 112'); animation-delay: 1.5s; }
  .dh10 .h-d2 { offset-path: path('M118 112 C 170 112, 190 176, 262 178'); animation-delay: 3s; }
  .dh10 .h-ok { transform-box: fill-box; transform-origin: center; animation: hPop 4.5s ease-in-out infinite; }
  .dh10 .h-j1 .h-ok { animation-delay: 1.5s; } .dh10 .h-j2 .h-ok { animation-delay: 3s; }
  .dh10 .h-job { transform-box: fill-box; }
  .dh10 .h-job > rect:first-child { animation: hBump 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .dh10 .h-j1 > rect:first-child { animation-delay: 1.5s; } .dh10 .h-j2 > rect:first-child { animation-delay: 3s; }
  .dh10 .h-spark path { animation: ilSpark 1.8s ease-in-out infinite; }
  .dh10 .h-spark path:nth-child(2) { animation-delay: .3s; } .dh10 .h-spark path:nth-child(3) { animation-delay: .6s; }
}
@media (prefers-reduced-motion: reduce) { .dh10 .h-doc { display: none; } }
@keyframes hFly { 0% { offset-distance: 0%; opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1); } 45% { offset-distance: 100%; opacity: 1; transform: scale(.9); } 52%, 100% { offset-distance: 100%; opacity: 0; transform: scale(.5); } }
@keyframes hPop { 0%, 42% { transform: scale(0); } 50% { transform: scale(1.3); } 56%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes hBump { 0%, 42%, 60%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes hBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
:root[data-theme="dark"] .dh10 .h-card { fill: var(--surface); }
:root[data-theme="dark"] .dh10 .h-ink { fill: var(--ink); }
:root[data-theme="dark"] .dh10 .h-line { fill: var(--line-2); }
@media (max-width: 1100px) { .dh10 { width: 240px; } }
@media (max-width: 760px) { .dh10-art { width: 100%; } .dh10 { width: 220px; } }
@media (min-width: 1000px) {
  .dh8-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-right: 0; margin-top: .9rem; }
  .dh8-hero-tx { max-width: 720px; }
  .dh10 { width: 290px; }
}
@media (min-width: 1000px) { .dh10-art { padding: 2.4rem 1.2rem 0 0; } .dh10 { width: 270px; } }
/* Dokumentshjälpen kortare: ryms utan att skrolla */
@media (min-width: 1000px) {
  .app-user ~ main .page.dh7 { padding-top: 1rem; padding-bottom: 1rem; }
  .dh8-hero { margin: .3rem 0 1.5rem; }
  .dh8-kick { margin-bottom: .35rem; }
  .dh8-hero h1 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); margin-bottom: .5rem; }
  .dh8-pep { font-size: .98rem; max-width: 62ch; }
  .dh10-art { padding: 1.4rem 1.2rem 0 0; }
  .dh10 { width: 250px; }
  .dh7-fig { height: 104px !important; }
  .dh7-body { padding-top: .55rem; }
  .dh7-core { padding-top: 1.9rem; padding-bottom: 1.3rem; }
}
@media (min-width: 1000px) { .app-user ~ main .page.dh7 { padding-top: 2.2rem; } .dh8-hero { margin-bottom: 2.6rem; } .dh10-art { padding-top: 2rem; } }
/* Bild: någon skriver med penna på papper, coachen hjälper, färdiga blad flyger iväg */
.dh11 .w-card { fill: #fff; }
.dh11 .w-line { fill: #D6DDE7; }
.dh11 .w-l3 { fill: #D6DDE7; }
.dh11 .w-desk { fill: #C9B5A4; }
.dh11 .w-floor { fill: rgba(30, 44, 62, .12); }
.dh11 .w-card { filter: drop-shadow(0 6px 10px rgba(30, 44, 62, .15)); }
@media (prefers-reduced-motion: no-preference) {
  .dh11 .w-arm { transform-box: view-box; transform-origin: 128px 120px; animation: wWrite 1.2s ease-in-out infinite; }
  .dh11 .w-l1, .dh11 .w-l2, .dh11 .w-l3 { transform-box: fill-box; transform-origin: left; animation: wLine 4.8s ease-in-out infinite; }
  .dh11 .w-l2 { animation-delay: .4s; } .dh11 .w-l3 { animation-delay: .8s; }
  .dh11 .w-writer { transform-box: view-box; transform-origin: 106px 150px; animation: csNod 3.6s ease-in-out infinite; }
  .dh11 .w-point { transform-box: view-box; transform-origin: 236px 120px; animation: wPoint 2.4s ease-in-out infinite; }
  .dh11 .w-helper { transform-box: view-box; transform-origin: 258px 150px; animation: csSway 4.2s ease-in-out infinite; }
  .dh11 .w-idea { transform-box: fill-box; transform-origin: 50% 100%; animation: wIdea 4.8s ease-in-out infinite; }
  .dh11 .w-spark path { animation: ilSpark 1.6s ease-in-out infinite; }
  .dh11 .w-spark path:nth-child(2) { animation-delay: .3s; } .dh11 .w-spark path:nth-child(3) { animation-delay: .6s; }
  .dh11 .w-fly { opacity: 0; offset-rotate: 0deg; animation: wFly 4.8s ease-in infinite; }
  .dh11 .w-f0 { offset-path: path('M180 118 C 230 70, 280 60, 330 20'); animation-delay: 1.4s; }
  .dh11 .w-f1 { offset-path: path('M180 118 C 240 90, 290 90, 345 70'); animation-delay: 3s; }
  .dh11 .w-f2 { offset-path: path('M180 118 C 220 60, 250 30, 300 0'); animation-delay: 4.4s; }
}
@media (prefers-reduced-motion: reduce) { .dh11 .w-fly { display: none; } }
@keyframes wWrite { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-3deg) translateX(3px); } 50% { transform: rotate(1deg) translateX(6px); } 75% { transform: rotate(-2deg) translateX(2px); } }
@keyframes wLine { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes wPoint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes wIdea { 0%, 15% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 32%, 80% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }
@keyframes wFly { 0% { offset-distance: 0%; opacity: 0; transform: scale(.5); } 10% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; transform: scale(.8) rotate(12deg); } }
:root[data-theme="dark"] .dh11 .w-card { fill: var(--surface); }
/* Stegblocket längst ner på sidan */
@media (min-width: 1000px) {
  .page.dh7 { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; }
  .page.dh7 > .dh7-flow { margin-top: auto; }
  .dh10 { width: 300px; }
}
@media (min-width: 1000px) { .dh11 { width: 400px; } .dh10-art { padding-top: 1rem; } } @media (min-width: 1600px) { .dh11 { width: 480px; } }
/* Dokumentshjälpen: rubrik och bild centrerade ihop, stegblocket med luft under */
@media (min-width: 1000px) {
  .page.dh7 { justify-content: center; gap: 2.6rem; padding-bottom: 2.4rem !important; }
  .page.dh7 > .dh7-flow { margin-top: 0; }
  .dh8-hero { margin: 0 !important; align-items: center; }
  .dh10-art { padding: 0 1.4rem 0 0 !important; align-self: center; }
  .dh11 { width: 340px; }
}
@media (min-width: 1600px) { .dh11 { width: 400px; } }
/* Bilden en bit lägre och längre in mot mitten */
@media (min-width: 1000px) { .dh10-art { padding: 3.2rem 7rem 0 0 !important; } }
@media (min-width: 1600px) { .dh10-art { padding-right: 10rem !important; } }
/* Rubrik centrerad ovanför Dokumentshjälpens ram i stället för etiketten */
.dh7-core-tag { position: absolute; top: auto; bottom: 100%; left: 0; right: 0; margin: 0 0 .45rem; padding: 0; background: none !important; box-shadow: none !important; display: block; text-align: center; color: #2B3F5A; font: 800 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.dh7-flow { padding-top: 1.8rem; }
:root[data-theme="dark"] .dh7-core-tag { color: var(--ink); }
/* Hela sidan lite åt vänster, vanliga pilar mellan delarna, bilden närmare texten */
@media (min-width: 1000px) {
  .page.dh7 { padding-left: .8rem !important; padding-right: 4.5rem !important; }
  .dh8-hero { grid-template-columns: minmax(0, 700px) auto; justify-content: start; column-gap: 2.5rem; }
  .dh10-art { padding: 2.6rem 0 0 0 !important; }
}
.dh7-arrow i { display: none; }
.dh7-arrow svg { width: 36px !important; height: 36px !important; padding: 0 !important; background: none !important; box-shadow: none !important; color: #E0560B; stroke-width: 2.4; }
.dh7-core-tag { font-size: 1.6rem !important; margin-bottom: .6rem !important; letter-spacing: -.02em; } .dh7-flow { padding-top: 2.6rem; }
/* Ramens nederkant i linje med menyns nederkant */
@media (min-width: 1000px) {
  .page.dh7 { justify-content: flex-start; gap: 0; padding-bottom: 14px !important; height: 100vh; min-height: 640px; }
  .page.dh7 > .dh8-hero { margin: auto 0 !important; }
  .page.dh7 > .dh7-flow { margin-top: 0; }
}
@media (min-width: 1000px) { .page.dh7 { padding-bottom: 52px !important; } }
/* Hela stegkortet är klickbart (rubriklänken täcker kortet), länkarna i kortet ligger ovanpå */
.dh7-card { position: relative; cursor: pointer; }
.dh7-body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dh7-card .dh8-chips a, .dh7-card .dh7-foot a, .dh7-card .dh7-fig { position: relative; z-index: 2; }
.dh7-card:hover .dh7-body h3 a { color: #C2410C; }
.dh7-body h3 a:focus-visible { outline: none; }
.dh7-card:focus-within { box-shadow: 0 0 0 3px rgba(255, 178, 122, .9), 0 22px 40px -24px rgba(224, 86, 11, .6); }
/* Öppna: orange */
.dh7-foot .btn { background: linear-gradient(135deg, #FF9A55, #E0560B) !important; color: #fff !important; box-shadow: 0 8px 16px -10px rgba(224, 86, 11, .8) !important; }
.dh7-foot .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (min-width: 1000px) { .page.dh7 { padding-bottom: 128px !important; } }
@media (min-width: 1000px) { .page.dh7 { padding-right: 8rem !important; } }
.dh8-chips a { white-space: nowrap; }
@media (min-width: 1000px) { .page.dh7 { padding-bottom: 128px !important; } }
/* Min kalender: knapparna i sidhuvudet ovanpå varandra, samma avstånd som rutorna under */
.calpage .page-actions { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.calpage .page-actions .btn { justify-content: flex-start; }
@media (max-width: 760px) { .calpage .page-actions { flex-direction: row; gap: .5rem; } }
@media (min-width: 1101px) { .calpage .page-actions { width: 300px; } .calpage .page-actions .btn { justify-content: center; } }
/* Menyn: huvudvalen i fet stil */
.rail li:not(.sub) > a .nl, .rail li:not(.sub) > a > span:not(.ns):not(.stn):not(.sr), .rail .nav-g.fold > button > span:not(.stn):not(.sr) { font-weight: 800; letter-spacing: -.005em; }
.rail .nav-foot li > a > span { font-weight: 600; }
.rail li.stn-li.has-add > a .ns { font-weight: 800; }
.rail ul.nav-foot li:not(.sub) > a > span { font-weight: 600; }
/* Så här gör du: alla sju kort lika stora (4 + 3, centrerade) och bandet i linje med menyn */
@media (min-width: 981px) {
  .how-page { padding-top: 14px !important; }
  .how-page .steps3.how4b { margin-top: 0; min-height: calc(100vh - 28px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .how4b .how4-grid { justify-content: center; }
  .how4b .how4-card { flex: 0 0 calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; }
  .how4b .how4-card figure .ill { max-height: 104px; }
  .how4b .how4-card > div { padding: .75rem .95rem .9rem; }
  .how4b .s3-h { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: .5rem; }
  .how4b .s3-sub { margin-bottom: 1.3rem; }
  .how4b .s3-pill { margin-bottom: .8rem; }
}
@media (min-width: 981px) { .how-page .steps3.how4b { align-items: center; } .how-page .steps3.how4b > * { align-self: stretch; } .how-page .steps3.how4b > .s3-pill { align-self: center; } .how-page .steps3.how4b > .s3-arc, .how-page .steps3.how4b > .s3-orbs { align-self: auto; } .how-page { padding-right: 4.5rem !important; } }
/* Alla övermenyer i fet stil och samma färg */
@media (min-width: 861px) {
  .rail ul.nav-main > li:not(.sub):not(.fold-box) > a, .rail ul.path-ul > li:not(.sub):not(.fold-box) > a, .rail .nav-g.fold > button { font-weight: 700 !important; color: #F1F4F9 !important; }
}

/* ---------- Jobbsmed i mobilen v2: text och steg till vänster, en levande telefon till höger ---------- */
.in2 { max-width: 1200px; }
.in2-band { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: center; padding: 2rem 2.2rem; border-radius: 34px; background: radial-gradient(520px 260px at 95% 0%, rgba(255, 186, 136, .5), transparent 70%), linear-gradient(135deg, #E6EDF6 0%, #EEF0F4 55%, #F6E8DE 100%); box-shadow: 0 20px 44px -34px rgba(30, 44, 62, .55); }
.in2-left h1 { margin: 0 0 .5rem; font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--display); letter-spacing: -.035em; color: var(--ink); }
.in2-left h1 span { background: linear-gradient(100deg, #E0560B, #FF8A3D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.in2-lead { margin: 0 0 1rem; font-size: 1.02rem; color: var(--ink-2); max-width: 54ch; }
.in2-why { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .45rem; }
.in2-why li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink); }
.in2-why li > span { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #E0560B; box-shadow: 0 4px 12px -8px rgba(30, 44, 62, .5); }
.in2-why li > span svg { width: 16px; height: 16px; }
.in2-how { max-width: 560px; }
.in2 .inst-tabs { background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 4px; }
.in2 .inst-tabs button { border-radius: 999px; padding: .45rem 1rem; }
.in2 .inst-pane { border: 0; border-radius: 22px; box-shadow: 0 14px 30px -24px rgba(30, 44, 62, .6); }
.in2 .inst-qr { grid-template-columns: 140px 1fr; }
.in2 .inst-qr-box { width: 140px; height: 140px; border: 0; }
.in2 .inst-ic { border-radius: 50%; }
.in2 .inst-steps li:last-child .inst-n { background: linear-gradient(135deg, #FF9A55, #E0560B); color: #fff; }
/* Telefonen */
.in2-right { display: grid; place-items: center; }
.in2-phone { position: relative; width: 250px; aspect-ratio: 9 / 18.5; padding: 10px; border-radius: 40px; background: linear-gradient(160deg, #3A5274, #22324A); box-shadow: 0 30px 60px -30px rgba(20, 32, 52, .8), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.in2-notch { position: absolute; top: 16px; left: 50%; width: 70px; height: 18px; border-radius: 10px; background: #1A2638; transform: translateX(-50%); z-index: 2; }
.in2-screen { position: relative; height: 100%; overflow: hidden; border-radius: 30px; padding: 2.2rem .75rem .75rem; display: flex; flex-direction: column; gap: .5rem; background: linear-gradient(180deg, #F7F4F0, #EEF2F7); }
.in2-top { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink); }
.in2-logo img { width: 20px; height: 20px; border-radius: 6px; display: block; }
.in2-top i { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: #E3D3C6; }
.in2-hi { padding: .6rem .7rem; border-radius: 16px; color: #fff; background: radial-gradient(140px 80px at 100% 0%, rgba(255, 168, 105, .55), transparent 70%), linear-gradient(135deg, #5A7598, #8F8E95 80%, #B08A6E); }
.in2-hi small { display: block; font-size: .62rem; color: #FFE2CC; }
.in2-hi strong { display: block; font-size: .8rem; line-height: 1.25; }
.in2-card { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px -12px rgba(30, 44, 62, .6); }
.in2-card b { display: block; font-size: .72rem; color: var(--ink); }
.in2-card small { display: block; font-size: .6rem; color: var(--muted); }
.in2-ic { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #FF9A55, #E0560B); color: #fff; }
.in2-ic.soft { background: #FFF1E6; color: #E0560B; }
.in2-ic svg { width: 14px; height: 14px; }
.in2-first { outline: 2px solid rgba(255, 138, 61, .45); }
.in2-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: .45rem; border-radius: 14px; background: #fff; }
.in2-week span { display: grid; justify-items: center; padding: .2rem 0; border-radius: 8px; font-size: .55rem; color: var(--muted); }
.in2-week span b { font-size: .7rem; color: var(--ink); }
.in2-week span i { width: 4px; height: 4px; border-radius: 50%; background: #E0560B; }
.in2-week span.on { background: #B4490D; color: #fff; } .in2-week span.on b { color: #fff; } .in2-week span.on i { background: #fff; }
.in2-tabs { margin-top: auto; display: flex; justify-content: space-around; align-items: center; padding: .45rem .3rem; border-radius: 16px; background: #fff; }
.in2-tabs i { width: 16px; height: 16px; border-radius: 5px; background: #DCE2EA; }
.in2-tabs i.on { background: #FFD9C0; }
.in2-tabs i.add { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #FF9A55, #E0560B); }
.in2-tap { position: absolute; left: 62%; top: 44%; width: 26px; height: 26px; border-radius: 50%; background: rgba(224, 86, 11, .25); box-shadow: 0 0 0 2px rgba(224, 86, 11, .5); pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .in2-phone { animation: in2Float 5s ease-in-out infinite; }
  .in2-first { animation: in2Glow 2.8s ease-in-out infinite; }
  .in2-tap { animation: in2Tap 2.8s ease-in-out infinite; }
  .in2-week span.on { animation: in2Pulse 2.8s ease-in-out infinite; }
  .in2-band > * { animation: h4in .6s cubic-bezier(.2, .7, .3, 1) both; }
  .in2-right { animation-delay: .15s !important; }
}
@keyframes in2Float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes in2Glow { 0%, 100% { outline-color: rgba(255, 138, 61, .25); } 50% { outline-color: rgba(255, 138, 61, .8); } }
@keyframes in2Tap { 0%, 30% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes in2Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
:root[data-theme="dark"] .in2-band { background: color-mix(in srgb, #3B6FB6 12%, var(--surface)); }
:root[data-theme="dark"] .in2-why li > span { background: var(--surface); }
@media (max-width: 960px) { .in2-band { grid-template-columns: 1fr; } .in2-right { order: -1; } .in2-phone { width: 200px; } }
@media (max-width: 760px) { .in2-band { padding: 1.2rem 1rem; border-radius: 24px; gap: 1.2rem; } .in2-right { display: none; } .in2 .inst-qr { grid-template-columns: 1fr; } }