/* Medarbetarnavet ovanpå Tabler, med Boknavets utseende (beslut 2026-10-13) och en mörkröd primärfärg.
   Färgerna är tokens överst i filen: byt --mnav-primary och dess varianter för att byta färg. Kontrasten är kontrollerad
   för båda lägena (WCAG 2.1 AA): primärfärgen som text och länk mot sidans bakgrund och knapparnas text mot primärfärgen.
   Ljust eller mörkt läge följer operativsystemet (src/public/farglage.js sätter data-bs-theme på <html>). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  /* Utan unicode-range: filen har också pilarna (←) som vyerna använder */
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---------- Färgerna (tokens) ---------- */
:root {
  --mnav-primary: #8c1d33;          /* mörkröd: 8,98:1 mot vitt */
  --mnav-primary-rgb: 140, 29, 51;
  --mnav-primary-dark: #6e1628;     /* hover och aktiv knapp: 11,6:1 mot vitt */
  --mnav-primary-soft: #f7e9ec;     /* ljus yta i primärfärgen */
  --mnav-on-primary: #ffffff;       /* text på knappar i primärfärgen: 8,98:1 */
  --mnav-sidebar: #3b0d18;          /* sidomenyn: vit text 16,7:1 */
  --mnav-field-border: #848a88;     /* fältens ramar: minst 3:1 mot bakgrunden (WCAG 1.4.11) */
  --mnav-border: #e6e9e8;
  --mnav-border-strong: #dfe3e1;
  --mnav-row-hover: #f6f8f7;
  --mnav-surface: #ffffff;
  --mnav-text: #1d273b;
  --mnav-muted: #5b6670;            /* hjälptext: 5,8:1 mot vitt */
  --mnav-danger-text: #a61e1e;      /* fel: tegelrött, med ikon och ordet "Fel" (förväxlas inte med primärfärgen) */
  --mnav-warning-text: #7a4a00;
  --mnav-success-text: #1b6e30;
  --mnav-info-text: #0f4c81;
}
:root[data-bs-theme=dark] {
  --mnav-primary: #f28b9b;          /* ljusare variant: 7,63:1 mot sidans mörka bakgrund */
  --mnav-primary-rgb: 242, 139, 155;
  --mnav-primary-dark: #f6a9b5;
  --mnav-primary-soft: #3a1820;
  --mnav-on-primary: #1a0a0d;       /* mörk text på knappar i den ljusa varianten: 8,18:1 */
  --mnav-sidebar: #2a0a11;
  --mnav-field-border: #8a8a8a;
  --mnav-border: #3a3a3a;
  --mnav-border-strong: #444444;
  --mnav-row-hover: #222222;
  --mnav-surface: #1f1f1f;
  --mnav-text: #e5e5e5;
  --mnav-muted: #b3b3b3;
  --mnav-danger-text: #ff9b8f;
  --mnav-warning-text: #f5c26b;
  --mnav-success-text: #8fd6a1;
  --mnav-info-text: #9ccbf5;
}
:root, [data-bs-theme] {
  --tblr-font-sans-serif: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-primary: var(--mnav-primary);
  --tblr-primary-rgb: var(--mnav-primary-rgb);
  --tblr-primary-fg: var(--mnav-on-primary);
  --tblr-primary-darken: var(--mnav-primary-dark);
  --tblr-link-color: var(--mnav-primary);
  --tblr-link-color-rgb: var(--mnav-primary-rgb);
  --tblr-link-hover-color: var(--mnav-primary-dark);
}
/* Sidomenyn och sidhuvudet på svarssidan är mörka också i ljust läge; där gäller den ljusa varianten för länkar */
.sidebar-brand { --tblr-link-color: #f6a9b5; }
:root:not([data-bs-theme=dark]) { --tblr-body-bg: #ffffff; }
body { font-family: var(--tblr-font-sans-serif); font-feature-settings: "cv03", "cv04", "cv11"; }
button, input, select, textarea, .form-control, .form-select, .btn { font-family: inherit; }

/* ---------- Layouten (Boknavet): mörk sidomeny, sidhuvud, vit sida ---------- */
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 2000; padding: .5rem 1rem; background: var(--mnav-surface); color: var(--mnav-text); border: 2px solid var(--mnav-primary); border-radius: var(--tblr-border-radius); font-weight: 600; }
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }
.sidebar-brand {
  --tblr-navbar-bg: var(--mnav-sidebar);
  --tblr-navbar-border-color: var(--mnav-sidebar);
  background: var(--mnav-sidebar) !important;
}
.sidebar-brand .nav-link { margin: 1px .5rem; color: rgba(255, 255, 255, .85); }
.sidebar-brand .nav-item.active .nav-link,
.sidebar-brand .nav-link:hover { background: rgba(255, 255, 255, .1); border-radius: var(--tblr-border-radius); color: #fff; }
/* Aktiv sida syns också utan färg: tjock linje till vänster */
.sidebar-brand .nav-item.active .nav-link { box-shadow: inset 3px 0 0 #fff; font-weight: 600; }
.sidebar-brand .nav-link-icon { color: rgba(255, 255, 255, .8) !important; }
.sidebar-subtitle { color: rgba(255, 255, 255, .78); font-size: .8rem; padding: .5rem 1rem; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.brand-link { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-weight: 700; }
.sidebar-brand .brand-link { color: #fff; }
.brand-icon { width: 1.6rem; height: 1.6rem; }
.sidebar-brand .avatar { color: #fff !important; background-color: rgba(255, 255, 255, .16) !important; }
.top-header .avatar, .top-header .help-link { color: var(--mnav-text); }
.avatar { background-color: var(--mnav-primary-soft); color: var(--mnav-primary); font-weight: 600; }
.help-link { display: inline-flex; align-items: center; gap: .35rem; }
html { background-color: var(--tblr-body-bg); }
.auth-page { background-color: var(--tblr-body-bg); background-image: linear-gradient(180deg, var(--mnav-primary-soft) 0%, var(--tblr-body-bg) 60%); }
.support-banner { background: #fde9b6; color: #3d2a00; border-bottom: 1px solid #e6c46a; }
.support-banner .btn-dark { --tblr-btn-color: #fff; }
/* Statusmeddelanden från Roligt (src/views/partials/status-banner.ejs). Egen bakgrund och text i båda färglägena, så att
   kontrasten håller (minst 4.5:1, WCAG 1.4.3); typen står också i texten, inte bara i färgen (1.4.1). */
.status-banner { border-bottom: 1px solid; }
.status-banner .icon { flex: 0 0 auto; }
.status-banner-text { min-width: 0; overflow-wrap: anywhere; }
.status-banner-body { white-space: pre-line; overflow-wrap: anywhere; }
.status-banner h3 { overflow-wrap: anywhere; }
.status-banner-information { background: #e3eefb; color: #0d2a4a; border-color: #9fbfe6; }
.status-banner-underhall { background: #fde9b6; color: #3d2a00; border-color: #e6c46a; }
.status-banner-storning { background: #fadcdc; color: #5a0d12; border-color: #e3a0a4; }
.status-banner-lost { background: #dcf1e2; color: #0d3a1c; border-color: #93cfa5; }
.status-banner-close { --tblr-btn-color: currentColor; --tblr-btn-bg: transparent; --tblr-btn-border-color: currentColor;
  --tblr-btn-hover-color: currentColor; --tblr-btn-hover-bg: rgba(0, 0, 0, .08); --tblr-btn-hover-border-color: currentColor; }
.status-org-list { max-height: 14rem; overflow-y: auto; }
.page-header { margin-bottom: .5rem; }
.footer { color: var(--mnav-muted); }
.footer a { text-decoration: underline; text-underline-offset: .15em; }
/* Sidomenyn och sidhuvudet bryts hellre än att sidan rullar i sidled (WCAG 1.4.10) */
.navbar-brand { white-space: normal; min-width: 0; flex-shrink: 1; }
@media (max-width: 991.98px) { .sidebar-brand .navbar-brand { flex: 1 1 0; } }

/* Grupper i sidomenyn (som i Boknavet): gruppen fälls ut, och gruppen med den aktiva sidan är utfälld från början */
.sidebar-brand .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding-top: 0; }
.sidebar-brand .dropdown-menu .dropdown-item { margin: 1px .5rem; padding-top: .4rem; padding-bottom: .4rem; padding-left: calc(var(--tblr-sidebar-nav-padding-x, .75rem) + 2.25rem); color: rgba(255, 255, 255, .82); border-radius: var(--tblr-border-radius); }
.sidebar-brand .dropdown-menu .dropdown-item:hover, .sidebar-brand .dropdown-menu .dropdown-item.active { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar-brand .dropdown-menu .dropdown-item.active { box-shadow: inset 3px 0 0 #fff; font-weight: 600; }
.sidebar-brand .nav-group.active > .nav-link { background: transparent; box-shadow: none; font-weight: 600; }

/* Inställningarna: brödsmulan tillbaka till översikten, flikraden och korten */
.page-pretitle a { min-height: 1.5rem; display: inline-flex; align-items: center; }
.page-pretitle .breadcrumb { margin-bottom: .25rem; }
.page-pretitle .breadcrumb .icon { width: 1rem; height: 1rem; }
.tab-bar { flex-wrap: wrap; }
.tab-bar .nav-link.active { font-weight: 600; border-bottom: 2px solid var(--mnav-primary); }
.search-narrow { max-width: 32rem; }
.settings-links li + li { margin-top: .75rem; }

/* Kort och tabeller som i Boknavet: tunn ram utan skugga, tabeller direkt på sidan */
.card {
  --tblr-card-border-color: var(--mnav-border);
  --tblr-card-box-shadow: none;
  --tblr-card-cap-bg: transparent;
}
.card-footer { background: transparent; }
.card:has(> .table-responsive > .card-table),
.card:has(> .card-table) { background: transparent; border: 0; box-shadow: none; }
.card:has(> .table-responsive > .card-table) > .card-header,
.card:has(> .card-table) > .card-header { padding: 0 0 .5rem; border: 0; min-height: 0; }
.card:has(> .table-responsive > .card-table) > .card-header .card-title { font-size: 1rem; }
.card:has(> .table-responsive > .card-table) > .card-footer { padding-left: 0; padding-right: 0; border: 0; }
.card:has(> .table-responsive > .card-table) > .card-body { padding-left: 0; padding-right: 0; }
.table thead th { background: transparent; padding-top: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--mnav-border-strong); }
.card-table > :not(caption) > * > * { padding-top: .8rem; padding-bottom: .8rem; }
.card-table tr > :first-child { padding-left: 1rem; }
.card-table tr > :last-child { padding-right: 1rem; }
.card:has(> .table-responsive > .card-table) > .table-responsive,
.card > .card-table { border: 1px solid var(--mnav-border); border-radius: var(--tblr-border-radius-lg); background: var(--mnav-surface); }
.table tbody tr:hover > td, .table tbody tr:hover > th { background: var(--mnav-row-hover); }
/* Text för skärmläsare (position: absolute) i en tabell stannar i tabellens rullningsyta i stället för att sidan rullar i
   sidled (WCAG 1.4.10), som i Boknavet */
.table-responsive, .modal-body { position: relative; }

/* Formulär: ramar och fokus med minst 3:1 (WCAG 1.4.11, 2.4.7) */
.form-control, .form-select, .form-check-input { border-color: var(--mnav-field-border); }
:focus-visible { outline: 2px solid var(--mnav-primary); outline-offset: 2px; }
.sidebar-brand :focus-visible, .respond-header :focus-visible { outline-color: #fff; }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--tblr-bg-surface-secondary); border-style: dashed; color: var(--tblr-secondary); cursor: not-allowed;
}
.btn-close { opacity: .7; }
.modal-header .modal-title { font-size: var(--tblr-font-size-h3); line-height: var(--tblr-line-height-h3); }
[role=region][tabindex="0"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Meddelanden: ikon och text skiljer fel, varning, information och lyckat från varandra och från
   primärfärgen, också utan färgseende. Meddelanden utan egen ikon får den här. ---------- */
.alert:not(:has(> .alert-icon)) { padding-inline-start: calc(var(--tblr-alert-padding-x) + var(--tblr-alert-icon-size) + var(--tblr-alert-gap)); }
.alert:not(:has(> .alert-icon))::before {
  content: ""; position: absolute; inset-inline-start: var(--tblr-alert-padding-x); top: calc(var(--tblr-alert-padding-y) + .05rem);
  width: var(--tblr-alert-icon-size); height: var(--tblr-alert-icon-size); background-color: currentColor;
  -webkit-mask: var(--mnav-alert-icon) center / contain no-repeat; mask: var(--mnav-alert-icon) center / contain no-repeat;
}
.alert { --mnav-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E %3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E %3Cpath d='M12 9h.01' /%3E %3Cpath d='M11 12h1v4h1' /%3E %3C/svg%3E"); }
.alert-danger { --mnav-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E %3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E %3Cpath d='M12 8v4' /%3E %3Cpath d='M12 16h.01' /%3E %3C/svg%3E"); color: var(--mnav-danger-text); }
.alert-warning { --mnav-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0' /%3E %3Cpath d='M12 16h.01' /%3E %3C/svg%3E"); color: var(--mnav-warning-text); }
.alert-success { --mnav-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E %3Cpath d='M5 12l5 5l10 -10' /%3E %3C/svg%3E"); color: var(--mnav-success-text); }
.alert-info { color: var(--mnav-info-text); }
.alert .alert-title, .alert strong, .alert a, .alert .alert-link { color: inherit; }
.alert-danger { border-inline-start: 4px solid currentColor; }
.alert-warning { border-inline-start: 4px solid currentColor; }
.text-danger, .invalid-feedback { color: var(--mnav-danger-text) !important; }
.text-warning { color: var(--mnav-warning-text) !important; }
.text-success { color: var(--mnav-success-text) !important; }
/* Knappar som tar bort något: kontur i tegelrött, aldrig fyllda som primärknappen */
.btn-danger { --tblr-btn-bg: transparent; --tblr-btn-color: var(--mnav-danger-text); --tblr-btn-border-color: var(--mnav-danger-text); --tblr-btn-hover-bg: var(--mnav-danger-text); --tblr-btn-hover-color: var(--mnav-surface); --tblr-btn-active-bg: var(--mnav-danger-text); --tblr-btn-active-color: var(--mnav-surface); }
.btn-outline-danger, .btn-ghost-danger { --tblr-btn-color: var(--mnav-danger-text); --tblr-btn-border-color: var(--mnav-danger-text); }

/* Tablers ljusa märken har för låg kontrast (2,5–4,4:1); mörkare text på samma bakgrund ger minst 4,5:1 i ljust läge */
:root:not([data-bs-theme=dark]) .bg-green-lt { color: #1b6b2b !important; }
:root:not([data-bs-theme=dark]) .bg-secondary-lt { color: #545454 !important; }
:root:not([data-bs-theme=dark]) .bg-blue-lt { color: #0353a4 !important; }
:root:not([data-bs-theme=dark]) .bg-azure-lt { color: #155e8a !important; }
:root:not([data-bs-theme=dark]) .bg-red-lt { color: #a61b1b !important; }
:root:not([data-bs-theme=dark]) .bg-orange-lt { color: #8f3f00 !important; }
:root:not([data-bs-theme=dark]) .bg-yellow-lt { color: #6e4b00 !important; }
:root:not([data-bs-theme=dark]) .bg-primary-lt { color: var(--mnav-primary-dark) !important; }
:root:not([data-bs-theme=dark]) .text-secondary, :root:not([data-bs-theme=dark]) .text-muted, :root:not([data-bs-theme=dark]) .form-hint { color: var(--mnav-muted) !important; }
[data-bs-theme=dark] .text-secondary, [data-bs-theme=dark] .text-muted, [data-bs-theme=dark] .form-hint { color: var(--mnav-muted) !important; }
/* Mörkt läge: Tablers ljusa märken behåller den mörka färgen som text, och inaktiva flikar är grå #737373 (3–3,8:1);
   ljusare text ger minst 4,5:1 mot märkets och sidans bakgrund */
[data-bs-theme=dark] .bg-green-lt { color: #8fd6a1 !important; }
[data-bs-theme=dark] .bg-secondary-lt { color: #d0d0d0 !important; }
[data-bs-theme=dark] .bg-blue-lt { color: #9ccbf5 !important; }
[data-bs-theme=dark] .bg-azure-lt { color: #9fd3f2 !important; }
[data-bs-theme=dark] .bg-red-lt { color: #ff9b8f !important; }
[data-bs-theme=dark] .bg-orange-lt { color: #ffb37a !important; }
[data-bs-theme=dark] .bg-yellow-lt { color: #f5c26b !important; }
[data-bs-theme=dark] .bg-primary-lt { color: var(--mnav-primary) !important; }
[data-bs-theme=dark] .nav-tabs .nav-link:not(.active) { color: var(--mnav-muted); }
.badge[class*="bg-"]:not([class*="-lt"]):not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-yellow) { --tblr-badge-color: #fff; color: #fff; }
.badge.bg-primary { --tblr-badge-color: var(--mnav-on-primary); color: var(--mnav-on-primary); }

/* Länkar i löptext syns utan färg (WCAG 1.4.1) */
.page-body p a:not(.btn), .page-body td a:not(.btn), .page-body .form-hint a, .page-body li > a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item), .modal-body p a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
/* Långa knapptexter bryts på smal skärm i stället för att sidan rullar i sidled */
.page-body .btn { white-space: normal; }
@media (max-width: 575.98px) { .row.g-4, .row.g-5 { --tblr-gutter-x: 1rem; } }

/* Utskrift: bara innehållet */
@media print {
  .navbar-vertical, header.navbar, .footer, .skip-link { display: none !important; }
  .page-wrapper { margin: 0 !important; }
}

/* ---------- Offentliga sidor, hjälpen och statussidan ---------- */
.public-navbar { background: var(--mnav-sidebar) !important; --tblr-navbar-bg: var(--mnav-sidebar); --tblr-navbar-border-color: var(--mnav-sidebar); min-height: 3.5rem; }
.public-navbar .brand-link { color: #fff; min-height: 2.75rem; padding-block: .25rem; }
.public-navbar :focus-visible { outline-color: #fff; }
.public-footer { border-top: 1px solid var(--mnav-border); padding: 1.5rem 0; margin-top: 3rem; color: var(--mnav-muted); }
.public-page, .prose { max-width: 52rem; }
.public-page h1, .public-page h2 { overflow-wrap: break-word; hyphens: auto; }
.public-page a:not(.btn), .public-footer a { text-decoration: underline; text-underline-offset: .15em; }
/* Kod (API-dokumentationen) radbryts i stället för att sidan rullar i sidled (WCAG 1.4.10) */
.public-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.help-hero { background: linear-gradient(180deg, var(--mnav-primary) 0%, var(--mnav-primary-dark) 100%); padding: 1.25rem 0; border-radius: var(--tblr-border-radius-lg); margin-bottom: 1.25rem; }
[data-bs-theme=dark] .help-hero { background: var(--mnav-primary-soft); }
.help-search { max-width: 44rem; }
.help-hero .help-search .form-control { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.help-hero .btn { --tblr-btn-bg: #fff; --tblr-btn-color: #3b0d18; --tblr-btn-border-color: #fff; --tblr-btn-hover-bg: #f7e9ec; --tblr-btn-hover-color: #3b0d18; }
.help-hero :focus-visible { outline-color: #fff; }
[data-bs-theme=dark] .help-hero :focus-visible { outline-color: var(--mnav-primary); }

/* ---------- Övrigt i adminvyerna ---------- */
.form-narrow { max-width: 32rem; }
.qr svg { width: 200px; max-width: 100%; height: auto; background: #fff; padding: 4px; border-radius: 4px; }
.secret { font-family: var(--tblr-font-monospace); letter-spacing: .1em; }
.invite-link { word-break: break-all; }
.preview-text { white-space: pre-line; }
/* Indrag efter djup i trädet (inline-style stoppas av CSP); på smal skärm mindre indrag, så att raden får plats */
.depth-0 { padding-left: 0.75rem !important; } .depth-1 { padding-left: 2rem !important; } .depth-2 { padding-left: 3.25rem !important; }
.depth-3 { padding-left: 4.5rem !important; } .depth-4 { padding-left: 5.75rem !important; } .depth-5 { padding-left: 7rem !important; }
.depth-6 { padding-left: 8.25rem !important; }
@media (max-width: 575.98px) {
  .depth-1 { padding-left: 1.25rem !important; } .depth-2 { padding-left: 2rem !important; } .depth-3 { padding-left: 2.75rem !important; }
  .depth-4 { padding-left: 3.5rem !important; } .depth-5 { padding-left: 4.25rem !important; } .depth-6 { padding-left: 5rem !important; }
}
.logo-preview { max-height: 80px; max-width: 100%; }

/* ---------- Svarssidan och medarbetarvyn (steg 6): mobil först, tryckytor på minst 44 px, inget sidledes rullande
   vid 320 px. Kommunens färg kommer från /tema.css (--mnav-org, --mnav-on-org); utan egen färg primärfärgen. ---------- */
:root { --mnav-org: var(--mnav-primary); --mnav-on-org: var(--mnav-on-primary); }
body.respond { background: var(--tblr-body-bg); font-size: 1rem; }
.respond-wrap { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
.respond-header { border-top: 6px solid var(--mnav-org); padding: 1rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--mnav-border); }
.respond-header :focus-visible { outline-color: var(--mnav-primary); }
.respond-logo { max-height: 48px; max-width: 100%; }
.respond-org { font-weight: 600; font-size: 1.1rem; }
.respond-title { font-size: 1.5rem; margin: 0 0 1rem; overflow-wrap: anywhere; }
.respond-intro { white-space: pre-line; margin-bottom: 1rem; }
.respond-info h2, .respond-section { font-size: 1.15rem; margin: 1rem 0 .5rem; }
.respond-progress { margin-bottom: 1rem; }
.respond-progress label { display: block; font-size: .9rem; }
.respond-progress progress { width: 100%; height: .75rem; accent-color: var(--mnav-org); }
.respond-q { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.respond-q legend { font-weight: 600; font-size: 1.05rem; margin-bottom: .5rem; float: none; overflow-wrap: anywhere; }
.respond-scale { display: flex; flex-direction: column; gap: .5rem; }
.respond-scale-11 { flex-direction: row; flex-wrap: wrap; }
.respond-option { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--mnav-field-border); border-radius: .5rem; cursor: pointer; background: var(--mnav-surface); }
.respond-option:has(input:checked) { border-color: var(--mnav-org); box-shadow: inset 0 0 0 1px var(--mnav-org); }
[data-bs-theme=dark] .respond-option:has(input:checked) { border-color: var(--mnav-text); box-shadow: inset 0 0 0 1px var(--mnav-text); }
.respond-option input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin: 0; accent-color: var(--mnav-org); }
.respond-option:focus-within { outline: 3px solid var(--mnav-primary); outline-offset: 2px; }
.respond-num { min-width: 44px; justify-content: center; flex: 1 0 44px; }
.respond-ends { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; flex-wrap: wrap; }
.respond-text { min-height: 6rem; }
.respond-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.respond-btn { min-height: 44px; min-width: 44px; padding-left: 1.25rem; padding-right: 1.25rem; }
.respond .btn-primary { --tblr-btn-bg: var(--mnav-org); --tblr-btn-border-color: var(--mnav-org); --tblr-btn-color: var(--mnav-on-org); --tblr-btn-hover-bg: var(--mnav-org); --tblr-btn-hover-color: var(--mnav-on-org); --tblr-btn-active-bg: var(--mnav-org); --tblr-btn-active-color: var(--mnav-on-org); }
.respond .btn-primary:hover { filter: brightness(.92); }
.respond-footer { padding-block: 1.5rem; color: var(--mnav-muted); }
/* Förhandsgranskningen (beslut 2026-10-13): tydligt märkt överst, i varningens gula så att den inte förväxlas med svarssidan */
.preview-banner { background: #fde9b6; color: #3d2a00; border-bottom: 1px solid #e6c46a; }
.preview-banner a { color: #3d2a00; text-decoration: underline; text-underline-offset: .15em; }
.preview-banner :focus-visible { outline-color: #3d2a00; }
.respond-footer a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Diagrammen (src/charts): datafärgerna är validerade för färgblindhet och byts inte. Tabellen bredvid
   diagrammet på bred skärm, under på smal. Mörkt läge byter text och linjer. ---------- */
.chart { margin: 0 0 1.5rem; }
.chart figcaption { font-weight: 600; margin-bottom: .5rem; }
.chart-body { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.chart-svg { flex: 2 1 22rem; min-width: 0; }
.chart-svg svg { max-width: 100%; height: auto; }
.chart-data { flex: 1 1 16rem; min-width: 0; overflow-x: auto; }
.chart-below > .chart-svg, .chart-below > .chart-data { flex-basis: 100%; }
.chart-below > .chart-svg svg { max-width: 48rem; }
.chart-table caption { caption-side: top; font-size: .85rem; color: var(--mnav-muted); }
[data-bs-theme=dark] .chart-root .ch-label, [data-bs-theme=dark] .chart-root .ch-muted { fill: #c3c2b7; }
[data-bs-theme=dark] .chart-root .ch-value { fill: #f0efec; }
[data-bs-theme=dark] .chart-root .ch-grid, [data-bs-theme=dark] .chart-root .ch-track, [data-bs-theme=dark] .chart-root .ch-axis { stroke: #4a4a47; }
[data-bs-theme=dark] .chart-root .ch-ref, [data-bs-theme=dark] .chart-root .ch-mark { stroke: #f0efec; }
[data-bs-theme=dark] .chart-root .ch-empty { fill: #2c2c2a; }

/* ---------- Handlingsplanen (steg 8): stegen överst och status i HR-översikten (med text bredvid, aldrig bara färg) ---------- */
.plan-steps { display: flex; flex-wrap: wrap; gap: .25rem .75rem; list-style: none; padding: 0; margin: 0; }
.plan-steps li a { display: inline-block; padding: .35rem .6rem; border: 1px solid var(--mnav-field-border); border-radius: 4px; text-decoration: none; }
.plan-steps li.plan-step-done a { border-color: var(--mnav-primary); background: var(--mnav-primary-soft); color: var(--mnav-primary); }
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #c3c2b7; }
.status-paborjad { background: #d9a400; } .status-dialog { background: #5598e7; } .status-atgarder { background: #104281; } .status-uppfoljd { background: #2f7d32; }

/* ---------- Startsidan om tjänsten (beslut 2026-10-13): mobil först, samma tokens i ljust och mörkt läge,
   illustrationer i HTML, CSS och SVG med exempelsiffror ---------- */
.landing { background: var(--tblr-body-bg); color: var(--tblr-body-color); font-size: 1rem; }
.landing-wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 768px) { .landing-wrap { padding-inline: 2rem; } }
.landing-header { border-bottom: 1px solid var(--mnav-border); background: var(--tblr-body-bg); }
.landing-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: .75rem; }
.landing-brand { font-size: 1.15rem; color: var(--tblr-body-color); min-height: 2.75rem; }
.landing-brand .brand-icon { color: var(--mnav-primary); }
.landing-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; order: 3; flex-basis: 100%; }
.landing-nav a { color: var(--tblr-body-color); text-decoration: none; padding-block: .35rem; }
.landing-nav a:hover { color: var(--mnav-primary); text-decoration: underline; text-underline-offset: .3em; }
.landing-login { margin-left: auto; }
.landing-login .icon { margin-right: .35rem; }
@media (min-width: 768px) { .landing-nav { order: 0; flex-basis: auto; } }

.landing-hero { background: linear-gradient(180deg, var(--mnav-primary-soft) 0%, var(--tblr-body-bg) 100%); padding-block: 2.5rem 3rem; }
.landing-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .landing-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } .landing-hero { padding-block: 4.5rem 5rem; } }
.landing-eyebrow { color: var(--mnav-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-bottom: .75rem; }
.landing h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1rem; overflow-wrap: break-word; hyphens: auto; }
.landing-lead { font-size: 1.15rem; line-height: 1.6; max-width: 40rem; color: var(--mnav-muted); }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.landing-figure { margin: 0; }

.landing-section { padding-block: 3rem; }
@media (min-width: 992px) { .landing-section { padding-block: 4.5rem; } }
.landing-tint { background: var(--tblr-bg-surface-secondary); }
.landing h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .75rem; overflow-wrap: break-word; hyphens: auto; }
.landing h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; }
.landing-intro { font-size: 1.05rem; color: var(--mnav-muted); max-width: 40rem; margin-bottom: 2rem; }
.landing-section a:not(.btn), .landing-footer a { color: var(--mnav-primary); text-decoration: underline; text-underline-offset: .15em; }

.feature-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.feature { background: var(--mnav-surface); border: 1px solid var(--mnav-border); border-radius: 14px; padding: 1.25rem; }
.feature p { margin: 0; color: var(--mnav-muted); line-height: 1.55; }
.feature-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--mnav-primary-soft); color: var(--mnav-primary); margin-bottom: .75rem; }
.feature-grid-compact .feature { padding: 1rem 1.15rem; }

.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: steg; }
.steps-grid li { counter-increment: steg; background: var(--mnav-surface); border-radius: 14px; padding: 1.25rem; border: 1px solid var(--mnav-border); }
.steps-grid li::before { content: counter(steg); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mnav-primary); color: var(--mnav-on-primary); font-weight: 700; margin-bottom: .75rem; }
.steps-grid p { margin: 0; color: var(--mnav-muted); line-height: 1.55; }

.split { display: grid; gap: 2rem; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }
.check-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; padding-block: .35rem; }
.check-list .icon { color: var(--mnav-primary); flex: none; margin-top: .15rem; }

.landing-cta { text-align: center; }
.landing-cta .landing-actions { justify-content: center; }
.landing-footer { border-top: 1px solid var(--mnav-border); padding-block: 1.5rem; color: var(--mnav-muted); font-size: .9rem; }
.landing-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.landing-footer a { display: inline-block; padding-block: .25rem; }

/* Illustrationerna: kort i appens stil med exempelsiffror */
.demo-card { background: var(--mnav-surface); border: 1px solid var(--mnav-border); border-radius: 16px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(59, 13, 24, .08); }
.demo-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.demo-tag { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 999px; background: var(--mnav-primary-soft); color: var(--mnav-primary); }
.demo-title { font-weight: 600; }
.demo-gauge { display: grid; justify-items: center; margin-bottom: .75rem; }
.demo-gauge svg { width: min(100%, 16rem); height: auto; }
.demo-track { stroke: var(--mnav-border); }
.demo-value { stroke: var(--mnav-primary); }
.demo-number { font-size: 40px; font-weight: 700; fill: var(--tblr-body-color); }
.demo-caption { color: var(--mnav-muted); font-size: .9rem; }
.demo-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.demo-bars li { display: grid; grid-template-columns: 6.5rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .9rem; }
.demo-bar { height: .6rem; border-radius: 999px; background: var(--mnav-border); overflow: hidden; }
.demo-fill { display: block; height: 100%; border-radius: 999px; background: var(--mnav-primary); }
.demo-w76 { width: 76%; } .demo-w78 { width: 78%; } .demo-w80 { width: 80%; }
.demo-note { margin: .75rem 0 0; font-size: .85rem; color: var(--mnav-muted); }
.showcase { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 992px) { .showcase { grid-template-columns: 1.4fr 1fr; } }
.showcase-item { margin: 0; }
.heat-scroll { overflow-x: auto; }
.heat { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: .9rem; }
.heat th { font-weight: 500; text-align: left; padding: .25rem; }
.heat thead th { font-size: .8rem; color: var(--mnav-muted); }
.heat td { text-align: center; font-weight: 600; border-radius: 8px; padding: .6rem .25rem; min-width: 3.5rem; }
/* Samma blå skala som diagrammen, med text som ger minst 4,5:1 */
.heat-1 { background: #cde2fb; color: #0b0b0b; } .heat-2 { background: #9ec5f4; color: #0b0b0b; }
.heat-3 { background: #256abf; color: #ffffff; } .heat-4 { background: #184f95; color: #ffffff; }
.plan-demo { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.plan-demo li { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--mnav-border); }
.plan-demo .plan-dot { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--mnav-field-border); font-weight: 700; font-size: .85rem; flex: none; }
.plan-demo .plan-dot .icon { width: 1rem; height: 1rem; }
.plan-demo li.done .plan-dot { background: var(--mnav-primary); border-color: var(--mnav-primary); color: var(--mnav-on-primary); }
.plan-demo li.current { border-color: var(--mnav-primary); box-shadow: inset 3px 0 0 var(--mnav-primary); font-weight: 600; }
/* Rutnätens fält får krympa under innehållets minsta bredd; värmekartan rullar då i sin egen yta (WCAG 1.4.10) */
.landing-hero-grid > *, .showcase > *, .feature-grid > *, .steps-grid > *, .split > * { min-width: 0; }
.status-form-card { max-width: 48rem; }