/* Self-hostade typsnitt (CSP self) — Spectral (serif), IBM Plex Sans/Mono */
@font-face{font-family:"Spectral";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/spectral-400.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/spectral-500.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/spectral-600.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/spectral-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/plex-sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/plex-mono-500.woff2") format("woff2")}
/* InterimConnect designsystem (gront+guld) — fran Claude Design-handoff. */
/* Typsnitt: fallback-stackar nu; self-hosta Spectral/IBM Plex (woff2+@font-face) som polish-steg. */
/* =============================================================================
   InterimConnect — färgtokens.
   Riktning: "senior & institutionell" — djup skogsgrön bläck på varmt papper, med en
   sparsam guld-/mässingsaccent reserverad för "aktuell / upplåst / nyckel-CTA".
   (Grönt + guld = egen, distinkt identitet; medvetet INTE navy/blått som största aktören.)
   Token-NAMNEN är det stabila kontraktet (delas med Jinja-appen); VÄRDENA är varumärket.
   ========================================================================== */

:root {
  /* --- Brand / primär (djup skogsgrön = senior, stabil, institutionell) --- */
  --color-brand:        #1f4538;
  --color-brand-strong: #142e25;
  --color-brand-soft:   #e7efe9;
  --color-on-brand:     #ffffff;

  /* --- Accent (guld/mässing — sparsamt: aktuell/upplåst/nyckel-CTA-highlight) --- */
  --color-accent:        #b0832f;
  --color-accent-strong: #8c6726;   /* hover/press för accent-ytor */
  --color-accent-soft:   #f4ead4;

  /* --- Neutraler (varmt papper + svalt bläck) --- */
  --color-bg:            #f6f4ef;   /* sidbakgrund: varm off-white / papper */
  --color-surface:       #ffffff;   /* kort/paneler */
  --color-surface-2:     #efece4;   /* nedsänkta ytor, hover-rader */
  --color-text:          #1b2330;   /* bläck (svalt, nästan navy-svart) */
  --color-muted:         #5b6675;   /* sekundär text */
  --color-border:        #e4ded2;   /* hårlinje (varm-neutral) */
  --color-border-strong: #d2cbbd;   /* fält-/input-kant */

  /* --- Semantiska statusfärger (text + mjuk bakgrund för pills/alerts) --- */
  --color-success: #1f7a4d;  --color-success-soft: #e6f1ea;
  --color-warning: #946200;  --color-warning-soft: #f6ecd6;
  --color-danger:  #a8271d;  --color-danger-soft:  #f6e6e3;
  --color-info:    #2a5c8a;  --color-info-soft:    #e7eef5;
  --color-neutral: #5b6675;  --color-neutral-soft: #ecebe5;

  /* --- Fokusring (a11y — navy) --- */
  --focus: 0 0 0 3px rgba(31, 69, 56, .32);

  /* --- Semantiska alias (bekvämlighet; pekar på baserna ovan) --- */
  --surface-page:   var(--color-bg);
  --surface-card:   var(--color-surface);
  --surface-sunken: var(--color-surface-2);
  --text-body:      var(--color-text);
  --text-heading:   var(--color-brand-strong);
  --text-subtle:    var(--color-muted);
  --border-subtle:  var(--color-border);
  --border-field:   var(--color-border-strong);
}
/* =============================================================================
   InterimConnect — typografitokens.
   Display/rubriker: Spectral (klassisk, lugn serif — förtroende & arv).
   Brödtext/UI: IBM Plex Sans (humanistisk grotesk — B2B-läsbarhet, neutral-varm).
   Kod/ID: IBM Plex Mono. Self-hostas i produktion (CSP 'self') — se fonts.css.
   ========================================================================== */

:root {
  /* --- Typsnittsfamiljer --- */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;        /* display + rubriker */
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* brödtext/UI */
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* --- Typskala --- */
  --text-xs:   .78rem;
  --text-sm:   .88rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.6rem;
  --text-4xl:  3.4rem;   /* hero-display */

  /* --- Radavstånd --- */
  --leading:       1.55;   /* brödtext */
  --leading-tight: 1.16;   /* rubriker */

  /* --- Teckenavstånd --- */
  --tracking-tight: -0.01em;   /* stora serif-rubriker */
  --tracking-wide:   0.06em;   /* versal-etiketter / eyebrows */

  /* --- Vikter --- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}
/* =============================================================================
   InterimConnect — spacing, radie, skugga, layout.
   ========================================================================== */

:root {
  /* --- Spacing-skala --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;   /* sektions-rytm på landningssida */

  /* --- Radie (sober, lågt rundat — institutionellt, inte lekfullt) --- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* --- Skugga (mjuk, låg höjd — premium lugn, aldrig dramatisk) --- */
  --shadow-sm: 0 1px 2px rgba(20, 40, 63, .06);
  --shadow:    0 2px 10px rgba(20, 40, 63, .07);
  --shadow-lg: 0 10px 30px rgba(20, 40, 63, .10);

  /* --- Rörelse (lugn, ingen studs) --- */
  --ease: cubic-bezier(.2, .6, .2, 1);   /* @kind other */
  --dur:  160ms;                          /* @kind other */

  /* --- Layout --- */
  --container: 72rem;
  --container-narrow: 44rem;
}
/* =============================================================================
   InterimConnect — komponent-CSS. Refererar ENBART tokens (tokens/*.css).
   Justera utseendet via tokens; strukturen/klassnamnen är kontraktet mot templates.

   INVARIANT 1 (säkerhetskritiskt): anonym vs upplåst konsultprofil är TVÅ SKILDA
   komponenter (.consultant-card vs .profile-identity) — ALDRIG en CSS-toggle. Synlighet
   styrs server-side; en .badge-färg får aldrig vara grinden. Se README.
   ========================================================================== */

/* --- Bas --- */
* { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* Versal-etikett / eyebrow */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

/* --- Layout --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }
.main { padding: var(--space-6) 0; }
.stack > * + * { margin-top: var(--space-4); }

/* --- App-skal / header + nav --- */
.app-header {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: center; }
.nav a { color: var(--color-text); font-size: var(--text-sm); padding: var(--space-1) 0; }
.nav a:hover { color: var(--color-brand); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--color-brand); box-shadow: inset 0 -2px 0 var(--color-accent); }
/* --- Kontomeny (personikon + dropdown, JS-fritt via <details>) --- */
.usermenu { position: relative; margin-left: var(--space-2); }
.usermenu__trigger {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-muted);
}
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__trigger::marker { content: ''; }
.usermenu__trigger:hover { background: var(--color-border); color: var(--color-brand); }
.usermenu[open] .usermenu__trigger { background: var(--color-brand-soft); color: var(--color-brand); border-color: var(--color-brand); }
.usermenu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 50;
  min-width: 12rem; padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,20,30,.12);
}
.usermenu__who { font-size: var(--text-xs); color: var(--color-muted); margin: 0 0 var(--space-1); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); }
.usermenu__panel a { display: block; padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text); }
.usermenu__panel a:hover { background: var(--color-brand-soft); color: var(--color-brand); text-decoration: none; }

