/**
 * Via Rapport UI — Via Energi tokens + refined type scale
 */

:root {
  /* ── Neutraler ──────────────────────────────────────────
     Nästan neutralt grått med en aning kyla. Den gamla paletten
     var blåtonad hela vägen, vilket gjorde att allt drog åt marin
     och att accentfärgen aldrig fick sticka ut. */
  --n-0:   0 0% 100%;      /* surface #FFFFFF */
  --n-25:  220 33% 99%;
  --n-50:  214 21% 94%;    /* canvas #EBEEF2 */
  --n-100: 220 23% 97%;    /* surface-2 #F7F8FA */
  --n-200: 220 22% 92%;    /* hairline #E6E9EF */
  --n-300: 220 12% 82%;
  --n-400: 220 9% 63%;
  --n-500: 220 8% 48%;
  --n-600: 220 10% 38%;
  --n-700: 220 14% 26%;
  --n-900: 222 30% 12%;

  /* ── Accent ─────────────────────────────────────────────
     EN accent, använd sparsamt: primär åtgärd, aktivt läge, fokus.
     Rubriker och ikoner är neutrala — de var tidigare blå allihop. */
  --primary: 243 75% 59%;        /* #4F46E5 */
  --primary-dark: 244 55% 41%;   /* #3730A3 */
  --primary-glow: 245 58% 51%;   /* #4338CA */
  --primary-soft: 244 67% 95%;   /* #ECEBFB */
  /* Fyllda ytor med vit text. Skild från --primary, som i mörkt läge måste
     vara LJUS för att synas som text — och då blir vit text ovanpå den bara
     3.31:1. Solid-varianten hålls mörk i båda lägena. */
  --primary-solid: 243 75% 59%;        /* #4F46E5, vit text 6.29:1 */
  --primary-solid-hover: 245 58% 51%;  /* #4338CA, vit text 7.90:1 */

  /* ── Semantik ───────────────────────────────────────────
     Varje steg får en egen ton så pipen går att skanna med ögat.
     Tidigare var alla stegchips samma bleka blå. */
  --stage-inbox:     220 9% 46%;
  --stage-screening:  38 92% 45%;
  --stage-interview: 262 72% 58%;
  --stage-offer:     224 76% 52%;
  --stage-hired:     160 70% 36%;
  --stage-rejected:  350 74% 52%;
  /* Textvarianter — samma kulör men mörk nog för WCAG AA (4,5:1) på ljus
     yta. Bärnsten låg på 2,6:1 och grönt på 3,5:1 som ren dekorfärg. */
  --stage-inbox-ink:     220 10% 40%;
  --stage-screening-ink:  38 100% 28%;
  --stage-interview-ink: 262 62% 46%;
  --stage-offer-ink:     224 76% 46%;
  --stage-hired-ink:     162 85% 24%;
  --stage-rejected-ink:  350 72% 42%;

  --secondary: 160 70% 36%;
  --secondary-dark: 162 72% 28%;
  --accent-orange: 30 95% 50%;
  --destructive: 350 74% 52%;

  /* Vit text ligger ovanpå den här (trattstaplarna). --primary är ljus i
     mörkt läge och gav 3.14:1 — solid-varianten håller i båda lägena. */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary-solid)) 0%, hsl(262 62% 46%) 100%);
  --gradient-energy: var(--gradient-primary);
  --gradient-surface: none;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px hsl(var(--n-900) / 0.05);
  --shadow-md: 0 16px 40px -16px hsl(var(--n-900) / 0.22);
  --shadow-focus: 0 0 0 3px hsl(var(--primary) / 0.25);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typografi ──────────────────────────────────────────
     En familj, men verklig viktkontrast. Tidigare låg allt kring
     samma grad och vikt, så inget ledde ögat. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: var(--font);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Skalan saknade allt under 12px, vilket är varför åtta olika
     mikrostorlekar uppfunnits ad hoc runt om i CSS:en. */
  --text-3xs: 0.625rem;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --sidebar: 244px;
  /* Radierna definieras EN gång, i designrevisionen längre ned. Tidigare
     stod 12/9/16 här och 14/10/18 där — samma token med två värden, vilket
     gav kort med olika hörn beroende på vilken regel som råkade vinna. */

  /* ── Alias ──────────────────────────────────────────── */
  --bg: hsl(var(--n-50));
  --surface: hsl(var(--n-0));
  --surface-2: hsl(var(--n-50));
  --surface-accent: hsl(var(--primary-soft));
  --bg-card: var(--surface);
  --bg-hover: hsl(var(--n-100));
  --track: hsl(var(--n-200));
  --border: hsl(var(--n-200));
  --border-soft: hsl(var(--n-100));
  --text: hsl(var(--n-900));
  --text-soft: hsl(var(--n-600));
  --text-muted: hsl(220 10% 40%);   /* 44% mätte 4.37:1 på .stage-lab */
  --ok: hsl(var(--secondary));
  --warn: hsl(var(--accent-orange));
  --danger: hsl(var(--destructive));

  /* Bakåtkompatibla namn som resten av filerna fortfarande refererar */
  --neutral-50: var(--n-50);
  --neutral-100: var(--n-100);
  --neutral-200: var(--n-200);
  --neutral-400: var(--n-400);
  --neutral-500: var(--n-500);
  --neutral-700: var(--n-700);
  --neutral-900: var(--n-900);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════
   Mörkt läge — samma system, andra värden.
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --n-0:   224 20% 13%;
  --n-25:  224 22% 11%;
  --n-50:  225 24% 9%;
  --n-100: 223 18% 18%;
  --n-200: 222 16% 24%;
  --n-300: 220 14% 32%;
  --n-400: 220 11% 52%;
  --n-500: 220 12% 66%;
  --n-600: 220 15% 78%;
  --n-700: 220 20% 88%;
  --n-900: 220 35% 97%;

  --primary: 222 90% 70%;
  --primary-dark: 220 95% 80%;
  --primary-glow: 224 92% 72%;
  --primary-soft: 224 45% 22%;
  --primary-solid: 222 90% 54%;        /* vit text: 5.26:1 */
  --primary-solid-hover: 222 88% 48%;  /* vit text: 6.40:1 */

  --stage-inbox:     220 10% 62%;
  --stage-screening:  38 92% 62%;
  --stage-interview: 262 78% 72%;
  --stage-offer:     222 90% 68%;
  --stage-hired:     158 64% 52%;
  --stage-rejected:  350 82% 66%;
  /* På mörk yta klarar grundtonerna kravet — ink = samma värde. */
  /* Bläcket får inte alias:a tonen. Chipen lägger texten på en 12%-ton av
     samma färg, vilket sänker kontrasten — mätt 4.05:1 för stegpillret. Här
     ligger bläcket några steg ljusare än fyllnaden. */
  --stage-inbox-ink:     220 12% 74%;
  --stage-screening-ink:  38 92% 70%;
  --stage-interview-ink: 262 80% 78%;
  --stage-offer-ink:     222 90% 76%;
  --stage-hired-ink:     158 62% 62%;
  --stage-rejected-ink:  350 82% 74%;
  --text-muted: hsl(var(--n-500));

  --secondary: 158 64% 52%;
  --secondary-dark: 158 60% 62%;
  --accent-orange: 32 95% 62%;
  --destructive: 350 82% 66%;

  --bg: hsl(var(--n-50));
  --surface: hsl(224 20% 13%);
  --surface-2: hsl(223 19% 16%);
  --surface-accent: hsl(224 45% 22%);
  --bg-hover: hsl(222 17% 21%);
  --track: hsl(222 16% 26%);
  --border: hsl(222 16% 24%);
  --border-soft: hsl(223 18% 19%);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 16px 40px -16px hsl(0 0% 0% / 0.7);
  --shadow-focus: 0 0 0 3px hsl(var(--primary) / 0.35);
  color-scheme: dark;
}

/* Respektera användarens val att slippa rörelse (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: var(--leading-normal);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "kern";
}

body {
  /* font-size hör hemma här, inte i "html, body". Där träffade den även
     roten, så rem-basen blev 0.875 × 16 = 14px — och body-regelns egna
     0.875rem löstes sedan mot den nya roten och gav 12.25px. Hela
     typskalan renderades alltså 12.5% för liten, två gånger om. */
  font-size: var(--text-base);
  background: var(--gradient-surface);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: hsl(var(--primary-dark));
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; line-height: var(--leading-relaxed); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 500;
  background: hsl(var(--neutral-100));
  color: hsl(var(--primary-dark));
  padding: 0.12em 0.4em;
  border-radius: 5px;
  border: 1px solid var(--border);
}

:where(a, button, input, select, textarea):focus-visible {
  /* Fokus måste ritas med outline, inte box-shadow. Regeln ligger i :where()
     och har därför NOLL specificitet — varje komponent med egen box-shadow
     (t.ex. .btn.primary) raderade fokusringen helt. outline rör de inte. */
  outline: 3px solid hsl(var(--primary));
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Hoppa till innehåll (tangentbord) */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 10000;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  background: hsl(var(--primary));
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top 0.15s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

.hidden { display: none !important; }
.block { width: 100%; display: block; text-align: center; }
.form-error {
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: var(--space-2) 0;
}

/* Notiser */
.notif-bell {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  width: 40px;
  height: 38px;
  cursor: pointer;
  font-size: var(--text-lg);
  display: grid;
  place-items: center;
  transition: border-color 0.15s, background 0.15s;
}
.notif-bell:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.04);
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: #fff;
  font-size: var(--text-3xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.notis-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.notis-card.unread {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.04);
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}
.notis-card h3 {
  font-size: var(--text-md);
  margin: 4px 0 6px;
}
.notis-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notis-kind {
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--primary));
}
.notis-body {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  margin: 8px 0 10px;
  color: hsl(var(--neutral-700));
}
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); line-height: var(--leading-snug); }
.mt { margin-top: var(--space-5); }
.mb { margin-bottom: var(--space-5); }

/* ——— Login ——— */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(ellipse 80% 55% at 0% -10%, hsl(var(--primary) / 0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 110%, hsl(var(--secondary) / 0.1), transparent 50%),
    var(--gradient-surface);
}

.login-card {
  width: min(400px, 100%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--neutral-200) / 0.9);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md), 0 0 0 1px hsl(var(--primary) / 0.03);
}

.login-card h1 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
}

.login-card > .muted {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.login-brand { margin-bottom: var(--space-1); }
.login-hint {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
}

/* ——— Shell ——— */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 hsl(var(--primary) / 0.02);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 12px hsl(var(--primary) / 0.28);
}

.brand-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  color: hsl(var(--primary-dark));
  line-height: 1.2;
}

.brand-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 1px;
}

.project-picker {
  padding: 0 var(--space-2);
}

.tiny-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-1);
}

.nav-group {
  margin-bottom: 12px;
}

.nav-group-title {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 12px 6px;
}

.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 14px;
  padding-left: 10px;
  border-left: 2px solid hsl(var(--primary) / 0.15);
}

.nav-sub-item {
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.nav-sub-item:hover {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: hsl(var(--neutral-500));
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nav-item:hover {
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
}

.nav-item:focus {
  outline: none;
}
.nav-item:focus-visible {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  box-shadow: var(--shadow-focus);
}

.nav-item.active {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: 600;
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}
.nav-item.active:focus-visible {
  box-shadow: inset 3px 0 0 hsl(var(--primary)), var(--shadow-focus);
}

.nav-icon {
  width: 1.1rem;
  font-size: var(--text-base);
  opacity: 0.75;
  text-align: center;
}

.sidebar-foot {
  padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--border-soft);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  background: hsl(var(--neutral-100));
  border: 1px solid var(--border);
  color: hsl(var(--neutral-700));
  letter-spacing: -0.01em;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.dot.warn { background: var(--warn); }
.dot.ok { background: var(--ok); }

/* ——— Main ——— */
.main {
  padding: var(--space-6) var(--space-8) 3.5rem;
  max-width: 1120px;
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.topbar h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.topbar .muted,
#page-sub {
  margin-top: 6px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 42rem;
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.view-as-top {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 168px;
}

.view-as-top .input {
  min-width: 176px;
  font-size: var(--text-sm);
  padding: 8px 11px;
  height: 38px;
}

.view-as-banner {
  flex: 1 1 100%;
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: hsl(var(--accent-orange) / 0.08);
  border: 1px solid hsl(var(--accent-orange) / 0.28);
  color: hsl(24 70% 28%);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
}

body.view-as-active .sidebar {
  box-shadow: inset 3px 0 0 hsl(var(--accent-orange));
}

.crumb {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 6px;
}

/* Views */
.view { display: none; animation: fadeIn 0.22s var(--ease); }
.view.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Grid & cards */
.grid { display: grid; gap: var(--space-4); }
.grid.cards-4 { grid-template-columns: repeat(4, 1fr); }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-head h2,
.card h3 {
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.card.stat {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) var(--space-5);
}

.card.stat::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--primary) / 0.12), transparent 70%);
  pointer-events: none;
}

.stat-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.badge {
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.2;
}

.badge.draft {
  color: hsl(24 75% 32%);
  border-color: hsl(var(--accent-orange) / 0.3);
  background: hsl(var(--accent-orange) / 0.08);
}

.badge.live {
  color: hsl(var(--secondary-dark));
  border-color: hsl(var(--secondary) / 0.3);
  background: hsl(var(--secondary) / 0.08);
}

/* Buttons */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  min-height: 38px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn.primary {
  background: hsl(var(--primary-solid));
  color: #fff;
  box-shadow: 0 2px 8px hsl(var(--primary-solid) / 0.25);
}

.btn.primary:hover:not(:disabled) {
  background: hsl(var(--primary-solid-hover));
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.3);
}

.btn.ghost {
  background: var(--surface);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.28);
}

.btn.ghost:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.5);
}

/* Destruktiv huvudåtgärd (avslå, ta bort, arkivera).
   Saknades — dialoger med confirmKind:"danger" föll tillbaka på
   basknappens gråa yta och såg ut som inaktiverade. */
.btn.danger {
  background: hsl(var(--destructive));
  color: #fff;
  border-color: hsl(var(--destructive));
  box-shadow: 0 2px 8px hsl(var(--destructive) / 0.25);
}
.btn.danger:hover:not(:disabled) {
  background: hsl(var(--destructive) / 0.88);
  box-shadow: 0 4px 14px hsl(var(--destructive) / 0.3);
}