/* --- Varumärke: wordmark + IC-monogram --- */
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-serif); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); letter-spacing: var(--tracking-tight);
  color: var(--color-brand-strong); text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark__interim { color: var(--color-brand-strong); }
.wordmark__connect { color: var(--color-accent); }
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: var(--color-brand); color: var(--color-on-brand);
  font-family: var(--font-serif); font-weight: var(--weight-semibold);
  font-size: .9rem; letter-spacing: .02em;
}
.monogram--lg { width: 3.25rem; height: 3.25rem; font-size: 1.35rem; border-radius: var(--radius); }

/* --- Sidhuvud (titel + lede) --- */
.page-header { margin-bottom: var(--space-5); }
.page-header h1 { margin-bottom: var(--space-2); }
.lede { color: var(--color-muted); font-size: var(--text-lg); font-family: var(--font-serif); font-weight: var(--weight-normal); margin: 0; }

/* --- Section / panel (kort-container) --- */
.section { margin-bottom: var(--space-6); }
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: var(--space-4); }
.panel__title { margin-top: 0; }

/* --- Knappar --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn--primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn--primary:hover { background: var(--color-brand-strong); }
.btn--accent { background: var(--color-accent); color: var(--color-on-brand); }
.btn--accent:hover { background: var(--color-accent-strong); }
.btn--secondary { background: var(--color-surface); color: var(--color-brand); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { filter: brightness(.94); }
.btn--ghost { background: transparent; color: var(--color-brand); }
.btn--ghost:hover { background: var(--color-brand-soft); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* --- Formulär --- */
.field { margin-bottom: var(--space-4); }
.field > label, .field-label { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--color-muted); opacity: .8; }
.input:focus, .textarea:focus, .select:focus { outline: none; box-shadow: var(--focus); border-color: var(--color-brand); }
.textarea { min-height: 6rem; resize: vertical; }
.facet { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin: 0; }
.facet > legend { font-weight: var(--weight-medium); font-size: var(--text-sm); padding: 0 var(--space-2); }
.facet label { display: block; font-weight: var(--weight-normal); font-size: var(--text-sm); }
.checks { display: flex; flex-direction: column; gap: var(--space-2); }
.checks--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* Hopfällbara filter-facetter — taxonomin är ~75 alternativ; undvik en kryssrute-vägg. */
details.facet { padding: 0; }
details.facet > summary {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); cursor: pointer; list-style: none;
  font-weight: var(--weight-medium); font-size: var(--text-sm);
}
details.facet > summary::-webkit-details-marker { display: none; }
details.facet > summary::after { content: "\25B8"; color: var(--color-muted); transition: transform var(--dur) var(--ease); }
details.facet[open] > summary::after { transform: rotate(90deg); }
.facet__label { margin-right: auto; }
.facet__count {
  background: var(--color-accent-soft); color: var(--color-accent-strong);
  border-radius: var(--radius-pill); font-size: var(--text-xs);
  padding: .1em .55em; min-width: 1.6em; text-align: center;
}
details.facet > .checks { padding: 0 var(--space-3) var(--space-3); }
.checks--scroll { max-height: 14rem; overflow-y: auto; }