.btn.danger-text {
  background: transparent;
  border: 0;
  color: var(--danger);
  padding: 4px 8px;
  min-height: auto;
  font-size: var(--text-xs);
  font-weight: 600;
}

.btn.block { width: 100%; }

/* Inputs */
.input, .select, .textarea {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 38px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  line-height: 1.35;
}

.textarea {
  min-height: 88px;
  resize: vertical;
  padding-top: 10px;
  line-height: var(--leading-relaxed);
}

.input:focus, .select:focus, .textarea:focus {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: var(--shadow-focus);
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: hsl(var(--neutral-500));
  letter-spacing: 0.01em;
}

label.block { display: flex; margin-top: var(--space-3); }

/* Lists */
.checklist {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.checklist li { margin-bottom: 6px; }
.checklist li.done {
  color: var(--ok);
  text-decoration: line-through;
  text-decoration-color: hsl(var(--secondary) / 0.35);
}

.kv {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 14px;
  margin: 0;
  font-size: var(--text-sm);
}

.kv dt {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--text-xs);
}

.kv dd { margin: 0; font-weight: 500; }

.callout {
  margin: var(--space-4) 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.06);
  border: 1px solid hsl(var(--primary) / 0.16);
  color: hsl(var(--primary-dark));
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: 500;
}

.toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar .input { max-width: 260px; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -2px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  line-height: var(--leading-snug);
  color: hsl(var(--neutral-700));
}

.table td strong {
  color: var(--text);
  font-weight: 600;
}

.table tr:hover td { background: hsl(var(--primary) / 0.025); }

.empty-row td {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 1rem !important;
  font-size: var(--text-sm);
}

.status-chip {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.3;
}

.status-chip.ok {
  background: hsl(var(--secondary) / 0.12);
  color: hsl(var(--secondary-dark));
}

.status-chip.warn {
  background: hsl(var(--accent-orange) / 0.12);
  color: hsl(24 75% 32%);
}

.status-chip.blocked {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

/* Roles */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

.role-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}

.role-card:hover {
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.role-card h3 {
  margin: 0 0 6px;
  font-size: var(--text-md);
}

.role-dept {
  font-size: var(--text-xs);
  color: hsl(var(--secondary));
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.role-card .muted.small {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tag {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: hsl(var(--neutral-100));
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.75rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.65);
}

.empty-icon {
  font-size: 1.75rem;
  opacity: 0.4;
  margin-bottom: 10px;
}

.empty-state h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
}

.empty-state p {
  margin: 0 auto;
  color: var(--text-muted);
  max-width: 340px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Forms layout */
.log-form .form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

.chip-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.07);
  border: 1px solid hsl(var(--primary) / 0.12);
  color: hsl(var(--primary-dark));
}

.check-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin: 8px 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
}

.check-row input { width: auto; accent-color: hsl(var(--primary)); }

.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin: 2px 8px 2px 0;
}

.check-inline input { width: auto; accent-color: hsl(var(--primary)); }

.access-builder {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.access-block {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: hsl(var(--neutral-50));
}

.access-details {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-details.dimmed { opacity: 0.45; pointer-events: none; }
.mod-grid { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.card-head.tight { margin-bottom: 10px; }
.card-head.tight h3 { margin: 0; font-size: var(--text-sm); }
.inline-tools { display: flex; gap: 8px; align-items: center; }
.inline-tools .input { width: auto; }
.click-row { cursor: pointer; }

.section-h {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 16px 0 8px;
}

.myrole-checkin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
#myrole-checkin-progress {
  font-variant-numeric: tabular-nums;
}
.must-list { list-style: none; padding: 0; margin: 0; }

.must-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: hsl(var(--neutral-50));
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: hsl(var(--neutral-700));
}

.must-list li.done {
  border-color: hsl(var(--secondary) / 0.3);
  background: hsl(var(--secondary) / 0.06);
  color: hsl(var(--secondary-dark));
}

.must-list li label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: inherit;
  letter-spacing: -0.01em;
}

.must-list input {
  margin-top: 3px;
  width: auto;
  accent-color: hsl(var(--primary));
}

.plain-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.plain-list li { margin-bottom: 5px; }

/* Ekohjul */
.wheel-wrap {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  margin: var(--space-6) auto;
  background:
    radial-gradient(circle at 50% 50%, hsl(var(--primary) / 0.07) 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27%;
  height: 27%;
  border-radius: 50%;
  background: var(--gradient-energy);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1.25;
  padding: 8px;
  box-shadow: 0 8px 28px hsl(var(--primary) / 0.28);
  z-index: 2;
}

.wheel-node {
  position: absolute;
  width: 21%;
  height: 21%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: 650;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: #fff;
  padding: 6px;
  line-height: 1.2;
  box-shadow: 0 4px 14px hsl(220 30% 20% / 0.18);
  transform: translate(-50%, -50%);
  border: 3px solid var(--surface);
  transition: transform 0.15s var(--ease);
}
.wheel-node:hover {
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 3;
}

/* CRM pipeline — Lever-like soft columns + elevated cards */
.pipeline-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: thin;

  /* Antyd att tavlan fortsätter i sidled. Med sju steg ligger Anställd och
     Avslag utanför kanten utan att något visar att de finns.

     Ren CSS, ingen JavaScript: ett tidigare försök satte en klass från JS och
     föll varje gång, eftersom tavlan byggs medan fliken Lista är aktiv och då
     har bredden 0. Här gör webbläsaren jobbet.

     De två första gradienterna följer innehållet (background-attachment:
     local) och täcker skuggan när man är längst ut. De två sista sitter fast
     mot behållarens kanter (scroll). Effekten blir att skuggan syns bara åt
     det håll där det finns mer att se. --surface är samma yta som kortet
     under, så maskeringen följer med i mörkt läge. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 44px 100%
      no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 44px 100%
      no-repeat local,
    linear-gradient(to right, rgba(2, 6, 23, 0.13), rgba(2, 6, 23, 0)) left center / 18px 100%
      no-repeat scroll,
    linear-gradient(to left, rgba(2, 6, 23, 0.13), rgba(2, 6, 23, 0)) right center / 18px 100%
      no-repeat scroll;
}

.pipe-col {
  flex: 0 0 188px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 10px;
  min-height: 160px;
}

.pipe-col h4 {
  margin: 0 0 10px;
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  line-height: 1.3;
  padding: 0 2px;
}

.pipe-col h4 span:last-child {
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 11px;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.12s var(--ease);
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.04), 0 4px 12px -6px hsl(215 25% 15% / 0.08);
}

.pipe-card:hover {
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: 0 4px 16px -4px hsl(215 25% 15% / 0.12);
  transform: translateY(-1px);
}

.pipe-card .pc-name {
  font-weight: 650;
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: -0.015em;
  margin-top: 2px;
}

.pipe-card .pc-job {
  font-size: var(--text-3xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipe-card .pc-next {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  margin-top: 5px;
  line-height: 1.35;
  font-weight: 500;
}

.pipe-card.warn-next {
  border-color: hsl(var(--accent-orange) / 0.4);
  background: linear-gradient(180deg, var(--surface) 60%, hsl(var(--accent-orange) / 0.06));
}

.pipe-card.lever-card .pipe-card-top {
  margin-bottom: 6px;
}

.traffic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
}

.traffic .tl {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tl.green { background: var(--ok); }
.tl.yellow { background: hsl(45 100% 48%); }
.tl.red { background: var(--danger); }

/* Legacy unused bits kept lightly */
.budget-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}