/* FAQ-accordion (vanliga frågor) — hopfällbara fråga/svar, CSP-säkert. */
.faq-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.faq-block { margin-top: var(--space-6); }
.faq-section__title { margin: 0 0 var(--space-3); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.faq-item > summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
  font-weight: var(--weight-medium);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "\002B"; margin-left: auto; color: var(--color-muted); font-size: 1.25em; line-height: 1; transition: transform var(--dur) var(--ease); }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--space-4) var(--space-4); color: var(--color-text); font-size: var(--text-sm); }
.faq-item__a a { color: var(--color-accent-strong); }
.file { font-size: var(--text-sm); }
.helper { color: var(--color-muted); font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }

/* --- Filterformulär (faceted, sidopanel) --- */
.filter { display: flex; flex-direction: column; gap: var(--space-4); }
.filter--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.filter--row .facet { flex: 1 1 12rem; }

/* --- Sök-layout (sidopanel + resultat) --- */
.search-layout { display: grid; grid-template-columns: 17rem 1fr; gap: var(--space-6); align-items: start; }
.search-sidebar { position: sticky; top: var(--space-5); }
.search-results { display: grid; gap: var(--space-4); }
.search-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.result-count { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 56rem) { .search-layout { grid-template-columns: 1fr; } .search-sidebar { position: static; } }

/* --- Statusbadge / pill --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
  padding: .35em .7em; border-radius: var(--radius-pill);
  background: var(--color-neutral-soft); color: var(--color-neutral);
}
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge--neutral { background: var(--color-neutral-soft); color: var(--color-neutral); }
.badge--accent  { background: var(--color-accent-soft);  color: var(--color-accent-strong); }

/* --- Chip / meta-tagg --- */
.meta-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.chip { font-size: var(--text-xs); color: var(--color-muted); background: var(--color-surface-2); border-radius: var(--radius-pill); padding: .25em .7em; }

/* --- Tabell --- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); border-bottom: 2px solid var(--color-border-strong); }
.table tbody tr:hover { background: var(--color-surface-2); }
.table__empty { text-align: center; color: var(--color-muted); padding: var(--space-5); }

/* --- Record-list (ul/li-rader) --- */
.list { list-style: none; margin: 0; padding: 0; }
.list__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; }
.list__item:last-child { border-bottom: 0; }
.list__meta { color: var(--color-muted); font-size: var(--text-sm); }

/* --- Kort (generiskt) --- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { box-shadow: var(--shadow); }
.card__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.card__meta { color: var(--color-muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* --- Konsultkort ANONYMT (Invariant 1: visar ALDRIG namn/foto/CV/kontakt) ---
   "Förseglat" uttryck: en diskret sigill-rad signalerar kuraterad, skyddad identitet. */