.budget-bar {
  height: 7px;
  background: var(--track);
  border-radius: 999px;
  margin: 12px 0 6px;
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  background: var(--gradient-energy);
  border-radius: 999px;
}

.budget-list { list-style: none; margin: 0; padding: 0; }
.budget-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}

.source-list {
  margin: 12px 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.card.tool { display: flex; flex-direction: column; gap: 8px; }
.card.tool .btn { margin-top: auto; align-self: flex-start; }

/* ═══════════════════════════════════════════════════
   Översikt — grafer, success, process, hjärtslag, mål
   ═══════════════════════════════════════════════════ */
.ov-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
/* Accenten blev ljusare med indigo — kickern föll till 3.32:1. */
.ov-kicker {
  margin: 0 0 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--primary-dark));
}
.ov-hello {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: hsl(var(--primary-dark));
  line-height: 1.15;
}
.ov-sub { margin: 6px 0 0; max-width: 36rem; }
.ov-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ov-meta-pill {
  font-size: var(--text-xs);
  font-weight: 650;
  padding: 7px 12px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: #fff;
  box-shadow: 0 2px 10px hsl(var(--primary) / 0.22);
}
/* I morkt lage ljusas --primary upp for att fungera som accent, och da
   spricker vit text pa den: matt 2,83:1 mot kravet 4,50. --primary-solid ar
   tonen avsedd for fyllda ytor och ger 5,26:1. Ljust lage lamnas orort — det
   matte redan godkant. */
:root[data-theme="dark"] .ov-meta-pill {
  background: hsl(var(--primary-solid));
  box-shadow: 0 2px 10px hsl(var(--primary-solid) / 0.3);
}

.ov-meta-pill.soft {
  background: var(--surface);
  color: hsl(var(--primary-dark));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.ov-graphs {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ov-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.ov-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-energy);
  opacity: 0.85;
}
.ov-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1rem;
}
.ov-card-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: hsl(var(--neutral-900));
}

.ov-rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ov-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.ov-ring-svg {
  width: 100%;
  max-width: 112px;
  height: auto;
  transform: rotate(-90deg);
}
.ov-ring-bg {
  fill: none;
  stroke: var(--track);
  stroke-width: 8;
}
.ov-ring-fg {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}
.ov-ring.tone-ok .ov-ring-fg { stroke: hsl(var(--secondary)); }
.ov-ring.tone-teal .ov-ring-fg { stroke: hsl(170 55% 38%); }
.ov-ring.tone-warm .ov-ring-fg { stroke: hsl(var(--accent-orange)); }
.ov-ring-center {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  pointer-events: none;
  /* left: 50% pa ett absolutpositionerat element kapar tillgangliga bredden
     till halva ringen — 60,5 px av 121. "Intro klar" ar 61 px och brots
     darfor pa tva rader, vilket sköt den ringens procenttal 5 px hogre an de
     tre andra. Etiketterna far plats i ringen anda; de behover bara slippa
     brytas. */
  white-space: nowrap;
}
.ov-ring-center strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: hsl(var(--neutral-900));
}
.ov-ring-center span {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Lag pa 4,49:1 mot kravet 4,50 — en hårsmån under, men vid 10 px rakt
     ovanpå vitt. Samma token som .ov-ring-sub bredvid redan använder, sa
     etiketterna i ringen blir dessutom samstämmiga. Ny kvot 6,07:1. */
  color: var(--text-muted);
  margin-top: 2px;
}
.ov-ring-sub {
  margin: 4px 0 0;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 9rem;
}

.ov-process {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov-proc-row {
  display: grid;
  grid-template-columns: 100px 1fr 28px;
  gap: 10px;
  align-items: center;
}
.ov-proc-lab {
  font-size: var(--text-xs);
  font-weight: 650;
  color: hsl(var(--neutral-700));
}
.ov-proc-track {
  height: 10px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.ov-proc-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-energy);
  min-width: 2px;
  transition: width 0.55s var(--ease);
  box-shadow: 0 0 12px hsl(var(--primary) / 0.25);
}
.ov-proc-n {
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
}

.ov-section-head {
  margin: 0.25rem 0 0.85rem;
}
.ov-section-head h3 {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: hsl(var(--primary-dark));
}
.ov-section-head p { margin: 0; }

.ov-stats-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ov-hb-wrap { position: relative; }
.ov-hb-svg {
  width: 100%;
  height: 100px;
  display: block;
}
.ov-hb-line {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px hsl(var(--primary) / 0.25));
}
.ov-hb-dot {
  fill: var(--surface);
  stroke: hsl(var(--primary) / 0.35);
  stroke-width: 1.5;
}
.ov-hb-dot.on {
  fill: hsl(var(--primary));
  stroke: var(--surface);
  stroke-width: 2;
}
.ov-hb-labs {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 4px;
  height: 1rem;
}
.ov-hb-labs span {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ov-hb-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.ov-hb-sum strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: hsl(var(--primary-dark));
}
.ov-hb-sum span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.ov-goals {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ov-goal-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 650;
  margin-bottom: 6px;
  color: hsl(var(--neutral-700));
}
.ov-goal-top strong {
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary-dark));
}
.ov-goal-track {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.ov-goal-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
  min-width: 2px;
  transition: width 0.55s var(--ease);
}
.ov-goal-fill.teal { background: linear-gradient(90deg, hsl(170 60% 32%), hsl(170 55% 45%)); }
.ov-goal-fill.warm { background: linear-gradient(90deg, hsl(24 100% 48%), hsl(32 100% 55%)); }

.ov-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ov-kpi {
  background: hsl(var(--neutral-50));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.ov-kpi.warn {
  background: hsl(var(--accent-orange) / 0.07);
  border-color: hsl(var(--accent-orange) / 0.28);
}
.ov-kpi-lab {
  display: block;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ov-kpi-val {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: hsl(var(--neutral-900));
  font-variant-numeric: tabular-nums;
}

.ov-foot-card .chip-list { margin-top: 10px; }

/* Toast */
.vr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  padding: 12px 20px;
  border-radius: 12px;
  background: hsl(var(--primary-dark));
  color: #fff;
  font-weight: 650;
  font-size: var(--text-base);
  box-shadow: 0 8px 28px hsl(220 40% 10% / 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: min(90vw, 420px);
  text-align: center;
}
.vr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vr-toast.kind-err {
  background: hsl(var(--destructive));
}
.vr-toast.kind-ok {
  background: hsl(var(--secondary-dark));
}

/* Rapport sektioner (coach dagsrapport) */
.rep-role-hint { margin-bottom: 0.75rem; }
.rep-section {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: hsl(var(--neutral-50));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
.rep-sec-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 0.65rem;
}
.rep-sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.rep-sec-grid .block,
.rep-sec-grid .rep-field:has(textarea) {
  grid-column: 1 / -1;
}
.rep-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 650;
}
.notis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .rep-sec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .ov-graphs { grid-template-columns: 1fr; }
  .ov-stats-grid { grid-template-columns: 1fr 1fr; }
  .ov-rings { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .grid.cards-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid.two,
  .grid.three { grid-template-columns: 1fr; }
  .log-form .form-row { grid-template-columns: 1fr 1fr; }
  .ov-stats-grid { grid-template-columns: 1fr; }
  .ov-proc-row { grid-template-columns: 84px 1fr 24px; }
}

@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-item {
    flex: 1 1 auto;
    font-size: var(--text-xs);
    padding: 8px 10px;
  }
  .log-form .form-row { grid-template-columns: 1fr; }
  .main { padding: var(--space-4); }
  .topbar {
    flex-direction: column;
    gap: var(--space-4);
  }
  .topbar h1 { font-size: var(--text-xl); }
  .grid.cards-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .grid.cards-4 { grid-template-columns: 1fr; }
}

/* Översikt soft loading */
.ov-loading {
  position: relative;
  min-height: 72px;
  opacity: 0.55;
  pointer-events: none;
}
.ov-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.06), transparent);
  background-size: 200% 100%;
  animation: ovShimmer 1.1s ease-in-out infinite;
}
@keyframes ovShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Förklarar hur ett mål räknas fram — siffran ska aldrig vara oförklarad. */
.ov-goal-note {
  margin-top: 4px;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* ── Granskning 2026-07-27: layoutjusteringar ────────────
   Hjärtslagskortet stretchades till radens höjd men grafen
   behöll sin höjd → stort dött utrymme. Låt grafen växa i stället. */
.ov-heartbeat-card {
  display: flex;
  flex-direction: column;
}
.ov-heartbeat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.ov-heartbeat .ov-hb-wrap { flex: 1; display: flex; flex-direction: column; }
.ov-heartbeat .ov-hb-svg { flex: 1; min-height: 88px; height: auto; }

/* Undermenyn för Rekrytering tog en tredjedel av sidomenyn även när
   man inte var i CRM. Visa den bara när CRM är aktiv vy. */
.nav-sub { display: none; }
body.crm-active .nav-sub { display: flex; }

/* ── Mobil: sidomenyn tog ~780 px höjd innan innehållet började ──
   Gör den till en kompakt, vågrätt scrollande rad högst upp. */
@media (max-width: 800px) {
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
  }
  .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  /* Låt grupperna försvinna som layoutlådor så knapparna blir en rad. */
  .nav-group { display: contents; }
  .nav-group-title { display: none; }
  .nav-item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
  /* Undermenyn är redundant på mobil — stegraden i CRM gör samma sak. */
  body.crm-active .nav-sub { display: none; }
  .sidebar-foot {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
  }
  .sidebar-foot .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   Visuell omarbetning — mindre krom, mer innehåll
   Kritik: "lådor i lådor", dekorlister och skuggor på allt,
   konkurrerande badges. Hierarkin ska bäras av typografi och
   luft, inte av ramar.
   ═══════════════════════════════════════════════════════ */
:root {
  --radius: 14px;       /* --r-md */
  --radius-sm: 11px;    /* --r-sm */
  --radius-lg: 18px;    /* --r-lg */
  /* Skuggor nästan bort — ytan skiljs med bakgrund och en hårfin kant. */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px hsl(var(--neutral-900) / 0.04);
  --shadow-md: 0 10px 30px -12px hsl(var(--neutral-900) / 0.16);
}
:root[data-theme="dark"] {
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 10px 30px -12px hsl(0 0% 0% / 0.6);
}

/* Dekorlisten överst på varje kort — ren pynt som gjorde sidan randig. */
.ov-card::before { content: none; }

/* Kort: platta, tydlig kant, ingen skugga i vila. */
.card,
.ov-card {
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

/* Rubriker: Inter i stället för Poppins. Poppins med hård
   letter-spacing i stora grader läser daterat. */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ov-hello,
.crm-hero-title,
.login-card h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Sidomenyn: lugnare, tydligare aktivt läge. */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
}
.nav-group + .nav-group { margin-top: var(--space-5); }
.nav-group-title {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 10px 6px;
}
.nav-item {
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--text-soft);
}
.nav-item.active {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary-dark));
  font-weight: 650;
}

/* Toppfältet: mindre pill-brus. */
.topbar { align-items: flex-start; }
.crumb {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Knappar: mjukare, mindre skuggade. */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn.primary { box-shadow: none; }
.btn.primary:hover:not(:disabled) { box-shadow: none; background: hsl(var(--primary-solid-hover)); }
.btn.sm { padding: 5px 12px; font-size: var(--text-sm); }

/* Fält: låg kontrast i vila, tydliga i fokus. */
.input, .select, .textarea {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-color: transparent;
}
.input:focus, .select:focus, .textarea:focus {
  background: var(--surface);
  border-color: hsl(var(--primary) / 0.5);
}

/* Tabell: rader utan tunga linjer. */
.table th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.table td { border-bottom: 1px solid var(--border-soft); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ═══════════════════════════════════════════════════════
   Komponenter — omarbetade mot den nya paletten
   ═══════════════════════════════════════════════════════ */
body { background: var(--bg); background-attachment: initial; }

/* Rubriker är neutrala. Att de var blå gjorde hela sidan monokrom. */
h1, h2, h3, h4 { color: var(--text); font-weight: 640; letter-spacing: -0.021em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
.ov-hello { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.035em; }

/* Varumärkesmärket: accentgradient i stället för matt marin platta. */
.brand-mark {
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px -4px hsl(var(--primary) / 0.5);
}
.brand-title { font-weight: 640; letter-spacing: -0.02em; color: var(--text); }
.brand-sub { color: var(--text-muted); }

/* Sidomenyn: nästan osynlig kant, aktivt läge med accentstapel. */
.sidebar { background: var(--surface); border-right: 1px solid var(--border-soft); }
.nav-item {
  position: relative;
  color: var(--text-soft);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.nav-item:hover:not(.active) { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--surface-accent); color: hsl(var(--primary-dark)); font-weight: 640; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: hsl(var(--primary));
}
.nav-icon { opacity: 0.75; }
.nav-group-title { color: var(--text-muted); font-weight: 600; }
.nav-sub { border-left: 1px solid var(--border); }
.nav-sub-item { color: var(--text-muted); }
.nav-sub-item:hover { color: var(--text); background: var(--bg-hover); }

/* Toppfält: luftigare, mindre pillbrus. */
.topbar { border-bottom: 1px solid var(--border-soft); padding-bottom: var(--space-5); }
.crumb { color: var(--text-muted); font-weight: 600; letter-spacing: 0.07em; }
.status-pill {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-weight: 550;
}

/* Kort: vit yta, hårfin kant, ingen skugga. */
.card, .ov-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card-head h2 { font-size: var(--text-md); font-weight: 640; }

/* Knappar */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 570;
  letter-spacing: -0.005em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); }
.btn.primary {
  background: hsl(var(--primary-solid));
  border-color: hsl(var(--primary-solid));
  color: #fff;
  box-shadow: 0 1px 2px hsl(var(--primary-solid) / 0.3);
}
.btn.primary:hover:not(:disabled) { background: hsl(var(--primary-solid-hover)); border-color: hsl(var(--primary-solid-hover)); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--n-300); }