.consultant-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.consultant-card:hover { box-shadow: var(--shadow); border-color: var(--color-border-strong); }
.consultant-card__role { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0 0 var(--space-1); }
.consultant-card__pitch { font-size: var(--text-base); color: var(--color-text); margin: 0 0 var(--space-3); }
.consultant-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-muted); font-size: var(--text-sm); align-items: center; }
.consultant-card__lock {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-muted);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.consultant-card__lock .seal { color: var(--color-accent); flex: none; }

/* "Förseglat" sigill-element (rent dekorativt; bär ingen data) */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.seal--lg { width: 3rem; height: 3rem; }

/* --- Profil UPPLÅST (Invariant 1: separat komponent, renderas bara server-side om upplåst) --- */
.profile-identity { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.profile-identity__body { flex: 1 1 18rem; }
.profile-identity__name { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.profile-identity__contact { color: var(--color-muted); }

/* --- Låst-notis (står in för dold identitet — "förseglat", lugnt, premium) --- */
.locked-notice {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); padding: var(--space-5);
  color: var(--color-muted); font-size: var(--text-sm);
}
.locked-notice__title { display: block; font-family: var(--font-serif); font-size: var(--text-base); color: var(--text-heading); margin: 0 0 var(--space-1); }

/* --- Avatar --- */
.avatar { width: 96px; height: 96px; border-radius: var(--radius-lg); object-fit: cover; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.avatar--lg { width: 160px; height: 160px; }
.avatar--sm { width: 40px; height: 40px; border-radius: 50%; }
.avatar--monogram { display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-serif); font-weight: var(--weight-semibold); }

/* --- Dokument / miniatyr --- */

/* --- Alert / flash --- */
.alert { border: 1px solid; border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.alert--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-soft);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert--info    { background: var(--color-info-soft);    border-color: var(--color-info);    color: var(--color-info); }
.alert ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* --- Empty-state --- */
.empty { text-align: center; color: var(--color-muted); padding: var(--space-6) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.empty__title { font-family: var(--font-serif); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-1); }

/* --- Info-notis --- */
.info-notice { color: var(--color-muted); font-style: italic; font-size: var(--text-sm); }

/* --- Hero (landningssida) --- */
.hero { padding: var(--space-8) 0; }
.hero__eyebrow { margin-bottom: var(--space-3); }
.hero__title { font-size: var(--text-4xl); margin: 0 0 var(--space-4); color: var(--color-brand-strong); }
.hero__tagline { font-size: var(--text-lg); color: var(--color-muted); max-width: 40rem; margin: 0 0 var(--space-5); }
.hero--navy { background: var(--color-brand-strong); color: var(--color-on-brand); }
.hero--navy .hero__title { color: var(--color-on-brand); }
.hero--navy .hero__tagline { color: rgba(255,255,255,.78); }

/* --- Stat / KPI --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.stat__value { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-brand); }
.stat__label { color: var(--color-muted); font-size: var(--text-sm); }

/* --- Definition list --- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.dl dt { font-weight: var(--weight-medium); color: var(--color-muted); }
.dl dd { margin: 0; }

/* --- Småtext / hjälp / kod / placeholder --- */
.muted { color: var(--color-muted); }
.placeholder { color: var(--color-muted); }
.code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); background: var(--color-surface-2); padding: .1em .4em; border-radius: var(--radius-sm); }
.divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }

/* full-bleed: bryt ut ur containern (hero) */
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Admin-subnav */
.admin-nav { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); }
.admin-nav a { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-muted); padding:.34rem .72rem; border-radius:999px; text-decoration:none; border:1px solid transparent; white-space:nowrap; }
.admin-nav a:hover { color:var(--color-brand); background:var(--color-surface-2); }
.admin-nav a.is-active { color:var(--color-on-brand); background:var(--color-brand); border-color:var(--color-brand); }

/* Admin "visa som"-banner (guld = forhandsvisningslage) */
.viewas-banner { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:center; background:var(--color-accent-soft); color:var(--color-accent-strong); border-bottom:1px solid var(--color-accent); padding:.5rem var(--space-5); font-size:var(--text-sm); }
.viewas-banner strong { color:var(--color-accent-strong); }
.viewas-banner .btn { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.viewas-banner .btn:hover { background:var(--color-accent-strong); border-color:var(--color-accent-strong); }

/* Dokument-version (konsultens egen profil-uppladdningar) */
.doc-version { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); max-width: 380px; }
.doc-version__thumb { width: 120px; height: auto; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.doc-version__body { margin-top: var(--space-3); }
.doc-version__noimg { width: 120px; min-height: 150px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-muted); font-weight: var(--weight-semibold); }