/* Fält */
.input, .select, .textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow-focus);
}
label { font-weight: 550; color: var(--text-soft); }
.tiny-label { color: var(--text-muted); font-weight: 600; letter-spacing: 0.06em; }

/* Tabell */
.table th {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.055em;
}
.table td { border-bottom: 1px solid var(--border-soft); }
.table tbody tr:hover { background: var(--surface-2); }

/* Statuschips får semantisk färg i stället för samma bleka blå */
.status-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 600;
}
.status-chip.ok { background: hsl(var(--secondary) / 0.12); border-color: hsl(var(--secondary) / 0.3); color: hsl(var(--secondary-dark)); }
.status-chip.warn { background: hsl(var(--accent-orange) / 0.13); border-color: hsl(var(--accent-orange) / 0.32); color: hsl(30 90% 34%); }
.status-chip.blocked { background: hsl(var(--destructive) / 0.12); border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); }
:root[data-theme="dark"] .status-chip.warn { color: hsl(32 95% 70%); }

.chip, .tag {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
}
.badge { font-weight: 600; }
.badge.live { background: hsl(var(--secondary) / 0.12); color: hsl(var(--secondary-dark)); border-color: hsl(var(--secondary) / 0.3); }
.badge.draft { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* Ringar och staplar i accentfärgen */
.ov-ring-fg { stroke: hsl(var(--primary)); }
.ov-ring.tone-ok .ov-ring-fg { stroke: hsl(var(--secondary)); }
.ov-ring.tone-teal .ov-ring-fg { stroke: hsl(262 72% 58%); }
.ov-ring.tone-warm .ov-ring-fg { stroke: hsl(var(--accent-orange)); }
.ov-proc-fill, .ov-goal-fill, .crm-bar-fill { background: hsl(var(--primary)); }
.ov-goal-fill.teal { background: hsl(var(--secondary)); }
.ov-goal-fill.warm { background: hsl(var(--accent-orange)); }

/* Sidomenyn: bara navlistan får scrolla. Utan min-height:0 vägrar
   flexbarnet krympa, hela kolumnen blir för hög och märket klipps bort. */
.sidebar { overflow: hidden; }
.nav { min-height: 0; padding: 0 var(--space-2); }
.nav-item.active::before { left: -4px; }

/* «Alla» är en nollställning, inte ett steg. Grå aktiv yta läste som
   utgråad — ge den accenten i stället. */
.stage-all .stage-btn::before { background: var(--border); }
.stage-all .stage-btn.on {
  background: var(--surface);
  border-color: hsl(var(--primary) / 0.45);
}
.stage-all .stage-btn.on::before { background: hsl(var(--primary)); }
.stage-all .stage-btn.on .stage-n { color: hsl(var(--primary)); }

/* Undermenyn är borttagen — navigationen är platt. Reglerna kvar för
   att inte lämna död CSS bakom sig om markup återinförs. */
.nav-sub { display: none !important; }

/* Kontextuella sidåtgärder i toppfältet */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.topbar-actions { flex-wrap: wrap; }
@media (max-width: 800px) {
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
}

/* Toppfältet: huvudåtgärder först, admin-verktyg diskret sist. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.view-as-top { order: 3; }
.view-as-top .select {
  width: auto;
  min-width: 0;
  max-width: 170px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--text-sm);
  background: var(--surface-2);
  border-color: var(--border-soft);
  color: var(--text-muted);
}
.page-actions { order: 1; }
.notif-bell { order: 0; }
#role-pill { order: 4; }

/* Sidomenyn: tätare grupper så allt får plats utan scroll. */
.nav-group + .nav-group { margin-top: var(--space-4); }
.nav-group-title { padding-bottom: 4px; }
.nav-item { padding: 7px 10px; }

/* ═══ Min dag — dagens arbete ═══
   Vyn visade förut rollens definition som två textkolumner. Arbetet ska synas
   först och läsas på en sekund: räknare överst, sedan grupper med rader man
   klickar på. Rollbeskrivningen är kvar men hopfälld. */
.dag-raknare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.dag-rakn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dag-rakn-n { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.dag-rakn-l {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dag-rakn.larm    { border-color: hsl(var(--stage-rejected) / 0.4); background: hsl(var(--stage-rejected) / 0.06); }
.dag-rakn.larm .dag-rakn-n    { color: hsl(var(--stage-rejected-ink)); }
.dag-rakn.varning { border-color: hsl(var(--stage-screening) / 0.4); background: hsl(var(--stage-screening) / 0.07); }
.dag-rakn.varning .dag-rakn-n { color: hsl(var(--stage-screening-ink)); }

.dag-grupper { display: flex; flex-direction: column; gap: var(--space-5); }
/* .dag-grupp hade avvikande innerkant (20px 20px 8px) mot övriga kort. */
.dag-lista { display: flex; flex-direction: column; }

.dag-rad {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-2);
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-sm);
}
.dag-lista .dag-rad:first-child { border-top: 0; }
.dag-rad:hover { background: var(--bg-hover); }
.dag-rad-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dag-rad-text strong { font-weight: 600; }
.dag-rad-text .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dag-tel {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.dag-rad-hoger { margin-left: auto; }

/* På telefon rymdes inte allt på en rad: namnet kläms till 38 px medan
   telefonnumret och högerinnehållet tar utrymmet. Låt raden brytas och ge
   namnet hela första raden — det är det man läser för att känna igen
   personen. Mätt vid 390 px innan regeln fanns. */
@media (max-width: 560px) {
  .dag-rad { flex-wrap: wrap; row-gap: 2px; }
  .dag-rad-text { flex: 1 1 100%; order: 1; }
  .dag-tel { order: 2; }
  .dag-rad-hoger { order: 3; margin-left: auto; }
}
.dag-tid {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.dag-sen {
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsl(var(--stage-rejected-ink));
  background: hsl(var(--stage-rejected) / 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.dag-tomt { text-align: center; padding: var(--space-8) var(--space-5); }

.dag-check { margin-top: var(--space-5); }
.dag-roll { margin-top: var(--space-5); }
.dag-roll > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-md);
  list-style: none;
}
.dag-roll > summary::-webkit-details-marker { display: none; }
.dag-roll > summary::before { content: "▸ "; color: var(--text-muted); }
.dag-roll[open] > summary::before { content: "▾ "; }

@media (max-width: 620px) {
  .dag-tel { display: none; }
}

/* Processraderna på Dashboard är knappar nu — de var döda tal. */
button.ov-proc-row {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: 0 -6px;
}
button.ov-proc-row:hover { background: var(--bg-hover); }

/* Rapportfält som räknats fram ur CRM. Rekryteraren skrev tidigare in
   fjorton siffror för hand som systemet redan kände till. */
/* Stegen i kandidatens resa ar knappar nu (gar att backa med). Nollstall
   webblasarens knappstil sa de ser ut precis som chipsen gjorde forut. */
.lever-j-step {
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 650;
  line-height: inherit;
  border: 0;
  cursor: pointer;
}

.auto-markor {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: hsl(var(--secondary) / 0.12);
  color: hsl(var(--secondary-dark));
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  /* Foraldern (label.rep-field) ar display:flex, vilket blockifierar
     inline-block och strackte chippet over hela faltbredden. */
  align-self: flex-start;
  width: fit-content;
}
.auto-status { margin: 0 0 var(--space-4); }
input[data-auto="1"] { background: hsl(var(--secondary) / 0.04); }

/* ═══ Diagram ═══
   Paletten är framräknad, inte vald: validerad för ljushetsband, kulörgolv,
   färgblindhetsseparation och kontrast mot BÅDA ytorna. Den gamla
   stegpaletten föll — blå och lila låg på ΔE 0,7 för rödblinda, alltså
   omöjliga att skilja, och de stod dessutom bredvid varandra i tratten. */
:root {
  --serie-inbox:     #7259c0;
  --serie-kontaktad: #c78005;
  --serie-intervju:  #ce3b9d;
  --serie-erbjudande:#1773cf;
  --serie-anstalld:  #20975c;
}

.vr-diagram-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.vr-flikrad { display: flex; gap: 2px; }
.vr-flik {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  padding: 5px 12px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 30px;
}
.vr-flik:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.vr-flik:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.vr-flik.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
}

.vr-diagram { width: 100%; height: auto; display: block; overflow: visible; }
/* Tillbakadraget rutnät — axeln ska inte tävla med datan. */
.vr-baslinje { stroke: var(--border); stroke-width: 1; }
.vr-stapel-fyll { fill: var(--serie-anstalld); }
/* Osynlig träffyta större än märket. */
.vr-stapel-yta { fill: transparent; }
.vr-stapel:hover .vr-stapel-fyll { filter: brightness(1.1); }
.vr-stapel-tal {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}
.vr-stapel-ax {
  fill: var(--text-muted);
  font-size: 10px;
  text-anchor: middle;
}
/* Måltakten i SAMMA skala — aldrig en andra y-axel. */
.vr-mal {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.vr-mal-text { fill: var(--text-muted); font-size: 10px; font-weight: 600; }

.vr-tooltip {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-soft);
  min-height: 1.2em;
}
.vr-tabell { width: 100%; margin-top: var(--space-4); font-size: var(--text-sm); }
.vr-tabell caption { text-align: left; color: var(--text-muted); padding-bottom: 6px; }
.vr-tabell th, .vr-tabell td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* Tomt diagram. Nollor plus en mållinje ser ut som ett fel, inte som data. */
.vr-tomt {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.vr-tomt p { margin: 4px 0 0; }

/* Korten i rutnätet ska inte sträckas till varandras höjd — ett kort med
   tabell utfälld gjorde grannkortet dubbelt så högt med bara tomrum. */
.ov-graphs, .ov-grid, .ov-stats-grid { align-items: start; }

/* Veckodagsetiketterna är absolut placerade och centrerade med
   translateX(-50%). Den första och sista sköt därför ut 5px respektive 8px
   utanför kortet, som klipper — "ti" och "må" kapades. Ändstationerna
   ankras i kanten i stället för att centreras. */
.ov-hb-labs span:first-child { transform: none; }
.ov-hb-labs span:last-child { transform: translateX(-100%); }

/* Mobilmenyn var tänkt att scrolla i sidled, men .sidebar { overflow: hidden }
   längre upp klippte den och .nav saknade overflow-x. Menyvalen efter de
   första hamnade utanför skärmen utan att gå att nå — 69px sidoscroll på
   sidan i stället för i listan. */
@media (max-width: 800px) {
  .sidebar { overflow-x: auto; overflow-y: hidden; }
  .nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .nav-item { flex: 0 0 auto; }
}

/* Två sista träffytor under WCAG 2.5.8:s 24px, funna i slutkontrollen:
   länken "Mina rapporter" i Min dag och en kryssruta i Inkorgen som
   ligger utanför den regel som lyfte kandidatlistans rutor. */
.dag-check a,
.myrole-checkin-actions a,
#myrole-report-hint a {
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
  line-height: 16px;
}
/* .check-inline input { width: auto } på rad ~1196 tävlade ut den generella
   kryssruteregeln — riktar mot elementet för att vinna utan !important. */
.mail-list input[type="checkbox"],
.mail-item input[type="checkbox"],
#mail-show-all,
.mail-filter .check-inline input[type="checkbox"] {
  width: 24px;
  height: 24px;
}

/* ═══════════════════════════════════════════════════════
   Designspec steg 2 — komponentregler
   Ur design/via-rapport/via-rapport-designspec.md §5.
   Endast utseende: ingen markup, ingen logik, ingen funktion rörd.
   ═══════════════════════════════════════════════════════ */
:root {
  --sunken: 220 24% 96%;                    /* #EFF1F5 */
  --accent-ring: 243 75% 59% / 0.22;
  --sh-sm: 0 1px 2px rgba(18, 25, 38, 0.04), 0 2px 8px rgba(18, 25, 38, 0.055);
  --sh-accent: 0 8px 22px rgba(79, 70, 229, 0.34);
  --r-xl: 26px;
}

/* Primärknapp: accent-gradient, vit text, accentskugga. */
.btn.primary {
  background: linear-gradient(180deg,
    hsl(var(--primary)) 0%, hsl(var(--primary-glow)) 100%);
  box-shadow: var(--sh-accent);
  border-color: transparent;
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    hsl(var(--primary-glow)) 0%, hsl(var(--primary-dark)) 100%);
}

/* Ghost: ren yta med hårfin kant. */
.btn.ghost {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

/* Kort: större radie och mjuk skugga med inset-hairline. */
.card, .ov-card, .crm-kandidat-panel {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--border-soft);
}

/* Fält: nedsänkta, fokus med accentring. */
.input, .select, .textarea {
  background: hsl(var(--sunken));
  border-color: var(--border);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid hsl(var(--accent-ring));
  outline-offset: 1px;
  background: var(--surface);
}

/* Tal ska ligga i kolumn — tider, telefon, statistik. */
.stat-value, .dag-rakn-n, .stage-n, .crm-score-badge,
.dag-tel, .dag-tid, .vr-stapel-tal, .cand-table td[data-label="Kontakt"],
.ov-proc-n, .crm-kpi .stat-value {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Designpolish 2026-07-27 — indigo facit, hela appen
   Utan diagnostik-banner. Lugn, enhetlig, inte "slarvig".
   ═══════════════════════════════════════════════════════ */

:root {
  --canvas: #EBEEF2;
  --mesh-a: #EEEDFC;
  --mesh-b: #EAF0FB;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --sh-soft: 0 1px 2px rgba(18, 25, 38, 0.04), 0 6px 18px rgba(18, 25, 38, 0.06);
  --sh-btn: 0 6px 16px rgba(79, 70, 229, 0.28);
}

/* Duk överallt (login + app) */
html {
  background: var(--canvas);
}
body {
  background:
    radial-gradient(900px 480px at 8% -8%, var(--mesh-a) 0%, transparent 58%),
    radial-gradient(780px 460px at 100% 0%, var(--mesh-b) 0%, transparent 52%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--text);
}

:root[data-theme="dark"] {
  --canvas: #0E1116;
  --mesh-a: #16142a;
  --mesh-b: #121824;
}

/* Login — lugnt kort, ingen floating badge */
.login-screen {
  background:
    radial-gradient(ellipse 75% 50% at 0% -10%, rgba(79, 70, 229, 0.11), transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 105%, rgba(18, 153, 107, 0.07), transparent 50%),
    var(--canvas);
}
.login-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-soft);
  backdrop-filter: none;
}
.login-card h1 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Brand */
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(150deg, #6366f1, #3730a3);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28);
  border: 0;
}

/* Shell */
.app {
  background: transparent;
}
.sidebar {
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid var(--border-soft);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.main {
  background: transparent;
}
.topbar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

/* Nav — en stil överallt */
.nav-item {
  border-radius: var(--r-sm);
}
.nav-item:hover {
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary-dark));
}
.nav-item.active {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary-dark));
  font-weight: 650;
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}
.nav-item.active::before {
  display: none; /* undvik dubbel-markör (inset + ::before) */
}

/* Knappar */
.btn {
  border-radius: var(--r-sm);
  font-weight: 600;
}
.btn.primary {
  background: linear-gradient(180deg, #5b54e8 0%, #4338ca 100%);
  border: 0;
  color: #fff;
  box-shadow: var(--sh-btn);
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.04);
  background: linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
}
.btn.ghost {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: none;
}

/* Fält */
.input, .select, .textarea,
input.input, select.input, textarea.input {
  border-radius: var(--r-sm);
  background: hsl(220 24% 96%);
  border: 1px solid var(--border);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.35);
  outline-offset: 1px;
  background: #fff;
}

/* Kort / paneler — samma språk i översikt + CRM */
.card,
.ov-card,
.crm-kandidat-panel,
.panel,
.crm-global-bar,
.notis-card,
.mail-list,
.crm-bulk-bar {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--sh-soft);
  background: #fff;
}

/* Tabeller */
.table, .cand-table, .crm-top-list table {
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th,
.cand-table thead th {
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.table tbody tr:hover,
.cand-table tbody tr:hover {
  background: hsl(var(--primary) / 0.03);
}

/* KPI / chips */
.status-chip, .badge, .pill {
  border-radius: 999px;
}
.stat-value, .ov-proc-n, .dag-tid, .dag-tel {
  font-variant-numeric: tabular-nums;
}

/* Dark — samma struktur, mörka ytor */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .ov-card,
:root[data-theme="dark"] .crm-kandidat-panel,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .notis-card {
  background: #171a21;
  border-color: #272c35;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .btn.ghost {
  background: #171a21;
  border-color: #272c35;
  color: #edeff3;
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .textarea {
  background: #12151b;
  border-color: #272c35;
  color: #edeff3;
}
:root[data-theme="dark"] .nav-item.active {
  background: rgba(99, 102, 241, 0.16);
  color: #c7c4f5;
  box-shadow: inset 3px 0 0 #818cf8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Admin: effektivitetskort på dashboard */
.ov-efficiency-card {
  grid-column: 1 / -1;
}
.ov-efficiency-card .ov-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* ── Rapportstatus: många roller att följa upp ─────────── */
.fill-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fill-toolbar .input,
.fill-toolbar .select {
  min-width: 0;
  height: 40px;
}
.fill-toolbar #fill-date { width: 10.5rem; }
.fill-toolbar #fill-filter,
.fill-toolbar #fill-role-filter { min-width: 9.5rem; }

.fill-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fill-role-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
  max-width: 200px;
  flex: 1 1 140px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #eef1f5);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fill-role-chip:hover {
  border-color: hsl(var(--primary) / 0.35);
}
.fill-role-chip.active {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}
.fill-role-chip.ok { background: linear-gradient(180deg, #f3fbf7, #fff); }
.fill-role-chip.warn { background: linear-gradient(180deg, #fffbf3, #fff); }
.fill-role-chip-title {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
}
.fill-role-chip-bar {
  height: 5px;
  border-radius: 999px;
  background: hsl(220 20% 92%);
  overflow: hidden;
}
.fill-role-chip-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #4f46e5);
}
.fill-role-chip.warn .fill-role-chip-bar > span {
  background: linear-gradient(90deg, #d97706, #b45309);
}
.fill-role-chip.ok .fill-role-chip-bar > span {
  background: linear-gradient(90deg, #10b981, #059669);
}
.fill-role-chip-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fill-role-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.fill-role-card {
  padding: 16px 16px 12px;
}
.fill-role-card.needs-followup {
  border-color: hsl(38 90% 70% / 0.55);
}
.fill-role-card.is-complete {
  border-color: hsl(160 50% 75% / 0.5);
}
.fill-role-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fill-role-head h3 {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.fill-role-track {
  height: 7px;
  border-radius: 999px;
  background: hsl(220 20% 93%);
  overflow: hidden;
  margin-bottom: 12px;
}
.fill-role-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #4338ca);
  transition: width 0.25s ease;
}
.fill-role-card.is-complete .fill-role-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}
.fill-person-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fill-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: hsl(220 24% 97%);
  border: 1px solid transparent;
}
.fill-person.is-missing {
  background: hsl(38 95% 96%);
  border-color: hsl(38 80% 80% / 0.45);
}
.fill-person.is-done {
  background: hsl(152 40% 97%);
}
.fill-person-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fill-person-main strong {
  font-size: 13.5px;
  font-weight: 650;
}
.stat-value.ok-text { color: #059669; }
.stat-value.warn-text { color: #b45309; }

@media (max-width: 720px) {
  .fill-toolbar { width: 100%; }
  .fill-toolbar .input,
  .fill-toolbar .select { flex: 1 1 100%; }
  .fill-role-groups { grid-template-columns: 1fr; }
}

/* Kundkortsluckor visas på personens egen rad i Min dag. Tidigare låg de i en
   egen grupp som byggdes ur de andra grupperna — varje rad där var alltså en
   andra rad för någon som redan stod i listan. */
.dag-lucka {
  display: inline-block;
  margin-top: .18rem;
  padding: .08rem .5rem;
  border-radius: 999px;
  background: #fdf3e0;
  color: #8a5f00;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Diskret besked om att en ny version finns. Avbryter aldrig pågående arbete
   — den som håller på med något klickar bort den och laddar om när det passar. */
.vr-nyversion {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem .6rem 1rem;
  border-radius: 999px;
  background: #0E2A47;
  color: #fff;
  font-size: .88rem;
  box-shadow: 0 6px 22px rgba(14, 42, 71, .28);
}
.vr-nyversion button {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: .35rem .85rem;
  font: inherit;
  font-weight: 650;
  background: #fff;
  color: #0E2A47;
}
.vr-nyversion button.senare {
  background: transparent;
  color: #c7d3e3;
  padding: .35rem .4rem;
}
@media (max-width: 600px) {
  .vr-nyversion { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}

/* Academy-blocket på kandidatkortet: länken, hur långt personen kommit och
   fritextsvaren som väntar på en människa. */
.onb-academy-lank {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.onb-academy-lank .input {
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.onb-academy-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin: .9rem 0 .2rem;
}
.onb-academy-status > div {
  background: var(--surface-2, #f4f6fa);
  border-radius: 10px;
  padding: .55rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.onb-fritext-rad {
  border-top: 1px solid var(--line, #e3e8f0);
  padding: .7rem 0;
}
.onb-fritext-rad:first-child { border-top: 0; }
.onb-fritext-rad p {
  margin: .25rem 0 0;
  white-space: pre-wrap;
}
@media (max-width: 560px) {
  .onb-academy-lank { flex-wrap: wrap; }
  .onb-academy-lank .input { flex-basis: 100%; }
}